diff --git a/.cursor/rules/seahaven-admin.mdc b/.cursor/rules/seahaven-admin.mdc
new file mode 100644
index 00000000..a9d3acf0
--- /dev/null
+++ b/.cursor/rules/seahaven-admin.mdc
@@ -0,0 +1,52 @@
+---
+description: SeaHaven Admin — IrisLoan architecture, selective rebuild conventions
+alwaysApply: true
+---
+
+# SeaHaven Admin — IrisLoan conventions
+
+## Stack
+
+- Vite SPA + React Router 7, TypeScript strict, Tailwind v4 + MUI
+- HTTP: Ky with `credentials: "include"` (httpOnly cookies)
+- Server state: TanStack Query; forms: React Hook Form + Zod
+- **Do not use** in new code: Next.js, Redux, axios, `apiUtil.js`, `tokenUtility.js`
+
+## Target structure (`src/`)
+
+```
+api/  domain/<feature>/  app/  infra/query-key/  lib/  hooks/
+components/ui|common|layout/  config/menu.ts  providers/  main.tsx
+```
+
+- `@/` alias for imports; new files in **kebab-case** (`use-debounce.ts`, `query-key.ts`)
+- `pages/` is **reference only** for endpoints and business rules — delete after delivery in `domain/` + `app/`
+
+## HTTP and auth
+
+- Centralize paths in `api/api-paths.ts` and responses in `api/handle-api-response.ts`
+- Auth via AuthProvider + cookies; do not create Redux slices for session
+
+## State and data
+
+- Cache and mutations: React Query + `infra/query-key/query-key.ts`
+- Client defaults in `lib/query/query-client.ts`
+
+## Forms and UI
+
+- Zod schemas in `domain/<feature>/schemas/`; thin views in `app/`
+- Utility Tailwind + MUI components; **do not** import `site.css` in new code
+
+## Feature implementation flow
+
+1. Consult legacy in `pages/<feature>/` (endpoints, fields, rules)
+2. Create `domain/<feature>/` (schemas, hooks, use-cases)
+3. Thin view in `app/` + route in `app/routes.tsx`
+4. Delete `pages/<feature>/` when the new feature is ready
+
+## Tooling
+
+- Strict ESLint only on new architecture `.ts/.tsx`; legacy in `pages/` ignored
+- Commits: Conventional Commits (`feat(scope): subject`)
+
+Reference: `docs/ARCHITECTURE_PLAN.md`
diff --git a/.env b/.env
index bcd368b5..292a14c0 100644
--- a/.env
+++ b/.env
@@ -1,2 +1 @@
-REACT_APP_API_URL=
-
+VITE_API_URL=
diff --git a/.env.development b/.env.development
index 8f001ee9..2f34890a 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # Development API URL (uses proxy)
-REACT_APP_API_URL=/api
+VITE_API_URL=/api
 
 # Development API Target (for proxy)
-REACT_APP_API_TARGET=http://localhost:5141
+VITE_API_TARGET=http://localhost:5141
diff --git a/.env.example b/.env.example
index d6aba20e..1b59d08b 100644
--- a/.env.example
+++ b/.env.example
@@ -1,13 +1,20 @@
 # API Configuration
 # Copy this file to .env and update with your actual values
 
-# Backend API Base URL (without /api suffix)
-# For local development, this should point to your ASP.NET Core API
-#REACT_APP_API_URL=http://localhost:5000
+# Backend API base URL (Ky prefixUrl). API route paths do NOT include /api — it comes from here.
+# Development: use /api (Vite proxies /api to VITE_API_TARGET)
+#VITE_API_URL=/api
 
-# For production, update to your production API URL
- REACT_APP_API_URL=https://api.seahavenindustries.com
+# Production: absolute URLs MUST include the /api path segment
+VITE_API_URL=https://api.seahavenindustries.com/api
 
-# Note: The /api prefix is added in the service files
-# Example: ${REACT_APP_API_URL}/api/Authentication/login
+# Sentry browser DSN. This value is public configuration and is baked into the bundle.
+# Leave blank to disable telemetry for that build.
+VITE_SENTRY_DSN=
 
+# Sentry environment label (development, staging, production). Blank falls back
+# to the Vite build mode.
+#VITE_SENTRY_ENVIRONMENT=
+
+# Development proxy target (used by vite.config.ts)
+#VITE_API_TARGET=http://localhost:5141
diff --git a/.env.production b/.env.production
index 5c315e08..6ca55486 100644
--- a/.env.production
+++ b/.env.production
@@ -1,2 +1,10 @@
-# Production API URL
-REACT_APP_API_URL=http://console.seahavenind.com/api
+# Production API base — the SPA calls the backend directly over HTTPS.
+# NOTE: baked into the build at `vite build`, so this is the DEV value. Staging
+# and prod builds must override VITE_API_URL per environment (api.staging..., etc.).
+VITE_API_URL=https://api.dev.seahaven.com/api
+
+# Public browser configuration; the DSN is public by design and baked into the
+# bundle. Blank disables telemetry. These are the DEV deploy values: staging
+# and future prod jobs override them per environment.
+VITE_SENTRY_DSN=https://902f431c6e762aa849c9a07b77f0c3ac@o4511989453029376.ingest.de.sentry.io/4511990364700752
+VITE_SENTRY_ENVIRONMENT=development
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 00000000..083ec1a5
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1,3 @@
+# All changes require an approving review from the internal-dev team.
+# Enforced via the org "main branch protection" ruleset (require_code_owner_review).
+* @Sea-Haven-Industries/internal-dev
diff --git a/.github/renovate.json b/.github/renovate.json
new file mode 100644
index 00000000..38bd081a
--- /dev/null
+++ b/.github/renovate.json
@@ -0,0 +1,73 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "enabledManagers": ["npm", "custom.regex", "terraform"],
+  "minimumReleaseAge": "3 days",
+  "internalChecksFilter": "strict",
+  "customManagers": [
+    {
+      "customType": "regex",
+      "description": "Playwright image tag in CI must match @playwright/test",
+      "managerFilePatterns": ["/^\\.github/workflows/ci\\.ya?ml$/"],
+      "matchStrings": [
+        "mcr\\.microsoft\\.com/playwright:v(?<currentValue>\\d+\\.\\d+\\.\\d+)-noble"
+      ],
+      "datasourceTemplate": "npm",
+      "depNameTemplate": "@playwright/test",
+      "versioningTemplate": "npm"
+    }
+  ],
+  "packageRules": [
+    {
+      "description": ["Group non-major Terraform provider updates"],
+      "matchManagers": ["terraform"],
+      "matchUpdateTypes": ["minor", "patch"],
+      "groupName": "terraform minor and patch"
+    },
+    {
+      "description": ["Do not open major or replacement PRs until approved on the dashboard"],
+      "matchUpdateTypes": ["major", "replacement"],
+      "dependencyDashboardApproval": true
+    },
+    {
+      "description": [
+        "Do not open Playwright PRs until approved; image and upload-artifact share a Node runtime"
+      ],
+      "matchPackageNames": ["@playwright/test"],
+      "dependencyDashboardApproval": true,
+      "groupName": "playwright"
+    },
+    {
+      "description": ["Keep MUI packages together"],
+      "matchPackageNames": ["@mui/**"],
+      "matchUpdateTypes": ["major"],
+      "groupName": "mui"
+    },
+    {
+      "description": ["Keep React and its type packages together"],
+      "matchPackageNames": ["react", "react-dom", "@types/react", "@types/react-dom"],
+      "matchUpdateTypes": ["major"],
+      "groupName": "react"
+    },
+    {
+      "description": ["Keep FullCalendar packages together"],
+      "matchPackageNames": ["@fullcalendar/**"],
+      "matchUpdateTypes": ["major"],
+      "groupName": "fullcalendar"
+    },
+    {
+      "description": ["Do not bump package.json engines"],
+      "matchDepTypes": ["engines"],
+      "enabled": false
+    },
+    {
+      "description": ["Do not bump packageManager"],
+      "matchDepTypes": ["packageManager"],
+      "enabled": false
+    },
+    {
+      "description": ["Keep TanStack Query packages on one version"],
+      "matchPackageNames": ["@tanstack/**"],
+      "groupName": "tanstack query"
+    }
+  ]
+}
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
new file mode 100644
index 00000000..8a49b667
--- /dev/null
+++ b/.github/workflows/ci.yaml
@@ -0,0 +1,106 @@
+name: Frontend checks
+
+on:
+  pull_request:
+    branches: [main, dev, staging]
+  push:
+    branches: [main, dev, staging]
+  workflow_dispatch: {}
+
+permissions:
+  contents: read
+
+jobs:
+  build-and-test:
+    name: Build and test
+    # Org reusable workflow (Node 24): format check, lint, build, unit tests.
+    uses: Sea-Haven-Industries/.github/.github/workflows/ci-typescript-frontend.yaml@af0f002e14a08cdbfd879c1183bfe7eb2604bce9 # v1.0.8
+    with:
+      node-version: "24"
+
+  governance:
+    # Repo-owned guarantee that every frontend quality gate runs from this
+    # repository, independent of (and in addition to) the reusable workflow.
+    # `npm run verify` is the single command that chains: format check, lint
+    # (--max-warnings=0), type-check + build, unit tests, then the governance
+    # checks in scripts/governance-check.mjs (godfile ratchet, changed-file
+    # maintainability gate, Terraform fmt/validate, Terraform import-plan and
+    # release-plan guards, isolation tests, HCP run guard, CloudFront verify,
+    # and GitHub workflow shell). If the reusable workflow is later confirmed
+    # to run every gate, this job can be slimmed to `npm run governance`.
+    #
+    # GOVERNANCE_BASE points the changed-file gate at the right diff:
+    #   PR  -> the PR target branch (origin/<base_ref>)
+    #   push-> the previous commit on the branch (github.event.before)
+    #   manual -> dev, for exact-head recovery runs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          fetch-depth: 0
+      - name: Resolve governance comparison ref
+        id: governance-ref
+        shell: bash
+        env:
+          EVENT_NAME: ${{ github.event_name }}
+          EVENT_BEFORE: ${{ github.event.before }}
+          PR_BASE_SHA: ${{ github.event.pull_request.base.sha }}
+        run: |
+          set -euo pipefail
+          if [[ "${EVENT_NAME}" == "pull_request" ]]; then
+            base="${PR_BASE_SHA}"
+          elif [[ "${EVENT_NAME}" == "push" && -n "${EVENT_BEFORE}" && ! "${EVENT_BEFORE}" =~ ^0+$ ]]; then
+            base="${EVENT_BEFORE}"
+          else
+            base="origin/dev"
+          fi
+          printf 'base=%s\n' "${base}" >> "${GITHUB_OUTPUT}"
+      - name: Set up Terraform
+        # Same minor as the HCP workspace (1.16.x) so fmt/validate see what
+        # the remote run will see.
+        uses: hashicorp/setup-terraform@dfe3c3f87815947d99a8997f908cb6525fc44e9e # v4.0.1
+        with:
+          terraform_version: "1.16.0"
+          terraform_wrapper: false
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version: "24"
+          cache: npm
+      - name: Install actionlint
+        env:
+          ACTIONLINT_VERSION: "1.7.12"
+          ACTIONLINT_SHA256: 8aca8db96f1b94770f1b0d72b6dddcb1ebb8123cb3712530b08cc387b349a3d8
+        run: |
+          set -euo pipefail
+          curl -fsSL -o actionlint.tar.gz \
+            "https://github.com/rhysd/actionlint/releases/download/v${ACTIONLINT_VERSION}/actionlint_${ACTIONLINT_VERSION}_linux_amd64.tar.gz"
+          echo "${ACTIONLINT_SHA256}  actionlint.tar.gz" | sha256sum -c -
+          tar -xzf actionlint.tar.gz actionlint
+          sudo mv actionlint /usr/local/bin/actionlint
+      - run: npm ci
+      - run: npm run verify
+        env:
+          GOVERNANCE_BASE: ${{ steps.governance-ref.outputs.base }}
+
+  visual-regression:
+    name: Visual regression
+    runs-on: ubuntu-latest
+    container: mcr.microsoft.com/playwright:v1.61.1-noble
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version: "24"
+          cache: npm
+      - run: npm ci
+      - run: npm run test:e2e:visual
+      - name: Upload visual diff artifacts
+        if: failure()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: visual-regression-diffs
+          path: |
+            test-results/visual
+            playwright-report-visual
+          if-no-files-found: ignore
+          retention-days: 14
diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
new file mode 100644
index 00000000..c00f749e
--- /dev/null
+++ b/.github/workflows/deploy-staging.yml
@@ -0,0 +1,148 @@
+name: Deploy staging
+
+# Standalone staging deployment (push to `staging` / manual dispatch), NOT a
+# caller of the org reusable `cd-cdk.yaml` (that path is dev-only): staging
+# trusts the exact GitHub-environment OIDC subject, which requires the deploy
+# job to declare `environment: staging` and run in this repo, with the
+# non-secret role ARN pinned below (created by the staging stack itself).
+#
+# Order is fixed: full `npm run verify` gates run BEFORE any deploy step.
+# No secrets are used — OIDC + the static role ARN are the only credentials.
+
+on:
+  push:
+    branches: [staging]
+  workflow_dispatch: {}
+
+permissions:
+  id-token: write
+  contents: read
+
+concurrency:
+  group: deploy-staging
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    name: Deploy to staging
+    # Deploy only the exact staging branch ref, never a tag or other ref
+    # (workflow_dispatch can be invoked from arbitrary refs).
+    if: github.ref == 'refs/heads/staging'
+    runs-on: ubuntu-latest
+    environment: staging
+    env:
+      VITE_API_URL: https://api.staging.seahaven.com/api
+      VITE_SENTRY_ENVIRONMENT: staging
+      VITE_APP_COMMIT_SHA: ${{ github.sha }}
+      AWS_REGION: us-east-1
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          fetch-depth: 0
+      - name: Resolve governance comparison ref
+        id: governance-ref
+        shell: bash
+        env:
+          EVENT_NAME: ${{ github.event_name }}
+          EVENT_BEFORE: ${{ github.event.before }}
+        run: |
+          set -euo pipefail
+          if [[ "${EVENT_NAME}" == "push" && -n "${EVENT_BEFORE}" && ! "${EVENT_BEFORE}" =~ ^0+$ ]]; then
+            base="${EVENT_BEFORE}"
+          else
+            base="origin/dev"
+          fi
+          printf 'base=%s\n' "${base}" >> "${GITHUB_OUTPUT}"
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version: "24"
+          cache: npm
+      # Node 24 bundles npm 11 (lockfileVersion 3); the packageManager pin
+      # (npm@11.16.0) matches this CI environment.
+      - name: Quality gates (full verify before any deploy)
+        run: npm ci && npm run verify
+        env:
+          GOVERNANCE_BASE: ${{ steps.governance-ref.outputs.base }}
+
+      - name: Assume staging deploy role (OIDC)
+        uses: aws-actions/configure-aws-credentials@e6de054238d6b7531b4efff3b6587d9aade6a06c # v6.2.3
+        with:
+          role-to-assume: arn:aws:iam::396287094661:role/githubdeploy-shoc-frontend-new-staging
+          aws-region: us-east-1
+
+      # Builds the SPA with the staging VITE_API_URL and Sentry environment
+      # label (process env overrides the dev values committed in
+      # .env.production), syncs to the staging bucket, and invalidates
+      # CloudFront.
+      - name: Build and publish SPA
+        run: bash scripts/deploy-web.sh
+        env:
+          STACK_NAME: shoc-frontend-staging
+          WAIT_FOR_INVALIDATION: "true"
+
+      - name: Upload private source maps
+        run: bash scripts/upload-sourcemaps.sh
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+
+      - name: Verify deployment
+        run: |
+          set -euo pipefail
+          stack_output() {
+            aws cloudformation describe-stacks \
+              --stack-name shoc-frontend-staging \
+              --query "Stacks[0].Outputs[?OutputKey=='$1'].OutputValue" \
+              --output text
+          }
+          BUCKET="$(stack_output BucketName)"
+          DIST_ID="$(stack_output DistributionId)"
+          DIST_DOMAIN="$(stack_output DistributionDomainName)"
+          SITE_URL="$(stack_output SiteUrl)"
+          if [[ -z "${BUCKET}" || "${BUCKET}" == "None" || -z "${DIST_ID}" || "${DIST_ID}" == "None" || -z "${DIST_DOMAIN}" || "${DIST_DOMAIN}" == "None" ]]; then
+            echo "::error::Could not resolve bucket/distribution from stack outputs." >&2
+            exit 1
+          fi
+          echo "Bucket=${BUCKET} Distribution=${DIST_ID} (${DIST_DOMAIN}) SiteUrl=${SITE_URL}"
+
+          aws s3api head-bucket --bucket "${BUCKET}"
+          echo "Bucket exists."
+          # The distribution is proven to exist and serve by the HTTPS check
+          # below: the custom domain is an alias to this distribution, and the
+          # deploy role deliberately carries no cloudfront:GetDistribution
+          # (least privilege; the dev template is shared and must not drift).
+
+          if grep -Rq "api.dev.seahaven.com" dist/; then
+            echo "::error::Built assets contain the dev API URL (api.dev.seahaven.com)." >&2
+            grep -Rl "api.dev.seahaven.com" dist/ >&2 || true
+            exit 1
+          fi
+          echo "Built assets carry no dev API URL."
+          grep -Rq "api.staging.seahaven.com" dist/
+          echo "Built assets reference the staging API URL."
+
+          # Verify the actual post-invalidation HTML and its referenced assets,
+          # not only the local build or a generic endpoint response.
+          remote_dir="$(mktemp -d)"
+          trap 'rm -rf "${remote_dir}"' EXIT
+          for i in 1 2 3 4 5 6; do
+            if curl -fsS --max-time 30 "${SITE_URL}" -o "${remote_dir}/index.html"; then
+              break
+            fi
+            echo "Endpoint not ready (attempt ${i}); retrying in 20s..."
+            sleep 20
+          done
+          test -s "${remote_dir}/index.html"
+          grep -oE '(src|href)="/assets/[^"]+\.(js|css)"' "${remote_dir}/index.html" \
+            | sed -E 's/^(src|href)="([^"]+)"$/\2/' \
+            | sort -u > "${remote_dir}/asset-paths.txt"
+          test -s "${remote_dir}/asset-paths.txt"
+          while IFS= read -r asset_path; do
+            curl -fsS --max-time 30 "${SITE_URL%/}${asset_path}" \
+              >> "${remote_dir}/assets.txt"
+          done < "${remote_dir}/asset-paths.txt"
+          if grep -q "api.dev.seahaven.com" "${remote_dir}/assets.txt"; then
+            echo "::error::Deployed assets contain the dev API URL." >&2
+            exit 1
+          fi
+          grep -q "api.staging.seahaven.com" "${remote_dir}/assets.txt"
+          echo "Deployed staging assets reference only the staging API URL."
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 00000000..a2894a61
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,300 @@
+name: Deploy dev content
+
+# Dev content CD through Terraform (SH-300). GitHub uploads an immutable
+# releases/<sha>-<run>-<attempt>/ prefix. Terraform owns the pointer, origin
+# group, and invalidation. Push-to-dev stays off until
+# vars.TERRAFORM_CONTENT_CD_ENABLED is the string true.
+#
+# Quality gates live in Frontend checks (`ci.yaml`). This workflow does not
+# re-run those gates on pull requests, pushes, or workflow_dispatch.
+
+on:
+  push:
+    branches: [dev]
+    paths-ignore:
+      - "terraform/**"
+  workflow_dispatch: {}
+
+permissions:
+  contents: read
+
+jobs:
+  deploy-dev:
+    name: Deploy shoc-frontend-new-dev through Terraform
+    if: >
+      (github.event_name == 'push' && github.ref == 'refs/heads/dev' &&
+       vars.TERRAFORM_CONTENT_CD_ENABLED == 'true') ||
+      (github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/dev')
+    runs-on: ubuntu-latest
+    timeout-minutes: 180
+    permissions:
+      contents: read
+      id-token: write
+    concurrency:
+      group: deploy-dev
+      cancel-in-progress: false
+    env:
+      AWS_REGION: us-east-1
+      TF_CLOUD_ORGANIZATION: seahaven
+      TF_API_TOKEN: ${{ secrets.TF_API_TOKEN }}
+      SITE_BUCKET: seahaven-shoc-frontend-dev
+      DISTRIBUTION_ID: E2CWLM1AFB964P
+      SITE_URL: https://dev.seahaven.com
+      VITE_API_URL: https://api.dev.seahaven.com/api
+      VITE_APP_COMMIT_SHA: ${{ github.sha }}
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version: "24"
+          cache: npm
+
+      - name: Build SPA
+        run: |
+          set -euo pipefail
+          npm ci
+          npm run build
+          if grep -Rq "api.staging.seahaven.com" dist/; then
+            echo "::error::Built assets contain the staging API URL." >&2
+            exit 1
+          fi
+          if grep -Rq "localhost:5141" dist/; then
+            echo "::error::Built assets contain the Vite proxy target localhost:5141." >&2
+            exit 1
+          fi
+          grep -Rq "api.dev.seahaven.com" dist/
+
+      - name: Configure AWS credentials (OIDC)
+        uses: aws-actions/configure-aws-credentials@e6de054238d6b7531b4efff3b6587d9aade6a06c # v6.2.3
+        with:
+          role-to-assume: arn:aws:iam::396287094661:role/githubdeploy-shoc-frontend-new-dev
+          aws-region: us-east-1
+          audience: sts.amazonaws.com
+
+      - name: Assign immutable release identity
+        id: release
+        run: |
+          set -euo pipefail
+          version_label="${GITHUB_SHA}-${GITHUB_RUN_ID}-${GITHUB_RUN_ATTEMPT}"
+          prefix="releases/${version_label}"
+          {
+            echo "version_label=${version_label}"
+            echo "prefix=${prefix}"
+          } >> "${GITHUB_OUTPUT}"
+
+      # Sentry release is shoc-frontend@${GITHUB_SHA} via VITE_APP_COMMIT_SHA,
+      # distinct from the S3/Terraform version_label.
+      - name: Upload private source maps
+        run: bash scripts/upload-sourcemaps.sh
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+
+      - name: Read previous release pointer
+        id: pointer
+        run: |
+          set -euo pipefail
+          body="$(aws s3 cp "s3://${SITE_BUCKET}/.release/current" - --only-show-errors || true)"
+          printf '%s' "${body}" | python3 scripts/read-release-pointer.py
+
+      - name: Upload immutable release prefix
+        run: |
+          set -euo pipefail
+          prefix="${{ steps.release.outputs.prefix }}"
+          aws s3 sync dist/ "s3://${SITE_BUCKET}/${prefix}/" \
+            --exclude "index.html" \
+            --exclude "*.map" \
+            --cache-control "public,max-age=31536000,immutable"
+          aws s3 cp dist/index.html "s3://${SITE_BUCKET}/${prefix}/index.html" \
+            --cache-control "no-cache,no-store,must-revalidate" \
+            --content-type "text/html"
+          aws s3api head-object \
+            --bucket "${SITE_BUCKET}" \
+            --key "${prefix}/index.html"
+          index_sha="$(python3 -c 'import hashlib,pathlib; print(hashlib.sha256(pathlib.Path("dist/index.html").read_bytes()).hexdigest())')"
+          echo "INDEX_SHA256=${index_sha}" >> "${GITHUB_ENV}"
+          echo "Uploaded ${prefix}; index.html sha256=${index_sha}"
+
+      - name: Capture previous served hash
+        id: previous-hash
+        run: |
+          set -euo pipefail
+          hash="$(curl -fsS --max-time 30 "${SITE_URL}/" | python3 -c 'import hashlib,sys; print(hashlib.sha256(sys.stdin.buffer.read()).hexdigest())' || true)"
+          echo "sha256=${hash}" >> "${GITHUB_OUTPUT}"
+
+      - name: Discard blocking VCS run before GitHub CD
+        id: discard-vcs
+        env:
+          TF_API_TOKEN: ${{ secrets.TF_API_TOKEN }}
+        run: python3 scripts/hcp-run-guard.py check-and-discard --workspace shoc-frontend-new-dev
+
+      - name: Create Terraform release run
+        id: release-run
+        uses: hashicorp/tfc-workflows-github/actions/create-run@8e08d1ba957673f5fbf971a22b3219639dc45661 # v1.3.2
+        env:
+          TF_VAR_release_version_label: '"${{ steps.release.outputs.version_label }}"'
+          TF_VAR_previous_release_version_label: '"${{ steps.pointer.outputs.live_current }}"'
+        with:
+          workspace: shoc-frontend-new-dev
+          message: "Release ${{ steps.release.outputs.version_label }} from GitHub Actions"
+
+      - name: Read Terraform release plan counts
+        id: release-plan
+        uses: hashicorp/tfc-workflows-github/actions/plan-output@8e08d1ba957673f5fbf971a22b3219639dc45661 # v1.3.2
+        with:
+          plan: ${{ steps.release-run.outputs.plan_id }}
+
+      - name: Reject non-release resource counts
+        env:
+          PLAN_ADD: ${{ steps.release-plan.outputs.add }}
+          PLAN_CHANGE: ${{ steps.release-plan.outputs.change }}
+          PLAN_DESTROY: ${{ steps.release-plan.outputs.destroy }}
+        run: |
+          set -euo pipefail
+          if [ "$PLAN_ADD" != "0" ] || [ "$PLAN_CHANGE" != "2" ] || [ "$PLAN_DESTROY" != "0" ]; then
+            echo "HCP plan counts are add=${PLAN_ADD} change=${PLAN_CHANGE} destroy=${PLAN_DESTROY}; expected 0/2/0." >&2
+            exit 1
+          fi
+
+      - name: Guard pointer-and-origin-path Terraform plan
+        run: |
+          set -euo pipefail
+          # Flags must match check-terraform-release-plan.py. Pointer `before`
+          # and origin-ID-set stability are asserted from the plan JSON.
+          python3 scripts/check-terraform-release-plan.py \
+            --plan-id "${{ steps.release-run.outputs.plan_id }}" \
+            --expected-version-label "${{ steps.release.outputs.version_label }}" \
+            --expected-previous-version-label "${{ steps.pointer.outputs.live_current }}"
+
+      - name: Discard release run when the guard fails
+        if: failure() && steps.release-run.outcome == 'success'
+        uses: hashicorp/tfc-workflows-github/actions/discard-run@8e08d1ba957673f5fbf971a22b3219639dc45661 # v1.3.2
+        with:
+          run: ${{ steps.release-run.outputs.run_id }}
+          comment: Rejected by the pointer-and-origin-path plan guard from GitHub Actions
+
+      - name: Apply Terraform release run
+        id: release-apply
+        continue-on-error: true
+        uses: hashicorp/tfc-workflows-github/actions/apply-run@8e08d1ba957673f5fbf971a22b3219639dc45661 # v1.3.2
+        with:
+          run: ${{ steps.release-run.outputs.run_id }}
+          comment: Apply pointer-and-origin-path release from GitHub Actions ${{ github.sha }}
+
+      - name: Treat already-applied release run as success
+        env:
+          TF_API_TOKEN: ${{ secrets.TF_API_TOKEN }}
+        run: |
+          python3 scripts/hcp-run-guard.py reconcile-apply \
+            --run-id "${{ steps.release-run.outputs.run_id }}" \
+            --apply-outcome "${{ steps.release-apply.outcome }}"
+
+      - name: Verify CloudFront release
+        env:
+          EXPECTED_LABEL: ${{ steps.release.outputs.version_label }}
+          EXPECTED_INDEX_SHA256: ${{ env.INDEX_SHA256 }}
+          PREVIOUS_INDEX_SHA256: ${{ steps.previous-hash.outputs.sha256 }}
+        run: bash scripts/verify-cloudfront-release.sh
+
+      - name: Restore previous release on failure
+        if: failure()
+        id: rollback-prepare
+        run: |
+          set -euo pipefail
+          prev="${{ steps.pointer.outputs.live_current }}"
+          if [[ ! "${prev}" =~ ^[0-9a-f]{40}-[0-9]+-[0-9]+$ ]]; then
+            echo "No Terraform-managed previous label; cannot roll back through HCP." >&2
+            exit 0
+          fi
+          echo "rollback_label=${prev}" >> "${GITHUB_OUTPUT}"
+          echo "rollback_previous=${{ steps.release.outputs.version_label }}" >> "${GITHUB_OUTPUT}"
+
+      - name: Discard blocking VCS run before GitHub rollback
+        id: rollback-discard-vcs
+        if: failure() && steps.rollback-prepare.outputs.rollback_label != ''
+        env:
+          TF_API_TOKEN: ${{ secrets.TF_API_TOKEN }}
+        run: python3 scripts/hcp-run-guard.py check-and-discard --workspace shoc-frontend-new-dev
+
+      - name: Create Terraform rollback run
+        id: rollback-run
+        if: failure() && steps.rollback-prepare.outputs.rollback_label != '' && steps.rollback-discard-vcs.outcome == 'success'
+        uses: hashicorp/tfc-workflows-github/actions/create-run@8e08d1ba957673f5fbf971a22b3219639dc45661 # v1.3.2
+        env:
+          TF_VAR_release_version_label: '"${{ steps.rollback-prepare.outputs.rollback_label }}"'
+          TF_VAR_previous_release_version_label: '"${{ steps.rollback-prepare.outputs.rollback_previous }}"'
+        with:
+          workspace: shoc-frontend-new-dev
+          message: "Rollback to ${{ steps.rollback-prepare.outputs.rollback_label }} from GitHub Actions"
+
+      - name: Read Terraform rollback plan counts
+        id: rollback-plan
+        if: failure() && steps.rollback-run.outcome == 'success'
+        uses: hashicorp/tfc-workflows-github/actions/plan-output@8e08d1ba957673f5fbf971a22b3219639dc45661 # v1.3.2
+        with:
+          plan: ${{ steps.rollback-run.outputs.plan_id }}
+
+      - name: Reject non-release rollback counts
+        id: rollback-count-guard
+        if: failure() && steps.rollback-plan.outcome == 'success'
+        env:
+          PLAN_ADD: ${{ steps.rollback-plan.outputs.add }}
+          PLAN_CHANGE: ${{ steps.rollback-plan.outputs.change }}
+          PLAN_DESTROY: ${{ steps.rollback-plan.outputs.destroy }}
+        run: |
+          set -euo pipefail
+          if [ "$PLAN_ADD" != "0" ] || [ "$PLAN_CHANGE" != "2" ] || [ "$PLAN_DESTROY" != "0" ]; then
+            echo "Rollback HCP plan counts are add=${PLAN_ADD} change=${PLAN_CHANGE} destroy=${PLAN_DESTROY}; expected 0/2/0." >&2
+            exit 1
+          fi
+
+      - name: Guard pointer-and-origin-path Terraform rollback plan
+        id: rollback-json-guard
+        if: failure() && steps.rollback-count-guard.outcome == 'success'
+        run: |
+          set -euo pipefail
+          python3 scripts/check-terraform-release-plan.py \
+            --plan-id "${{ steps.rollback-run.outputs.plan_id }}" \
+            --expected-version-label "${{ steps.rollback-prepare.outputs.rollback_label }}" \
+            --expected-previous-version-label "${{ steps.rollback-prepare.outputs.rollback_previous }}"
+
+      - name: Discard rollback run when the guard fails
+        if: failure() && steps.rollback-run.outcome == 'success' && steps.rollback-json-guard.outcome != 'success'
+        uses: hashicorp/tfc-workflows-github/actions/discard-run@8e08d1ba957673f5fbf971a22b3219639dc45661 # v1.3.2
+        with:
+          run: ${{ steps.rollback-run.outputs.run_id }}
+          comment: Rejected by the pointer-and-origin-path rollback plan guard from GitHub Actions
+
+      - name: Apply Terraform rollback run
+        id: rollback-apply
+        if: failure() && steps.rollback-json-guard.outcome == 'success'
+        continue-on-error: true
+        uses: hashicorp/tfc-workflows-github/actions/apply-run@8e08d1ba957673f5fbf971a22b3219639dc45661 # v1.3.2
+        with:
+          run: ${{ steps.rollback-run.outputs.run_id }}
+          comment: Apply pointer-and-origin-path rollback from GitHub Actions ${{ github.sha }}
+
+      - name: Treat already-applied rollback run as success
+        id: rollback-apply-result
+        if: failure() && steps.rollback-apply.outcome != 'skipped'
+        env:
+          TF_API_TOKEN: ${{ secrets.TF_API_TOKEN }}
+        run: |
+          python3 scripts/hcp-run-guard.py reconcile-apply \
+            --run-id "${{ steps.rollback-run.outputs.run_id }}" \
+            --apply-outcome "${{ steps.rollback-apply.outcome }}"
+
+      - name: Verify CloudFront rollback
+        if: failure() && steps.rollback-apply-result.outcome == 'success'
+        env:
+          EXPECTED_LABEL: ${{ steps.rollback-prepare.outputs.rollback_label }}
+        run: |
+          set -euo pipefail
+          expected_sha="$(aws s3 cp "s3://${SITE_BUCKET}/releases/${EXPECTED_LABEL}/index.html" - | python3 -c 'import hashlib,sys; print(hashlib.sha256(sys.stdin.buffer.read()).hexdigest())')"
+          export EXPECTED_INDEX_SHA256="${expected_sha}"
+          bash scripts/verify-cloudfront-release.sh
+
+      - name: Live-state summary
+        if: always()
+        continue-on-error: true
+        run: bash scripts/summarize-cloudfront-live-state.sh
diff --git a/.github/workflows/terraform-isolation.yaml b/.github/workflows/terraform-isolation.yaml
new file mode 100644
index 00000000..92cc9d38
--- /dev/null
+++ b/.github/workflows/terraform-isolation.yaml
@@ -0,0 +1,43 @@
+name: Terraform isolation
+
+# Own workflow so labeled/unlabeled re-evaluate this gate without starting a
+# new Frontend checks run. Skipping jobs inside `ci.yaml` on those events
+# would report required checks as success and could merge a failing SHA.
+
+on:
+  pull_request:
+    branches: [main, dev, staging]
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - labeled
+      - unlabeled
+
+permissions:
+  contents: read
+
+jobs:
+  terraform-isolation:
+    # Fails a pull request that changes Terraform infrastructure together with
+    # deployable application code (scripts/check-terraform-isolation.mjs). A
+    # merge that does both queues an HCP VCS run and a content release at the
+    # same time, and the two race for the workspace lock. The
+    # `terraform-isolation-override` label is the reviewed exception. This
+    # job is unconditional so adding or removing that label always reads the
+    # current label set; a previous green check does not survive removal.
+    name: Terraform and application changes are isolated
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version: "24"
+      - name: Check changed files
+        env:
+          BASE_SHA: ${{ github.event.pull_request.base.sha }}
+          HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+          TERRAFORM_ISOLATION_OVERRIDE: ${{ contains(github.event.pull_request.labels.*.name, 'terraform-isolation-override') }}
+        run: node scripts/check-terraform-isolation.mjs --base "${BASE_SHA}" --head "${HEAD_SHA}"
diff --git a/.gitignore b/.gitignore
index b44bc67e..9536adc7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,8 +8,14 @@
 
 # testing
 /coverage
+/test-results
+/playwright-report
+/playwright-report-visual
+/blob-report
+/playwright/.cache
 
 # production
+/dist
 /build
 
 # misc
@@ -24,4 +30,22 @@ yarn-debug.log*
 yarn-error.log*
 db.txt
 seed-data.sql
-/backend
\ No newline at end of file
+/backend
+
+# eslint
+.eslintcache
+
+# typescript
+*.tsbuildinfo
+
+# terraform (the provider lock file is committed)
+**/.terraform/*
+*.tfstate
+*.tfstate.*
+*.tfplan
+*.tfvars
+*.tfvars.json
+
+# python
+__pycache__/
+*.py[cod]
diff --git a/.husky/commit-msg b/.husky/commit-msg
new file mode 100644
index 00000000..a78cc751
--- /dev/null
+++ b/.husky/commit-msg
@@ -0,0 +1 @@
+npx commitlint --edit $1
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 00000000..2312dc58
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..fddfe3d3
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,14 @@
+dist
+build
+node_modules
+coverage
+playwright-report-visual
+package-lock.json
+*.tsbuildinfo
+
+# Legacy — format incrementally when touched (lint-staged)
+src/pages/**
+src/**/*.js
+src/**/*.jsx
+src/**/*.css
+!src/styles/globals.css
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..2661d464
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,15 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "overrides": [
+    {
+      "files": "*.mdc",
+      "options": {
+        "parser": "markdown"
+      }
+    }
+  ]
+}
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..2803356c
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,81 @@
+# AGENTS.md — frontend mandatory conventions
+
+This file is the binding entry point for **every contributor — human or AI coding
+or review agent** — working in this repository (`seahaven-new-app`, the SHOC
+frontend). It makes the validated React/TypeScript conventions mandatory and
+points to the operational documents and executable gates that enforce them.
+
+Read these before writing or reviewing code. They override generic "best
+practice" suggestions from any agent or model. This repository contract may
+strengthen, but never weaken, the workspace-level `AGENTS.md`.
+
+- [QUALITY_GATES.md](QUALITY_GATES.md) — the executable gates, the single
+  command, and the no-false-pass guarantees.
+- [ARCHITECTURE_AND_CODE_QUALITY.md](ARCHITECTURE_AND_CODE_QUALITY.md) — the
+  MUST / MUST NOT conventions (conditional rendering, typography, forms, state,
+  data access, security, maintainability) with evidence and thresholds.
+- [REVIEW_AND_PR_FRAMEWORK.md](REVIEW_AND_PR_FRAMEWORK.md) — the PR review
+  contract (exact-head review, board regression inventory, behavior-based
+  testing, security/performance/Big-O review, no style-only comments).
+- [docs/FRONTEND_MAINTAINABILITY.md](docs/FRONTEND_MAINTAINABILITY.md) — the
+  detailed rationale for the conditional-rendering and typography rules.
+
+## One command to run every gate
+
+```bash
+npm run verify
+```
+
+This chains the full set: Prettier check, ESLint (`--max-warnings=0`), TypeScript
+build (`tsc -b && vite build`), unit tests (`vitest run`), and the governance
+checks (`npm run governance`). **Do not claim a task is done until `npm run
+verify` is green locally.** CI runs the same `npm run verify` in a repo-owned
+`governance` job, so a green local run mirrors CI.
+
+## Non-negotiable rules (enforced; do not work around)
+
+These are already enforced by lint/build or the governance script. Disabling,
+baselining, or per-line-suppressing them is forbidden (see exceptions below).
+
+- **No one-sided `cond ? <Element/> : null`** — use `&&` or the `when` prop.
+- **The left operand of `&&` in JSX must be entirely boolean** — coerce with
+  `Boolean(...)` / an explicit comparison; `{count && ...}` is rejected.
+- **Shared `Text` for `p` / `h1`–`h6` / error typography** — raw `<p>`/`<h*>` and
+  the `vp-error` class outside `Text` are rejected.
+- **Zero lint warnings** — `--max-warnings=0` makes a warning a failure; fix it,
+  do not silence it.
+- **Hooks correctness** — the `react-hooks` recommended rules (including
+  `exhaustive-deps`) run under the zero-warnings gate.
+- **Godfile ratchet** — no source file may exceed 500 lines. Existing named debt
+  has a frozen per-file cap that may only decrease.
+- **Changed-file maintainability** — changed TS/TSX must meet
+  `complexity ≤ 20`, function `≤ 150` lines, `≤ 4` params, `≤ 4` depth.
+
+## How to add / change a convention
+
+1. Land it **green**: a new or tightened rule must ship with the codebase passing
+   it (a migration in the same change), not as a warning-only backlog.
+2. If legacy would break, use changed-file enforcement or migrate it. Do not add
+   new baseline debt or raise a frozen cap.
+3. Document the rule, its threshold, and its evidence in
+   [ARCHITECTURE_AND_CODE_QUALITY.md](ARCHITECTURE_AND_CODE_QUALITY.md).
+
+## Exceptions and the ADR process
+
+Exceptions are **not granted by disabling a rule inline**. To deviate:
+
+1. Record an **Architecture Decision Record** under `docs/adr/`
+   (`NNNN-title.md`: context, decision, consequences, alternatives).
+2. Existing grandfathered entries may only be removed or have their caps
+   reduced. New entries and cap increases fail the governance gate.
+3. Get it reviewed like any other change. The ADR + baseline entry is the
+   auditable record; an `eslint-disable` comment is not.
+
+## Toolchain (do not change without an ADR)
+
+React 19, TypeScript 6, Vite, Tailwind 4 + MUI, TanStack Query, React Hook Form +
+Zod, Ky. Node ≥ 22.22.1 (CI runs Node 24); npm 11.16.0 (pinned via
+`packageManager`, invoked through corepack). **No new dependencies without an
+ADR** — prefer the libraries already established (see
+[ARCHITECTURE_AND_CODE_QUALITY.md](ARCHITECTURE_AND_CODE_QUALITY.md) §Forms and
+data access).
diff --git a/ARCHITECTURE_AND_CODE_QUALITY.md b/ARCHITECTURE_AND_CODE_QUALITY.md
new file mode 100644
index 00000000..3cd2aefc
--- /dev/null
+++ b/ARCHITECTURE_AND_CODE_QUALITY.md
@@ -0,0 +1,125 @@
+# ARCHITECTURE_AND_CODE_QUALITY.md — MUST / MUST NOT conventions
+
+Mandatory React/TypeScript conventions for this repository. Each rule lists how
+it is enforced. Detailed rationale for rendering and typography lives in
+[docs/FRONTEND_MAINTAINABILITY.md](docs/FRONTEND_MAINTAINABILITY.md). When a rule
+says "MUST", it is enforced by lint, build, or `npm run governance`; "SHOULD"
+means it is a review-enforced convention backed by the
+[PR review contract](REVIEW_AND_PR_FRAMEWORK.md).
+
+## Conditional rendering
+
+- **MUST** use `&&` or the `Text` `when` prop for one-sided conditions; never
+  `cond ? <Element/> : null`. (ESLint `no-restricted-syntax`.)
+- **MUST** make the left operand of `&&` in JSX entirely boolean. Coerce presence
+  with `Boolean(value)` (or `Boolean(a || b)`); preserve numeric/empty-string
+  semantics and TypeScript narrowing with `count > 0`, `value != null`.
+  `{count && <X/>}` renders `0` and is rejected by the type-aware
+  `seahaven/no-non-boolean-jsx-and` rule. (See FRONTEND_MAINTAINABILITY.md for
+  the approved guard forms.)
+- **MUST NOT** widen typed element-slot props (`icon`, `action`, `actions`) back
+  to `ReactNode`; coerce with `Boolean(prop)` before `&&`.
+
+## Typography and feedback
+
+- **MUST** use `Text` from `@/components/ui/text` for paragraphs, headings,
+  descriptions, labels, captions, code, and async feedback. Raw `<p>` and
+  `<h1>`–`<h6>` are rejected. (ESLint `no-restricted-syntax`.)
+- **MUST** use `Text variant="error"` for the `vp-error` styling; the
+  `vp-error` class on any non-`Text` element is rejected
+  (`seahaven/no-vp-error-outside-text`). Do not compose `vp-error` dynamically to
+  bypass the static check.
+- **MUST NOT** pass `component`, `role`, or `aria-live` to `Text` — they are
+  omitted from `TextProps` so the variant contract (element, tone, live region)
+  cannot be overridden. Use `as` and `tone`.
+- **SHOULD** keep the `feedback` (polite `status`) region mounted and toggle text
+  with `when`; mount `error` (assertive `alert`) on demand.
+
+## Forms and mutations
+
+- **MUST** use the libraries already established: **React Hook Form** for field
+  registration/lifecycle, **Zod** for validation and inferred types, **TanStack
+  Query** for server reads and mutations (pending/error state, invalidation,
+  retries).
+- **MUST NOT** add **TanStack Form** alongside React Hook Form for one form. A
+  second form convention increases cognitive and dependency cost. Replacing
+  React Hook Form requires an approved repo-wide migration ADR with measured
+  benefits, a codemod/migration plan, and removal of the superseded dependency.
+- **SHOULD** keep file upload selection/validation in a focused component and
+  drive upload progress/errors/retry through a TanStack Query mutation, not in a
+  route-sized page.
+
+## State ownership (bounded)
+
+- **MUST** keep query loading/error/empty state adjacent to the query result;
+  mutation pending/error state in the component that initiated the mutation.
+- **MUST** compose focused state components instead of accumulating unrelated
+  booleans in a page. Route pages coordinate sections and navigation; reusable
+  sections own their interaction details.
+- **SHOULD** render errors inline with accessible feedback (`Text
+variant="error"`); reserve toasts for cross-page outcomes.
+
+## Data access
+
+- **MUST** keep TanStack Query keys **stable and descriptive** (a consistent
+  entity + identity tuple, co-located with the query). Unstable or ad-hoc keys
+  break caching and invalidation. (Review-enforced; a future lint rule is
+  tracked as a gap.)
+- **MUST NOT** materialize large server collections into client state and then
+  filter/sort them in the component when the server (or a memoized, virtualized
+  layer) should own it. Prefer server-side filtering/pagination; if client-side
+  is required, memoize and avoid re-filtering on every render. (Review-enforced.)
+- **MUST** invalidate the right query keys after a mutation so caches do not
+  show stale data.
+
+## Security
+
+- **MUST NOT** surface raw server error payloads, stack traces, or internal
+  identifiers to end users. Map server errors to a safe user-facing message
+  (e.g. `Text variant="error"`); log the full detail only to controlled channels.
+  (Review-enforced.)
+- **MUST NOT** bake secrets, tokens, or account-specific values into the build.
+  Only `VITE_*` build-time vars are allowed, and they are baked into the bundle —
+  never put a secret in a `VITE_` variable.
+
+## Hooks, performance, and Big-O
+
+- **MUST** satisfy `react-hooks` recommended rules (including `exhaustive-deps`)
+  under the zero-warnings gate.
+- **SHOULD** avoid `O(n²)` or worse work inside render/hot paths; memoize derived
+  data, key lists stably, and prefer server-side filtering for large sets
+  (reviewers flag algorithmic complexity — see REVIEW_AND_PR_FRAMEWORK.md).
+- **SHOULD** keep renders pure; derive expensive values with `useMemo`/`useCallback`
+  only when measured to matter (no speculative memoization).
+
+## Maintainability (measured thresholds)
+
+Enforced by `npm run governance` ([QUALITY_GATES.md](QUALITY_GATES.md)).
+These are conservative code-shape proxies for review focus. File length is not
+proof of a god object, cyclomatic complexity is not runtime Big-O, and neither
+substitutes for behavior tests, profiling, query-plan evidence, or reviewer
+judgment.
+
+| Metric                | Threshold   | How enforced                                                                               |
+| --------------------- | ----------- | ------------------------------------------------------------------------------------------ |
+| File length (godfile) | ≤ 500 lines | Whole-repo ratchet: any file over the cap not in `scripts/governance-baseline.json` fails. |
+| Cyclomatic complexity | ≤ 20        | Changed-file ESLint `complexity`.                                                          |
+| Function length       | ≤ 150 lines | Changed-file ESLint `max-lines-per-function` (`skipComments`).                             |
+| Parameters            | ≤ 4         | Changed-file ESLint `max-params`.                                                          |
+| Nesting depth         | ≤ 4         | Changed-file ESLint `max-depth`.                                                           |
+
+**Why these are changed-file ratchets, not whole-repo errors:** measured against
+the current codebase, the maintainability thresholds surface **72 violations
+across ~51 legacy files** (45 function-length, 24 complexity, 3 params), and
+**5 files exceed 500 lines**. Applying them repo-wide at `error` would block
+legacy without a migration. Instead:
+
+- The **5 oversized files** are explicit grandfathered debt with frozen
+  per-file caps in `scripts/governance-baseline.json`. They may shrink but never
+  grow; new entries and cap increases fail.
+- The **complexity/function-length/params/depth** rules apply to **changed**
+  TS/TSX on a PR/push, so new and modified code must comply while untouched
+  legacy is not blocked. Bring legacy into compliance when you next touch it.
+
+These thresholds are starting ratchets: tighten them (lower caps, fewer baseline
+entries) as debt is paid down. Never raise them to make a change pass.
diff --git a/QUALITY_GATES.md b/QUALITY_GATES.md
new file mode 100644
index 00000000..61fd26f6
--- /dev/null
+++ b/QUALITY_GATES.md
@@ -0,0 +1,83 @@
+# QUALITY_GATES.md — executable frontend gates
+
+The single command that runs **every** gate, locally and in CI:
+
+```bash
+npm run verify
+```
+
+`verify` chains: `format:check` → `lint` → `build` (`tsc -b && vite build`) →
+`test` (`vitest run`) → `governance`. Governance also runs the repository
+gates: Terraform import-plan and release-plan checkers, isolation tests,
+Terraform formatting and validation, the HCP run guard, CloudFront verify, and
+workflow shell checks. A task is not done until this is green.
+
+## Gate matrix
+
+| Gate                                | Command / rule source                                                                                       | Enforced by            | Scope                                  |
+| ----------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------- |
+| Formatting                          | `npm run format:check` (Prettier)                                                                           | `verify` + lint-staged | Whole repo                             |
+| Lint, zero warnings                 | `npm run lint` → `eslint . --max-warnings=0`                                                                | `verify` + CI          | Governed TS/TSX (`eslint.config.js`)   |
+| Type-check + production build       | `npm run build` → `tsc -b && vite build`                                                                    | `verify` + CI          | Whole app                              |
+| Unit tests                          | `npm test` → `vitest run`                                                                                   | `verify` + CI          | `src/test/**`, `config/**/*.test.ts`   |
+| Conditional rendering (no `: null`) | `no-restricted-syntax` in `eslint.config.js`                                                                | lint                   | Governed TSX                           |
+| Boolean-only JSX `&&`               | `seahaven/no-non-boolean-jsx-and` (type-aware) in `eslint-rules/`                                           | lint                   | Governed TSX                           |
+| Shared `Text` typography            | `no-restricted-syntax` (raw `p`/`h1`–`h6`) + `seahaven/no-vp-error-outside-text`                            | lint                   | Governed TSX                           |
+| Hooks correctness                   | `eslint-plugin-react-hooks` recommended (incl. `exhaustive-deps`) under zero-warnings                       | lint                   | Governed TS/TSX                        |
+| Godfile ratchet (file length)       | `scripts/governance-check.mjs` + `scripts/governance-baseline.json`                                         | `governance`           | `src/**`, `config/**` (non-test)       |
+| Changed-file maintainability        | `scripts/governance-check.mjs` → ESLint (`complexity`, `max-lines-per-function`, `max-params`, `max-depth`) | `governance`           | Changed TS/TSX vs base ref             |
+| Terraform import-plan contract      | `npm run test:terraform-import-plan` → `scripts/test-terraform-import-plan-check.py`                        | `governance` + CI      | Synthetic plan JSON + canonical maps   |
+| Terraform release-plan contract     | `npm run test:terraform-release-plan` → `scripts/test-terraform-release-plan-check.py`                      | `governance` + CI      | Synthetic plan JSON + 15 fixtures      |
+| Terraform isolation gate contract   | `npm run test:terraform-isolation` → `scripts/check-terraform-isolation.test.mjs`                           | `governance` + CI      | Changed-file classifier                |
+| Terraform formatting/validation     | `npm run test:terraform` → `scripts/terraform-validate.mjs`                                                 | `governance` + CI      | `terraform/live/dev`                   |
+| HCP run guard                       | `npm run test:hcp-run-guard` → `scripts/test-hcp-run-guard.py`                                              | `governance` + CI      | Workspace invariants + apply reconcile |
+| CloudFront release verify           | `npm run test:cloudfront-release-verify` → `scripts/test-verify-cloudfront-release.sh`                      | `governance` + CI      | Stubbed aws/curl                       |
+| GitHub workflow shell               | `npm run test:github-workflows` → `scripts/check-github-workflows.sh`                                       | `governance` + CI      | `bash -n` + actionlint                 |
+| Terraform/app change isolation      | `terraform-isolation.yaml` job `terraform-isolation` → `scripts/check-terraform-isolation.mjs`              | CI (PR)                | Changed files of the PR                |
+
+## No-false-pass guarantees
+
+- **`--max-warnings=0`** — a warning is a failure. There is no "warning-only"
+  backlog; rules ship green (see AGENTS.md → How to add a convention).
+- **Type-aware rules fail closed** — `seahaven/no-non-boolean-jsx-and` reports
+  when type services are unavailable rather than silently claiming safety.
+- **Godfile ratchet is monotonic** — any new file over the cap, new baseline
+  entry, global cap increase, per-file cap increase, or growth beyond a frozen
+  legacy cap fails. Only cap reductions and entry removals are allowed.
+- **Changed-file maintainability fails closed without a valid base** — in CI the
+  base ref is derived from `GITHUB_BASE_REF` (PR) or `github.event.before`
+  (push). An absent or unresolvable base is a failure, not a pass.
+- **Terraform gates never touch live state** — `terraform init -backend=false
+-lockfile=readonly` and `validate` run offline; the plan checker is tested
+  against synthetic plan JSON. Real import and controlled-update plans from HCP
+  are migration evidence reviewed by a human before an approved apply
+  (`terraform/README.md`).
+- **The isolation gate re-evaluates on label changes** — the
+  `terraform-isolation-override` label is the only way to merge a mixed
+  Terraform/application PR. `.github/workflows/terraform-isolation.yaml`
+  runs `terraform-isolation` on `labeled` and `unlabeled` as well as the
+  default pull-request types, so adding or removing the label re-checks
+  the current labels without starting a new Frontend checks run. Removing
+  the label fails a mixed PR that had previously passed with the override.
+
+## Where the gates run
+
+- **Locally:** `npm run verify`. `lint-staged` (via Husky) re-runs ESLint +
+  Prettier on staged files at commit; commitlint enforces Conventional Commits.
+- **CI ([`.github/workflows/ci.yaml`](.github/workflows/ci.yaml)):** the org
+  reusable workflow (`ci-typescript-frontend.yaml`, Node 24) runs
+  format/lint/build/tests, **and** a repo-owned `governance` job runs
+  `npm run verify` (with Terraform 1.16.0 installed) so the maintainability
+  ratchets and repository gates are guaranteed from this repository regardless
+  of the reusable workflow.
+- **Terraform isolation ([`.github/workflows/terraform-isolation.yaml`](.github/workflows/terraform-isolation.yaml)):**
+  on pull requests, fails when Terraform infrastructure and application code
+  change together. Label add/remove re-runs only this workflow.
+
+## Toolchain pin
+
+Node ≥ 22.22.1 (CI uses Node 24); npm 11.16.0 via `packageManager` (use
+`corepack npm …` if your default `npm` is older). The lockfile is
+`package-lock.json` v3; install with `npm ci`. Governance also needs
+`terraform` (CI: 1.16.0; `versions.tf` accepts `>= 1.14.0, < 2.0.0`) and
+`python3` (3.10+) on `PATH`.
diff --git a/README.md b/README.md
index 58beeacc..b96e8b1e 100644
--- a/README.md
+++ b/README.md
@@ -1,70 +1,204 @@
-# Getting Started with Create React App
+# SHOC Frontend (`shoc-frontend-new`)
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+[![CI](https://github.com/Sea-Haven-Industries/shoc-frontend-new/actions/workflows/ci.yaml/badge.svg?branch=dev)](https://github.com/Sea-Haven-Industries/shoc-frontend-new/actions/workflows/ci.yaml)
+[![Deploy](https://github.com/Sea-Haven-Industries/shoc-frontend-new/actions/workflows/deploy.yml/badge.svg)](https://github.com/Sea-Haven-Industries/shoc-frontend-new/actions/workflows/deploy.yml)
+![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)
+![React](https://img.shields.io/badge/React-087EA4?logo=react&logoColor=white)
+![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=white)
+![Terraform](https://img.shields.io/badge/Terraform-844FBA?logo=terraform&logoColor=white)
 
-## Available Scripts
+Vite + React SPA for Sea Haven facility management (SHOC): work orders, vendor
+portal, uplifts, and related admin features. This is the selective rebuild of
+the legacy SHOC frontend — new code follows the IrisLoan.Admin conventions
+documented in [`docs/ARCHITECTURE_PLAN.md`](docs/ARCHITECTURE_PLAN.md).
 
-In the project directory, you can run:
+- **GitHub:** `Sea-Haven-Industries/shoc-frontend-new`
+- **Hosted at:** <https://dev.seahaven.com> (dev environment; the only environment today)
+- **Backend API:** `https://api.dev.seahaven.com/api` (called directly, cross-origin) — source: `Sea-Haven-Industries/shoc-backend`
 
-### `npm start`
+## Architecture
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+Static SPA hosting on AWS, owned by HCP Terraform
+([`terraform/README.md`](terraform/README.md)). CloudFront serves the built
+`dist/` from a private S3 bucket using a current/previous origin group;
+the SPA calls the backend directly over HTTPS at `VITE_API_URL` (no `/api`
+proxy at the CDN — the backend allows CORS).
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+```mermaid
+graph LR
+    U[Browser] -->|HTTPS dev.seahaven.com| CF[CloudFront]
+    CF -->|origin group OAC| S3[S3 seahaven-shoc-frontend-dev]
+    CF -.->|viewer-request fn| FN[SPA rewrite → /index.html]
+    U -->|HTTPS api.dev.seahaven.com/api CORS| API[SHOC backend API]
+    GH[GitHub Actions] -->|OIDC upload releases/*| S3
+    TF[HCP Terraform shoc-frontend-new-dev] -->|pointer origin_path invalidation| CF
+```
 
-### `npm test`
+Dev hosting and content CD are owned by HCP Terraform (SH-300). Staging still
+uses CloudFormation outputs and `scripts/deploy-web.sh` (SH-287).
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Frontend stack: React 19, TypeScript, Vite, Tailwind CSS 4 + MUI, TanStack
+Query, React Router (via `@generouted/react-router`), React Hook Form + Zod,
+Ky HTTP client. Source layout: `src/api/`, `src/domain/`, `src/app/` (see the
+architecture plan for the keep/discard migration matrix).
 
-### `npm run build`
+## AWS Resources
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+HCP workspace **`shoc-frontend-new-dev`** — account `396287094661`, region
+`us-east-1`. Defined in [`terraform/live/dev`](terraform/live/dev).
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+| Resource                | Name                                                                   | Purpose                                                                                                           |
+| ----------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| S3 bucket               | `seahaven-shoc-frontend-dev`                                           | Private origin (BLOCK_ALL, SSE, versioned; OAC-only reads)                                                        |
+| CloudFront distribution | (stack output `DistributionId`)                                        | HTTPS static hosting on `dev.seahaven.com`, ACM `*.seahaven.com`                                                  |
+| CloudFront Function     | `SpaRewrite`                                                           | Viewer-request rewrite of extensionless paths to `/index.html` (deep links)                                       |
+| IAM role                | `githubdeploy-shoc-frontend-new-dev`                                   | GitHub Actions OIDC deploy role, trust scoped to `repo:Sea-Haven-Industries/shoc-frontend-new:ref:refs/heads/dev` |
+| Route 53 records        | A/AAAA apex alias in zone `dev.seahaven.com` (`Z07671212N75U4YLPWZR8`) | Points the custom domain at CloudFront                                                                            |
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+No Lambdas, queues, or databases — this stack is static hosting only.
 
-### `npm run eject`
+## Configuration
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+### Secrets
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+No Secrets Manager or SSM parameters. AWS access is OIDC only; the deploy role
+ARNs are deterministic and pinned in the workflows. The one **GitHub Actions
+repo secret** is:
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+| Secret              | Purpose                                                            |
+| ------------------- | ------------------------------------------------------------------ |
+| `SENTRY_AUTH_TOKEN` | Source-map upload by `scripts/upload-sourcemaps.sh` after a deploy |
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+### Environment variables (build-time, `VITE_*`)
 
-## Learn More
+| Variable          | Description                                                  | Dev value                                                                   |
+| ----------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------- |
+| `VITE_API_URL`    | Ky API base prefix, **baked into the build** at `vite build` | `/api` (dev server) / `https://api.dev.seahaven.com/api` (production build) |
+| `VITE_API_TARGET` | Dev-proxy target for `/api` (Vite dev server only)           | `http://localhost:5141`                                                     |
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+`VITE_API_URL` supplies the full API prefix — route paths in `API_PATHS` do
+**not** include `/api`. Absolute values **must end with `/api`**;
+`vite.config.ts` enforces this via `config/api-url-contract.ts` and fails the
+build otherwise. See [`.env.example`](.env.example),
+[`.env.development`](.env.development), and [`.env.production`](.env.production).
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+Pinned hosting constants (domain, certificate ARN, hosted zone) live in
+[`terraform/live/dev/main.tf`](terraform/live/dev/main.tf).
 
-### Code Splitting
+## Local Development
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+Requirements: Node.js ≥ 22.22.1 (CI/CD run Node 24), npm 11.16.0 (pinned via
+`packageManager`).
 
-### Analyzing the Bundle Size
+```bash
+npm ci
+cp .env.example .env   # then set VITE_API_URL=/api for local dev
+npm run dev            # Vite dev server on port 3000, proxies /api → VITE_API_TARGET
+```
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+The dev proxy expects the `shoc-backend` API at `http://localhost:5141`;
+override with `VITE_API_TARGET` (e.g. `https://api.dev.seahaven.com` to use
+the deployed dev API).
 
-### Making a Progressive Web App
+| Command                                    | Description                                                        |
+| ------------------------------------------ | ------------------------------------------------------------------ |
+| `npm run dev`                              | Start Vite dev server on port 3000                                 |
+| `npm run build`                            | Type-check (`tsc -b`) and production build to `dist/`              |
+| `npm run preview`                          | Preview the production build locally                               |
+| `npm test` / `npm run test:watch`          | Vitest unit tests (once / watch)                                   |
+| `npm run test:e2e` / `npm run test:e2e:ui` | Playwright e2e tests (headless / UI mode)                          |
+| `npm run lint` / `npm run lint:fix`        | ESLint (check / auto-fix)                                          |
+| `npm run format` / `npm run format:check`  | Prettier (write / check)                                           |
+| `npm run governance`                       | Governance checks (godfile, maintainability, Terraform, CD guards) |
+| `npm run verify`                           | **All gates**: format + lint + build + test + governance           |
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+`npm run governance` needs `terraform` and `python3` on `PATH` for the
+Terraform and content-CD gates.
 
-### Advanced Configuration
+Husky + lint-staged run ESLint and Prettier on staged files at commit;
+commitlint enforces conventional commit messages. Run `npx tsc --noEmit` (or
+`npm run build`) before pushing to catch type errors early.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+## Contributing
 
-### Deployment
+- Branch from `dev` with a kebab-case description and a prefix matching the
+  work: `feature/`, `bug/`, `hotfix/`, `chore/`, `docs/`, or `refactor/`
+  (e.g. `feature/vendor-portal-filters`, `chore/sea-haven-branding`).
+- Commit messages follow
+  [Conventional Commits](https://www.conventionalcommits.org) — commitlint
+  rejects anything else at commit time.
+- Open PRs against `dev`. Both `dev` and `main` are protected: every PR needs
+  a green CI run and an approving review from a code owner
+  (`@Sea-Haven-Industries/internal-dev`); new pushes dismiss stale approvals.
+  Merged branches are deleted automatically.
+- A PR that changes `terraform/**` may not also change application code (the
+  `terraform-isolation` CI job); ship Terraform in its own PR.
+- Promotion flow: `feature/* → dev` (deployed to `dev.seahaven.com` through
+  Terraform content CD once `TERRAFORM_CONTENT_CD_ENABLED=true`)
+  `→ main` (production promotion — no prod environment exists yet).
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+## Deployment
 
-### `npm run build` fails to minify
+No stored AWS keys — OIDC only. Infrastructure and content deploy separately:
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+- **CI** ([`.github/workflows/ci.yaml`](.github/workflows/ci.yaml)) — on push
+  and PRs to `main`/`dev`/`staging`, calls
+  `Sea-Haven-Industries/.github` → `ci-typescript-frontend.yaml` (Node 24):
+  format check, lint, build, tests; **and** runs a repo-owned `governance` job
+  that calls `npm run verify` so every gate (including the maintainability
+  ratchets in [`scripts/governance-check.mjs`](scripts/governance-check.mjs),
+  the Terraform gates, and the content-CD guards) is guaranteed from this
+  repository. Conventions and gates are documented under
+  [`AGENTS.md`](AGENTS.md), [`QUALITY_GATES.md`](QUALITY_GATES.md),
+  [`ARCHITECTURE_AND_CODE_QUALITY.md`](ARCHITECTURE_AND_CODE_QUALITY.md), and
+  [`REVIEW_AND_PR_FRAMEWORK.md`](REVIEW_AND_PR_FRAMEWORK.md).
+- **Terraform isolation**
+  ([`.github/workflows/terraform-isolation.yaml`](.github/workflows/terraform-isolation.yaml))
+  — fails a PR that mixes `terraform/**` with application code, so a Terraform
+  merge never races a content release for the HCP workspace.
+- **Dev content** ([`.github/workflows/deploy.yml`](.github/workflows/deploy.yml))
+  — `workflow_dispatch` on `dev`, and push-to-`dev` when
+  `vars.TERRAFORM_CONTENT_CD_ENABLED` is `true` (`paths-ignore: terraform/**`).
+  GitHub uploads `releases/<sha>-<run>-<attempt>/` only. Terraform updates
+  `.release/current`, both origin paths, and the invalidation action. Verify
+  and rollback share `scripts/verify-cloudfront-release.sh`. Every run prints
+  a live-state summary.
+- **Staging content**
+  ([`.github/workflows/deploy-staging.yml`](.github/workflows/deploy-staging.yml))
+  — on push to `staging`, unchanged.
+- **Infrastructure** — administrator-run HCP Terraform workspace
+  `shoc-frontend-new-dev` ([`terraform/README.md`](terraform/README.md)).
+  Staging hosting stays on the existing CloudFormation stack until SH-287.
+
+Do not run `scripts/deploy-web.sh` against dev. That script remains the staging
+content publisher only.
+
+## Operations
+
+- **Verify:** open <https://dev.seahaven.com> after a green **Deploy dev
+  content** run in the Actions tab; confirm a deep link (e.g. a work-orders
+  route) loads directly and API calls succeed.
+- **Logs:** deploy logs live in GitHub Actions (CI + Deploy workflows). There
+  are no CloudWatch application logs — the stack is static hosting; runtime
+  errors surface in the browser and on the backend API's side.
+- **Common failure modes:**
+  - _Stale content after deploy_ — CloudFront is still `InProgress` or an edge
+    still serves the previous `index.html` hash. Read the live-state summary
+    before assuming the site is down.
+  - _OIDC `AssumeRole` errors_ — the trust policy is scoped to the `dev` ref
+    on this repo; dispatching the workflow from another branch is rejected by
+    design.
+  - _Broken API requests after a build_ — `VITE_API_URL` missing the `/api`
+    suffix or carrying the wrong environment's host (it is baked in at build time).
+  - _CORS errors_ — the backend must allow the frontend origin; CloudFront does
+    not proxy `/api`.
+- **Push-to-`dev` is gated.** Merging to `dev` publishes only when
+  `TERRAFORM_CONTENT_CD_ENABLED=true`. Merging a `terraform/**` change queues
+  an HCP Terraform run that a human confirms or discards before the next
+  content release (see the operational rules in `terraform/README.md`).
+
+## Documentation
+
+- Dev Terraform runbook: [`terraform/README.md`](terraform/README.md)
+- Rebuild strategy and conventions: [`docs/ARCHITECTURE_PLAN.md`](docs/ARCHITECTURE_PLAN.md);
+  design system and UI docs under [`docs/`](docs/)
diff --git a/REVIEW_AND_PR_FRAMEWORK.md b/REVIEW_AND_PR_FRAMEWORK.md
new file mode 100644
index 00000000..3496a066
--- /dev/null
+++ b/REVIEW_AND_PR_FRAMEWORK.md
@@ -0,0 +1,85 @@
+# REVIEW_AND_PR_FRAMEWORK.md — PR review contract
+
+Every PR is reviewed against this contract, by humans and by review agents. The
+goal is high-signal review: catch real behavior, security, performance, and
+regression problems — not re-lint what the gates already enforce.
+
+## 1. Review the exact head
+
+- **MUST** review the diff at the **current PR head**, not a stale checkout.
+  Re-pull before reviewing if new commits landed; stale approvals are dismissed
+  on push by branch protection.
+- **MUST** read the full diff of every changed file, including renames and
+  generated/mapper code, not only the "interesting" components.
+
+## 2. Board-backed regression inventory
+
+- **MUST** check the change against the **Seahaven Jira SH board** inventory —
+  all visible tickets for this area, not only the current ticket. Behavior that
+  is Done / QA-approved / released is **protected scope**.
+- **MUST** treat a plausible regression against protected behavior as a
+  **Blocker** until disproven with repo evidence (the accepting tests, the linked
+  PR/release, and a targeted check of the changed code paths).
+- **MUST NOT** approve if board access or the relevant inventory is missing —
+  say so and block rather than infer a pass. A missing ticket link alone is not
+  a blocker, but known acceptance criteria must still be traced.
+
+The current Jira workflow has no `Ready for QA` transition. Merged work remains
+in the documented pre-QA status until QA evidence supports `Done`; do not invent
+a status or mark unverified work Done.
+
+## 3. Behavior-based testing
+
+- **MUST** test through **public behavior** (rendered output, user interactions,
+  query/mutation outcomes), not internal implementation details. Prefer
+  `@testing-library` queries and user-event flows; assert what users observe.
+- **MUST NOT** add tests whose only purpose is to prove a tool (ESLint, the
+  governance script) executes — validate tooling by running the real gates
+  (`npm run verify`), not with assertion-free unit tests.
+- **SHOULD** cover the meaningful branches of new logic: the happy path, the
+  error/empty state, and any boundary the change introduces.
+
+## 4. Security review
+
+- **MUST** confirm no raw server error payloads, stack traces, or internal IDs
+  leak to the UI (see ARCHITECTURE_AND_CODE_QUALITY.md §Security).
+- **MUST** confirm no secrets/tokens are introduced into the build, and that no
+  `VITE_*` variable carries a secret (it is baked into the bundle).
+- **SHOULD** check untrusted input is validated (Zod) before use and that
+  dangerously-set HTML / unescaped server strings are not introduced.
+
+## 5. Performance and Big-O review
+
+- **MUST** flag algorithmic regressions in hot paths: `O(n²)`+ loops over server
+  collections, re-filtering/sorting on every render, unbounded list rendering
+  without virtualization.
+- **MUST** confirm TanStack Query keys are stable and that mutations invalidate
+  the correct keys (no stale cache, no redundant refetch storms).
+- **SHOULD** question speculative `useMemo`/`useCallback` (add when measured) and
+  unstable identities passed to memoized children.
+
+## 6. No style-only comments
+
+- **MUST NOT** leave comments that only restate what Prettier or ESLint already
+  enforces (formatting, naming nits the linter catches). Style is settled by the
+  gates; review is for behavior, correctness, security, and architecture.
+- **MUST NOT** put Jira issue keys or ticket titles in source comments, JSDoc,
+  or test names (for example `(SH-183)`). Ticket identity belongs in the PR,
+  commit message, and branch — not in the code. Flag and request removal if a
+  diff adds them.
+- **MUST** make every comment actionable: tie it to a behavior, a risk, or an
+  evidence-based convention in these docs, and offer a concrete fix or a
+  targeted question. Use GitHub suggestion blocks when safe.
+
+## 7. Review close-out
+
+A review is complete when it records, briefly:
+
+1. Findings ordered by severity (Blocker / Needs-change / Suggestion), or
+   "no findings".
+2. Open questions and their owner.
+3. Which of the above checks were run, and any that were skipped (and why).
+4. Residual risk, if approving.
+
+Do not write a monolithic review body or a validation transcript into the PR
+surface; keep comments inline and high-signal.
diff --git a/commitlint.config.js b/commitlint.config.js
new file mode 100644
index 00000000..fa584fb6
--- /dev/null
+++ b/commitlint.config.js
@@ -0,0 +1 @@
+export default { extends: ["@commitlint/config-conventional"] };
diff --git a/config/api-url-contract.test.ts b/config/api-url-contract.test.ts
new file mode 100644
index 00000000..a087ff50
--- /dev/null
+++ b/config/api-url-contract.test.ts
@@ -0,0 +1,41 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+import { assertAbsoluteApiUrlHasApiSegment } from "./api-url-contract";
+
+describe("assertAbsoluteApiUrlHasApiSegment", () => {
+  it("allows relative /api", () => {
+    expect(() => assertAbsoluteApiUrlHasApiSegment("/api")).not.toThrow();
+  });
+
+  it("allows empty or undefined", () => {
+    expect(() => assertAbsoluteApiUrlHasApiSegment(undefined)).not.toThrow();
+    expect(() => assertAbsoluteApiUrlHasApiSegment("")).not.toThrow();
+  });
+
+  it("allows absolute URL ending with /api", () => {
+    expect(() =>
+      assertAbsoluteApiUrlHasApiSegment("https://api.seahavenindustries.com/api"),
+    ).not.toThrow();
+  });
+
+  it("rejects absolute URL without /api", () => {
+    expect(() => assertAbsoluteApiUrlHasApiSegment("https://api.seahavenindustries.com")).toThrow(
+      /must end with \/api/,
+    );
+  });
+});
+
+describe(".env.example contract", () => {
+  it("documents an absolute VITE_API_URL that includes /api", () => {
+    const envExample = readFileSync(path.resolve(process.cwd(), ".env.example"), "utf8");
+    const match = envExample.match(/^VITE_API_URL=(.+)$/m);
+
+    expect(match).not.toBeNull();
+    const value = match![1]!.trim();
+
+    if (value.startsWith("http")) {
+      expect(() => assertAbsoluteApiUrlHasApiSegment(value)).not.toThrow();
+    }
+  });
+});
diff --git a/config/api-url-contract.ts b/config/api-url-contract.ts
new file mode 100644
index 00000000..85f44af6
--- /dev/null
+++ b/config/api-url-contract.ts
@@ -0,0 +1,21 @@
+/** Absolute VITE_API_URL values must end with this segment (API_PATHS omit /api). */
+export const ABSOLUTE_API_URL_SUFFIX = /\/api\/?$/;
+
+/**
+ * Fails fast when an absolute VITE_API_URL omits the /api segment.
+ * Relative values (e.g. /api) are valid and skipped.
+ */
+export function assertAbsoluteApiUrlHasApiSegment(apiUrl: string | undefined): void {
+  const trimmed = apiUrl?.trim();
+  if (!trimmed?.startsWith("http")) {
+    return;
+  }
+
+  if (!ABSOLUTE_API_URL_SUFFIX.test(trimmed)) {
+    throw new Error(
+      `VITE_API_URL absolute URLs must end with /api (got: ${trimmed}). ` +
+        "API route paths do not include /api — set VITE_API_URL to the full API base, e.g. https://api.example.com/api. " +
+        "See README.md and .env.example.",
+    );
+  }
+}
diff --git a/config/pwa-manifest.test.ts b/config/pwa-manifest.test.ts
new file mode 100644
index 00000000..a509de14
--- /dev/null
+++ b/config/pwa-manifest.test.ts
@@ -0,0 +1,33 @@
+import { readFileSync, existsSync } from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+const root = path.resolve(__dirname, "..");
+const manifest = JSON.parse(readFileSync(path.join(root, "public/manifest.json"), "utf-8")) as {
+  name: string;
+  short_name: string;
+  theme_color: string;
+  icons: Array<{ src: string }>;
+};
+const indexHtml = readFileSync(path.join(root, "index.html"), "utf-8");
+
+describe("PWA install metadata", () => {
+  it("identifies the app as Sea Haven, not template branding", () => {
+    expect(manifest.name).toContain("Sea Haven");
+    expect(manifest.short_name).not.toBe("React App");
+    expect(manifest.name).not.toContain("Create React App");
+  });
+
+  it("uses the design-system theme color, matching index.html", () => {
+    expect(manifest.theme_color).toBe("#1c75bc");
+    expect(indexHtml).toContain(`<meta name="theme-color" content="${manifest.theme_color}" />`);
+  });
+
+  it("only references icon files that exist in public/", () => {
+    for (const icon of manifest.icons) {
+      expect(existsSync(path.join(root, "public", icon.src)), `missing public/${icon.src}`).toBe(
+        true,
+      );
+    }
+  });
+});
diff --git a/config/sentry-release.test.ts b/config/sentry-release.test.ts
new file mode 100644
index 00000000..15f8cc5c
--- /dev/null
+++ b/config/sentry-release.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+
+import { LOCAL_DEVELOPMENT_RELEASE, resolveSentryRelease } from "./sentry-release";
+
+describe("resolveSentryRelease", () => {
+  it("maps the exact commit to the frontend release", () => {
+    const sha = "ABCDEF0123456789ABCDEF0123456789ABCDEF01";
+
+    expect(resolveSentryRelease(sha, true)).toEqual({
+      commitSha: sha.toLowerCase(),
+      release: `shoc-frontend@${sha.toLowerCase()}`,
+    });
+  });
+
+  it("fails CI when the commit identity is missing or malformed", () => {
+    expect(() => resolveSentryRelease(undefined, true)).toThrow(/40-character commit SHA/);
+    expect(() => resolveSentryRelease("not-a-sha", true)).toThrow(/40-character commit SHA/);
+  });
+
+  it("labels non-CI builds without a commit as local development", () => {
+    expect(resolveSentryRelease(undefined, false)).toEqual({
+      commitSha: LOCAL_DEVELOPMENT_RELEASE,
+      release: LOCAL_DEVELOPMENT_RELEASE,
+    });
+  });
+});
diff --git a/config/sentry-release.ts b/config/sentry-release.ts
new file mode 100644
index 00000000..8bf0c90a
--- /dev/null
+++ b/config/sentry-release.ts
@@ -0,0 +1,32 @@
+export const SENTRY_SERVICE_NAME = "shoc-frontend";
+export const LOCAL_DEVELOPMENT_RELEASE = "local-development";
+
+const COMMIT_SHA = /^[0-9a-f]{40}$/i;
+
+export function resolveSentryRelease(
+  candidate: string | undefined,
+  ci: boolean,
+): {
+  commitSha: string;
+  release: string;
+} {
+  const commitSha = candidate?.trim();
+
+  if (commitSha && COMMIT_SHA.test(commitSha)) {
+    return {
+      commitSha: commitSha.toLowerCase(),
+      release: `${SENTRY_SERVICE_NAME}@${commitSha.toLowerCase()}`,
+    };
+  }
+
+  if (ci) {
+    throw new Error(
+      "CI builds require VITE_APP_COMMIT_SHA or GITHUB_SHA as a 40-character commit SHA",
+    );
+  }
+
+  return {
+    commitSha: LOCAL_DEVELOPMENT_RELEASE,
+    release: LOCAL_DEVELOPMENT_RELEASE,
+  };
+}
diff --git a/docs/ARCHITECTURE_PLAN.md b/docs/ARCHITECTURE_PLAN.md
new file mode 100644
index 00000000..1e5d44ee
--- /dev/null
+++ b/docs/ARCHITECTURE_PLAN.md
@@ -0,0 +1,102 @@
+# Architecture Plan — Sea Haven (Selective Rebuild)
+
+> Aligned with IrisLoan.Admin · Vite SPA + React Router · **no Next.js** · Tailwind + MUI
+
+Mirror document of the Cursor plan. Strategy: **reuse knowledge, discard legacy code** — do not normalize/refactor the current project.
+
+---
+
+## Strategy in one sentence
+
+Build `api/` + `domain/` + `app/` from scratch; use `pages/` only as **endpoint and business rule reference**; **delete** each legacy folder when the new feature is ready.
+
+---
+
+## Matrix: Keep vs Discard
+
+### Keep (extract logic → new code)
+
+| Legacy                                | Keep                             | Destination                                      |
+| ------------------------------------- | -------------------------------- | ------------------------------------------------ |
+| `lib/api/services.js`                 | ASP.NET paths + response parsing | `api/api-paths.ts`, `api/handle-api-response.ts` |
+| `pages/*/api.js`                      | Real endpoints                   | `api/api-paths.ts`                               |
+| `constants/queryKeys.js`              | Entities                         | `infra/query-key/query-key.ts`                   |
+| `hooks/useDebounce.js`, `useModal.js` | Hooks                            | `hooks/*.ts`                                     |
+| `hooks/api/usePMSchedules.js`         | RQ pattern                       | Template `domain/*/use-cases/`                   |
+| `lib/queryClient.js`                  | Cache defaults                   | `lib/query/query-client.ts`                      |
+| `App.js`, `Sidebar.js`                | Routes and menu                  | `app/routes.tsx`, `config/menu.ts`               |
+| `pages/workorders/` (list)            | Business flow                    | Reference for POC                                |
+
+### Discard (delete without refactoring)
+
+- `apiUtil.js`, `services/api.js`, `lib/api/client.js`
+- `tokenUtility.js`, `authService.js`, Redux (`app/store.js`, slices)
+- `usePaginatedList.js`, entire `pages/` folder (after replacement)
+- `Site.Layout.js`, `setupProxy.js`, `site.css`, per-feature CSS, Font Awesome
+- Forms `*FormPage.js` (rewrite with RHF + Zod)
+- `SharedTable.js`, `ActionBar.js` (recreate if adapting is costly)
+
+### Defer (later)
+
+- `pages/vendor-portal/` → `domain/vendor-portal/`
+- `pages/calendar/` → new FullCalendar wrapper
+
+---
+
+## Feature priority
+
+Full matrix (waves, dependencies, LOC, done criteria): **[`FEATURE_PRIORITIZATION.md`](FEATURE_PRIORITIZATION.md)** · TS config: [`src/config/feature-priorities.ts`](../src/config/feature-priorities.ts).
+
+| Wave              | Scope                                                                       |
+| ----------------- | --------------------------------------------------------------------------- |
+| **0 POC**         | auth → work-orders (list)                                                   |
+| **1 must-have**   | work-orders (full), dashboard, settings/dropdowns                           |
+| **2**             | accounts, locations, employees                                              |
+| **3 should-have** | vendors, vendor-pos, uplifts, follow-ups, contacts, settings/task-templates |
+| **4 later**       | calendar, vendor-portal, pm-schedules, assets, reports/documents            |
+
+Stakeholder decision: **auth + work-orders first**; POC = auth + work-orders list (not pm-schedules).
+
+---
+
+## Target structure
+
+```
+src/
+├── api/
+├── domain/<feature>/
+├── infra/query-key/
+├── lib/
+├── components/ui/ + common/
+├── app/
+├── config/menu.ts
+├── hooks/
+├── providers/
+└── main.tsx
+```
+
+---
+
+## Phases
+
+| Phase | Goal                                                                                  |
+| ----- | ------------------------------------------------------------------------------------- |
+| **0** | Complete foundation (Ky, routes, layout, AuthProvider, tooling) — Vite/TS/Tailwind ok |
+| **1** | Ky + httpOnly auth cookies; delete legacy HTTP stacks                                 |
+| **2** | Rewrite must-have features; delete `pages/<feature>/` per delivery                    |
+| **3** | UI shell + RHF+Zod forms                                                              |
+| **4** | Remove `pages/`, Redux, legacy CSS; Docker + CI + Vitest                              |
+
+---
+
+## Next steps
+
+1. Complete foundation (`api/api.ts`, `routes.tsx`, AuthProvider, layout shell)
+2. `api/api-paths.ts` (extract from `lib/api/services.js`)
+3. POC: `domain/auth` + login → delete `pages/auth/`
+4. POC: `domain/work-orders` (list) → delete list portion of `pages/workorders/`
+5. Cookie contract with backend
+
+---
+
+See full plan with diagrams in `.cursor/plans/migração_arquitetura_irisloan_cf39e1a6.plan.md`.
diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md
new file mode 100644
index 00000000..28d3996a
--- /dev/null
+++ b/docs/DESIGN_SYSTEM.md
@@ -0,0 +1,137 @@
+# Sea Haven Design System
+
+Visual foundation for **seaheven.front**, aligned with [seahaven.desing](https://github.com) tokens and IrisLoan.Admin integration patterns (centralized CSS, `@theme inline`, `cn()`).
+
+## Stack
+
+- **MUI-only** — no Radix/shadcn; MUI is the sole component library
+- **Tailwind v4** — semantic utility classes from CSS tokens
+- **Fonts** — Montserrat (headings), DM Sans (body), JetBrains Mono (code) via `@fontsource`
+
+## Token source of truth
+
+| File                        | Purpose                                                      |
+| --------------------------- | ------------------------------------------------------------ |
+| `src/styles/theme.css`      | All `:root` CSS variables + `@theme inline` Tailwind aliases |
+| `src/styles/fonts.css`      | `@fontsource` imports                                        |
+| `src/styles/typography.css` | Base `html`, `body`, `h1–h6`, `.text-caption`, `.text-label` |
+| `src/styles/motion.css`     | `--duration-fast`, `--duration-normal`, `--ease-default`     |
+| `src/styles/globals.css`    | Entry: imports all above + `@custom-variant dark`            |
+
+## Key tokens
+
+### Brand & surfaces
+
+| Token                | Value     | Usage                      |
+| -------------------- | --------- | -------------------------- |
+| `--primary`          | `#1c75bc` | Buttons, links, focus ring |
+| `--primary-hover`    | `#155a92` | Hover states               |
+| `--foreground`       | `#262262` | Primary text               |
+| `--background`       | `#ffffff` | Cards, inputs              |
+| `--color-bg-page`    | `#f9fafb` | Page background            |
+| `--border`           | `#dfe3ea` | Dividers, outlines         |
+| `--muted-foreground` | `#58595b` | Secondary text             |
+
+### Layout
+
+| Token                         | Value   |
+| ----------------------------- | ------- |
+| `--spacing-sidebar`           | `220px` |
+| `--spacing-sidebar-collapsed` | `56px`  |
+| `--spacing-topbar`            | `64px`  |
+
+### Typography scale
+
+| Token            | Size |
+| ---------------- | ---- |
+| `--text-xs`      | 11px |
+| `--text-sm`      | 12px |
+| `--text-base-sm` | 13px |
+| `--text-base`    | 14px |
+| `--text-md`      | 16px |
+| `--text-lg`      | 18px |
+| `--text-xl`      | 22px |
+| `--text-2xl`     | 28px |
+
+### Elevation
+
+| Token         | Usage               |
+| ------------- | ------------------- |
+| `--shadow-sm` | Cards, subtle depth |
+| `--shadow-md` | Dropdowns, panels   |
+| `--shadow-lg` | Dialogs, modals     |
+
+### Work order badges (immutable)
+
+Type, status, and completion-doc tokens (`--type-*`, `--status-*`, `--doc-*`) must not be changed — see `src/components/domain/`.
+
+## Typography hierarchy
+
+| Element         | Font       | Weight | Size           |
+| --------------- | ---------- | ------ | -------------- |
+| `h1`            | Montserrat | 800    | 28px           |
+| `h2`            | Montserrat | 700    | 22px           |
+| `h3`            | Montserrat | 600    | 18px           |
+| `h4–h6`         | Montserrat | 600    | 16–13px        |
+| Body            | DM Sans    | 400    | 14px           |
+| `.text-caption` | DM Sans    | 400    | 12px           |
+| `.text-label`   | DM Sans    | 600    | 11px uppercase |
+
+MUI typography variants in `src/lib/theme/mui-theme.ts` mirror this hierarchy.
+
+## MUI + Tailwind usage
+
+### Prefer themed MUI in forms and data tables
+
+MUI components inherit Sea Haven styling via `mui-theme.ts` overrides (`Button`, `TextField`, `Table`, `Chip`, `Paper`, `Dialog`, `Alert`).
+
+### Prefer semantic Tailwind in layout shells
+
+```tsx
+<div className="bg-background text-foreground border-border" />
+<div className="text-muted-foreground" />
+<div className="bg-primary text-primary-foreground" />
+```
+
+### Compose classes with `cn()`
+
+```tsx
+import { cn } from "@/lib/utils";
+
+<div className={cn("flex gap-2", isActive && "bg-sidebar-accent")} />;
+```
+
+### Shared UI wrappers
+
+| Component    | Path                            | Pattern                      |
+| ------------ | ------------------------------- | ---------------------------- |
+| `Button`     | `components/ui/button.tsx`      | MUI Button + variant presets |
+| `Badge`      | `components/ui/badge.tsx`       | MUI Chip                     |
+| `PageHeader` | `components/ui/page-header.tsx` | PATTERN_001                  |
+| `EmptyState` | `components/ui/empty-state.tsx` | PATTERN_003                  |
+| `FormField`  | `components/ui/form-field.tsx`  | PATTERN_004                  |
+
+### Domain badges
+
+| Component                              | Path                                 |
+| -------------------------------------- | ------------------------------------ |
+| `TypeBadge`                            | `components/domain/type-badge.tsx`   |
+| `StatusBadge` / `WorkOrderStatusBadge` | `components/domain/status-badge.tsx` |
+| `DocBadge`                             | `components/domain/doc-badge.tsx`    |
+
+## Legacy → Sea Haven mapping
+
+| Legacy                    | Sea Haven                      | Consumption                      |
+| ------------------------- | ------------------------------ | -------------------------------- |
+| `#0c4f6f` / `--blue-main` | `--primary` (`#1c75bc`)        | MUI `primary.main`, `bg-primary` |
+| `#083a52` / `--blue-dark` | `--primary-hover`              | Button hover                     |
+| `#f4f6f7` / `--bg`        | `--color-bg-page`              | Body, page shell                 |
+| `#d9dde0` / `--border`    | `--border`                     | Dividers, inputs                 |
+| `#fbfbfb` sidebar         | `--color-sidebar-bg`           | App sidebar                      |
+| Segoe UI 13px             | DM Sans 14px                   | Body typography                  |
+| Bootstrap calendar colors | `--primary`, `--success`, etc. | `calendar-utils.ts`              |
+| `#1a3a5c` login header    | `--color-header-bg-start`      | Login branding strip             |
+
+## Dark mode
+
+`@custom-variant dark (&:is(.dark *))` is configured in `globals.css`. Full dark token set is a future enhancement; light mode is the current default.
diff --git a/docs/DESIGN_SYSTEM_MIGRATION.md b/docs/DESIGN_SYSTEM_MIGRATION.md
new file mode 100644
index 00000000..21cfa639
--- /dev/null
+++ b/docs/DESIGN_SYSTEM_MIGRATION.md
@@ -0,0 +1,88 @@
+# Design System Migration Log
+
+Migration from legacy CSS (`index.css`, `#0c4f6f` palette) to Sea Haven DS tokens. Strategy: **MUI-only**.
+
+## Phase 1 — Foundation
+
+| File                        | Action     | Reason                                                                |
+| --------------------------- | ---------- | --------------------------------------------------------------------- |
+| `src/styles/theme.css`      | Created    | SoT: 131+ Sea Haven tokens + layout/typography/elevation extensions   |
+| `src/styles/fonts.css`      | Created    | Montserrat, DM Sans, JetBrains Mono via `@fontsource`                 |
+| `src/styles/typography.css` | Created    | Base html/body/heading/caption/label styles                           |
+| `src/styles/motion.css`     | Created    | Duration and easing tokens                                            |
+| `src/styles/globals.css`    | Refactored | Import chain + `@custom-variant dark`; removed legacy `@theme` tokens |
+| `src/lib/utils.ts`          | Created    | `cn()` with clsx + tailwind-merge                                     |
+| `src/lib/theme/css-vars.ts` | Created    | `getCssVar()` helper for MUI bridge                                   |
+| `package.json`              | Modified   | Added `@fontsource/*`, `clsx`, `tailwind-merge`                       |
+
+## Phase 2 — MUI Bridge
+
+| File                         | Action   | Reason                                                          |
+| ---------------------------- | -------- | --------------------------------------------------------------- |
+| `src/lib/theme/mui-theme.ts` | Expanded | Full palette, typography, shape, shadows, 8 component overrides |
+
+## Phase 3 — App Shell
+
+| File                                      | Action   | Reason                                             |
+| ----------------------------------------- | -------- | -------------------------------------------------- |
+| `src/components/layout/app-sidebar.tsx`   | Created  | MUI Drawer + sidebar tokens; replaces `Sidebar.js` |
+| `src/components/layout/app-topbar.tsx`    | Created  | MUI AppBar + header gradient; replaces `Topbar.js` |
+| `src/app/(protected)/_layout.tsx`         | Modified | Uses new layout components                         |
+| `src/main.tsx`                            | Modified | Removed `index.css` import                         |
+| `src/app/v/_components/vendor-portal.css` | Modified | Re-tokenized with Sea Haven CSS vars               |
+| `src/index.css`                           | Deleted  | ~487 lines migrated to tokens + TSX shell          |
+| `src/components/Sidebar.js`               | Deleted  | Replaced by `app-sidebar.tsx`                      |
+| `src/components/Topbar.js`                | Deleted  | Replaced by `app-topbar.tsx`                       |
+| `src/styles/FormPage.css`                 | Deleted  | Unused (no imports in codebase)                    |
+
+## Phase 4 — Shared UI
+
+| File                                       | Action   | Reason                                       |
+| ------------------------------------------ | -------- | -------------------------------------------- |
+| `src/components/ui/button.tsx`             | Created  | MUI Button wrapper                           |
+| `src/components/ui/badge.tsx`              | Created  | MUI Chip wrapper                             |
+| `src/components/ui/page-header.tsx`        | Created  | PATTERN_001                                  |
+| `src/components/ui/empty-state.tsx`        | Created  | PATTERN_003                                  |
+| `src/components/ui/form-field.tsx`         | Created  | PATTERN_004                                  |
+| `src/components/domain/type-badge.tsx`     | Created  | WO type tokens                               |
+| `src/components/domain/status-badge.tsx`   | Created  | WO status tokens + API aliases               |
+| `src/components/domain/doc-badge.tsx`      | Created  | Completion doc tokens (MUI icons)            |
+| `src/app/(protected)/workorders/index.tsx` | Modified | `WorkOrderStatusBadge` replaces generic Chip |
+
+## Phase 5 — Page refactor
+
+| File                                                                   | Action   | Reason                                     |
+| ---------------------------------------------------------------------- | -------- | ------------------------------------------ |
+| `src/app/(auth)/login.tsx`                                             | Modified | `#1a3a5c` → `var(--color-header-bg-start)` |
+| `src/app/(protected)/dashboard.tsx`                                    | Modified | `border-gray-*` → `border-border`          |
+| `src/app/(protected)/index.tsx`                                        | Modified | Same as dashboard                          |
+| `src/app/(protected)/settings/dropdowns.tsx`                           | Modified | Semantic sidebar + active states           |
+| `src/app/(protected)/settings/task-templates.tsx`                      | Modified | Semantic borders/text                      |
+| `src/components/common/settings-nav.tsx`                               | Modified | `text-primary`, `border-border`            |
+| `src/components/common/calendar/calendar-utils.ts`                     | Modified | Bootstrap hex → Sea Haven CSS vars         |
+| `src/components/common/calendar/calendar-action-bar.tsx`               | Modified | Semantic surface classes                   |
+| `src/components/common/calendar/event-calendar.tsx`                    | Modified | Semantic surface classes                   |
+| `src/components/common/signature-capture.tsx`                          | Modified | Canvas colors from CSS vars                |
+| `src/app/(protected)/workorders/_components/dispatch-create-modal.tsx` | Modified | Semantic borders/hover                     |
+| `src/app/(protected)/workorders/_components/dispatch-detail-modal.tsx` | Modified | Semantic borders                           |
+| `src/app/(protected)/workorders/[id].tsx`                              | Modified | Semantic borders                           |
+| `src/app/(protected)/vendor-pos/[id].tsx`                              | Modified | Semantic borders                           |
+
+## Phase 6 — Docs & validation
+
+| File                              | Action  | Reason                          |
+| --------------------------------- | ------- | ------------------------------- |
+| `docs/DESIGN_SYSTEM.md`           | Created | Token reference and usage guide |
+| `docs/DESIGN_SYSTEM_MIGRATION.md` | Created | This file                       |
+
+## Visual impact summary
+
+- Primary color: `#0c4f6f` → `#1c75bc` (expected, documented)
+- Body font: Segoe UI 13px → DM Sans 14px
+- Sidebar: `#fbfbfb` → `#f6f8fb` with Sea Haven active/hover states
+- Header: flat blue gradient → Sea Haven multi-stop gradient
+
+## Not migrated (intentional)
+
+- CRUD list pages using default MUI theming — inherit via `mui-theme.ts` without JSX changes
+- `src/app/v/_components/signature-pad.tsx` — vendor portal isolated; minor `#111` stroke remains
diff --git a/docs/FEATURE_PRIORITIZATION.md b/docs/FEATURE_PRIORITIZATION.md
new file mode 100644
index 00000000..aa52e770
--- /dev/null
+++ b/docs/FEATURE_PRIORITIZATION.md
@@ -0,0 +1,160 @@
+# Feature Prioritization Matrix — Sea Haven
+
+> Source of truth for legacy → `domain/` + `app/` migration order.
+> Machine-readable config: [`src/config/feature-priorities.ts`](../src/config/feature-priorities.ts).
+
+---
+
+## Stakeholder decisions
+
+| Decision                 | Detail                                                                                    |
+| ------------------------ | ----------------------------------------------------------------------------------------- |
+| Top priority             | **`auth`** and **`work-orders`**                                                          |
+| End-to-end POC           | **`auth` + work-orders (list)** — validate Ky, React Query, layout shell and AuthProvider |
+| Other features           | Flexible order, guided by technical dependencies (waves below)                            |
+| POC **does not** include | `pm-schedules` (deferred to Wave 4)                                                       |
+
+---
+
+## Full matrix
+
+| Order | Feature                   | Tier        | Wave | Legacy folder                       | Routes                                                                        | LOC ~  | Dependencies                                                                 |
+| ----- | ------------------------- | ----------- | ---- | ----------------------------------- | ----------------------------------------------------------------------------- | ------ | ---------------------------------------------------------------------------- |
+| 1     | auth                      | POC         | 0    | `pages/auth/`                       | `/login`                                                                      | 513    | —                                                                            |
+| 2     | work-orders (list)        | POC         | 0    | `pages/workorders/` (list)          | `/workorders`                                                                 | 4.3k\* | auth                                                                         |
+| 3     | work-orders (form + view) | must-have   | 1    | `pages/workorders/`                 | `/workorders/new`, `/workorders/:id`, `/workorders/edit/:id`                  | 4.3k\* | auth, work-orders (list), settings/dropdowns, accounts, locations, employees |
+| 4     | dashboard                 | must-have   | 1    | `pages/Dashboard.js`                | `/`, `/dashboard`                                                             | 253    | auth                                                                         |
+| 5     | settings/dropdowns        | must-have   | 1    | `pages/settings/` (DropdownOptions) | `/settings/dropdowns`                                                         | 866\*  | auth                                                                         |
+| 6     | accounts                  | must-have   | 2    | `pages/accounts/`                   | `/accounts`, `/accounts/new`, `/accounts/edit/:id`                            | 745    | auth                                                                         |
+| 7     | locations                 | must-have   | 2    | `pages/locations/`                  | `/locations`, `/locations/new`, `/locations/edit/:id`                         | 1.1k   | auth, accounts                                                               |
+| 8     | employees                 | must-have   | 2    | `pages/employees/`                  | `/employees`, `/employees/new`, `/employees/edit/:id`                         | 1.9k   | auth                                                                         |
+| 9     | vendors                   | should-have | 3    | `pages/vendors/`                    | `/vendors`, `/vendors/new`, `/vendors/edit/:id`                               | 610    | auth, work-orders (full)                                                     |
+| 10    | vendor-pos                | should-have | 3    | `pages/vendor-pos/`                 | `/vendor-pos`, `/vendor-pos/:id`                                              | 1k     | auth, work-orders (full)                                                     |
+| 11    | uplifts                   | should-have | 3    | `pages/uplifts/`                    | `/uplifts`                                                                    | 317    | auth, work-orders (full)                                                     |
+| 12    | follow-ups                | should-have | 3    | `pages/followup/`                   | `/followups`, `/followups/new`, `/followups/edit/:id`                         | 1.3k   | auth, employees, accounts, locations                                         |
+| 13    | contacts                  | should-have | 3    | `pages/contacts/`                   | `/contacts`, `/contacts/new`, `/contacts/edit/:id`                            | 1.1k   | auth                                                                         |
+| 14    | settings/task-templates   | should-have | 3    | `pages/settings/` (TaskTemplates)   | `/settings/task-templates`                                                    | 866\*  | auth, work-orders (full)                                                     |
+| 15    | calendar                  | later       | 4    | `pages/calendar/`                   | `/calendar`, `/calendar/new`, `/calendar/edit/:id`                            | 1.9k   | auth                                                                         |
+| 16    | vendor-portal             | later       | 4    | `pages/vendor-portal/`              | `/v/:token`, `/v/:token/dashboard`, `/v/:token/pos`, `/v/:token/dispatch/:id` | 1.4k   | auth, vendors                                                                |
+| 17    | pm-schedules              | later       | 4    | `pages/PmSchedule/`                 | `/pmschedules`, `/pmschedules/new`, `/pmschedules/edit/:id`                   | 1.1k   | auth                                                                         |
+| 18    | assets                    | later       | 4    | `pages/assets/`                     | `/assets`, `/assets/new`, `/assets/edit/:id`                                  | 638    | auth, accounts                                                               |
+| 19    | reports / documents       | later       | 4    | — (no implementation)               | `/reports`, `/documents` (menu only)                                          | —      | auth                                                                         |
+
+\* LOC for the entire folder; POC scope uses only the list submodule.
+
+### Legacy complexity (reference)
+
+| Feature       | Complexity | Notes                                                     |
+| ------------- | ---------- | --------------------------------------------------------- |
+| auth          | Low        | Replace Redux/`tokenUtility` with AuthProvider + cookies  |
+| dashboard     | Medium     | Real KPIs via `GET /Dashboard/Stats`                      |
+| work-orders   | **High**   | Monolithic view; dispatch, checklist, signoff             |
+| contacts      | High       | Legacy form **stub** (save TODO) — rewrite with RHF + Zod |
+| employees     | High       | Large form                                                |
+| vendor-portal | High       | URL token auth + signature                                |
+| calendar      | High       | FullCalendar wrapper                                      |
+| pm-schedules  | Medium     | Legacy API bugs (`PmSchedule/Create` vs `Save`)           |
+
+---
+
+## Dependency graph
+
+```mermaid
+flowchart TD
+  subgraph wave0 [Wave0_POC]
+    auth[auth]
+    woList[work_orders_list]
+  end
+  subgraph wave1 [Wave1_MustHave]
+    woFull[work_orders_full]
+    dash[dashboard]
+    dropdowns[settings_dropdowns]
+  end
+  subgraph wave2 [Wave2_Dependencies]
+    accounts[accounts]
+    locations[locations]
+    employees[employees]
+  end
+  subgraph wave3 [Wave3_ShouldHave]
+    vendors[vendors]
+    vendorPos[vendor_pos]
+    uplifts[uplifts]
+    followups[follow_ups]
+    contacts[contacts]
+    settingsTpl[task_templates]
+  end
+  subgraph wave4 [Wave4_Later]
+    calendar[calendar]
+    vendorPortal[vendor_portal]
+    pmSched[pm_schedules]
+    assets[assets]
+    reports[reports_documents]
+  end
+  auth --> woList
+  woList --> woFull
+  dropdowns --> woFull
+  accounts --> woFull
+  locations --> woFull
+  employees --> woFull
+  woFull --> vendors
+  vendors --> vendorPortal
+  woFull --> vendorPos
+  woFull --> uplifts
+```
+
+### Waves (summary)
+
+| Wave  | Tier        | Features                                                                    |
+| ----- | ----------- | --------------------------------------------------------------------------- |
+| **0** | POC         | auth, work-orders (list)                                                    |
+| **1** | must-have   | work-orders (full), dashboard, settings/dropdowns                           |
+| **2** | must-have   | accounts, locations, employees                                              |
+| **3** | should-have | vendors, vendor-pos, uplifts, follow-ups, contacts, settings/task-templates |
+| **4** | later       | calendar, vendor-portal, pm-schedules, assets, reports/documents            |
+
+> `accounts` and `locations` can progress in parallel with the WO view if the list POC uses data already available in the backend; the order above is the minimum sequence for the full WO form.
+
+---
+
+## Legacy gaps and cleanup
+
+| Item                     | Location                                                  | Migration action                                                                             |
+| ------------------------ | --------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| Duplicate dashboard      | `pages/dashboard/` (mock prototype)                       | **Not routed** — ignore; use only `pages/Dashboard.js` as reference                          |
+| Orphan login             | `pages/user/api.js`                                       | Delete in Phase 1 (Ky + auth); duplicates `pages/auth/` flow                                 |
+| Ghost menu               | `Sidebar.js` → Reports `/reports`, Documents `/documents` | No routes or pages — implement from scratch (Wave 4) or remove from menu in `config/menu.ts` |
+| Incomplete contacts form | `pages/contacts/form/`                                    | Do not port stub; rewrite with RHF + Zod in Wave 3                                           |
+| PM schedules API         | `pages/PmSchedule/`                                       | Document Create vs Save inconsistency; fix in rewrite                                        |
+
+---
+
+## "Done" criteria per feature
+
+A feature is **done** when all items below are met:
+
+1. **`domain/<feature>/`** — Zod schemas, hooks/use-cases, types; no imports from `pages/`, Redux, axios or `apiUtil`
+2. **`app/`** — thin views (list, form, view as scoped) registered in `app/routes.tsx`
+3. **`api/api-paths.ts`** — feature endpoints centralized; responses via `handle-api-response.ts`
+4. **`infra/query-key/query-key.ts`** — feature query keys
+5. **Protected route** — navigation via `config/menu.ts` (when applicable to the wave)
+6. **Delete legacy** — `pages/<feature>/` folder (or equivalent files) removed after validation
+7. **No regression** — main flow tested manually or with Vitest (when available)
+
+### Done criteria for special scope
+
+| Scope                    | Additional criterion                                                               |
+| ------------------------ | ---------------------------------------------------------------------------------- |
+| **POC auth**             | Login/logout with httpOnly cookies; `AuthProvider` replaces Redux + `tokenUtility` |
+| **POC work-orders list** | Paginated/filtered list with Ky + RQ; no form/view in this delivery                |
+| **work-orders full**     | Form + view (dispatch, checklist, signoff) functional                              |
+| **settings/dropdowns**   | Problem/Trade/SubTrade dropdowns available for WO form                             |
+| **reports/documents**    | Explicit decision: implement feature or remove menu links                          |
+
+---
+
+## References
+
+- Architecture plan: [`ARCHITECTURE_PLAN.md`](ARCHITECTURE_PLAN.md)
+- IrisLoan conventions: `.cursor/rules/seahaven-admin.mdc`
+- Legacy routes: `src/App.js`
+- Legacy menu: `src/components/Sidebar.js`
diff --git a/docs/FRONTEND_MAINTAINABILITY.md b/docs/FRONTEND_MAINTAINABILITY.md
new file mode 100644
index 00000000..9b125ecc
--- /dev/null
+++ b/docs/FRONTEND_MAINTAINABILITY.md
@@ -0,0 +1,115 @@
+# Frontend maintainability conventions
+
+## Conditional rendering
+
+Use logical `&&` or the `when` prop on `Text` when JSX has only a rendered state and an empty
+state. Use a ternary only when both branches render meaningful alternatives.
+
+```tsx
+{
+  error && <Alert severity="error">{error.message}</Alert>;
+}
+
+<Text variant="description" when={Boolean(description)}>
+  {description}
+</Text>;
+```
+
+ESLint rejects `condition ? <Element /> : null`. This keeps one-sided conditions visually
+distinct from real either-or UI decisions.
+
+The left operand of `&&` must be entirely boolean. `&&` renders its left operand when it is falsy
+and non-boolean (notably `{count && <X />}` renders `0`), so a type-aware ESLint rule,
+`seahaven/no-non-boolean-jsx-and`, is enforced at `error` across the repository. It asks the
+TypeScript checker for the type of the left operand and reports unless every union constituent is
+boolean-like, so `boolean | undefined` and `string | null` fail just as `number` does. The rule
+fails closed: if type services are unavailable in a governed TSX file it reports rather than
+silently claiming safety. The `when` prop on `Text` is typed `boolean`, so TypeScript enforces the
+same constraint at that component boundary.
+
+Approved guard forms (choose by semantics, not as a blind codemod):
+
+- Presence-only values where falsy means "absent" — errors, optional strings shown only when set
+  (descriptions, notes, reasons), and optional objects (locations, detail records): coerce with
+  `Boolean(value)` (or `Boolean(a || b)` for a composite presence test) before `&&`.
+  `{Boolean(error) && <Alert />}` and `{Boolean(description) && <Text />}` are the canonical forms.
+- Values where `0` or `""` is meaningful, or where a non-null value must flow into a typed prop or
+  helper inside the branch: use an explicit nullish/range comparison so the operand is boolean and
+  TypeScript can still narrow. `{count > 0 && ...}`, `{value != null && ...}`, and
+  `{isEdit && id != null && <Panel vendorId={id} />}` keep `0`/`""` semantics and preserve
+  narrowing.
+- Element-slot props (`icon`, `action`, `actions`) are typed `ReactElement`, not `ReactNode`: the
+  slot holds one element (or fragment), and the render branch coerces with `Boolean(prop)`. Do not
+  widen these back to `ReactNode`, since a slot is never a meaningful `0`/`""`.
+
+Never weaken, disable, baseline, or add per-line exceptions to the rule. A new one-sided condition
+that needs a non-boolean operand must be rewritten into one of the approved forms above.
+
+## Typography and feedback
+
+Use `Text` from `@/components/ui/text` for headings, paragraphs, descriptions, labels, captions,
+code, and asynchronous feedback. It owns:
+
+- semantic HTML for each visual variant;
+- the display, body, and monospace font families;
+- default, muted, error, success, and warning tones;
+- accessible `alert` and `status` live regions for error and feedback text;
+- one-sided conditional text through `when`.
+
+The variant contract is non-overridable: `component`, `role`, and `aria-live` are omitted from
+`TextProps` (TypeScript blocks them) and the remaining props are spread before the variant-owned
+attributes so the variant element, tone, and live-region role always win at runtime. Use `as` to
+choose the rendered element and `tone` to choose the color; do not pass `component`, `role`, or
+`aria-live` directly.
+
+Live-region behavior:
+
+- `feedback` (polite `status`) keeps the region mounted and toggles its text content via `when`, so
+  the polite region exists before its content changes and is announced reliably. Mounting an
+  already-populated status node on demand is not announceable on most screen-reader/browser pairs.
+- `error` (assertive `alert`) mounts on demand (`when={false}` unmounts it). Alert-on-mount is the
+  expected error pattern, so the shipped `when={Boolean(error)}` usages are correct.
+
+ESLint rejects raw paragraph and heading elements. Existing MUI `Typography` usages remain valid,
+but new shared UI should prefer `Text` so semantics and design tokens do not drift.
+
+The `vp-error` CSS token is presentational chrome for vendor-portal error cards and may only appear
+on the `Text` component. ESLint flags any non-`Text` JSX element whose `className` is a static
+string literal containing `vp-error` (e.g. `<div className="vp-error">`, `<section
+className="vp-error extra">`); pair the error message with `variant="error"`. The rule enforces the
+static surface only. It cannot resolve dynamic or composed class values
+(`className={cn("vp-error", ...)}`, template literals with expressions, or expression-wrapped
+strings), so do not compose `vp-error` dynamically to bypass it — prefer `Text variant="error"`.
+
+## Forms and mutations
+
+Use the libraries already established in the application:
+
+- React Hook Form owns field registration, touched/dirty state, and client form lifecycle.
+- Zod owns form validation and inferred form value types.
+- TanStack Query owns server reads and mutations, including pending/error state, cache
+  invalidation, and retries where safe.
+
+Do not add TanStack Form alongside React Hook Form. It would create two form conventions without
+removing any current dependency. Reconsider only as a deliberate repository-wide migration with
+benchmarks, a codemod plan, and an approved deprecation path.
+
+File uploads are not ordinary form fields. Keep file selection and client validation in a focused
+component, and use a TanStack Query mutation for upload progress, errors, completion refresh, and
+retry state. Do not place upload orchestration in a route-sized page component.
+
+## Page state
+
+Pages should compose focused state components instead of accumulating unrelated booleans:
+
+- query loading, error, and empty states stay adjacent to the query result;
+- mutation pending/error state belongs to the component that initiated the mutation;
+- route pages coordinate sections and navigation;
+- reusable sections own their interaction details;
+- errors render inline with accessible feedback, with toasts reserved for cross-page outcomes.
+
+## Enforcement and rollout
+
+The lint rules are repository-wide and the initial violations were migrated in the same change.
+`npm run lint`, `npm run build`, and the `Text` behavior tests are required gates. Future
+maintainability rules must also land with a green migration rather than a warning-only backlog.
diff --git a/UI_DOCUMENTATION.md b/docs/UI_DOCUMENTATION.md
similarity index 89%
rename from UI_DOCUMENTATION.md
rename to docs/UI_DOCUMENTATION.md
index ce310c2f..2d836181 100644
--- a/UI_DOCUMENTATION.md
+++ b/docs/UI_DOCUMENTATION.md
@@ -1,4 +1,4 @@
-# SeaHaven UI - Complete Architecture Documentation
+# Sea Haven UI - Complete Architecture Documentation
 
 > Modern React architecture with Redux Toolkit, React Query, and CSS Modules
 
@@ -55,7 +55,7 @@
 │                      5. BACKEND                             │
 │                                                              │
 │                    REST API                                 │
-│               (SeaHaven Backend)                            │
+│               (Sea Haven Backend)                           │
 └─────────────────────────────────────────────────────────────┘
 ```
 
@@ -112,16 +112,19 @@ src/
 ### 1. State Management: Redux vs React Query
 
 **Use Redux for:**
+
 - ✅ User authentication (login/logout)
 - ✅ App-wide settings (theme, sidebar state)
 - ✅ Data that needs to be shared everywhere
 
 **Use React Query for:**
+
 - ✅ API data (lists, details)
 - ✅ Any server data
 - ✅ Automatic caching and refetching
 
 **Use useState for:**
+
 - ✅ Local component state
 - ✅ Form inputs
 - ✅ UI toggles (dropdowns, tabs)
@@ -129,18 +132,21 @@ src/
 ### 2. CSS Modules (Built-in - No Dependencies!)
 
 **Old Way** (Global CSS):
+
 ```javascript
 import './Component.css';
 <div className="container">
 ```
 
 **New Way** (CSS Modules):
+
 ```javascript
 import styles from './Component.module.css';
 <div className={styles.container}>  // Automatically scoped!
 ```
 
 **Benefits:**
+
 - No naming conflicts
 - Better tree-shaking
 - No extra build tools needed
@@ -150,13 +156,13 @@ import styles from './Component.module.css';
 
 ```javascript
 // ❌ Bad
-queryKey: ['pmschedules']
-setTimeout(fn, 600)
+queryKey: ["pmschedules"];
+setTimeout(fn, 600);
 
 // ✅ Good
-import { PM_SCHEDULES_LIST, DEBOUNCE_SEARCH } from '../constants';
-queryKey: [PM_SCHEDULES_LIST]
-setTimeout(fn, DEBOUNCE_SEARCH)
+import { PM_SCHEDULES_LIST, DEBOUNCE_SEARCH } from "../constants";
+queryKey: [PM_SCHEDULES_LIST];
+setTimeout(fn, DEBOUNCE_SEARCH);
 ```
 
 ---
@@ -164,27 +170,30 @@ setTimeout(fn, DEBOUNCE_SEARCH)
 ## 💻 Code Examples
 
 ### Example 1: Loading Data with React Query
+
 ```javascript
-import { usePMSchedules } from '../hooks/api/usePMSchedules';
-import { useDebounce, DEBOUNCE_SEARCH } from '../constants';
+import { usePMSchedules } from "../hooks/api/usePMSchedules";
+import { useDebounce, DEBOUNCE_SEARCH } from "../constants";
 
 function PMScheduleList() {
   const [search, setSearch] = useState("");
   const debouncedSearch = useDebounce(search, DEBOUNCE_SEARCH);
-  
-  const { data, isLoading, error } = usePMSchedules({ 
-    search: debouncedSearch, 
-    page: 1 
+
+  const { data, isLoading, error } = usePMSchedules({
+    search: debouncedSearch,
+    page: 1,
   });
-  
+
   if (isLoading) return <div>Loading...</div>;
   if (error) return <div>Error: {error.message}</div>;
-  
+
   return (
     <div>
       <input value={search} onChange={(e) => setSearch(e.target.value)} />
       <ul>
-        {data.items.map(item => <li key={item.id}>{item.name}</li>)}
+        {data.items.map((item) => (
+          <li key={item.id}>{item.name}</li>
+        ))}
       </ul>
     </div>
   );
@@ -192,8 +201,9 @@ function PMScheduleList() {
 ```
 
 ### Example 2: Using Redux Auth
+
 ```javascript
-import { useAuth } from '../hooks/useAuth';
+import { useAuth } from "../hooks/useAuth";
 
 function MyComponent() {
   const { user, isAuthenticated, login, logout } = useAuth();
@@ -204,16 +214,16 @@ function MyComponent() {
 
   return (
     <div>
-      Welcome {user.name}!
-      <button onClick={logout}>Logout</button>
+      Welcome {user.name}!<button onClick={logout}>Logout</button>
     </div>
   );
 }
 ```
 
 ### Example 3: Using Modals
+
 ```javascript
-import { useModal } from '../hooks/useModal';
+import { useModal } from "../hooks/useModal";
 
 function MyComponent() {
   const deleteModal = useModal();
@@ -223,9 +233,7 @@ function MyComponent() {
       <button onClick={() => deleteModal.open(item)}>Delete</button>
 
       {deleteModal.isOpen && (
-        <Modal onClose={deleteModal.close}>
-          Delete {deleteModal.data.name}?
-        </Modal>
+        <Modal onClose={deleteModal.close}>Delete {deleteModal.data.name}?</Modal>
       )}
     </div>
   );
@@ -233,8 +241,9 @@ function MyComponent() {
 ```
 
 ### Example 4: CSS Modules
+
 ```javascript
-import styles from './LoginPage.module.css';
+import styles from "./LoginPage.module.css";
 
 function LoginPage() {
   return (
@@ -260,6 +269,7 @@ function LoginPage() {
 ## 🔧 Common Patterns
 
 ### Pattern 1: Fetch and Display Data
+
 ```javascript
 const { data, isLoading, error } = useDataHook(params);
 
@@ -270,6 +280,7 @@ return <Display data={data} />;
 ```
 
 ### Pattern 2: Delete with Confirmation
+
 ```javascript
 const deleteMutation = useDeleteHook();
 const deleteModal = useModal();
@@ -286,6 +297,7 @@ const handleDelete = async () => {
 ```
 
 ### Pattern 3: Search with Debounce
+
 ```javascript
 const [search, setSearch] = useState("");
 const debouncedSearch = useDebounce(search, DEBOUNCE_SEARCH);
@@ -300,42 +312,48 @@ const { data } = useDataHook({ search: debouncedSearch });
 ## 📚 Constants Reference
 
 ### API Constants
+
 ```javascript
-API_URL                    // Backend URL
-API_ERROR_MESSAGE          // Default error message
-API_SUCCESS_MESSAGE        // Success message
+API_URL; // Backend URL
+API_ERROR_MESSAGE; // Default error message
+API_SUCCESS_MESSAGE; // Success message
 ```
 
 ### Timing Constants
+
 ```javascript
-DEBOUNCE_SEARCH           // 600ms
-CACHE_TIME_MEDIUM         // 5 minutes
-STALE_TIME_MEDIUM         // 5 minutes
+DEBOUNCE_SEARCH; // 600ms
+CACHE_TIME_MEDIUM; // 5 minutes
+STALE_TIME_MEDIUM; // 5 minutes
 ```
 
 ### View Modes
+
 ```javascript
-VIEW_MODE_LIST            // 'list'
-VIEW_MODE_CARD            // 'card'
+VIEW_MODE_LIST; // 'list'
+VIEW_MODE_CARD; // 'card'
 ```
 
 ### Status Types
+
 ```javascript
-STATUS_OPEN               // 'Open'
-STATUS_COMPLETED          // 'Completed'
+STATUS_OPEN; // 'Open'
+STATUS_COMPLETED; // 'Completed'
 ```
 
 ### Query Keys
+
 ```javascript
-PM_SCHEDULES_LIST         // 'pmSchedulesList'
-WORK_ORDERS_LIST          // 'workOrdersList'
-EMPLOYEES_DROPDOWN        // 'employeesDropdown'
+PM_SCHEDULES_LIST; // 'pmSchedulesList'
+WORK_ORDERS_LIST; // 'workOrdersList'
+EMPLOYEES_DROPDOWN; // 'employeesDropdown'
 ```
 
 ### Storage Keys
+
 ```javascript
-STORAGE_KEY_TOKEN         // 'token'
-STORAGE_KEY_THEME         // 'theme'
+STORAGE_KEY_TOKEN; // 'token'
+STORAGE_KEY_THEME; // 'theme'
 ```
 
 ---
@@ -343,16 +361,19 @@ STORAGE_KEY_THEME         // 'theme'
 ## 🚀 Getting Started
 
 ### 1. Run Development Server
+
 ```bash
 npm start
 ```
 
 ### 2. Build for Production
+
 ```bash
 npm run build
 ```
 
 ### 3. Deploy to S3
+
 ```bash
 aws s3 sync build/ s3://shoc-ui-app --acl public-read
 ```
@@ -364,13 +385,16 @@ aws s3 sync build/ s3://shoc-ui-app --acl public-read
 ### Converting a Page to New Architecture
 
 **Step 1: Use React Query Hook**
+
 ```javascript
 // Old
 const [data, setData] = useState([]);
 const [loading, setLoading] = useState(false);
 useEffect(() => {
   setLoading(true);
-  fetchData().then(setData).finally(() => setLoading(false));
+  fetchData()
+    .then(setData)
+    .finally(() => setLoading(false));
 }, []);
 
 // New
@@ -378,6 +402,7 @@ const { data, isLoading } = usePMSchedules({ page: 1 });
 ```
 
 **Step 2: Use Constants**
+
 ```javascript
 // Old
 const [search, setSearch] = useState("");
@@ -387,11 +412,12 @@ useEffect(() => {
 }, [search]);
 
 // New
-import { DEBOUNCE_SEARCH } from '../constants';
+import { DEBOUNCE_SEARCH } from "../constants";
 const debouncedSearch = useDebounce(search, DEBOUNCE_SEARCH);
 ```
 
 **Step 3: Convert CSS to Modules**
+
 ```javascript
 // 1. Rename: Component.css → Component.module.css
 // 2. Update import: import styles from './Component.module.css';
@@ -403,14 +429,17 @@ const debouncedSearch = useDebounce(search, DEBOUNCE_SEARCH);
 ## ✅ What's Been Refactored
 
 ### Pages
+
 - ✅ **LoginPage** - Uses Redux for auth
 - ✅ **PM Schedules List** - Uses React Query, constants, CSS Modules
 
 ### Components
+
 - ✅ **Topbar** - Uses Redux for user state
 - ✅ **DeleteModal** - Reusable component
 
 ### Hooks
+
 - ✅ **useAuth** - Redux integration for login/logout
 - ✅ **useModal** - Reusable modal state
 - ✅ **useDebounce** - Search debouncing
@@ -433,6 +462,7 @@ const debouncedSearch = useDebounce(search, DEBOUNCE_SEARCH);
 ## 📖 Quick Reference
 
 ### File to Check for Examples
+
 - `src/pages/PmSchedule/list/List.js` - Fully refactored list page
 - `src/pages/auth/LoginPage.js` - Redux auth + CSS Modules
 - `src/hooks/api/usePMSchedules.js` - React Query hook pattern
@@ -463,15 +493,19 @@ const debouncedSearch = useDebounce(search, DEBOUNCE_SEARCH);
 ## 🛠️ Troubleshooting
 
 ### Issue: Constants not found
+
 **Solution:** Make sure you're importing from `'../constants'` (folder) not `'../constants.js'` (old file)
 
 ### Issue: CSS not scoped
+
 **Solution:** File must be named `.module.css` and imported as `import styles from`
 
 ### Issue: Redux state not updating
+
 **Solution:** Make sure you're using the hooks (`useAuth`, `useSelector`) not direct access
 
 ### Issue: React Query not caching
+
 **Solution:** Check that query keys use constants and are consistent
 
 ---
@@ -479,6 +513,7 @@ const debouncedSearch = useDebounce(search, DEBOUNCE_SEARCH);
 ## 🎉 Summary
 
 ### What We Built:
+
 - ✅ Modern React architecture
 - ✅ Redux Toolkit for global state
 - ✅ React Query for server state
@@ -487,6 +522,7 @@ const debouncedSearch = useDebounce(search, DEBOUNCE_SEARCH);
 - ✅ Custom hooks for reusable logic
 
 ### Benefits:
+
 - 📉 70% less boilerplate code
 - 🚀 Automatic caching and refetching
 - 🎨 No CSS naming conflicts
@@ -495,6 +531,7 @@ const debouncedSearch = useDebounce(search, DEBOUNCE_SEARCH);
 - ⚡ Better performance
 
 ### Next Steps:
+
 1. Refactor remaining pages using PM Schedules as template
 2. Convert more CSS to CSS Modules
 3. Add more API hooks as needed
@@ -502,7 +539,6 @@ const debouncedSearch = useDebounce(search, DEBOUNCE_SEARCH);
 
 ---
 
-**Welcome to the modern SeaHaven UI! 🎊**
-
-*Last updated: 2026*
+**Welcome to the modern Sea Haven UI! 🎊**
 
+_Last updated: 2026_
diff --git a/docs/adr/0001-query-broadcast-client.md b/docs/adr/0001-query-broadcast-client.md
new file mode 100644
index 00000000..ed40273d
--- /dev/null
+++ b/docs/adr/0001-query-broadcast-client.md
@@ -0,0 +1,91 @@
+# 0001. Cross-tab QueryClient sync via `@tanstack/query-broadcast-client-experimental`
+
+## Status
+
+Accepted
+
+## Context
+
+The SeaHaven admin SPA is frequently used with multiple browser tabs open
+against the same work-order board (e.g. a dispatcher triaging the board in one
+tab while editing a work order in another). Each tab owns its own TanStack
+Query `QueryClient` cache, so a mutation performed in one tab (status change,
+dispatch creation, comment, vendor patch, etc.) does not invalidate or update
+the cache in sibling tabs. Users were seeing stale board/detail data until a
+manual refresh or the next background refetch.
+
+We need a way to keep `QueryClient` caches roughly in sync across tabs of the
+same origin, without introducing a new state-management layer (Redux is
+disallowed by this repo's conventions) or a server-push mechanism.
+
+## Decision
+
+Use TanStack's own experimental broadcast client,
+[`@tanstack/query-broadcast-client-experimental`](https://tanstack.com/query),
+wired up in a single dedicated setup module,
+`src/lib/query/setup-query-broadcast.ts`. The module:
+
+- Exposes `startQueryBroadcast(queryClient, userId)` and
+  `stopQueryBroadcast(queryClient)`.
+- Keys `broadcastQueryClient` to an **account-scoped** channel
+  (`seahaven-admin-query:${userId}`), so tabs belonging to different accounts
+  on the same origin do not share cache traffic.
+- Disposes the prior subscription (the unsubscribe returned by
+  `broadcastQueryClient`) and clears the `QueryClient` when the authenticated
+  user changes or the session ends.
+- No-ops the BroadcastChannel outside the browser (SSR/build) and under Vitest
+  (`import.meta.env.MODE === "test"`).
+- Is started after authentication (`AuthProvider` session restore + login
+  success) and stopped on logout and HTTP 401 session clear — not at
+  `QueryClient` module load.
+
+This piggybacks on the query cache we already have (no parallel store), uses
+the library that owns the `QueryClient` we already depend on, and keeps the
+integration isolated to auth/session boundaries.
+
+### Alternatives considered
+
+- **Custom `BroadcastChannel` + manual `queryClient.invalidateQueries` calls**
+  — full control over payloads, but requires hand-rolling
+  serialization/versioning of query keys and mutation results, and keeping
+  every future mutation hook wired to broadcast. More code to own and more
+  surface area for subtle cache-desync bugs.
+- **Constant channel from module load** — simplest wiring, but shares one
+  channel across all sessions on the origin; after logout/login or multi-account
+  use, cached work-order/vendor data can leak into the next session. Rejected.
+- **No cross-tab sync** — simplest option, but leaves the stale-tab UX problem
+  unresolved; users would need to manually refresh or wait for
+  `refetchOnWindowFocus`/`staleTime` to catch up, which is not reliable enough
+  for a live dispatch board.
+- **Full WebSocket-based real-time sync** — solves both cross-tab and
+  cross-user staleness, but is a materially larger investment (server-side
+  push infra, connection lifecycle, auth over the socket) that is out of scope
+  for the current admin SPA and not justified by the actual problem (same
+  browser, same user, same origin).
+
+## Consequences
+
+- **Positive**: sibling tabs for the same authenticated account reflect
+  mutations (status changes, dispatch actions, comments, patches) without a
+  manual refresh; logout/401 tear down the broadcaster and clear sensitive
+  cache so the next account cannot inherit prior data.
+- **Risk — package lifecycle**: the dependency is explicitly "experimental" in
+  the TanStack ecosystem; its API may change or be deprecated between minor
+  versions. `@tanstack/query-broadcast-client-experimental`,
+  `@tanstack/react-query`, and `@tanstack/react-query-devtools` are pinned to
+  the **exact same version** in `package.json` (no `^` range). All three
+  resolve to the identical `@tanstack/query-core` version at that pin, which
+  keeps the `QueryClient` type used by the broadcast helpers structurally
+  identical to the one constructed in `query-client.ts` — a caret range lets
+  npm resolve the broadcast client and React Query against two different
+  `query-core` versions independently, which breaks `QueryClient` type
+  identity (TS2322) even though both packages build fine in isolation. Bump
+  all three together and re-evaluate on every TanStack Query upgrade.
+- **Risk — same-origin only**: `BroadcastChannel` only syncs tabs on the same
+  origin; it does not sync across different users/sessions or devices. Account
+  scoping further limits sync to tabs of the same `userId`.
+- **Rollback plan**: remove the `@tanstack/query-broadcast-client-experimental`
+  dependency from `package.json`, delete `setup-query-broadcast.ts`, and remove
+  the `startQueryBroadcast` / `stopQueryBroadcast` call sites in auth and
+  `api.ts`. No other code depends on it, so rollback is isolated with no data
+  migration.
diff --git a/docs/adr/0002-sentry-observability.md b/docs/adr/0002-sentry-observability.md
new file mode 100644
index 00000000..3aeee86c
--- /dev/null
+++ b/docs/adr/0002-sentry-observability.md
@@ -0,0 +1,94 @@
+# 0002. Browser error and transaction telemetry with Sentry
+
+## Status
+
+Accepted
+
+## Context
+
+The SeaHaven admin SPA has no centralized browser error reporting or distributed
+transaction tracing. Operational failures therefore have to be reconstructed
+from user reports and isolated backend logs. We need browser navigation and API
+request transactions to join the backend trace while preserving the existing UI,
+routing, authentication, and server-state behavior. Every emitted transaction
+must also identify its exact build, trace, transaction, operation, function, and
+opaque actor without sending credentials, request bodies, query values, or
+personal data.
+
+## Decision
+
+Use the pinned `@sentry/react` 10.73.0 SDK. Initialize it before the application
+router is created, and wrap `createBrowserRouter` with Sentry's current React
+Router compatibility API. Configure the browser tracing integration with a 100%
+transaction sample rate, and propagate trace headers only to the SPA origin and
+the configured `VITE_API_URL` base. Pass `Sentry.reactErrorHandler()` as the
+`onCaughtError`, `onUncaughtError`, and `onRecoverableError` callbacks of
+`ReactDOM.createRoot`, so React 19's root error hooks capture caught, uncaught,
+and recoverable component errors as Sentry events.
+
+All shared API helpers, direct Ky calls, vendor-link `fetch` calls, and vendor
+document `XMLHttpRequest` calls run inside explicit `http.client` transactions.
+They use normalized route templates and attach `code.function`, `operation.type`,
+HTTP method, `trace_id`, and `transaction_id`. Browser navigation transactions
+receive the same searchable trace identifiers in `beforeSendTransaction`.
+Authenticated sessions set only the application's opaque numeric/string user ID;
+logout and session expiry clear it.
+
+The DSN comes from `VITE_SENTRY_DSN`. It is intentionally treated as public
+browser configuration because every `VITE_` value is embedded in the built
+JavaScript. `.env.production` commits the public DSN of the real
+`shoc-frontend` Sentry project, so dev and staging deploys are live; a missing
+or blank DSN in any other build leaves telemetry inactive without preventing
+the application from starting. Default personally identifiable information
+collection remains disabled.
+
+The Sentry environment label comes from `VITE_SENTRY_ENVIRONMENT` when set and
+non-blank, falling back to the Vite build mode otherwise. The committed
+`.env.production` labels dev deploys `development`, the staging deploy job
+overrides the label to `staging`, and a future production pipeline can set
+`production` without code changes.
+
+Every deployment embeds `shoc-frontend@<40-character commit SHA>` as the Sentry
+release and exposes the same SHA as the `app.commit` tag. CI fails if it cannot
+resolve that identity. Vite creates hidden source maps, and the dev/staging
+deployment workflows upload them to the private `shoc-frontend` Sentry project
+using the repository's `SENTRY_AUTH_TOKEN` secret. The public S3 sync explicitly
+excludes `*.map`; the upload credential is never available to the browser build.
+
+Before-send processors reduce request data to normalized URL plus HTTP method,
+reduce users to opaque ID only, attach native trace/transaction identifiers as
+searchable tags, and reduce breadcrumbs to safe network method/status/normalized
+URL metadata. Root and child span attributes use the same allowlist, retaining
+function, operation, actor type, normalized route, method/status, service host,
+timing, and native IDs while removing raw URLs and query values. Bodies, headers,
+cookies, query strings/values, free-form breadcrumb messages, usernames, email
+addresses, IP addresses, tokens, and filenames are not intentionally sent.
+`sendDefaultPii` remains disabled.
+
+### Alternatives considered
+
+- **Manual error and timing calls** — rejected because they would miss route
+  transitions and distributed request context, and would require every feature
+  to maintain its own instrumentation.
+- **Propagate tracing headers to every request** — rejected because third-party
+  requests must not receive SeaHaven trace metadata and broad propagation can
+  introduce cross-origin request failures.
+- **Publish source maps with the SPA** — rejected because source code belongs in
+  Sentry's private artifact store, not the public application bucket.
+
+## Consequences
+
+- Browser navigations and API requests are recorded as connected transactions
+  when the deployment supplies a valid DSN.
+- Events are labeled by `VITE_SENTRY_ENVIRONMENT` (`development` on dev
+  deploys, `staging` on the staging job), falling back to the Vite build mode
+  when unset.
+- Every transaction is sampled. This meets the current requirement but increases
+  event volume and should be reviewed against Sentry quota and retention after
+  real traffic is measured.
+- Cross-origin API tracing depends on the backend accepting `sentry-trace` and
+  `baggage` request headers; the current API CORS policy allows request headers.
+- Deployed stack traces resolve against the exact commit's private source maps
+  once the scoped upload secret is present and the deployment workflow runs.
+- Rollback is isolated: remove `@sentry/react`, the initialization module and
+  import, restore the unwrapped router factory, and remove the Sentry env entries.
diff --git a/docs/work-orders/addon-indicator.md b/docs/work-orders/addon-indicator.md
new file mode 100644
index 00000000..78dcd8ed
--- /dev/null
+++ b/docs/work-orders/addon-indicator.md
@@ -0,0 +1,35 @@
+# Add-On indicator (SH-184)
+
+Product rule superseding the SH-126 “frozen at create” FE assumption.
+
+## Authority
+
+| Concern                               | Owner    |
+| ------------------------------------- | -------- |
+| Cutoff math & week-boundary recalc    | Backend  |
+| Clear `isAddOn` when schedule cleared | Backend  |
+| Audit of every recalculation          | Backend  |
+| Display / board overlay               | Frontend |
+
+The frontend **must not** treat `isAddOn` as frozen after create. Create may
+send a **hint** (`resolveIsAddOnForCreate` / cutoff preview or unscheduled
+manual override). After any schedule patch or clear, FE consumes the
+authoritative `isAddOn` returned by the board PATCH (and subsequent board
+fetch).
+
+## FE contract
+
+```
+Board row / PATCH response:  isAddOn: boolean
+Create (hint):               isAddOn = cutoff preview | manual override
+Schedule day/week patch:     FE applies returned row.isAddOn (ON↔OFF)
+Schedule cleared:            FE expects isAddOn === false from BE;
+                             optimistic clear sets isAddOn: false locally
+Legacy:                      workOrderType=AddOn(7) without isAddOn ⇒ isAddOn=true
+```
+
+## Dependency
+
+Full backend recalculation + audit may land in a separate BE PR. Until then,
+FE still maps and overlays whatever `isAddOn` the API returns so the contract
+is correct once BE ships.
diff --git a/docs/work-orders/board-search-api.md b/docs/work-orders/board-search-api.md
new file mode 100644
index 00000000..f233640e
--- /dev/null
+++ b/docs/work-orders/board-search-api.md
@@ -0,0 +1,210 @@
+# Work Orders Board & Search API
+
+Frontend integration contract for weekly board and advanced search filters.
+
+## Base
+
+| Item         | Valor                                       |
+| ------------ | ------------------------------------------- |
+| Prefixo      | `/api/workorders` (alias: `/api/WorkOrder`) |
+| Auth         | `Authorization: Bearer {token}` (JWT)       |
+| Content-Type | Não necessário (GET)                        |
+
+Paths no FE: `API_PATHS.workOrder.board`, `boardSearch`, `lookupsDispatchers`.
+
+## Contrato (board semanal vs search)
+
+| Superfície                     | Endpoint                           | O que volta                                                                                                        |
+| ------------------------------ | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| Week + Day (AAP)               | `GET /board?weekStart&weekEnd`     | Só WOs com data (ou `ScheduleWeekOnly` + `TargetWeek`) **nessa semana**. `unscheduled: []`. Sem `page`/`pageSize`. |
+| Contagens do board             | `counts.total` / `counts.returned` | Scheduled da semana (antes/depois do search da barra). Nunca `0` se há rows.                                       |
+| Lista flat                     | `GET /board/search`                | Envelope paginado. `page` 0-based. `pageSize` default 100, **max 200**.                                            |
+| Fila sem data / sem dispatcher | `GET /board/search`                | Filtros (`dispatchers=__unassigned__`, statuses, janela Custom). **Não** entra no `/board`.                        |
+
+O AAP não tem pin Unassigned na tabela. Dated sem assignee entram no dia. Undated só em Advanced Filters / filtro Dispatcher.
+
+## Quando usar qual endpoint
+
+| Modo FE                                 | Endpoint                   | Quando                                           |
+| --------------------------------------- | -------------------------- | ------------------------------------------------ |
+| Barra principal (`advApplied === null`) | `GET /board`               | Semana agendada + dispatchers + tipo + search    |
+| Filtros avançados aplicados             | `GET /board/search`        | Todos os filtros avançados + paginação/ordenação |
+| Lookup dispatchers                      | `GET /lookups/dispatchers` | Popular multi-select de dispatchers              |
+
+**Não misture parâmetros:** `weekStart`/`weekEnd` só no `/board`; `datePreset` só no `/search`.
+
+## Query builders (FE)
+
+- [`board-query-params.ts`](../../src/domain/work-orders/utils/board-query-params.ts) — `toBoardQueryParams`, `toBoardSearchQueryParams`
+- Arrays na query: repetição simples (`types=2&types=6`), via `toUrlSearchParams` em `work-orders-api.ts`
+
+## Barra → `GET /board`
+
+| FE state        | API param              | Regra                                                       |
+| --------------- | ---------------------- | ----------------------------------------------------------- |
+| `search`        | `search`               | Enviar só se `length >= 2`; com 1 char, filtrar client-side |
+| `weekMonday`    | `weekStart`            | ISO `YYYY-MM-DD` (segunda)                                  |
+| —               | `weekEnd`              | `weekStart + 4` (sexta)                                     |
+| `dispatcherIds` | `dispatchers`          | `__unassigned` → `__unassigned__`                           |
+| "My WOs"        | `dispatchers={userId}` | Equivalente a `myWorkOrders=true`                           |
+| `typeFilter`    | `types` / `overdue`    | Tipos reais em `types`; past-due via `overdue=true` (OR)    |
+
+## Advanced → `GET /board/search`
+
+| FE state         | API param             | Regra                                       |
+| ---------------- | --------------------- | ------------------------------------------- |
+| `page`           | `page`                | **0-based** (primeira página = `0`)         |
+| `pageSize`       | `pageSize`            | Default `100`, max `200`                    |
+| `sortBy`         | `sortBy`              | `scheduledDate` \| `woNumber` \| `dueDate`  |
+| `sortDir`        | `sortDir`             | `asc` \| `desc`                             |
+| `search`         | `search`              | `>= 2` chars                                |
+| `dateRange`      | `datePreset`          | PascalCase (ver abaixo)                     |
+| `customFrom/To`  | `dateFrom` / `dateTo` | Obrigatórios se `datePreset=Custom`         |
+| `sites` (IDs UI) | `sites`               | **Site codes**, não location ID             |
+| `types`          | `types`               | Integers de `WorkOrderType` reais           |
+| overdue (UI)     | `overdue`             | `true` = past-due (`isPastDue`); ver abaixo |
+| `dispatchers`    | `dispatchers`         | `__unassigned` → `__unassigned__`           |
+| `statuses`       | `statuses`            | Integers 1–10                               |
+| `pmTypes`        | `pmTypes`             | Strings (labels Problem dropdown)           |
+| `vendorTechs`    | `vendorIds`           | Integers (resolvidos por companyName)       |
+| `docs`           | `docStatuses`         | No=2, Yes=1, NN=3                           |
+| `severities`     | `severities`          | Integers `1`–`5` (Emergency/Reactive)       |
+| `rescheduled`    | `rescheduled`         | `true` = reschedule count ≥ 2               |
+| `carriedOver`    | `carriedOver`         | `true` = carried-over count ≥ 2             |
+| `addOn`          | `addOn`               | `true` = `isAddOn` indicator                |
+| `flagColors`     | `flagColors`          | Multi `#RRGGBB` (board flag palette)        |
+| `internalOnly`   | `internalOnly`        | `true` = WO# starts with `SH`               |
+| `hasUplift`      | `hasUplift`           | `true` = WO has standing uplift             |
+| `upliftStatuses` | `upliftStatuses`      | With `hasUplift`; see below                 |
+
+### `severities`
+
+Multi-select SEV 1–5. Applies to Emergency/Reactive work orders with a transcribed APM severity.
+
+### Indicators (`rescheduled`, `carriedOver`, `addOn`)
+
+Boolean flags matching board badge thresholds (counters ≥ 2 for reschedule/carried-over). `addOn` filters the `isAddOn` indicator (not a WO type).
+
+### `flagColors`
+
+Repeated `#RRGGBB` values from the fixed board flag palette (`WorkOrderFlagColors`).
+
+### `internalOnly`
+
+When `true`, only work orders whose number starts with `SH` (internal placeholder).
+
+### Uplift filters
+
+| FE state         | API param        | Regra                                            |
+| ---------------- | ---------------- | ------------------------------------------------ |
+| `hasUplift`      | `hasUplift`      | `true` = WO has non-cancelled/non-revoked uplift |
+| `upliftStatuses` | `upliftStatuses` | Optional refinement when `hasUplift=true`        |
+
+Allowed `upliftStatuses`: `pending`, `approved`, `auto_approved`, `rejected` (excludes cancelled/revoked).
+
+Exemplo: pending uplifts only — `hasUplift=true&upliftStatuses=pending`.
+
+## Backend producer (`shoc-backend` `dev`)
+
+These facet keys are handled on `GET /board/search` in `shoc-backend` `origin/dev` ([#45](https://github.com/Sea-Haven-Industries/shoc-backend/pull/45), [#65](https://github.com/Sea-Haven-Industries/shoc-backend/pull/65)). There is no frontend deployment fence.
+
+- `IsAddOn` is owned by migration `20260730150000_WoIsAddOn` (legacy type-7 backfill).
+- `20260813193000_SH121_BoardSearchFacets` is a **no-op** so both PRs can land without a duplicate column.
+- Pagination matches this contract: `page` is 0-based; `pageSize` default is 100, max is 200.
+- `GET /board` returns only scheduled-in-week rows. `unscheduled` is always `[]`. Undated / global Unassigned live on `GET /board/search`.
+- `counts.total` / `counts.returned` are scheduled-in-week (before/after the bar search).
+- Aveta (`avetaOnly`) remains omitted until `avetaRequired` is confirmed.
+
+### `datePreset`
+
+| FE key          | API value     |
+| --------------- | ------------- |
+| `this-week`     | `ThisWeek`    |
+| `last-week`     | `LastWeek`    |
+| `this-month`    | `ThisMonth`   |
+| `last-3-months` | `Last3Months` |
+| `next-week`     | `NextWeek`    |
+| `next-month`    | `NextMonth`   |
+| `custom`        | `Custom`      |
+
+### `types` — WorkOrderType
+
+Somente tipos reais de work order. **Não** use sentinel `99` para overdue.
+
+| Label FE  | API                                          |
+| --------- | -------------------------------------------- |
+| PM        | `2`                                          |
+| Emergency | `3`                                          |
+| Reactive  | `6`                                          |
+| Add-On    | `7`                                          |
+| Other     | tipo real do enum (não é filtro de past-due) |
+
+### `overdue` — past-due
+
+| FE / UI | API param      | Regra                                     |
+| ------- | -------------- | ----------------------------------------- |
+| Overdue | `overdue=true` | Filtra work orders past-due (`isPastDue`) |
+
+`types` e `overdue` combinam com **OR**: uma WO entra no resultado se corresponder a algum `types` **ou** estiver overdue (quando `overdue=true`).
+
+Exemplos:
+
+- Só PM e Emergency: `types=2&types=3`
+- Só past-due: `overdue=true`
+- PM **ou** past-due: `types=2&overdue=true`
+
+### `statuses` — LifecycleStatus
+
+Incomplete=1, Pending=2, Scheduled=3, En Route=4, On Site=5, In Progress=6, Completed=7, Rescheduled=8, Canceled=9, Pending Quote=10.
+
+### `docStatuses`
+
+Pending (`No`)=2, Uploaded (`Yes`)=1, N/N (`NN`)=3.
+
+## Respostas
+
+### `/board`
+
+```json
+{
+  "weekStart": "2026-07-14",
+  "weekEnd": "2026-07-18",
+  "counts": { "total": 42, "returned": 10 },
+  "scheduled": [],
+  "unscheduled": []
+}
+```
+
+### `/board/search`
+
+```json
+{
+  "items": [],
+  "totalCount": 150,
+  "page": 0,
+  "pageSize": 100,
+  "totalPages": 2,
+  "hasPrevious": false,
+  "hasNext": true
+}
+```
+
+## Erros HTTP
+
+| Situação                                            | Status |
+| --------------------------------------------------- | ------ |
+| `weekEnd < weekStart` ou janela > 7 dias            | 400    |
+| `datePreset=Custom` sem datas / `dateTo < dateFrom` | 400    |
+| `sortBy` inválido                                   | 400    |
+| Sem token / expirado                                | 401    |
+
+Body típico: `{ "status": "Error", "message": "..." }` — o FE exibe `message` via `ApiError`.
+
+## Add-On indicator
+
+See [addon-indicator.md](./addon-indicator.md) (SH-184): backend recalculates
+`isAddOn` on schedule move/clear with audit; FE only reflects the API value.
+
+## Validação UI
+
+O side sheet de filtros avançados valida Custom (From/To obrigatórios e `dateTo >= dateFrom`) antes de aplicar, para evitar 400 desnecessário.
diff --git a/docs/work-orders/pending-be-contract.md b/docs/work-orders/pending-be-contract.md
new file mode 100644
index 00000000..08aff844
--- /dev/null
+++ b/docs/work-orders/pending-be-contract.md
@@ -0,0 +1,30 @@
+# Work-order `additionalContacts` contract (SH-218)
+
+Authoritative frontend contract for additional POC 2+ contacts. Implemented on
+backend PR [shoc-backend#66](https://github.com/Sea-Haven-Industries/shoc-backend/pull/66).
+
+## Shape
+
+```ts
+{ name: string; phone: string; notes?: string }
+```
+
+- Primary POC remains `pocName` / `pocPhone` / `pocNotes`.
+- `additionalContacts` holds ordered POC 2+ only.
+- Notes are optional. An empty list (or omitted field) is valid.
+- Retained entries require **both** `name` and `phone`. Fully blank placeholder
+  rows are dropped and must not fail create. Name-only or phone-only entries are
+  rejected on POST create and PATCH.
+
+## Endpoints
+
+| Operation          | Where                                                         |
+| ------------------ | ------------------------------------------------------------- |
+| POST create        | `additionalContacts` array on the board create body           |
+| GET board / search | `additionalContacts` on each board row                        |
+| GET detail         | `info.additionalContacts` (same ordered list as board)        |
+| PATCH              | `field: "additionalContacts"`, `value` is a JSON array string |
+
+Until #66 is merged to the deployed API, a missing field is still mapped as `[]`
+on the frontend so the UI does not throw. After merge, create → reload →
+board/slide-over must round-trip the ordered list through GET detail `info`.
diff --git a/e2e/__screenshots__/dashboard/dashboard.visual.spec.ts/dashboard-admin.png b/e2e/__screenshots__/dashboard/dashboard.visual.spec.ts/dashboard-admin.png
new file mode 100644
index 00000000..67a84215
Binary files /dev/null and b/e2e/__screenshots__/dashboard/dashboard.visual.spec.ts/dashboard-admin.png differ
diff --git a/e2e/__screenshots__/dashboard/dashboard.visual.spec.ts/dashboard-dispatcher.png b/e2e/__screenshots__/dashboard/dashboard.visual.spec.ts/dashboard-dispatcher.png
new file mode 100644
index 00000000..d95ef194
Binary files /dev/null and b/e2e/__screenshots__/dashboard/dashboard.visual.spec.ts/dashboard-dispatcher.png differ
diff --git a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-add.png b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-add.png
new file mode 100644
index 00000000..f3a5e057
Binary files /dev/null and b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-add.png differ
diff --git a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-detail.png b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-detail.png
new file mode 100644
index 00000000..0cd62c6d
Binary files /dev/null and b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-detail.png differ
diff --git a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-edit.png b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-edit.png
new file mode 100644
index 00000000..80fb28ce
Binary files /dev/null and b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-edit.png differ
diff --git a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-empty.png b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-empty.png
new file mode 100644
index 00000000..6487de7d
Binary files /dev/null and b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-empty.png differ
diff --git a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-error.png b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-error.png
new file mode 100644
index 00000000..36602c27
Binary files /dev/null and b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-error.png differ
diff --git a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-filter.png b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-filter.png
new file mode 100644
index 00000000..9f45bb9b
Binary files /dev/null and b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-filter.png differ
diff --git a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-inactive.png b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-inactive.png
new file mode 100644
index 00000000..80bcdb86
Binary files /dev/null and b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-inactive.png differ
diff --git a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-list.png b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-list.png
new file mode 100644
index 00000000..f724fe2d
Binary files /dev/null and b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-list.png differ
diff --git a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-mobile-navigation.png b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-mobile-navigation.png
new file mode 100644
index 00000000..fb262589
Binary files /dev/null and b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-mobile-navigation.png differ
diff --git a/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-mobile.png b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-mobile.png
new file mode 100644
index 00000000..8a7a6caf
Binary files /dev/null and b/e2e/__screenshots__/vendors/vendors.visual.spec.ts/vendor-mobile.png differ
diff --git a/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-detail.png b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-detail.png
new file mode 100644
index 00000000..fe49083c
Binary files /dev/null and b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-detail.png differ
diff --git a/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-empty.png b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-empty.png
new file mode 100644
index 00000000..3fcea96e
Binary files /dev/null and b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-empty.png differ
diff --git a/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-error.png b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-error.png
new file mode 100644
index 00000000..ca5acc44
Binary files /dev/null and b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-error.png differ
diff --git a/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-filters.png b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-filters.png
new file mode 100644
index 00000000..c1d2bd63
Binary files /dev/null and b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-filters.png differ
diff --git a/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-list.png b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-list.png
new file mode 100644
index 00000000..8fb56c7f
Binary files /dev/null and b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-list.png differ
diff --git a/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-mobile-navigation.png b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-mobile-navigation.png
new file mode 100644
index 00000000..c046b9c5
Binary files /dev/null and b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-mobile-navigation.png differ
diff --git a/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-mobile.png b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-mobile.png
new file mode 100644
index 00000000..5311388e
Binary files /dev/null and b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-mobile.png differ
diff --git a/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-new.png b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-new.png
new file mode 100644
index 00000000..35e6b135
Binary files /dev/null and b/e2e/__screenshots__/work-orders/work-orders.visual.spec.ts/wo-new.png differ
diff --git a/e2e/auth/login.spec.ts b/e2e/auth/login.spec.ts
new file mode 100644
index 00000000..af8c9e71
--- /dev/null
+++ b/e2e/auth/login.spec.ts
@@ -0,0 +1,104 @@
+import { expect, test, type Page } from "@playwright/test";
+
+const TEST_USER = {
+  token: "test-jwt-token",
+  expiration: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+  email: "user@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Test User",
+  id: "1",
+};
+
+async function mockDashboardStats(page: Page) {
+  await page.route("**/api/Dashboard/Stats", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        data: {
+          openWorkOrders: 0,
+          pendingApprovals: 0,
+          scheduledPMs: 0,
+          activeAssets: 0,
+        },
+      }),
+    });
+  });
+}
+
+test.describe("Login page", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.addInitScript(() => {
+      localStorage.removeItem("auth");
+    });
+    await mockDashboardStats(page);
+  });
+
+  test("loads login page with form fields", async ({ page }) => {
+    await page.goto("/login");
+
+    await expect(page.getByRole("heading", { name: "Welcome back" })).toBeVisible();
+    await expect(page.locator("#login-email")).toBeVisible();
+    await expect(page.locator("#login-password")).toBeVisible();
+    await expect(page.getByRole("button", { name: "Sign In" })).toBeVisible();
+  });
+
+  test("disables submit until email and password are valid", async ({ page }) => {
+    await page.goto("/login");
+
+    const submitButton = page.getByRole("button", { name: "Sign In" });
+
+    await expect(submitButton).toBeDisabled();
+
+    await page.locator("#login-email").fill("not-an-email");
+    await page.locator("#login-password").fill("secret123");
+    await expect(submitButton).toBeDisabled();
+
+    await page.locator("#login-email").fill("user@seahavenind.com");
+    await expect(submitButton).toBeEnabled();
+  });
+
+  test("shows error message for invalid credentials", async ({ page }) => {
+    await page.route("**/api/Authentication/Login", async (route) => {
+      await route.fulfill({
+        status: 401,
+        contentType: "application/json",
+        body: JSON.stringify({ message: "Invalid credentials" }),
+      });
+    });
+
+    await page.goto("/login");
+
+    await page.locator("#login-email").fill("user@seahavenind.com");
+    await page.locator("#login-password").fill("wrong-password");
+    await page.getByRole("button", { name: "Sign In" }).click();
+
+    await expect(page.getByText("Invalid email or password. Please try again.")).toBeVisible();
+    await expect(page).toHaveURL(/\/login$/);
+  });
+
+  test("logs in successfully and navigates to dashboard", async ({ page }) => {
+    await page.route("**/api/Authentication/Login", async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({ data: TEST_USER }),
+      });
+    });
+
+    await page.goto("/login");
+
+    await page.locator("#login-email").fill("user@seahavenind.com");
+    await page.locator("#login-password").fill("secret123");
+    await page.getByRole("button", { name: "Sign In" }).click();
+
+    await expect(page).toHaveURL(/\/$/);
+    await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Welcome back" })).not.toBeVisible();
+
+    const storedAuth = await page.evaluate(() => localStorage.getItem("auth"));
+    expect(storedAuth).toContain(TEST_USER.token);
+    expect(storedAuth).toContain(TEST_USER.fullname);
+  });
+});
diff --git a/e2e/dashboard/dashboard.visual.spec.ts b/e2e/dashboard/dashboard.visual.spec.ts
new file mode 100644
index 00000000..ab51543b
--- /dev/null
+++ b/e2e/dashboard/dashboard.visual.spec.ts
@@ -0,0 +1,256 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
+
+function testUser(userRoles: string) {
+  return {
+    token: "dashboard-visual-token",
+    expiration: "2030-01-01T00:00:00.000Z",
+    email: "admin@seahavenind.com",
+    userRoles,
+    phoneNumber: "5551234567",
+    fullname: "Dashboard Visual User",
+    id: "1",
+  };
+}
+
+const DISPATCHERS = [
+  { id: "1", name: "Pat Dispatcher" },
+  { id: "2", name: "Riley Chen" },
+  { id: "3", name: "Sam Okafor" },
+];
+
+const STATS = {
+  total: 128,
+  open: 52,
+  notDispatched: 8,
+  completed: 64,
+  dueCount: 40,
+  completedDueCount: 30,
+  completionRate: 82,
+  averageResolutionDays: 3.4,
+  scheduledTomorrow: 6,
+  pendingUplifts: 4,
+  avetaPending: 3,
+  breakdown: [
+    { status: "PM", count: 24 },
+    { status: "Emergency", count: 6 },
+    { status: "Reactive", count: 12 },
+    { status: "Overdue", count: 9 },
+  ],
+  statusDistribution: [
+    { status: "Scheduled", count: 30 },
+    { status: "In Progress", count: 18 },
+    { status: "Completed", count: 64 },
+    { status: "Pending", count: 16 },
+  ],
+};
+
+const WORKLOAD = {
+  items: [
+    {
+      dispatcherId: "1",
+      dispatcherName: "Pat Dispatcher",
+      openWorkOrders: 12,
+      totalWorkOrders: 20,
+    },
+    { dispatcherId: "2", dispatcherName: "Riley Chen", openWorkOrders: 7, totalWorkOrders: 15 },
+  ],
+  page: 1,
+  pageSize: 10,
+  totalDispatchers: 2,
+};
+
+const PERFORMANCE = {
+  items: [
+    {
+      dispatcherId: "1",
+      dispatcherName: "Pat Dispatcher",
+      completionRate: 94,
+      averageResolutionDays: 2.5,
+      assignedCount: 20,
+      completedCount: 18,
+    },
+    {
+      dispatcherId: "2",
+      dispatcherName: "Riley Chen",
+      completionRate: 78,
+      averageResolutionDays: 3.1,
+      assignedCount: 15,
+      completedCount: 11,
+    },
+    {
+      dispatcherId: "3",
+      dispatcherName: "Sam Okafor",
+      completionRate: 61,
+      averageResolutionDays: 4.4,
+      assignedCount: 9,
+      completedCount: 5,
+    },
+  ],
+  page: 1,
+  pageSize: 10,
+  totalDispatchers: 3,
+};
+
+const REGIONS = {
+  items: [
+    { region: "East", workOrderCount: 44 },
+    { region: "Central", workOrderCount: 31 },
+    { region: "West", workOrderCount: 22 },
+    { region: "California", workOrderCount: 18 },
+    { region: "Unmapped/Other", workOrderCount: 5 },
+  ],
+};
+
+const VENDOR_INSIGHTS = {
+  items: [
+    {
+      vendorId: "101",
+      vendorName: "Gateway Plumbing",
+      completionRate: 88,
+      rescheduleRate: 12,
+      averageResolutionDays: 2.9,
+      totalJobs: 40,
+    },
+    {
+      vendorId: "102",
+      vendorName: "Summit HVAC",
+      completionRate: 76,
+      rescheduleRate: 20,
+      averageResolutionDays: 3.6,
+      totalJobs: 28,
+    },
+  ],
+};
+
+const TREND = {
+  granularity: "week",
+  buckets: [
+    {
+      date: "2026-07-27",
+      label: "Jul 27",
+      total: 18,
+      open: 4,
+      completed: 12,
+      canceled: 1,
+      overdue: 1,
+      isCurrent: false,
+    },
+    {
+      date: "2026-08-03",
+      label: "Aug 3",
+      total: 22,
+      open: 6,
+      completed: 13,
+      canceled: 1,
+      overdue: 2,
+      isCurrent: false,
+    },
+    {
+      date: "2026-08-10",
+      label: "Aug 10",
+      total: 26,
+      open: 8,
+      completed: 15,
+      canceled: 0,
+      overdue: 3,
+      isCurrent: false,
+    },
+    {
+      date: "2026-08-17",
+      label: "Aug 17",
+      total: 20,
+      open: 9,
+      completed: 9,
+      canceled: 1,
+      overdue: 1,
+      isCurrent: true,
+    },
+  ],
+};
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+async function mockDashboardApi(page: Page, userRoles: string) {
+  await page.clock.setFixedTime(new Date(FROZEN_NOW));
+  await page.addInitScript(
+    (user) => localStorage.setItem("auth", JSON.stringify(user)),
+    testUser(userRoles),
+  );
+
+  await page.route("**/api/**", async (route) => {
+    const pathname = new URL(route.request().url()).pathname;
+
+    // Only stub real backend calls; let Vite dev module requests (e.g.
+    // /src/domain/auth/api/*.ts) through untouched.
+    if (!pathname.startsWith("/api/")) {
+      await route.continue();
+      return;
+    }
+
+    if (pathname.includes("/Dashboard/Stats")) return fulfillJson(route, { data: STATS });
+    if (pathname.includes("/Dashboard/Workload")) return fulfillJson(route, { data: WORKLOAD });
+    if (pathname.includes("/Dashboard/Performance"))
+      return fulfillJson(route, { data: PERFORMANCE });
+    if (pathname.includes("/Dashboard/Regions")) return fulfillJson(route, { data: REGIONS });
+    if (pathname.includes("/Dashboard/VendorInsights")) {
+      return fulfillJson(route, { data: VENDOR_INSIGHTS });
+    }
+    if (pathname.includes("/Dashboard/Trend")) return fulfillJson(route, { data: TREND });
+    if (pathname.includes("/workorders/lookups/dispatchers")) {
+      return fulfillJson(route, { data: DISPATCHERS });
+    }
+
+    return fulfillJson(route, { data: [] });
+  });
+}
+
+async function openDashboard(page: Page, userRoles: string) {
+  await mockDashboardApi(page, userRoles);
+  await page.goto("/");
+  await page.evaluate(() => document.fonts.ready);
+  await page.addStyleTag({
+    content: `
+      *, *::before, *::after { transition: none !important; animation: none !important; }
+      .MuiDrawer-paper { transform: none !important; }
+      .Toastify__toast-container { display: none !important; }
+      .tsqd-parent-container { display: none !important; }
+    `,
+  });
+}
+
+async function expectStableScreenshot(page: Page, name: string) {
+  await page.waitForTimeout(250);
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) =>
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+      ),
+  );
+  await expect(page).toHaveScreenshot(name, { fullPage: true });
+}
+
+test.describe("Dashboard deterministic pixel regression", () => {
+  test("admin dashboard", async ({ page }) => {
+    await openDashboard(page, "Admin");
+    await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
+    await expect(page.getByText("Status Distribution")).toBeVisible();
+    await expect(page.getByText("Dispatcher Performance")).toBeVisible();
+    // The scope picker is available to Admin/Scheduler (SH-336).
+    await expect(page.getByRole("button", { name: /All dispatchers/ })).toBeVisible();
+    await expectStableScreenshot(page, "dashboard-admin.png");
+  });
+
+  test("dispatcher scoped dashboard", async ({ page }) => {
+    await openDashboard(page, "Dispatcher");
+    await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
+    // A Dispatcher gets the static "My WOs" label and no dispatcher tables (SH-336).
+    await expect(page.getByText("My WOs")).toBeVisible();
+    await expect(page.getByText("Dispatcher Performance")).toHaveCount(0);
+    await expect(page.getByText("Status Distribution")).toBeVisible();
+    await expectStableScreenshot(page, "dashboard-dispatcher.png");
+  });
+});
diff --git a/e2e/vendor-portal/portal-lifecycle.spec.ts b/e2e/vendor-portal/portal-lifecycle.spec.ts
new file mode 100644
index 00000000..294051a6
--- /dev/null
+++ b/e2e/vendor-portal/portal-lifecycle.spec.ts
@@ -0,0 +1,221 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const PORTAL_TOKEN = "portal-e2e-token";
+
+const futureDate = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString();
+const pastDate = new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString();
+
+interface DispatchDetail {
+  id: number;
+  dispatchNumber: string;
+  workOrderTitle?: string;
+  internalWONumber?: string;
+  status: string;
+  nteAmount?: number;
+  scheduledDate?: string;
+  poNumber?: string;
+  dispatchedAt?: string;
+  completedDate?: string;
+  refusedAt?: string;
+  statusUpdatedAt?: string;
+  description?: string;
+  workOrder?: Record<string, unknown>;
+  location?: Record<string, unknown>;
+  dispatcherContact?: { name?: string; email?: string; phone?: string };
+  checklist: never[];
+  comments: never[];
+  upliftRequests: never[];
+  signoffs: never[];
+  documents: never[];
+}
+
+const sentDetail: DispatchDetail = {
+  id: 101,
+  dispatchNumber: "DSP-101",
+  workOrderTitle: "Emergency boiler repair",
+  internalWONumber: "WO-8842",
+  status: "Sent",
+  nteAmount: 1250,
+  scheduledDate: futureDate,
+  poNumber: "PO-555",
+  statusUpdatedAt: "2026-08-09T16:30:00Z",
+  description: "Boiler is leaking; vendor visit required.",
+  workOrder: {
+    workerOrderTitle: "Emergency boiler repair",
+    internalWONumber: "WO-8842",
+    trade: "Plumbing",
+    subTrade: "Backflow Preventers",
+    siteCode: "STL-01",
+    service: "Boiler Repair",
+  },
+  location: {
+    name: "Central Distribution Center",
+    address: "100 Industrial Pkwy",
+    city: "St. Louis",
+    state: "MO",
+    zipCode: "63101",
+  },
+  dispatcherContact: {
+    name: "Dana Field",
+    email: "dana@seahavenind.com",
+    phone: "314-555-0142",
+  },
+  checklist: [],
+  comments: [],
+  upliftRequests: [],
+  signoffs: [],
+  documents: [],
+};
+
+const listDispatches = [
+  {
+    id: 101,
+    dispatchNumber: "DSP-101",
+    workOrderTitle: "Emergency boiler repair",
+    internalWONumber: "WO-8842",
+    locationName: "Central Distribution Center",
+    locationCity: "St. Louis",
+    locationState: "MO",
+    status: "Sent",
+    nteAmount: 1250,
+    scheduledDate: futureDate,
+  },
+  {
+    id: 102,
+    dispatchNumber: "DSP-102",
+    workOrderTitle: "HVAC quarterly service",
+    status: "Refused",
+    refusedAt: "2026-08-08T10:00:00Z",
+  },
+  {
+    id: 103,
+    dispatchNumber: "DSP-103",
+    workOrderTitle: "PastAcknowledged job",
+    status: "Acknowledged",
+    scheduledDate: pastDate,
+  },
+];
+
+async function fulfill(route: Route, body: unknown, status = 200) {
+  await route.fulfill({
+    status,
+    contentType: "application/json",
+    body: JSON.stringify(body),
+  });
+}
+
+async function mockPortalApi(page: Page, options: { sessionError?: boolean } = {}) {
+  const detailState: { current: DispatchDetail } = { current: { ...sentDetail } };
+
+  await page.route("**/api/vendor-portal/session", (route) => {
+    if (options.sessionError) {
+      fulfill(route, { message: "Invalid or expired token" }, 401);
+      return;
+    }
+    fulfill(route, { data: { companyName: "Gateway Plumbing", vendorId: 101 } });
+  });
+
+  await page.route(/\/api\/vendor-portal\/dispatches\/\d+\/refuse$/, async (route) => {
+    const body = route.request().postDataJSON() as { reason?: string };
+    detailState.current = {
+      ...detailState.current,
+      status: "Refused",
+      refusedAt: new Date().toISOString(),
+    };
+    fulfill(route, {
+      data: {
+        id: detailState.current.id,
+        status: "Refused",
+        refusedAt: detailState.current.refusedAt,
+        reason: body?.reason,
+      },
+    });
+  });
+
+  await page.route(/\/api\/vendor-portal\/dispatches\/\d+$/, (route) =>
+    fulfill(route, { data: detailState.current }),
+  );
+
+  await page.route(/\/api\/vendor-portal\/dispatches(?:\?.*)?$/, (route) =>
+    fulfill(route, { data: listDispatches }),
+  );
+
+  return detailState;
+}
+
+test.describe("Vendor portal lifecycle", () => {
+  test("upcoming filter, detail snapshot, refuse dialog, and locked Refused state", async ({
+    page,
+  }) => {
+    await mockPortalApi(page);
+    await page.goto(`/v/${PORTAL_TOKEN}/dashboard`);
+
+    await expect(page.getByRole("heading", { name: "Your Work" })).toBeVisible();
+
+    await expect(page.getByRole("button", { name: /^Upcoming/ })).toBeVisible();
+    await expect(page.getByRole("button", { name: /^Refused/ })).toBeVisible();
+
+    await page.getByRole("button", { name: /^Upcoming/ }).click();
+    await expect(page.getByText("DSP-101 — Emergency boiler repair")).toBeVisible();
+    await expect(page.getByText("DSP-103")).toHaveCount(0);
+
+    await page.getByText("DSP-101 — Emergency boiler repair").click();
+    await expect(page).toHaveURL(/\/dispatch\/101$/);
+
+    await expect(page.getByRole("heading", { name: "DSP-101" })).toBeVisible();
+    await expect(page.getByText("Boiler Repair", { exact: true })).toBeVisible();
+    await expect(page.getByText("STL-01")).toBeVisible();
+    await expect(page.getByText("$1250.00").first()).toBeVisible();
+    await expect(page.getByRole("link", { name: "dana@seahavenind.com" })).toBeVisible();
+    await expect(page.getByText("Dana Field")).toBeVisible();
+    await expect(page.getByText("314-555-0142")).toBeVisible();
+    await expect(page.getByText(/Status updated/i)).toBeVisible();
+
+    await page.getByRole("button", { name: "Refuse Dispatch" }).click();
+    const dialog = page.getByRole("dialog", { name: "Refuse dispatch" });
+    await expect(dialog).toBeVisible();
+    await dialog.getByLabel(/Reason/i).fill("Equipment unavailable this week.");
+    await expect(dialog.getByText(/\d+\/500/)).toBeVisible();
+    await dialog.getByRole("button", { name: "Refuse dispatch" }).click();
+
+    await expect(dialog).toHaveCount(0);
+    await expect(page.getByText("Refused", { exact: true })).toBeVisible();
+    await expect(page.getByText(/refused and locked/i)).toBeVisible();
+    await expect(page.getByRole("button", { name: "Accept Dispatch" })).toHaveCount(0);
+    await expect(page.getByRole("button", { name: "Refuse Dispatch" })).toHaveCount(0);
+    await expect(page.getByRole("button", { name: "Submit Signoff" })).toHaveCount(0);
+  });
+
+  test("covers the refuse dialog at a mobile viewport", async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await mockPortalApi(page);
+    await page.goto(`/v/${PORTAL_TOKEN}/dashboard`);
+
+    await page.getByText("DSP-101 — Emergency boiler repair").click();
+    await expect(page).toHaveURL(/\/dispatch\/101$/);
+
+    await page.getByRole("button", { name: "Refuse Dispatch" }).click();
+    const dialog = page.getByRole("dialog", { name: "Refuse dispatch" });
+    await expect(dialog).toBeVisible();
+    await page.keyboard.press("Escape");
+    await expect(dialog).toHaveCount(0);
+
+    await page.getByRole("button", { name: "Refuse Dispatch" }).click();
+    await page
+      .getByRole("dialog", { name: "Refuse dispatch" })
+      .getByRole("button", {
+        name: "Refuse dispatch",
+      })
+      .click();
+    await expect(page.getByText("Refused", { exact: true })).toBeVisible();
+    await expect(page.getByText(/refused and locked/i)).toBeVisible();
+  });
+
+  test("shows an expired-token state when the session is rejected", async ({ page }) => {
+    await mockPortalApi(page, { sessionError: true });
+    await page.goto(`/v/${PORTAL_TOKEN}/dashboard`);
+
+    await expect(page.getByRole("heading", { name: "Access Denied" })).toBeVisible();
+    await expect(page.getByRole("alert")).toContainText(/invalid or expired/i);
+  });
+});
diff --git a/e2e/vendors/vendor-operations.spec.ts b/e2e/vendors/vendor-operations.spec.ts
new file mode 100644
index 00000000..13c7b1eb
--- /dev/null
+++ b/e2e/vendors/vendor-operations.spec.ts
@@ -0,0 +1,567 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const TEST_USER = {
+  token: "vendor-operations-e2e-token",
+  expiration: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Vendor Operations Admin",
+  id: "1",
+};
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+async function authenticate(page: Page) {
+  await page.addInitScript((user) => localStorage.setItem("auth", JSON.stringify(user)), TEST_USER);
+  await page.route("**/api/Dashboard/Stats", (route) =>
+    fulfillJson(route, {
+      data: {
+        openWorkOrders: 0,
+        pendingApprovals: 0,
+        scheduledPMs: 0,
+        activeAssets: 0,
+      },
+    }),
+  );
+  await page.route("**/api/User*", (route) => fulfillJson(route, { data: [] }));
+}
+
+test.describe("Vendor operations", () => {
+  test("keeps the most specific vendor navigation item exclusively current", async ({ page }) => {
+    await authenticate(page);
+    await page.route("**/api/vendor-operations/insights*", (route) =>
+      fulfillJson(route, { data: [] }),
+    );
+
+    await page.goto("/vendors/insights");
+
+    const vendorLinks = page.locator('a[href^="/vendors"]');
+    await expect(
+      vendorLinks.filter({ has: page.getByText("Vendor Insights", { exact: true }) }),
+    ).toHaveAttribute("aria-current", "page");
+    await expect(
+      vendorLinks.filter({ has: page.getByText("Vendors", { exact: true }) }),
+    ).not.toHaveAttribute("aria-current", "page");
+    await expect(
+      vendorLinks.filter({ has: page.getByText("Site Preferences", { exact: true }) }),
+    ).not.toHaveAttribute("aria-current", "page");
+  });
+
+  test("keeps Vendor PO controls usable at a constrained viewport", async ({ page }) => {
+    await page.setViewportSize({ width: 700, height: 900 });
+    await authenticate(page);
+    await page.route("**/api/dispatches*", (route) => fulfillJson(route, { items: [], total: 0 }));
+    await page.route("**/api/Vendor/GetVendorList*", (route) =>
+      fulfillJson(route, { Data: [], TotalCount: 0 }),
+    );
+
+    await page.goto("/vendor-pos");
+
+    await expect(page.getByRole("heading", { name: "Vendor POs" })).toBeVisible();
+    await expect(page.getByText("0 total", { exact: true })).toBeVisible();
+    await expect(page.getByPlaceholder("Search PO #, dispatch, vendor, WO...")).toBeVisible();
+    await expect(page.locator("label").filter({ hasText: /^Status$/ })).toBeVisible();
+    await expect(page.locator("label").filter({ hasText: /^Vendor$/ })).toBeVisible();
+    await expect(page.getByLabel("From", { exact: true })).toBeVisible();
+    await expect(page.getByLabel("To", { exact: true })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Clear filters" })).toBeVisible();
+
+    await expect
+      .poll(() =>
+        page
+          .getByPlaceholder("Search PO #, dispatch, vendor, WO...")
+          .evaluate((element) => element.clientWidth),
+      )
+      .toBeGreaterThanOrEqual(280);
+  });
+
+  test("groups 48-hour reminders and overlap conflicts with direct work-order actions", async ({
+    page,
+  }) => {
+    await authenticate(page);
+    await page.route("**/api/vendor-operations/notifications", (route) =>
+      fulfillJson(route, {
+        items: [
+          {
+            id: "no-vendor-501",
+            type: "NoVendor",
+            severity: "Medium",
+            group: "No Vendor",
+            title: "No vendor assigned — 48h to service",
+            workOrderId: 501,
+            workOrderNumber: "WO-501",
+            triggeredAt: "2026-07-23T12:00:00Z",
+            scheduledAt: "2026-07-25T12:00:00Z",
+            action: { label: "Choose vendor", href: "/workorders/edit/501?assignVendor=1" },
+          },
+          {
+            id: "vendor-conflict-801-802",
+            type: "VendorConflict",
+            severity: "Medium",
+            group: "Vendor Conflict",
+            title: "Vendor has overlapping appointments",
+            triggeredAt: "2026-07-23T12:00:00Z",
+            workOrders: [
+              {
+                workOrderId: 501,
+                workOrderNumber: "WO-501",
+                start: "2026-07-25T12:00:00Z",
+                end: "2026-07-25T14:00:00Z",
+              },
+              {
+                workOrderId: 502,
+                workOrderNumber: "WO-502",
+                start: "2026-07-25T13:00:00Z",
+                end: "2026-07-25T15:00:00Z",
+              },
+            ],
+            actions: [
+              { label: "WO-501", href: "/workorders/501" },
+              { label: "WO-502", href: "/workorders/502" },
+            ],
+          },
+        ],
+      }),
+    );
+
+    await page.goto("/notifications");
+
+    await expect(page.getByRole("heading", { name: "Items requiring attention" })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "No Vendor" })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Vendor Conflict" })).toBeVisible();
+    await expect(page.getByRole("link", { name: "Choose vendor" })).toHaveAttribute(
+      "href",
+      "/workorders/edit/501?assignVendor=1",
+    );
+    await expect(page.getByRole("link", { name: "WO-501" })).toHaveAttribute(
+      "href",
+      "/workorders/501",
+    );
+    await expect(page.getByRole("link", { name: "WO-502" })).toHaveAttribute(
+      "href",
+      "/workorders/502",
+    );
+  });
+
+  test("filters insights and exposes both export formats", async ({ page }) => {
+    await authenticate(page);
+    const requestedUrls: string[] = [];
+    await page.route("**/api/vendor-operations/insights*", async (route) => {
+      requestedUrls.push(route.request().url());
+      const { pathname } = new URL(route.request().url());
+      if (pathname.endsWith(".csv")) {
+        await route.fulfill({ status: 200, contentType: "text/csv", body: "Vendor,Completed\n" });
+        return;
+      }
+      if (pathname.endsWith(".pdf")) {
+        await route.fulfill({ status: 200, contentType: "application/pdf", body: "%PDF-1.4" });
+        return;
+      }
+      await fulfillJson(route, {
+        data: [
+          {
+            vendorId: 7,
+            vendor: "Gateway Plumbing",
+            completedJobs: 12,
+            cancellationRefusalRate: 0.1,
+            onTimeArrivalRate: 0.9,
+            onTimeCompletionRate: 0.8,
+            averageCycleHours: 5.5,
+          },
+        ],
+      });
+    });
+
+    await page.goto("/vendors/insights");
+
+    await expect(page.getByRole("cell", { name: "Gateway Plumbing" })).toBeVisible();
+    await page.getByLabel("From", { exact: true }).fill("2026-01-01");
+    await page.getByLabel("To", { exact: true }).fill("2026-01-31");
+    await page.getByLabel("Trade", { exact: true }).fill("Plumbing");
+
+    const insightsQueryHas = (name: string, value: string) =>
+      requestedUrls.some(
+        (url) =>
+          new URL(url).pathname.endsWith("/insights") &&
+          new URL(url).searchParams.get(name) === value,
+      );
+    await expect.poll(() => insightsQueryHas("from", "2026-01-01")).toBe(true);
+    await expect.poll(() => insightsQueryHas("to", "2026-01-31")).toBe(true);
+    await expect.poll(() => insightsQueryHas("trade", "Plumbing")).toBe(true);
+
+    await page.getByRole("button", { name: "Export CSV" }).click();
+    await page.getByRole("button", { name: "Export PDF" }).click();
+
+    const exportRequest = (format: "csv" | "pdf") =>
+      requestedUrls.find((url) => new URL(url).pathname.endsWith(`/insights.${format}`));
+    const exportHasFilters = (url: string | undefined) => {
+      if (!url) return false;
+      const params = new URL(url).searchParams;
+      return (
+        params.get("from") === "2026-01-01" &&
+        params.get("to") === "2026-01-31" &&
+        params.get("trade") === "Plumbing"
+      );
+    };
+
+    await expect.poll(() => exportHasFilters(exportRequest("csv"))).toBe(true);
+    await expect.poll(() => exportHasFilters(exportRequest("pdf"))).toBe(true);
+  });
+
+  test("reorders and saves preferred vendors for a site", async ({ page }) => {
+    await authenticate(page);
+    let savedPreferences: unknown;
+    await page.route("**/api/Contact/GetLocations", (route) =>
+      fulfillJson(route, { data: [{ Id: 10, Name: "St. Louis HQ" }] }),
+    );
+    await page.route("**/api/Vendor/Dropdown*", (route) =>
+      fulfillJson(route, {
+        data: [
+          { Id: 7, CompanyName: "Gateway Plumbing", TradeSpecialties: "Plumbing" },
+          { Id: 8, CompanyName: "Metro HVAC", TradeSpecialties: "HVAC" },
+        ],
+      }),
+    );
+    await page.route("**/api/vendor-operations/sites/10/preferred-vendors", async (route) => {
+      if (route.request().method() === "PUT") {
+        savedPreferences = route.request().postDataJSON();
+        await fulfillJson(route, savedPreferences);
+        return;
+      }
+      await fulfillJson(route, [
+        {
+          id: 1,
+          locationId: 10,
+          vendorId: 7,
+          vendorName: "Gateway Plumbing",
+          trade: "Plumbing",
+          sortOrder: 0,
+          isStale: false,
+        },
+        {
+          id: 2,
+          locationId: 10,
+          vendorId: 8,
+          vendorName: "Metro HVAC",
+          trade: "HVAC",
+          sortOrder: 1,
+          isStale: false,
+        },
+      ]);
+    });
+
+    await page.goto("/vendors/preferences");
+    await page.getByLabel("Site").click();
+    await page.getByRole("option", { name: "St. Louis HQ" }).click();
+    await expect(page.getByText(/1\. Gateway Plumbing/)).toBeVisible();
+    await page.getByRole("button", { name: "Move Metro HVAC up" }).click();
+    await expect(page.getByText(/1\. Metro HVAC/)).toBeVisible();
+    await page.getByRole("button", { name: "Save preferences" }).click();
+
+    await expect
+      .poll(() => savedPreferences)
+      .toEqual([
+        { vendorId: 8, trade: "HVAC", sortOrder: 0 },
+        { vendorId: 7, trade: "Plumbing", sortOrder: 1 },
+      ]);
+  });
+
+  test("creates a work order and assigns the selected technician with ETA", async ({ page }) => {
+    await authenticate(page);
+    let assignment: unknown;
+
+    await page.route("**/api/Contact/GetLocations", (route) =>
+      fulfillJson(route, { data: [{ Id: 10, Name: "St. Louis HQ" }] }),
+    );
+    await page.route("**/api/Employee/Dropdown", (route) => fulfillJson(route, { data: [] }));
+    await page.route("**/api/DropdownOptions/ByCategory/**", (route) =>
+      fulfillJson(route, { data: [] }),
+    );
+    await page.route("**/api/vendor-operations/availability*", (route) =>
+      fulfillJson(route, {
+        data: [
+          {
+            id: 7,
+            companyName: "Gateway Plumbing",
+            contactName: "Taylor Tech",
+            availabilityStatus: "Available",
+            isPreferred: true,
+            conflicts: [],
+          },
+        ],
+      }),
+    );
+    await page.route("**/api/WorkOrder/AddWorkorder", (route) =>
+      fulfillJson(route, {
+        data: {
+          Id: 900,
+          WorkerOrderTitle: "Boiler repair",
+          LocationId: 10,
+          Priority: "Sev 1",
+          Status: "Open",
+          Comments: [],
+          AuditLog: [],
+          Dispatches: [],
+        },
+      }),
+    );
+    await page.route("**/api/vendor-operations/work-orders/900/assignment", async (route) => {
+      assignment = route.request().postDataJSON();
+      await fulfillJson(route, {
+        availabilityStatus: "Available",
+        conflicts: [
+          {
+            workOrderId: 502,
+            workOrderNumber: "WO-502",
+            start: "2026-07-25T12:00:00Z",
+            end: "2026-07-25T14:00:00Z",
+          },
+        ],
+      });
+    });
+    await page.route("**/api/WorkOrder/GetWorkorderById*", (route) =>
+      fulfillJson(route, {
+        data: {
+          Id: 900,
+          WorkerOrderTitle: "Boiler repair",
+          LocationId: 10,
+          Priority: "Sev 1",
+          Status: "Open",
+          Comments: [],
+          AuditLog: [],
+          Dispatches: [],
+        },
+      }),
+    );
+
+    await page.goto("/workorders/new");
+    await page.getByLabel("Title").fill("Boiler repair");
+    await page.getByLabel("Location").click();
+    await page.getByRole("option", { name: "St. Louis HQ" }).click();
+    await page.getByLabel("Priority").click();
+    await page.getByRole("option", { name: "Sev 1" }).click();
+    await page.getByLabel("Scheduled").fill("2026-07-25");
+    await page.getByLabel("Appointment start").fill("2026-07-25T10:00");
+    await page.getByLabel("Appointment end").fill("2026-07-25T12:00");
+    await page.getByLabel("Company + Technician").click();
+    await page.getByRole("option", { name: /Gateway Plumbing · Taylor Tech/ }).click();
+    await page.getByLabel("Assignment ETA").fill("2026-07-25T08:30");
+    await page.getByLabel("Manual ETA override").check();
+    await page.getByRole("button", { name: "Create" }).click();
+
+    await expect
+      .poll(() => assignment)
+      .toEqual({
+        vendorId: 7,
+        scheduledStart: "2026-07-25T10:00:00.000Z",
+        scheduledEnd: "2026-07-25T12:00:00.000Z",
+        estimatedArrivalAt: "2026-07-25T08:30:00.000Z",
+        etaManualOverride: true,
+      });
+    await expect(page.getByText(/scheduling conflict/i)).toBeVisible();
+    await expect(page).toHaveURL(/\/workorders\/900$/);
+  });
+
+  test("preserves an existing ETA when editing in a non-UTC timezone", async ({ browser }) => {
+    const context = await browser.newContext({ timezoneId: "America/New_York" });
+    const page = await context.newPage();
+    await authenticate(page);
+    let assignment: Record<string, unknown> | undefined;
+
+    const workOrder = {
+      Id: 901,
+      WorkerOrderTitle: "Boiler repair",
+      LocationId: 10,
+      Priority: "Sev 1",
+      Status: "Open",
+      CreatedDate: "2026-07-20",
+      ScheduledDate: "2026-07-25",
+      Comments: [],
+      AuditLog: [],
+      Dispatches: [
+        {
+          Id: 44,
+          VendorId: 7,
+          Status: "Acknowledged",
+          EstimatedArrivalAt: "2026-07-25T12:30:00.000Z",
+          EtaManualOverride: true,
+        },
+      ],
+    };
+
+    await page.route("**/api/Contact/GetLocations", (route) =>
+      fulfillJson(route, { data: [{ Id: 10, Name: "St. Louis HQ" }] }),
+    );
+    await page.route("**/api/Employee/Dropdown", (route) => fulfillJson(route, { data: [] }));
+    await page.route("**/api/DropdownOptions/ByCategory/**", (route) =>
+      fulfillJson(route, { data: [] }),
+    );
+    await page.route("**/api/vendor-operations/availability*", (route) =>
+      fulfillJson(route, {
+        data: [
+          {
+            id: 7,
+            companyName: "Gateway Plumbing",
+            contactName: "Taylor Tech",
+            availabilityStatus: "Available",
+            isPreferred: true,
+            conflicts: [],
+          },
+        ],
+      }),
+    );
+    await page.route("**/api/WorkOrder/GetWorkorderById*", (route) =>
+      fulfillJson(route, { data: workOrder }),
+    );
+    await page.route("**/api/WorkOrder/EditWorkorder", (route) =>
+      fulfillJson(route, { data: workOrder }),
+    );
+    await page.route("**/api/vendor-operations/work-orders/901/assignment", async (route) => {
+      assignment = route.request().postDataJSON() as Record<string, unknown>;
+      await fulfillJson(route, { availabilityStatus: "Available", conflicts: [] });
+    });
+
+    await page.goto("/workorders/edit/901");
+    await expect(page.getByLabel("Assignment ETA")).toHaveValue("2026-07-25T08:30");
+    await page.getByRole("button", { name: "Update" }).click();
+
+    await expect.poll(() => assignment?.estimatedArrivalAt).toBe("2026-07-25T12:30:00.000Z");
+    await context.close();
+  });
+
+  test("converts explicit local schedule bounds to the correct UTC instants across a DST transition", async ({
+    browser,
+  }) => {
+    // America/New_York springs forward on 2026-03-08 at 02:00 EST -> 03:00 EDT.
+    // The window below straddles the transition: 01:00 is EST (UTC-5) while
+    // 04:00 is EDT (UTC-4). Each bound must resolve its own offset, proving no
+    // fixed-window assumption remains.
+    const context = await browser.newContext({ timezoneId: "America/New_York" });
+    const page = await context.newPage();
+    await authenticate(page);
+    let assignment: Record<string, unknown> | undefined;
+
+    await page.route("**/api/Contact/GetLocations", (route) =>
+      fulfillJson(route, { data: [{ Id: 10, Name: "St. Louis HQ" }] }),
+    );
+    await page.route("**/api/Employee/Dropdown", (route) => fulfillJson(route, { data: [] }));
+    await page.route("**/api/DropdownOptions/ByCategory/**", (route) =>
+      fulfillJson(route, { data: [] }),
+    );
+    await page.route("**/api/vendor-operations/availability*", (route) =>
+      fulfillJson(route, {
+        data: [
+          {
+            id: 7,
+            companyName: "Gateway Plumbing",
+            contactName: "Taylor Tech",
+            availabilityStatus: "Available",
+            isPreferred: true,
+            conflicts: [],
+          },
+        ],
+      }),
+    );
+    await page.route("**/api/WorkOrder/AddWorkorder", (route) =>
+      fulfillJson(route, {
+        data: {
+          Id: 902,
+          WorkerOrderTitle: "Boiler repair",
+          LocationId: 10,
+          Priority: "Sev 1",
+          Status: "Open",
+          Comments: [],
+          AuditLog: [],
+          Dispatches: [],
+        },
+      }),
+    );
+    await page.route("**/api/vendor-operations/work-orders/902/assignment", async (route) => {
+      assignment = route.request().postDataJSON() as Record<string, unknown>;
+      await fulfillJson(route, { availabilityStatus: "Available", conflicts: [] });
+    });
+    await page.route("**/api/WorkOrder/GetWorkorderById*", (route) =>
+      fulfillJson(route, {
+        data: {
+          Id: 902,
+          WorkerOrderTitle: "Boiler repair",
+          LocationId: 10,
+          Priority: "Sev 1",
+          Status: "Open",
+          Comments: [],
+          AuditLog: [],
+          Dispatches: [],
+        },
+      }),
+    );
+
+    await page.goto("/workorders/new");
+    await page.getByLabel("Title").fill("Boiler repair");
+    await page.getByLabel("Location").click();
+    await page.getByRole("option", { name: "St. Louis HQ" }).click();
+    await page.getByLabel("Priority").click();
+    await page.getByRole("option", { name: "Sev 1" }).click();
+    await page.getByLabel("Appointment start").fill("2026-03-08T01:00");
+    await page.getByLabel("Appointment end").fill("2026-03-08T04:00");
+    await page.getByLabel("Company + Technician").click();
+    await page.getByRole("option", { name: /Gateway Plumbing · Taylor Tech/ }).click();
+    await page.getByRole("button", { name: "Create" }).click();
+
+    await expect.poll(() => assignment?.scheduledStart).toBe("2026-03-08T06:00:00.000Z");
+    await expect.poll(() => assignment?.scheduledEnd).toBe("2026-03-08T08:00:00.000Z");
+    await context.close();
+  });
+
+  test("focuses the Vendor & Time section when arriving from a no-vendor alert", async ({
+    page,
+  }) => {
+    await authenticate(page);
+    await page.route("**/api/Contact/GetLocations", (route) =>
+      fulfillJson(route, { data: [{ Id: 10, Name: "St. Louis HQ" }] }),
+    );
+    await page.route("**/api/Employee/Dropdown", (route) => fulfillJson(route, { data: [] }));
+    await page.route("**/api/DropdownOptions/ByCategory/**", (route) =>
+      fulfillJson(route, { data: [] }),
+    );
+    await page.route("**/api/vendor-operations/availability*", (route) =>
+      fulfillJson(route, {
+        data: [
+          {
+            id: 7,
+            companyName: "Gateway Plumbing",
+            contactName: "Taylor Tech",
+            availabilityStatus: "Available",
+            isPreferred: true,
+            conflicts: [],
+          },
+        ],
+      }),
+    );
+    await page.route("**/api/WorkOrder/GetWorkorderById*", (route) =>
+      fulfillJson(route, {
+        data: {
+          Id: 501,
+          WorkerOrderTitle: "Boiler repair",
+          LocationId: 10,
+          Priority: "Sev 1",
+          Status: "Open",
+          Comments: [],
+          AuditLog: [],
+          Dispatches: [],
+        },
+      }),
+    );
+
+    await page.goto("/workorders/edit/501?assignVendor=1");
+
+    const vendorSection = page.getByRole("region", { name: "Vendor & Time" });
+    await expect(vendorSection).toBeVisible();
+    await expect(vendorSection).toBeFocused();
+    await page.getByLabel("Company + Technician").click();
+    const option = page.getByRole("option", { name: /Gateway Plumbing · Taylor Tech/ });
+    await expect(option).toContainText("Unknown");
+  });
+});
diff --git a/e2e/vendors/vendor-uplift-workflow.spec.ts b/e2e/vendors/vendor-uplift-workflow.spec.ts
new file mode 100644
index 00000000..69205a2e
--- /dev/null
+++ b/e2e/vendors/vendor-uplift-workflow.spec.ts
@@ -0,0 +1,378 @@
+import { expect, test, type Route } from "@playwright/test";
+
+const INTERNAL_USER = {
+  token: "uplift-approver-token",
+  expiration: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+  email: "approver@seahavenind.com",
+  userRoles: "Admin,Tier2Approver",
+  fullname: "Uplift Approver",
+  id: "1",
+};
+
+async function fulfillJson(route: Route, data: unknown, status = 200) {
+  await route.fulfill({
+    status,
+    contentType: "application/json",
+    body: JSON.stringify({ status: status < 400 ? "Success" : "Error", data }),
+  });
+}
+
+test("vendor uploads scanned evidence and submits a dispatch-scoped uplift", async ({ page }) => {
+  let requestBody: Record<string, unknown> | undefined;
+  let uploadPurpose = "";
+  let created = false;
+
+  await page.route("**/api/vendor-portal/**", async (route) => {
+    const request = route.request();
+    const path = new URL(request.url()).pathname;
+
+    if (path.endsWith("/session")) {
+      await fulfillJson(route, { id: 9, companyName: "Gateway Plumbing" });
+      return;
+    }
+    if (path.endsWith("/dispatches/7/documents") && request.method() === "POST") {
+      uploadPurpose = request.postData() ?? "";
+      await fulfillJson(route, {
+        id: 22,
+        originalFileName: "estimate.pdf",
+        scanStatus: "Pending",
+        reviewStatus: "Processing",
+        purpose: "UpliftEvidence",
+      });
+      return;
+    }
+    if (path.endsWith("/dispatches/7/documents/22/status")) {
+      await fulfillJson(route, {
+        id: 22,
+        originalFileName: "estimate.pdf",
+        scanStatus: "Passed",
+        reviewStatus: "Approved",
+        purpose: "UpliftEvidence",
+      });
+      return;
+    }
+    if (path.endsWith("/dispatches/7/uplift-request") && request.method() === "POST") {
+      requestBody = request.postDataJSON();
+      created = true;
+      await fulfillJson(route, {
+        id: 31,
+        status: "Pending",
+        noApprovalRequired: false,
+      });
+      return;
+    }
+    if (path.endsWith("/dispatches/7")) {
+      await fulfillJson(route, {
+        id: 7,
+        dispatchNumber: "DSP-7",
+        poNumber: "PO-7",
+        status: "In Progress",
+        nteAmount: 100,
+        checklist: [],
+        comments: [],
+        signoffs: [],
+        documents: [],
+        upliftRequests: created
+          ? [
+              {
+                id: 31,
+                status: "Pending",
+                currentNTE: 100,
+                requestedNTE: 125,
+                vendorReason: "Replacement compressor",
+                evidenceDocumentId: 22,
+                evidenceFileName: "estimate.pdf",
+                notificationStatus: "Sent",
+              },
+            ]
+          : [],
+      });
+      return;
+    }
+    await fulfillJson(route, []);
+  });
+
+  await page.goto("/v/portal-token/dispatch/7");
+  await expect(page.getByRole("heading", { name: /DSP-7|PO-7/ })).toBeVisible();
+
+  await page.getByLabel("New total NTE").fill("125");
+  await page.getByLabel("Reason").fill("Replacement compressor");
+  await page.getByLabel("Evidence (PDF/JPG/PNG)").setInputFiles({
+    name: "estimate.pdf",
+    mimeType: "application/pdf",
+    buffer: Buffer.from("%PDF-1.4\nmock estimate"),
+  });
+  await page.getByRole("button", { name: "Request uplift" }).click();
+
+  await expect(page.getByText("Pending", { exact: true })).toBeVisible();
+  expect(uploadPurpose).toContain('name="purpose"');
+  expect(uploadPurpose).toContain("UpliftEvidence");
+  expect(requestBody).toMatchObject({
+    requestedNTE: 125,
+    reason: "Replacement compressor",
+    evidenceDocumentId: 22,
+  });
+  expect(requestBody?.requestKey).toMatch(/^[0-9a-f-]{36}$/i);
+});
+
+test("vendor can withdraw a pending uplift from the dispatch", async ({ page }) => {
+  let withdrawnPath = "";
+  let pending = true;
+
+  await page.route("**/api/vendor-portal/**", async (route) => {
+    const request = route.request();
+    const path = new URL(request.url()).pathname;
+    if (path.endsWith("/session")) {
+      await fulfillJson(route, { id: 9, companyName: "Gateway Plumbing" });
+      return;
+    }
+    if (path.endsWith("/dispatches/7/uplift-request/31/withdraw")) {
+      withdrawnPath = path;
+      pending = false;
+      await fulfillJson(route, { id: 31, status: "Withdrawn" });
+      return;
+    }
+    if (path.endsWith("/dispatches/7")) {
+      await fulfillJson(route, {
+        id: 7,
+        dispatchNumber: "DSP-7",
+        status: "In Progress",
+        nteAmount: 100,
+        checklist: [],
+        comments: [],
+        signoffs: [],
+        documents: [],
+        upliftRequests: [
+          {
+            id: 31,
+            status: pending ? "Pending" : "Withdrawn",
+            currentNTE: 100,
+            requestedNTE: 125,
+            vendorReason: "Parts",
+          },
+        ],
+      });
+      return;
+    }
+    await fulfillJson(route, []);
+  });
+
+  page.on("dialog", (dialog) => void dialog.accept());
+  await page.goto("/v/portal-token/dispatch/7");
+  await page.getByRole("button", { name: "Withdraw request" }).click();
+
+  await expect(page.getByText("Withdrawn", { exact: true })).toBeVisible();
+  expect(withdrawnPath).toBe("/api/vendor-portal/dispatches/7/uplift-request/31/withdraw");
+});
+
+test("vendor receives the no-approval result for a request within the current NTE", async ({
+  page,
+}) => {
+  let requestBody: Record<string, unknown> | undefined;
+  await page.route("**/api/vendor-portal/**", async (route) => {
+    const request = route.request();
+    const path = new URL(request.url()).pathname;
+    if (path.endsWith("/session")) {
+      await fulfillJson(route, { id: 9, companyName: "Gateway Plumbing" });
+      return;
+    }
+    if (path.endsWith("/dispatches/7/uplift-request") && request.method() === "POST") {
+      requestBody = request.postDataJSON();
+      await fulfillJson(route, { noApprovalRequired: true, status: "Approved" });
+      return;
+    }
+    if (path.endsWith("/dispatches/7")) {
+      await fulfillJson(route, {
+        id: 7,
+        dispatchNumber: "DSP-7",
+        status: "In Progress",
+        nteAmount: 100,
+        checklist: [],
+        comments: [],
+        signoffs: [],
+        documents: [],
+        upliftRequests: [],
+      });
+      return;
+    }
+    await fulfillJson(route, []);
+  });
+
+  await page.goto("/v/portal-token/dispatch/7");
+  await page.getByLabel("New total NTE").fill("90");
+  await expect(page.getByLabel("Reason")).toHaveCount(0);
+  await page.getByRole("button", { name: "Request uplift" }).click();
+
+  await expect(
+    page.getByText("No approval required — the existing NTE already covers this amount."),
+  ).toBeVisible();
+  expect(requestBody).toMatchObject({ requestedNTE: 90, reason: "" });
+  expect(requestBody).not.toHaveProperty("evidenceDocumentId");
+});
+
+test("vendor revises a changes-requested uplift using its existing evidence", async ({ page }) => {
+  let revisionBody: Record<string, unknown> | undefined;
+  let revised = false;
+  await page.route("**/api/vendor-portal/**", async (route) => {
+    const request = route.request();
+    const path = new URL(request.url()).pathname;
+    if (path.endsWith("/session")) {
+      await fulfillJson(route, { id: 9, companyName: "Gateway Plumbing" });
+      return;
+    }
+    if (path.endsWith("/dispatches/7/uplift-request/31/revise")) {
+      revisionBody = request.postDataJSON();
+      revised = true;
+      await fulfillJson(route, { id: 31, status: "Pending" });
+      return;
+    }
+    if (path.endsWith("/dispatches/7")) {
+      await fulfillJson(route, {
+        id: 7,
+        dispatchNumber: "DSP-7",
+        status: "In Progress",
+        nteAmount: 100,
+        checklist: [],
+        comments: [],
+        signoffs: [],
+        documents: [],
+        upliftRequests: [
+          {
+            id: 31,
+            status: revised ? "Pending" : "ChangesRequested",
+            currentNTE: 100,
+            requestedNTE: 125,
+            vendorReason: "Parts",
+            decisionNote: "Itemize the estimate",
+            evidenceDocumentId: 22,
+            evidenceFileName: "estimate.pdf",
+          },
+        ],
+      });
+      return;
+    }
+    await fulfillJson(route, []);
+  });
+
+  await page.goto("/v/portal-token/dispatch/7");
+  await page.getByRole("button", { name: "Revise" }).click();
+  await page.getByLabel("New total NTE").fill("120");
+  await page.getByLabel("Reason").fill("Parts itemized in the attached estimate");
+  await page.getByRole("button", { name: "Submit revision" }).click();
+
+  await expect(page.getByText("Pending", { exact: true })).toBeVisible();
+  expect(revisionBody).toEqual({
+    requestedNTE: 120,
+    reason: "Parts itemized in the attached estimate",
+    evidenceDocumentId: 22,
+  });
+});
+
+test("internal approver can approve, reject, and revoke with audited notes", async ({ page }) => {
+  const decisions: Array<{ path: string; body: unknown }> = [];
+  const statuses = new Map<number, string>([
+    [41, "Pending"],
+    [42, "Pending"],
+  ]);
+
+  await page.addInitScript(
+    (user) => localStorage.setItem("auth", JSON.stringify(user)),
+    INTERNAL_USER,
+  );
+  await page.route("**/api/Dashboard/Stats", (route) => fulfillJson(route, {}));
+  await page.route("**/api/User*", (route) => fulfillJson(route, []));
+  await page.route(/\/api\/uplifts(?:[/?]|$)/, async (route) => {
+    const request = route.request();
+    const path = new URL(request.url()).pathname;
+    const action = path.match(/\/uplifts\/(41|42)\/(approve|reject|revoke)$/);
+    if (action && request.method() === "POST") {
+      const id = Number(action[1]);
+      statuses.set(
+        id,
+        action[2] === "approve" ? "Approved" : action[2] === "revoke" ? "Revoked" : "Rejected",
+      );
+      decisions.push({ path, body: request.postDataJSON() });
+      await fulfillJson(route, { id, status: statuses.get(id) });
+      return;
+    }
+
+    if (path.endsWith("/uplifts/can-approve")) {
+      await fulfillJson(route, { canApprove: true });
+      return;
+    }
+
+    const requestedStatus = new URL(request.url()).searchParams.get("status");
+    const items = [
+      {
+        id: 41,
+        dispatchId: 7,
+        workOrderId: 501,
+        dispatchNumber: "DSP-41",
+        poNumber: "PO-41",
+        vendorCompanyName: "Gateway Plumbing",
+        currentNTE: 100,
+        requestedNTE: 125,
+        delta: 25,
+        requiredTier: 1,
+        status: statuses.get(41),
+        canDecide: true,
+        evidenceDocumentId: 22,
+        evidenceFileName: "estimate.pdf",
+        evidenceContentType: "application/pdf",
+        evidenceSizeBytes: 2048,
+      },
+      {
+        id: 42,
+        dispatchId: 8,
+        workOrderId: 502,
+        dispatchNumber: "DSP-42",
+        poNumber: "PO-42",
+        vendorCompanyName: "Metro HVAC",
+        currentNTE: 200,
+        requestedNTE: 260,
+        delta: 60,
+        requiredTier: 2,
+        status: statuses.get(42),
+        canDecide: true,
+        evidenceDocumentId: 23,
+        evidenceFileName: "quote.pdf",
+      },
+    ].filter((item) => requestedStatus == null || item.status === requestedStatus);
+
+    await fulfillJson(route, {
+      total: items.length,
+      items,
+    });
+  });
+
+  await page.goto("/uplifts");
+  await expect(page.getByRole("heading", { name: "Uplift Approvals" })).toBeVisible();
+
+  const approvalRow = page.getByRole("row").filter({ hasText: "DSP-41" });
+  await approvalRow.getByRole("button", { name: "Approve" }).click();
+
+  const changesRow = page.getByRole("row").filter({ hasText: "DSP-42" });
+  await changesRow.getByRole("button", { name: "Reject" }).click();
+  await page.getByLabel("Reason for rejection").fill("Please itemize labor and parts.");
+  await page.getByRole("button", { name: "Reject uplift" }).click();
+
+  await page.getByRole("tab", { name: "Approved" }).click();
+  const approvedRow = page.getByRole("row").filter({ hasText: "DSP-41" });
+  await approvedRow.getByRole("button", { name: "Revoke" }).click();
+  await page.getByLabel("Reason for revoking").fill("Approval was made in error.");
+  await page.getByRole("button", { name: "Revoke $125" }).click();
+
+  await expect
+    .poll(() => decisions)
+    .toEqual([
+      { path: "/api/uplifts/41/approve", body: {} },
+      {
+        path: "/api/uplifts/42/reject",
+        body: { note: "Please itemize labor and parts." },
+      },
+      {
+        path: "/api/uplifts/41/revoke",
+        body: { note: "Approval was made in error." },
+      },
+    ]);
+});
diff --git a/e2e/vendors/vendors.spec.ts b/e2e/vendors/vendors.spec.ts
new file mode 100644
index 00000000..27469fe4
--- /dev/null
+++ b/e2e/vendors/vendors.spec.ts
@@ -0,0 +1,984 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const TEST_USER = {
+  token: "vendor-e2e-token",
+  expiration: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Vendor E2E Admin",
+  id: "1",
+};
+
+const activeVendors = [
+  {
+    Id: 1,
+    CompanyId: 101,
+    CompanyName: "Gateway Plumbing",
+    ContactName: "Adam Whyte",
+    Email: "dispatch@gateway.test",
+    Phone: "314-555-0198",
+    CompanyPhone: "314-555-0100",
+    Address: "1 Market St",
+    City: "St. Louis",
+    State: "MO",
+    Zip: "63101",
+    TradeSpecialties: "Plumbing, Backflow Preventers",
+    GoogleMapsUrl: "https://maps.google.com/gateway",
+    Notes: "Preferred after-hours vendor",
+    TotalJobs: 72,
+    IsActive: true,
+    PreferredContact: "Email",
+    AreaId: 1 as number | null,
+    AreaName: "East",
+  },
+  {
+    Id: 2,
+    CompanyId: 102,
+    CompanyName: "Metro HVAC",
+    ContactName: "Maya Chen",
+    Email: "maya@metro.test",
+    Phone: "314-555-0112",
+    CompanyPhone: "314-555-0110",
+    Address: "2 Pine St",
+    City: "Clayton",
+    State: "MO",
+    Zip: "63105",
+    TradeSpecialties: "HVAC",
+    GoogleMapsUrl: "",
+    Notes: "",
+    TotalJobs: 18,
+    IsActive: true,
+    AreaId: null as number | null,
+    AreaName: "",
+  },
+];
+
+const SERVICE_AREAS = [
+  { id: 2, name: "Central" },
+  { id: 1, name: "East" },
+];
+
+const inactiveVendors = [
+  {
+    ...activeVendors[0],
+    Id: 3,
+    CompanyName: "Drain Cleaning Bros",
+    ContactName: "Drew Banks",
+    TotalJobs: 151,
+    IsActive: false,
+  },
+];
+
+const LONG_TEXT_VENDOR = {
+  CompanyName: "Gateway Plumbing and Water Systems of Greater Saint Louis",
+  ContactName: "Adam Christopher Whyte Senior Field Technician",
+  Email: "dispatch-and-after-hours-coordination@gatewayplumbing.example",
+  Phone: "+1 (314) 555-0198 extension 123456",
+  Address: "New York, NY, Estados Unidos, 123 Long Address Avenue",
+  City: "",
+  State: "",
+};
+
+interface MockState {
+  listUrls: string[];
+  createdBody?: Record<string, unknown>;
+  updatedBody?: Record<string, unknown>;
+  patchedBody?: Record<string, unknown>;
+  patchedCompanyId?: string;
+  deletedId?: string;
+  deleteConfirmedOpenWorkOrders?: boolean;
+}
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+async function captureVisual(page: Page, path: string) {
+  if (!process.env.VENDOR_VISUAL_CAPTURE) return;
+  await page.waitForTimeout(400);
+  await page.screenshot({ path, fullPage: true });
+}
+
+async function mockVendorApi(
+  page: Page,
+  options: {
+    listError?: boolean;
+    deactivationBlocked?: boolean;
+    deleteConflict?: boolean;
+    groupedDirectory?: boolean;
+    legacyGateway?: boolean;
+    longText?: boolean;
+  } = {},
+) {
+  const state: MockState = { listUrls: [] };
+  const vendorRecords = [...activeVendors, ...inactiveVendors].map((vendor) => ({ ...vendor }));
+  if (options.longText) Object.assign(vendorRecords[0], LONG_TEXT_VENDOR);
+  if (options.legacyGateway) {
+    vendorRecords[0].Phone = "555-1234 ext 9";
+    vendorRecords[0].GoogleMapsUrl = "http://maps.example.test/legacy";
+  }
+
+  await page.addInitScript((user) => localStorage.setItem("auth", JSON.stringify(user)), TEST_USER);
+
+  await page.route("**/api/DropdownOptions/ByCategory/Trade*", (route) =>
+    fulfillJson(route, {
+      data: [
+        { id: 1, value: "Plumbing" },
+        { id: 2, value: "HVAC" },
+      ],
+    }),
+  );
+  await page.route("**/api/Vendor/facets*", (route) =>
+    fulfillJson(route, {
+      data: {
+        companies: activeVendors.map((vendor) => ({
+          companyId: vendor.CompanyId,
+          name: vendor.CompanyName,
+          companyPhone: vendor.CompanyPhone,
+          email: vendor.Email,
+          address: vendor.Address,
+          city: vendor.City,
+          state: vendor.State,
+          zip: vendor.Zip,
+          googleMapsUrl: vendor.GoogleMapsUrl,
+        })),
+        trades: ["Plumbing", "Backflow Preventers", "HVAC"],
+        areas: SERVICE_AREAS,
+        locations: [
+          { city: "St. Louis", state: "MO", label: "St. Louis, MO" },
+          { city: "Clayton", state: "MO", label: "Clayton, MO" },
+        ],
+        jobBuckets: [
+          { id: "under-50", label: "Under 50" },
+          { id: "50-99", label: "50–99" },
+          { id: "100-149", label: "100–149" },
+          { id: "150-plus", label: "150+" },
+        ],
+      },
+    }),
+  );
+  await page.route("**/api/Vendor/GetVendorDirectoryList*", async (route) => {
+    const url = new URL(route.request().url());
+    state.listUrls.push(url.toString());
+    if (options.listError && url.searchParams.get("pageSize") !== "1") {
+      await fulfillJson(route, { message: "Vendor directory unavailable" }, 500);
+      return;
+    }
+
+    const isActive = url.searchParams.get("isActive") !== "false";
+    const source = vendorRecords.filter((vendor) => vendor.IsActive === isActive);
+    const search = (url.searchParams.get("search") ?? "").toLowerCase();
+    const company = url.searchParams.get("companies[0]");
+    const areas = [...url.searchParams.entries()]
+      .filter(([key]) => key.startsWith("areas["))
+      .map(([, value]) => value);
+    const filtered = source.filter(
+      (vendor) =>
+        (!search ||
+          `${vendor.CompanyName} ${vendor.ContactName} ${vendor.TradeSpecialties} ${vendor.City} ${vendor.State}`
+            .toLowerCase()
+            .includes(search)) &&
+        (!company || vendor.CompanyName === company) &&
+        (areas.length === 0 ||
+          areas.some((area) =>
+            area === "__unassigned__" ? vendor.AreaId == null : String(vendor.AreaId) === area,
+          )),
+    );
+    const isCount = url.searchParams.get("pageSize") === "1";
+    const responseRows = filtered.map((vendor) => {
+      if (!options.groupedDirectory) return vendor;
+      const technicians = [
+        {
+          Id: vendor.Id,
+          ContactName: vendor.ContactName,
+          Email: vendor.Email,
+          Phone: vendor.Phone,
+          TradeSpecialties: vendor.TradeSpecialties,
+          IsActive: vendor.IsActive,
+          TotalJobs: vendor.TotalJobs,
+        },
+      ];
+      if (vendor.Id === 1) {
+        technicians.push({
+          Id: 91,
+          ContactName: "Robin Rivers",
+          Email: "robin@gateway.test",
+          Phone: "314-555-0191",
+          TradeSpecialties: "Drain Cleaning",
+          IsActive: true,
+          TotalJobs: 18,
+        });
+      }
+      return {
+        ...vendor,
+        TotalJobs: technicians.reduce((sum, item) => sum + item.TotalJobs, 0),
+        Technicians: technicians,
+      };
+    });
+    await fulfillJson(route, {
+      Data: isCount ? responseRows.slice(0, 1) : responseRows,
+      TotalCount: filtered.length,
+      PageNumber: 1,
+      PageSize: Number(url.searchParams.get("pageSize") ?? 12),
+    });
+  });
+  await page.route(/\/api\/vendor-company-roster(?:\/\d+)?(?:\?.*)?$/, async (route) => {
+    const request = route.request();
+    const url = new URL(request.url());
+    const pathCompanyId = url.pathname.match(/vendor-company-roster\/(\d+)$/)?.[1];
+
+    if (request.method() === "POST") {
+      state.createdBody = request.postDataJSON();
+      await fulfillJson(route, {
+        ...state.createdBody,
+        companyId: 999,
+        rowVersion: "rv-created",
+      });
+      return;
+    }
+
+    if (request.method() === "PATCH" && pathCompanyId) {
+      state.patchedBody = request.postDataJSON();
+      state.patchedCompanyId = pathCompanyId;
+      const anchor = vendorRecords.find((vendor) => String(vendor.CompanyId) === pathCompanyId);
+      if (!anchor) {
+        await fulfillJson(route, { message: "Vendor roster not found" }, 404);
+        return;
+      }
+      const added = Array.isArray(state.patchedBody.addTechnicians)
+        ? (state.patchedBody.addTechnicians as Array<Record<string, unknown>>)
+        : [];
+      await fulfillJson(route, {
+        companyId: anchor.CompanyId,
+        rowVersion: "rv-patched",
+        name: anchor.CompanyName,
+        companyPhone: anchor.CompanyPhone,
+        email: anchor.Email,
+        address: anchor.Address,
+        city: anchor.City,
+        state: anchor.State,
+        zip: anchor.Zip,
+        googleMapsUrl: anchor.GoogleMapsUrl,
+        notes: anchor.Notes,
+        areaId: anchor.AreaId,
+        areaName: anchor.AreaName,
+        technicians: [
+          ...vendorRecords
+            .filter((vendor) => vendor.CompanyId === anchor.CompanyId)
+            .map((vendor) => ({
+              id: vendor.Id,
+              contactName: vendor.ContactName,
+              phone: vendor.Phone,
+              email: vendor.Email,
+              preferredContact: vendor.PreferredContact ?? "Phone",
+              tradeSpecialties: vendor.TradeSpecialties,
+              isActive: vendor.IsActive,
+              totalJobs: vendor.TotalJobs,
+            })),
+          ...added.map((technician, index) => ({
+            id: 900 + index,
+            totalJobs: 0,
+            ...technician,
+          })),
+        ],
+      });
+      return;
+    }
+
+    if (request.method() === "PUT" && pathCompanyId) {
+      state.updatedBody = request.postDataJSON();
+      const technicians = Array.isArray(state.updatedBody.technicians)
+        ? (state.updatedBody.technicians as Array<Record<string, unknown>>)
+        : [];
+      for (const technician of technicians) {
+        const vendor = vendorRecords.find((item) => String(item.Id) === String(technician.id));
+        if (vendor && typeof technician.isActive === "boolean") {
+          vendor.IsActive = technician.isActive;
+        }
+      }
+      await fulfillJson(route, {
+        ...state.updatedBody,
+        companyId: Number(pathCompanyId),
+        rowVersion: "rv-updated",
+      });
+      return;
+    }
+
+    const vendorId = url.searchParams.get("vendorId");
+    const requestedCompanyId = url.searchParams.get("companyId") ?? pathCompanyId;
+    const anchor = vendorId
+      ? vendorRecords.find((vendor) => String(vendor.Id) === vendorId)
+      : vendorRecords.find((vendor) => String(vendor.CompanyId) === requestedCompanyId);
+    if (!anchor) {
+      await fulfillJson(route, { message: "Vendor roster not found" }, 404);
+      return;
+    }
+    await fulfillJson(route, {
+      companyId: anchor.CompanyId,
+      rowVersion: "rv-1",
+      name: anchor.CompanyName,
+      companyPhone: anchor.CompanyPhone,
+      email: anchor.Email,
+      address: anchor.Address,
+      city: anchor.City,
+      state: anchor.State,
+      zip: anchor.Zip,
+      googleMapsUrl: anchor.GoogleMapsUrl,
+      notes: anchor.Notes,
+      areaId: anchor.AreaId,
+      areaName: anchor.AreaName,
+      technicians: vendorRecords
+        .filter((vendor) => vendor.CompanyId === anchor.CompanyId)
+        .map((vendor) => ({
+          id: vendor.Id,
+          contactName: vendor.ContactName,
+          phone: vendor.Phone,
+          email: vendor.Email,
+          preferredContact: vendor.PreferredContact ?? "Phone",
+          tradeSpecialties: vendor.TradeSpecialties,
+          isActive: vendor.IsActive,
+          totalJobs: vendor.TotalJobs,
+        })),
+    });
+  });
+  await page.route(/\/api\/vendors\/\d+\/deactivation-impact$/, async (route) => {
+    const vendorId = Number(route.request().url().split("/").at(-2));
+    await fulfillJson(route, {
+      data: {
+        vendorId,
+        canDeactivate: !options.deactivationBlocked,
+        openWorkOrders: options.deactivationBlocked
+          ? [
+              {
+                workOrderId: 501,
+                workOrderNumber: "WO-501",
+                workOrderTitle: "Emergency boiler repair",
+                status: "Dispatched",
+                scheduledDate: "2026-07-24T14:00:00Z",
+                dispatchId: 801,
+              },
+            ]
+          : [],
+      },
+    });
+  });
+  await page.route(/\/api\/vendors\/\d+\/portal-token$/, (route) =>
+    fulfillJson(route, {
+      data: {
+        portalUrl: "https://vendor.example.test/token",
+        issuedAt: "2026-07-31T12:00:00Z",
+        expiresAt: "2026-08-07T12:00:00Z",
+      },
+    }),
+  );
+  await page.route(/\/api\/vendors\/\d+(\?.*)?$/, async (route) => {
+    const requestUrl = new URL(route.request().url());
+    const id = requestUrl.pathname.split("/").pop() ?? "";
+    if (route.request().method() === "PUT") {
+      state.updatedBody = route.request().postDataJSON();
+      const vendor = vendorRecords.find((item) => String(item.Id) === id);
+      if (options.legacyGateway && vendor && typeof state.updatedBody?.isActive === "boolean") {
+        vendor.IsActive = state.updatedBody.isActive;
+      }
+      await fulfillJson(route, {
+        data: { ...vendor, ...state.updatedBody, Id: Number(id) },
+      });
+      return;
+    }
+    if (route.request().method() === "DELETE") {
+      state.deleteConfirmedOpenWorkOrders =
+        requestUrl.searchParams.get("confirmOpenWorkOrders") === "true";
+      if (options.deleteConflict) {
+        await fulfillJson(
+          route,
+          { message: "Vendor has open work orders and cannot be deactivated." },
+          409,
+        );
+        return;
+      }
+      state.deletedId = id;
+      const vendor = vendorRecords.find((item) => String(item.Id) === id);
+      if (options.legacyGateway && vendor) vendor.IsActive = false;
+      await fulfillJson(route, { status: "200" });
+      return;
+    }
+    const vendor = vendorRecords.find((item) => String(item.Id) === id);
+    await fulfillJson(route, { data: vendor });
+  });
+  await page.route(/\/api\/vendors\/?$/, async (route) => {
+    if (route.request().method() !== "POST") {
+      await route.fallback();
+      return;
+    }
+    state.createdBody = route.request().postDataJSON();
+    await fulfillJson(route, { data: { ...state.createdBody, id: 99, totalJobs: 0 } });
+  });
+
+  return state;
+}
+
+test.describe("Vendor directory prototype parity", () => {
+  test("renders company-owned columns and the grouped technician roster", async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 1000 });
+    await mockVendorApi(page, { groupedDirectory: true });
+    await page.goto("/vendors");
+
+    const expectedHeaders = [
+      "Company",
+      "Company Phone",
+      "Company Email",
+      "Street Address",
+      "City",
+      "State",
+      "Service Area",
+      "Trade",
+      "Technician",
+      "Technician Phone",
+      "Total Jobs",
+      "Status",
+    ];
+    await expect(page.getByRole("columnheader")).toHaveCount(expectedHeaders.length + 1);
+    for (const header of expectedHeaders) {
+      await expect(page.getByRole("columnheader", { name: header, exact: true })).toBeVisible();
+    }
+
+    const gatewayRow = page.getByRole("button", {
+      name: "Open vendor details for Gateway Plumbing",
+    });
+    await expect(gatewayRow).toContainText("Adam Whyte");
+    await expect(gatewayRow).toContainText("90");
+    const rosterBadge = gatewayRow.getByTestId("vendor-technician-badge");
+    await expect(rosterBadge).toHaveText("+1");
+    await rosterBadge.hover();
+    await expect(page.getByRole("tooltip")).toHaveText("Robin Rivers");
+    await rosterBadge.focus();
+    await expect(rosterBadge).toBeFocused();
+    await expect(page.getByRole("tooltip")).toHaveText("Robin Rivers");
+  });
+
+  test("covers status tabs, global counts, search, facets, table fields, and filtered footer", async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1440, height: 1000 });
+    const state = await mockVendorApi(page);
+    await page.goto("/vendors");
+
+    const heading = page.getByRole("heading", { name: "Vendors / Technicians" });
+    await expect(heading).toBeVisible();
+    await expect(heading).toHaveCSS("font-family", /Montserrat/);
+    await expect(heading).toHaveCSS("font-size", "30px");
+    await expect(heading).toHaveCSS("font-weight", "800");
+    await expect(heading).toHaveCSS("line-height", "33px");
+    await expect(heading).toHaveCSS("letter-spacing", "-0.6px");
+    await expect(page.getByText("2 active companies").first()).toBeVisible();
+    await expect(page.getByRole("tab", { name: "Active (2)" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    for (const heading of [
+      "Company",
+      "Company Phone",
+      "Company Email",
+      "Street Address",
+      "City",
+      "State",
+      "Service Area",
+      "Trade",
+      "Technician",
+      "Technician Phone",
+      "Total Jobs",
+    ]) {
+      await expect(page.getByRole("columnheader", { name: heading, exact: true })).toBeVisible();
+    }
+    await expect(page.getByRole("columnheader", { name: "Status" })).toBeVisible();
+    const activeTabBox = await page.getByRole("tab", { name: "Active (2)" }).boundingBox();
+    expect(activeTabBox).toMatchObject({ x: 256, y: 159.5, height: 36 });
+    const tableContainerBox = await page.locator("table").locator("..").boundingBox();
+    expect(tableContainerBox).toMatchObject({ x: 260, y: 212.5, width: 1164 });
+    expect(tableContainerBox?.height).toBeCloseTo(738, 0);
+    expect((await page.locator("table").boundingBox())?.width).toBe(2200);
+    expect(
+      (await page.getByRole("columnheader", { name: "Company", exact: true }).boundingBox())
+        ?.height,
+    ).toBe(47);
+    expect((await page.locator("tbody tr").first().boundingBox())?.height).toBe(52);
+    await expect(page.getByText("Gateway Plumbing")).toBeVisible();
+    const tradeBadge = page.getByTestId("vendor-trade-badge").first();
+    await expect(tradeBadge).toHaveText("+1");
+    await tradeBadge.hover();
+    await expect(page.getByRole("tooltip")).toHaveText("Backflow Preventers");
+    await tradeBadge.focus();
+    await expect(tradeBadge).toBeFocused();
+    await tradeBadge.click();
+    await expect(page.getByRole("dialog")).toHaveCount(0);
+    await tradeBadge.press("Enter");
+    await expect(page.getByRole("dialog")).toHaveCount(0);
+    await expect(page.getByText("2 active companies").last()).toBeVisible();
+    await expect(page.getByText("2 active · 1 inactive")).toBeVisible();
+    await captureVisual(page, "/tmp/seahaven-vendor-implemented-list.png");
+
+    await page.getByPlaceholder("Search name, company, trade…").fill("metro");
+    await expect(page.getByText("Metro HVAC")).toBeVisible();
+    await expect(page.getByText(/1 active company · filtered/)).toBeVisible();
+    expect(state.listUrls.some((url) => new URL(url).searchParams.get("search") === "metro")).toBe(
+      true,
+    );
+
+    await page.getByPlaceholder("Search name, company, trade…").fill("clayton");
+    await expect(page.getByText("Metro HVAC")).toBeVisible();
+
+    await page.getByPlaceholder("Search name, company, trade…").clear();
+    await page.getByRole("button", { name: "Open vendor filters" }).click();
+    await expect(page.getByRole("heading", { name: "Filters" })).toBeVisible();
+    await captureVisual(page, "/tmp/seahaven-vendor-implemented-filters.png");
+    await page.getByRole("button", { name: /Company/ }).click();
+    await page.getByPlaceholder("All companies").click();
+    await page.getByRole("option", { name: /Gateway Plumbing/ }).click();
+    await page.getByRole("button", { name: "Apply filters" }).click();
+    await expect(page.getByText("Gateway Plumbing").first()).toBeVisible();
+    await expect(page.getByText("1 company · filtered by")).toBeVisible();
+    await expect(page.getByText(/1 active company · filtered/)).toBeVisible();
+    expect(
+      state.listUrls.some(
+        (url) => new URL(url).searchParams.get("companies[0]") === "Gateway Plumbing",
+      ),
+    ).toBe(true);
+
+    await page.getByRole("tab", { name: "Inactive (1)" }).click();
+    await expect(page.getByText("No inactive companies found")).toBeVisible();
+    await page.getByRole("button", { name: "Clear all" }).click();
+    await expect(page.getByText("Drain Cleaning Bros")).toBeVisible();
+    await expect(page.getByRole("columnheader", { name: "Status" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Deactivate vendor" })).toHaveCount(0);
+  });
+
+  test("truncates every non-abbreviated textual column", async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 1000 });
+    await mockVendorApi(page, { longText: true });
+    await page.goto("/vendors");
+
+    const row = page.locator("tbody tr").first();
+    const fields = [
+      { cellIndex: 0, testId: "vendor-text-company", value: LONG_TEXT_VENDOR.CompanyName },
+      { cellIndex: 2, testId: "vendor-text-company-email", value: LONG_TEXT_VENDOR.Email },
+      { cellIndex: 3, testId: "vendor-text-street-address", value: LONG_TEXT_VENDOR.Address },
+      { cellIndex: 8, testId: "vendor-text-technician", value: LONG_TEXT_VENDOR.ContactName },
+      { cellIndex: 9, testId: "vendor-text-technician-phone", value: LONG_TEXT_VENDOR.Phone },
+    ];
+
+    for (const expected of fields) {
+      const cell = row.locator("td").nth(expected.cellIndex);
+      const field = cell.getByTestId(expected.testId);
+      await expect(field).toBeVisible();
+
+      const metrics = await field.evaluate((element) => {
+        const fieldRect = element.getBoundingClientRect();
+        const cellRect = element.closest("td")?.getBoundingClientRect();
+        return {
+          clientWidth: element.clientWidth,
+          scrollWidth: element.scrollWidth,
+          withinCell:
+            cellRect !== undefined &&
+            fieldRect.left >= cellRect.left - 1 &&
+            fieldRect.right <= cellRect.right + 1,
+        };
+      });
+      expect(metrics.scrollWidth).toBeGreaterThan(metrics.clientWidth);
+      expect(metrics.withinCell).toBe(true);
+
+      await field.hover();
+      await expect(page.getByRole("tooltip", { name: expected.value, exact: true })).toBeVisible();
+      await page.mouse.move(0, 0);
+      await expect(page.getByRole("tooltip", { name: expected.value, exact: true })).toHaveCount(0);
+    }
+  });
+
+  test("adds a technician to an existing company, then views and edits the aggregate", async ({
+    page,
+  }) => {
+    const state = await mockVendorApi(page);
+    await page.goto("/vendors");
+
+    await page.getByRole("button", { name: "Add Vendor", exact: true }).click();
+    await expect(page.getByText("Register a vendor company and its technicians.")).toBeVisible();
+    await captureVisual(page, "/tmp/seahaven-vendor-implemented-add.png");
+    await expect(
+      page.getByRole("button", { name: "Add Vendor", exact: true }).last(),
+    ).toBeEnabled();
+
+    const companyLabel = page
+      .getByRole("dialog", { name: /Add Vendor/ })
+      .locator("label")
+      .filter({ hasText: "Company (required)" });
+    await expect(companyLabel).toBeVisible();
+    const companyLabelMetrics = await companyLabel.evaluate((element) => {
+      const field = element.closest(".MuiFormControl-root");
+      const labelRect = element.getBoundingClientRect();
+      const fieldRect = field?.getBoundingClientRect();
+      return {
+        clientWidth: element.clientWidth,
+        scrollWidth: element.scrollWidth,
+        withinFieldGeometry: fieldRect
+          ? labelRect.left >= fieldRect.left &&
+            labelRect.right <= fieldRect.right &&
+            labelRect.top >= fieldRect.top &&
+            labelRect.bottom <= fieldRect.bottom
+          : false,
+      };
+    });
+    expect(companyLabelMetrics.clientWidth).toBeGreaterThanOrEqual(companyLabelMetrics.scrollWidth);
+    expect(companyLabelMetrics.withinFieldGeometry).toBe(true);
+
+    await page.getByRole("combobox", { name: "Company (required)" }).click();
+    await page.getByRole("option", { name: "Gateway Plumbing" }).click();
+    const floatedCompanyLabel = page
+      .getByRole("dialog", { name: /Add Vendor/ })
+      .locator("label")
+      .filter({ hasText: "Company (required)" });
+    const floatedCompanyField = floatedCompanyLabel.locator("..");
+    await expect(floatedCompanyLabel).toHaveText("Company (required)");
+    await expect(floatedCompanyField.locator("legend")).toHaveText("Company (required)");
+    const floatedMetrics = await floatedCompanyLabel.evaluate((element) => {
+      const labelRect = element.getBoundingClientRect();
+      const legendRect = element
+        .closest(".MuiFormControl-root")
+        ?.querySelector("legend")
+        ?.getBoundingClientRect();
+      return {
+        labelClientWidth: element.clientWidth,
+        labelScrollWidth: element.scrollWidth,
+        legendWidth: legendRect?.width ?? 0,
+        labelWidth: labelRect.width,
+      };
+    });
+    expect(floatedMetrics.labelClientWidth).toBeGreaterThanOrEqual(floatedMetrics.labelScrollWidth);
+    expect(floatedMetrics.legendWidth).toBeGreaterThanOrEqual(floatedMetrics.labelWidth);
+
+    // Scrolling focus down the form and back to Company must keep the floated label
+    // inside the dialog's visible scrollport.
+    const dialogContent = page
+      .getByRole("dialog", { name: /Add Vendor/ })
+      .locator(".MuiDialogContent-root");
+    await page.getByLabel("Technician name (optional)").click();
+    await expect
+      .poll(() => dialogContent.evaluate((element) => element.scrollTop))
+      .toBeGreaterThan(0);
+    await page.getByRole("combobox", { name: "Company (required)" }).click();
+    await expect
+      .poll(() => dialogContent.evaluate((element) => element.scrollTop))
+      .toBeLessThanOrEqual(1);
+    await expect(floatedCompanyLabel).toBeVisible();
+    const labelScrollportMetrics = await floatedCompanyLabel.evaluate((element) => {
+      const content = element.closest(".MuiDialogContent-root");
+      return {
+        labelTop: element.getBoundingClientRect().top,
+        labelBottom: element.getBoundingClientRect().bottom,
+        dialogTop: content?.getBoundingClientRect().top ?? Number.NaN,
+        dialogBottom: content?.getBoundingClientRect().bottom ?? Number.NaN,
+        overflowY: content ? getComputedStyle(content).overflowY : "",
+      };
+    });
+    expect(["auto", "scroll"]).toContain(labelScrollportMetrics.overflowY);
+    expect(labelScrollportMetrics.labelTop).toBeGreaterThanOrEqual(
+      labelScrollportMetrics.dialogTop - 1,
+    );
+    expect(labelScrollportMetrics.labelBottom).toBeLessThanOrEqual(
+      labelScrollportMetrics.dialogBottom + 1,
+    );
+
+    await expect(page.getByLabel("Company Phone (optional)")).toHaveValue("314-555-0100");
+    await expect(page.getByRole("textbox", { name: "Email (optional)", exact: true })).toHaveValue(
+      "dispatch@gateway.test",
+    );
+    // SH-271: one combined "Address (optional)" line became three required
+    // fields, and the hand-pasted Google Maps URL input is gone — the location
+    // is derived from the address now.
+    await expect(page.getByRole("combobox", { name: "Street Address (required)" })).toHaveValue(
+      "1 Market St",
+    );
+    await expect(page.getByLabel("City (required)")).toHaveValue("St. Louis");
+    await expect(page.getByLabel("State (required)")).toHaveValue("Missouri (MO)");
+    await expect(page.getByLabel("Service Area (optional)")).toHaveValue("East");
+    await expect(page.getByLabel("Google Maps URL (optional)")).toHaveCount(0);
+    await expect(page.getByLabel("Address (optional)")).toHaveCount(0);
+    await expect(page.getByLabel("Preferred Contact")).toHaveCount(0);
+    await expect(page.getByLabel("Technician name (optional)")).toHaveCount(1);
+    await expect(page.getByLabel("Technician name (optional)")).toHaveValue("");
+    await expect(
+      page.getByRole("dialog", { name: /Add Vendor/ }).getByText("Adam Whyte"),
+    ).toHaveCount(0);
+    await page.getByRole("button", { name: "Add technician" }).click();
+    await page.getByLabel("Technician name (optional)").last().fill("New Technician");
+    const tradeInput = page.getByRole("combobox", { name: "Add Trade" }).last();
+    await tradeInput.fill("Plumbing");
+    await tradeInput.press("Enter");
+    await tradeInput.fill("HVAC");
+    await tradeInput.press("Enter");
+    await expect(page.getByRole("button", { name: /Move (Plumbing|HVAC) (up|down)/ })).toHaveCount(
+      0,
+    );
+    await page.getByLabel("Notes (optional)").fill("Created in browser E2E");
+    await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
+    await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toHaveCount(0);
+    expect(state.patchedCompanyId).toBe("101");
+    expect(state.patchedBody).toMatchObject({ rowVersion: "rv-1" });
+    // Only the field the user actually typed into is transmitted. Address/phone/email were
+    // populated by selecting the company and never edited, so they must not be sent — otherwise a
+    // concurrent edit by another user to any of them would be silently reverted on resubmit.
+    expect(state.patchedBody?.companyFields).toEqual({ notes: "Created in browser E2E" });
+    expect(state.patchedBody?.companyFields).not.toHaveProperty("companyPhone");
+    expect(state.patchedBody?.companyFields).not.toHaveProperty("address");
+    expect(state.patchedBody?.companyFields).not.toHaveProperty("email");
+    expect(state.patchedBody?.companyFields).not.toHaveProperty("name");
+    expect(state.patchedBody?.addTechnicians).toEqual([
+      expect.objectContaining({
+        contactName: "New Technician",
+        tradeSpecialties: "Plumbing, HVAC",
+      }),
+    ]);
+    const patchedTechnicians = Array.isArray(state.patchedBody?.addTechnicians)
+      ? (state.patchedBody.addTechnicians as Array<Record<string, unknown>>)
+      : [];
+    const newTechnician = patchedTechnicians.find(
+      (technician) => technician.contactName === "New Technician",
+    );
+    expect(newTechnician?.preferredContact).toBeUndefined();
+    expect(patchedTechnicians.some((technician) => technician.contactName === "Adam Whyte")).toBe(
+      false,
+    );
+    expect(state.updatedBody).toBeUndefined();
+
+    await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
+    const detailDrawer = page.locator(".MuiDrawer-paper").last();
+    await expect(detailDrawer.getByRole("heading", { name: "Adam Whyte" })).toBeVisible();
+    await expect(detailDrawer.getByText("Adam Whyte")).toBeVisible();
+    await expect(detailDrawer.getByText("72")).toBeVisible();
+    // SH-271: the separate "Open in Google Maps" row is gone — the Street
+    // Address itself is the link, built from the structured parts.
+    const streetLink = detailDrawer.getByRole("link", { name: "1 Market St" }).first();
+    await expect(streetLink).toHaveAttribute("target", "_blank");
+    await expect(streetLink).toHaveAttribute(
+      "href",
+      "https://www.google.com/maps/search/?api=1&query=1%20Market%20St%20St.%20Louis%20MO",
+    );
+    await expect(detailDrawer.getByRole("link", { name: "Open in Google Maps" })).toHaveCount(0);
+    await captureVisual(page, "/tmp/seahaven-vendor-implemented-detail.png");
+
+    await detailDrawer.getByRole("button", { name: "Edit" }).click();
+    await expect(page).toHaveURL(/\/vendors$/);
+    await detailDrawer.getByLabel("Notes (optional)").fill("Updated in browser E2E");
+    await detailDrawer.getByRole("button", { name: "Save changes" }).click();
+    await expect.poll(() => state.updatedBody?.notes).toBe("Updated in browser E2E");
+  });
+
+  test("filters by Service Area and lets an admin assign one", async ({ page }) => {
+    await page.setViewportSize({ width: 1440, height: 1000 });
+    const state = await mockVendorApi(page);
+    await page.goto("/vendors");
+
+    const gatewayRow = page.getByRole("button", {
+      name: "Open vendor details for Gateway Plumbing",
+    });
+    const metroRow = page.getByRole("button", { name: "Open vendor details for Metro HVAC" });
+    await expect(gatewayRow.getByTestId("vendor-text-service-area")).toHaveText("East");
+    await expect(metroRow.getByTestId("vendor-text-service-area")).toHaveText("Unassigned");
+
+    await page.getByRole("button", { name: "Open vendor filters" }).click();
+    await page.getByRole("button", { name: "Service Area" }).click();
+    await page.getByPlaceholder("All areas").click();
+    await expect(page.getByRole("option")).toHaveText(["Unassigned", "Central", "East"]);
+    await page.getByRole("option", { name: "East" }).click();
+    await page.getByRole("button", { name: "Apply filters" }).click();
+
+    await expect(
+      page.getByRole("button", { name: "Remove filter Service Area: East" }),
+    ).toBeVisible();
+    await expect(gatewayRow).toBeVisible();
+    await expect(metroRow).toHaveCount(0);
+    expect(state.listUrls.some((url) => new URL(url).searchParams.get("areas[0]") === "1")).toBe(
+      true,
+    );
+
+    await page.getByRole("button", { name: "Open vendor filters" }).click();
+    await page.getByRole("button", { name: "Service Area" }).click();
+    await page.getByRole("button", { name: "Clear all" }).last().click();
+    await page.getByPlaceholder("All areas").click();
+    await page.getByRole("option", { name: "Unassigned" }).click();
+    await page.getByRole("button", { name: "Apply filters" }).click();
+    await expect(page.getByText("Service Area: Unassigned")).toBeVisible();
+    await expect(metroRow).toBeVisible();
+    await expect(gatewayRow).toHaveCount(0);
+
+    await page.getByRole("button", { name: "Edit vendor Metro HVAC" }).click();
+    const detailDrawer = page.locator(".MuiDrawer-paper").last();
+    const areaField = detailDrawer.getByRole("combobox", { name: "Service Area (optional)" });
+    await expect(areaField).toBeEnabled();
+    await areaField.click();
+    await page.getByRole("option", { name: "Central" }).click();
+    await detailDrawer.getByRole("button", { name: "Save changes" }).click();
+    await expect.poll(() => state.updatedBody?.areaId).toBe(2);
+    expect(state.updatedBody?.state).toBe("MO");
+  });
+
+  test("reactivates a legacy inactive vendor with an exact sparse update", async ({ page }) => {
+    const state = await mockVendorApi(page, { legacyGateway: true });
+    await page.goto("/vendors");
+
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    await page.getByRole("switch", { name: "Active status" }).click();
+    await page.getByRole("button", { name: "Deactivate", exact: true }).click();
+    await expect.poll(() => state.deletedId).toBe("1");
+
+    await page.getByRole("tab", { name: "Inactive (2)" }).click();
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    const detailDrawer = page.locator(".MuiDrawer-paper").last();
+    await detailDrawer.getByRole("switch", { name: "Active status" }).click();
+    await detailDrawer.getByRole("button", { name: "Save changes" }).click();
+    await expect.poll(() => state.updatedBody).toEqual({ isActive: true });
+    await detailDrawer.getByRole("button", { name: "Close drawer" }).click();
+    await page.getByRole("tab", { name: "Active (2)", exact: true }).click();
+    await expect(page.getByText("Gateway Plumbing").first()).toBeVisible();
+  });
+
+  test("supports keyboard dismissal and free-text company creation", async ({ page }) => {
+    const state = await mockVendorApi(page);
+    await page.goto("/vendors");
+
+    const addButton = page.getByRole("button", { name: "Add Vendor", exact: true });
+    await addButton.focus();
+    await page.keyboard.press("Enter");
+    await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toBeVisible();
+    await page.keyboard.press("Escape");
+    await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toHaveCount(0);
+    await expect(addButton).toBeFocused();
+
+    await addButton.click();
+    await expect(
+      page.getByRole("button", { name: "Add Vendor", exact: true }).last(),
+    ).toBeEnabled();
+    await page.getByRole("combobox", { name: "Company (required)" }).fill("Independent Vendor LLC");
+    await page.getByLabel("Company Phone (optional)").fill("3145550199");
+    // SH-271 made the structured address required. This test is about keyboard
+    // dismissal and free-text company creation, so the address is filled to
+    // leave those as the only things it is exercising.
+    await page.getByRole("combobox", { name: "Street Address (required)" }).fill("1 Market St");
+    await page.getByLabel("City (required)").fill("St. Louis");
+    await page.getByLabel("State (required)").fill("Missouri");
+    await page.getByRole("option", { name: "Missouri (MO)" }).click();
+    await page.getByRole("button", { name: "Add Vendor", exact: true }).last().click();
+
+    await expect.poll(() => state.createdBody?.name).toBe("Independent Vendor LLC");
+    expect(state.createdBody?.technicians).toEqual([]);
+    expect(state.createdBody?.state).toBe("MO");
+    expect(state.createdBody?.areaId).toBeNull();
+  });
+
+  test("closes vendor details with Escape and keeps only Edit in the footer", async ({ page }) => {
+    await mockVendorApi(page);
+    await page.goto("/vendors");
+
+    await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
+    const detailDrawer = page.locator(".MuiDrawer-paper").last();
+    await expect(detailDrawer).toBeVisible();
+    await expect(detailDrawer.getByRole("button", { name: "Edit" })).toBeVisible();
+    await expect(detailDrawer.getByRole("button", { name: "Maps" })).toHaveCount(0);
+
+    await page.keyboard.press("Escape");
+    await expect(page.getByRole("button", { name: "Close drawer" })).toHaveCount(0);
+  });
+
+  test("confirms deactivation past linked work orders and preserves the vendor on a raced 409", async ({
+    page,
+  }) => {
+    const confirmState = await mockVendorApi(page, { deactivationBlocked: true });
+    await page.goto("/vendors");
+
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    await page.getByRole("switch", { name: "Active status" }).click();
+    const dialog = page.getByRole("dialog", { name: "Deactivate this vendor?" });
+    await expect(dialog).toContainText("It still has 1 open work order");
+    await expect(
+      dialog.getByRole("link", { name: /WO-501 — Emergency boiler repair/ }),
+    ).toHaveAttribute("href", "/workorders/501");
+
+    // SH-254: the open work orders inform the decision, they no longer block it.
+    const confirm = dialog.getByRole("button", { name: "Deactivate anyway" });
+    await expect(confirm).toBeEnabled();
+    await confirm.click();
+
+    await expect.poll(() => confirmState.deletedId).toBe("1");
+    expect(confirmState.deleteConfirmedOpenWorkOrders).toBe(true);
+
+    await page.unrouteAll({ behavior: "wait" });
+
+    const racedState = await mockVendorApi(page, { deleteConflict: true });
+    await page.reload();
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    await page.getByRole("switch", { name: "Active status" }).click();
+    await page
+      .getByRole("dialog", { name: "Deactivate this vendor?" })
+      .getByRole("button", {
+        name: /^Deactivate$/,
+      })
+      .click();
+
+    await expect(page.getByRole("dialog", { name: "Deactivate this vendor?" })).toContainText(
+      /open work orders|conflict/i,
+    );
+    expect(racedState.deletedId).toBeUndefined();
+    await expect(page.getByText("Gateway Plumbing").first()).toBeVisible();
+  });
+
+  test("shows API failure and keeps drawers usable at a mobile viewport", async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await mockVendorApi(page, { listError: true });
+    await page.goto("/vendors");
+
+    const mainBox = await page.getByRole("main").boundingBox();
+    expect(mainBox).toMatchObject({ x: 0, width: 390 });
+    const navigation = page.getByRole("navigation", { name: "Primary navigation" });
+    await expect(navigation).not.toBeVisible();
+
+    const openNavigation = page.getByRole("button", { name: "Toggle navigation" });
+    await openNavigation.focus();
+    await page.keyboard.press("Enter");
+    await expect(navigation).toBeVisible();
+    await expect(page.getByRole("link", { name: "Sites" })).toBeVisible();
+    await page.keyboard.press("Escape");
+    await expect(navigation).not.toBeVisible();
+    await expect(openNavigation).toBeFocused();
+
+    await expect(page.getByRole("main").getByRole("alert")).toContainText(
+      /Vendor directory unavailable|failed|server error/i,
+      { timeout: 15_000 },
+    );
+    await captureVisual(page, "/tmp/seahaven-vendor-implemented-mobile-list.png");
+    await page.getByRole("button", { name: "Open vendor filters" }).click();
+    const filterDrawer = page.locator(".MuiDrawer-paper").filter({ hasText: "Total Jobs" });
+    await expect(filterDrawer).toBeVisible();
+    const box = await filterDrawer.boundingBox();
+    expect(box?.width).toBeLessThanOrEqual(391);
+    await captureVisual(page, "/tmp/seahaven-vendor-implemented-mobile.png");
+    await page.getByRole("button", { name: "Close filters" }).click();
+  });
+
+  test("keeps protected shell destinations available and marks their selected state", async ({
+    page,
+  }) => {
+    await mockVendorApi(page);
+
+    for (const destination of [
+      { path: "/workorders", label: "Work Orders" },
+      { path: "/accounts", label: "Accounts" },
+      { path: "/locations", label: "Sites" },
+      { path: "/notifications", label: "Notifications" },
+    ]) {
+      await page.goto(destination.path);
+      await expect(page.getByRole("link", { name: destination.label })).toHaveAttribute(
+        "aria-current",
+        "page",
+      );
+    }
+  });
+});
diff --git a/e2e/vendors/vendors.visual.spec.ts b/e2e/vendors/vendors.visual.spec.ts
new file mode 100644
index 00000000..005c9da0
--- /dev/null
+++ b/e2e/vendors/vendors.visual.spec.ts
@@ -0,0 +1,274 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const TEST_USER = {
+  token: "vendor-visual-token",
+  expiration: "2030-01-01T00:00:00.000Z",
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Vendor Visual Admin",
+  id: "1",
+};
+
+const activeVendors = [
+  {
+    Id: 1,
+    CompanyId: 101,
+    CompanyName: "Gateway Plumbing",
+    ContactName: "Adam Whyte",
+    Email: "dispatch@gateway.test",
+    Phone: "314-555-0198",
+    CompanyPhone: "314-555-0100",
+    Address: "1 Market St",
+    City: "St. Louis",
+    State: "MO",
+    Zip: "63101",
+    TradeSpecialties: "Plumbing, Backflow Preventers",
+    GoogleMapsUrl: "https://maps.google.com/gateway",
+    Notes: "Preferred after-hours vendor",
+    TotalJobs: 72,
+    IsActive: true,
+    PreferredContact: "Email",
+  },
+  {
+    Id: 2,
+    CompanyId: 102,
+    CompanyName: "Metro HVAC",
+    ContactName: "Maya Chen",
+    Email: "maya@metro.test",
+    Phone: "314-555-0112",
+    CompanyPhone: "314-555-0110",
+    Address: "2 Pine St",
+    City: "Clayton",
+    State: "MO",
+    Zip: "63105",
+    TradeSpecialties: "HVAC",
+    GoogleMapsUrl: "",
+    Notes: "",
+    TotalJobs: 18,
+    IsActive: true,
+  },
+];
+
+const inactiveVendors = [
+  {
+    ...activeVendors[0],
+    Id: 3,
+    CompanyId: 103,
+    CompanyName: "Drain Cleaning Bros",
+    ContactName: "Drew Banks",
+    TotalJobs: 151,
+    IsActive: false,
+  },
+];
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+async function mockVendorApi(page: Page, mode: "default" | "empty" | "error" = "default") {
+  await page.clock.setFixedTime(new Date("2026-08-10T12:00:00.000Z"));
+  await page.addInitScript((user) => localStorage.setItem("auth", JSON.stringify(user)), TEST_USER);
+
+  // The vendor address map preview embeds maps.google.com in an iframe. Its
+  // content depends on the network, on timing, and on whatever Google serves
+  // that minute, none of which belongs in a test with "deterministic pixel
+  // regression" in its name. Aborting the request pins the frame to a blank
+  // box, so the shot measures our layout and nothing else.
+  await page.route(/https:\/\/(www\.)?google\.com\/maps/, (route) => route.abort());
+
+  await page.route("**/api/**", async (route) => {
+    const request = route.request();
+    const url = new URL(request.url());
+
+    if (!url.pathname.startsWith("/api/")) {
+      await route.continue();
+      return;
+    }
+
+    if (url.pathname.includes("/DropdownOptions/ByCategory/Trade")) {
+      await fulfillJson(route, {
+        data: [
+          { id: 1, value: "Plumbing" },
+          { id: 2, value: "HVAC" },
+        ],
+      });
+      return;
+    }
+
+    if (url.pathname.endsWith("/api/Vendor/facets")) {
+      await fulfillJson(route, {
+        data: {
+          companies: activeVendors.map((vendor) => ({
+            companyId: vendor.CompanyId,
+            name: vendor.CompanyName,
+          })),
+          trades: ["Plumbing", "Backflow Preventers", "HVAC"],
+          locations: [
+            { city: "St. Louis", state: "MO", label: "St. Louis, MO" },
+            { city: "Clayton", state: "MO", label: "Clayton, MO" },
+          ],
+          jobBuckets: [
+            { id: "under-50", label: "Under 50" },
+            { id: "50-99", label: "50–99" },
+            { id: "100-149", label: "100–149" },
+            { id: "150-plus", label: "150+" },
+          ],
+        },
+      });
+      return;
+    }
+
+    if (url.pathname.endsWith("/api/Vendor/GetVendorDirectoryList")) {
+      const isCount = url.searchParams.get("pageSize") === "1";
+      if (mode === "error" && !isCount) {
+        await fulfillJson(route, { message: "Vendor directory unavailable" }, 500);
+        return;
+      }
+      const source =
+        mode === "empty"
+          ? []
+          : url.searchParams.get("isActive") === "false"
+            ? inactiveVendors
+            : activeVendors;
+      await fulfillJson(route, {
+        Data: isCount ? source.slice(0, 1) : source,
+        TotalCount: source.length,
+        PageNumber: 1,
+        PageSize: Number(url.searchParams.get("pageSize") ?? 12),
+      });
+      return;
+    }
+
+    if (url.pathname.startsWith("/api/vendor-company-roster")) {
+      await fulfillJson(route, {
+        companyId: 101,
+        rowVersion: "rv-visual",
+        name: "Gateway Plumbing",
+        companyPhone: "314-555-0100",
+        email: "dispatch@gateway.test",
+        address: "1 Market St",
+        city: "St. Louis",
+        state: "MO",
+        zip: "63101",
+        googleMapsUrl: "https://maps.google.com/gateway",
+        notes: "Preferred after-hours vendor",
+        technicians: [
+          {
+            id: 1,
+            contactName: "Adam Whyte",
+            phone: "314-555-0198",
+            email: "dispatch@gateway.test",
+            preferredContact: "Email",
+            tradeSpecialties: "Plumbing, Backflow Preventers",
+            isActive: true,
+            totalJobs: 72,
+          },
+        ],
+      });
+      return;
+    }
+
+    await fulfillJson(route, { data: {} });
+  });
+}
+
+async function openVendorPage(page: Page, mode: "default" | "empty" | "error" = "default") {
+  await mockVendorApi(page, mode);
+  await page.goto("/vendors");
+  await page.evaluate(() => document.fonts.ready);
+  await page.addStyleTag({
+    content: `
+      *, *::before, *::after { transition: none !important; animation: none !important; }
+      .MuiDrawer-paper { transform: none !important; }
+      .Toastify__toast-container { display: none !important; }
+      .tsqd-parent-container { display: none !important; }
+    `,
+  });
+}
+
+async function expectStableScreenshot(page: Page, name: string) {
+  await page.waitForTimeout(250);
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) =>
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+      ),
+  );
+  await page.screenshot({ animations: "disabled", caret: "hide" });
+  await expect(page).toHaveScreenshot(name);
+}
+
+test.describe("Vendor deterministic pixel regression", () => {
+  test("list", async ({ page }) => {
+    await openVendorPage(page);
+    await expect(page.getByText("Gateway Plumbing")).toBeVisible();
+    await expectStableScreenshot(page, "vendor-list.png");
+  });
+
+  test("filter", async ({ page }) => {
+    await openVendorPage(page);
+    await page.getByRole("button", { name: "Open vendor filters" }).click();
+    await expect(page.getByRole("heading", { name: "Filters" })).toBeVisible();
+    await expectStableScreenshot(page, "vendor-filter.png");
+  });
+
+  test("add", async ({ page }) => {
+    await openVendorPage(page);
+    await page.getByRole("button", { name: "Add Vendor", exact: true }).click();
+    await expect(page.getByRole("dialog", { name: /Add Vendor/ })).toBeVisible();
+    await expectStableScreenshot(page, "vendor-add.png");
+  });
+
+  test("detail", async ({ page }) => {
+    await openVendorPage(page);
+    await page.getByRole("button", { name: "View vendor Gateway Plumbing" }).click();
+    await expect(page.getByRole("button", { name: "Close drawer" })).toBeVisible();
+    await expectStableScreenshot(page, "vendor-detail.png");
+  });
+
+  test("edit", async ({ page }) => {
+    await openVendorPage(page);
+    await page.getByRole("button", { name: "Edit vendor Gateway Plumbing" }).click();
+    await expect(page.getByRole("button", { name: "Save changes" })).toBeVisible();
+    await expectStableScreenshot(page, "vendor-edit.png");
+  });
+
+  test("inactive", async ({ page }) => {
+    await openVendorPage(page);
+    await page.getByRole("tab", { name: "Inactive (1)" }).click();
+    await expect(page.getByText("Drain Cleaning Bros")).toBeVisible();
+    await expectStableScreenshot(page, "vendor-inactive.png");
+  });
+
+  test("empty", async ({ page }) => {
+    await openVendorPage(page, "empty");
+    const emptyState = page.getByText("No active companies found");
+    await expect(emptyState).toBeVisible();
+    await expectStableScreenshot(page, "vendor-empty.png");
+
+    await page.setViewportSize({ width: 390, height: 844 });
+    await expect(emptyState).toBeInViewport();
+  });
+
+  test("error", async ({ page }) => {
+    await openVendorPage(page, "error");
+    await expect(page.getByRole("main").getByRole("alert")).toContainText(
+      /server error|vendor directory unavailable/i,
+      { timeout: 15_000 },
+    );
+    await expect(page.getByRole("progressbar")).toHaveCount(0);
+    await expectStableScreenshot(page, "vendor-error.png");
+  });
+
+  test("mobile", async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await openVendorPage(page);
+    await expect(page.getByText("Gateway Plumbing")).toBeVisible();
+    await expectStableScreenshot(page, "vendor-mobile.png");
+
+    await page.getByRole("button", { name: "Toggle navigation" }).click();
+    await expect(page.getByRole("navigation", { name: "Primary navigation" })).toBeVisible();
+    await expectStableScreenshot(page, "vendor-mobile-navigation.png");
+  });
+});
diff --git a/e2e/work-orders/advanced-filters.spec.ts b/e2e/work-orders/advanced-filters.spec.ts
new file mode 100644
index 00000000..ef4b55f1
--- /dev/null
+++ b/e2e/work-orders/advanced-filters.spec.ts
@@ -0,0 +1,156 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
+
+const TEST_USER = {
+  token: "wo-adv-filters-e2e-token",
+  expiration: "2030-01-01T00:00:00.000Z",
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Work Order E2E Admin",
+  id: "1",
+};
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+function boardRow(id: number, woNumber: string, scheduledDate: string | null) {
+  return {
+    id,
+    woNumber,
+    workOrderType: 2,
+    siteCode: woNumber,
+    lifecycleStatusLabel: "Scheduled",
+    scheduledDate,
+    dispatcherId: "1",
+    dispatcherName: "Pat Dispatcher",
+    pm: "HVAC",
+  };
+}
+
+async function mockWorkOrderApis(page: Page, searchUrls: string[]) {
+  await page.route("**/api/**", (route) => {
+    const pathname = new URL(route.request().url()).pathname;
+    if (!pathname.startsWith("/api/")) {
+      return route.fallback();
+    }
+    if (pathname.includes("/workorders/board") || pathname.includes("DropdownOptions")) {
+      return route.fallback();
+    }
+    return fulfillJson(route, { data: [] });
+  });
+  await page.route("**/api/**/DropdownOptions/ByCategory/**", (route) => {
+    const pathname = new URL(route.request().url()).pathname;
+    if (pathname.toLowerCase().includes("problem")) {
+      return fulfillJson(route, { data: [{ id: 1, value: "HVAC", category: "Problem" }] });
+    }
+    return fulfillJson(route, { data: [] });
+  });
+  await page.route("**/api/workorders/board*", (route) => {
+    if (route.request().url().includes("board/search")) {
+      return route.fallback();
+    }
+    return fulfillJson(route, {
+      weekStart: "2026-08-17",
+      weekEnd: "2026-08-21",
+      counts: { returned: 1, total: 1 },
+      unscheduled: [],
+      scheduled: [boardRow(1, "ADV-WO", "2026-08-19")],
+    });
+  });
+  await page.route("**/api/workorders/board/search*", (route) => {
+    searchUrls.push(route.request().url());
+    return fulfillJson(route, { items: [], totalCount: 0, page: 0, pageSize: 50 });
+  });
+}
+
+async function signInAndOpenWorkOrders(page: Page) {
+  await page.clock.install({ time: new Date(FROZEN_NOW) });
+  await page.clock.resume();
+  await page.addInitScript((user) => localStorage.setItem("auth", JSON.stringify(user)), TEST_USER);
+}
+
+async function applyAdvancedFilters(page: Page) {
+  await page.getByRole("button", { name: "Advanced Filters" }).click();
+  const sheet = page.getByRole("dialog", { name: "Advanced Filters" });
+  await expect(sheet).toBeVisible();
+  return sheet;
+}
+
+test.describe("Work Orders advanced filters", () => {
+  test("sends carriedOver on board/search and shows empty copy", async ({ page }) => {
+    const searchUrls: string[] = [];
+    await signInAndOpenWorkOrders(page);
+    await mockWorkOrderApis(page, searchUrls);
+
+    await page.goto("/workorders");
+    await expect(page.getByRole("heading", { name: "Work Orders" })).toBeVisible({
+      timeout: 15_000,
+    });
+
+    const sheet = await applyAdvancedFilters(page);
+    await sheet.getByRole("button", { name: /Indicators/i }).click();
+    await sheet.getByRole("button", { name: /Carried Over ≥ 2/i }).click();
+    await sheet.getByRole("button", { name: /apply filters/i }).click();
+
+    await expect.poll(() => searchUrls.some((url) => url.includes("carriedOver=true"))).toBe(true);
+    await expect(page.getByText("No work orders match these filters")).toBeVisible();
+  });
+
+  test("sends avetaOnly on board/search and shows empty copy", async ({ page }) => {
+    const searchUrls: string[] = [];
+    await signInAndOpenWorkOrders(page);
+    await mockWorkOrderApis(page, searchUrls);
+
+    await page.goto("/workorders");
+    await expect(page.getByRole("heading", { name: "Work Orders" })).toBeVisible({
+      timeout: 15_000,
+    });
+
+    const sheet = await applyAdvancedFilters(page);
+    await sheet.getByRole("button", { name: /Aveta Compliance/i }).click();
+    await sheet.getByRole("checkbox", { name: /Aveta required only/i }).click();
+    await sheet.getByRole("button", { name: /apply filters/i }).click();
+
+    await expect.poll(() => searchUrls.some((url) => url.includes("avetaOnly=true"))).toBe(true);
+    await expect(page.getByText("No work orders match these filters")).toBeVisible();
+  });
+
+  test("sends combined advanced-filter facets on the same board/search request", async ({
+    page,
+  }) => {
+    const searchUrls: string[] = [];
+    await signInAndOpenWorkOrders(page);
+    await mockWorkOrderApis(page, searchUrls);
+
+    await page.goto("/workorders");
+    await expect(page.getByRole("heading", { name: "Work Orders" })).toBeVisible({
+      timeout: 15_000,
+    });
+
+    const sheet = await applyAdvancedFilters(page);
+    await sheet.getByRole("button", { name: /Severity/i }).click();
+    await sheet.getByRole("button", { name: /SEV 1/i }).click();
+    await sheet.getByRole("button", { name: /Indicators/i }).click();
+    await sheet.getByRole("button", { name: /^Add-On$/i }).click();
+    await sheet.getByRole("button", { name: /^Service/i }).click();
+    await sheet.getByText("HVAC").click();
+    await sheet.getByRole("button", { name: /Completion doc/i }).click();
+    await sheet.getByRole("button", { name: /^Pending$/i }).click();
+    await sheet.getByRole("button", { name: /apply filters/i }).click();
+
+    await expect
+      .poll(() => {
+        const url = searchUrls[searchUrls.length - 1] ?? "";
+        return (
+          url.includes("severities=1") &&
+          url.includes("addOn=true") &&
+          url.includes("pmTypes=HVAC") &&
+          (url.includes("docStatuses=2") || url.includes("DocStatuses=2"))
+        );
+      })
+      .toBe(true);
+  });
+});
diff --git a/e2e/work-orders/board-day-pagination.spec.ts b/e2e/work-orders/board-day-pagination.spec.ts
new file mode 100644
index 00000000..0a3cff18
--- /dev/null
+++ b/e2e/work-orders/board-day-pagination.spec.ts
@@ -0,0 +1,148 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
+
+const TEST_USER = {
+  token: "wo-day-pagination-e2e-token",
+  expiration: "2030-01-01T00:00:00.000Z",
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Work Order E2E Admin",
+  id: "1",
+};
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+function boardRow(id: number, woNumber: string, scheduledDate: string) {
+  return {
+    id,
+    woNumber,
+    workOrderType: 2,
+    siteCode: woNumber,
+    lifecycleStatusLabel: "Scheduled",
+    scheduledDate,
+    dispatcherId: "1",
+    dispatcherName: "Pat Dispatcher",
+    pm: "HVAC",
+  };
+}
+
+async function hideQueryDevtools(page: Page) {
+  await page.addStyleTag({
+    content:
+      ".tsqd-parent-container { display: none !important; pointer-events: none !important; }",
+  });
+  await page.locator(".tsqd-parent-container").evaluateAll((nodes) => {
+    for (const node of nodes) {
+      node.remove();
+    }
+  });
+}
+
+async function mockWorkOrderBoard(page: Page) {
+  const wednesday = Array.from({ length: 60 }, (_, index) =>
+    boardRow(1000 + index, `WO-${1000 + index}`, "2026-08-19"),
+  );
+  const monday = Array.from({ length: 5 }, (_, index) =>
+    boardRow(2000 + index, `MON-${2000 + index}`, "2026-08-17"),
+  );
+
+  await page.route(
+    (url) => url.pathname.startsWith("/api/"),
+    async (route) => {
+      const url = route.request().url();
+      if (url.includes("workorders/board/search")) {
+        const page = Number(new URL(url).searchParams.get("page") ?? "0");
+        const pageSize = Number(new URL(url).searchParams.get("pageSize") ?? "50");
+        const items = wednesday.slice(page * pageSize, page * pageSize + pageSize);
+        await fulfillJson(route, {
+          items,
+          totalCount: 1778,
+          page,
+          pageSize,
+        });
+        return;
+      }
+      if (url.includes("workorders/board") && route.request().method() === "GET") {
+        const weekStart = new URL(url).searchParams.get("weekStart") ?? "2026-08-17";
+        const scheduled =
+          weekStart === "2026-08-17" ? [...wednesday, ...monday] : monday.slice(0, 1);
+        await fulfillJson(route, {
+          weekStart,
+          weekEnd: weekStart === "2026-08-17" ? "2026-08-21" : "2026-08-14",
+          counts: { returned: scheduled.length, total: scheduled.length },
+          unscheduled: [],
+          scheduled,
+        });
+        return;
+      }
+      await fulfillJson(route, { data: [], items: [] });
+    },
+  );
+}
+
+test.describe("work order per-day pagination (SH-241)", () => {
+  test.setTimeout(60_000);
+
+  test.beforeEach(async ({ page }) => {
+    await page.clock.install({ time: new Date(FROZEN_NOW) });
+    await page.clock.resume();
+    await page.addInitScript((user) => {
+      localStorage.setItem("auth", JSON.stringify(user));
+      const style = document.createElement("style");
+      style.textContent = ".tsqd-parent-container { display: none !important; }";
+      document.documentElement.appendChild(style);
+    }, TEST_USER);
+    await mockWorkOrderBoard(page);
+  });
+
+  test("changes rows-per-page, keeps search pager on advanced filters, and resets on day or week change", async ({
+    page,
+  }) => {
+    const pager = page.getByTestId("wo-day-pagination");
+    await page.goto("/workorders");
+    await hideQueryDevtools(page);
+    await expect(page.getByRole("heading", { name: "Work Orders" })).toBeVisible({
+      timeout: 20_000,
+    });
+    await expect(pager).toBeVisible();
+    await expect(pager.getByText("Page 1 of 2")).toBeVisible();
+    await expect(page.getByTestId("wo-day-pagination-next")).toBeEnabled();
+    await expect(page.getByText("WO-1000").first()).toBeVisible();
+    await expect(page.getByText("WO-1050")).toHaveCount(0);
+
+    await pager.getByLabel("Rows per page").selectOption("25");
+    await expect(pager.getByText("Page 1 of 3")).toBeVisible();
+    await expect(page.getByTestId("wo-day-pagination-next")).toBeEnabled();
+    await expect(page.getByText("WO-1025")).toHaveCount(0);
+
+    await hideQueryDevtools(page);
+    await page.getByTestId("wo-day-pagination-next").click();
+    await expect(pager.getByText("Page 2 of 3")).toBeVisible();
+    await expect(page.getByText("WO-1025").first()).toBeVisible();
+    await expect(page.getByText("WO-1000")).toHaveCount(0);
+
+    await page.getByRole("tab", { name: "Mon · 08/17" }).click({ force: true });
+    await expect(pager.getByText("Page 1 of 1")).toBeVisible();
+    await expect(page.getByText("MON-2000").first()).toBeVisible();
+
+    await page.getByRole("button", { name: "Week 8/17–8/21" }).click({ force: true });
+    await page.getByRole("button", { name: /Aug 10/ }).click({ force: true });
+    await expect(page.getByTestId("wo-day-pagination")).toBeVisible();
+    await expect(page.getByTestId("wo-day-pagination").getByText("Page 1 of")).toBeVisible();
+
+    await page.getByRole("button", { name: "Advanced Filters" }).click();
+    await page.getByRole("button", { name: /Indicators/i }).click();
+    await page.getByRole("button", { name: "Rescheduled ≥ 2" }).click();
+    await page.getByRole("button", { name: "Apply filters" }).click();
+    await expect(pager).toBeVisible();
+    await expect(pager.getByText("RESULTS · 1778 items")).toBeVisible();
+    await expect(pager.getByText("Page 1 of 36")).toBeVisible();
+
+    await page.getByRole("button", { name: "Clear all" }).click();
+    await expect(page.getByTestId("wo-day-pagination")).toBeVisible();
+  });
+});
diff --git a/e2e/work-orders/completion-uploads-mobile.spec.ts b/e2e/work-orders/completion-uploads-mobile.spec.ts
new file mode 100644
index 00000000..a8fde88f
--- /dev/null
+++ b/e2e/work-orders/completion-uploads-mobile.spec.ts
@@ -0,0 +1,181 @@
+import { devices, expect, test, type Page, type Request, type Route } from "@playwright/test";
+
+// Completion uploads from a mobile-sized viewport must reach the API as
+// multipart/form-data with a boundary, or ASP.NET cannot bind the [FromForm] file/category.
+test.use({ ...devices["Pixel 7"] });
+
+const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
+const ROW_VERSION = "AAAAAAAAB9E=";
+
+const TEST_USER = {
+  token: "wo-completion-uploads-e2e-token",
+  expiration: "2030-01-01T00:00:00.000Z",
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Work Order E2E Admin",
+  id: "1",
+};
+
+// Leading bytes of files written by real encoders (ffmpeg, iPhone .MOV, pdf).
+const PDF = Buffer.from("%PDF-1.7\n%âã\n1 0 obj\n", "latin1");
+const JPEG = Buffer.from("ffd8ffe000104a46494600010200000100010000", "hex");
+const MP4 = Buffer.from("000000206674797069736f6d0000020069736f6d69736f32", "hex");
+const MOV = Buffer.from("000000146674797071742020000002007174202000000008", "hex");
+
+type BoardRowOptions = { id: number; woNumber: string; workOrderType: number };
+
+function boardRow({ id, woNumber, workOrderType }: BoardRowOptions) {
+  return {
+    id,
+    woNumber,
+    workOrderType,
+    siteCode: "BK5",
+    lifecycleStatusLabel: "In Progress",
+    scheduledDate: "2026-08-19",
+    dispatcherId: "1",
+    dispatcherName: "Pat Dispatcher",
+    pm: "HVAC",
+    docStatus: "No",
+    rowVersion: ROW_VERSION,
+  };
+}
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+function multipartBoundary(request: Request): string | undefined {
+  const contentType = request.headers()["content-type"] ?? "";
+  return /^multipart\/form-data; boundary=(.+)$/.exec(contentType)?.[1];
+}
+
+async function hideQueryDevtools(page: Page) {
+  await page.addStyleTag({
+    content:
+      ".tsqd-parent-container { display: none !important; pointer-events: none !important; }",
+  });
+  await page.locator(".tsqd-parent-container").evaluateAll((nodes) => {
+    for (const node of nodes) {
+      node.remove();
+    }
+  });
+}
+
+async function mockBoard(page: Page, row: ReturnType<typeof boardRow>) {
+  await page.route("**/api/**", (route) => {
+    const pathname = new URL(route.request().url()).pathname;
+    if (!pathname.startsWith("/api/")) return route.fallback();
+    return fulfillJson(route, { data: [] });
+  });
+  await page.route("**/api/workorders/board*", (route) => {
+    if (route.request().url().includes("board/search")) return route.fallback();
+    return fulfillJson(route, {
+      weekStart: "2026-08-17",
+      weekEnd: "2026-08-21",
+      counts: { returned: 1, total: 1 },
+      unscheduled: [],
+      scheduled: [row],
+    });
+  });
+  await page.route("**/api/workorders/board/search*", (route) =>
+    fulfillJson(route, { items: [], totalCount: 0, page: 0, pageSize: 50 }),
+  );
+}
+
+async function openCompletionTab(page: Page, woNumber: string) {
+  await page.clock.install({ time: new Date(FROZEN_NOW) });
+  await page.clock.resume();
+  await page.addInitScript((user) => localStorage.setItem("auth", JSON.stringify(user)), TEST_USER);
+  await page.goto("/workorders");
+  await hideQueryDevtools(page);
+  const row = page.getByRole("row").filter({ hasText: woNumber });
+  await row.getByRole("button", { name: "View details" }).click();
+  const panel = page.getByRole("dialog", { name: "Work order details" });
+  await expect(panel).toBeVisible({ timeout: 15_000 });
+  await panel.getByRole("tab", { name: "Completion Doc" }).click();
+  return panel;
+}
+
+test.describe("Completion uploads on a mobile viewport", () => {
+  test("uploads a signed PDF as multipart with the file and work order version", async ({
+    page,
+  }) => {
+    const row = boardRow({ id: 71, woNumber: "PM-UPLOAD-71", workOrderType: 2 });
+    await mockBoard(page, row);
+    await page.route("**/api/workorders/71/detail", (route) =>
+      fulfillJson(route, { info: row, completion: { docStatus: "No" }, media: [] }),
+    );
+    let upload: Request | undefined;
+    await page.route("**/api/workorders/71/completion-doc", (route) => {
+      upload = route.request();
+      return fulfillJson(route, { docStatus: "Yes", signOffAttachment: "/Assets/Documents/x.pdf" });
+    });
+
+    const panel = await openCompletionTab(page, row.woNumber);
+    const chooser = page.waitForEvent("filechooser");
+    await panel.getByRole("button", { name: "Upload signed PDF" }).click();
+    await (
+      await chooser
+    ).setFiles({ name: "Signed Completion.pdf", mimeType: "application/pdf", buffer: PDF });
+
+    await expect.poll(() => upload?.method()).toBe("POST");
+    const boundary = multipartBoundary(upload!);
+    expect(boundary, upload!.headers()["content-type"]).toBeTruthy();
+    const body = upload!.postDataBuffer()?.toString("latin1") ?? "";
+    expect(body).toContain(`--${boundary}`);
+    expect(body).toContain('name="file"; filename="Signed Completion.pdf"');
+    expect(body).toContain("%PDF-1.7");
+    expect(body).toMatch(new RegExp(`name="workOrderVersion"\\r\\n\\r\\n${ROW_VERSION}`));
+  });
+
+  test("uploads JPG, MP4 and MOV media and categorizes as multipart", async ({ page }) => {
+    const row = boardRow({ id: 72, woNumber: "RX-MEDIA-72", workOrderType: 6 });
+    const media: { id: number; category: number; url: string; fileName: string }[] = [];
+    await mockBoard(page, row);
+    await page.route("**/api/workorders/72/detail", (route) =>
+      fulfillJson(route, { info: row, completion: { docStatus: "No" }, media }),
+    );
+    const uploads: { contentType: string; body: string }[] = [];
+    await page.route("**/api/workorders/72/media", (route) => {
+      const request = route.request();
+      const body = request.postDataBuffer()?.toString("latin1") ?? "";
+      uploads.push({ contentType: request.headers()["content-type"] ?? "", body });
+      const fileName = /filename="([^"]+)"/.exec(body)?.[1] ?? "file";
+      const item = { id: 900 + media.length, category: 3, url: `/Assets/${fileName}`, fileName };
+      media.push(item);
+      return fulfillJson(route, item);
+    });
+    let categorize: Request | undefined;
+    await page.route("**/api/workorders/72/media/*", (route) => {
+      categorize = route.request();
+      const item = media[0]!;
+      return fulfillJson(route, { ...item, category: 1 });
+    });
+
+    const panel = await openCompletionTab(page, row.woNumber);
+    const chooser = page.waitForEvent("filechooser");
+    await panel.getByRole("button", { name: /Drag files here or click to browse/ }).click();
+    await (
+      await chooser
+    ).setFiles([
+      { name: "IMG_0001.jpg", mimeType: "image/jpeg", buffer: JPEG },
+      { name: "VID_0002.MP4", mimeType: "video/mp4", buffer: MP4 },
+      { name: "IMG_1587.MOV", mimeType: "video/quicktime", buffer: MOV },
+    ]);
+
+    await expect.poll(() => uploads.length).toBe(3);
+    for (const [index, name] of ["IMG_0001.jpg", "VID_0002.MP4", "IMG_1587.MOV"].entries()) {
+      expect(uploads[index]!.contentType).toMatch(/^multipart\/form-data; boundary=/);
+      expect(uploads[index]!.body).toContain(`filename="${name}"`);
+    }
+
+    await panel.getByRole("combobox", { name: "Category for IMG_0001.jpg" }).selectOption("Before");
+    await expect.poll(() => categorize?.method()).toBe("PATCH");
+    const boundary = multipartBoundary(categorize!);
+    expect(boundary, categorize!.headers()["content-type"]).toBeTruthy();
+    const body = categorize!.postDataBuffer()?.toString("latin1") ?? "";
+    expect(body).toMatch(/name="category"\r\n\r\nBefore/);
+    expect(body).toMatch(new RegExp(`name="workOrderVersion"\\r\\n\\r\\n${ROW_VERSION}`));
+  });
+});
diff --git a/e2e/work-orders/due-date-schedule-floor.spec.ts b/e2e/work-orders/due-date-schedule-floor.spec.ts
new file mode 100644
index 00000000..afd181e9
--- /dev/null
+++ b/e2e/work-orders/due-date-schedule-floor.spec.ts
@@ -0,0 +1,80 @@
+import { expect, test, type Route } from "@playwright/test";
+
+const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
+
+const TEST_USER = {
+  token: "due-date-floor-e2e-token",
+  expiration: "2030-01-01T00:00:00.000Z",
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Work Order E2E Admin",
+  id: "1",
+};
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+test.describe("Due Date floor in the Create WO wizard (SH-356)", () => {
+  test.setTimeout(60_000);
+
+  test("disables days before Schedule On and clears Due Date when Schedule On passes it", async ({
+    page,
+  }) => {
+    await page.clock.install({ time: new Date(FROZEN_NOW) });
+    await page.clock.resume();
+    await page.addInitScript((user) => {
+      localStorage.setItem("auth", JSON.stringify(user));
+      const style = document.createElement("style");
+      style.textContent = ".tsqd-parent-container { display: none !important; }";
+      document.documentElement.appendChild(style);
+    }, TEST_USER);
+    await page.route(
+      (url) => url.pathname.startsWith("/api/"),
+      async (route) => {
+        if (route.request().method() !== "GET") {
+          await fulfillJson(route, {}, 500);
+          return;
+        }
+        await fulfillJson(route, {
+          data: [],
+          items: [],
+          weekStart: "2026-08-17",
+          weekEnd: "2026-08-21",
+          counts: { returned: 0, total: 0 },
+          unscheduled: [],
+          scheduled: [],
+        });
+      },
+    );
+
+    await page.goto("/workorders");
+    await page.getByRole("button", { name: "New WO" }).click();
+    await expect(page.getByRole("heading", { name: "Type & schedule" })).toBeVisible({
+      timeout: 20_000,
+    });
+
+    await page.getByRole("button", { name: /Pick a date/ }).click();
+    const dateTab = page.getByRole("button", { name: "Date", exact: true });
+    if (await dateTab.isVisible()) {
+      await dateTab.click();
+    }
+    await page.getByRole("button", { name: "20", exact: true }).click();
+
+    await page.getByRole("button", { name: /No due date/ }).click();
+    await expect(page.getByRole("button", { name: "19", exact: true })).toBeDisabled();
+    await expect(page.getByRole("button", { name: "20", exact: true })).toBeEnabled();
+    await page.getByRole("button", { name: "21", exact: true }).click();
+    await expect(page.getByRole("button", { name: /No due date/ })).toHaveCount(0);
+
+    await page.getByRole("button", { name: /Aug 20/ }).click();
+    const dateTabAgain = page.getByRole("button", { name: "Date", exact: true });
+    if (await dateTabAgain.isVisible()) {
+      await dateTabAgain.click();
+    }
+    await page.getByRole("button", { name: "25", exact: true }).click();
+
+    await expect(page.getByRole("button", { name: /No due date/ })).toBeVisible();
+  });
+});
diff --git a/e2e/work-orders/type-filter.spec.ts b/e2e/work-orders/type-filter.spec.ts
new file mode 100644
index 00000000..8c0cef3f
--- /dev/null
+++ b/e2e/work-orders/type-filter.spec.ts
@@ -0,0 +1,93 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
+
+const TEST_USER = {
+  token: "wo-type-filter-e2e-token",
+  expiration: "2030-01-01T00:00:00.000Z",
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Work Order E2E Admin",
+  id: "1",
+};
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+function boardRow(id: number, woNumber: string, scheduledDate: string | null) {
+  return {
+    id,
+    woNumber,
+    workOrderType: 2,
+    siteCode: woNumber,
+    lifecycleStatusLabel: "Scheduled",
+    scheduledDate,
+    dispatcherId: "1",
+    dispatcherName: "Pat Dispatcher",
+    pm: "HVAC",
+  };
+}
+
+async function mockWorkOrderBoard(page: Page, boardUrls: string[]) {
+  await page.route("**/api/**", (route) => {
+    const pathname = new URL(route.request().url()).pathname;
+    if (!pathname.startsWith("/api/")) {
+      return route.fallback();
+    }
+    if (pathname.includes("/workorders/board")) {
+      return route.fallback();
+    }
+    return fulfillJson(route, { data: [] });
+  });
+  await page.route("**/api/workorders/board*", (route) => {
+    if (route.request().url().includes("board/search")) {
+      return route.fallback();
+    }
+    boardUrls.push(route.request().url());
+    return fulfillJson(route, {
+      weekStart: "2026-08-17",
+      weekEnd: "2026-08-21",
+      counts: { returned: 1, total: 1 },
+      unscheduled: [],
+      scheduled: [boardRow(1, "TYPE-WO", "2026-08-19")],
+    });
+  });
+  await page.route("**/api/workorders/board/search*", (route) =>
+    fulfillJson(route, { items: [], totalCount: 0, page: 0, pageSize: 50 }),
+  );
+}
+
+test.describe("Work Orders type filter", () => {
+  test("sends union types on the board request and omits them when cleared", async ({ page }) => {
+    const boardUrls: string[] = [];
+    await page.clock.install({ time: new Date(FROZEN_NOW) });
+    await page.clock.resume();
+    await page.addInitScript(
+      (user) => localStorage.setItem("auth", JSON.stringify(user)),
+      TEST_USER,
+    );
+    await mockWorkOrderBoard(page, boardUrls);
+
+    await page.goto("/workorders");
+    await expect(page.getByRole("heading", { name: "Work Orders" })).toBeVisible({
+      timeout: 15_000,
+    });
+    const trigger = page.getByTestId("wo-type-filter-trigger");
+    await expect(trigger).toBeVisible();
+    await trigger.click();
+    const typeMenu = page.getByTestId("wo-type-filter-menu");
+    await expect(typeMenu.getByRole("menuitemcheckbox", { name: "PM" })).toBeVisible();
+    await typeMenu.getByRole("menuitemcheckbox", { name: "PM" }).click();
+    await typeMenu.getByRole("menuitemcheckbox", { name: "Emergency" }).click();
+    await expect(trigger).toContainText("2 types selected");
+
+    await expect
+      .poll(() => boardUrls.some((url) => url.includes("types=2") && url.includes("types=3")))
+      .toBe(true);
+
+    await typeMenu.getByRole("menuitemcheckbox", { name: "All types" }).click();
+    await expect(trigger).toContainText("All types");
+  });
+});
diff --git a/e2e/work-orders/vendor-inline-editor.spec.ts b/e2e/work-orders/vendor-inline-editor.spec.ts
new file mode 100644
index 00000000..d65c84f1
--- /dev/null
+++ b/e2e/work-orders/vendor-inline-editor.spec.ts
@@ -0,0 +1,91 @@
+import { expect, test, type Route } from "@playwright/test";
+
+const TEST_USER = {
+  token: "work-order-vendor-e2e-token",
+  expiration: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Work Order E2E Admin",
+  id: "1",
+};
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+test("edits only the vendor assigned to the current work order", async ({ page }) => {
+  let updateRequest: { url: string; body: Record<string, unknown> } | undefined;
+
+  await page.addInitScript((user) => localStorage.setItem("auth", JSON.stringify(user)), TEST_USER);
+  await page.route("**/api/WorkOrder/GetWorkorderById*", (route) =>
+    fulfillJson(route, {
+      Id: 501,
+      InternalWONumber: "WO-501",
+      WorkerOrderNumber: "CUSTOMER-501",
+      WorkerOrderTitle: "Emergency boiler repair",
+      Status: "Dispatched",
+      Comments: [],
+      AuditLog: [],
+      Dispatches: [
+        {
+          Id: 801,
+          DispatchNumber: "D-801",
+          VendorId: 7,
+          VendorName: "Gateway Plumbing",
+          VendorEmail: "dispatch@gateway.test",
+          Status: "Sent",
+          DispatchedAt: "2026-07-23T12:00:00Z",
+        },
+      ],
+    }),
+  );
+  await page.route("**/api/vendors/7/work-order-update", async (route) => {
+    updateRequest = {
+      url: route.request().url(),
+      body: route.request().postDataJSON() as Record<string, unknown>,
+    };
+    await fulfillJson(route, { data: { id: 7 } });
+  });
+  await page.route("**/api/vendors/7", (route) =>
+    fulfillJson(route, {
+      data: {
+        Id: 7,
+        CompanyName: "Gateway Plumbing",
+        ContactName: "Adam Whyte",
+        PreferredContact: "Email",
+        Phone: "3145550198",
+        Email: "dispatch@gateway.test",
+        Notes: "Preferred after-hours vendor",
+        IsActive: true,
+      },
+    }),
+  );
+  await page.route("**/api/workorders/lookups/dispatchers", (route) =>
+    fulfillJson(route, { data: [] }),
+  );
+  await page.route("**/api/User*", (route) => fulfillJson(route, { data: [] }));
+
+  await page.goto("/workorders/501");
+  await expect(page.getByRole("heading", { name: "Emergency boiler repair" })).toBeVisible();
+  await page.getByRole("button", { name: "Edit vendor" }).click();
+
+  await expect(page.getByRole("dialog", { name: "Edit assigned vendor" })).toBeVisible();
+  await expect(page.getByText("Preferred contact")).toHaveCount(0);
+  await expect(page.getByLabel("Technician name")).toHaveValue("Adam Whyte");
+  await page.getByLabel("Technician name").fill("Taylor Tech");
+  await page.getByLabel("Phone").fill("3145550111");
+  await page.getByLabel("Email").fill("taylor@example.com");
+  await page.getByLabel("Notes").fill("Text before arrival");
+  await page.getByRole("button", { name: "Save" }).click();
+
+  await expect(page.getByRole("dialog", { name: "Edit assigned vendor" })).toBeHidden();
+  expect(updateRequest?.url).toMatch(/\/api\/vendors\/7\/work-order-update$/);
+  expect(updateRequest?.body).toEqual({
+    workOrderId: 501,
+    contactName: "Taylor Tech",
+    phone: "(314) 555-0111",
+    email: "taylor@example.com",
+    notes: "Text before arrival",
+  });
+});
diff --git a/e2e/work-orders/week-day-navigation.spec.ts b/e2e/work-orders/week-day-navigation.spec.ts
new file mode 100644
index 00000000..8a8e1245
--- /dev/null
+++ b/e2e/work-orders/week-day-navigation.spec.ts
@@ -0,0 +1,137 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
+
+const TEST_USER = {
+  token: "wo-week-day-e2e-token",
+  expiration: "2030-01-01T00:00:00.000Z",
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Work Order E2E Admin",
+  id: "1",
+};
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+function boardRow(id: number, woNumber: string, scheduledDate: string | null) {
+  return {
+    id,
+    woNumber,
+    workOrderType: 2,
+    siteCode: woNumber,
+    lifecycleStatusLabel: "Scheduled",
+    scheduledDate,
+    dispatcherId: "1",
+    dispatcherName: "Pat Dispatcher",
+    pm: "HVAC",
+  };
+}
+
+async function mockWorkOrderBoard(page: Page) {
+  await page.route("**/api/**", (route) => {
+    const pathname = new URL(route.request().url()).pathname;
+    if (!pathname.startsWith("/api/")) {
+      return route.fallback();
+    }
+    if (pathname.includes("/workorders/board")) {
+      return route.fallback();
+    }
+    return fulfillJson(route, { data: [] });
+  });
+  await page.route("**/api/workorders/board*", (route) => {
+    if (route.request().url().includes("board/search")) {
+      return route.fallback();
+    }
+    const url = new URL(route.request().url());
+    const weekStart = url.searchParams.get("weekStart") ?? "2026-08-17";
+    const scheduled =
+      weekStart === "2026-08-17"
+        ? [boardRow(1, "MON-WO", "2026-08-17"), boardRow(2, "WED-WO", "2026-08-19")]
+        : [boardRow(4, "PREV-MON-WO", "2026-08-10")];
+    return fulfillJson(route, {
+      weekStart,
+      weekEnd: weekStart === "2026-08-17" ? "2026-08-21" : "2026-08-14",
+      counts: { returned: scheduled.length + 1, total: scheduled.length + 1 },
+      unscheduled: [boardRow(3, "UNSCHED-WO", null)],
+      scheduled,
+    });
+  });
+  await page.route("**/api/workorders/board/search*", (route) =>
+    fulfillJson(route, { items: [], totalCount: 0, page: 0, pageSize: 50 }),
+  );
+}
+
+test.describe("Work Orders week/day navigation (SH-240)", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.clock.install({ time: new Date(FROZEN_NOW) });
+    await page.clock.resume();
+    await page.addInitScript(
+      (user) => localStorage.setItem("auth", JSON.stringify(user)),
+      TEST_USER,
+    );
+    await mockWorkOrderBoard(page);
+  });
+
+  test("scopes the table to one day and excludes Unscheduled", async ({ page }) => {
+    await page.goto("/workorders");
+    await expect(page.getByRole("heading", { name: "Work Orders" })).toBeVisible({
+      timeout: 15_000,
+    });
+    const dispatcher = page.getByRole("button", { name: "All dispatchers" });
+    await expect(dispatcher).toBeVisible();
+    await expect(
+      page.getByLabel("Week and day").getByRole("button", { name: "All dispatchers" }),
+    ).toHaveCount(0);
+    const titleBox = await page.getByRole("heading", { name: "Work Orders" }).boundingBox();
+    const dispatcherBox = await dispatcher.boundingBox();
+    const weekBox = await page.getByRole("button", { name: "Week 8/17–8/21" }).boundingBox();
+    expect(titleBox).toBeTruthy();
+    expect(dispatcherBox).toBeTruthy();
+    expect(weekBox).toBeTruthy();
+    expect(dispatcherBox!.y).toBeGreaterThan(titleBox!.y);
+    expect(weekBox!.y).toBeGreaterThan(dispatcherBox!.y);
+    await expect(page.getByRole("button", { name: "Week 8/17–8/21" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Week 8/17–8/21" })).toContainText("Live");
+
+    await expect(page.getByRole("tab", { name: "Mon · 08/17" })).toBeVisible();
+    await expect(page.getByRole("tab", { name: "Wed · 08/19" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+
+    await expect(page.getByText("WED-WO").first()).toBeVisible();
+    await expect(page.getByText("MON-WO")).toHaveCount(0);
+    await expect(page.getByText("UNSCHED-WO")).toHaveCount(0);
+    await expect(page.getByRole("button", { name: /Unscheduled/ })).toHaveCount(0);
+
+    await page.getByRole("tab", { name: "Mon · 08/17" }).click();
+    await expect(page.getByRole("tab", { name: "Mon · 08/17" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    await expect(page.getByText("MON-WO").first()).toBeVisible();
+    await expect(page.getByText("WED-WO")).toHaveCount(0);
+    await expect(page.getByText("UNSCHED-WO")).toHaveCount(0);
+  });
+
+  test("updates day tabs and selects Monday when the week changes", async ({ page }) => {
+    await page.goto("/workorders");
+    await expect(page.getByRole("tab", { name: "Wed · 08/19" })).toBeVisible({ timeout: 15_000 });
+
+    await page.getByRole("button", { name: "Week 8/17–8/21" }).click();
+    await page.getByRole("button", { name: /Aug 10/ }).click();
+
+    await expect(page.getByRole("button", { name: "Week 8/10–8/14" })).toBeVisible();
+    await expect(page.getByRole("tab", { name: "Mon · 08/10" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    await expect(page.getByRole("tab", { name: "Fri · 08/14" })).toBeVisible();
+    await expect(page.getByRole("tab", { name: "Mon · 08/17" })).toHaveCount(0);
+    await expect(page.getByText("PREV-MON-WO").first()).toBeVisible();
+    await expect(page.getByText("UNSCHED-WO")).toHaveCount(0);
+  });
+});
diff --git a/e2e/work-orders/wizard-vendor-company-notes.spec.ts b/e2e/work-orders/wizard-vendor-company-notes.spec.ts
new file mode 100644
index 00000000..df507616
--- /dev/null
+++ b/e2e/work-orders/wizard-vendor-company-notes.spec.ts
@@ -0,0 +1,168 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
+
+const TEST_USER = {
+  token: "wizard-vendor-notes-e2e-token",
+  expiration: "2030-01-01T00:00:00.000Z",
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Work Order E2E Admin",
+  id: "1",
+};
+
+const LOCATIONS = [
+  {
+    id: 10,
+    name: "STL-01 · St. Louis, MO",
+    siteCode: "STL-01",
+    city: "St. Louis",
+    state: "MO",
+    code: "STL-01",
+  },
+];
+
+const VENDORS = [
+  {
+    id: 101,
+    companyName: "Gateway Plumbing",
+    contactName: "Adam Whyte",
+    tradeSpecialties: "Plumbing",
+    address: "1 Market St",
+  },
+];
+
+type Captured = { method: string; path: string; body: unknown };
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+async function mockApi(page: Page, captured: Captured[]) {
+  await page.route(
+    (url) => url.pathname.startsWith("/api/"),
+    async (route) => {
+      const request = route.request();
+      const { pathname } = new URL(request.url());
+      if (request.method() !== "GET") {
+        captured.push({ method: request.method(), path: pathname, body: request.postDataJSON() });
+      }
+      if (pathname.endsWith("/workorders/board") && request.method() === "POST") {
+        await fulfillJson(route, { data: { id: 900, woNumber: "SH00900" } });
+        return;
+      }
+      if (pathname.endsWith("/vendor-company-roster/55") && request.method() === "PATCH") {
+        await fulfillJson(route, {
+          companyId: 55,
+          rowVersion: "rv-2",
+          name: "Gateway Plumbing",
+          notes: "Gate code 4411",
+          technicians: [],
+        });
+        return;
+      }
+      if (pathname.endsWith("/vendor-company-roster") && request.method() === "GET") {
+        await fulfillJson(route, {
+          companyId: 55,
+          rowVersion: "rv-1",
+          name: "Gateway Plumbing",
+          notes: "Call before arrival",
+          technicians: [{ id: 101, contactName: "Adam Whyte", isActive: true }],
+        });
+        return;
+      }
+      if (pathname.includes("workorders/board")) {
+        await fulfillJson(route, {
+          weekStart: "2026-08-17",
+          weekEnd: "2026-08-21",
+          counts: { returned: 0, total: 0 },
+          unscheduled: [],
+          scheduled: [],
+          items: [],
+        });
+        return;
+      }
+      if (pathname.endsWith("/locations/10")) {
+        await fulfillJson(route, {
+          data: {
+            id: 10,
+            name: "STL-01 · St. Louis, MO",
+            contact: "Jamie Site",
+            phone: "3145550100",
+            zipCode: "63101",
+          },
+        });
+        return;
+      }
+      if (pathname.includes("/locations/sites") || pathname.includes("/Contact/GetLocations")) {
+        await fulfillJson(route, { data: LOCATIONS });
+        return;
+      }
+      if (pathname.toLowerCase().includes("/vendors/dropdown")) {
+        await fulfillJson(route, { data: VENDORS });
+        return;
+      }
+      await fulfillJson(route, { data: [], items: [] });
+    },
+  );
+}
+
+test.describe("wizard vendor company notes (SH-321)", () => {
+  test.setTimeout(60_000);
+
+  test("pre-fills the company notes and saves edits to the vendor company on create", async ({
+    page,
+  }) => {
+    const captured: Captured[] = [];
+    await page.clock.install({ time: new Date(FROZEN_NOW) });
+    await page.clock.resume();
+    await page.addInitScript((user) => {
+      localStorage.setItem("auth", JSON.stringify(user));
+      const style = document.createElement("style");
+      style.textContent = ".tsqd-parent-container { display: none !important; }";
+      document.documentElement.appendChild(style);
+    }, TEST_USER);
+    await mockApi(page, captured);
+
+    await page.goto("/workorders");
+    await page.getByRole("button", { name: "New WO" }).click();
+    await expect(page.getByRole("heading", { name: "Type & schedule" })).toBeVisible({
+      timeout: 20_000,
+    });
+    await page.getByRole("button", { name: "Continue" }).click();
+
+    await page.getByRole("button", { name: /Select site/ }).click();
+    await page.getByRole("button", { name: "STL-01 · St. Louis, MO" }).first().click();
+    await expect(page.getByRole("button", { name: "Continue" })).toBeEnabled();
+    await page.getByRole("button", { name: "Continue" }).click();
+
+    await page.getByRole("button", { name: /Select technician/ }).click();
+    await page
+      .getByRole("button", { name: /Adam Whyte/ })
+      .last()
+      .first()
+      .click();
+
+    const notes = page.getByPlaceholder("Contact preferences, availability, etc.");
+    await expect(notes).toHaveValue("Call before arrival");
+    await notes.fill("Gate code 4411");
+
+    await page.getByRole("button", { name: /Create/ }).click();
+
+    await expect
+      .poll(() => captured.find((c) => c.method === "PATCH"))
+      .toEqual({
+        method: "PATCH",
+        path: "/api/vendor-company-roster/55",
+        body: {
+          rowVersion: "rv-1",
+          addTechnicians: [],
+          companyFields: { notes: "Gate code 4411" },
+        },
+      });
+    expect(captured.some((c) => c.method === "POST" && c.path.endsWith("/workorders/board"))).toBe(
+      true,
+    );
+  });
+});
diff --git a/e2e/work-orders/wo-number-sh-placeholder.spec.ts b/e2e/work-orders/wo-number-sh-placeholder.spec.ts
new file mode 100644
index 00000000..f2211583
--- /dev/null
+++ b/e2e/work-orders/wo-number-sh-placeholder.spec.ts
@@ -0,0 +1,121 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
+
+const TEST_USER = {
+  token: "wo-number-sh-placeholder-e2e-token",
+  expiration: "2030-01-01T00:00:00.000Z",
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Work Order E2E Admin",
+  id: "1",
+};
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+async function hideQueryDevtools(page: Page) {
+  await page.addStyleTag({
+    content:
+      ".tsqd-parent-container { display: none !important; pointer-events: none !important; }",
+  });
+  await page.locator(".tsqd-parent-container").evaluateAll((nodes) => {
+    for (const node of nodes) {
+      node.remove();
+    }
+  });
+}
+
+const REAL_ROW = {
+  id: 1000,
+  woNumber: "12345678901",
+  workOrderType: 2,
+  siteCode: "DAL1",
+  lifecycleStatusLabel: "Scheduled",
+  scheduledDate: "2026-08-19",
+  dispatcherId: "1",
+  dispatcherName: "Pat Dispatcher",
+  pm: "HVAC",
+};
+
+async function mockBoard(page: Page, patches: unknown[]) {
+  await page.route(
+    (url) => url.pathname.startsWith("/api/"),
+    async (route) => {
+      const request = route.request();
+      const url = request.url();
+      if (request.method() !== "GET") {
+        patches.push({ url, body: request.postDataJSON() });
+        await fulfillJson(route, {}, 500);
+        return;
+      }
+      if (url.includes("workorders/board/search")) {
+        await fulfillJson(route, { items: [REAL_ROW], totalCount: 1, page: 0, pageSize: 50 });
+        return;
+      }
+      if (url.includes("workorders/board")) {
+        await fulfillJson(route, {
+          weekStart: "2026-08-17",
+          weekEnd: "2026-08-21",
+          counts: { returned: 1, total: 1 },
+          unscheduled: [],
+          scheduled: [REAL_ROW],
+        });
+        return;
+      }
+      await fulfillJson(route, { data: [], items: [] });
+    },
+  );
+}
+
+test.describe("inline WO number SH placeholder", () => {
+  test.setTimeout(60_000);
+
+  test.beforeEach(async ({ page }) => {
+    await page.clock.install({ time: new Date(FROZEN_NOW) });
+    await page.clock.resume();
+    await page.addInitScript((user) => {
+      localStorage.setItem("auth", JSON.stringify(user));
+    }, TEST_USER);
+  });
+
+  test("keeps a typed SH number on a new inline row and blocks downgrading a saved real number", async ({
+    page,
+  }) => {
+    const mutations: unknown[] = [];
+    await mockBoard(page, mutations);
+    await page.goto("/workorders");
+    await hideQueryDevtools(page);
+    await expect(page.getByRole("heading", { name: "Work Orders" })).toBeVisible({
+      timeout: 20_000,
+    });
+    await expect(page.getByText("12345678901").first()).toBeVisible();
+
+    await page
+      .getByRole("button", { name: /Add WO/ })
+      .first()
+      .click();
+    await page
+      .getByText(/^Insert WO #/)
+      .first()
+      .click();
+    const draftInput = page.getByLabel("Work order number");
+    await draftInput.fill("SH00001");
+    await draftInput.press("Enter");
+    await expect(draftInput).toHaveCount(0);
+    await expect(page.getByText("SH00001", { exact: true })).toBeVisible();
+    await expect(page.getByText(/must be 11 digits/)).toHaveCount(0);
+
+    await page.getByText("12345678901", { exact: true }).first().click();
+    const savedInput = page.getByLabel("Work order number");
+    await savedInput.fill("SH00009");
+    await savedInput.press("Enter");
+    await expect(
+      page.getByText("Cannot replace an APM work order number with an internal number"),
+    ).toBeVisible();
+    await expect(page.getByText("12345678901", { exact: true }).first()).toBeVisible();
+    expect(mutations).toEqual([]);
+  });
+});
diff --git a/e2e/work-orders/work-orders.visual.spec.ts b/e2e/work-orders/work-orders.visual.spec.ts
new file mode 100644
index 00000000..17f8d49b
--- /dev/null
+++ b/e2e/work-orders/work-orders.visual.spec.ts
@@ -0,0 +1,289 @@
+import { expect, test, type Page, type Route } from "@playwright/test";
+
+const FROZEN_NOW = "2026-08-19T15:00:00.000Z";
+const WEEK_START = "2026-08-17";
+const WEEK_END = "2026-08-21";
+
+const TEST_USER = {
+  token: "wo-visual-token",
+  expiration: "2030-01-01T00:00:00.000Z",
+  email: "admin@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Work Order Visual Admin",
+  id: "1",
+};
+
+const DISPATCHERS = [{ id: "1", name: "Pat Dispatcher" }];
+
+const LOCATIONS = [
+  {
+    id: 10,
+    name: "STL-01 · St. Louis, MO",
+    siteCode: "STL-01",
+    city: "St. Louis",
+    state: "MO",
+    code: "STL-01",
+  },
+];
+
+const VENDORS = [
+  {
+    id: 101,
+    companyName: "Gateway Plumbing",
+    contactName: "Adam Whyte",
+    tradeSpecialties: "Plumbing",
+    address: "1 Market St",
+  },
+];
+
+const scheduledRow = {
+  id: 1,
+  woNumber: "WO-501",
+  workOrderType: 2,
+  siteCode: "STL-01",
+  locationName: "St. Louis HQ",
+  locationId: 10,
+  lifecycleStatusLabel: "Scheduled",
+  scheduledDate: "2026-08-19",
+  dispatcherId: "1",
+  dispatcherName: "Pat Dispatcher",
+  pm: "HVAC",
+  vendorId: 101,
+  vendorName: "Gateway Plumbing",
+  techName: "Adam Whyte",
+  title: "Quarterly HVAC PM",
+  dueDate: "2026-08-21",
+  rowVersion: "rv-visual",
+};
+
+const unassignedRow = {
+  ...scheduledRow,
+  id: 2,
+  woNumber: "WO-502",
+  scheduledDate: null,
+  lifecycleStatusLabel: "Pending",
+  title: "Boiler leak follow-up",
+};
+
+async function fulfillJson(route: Route, body: unknown, status = 200) {
+  await route.fulfill({ status, contentType: "application/json", body: JSON.stringify(body) });
+}
+
+function isBoardList(pathname: string) {
+  return pathname.endsWith("/workorders/board") || pathname.endsWith("/api/workorders/board");
+}
+
+function isBoardSearch(pathname: string) {
+  return pathname.includes("/workorders/board/search");
+}
+
+function isBoardDetail(pathname: string) {
+  return /\/workorders\/\d+\/detail$/.test(pathname);
+}
+
+function isAccountList(pathname: string) {
+  return pathname.includes("/Account/GetAccountList");
+}
+
+async function mockWorkOrderApi(page: Page, mode: "default" | "empty" | "error" = "default") {
+  await page.clock.setFixedTime(new Date(FROZEN_NOW));
+  await page.addInitScript((user) => localStorage.setItem("auth", JSON.stringify(user)), TEST_USER);
+
+  await page.route("**/api/**", async (route) => {
+    const url = new URL(route.request().url());
+    const pathname = url.pathname;
+
+    if (!pathname.startsWith("/api/")) {
+      await route.continue();
+      return;
+    }
+
+    if (isBoardSearch(pathname)) {
+      const items = mode === "default" ? [unassignedRow] : [];
+      await fulfillJson(route, { items, totalCount: items.length, page: 0, pageSize: 50 });
+      return;
+    }
+
+    if (isBoardList(pathname)) {
+      if (mode === "error") {
+        await fulfillJson(route, { message: "Work order board unavailable" }, 500);
+        return;
+      }
+      const scheduled = mode === "empty" ? [] : [scheduledRow];
+      const unscheduled = mode === "empty" ? [] : [unassignedRow];
+      await fulfillJson(route, {
+        weekStart: WEEK_START,
+        weekEnd: WEEK_END,
+        counts: { returned: scheduled.length + unscheduled.length, total: scheduled.length + 1 },
+        unscheduled,
+        scheduled,
+      });
+      return;
+    }
+
+    if (isBoardDetail(pathname)) {
+      await fulfillJson(route, {
+        data: {
+          info: scheduledRow,
+          comments: [],
+          audit: [],
+          media: [],
+          completion: {},
+        },
+      });
+      return;
+    }
+
+    if (pathname.includes("/workorders/lookups/dispatchers")) {
+      await fulfillJson(route, { data: DISPATCHERS });
+      return;
+    }
+
+    if (pathname.includes("/Contact/GetLocations") || pathname.includes("/locations/sites")) {
+      await fulfillJson(route, { data: LOCATIONS });
+      return;
+    }
+
+    if (pathname.includes("/vendors/Dropdown") || pathname.endsWith("/vendors/dropdown")) {
+      await fulfillJson(route, { data: VENDORS });
+      return;
+    }
+
+    if (pathname.includes("/DropdownOptions/ByCategory/Problem")) {
+      await fulfillJson(route, {
+        data: [
+          { id: 1, value: "HVAC", category: "Problem" },
+          { id: 2, value: "Plumbing", category: "Problem" },
+        ],
+      });
+      return;
+    }
+
+    if (pathname.includes("/api/User")) {
+      await fulfillJson(route, { data: DISPATCHERS });
+      return;
+    }
+
+    if (isAccountList(pathname)) {
+      await fulfillJson(route, {
+        items: [
+          {
+            id: 1,
+            name: "Amazon",
+            number: "AMZ-1",
+            industry: "Retail",
+            website: "",
+            primaryContact: "",
+            phoneNumber: "",
+            owner: "",
+          },
+        ],
+        totalCount: 1,
+        page: 1,
+        pageSize: 50,
+      });
+      return;
+    }
+
+    await fulfillJson(route, { data: [] });
+  });
+}
+
+async function openWorkOrderPage(page: Page, mode: "default" | "empty" | "error" = "default") {
+  await mockWorkOrderApi(page, mode);
+  await page.goto("/workorders");
+  await page.evaluate(() => document.fonts.ready);
+  await page.addStyleTag({
+    content: `
+      *, *::before, *::after { transition: none !important; animation: none !important; }
+      .MuiDrawer-paper { transform: none !important; }
+      .Toastify__toast-container { display: none !important; }
+      .tsqd-parent-container { display: none !important; }
+    `,
+  });
+}
+
+async function expectWorkOrderPageReady(page: Page) {
+  await expect(page.getByRole("heading", { name: "Work Orders" })).toBeVisible({
+    timeout: 90_000,
+  });
+}
+
+async function expectStableScreenshot(page: Page, name: string) {
+  await page.waitForTimeout(250);
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) =>
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+      ),
+  );
+  await page.screenshot({ animations: "disabled", caret: "hide" });
+  await expect(page).toHaveScreenshot(name);
+}
+
+test.describe("Work Orders deterministic pixel regression", () => {
+  test.setTimeout(120_000);
+
+  test("list", async ({ page }) => {
+    await openWorkOrderPage(page);
+    await expectWorkOrderPageReady(page);
+    await expect(page.getByText("WO-501").first()).toBeVisible();
+    await expectStableScreenshot(page, "wo-list.png");
+  });
+
+  test("filters", async ({ page }) => {
+    await openWorkOrderPage(page);
+    await expectWorkOrderPageReady(page);
+    await page.getByRole("button", { name: "Advanced Filters" }).click();
+    await expect(page.getByRole("dialog", { name: "Advanced Filters" })).toBeVisible();
+    await expectStableScreenshot(page, "wo-filters.png");
+  });
+
+  test("new", async ({ page }) => {
+    await openWorkOrderPage(page);
+    await expectWorkOrderPageReady(page);
+    await page.getByRole("button", { name: "New WO" }).click();
+    await expect(page.getByRole("heading", { name: "Type & schedule" })).toBeVisible();
+    await expectStableScreenshot(page, "wo-new.png");
+  });
+
+  test("detail", async ({ page }) => {
+    await openWorkOrderPage(page);
+    await expectWorkOrderPageReady(page);
+    const row = page.locator("#wo-row-1");
+    await row.hover();
+    await row.getByRole("button", { name: "View details" }).click();
+    await expect(page.getByRole("heading", { name: "#WO-501" })).toBeVisible();
+    await expectStableScreenshot(page, "wo-detail.png");
+  });
+
+  test("empty", async ({ page }) => {
+    await openWorkOrderPage(page, "empty");
+    await expectWorkOrderPageReady(page);
+    await page.getByLabel("Search work orders").fill("zz");
+    await expect(page.getByText("No work orders match your search")).toBeVisible();
+    await expectStableScreenshot(page, "wo-empty.png");
+  });
+
+  test("error", async ({ page }) => {
+    await openWorkOrderPage(page, "error");
+    await expectWorkOrderPageReady(page);
+    const alert = page.getByRole("main").getByRole("alert");
+    await expect(alert).toBeVisible();
+    await expect(alert).toContainText(/server error/i);
+    await expectStableScreenshot(page, "wo-error.png");
+  });
+
+  test("mobile", async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await openWorkOrderPage(page);
+    await expectWorkOrderPageReady(page);
+    await expect(page.getByText("WO-501").first()).toBeVisible();
+    await expectStableScreenshot(page, "wo-mobile.png");
+
+    await page.getByRole("button", { name: "Toggle navigation" }).click();
+    await expect(page.getByRole("navigation", { name: "Primary navigation" })).toBeVisible();
+    await expectStableScreenshot(page, "wo-mobile-navigation.png");
+  });
+});
diff --git a/eslint-rules/no-non-boolean-jsx-and.js b/eslint-rules/no-non-boolean-jsx-and.js
new file mode 100644
index 00000000..10408424
--- /dev/null
+++ b/eslint-rules/no-non-boolean-jsx-and.js
@@ -0,0 +1,95 @@
+import ts from "typescript";
+
+/**
+ * Local type-aware rule: the left operand of `&&` in JSX must be entirely
+ * boolean.
+ *
+ * `{value && <Element />}` renders its left operand when it is falsy and
+ * non-boolean (notably `{count && <X />}` renders `0`), so the left operand
+ * must be `boolean` (or boolean literals) across the whole union. The rule
+ * asks the TypeScript checker for the type of the left operand and reports
+ * unless every union constituent is boolean-like.
+ *
+ * Type-aware by design: a selector that cannot see operand types would give
+ * false confidence rather than enforcement. If type services are unexpectedly
+ * unavailable in a governed TSX file, the rule fails closed (reports) instead
+ * of silently claiming the expression is safe.
+ */
+const booleanLikeFlags = ts.TypeFlags.Boolean | ts.TypeFlags.BooleanLiteral;
+
+function isBooleanLikeType(type) {
+  return (type.flags & booleanLikeFlags) !== 0;
+}
+
+function isEntirelyBoolean(type) {
+  if (type.isUnion()) {
+    return type.types.every((constituent) => isBooleanLikeType(constituent));
+  }
+  return isBooleanLikeType(type);
+}
+
+const transparentExpressionTypes = new Set([
+  "ChainExpression",
+  "ParenthesizedExpression",
+  "TSAsExpression",
+  "TSNonNullExpression",
+  "TSTypeAssertion",
+]);
+
+function isInRenderedPosition(node) {
+  let current = node;
+  while (current.parent) {
+    const parent = current.parent;
+    if (parent.type === "JSXExpressionContainer") {
+      return parent.parent?.type !== "JSXAttribute";
+    }
+    if (parent.type === "LogicalExpression" || transparentExpressionTypes.has(parent.type)) {
+      current = parent;
+      continue;
+    }
+    return false;
+  }
+  return false;
+}
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Require the left operand of `&&` in JSX to be entirely boolean",
+    },
+    schema: [],
+    messages: {
+      nonBooleanLeft:
+        'The left operand of `&&` in JSX must be boolean. Non-boolean falsy operands (e.g. `0`, `""`) render into the DOM; coerce with `Boolean(...)` or `!!` before `&&`.',
+      typeServicesUnavailable:
+        "Type-aware boolean-safety check is unavailable for this JSX expression. This file must be part of a TypeScript project with type information so the rule can enforce safely.",
+    },
+  },
+  create(context) {
+    const services = context.sourceCode?.parserServices ?? context.parserServices;
+
+    return {
+      LogicalExpression(node) {
+        if (node.operator !== "&&") {
+          return;
+        }
+        if (!isInRenderedPosition(node)) {
+          return;
+        }
+
+        if (!services || services.program === null) {
+          context.report({ node, messageId: "typeServicesUnavailable" });
+          return;
+        }
+
+        const leftType = services.getTypeAtLocation(node.left);
+        if (!isEntirelyBoolean(leftType)) {
+          context.report({ node: node.left, messageId: "nonBooleanLeft" });
+        }
+      },
+    };
+  },
+};
+
+export default rule;
diff --git a/eslint-rules/no-vp-error-outside-text.js b/eslint-rules/no-vp-error-outside-text.js
new file mode 100644
index 00000000..3498f5ea
--- /dev/null
+++ b/eslint-rules/no-vp-error-outside-text.js
@@ -0,0 +1,55 @@
+function containsVpErrorToken(node) {
+  if (!node || typeof node !== "object") {
+    return false;
+  }
+
+  if (node.type === "Literal" && typeof node.value === "string") {
+    return node.value.split(/\s+/u).includes("vp-error");
+  }
+
+  if (node.type === "TemplateElement") {
+    return node.value.raw.split(/\s+/u).includes("vp-error");
+  }
+
+  return Object.entries(node).some(([key, value]) => {
+    if (key === "parent") {
+      return false;
+    }
+    if (Array.isArray(value)) {
+      return value.some(containsVpErrorToken);
+    }
+    return containsVpErrorToken(value);
+  });
+}
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Require the Text component for legacy vp-error styling",
+    },
+    schema: [],
+    messages: {
+      useText:
+        'Use the Text component for the vp-error class; pair the error message with variant="error" so feedback stays accessible and consistent.',
+    },
+  },
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name?.name !== "className" || !containsVpErrorToken(node.value)) {
+          return;
+        }
+
+        const elementName = node.parent?.name;
+        if (elementName?.type === "JSXIdentifier" && elementName.name === "Text") {
+          return;
+        }
+
+        context.report({ node, messageId: "useText" });
+      },
+    };
+  },
+};
+
+export default rule;
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 00000000..ca716ef7
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,90 @@
+import js from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import pluginReactHooks from "eslint-plugin-react-hooks";
+import pluginReactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+import tseslint from "typescript-eslint";
+
+import noNonBooleanJsxAnd from "./eslint-rules/no-non-boolean-jsx-and.js";
+import noVpErrorOutsideText from "./eslint-rules/no-vp-error-outside-text.js";
+
+const localRules = {
+  rules: {
+    "no-non-boolean-jsx-and": noNonBooleanJsxAnd,
+    "no-vp-error-outside-text": noVpErrorOutsideText,
+  },
+};
+
+const legacyIgnores = [
+  "src/pages/**",
+  "src/app/store.js",
+  "src/app/slices/**",
+  "src/lib/queryClient.js",
+  "src/hooks/**/*.js",
+  "src/components/*.{js,css}",
+  "src/constants/**",
+  "src/layouts/**",
+  "src/**/*.js",
+  "src/**/*.jsx",
+];
+
+export default tseslint.config(
+  {
+    ignores: ["dist/**", "build/**", "node_modules/**", "coverage/**", ...legacyIgnores],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  eslintConfigPrettier,
+  {
+    files: [
+      "src/{api,domain,app,lib,providers,infra,config,hooks,components/auth}/**/*.{ts,tsx}",
+      "src/**/*.{ts,tsx}",
+      "vite.config.ts",
+    ],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: globals.browser,
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    plugins: {
+      "react-hooks": pluginReactHooks,
+      "react-refresh": pluginReactRefresh,
+      seahaven: localRules,
+    },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+      "react-hooks/set-state-in-effect": "off",
+      "react-hooks/exhaustive-deps": "warn",
+      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+      "@typescript-eslint/no-explicit-any": "warn",
+      "seahaven/no-non-boolean-jsx-and": "error",
+      "seahaven/no-vp-error-outside-text": "error",
+      "no-restricted-syntax": [
+        "error",
+        {
+          selector:
+            "JSXExpressionContainer > ConditionalExpression[alternate.type='Literal'][alternate.value=null]",
+          message:
+            "Use logical AND for one-sided JSX rendering instead of `condition ? element : null`.",
+        },
+        {
+          selector:
+            ":matches(JSXOpeningElement[name.name='p'], JSXOpeningElement[name.name='h1'], JSXOpeningElement[name.name='h2'], JSXOpeningElement[name.name='h3'], JSXOpeningElement[name.name='h4'], JSXOpeningElement[name.name='h5'], JSXOpeningElement[name.name='h6'])",
+          message:
+            "Use the shared Text component so typography semantics, family, tone, and feedback behavior stay consistent.",
+        },
+      ],
+    },
+  },
+  {
+    files: ["vite.config.ts", "scripts/**/*.{js,mjs}"],
+    languageOptions: {
+      globals: globals.node,
+    },
+  },
+);
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..2e7fb09f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#1c75bc" />
+    <meta name="description" content="Sea Haven - Work Orders" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+
+    <!-- Font Awesome -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+      integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+
+    <title>Sea Haven - Work Orders</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
index 38c4daef..1fe6bc3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,7 +1,7 @@
 {
   "name": "seahaven-new-app",
   "version": "0.1.0",
-  "lockfileVersion": 2,
+  "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
@@ -10,65 +10,132 @@
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@fullcalendar/daygrid": "^6.1.20",
-        "@fullcalendar/interaction": "^6.1.20",
-        "@fullcalendar/react": "^6.1.20",
-        "@fullcalendar/timegrid": "^6.1.20",
-        "@mui/icons-material": "^7.3.1",
-        "@mui/material": "^7.3.1",
-        "@reduxjs/toolkit": "^2.11.2",
-        "@tanstack/react-query": "^5.100.10",
-        "@tanstack/react-query-devtools": "^5.100.10",
+        "@fontsource/dm-sans": "^5.2.8",
+        "@fontsource/jetbrains-mono": "^5.2.8",
+        "@fontsource/montserrat": "^5.2.8",
+        "@fullcalendar/daygrid": "^6.1.21",
+        "@fullcalendar/interaction": "^6.1.21",
+        "@fullcalendar/react": "^6.1.21",
+        "@fullcalendar/timegrid": "^6.1.21",
+        "@generouted/react-router": "^1.20.2",
+        "@hookform/resolvers": "^5.4.0",
+        "@mui/icons-material": "^9.2.0",
+        "@mui/material": "^9.2.0",
+        "@sentry/react": "10.73.0",
+        "@tanstack/query-broadcast-client-experimental": "5.101.2",
+        "@tanstack/react-query": "5.101.2",
+        "@tanstack/react-query-devtools": "5.101.2",
         "@testing-library/dom": "^10.4.1",
-        "@testing-library/jest-dom": "^6.6.4",
-        "@testing-library/react": "^16.3.0",
-        "@testing-library/user-event": "^13.5.0",
-        "axios": "^1.16.0",
-        "http-proxy-middleware": "^3.0.5",
-        "react": "^19.1.1",
-        "react-dom": "^19.1.1",
-        "react-icons": "^5.5.0",
-        "react-redux": "^9.2.0",
-        "react-router-dom": "^7.9.4",
-        "react-scripts": "5.0.1",
-        "react-toastify": "^11.0.5",
-        "web-vitals": "^2.1.4"
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
+        "clsx": "^2.1.1",
+        "ky": "^2.0.2",
+        "lucide-react": "^1.24.0",
+        "react": "^19.2.7",
+        "react-dom": "^19.2.7",
+        "react-hook-form": "^7.81.0",
+        "react-icons": "^5.7.0",
+        "react-router": "^8.2.0",
+        "react-toastify": "^11.1.0",
+        "tailwind-merge": "^3.6.0",
+        "zod": "^4.4.3"
+      },
+      "devDependencies": {
+        "@commitlint/cli": "^21.2.1",
+        "@commitlint/config-conventional": "^21.2.0",
+        "@eslint/js": "^10.0.1",
+        "@playwright/test": "^1.61.1",
+        "@sentry/cli": "3.7.0",
+        "@tailwindcss/vite": "^4.3.2",
+        "@types/node": "^24.13.3",
+        "@types/react": "^19.2.17",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^6.0.3",
+        "@vitest/coverage-v8": "^4.1.10",
+        "eslint": "^10.7.0",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-react-hooks": "^7.1.1",
+        "eslint-plugin-react-refresh": "^0.5.3",
+        "globals": "^17.7.0",
+        "husky": "^9.1.7",
+        "jsdom": "^29.1.1",
+        "lint-staged": "^17.0.8",
+        "prettier": "^3.9.5",
+        "tailwindcss": "^4.3.2",
+        "typescript": "~6.0.3",
+        "typescript-eslint": "^8.63.0",
+        "vite": "^8.1.4",
+        "vitest": "^4.1.10"
+      },
+      "engines": {
+        "node": ">=22.22.1"
       }
     },
     "node_modules/@adobe/css-tools": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.3.tgz",
-      "integrity": "sha512-VQKMkwriZbaOgVCby1UDY/LDk5fIjhQicCvVPFqfe+69fWaPWydbWJ3wRt59/YzIwda1I81loas3oCoHxnqvdA=="
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.5.0.tgz",
+      "integrity": "sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==",
+      "license": "MIT"
     },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "5.1.11",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.11.tgz",
+      "integrity": "sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@csstools/css-calc": "^3.2.0",
+        "@csstools/css-color-parser": "^4.1.0",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-7.1.1.tgz",
+      "integrity": "sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.2.1",
+        "is-potential-custom-element-name": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/generational-cache": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/generational-cache/-/generational-cache-1.0.1.tgz",
+      "integrity": "sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "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==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.29.7",
         "js-tokens": "^4.0.0",
         "picocolors": "^1.1.1"
       },
@@ -77,28 +144,32 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.0.tgz",
-      "integrity": "sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.0.tgz",
-      "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.0",
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-module-transforms": "^7.27.3",
-        "@babel/helpers": "^7.27.6",
-        "@babel/parser": "^7.28.0",
-        "@babel/template": "^7.27.2",
-        "@babel/traverse": "^7.28.0",
-        "@babel/types": "^7.28.0",
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -113,54 +184,31 @@
         "url": "https://opencollective.com/babel"
       }
     },
+    "node_modules/@babel/core/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/@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==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/eslint-parser": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.28.0.tgz",
-      "integrity": "sha512-N4ntErOlKvcbTt01rr5wj3y55xnIdx1ymrfIr8C2WnM1Y9glFgWaGDEULJIazOX3XM9NRzhfJ6zZnQ1sBNWU+w==",
-      "dependencies": {
-        "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
-        "eslint-visitor-keys": "^2.1.0",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || >=14.0.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.11.0",
-        "eslint": "^7.5.0 || ^8.0.0 || ^9.0.0"
-      }
-    },
-    "node_modules/@babel/eslint-parser/node_modules/eslint-visitor-keys": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
-      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@babel/eslint-parser/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.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.0.tgz",
-      "integrity": "sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+      "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.0",
-        "@babel/types": "^7.28.0",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -169,24 +217,15 @@
         "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==",
-      "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==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.27.2",
-        "@babel/helper-validator-option": "^7.27.1",
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
         "browserslist": "^4.24.0",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
@@ -199,117 +238,44 @@
       "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.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.27.1.tgz",
-      "integrity": "sha512-QwGAmuvM17btKU5VqXfb+Giw4JcN0hjuufz3DYnpeVDvZLAObloM77bhMXiqry3Iio+Ai4phVRDwl6WU10+r5A==",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.1",
-        "@babel/helper-member-expression-to-functions": "^7.27.1",
-        "@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.27.1",
-        "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==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.27.1.tgz",
-      "integrity": "sha512-uVDC72XVf8UbrH5qQTc18Agb8emwjTiZrQE11Nv3CuBEZmVvTwwE9CBUEvHku06gQCAyYf8Nv6ja1IN+6LMbxQ==",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.1",
-        "regexpu-core": "^6.2.0",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-create-regexp-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==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/helper-define-polyfill-provider": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.5.tgz",
-      "integrity": "sha512-uJnGFcPsWQK8fvjgGP5LZUZZsYGIoPeRjSF5PGwrelYgq7Q15/Ft9NGFp1zglwgIv//W0uG4BevRuSJRyylZPg==",
-      "dependencies": {
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "debug": "^4.4.1",
-        "lodash.debounce": "^4.0.8",
-        "resolve": "^1.22.10"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
     "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==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz",
-      "integrity": "sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==",
-      "dependencies": {
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
-      },
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "license": "MIT",
       "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==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.27.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.27.3.tgz",
-      "integrity": "sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "@babel/traverse": "^7.27.3"
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -318,124 +284,55 @@
         "@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==",
-      "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==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-remap-async-to-generator": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.27.1.tgz",
-      "integrity": "sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.1",
-        "@babel/helper-wrap-function": "^7.27.1",
-        "@babel/traverse": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.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==",
-      "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==",
-      "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==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
-      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "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==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-wrap-function": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.27.1.tgz",
-      "integrity": "sha512-NFJK2sHUvrjo8wAU/nQTWU890/zB2jj0qBcCbZbbf+005cAsv6tMjXz31fBign6M5ov1o0Bllu+9nbqkfsjjJQ==",
-      "dependencies": {
-        "@babel/template": "^7.27.1",
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
-      },
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.28.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.2.tgz",
-      "integrity": "sha512-/V9771t+EgXz62aCcyofnQhGM8DQACbRhvzKFsXKC9QM+5MadF8ZmIm0crDMaz3+o0h0zXfJnd4EhbYbxsrcFw==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.2"
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz",
-      "integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.0"
+        "@babel/types": "^7.29.7"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -444,1512 +341,41 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.27.1.tgz",
-      "integrity": "sha512-QPG3C9cCVRQLxAVwmefEmwdTanECuUBMQZ/ym5kiw3XKCGA7qkuQLcjWWHcrD/GKbn/WmJwaezfuuAOcyKlRPA==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/traverse": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.27.1.tgz",
-      "integrity": "sha512-qNeq3bCKnGgLkEXUuFry6dPlGfCdQNZbn7yUAPCInwAJHMU7THJfrBSozkcWq5sNM6RcF3S8XyQL2A52KNR9IA==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.27.1.tgz",
-      "integrity": "sha512-g4L7OYun04N1WyqMNjldFwlfPCLVkgB54A/YCXICZYBsvJJE3kByKv9c9+R/nAfmIfjl2rKYLNyMHboYbZaWaA==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.27.1.tgz",
-      "integrity": "sha512-oO02gcONcD5O1iTLi/6frMJBIwWEHceWGSGqrpCmEL8nogiS6J9PBlE48CaK20/Jx1LuRml9aDftLgdjXT8+Cw==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
-        "@babel/plugin-transform-optional-chaining": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.13.0"
-      }
-    },
-    "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.27.1.tgz",
-      "integrity": "sha512-6BpaYGDavZqkI6yT+KSPdpZFfpnd68UKXbcjI9pJ13pvHhPrCKWOOLp+ysvMeA+DxnhuPpgIaRpxRxo5A9t5jw==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/traverse": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.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.",
-      "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-decorators": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.28.0.tgz",
-      "integrity": "sha512-zOiZqvANjWDUaUS9xMxbMcK/Zccztbe/6ikvUXaG9nsPH3w6qh5UaPGAnirI/WhIbZ8m3OHU0ReyPrknG+ZKeg==",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/plugin-syntax-decorators": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz",
-      "integrity": "sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-proposal-numeric-separator": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz",
-      "integrity": "sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-proposal-optional-chaining": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
-      "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-proposal-private-methods": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
-      "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.",
-      "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-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-async-generators": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
-      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-bigint": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
-      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.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==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.12.13"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-class-static-block": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
-      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-decorators": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.27.1.tgz",
-      "integrity": "sha512-YMq8Z87Lhl8EGkmb0MwYkt36QnxC+fzCgrl66ereamPlYToRpIk5nUjKUY3QKLWq8mwUB1BgbeXcTJhZOCDg5A==",
-      "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-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==",
-      "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==",
-      "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-attributes": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.27.1.tgz",
-      "integrity": "sha512-oFT0FrKHgF53f4vOsZGi2Hh3I35PfSmVs4IBFLFj4dnafP+hIWDLg3VyKmUHfLoLHlyxY4C7DGtmHuJgn+IGww==",
-      "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-meta": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
-      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-json-strings": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
-      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.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==",
-      "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-logical-assignment-operators": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
-      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-numeric-separator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
-      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      },
-      "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==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
-      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-optional-chaining": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
-      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-private-property-in-object": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
-      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-top-level-await": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
-      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz",
-      "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
-      "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-unicode-sets-regex": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
-      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.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==",
-      "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-async-generator-functions": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.28.0.tgz",
-      "integrity": "sha512-BEOdvX4+M765icNPZeidyADIvQ1m1gmunXufXxvRESy/jNNyfovIqUyE7MVgGBjWktCoJlzvFA1To2O4ymIO3Q==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-remap-async-to-generator": "^7.27.1",
-        "@babel/traverse": "^7.28.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.27.1.tgz",
-      "integrity": "sha512-NREkZsZVJS4xmTr8qzE5y8AfIPqsdQfRuUiLRTEzb7Qii8iFWCyDKaUV2c0rCuh4ljDZ98ALHP/PetiBV2nddA==",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-remap-async-to-generator": "^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==",
-      "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.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.28.0.tgz",
-      "integrity": "sha512-gKKnwjpdx5sER/wl0WN0efUBFzF/56YZO0RJrSYP4CljXnP31ByY7fol89AzomdlLNzI36AvOTmYHsnZTCkq8Q==",
-      "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-class-properties": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.27.1.tgz",
-      "integrity": "sha512-D0VcalChDMtuRvJIu3U/fwWjf8ZMykz5iZsg77Nuj821vCKI3zCyRLwRdWbsuJ/uRwZhZ002QtCqIkwC/ZkvbA==",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^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-class-static-block": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.27.1.tgz",
-      "integrity": "sha512-s734HmYU78MVzZ++joYM+NkJusItbdRcbm+AGRgJCt3iA+yux0QpD9cBVdz3tKyrjVYWRl7j0mHSmv4lhV0aoA==",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.12.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.28.0.tgz",
-      "integrity": "sha512-IjM1IoJNw72AZFlj33Cu8X0q2XK/6AaVC3jQu+cgQ5lThWD5ajnuUAml80dqRmOhmPkTH8uAwnpMu9Rvj0LTRA==",
-      "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.0"
-      },
-      "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==",
-      "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.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.28.0.tgz",
-      "integrity": "sha512-v1nrSMBiKcodhsyJ4Gf+Z0U/yawmJDBOTpEB3mcQY52r9RIyPneGyAS/yM6seP/8I+mWI3elOMtT5dB8GJVs+A==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/traverse": "^7.28.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-dotall-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.27.1.tgz",
-      "integrity": "sha512-gEbkDVGRvjj7+T1ivxrfgygpT7GUd4vmODtYpbs0gZATdkX8/iSnOtZSxiZnsgm1YjTgjI6VKBGSJJevkrclzw==",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^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-duplicate-keys": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.27.1.tgz",
-      "integrity": "sha512-MTyJk98sHvSs+cvZ4nOauwTTG1JeonDjSGvGGUNHreGQns+Mpt6WX/dVzWBHgg+dYZhkC4X+zTDfkTU+Vy9y7Q==",
-      "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-duplicate-named-capturing-groups-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.27.1.tgz",
-      "integrity": "sha512-hkGcueTEzuhB30B3eJCbCYeCaaEQOmQR0AdvzpD4LoN0GXMWzzGSuRrxR2xTnCrvNbVwK9N6/jQ92GSLfiZWoQ==",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-dynamic-import": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.27.1.tgz",
-      "integrity": "sha512-MHzkWQcEmjzzVW9j2q8LGjwGWpG2mjwaaB0BNQwst3FIjqsg8Ct/mIZlvSPJvfi9y2AC8mi/ktxbFVL9pZ1I4A==",
-      "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-explicit-resource-management": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-explicit-resource-management/-/plugin-transform-explicit-resource-management-7.28.0.tgz",
-      "integrity": "sha512-K8nhUcn3f6iB+P3gwCv/no7OdzOZQcKchW6N389V6PD8NUWKZHzndOd9sPDVbMoBsbmjMqlB4L9fm+fEFNVlwQ==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/plugin-transform-destructuring": "^7.28.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.27.1.tgz",
-      "integrity": "sha512-uspvXnhHvGKf2r4VVtBpeFnuDWsJLQ6MF6lGJLC89jBR1uoVeqM416AZtTuhTezOfgHicpJQmoD5YUakO/YmXQ==",
-      "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-export-namespace-from": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.27.1.tgz",
-      "integrity": "sha512-tQvHWSZ3/jH2xuq/vZDy0jNn+ZdXJeM8gHvX4lnJmsc3+50yPlWdZXIc5ay+umX+2/tJIqHqiEqcJvxlmIvRvQ==",
-      "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-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==",
-      "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==",
-      "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==",
-      "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-json-strings": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.27.1.tgz",
-      "integrity": "sha512-6WVLVJiTjqcQauBhn1LkICsR2H+zm62I3h9faTDKt1qP4jn2o72tSvqMwtGFKGTpojce0gJs+76eZ2uCHRZh0Q==",
-      "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-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==",
-      "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-logical-assignment-operators": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.27.1.tgz",
-      "integrity": "sha512-SJvDs5dXxiae4FbSL1aBJlG4wvl594N6YEVVn9e3JGulwioy6z3oPjx/sQBO3Y4NwUu5HNix6KJ3wBZoewcdbw==",
-      "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==",
-      "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-amd": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.27.1.tgz",
-      "integrity": "sha512-iCsytMg/N9/oFq6n+gFTvUYDZQOMK5kEdeYxmxt91fcJGycfxVP9CnrxoliM0oumFERba2i8ZtwRUCMhvP1LnA==",
-      "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-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==",
-      "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-modules-systemjs": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.27.1.tgz",
-      "integrity": "sha512-w5N1XzsRbc0PQStASMksmUeqECuzKuTJer7kFagK8AXgpCMkeDMO5S+aaFb7A51ZYDF7XI34qsTX+fkHiIm5yA==",
-      "dependencies": {
-        "@babel/helper-module-transforms": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-validator-identifier": "^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-modules-umd": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.27.1.tgz",
-      "integrity": "sha512-iQBE/xC5BV1OxJbp6WG7jq9IWiD+xxlZhLrdwpPkTX3ydmXdvoCpyfJN7acaIBZaOqTfr76pgzqBJflNbeRK+w==",
-      "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-named-capturing-groups-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.27.1.tgz",
-      "integrity": "sha512-SstR5JYy8ddZvD6MhV0tM/j16Qds4mIpJTOd1Yu9J9pJjH93bxHECF7pgtc28XvkzTD6Pxcm/0Z73Hvk7kb3Ng==",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-new-target": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.27.1.tgz",
-      "integrity": "sha512-f6PiYeqXQ05lYq3TIfIDu/MtliKUbNwkGApPUvyo6+tc7uaR4cPjPe7DFPr15Uyycg2lZU6btZ575CuQoYh7MQ==",
-      "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-nullish-coalescing-operator": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.27.1.tgz",
-      "integrity": "sha512-aGZh6xMo6q9vq1JGcw58lZ1Z0+i0xB2x0XaauNIUXd6O1xXc3RwoWEBlsTQrY4KQ9Jf0s5rgD6SiNkaUdJegTA==",
-      "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-numeric-separator": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.27.1.tgz",
-      "integrity": "sha512-fdPKAcujuvEChxDBJ5c+0BTaS6revLV7CJL08e4m3de8qJfNIuCc2nc7XJYOjBoTMJeqSmwXJ0ypE14RCjLwaw==",
-      "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-object-rest-spread": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.28.0.tgz",
-      "integrity": "sha512-9VNGikXxzu5eCiQjdE4IZn8sb9q7Xsk5EXLDBKUYg1e/Tve8/05+KJEtcxGxAgCY5t/BpKQM+JEL/yT4tvgiUA==",
-      "dependencies": {
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/plugin-transform-destructuring": "^7.28.0",
-        "@babel/plugin-transform-parameters": "^7.27.7",
-        "@babel/traverse": "^7.28.0"
-      },
-      "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==",
-      "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-optional-catch-binding": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.27.1.tgz",
-      "integrity": "sha512-txEAEKzYrHEX4xSZN4kJ+OfKXFVSWKB2ZxM9dpcE3wT7smwkNmXo5ORRlVzMVdJbD+Q8ILTgSD7959uj+3Dm3Q==",
-      "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-optional-chaining": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.27.1.tgz",
-      "integrity": "sha512-BQmKPPIuc8EkZgNKsv0X4bPmOoayeu4F1YCwx2/CfmDSXDbp7GnzlUH+/ul5VGfRg1AoFPsrIThlEBj2xb4CAg==",
-      "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-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==",
-      "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-private-methods": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.27.1.tgz",
-      "integrity": "sha512-10FVt+X55AjRAYI9BrdISN9/AQWHqldOeZDUoLyif1Kn05a56xVBXb8ZouL8pZ9jem8QpXaOt8TS7RHUIS+GPA==",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^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-private-property-in-object": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.27.1.tgz",
-      "integrity": "sha512-5J+IhqTi1XPa0DXF83jYOaARrX+41gOewWbkPyjMNRDqgOCqdffGh8L3f/Ek5utaEBZExjSAzcyjmV9SSAWObQ==",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.1",
-        "@babel/helper-create-class-features-plugin": "^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-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==",
-      "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-constant-elements": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.27.1.tgz",
-      "integrity": "sha512-edoidOjl/ZxvYo4lSBOQGDSyToYVkTAwyVoa2tkuYTSmjrB1+uAedoL5iROVLXkxH+vRgA7uP4tMg2pUJpZ3Ug==",
-      "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==",
-      "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==",
-      "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-react-jsx-development": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.27.1.tgz",
-      "integrity": "sha512-ykDdF5yI4f1WrAolLqeF3hmYU12j9ntLQl/AOG1HAS21jxyg1Q0/J/tpREuYLfatGdGmXp/3yS0ZA76kOlVq9Q==",
-      "dependencies": {
-        "@babel/plugin-transform-react-jsx": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-react-pure-annotations": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.27.1.tgz",
-      "integrity": "sha512-JfuinvDOsD9FVMTHpzA/pBLisxpv1aSf+OIV8lgH3MuWrks19R27e6a6DipIg4aX1Zm9Wpb04p8wljfKrVSnPA==",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^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-regenerator": {
-      "version": "7.28.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.28.1.tgz",
-      "integrity": "sha512-P0QiV/taaa3kXpLY+sXla5zec4E+4t4Aqc9ggHlfZ7a2cp8/x/Gv08jfwEtn9gnnYIMvHx6aoOZ8XJL8eU71Dg==",
-      "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-regexp-modifiers": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.27.1.tgz",
-      "integrity": "sha512-TtEciroaiODtXvLZv4rmfMhkCv8jx3wgKpL68PuiPh2M4fvz5jhsA7697N1gMvkvr/JTF13DrFYyEbY9U7cVPA==",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-reserved-words": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.27.1.tgz",
-      "integrity": "sha512-V2ABPHIJX4kC7HegLkYoDpfg9PVmuWy/i6vUM5eGK22bx4YVFD3M5F0QQnWQoDs6AGsUWTVOopBiMFQgHaSkVw==",
-      "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-runtime": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.28.0.tgz",
-      "integrity": "sha512-dGopk9nZrtCs2+nfIem25UuHyt5moSJamArzIoh9/vezUQPmYDOzjaHDCkAzuGJibCIkPup8rMT2+wYB6S73cA==",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "babel-plugin-polyfill-corejs2": "^0.4.14",
-        "babel-plugin-polyfill-corejs3": "^0.13.0",
-        "babel-plugin-polyfill-regenerator": "^0.6.5",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "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==",
-      "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==",
-      "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-sticky-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.27.1.tgz",
-      "integrity": "sha512-lhInBO5bi/Kowe2/aLdBAawijx+q1pQzicSgnkB6dUPc1+RC8QmJHKf2OjvU+NZWitguJHEaEmbV6VWEouT58g==",
-      "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-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==",
-      "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-typeof-symbol": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.27.1.tgz",
-      "integrity": "sha512-RiSILC+nRJM7FY5srIyc4/fGIwUhyDuuBSdWn4y6yT6gm652DpCHZjIipgn6B7MQ1ITOUnAKWixEUjQRIBIcLw==",
-      "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-typescript": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.28.0.tgz",
-      "integrity": "sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.27.3",
-        "@babel/helper-create-class-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
-        "@babel/plugin-syntax-typescript": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-unicode-escapes": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.27.1.tgz",
-      "integrity": "sha512-Ysg4v6AmF26k9vpfFuTZg8HRfVWzsh1kVfowA23y9j/Gu6dOuahdUVhkLqpObp3JIv27MLSii6noRnuKN8H0Mg==",
-      "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-unicode-property-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.27.1.tgz",
-      "integrity": "sha512-uW20S39PnaTImxp39O5qFlHLS9LJEmANjMG7SxIhap8rCHqu0Ik+tLEPX5DKmHn6CsWQ7j3lix2tFOa5YtL12Q==",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^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-unicode-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.27.1.tgz",
-      "integrity": "sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw==",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^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-unicode-sets-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.27.1.tgz",
-      "integrity": "sha512-EtkOujbc4cgvb0mlpQefi4NTPBzhSIevblFevACNLUspmrALgmEBdL/XfnyyITfd8fKBZrZys92zOWcik7j9Tw==",
-      "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/preset-env": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.28.0.tgz",
-      "integrity": "sha512-VmaxeGOwuDqzLl5JUkIRM1X2Qu2uKGxHEQWh+cvvbl7JuJRgKGJSfsEF/bUaxFhJl/XAyxBe7q7qSuTbKFuCyg==",
-      "dependencies": {
-        "@babel/compat-data": "^7.28.0",
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-validator-option": "^7.27.1",
-        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.27.1",
-        "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.27.1",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.27.1",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.27.1",
-        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.27.1",
-        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
-        "@babel/plugin-syntax-import-assertions": "^7.27.1",
-        "@babel/plugin-syntax-import-attributes": "^7.27.1",
-        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
-        "@babel/plugin-transform-arrow-functions": "^7.27.1",
-        "@babel/plugin-transform-async-generator-functions": "^7.28.0",
-        "@babel/plugin-transform-async-to-generator": "^7.27.1",
-        "@babel/plugin-transform-block-scoped-functions": "^7.27.1",
-        "@babel/plugin-transform-block-scoping": "^7.28.0",
-        "@babel/plugin-transform-class-properties": "^7.27.1",
-        "@babel/plugin-transform-class-static-block": "^7.27.1",
-        "@babel/plugin-transform-classes": "^7.28.0",
-        "@babel/plugin-transform-computed-properties": "^7.27.1",
-        "@babel/plugin-transform-destructuring": "^7.28.0",
-        "@babel/plugin-transform-dotall-regex": "^7.27.1",
-        "@babel/plugin-transform-duplicate-keys": "^7.27.1",
-        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.27.1",
-        "@babel/plugin-transform-dynamic-import": "^7.27.1",
-        "@babel/plugin-transform-explicit-resource-management": "^7.28.0",
-        "@babel/plugin-transform-exponentiation-operator": "^7.27.1",
-        "@babel/plugin-transform-export-namespace-from": "^7.27.1",
-        "@babel/plugin-transform-for-of": "^7.27.1",
-        "@babel/plugin-transform-function-name": "^7.27.1",
-        "@babel/plugin-transform-json-strings": "^7.27.1",
-        "@babel/plugin-transform-literals": "^7.27.1",
-        "@babel/plugin-transform-logical-assignment-operators": "^7.27.1",
-        "@babel/plugin-transform-member-expression-literals": "^7.27.1",
-        "@babel/plugin-transform-modules-amd": "^7.27.1",
-        "@babel/plugin-transform-modules-commonjs": "^7.27.1",
-        "@babel/plugin-transform-modules-systemjs": "^7.27.1",
-        "@babel/plugin-transform-modules-umd": "^7.27.1",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.27.1",
-        "@babel/plugin-transform-new-target": "^7.27.1",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
-        "@babel/plugin-transform-numeric-separator": "^7.27.1",
-        "@babel/plugin-transform-object-rest-spread": "^7.28.0",
-        "@babel/plugin-transform-object-super": "^7.27.1",
-        "@babel/plugin-transform-optional-catch-binding": "^7.27.1",
-        "@babel/plugin-transform-optional-chaining": "^7.27.1",
-        "@babel/plugin-transform-parameters": "^7.27.7",
-        "@babel/plugin-transform-private-methods": "^7.27.1",
-        "@babel/plugin-transform-private-property-in-object": "^7.27.1",
-        "@babel/plugin-transform-property-literals": "^7.27.1",
-        "@babel/plugin-transform-regenerator": "^7.28.0",
-        "@babel/plugin-transform-regexp-modifiers": "^7.27.1",
-        "@babel/plugin-transform-reserved-words": "^7.27.1",
-        "@babel/plugin-transform-shorthand-properties": "^7.27.1",
-        "@babel/plugin-transform-spread": "^7.27.1",
-        "@babel/plugin-transform-sticky-regex": "^7.27.1",
-        "@babel/plugin-transform-template-literals": "^7.27.1",
-        "@babel/plugin-transform-typeof-symbol": "^7.27.1",
-        "@babel/plugin-transform-unicode-escapes": "^7.27.1",
-        "@babel/plugin-transform-unicode-property-regex": "^7.27.1",
-        "@babel/plugin-transform-unicode-regex": "^7.27.1",
-        "@babel/plugin-transform-unicode-sets-regex": "^7.27.1",
-        "@babel/preset-modules": "0.1.6-no-external-plugins",
-        "babel-plugin-polyfill-corejs2": "^0.4.14",
-        "babel-plugin-polyfill-corejs3": "^0.13.0",
-        "babel-plugin-polyfill-regenerator": "^0.6.5",
-        "core-js-compat": "^3.43.0",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/preset-env/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/preset-modules": {
-      "version": "0.1.6-no-external-plugins",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
-      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/types": "^7.4.4",
-        "esutils": "^2.0.2"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
-      }
-    },
-    "node_modules/@babel/preset-react": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.27.1.tgz",
-      "integrity": "sha512-oJHWh2gLhU9dW9HHr42q0cI0/iHHXTLGe39qvpAZZzagHy0MzYLCnCVV0symeRvzmjHyVU7mw2K06E6u/JwbhA==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-validator-option": "^7.27.1",
-        "@babel/plugin-transform-react-display-name": "^7.27.1",
-        "@babel/plugin-transform-react-jsx": "^7.27.1",
-        "@babel/plugin-transform-react-jsx-development": "^7.27.1",
-        "@babel/plugin-transform-react-pure-annotations": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/preset-typescript": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.27.1.tgz",
-      "integrity": "sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-validator-option": "^7.27.1",
-        "@babel/plugin-syntax-jsx": "^7.27.1",
-        "@babel/plugin-transform-modules-commonjs": "^7.27.1",
-        "@babel/plugin-transform-typescript": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/runtime": {
-      "version": "7.28.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.2.tgz",
-      "integrity": "sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "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==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/parser": "^7.27.2",
-        "@babel/types": "^7.27.1"
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.0.tgz",
-      "integrity": "sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+      "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.0",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.0",
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.0",
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -1957,296 +383,505 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.2",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.2.tgz",
-      "integrity": "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==",
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1"
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@bcoe/v8-coverage": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
-      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
-    },
-    "node_modules/@csstools/normalize.css": {
-      "version": "12.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.1.1.tgz",
-      "integrity": "sha512-YAYeJ+Xqh7fUou1d1j9XHl44BmsuThiTr4iNrgCQ3J27IbhXsxXDGZ1cXv8Qvs99d4rBbLiSKy3+WZiet32PcQ=="
-    },
-    "node_modules/@csstools/postcss-cascade-layers": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.1.1.tgz",
-      "integrity": "sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==",
-      "dependencies": {
-        "@csstools/selector-specificity": "^2.0.2",
-        "postcss-selector-parser": "^6.0.10"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/@csstools/postcss-color-function": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-1.1.1.tgz",
-      "integrity": "sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==",
-      "dependencies": {
-        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/@csstools/postcss-font-format-keywords": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.1.tgz",
-      "integrity": "sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/@csstools/postcss-hwb-function": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.2.tgz",
-      "integrity": "sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
+      "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "postcss-value-parser": "^4.2.0"
+        "css-tree": "^3.0.0"
       },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
+      "bin": {
+        "specificity": "bin/cli.js"
       }
     },
-    "node_modules/@csstools/postcss-ic-unit": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.1.tgz",
-      "integrity": "sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==",
+    "node_modules/@commitlint/cli": {
+      "version": "21.2.1",
+      "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-21.2.1.tgz",
+      "integrity": "sha512-blsZGe29hJ72VGEFVl72IVYX+1vsfINpjA9yWQA6i7OKD/McGEOXg08sKIRKjFk4JvzhV/9n0l3i6NooPLTNfg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
-        "postcss-value-parser": "^4.2.0"
+        "@commitlint/config-conventional": "^21.2.0",
+        "@commitlint/format": "^21.2.0",
+        "@commitlint/lint": "^21.2.0",
+        "@commitlint/load": "^21.2.0",
+        "@commitlint/read": "^21.2.1",
+        "@commitlint/types": "^21.2.0",
+        "tinyexec": "^1.0.0",
+        "yargs": "^18.0.0"
+      },
+      "bin": {
+        "commitlint": "cli.js"
       },
       "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@csstools/postcss-is-pseudo-class": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.7.tgz",
-      "integrity": "sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==",
+    "node_modules/@commitlint/config-conventional": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/config-conventional/-/config-conventional-21.2.0.tgz",
+      "integrity": "sha512-Qf8WRDVcyVd14if6VTWenebxFbKnVnbzPUJjlzjkyJGeHK2xCGd63Dr1XZzj0plXKQb9P0BfOxoc1HVeCo2BWQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@csstools/selector-specificity": "^2.0.0",
-        "postcss-selector-parser": "^6.0.10"
+        "@commitlint/types": "^21.2.0",
+        "conventional-changelog-conventionalcommits": "^10.0.0"
       },
       "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@csstools/postcss-nested-calc": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz",
-      "integrity": "sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==",
+    "node_modules/@commitlint/config-validator": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/config-validator/-/config-validator-21.2.0.tgz",
+      "integrity": "sha512-t7AzNHAKeIdo/3NRGwzpufKHsKkPHmFs/56N2Fnsh0/r0rGtnQzTxk6vnFgjaGr4hdSQKNB50/KAhR9Yk4LJKA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "postcss-value-parser": "^4.2.0"
+        "@commitlint/types": "^21.2.0",
+        "ajv": "^8.11.0"
       },
       "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@csstools/postcss-normalize-display-values": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.1.tgz",
-      "integrity": "sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==",
+    "node_modules/@commitlint/ensure": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/ensure/-/ensure-21.2.0.tgz",
+      "integrity": "sha512-76IF9vDNS13lAzEEik9eKwzt8f9hYhWiwVXZ2AnyLCz5/f511FsEQ3pw1X3/zSQpdRLQU7i5qDMVKyXi1GWjSg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "postcss-value-parser": "^4.2.0"
+        "@commitlint/types": "^21.2.0",
+        "es-toolkit": "^1.46.0"
       },
       "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@csstools/postcss-oklab-function": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.1.tgz",
-      "integrity": "sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==",
+    "node_modules/@commitlint/execute-rule": {
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@commitlint/execute-rule/-/execute-rule-21.0.1.tgz",
+      "integrity": "sha512-RifH+FmImozKBE6mozhF4K3r2RRKP7SMi/Q/zLCmExtp5e05lhHOUYqGBlFBAGNHaZxU/WYw1XuugYK9jQzqnA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/@commitlint/format": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/format/-/format-21.2.0.tgz",
+      "integrity": "sha512-c4q64xaav2U83t7k7RyzJerBZurPer7FxUOY0RL5L/6CZijZ7K+s6HIBGIghj0ey1P2+seRX0J9XQYtDued6tg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
-        "postcss-value-parser": "^4.2.0"
+        "@commitlint/types": "^21.2.0",
+        "picocolors": "^1.1.1"
       },
       "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@csstools/postcss-progressive-custom-properties": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-1.3.0.tgz",
-      "integrity": "sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==",
+    "node_modules/@commitlint/is-ignored": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/is-ignored/-/is-ignored-21.2.0.tgz",
+      "integrity": "sha512-4/eB0vBN7L88O/oC4ajAEqi7j2ZfNgxl/+11RfAV9YosejZgDXhY2C9VcHnHJhOzPLoSy5P3Mg/46kqeyJfXKw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "postcss-value-parser": "^4.2.0"
+        "@commitlint/types": "^21.2.0",
+        "semver": "^7.6.0"
       },
       "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.3"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@csstools/postcss-stepped-value-functions": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-1.0.1.tgz",
-      "integrity": "sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==",
+    "node_modules/@commitlint/lint": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/lint/-/lint-21.2.0.tgz",
+      "integrity": "sha512-ceO5dp9pLjEZ6y6qbq/uXWXDPykqqlTsyzoQ0NzecpisSJhK3kTy9qzQoPeJuWG/IMNdV1lO0RgmzqoAlSi1uw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "postcss-value-parser": "^4.2.0"
+        "@commitlint/is-ignored": "^21.2.0",
+        "@commitlint/parse": "^21.2.0",
+        "@commitlint/rules": "^21.2.0",
+        "@commitlint/types": "^21.2.0"
       },
       "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@csstools/postcss-text-decoration-shorthand": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz",
-      "integrity": "sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==",
+    "node_modules/@commitlint/load": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-21.2.0.tgz",
+      "integrity": "sha512-RjlzWQqruRwIenJEfZtq7kG97co97nKoHpflE5YnF61tDLXxHPrdWImgzw6VL6MlFyaOcVlk74eBV8ZQmc3oIA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "postcss-value-parser": "^4.2.0"
+        "@commitlint/config-validator": "^21.2.0",
+        "@commitlint/execute-rule": "^21.0.1",
+        "@commitlint/resolve-extends": "^21.2.0",
+        "@commitlint/types": "^21.2.0",
+        "cosmiconfig": "^9.0.1",
+        "cosmiconfig-typescript-loader": "^6.1.0",
+        "es-toolkit": "^1.46.0",
+        "is-plain-obj": "^4.1.0",
+        "picocolors": "^1.1.1"
       },
       "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@csstools/postcss-trigonometric-functions": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-1.0.2.tgz",
-      "integrity": "sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==",
+    "node_modules/@commitlint/message": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/message/-/message-21.2.0.tgz",
+      "integrity": "sha512-YxGoiXD/HXNXLJPrQwE5poXa+XH0CBEm+mdvbHQP0g6MV/dmJyUFCzPNzZbxL93GvZ70TmtTK0Z0/IBpAqHv8g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/@commitlint/parse": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/parse/-/parse-21.2.0.tgz",
+      "integrity": "sha512-QHWxG4d0PLTF634/AdyZ0MQS+CLn5YOuJlCFhMMlSGKFxzYGUetkHBj18xgBD+6fVzUrA2lrCdi/vlS2f/oYXg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "postcss-value-parser": "^4.2.0"
+        "@commitlint/types": "^21.2.0",
+        "conventional-changelog-angular": "^9.0.0",
+        "conventional-commits-parser": "^7.0.0"
       },
       "engines": {
-        "node": "^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@csstools/postcss-unset-value": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz",
-      "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==",
+    "node_modules/@commitlint/read": {
+      "version": "21.2.1",
+      "resolved": "https://registry.npmjs.org/@commitlint/read/-/read-21.2.1.tgz",
+      "integrity": "sha512-hUW7EJQnNTL0vPOmVMNK4CrnrNBN0nN+JJHReFkdHO5y4iyHeEmTBwuC15OCqUTjxWo7idnH1LftfpWVIaPWIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@commitlint/top-level": "^21.2.0",
+        "@commitlint/types": "^21.2.0",
+        "@conventional-changelog/git-client": "^3.0.0",
+        "tinyexec": "^1.0.0"
+      },
       "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
+        "node": ">=22.12.0"
       }
     },
-    "node_modules/@csstools/selector-specificity": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz",
-      "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
-      "engines": {
-        "node": "^14 || ^16 || >=18"
+    "node_modules/@commitlint/resolve-extends": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/resolve-extends/-/resolve-extends-21.2.0.tgz",
+      "integrity": "sha512-4O/1j51+79Wth9s/MGxt/5gs0XYLDgNlYpltQfhAvLE0itusLKs9zruxbiNg1oOkmkb9L9L4USYGjEj7n87NxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@commitlint/config-validator": "^21.2.0",
+        "@commitlint/types": "^21.2.0",
+        "es-toolkit": "^1.46.0",
+        "global-directory": "^5.0.0",
+        "resolve-from": "^5.0.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/@commitlint/rules": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/rules/-/rules-21.2.0.tgz",
+      "integrity": "sha512-C2yXMNpiB8ETZKfx5JD8+ExgF8vTU1VQMKPSUUYwqKpw9oJWQBrlXBpdU038mj2WPjof7o9UzFpmTyBeGMZwZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@commitlint/ensure": "^21.2.0",
+        "@commitlint/message": "^21.2.0",
+        "@commitlint/to-lines": "^21.0.1",
+        "@commitlint/types": "^21.2.0"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/@commitlint/to-lines": {
+      "version": "21.0.1",
+      "resolved": "https://registry.npmjs.org/@commitlint/to-lines/-/to-lines-21.0.1.tgz",
+      "integrity": "sha512-bd1BFII7p1EQZre9Kaj+kKaMFP3cFCdt21K7DItVux9XP5WjLgJ0/Uy1pJJh9aPwVJ6SKg62PxqlZaHI8hQAXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/@commitlint/top-level": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/top-level/-/top-level-21.2.0.tgz",
+      "integrity": "sha512-Y5gmQ+KxzqCrBFJfLvFEPvvwD3LDiNZoTT2yeFBm96M8qhmqSzQc5DvX3rheAaAMjyIvMXOCLS/mWfdpONsjyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/@commitlint/types": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@commitlint/types/-/types-21.2.0.tgz",
+      "integrity": "sha512-7zVFCDB2reMvJH5dmbKnOQPjZEvjdJTH8jc0U/PIPU1r3/+vf5pD1HlfitV2MWsWXrvu7u39iY1lyLUPOaN0Gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "conventional-commits-parser": "^7.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/@conventional-changelog/git-client": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@conventional-changelog/git-client/-/git-client-3.1.0.tgz",
+      "integrity": "sha512-Tqa/gHco2WJWa740NRjOrfKVvzIqxkZpecb8bemaQ8sKM5PXb1UK4uTyTb/1wIqNuOVaDOFxyBdhTIQZn6gdjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@simple-libs/child-process-utils": "^2.0.0",
+        "@simple-libs/stream-utils": "^2.0.0",
+        "semver": "^7.5.2"
+      },
+      "engines": {
+        "node": ">=22"
       },
       "peerDependencies": {
-        "postcss-selector-parser": "^6.0.10"
+        "conventional-commits-filter": "^6.0.1",
+        "conventional-commits-parser": "^7.0.1"
+      },
+      "peerDependenciesMeta": {
+        "conventional-commits-filter": {
+          "optional": true
+        },
+        "conventional-commits-parser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@conventional-changelog/template": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@conventional-changelog/template/-/template-1.2.1.tgz",
+      "integrity": "sha512-TzlTVpKPjaqW6qOYjQcYUDuGsLCNsvFHVBXkYGTAnf5V37jCWrE5haKNXzz0WZUtVHjrpV76L1buANjwXMfT8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=22"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.0.tgz",
+      "integrity": "sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.2.1.tgz",
+      "integrity": "sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.1.9.tgz",
+      "integrity": "sha512-paQcIaOO53Rk5+YrBaBjm/SgrV4INImjo2BT1DtQRYr+XeTRbeAYlS+jxXp9drqvKmtFnWRJKIalDLhZZDu42A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.1.0",
+        "@csstools/css-calc": "^3.2.1"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.6.tgz",
+      "integrity": "sha512-TcJCWFbXLPpJYq6z7bfOyjWYJDiDg2/I4gyUC9pqPNqHFRIey0EB0q0L5cSnQDfWJg8Jd6VadakxdIez/3zkqQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.2.tgz",
+      "integrity": "sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.2.tgz",
+      "integrity": "sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
       }
     },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.13.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
       "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/runtime": "^7.18.3",
@@ -2261,23 +896,11 @@
         "stylis": "4.2.0"
       }
     },
-    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
-    },
-    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/@emotion/cache": {
       "version": "11.14.0",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
       "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
       "dependencies": {
         "@emotion/memoize": "^0.9.0",
         "@emotion/sheet": "^1.4.0",
@@ -2289,12 +912,14 @@
     "node_modules/@emotion/hash": {
       "version": "0.9.2",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
-      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g=="
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
     },
     "node_modules/@emotion/is-prop-valid": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
-      "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
+      "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
+      "license": "MIT",
       "dependencies": {
         "@emotion/memoize": "^0.9.0"
       }
@@ -2302,12 +927,14 @@
     "node_modules/@emotion/memoize": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
-      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
     },
     "node_modules/@emotion/react": {
       "version": "11.14.0",
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
       "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -2331,6 +958,7 @@
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
       "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
       "dependencies": {
         "@emotion/hash": "^0.9.2",
         "@emotion/memoize": "^0.9.0",
@@ -2342,12 +970,14 @@
     "node_modules/@emotion/sheet": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
-      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg=="
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
     },
     "node_modules/@emotion/styled": {
       "version": "11.14.1",
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
       "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -2369,12 +999,14 @@
     "node_modules/@emotion/unitless": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
-      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg=="
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
     },
     "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
       "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
       "peerDependencies": {
         "react": ">=16.8.0"
       }
@@ -2382,17 +1014,21 @@
     "node_modules/@emotion/utils": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
-      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA=="
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
     },
     "node_modules/@emotion/weak-memoize": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
-      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg=="
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
-      "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "eslint-visitor-keys": "^3.4.3"
       },
@@ -2406,29 +1042,12 @@
         "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
     },
-    "node_modules/@eslint-community/regexpp": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
-      "engines": {
-        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
-      }
-    },
-    "node_modules/@eslint/eslintrc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
-      "dependencies": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.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"
-      },
+    "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"
       },
@@ -2436,94 +1055,269 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@eslint/eslintrc/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=="
+    "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/eslintrc/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+    "node_modules/@eslint/config-array": {
+      "version": "0.23.5",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.23.5.tgz",
+      "integrity": "sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==",
+      "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "argparse": "^2.0.1"
+        "@eslint/object-schema": "^3.0.5",
+        "debug": "^4.3.1",
+        "minimatch": "^10.2.4"
       },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.6.0.tgz",
+      "integrity": "sha512-ii6Bw9jJ2zi2cWA2Z+9/QZ/+3DX6kwaV5Q986D/CdP3Lap3w/pgQZ373FV7byY/i7L4IRH/G43I5dz1ClsCbpA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^1.2.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.2.1.tgz",
+      "integrity": "sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
-      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
+      "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "eslint": "^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.5.tgz",
+      "integrity": "sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.7.2.tgz",
+      "integrity": "sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^1.2.1",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz",
+      "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@fontsource/dm-sans": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.2.8.tgz",
+      "integrity": "sha512-tlovG42m9ESG28WiHpLq3F5umAlm64rv0RkqTbYowRn70e9OlRr5a3yTJhrhrY+k5lftR/OFJjPzOLQzk8EfCA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/montserrat": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/montserrat/-/montserrat-5.2.8.tgz",
+      "integrity": "sha512-xTjLxSbSfCycDB0pwmNsfNvdfWPaDaRQ2LC6yt/ZI7SdvXG52zHnzNYC/09mzuAuWNJyShkteutfCoDgym56hQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
       }
     },
     "node_modules/@fullcalendar/core": {
-      "version": "6.1.20",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.20.tgz",
-      "integrity": "sha512-1cukXLlePFiJ8YKXn/4tMKsy0etxYLCkXk8nUCFi11nRONF2Ba2CD5b21/ovtOO2tL6afTJfwmc1ed3HG7eB1g==",
+      "version": "6.1.21",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.21.tgz",
+      "integrity": "sha512-t3u/+sqh3Iq7TWtUnVLcGDUE6OWZh0UD3c04bI/l7lSLAgAKr3kngBmhHiQD1QXpwC8ZN5iNqG7a7gOVixhSKQ==",
+      "license": "MIT",
       "peer": true,
       "dependencies": {
         "preact": "~10.12.1"
       }
     },
     "node_modules/@fullcalendar/daygrid": {
-      "version": "6.1.20",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.20.tgz",
-      "integrity": "sha512-AO9vqhkLP77EesmJzuU+IGXgxNulsA8mgQHynclJ8U70vSwAVnbcLG9qftiTAFSlZjiY/NvhE7sflve6cJelyQ==",
+      "version": "6.1.21",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.21.tgz",
+      "integrity": "sha512-QYb1y40RGYLlOxKpYWg8O+7njEnKnFG8Tt7qjnubJGR35s1phQg67E+81y2TyAbbm59p2JFOCXGDk9t6KDujIA==",
+      "license": "MIT",
       "peerDependencies": {
-        "@fullcalendar/core": "~6.1.20"
+        "@fullcalendar/core": "~6.1.21"
       }
     },
     "node_modules/@fullcalendar/interaction": {
-      "version": "6.1.20",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.20.tgz",
-      "integrity": "sha512-p6txmc5txL0bMiPaJxe2ip6o0T384TyoD2KGdsU6UjZ5yoBlaY+dg7kxfnYKpYMzEJLG58n+URrHr2PgNL2fyA==",
+      "version": "6.1.21",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.21.tgz",
+      "integrity": "sha512-WPYpqtljDWmU0Xm2cOtFrLlocgxv7cgkOppj34Q6OUUat8a6Cnd6kYo2JR+irP223PE5lBYHFNp1qh7SIpJc0w==",
+      "license": "MIT",
       "peerDependencies": {
-        "@fullcalendar/core": "~6.1.20"
+        "@fullcalendar/core": "~6.1.21"
       }
     },
     "node_modules/@fullcalendar/react": {
-      "version": "6.1.20",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-6.1.20.tgz",
-      "integrity": "sha512-1w0pZtceaUdfAnxMSCGHCQalhi+mR1jOe76sXzyAXpcPz/Lf0zHSdcGK/U2XpZlnQgQtBZW+d+QBnnzVQKCxAA==",
+      "version": "6.1.21",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-6.1.21.tgz",
+      "integrity": "sha512-TLpmGUd5k/PMdCh8XbeFC9PW9wuGvMms1oCxWgXyjK3EFPXAAd0PLfcvwKdyxoAS5eK1E4RJFkjMHvsYHpimcg==",
+      "license": "MIT",
       "peerDependencies": {
-        "@fullcalendar/core": "~6.1.20",
+        "@fullcalendar/core": "~6.1.21",
         "react": "^16.7.0 || ^17 || ^18 || ^19",
         "react-dom": "^16.7.0 || ^17 || ^18 || ^19"
       }
     },
     "node_modules/@fullcalendar/timegrid": {
-      "version": "6.1.20",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.20.tgz",
-      "integrity": "sha512-4H+/MWbz3ntA50lrPif+7TsvMeX3R1GSYjiLULz0+zEJ7/Yfd9pupZmAwUs/PBpA6aAcFmeRr0laWfcz1a9V1A==",
+      "version": "6.1.21",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.21.tgz",
+      "integrity": "sha512-2DnShx/jallGmb8QCkr6pAOu/zuPhJrP7+uTrAtSnbqsX7GF3lTxqSeNGkTQwsgF5g/ia8udhQ+JNYaE+TN1cQ==",
+      "license": "MIT",
       "dependencies": {
-        "@fullcalendar/daygrid": "~6.1.20"
+        "@fullcalendar/daygrid": "~6.1.21"
       },
       "peerDependencies": {
-        "@fullcalendar/core": "~6.1.20"
+        "@fullcalendar/core": "~6.1.21"
       }
     },
-    "node_modules/@humanwhocodes/config-array": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
-      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
-      "deprecated": "Use @eslint/config-array instead",
+    "node_modules/@generouted/react-router": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/@generouted/react-router/-/react-router-1.20.2.tgz",
+      "integrity": "sha512-bvcQ23n4lba130bGNL0rLwRvggvh6pNdgAYIY2EiGSQxrgQLhocAaRZMrD6RvM+4vb8nmAoEMPyF00RzEMQSPA==",
+      "license": "MIT",
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.3",
-        "debug": "^4.3.1",
-        "minimatch": "^3.0.5"
+        "fast-glob": "^3.3.3",
+        "generouted": "^1.20.2"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-router": ">=7",
+        "vite": ">=5"
+      }
+    },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.4.0.tgz",
+      "integrity": "sha512-EIsqr/t/qbinPIhGjMdtvutIN1Kk4uwbROE9/UQ93CAVGR7GkA7Y92+fX80OzXi/OB67jVFYwKGO1WzkxmkFZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
+      "integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/types": "^0.15.0"
       },
       "engines": {
-        "node": ">=10.10.0"
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz",
+      "integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.2",
+        "@humanfs/types": "^0.15.0",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/types": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz",
+      "integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==",
+      "dev": true,
+      "license": "Apache-2.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"
       },
@@ -2532,456 +1326,83 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "deprecated": "Use @eslint/object-schema instead"
-    },
-    "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==",
-      "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"
-      },
+    "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": ">=12"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "engines": {
-        "node": ">=12"
+        "node": ">=18.18"
       },
       "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/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==",
-      "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/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/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==",
-      "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/@istanbuljs/load-nyc-config": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
-      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
-      "dependencies": {
-        "camelcase": "^5.3.1",
-        "find-up": "^4.1.0",
-        "get-package-type": "^0.1.0",
-        "js-yaml": "^3.13.1",
-        "resolve-from": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@istanbuljs/schema": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
-      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@jest/console": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-27.5.1.tgz",
-      "integrity": "sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==",
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "jest-message-util": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/@jest/core": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/core/-/core-27.5.1.tgz",
-      "integrity": "sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==",
-      "dependencies": {
-        "@jest/console": "^27.5.1",
-        "@jest/reporters": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/transform": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "emittery": "^0.8.1",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.9",
-        "jest-changed-files": "^27.5.1",
-        "jest-config": "^27.5.1",
-        "jest-haste-map": "^27.5.1",
-        "jest-message-util": "^27.5.1",
-        "jest-regex-util": "^27.5.1",
-        "jest-resolve": "^27.5.1",
-        "jest-resolve-dependencies": "^27.5.1",
-        "jest-runner": "^27.5.1",
-        "jest-runtime": "^27.5.1",
-        "jest-snapshot": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jest-validate": "^27.5.1",
-        "jest-watcher": "^27.5.1",
-        "micromatch": "^4.0.4",
-        "rimraf": "^3.0.0",
-        "slash": "^3.0.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@jest/environment": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-27.5.1.tgz",
-      "integrity": "sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==",
-      "dependencies": {
-        "@jest/fake-timers": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "jest-mock": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/@jest/fake-timers": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.5.1.tgz",
-      "integrity": "sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==",
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "@sinonjs/fake-timers": "^8.0.1",
-        "@types/node": "*",
-        "jest-message-util": "^27.5.1",
-        "jest-mock": "^27.5.1",
-        "jest-util": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/@jest/globals": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-27.5.1.tgz",
-      "integrity": "sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==",
-      "dependencies": {
-        "@jest/environment": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "expect": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/@jest/reporters": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-27.5.1.tgz",
-      "integrity": "sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==",
-      "dependencies": {
-        "@bcoe/v8-coverage": "^0.2.3",
-        "@jest/console": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/transform": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "collect-v8-coverage": "^1.0.0",
-        "exit": "^0.1.2",
-        "glob": "^7.1.2",
-        "graceful-fs": "^4.2.9",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-instrument": "^5.1.0",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-lib-source-maps": "^4.0.0",
-        "istanbul-reports": "^3.1.3",
-        "jest-haste-map": "^27.5.1",
-        "jest-resolve": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jest-worker": "^27.5.1",
-        "slash": "^3.0.0",
-        "source-map": "^0.6.0",
-        "string-length": "^4.0.1",
-        "terminal-link": "^2.0.0",
-        "v8-to-istanbul": "^8.1.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@jest/reporters/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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/@jest/schemas": {
-      "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-28.1.3.tgz",
-      "integrity": "sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==",
-      "dependencies": {
-        "@sinclair/typebox": "^0.24.1"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
-      }
-    },
-    "node_modules/@jest/source-map": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-27.5.1.tgz",
-      "integrity": "sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==",
-      "dependencies": {
-        "callsites": "^3.0.0",
-        "graceful-fs": "^4.2.9",
-        "source-map": "^0.6.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/@jest/source-map/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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/@jest/test-result": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-27.5.1.tgz",
-      "integrity": "sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==",
-      "dependencies": {
-        "@jest/console": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "collect-v8-coverage": "^1.0.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/@jest/test-sequencer": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz",
-      "integrity": "sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==",
-      "dependencies": {
-        "@jest/test-result": "^27.5.1",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^27.5.1",
-        "jest-runtime": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/@jest/transform": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.5.1.tgz",
-      "integrity": "sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==",
-      "dependencies": {
-        "@babel/core": "^7.1.0",
-        "@jest/types": "^27.5.1",
-        "babel-plugin-istanbul": "^6.1.1",
-        "chalk": "^4.0.0",
-        "convert-source-map": "^1.4.0",
-        "fast-json-stable-stringify": "^2.0.0",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^27.5.1",
-        "jest-regex-util": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "micromatch": "^4.0.4",
-        "pirates": "^4.0.4",
-        "slash": "^3.0.0",
-        "source-map": "^0.6.1",
-        "write-file-atomic": "^3.0.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/@jest/transform/node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
-    },
-    "node_modules/@jest/transform/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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/@jest/types": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
-      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^16.0.0",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.12",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
-      "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
+      "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==",
+      "dev": true,
+      "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/source-map": {
-      "version": "0.3.10",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.10.tgz",
-      "integrity": "sha512-0pPkgz9dY+bijgistcTTJ5mR+ocqRXLuhXHYdzoMmmoJ2C9S46RCm2GMUbatPEUK9Yjy26IrAy8D/M00lLkv+Q==",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25"
-      }
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.4.tgz",
-      "integrity": "sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw=="
+      "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.29",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
-      "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
+      "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/@leichtgewicht/ip-codec": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
-      "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
-    },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.1.tgz",
-      "integrity": "sha512-+mIK1Z0BhOaQ0vCgOkT1mSrIpEHLo338h4/duuL4TBLXPvUMit732mnwJY3W40Avy30HdeSfwUAAGRkKmwRaEQ==",
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.2.0.tgz",
+      "integrity": "sha512-+XMav+ZaXkZKUFUgzjrfMEedfyJKxxviAske2q8N8CWDMeqZdDU2lWMkiUPiB388hGaDqhwvOAwkrsc/pUyp8g==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.1.tgz",
-      "integrity": "sha512-upzCtG6awpL6noEZlJ5Z01khZ9VnLNLaj7tb6iPbN6G97eYfUTs8e9OyPKy3rEms3VQWmVBfri7jzeaRxdFIzA==",
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.2.0.tgz",
+      "integrity": "sha512-VgBd3z7Qc3vd/thcNSMC03nHRh/U4DzMUd+1dRyJTbm/hGo7+N6N4GDuJZDNHa6LZhhwG6Cu1X3DNvrVv8sNag==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.2"
+        "@babel/runtime": "^7.29.2"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -2991,7 +1412,7 @@
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@mui/material": "^7.3.1",
+        "@mui/material": "^9.2.0",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -3002,21 +1423,22 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.1.tgz",
-      "integrity": "sha512-Xf6Shbo03YmcBedZMwSpEFOwpYDtU7tC+rhAHTrA9FHk0FpsDqiQ9jUa1j/9s3HLs7KWb5mDcGnlwdh9Q9KAag==",
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.2.0.tgz",
+      "integrity": "sha512-+YTRSgGKGrrRo2XJZXs7JRA6qHoHWvNtxyqxnrRJTBmIuLOUpxxh7m4G9lF4tWberxGFY+EqkkRPgJCl+fSMJg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/core-downloads-tracker": "^7.3.1",
-        "@mui/system": "^7.3.1",
-        "@mui/types": "^7.4.5",
-        "@mui/utils": "^7.3.1",
+        "@babel/runtime": "^7.29.2",
+        "@mui/core-downloads-tracker": "^9.2.0",
+        "@mui/system": "^9.2.0",
+        "@mui/types": "^9.1.1",
+        "@mui/utils": "^9.2.0",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.12",
         "clsx": "^2.1.1",
-        "csstype": "^3.1.3",
+        "csstype": "^3.2.3",
         "prop-types": "^15.8.1",
-        "react-is": "^19.1.1",
+        "react-is": "^19.2.6",
         "react-transition-group": "^4.4.5"
       },
       "engines": {
@@ -3029,7 +1451,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^7.3.1",
+        "@mui/material-pigment-css": "^9.2.0",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3049,18 +1471,14 @@
         }
       }
     },
-    "node_modules/@mui/material/node_modules/react-is": {
-      "version": "19.1.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
-      "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA=="
-    },
     "node_modules/@mui/private-theming": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.1.tgz",
-      "integrity": "sha512-WU3YLkKXii/x8ZEKnrLKsPwplCVE11yZxUvlaaZSIzCcI3x2OdFC8eMlNy74hVeUsYQvzzX1Es/k4ARPlFvpPQ==",
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.2.0.tgz",
+      "integrity": "sha512-w9wpyDxGPGnAACPB2hKhCDmILJIAvQxrfjUbIAEa0AznX1rOjaz5N+yB1uuw8ixnJcpEh/tPbD9oEe19wcWPHw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/utils": "^7.3.1",
+        "@babel/runtime": "^7.29.2",
+        "@mui/utils": "^9.2.0",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3081,15 +1499,16 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.1.tgz",
-      "integrity": "sha512-Nqo6OHjvJpXJ1+9TekTE//+8RybgPQUKwns2Lh0sq+8rJOUSUKS3KALv4InSOdHhIM9Mdi8/L7LTF1/Ky6D6TQ==",
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.1.1.tgz",
+      "integrity": "sha512-neaYKdJfvEG54q8efHLJR7swpHG/gfSv9xGqW5iTSMsubD7yPCPFrhVBt284j1DOF3uZaaDJSHQL7gz6jGF21Q==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.2",
+        "@babel/runtime": "^7.29.2",
         "@emotion/cache": "^11.14.0",
         "@emotion/serialize": "^1.3.3",
         "@emotion/sheet": "^1.4.0",
-        "csstype": "^3.1.3",
+        "csstype": "^3.2.3",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3114,17 +1533,18 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.1.tgz",
-      "integrity": "sha512-mIidecvcNVpNJMdPDmCeoSL5zshKBbYPcphjuh6ZMjhybhqhZ4mX6k9zmIWh6XOXcqRQMg5KrcjnO0QstrNj3w==",
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-9.2.0.tgz",
+      "integrity": "sha512-YvUJwKoGVtbnOm2PyPi5TvX2d1rOA6sqSpEWVs4WmXNIaFTuYmNUaVdU2o1NKUEe31URnD3E8ZVUMcsLQXwcYg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/private-theming": "^7.3.1",
-        "@mui/styled-engine": "^7.3.1",
-        "@mui/types": "^7.4.5",
-        "@mui/utils": "^7.3.1",
+        "@babel/runtime": "^7.29.2",
+        "@mui/private-theming": "^9.2.0",
+        "@mui/styled-engine": "^9.1.1",
+        "@mui/types": "^9.1.1",
+        "@mui/utils": "^9.2.0",
         "clsx": "^2.1.1",
-        "csstype": "^3.1.3",
+        "csstype": "^3.2.3",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3153,11 +1573,12 @@
       }
     },
     "node_modules/@mui/types": {
-      "version": "7.4.5",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.5.tgz",
-      "integrity": "sha512-ZPwlAOE3e8C0piCKbaabwrqZbW4QvWz0uapVPWya7fYj6PeDkl5sSJmomT7wjOcZGPB48G/a6Ubidqreptxz4g==",
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.1.1.tgz",
+      "integrity": "sha512-Zjt7u8wNvDg40rPTGoL+TnfkpuSKjwubsNSFRH1KAVZLcaV4I3AFNHIFbvH7p4F3alEibSbdd90xAgn5Rnfndg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.2"
+        "@babel/runtime": "^7.29.2"
       },
       "peerDependencies": {
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3169,16 +1590,17 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.1.tgz",
-      "integrity": "sha512-/31y4wZqVWa0jzMnzo6JPjxwP6xXy4P3+iLbosFg/mJQowL1KIou0LC+lquWW60FKVbKz5ZUWBg2H3jausa0pw==",
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.2.0.tgz",
+      "integrity": "sha512-OsUH5zhlSOM4xmLl53+agug1M1UyWb4zxFxWQCqwKTKUeQPvTENtg3JhrroBD2qpCLKsX5W/DYGERJ4mBUbc8g==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/types": "^7.4.5",
+        "@babel/runtime": "^7.29.2",
+        "@mui/types": "^9.1.1",
         "@types/prop-types": "^15.7.15",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
-        "react-is": "^19.1.1"
+        "react-is": "^19.2.6"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -3197,43 +1619,29 @@
         }
       }
     },
-    "node_modules/@mui/utils/node_modules/react-is": {
-      "version": "19.1.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
-      "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA=="
-    },
-    "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
-      "version": "5.1.1-v1",
-      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
-      "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
+      "integrity": "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==",
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "eslint-scope": "5.1.1"
-      }
-    },
-    "node_modules/@nicolo-ribaudo/eslint-scope-5-internals/node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
+        "@tybys/wasm-util": "^0.10.3"
       },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/@nicolo-ribaudo/eslint-scope-5-internals/node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "engines": {
-        "node": ">=4.0"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
       }
     },
     "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==",
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -3246,6 +1654,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
       "engines": {
         "node": ">= 8"
       }
@@ -3254,6 +1663,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -3262,462 +1672,999 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
+    "node_modules/@oxc-project/types": {
+      "version": "0.139.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.139.0.tgz",
+      "integrity": "sha512-r9gHphtCs+1M7J0pw6Sn/hh/Wpa/iQrOOkrNAlVLF/gHq+/CJmHIWKKUUhdWjcD6CIa8idarspCsASiXCXvFUw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
       }
     },
-    "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
-      "version": "0.5.17",
-      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.17.tgz",
-      "integrity": "sha512-tXDyE1/jzFsHXjhRZQ3hMl0IVhYe5qula43LDWIhVfjp9G/nT5OQY5AORVOrkEGAUltBJOfOWeETbmhm6kHhuQ==",
+    "node_modules/@playwright/test": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+      "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
+      "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "ansi-html": "^0.0.9",
-        "core-js-pure": "^3.23.3",
-        "error-stack-parser": "^2.0.6",
-        "html-entities": "^2.1.0",
-        "loader-utils": "^2.0.4",
-        "schema-utils": "^4.2.0",
-        "source-map": "^0.7.3"
+        "playwright": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
       },
       "engines": {
-        "node": ">= 10.13"
-      },
-      "peerDependencies": {
-        "@types/webpack": "4.x || 5.x",
-        "react-refresh": ">=0.10.0 <1.0.0",
-        "sockjs-client": "^1.4.0",
-        "type-fest": ">=0.17.0 <5.0.0",
-        "webpack": ">=4.43.0 <6.0.0",
-        "webpack-dev-server": "3.x || 4.x || 5.x",
-        "webpack-hot-middleware": "2.x",
-        "webpack-plugin-serve": "0.x || 1.x"
-      },
-      "peerDependenciesMeta": {
-        "@types/webpack": {
-          "optional": true
-        },
-        "sockjs-client": {
-          "optional": true
-        },
-        "type-fest": {
-          "optional": true
-        },
-        "webpack-dev-server": {
-          "optional": true
-        },
-        "webpack-hot-middleware": {
-          "optional": true
-        },
-        "webpack-plugin-serve": {
-          "optional": true
-        }
+        "node": ">=18"
       }
     },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
       }
     },
-    "node_modules/@reduxjs/toolkit": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
-      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
-      "dependencies": {
-        "@standard-schema/spec": "^1.0.0",
-        "@standard-schema/utils": "^0.3.0",
-        "immer": "^11.0.0",
-        "redux": "^5.0.1",
-        "redux-thunk": "^3.1.0",
-        "reselect": "^5.1.0"
-      },
-      "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
-        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        },
-        "react-redux": {
-          "optional": true
-        }
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.5.tgz",
+      "integrity": "sha512-lZg8fqIv2v7FF237bwMgzGZEJvGL79/s5knJ/i6FmsGF4XXlzccZ4jb+TrFIxtSSxFtIpdsgrPZeMk1I9AFcyQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
       }
     },
-    "node_modules/@reduxjs/toolkit/node_modules/immer": {
-      "version": "11.1.8",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.8.tgz",
-      "integrity": "sha512-/tbkHMW7y10Lx6i1crLjD4/OhNkRG+Fo7byZHtah0547nIeXYcpIXaUh0IAQY6gO5459qpGGYapcEOHtFXkIuA==",
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.1.5.tgz",
+      "integrity": "sha512-51Bnx9pNiMRKSUNtBfySkNJ9vMU9Hh3I1ozDd6gyPPYzaXCfnptUcEZxXGYFn+ul2dtcMUiqGR1Yai2K10uoTw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.1.5.tgz",
+      "integrity": "sha512-Tm+gbfC0aHu1tBA/JvKQh32S0K6YgCHkiAF4/W6xX0K0RmNuc94VeK419dJoE65R5aRxmo+noZQSWrAMF6yb6g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.1.5.tgz",
+      "integrity": "sha512-JMzDKCCXq93YccG5gz3hvOs1oXRKAf0XYpfOS88e+wZrC8Iugj6j68867vrYZkvpDDpKn/KoKORThmchMpF6TA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.1.5.tgz",
+      "integrity": "sha512-uML21j2K5TfPGutKxub+M+nLjZIrWjXQ5Grx4lCe/nimTj9B4L63zHpjXLl4y0L3mcm2htEQIb06oCG/szerNw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.1.5.tgz",
+      "integrity": "sha512-navSiuTMogvnQoZoM/v+l3ZWo50/NTwSHSzheABx/RCnmUPaKwq9qSo4Br2OYRs21+Fz8uFqITZM3H4opOB0/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.1.5.tgz",
+      "integrity": "sha512-lAryqH7IteztmCXQXk0etKj4wBQ7Gx5S6LjKhsgp9zb8I5bsuvU/2llH1hDQcjsFeqIsovMVN339/8pUDDBXxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.1.5.tgz",
+      "integrity": "sha512-fsK/sNBnxzBlL4O1JNrZakVQxPspqpED5dLtNsZS9oOKmtSpdNIzxH2kkol5HYTWJN47sE20ztMJPxfZ89qGOg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.1.5.tgz",
+      "integrity": "sha512-gLYb4BIadlfTOYT5gO503n8zQjXflgzpD0FcyKh0Mzx3rqCZKnHoJWV9xe1KXUJ5lx2JfcSHr/mhzS0PC/McAA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.1.5.tgz",
+      "integrity": "sha512-FjcpEKUyJygHgs1o50VYNvkt5+7Le/VEdYt0AkRpkL33MnyQfwr8l5mXwMmfmTbyMPr5vJLC+8/Gd9gXnwU1QQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.1.5.tgz",
+      "integrity": "sha512-Me+PfPI2TMeOQk0gYWfLQZtTktrmzbr8cDboqX83XKc7UrgAi55gF+2dUkWdxd19n55Essp2yeca+O9N5rBxHg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.1.5.tgz",
+      "integrity": "sha512-yc5WrLzXks6zCQfn9Oxr8pORKyl/pF+QjHmW/Qx3qu0oyrrNC+y2JLTU1E2rcWYAmzlnqngWXHQjy51VzW70Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.1.5.tgz",
+      "integrity": "sha512-VbQGPX2b4r48TAMIM2cjgluIM1HYutm4pcTEJsle7iEP7sB1dFqtPLBVbdLAZCxy1txCcPxf4QFf4v8uvltPqA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.11.1",
+        "@emnapi/runtime": "1.11.1",
+        "@napi-rs/wasm-runtime": "^1.1.6"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
+      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
+      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.1.5.tgz",
+      "integrity": "sha512-gHv82k63z4qpV5+Q1y/12KrK0ltWBukVDI8nZcbT7Tt/ZlOIVwppazneq0F93oDxTo3IgAMEDIoQh3E2n6mVsw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.1.5.tgz",
+      "integrity": "sha512-tTZuDBPw85tEN5PQi1pnEBzDy0Z49HtScLAbD5t6hyeU92A95pRWaSMw1GZZi/RwgSgUIl0xrSlXIT/9QzvYSA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "license": "MIT"
+    },
+    "node_modules/@sentry/browser": {
+      "version": "10.73.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-10.73.0.tgz",
+      "integrity": "sha512-HqTe1S5RrWLufhX2LaFP3yNoMxfNDroh120bq1zdGHZfFDBMJQ0CDXxHO+L4UJfQ5dWdCCzWbXIAiZuWGa/DFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/browser-utils": "10.73.0",
+        "@sentry/conventions": "^0.16.0",
+        "@sentry/core": "10.73.0",
+        "@sentry/feedback": "10.73.0",
+        "@sentry/replay": "10.73.0",
+        "@sentry/replay-canvas": "10.73.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/browser-utils": {
+      "version": "10.73.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser-utils/-/browser-utils-10.73.0.tgz",
+      "integrity": "sha512-qQygxJZ+RV779+iL1+lrJ4f4sZLgbgW0/JWPNp0YlcEAE62yCsdKbqoTEjB/EugdS4mSjBMX0chZC6rblu2Ycw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/conventions": "^0.16.0",
+        "@sentry/core": "10.73.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/cli": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-3.7.0.tgz",
+      "integrity": "sha512-UV6/hUaEL7X1ATx5RHPfDEObh+nTRwOeUkNwF6R+HDo6iAki063GiLOmkfroemkVD0L4370SSvGtc5+Y7MZkhQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "FSL-1.1-MIT",
+      "dependencies": {
+        "progress": "^2.0.3",
+        "proxy-from-env": "^1.1.0",
+        "undici": "^6.22.0",
+        "which": "^2.0.2"
+      },
+      "bin": {
+        "sentry-cli": "bin/sentry-cli"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "optionalDependencies": {
+        "@sentry/cli-darwin": "3.7.0",
+        "@sentry/cli-linux-arm": "3.7.0",
+        "@sentry/cli-linux-arm64": "3.7.0",
+        "@sentry/cli-linux-i686": "3.7.0",
+        "@sentry/cli-linux-x64": "3.7.0",
+        "@sentry/cli-win32-arm64": "3.7.0",
+        "@sentry/cli-win32-i686": "3.7.0",
+        "@sentry/cli-win32-x64": "3.7.0"
+      }
+    },
+    "node_modules/@sentry/cli-darwin": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-3.7.0.tgz",
+      "integrity": "sha512-Kb6Oem+6lfxkWSH8iz8DHwYmbMtYxFoTk3VHfeTkpz60TRj+0OPga/0ZEsCCgG/Df17E7z2kbkoe5Ld+dEj3Tw==",
+      "dev": true,
+      "license": "FSL-1.1-MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/cli-linux-arm": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-3.7.0.tgz",
+      "integrity": "sha512-PKEFwwRCOG92u2dXusLbRK4cZ7XXlaUY8TkhaZy/PJ/FNsST7Sh+MbdWQCgPB0FsvZrgImcKIEyCJZtc0GunJg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "FSL-1.1-MIT",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd",
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/cli-linux-arm64": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-3.7.0.tgz",
+      "integrity": "sha512-m6VlsDJBo9/9ufASv4m4heKS0zfgUJdcSvKgIQerZaLwKOfhY8OP7zhlJPkFmnFjOjyvNyaqzoR00EnlprdwFw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "FSL-1.1-MIT",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd",
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/cli-linux-i686": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-3.7.0.tgz",
+      "integrity": "sha512-6NeOPqsPuyrOgVGPFunPxgqHCes+a8r6pbCgq9+qSD3oa5fk9H0KOKB0sIC0YyH43OGzdzmwn0XNbdF6jwJO6A==",
+      "cpu": [
+        "x86",
+        "ia32"
+      ],
+      "dev": true,
+      "license": "FSL-1.1-MIT",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd",
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/cli-linux-x64": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-3.7.0.tgz",
+      "integrity": "sha512-74R9fuAldhC38Aoco8XQWTBvs2T2NatrDvI/ISHihej2oSnbQmL7krJF3yWn33MchQWrsFKgg7mboqemJnreZA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "FSL-1.1-MIT",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd",
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/cli-win32-arm64": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-arm64/-/cli-win32-arm64-3.7.0.tgz",
+      "integrity": "sha512-xhmTUW3N3m8iZ4mkV8SrNOr5UN8+6zpvlvJxCK6Z15Tp8S14N1T+hfKeyL2xpLxBcd7Q7oW1dYXUl5b7BHNqjw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "FSL-1.1-MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/cli-win32-i686": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-3.7.0.tgz",
+      "integrity": "sha512-/CvFzrCWUB0URWKYQeoNs8UbPJcBz6KD/AX27reyQxPd8S3AnTwcaYfCf8SRHEH9Iu+1IKzi5tUUNUB18b7ijg==",
+      "cpu": [
+        "x86",
+        "ia32"
+      ],
+      "dev": true,
+      "license": "FSL-1.1-MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/cli-win32-x64": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-3.7.0.tgz",
+      "integrity": "sha512-PNW1O6sZw3JXhhJFgOiW7isFHX/qbniIDxswM7kb0wF2aVUpLXLltbezchWwTAxIRXo9gcu/oMTK0rntdqL5Eg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "FSL-1.1-MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/cli/node_modules/undici": {
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.28.0.tgz",
+      "integrity": "sha512-LIY910g9TI13YS95lrMFrs8Rm/u/irgHeTWoKCoteeJ04CUJ92eEfj0rVn+7VKMPBpUPiUoBKfhNyLI23EE/KA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
+    "node_modules/@sentry/conventions": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@sentry/conventions/-/conventions-0.16.0.tgz",
+      "integrity": "sha512-fO9PLmHdVURcSPUpWCItWAtgKiMwGdJHbovoSEyLplX5sxs2ugvI4CBPTrkkgqhObnZOD0CnWBKDzSVQYBKEyQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@sentry/core": {
+      "version": "10.73.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.73.0.tgz",
+      "integrity": "sha512-FLO1UgH19RyasVpofu612WCOgb2nEH0dZy+R72d7p65XU9i0wxlMKm3+sgfwKmiSJp1Qhilaaxs4Jg6BbiM5HA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/conventions": "^0.16.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/feedback": {
+      "version": "10.73.0",
+      "resolved": "https://registry.npmjs.org/@sentry/feedback/-/feedback-10.73.0.tgz",
+      "integrity": "sha512-D6nSngX+e46Mae2/oh2bxBvxNK1z2NERbuMAhB5sx9x4xMBWIyGnYYTECehvEqV9+AqGAgxxhOZoYIG3AmRwww==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "10.73.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/react": {
+      "version": "10.73.0",
+      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-10.73.0.tgz",
+      "integrity": "sha512-wJrzS98ddPvhGS/MKNHZyE8X7ecd4KwKdz7fHino2qkqBBrF4cxWr+q/uLTIk5PYWMkeJ4oKMjHAjOqmzGR4tg==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/browser": "10.73.0",
+        "@sentry/conventions": "^0.16.0",
+        "@sentry/core": "10.73.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0 || 17.x || 18.x || 19.x"
+      }
+    },
+    "node_modules/@sentry/replay": {
+      "version": "10.73.0",
+      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-10.73.0.tgz",
+      "integrity": "sha512-nN2wjN/Y0J5BOJV5hqRHUEBfxwUsipp1PKjcDHh6Fpxnrtfldu3Y99E8cQInseo5heFdzEvrOHBBrqWZXOHVKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/browser-utils": "10.73.0",
+        "@sentry/core": "10.73.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/replay-canvas": {
+      "version": "10.73.0",
+      "resolved": "https://registry.npmjs.org/@sentry/replay-canvas/-/replay-canvas-10.73.0.tgz",
+      "integrity": "sha512-sxa2lKkHPfF/j5xFpW7gocthWXRqyoHz8KCPy6yGc8plT477nl57iGSKhQDYsx1Ny10TLjs7YkIuPP1GY/Ax2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "10.73.0",
+        "@sentry/replay": "10.73.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@simple-libs/child-process-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@simple-libs/child-process-utils/-/child-process-utils-2.0.0.tgz",
+      "integrity": "sha512-dvNoRKLijXnD0XoJAz94pbNuB5GQgDr55UhpSPhffDkTT0Cmcqh9jSCOtwfT2d4H6MI9E7c4SgtMuJXZ6F3c6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@simple-libs/stream-utils": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=22"
+      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/immer"
+        "url": "https://ko-fi.com/dangreen"
       }
     },
-    "node_modules/@rollup/plugin-babel": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
-      "integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.10.4",
-        "@rollup/pluginutils": "^3.1.0"
-      },
+    "node_modules/@simple-libs/stream-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@simple-libs/stream-utils/-/stream-utils-2.0.0.tgz",
+      "integrity": "sha512-fCTuZK4QBa+39Oz9l4OGfJfz+GpwCp3AqO7Zch3to99xHPgstVsRFpeQ8LNd2o1Gv8raL2mCFwiaHh7bFSp5DQ==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.0.0"
+        "node": ">=22"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0",
-        "@types/babel__core": "^7.1.9",
-        "rollup": "^1.20.0||^2.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/babel__core": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@rollup/plugin-node-resolve": {
-      "version": "11.2.1",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
-      "integrity": "sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==",
-      "dependencies": {
-        "@rollup/pluginutils": "^3.1.0",
-        "@types/resolve": "1.17.1",
-        "builtin-modules": "^3.1.0",
-        "deepmerge": "^4.2.2",
-        "is-module": "^1.0.0",
-        "resolve": "^1.19.0"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "peerDependencies": {
-        "rollup": "^1.20.0||^2.0.0"
-      }
-    },
-    "node_modules/@rollup/plugin-replace": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz",
-      "integrity": "sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==",
-      "dependencies": {
-        "@rollup/pluginutils": "^3.1.0",
-        "magic-string": "^0.25.7"
-      },
-      "peerDependencies": {
-        "rollup": "^1.20.0 || ^2.0.0"
-      }
-    },
-    "node_modules/@rollup/pluginutils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
-      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
-      "dependencies": {
-        "@types/estree": "0.0.39",
-        "estree-walker": "^1.0.1",
-        "picomatch": "^2.2.2"
-      },
-      "engines": {
-        "node": ">= 8.0.0"
-      },
-      "peerDependencies": {
-        "rollup": "^1.20.0||^2.0.0"
-      }
-    },
-    "node_modules/@rollup/pluginutils/node_modules/@types/estree": {
-      "version": "0.0.39",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
-      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
-    },
-    "node_modules/@rtsao/scc": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
-      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g=="
-    },
-    "node_modules/@rushstack/eslint-patch": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.12.0.tgz",
-      "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw=="
-    },
-    "node_modules/@sinclair/typebox": {
-      "version": "0.24.51",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
-      "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA=="
-    },
-    "node_modules/@sinonjs/commons": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz",
-      "integrity": "sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==",
-      "dependencies": {
-        "type-detect": "4.0.8"
-      }
-    },
-    "node_modules/@sinonjs/fake-timers": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz",
-      "integrity": "sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==",
-      "dependencies": {
-        "@sinonjs/commons": "^1.7.0"
+      "funding": {
+        "url": "https://ko-fi.com/dangreen"
       }
     },
     "node_modules/@standard-schema/spec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
-      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@standard-schema/utils": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
-      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
     },
-    "node_modules/@surma/rollup-plugin-off-main-thread": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
-      "integrity": "sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==",
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.2.tgz",
+      "integrity": "sha512-yWP/sqEcBLaD8JuA6zNwxoYKr75qxTioYwlRwekj5Jr/I5GXnoJfjetH/psLUIv74cYTH2lBUEzBkinthoYcBg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ejs": "^3.1.6",
-        "json5": "^2.2.0",
-        "magic-string": "^0.25.0",
-        "string.prototype.matchall": "^4.0.6"
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "5.21.6",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.2"
       }
     },
-    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
-      "integrity": "sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==",
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.2.tgz",
+      "integrity": "sha512-z8ZgnzX8gdNoWLBLqBPoh/sjnxkwvf9ZuWjnO0l0yIzbLa5/9S+eC5QxGZKRobVHIC3/1BoMWjHblqWjcgFgag==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">= 20"
       },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.2",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.2",
+        "@tailwindcss/oxide-darwin-x64": "4.3.2",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.2",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.2",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.2",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.2",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.2",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.2",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.2",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.2",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.2"
       }
     },
-    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz",
-      "integrity": "sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==",
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.2.tgz",
+      "integrity": "sha512-WHxqIuHpvZ5VtdX6GTl1Ik/Vp2YuN42Et+0CdeaVd/frQ9jAvGmvR8vLT+jk3e8/Q3x8kECB9+R17pgpp2BulA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+        "node": ">= 20"
       }
     },
-    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz",
-      "integrity": "sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==",
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.2.tgz",
+      "integrity": "sha512-GZypeUY/IDJW3877KeM+O67vbXr3MBnbtEL4aYhNErv/JWZhye2vGSWWG9tB6iiqR2MqRNkY8IOUy4NdSZV26w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+        "node": ">= 20"
       }
     },
-    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz",
-      "integrity": "sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==",
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.2.tgz",
+      "integrity": "sha512-UIIzmefR6KO1sDU7MzRqAxC8iBpft/VhkGjTjnhoS6k7Z3rQ9wEgA1ODSiyH/tcSYssulNm4Ci3hOeK1jH7ccQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+        "node": ">= 20"
       }
     },
-    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz",
-      "integrity": "sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==",
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.2.tgz",
+      "integrity": "sha512-GN+uAmcI6DNspnCDwtOAZrTz6oukJnp337qZvxqCGLd3BHBzJpO0ZbTLRvJNdztOeAmTzewewGIMPb0tk2R4WA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+        "node": ">= 20"
       }
     },
-    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz",
-      "integrity": "sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==",
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.2.tgz",
+      "integrity": "sha512-4ABn7qSbdHRwTiDiuWNegCyb5+2FJ4vKIKc3DmKrvAFw7MU1Lm11dIkTPwUaFdTzc7IsOpDbqBrlh0x6y36U/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+        "node": ">= 20"
       }
     },
-    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz",
-      "integrity": "sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==",
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.2.tgz",
+      "integrity": "sha512-wDgEIGwoM8w8pufh9LVt1PahDgNdKXrLC2qfAnV3vAmococ9RWbxeAw4pxPttd/TsJfwjyLf90Dg1y9y8I6Emw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+        "node": ">= 20"
       }
     },
-    "node_modules/@svgr/babel-plugin-transform-svg-component": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz",
-      "integrity": "sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==",
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.2.tgz",
+      "integrity": "sha512-J5Nuk0uZQIiMTJj3LEx4sAA9tMFUoXQZFv1J6An+QGYe53HKRJuFDi0rpq/tuouCZeAbOBY3kQ6g8qeD4TUjtA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+        "node": ">= 20"
       }
     },
-    "node_modules/@svgr/babel-preset": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-5.5.0.tgz",
-      "integrity": "sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==",
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.2.tgz",
+      "integrity": "sha512-kqCZpSKOBEJO4mz7OqWoofBZeXTAwaVGPj0ErAj7CojmhKpWVWVOnrt9dE8odoIraZq4oj3ausM37kXi+Tow8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.2.tgz",
+      "integrity": "sha512-cixpqbh2toJDmkuCRI68nXA8ZxNmdK9Y+9v5h3MC3ZQKy/0BO8AWzlkWyRM7JAFSGBlfig4YVTPsK6MVgqz1uw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.2.tgz",
+      "integrity": "sha512-4ec2Z/LOmRsAgU23CS4xeJfcJlmRg94A/XrbGRCF1gyU/zdDfRLYDVsS+ynSZCmGNxQ1jQriQOKMQeQxBA3Isw==",
+      "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": {
-        "@svgr/babel-plugin-add-jsx-attribute": "^5.4.0",
-        "@svgr/babel-plugin-remove-jsx-attribute": "^5.4.0",
-        "@svgr/babel-plugin-remove-jsx-empty-expression": "^5.0.1",
-        "@svgr/babel-plugin-replace-jsx-attribute-value": "^5.0.1",
-        "@svgr/babel-plugin-svg-dynamic-title": "^5.4.0",
-        "@svgr/babel-plugin-svg-em-dimensions": "^5.4.0",
-        "@svgr/babel-plugin-transform-react-native-svg": "^5.4.0",
-        "@svgr/babel-plugin-transform-svg-component": "^5.5.0"
+        "@emnapi/core": "^1.11.1",
+        "@emnapi/runtime": "^1.11.1",
+        "@emnapi/wasi-threads": "^1.2.2",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
       },
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/@svgr/core": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-5.5.0.tgz",
-      "integrity": "sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==",
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "@svgr/plugin-jsx": "^5.5.0",
-        "camelcase": "^6.2.0",
-        "cosmiconfig": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@svgr/hast-util-to-babel-ast": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz",
-      "integrity": "sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==",
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.4",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "@babel/types": "^7.12.6"
-      },
-      "engines": {
-        "node": ">=10"
+        "@tybys/wasm-util": "^0.10.1"
       },
       "funding": {
         "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
       }
     },
-    "node_modules/@svgr/plugin-jsx": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz",
-      "integrity": "sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==",
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.2",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "@babel/core": "^7.12.3",
-        "@svgr/babel-preset": "^5.5.0",
-        "@svgr/hast-util-to-babel-ast": "^5.5.0",
-        "svg-parser": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@svgr/plugin-svgo": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz",
-      "integrity": "sha512-r5swKk46GuQl4RrVejVwpeeJaydoxkdwkM1mBKOgJLBUJPGaLci6ylg/IjhrRsREKDkr4kbMWdgOtbXEh0fyLQ==",
-      "dependencies": {
-        "cosmiconfig": "^7.0.0",
-        "deepmerge": "^4.2.2",
-        "svgo": "^1.2.2"
-      },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.2.tgz",
+      "integrity": "sha512-Zyr/M0+XcYZu3bZrUytc7TXvrk0ftWfl8gN2MwekNDzhqhKRUucMPSeOzM0o0wH5AWOU49BsKRrfKxI2atCPMQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+        "node": ">= 20"
       }
     },
-    "node_modules/@svgr/webpack": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-5.5.0.tgz",
-      "integrity": "sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==",
-      "dependencies": {
-        "@babel/core": "^7.12.3",
-        "@babel/plugin-transform-react-constant-elements": "^7.12.1",
-        "@babel/preset-env": "^7.12.1",
-        "@babel/preset-react": "^7.12.5",
-        "@svgr/core": "^5.5.0",
-        "@svgr/plugin-jsx": "^5.5.0",
-        "@svgr/plugin-svgo": "^5.5.0",
-        "loader-utils": "^2.0.0"
-      },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.2.tgz",
+      "integrity": "sha512-QI9BO7KlNZsp2GuO0jwAAj5jCDABOKXRkCk2XuKTSaNEFSdfzqswYVTtCHBNKHLsqyjFyFkqlDiwkNbTYSssMQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">=10"
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.2.tgz",
+      "integrity": "sha512-eHpMeX4JXfVNJDEcsouTeCBubJBTcTLigeaw/NTUW6PB5ATKKXdyonnXgTBX2VuRbjz1hjfz6C5XAhr52ImQXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.2",
+        "@tailwindcss/oxide": "4.3.2",
+        "tailwindcss": "4.3.2"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/@tanstack/query-broadcast-client-experimental": {
+      "version": "5.101.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-broadcast-client-experimental/-/query-broadcast-client-experimental-5.101.2.tgz",
+      "integrity": "sha512-BFJp1HqDjUY3x51zzgfB2scGhg1nw2V8Y6+aoSA8TEWYh0oI5kYx1z+37fzlws2uaT7ObjCz1PXzzftE6xpmhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.101.2",
+        "broadcast-channel": "^7.0.0"
       },
       "funding": {
         "type": "github",
-        "url": "https://github.com/sponsors/gregberge"
+        "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.100.10",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.100.10.tgz",
-      "integrity": "sha512-8UR0yJR+GiQ40m3lPhUr0xbfAupe6GSQiksSBSa9SM2NjezFyxXCIA69/lz8cSoNKZLrw1/PktIyQBJcVeMi3w==",
+      "version": "5.101.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.2.tgz",
+      "integrity": "sha512-hH5MLoJhF7KaIGd7q3xTXGXvslI+GYlM1Z/35aSHHWaCJWB7XvTSHYuV3eM7tw+aE0mT/xMro4M4Q9rCGHT0lw==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/query-devtools": {
-      "version": "5.100.10",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.100.10.tgz",
-      "integrity": "sha512-3DmJf25hDPus5IpVvp6ujXv6bKV2zPzI9vpbAmpJigsL/H6DPvPjmf7/Q9yVKEke//8fgeQ45abjgnLuyYxAiw==",
+      "version": "5.101.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.101.2.tgz",
+      "integrity": "sha512-o+wHcqgN7Pp0s8v1i0UGq/ZrrEKrxdIiMQmKRdYb2w7NPtylYSJ4+wg/tIn71m9DLstwUwdEGAvROdly6HXP6w==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.100.10",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.100.10.tgz",
-      "integrity": "sha512-FLaZf2RCrA/Zgp4aiu5tG3TyasTRO7aZ99skxQpr3Hg/zXOhu6yq5FZCYQ/tRaJtM9ylnoK8tFK7PolXQadv6Q==",
+      "version": "5.101.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.101.2.tgz",
+      "integrity": "sha512-seDkr6kzGzX1okaaTtZPtgA688CDPlXUz1C6xSg0ESqn04Vuc8tlrYms1s3de+znBqhPVxFRfpAfUf+6XvfPWg==",
+      "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.100.10"
+        "@tanstack/query-core": "5.101.2"
       },
       "funding": {
         "type": "github",
@@ -3728,18 +2675,19 @@
       }
     },
     "node_modules/@tanstack/react-query-devtools": {
-      "version": "5.100.10",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.100.10.tgz",
-      "integrity": "sha512-zes0+o9ef5rAZXJ9f/SeaLs2nufJaeVkZkl/Or9NGrWVF41kL9Od9ED9nCwtQlgiF2VGtrzhEw5AU/igAO+aAg==",
+      "version": "5.101.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.101.2.tgz",
+      "integrity": "sha512-eU7HctdA9gDjqoERoEdzLbw9DiqnBDfh5+Hu0u26gjqoHJezOpQAuiesDL2VvkU+2cPV76zgv0tMZsOrI4LjnQ==",
+      "license": "MIT",
       "dependencies": {
-        "@tanstack/query-devtools": "5.100.10"
+        "@tanstack/query-devtools": "5.101.2"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "@tanstack/react-query": "^5.100.10",
+        "@tanstack/react-query": "^5.101.2",
         "react": "^18 || ^19"
       }
     },
@@ -3747,6 +2695,7 @@
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -3761,24 +2710,16 @@
         "node": ">=18"
       }
     },
-    "node_modules/@testing-library/dom/node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
-      "version": "6.6.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.4.tgz",
-      "integrity": "sha512-xDXgLjVunjHqczScfkCJ9iyjdNOVHvvCdqHSSxwM9L0l/wHkTRum67SDc020uAlCoqktJplgO2AAQeLP1wgqDQ==",
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "license": "MIT",
       "dependencies": {
         "@adobe/css-tools": "^4.4.0",
         "aria-query": "^5.0.0",
         "css.escape": "^1.5.1",
         "dom-accessibility-api": "^0.6.3",
-        "lodash": "^4.17.21",
         "picocolors": "^1.1.1",
         "redent": "^3.0.0"
       },
@@ -3791,12 +2732,14 @@
     "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
-      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w=="
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "license": "MIT"
     },
     "node_modules/@testing-library/react": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.0.tgz",
-      "integrity": "sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==",
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
+      "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5"
       },
@@ -3820,507 +2763,277 @@
       }
     },
     "node_modules/@testing-library/user-event": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
-      "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5"
-      },
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "license": "MIT",
       "engines": {
-        "node": ">=10",
+        "node": ">=12",
         "npm": ">=6"
       },
       "peerDependencies": {
         "@testing-library/dom": ">=7.21.4"
       }
     },
-    "node_modules/@tootallnate/once": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
-      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@trysound/sax": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
-      "engines": {
-        "node": ">=10.13.0"
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
+      "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
       }
     },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
-      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "license": "MIT"
     },
-    "node_modules/@types/babel__core": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
-      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
       }
     },
-    "node_modules/@types/babel__generator": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
-      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
-      "dependencies": {
-        "@babel/types": "^7.0.0"
-      }
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/@types/babel__template": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
-      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "dependencies": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__traverse": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
-      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
-      "dependencies": {
-        "@babel/types": "^7.28.2"
-      }
-    },
-    "node_modules/@types/body-parser": {
-      "version": "1.19.6",
-      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
-      "integrity": "sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==",
-      "dependencies": {
-        "@types/connect": "*",
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/bonjour": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.13.tgz",
-      "integrity": "sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/connect": {
-      "version": "3.4.38",
-      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
-      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/connect-history-api-fallback": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz",
-      "integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==",
-      "dependencies": {
-        "@types/express-serve-static-core": "*",
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/eslint": {
-      "version": "8.56.12",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
-      "integrity": "sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==",
-      "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
+    "node_modules/@types/esrecurse": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
+      "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==",
+      "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=="
-    },
-    "node_modules/@types/express": {
-      "version": "4.17.23",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.23.tgz",
-      "integrity": "sha512-Crp6WY9aTYP3qPi2wGDo9iUe/rceX01UMhnF1jmwDcKCFM6cx7YhGP/Mpr3y9AASpfHixIG0E6azCcL5OcDHsQ==",
-      "dependencies": {
-        "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^4.17.33",
-        "@types/qs": "*",
-        "@types/serve-static": "*"
-      }
-    },
-    "node_modules/@types/express-serve-static-core": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.7.tgz",
-      "integrity": "sha512-R+33OsgWw7rOhD1emjU7dzCDHucJrgJXMA5PYCzJxVil0dsyx5iBEPHqpPfiKNJQb7lZ1vxwoLR4Z87bBUpeGQ==",
-      "dependencies": {
-        "@types/node": "*",
-        "@types/qs": "*",
-        "@types/range-parser": "*",
-        "@types/send": "*"
-      }
-    },
-    "node_modules/@types/express/node_modules/@types/express-serve-static-core": {
-      "version": "4.19.6",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz",
-      "integrity": "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==",
-      "dependencies": {
-        "@types/node": "*",
-        "@types/qs": "*",
-        "@types/range-parser": "*",
-        "@types/send": "*"
-      }
-    },
-    "node_modules/@types/graceful-fs": {
-      "version": "4.1.9",
-      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
-      "integrity": "sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/html-minifier-terser": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
-      "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
-    },
-    "node_modules/@types/http-errors": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.5.tgz",
-      "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg=="
-    },
-    "node_modules/@types/http-proxy": {
-      "version": "1.17.16",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.16.tgz",
-      "integrity": "sha512-sdWoUajOB1cd0A8cRRQ1cfyWNbmFKLAqBB89Y8x5iYyG/mkJHc0YUH8pdWBy2omi9qtCpiIgGjuwO0dQST2l5w==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/istanbul-lib-coverage": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
-      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w=="
-    },
-    "node_modules/@types/istanbul-lib-report": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
-      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "*"
-      }
-    },
-    "node_modules/@types/istanbul-reports": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
-      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
-      }
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
     },
     "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=="
-    },
-    "node_modules/@types/json5": {
-      "version": "0.0.29",
-      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
-      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
-    },
-    "node_modules/@types/mime": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
-      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "24.2.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.2.1.tgz",
-      "integrity": "sha512-DRh5K+ka5eJic8CjH7td8QpYEV6Zo10gfRkjHCO3weqZHWDtAaSTFtl4+VMqOJ4N5jcuhZ9/l+yy8rVgw7BQeQ==",
+      "version": "24.13.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.3.tgz",
+      "integrity": "sha512-Dh8vAsV36ig5wa9OX4pXvMc9D3Veibfw2wix0CUwYODLD8nkj9UsLjASr49nPg+2eKzxhBV+v7L8pXvT4e639Q==",
+      "devOptional": true,
+      "license": "MIT",
       "dependencies": {
-        "undici-types": "~7.10.0"
-      }
-    },
-    "node_modules/@types/node-forge": {
-      "version": "1.3.13",
-      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.13.tgz",
-      "integrity": "sha512-zePQJSW5QkwSHKRApqWCVKeKoSOt4xvEnLENZPjyvm9Ezdf/EyDeJM7jqLzOwjVICQQzvLZ63T55MKdJB5H6ww==",
-      "dependencies": {
-        "@types/node": "*"
+        "undici-types": "~7.18.0"
       }
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
-      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
-    },
-    "node_modules/@types/prettier": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
-      "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA=="
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
     },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
-      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw=="
-    },
-    "node_modules/@types/q": {
-      "version": "1.5.8",
-      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.8.tgz",
-      "integrity": "sha512-hroOstUScF6zhIi+5+x0dzqrHA1EJi+Irri6b1fxolMTqqHIV/Cg77EtnQcZqZCu8hR3mX2BzIxN4/GzI68Kfw=="
-    },
-    "node_modules/@types/qs": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
-      "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ=="
-    },
-    "node_modules/@types/range-parser": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
-      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.1.10",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.10.tgz",
-      "integrity": "sha512-EhBeSYX0Y6ye8pNebpKrwFJq7BoQ8J5SO6NlvNwwHjSj6adXJViPQrKlsyPw7hLBLvckEMO1yxeGdR82YBBlDg==",
-      "peer": true,
+      "version": "19.2.17",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
+      "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
+      "license": "MIT",
       "dependencies": {
-        "csstype": "^3.0.2"
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
       }
     },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.12",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
       "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
       "peerDependencies": {
         "@types/react": "*"
       }
     },
-    "node_modules/@types/resolve": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
-      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/retry": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
-    },
-    "node_modules/@types/semver": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA=="
-    },
-    "node_modules/@types/send": {
-      "version": "0.17.5",
-      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.5.tgz",
-      "integrity": "sha512-z6F2D3cOStZvuk2SaP6YrwkNO65iTZcwA2ZkSABegdkAh/lf+Aa/YQndZVfmEXT5vgAp6zv06VQ3ejSVjAny4w==",
-      "dependencies": {
-        "@types/mime": "^1",
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/serve-index": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.4.tgz",
-      "integrity": "sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==",
-      "dependencies": {
-        "@types/express": "*"
-      }
-    },
-    "node_modules/@types/serve-static": {
-      "version": "1.15.8",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.8.tgz",
-      "integrity": "sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==",
-      "dependencies": {
-        "@types/http-errors": "*",
-        "@types/node": "*",
-        "@types/send": "*"
-      }
-    },
-    "node_modules/@types/sockjs": {
-      "version": "0.3.36",
-      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.36.tgz",
-      "integrity": "sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/stack-utils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
-      "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
-    },
-    "node_modules/@types/trusted-types": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
-      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
-    },
-    "node_modules/@types/use-sync-external-store": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
-      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="
-    },
-    "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==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/yargs": {
-      "version": "16.0.9",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.9.tgz",
-      "integrity": "sha512-tHhzvkFXZQeTECenFoRljLBYPZJ7jAVxqqtEI0qTLOmuultnFp4I9yKE17vTuhf7BkhCu7I4XuemPgikDVuYqA==",
-      "dependencies": {
-        "@types/yargs-parser": "*"
-      }
-    },
-    "node_modules/@types/yargs-parser": {
-      "version": "21.0.3",
-      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
-      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ=="
-    },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
-      "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
+      "version": "8.63.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.63.0.tgz",
+      "integrity": "sha512-rvwSgqT+DHpWdzfSzPatRLm02a0GlESt++9iy3hLCDY4BgkaLcl8LBi9Yh7XGFBpwcBE/K3024QuXWTpbz4FfQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/type-utils": "5.62.0",
-        "@typescript-eslint/utils": "5.62.0",
-        "debug": "^4.3.4",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.2.0",
-        "natural-compare-lite": "^1.4.0",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.63.0",
+        "@typescript-eslint/type-utils": "8.63.0",
+        "@typescript-eslint/utils": "8.63.0",
+        "@typescript-eslint/visitor-keys": "8.63.0",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.5.0"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^5.0.0",
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+        "@typescript-eslint/parser": "^8.63.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/@typescript-eslint/experimental-utils": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.62.0.tgz",
-      "integrity": "sha512-RTXpeB3eMkpoclG3ZHft6vG/Z30azNHuqY6wKPBHlVMZFuEvrtlEDe8gMqDb+SO+9hjC/pLekeSCryf9vMZlCw==",
-      "dependencies": {
-        "@typescript-eslint/utils": "5.62.0"
-      },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.6.tgz",
+      "integrity": "sha512-BAg6QkE8W+TuQLrrw0Ugr7HegXduRuuj8/ti2kSOc+jz1dmx8/WNcjr6XGnq5YpDWxFwwaavqD0+jIUOKelTsw==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "node": ">= 4"
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
-      "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
+      "version": "8.63.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.63.0.tgz",
+      "integrity": "sha512-gwh4gvvlaVDKKxyfxMG+Gnu1u9X0OQBwyGLkbwB65dIzBKnxeRiJlNFqlI3zwVhNXJIs6qV7mlFCn/BIajlVig==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "debug": "^4.3.4"
+        "@typescript-eslint/scope-manager": "8.63.0",
+        "@typescript-eslint/types": "8.63.0",
+        "@typescript-eslint/typescript-estree": "8.63.0",
+        "@typescript-eslint/visitor-keys": "8.63.0",
+        "debug": "^4.4.3"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.63.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.63.0.tgz",
+      "integrity": "sha512-e5dh0/UI0ok53AlZ5wRkXCB32z/f2jUZqPR/ygAw5WYaSw8j9EoJWlS7wQjr/dmOaqWjnPIn2m+HhVPCMWGZVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.63.0",
+        "@typescript-eslint/types": "^8.63.0",
+        "debug": "^4.4.3"
       },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+      "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.1.0"
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
-      "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
+      "version": "8.63.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.63.0.tgz",
+      "integrity": "sha512-uUyfMWCnDSN8bCpcrY8nGP2BLkQ9Xn0GsipcONcpIDWhwhO4ZSyHvyS14U3X75mzxWxL3I2UZIrenTzdzcJO8A==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/visitor-keys": "5.62.0"
+        "@typescript-eslint/types": "8.63.0",
+        "@typescript-eslint/visitor-keys": "8.63.0"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz",
-      "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==",
-      "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "@typescript-eslint/utils": "5.62.0",
-        "debug": "^4.3.4",
-        "tsutils": "^3.21.0"
-      },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.63.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.63.0.tgz",
+      "integrity": "sha512-sUAbkulqBAsncKnbRP3+7CtQFRKicexnj7ZwNC6ddCR7EmrXvjvdCYMJbUIqMd6lwoEriZjwLo08aS5tSjVMHg==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "*"
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.63.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.63.0.tgz",
+      "integrity": "sha512-Nzzh/OGxVCOjObjaj1CQF2RUasyYy2Jfuh+zZ3PjLzG2fYRriAiZLib9UKtO+CpQAS3YHiAS+ckZDclwqI1TPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.63.0",
+        "@typescript-eslint/typescript-estree": "8.63.0",
+        "@typescript-eslint/utils": "8.63.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.5.0"
       },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+      "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 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
-      "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
+      "version": "8.63.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.63.0.tgz",
+      "integrity": "sha512-xyLtl9DUBBFrcJS4x2pIqGLH68/tC2uOa4Z7pUteW09D3bXnnXUom4dyPikzWgB7llmIc1zoeI3aoUdC4rPK/Q==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
@@ -4328,268 +3041,258 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
-      "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
+      "version": "8.63.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.63.0.tgz",
+      "integrity": "sha512-ygBkU+B7ex5UI/gKhaqexWev79uISfIv7XQCRNYO/jmD8rGLPyWLAb3KMRT6nd8Gt9bmUBi9+iX6tBdYfOY81Q==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/visitor-keys": "5.62.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
+        "@typescript-eslint/project-service": "8.63.0",
+        "@typescript-eslint/tsconfig-utils": "8.63.0",
+        "@typescript-eslint/types": "8.63.0",
+        "@typescript-eslint/visitor-keys": "8.63.0",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.5.0"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "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.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.63.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.63.0.tgz",
+      "integrity": "sha512-fUKaeAvrTuQg/Tgt3nliAUSZHJM6DlCcfyEmxCvlX8kieWSStBX+5O5Fnidtc3i2JrH+9c/GL4RY2iasd/GPTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.63.0",
+        "@typescript-eslint/types": "8.63.0",
+        "@typescript-eslint/typescript-estree": "8.63.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 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.63.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.63.0.tgz",
+      "integrity": "sha512-UexrHGnGTpbuQHct2ExOc2ZcFbGUS9FOesCxxqdBGcpI1BxYu/LZ6U8Aq6/72XtF/qRBk9nhuGHFJIXXMhPMdw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.63.0",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.3.tgz",
+      "integrity": "sha512-vmFvco5/QuC2f9Oj+wTk0+9XeDFkHxSamwZKYc7MxYwKICfvUvlMhqKI0VuICPltGqh1neqBKDvO4kes1ya8vg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "vite": "^8.0.0"
+      },
       "peerDependenciesMeta": {
-        "typescript": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
           "optional": true
         }
       }
     },
-    "node_modules/@typescript-eslint/utils": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz",
-      "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==",
+    "node_modules/@vitest/coverage-v8": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.1.11.tgz",
+      "integrity": "sha512-8MVGEFnJIcdGjcbfKmeq8z0pZHH0JlVtoVZH9Q/qwUp6wyFnEJUBMrw9DCaj+ra3vShGmhavjalMIhPNxZAUcw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@types/json-schema": "^7.0.9",
-        "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "eslint-scope": "^5.1.1",
-        "semver": "^7.3.7"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "@bcoe/v8-coverage": "^1.0.2",
+        "@vitest/utils": "4.1.11",
+        "ast-v8-to-istanbul": "^1.0.0",
+        "istanbul-lib-coverage": "^3.2.2",
+        "istanbul-lib-report": "^3.0.1",
+        "istanbul-reports": "^3.2.0",
+        "magicast": "^0.5.2",
+        "obug": "^2.1.1",
+        "std-env": "^4.0.0-rc.1",
+        "tinyrainbow": "^3.1.0"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+        "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
+        "@vitest/browser": "4.1.11",
+        "vitest": "4.1.11"
       },
-      "engines": {
-        "node": ">=8.0.0"
+      "peerDependenciesMeta": {
+        "@vitest/browser": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@typescript-eslint/utils/node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
-      "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
+    "node_modules/@vitest/expect": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.11.tgz",
+      "integrity": "sha512-VX2x5vNJXET47KAFzwERI+KRMtTTCSWTfSMKsW7JsUsXV4psq++e3DvZpuTDOpHcxytiDs6p2nhVb2tVDiiUYw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "5.62.0",
-        "eslint-visitor-keys": "^3.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.11",
+        "@vitest/utils": "4.1.11",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
+        "url": "https://opencollective.com/vitest"
       }
     },
-    "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=="
-    },
-    "node_modules/@webassemblyjs/ast": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
-      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.11.tgz",
+      "integrity": "sha512-2XJVD55d1o5AZous5CCGKS74g/riOj9odEt2bQpCVZeblHyHdnMeFl4jl0XjU21stf4mbjUkew2eXQZt65g5CQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.13.2",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
-      }
-    },
-    "node_modules/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
-      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA=="
-    },
-    "node_modules/@webassemblyjs/helper-api-error": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
-      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ=="
-    },
-    "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
-      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA=="
-    },
-    "node_modules/@webassemblyjs/helper-numbers": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
-      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
-      "dependencies": {
-        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
-        "@webassemblyjs/helper-api-error": "1.13.2",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
-      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA=="
-    },
-    "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
-      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/wasm-gen": "1.14.1"
-      }
-    },
-    "node_modules/@webassemblyjs/ieee754": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
-      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
-      "dependencies": {
-        "@xtuc/ieee754": "^1.2.0"
-      }
-    },
-    "node_modules/@webassemblyjs/leb128": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
-      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
-      "dependencies": {
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@webassemblyjs/utf8": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
-      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ=="
-    },
-    "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
-      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/helper-wasm-section": "1.14.1",
-        "@webassemblyjs/wasm-gen": "1.14.1",
-        "@webassemblyjs/wasm-opt": "1.14.1",
-        "@webassemblyjs/wasm-parser": "1.14.1",
-        "@webassemblyjs/wast-printer": "1.14.1"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
-      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/ieee754": "1.13.2",
-        "@webassemblyjs/leb128": "1.13.2",
-        "@webassemblyjs/utf8": "1.13.2"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
-      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/wasm-gen": "1.14.1",
-        "@webassemblyjs/wasm-parser": "1.14.1"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
-      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-api-error": "1.13.2",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/ieee754": "1.13.2",
-        "@webassemblyjs/leb128": "1.13.2",
-        "@webassemblyjs/utf8": "1.13.2"
-      }
-    },
-    "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
-      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
-    },
-    "node_modules/@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
-    },
-    "node_modules/abab": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
-      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
-      "deprecated": "Use your platform's native atob() and btoa() methods instead"
-    },
-    "node_modules/accepts": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-      "dependencies": {
-        "mime-types": "~2.1.34",
-        "negotiator": "0.6.3"
+        "@vitest/spy": "4.1.11",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
       },
-      "engines": {
-        "node": ">= 0.6"
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
       }
     },
-    "node_modules/accepts/node_modules/negotiator": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-      "engines": {
-        "node": ">= 0.6"
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.11.tgz",
+      "integrity": "sha512-yiZzPbGTS9Sr/JpFl8zHrcIkAofNbFV6k21vIgQN/cY/oxZeXhJv5sc/MBJ5jFKWmWs+oJHw0UXLZjmf931+Vw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.11.tgz",
+      "integrity": "sha512-LztvUgdwMNJMIkj3hQnnxiC2Xy1zNxq928W/xhjCLaNCzqTZOudjwbQf6v9IntZGPw132i2Lq2rgTRZHD3JHNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.11",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.11.tgz",
+      "integrity": "sha512-pN7ikn1ON7h8ee4gIAp4AzyK+zBtJPzVbqOgu5LCEh4VaJVbPQcgYQYJIMGQPXVeJJq1fnfazis7a5pFNPahog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.11",
+        "@vitest/utils": "4.1.11",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.11.tgz",
+      "integrity": "sha512-apNa/prQy2qCeywhnixOHPRCgGNhvg7T4Dapfl1GahLp/R+uhBm5cPyFoNVyqsNd2h1nJxL6BqqdIjiABL60YA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.11.tgz",
+      "integrity": "sha512-zTCVGpyFsGWBhllOyKlTw/vnr6D9qxsfSDyfbyZmTyjHw5N/VuvzHpHoQjm2ZJzn4RJgx5w4r7V0er69CmLgPQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.11",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils/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/acorn": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
-      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
+      "integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
+      "dev": true,
+      "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4597,119 +3300,22 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-globals": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
-      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
-      "dependencies": {
-        "acorn": "^7.1.1",
-        "acorn-walk": "^7.1.1"
-      }
-    },
-    "node_modules/acorn-globals/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/acorn-import-phases": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
-      "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
-      "engines": {
-        "node": ">=10.13.0"
-      },
-      "peerDependencies": {
-        "acorn": "^8.14.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/acorn-walk": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/address": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
-      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/adjust-sourcemap-loader": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
-      "integrity": "sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==",
-      "dependencies": {
-        "loader-utils": "^2.0.0",
-        "regex-parser": "^2.2.11"
-      },
-      "engines": {
-        "node": ">=8.9"
-      }
-    },
-    "node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "dependencies": {
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6.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==",
-      "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/ajv-formats": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "dependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependencies": {
-        "ajv": "^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ajv": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
+      "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -4721,520 +3327,106 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "peerDependencies": {
-        "ajv": "^6.9.1"
-      }
-    },
     "node_modules/ansi-escapes": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.3.0.tgz",
+      "integrity": "sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "type-fest": "^0.21.3"
+        "environment": "^1.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/ansi-escapes/node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/ansi-html": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.9.tgz",
-      "integrity": "sha512-ozbS3LuenHVxNRh/wdnN16QapUHzauqSomAl1jwwJRRsGwFwtj644lIhxfWu0Fy0acCij2+AEgHvjscq3dlVXg==",
-      "engines": [
-        "node >= 0.8.0"
-      ],
-      "bin": {
-        "ansi-html": "bin/ansi-html"
-      }
-    },
-    "node_modules/ansi-html-community": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
-      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
-      "engines": [
-        "node >= 0.8.0"
-      ],
-      "bin": {
-        "ansi-html": "bin/ansi-html"
-      }
-    },
     "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==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "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==",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
       },
       "funding": {
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
-    },
     "node_modules/argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dependencies": {
-        "sprintf-js": "~1.0.2"
+      "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/argue-cli": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/argue-cli/-/argue-cli-3.1.0.tgz",
+      "integrity": "sha512-DhBpBfXL4SS2uC0N922MMajKR3CdrTG0u2or1PNYgXMsrSzViJrbtvT0nCLlLGUI0plam/ZZCs7aAauHtW9thw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=22"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/dangreen"
       }
     },
     "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==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/array-buffer-byte-length": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
-      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "is-array-buffer": "^3.0.5"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "dequal": "^2.0.3"
       }
     },
-    "node_modules/array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
-    },
-    "node_modules/array-includes": {
-      "version": "3.1.9",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
-      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.24.0",
-        "es-object-atoms": "^1.1.1",
-        "get-intrinsic": "^1.3.0",
-        "is-string": "^1.1.1",
-        "math-intrinsics": "^1.1.0"
-      },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=12"
       }
     },
-    "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==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/array.prototype.findlast": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
-      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "es-shim-unscopables": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/array.prototype.findlastindex": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
-      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.9",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "es-shim-unscopables": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/array.prototype.flat": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
-      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.5",
-        "es-shim-unscopables": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/array.prototype.flatmap": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
-      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.5",
-        "es-shim-unscopables": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/array.prototype.reduce": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.8.tgz",
-      "integrity": "sha512-DwuEqgXFBwbmZSRqt3BpQigWNUoqw9Ml2dTWdF3B2zQlQX4OeUE0zyuzX0fX0IbTvjdkZbcBTU3idgpO78qkTw==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.9",
-        "es-array-method-boxes-properly": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "is-string": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/array.prototype.tosorted": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
-      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.3",
-        "es-errors": "^1.3.0",
-        "es-shim-unscopables": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/arraybuffer.prototype.slice": {
+    "node_modules/ast-v8-to-istanbul": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
-      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-1.0.4.tgz",
+      "integrity": "sha512-0bC0/4bTSrnwdhU3IsZDwEdojvuPrSg59OYZfKsLRtJZ0u8VBx9DebfqqG8bRdCC0I7vjgxmPi41P0lpkhJHtA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.1",
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.5",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6",
-        "is-array-buffer": "^3.0.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "@jridgewell/trace-mapping": "^0.3.31",
+        "estree-walker": "^3.0.3",
+        "js-tokens": "^10.0.0"
       }
     },
-    "node_modules/asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
-    },
-    "node_modules/ast-types-flow": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
-      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ=="
-    },
-    "node_modules/async": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
-      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA=="
-    },
-    "node_modules/async-function": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
-      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
-      "engines": {
-        "node": ">= 0.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=="
-    },
-    "node_modules/at-least-node": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
-      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
-    "node_modules/autoprefixer": {
-      "version": "10.4.21",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
-      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "browserslist": "^4.24.4",
-        "caniuse-lite": "^1.0.30001702",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/available-typed-arrays": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
-      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
-      "dependencies": {
-        "possible-typed-array-names": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/axe-core": {
-      "version": "4.10.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz",
-      "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/axios": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.16.0.tgz",
-      "integrity": "sha512-6hp5CwvTPlN2A31g5dxnwAX0orzM7pmCRDLnZSX772mv8WDqICwFjowHuPs04Mc8deIld1+ejhtaMn5vp6b+1w==",
-      "dependencies": {
-        "follow-redirects": "^1.16.0",
-        "form-data": "^4.0.5",
-        "proxy-from-env": "^2.1.0"
-      }
-    },
-    "node_modules/axios/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==",
-      "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/axobject-query": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
-      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/babel-jest": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
-      "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==",
-      "dependencies": {
-        "@jest/transform": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/babel__core": "^7.1.14",
-        "babel-plugin-istanbul": "^6.1.1",
-        "babel-preset-jest": "^27.5.1",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.9",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.8.0"
-      }
-    },
-    "node_modules/babel-loader": {
-      "version": "8.4.1",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.4.1.tgz",
-      "integrity": "sha512-nXzRChX+Z1GoE6yWavBQg6jDslyFF3SDjl2paADuoQtQW10JqShJt62R6eJQ5m/pjJFDT8xgKIWSP85OY8eXeA==",
-      "dependencies": {
-        "find-cache-dir": "^3.3.1",
-        "loader-utils": "^2.0.4",
-        "make-dir": "^3.1.0",
-        "schema-utils": "^2.6.5"
-      },
-      "engines": {
-        "node": ">= 8.9"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0",
-        "webpack": ">=2"
-      }
-    },
-    "node_modules/babel-loader/node_modules/schema-utils": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-      "dependencies": {
-        "@types/json-schema": "^7.0.5",
-        "ajv": "^6.12.4",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 8.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
-    "node_modules/babel-plugin-istanbul": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
-      "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@istanbuljs/load-nyc-config": "^1.0.0",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-instrument": "^5.0.4",
-        "test-exclude": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/babel-plugin-jest-hoist": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz",
-      "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==",
-      "dependencies": {
-        "@babel/template": "^7.3.3",
-        "@babel/types": "^7.3.3",
-        "@types/babel__core": "^7.0.0",
-        "@types/babel__traverse": "^7.0.6"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
+    "node_modules/ast-v8-to-istanbul/node_modules/js-tokens": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz",
+      "integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/babel-plugin-macros": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
       "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "cosmiconfig": "^7.0.0",
@@ -5245,268 +3437,82 @@
         "npm": ">=6"
       }
     },
-    "node_modules/babel-plugin-named-asset-import": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz",
-      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==",
-      "peerDependencies": {
-        "@babel/core": "^7.1.0"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-corejs2": {
-      "version": "0.4.14",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.14.tgz",
-      "integrity": "sha512-Co2Y9wX854ts6U8gAAPXfn0GmAyctHuK8n0Yhfjd6t30g7yvKjspvvOo9yG+z52PZRgFErt7Ka2pYnXCjLKEpg==",
+    "node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.27.7",
-        "@babel/helper-define-polyfill-provider": "^0.6.5",
-        "semver": "^6.3.1"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.13.0.tgz",
-      "integrity": "sha512-U+GNwMdSFgzVmfhNm8GJUX88AadB3uo9KpJqS3FaqNIPKgySuvMb+bHPsOmmuWyIcuqZj/pzt1RUIUZns4y2+A==",
-      "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.6.5",
-        "core-js-compat": "^3.43.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-regenerator": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.5.tgz",
-      "integrity": "sha512-ISqQ2frbiNU9vIJkzg7dlPpznPZ4jOiUQ1uSmB0fEHeowtN3COYRsXr/xexn64NpU13P06jc/L5TgiJXOgrbEg==",
-      "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.6.5"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
-    "node_modules/babel-plugin-transform-react-remove-prop-types": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
-      "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA=="
-    },
-    "node_modules/babel-preset-current-node-syntax": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.2.0.tgz",
-      "integrity": "sha512-E/VlAEzRrsLEb2+dv8yp3bo4scof3l9nR4lrld+Iy5NyVqgVYUJnDAmunkhPMisRI32Qc4iRiz425d8vM++2fg==",
-      "dependencies": {
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/plugin-syntax-bigint": "^7.8.3",
-        "@babel/plugin-syntax-class-properties": "^7.12.13",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5",
-        "@babel/plugin-syntax-import-attributes": "^7.24.7",
-        "@babel/plugin-syntax-import-meta": "^7.10.4",
-        "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
-        "@babel/plugin-syntax-top-level-await": "^7.14.5"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0 || ^8.0.0-0"
-      }
-    },
-    "node_modules/babel-preset-jest": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz",
-      "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==",
-      "dependencies": {
-        "babel-plugin-jest-hoist": "^27.5.1",
-        "babel-preset-current-node-syntax": "^1.0.0"
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
       },
       "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
+        "node": ">=10"
       }
     },
-    "node_modules/babel-preset-react-app": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-react-app/-/babel-preset-react-app-10.1.0.tgz",
-      "integrity": "sha512-f9B1xMdnkCIqe+2dHrJsoQFRz7reChaAHE/65SdaykPklQqhme2WaC08oD3is77x9ff98/9EazAKFDZv5rFEQg==",
-      "dependencies": {
-        "@babel/core": "^7.16.0",
-        "@babel/plugin-proposal-class-properties": "^7.16.0",
-        "@babel/plugin-proposal-decorators": "^7.16.4",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
-        "@babel/plugin-proposal-numeric-separator": "^7.16.0",
-        "@babel/plugin-proposal-optional-chaining": "^7.16.0",
-        "@babel/plugin-proposal-private-methods": "^7.16.0",
-        "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
-        "@babel/plugin-transform-flow-strip-types": "^7.16.0",
-        "@babel/plugin-transform-react-display-name": "^7.16.0",
-        "@babel/plugin-transform-runtime": "^7.16.4",
-        "@babel/preset-env": "^7.16.4",
-        "@babel/preset-react": "^7.16.0",
-        "@babel/preset-typescript": "^7.16.0",
-        "@babel/runtime": "^7.16.3",
-        "babel-plugin-macros": "^3.1.0",
-        "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
-      }
-    },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
-      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-create-class-features-plugin": "^7.21.0",
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
-      },
+    "node_modules/babel-plugin-macros/node_modules/yaml": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
+      "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
+      "license": "ISC",
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">= 6"
       }
     },
     "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=="
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
     },
-    "node_modules/batch": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
-    },
-    "node_modules/bfj": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.1.0.tgz",
-      "integrity": "sha512-I6MMLkn+anzNdCUp9hMRyui1HaNEUCco50lxbvNS4+EyXg8lN3nJ48PjPWtbH8UVS9CuMoaKE9U2V3l29DaRQw==",
-      "dependencies": {
-        "bluebird": "^3.7.2",
-        "check-types": "^11.2.3",
-        "hoopy": "^0.1.4",
-        "jsonpath": "^1.1.1",
-        "tryer": "^1.0.1"
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.43",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.43.tgz",
+      "integrity": "sha512-AjYpR78kDWAY3Efj+cDTFH9t9SCoL7OoTp1BOb0mQV7S+6CiLwnWM3FyxhJtdPufDFKzmCSFoUncKjWgJEZTCQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
       },
       "engines": {
-        "node": ">= 8.0.0"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/bluebird": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
-    },
-    "node_modules/body-parser": {
-      "version": "1.20.3",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
-      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.5",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.13.0",
-        "raw-body": "2.5.2",
-        "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
+        "require-from-string": "^2.0.2"
       }
     },
-    "node_modules/body-parser/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/body-parser/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/body-parser/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/bonjour-service": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.3.0.tgz",
-      "integrity": "sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "multicast-dns": "^7.2.5"
-      }
-    },
-    "node_modules/boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
-    },
     "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==",
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
       }
     },
     "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==",
+      "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -5514,15 +3520,35 @@
         "node": ">=8"
       }
     },
-    "node_modules/browser-process-hrtime": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
-      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
+    "node_modules/broadcast-channel": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-7.3.0.tgz",
+      "integrity": "sha512-UHPhLBQKfQ8OmMFMpmPfO5dRakyA1vsfiDGWTYNvChYol65tbuhivPEGgZZiuetorvExdvxaWiBy/ym1Ty08yA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "7.28.6",
+        "oblivious-set": "2.0.0",
+        "p-queue": "6.6.2",
+        "unload": "2.4.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/pubkey"
+      }
+    },
+    "node_modules/broadcast-channel/node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
     },
     "node_modules/browserslist": {
-      "version": "4.25.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.2.tgz",
-      "integrity": "sha512-0si2SJK3ooGzIawRu61ZdPCO1IncZwS8IzuX73sPZsXW6EQ/w/DAfPyKI8l1ETTCr2MnvqWitmlCUxgdul45jA==",
+      "version": "4.28.6",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.6.tgz",
+      "integrity": "sha512-FQBYNK15VMslhLHpA7+n+n1GOlF1kId2xcCg7/j95f24AOF6VDYMNH4mFxF7KuaTdv627faazpOAjFzMrfJOUw==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5537,11 +3563,13 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001733",
-        "electron-to-chromium": "^1.5.199",
-        "node-releases": "^2.0.19",
-        "update-browserslist-db": "^1.1.3"
+        "baseline-browser-mapping": "^2.10.42",
+        "caniuse-lite": "^1.0.30001803",
+        "electron-to-chromium": "^1.5.389",
+        "node-releases": "^2.0.51",
+        "update-browserslist-db": "^1.2.3"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -5550,133 +3578,20 @@
         "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==",
-      "dependencies": {
-        "node-int64": "^0.4.0"
-      }
-    },
-    "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
-    },
-    "node_modules/builtin-modules": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
-      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/call-bind": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
-      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.0",
-        "es-define-property": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "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==",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/call-bound": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
-      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "get-intrinsic": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "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==",
-      "dependencies": {
-        "pascal-case": "^3.1.2",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/camelcase": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/caniuse-api": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
-      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
-      "dependencies": {
-        "browserslist": "^4.0.0",
-        "caniuse-lite": "^1.0.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.uniq": "^4.5.0"
-      }
-    },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001734",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001734.tgz",
-      "integrity": "sha512-uhE1Ye5vgqju6OI71HTQqcBCZrvHugk0MjLak7Q+HfoBgoq5Bi+5YnwjP4fjDgrtYr/l8MVRBvzz9dPD4KyK0A==",
+      "version": "1.0.30001805",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001805.tgz",
+      "integrity": "sha512-52noaS3DubycKSXaU30TwPGIp+POyQSUVa5jBEq3vkRkY0kjyb3LQgvhU6WGyCcyXqVLWO0Cw0Q6BSdD0kUfVA==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5690,443 +3605,241 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
-    },
-    "node_modules/case-sensitive-paths-webpack-plugin": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
-      "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "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/char-regex": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
-      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/check-types": {
-      "version": "11.2.3",
-      "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.3.tgz",
-      "integrity": "sha512-+67P1GkJRaxQD6PKK0Et9DhwQB+vGg3PM5+aavopCpZT1lj9jeqfvpgTLAWErNj8qApkkmXlu/Ug74kmhagkXg=="
-    },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/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==",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/chrome-trace-event": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
-      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
-    "node_modules/ci-info": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
-      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/sibiraj-s"
-        }
       ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       }
     },
-    "node_modules/cjs-module-lexer": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.3.tgz",
-      "integrity": "sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q=="
-    },
-    "node_modules/clean-css": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
-      "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
+    "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": {
-        "source-map": "~0.6.0"
+        "restore-cursor": "^5.0.0"
       },
       "engines": {
-        "node": ">= 10.0"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/clean-css/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==",
+    "node_modules/cli-truncate": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-5.2.0.tgz",
+      "integrity": "sha512-xRwvIOMGrfOAnM1JYtqQImuaNtDEv9v6oIYAs4LIHwTiKee8uwvIi363igssOC0O5U04i4AlENs79LQLu9tEMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "slice-ansi": "^8.0.0",
+        "string-width": "^8.2.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/cliui": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-9.0.1.tgz",
+      "integrity": "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^7.0.0"
+        "string-width": "^7.2.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cliui/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/cliui/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/cliui/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/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/co": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
-      "engines": {
-        "iojs": ">= 1.0.0",
-        "node": ">= 0.12.0"
-      }
-    },
-    "node_modules/coa": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
-      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
+    "node_modules/conventional-changelog-angular": {
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-9.2.1.tgz",
+      "integrity": "sha512-oWSL6ZhnXbYraOFTK3PgRAQJ8fADDAEv5K6AdeyQPLvjFmhG8+ejL0jZZp/R7vTmGJaBvZEE+sE7dB4bCv7sAw==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "@types/q": "^1.5.1",
-        "chalk": "^2.4.1",
-        "q": "^1.1.2"
+        "@conventional-changelog/template": "^1.2.1"
       },
       "engines": {
-        "node": ">= 4.0"
+        "node": ">=22"
       }
     },
-    "node_modules/coa/node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+    "node_modules/conventional-changelog-conventionalcommits": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-10.2.1.tgz",
+      "integrity": "sha512-n4Kr1HFMTf3iMbES0TMxKIcYtUUv4rKqyQQp2JwfOEfFCOfGT3Tq4mCyJ8S9/YPyWhydjfKrrvnyl+gCjA+mJQ==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "color-convert": "^1.9.0"
+        "@conventional-changelog/template": "^1.2.1"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=22"
       }
     },
-    "node_modules/coa/node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+    "node_modules/conventional-commits-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/conventional-commits-parser/-/conventional-commits-parser-7.1.0.tgz",
+      "integrity": "sha512-DPp6hkUjvwIivxbkrTiLXeRswNv1A/4GFA2X6scXma0AMa9632V3TwxmrlkUIEtUktiM3Ln+RrSH2xlP3/jUTw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
+        "@simple-libs/stream-utils": "^2.0.0",
+        "argue-cli": "^3.1.0"
+      },
+      "bin": {
+        "conventional-commits-parser": "dist/cli/index.js"
       },
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/coa/node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "node_modules/coa/node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-    },
-    "node_modules/coa/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/coa/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/coa/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/collect-v8-coverage": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
-      "integrity": "sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q=="
-    },
-    "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==",
-      "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=="
-    },
-    "node_modules/colord": {
-      "version": "2.9.3",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
-    },
-    "node_modules/colorette": {
-      "version": "2.0.20",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
-      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
-    },
-    "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==",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "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==",
-      "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=="
-    },
-    "node_modules/compressible": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-      "dependencies": {
-        "mime-db": ">= 1.43.0 < 2"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/compression": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.8.1.tgz",
-      "integrity": "sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "compressible": "~2.0.18",
-        "debug": "2.6.9",
-        "negotiator": "~0.6.4",
-        "on-headers": "~1.1.0",
-        "safe-buffer": "5.2.1",
-        "vary": "~1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/compression/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/compression/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
-    },
-    "node_modules/confusing-browser-globals": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
-      "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA=="
-    },
-    "node_modules/connect-history-api-fallback": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
-      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/content-disposition": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-      "dependencies": {
-        "safe-buffer": "5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "engines": {
-        "node": ">= 0.6"
+        "node": ">=22"
       }
     },
     "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=="
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
     },
-    "node_modules/cookie": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
-      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
-    },
-    "node_modules/core-js": {
-      "version": "3.45.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.0.tgz",
-      "integrity": "sha512-c2KZL9lP4DjkN3hk/an4pWn5b5ZefhRJnAc42n6LJ19kSnbeRbdQZE5dSeE2LBol1OwJD3X1BQvFTAsa8ReeDA==",
-      "hasInstallScript": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
-    "node_modules/core-js-compat": {
-      "version": "3.45.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.45.0.tgz",
-      "integrity": "sha512-gRoVMBawZg0OnxaVv3zpqLLxaHmsubEGyTnqdpI/CEBvX4JadI1dMSHxagThprYRtSVbuQxvi6iUatdPxohHpA==",
-      "dependencies": {
-        "browserslist": "^4.25.1"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
-    "node_modules/core-js-pure": {
-      "version": "3.45.0",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.45.0.tgz",
-      "integrity": "sha512-OtwjqcDpY2X/eIIg1ol/n0y/X8A9foliaNt1dSK0gV3J2/zw+89FcNG3mPK+N8YWts4ZFUPxnrAzsxs/lf8yDA==",
-      "hasInstallScript": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
-    "node_modules/core-util-is": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
-      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    "node_modules/cookie-es": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-3.1.1.tgz",
+      "integrity": "sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==",
+      "license": "MIT"
     },
     "node_modules/cosmiconfig": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.2.tgz",
+      "integrity": "sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.2.1",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cosmiconfig-typescript-loader": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-6.3.0.tgz",
+      "integrity": "sha512-Akr82WH1Wfqatyiqpj8HDkO2o2KmJRu1FhKfSNJP3K4IdXwHfEyL7MOb62i1AGQVLtIQM+iCE9CGOtrfhR+mmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "jiti": "2.6.1"
+      },
+      "engines": {
+        "node": ">=v18"
+      },
+      "peerDependencies": {
+        "@types/node": "*",
+        "cosmiconfig": ">=9",
+        "typescript": ">=5"
+      }
+    },
+    "node_modules/cosmiconfig-typescript-loader/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/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",
@@ -6136,439 +3849,51 @@
         "node": ">= 8"
       }
     },
-    "node_modules/crypto-random-string": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
-      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/css-blank-pseudo": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz",
-      "integrity": "sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.9"
-      },
-      "bin": {
-        "css-blank-pseudo": "dist/cli.cjs"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4"
-      }
-    },
-    "node_modules/css-declaration-sorter": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
-      "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.9"
-      }
-    },
-    "node_modules/css-has-pseudo": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz",
-      "integrity": "sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.9"
-      },
-      "bin": {
-        "css-has-pseudo": "dist/cli.cjs"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4"
-      }
-    },
-    "node_modules/css-loader": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
-      "integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
-      "dependencies": {
-        "icss-utils": "^5.1.0",
-        "postcss": "^8.4.33",
-        "postcss-modules-extract-imports": "^3.1.0",
-        "postcss-modules-local-by-default": "^4.0.5",
-        "postcss-modules-scope": "^3.2.0",
-        "postcss-modules-values": "^4.0.0",
-        "postcss-value-parser": "^4.2.0",
-        "semver": "^7.5.4"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "@rspack/core": "0.x || 1.x",
-        "webpack": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@rspack/core": {
-          "optional": true
-        },
-        "webpack": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/css-minimizer-webpack-plugin": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz",
-      "integrity": "sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==",
-      "dependencies": {
-        "cssnano": "^5.0.6",
-        "jest-worker": "^27.0.2",
-        "postcss": "^8.3.5",
-        "schema-utils": "^4.0.0",
-        "serialize-javascript": "^6.0.0",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@parcel/css": {
-          "optional": true
-        },
-        "clean-css": {
-          "optional": true
-        },
-        "csso": {
-          "optional": true
-        },
-        "esbuild": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/css-minimizer-webpack-plugin/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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/css-prefers-color-scheme": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
-      "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
-      "bin": {
-        "css-prefers-color-scheme": "dist/cli.cjs"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4"
-      }
-    },
-    "node_modules/css-select": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
-      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^6.0.1",
-        "domhandler": "^4.3.1",
-        "domutils": "^2.8.0",
-        "nth-check": "^2.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
-    "node_modules/css-select-base-adapter": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
-      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
-    },
     "node_modules/css-tree": {
-      "version": "1.0.0-alpha.37",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
-      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "mdn-data": "2.0.4",
-        "source-map": "^0.6.1"
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/css-tree/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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/css-what": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
-      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
-      "engines": {
-        "node": ">= 6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
       }
     },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="
-    },
-    "node_modules/cssdb": {
-      "version": "7.11.2",
-      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.11.2.tgz",
-      "integrity": "sha512-lhQ32TFkc1X4eTefGfYPvgovRSzIMofHkigfH8nWtyRL4XJLsRhJFreRvEgKzept7x1rjBuy3J/MurXLaFxW/A==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        }
-      ]
-    },
-    "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==",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/cssnano": {
-      "version": "5.1.15",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
-      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
-      "dependencies": {
-        "cssnano-preset-default": "^5.2.14",
-        "lilconfig": "^2.0.3",
-        "yaml": "^1.10.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/cssnano"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/cssnano-preset-default": {
-      "version": "5.2.14",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
-      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
-      "dependencies": {
-        "css-declaration-sorter": "^6.3.1",
-        "cssnano-utils": "^3.1.0",
-        "postcss-calc": "^8.2.3",
-        "postcss-colormin": "^5.3.1",
-        "postcss-convert-values": "^5.1.3",
-        "postcss-discard-comments": "^5.1.2",
-        "postcss-discard-duplicates": "^5.1.0",
-        "postcss-discard-empty": "^5.1.1",
-        "postcss-discard-overridden": "^5.1.0",
-        "postcss-merge-longhand": "^5.1.7",
-        "postcss-merge-rules": "^5.1.4",
-        "postcss-minify-font-values": "^5.1.0",
-        "postcss-minify-gradients": "^5.1.1",
-        "postcss-minify-params": "^5.1.4",
-        "postcss-minify-selectors": "^5.2.1",
-        "postcss-normalize-charset": "^5.1.0",
-        "postcss-normalize-display-values": "^5.1.0",
-        "postcss-normalize-positions": "^5.1.1",
-        "postcss-normalize-repeat-style": "^5.1.1",
-        "postcss-normalize-string": "^5.1.0",
-        "postcss-normalize-timing-functions": "^5.1.0",
-        "postcss-normalize-unicode": "^5.1.1",
-        "postcss-normalize-url": "^5.1.0",
-        "postcss-normalize-whitespace": "^5.1.1",
-        "postcss-ordered-values": "^5.1.3",
-        "postcss-reduce-initial": "^5.1.2",
-        "postcss-reduce-transforms": "^5.1.0",
-        "postcss-svgo": "^5.1.0",
-        "postcss-unique-selectors": "^5.1.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/cssnano-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
-      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/csso": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
-      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
-      "dependencies": {
-        "css-tree": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/csso/node_modules/css-tree": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-      "dependencies": {
-        "mdn-data": "2.0.14",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/csso/node_modules/mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
-    },
-    "node_modules/csso/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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/cssom": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
-      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw=="
-    },
-    "node_modules/cssstyle": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
-      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
-      "dependencies": {
-        "cssom": "~0.3.6"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cssstyle/node_modules/cssom": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "license": "MIT"
     },
     "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
-    },
-    "node_modules/damerau-levenshtein": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
-      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
     },
     "node_modules/data-urls": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
-      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "abab": "^2.0.3",
-        "whatwg-mimetype": "^2.3.0",
-        "whatwg-url": "^8.0.0"
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
       },
       "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/data-view-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
-      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
-      "dependencies": {
-        "call-bound": "^1.0.3",
-        "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/data-view-byte-length": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
-      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
-      "dependencies": {
-        "call-bound": "^1.0.3",
-        "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/inspect-js"
-      }
-    },
-    "node_modules/data-view-byte-offset": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
-      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
     "node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -6584,621 +3909,166 @@
     "node_modules/decimal.js": {
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
-      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg=="
-    },
-    "node_modules/dedent": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
-      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA=="
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
     },
     "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=="
-    },
-    "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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/default-gateway": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
-      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
-      "dependencies": {
-        "execa": "^5.0.0"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dependencies": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/define-lazy-prop": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
-      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/define-properties": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
-      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "dependencies": {
-        "define-data-property": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "engines": {
-        "node": ">= 0.8"
-      }
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
-    "node_modules/destroy": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/detect-newline": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
-      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
+    "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==",
+      "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/detect-node": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
-      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
-    },
-    "node_modules/detect-port-alt": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
-      "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
-      "dependencies": {
-        "address": "^1.0.1",
-        "debug": "^2.6.0"
-      },
-      "bin": {
-        "detect": "bin/detect-port",
-        "detect-port": "bin/detect-port"
-      },
-      "engines": {
-        "node": ">= 4.2.1"
-      }
-    },
-    "node_modules/detect-port-alt/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/detect-port-alt/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
-    },
-    "node_modules/diff-sequences": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
-      "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==",
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "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==",
-      "dependencies": {
-        "path-type": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
-    },
-    "node_modules/dns-packet": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
-      "integrity": "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==",
-      "dependencies": {
-        "@leichtgewicht/ip-codec": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
-      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="
-    },
-    "node_modules/dom-converter": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
-      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
-      "dependencies": {
-        "utila": "~0.4"
-      }
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "license": "MIT"
     },
     "node_modules/dom-helpers": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
       "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.8.7",
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/dom-serializer": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
-      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ]
-    },
-    "node_modules/domexception": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
-      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
-      "deprecated": "Use your platform's native DOMException instead",
-      "dependencies": {
-        "webidl-conversions": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/domexception/node_modules/webidl-conversions": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
-      "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/domhandler": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
-      "dependencies": {
-        "domelementtype": "^2.2.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
-    "node_modules/domutils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-      "dependencies": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
-    "node_modules/dot-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-      "dependencies": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/dotenv": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/dotenv-expand": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
-    },
-    "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==",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/duplexer": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
-    },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
-    },
-    "node_modules/ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
-    },
-    "node_modules/ejs": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
-      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
-      "dependencies": {
-        "jake": "^10.8.5"
-      },
-      "bin": {
-        "ejs": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.200",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.200.tgz",
-      "integrity": "sha512-rFCxROw7aOe4uPTfIAx+rXv9cEcGx+buAF4npnhtTqCJk5KDFRnh3+KYj7rdVh6lsFt5/aPs+Irj9rZ33WMA7w=="
-    },
-    "node_modules/emittery": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
-      "integrity": "sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
-      }
+      "version": "1.5.389",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.389.tgz",
+      "integrity": "sha512-cEto7aeOqBfU1D+c5py5pE+ooscKE75JifxLBdFUZsqAxRS6y7kebtxAZvICszSl05gPjYHDTjY+lXpyGvpJbg==",
+      "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=="
-    },
-    "node_modules/emojis-list": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/encodeurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
-      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
-      "engines": {
-        "node": ">= 0.8"
-      }
+      "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/enhanced-resolve": {
-      "version": "5.18.3",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
-      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "version": "5.21.6",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.6.tgz",
+      "integrity": "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
+        "tapable": "^2.3.3"
       },
       "engines": {
         "node": ">=10.13.0"
       }
     },
     "node_modules/entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      },
       "funding": {
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/error-ex": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dependencies": {
-        "is-arrayish": "^0.2.1"
-      }
-    },
-    "node_modules/error-stack-parser": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
-      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
-      "dependencies": {
-        "stackframe": "^1.3.4"
-      }
-    },
-    "node_modules/es-abstract": {
-      "version": "1.24.0",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
-      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
-      "dependencies": {
-        "array-buffer-byte-length": "^1.0.2",
-        "arraybuffer.prototype.slice": "^1.0.4",
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "data-view-buffer": "^1.0.2",
-        "data-view-byte-length": "^1.0.2",
-        "data-view-byte-offset": "^1.0.1",
-        "es-define-property": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "es-set-tostringtag": "^2.1.0",
-        "es-to-primitive": "^1.3.0",
-        "function.prototype.name": "^1.1.8",
-        "get-intrinsic": "^1.3.0",
-        "get-proto": "^1.0.1",
-        "get-symbol-description": "^1.1.0",
-        "globalthis": "^1.0.4",
-        "gopd": "^1.2.0",
-        "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "hasown": "^2.0.2",
-        "internal-slot": "^1.1.0",
-        "is-array-buffer": "^3.0.5",
-        "is-callable": "^1.2.7",
-        "is-data-view": "^1.0.2",
-        "is-negative-zero": "^2.0.3",
-        "is-regex": "^1.2.1",
-        "is-set": "^2.0.3",
-        "is-shared-array-buffer": "^1.0.4",
-        "is-string": "^1.1.1",
-        "is-typed-array": "^1.1.15",
-        "is-weakref": "^1.1.1",
-        "math-intrinsics": "^1.1.0",
-        "object-inspect": "^1.13.4",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.7",
-        "own-keys": "^1.0.1",
-        "regexp.prototype.flags": "^1.5.4",
-        "safe-array-concat": "^1.1.3",
-        "safe-push-apply": "^1.0.0",
-        "safe-regex-test": "^1.1.0",
-        "set-proto": "^1.0.0",
-        "stop-iteration-iterator": "^1.1.0",
-        "string.prototype.trim": "^1.2.10",
-        "string.prototype.trimend": "^1.0.9",
-        "string.prototype.trimstart": "^1.0.8",
-        "typed-array-buffer": "^1.0.3",
-        "typed-array-byte-length": "^1.0.3",
-        "typed-array-byte-offset": "^1.0.4",
-        "typed-array-length": "^1.0.7",
-        "unbox-primitive": "^1.1.0",
-        "which-typed-array": "^1.1.19"
-      },
+    "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": ">= 0.4"
+        "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/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/es-array-method-boxes-properly": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
-      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA=="
-    },
-    "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==",
-      "engines": {
-        "node": ">= 0.4"
+    "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==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
       }
     },
     "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==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-iterator-helpers": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
-      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.6",
-        "es-errors": "^1.3.0",
-        "es-set-tostringtag": "^2.0.3",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.6",
-        "globalthis": "^1.0.4",
-        "gopd": "^1.2.0",
-        "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "internal-slot": "^1.1.0",
-        "iterator.prototype": "^1.1.4",
-        "safe-array-concat": "^1.1.3"
-      },
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/es-module-lexer": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
-      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.1.tgz",
+      "integrity": "sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==",
+      "dev": true,
+      "license": "MIT"
     },
-    "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==",
-      "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==",
-      "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/es-shim-unscopables": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
-      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
-      "dependencies": {
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-to-primitive": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
-      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
-      "dependencies": {
-        "is-callable": "^1.2.7",
-        "is-date-object": "^1.0.5",
-        "is-symbol": "^1.0.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
+    "node_modules/es-toolkit": {
+      "version": "1.49.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.49.0.tgz",
+      "integrity": "sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==",
+      "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
     },
     "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-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
-    },
     "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==",
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
@@ -7206,559 +4076,191 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/escodegen": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
-      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
-      "dependencies": {
-        "esprima": "^4.0.1",
-        "estraverse": "^5.2.0",
-        "esutils": "^2.0.2"
-      },
-      "bin": {
-        "escodegen": "bin/escodegen.js",
-        "esgenerate": "bin/esgenerate.js"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "optionalDependencies": {
-        "source-map": "~0.6.1"
-      }
-    },
-    "node_modules/escodegen/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==",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/eslint": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
-      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
-      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+      "version": "10.7.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-10.7.0.tgz",
+      "integrity": "sha512-GVTD7s1vdIl6UYvAfriOPeY1Df8LIZjfofLvHwde+erDHGGuHyuM6xoxRxmHiebhYuD2p1vN4wWh0XzPARSGDQ==",
+      "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "packages/*"
+      ],
       "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.1",
-        "@humanwhocodes/config-array": "^0.13.0",
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.2",
+        "@eslint/config-array": "^0.23.5",
+        "@eslint/config-helpers": "^0.6.0",
+        "@eslint/core": "^1.2.1",
+        "@eslint/plugin-kit": "^0.7.2",
+        "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
-        "@nodelib/fs.walk": "^1.2.8",
-        "@ungap/structured-clone": "^1.2.0",
-        "ajv": "^6.12.4",
-        "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.14.0",
+        "cross-spawn": "^7.0.6",
         "debug": "^4.3.2",
-        "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.3",
-        "espree": "^9.6.1",
-        "esquery": "^1.4.2",
+        "eslint-scope": "^9.1.2",
+        "eslint-visitor-keys": "^5.0.1",
+        "espree": "^11.2.0",
+        "esquery": "^1.7.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^6.0.1",
+        "file-entry-cache": "^8.0.0",
         "find-up": "^5.0.0",
         "glob-parent": "^6.0.2",
-        "globals": "^13.19.0",
-        "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
-        "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
-        "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
+        "minimatch": "^10.2.4",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
+        "optionator": "^0.9.3"
       },
       "bin": {
         "eslint": "bin/eslint.js"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       },
       "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint-config-react-app": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz",
-      "integrity": "sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==",
-      "dependencies": {
-        "@babel/core": "^7.16.0",
-        "@babel/eslint-parser": "^7.16.3",
-        "@rushstack/eslint-patch": "^1.1.0",
-        "@typescript-eslint/eslint-plugin": "^5.5.0",
-        "@typescript-eslint/parser": "^5.5.0",
-        "babel-preset-react-app": "^10.0.1",
-        "confusing-browser-globals": "^1.0.11",
-        "eslint-plugin-flowtype": "^8.0.3",
-        "eslint-plugin-import": "^2.25.3",
-        "eslint-plugin-jest": "^25.3.0",
-        "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-react": "^7.27.1",
-        "eslint-plugin-react-hooks": "^4.3.0",
-        "eslint-plugin-testing-library": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
+        "url": "https://eslint.org/donate"
       },
       "peerDependencies": {
-        "eslint": "^8.0.0"
-      }
-    },
-    "node_modules/eslint-import-resolver-node": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
-      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
-      "dependencies": {
-        "debug": "^3.2.7",
-        "is-core-module": "^2.13.0",
-        "resolve": "^1.22.4"
-      }
-    },
-    "node_modules/eslint-import-resolver-node/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/eslint-module-utils": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
-      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
-      "dependencies": {
-        "debug": "^3.2.7"
-      },
-      "engines": {
-        "node": ">=4"
+        "jiti": "*"
       },
       "peerDependenciesMeta": {
-        "eslint": {
+        "jiti": {
           "optional": true
         }
       }
     },
-    "node_modules/eslint-module-utils/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/eslint-plugin-flowtype": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-8.0.3.tgz",
-      "integrity": "sha512-dX8l6qUL6O+fYPtpNRideCFSpmWOUVx5QcaGLVqe/vlDiBSe4vYljDWDETwnyFzpl7By/WVIu6rcrniCgH9BqQ==",
-      "dependencies": {
-        "lodash": "^4.17.21",
-        "string-natural-compare": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "@babel/plugin-syntax-flow": "^7.14.5",
-        "@babel/plugin-transform-react-jsx": "^7.14.9",
-        "eslint": "^8.1.0"
-      }
-    },
-    "node_modules/eslint-plugin-import": {
-      "version": "2.32.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
-      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
-      "dependencies": {
-        "@rtsao/scc": "^1.1.0",
-        "array-includes": "^3.1.9",
-        "array.prototype.findlastindex": "^1.2.6",
-        "array.prototype.flat": "^1.3.3",
-        "array.prototype.flatmap": "^1.3.3",
-        "debug": "^3.2.7",
-        "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.9",
-        "eslint-module-utils": "^2.12.1",
-        "hasown": "^2.0.2",
-        "is-core-module": "^2.16.1",
-        "is-glob": "^4.0.3",
-        "minimatch": "^3.1.2",
-        "object.fromentries": "^2.0.8",
-        "object.groupby": "^1.0.3",
-        "object.values": "^1.2.1",
-        "semver": "^6.3.1",
-        "string.prototype.trimend": "^1.0.9",
-        "tsconfig-paths": "^3.15.0"
-      },
-      "engines": {
-        "node": ">=4"
-      },
-      "peerDependencies": {
-        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
-      }
-    },
-    "node_modules/eslint-plugin-import/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/eslint-plugin-import/node_modules/doctrine": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/eslint-plugin-import/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+    "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": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/eslint-plugin-jest": {
-      "version": "25.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz",
-      "integrity": "sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==",
-      "dependencies": {
-        "@typescript-eslint/experimental-utils": "^5.0.0"
+        "eslint-config-prettier": "bin/cli.js"
       },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
       },
       "peerDependencies": {
-        "@typescript-eslint/eslint-plugin": "^4.0.0 || ^5.0.0",
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@typescript-eslint/eslint-plugin": {
-          "optional": true
-        },
-        "jest": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/eslint-plugin-jsx-a11y": {
-      "version": "6.10.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
-      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
-      "dependencies": {
-        "aria-query": "^5.3.2",
-        "array-includes": "^3.1.8",
-        "array.prototype.flatmap": "^1.3.2",
-        "ast-types-flow": "^0.0.8",
-        "axe-core": "^4.10.0",
-        "axobject-query": "^4.1.0",
-        "damerau-levenshtein": "^1.0.8",
-        "emoji-regex": "^9.2.2",
-        "hasown": "^2.0.2",
-        "jsx-ast-utils": "^3.3.5",
-        "language-tags": "^1.0.9",
-        "minimatch": "^3.1.2",
-        "object.fromentries": "^2.0.8",
-        "safe-regex-test": "^1.0.3",
-        "string.prototype.includes": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependencies": {
-        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
-      }
-    },
-    "node_modules/eslint-plugin-react": {
-      "version": "7.37.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
-      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
-      "dependencies": {
-        "array-includes": "^3.1.8",
-        "array.prototype.findlast": "^1.2.5",
-        "array.prototype.flatmap": "^1.3.3",
-        "array.prototype.tosorted": "^1.1.4",
-        "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.2.1",
-        "estraverse": "^5.3.0",
-        "hasown": "^2.0.2",
-        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
-        "minimatch": "^3.1.2",
-        "object.entries": "^1.1.9",
-        "object.fromentries": "^2.0.8",
-        "object.values": "^1.2.1",
-        "prop-types": "^15.8.1",
-        "resolve": "^2.0.0-next.5",
-        "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.12",
-        "string.prototype.repeat": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      },
-      "peerDependencies": {
-        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+        "eslint": ">=7.0.0"
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
-      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.1.tgz",
+      "integrity": "sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0"
       }
     },
-    "node_modules/eslint-plugin-react/node_modules/doctrine": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/eslint-plugin-react/node_modules/resolve": {
-      "version": "2.0.0-next.5",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
-      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
-      "dependencies": {
-        "is-core-module": "^2.13.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/eslint-plugin-react/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/eslint-plugin-testing-library": {
-      "version": "5.11.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.1.tgz",
-      "integrity": "sha512-5eX9e1Kc2PqVRed3taaLnAAqPZGEX75C+M/rXzUAI3wIg/ZxzUm1OVAwfe/O+vE+6YXOLetSe9g5GKD2ecXipw==",
-      "dependencies": {
-        "@typescript-eslint/utils": "^5.58.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0",
-        "npm": ">=6"
-      },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.5.3.tgz",
+      "integrity": "sha512-5EMmLCV98Pi4o/f/3DP/v/tNqLHMIc9I8LKClNDWhZ9JTho89/kQcitCXQBMG7sAfVRK0Ie3T2EDOzp1YXYiVA==",
+      "dev": true,
+      "license": "MIT",
       "peerDependencies": {
-        "eslint": "^7.5.0 || ^8.0.0"
+        "eslint": "^9 || ^10"
       }
     },
     "node_modules/eslint-scope": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.2.tgz",
+      "integrity": "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
+        "@types/esrecurse": "^4.3.1",
+        "@types/estree": "^1.0.8",
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
       }
     },
     "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==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint-webpack-plugin": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-3.2.0.tgz",
-      "integrity": "sha512-avrKcGncpPbPSUHX6B3stNGzkKFto3eL+DKM4+VyMrVnhPc3vRczVlCq3uhuFOdRvDHTVXuzwk1ZKUrqDQHQ9w==",
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/eslint": "^7.29.0 || ^8.4.1",
-        "jest-worker": "^28.0.2",
-        "micromatch": "^4.0.5",
-        "normalize-path": "^3.0.0",
-        "schema-utils": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
+        "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": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "eslint": "^7.0.0 || ^8.0.0",
-        "webpack": "^5.0.0"
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/eslint-webpack-plugin/node_modules/jest-worker": {
-      "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-28.1.3.tgz",
-      "integrity": "sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==",
-      "dependencies": {
-        "@types/node": "*",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^8.0.0"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
-      }
-    },
-    "node_modules/eslint-webpack-plugin/node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
-      }
-    },
-    "node_modules/eslint/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=="
-    },
-    "node_modules/eslint/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==",
-      "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/eslint/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==",
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/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==",
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/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==",
-      "dependencies": {
-        "p-limit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
+    "node_modules/eslint/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/espree": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-11.2.0.tgz",
+      "integrity": "sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "acorn": "^8.9.0",
+        "acorn": "^8.16.0",
         "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^3.4.1"
+        "eslint-visitor-keys": "^5.0.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       },
       "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==",
-      "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==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
         "estraverse": "^5.1.0"
       },
@@ -7770,6 +4272,8 @@
       "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"
       },
@@ -7781,155 +4285,61 @@
       "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": "1.0.1",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
-      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg=="
+      "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/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/etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/eventemitter3": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+    "node_modules/expect-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
+      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+      "dev": true,
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=0.8.x"
+        "node": ">=12.0.0"
       }
     },
-    "node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/exit": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/expect": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-27.5.1.tgz",
-      "integrity": "sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==",
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "jest-matcher-utils": "^27.5.1",
-        "jest-message-util": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/express": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
-      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
-      "dependencies": {
-        "accepts": "~1.3.8",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.20.3",
-        "content-disposition": "0.5.4",
-        "content-type": "~1.0.4",
-        "cookie": "0.7.1",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "1.3.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.3",
-        "methods": "~1.1.2",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.12",
-        "proxy-addr": "~2.0.7",
-        "qs": "6.13.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.2.1",
-        "send": "0.19.0",
-        "serve-static": "1.16.2",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/express/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/express/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
     "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=="
+      "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==",
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -7945,6 +4355,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -7955,17 +4366,22 @@
     "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=="
+      "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=="
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/fast-uri": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
-      "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==",
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.7.tgz",
+      "integrity": "sha512-dOvZVzjdZdz7phd9v6jCbwxrBW3fK6n8Rc0CtdmM4bumzMnxywBYhuph6J819RRw/ku+rLbelwfMunktuzVVHg==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7975,121 +4391,53 @@
           "type": "opencollective",
           "url": "https://opencollective.com/fastify"
         }
-      ]
+      ],
+      "license": "BSD-3-Clause"
     },
     "node_modules/fastq": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
-      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
       }
     },
-    "node_modules/faye-websocket": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
-      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
-      "dependencies": {
-        "websocket-driver": ">=0.5.1"
-      },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "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==",
-      "dependencies": {
-        "bser": "2.1.1"
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
       }
     },
     "node_modules/file-entry-cache": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "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": "^3.0.4"
+        "flat-cache": "^4.0.0"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
-      }
-    },
-    "node_modules/file-loader": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
-      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
-      "dependencies": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^4.0.0 || ^5.0.0"
-      }
-    },
-    "node_modules/file-loader/node_modules/schema-utils": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
-      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dependencies": {
-        "@types/json-schema": "^7.0.8",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
-    "node_modules/filelist": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
-      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
-      "dependencies": {
-        "minimatch": "^5.0.1"
-      }
-    },
-    "node_modules/filelist/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==",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/filelist/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/filesize": {
-      "version": "8.0.7",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
-      "integrity": "sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==",
-      "engines": {
-        "node": ">= 0.4.0"
+        "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==",
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -8097,309 +4445,57 @@
         "node": ">=8"
       }
     },
-    "node_modules/finalhandler": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
-      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
-      "dependencies": {
-        "debug": "2.6.9",
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "statuses": "2.0.1",
-        "unpipe": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/finalhandler/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/finalhandler/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/find-cache-dir": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-      "dependencies": {
-        "commondir": "^1.0.1",
-        "make-dir": "^3.0.2",
-        "pkg-dir": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
-      }
-    },
     "node_modules/find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
     },
     "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==",
+      "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": "^5.0.0",
+        "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/flat-cache": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
-      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "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.3",
-        "rimraf": "^3.0.2"
+        "keyv": "^4.5.4"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "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=="
-    },
-    "node_modules/follow-redirects": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
-      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/for-each": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
-      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
-      "dependencies": {
-        "is-callable": "^1.2.7"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "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==",
-      "dependencies": {
-        "cross-spawn": "^7.0.6",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/foreground-child/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==",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/fork-ts-checker-webpack-plugin": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",
-      "integrity": "sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==",
-      "dependencies": {
-        "@babel/code-frame": "^7.8.3",
-        "@types/json-schema": "^7.0.5",
-        "chalk": "^4.1.0",
-        "chokidar": "^3.4.2",
-        "cosmiconfig": "^6.0.0",
-        "deepmerge": "^4.2.2",
-        "fs-extra": "^9.0.0",
-        "glob": "^7.1.6",
-        "memfs": "^3.1.2",
-        "minimatch": "^3.0.4",
-        "schema-utils": "2.7.0",
-        "semver": "^7.3.2",
-        "tapable": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=10",
-        "yarn": ">=1.0.0"
-      },
-      "peerDependencies": {
-        "eslint": ">= 6",
-        "typescript": ">= 2.7",
-        "vue-template-compiler": "*",
-        "webpack": ">= 4"
-      },
-      "peerDependenciesMeta": {
-        "eslint": {
-          "optional": true
-        },
-        "vue-template-compiler": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/fork-ts-checker-webpack-plugin/node_modules/cosmiconfig": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-      "dependencies": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.1.0",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.7.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-      "dependencies": {
-        "at-least-node": "^1.0.0",
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-      "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
-      "dependencies": {
-        "@types/json-schema": "^7.0.4",
-        "ajv": "^6.12.2",
-        "ajv-keywords": "^3.4.1"
-      },
-      "engines": {
-        "node": ">= 8.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
-    "node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/form-data": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.4.tgz",
-      "integrity": "sha512-f0cRzm6dkyVYV3nPoooP8XlccPQukegwhAnpoLcXy+X+A8KfpGOoXwDr9FLZd3wzgLaBGQBE3lY93Zm/i1JvIQ==",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.35"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
-    "node_modules/fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "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==",
-      "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=="
-    },
-    "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=="
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+      "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==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -8412,41 +4508,26 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/function.prototype.name": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
-      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "functions-have-names": "^1.2.3",
-        "hasown": "^2.0.2",
-        "is-callable": "^1.2.7"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+    "node_modules/generouted": {
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/generouted/-/generouted-1.20.2.tgz",
+      "integrity": "sha512-Sx+aEC5o0MZIOs0FiqFJDAOQ1ZeWedrJ8SVr/sEK5quzI4kLRTZBHZAR+ivIb1Dw/lV5LrLWUBRsgeaR1UJ6qg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vite": ">=5"
       }
     },
     "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"
       }
@@ -8455,109 +4536,31 @@
       "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-intrinsic": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
-      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "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"
-      },
+    "node_modules/get-east-asian-width": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
+      "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-own-enumerable-property-symbols": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
-      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
-    },
-    "node_modules/get-package-type": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
-      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "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==",
-      "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==",
-      "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/get-symbol-description": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
-      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
-      "dependencies": {
-        "call-bound": "^1.0.3",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "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",
-      "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/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"
       },
@@ -8565,212 +4568,57 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
-    },
-    "node_modules/global-modules": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
-      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+    "node_modules/global-directory": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/global-directory/-/global-directory-5.0.0.tgz",
+      "integrity": "sha512-1pgFdhK3J2LeM+dVf2Pd424yHx2ou338lC0ErNP2hPx4j8eW1Sp0XqSjNxtk6Tc4Kr5wlWtSvz8cn2yb7/SG/w==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "global-prefix": "^3.0.0"
+        "ini": "6.0.0"
       },
       "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/global-prefix": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
-      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
-      "dependencies": {
-        "ini": "^1.3.5",
-        "kind-of": "^6.0.2",
-        "which": "^1.3.1"
+        "node": ">=20"
       },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/global-prefix/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "which": "bin/which"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
+      "version": "17.7.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-17.7.0.tgz",
+      "integrity": "sha512-Czmyns5dUsq4seFBR/Kdydhmo8y9kC79hiSkPn0YcGtNnYWnrgt0vjrSjx9tspoDGWm2CMarffRuLjM4xUz8xg==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/globalthis": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
-      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
-      "dependencies": {
-        "define-properties": "^1.2.1",
-        "gopd": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/globby": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-      "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==",
-      "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=="
-    },
-    "node_modules/graphemer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
-    },
-    "node_modules/gzip-size": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
-      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
-      "dependencies": {
-        "duplexer": "^0.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/handle-thing": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
-      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
-    },
-    "node_modules/harmony-reflect": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
-      "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g=="
-    },
-    "node_modules/has-bigints": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
-      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
     },
     "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-property-descriptors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dependencies": {
-        "es-define-property": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-proto": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
-      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
-      "dependencies": {
-        "dunder-proto": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "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==",
-      "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==",
-      "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==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -8778,18 +4626,28 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "bin": {
-        "he": "bin/he"
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
       }
     },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
       "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "react-is": "^16.7.0"
       }
@@ -8797,305 +4655,60 @@
     "node_modules/hoist-non-react-statics/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "node_modules/hoopy": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
-      "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==",
-      "engines": {
-        "node": ">= 6.0.0"
-      }
-    },
-    "node_modules/hpack.js": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
-      "dependencies": {
-        "inherits": "^2.0.1",
-        "obuf": "^1.0.0",
-        "readable-stream": "^2.0.1",
-        "wbuf": "^1.1.0"
-      }
-    },
-    "node_modules/hpack.js/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-    },
-    "node_modules/hpack.js/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/hpack.js/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "node_modules/hpack.js/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
     },
     "node_modules/html-encoding-sniffer": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
-      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "whatwg-encoding": "^1.0.5"
+        "@exodus/bytes": "^1.6.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
-    "node_modules/html-entities": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",
-      "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/mdevils"
-        },
-        {
-          "type": "patreon",
-          "url": "https://patreon.com/mdevils"
-        }
-      ]
-    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/html-minifier-terser": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
-      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
-      "dependencies": {
-        "camel-case": "^4.1.2",
-        "clean-css": "^5.2.2",
-        "commander": "^8.3.0",
-        "he": "^1.2.0",
-        "param-case": "^3.0.4",
-        "relateurl": "^0.2.7",
-        "terser": "^5.10.0"
-      },
+    "node_modules/husky": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+      "dev": true,
+      "license": "MIT",
       "bin": {
-        "html-minifier-terser": "cli.js"
+        "husky": "bin.js"
       },
       "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/html-webpack-plugin": {
-      "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz",
-      "integrity": "sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg==",
-      "dependencies": {
-        "@types/html-minifier-terser": "^6.0.0",
-        "html-minifier-terser": "^6.0.2",
-        "lodash": "^4.17.21",
-        "pretty-error": "^4.0.0",
-        "tapable": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
+        "node": ">=18"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/html-webpack-plugin"
-      },
-      "peerDependencies": {
-        "@rspack/core": "0.x || 1.x",
-        "webpack": "^5.20.0"
-      },
-      "peerDependenciesMeta": {
-        "@rspack/core": {
-          "optional": true
-        },
-        "webpack": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/htmlparser2": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
-      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
-      "funding": [
-        "https://github.com/fb55/htmlparser2?sponsor=1",
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.0.0",
-        "domutils": "^2.5.2",
-        "entities": "^2.0.0"
-      }
-    },
-    "node_modules/http-deceiver": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw=="
-    },
-    "node_modules/http-errors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "dependencies": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/http-parser-js": {
-      "version": "0.5.10",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
-      "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA=="
-    },
-    "node_modules/http-proxy": {
-      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
-      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
-      "dependencies": {
-        "eventemitter3": "^4.0.0",
-        "follow-redirects": "^1.0.0",
-        "requires-port": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/http-proxy-agent": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
-      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
-      "dependencies": {
-        "@tootallnate/once": "1",
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/http-proxy-middleware": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-3.0.5.tgz",
-      "integrity": "sha512-GLZZm1X38BPY4lkXA01jhwxvDoOkkXqjgVyUzVxiEK4iuRu03PZoYHhHRwxnfhQMDuaxi3vVri0YgSro/1oWqg==",
-      "dependencies": {
-        "@types/http-proxy": "^1.17.15",
-        "debug": "^4.3.6",
-        "http-proxy": "^1.18.1",
-        "is-glob": "^4.0.3",
-        "is-plain-object": "^5.0.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "dependencies": {
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "engines": {
-        "node": ">=10.17.0"
-      }
-    },
-    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/icss-utils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/idb": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
-      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
-    },
-    "node_modules/identity-obj-proxy": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
-      "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
-      "dependencies": {
-        "harmony-reflect": "^1.4.6"
-      },
-      "engines": {
-        "node": ">=4"
+        "url": "https://github.com/sponsors/typicode"
       }
     },
     "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/immer": {
-      "version": "9.0.21",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
-      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/immer"
-      }
-    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -9111,32 +4724,17 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
-    "node_modules/import-local": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
-      "integrity": "sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==",
-      "dependencies": {
-        "pkg-dir": "^4.2.0",
-        "resolve-cwd": "^3.0.0"
-      },
-      "bin": {
-        "import-local-fixture": "fixtures/cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "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"
       }
@@ -9145,147 +4743,34 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
       "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "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.",
-      "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=="
-    },
     "node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
-    },
-    "node_modules/internal-slot": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
-      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "hasown": "^2.0.2",
-        "side-channel": "^1.1.0"
-      },
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-6.0.0.tgz",
+      "integrity": "sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==",
+      "dev": true,
+      "license": "ISC",
       "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/ipaddr.js": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
-      "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/is-array-buffer": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
-      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "get-intrinsic": "^1.2.6"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": "^20.17.0 || >=22.9.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=="
-    },
-    "node_modules/is-async-function": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
-      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
-      "dependencies": {
-        "async-function": "^1.0.0",
-        "call-bound": "^1.0.3",
-        "get-proto": "^1.0.1",
-        "has-tostringtag": "^1.0.2",
-        "safe-regex-test": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-bigint": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
-      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
-      "dependencies": {
-        "has-bigints": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-boolean-object": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
-      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
-      "dependencies": {
-        "call-bound": "^1.0.3",
-        "has-tostringtag": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-callable": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "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==",
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
+      "license": "MIT",
       "dependencies": {
-        "hasown": "^2.0.2"
+        "hasown": "^2.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9294,110 +4779,36 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-data-view": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
-      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "get-intrinsic": "^1.2.6",
-        "is-typed-array": "^1.1.13"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-date-object": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
-      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "has-tostringtag": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-finalizationregistry": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
-      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
-      "dependencies": {
-        "call-bound": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "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==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-generator-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
-      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/is-generator-function": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
-      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "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": {
-        "call-bound": "^1.0.3",
-        "get-proto": "^1.0.0",
-        "has-tostringtag": "^1.0.2",
-        "safe-regex-test": "^1.1.0"
+        "get-east-asian-width": "^1.3.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=18"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "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==",
+      "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -9405,311 +4816,58 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-map": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
-      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "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=="
-    },
-    "node_modules/is-negative-zero": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
-      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "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==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
     },
-    "node_modules/is-number-object": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
-      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
-      "dependencies": {
-        "call-bound": "^1.0.3",
-        "has-tostringtag": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-plain-obj": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-plain-object": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
-    },
-    "node_modules/is-regex": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
-      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "gopd": "^1.2.0",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-regexp": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
-      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-root": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
-      "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/is-set": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
-      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-shared-array-buffer": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
-      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
-      "dependencies": {
-        "call-bound": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-string": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
-      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
-      "dependencies": {
-        "call-bound": "^1.0.3",
-        "has-tostringtag": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-symbol": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
-      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "has-symbols": "^1.1.0",
-        "safe-regex-test": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
-      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
-      "dependencies": {
-        "which-typed-array": "^1.1.16"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
-    },
-    "node_modules/is-weakmap": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
-      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-weakref": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
-      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
-      "dependencies": {
-        "call-bound": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-weakset": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
-      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
-      "dependencies": {
-        "call-bound": "^1.0.3",
-        "get-intrinsic": "^1.2.6"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-wsl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-      "dependencies": {
-        "is-docker": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
       "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/istanbul-lib-instrument": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
-      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
-      "dependencies": {
-        "@babel/core": "^7.12.3",
-        "@babel/parser": "^7.14.7",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-coverage": "^3.2.0",
-        "semver": "^6.3.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/istanbul-lib-instrument/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/istanbul-lib-report": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
       "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
         "istanbul-lib-coverage": "^3.0.0",
         "make-dir": "^4.0.0",
@@ -9719,45 +4877,12 @@
         "node": ">=10"
       }
     },
-    "node_modules/istanbul-lib-report/node_modules/make-dir": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
-      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
-      "dependencies": {
-        "semver": "^7.5.3"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/istanbul-lib-source-maps": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
-      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
-      "dependencies": {
-        "debug": "^4.1.1",
-        "istanbul-lib-coverage": "^3.0.0",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/istanbul-lib-source-maps/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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/istanbul-reports": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.7.tgz",
-      "integrity": "sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
+      "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
         "html-escaper": "^2.0.0",
         "istanbul-lib-report": "^3.0.0"
@@ -9766,960 +4891,79 @@
         "node": ">=8"
       }
     },
-    "node_modules/iterator.prototype": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
-      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
-      "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.6",
-        "get-proto": "^1.0.0",
-        "has-symbols": "^1.1.0",
-        "set-function-name": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
-    "node_modules/jake": {
-      "version": "10.9.4",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
-      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
-      "dependencies": {
-        "async": "^3.2.6",
-        "filelist": "^1.0.4",
-        "picocolors": "^1.1.1"
-      },
-      "bin": {
-        "jake": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/jest": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
-      "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
-      "dependencies": {
-        "@jest/core": "^27.5.1",
-        "import-local": "^3.0.2",
-        "jest-cli": "^27.5.1"
-      },
-      "bin": {
-        "jest": "bin/jest.js"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jest-changed-files": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.5.1.tgz",
-      "integrity": "sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==",
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "execa": "^5.0.0",
-        "throat": "^6.0.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-circus": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-27.5.1.tgz",
-      "integrity": "sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==",
-      "dependencies": {
-        "@jest/environment": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "co": "^4.6.0",
-        "dedent": "^0.7.0",
-        "expect": "^27.5.1",
-        "is-generator-fn": "^2.0.0",
-        "jest-each": "^27.5.1",
-        "jest-matcher-utils": "^27.5.1",
-        "jest-message-util": "^27.5.1",
-        "jest-runtime": "^27.5.1",
-        "jest-snapshot": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "pretty-format": "^27.5.1",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.3",
-        "throat": "^6.0.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-cli": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-27.5.1.tgz",
-      "integrity": "sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==",
-      "dependencies": {
-        "@jest/core": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "chalk": "^4.0.0",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.9",
-        "import-local": "^3.0.2",
-        "jest-config": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jest-validate": "^27.5.1",
-        "prompts": "^2.0.1",
-        "yargs": "^16.2.0"
-      },
-      "bin": {
-        "jest": "bin/jest.js"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jest-config": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-27.5.1.tgz",
-      "integrity": "sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==",
-      "dependencies": {
-        "@babel/core": "^7.8.0",
-        "@jest/test-sequencer": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "babel-jest": "^27.5.1",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "deepmerge": "^4.2.2",
-        "glob": "^7.1.1",
-        "graceful-fs": "^4.2.9",
-        "jest-circus": "^27.5.1",
-        "jest-environment-jsdom": "^27.5.1",
-        "jest-environment-node": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "jest-jasmine2": "^27.5.1",
-        "jest-regex-util": "^27.5.1",
-        "jest-resolve": "^27.5.1",
-        "jest-runner": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jest-validate": "^27.5.1",
-        "micromatch": "^4.0.4",
-        "parse-json": "^5.2.0",
-        "pretty-format": "^27.5.1",
-        "slash": "^3.0.0",
-        "strip-json-comments": "^3.1.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      },
-      "peerDependencies": {
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jest-diff": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz",
-      "integrity": "sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==",
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-docblock": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-27.5.1.tgz",
-      "integrity": "sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==",
-      "dependencies": {
-        "detect-newline": "^3.0.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-each": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-27.5.1.tgz",
-      "integrity": "sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==",
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "chalk": "^4.0.0",
-        "jest-get-type": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-environment-jsdom": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz",
-      "integrity": "sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==",
-      "dependencies": {
-        "@jest/environment": "^27.5.1",
-        "@jest/fake-timers": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "jest-mock": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jsdom": "^16.6.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-environment-node": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-27.5.1.tgz",
-      "integrity": "sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==",
-      "dependencies": {
-        "@jest/environment": "^27.5.1",
-        "@jest/fake-timers": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "jest-mock": "^27.5.1",
-        "jest-util": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-get-type": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz",
-      "integrity": "sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==",
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-haste-map": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.5.1.tgz",
-      "integrity": "sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==",
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "@types/graceful-fs": "^4.1.2",
-        "@types/node": "*",
-        "anymatch": "^3.0.3",
-        "fb-watchman": "^2.0.0",
-        "graceful-fs": "^4.2.9",
-        "jest-regex-util": "^27.5.1",
-        "jest-serializer": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jest-worker": "^27.5.1",
-        "micromatch": "^4.0.4",
-        "walker": "^1.0.7"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "^2.3.2"
-      }
-    },
-    "node_modules/jest-jasmine2": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-27.5.1.tgz",
-      "integrity": "sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==",
-      "dependencies": {
-        "@jest/environment": "^27.5.1",
-        "@jest/source-map": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "co": "^4.6.0",
-        "expect": "^27.5.1",
-        "is-generator-fn": "^2.0.0",
-        "jest-each": "^27.5.1",
-        "jest-matcher-utils": "^27.5.1",
-        "jest-message-util": "^27.5.1",
-        "jest-runtime": "^27.5.1",
-        "jest-snapshot": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "pretty-format": "^27.5.1",
-        "throat": "^6.0.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-leak-detector": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-27.5.1.tgz",
-      "integrity": "sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==",
-      "dependencies": {
-        "jest-get-type": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-matcher-utils": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz",
-      "integrity": "sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==",
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "jest-diff": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-message-util": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-27.5.1.tgz",
-      "integrity": "sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==",
-      "dependencies": {
-        "@babel/code-frame": "^7.12.13",
-        "@jest/types": "^27.5.1",
-        "@types/stack-utils": "^2.0.0",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.9",
-        "micromatch": "^4.0.4",
-        "pretty-format": "^27.5.1",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.3"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-mock": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-27.5.1.tgz",
-      "integrity": "sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==",
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "@types/node": "*"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-pnp-resolver": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
-      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
-      "engines": {
-        "node": ">=6"
-      },
-      "peerDependencies": {
-        "jest-resolve": "*"
-      },
-      "peerDependenciesMeta": {
-        "jest-resolve": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jest-regex-util": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.5.1.tgz",
-      "integrity": "sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==",
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-resolve": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-27.5.1.tgz",
-      "integrity": "sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==",
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^27.5.1",
-        "jest-pnp-resolver": "^1.2.2",
-        "jest-util": "^27.5.1",
-        "jest-validate": "^27.5.1",
-        "resolve": "^1.20.0",
-        "resolve.exports": "^1.1.0",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-resolve-dependencies": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz",
-      "integrity": "sha512-QQOOdY4PE39iawDn5rzbIePNigfe5B9Z91GDD1ae/xNDlu9kaat8QQ5EKnNmVWPV54hUdxCVwwj6YMgR2O7IOg==",
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "jest-regex-util": "^27.5.1",
-        "jest-snapshot": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-runner": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-27.5.1.tgz",
-      "integrity": "sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==",
-      "dependencies": {
-        "@jest/console": "^27.5.1",
-        "@jest/environment": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/transform": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "emittery": "^0.8.1",
-        "graceful-fs": "^4.2.9",
-        "jest-docblock": "^27.5.1",
-        "jest-environment-jsdom": "^27.5.1",
-        "jest-environment-node": "^27.5.1",
-        "jest-haste-map": "^27.5.1",
-        "jest-leak-detector": "^27.5.1",
-        "jest-message-util": "^27.5.1",
-        "jest-resolve": "^27.5.1",
-        "jest-runtime": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jest-worker": "^27.5.1",
-        "source-map-support": "^0.5.6",
-        "throat": "^6.0.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-runtime": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-27.5.1.tgz",
-      "integrity": "sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==",
-      "dependencies": {
-        "@jest/environment": "^27.5.1",
-        "@jest/fake-timers": "^27.5.1",
-        "@jest/globals": "^27.5.1",
-        "@jest/source-map": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/transform": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "chalk": "^4.0.0",
-        "cjs-module-lexer": "^1.0.0",
-        "collect-v8-coverage": "^1.0.0",
-        "execa": "^5.0.0",
-        "glob": "^7.1.3",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^27.5.1",
-        "jest-message-util": "^27.5.1",
-        "jest-mock": "^27.5.1",
-        "jest-regex-util": "^27.5.1",
-        "jest-resolve": "^27.5.1",
-        "jest-snapshot": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "slash": "^3.0.0",
-        "strip-bom": "^4.0.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-serializer": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.5.1.tgz",
-      "integrity": "sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==",
-      "dependencies": {
-        "@types/node": "*",
-        "graceful-fs": "^4.2.9"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-snapshot": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-27.5.1.tgz",
-      "integrity": "sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==",
-      "dependencies": {
-        "@babel/core": "^7.7.2",
-        "@babel/generator": "^7.7.2",
-        "@babel/plugin-syntax-typescript": "^7.7.2",
-        "@babel/traverse": "^7.7.2",
-        "@babel/types": "^7.0.0",
-        "@jest/transform": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/babel__traverse": "^7.0.4",
-        "@types/prettier": "^2.1.5",
-        "babel-preset-current-node-syntax": "^1.0.0",
-        "chalk": "^4.0.0",
-        "expect": "^27.5.1",
-        "graceful-fs": "^4.2.9",
-        "jest-diff": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "jest-haste-map": "^27.5.1",
-        "jest-matcher-utils": "^27.5.1",
-        "jest-message-util": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "natural-compare": "^1.4.0",
-        "pretty-format": "^27.5.1",
-        "semver": "^7.3.2"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-util": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.5.1.tgz",
-      "integrity": "sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==",
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "graceful-fs": "^4.2.9",
-        "picomatch": "^2.2.3"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-validate": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-27.5.1.tgz",
-      "integrity": "sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==",
-      "dependencies": {
-        "@jest/types": "^27.5.1",
-        "camelcase": "^6.2.0",
-        "chalk": "^4.0.0",
-        "jest-get-type": "^27.5.1",
-        "leven": "^3.1.0",
-        "pretty-format": "^27.5.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-watch-typeahead": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/jest-watch-typeahead/-/jest-watch-typeahead-1.1.0.tgz",
-      "integrity": "sha512-Va5nLSJTN7YFtC2jd+7wsoe1pNe5K4ShLux/E5iHEwlB9AxaxmggY7to9KUqKojhaJw3aXqt5WAb4jGPOolpEw==",
-      "dependencies": {
-        "ansi-escapes": "^4.3.1",
-        "chalk": "^4.0.0",
-        "jest-regex-util": "^28.0.0",
-        "jest-watcher": "^28.0.0",
-        "slash": "^4.0.0",
-        "string-length": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "jest": "^27.0.0 || ^28.0.0"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/@jest/console": {
-      "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-28.1.3.tgz",
-      "integrity": "sha512-QPAkP5EwKdK/bxIr6C1I4Vs0rm2nHiANzj/Z5X2JQkrZo6IqvC4ldZ9K95tF0HdidhA8Bo6egxSzUFPYKcEXLw==",
-      "dependencies": {
-        "@jest/types": "^28.1.3",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "jest-message-util": "^28.1.3",
-        "jest-util": "^28.1.3",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/@jest/console/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/@jest/test-result": {
-      "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-28.1.3.tgz",
-      "integrity": "sha512-kZAkxnSE+FqE8YjW8gNuoVkkC9I7S1qmenl8sGcDOLropASP+BkcGKwhXoyqQuGOGeYY0y/ixjrd/iERpEXHNg==",
-      "dependencies": {
-        "@jest/console": "^28.1.3",
-        "@jest/types": "^28.1.3",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "collect-v8-coverage": "^1.0.0"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/@jest/types": {
-      "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-28.1.3.tgz",
-      "integrity": "sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==",
-      "dependencies": {
-        "@jest/schemas": "^28.1.3",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^17.0.8",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/@types/yargs": {
-      "version": "17.0.33",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
-      "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
-      "dependencies": {
-        "@types/yargs-parser": "*"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/emittery": {
-      "version": "0.10.2",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.10.2.tgz",
-      "integrity": "sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/jest-message-util": {
-      "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-28.1.3.tgz",
-      "integrity": "sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==",
-      "dependencies": {
-        "@babel/code-frame": "^7.12.13",
-        "@jest/types": "^28.1.3",
-        "@types/stack-utils": "^2.0.0",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.9",
-        "micromatch": "^4.0.4",
-        "pretty-format": "^28.1.3",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.3"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/jest-message-util/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/jest-regex-util": {
-      "version": "28.0.2",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-28.0.2.tgz",
-      "integrity": "sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==",
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/jest-util": {
-      "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-28.1.3.tgz",
-      "integrity": "sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==",
-      "dependencies": {
-        "@jest/types": "^28.1.3",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "graceful-fs": "^4.2.9",
-        "picomatch": "^2.2.3"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/jest-watcher": {
-      "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-28.1.3.tgz",
-      "integrity": "sha512-t4qcqj9hze+jviFPUN3YAtAEeFnr/azITXQEMARf5cMwKY2SMBRnCQTXLixTl20OR6mLh9KLMrgVJgJISym+1g==",
-      "dependencies": {
-        "@jest/test-result": "^28.1.3",
-        "@jest/types": "^28.1.3",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "emittery": "^0.10.2",
-        "jest-util": "^28.1.3",
-        "string-length": "^4.0.1"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/jest-watcher/node_modules/string-length": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
-      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
-      "dependencies": {
-        "char-regex": "^1.0.2",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/jest-watcher/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==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/pretty-format": {
-      "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz",
-      "integrity": "sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==",
-      "dependencies": {
-        "@jest/schemas": "^28.1.3",
-        "ansi-regex": "^5.0.1",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
-    },
-    "node_modules/jest-watch-typeahead/node_modules/slash": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/string-length": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
-      "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
-      "dependencies": {
-        "char-regex": "^2.0.0",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12.20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/string-length/node_modules/char-regex": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.2.tgz",
-      "integrity": "sha512-cbGOjAptfM2LVmWhwRFHEKTPkLwNddVmuqYZQt895yXwAsWsXObCG+YN4DGQ/JBtT4GP1a1lPPdio2z413LmTg==",
-      "engines": {
-        "node": ">=12.20"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/jest-watch-typeahead/node_modules/strip-ansi/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/jest-watcher": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-27.5.1.tgz",
-      "integrity": "sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==",
-      "dependencies": {
-        "@jest/test-result": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "jest-util": "^27.5.1",
-        "string-length": "^4.0.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/jest-worker": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
-      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "dependencies": {
-        "@types/node": "*",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^8.0.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/jest-worker/node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
-      }
-    },
     "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "devOptional": true,
+      "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "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=="
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.1.tgz",
+      "integrity": "sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
+        "argparse": "^2.0.1"
       },
       "bin": {
         "js-yaml": "bin/js-yaml.js"
       }
     },
     "node_modules/jsdom": {
-      "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
-      "integrity": "sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==",
+      "version": "29.1.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-29.1.1.tgz",
+      "integrity": "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "abab": "^2.0.5",
-        "acorn": "^8.2.4",
-        "acorn-globals": "^6.0.0",
-        "cssom": "^0.4.4",
-        "cssstyle": "^2.3.0",
-        "data-urls": "^2.0.0",
-        "decimal.js": "^10.2.1",
-        "domexception": "^2.0.1",
-        "escodegen": "^2.0.0",
-        "form-data": "^3.0.0",
-        "html-encoding-sniffer": "^2.0.1",
-        "http-proxy-agent": "^4.0.1",
-        "https-proxy-agent": "^5.0.0",
+        "@asamuzakjp/css-color": "^5.1.11",
+        "@asamuzakjp/dom-selector": "^7.1.1",
+        "@bramus/specificity": "^2.4.2",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.3",
+        "@exodus/bytes": "^1.15.0",
+        "css-tree": "^3.2.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
         "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.0",
-        "parse5": "6.0.1",
-        "saxes": "^5.0.1",
+        "lru-cache": "^11.3.5",
+        "parse5": "^8.0.1",
+        "saxes": "^6.0.0",
         "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.0.0",
-        "w3c-hr-time": "^1.0.2",
-        "w3c-xmlserializer": "^2.0.0",
-        "webidl-conversions": "^6.1.0",
-        "whatwg-encoding": "^1.0.5",
-        "whatwg-mimetype": "^2.3.0",
-        "whatwg-url": "^8.5.0",
-        "ws": "^7.4.6",
-        "xml-name-validator": "^3.0.0"
+        "tough-cookie": "^6.0.1",
+        "undici": "^7.25.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.1",
+        "xml-name-validator": "^5.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "canvas": "^2.5.0"
+        "canvas": "^3.0.0"
       },
       "peerDependenciesMeta": {
         "canvas": {
@@ -10727,10 +4971,21 @@
         }
       }
     },
+    "node_modules/jsdom/node_modules/lru-cache": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz",
+      "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
       "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -10741,32 +4996,36 @@
     "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=="
+      "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=="
-    },
-    "node_modules/json-schema": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
-      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "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=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "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=="
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
     },
     "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"
       },
@@ -10774,130 +5033,34 @@
         "node": ">=6"
       }
     },
-    "node_modules/jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/jsonpath": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/jsonpath/-/jsonpath-1.1.1.tgz",
-      "integrity": "sha512-l6Cg7jRpixfbgoWgkrl77dgEj8RPvND0wMH6TwQmi9Qs4TFfS9u5cUFnbeKTwj5ga5Y3BTGGNI28k117LJ009w==",
-      "dependencies": {
-        "esprima": "1.2.2",
-        "static-eval": "2.0.2",
-        "underscore": "1.12.1"
-      }
-    },
-    "node_modules/jsonpath/node_modules/esprima": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.2.2.tgz",
-      "integrity": "sha512-+JpPZam9w5DuJ3Q67SqsMGtiHKENSMRVoxvArfJZK01/BfLEObtZ6orJa/MtoGNR/rfMgp5837T41PAmTwAv/A==",
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/jsonpointer": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
-      "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/jsx-ast-utils": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
-      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
-      "dependencies": {
-        "array-includes": "^3.1.6",
-        "array.prototype.flat": "^1.3.1",
-        "object.assign": "^4.1.4",
-        "object.values": "^1.1.6"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
     "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/kind-of": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+    "node_modules/ky": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/ky/-/ky-2.0.2.tgz",
+      "integrity": "sha512-/GmXpo9F9W+f8n4Ivr2iH+7h7wL7jLbLKWkMlpflcCRb6kGjBfTlASEXaZ9qUgNTn4VgS0P2pwxxzQ4EM6Ulgg==",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/kleur": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/klona": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
-      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/language-subtag-registry": {
-      "version": "0.3.23",
-      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
-      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ=="
-    },
-    "node_modules/language-tags": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
-      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
-      "dependencies": {
-        "language-subtag-registry": "^0.3.20"
+        "node": ">=22"
       },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/launch-editor": {
-      "version": "2.11.1",
-      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.11.1.tgz",
-      "integrity": "sha512-SEET7oNfgSaB6Ym0jufAdCeo3meJVeCaaDyzRygy0xsp2BFKCprcfHljTq4QkzTLUxEKkFK6OK4811YM2oSrRg==",
-      "dependencies": {
-        "picocolors": "^1.1.1",
-        "shell-quote": "^1.8.3"
-      }
-    },
-    "node_modules/leven": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
-      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
-      "engines": {
-        "node": ">=6"
+      "funding": {
+        "url": "https://github.com/sindresorhus/ky?sponsor=1"
       }
     },
     "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"
@@ -10906,85 +5069,410 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
       "engines": {
-        "node": ">=10"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "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.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "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.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "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.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "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.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "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.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "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.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "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.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "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.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "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.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "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.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "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=="
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
     },
-    "node_modules/loader-runner": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
-      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-      "engines": {
-        "node": ">=6.11.5"
-      }
-    },
-    "node_modules/loader-utils": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+    "node_modules/lint-staged": {
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-17.0.8.tgz",
+      "integrity": "sha512-B2P/d+jVW0UXOQ0MVMLrB/9ydA1P+zz6jYfdrbbEd9ur3S2rcbduFWKiUCC02Sm5hbC8nrm7y24WuYMG54HfxA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
+        "listr2": "^10.2.1",
+        "picomatch": "^4.0.4",
+        "string-argv": "^0.3.2",
+        "tinyexec": "^1.2.4"
+      },
+      "bin": {
+        "lint-staged": "bin/lint-staged.js"
       },
       "engines": {
-        "node": ">=8.9.0"
+        "node": ">=22.22.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/lint-staged"
+      },
+      "optionalDependencies": {
+        "yaml": "^2.9.0"
+      }
+    },
+    "node_modules/listr2": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-10.2.2.tgz",
+      "integrity": "sha512-JtNtbZj8q5BnDMR7trpwvwk3RIrANtIVzEUm8w7amp6xelLgyuq+4WZoTH913XaQAoH/cNdYhaNzBPA2U3xbDw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cli-truncate": "^5.2.0",
+        "eventemitter3": "^5.0.4",
+        "log-update": "^6.1.0",
+        "rfdc": "^1.4.1",
+        "wrap-ansi": "^10.0.0"
+      },
+      "engines": {
+        "node": ">=22.13.0"
       }
     },
     "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==",
+      "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": "^4.1.0"
+        "p-locate": "^5.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "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=="
+    "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/lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    "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/lodash.memoize": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
+    "node_modules/log-update/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/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=="
+    "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/lodash.sortby": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
-      "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
-    },
-    "node_modules/lodash.uniq": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
+    "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==",
+      "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -10992,133 +5480,93 @@
         "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==",
-      "dependencies": {
-        "tslib": "^2.0.3"
-      }
-    },
     "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/lucide-react": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.24.0.tgz",
+      "integrity": "sha512-YT6mBD8lGKkg4nM39enlm94/sfJIiW0YKUT60fBy4YK8tai31ylg1VhGNWxkpSKHo9UagfnZqwIff3HTDQwXeA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "license": "MIT",
       "bin": {
         "lz-string": "bin/bin.js"
       }
     },
     "node_modules/magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "sourcemap-codec": "^1.4.8"
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/magicast": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.3.tgz",
+      "integrity": "sha512-pVKE4UdSQ7DvHzivsCIFx2BJn1mHG6KsyrFcaxFx6tONdneEuThrDx0Cj3AMg58KyN4pzYT+LHOotxDQDjNvkw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.3",
+        "@babel/types": "^7.29.0",
+        "source-map-js": "^1.2.1"
       }
     },
     "node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "semver": "^6.0.0"
+        "semver": "^7.5.3"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/make-dir/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/makeerror": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
-      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
-      "dependencies": {
-        "tmpl": "1.0.5"
-      }
-    },
-    "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==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/mdn-data": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
-      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
-    },
-    "node_modules/media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/memfs": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
-      "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
-      "dependencies": {
-        "fs-monkey": "^1.0.4"
-      },
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
-    "node_modules/merge-descriptors": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
-      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "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=="
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
     },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "license": "MIT",
       "engines": {
         "node": ">= 8"
       }
     },
-    "node_modules/methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -11127,151 +5575,73 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "bin": {
-        "mime": "cli.js"
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
       },
-      "engines": {
-        "node": ">=4"
+      "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==",
+    "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": ">= 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==",
-      "dependencies": {
-        "mime-db": "1.52.0"
+        "node": ">=18"
       },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "engines": {
-        "node": ">=6"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
-    "node_modules/mini-css-extract-plugin": {
-      "version": "2.9.4",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.4.tgz",
-      "integrity": "sha512-ZWYT7ln73Hptxqxk2DxPU9MmapXRhxkJD6tkSR04dnQxm8BGu2hzgKLugK5yySD97u/8yy7Ma7E76k9ZdvtjkQ==",
-      "dependencies": {
-        "schema-utils": "^4.0.0",
-        "tapable": "^2.2.1"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.0.0"
-      }
-    },
-    "node_modules/minimalistic-assert": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
-    },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "10.2.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+      "integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "brace-expansion": "^5.0.5"
       },
       "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+        "node": "18 || 20 || >=22"
+      },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "dependencies": {
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "mkdirp": "bin/cmd.js"
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "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=="
-    },
-    "node_modules/multicast-dns": {
-      "version": "7.2.5",
-      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
-      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
-      "dependencies": {
-        "dns-packet": "^5.2.2",
-        "thunky": "^1.0.2"
-      },
-      "bin": {
-        "multicast-dns": "cli.js"
-      }
-    },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -11282,299 +5652,63 @@
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
-    },
-    "node_modules/natural-compare-lite": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
-    },
-    "node_modules/negotiator": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
-      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
-    },
-    "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==",
-      "dependencies": {
-        "lower-case": "^2.0.2",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/node-forge": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
-      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
-      "engines": {
-        "node": ">= 6.13.0"
-      }
-    },
-    "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=="
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/node-releases": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="
-    },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "version": "2.0.51",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.51.tgz",
+      "integrity": "sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=18"
       }
     },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/normalize-url": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nth-check": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-      "dependencies": {
-        "boolbase": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/nth-check?sponsor=1"
-      }
-    },
-    "node_modules/nwsapi": {
-      "version": "2.2.21",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.21.tgz",
-      "integrity": "sha512-o6nIY3qwiSXl7/LuOU0Dmuctd34Yay0yeuZRLFmDPrrdHpXKFndPj3hM+YEPVHYC5fx2otBx4Ilc/gyYSAUaIA=="
-    },
     "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==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+    "node_modules/oblivious-set": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-2.0.0.tgz",
+      "integrity": "sha512-QOUH5Xrsced9fKXaQTjWoDGKeS/Or7E2jB0FN63N4mkAO4qJdB7WR7e6qWAOHM5nk25FJ8TGjhP7DH4l6vFVLg==",
+      "license": "MIT",
       "engines": {
-        "node": ">= 6"
+        "node": ">=16"
       }
     },
-    "node_modules/object-inspect": {
-      "version": "1.13.4",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
-      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+    "node_modules/obug": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.3.tgz",
+      "integrity": "sha512-9miFgM2OFba7hB+pRgvtV84pYTBaoTHohvmIgiRt6dRIzbwEOIaNaP+dIlGs2fNFoB0SeISs0Jz5WFVRid6Xyg==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.assign": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
-      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0",
-        "has-symbols": "^1.1.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object.entries": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
-      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.fromentries": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
-      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object.getownpropertydescriptors": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.8.tgz",
-      "integrity": "sha512-qkHIGe4q0lSYMv0XI4SsBTJz3WaURhLvd0lKSgtVuOsJ2krg4SgMw3PIRQFMp07yi++UR3se2mkcLqsBNpBb/A==",
-      "dependencies": {
-        "array.prototype.reduce": "^1.0.6",
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0",
-        "gopd": "^1.0.1",
-        "safe-array-concat": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object.groupby": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
-      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.values": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
-      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/obuf": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
-      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
-    },
-    "node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/on-headers": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz",
-      "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "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==",
-      "dependencies": {
-        "wrappy": "1"
+        "node": ">=12.20.0"
       }
     },
     "node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "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-fn": "^2.1.0"
+        "mimic-function": "^5.0.0"
       },
       "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/open": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
-      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
-      "dependencies": {
-        "define-lazy-prop": "^2.0.0",
-        "is-docker": "^2.1.1",
-        "is-wsl": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -11584,6 +5718,8 @@
       "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",
@@ -11596,85 +5732,86 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/own-keys": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
-      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
-      "dependencies": {
-        "get-intrinsic": "^1.2.6",
-        "object-keys": "^1.1.1",
-        "safe-push-apply": "^1.0.0"
-      },
+    "node_modules/p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=4"
       }
     },
     "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==",
+      "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": {
-        "p-try": "^2.0.0"
+        "yocto-queue": "^0.1.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "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==",
+      "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": "^2.2.0"
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-queue": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz",
+      "integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.4",
+        "p-timeout": "^3.2.0"
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/p-retry": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
-      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+    "node_modules/p-queue/node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
+    "node_modules/p-timeout": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+      "license": "MIT",
       "dependencies": {
-        "@types/retry": "0.12.0",
-        "retry": "^0.13.1"
+        "p-finally": "^1.0.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "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==",
-      "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=="
-    },
-    "node_modules/param-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
-      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-      "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==",
+      "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -11686,6 +5823,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -11700,47 +5838,34 @@
       }
     },
     "node_modules/parse5": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
-    },
-    "node_modules/parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "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==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
+        "entities": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
     "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==",
-      "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"
       }
@@ -11748,154 +5873,79 @@
     "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=="
-    },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-scurry/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=="
-    },
-    "node_modules/path-to-regexp": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
-      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ=="
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
     },
     "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==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
+      "license": "MIT",
       "engines": {
-        "node": ">=8.6"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "find-up": "^4.0.0"
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
       }
     },
-    "node_modules/pkg-up": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
-      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
-      "dependencies": {
-        "find-up": "^3.0.0"
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
       },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pkg-up/node_modules/find-up": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-      "dependencies": {
-        "locate-path": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/pkg-up/node_modules/locate-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-      "dependencies": {
-        "p-locate": "^3.0.0",
-        "path-exists": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/pkg-up/node_modules/p-locate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-      "dependencies": {
-        "p-limit": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/pkg-up/node_modules/path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/possible-typed-array-names": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
-      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
-      "engines": {
-        "node": ">= 0.4"
+        "node": ">=18"
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -11910,8 +5960,9 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.17",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -11919,1212 +5970,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-attribute-case-insensitive": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz",
-      "integrity": "sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.10"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-browser-comments": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz",
-      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==",
-      "engines": {
-        "node": ">=8"
-      },
-      "peerDependencies": {
-        "browserslist": ">=4",
-        "postcss": ">=8"
-      }
-    },
-    "node_modules/postcss-calc": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
-      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.9",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.2"
-      }
-    },
-    "node_modules/postcss-clamp": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-clamp/-/postcss-clamp-4.1.0.tgz",
-      "integrity": "sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": ">=7.6.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.6"
-      }
-    },
-    "node_modules/postcss-color-functional-notation": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz",
-      "integrity": "sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-color-hex-alpha": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-8.0.4.tgz",
-      "integrity": "sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4"
-      }
-    },
-    "node_modules/postcss-color-rebeccapurple": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.1.1.tgz",
-      "integrity": "sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-colormin": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
-      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
-      "dependencies": {
-        "browserslist": "^4.21.4",
-        "caniuse-api": "^3.0.0",
-        "colord": "^2.9.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-convert-values": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
-      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
-      "dependencies": {
-        "browserslist": "^4.21.4",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-custom-media": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.2.tgz",
-      "integrity": "sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.3"
-      }
-    },
-    "node_modules/postcss-custom-properties": {
-      "version": "12.1.11",
-      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.11.tgz",
-      "integrity": "sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-custom-selectors": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-6.0.3.tgz",
-      "integrity": "sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.4"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.3"
-      }
-    },
-    "node_modules/postcss-dir-pseudo-class": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.5.tgz",
-      "integrity": "sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.10"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-discard-comments": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
-      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-discard-duplicates": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
-      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-discard-empty": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
-      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-discard-overridden": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
-      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-double-position-gradients": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.2.tgz",
-      "integrity": "sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==",
-      "dependencies": {
-        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-env-function": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-4.0.6.tgz",
-      "integrity": "sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4"
-      }
-    },
-    "node_modules/postcss-flexbugs-fixes": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
-      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
-      "peerDependencies": {
-        "postcss": "^8.1.4"
-      }
-    },
-    "node_modules/postcss-focus-visible": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-6.0.4.tgz",
-      "integrity": "sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.9"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4"
-      }
-    },
-    "node_modules/postcss-focus-within": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-5.0.4.tgz",
-      "integrity": "sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.9"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4"
-      }
-    },
-    "node_modules/postcss-font-variant": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
-      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/postcss-gap-properties": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz",
-      "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==",
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-image-set-function": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-4.0.7.tgz",
-      "integrity": "sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-initial": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
-      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-lab-function": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz",
-      "integrity": "sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==",
-      "dependencies": {
-        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "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/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
-    "node_modules/postcss-load-config/node_modules/yaml": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
-      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
-    "node_modules/postcss-loader": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
-      "integrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==",
-      "dependencies": {
-        "cosmiconfig": "^7.0.0",
-        "klona": "^2.0.5",
-        "semver": "^7.3.5"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "postcss": "^7.0.0 || ^8.0.1",
-        "webpack": "^5.0.0"
-      }
-    },
-    "node_modules/postcss-logical": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
-      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4"
-      }
-    },
-    "node_modules/postcss-media-minmax": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
-      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/postcss-merge-longhand": {
-      "version": "5.1.7",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
-      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0",
-        "stylehacks": "^5.1.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-merge-rules": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
-      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
-      "dependencies": {
-        "browserslist": "^4.21.4",
-        "caniuse-api": "^3.0.0",
-        "cssnano-utils": "^3.1.0",
-        "postcss-selector-parser": "^6.0.5"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-minify-font-values": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
-      "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-minify-gradients": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
-      "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
-      "dependencies": {
-        "colord": "^2.9.1",
-        "cssnano-utils": "^3.1.0",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-minify-params": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
-      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
-      "dependencies": {
-        "browserslist": "^4.21.4",
-        "cssnano-utils": "^3.1.0",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-minify-selectors": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
-      "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.5"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-modules-extract-imports": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
-      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/postcss-modules-local-by-default": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz",
-      "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
-      "dependencies": {
-        "icss-utils": "^5.0.0",
-        "postcss-selector-parser": "^7.0.0",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/postcss-modules-local-by-default/node_modules/postcss-selector-parser": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
-      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-modules-scope": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
-      "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
-      "dependencies": {
-        "postcss-selector-parser": "^7.0.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/postcss-modules-scope/node_modules/postcss-selector-parser": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
-      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-modules-values": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
-      "dependencies": {
-        "icss-utils": "^5.0.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-nesting": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.2.0.tgz",
-      "integrity": "sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==",
-      "dependencies": {
-        "@csstools/selector-specificity": "^2.0.0",
-        "postcss-selector-parser": "^6.0.10"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-normalize": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize/-/postcss-normalize-10.0.1.tgz",
-      "integrity": "sha512-+5w18/rDev5mqERcG3W5GZNMJa1eoYYNGo8gB7tEwaos0ajk3ZXAI4mHGcNT47NE+ZnZD1pEpUOFLvltIwmeJA==",
-      "dependencies": {
-        "@csstools/normalize.css": "*",
-        "postcss-browser-comments": "^4",
-        "sanitize.css": "*"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4",
-        "postcss": ">= 8"
-      }
-    },
-    "node_modules/postcss-normalize-charset": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
-      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-display-values": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
-      "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-positions": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
-      "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-repeat-style": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
-      "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-string": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
-      "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-timing-functions": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
-      "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-unicode": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
-      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
-      "dependencies": {
-        "browserslist": "^4.21.4",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-url": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
-      "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
-      "dependencies": {
-        "normalize-url": "^6.0.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-normalize-whitespace": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
-      "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-opacity-percentage": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz",
-      "integrity": "sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==",
-      "funding": [
-        {
-          "type": "kofi",
-          "url": "https://ko-fi.com/mrcgrtz"
-        },
-        {
-          "type": "liberapay",
-          "url": "https://liberapay.com/mrcgrtz"
-        }
-      ],
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-ordered-values": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
-      "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
-      "dependencies": {
-        "cssnano-utils": "^3.1.0",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-overflow-shorthand": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.4.tgz",
-      "integrity": "sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-page-break": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
-      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
-      "peerDependencies": {
-        "postcss": "^8"
-      }
-    },
-    "node_modules/postcss-place": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-7.0.5.tgz",
-      "integrity": "sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-preset-env": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-7.8.3.tgz",
-      "integrity": "sha512-T1LgRm5uEVFSEF83vHZJV2z19lHg4yJuZ6gXZZkqVsqv63nlr6zabMH3l4Pc01FQCyfWVrh2GaUeCVy9Po+Aag==",
-      "dependencies": {
-        "@csstools/postcss-cascade-layers": "^1.1.1",
-        "@csstools/postcss-color-function": "^1.1.1",
-        "@csstools/postcss-font-format-keywords": "^1.0.1",
-        "@csstools/postcss-hwb-function": "^1.0.2",
-        "@csstools/postcss-ic-unit": "^1.0.1",
-        "@csstools/postcss-is-pseudo-class": "^2.0.7",
-        "@csstools/postcss-nested-calc": "^1.0.0",
-        "@csstools/postcss-normalize-display-values": "^1.0.1",
-        "@csstools/postcss-oklab-function": "^1.1.1",
-        "@csstools/postcss-progressive-custom-properties": "^1.3.0",
-        "@csstools/postcss-stepped-value-functions": "^1.0.1",
-        "@csstools/postcss-text-decoration-shorthand": "^1.0.0",
-        "@csstools/postcss-trigonometric-functions": "^1.0.2",
-        "@csstools/postcss-unset-value": "^1.0.2",
-        "autoprefixer": "^10.4.13",
-        "browserslist": "^4.21.4",
-        "css-blank-pseudo": "^3.0.3",
-        "css-has-pseudo": "^3.0.4",
-        "css-prefers-color-scheme": "^6.0.3",
-        "cssdb": "^7.1.0",
-        "postcss-attribute-case-insensitive": "^5.0.2",
-        "postcss-clamp": "^4.1.0",
-        "postcss-color-functional-notation": "^4.2.4",
-        "postcss-color-hex-alpha": "^8.0.4",
-        "postcss-color-rebeccapurple": "^7.1.1",
-        "postcss-custom-media": "^8.0.2",
-        "postcss-custom-properties": "^12.1.10",
-        "postcss-custom-selectors": "^6.0.3",
-        "postcss-dir-pseudo-class": "^6.0.5",
-        "postcss-double-position-gradients": "^3.1.2",
-        "postcss-env-function": "^4.0.6",
-        "postcss-focus-visible": "^6.0.4",
-        "postcss-focus-within": "^5.0.4",
-        "postcss-font-variant": "^5.0.0",
-        "postcss-gap-properties": "^3.0.5",
-        "postcss-image-set-function": "^4.0.7",
-        "postcss-initial": "^4.0.1",
-        "postcss-lab-function": "^4.2.1",
-        "postcss-logical": "^5.0.4",
-        "postcss-media-minmax": "^5.0.0",
-        "postcss-nesting": "^10.2.0",
-        "postcss-opacity-percentage": "^1.1.2",
-        "postcss-overflow-shorthand": "^3.0.4",
-        "postcss-page-break": "^3.0.4",
-        "postcss-place": "^7.0.5",
-        "postcss-pseudo-class-any-link": "^7.1.6",
-        "postcss-replace-overflow-wrap": "^4.0.0",
-        "postcss-selector-not": "^6.0.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-pseudo-class-any-link": {
-      "version": "7.1.6",
-      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz",
-      "integrity": "sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.10"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-reduce-initial": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
-      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
-      "dependencies": {
-        "browserslist": "^4.21.4",
-        "caniuse-api": "^3.0.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-reduce-transforms": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
-      "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-replace-overflow-wrap": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
-      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
-      "peerDependencies": {
-        "postcss": "^8.0.3"
-      }
-    },
-    "node_modules/postcss-selector-not": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz",
-      "integrity": "sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.10"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >=16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-svgo": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
-      "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
-      "dependencies": {
-        "postcss-value-parser": "^4.2.0",
-        "svgo": "^2.7.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-svgo/node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/postcss-svgo/node_modules/css-tree": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-      "dependencies": {
-        "mdn-data": "2.0.14",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/postcss-svgo/node_modules/mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
-    },
-    "node_modules/postcss-svgo/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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postcss-svgo/node_modules/svgo": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
-      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
-      "dependencies": {
-        "@trysound/sax": "0.2.0",
-        "commander": "^7.2.0",
-        "css-select": "^4.1.3",
-        "css-tree": "^1.1.3",
-        "csso": "^4.2.0",
-        "picocolors": "^1.0.0",
-        "stable": "^0.1.8"
-      },
-      "bin": {
-        "svgo": "bin/svgo"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/postcss-unique-selectors": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
-      "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.5"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
-    },
     "node_modules/preact": {
       "version": "10.12.1",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
       "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+      "license": "MIT",
       "peer": true,
       "funding": {
         "type": "opencollective",
@@ -13135,34 +5985,33 @@
       "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/pretty-bytes": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
-      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
+    "node_modules/prettier": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.5.tgz",
+      "integrity": "sha512-/FVl766LpUfB5vXgCYOYa0MeV/441Ia99AeICQIQFTY/Nw0roZwULcXpku5i1/m5kt/baz+s4Zogspd839HSMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
       "engines": {
-        "node": ">=6"
+        "node": ">=14"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/pretty-error": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
-      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
-      "dependencies": {
-        "lodash": "^4.17.20",
-        "renderkid": "^3.0.0"
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -13172,46 +6021,27 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
-    "node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "license": "MIT"
+    },
+    "node_modules/progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/process-nextick-args": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
-    },
-    "node_modules/promise": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",
-      "integrity": "sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==",
-      "dependencies": {
-        "asap": "~2.0.6"
-      }
-    },
-    "node_modules/prompts": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
-      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
-      "dependencies": {
-        "kleur": "^3.0.3",
-        "sisteransi": "^1.0.5"
-      },
-      "engines": {
-        "node": ">= 6"
+        "node": ">=0.4.0"
       }
     },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -13221,84 +6051,26 @@
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "node_modules/proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "dependencies": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/proxy-addr/node_modules/ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "engines": {
-        "node": ">= 0.10"
-      }
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
     },
     "node_modules/proxy-from-env": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
-      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/psl": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
-      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
-      "dependencies": {
-        "punycode": "^2.3.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/lupomontero"
-      }
+      "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/q": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==",
-      "deprecated": "You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.\n\n(For a CapTP with native promises, see @endo/eventual-send and @endo/captp)",
-      "engines": {
-        "node": ">=0.6.0",
-        "teleport": ">=0.2.0"
-      }
-    },
-    "node_modules/qs": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
-      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
-      "dependencies": {
-        "side-channel": "^1.0.6"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/querystringify": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -13316,253 +6088,75 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ]
-    },
-    "node_modules/raf": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
-      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "dependencies": {
-        "performance-now": "^2.1.0"
-      }
-    },
-    "node_modules/randombytes": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dependencies": {
-        "safe-buffer": "^5.1.0"
-      }
-    },
-    "node_modules/range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/raw-body": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
-      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/raw-body/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      ],
+      "license": "MIT"
     },
     "node_modules/react": {
-      "version": "19.1.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
-      "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-app-polyfill": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
-      "integrity": "sha512-sZ41cxiU5llIB003yxxQBYrARBqe0repqPTTYBTmMqTz9szeBbE37BehCE891NZsmdZqqP+xWKdT3eo3vOzN8w==",
-      "dependencies": {
-        "core-js": "^3.19.2",
-        "object-assign": "^4.1.1",
-        "promise": "^8.1.0",
-        "raf": "^3.4.1",
-        "regenerator-runtime": "^0.13.9",
-        "whatwg-fetch": "^3.6.2"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/react-dev-utils": {
-      "version": "12.0.1",
-      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
-      "integrity": "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==",
-      "dependencies": {
-        "@babel/code-frame": "^7.16.0",
-        "address": "^1.1.2",
-        "browserslist": "^4.18.1",
-        "chalk": "^4.1.2",
-        "cross-spawn": "^7.0.3",
-        "detect-port-alt": "^1.1.6",
-        "escape-string-regexp": "^4.0.0",
-        "filesize": "^8.0.6",
-        "find-up": "^5.0.0",
-        "fork-ts-checker-webpack-plugin": "^6.5.0",
-        "global-modules": "^2.0.0",
-        "globby": "^11.0.4",
-        "gzip-size": "^6.0.0",
-        "immer": "^9.0.7",
-        "is-root": "^2.1.0",
-        "loader-utils": "^3.2.0",
-        "open": "^8.4.0",
-        "pkg-up": "^3.1.0",
-        "prompts": "^2.4.2",
-        "react-error-overlay": "^6.0.11",
-        "recursive-readdir": "^2.2.2",
-        "shell-quote": "^1.7.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/react-dev-utils/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==",
-      "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/loader-utils": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
-      "integrity": "sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==",
-      "engines": {
-        "node": ">= 12.13.0"
-      }
-    },
-    "node_modules/react-dev-utils/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==",
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/react-dev-utils/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==",
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/react-dev-utils/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==",
-      "dependencies": {
-        "p-limit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/react-dom": {
-      "version": "19.1.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
-      "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
+      "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
+      "license": "MIT",
       "dependencies": {
-        "scheduler": "^0.26.0"
+        "scheduler": "^0.27.0"
       },
       "peerDependencies": {
-        "react": "^19.1.1"
+        "react": "^19.2.7"
       }
     },
-    "node_modules/react-error-overlay": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.1.0.tgz",
-      "integrity": "sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ=="
+    "node_modules/react-hook-form": {
+      "version": "7.81.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.81.0.tgz",
+      "integrity": "sha512-ocbmr2p5KBMoAfj4WCUvped33lVi1Kd5DuDUvQDnB6VEAacOjPI/jMbtDdbhco4y9ct4xUuCmMY0b/C9L0QHjw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
     },
     "node_modules/react-icons": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
-      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.7.0.tgz",
+      "integrity": "sha512-LBLy340Rzqy6+/yVhZKT3B/QpP1BZaesGqasf09HPOBzRarcDIFH0WwXlXQfE7q7ipxK4MSiC5DIBWURCny6fw==",
+      "license": "MIT",
       "peerDependencies": {
         "react": "*"
       }
     },
     "node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-    },
-    "node_modules/react-redux": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
-      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
-      "dependencies": {
-        "@types/use-sync-external-store": "^0.0.6",
-        "use-sync-external-store": "^1.4.0"
-      },
-      "peerDependencies": {
-        "@types/react": "^18.2.25 || ^19",
-        "react": "^18.0 || ^19",
-        "redux": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "redux": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-refresh": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
-      "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.7.tgz",
+      "integrity": "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==",
+      "license": "MIT"
     },
     "node_modules/react-router": {
-      "version": "7.9.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz",
-      "integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-8.3.0.tgz",
+      "integrity": "sha512-qyPMvW83jGIct3yiieisxdk9M745anqhpIMKN5m1t6yBMfgVPpt77aHOqs5fUlEJRMCGffg9BaQLH9oPVOL7xQ==",
+      "license": "MIT",
       "dependencies": {
-        "cookie": "^1.0.1",
-        "set-cookie-parser": "^2.6.0"
+        "cookie-es": "^3.1.1"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=22.22.0"
       },
       "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
+        "react": ">=19.2.7",
+        "react-dom": ">=19.2.7"
       },
       "peerDependenciesMeta": {
         "react-dom": {
@@ -13570,105 +6164,11 @@
         }
       }
     },
-    "node_modules/react-router-dom": {
-      "version": "7.9.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.4.tgz",
-      "integrity": "sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==",
-      "dependencies": {
-        "react-router": "7.9.4"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/react-router/node_modules/cookie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/react-scripts": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
-      "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
-      "dependencies": {
-        "@babel/core": "^7.16.0",
-        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-        "@svgr/webpack": "^5.5.0",
-        "babel-jest": "^27.4.2",
-        "babel-loader": "^8.2.3",
-        "babel-plugin-named-asset-import": "^0.3.8",
-        "babel-preset-react-app": "^10.0.1",
-        "bfj": "^7.0.2",
-        "browserslist": "^4.18.1",
-        "camelcase": "^6.2.1",
-        "case-sensitive-paths-webpack-plugin": "^2.4.0",
-        "css-loader": "^6.5.1",
-        "css-minimizer-webpack-plugin": "^3.2.0",
-        "dotenv": "^10.0.0",
-        "dotenv-expand": "^5.1.0",
-        "eslint": "^8.3.0",
-        "eslint-config-react-app": "^7.0.1",
-        "eslint-webpack-plugin": "^3.1.1",
-        "file-loader": "^6.2.0",
-        "fs-extra": "^10.0.0",
-        "html-webpack-plugin": "^5.5.0",
-        "identity-obj-proxy": "^3.0.0",
-        "jest": "^27.4.3",
-        "jest-resolve": "^27.4.2",
-        "jest-watch-typeahead": "^1.0.0",
-        "mini-css-extract-plugin": "^2.4.5",
-        "postcss": "^8.4.4",
-        "postcss-flexbugs-fixes": "^5.0.2",
-        "postcss-loader": "^6.2.1",
-        "postcss-normalize": "^10.0.1",
-        "postcss-preset-env": "^7.0.1",
-        "prompts": "^2.4.2",
-        "react-app-polyfill": "^3.0.0",
-        "react-dev-utils": "^12.0.1",
-        "react-refresh": "^0.11.0",
-        "resolve": "^1.20.0",
-        "resolve-url-loader": "^4.0.0",
-        "sass-loader": "^12.3.0",
-        "semver": "^7.3.5",
-        "source-map-loader": "^3.0.0",
-        "style-loader": "^3.3.1",
-        "tailwindcss": "^3.0.2",
-        "terser-webpack-plugin": "^5.2.5",
-        "webpack": "^5.64.4",
-        "webpack-dev-server": "^4.6.0",
-        "webpack-manifest-plugin": "^4.0.2",
-        "workbox-webpack-plugin": "^6.4.1"
-      },
-      "bin": {
-        "react-scripts": "bin/react-scripts.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "^2.3.2"
-      },
-      "peerDependencies": {
-        "react": ">= 16",
-        "typescript": "^3.2.1 || ^4"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-toastify": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
-      "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.1.0.tgz",
+      "integrity": "sha512-e9h23x3phN0wbFeB6yovmWp7lobzV4CaCH0LO8nVP6H7Y+3GbcLpIzMm9dJhcp1RXbpyfvjgpfXqO80QAmn7sg==",
+      "license": "MIT",
       "dependencies": {
         "clsx": "^2.1.1"
       },
@@ -13681,6 +6181,7 @@
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
       "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "@babel/runtime": "^7.5.5",
         "dom-helpers": "^5.0.1",
@@ -13692,53 +6193,11 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/recursive-readdir": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
-      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
-      "dependencies": {
-        "minimatch": "^3.0.5"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
       "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "license": "MIT",
       "dependencies": {
         "indent-string": "^4.0.0",
         "strip-indent": "^3.0.0"
@@ -13747,180 +6206,24 @@
         "node": ">=8"
       }
     },
-    "node_modules/redux": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
-      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
-    },
-    "node_modules/redux-thunk": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
-      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
-      "peerDependencies": {
-        "redux": "^5.0.0"
-      }
-    },
-    "node_modules/reflect.getprototypeof": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
-      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.9",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.7",
-        "get-proto": "^1.0.1",
-        "which-builtin-type": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/regenerate": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
-      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
-    },
-    "node_modules/regenerate-unicode-properties": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz",
-      "integrity": "sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==",
-      "dependencies": {
-        "regenerate": "^1.4.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
-    },
-    "node_modules/regex-parser": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.3.1.tgz",
-      "integrity": "sha512-yXLRqatcCuKtVHsWrNg0JL3l1zGfdXeEvDa0bdu4tCDQw0RpMDZsqbkyRTUnKMR0tXF627V2oEWjBEaEdqTwtQ=="
-    },
-    "node_modules/regexp.prototype.flags": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
-      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-errors": "^1.3.0",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "set-function-name": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/regexpu-core": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz",
-      "integrity": "sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==",
-      "dependencies": {
-        "regenerate": "^1.4.2",
-        "regenerate-unicode-properties": "^10.2.0",
-        "regjsgen": "^0.8.0",
-        "regjsparser": "^0.12.0",
-        "unicode-match-property-ecmascript": "^2.0.0",
-        "unicode-match-property-value-ecmascript": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/regjsgen": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
-      "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q=="
-    },
-    "node_modules/regjsparser": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz",
-      "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==",
-      "dependencies": {
-        "jsesc": "~3.0.2"
-      },
-      "bin": {
-        "regjsparser": "bin/parser"
-      }
-    },
-    "node_modules/regjsparser/node_modules/jsesc": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
-      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/relateurl": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/renderkid": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
-      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
-      "dependencies": {
-        "css-select": "^4.1.3",
-        "dom-converter": "^0.2.0",
-        "htmlparser2": "^6.1.0",
-        "lodash": "^4.17.21",
-        "strip-ansi": "^6.0.1"
-      }
-    },
-    "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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
-    },
-    "node_modules/reselect": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
-      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
-    },
     "node_modules/resolve": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "license": "MIT",
       "dependencies": {
-        "is-core-module": "^2.16.0",
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -13934,174 +6237,81 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/resolve-cwd": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
-      "dependencies": {
-        "resolve-from": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "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/resolve-url-loader": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
-      "integrity": "sha512-05VEMczVREcbtT7Bz+C+96eUO5HDNvdthIiMB34t7FcF8ehcu4wC0sSgPUubs3XW2Q3CNLJk/BJrCU9wVRymiA==",
+    "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": {
-        "adjust-sourcemap-loader": "^4.0.0",
-        "convert-source-map": "^1.7.0",
-        "loader-utils": "^2.0.0",
-        "postcss": "^7.0.35",
-        "source-map": "0.6.1"
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
       },
       "engines": {
-        "node": ">=8.9"
-      },
-      "peerDependencies": {
-        "rework": "1.0.1",
-        "rework-visit": "1.0.0"
-      },
-      "peerDependenciesMeta": {
-        "rework": {
-          "optional": true
-        },
-        "rework-visit": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/resolve-url-loader/node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
-    },
-    "node_modules/resolve-url-loader/node_modules/picocolors": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
-    },
-    "node_modules/resolve-url-loader/node_modules/postcss": {
-      "version": "7.0.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-      "dependencies": {
-        "picocolors": "^0.2.1",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=6.0.0"
+        "node": ">=18"
       },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      }
-    },
-    "node_modules/resolve-url-loader/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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/resolve.exports": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.1.tgz",
-      "integrity": "sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/retry": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
-      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
-      "engines": {
-        "node": ">= 4"
+        "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==",
+      "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
       }
     },
-    "node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
+    "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": "2.79.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
-      "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
+    "node_modules/rolldown": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.5.tgz",
+      "integrity": "sha512-t9z29cJjXf/vxQ8dyhCSpt6H6aSwHTk8cT5I3iy6SMXuFpk5mB6PL6XfC8PCwrPTx93udwKUm9HRteAlTGBLiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.139.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
       "bin": {
-        "rollup": "dist/bin/rollup"
+        "rolldown": "bin/cli.mjs"
       },
       "engines": {
-        "node": ">=10.0.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/rollup-plugin-terser": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
-      "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
-      "deprecated": "This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser",
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "jest-worker": "^26.2.1",
-        "serialize-javascript": "^4.0.0",
-        "terser": "^5.0.0"
-      },
-      "peerDependencies": {
-        "rollup": "^2.0.0"
-      }
-    },
-    "node_modules/rollup-plugin-terser/node_modules/jest-worker": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
-      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
-      "dependencies": {
-        "@types/node": "*",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^7.0.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/rollup-plugin-terser/node_modules/serialize-javascript": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
-      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
-      "dependencies": {
-        "randombytes": "^2.1.0"
+        "@rolldown/binding-android-arm64": "1.1.5",
+        "@rolldown/binding-darwin-arm64": "1.1.5",
+        "@rolldown/binding-darwin-x64": "1.1.5",
+        "@rolldown/binding-freebsd-x64": "1.1.5",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.1.5",
+        "@rolldown/binding-linux-arm64-gnu": "1.1.5",
+        "@rolldown/binding-linux-arm64-musl": "1.1.5",
+        "@rolldown/binding-linux-ppc64-gnu": "1.1.5",
+        "@rolldown/binding-linux-s390x-gnu": "1.1.5",
+        "@rolldown/binding-linux-x64-gnu": "1.1.5",
+        "@rolldown/binding-linux-x64-musl": "1.1.5",
+        "@rolldown/binding-openharmony-arm64": "1.1.5",
+        "@rolldown/binding-wasm32-wasi": "1.1.5",
+        "@rolldown/binding-win32-arm64-msvc": "1.1.5",
+        "@rolldown/binding-win32-x64-msvc": "1.1.5"
       }
     },
     "node_modules/run-parallel": {
@@ -14122,216 +6332,36 @@
           "url": "https://feross.org/support"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/safe-array-concat": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
-      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.2",
-        "get-intrinsic": "^1.2.6",
-        "has-symbols": "^1.1.0",
-        "isarray": "^2.0.5"
-      },
-      "engines": {
-        "node": ">=0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/safe-push-apply": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
-      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "isarray": "^2.0.5"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/safe-regex-test": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
-      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "is-regex": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-    },
-    "node_modules/sanitize.css": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
-      "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
-    },
-    "node_modules/sass-loader": {
-      "version": "12.6.0",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
-      "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
-      "dependencies": {
-        "klona": "^2.0.4",
-        "neo-async": "^2.6.2"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "fibers": ">= 3.1.0",
-        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
-        "sass": "^1.3.0",
-        "sass-embedded": "*",
-        "webpack": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "fibers": {
-          "optional": true
-        },
-        "node-sass": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "sass-embedded": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/sax": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
-    },
     "node_modules/saxes": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
-      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
         "xmlchars": "^2.2.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=v12.22.7"
       }
     },
     "node_modules/scheduler": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
-      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="
-    },
-    "node_modules/schema-utils": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.2.tgz",
-      "integrity": "sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==",
-      "dependencies": {
-        "@types/json-schema": "^7.0.9",
-        "ajv": "^8.9.0",
-        "ajv-formats": "^2.1.1",
-        "ajv-keywords": "^5.1.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
-    "node_modules/schema-utils/node_modules/ajv": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/schema-utils/node_modules/ajv-keywords": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3"
-      },
-      "peerDependencies": {
-        "ajv": "^8.8.2"
-      }
-    },
-    "node_modules/schema-utils/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "node_modules/select-hose": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg=="
-    },
-    "node_modules/selfsigned": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
-      "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
-      "dependencies": {
-        "@types/node-forge": "^1.3.0",
-        "node-forge": "^1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -14339,199 +6369,12 @@
         "node": ">=10"
       }
     },
-    "node_modules/send": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
-      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
-      "dependencies": {
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "mime": "1.6.0",
-        "ms": "2.1.3",
-        "on-finished": "2.4.1",
-        "range-parser": "~1.2.1",
-        "statuses": "2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/send/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/send/node_modules/debug/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/send/node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/serialize-javascript": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
-      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
-      "dependencies": {
-        "randombytes": "^2.1.0"
-      }
-    },
-    "node_modules/serve-index": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
-      "dependencies": {
-        "accepts": "~1.3.4",
-        "batch": "0.6.1",
-        "debug": "2.6.9",
-        "escape-html": "~1.0.3",
-        "http-errors": "~1.6.2",
-        "mime-types": "~2.1.17",
-        "parseurl": "~1.3.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/serve-index/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/serve-index/node_modules/depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/serve-index/node_modules/http-errors": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-      "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
-      "dependencies": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.1.0",
-        "statuses": ">= 1.4.0 < 2"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/serve-index/node_modules/inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
-    },
-    "node_modules/serve-index/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/serve-index/node_modules/setprototypeof": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
-    },
-    "node_modules/serve-index/node_modules/statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/serve-static": {
-      "version": "1.16.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
-      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
-      "dependencies": {
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "0.19.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "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=="
-    },
-    "node_modules/set-function-length": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
-      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/set-function-name": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
-      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
-      "dependencies": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "functions-have-names": "^1.2.3",
-        "has-property-descriptors": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/set-proto": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
-      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
-      "dependencies": {
-        "dunder-proto": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
-    },
     "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"
       },
@@ -14543,584 +6386,155 @@
       "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==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
-      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3",
-        "side-channel-list": "^1.0.0",
-        "side-channel-map": "^1.0.1",
-        "side-channel-weakmap": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-list": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
-      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-map": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
-      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-weakmap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
-      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3",
-        "side-channel-map": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
     },
     "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=="
-    },
-    "node_modules/sisteransi": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
-    },
-    "node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "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": ">=8"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/sockjs": {
-      "version": "0.3.24",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
-      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+    "node_modules/slice-ansi": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-8.0.0.tgz",
+      "integrity": "sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "faye-websocket": "^0.11.3",
-        "uuid": "^8.3.2",
-        "websocket-driver": "^0.7.4"
+        "ansi-styles": "^6.2.3",
+        "is-fullwidth-code-point": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
-    "node_modules/source-list-map": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
-      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
+    "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/source-map": {
-      "version": "0.7.6",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
-      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">= 12"
+        "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==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/source-map-loader": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.2.tgz",
-      "integrity": "sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==",
-      "dependencies": {
-        "abab": "^2.0.5",
-        "iconv-lite": "^0.6.3",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.0.0"
-      }
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/source-map-support": {
-      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
+    "node_modules/std-env": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz",
+      "integrity": "sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/source-map-support/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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
-    },
-    "node_modules/spdy": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
-      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
-      "dependencies": {
-        "debug": "^4.1.0",
-        "handle-thing": "^2.0.0",
-        "http-deceiver": "^1.2.7",
-        "select-hose": "^2.0.0",
-        "spdy-transport": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/spdy-transport": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
-      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
-      "dependencies": {
-        "debug": "^4.1.0",
-        "detect-node": "^2.0.4",
-        "hpack.js": "^2.1.6",
-        "obuf": "^1.1.2",
-        "readable-stream": "^3.0.6",
-        "wbuf": "^1.7.3"
-      }
-    },
-    "node_modules/sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
-    },
-    "node_modules/stable": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
-      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility"
-    },
-    "node_modules/stack-utils": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
-      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
-      "dependencies": {
-        "escape-string-regexp": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/stack-utils/node_modules/escape-string-regexp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/stackframe": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
-      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
-    },
-    "node_modules/static-eval": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.2.tgz",
-      "integrity": "sha512-N/D219Hcr2bPjLxPiV+TQE++Tsmrady7TqAJugLy7Xk1EumfDWS/f5dtBbkRCGE7wKKXuYockQoj8Rm2/pVKyg==",
-      "dependencies": {
-        "escodegen": "^1.8.1"
-      }
-    },
-    "node_modules/static-eval/node_modules/escodegen": {
-      "version": "1.14.3",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
-      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
-      "dependencies": {
-        "esprima": "^4.0.1",
-        "estraverse": "^4.2.0",
-        "esutils": "^2.0.2",
-        "optionator": "^0.8.1"
-      },
-      "bin": {
-        "escodegen": "bin/escodegen.js",
-        "esgenerate": "bin/esgenerate.js"
-      },
-      "engines": {
-        "node": ">=4.0"
-      },
-      "optionalDependencies": {
-        "source-map": "~0.6.1"
-      }
-    },
-    "node_modules/static-eval/node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/static-eval/node_modules/levn": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
-      "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
-      "dependencies": {
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/static-eval/node_modules/optionator": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
-      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
-      "dependencies": {
-        "deep-is": "~0.1.3",
-        "fast-levenshtein": "~2.0.6",
-        "levn": "~0.3.0",
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2",
-        "word-wrap": "~1.2.3"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/static-eval/node_modules/prelude-ls": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-      "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/static-eval/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==",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/static-eval/node_modules/type-check": {
+    "node_modules/string-argv": {
       "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-      "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
-      "dependencies": {
-        "prelude-ls": "~1.1.2"
-      },
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.8.0"
+        "node": ">=0.6.19"
       }
     },
-    "node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/stop-iteration-iterator": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
-      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "internal-slot": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "dependencies": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
-    "node_modules/string-length": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
-      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
-      "dependencies": {
-        "char-regex": "^1.0.2",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/string-natural-compare": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/string-natural-compare/-/string-natural-compare-3.0.1.tgz",
-      "integrity": "sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw=="
-    },
     "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==",
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.2.tgz",
+      "integrity": "sha512-GaPUh5gfdrYzqeVNZvUfT23vYYxXzKYidUcnMtJg/3rxRV63EFZy3k6xfKlmfeJD0176lnUV/Usr3XcwSvFzpg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
+        "get-east-asian-width": "^1.5.0",
+        "strip-ansi": "^7.1.2"
       },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "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==",
-      "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/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=="
-    },
-    "node_modules/string-width/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=="
-    },
-    "node_modules/string.prototype.includes": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
-      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/string.prototype.matchall": {
-      "version": "4.0.12",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
-      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.6",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.6",
-        "gopd": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "internal-slot": "^1.1.0",
-        "regexp.prototype.flags": "^1.5.3",
-        "set-function-name": "^2.0.2",
-        "side-channel": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
+        "node": ">=20"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/string.prototype.repeat": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
-      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
-      "dependencies": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.5"
-      }
-    },
-    "node_modules/string.prototype.trim": {
-      "version": "1.2.10",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
-      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.2",
-        "define-data-property": "^1.1.4",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.5",
-        "es-object-atoms": "^1.0.0",
-        "has-property-descriptors": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/string.prototype.trimend": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
-      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.2",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/string.prototype.trimstart": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
-      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/stringify-object": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
-      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
-      "dependencies": {
-        "get-own-enumerable-property-symbols": "^3.0.0",
-        "is-obj": "^1.0.1",
-        "is-regexp": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "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==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^5.0.1"
+        "ansi-regex": "^6.2.2"
       },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "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==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
+        "node": ">=12"
       },
-      "engines": {
-        "node": ">=8"
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/strip-bom": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
-      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+    "node_modules/strip-ansi/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": ">=8"
-      }
-    },
-    "node_modules/strip-comments": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
-      "integrity": "sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "engines": {
-        "node": ">=6"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
     "node_modules/strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
       "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "license": "MIT",
       "dependencies": {
         "min-indent": "^1.0.0"
       },
@@ -15128,126 +6542,18 @@
         "node": ">=8"
       }
     },
-    "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==",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/style-loader": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
-      "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==",
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.0.0"
-      }
-    },
-    "node_modules/stylehacks": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
-      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
-      "dependencies": {
-        "browserslist": "^4.21.4",
-        "postcss-selector-parser": "^6.0.4"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.15"
-      }
-    },
     "node_modules/stylis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
-    },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/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==",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/sucrase/node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
     },
     "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"
       },
@@ -15255,22 +6561,11 @@
         "node": ">=8"
       }
     },
-    "node_modules/supports-hyperlinks": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
-      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
-      "dependencies": {
-        "has-flag": "^4.0.0",
-        "supports-color": "^7.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==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -15278,377 +6573,112 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/svg-parser": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
-      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
-    },
-    "node_modules/svgo": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
-      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
-      "deprecated": "This SVGO version is no longer supported. Upgrade to v2.x.x.",
-      "dependencies": {
-        "chalk": "^2.4.1",
-        "coa": "^2.0.2",
-        "css-select": "^2.0.0",
-        "css-select-base-adapter": "^0.1.1",
-        "css-tree": "1.0.0-alpha.37",
-        "csso": "^4.0.2",
-        "js-yaml": "^3.13.1",
-        "mkdirp": "~0.5.1",
-        "object.values": "^1.1.0",
-        "sax": "~1.2.4",
-        "stable": "^0.1.8",
-        "unquote": "~1.1.1",
-        "util.promisify": "~1.0.0"
-      },
-      "bin": {
-        "svgo": "bin/svgo"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/svgo/node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/svgo/node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/svgo/node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "node_modules/svgo/node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-    },
-    "node_modules/svgo/node_modules/css-select": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
-      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^3.2.1",
-        "domutils": "^1.7.0",
-        "nth-check": "^1.0.2"
-      }
-    },
-    "node_modules/svgo/node_modules/css-what": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
-      "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
-      "engines": {
-        "node": ">= 6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
-    "node_modules/svgo/node_modules/dom-serializer": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
-      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "entities": "^2.0.0"
-      }
-    },
-    "node_modules/svgo/node_modules/domutils": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
-      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
-      "dependencies": {
-        "dom-serializer": "0",
-        "domelementtype": "1"
-      }
-    },
-    "node_modules/svgo/node_modules/domutils/node_modules/domelementtype": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
-    },
-    "node_modules/svgo/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/svgo/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/svgo/node_modules/nth-check": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
-      "dependencies": {
-        "boolbase": "~1.0.0"
-      }
-    },
-    "node_modules/svgo/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tailwind-merge": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+      "integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.2.tgz",
+      "integrity": "sha512-WtctNNSH8A9jlMIqxzuYumOHU5uGZyRv0Q5svQl+oEPy5w84YpBxdb7MdqyiSPQge5jTJ6zFQLq0PFygdccSBA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/tapable": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
-      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
-      }
-    },
-    "node_modules/temp-dir": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
-      "integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/tempy": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tempy/-/tempy-0.6.0.tgz",
-      "integrity": "sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==",
-      "dependencies": {
-        "is-stream": "^2.0.0",
-        "temp-dir": "^2.0.0",
-        "type-fest": "^0.16.0",
-        "unique-string": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/tempy/node_modules/type-fest": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",
-      "integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/terminal-link": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
-      "integrity": "sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==",
-      "dependencies": {
-        "ansi-escapes": "^4.2.1",
-        "supports-hyperlinks": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/terser": {
-      "version": "5.43.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.43.1.tgz",
-      "integrity": "sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==",
-      "dependencies": {
-        "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.14.0",
-        "commander": "^2.20.0",
-        "source-map-support": "~0.5.20"
-      },
-      "bin": {
-        "terser": "bin/terser"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/terser-webpack-plugin": {
-      "version": "5.3.14",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.14.tgz",
-      "integrity": "sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==",
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.25",
-        "jest-worker": "^27.4.5",
-        "schema-utils": "^4.3.0",
-        "serialize-javascript": "^6.0.2",
-        "terser": "^5.31.1"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.1.0"
-      },
-      "peerDependenciesMeta": {
-        "@swc/core": {
-          "optional": true
-        },
-        "esbuild": {
-          "optional": true
-        },
-        "uglify-js": {
-          "optional": true
-        }
       }
     },
-    "node_modules/terser/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/test-exclude": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
-      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+    "node_modules/tinyexec": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz",
+      "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "license": "MIT",
       "dependencies": {
-        "@istanbuljs/schema": "^0.1.2",
-        "glob": "^7.1.4",
-        "minimatch": "^3.0.4"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
       },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
-    },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
+        "node": ">=12.0.0"
       },
-      "engines": {
-        "node": ">=0.8"
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/throat": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",
-      "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ=="
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
     },
-    "node_modules/thunky": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
-      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
+    "node_modules/tldts": {
+      "version": "7.4.8",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.4.8.tgz",
+      "integrity": "sha512-htwgN/8KRB3z3vnC0BOETVh2m499g5GmyTK9Wq5JBLX3FNz6tSBveAd+fQhzy9hkjif8vy2jwDMR1sGhLtZl2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.4.8"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
     },
-    "node_modules/tmpl": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
-      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw=="
+    "node_modules/tldts-core": {
+      "version": "7.4.8",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.4.8.tgz",
+      "integrity": "sha512-c1P7u0EhACHj7lPy4MJm8iTFEU8+nB0LCtddH0fhP7noaVoXAqafMtOOeX+ulpuPBqnrRgRhw494RICT3mbhnw==",
+      "dev": true,
+      "license": "MIT"
     },
     "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==",
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -15656,115 +6686,58 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
     "node_modules/tough-cookie": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
-      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.2.tgz",
+      "integrity": "sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
+        "tldts": "^7.0.5"
       },
       "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tough-cookie/node_modules/universalify": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-      "engines": {
-        "node": ">= 4.0.0"
+        "node": ">=16"
       }
     },
     "node_modules/tr46": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
-      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "punycode": "^2.1.1"
+        "punycode": "^2.3.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=20"
       }
     },
-    "node_modules/tryer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
-      "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
-    },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
-    },
-    "node_modules/tsconfig-paths": {
-      "version": "3.15.0",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
-      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
-      "dependencies": {
-        "@types/json5": "^0.0.29",
-        "json5": "^1.0.2",
-        "minimist": "^1.2.6",
-        "strip-bom": "^3.0.0"
-      }
-    },
-    "node_modules/tsconfig-paths/node_modules/json5": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-      "dependencies": {
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "json5": "lib/cli.js"
-      }
-    },
-    "node_modules/tsconfig-paths/node_modules/strip-bom": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+    "node_modules/ts-api-utils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
+      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
       }
     },
     "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=="
-    },
-    "node_modules/tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-      "dependencies": {
-        "tslib": "^1.8.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "peerDependencies": {
-        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-      }
-    },
-    "node_modules/tsutils/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
     },
     "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"
       },
@@ -15772,236 +6745,75 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/type-detect": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "dependencies": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/typed-array-buffer": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
-      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
-      "dependencies": {
-        "call-bound": "^1.0.3",
-        "es-errors": "^1.3.0",
-        "is-typed-array": "^1.1.14"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/typed-array-byte-length": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
-      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "for-each": "^0.3.3",
-        "gopd": "^1.2.0",
-        "has-proto": "^1.2.0",
-        "is-typed-array": "^1.1.14"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/typed-array-byte-offset": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
-      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
-      "dependencies": {
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.8",
-        "for-each": "^0.3.3",
-        "gopd": "^1.2.0",
-        "has-proto": "^1.2.0",
-        "is-typed-array": "^1.1.15",
-        "reflect.getprototypeof": "^1.0.9"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/typed-array-length": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
-      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
-      "dependencies": {
-        "call-bind": "^1.0.7",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "is-typed-array": "^1.1.13",
-        "possible-typed-array-names": "^1.0.0",
-        "reflect.getprototypeof": "^1.0.6"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/typedarray-to-buffer": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
-      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
-      "dependencies": {
-        "is-typedarray": "^1.0.0"
-      }
-    },
     "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "peer": true,
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "dev": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
-    "node_modules/unbox-primitive": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
-      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+    "node_modules/typescript-eslint": {
+      "version": "8.63.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.63.0.tgz",
+      "integrity": "sha512-xgwXyzG4sK9ALkBxbyGkTMMOS+imnW65iPhxCQMK83KhxyoDNW7l+IDqEf9vMdoUidHpOoS967RCq4eMiTexwQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bound": "^1.0.3",
-        "has-bigints": "^1.0.2",
-        "has-symbols": "^1.1.0",
-        "which-boxed-primitive": "^1.1.1"
+        "@typescript-eslint/eslint-plugin": "8.63.0",
+        "@typescript-eslint/parser": "8.63.0",
+        "@typescript-eslint/typescript-estree": "8.63.0",
+        "@typescript-eslint/utils": "8.63.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
       }
     },
-    "node_modules/underscore": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
-      "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw=="
+    "node_modules/undici": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.29.0.tgz",
+      "integrity": "sha512-IDxfleLmmbSskfWSUATiN1nfn2rDuvnMOqb5CWR92iIfojA0Ud+ulOAAEQ57LPr9rWmsreUyf5lwyao+7GNNVw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
     },
     "node_modules/undici-types": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz",
-      "integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag=="
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "devOptional": true,
+      "license": "MIT"
     },
-    "node_modules/unicode-canonical-property-names-ecmascript": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
-      "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/unicode-match-property-ecmascript": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
-      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
-      "dependencies": {
-        "unicode-canonical-property-names-ecmascript": "^2.0.0",
-        "unicode-property-aliases-ecmascript": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/unicode-match-property-value-ecmascript": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz",
-      "integrity": "sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/unicode-property-aliases-ecmascript": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
-      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/unique-string": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
-      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
-      "dependencies": {
-        "crypto-random-string": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/unquote": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
-      "integrity": "sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg=="
-    },
-    "node_modules/upath": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
-      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
-      "engines": {
-        "node": ">=4",
-        "yarn": "*"
+    "node_modules/unload": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/unload/-/unload-2.4.1.tgz",
+      "integrity": "sha512-IViSAm8Z3sRBYA+9wc0fLQmU9Nrxb16rcDmIiR6Y9LJSZzI7QY5QsDhqPpKOjAn0O9/kfK1TfNEMMAGPTIraPw==",
+      "license": "Apache-2.0",
+      "funding": {
+        "url": "https://github.com/sponsors/pubkey"
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
-      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -16016,6 +6828,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "escalade": "^3.2.0",
         "picocolors": "^1.1.1"
@@ -16031,454 +6844,247 @@
       "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/url-parse": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+    "node_modules/vite": {
+      "version": "8.1.4",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.4.tgz",
+      "integrity": "sha512-bTT9PsdWO+MQMNG9ZXIP/qM9wGh37DFxTV/sPq9cFpHr3w4jkgef032PkAL9jAqhk3Nz8NQw3O8n6/xFkqO4QQ==",
+      "license": "MIT",
       "dependencies": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
-    "node_modules/use-sync-external-store": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
-      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.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=="
-    },
-    "node_modules/util.promisify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
-      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
-      "dependencies": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.2",
-        "has-symbols": "^1.0.1",
-        "object.getownpropertydescriptors": "^2.1.0"
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.5",
+        "postcss": "^8.5.16",
+        "rolldown": "~1.1.4",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.3.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.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
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "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/utila": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
-    },
-    "node_modules/utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+    "node_modules/vite/node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">= 0.4.0"
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/v8-to-istanbul": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
-      "integrity": "sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==",
+    "node_modules/vitest": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.11.tgz",
+      "integrity": "sha512-fhACrNXUidIbGSBr5FlbuBkO7VWC1ZyLl0DO4CU2DrQoAPxX84Ysxs+HeGQpii5lZWV1Q4gBZTTu49mF+A6Edw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^1.6.0",
-        "source-map": "^0.7.3"
+        "@vitest/expect": "4.1.11",
+        "@vitest/mocker": "4.1.11",
+        "@vitest/pretty-format": "4.1.11",
+        "@vitest/runner": "4.1.11",
+        "@vitest/snapshot": "4.1.11",
+        "@vitest/spy": "4.1.11",
+        "@vitest/utils": "4.1.11",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
       },
       "engines": {
-        "node": ">=10.12.0"
-      }
-    },
-    "node_modules/v8-to-istanbul/node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
-    },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/w3c-hr-time": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
-      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
-      "deprecated": "Use your platform's native performance.now() and performance.timeOrigin.",
-      "dependencies": {
-        "browser-process-hrtime": "^1.0.0"
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.11",
+        "@vitest/browser-preview": "4.1.11",
+        "@vitest/browser-webdriverio": "4.1.11",
+        "@vitest/coverage-istanbul": "4.1.11",
+        "@vitest/coverage-v8": "4.1.11",
+        "@vitest/ui": "4.1.11",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
       }
     },
     "node_modules/w3c-xmlserializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
-      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "xml-name-validator": "^3.0.0"
+        "xml-name-validator": "^5.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
-    "node_modules/walker": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
-      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
-      "dependencies": {
-        "makeerror": "1.0.12"
-      }
-    },
-    "node_modules/watchpack": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
-      "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
-      "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/wbuf": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
-      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
-      "dependencies": {
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
-    "node_modules/web-vitals": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
-      "integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
-    },
     "node_modules/webidl-conversions": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
-      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=10.4"
+        "node": ">=20"
       }
     },
-    "node_modules/webpack": {
-      "version": "5.101.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.101.0.tgz",
-      "integrity": "sha512-B4t+nJqytPeuZlHuIKTbalhljIFXeNRqrUGAQgTGlfOl2lXXKXw+yZu6bicycP+PUlM44CxBjCFD6aciKFT3LQ==",
-      "dependencies": {
-        "@types/eslint-scope": "^3.7.7",
-        "@types/estree": "^1.0.8",
-        "@types/json-schema": "^7.0.15",
-        "@webassemblyjs/ast": "^1.14.1",
-        "@webassemblyjs/wasm-edit": "^1.14.1",
-        "@webassemblyjs/wasm-parser": "^1.14.1",
-        "acorn": "^8.15.0",
-        "acorn-import-phases": "^1.0.3",
-        "browserslist": "^4.24.0",
-        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.17.2",
-        "es-module-lexer": "^1.2.1",
-        "eslint-scope": "5.1.1",
-        "events": "^3.2.0",
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.2.11",
-        "json-parse-even-better-errors": "^2.3.1",
-        "loader-runner": "^4.2.0",
-        "mime-types": "^2.1.27",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^4.3.2",
-        "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.3.11",
-        "watchpack": "^2.4.1",
-        "webpack-sources": "^3.3.3"
-      },
-      "bin": {
-        "webpack": "bin/webpack.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependenciesMeta": {
-        "webpack-cli": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/webpack-dev-middleware": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
-      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
-      "dependencies": {
-        "colorette": "^2.0.10",
-        "memfs": "^3.4.3",
-        "mime-types": "^2.1.31",
-        "range-parser": "^1.2.1",
-        "schema-utils": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^4.0.0 || ^5.0.0"
-      }
-    },
-    "node_modules/webpack-dev-server": {
-      "version": "4.15.2",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
-      "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
-      "dependencies": {
-        "@types/bonjour": "^3.5.9",
-        "@types/connect-history-api-fallback": "^1.3.5",
-        "@types/express": "^4.17.13",
-        "@types/serve-index": "^1.9.1",
-        "@types/serve-static": "^1.13.10",
-        "@types/sockjs": "^0.3.33",
-        "@types/ws": "^8.5.5",
-        "ansi-html-community": "^0.0.8",
-        "bonjour-service": "^1.0.11",
-        "chokidar": "^3.5.3",
-        "colorette": "^2.0.10",
-        "compression": "^1.7.4",
-        "connect-history-api-fallback": "^2.0.0",
-        "default-gateway": "^6.0.3",
-        "express": "^4.17.3",
-        "graceful-fs": "^4.2.6",
-        "html-entities": "^2.3.2",
-        "http-proxy-middleware": "^2.0.3",
-        "ipaddr.js": "^2.0.1",
-        "launch-editor": "^2.6.0",
-        "open": "^8.0.9",
-        "p-retry": "^4.5.0",
-        "rimraf": "^3.0.2",
-        "schema-utils": "^4.0.0",
-        "selfsigned": "^2.1.1",
-        "serve-index": "^1.9.1",
-        "sockjs": "^0.3.24",
-        "spdy": "^4.0.2",
-        "webpack-dev-middleware": "^5.3.4",
-        "ws": "^8.13.0"
-      },
-      "bin": {
-        "webpack-dev-server": "bin/webpack-dev-server.js"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^4.37.0 || ^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "webpack": {
-          "optional": true
-        },
-        "webpack-cli": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/http-proxy-middleware": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz",
-      "integrity": "sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q==",
-      "dependencies": {
-        "@types/http-proxy": "^1.17.8",
-        "http-proxy": "^1.18.1",
-        "is-glob": "^4.0.1",
-        "is-plain-obj": "^3.0.0",
-        "micromatch": "^4.0.2"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "@types/express": "^4.17.13"
-      },
-      "peerDependenciesMeta": {
-        "@types/express": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.18.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
-      "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/webpack-manifest-plugin": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-4.1.1.tgz",
-      "integrity": "sha512-YXUAwxtfKIJIKkhg03MKuiFAD72PlrqCiwdwO4VEXdRO5V0ORCNwaOwAZawPZalCbmH9kBDmXnNeQOw+BIEiow==",
-      "dependencies": {
-        "tapable": "^2.0.0",
-        "webpack-sources": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=12.22.0"
-      },
-      "peerDependencies": {
-        "webpack": "^4.44.2 || ^5.47.0"
-      }
-    },
-    "node_modules/webpack-manifest-plugin/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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/webpack-manifest-plugin/node_modules/webpack-sources": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.1.tgz",
-      "integrity": "sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==",
-      "dependencies": {
-        "source-list-map": "^2.0.1",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/webpack-sources": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.3.tgz",
-      "integrity": "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==",
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/webpack/node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/webpack/node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/websocket-driver": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
-      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
-      "dependencies": {
-        "http-parser-js": ">=0.5.1",
-        "safe-buffer": ">=5.1.0",
-        "websocket-extensions": ">=0.1.1"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/websocket-extensions": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
-      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/whatwg-encoding": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
-      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
-      "dependencies": {
-        "iconv-lite": "0.4.24"
-      }
-    },
-    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/whatwg-fetch": {
-      "version": "3.6.20",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
-      "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
-    },
     "node_modules/whatwg-mimetype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
-      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g=="
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
     },
     "node_modules/whatwg-url": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
-      "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "lodash": "^4.7.0",
-        "tr46": "^2.1.0",
-        "webidl-conversions": "^6.1.0"
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^20.19.0 || ^22.12.0 || >=24.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"
       },
@@ -16489,475 +7095,87 @@
         "node": ">= 8"
       }
     },
-    "node_modules/which-boxed-primitive": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
-      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "is-bigint": "^1.1.0",
-        "is-boolean-object": "^1.2.1",
-        "is-number-object": "^1.1.1",
-        "is-string": "^1.1.1",
-        "is-symbol": "^1.1.1"
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/which-builtin-type": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
-      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "function.prototype.name": "^1.1.6",
-        "has-tostringtag": "^1.0.2",
-        "is-async-function": "^2.0.0",
-        "is-date-object": "^1.1.0",
-        "is-finalizationregistry": "^1.1.0",
-        "is-generator-function": "^1.0.10",
-        "is-regex": "^1.2.1",
-        "is-weakref": "^1.0.2",
-        "isarray": "^2.0.5",
-        "which-boxed-primitive": "^1.1.0",
-        "which-collection": "^1.0.2",
-        "which-typed-array": "^1.1.16"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/which-collection": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
-      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
-      "dependencies": {
-        "is-map": "^2.0.3",
-        "is-set": "^2.0.3",
-        "is-weakmap": "^2.0.2",
-        "is-weakset": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/which-typed-array": {
-      "version": "1.1.19",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
-      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
-      "dependencies": {
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "for-each": "^0.3.5",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-tostringtag": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">=8"
       }
     },
     "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/workbox-background-sync": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-6.6.0.tgz",
-      "integrity": "sha512-jkf4ZdgOJxC9u2vztxLuPT/UjlH7m/nWRQ/MgGL0v8BJHoZdVGJd18Kck+a0e55wGXdqyHO+4IQTk0685g4MUw==",
-      "dependencies": {
-        "idb": "^7.0.1",
-        "workbox-core": "6.6.0"
-      }
-    },
-    "node_modules/workbox-broadcast-update": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-6.6.0.tgz",
-      "integrity": "sha512-nm+v6QmrIFaB/yokJmQ/93qIJ7n72NICxIwQwe5xsZiV2aI93MGGyEyzOzDPVz5THEr5rC3FJSsO3346cId64Q==",
-      "dependencies": {
-        "workbox-core": "6.6.0"
-      }
-    },
-    "node_modules/workbox-build": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-6.6.0.tgz",
-      "integrity": "sha512-Tjf+gBwOTuGyZwMz2Nk/B13Fuyeo0Q84W++bebbVsfr9iLkDSo6j6PST8tET9HYA58mlRXwlMGpyWO8ETJiXdQ==",
-      "dependencies": {
-        "@apideck/better-ajv-errors": "^0.3.1",
-        "@babel/core": "^7.11.1",
-        "@babel/preset-env": "^7.11.0",
-        "@babel/runtime": "^7.11.2",
-        "@rollup/plugin-babel": "^5.2.0",
-        "@rollup/plugin-node-resolve": "^11.2.1",
-        "@rollup/plugin-replace": "^2.4.1",
-        "@surma/rollup-plugin-off-main-thread": "^2.2.3",
-        "ajv": "^8.6.0",
-        "common-tags": "^1.8.0",
-        "fast-json-stable-stringify": "^2.1.0",
-        "fs-extra": "^9.0.1",
-        "glob": "^7.1.6",
-        "lodash": "^4.17.20",
-        "pretty-bytes": "^5.3.0",
-        "rollup": "^2.43.1",
-        "rollup-plugin-terser": "^7.0.0",
-        "source-map": "^0.8.0-beta.0",
-        "stringify-object": "^3.3.0",
-        "strip-comments": "^2.0.1",
-        "tempy": "^0.6.0",
-        "upath": "^1.2.0",
-        "workbox-background-sync": "6.6.0",
-        "workbox-broadcast-update": "6.6.0",
-        "workbox-cacheable-response": "6.6.0",
-        "workbox-core": "6.6.0",
-        "workbox-expiration": "6.6.0",
-        "workbox-google-analytics": "6.6.0",
-        "workbox-navigation-preload": "6.6.0",
-        "workbox-precaching": "6.6.0",
-        "workbox-range-requests": "6.6.0",
-        "workbox-recipes": "6.6.0",
-        "workbox-routing": "6.6.0",
-        "workbox-strategies": "6.6.0",
-        "workbox-streams": "6.6.0",
-        "workbox-sw": "6.6.0",
-        "workbox-window": "6.6.0"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/workbox-build/node_modules/@apideck/better-ajv-errors": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
-      "integrity": "sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==",
-      "dependencies": {
-        "json-schema": "^0.4.0",
-        "jsonpointer": "^5.0.0",
-        "leven": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "ajv": ">=8"
-      }
-    },
-    "node_modules/workbox-build/node_modules/ajv": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/workbox-build/node_modules/fs-extra": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-      "dependencies": {
-        "at-least-node": "^1.0.0",
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/workbox-build/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "node_modules/workbox-build/node_modules/source-map": {
-      "version": "0.8.0-beta.0",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
-      "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
-      "deprecated": "The work that was done in this beta branch won't be included in future versions",
-      "dependencies": {
-        "whatwg-url": "^7.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/workbox-build/node_modules/tr46": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
-      "integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
-      "dependencies": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "node_modules/workbox-build/node_modules/webidl-conversions": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
-      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
-    },
-    "node_modules/workbox-build/node_modules/whatwg-url": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
-      "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
-      "dependencies": {
-        "lodash.sortby": "^4.7.0",
-        "tr46": "^1.0.1",
-        "webidl-conversions": "^4.0.2"
-      }
-    },
-    "node_modules/workbox-cacheable-response": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.6.0.tgz",
-      "integrity": "sha512-JfhJUSQDwsF1Xv3EV1vWzSsCOZn4mQ38bWEBR3LdvOxSPgB65gAM6cS2CX8rkkKHRgiLrN7Wxoyu+TuH67kHrw==",
-      "deprecated": "workbox-background-sync@6.6.0",
-      "dependencies": {
-        "workbox-core": "6.6.0"
-      }
-    },
-    "node_modules/workbox-core": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-6.6.0.tgz",
-      "integrity": "sha512-GDtFRF7Yg3DD859PMbPAYPeJyg5gJYXuBQAC+wyrWuuXgpfoOrIQIvFRZnQ7+czTIQjIr1DhLEGFzZanAT/3bQ=="
-    },
-    "node_modules/workbox-expiration": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.6.0.tgz",
-      "integrity": "sha512-baplYXcDHbe8vAo7GYvyAmlS4f6998Jff513L4XvlzAOxcl8F620O91guoJ5EOf5qeXG4cGdNZHkkVAPouFCpw==",
-      "dependencies": {
-        "idb": "^7.0.1",
-        "workbox-core": "6.6.0"
-      }
-    },
-    "node_modules/workbox-google-analytics": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.6.0.tgz",
-      "integrity": "sha512-p4DJa6OldXWd6M9zRl0H6vB9lkrmqYFkRQ2xEiNdBFp9U0LhsGO7hsBscVEyH9H2/3eZZt8c97NB2FD9U2NJ+Q==",
-      "deprecated": "It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained",
-      "dependencies": {
-        "workbox-background-sync": "6.6.0",
-        "workbox-core": "6.6.0",
-        "workbox-routing": "6.6.0",
-        "workbox-strategies": "6.6.0"
-      }
-    },
-    "node_modules/workbox-navigation-preload": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-6.6.0.tgz",
-      "integrity": "sha512-utNEWG+uOfXdaZmvhshrh7KzhDu/1iMHyQOV6Aqup8Mm78D286ugu5k9MFD9SzBT5TcwgwSORVvInaXWbvKz9Q==",
-      "dependencies": {
-        "workbox-core": "6.6.0"
-      }
-    },
-    "node_modules/workbox-precaching": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-6.6.0.tgz",
-      "integrity": "sha512-eYu/7MqtRZN1IDttl/UQcSZFkHP7dnvr/X3Vn6Iw6OsPMruQHiVjjomDFCNtd8k2RdjLs0xiz9nq+t3YVBcWPw==",
-      "dependencies": {
-        "workbox-core": "6.6.0",
-        "workbox-routing": "6.6.0",
-        "workbox-strategies": "6.6.0"
-      }
-    },
-    "node_modules/workbox-range-requests": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-6.6.0.tgz",
-      "integrity": "sha512-V3aICz5fLGq5DpSYEU8LxeXvsT//mRWzKrfBOIxzIdQnV/Wj7R+LyJVTczi4CQ4NwKhAaBVaSujI1cEjXW+hTw==",
-      "dependencies": {
-        "workbox-core": "6.6.0"
-      }
-    },
-    "node_modules/workbox-recipes": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.6.0.tgz",
-      "integrity": "sha512-TFi3kTgYw73t5tg73yPVqQC8QQjxJSeqjXRO4ouE/CeypmP2O/xqmB/ZFBBQazLTPxILUQ0b8aeh0IuxVn9a6A==",
-      "dependencies": {
-        "workbox-cacheable-response": "6.6.0",
-        "workbox-core": "6.6.0",
-        "workbox-expiration": "6.6.0",
-        "workbox-precaching": "6.6.0",
-        "workbox-routing": "6.6.0",
-        "workbox-strategies": "6.6.0"
-      }
-    },
-    "node_modules/workbox-routing": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.6.0.tgz",
-      "integrity": "sha512-x8gdN7VDBiLC03izAZRfU+WKUXJnbqt6PG9Uh0XuPRzJPpZGLKce/FkOX95dWHRpOHWLEq8RXzjW0O+POSkKvw==",
-      "dependencies": {
-        "workbox-core": "6.6.0"
-      }
-    },
-    "node_modules/workbox-strategies": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.6.0.tgz",
-      "integrity": "sha512-eC07XGuINAKUWDnZeIPdRdVja4JQtTuc35TZ8SwMb1ztjp7Ddq2CJ4yqLvWzFWGlYI7CG/YGqaETntTxBGdKgQ==",
-      "dependencies": {
-        "workbox-core": "6.6.0"
-      }
-    },
-    "node_modules/workbox-streams": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-6.6.0.tgz",
-      "integrity": "sha512-rfMJLVvwuED09CnH1RnIep7L9+mj4ufkTyDPVaXPKlhi9+0czCu+SJggWCIFbPpJaAZmp2iyVGLqS3RUmY3fxg==",
-      "dependencies": {
-        "workbox-core": "6.6.0",
-        "workbox-routing": "6.6.0"
-      }
-    },
-    "node_modules/workbox-sw": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-6.6.0.tgz",
-      "integrity": "sha512-R2IkwDokbtHUE4Kus8pKO5+VkPHD2oqTgl+XJwh4zbF1HyjAbgNmK/FneZHVU7p03XUt9ICfuGDYISWG9qV/CQ=="
-    },
-    "node_modules/workbox-webpack-plugin": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-6.6.0.tgz",
-      "integrity": "sha512-xNZIZHalboZU66Wa7x1YkjIqEy1gTR+zPM+kjrYJzqN7iurYZBctBLISyScjhkJKYuRrZUP0iqViZTh8rS0+3A==",
-      "dependencies": {
-        "fast-json-stable-stringify": "^2.1.0",
-        "pretty-bytes": "^5.4.1",
-        "upath": "^1.2.0",
-        "webpack-sources": "^1.4.3",
-        "workbox-build": "6.6.0"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "webpack": "^4.4.0 || ^5.9.0"
-      }
-    },
-    "node_modules/workbox-webpack-plugin/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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/workbox-webpack-plugin/node_modules/webpack-sources": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
-      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
-      "dependencies": {
-        "source-list-map": "^2.0.0",
-        "source-map": "~0.6.1"
-      }
-    },
-    "node_modules/workbox-window": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-6.6.0.tgz",
-      "integrity": "sha512-L4N9+vka17d16geaJXXRjENLFldvkWy7JyGxElRD0JvBxvFEd8LOhr+uXCcar/NzAmIBRv9EZ+M+Qr4mOoBITw==",
-      "dependencies": {
-        "@types/trusted-types": "^2.0.2",
-        "workbox-core": "6.6.0"
-      }
-    },
     "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==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-10.0.0.tgz",
+      "integrity": "sha512-SGcvg80f0wUy2/fXES19feHMz8E0JoXv2uNgHOu4Dgi2OrCy1lqwFYEJz1BLbDI0exjPMe/ZdzZ/YpGECBG/aQ==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
+        "ansi-styles": "^6.2.3",
+        "string-width": "^8.2.0",
+        "strip-ansi": "^7.1.2"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=20"
       },
       "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==",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
+    "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": ">=10"
+        "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?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=="
-    },
-    "node_modules/write-file-atomic": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-      "dependencies": {
-        "imurmurhash": "^0.1.4",
-        "is-typedarray": "^1.0.0",
-        "signal-exit": "^3.0.2",
-        "typedarray-to-buffer": "^3.1.5"
-      }
-    },
-    "node_modules/ws": {
-      "version": "7.5.10",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
-      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
-      "engines": {
-        "node": ">=8.3.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/xml-name-validator": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
-      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
     },
     "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"
       }
@@ -16965,11913 +7183,106 @@
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
       }
     },
     "node_modules/yargs": {
-      "version": "16.2.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.0.0.tgz",
+      "integrity": "sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "cliui": "^7.0.2",
+        "cliui": "^9.0.1",
         "escalade": "^3.1.1",
         "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.0",
+        "string-width": "^7.2.0",
         "y18n": "^5.0.5",
-        "yargs-parser": "^20.2.2"
+        "yargs-parser": "^22.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^20.19.0 || ^22.12.0 || >=23"
       }
     },
     "node_modules/yargs-parser": {
-      "version": "20.2.9",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz",
+      "integrity": "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==",
+      "dev": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=10"
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/yargs/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/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"
       }
-    }
-  },
-  "dependencies": {
-    "@adobe/css-tools": {
+    },
+    "node_modules/zod": {
       "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.3.tgz",
-      "integrity": "sha512-VQKMkwriZbaOgVCby1UDY/LDk5fIjhQicCvVPFqfe+69fWaPWydbWJ3wRt59/YzIwda1I81loas3oCoHxnqvdA=="
-    },
-    "@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="
-    },
-    "@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "requires": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.1.1"
-      }
-    },
-    "@babel/compat-data": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.0.tgz",
-      "integrity": "sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw=="
-    },
-    "@babel/core": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.0.tgz",
-      "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
-      "requires": {
-        "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.0",
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-module-transforms": "^7.27.3",
-        "@babel/helpers": "^7.27.6",
-        "@babel/parser": "^7.28.0",
-        "@babel/template": "^7.27.2",
-        "@babel/traverse": "^7.28.0",
-        "@babel/types": "^7.28.0",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
-        }
-      }
-    },
-    "@babel/eslint-parser": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.28.0.tgz",
-      "integrity": "sha512-N4ntErOlKvcbTt01rr5wj3y55xnIdx1ymrfIr8C2WnM1Y9glFgWaGDEULJIazOX3XM9NRzhfJ6zZnQ1sBNWU+w==",
-      "requires": {
-        "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
-        "eslint-visitor-keys": "^2.1.0",
-        "semver": "^6.3.1"
-      },
-      "dependencies": {
-        "eslint-visitor-keys": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
-          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw=="
-        },
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
-        }
-      }
-    },
-    "@babel/generator": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.0.tgz",
-      "integrity": "sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg==",
-      "requires": {
-        "@babel/parser": "^7.28.0",
-        "@babel/types": "^7.28.0",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "jsesc": "^3.0.2"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/types": "^7.27.3"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@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"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
-        }
-      }
-    },
-    "@babel/helper-create-class-features-plugin": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.27.1.tgz",
-      "integrity": "sha512-QwGAmuvM17btKU5VqXfb+Giw4JcN0hjuufz3DYnpeVDvZLAObloM77bhMXiqry3Iio+Ai4phVRDwl6WU10+r5A==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.27.1",
-        "@babel/helper-member-expression-to-functions": "^7.27.1",
-        "@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.27.1",
-        "semver": "^6.3.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
-        }
-      }
-    },
-    "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.27.1.tgz",
-      "integrity": "sha512-uVDC72XVf8UbrH5qQTc18Agb8emwjTiZrQE11Nv3CuBEZmVvTwwE9CBUEvHku06gQCAyYf8Nv6ja1IN+6LMbxQ==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.27.1",
-        "regexpu-core": "^6.2.0",
-        "semver": "^6.3.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
-        }
-      }
-    },
-    "@babel/helper-define-polyfill-provider": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.5.tgz",
-      "integrity": "sha512-uJnGFcPsWQK8fvjgGP5LZUZZsYGIoPeRjSF5PGwrelYgq7Q15/Ft9NGFp1zglwgIv//W0uG4BevRuSJRyylZPg==",
-      "requires": {
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "debug": "^4.4.1",
-        "lodash.debounce": "^4.0.8",
-        "resolve": "^1.22.10"
-      }
-    },
-    "@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=="
-    },
-    "@babel/helper-member-expression-to-functions": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz",
-      "integrity": "sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==",
-      "requires": {
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
-      }
-    },
-    "@babel/helper-module-transforms": {
-      "version": "7.27.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.27.3.tgz",
-      "integrity": "sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "@babel/traverse": "^7.27.3"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/types": "^7.27.1"
-      }
-    },
-    "@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=="
-    },
-    "@babel/helper-remap-async-to-generator": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.27.1.tgz",
-      "integrity": "sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.27.1",
-        "@babel/helper-wrap-function": "^7.27.1",
-        "@babel/traverse": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-member-expression-to-functions": "^7.27.1",
-        "@babel/helper-optimise-call-expression": "^7.27.1",
-        "@babel/traverse": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
-      }
-    },
-    "@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=="
-    },
-    "@babel/helper-validator-identifier": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
-      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow=="
-    },
-    "@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=="
-    },
-    "@babel/helper-wrap-function": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.27.1.tgz",
-      "integrity": "sha512-NFJK2sHUvrjo8wAU/nQTWU890/zB2jj0qBcCbZbbf+005cAsv6tMjXz31fBign6M5ov1o0Bllu+9nbqkfsjjJQ==",
-      "requires": {
-        "@babel/template": "^7.27.1",
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
-      }
-    },
-    "@babel/helpers": {
-      "version": "7.28.2",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.2.tgz",
-      "integrity": "sha512-/V9771t+EgXz62aCcyofnQhGM8DQACbRhvzKFsXKC9QM+5MadF8ZmIm0crDMaz3+o0h0zXfJnd4EhbYbxsrcFw==",
-      "requires": {
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.2"
-      }
-    },
-    "@babel/parser": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz",
-      "integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==",
-      "requires": {
-        "@babel/types": "^7.28.0"
-      }
-    },
-    "@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.27.1.tgz",
-      "integrity": "sha512-QPG3C9cCVRQLxAVwmefEmwdTanECuUBMQZ/ym5kiw3XKCGA7qkuQLcjWWHcrD/GKbn/WmJwaezfuuAOcyKlRPA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/traverse": "^7.27.1"
-      }
-    },
-    "@babel/plugin-bugfix-safari-class-field-initializer-scope": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.27.1.tgz",
-      "integrity": "sha512-qNeq3bCKnGgLkEXUuFry6dPlGfCdQNZbn7yUAPCInwAJHMU7THJfrBSozkcWq5sNM6RcF3S8XyQL2A52KNR9IA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.27.1.tgz",
-      "integrity": "sha512-g4L7OYun04N1WyqMNjldFwlfPCLVkgB54A/YCXICZYBsvJJE3kByKv9c9+R/nAfmIfjl2rKYLNyMHboYbZaWaA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.27.1.tgz",
-      "integrity": "sha512-oO02gcONcD5O1iTLi/6frMJBIwWEHceWGSGqrpCmEL8nogiS6J9PBlE48CaK20/Jx1LuRml9aDftLgdjXT8+Cw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
-        "@babel/plugin-transform-optional-chaining": "^7.27.1"
-      }
-    },
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.27.1.tgz",
-      "integrity": "sha512-6BpaYGDavZqkI6yT+KSPdpZFfpnd68UKXbcjI9pJ13pvHhPrCKWOOLp+ysvMeA+DxnhuPpgIaRpxRxo5A9t5jw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/traverse": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      }
-    },
-    "@babel/plugin-proposal-decorators": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.28.0.tgz",
-      "integrity": "sha512-zOiZqvANjWDUaUS9xMxbMcK/Zccztbe/6ikvUXaG9nsPH3w6qh5UaPGAnirI/WhIbZ8m3OHU0ReyPrknG+ZKeg==",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/plugin-syntax-decorators": "^7.27.1"
-      }
-    },
-    "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz",
-      "integrity": "sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
-      }
-    },
-    "@babel/plugin-proposal-numeric-separator": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz",
-      "integrity": "sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
-      }
-    },
-    "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
-      "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
-      }
-    },
-    "@babel/plugin-proposal-private-methods": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz",
-      "integrity": "sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      }
-    },
-    "@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-      "requires": {}
-    },
-    "@babel/plugin-syntax-async-generators": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
-      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-bigint": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
-      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.12.13"
-      }
-    },
-    "@babel/plugin-syntax-class-static-block": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
-      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      }
-    },
-    "@babel/plugin-syntax-decorators": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.27.1.tgz",
-      "integrity": "sha512-YMq8Z87Lhl8EGkmb0MwYkt36QnxC+fzCgrl66ereamPlYToRpIk5nUjKUY3QKLWq8mwUB1BgbeXcTJhZOCDg5A==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-syntax-import-attributes": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.27.1.tgz",
-      "integrity": "sha512-oFT0FrKHgF53f4vOsZGi2Hh3I35PfSmVs4IBFLFj4dnafP+hIWDLg3VyKmUHfLoLHlyxY4C7DGtmHuJgn+IGww==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-syntax-import-meta": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
-      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "@babel/plugin-syntax-json-strings": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
-      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-syntax-logical-assignment-operators": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
-      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "@babel/plugin-syntax-nullish-coalescing-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-numeric-separator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
-      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-optional-catch-binding": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
-      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-optional-chaining": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
-      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-private-property-in-object": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
-      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      }
-    },
-    "@babel/plugin-syntax-top-level-await": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
-      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      }
-    },
-    "@babel/plugin-syntax-typescript": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz",
-      "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-syntax-unicode-sets-regex": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
-      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-async-generator-functions": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.28.0.tgz",
-      "integrity": "sha512-BEOdvX4+M765icNPZeidyADIvQ1m1gmunXufXxvRESy/jNNyfovIqUyE7MVgGBjWktCoJlzvFA1To2O4ymIO3Q==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-remap-async-to-generator": "^7.27.1",
-        "@babel/traverse": "^7.28.0"
-      }
-    },
-    "@babel/plugin-transform-async-to-generator": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.27.1.tgz",
-      "integrity": "sha512-NREkZsZVJS4xmTr8qzE5y8AfIPqsdQfRuUiLRTEzb7Qii8iFWCyDKaUV2c0rCuh4ljDZ98ALHP/PetiBV2nddA==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-remap-async-to-generator": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-block-scoping": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.28.0.tgz",
-      "integrity": "sha512-gKKnwjpdx5sER/wl0WN0efUBFzF/56YZO0RJrSYP4CljXnP31ByY7fol89AzomdlLNzI36AvOTmYHsnZTCkq8Q==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-class-properties": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.27.1.tgz",
-      "integrity": "sha512-D0VcalChDMtuRvJIu3U/fwWjf8ZMykz5iZsg77Nuj821vCKI3zCyRLwRdWbsuJ/uRwZhZ002QtCqIkwC/ZkvbA==",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-class-static-block": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.27.1.tgz",
-      "integrity": "sha512-s734HmYU78MVzZ++joYM+NkJusItbdRcbm+AGRgJCt3iA+yux0QpD9cBVdz3tKyrjVYWRl7j0mHSmv4lhV0aoA==",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-classes": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.28.0.tgz",
-      "integrity": "sha512-IjM1IoJNw72AZFlj33Cu8X0q2XK/6AaVC3jQu+cgQ5lThWD5ajnuUAml80dqRmOhmPkTH8uAwnpMu9Rvj0LTRA==",
-      "requires": {
-        "@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.0"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/template": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-destructuring": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.28.0.tgz",
-      "integrity": "sha512-v1nrSMBiKcodhsyJ4Gf+Z0U/yawmJDBOTpEB3mcQY52r9RIyPneGyAS/yM6seP/8I+mWI3elOMtT5dB8GJVs+A==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/traverse": "^7.28.0"
-      }
-    },
-    "@babel/plugin-transform-dotall-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.27.1.tgz",
-      "integrity": "sha512-gEbkDVGRvjj7+T1ivxrfgygpT7GUd4vmODtYpbs0gZATdkX8/iSnOtZSxiZnsgm1YjTgjI6VKBGSJJevkrclzw==",
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.27.1.tgz",
-      "integrity": "sha512-MTyJk98sHvSs+cvZ4nOauwTTG1JeonDjSGvGGUNHreGQns+Mpt6WX/dVzWBHgg+dYZhkC4X+zTDfkTU+Vy9y7Q==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.27.1.tgz",
-      "integrity": "sha512-hkGcueTEzuhB30B3eJCbCYeCaaEQOmQR0AdvzpD4LoN0GXMWzzGSuRrxR2xTnCrvNbVwK9N6/jQ92GSLfiZWoQ==",
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-dynamic-import": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.27.1.tgz",
-      "integrity": "sha512-MHzkWQcEmjzzVW9j2q8LGjwGWpG2mjwaaB0BNQwst3FIjqsg8Ct/mIZlvSPJvfi9y2AC8mi/ktxbFVL9pZ1I4A==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-explicit-resource-management": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-explicit-resource-management/-/plugin-transform-explicit-resource-management-7.28.0.tgz",
-      "integrity": "sha512-K8nhUcn3f6iB+P3gwCv/no7OdzOZQcKchW6N389V6PD8NUWKZHzndOd9sPDVbMoBsbmjMqlB4L9fm+fEFNVlwQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/plugin-transform-destructuring": "^7.28.0"
-      }
-    },
-    "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.27.1.tgz",
-      "integrity": "sha512-uspvXnhHvGKf2r4VVtBpeFnuDWsJLQ6MF6lGJLC89jBR1uoVeqM416AZtTuhTezOfgHicpJQmoD5YUakO/YmXQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-export-namespace-from": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.27.1.tgz",
-      "integrity": "sha512-tQvHWSZ3/jH2xuq/vZDy0jNn+ZdXJeM8gHvX4lnJmsc3+50yPlWdZXIc5ay+umX+2/tJIqHqiEqcJvxlmIvRvQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/plugin-syntax-flow": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-compilation-targets": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/traverse": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-json-strings": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.27.1.tgz",
-      "integrity": "sha512-6WVLVJiTjqcQauBhn1LkICsR2H+zm62I3h9faTDKt1qP4jn2o72tSvqMwtGFKGTpojce0gJs+76eZ2uCHRZh0Q==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-logical-assignment-operators": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.27.1.tgz",
-      "integrity": "sha512-SJvDs5dXxiae4FbSL1aBJlG4wvl594N6YEVVn9e3JGulwioy6z3oPjx/sQBO3Y4NwUu5HNix6KJ3wBZoewcdbw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-modules-amd": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.27.1.tgz",
-      "integrity": "sha512-iCsytMg/N9/oFq6n+gFTvUYDZQOMK5kEdeYxmxt91fcJGycfxVP9CnrxoliM0oumFERba2i8ZtwRUCMhvP1LnA==",
-      "requires": {
-        "@babel/helper-module-transforms": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-module-transforms": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.27.1.tgz",
-      "integrity": "sha512-w5N1XzsRbc0PQStASMksmUeqECuzKuTJer7kFagK8AXgpCMkeDMO5S+aaFb7A51ZYDF7XI34qsTX+fkHiIm5yA==",
-      "requires": {
-        "@babel/helper-module-transforms": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "@babel/traverse": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-modules-umd": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.27.1.tgz",
-      "integrity": "sha512-iQBE/xC5BV1OxJbp6WG7jq9IWiD+xxlZhLrdwpPkTX3ydmXdvoCpyfJN7acaIBZaOqTfr76pgzqBJflNbeRK+w==",
-      "requires": {
-        "@babel/helper-module-transforms": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.27.1.tgz",
-      "integrity": "sha512-SstR5JYy8ddZvD6MhV0tM/j16Qds4mIpJTOd1Yu9J9pJjH93bxHECF7pgtc28XvkzTD6Pxcm/0Z73Hvk7kb3Ng==",
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-new-target": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.27.1.tgz",
-      "integrity": "sha512-f6PiYeqXQ05lYq3TIfIDu/MtliKUbNwkGApPUvyo6+tc7uaR4cPjPe7DFPr15Uyycg2lZU6btZ575CuQoYh7MQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-nullish-coalescing-operator": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.27.1.tgz",
-      "integrity": "sha512-aGZh6xMo6q9vq1JGcw58lZ1Z0+i0xB2x0XaauNIUXd6O1xXc3RwoWEBlsTQrY4KQ9Jf0s5rgD6SiNkaUdJegTA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-numeric-separator": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.27.1.tgz",
-      "integrity": "sha512-fdPKAcujuvEChxDBJ5c+0BTaS6revLV7CJL08e4m3de8qJfNIuCc2nc7XJYOjBoTMJeqSmwXJ0ypE14RCjLwaw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-object-rest-spread": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.28.0.tgz",
-      "integrity": "sha512-9VNGikXxzu5eCiQjdE4IZn8sb9q7Xsk5EXLDBKUYg1e/Tve8/05+KJEtcxGxAgCY5t/BpKQM+JEL/yT4tvgiUA==",
-      "requires": {
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/plugin-transform-destructuring": "^7.28.0",
-        "@babel/plugin-transform-parameters": "^7.27.7",
-        "@babel/traverse": "^7.28.0"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-replace-supers": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-optional-catch-binding": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.27.1.tgz",
-      "integrity": "sha512-txEAEKzYrHEX4xSZN4kJ+OfKXFVSWKB2ZxM9dpcE3wT7smwkNmXo5ORRlVzMVdJbD+Q8ILTgSD7959uj+3Dm3Q==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-optional-chaining": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.27.1.tgz",
-      "integrity": "sha512-BQmKPPIuc8EkZgNKsv0X4bPmOoayeu4F1YCwx2/CfmDSXDbp7GnzlUH+/ul5VGfRg1AoFPsrIThlEBj2xb4CAg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-private-methods": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.27.1.tgz",
-      "integrity": "sha512-10FVt+X55AjRAYI9BrdISN9/AQWHqldOeZDUoLyif1Kn05a56xVBXb8ZouL8pZ9jem8QpXaOt8TS7RHUIS+GPA==",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-private-property-in-object": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.27.1.tgz",
-      "integrity": "sha512-5J+IhqTi1XPa0DXF83jYOaARrX+41gOewWbkPyjMNRDqgOCqdffGh8L3f/Ek5utaEBZExjSAzcyjmV9SSAWObQ==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.27.1",
-        "@babel/helper-create-class-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-react-constant-elements": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.27.1.tgz",
-      "integrity": "sha512-edoidOjl/ZxvYo4lSBOQGDSyToYVkTAwyVoa2tkuYTSmjrB1+uAedoL5iROVLXkxH+vRgA7uP4tMg2pUJpZ3Ug==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@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"
-      }
-    },
-    "@babel/plugin-transform-react-jsx-development": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.27.1.tgz",
-      "integrity": "sha512-ykDdF5yI4f1WrAolLqeF3hmYU12j9ntLQl/AOG1HAS21jxyg1Q0/J/tpREuYLfatGdGmXp/3yS0ZA76kOlVq9Q==",
-      "requires": {
-        "@babel/plugin-transform-react-jsx": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-react-pure-annotations": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.27.1.tgz",
-      "integrity": "sha512-JfuinvDOsD9FVMTHpzA/pBLisxpv1aSf+OIV8lgH3MuWrks19R27e6a6DipIg4aX1Zm9Wpb04p8wljfKrVSnPA==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-regenerator": {
-      "version": "7.28.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.28.1.tgz",
-      "integrity": "sha512-P0QiV/taaa3kXpLY+sXla5zec4E+4t4Aqc9ggHlfZ7a2cp8/x/Gv08jfwEtn9gnnYIMvHx6aoOZ8XJL8eU71Dg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-regexp-modifiers": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.27.1.tgz",
-      "integrity": "sha512-TtEciroaiODtXvLZv4rmfMhkCv8jx3wgKpL68PuiPh2M4fvz5jhsA7697N1gMvkvr/JTF13DrFYyEbY9U7cVPA==",
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-reserved-words": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.27.1.tgz",
-      "integrity": "sha512-V2ABPHIJX4kC7HegLkYoDpfg9PVmuWy/i6vUM5eGK22bx4YVFD3M5F0QQnWQoDs6AGsUWTVOopBiMFQgHaSkVw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-runtime": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.28.0.tgz",
-      "integrity": "sha512-dGopk9nZrtCs2+nfIem25UuHyt5moSJamArzIoh9/vezUQPmYDOzjaHDCkAzuGJibCIkPup8rMT2+wYB6S73cA==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "babel-plugin-polyfill-corejs2": "^0.4.14",
-        "babel-plugin-polyfill-corejs3": "^0.13.0",
-        "babel-plugin-polyfill-regenerator": "^0.6.5",
-        "semver": "^6.3.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
-        }
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-sticky-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.27.1.tgz",
-      "integrity": "sha512-lhInBO5bi/Kowe2/aLdBAawijx+q1pQzicSgnkB6dUPc1+RC8QmJHKf2OjvU+NZWitguJHEaEmbV6VWEouT58g==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@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==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.27.1.tgz",
-      "integrity": "sha512-RiSILC+nRJM7FY5srIyc4/fGIwUhyDuuBSdWn4y6yT6gm652DpCHZjIipgn6B7MQ1ITOUnAKWixEUjQRIBIcLw==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-typescript": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.28.0.tgz",
-      "integrity": "sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.27.3",
-        "@babel/helper-create-class-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
-        "@babel/plugin-syntax-typescript": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-unicode-escapes": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.27.1.tgz",
-      "integrity": "sha512-Ysg4v6AmF26k9vpfFuTZg8HRfVWzsh1kVfowA23y9j/Gu6dOuahdUVhkLqpObp3JIv27MLSii6noRnuKN8H0Mg==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-unicode-property-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.27.1.tgz",
-      "integrity": "sha512-uW20S39PnaTImxp39O5qFlHLS9LJEmANjMG7SxIhap8rCHqu0Ik+tLEPX5DKmHn6CsWQ7j3lix2tFOa5YtL12Q==",
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-unicode-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.27.1.tgz",
-      "integrity": "sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw==",
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/plugin-transform-unicode-sets-regex": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.27.1.tgz",
-      "integrity": "sha512-EtkOujbc4cgvb0mlpQefi4NTPBzhSIevblFevACNLUspmrALgmEBdL/XfnyyITfd8fKBZrZys92zOWcik7j9Tw==",
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1"
-      }
-    },
-    "@babel/preset-env": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.28.0.tgz",
-      "integrity": "sha512-VmaxeGOwuDqzLl5JUkIRM1X2Qu2uKGxHEQWh+cvvbl7JuJRgKGJSfsEF/bUaxFhJl/XAyxBe7q7qSuTbKFuCyg==",
-      "requires": {
-        "@babel/compat-data": "^7.28.0",
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-validator-option": "^7.27.1",
-        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.27.1",
-        "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.27.1",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.27.1",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.27.1",
-        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.27.1",
-        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
-        "@babel/plugin-syntax-import-assertions": "^7.27.1",
-        "@babel/plugin-syntax-import-attributes": "^7.27.1",
-        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
-        "@babel/plugin-transform-arrow-functions": "^7.27.1",
-        "@babel/plugin-transform-async-generator-functions": "^7.28.0",
-        "@babel/plugin-transform-async-to-generator": "^7.27.1",
-        "@babel/plugin-transform-block-scoped-functions": "^7.27.1",
-        "@babel/plugin-transform-block-scoping": "^7.28.0",
-        "@babel/plugin-transform-class-properties": "^7.27.1",
-        "@babel/plugin-transform-class-static-block": "^7.27.1",
-        "@babel/plugin-transform-classes": "^7.28.0",
-        "@babel/plugin-transform-computed-properties": "^7.27.1",
-        "@babel/plugin-transform-destructuring": "^7.28.0",
-        "@babel/plugin-transform-dotall-regex": "^7.27.1",
-        "@babel/plugin-transform-duplicate-keys": "^7.27.1",
-        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.27.1",
-        "@babel/plugin-transform-dynamic-import": "^7.27.1",
-        "@babel/plugin-transform-explicit-resource-management": "^7.28.0",
-        "@babel/plugin-transform-exponentiation-operator": "^7.27.1",
-        "@babel/plugin-transform-export-namespace-from": "^7.27.1",
-        "@babel/plugin-transform-for-of": "^7.27.1",
-        "@babel/plugin-transform-function-name": "^7.27.1",
-        "@babel/plugin-transform-json-strings": "^7.27.1",
-        "@babel/plugin-transform-literals": "^7.27.1",
-        "@babel/plugin-transform-logical-assignment-operators": "^7.27.1",
-        "@babel/plugin-transform-member-expression-literals": "^7.27.1",
-        "@babel/plugin-transform-modules-amd": "^7.27.1",
-        "@babel/plugin-transform-modules-commonjs": "^7.27.1",
-        "@babel/plugin-transform-modules-systemjs": "^7.27.1",
-        "@babel/plugin-transform-modules-umd": "^7.27.1",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.27.1",
-        "@babel/plugin-transform-new-target": "^7.27.1",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
-        "@babel/plugin-transform-numeric-separator": "^7.27.1",
-        "@babel/plugin-transform-object-rest-spread": "^7.28.0",
-        "@babel/plugin-transform-object-super": "^7.27.1",
-        "@babel/plugin-transform-optional-catch-binding": "^7.27.1",
-        "@babel/plugin-transform-optional-chaining": "^7.27.1",
-        "@babel/plugin-transform-parameters": "^7.27.7",
-        "@babel/plugin-transform-private-methods": "^7.27.1",
-        "@babel/plugin-transform-private-property-in-object": "^7.27.1",
-        "@babel/plugin-transform-property-literals": "^7.27.1",
-        "@babel/plugin-transform-regenerator": "^7.28.0",
-        "@babel/plugin-transform-regexp-modifiers": "^7.27.1",
-        "@babel/plugin-transform-reserved-words": "^7.27.1",
-        "@babel/plugin-transform-shorthand-properties": "^7.27.1",
-        "@babel/plugin-transform-spread": "^7.27.1",
-        "@babel/plugin-transform-sticky-regex": "^7.27.1",
-        "@babel/plugin-transform-template-literals": "^7.27.1",
-        "@babel/plugin-transform-typeof-symbol": "^7.27.1",
-        "@babel/plugin-transform-unicode-escapes": "^7.27.1",
-        "@babel/plugin-transform-unicode-property-regex": "^7.27.1",
-        "@babel/plugin-transform-unicode-regex": "^7.27.1",
-        "@babel/plugin-transform-unicode-sets-regex": "^7.27.1",
-        "@babel/preset-modules": "0.1.6-no-external-plugins",
-        "babel-plugin-polyfill-corejs2": "^0.4.14",
-        "babel-plugin-polyfill-corejs3": "^0.13.0",
-        "babel-plugin-polyfill-regenerator": "^0.6.5",
-        "core-js-compat": "^3.43.0",
-        "semver": "^6.3.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
-        }
-      }
-    },
-    "@babel/preset-modules": {
-      "version": "0.1.6-no-external-plugins",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
-      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/types": "^7.4.4",
-        "esutils": "^2.0.2"
-      }
-    },
-    "@babel/preset-react": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.27.1.tgz",
-      "integrity": "sha512-oJHWh2gLhU9dW9HHr42q0cI0/iHHXTLGe39qvpAZZzagHy0MzYLCnCVV0symeRvzmjHyVU7mw2K06E6u/JwbhA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-validator-option": "^7.27.1",
-        "@babel/plugin-transform-react-display-name": "^7.27.1",
-        "@babel/plugin-transform-react-jsx": "^7.27.1",
-        "@babel/plugin-transform-react-jsx-development": "^7.27.1",
-        "@babel/plugin-transform-react-pure-annotations": "^7.27.1"
-      }
-    },
-    "@babel/preset-typescript": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.27.1.tgz",
-      "integrity": "sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.27.1",
-        "@babel/helper-validator-option": "^7.27.1",
-        "@babel/plugin-syntax-jsx": "^7.27.1",
-        "@babel/plugin-transform-modules-commonjs": "^7.27.1",
-        "@babel/plugin-transform-typescript": "^7.27.1"
-      }
-    },
-    "@babel/runtime": {
-      "version": "7.28.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.2.tgz",
-      "integrity": "sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA=="
-    },
-    "@babel/template": {
-      "version": "7.27.2",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
-      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
-      "requires": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/parser": "^7.27.2",
-        "@babel/types": "^7.27.1"
-      }
-    },
-    "@babel/traverse": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.0.tgz",
-      "integrity": "sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg==",
-      "requires": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.0",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.0",
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.0",
-        "debug": "^4.3.1"
-      }
-    },
-    "@babel/types": {
-      "version": "7.28.2",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.2.tgz",
-      "integrity": "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==",
-      "requires": {
-        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1"
-      }
-    },
-    "@bcoe/v8-coverage": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
-      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
-    },
-    "@csstools/normalize.css": {
-      "version": "12.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.1.1.tgz",
-      "integrity": "sha512-YAYeJ+Xqh7fUou1d1j9XHl44BmsuThiTr4iNrgCQ3J27IbhXsxXDGZ1cXv8Qvs99d4rBbLiSKy3+WZiet32PcQ=="
-    },
-    "@csstools/postcss-cascade-layers": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.1.1.tgz",
-      "integrity": "sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==",
-      "requires": {
-        "@csstools/selector-specificity": "^2.0.2",
-        "postcss-selector-parser": "^6.0.10"
-      }
-    },
-    "@csstools/postcss-color-function": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-1.1.1.tgz",
-      "integrity": "sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==",
-      "requires": {
-        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "@csstools/postcss-font-format-keywords": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.1.tgz",
-      "integrity": "sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "@csstools/postcss-hwb-function": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.2.tgz",
-      "integrity": "sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "@csstools/postcss-ic-unit": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.1.tgz",
-      "integrity": "sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==",
-      "requires": {
-        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "@csstools/postcss-is-pseudo-class": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.7.tgz",
-      "integrity": "sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==",
-      "requires": {
-        "@csstools/selector-specificity": "^2.0.0",
-        "postcss-selector-parser": "^6.0.10"
-      }
-    },
-    "@csstools/postcss-nested-calc": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz",
-      "integrity": "sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "@csstools/postcss-normalize-display-values": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.1.tgz",
-      "integrity": "sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "@csstools/postcss-oklab-function": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.1.tgz",
-      "integrity": "sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==",
-      "requires": {
-        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "@csstools/postcss-progressive-custom-properties": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-1.3.0.tgz",
-      "integrity": "sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "@csstools/postcss-stepped-value-functions": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-1.0.1.tgz",
-      "integrity": "sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "@csstools/postcss-text-decoration-shorthand": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz",
-      "integrity": "sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "@csstools/postcss-trigonometric-functions": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-1.0.2.tgz",
-      "integrity": "sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "@csstools/postcss-unset-value": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz",
-      "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==",
-      "requires": {}
-    },
-    "@csstools/selector-specificity": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz",
-      "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
-      "requires": {}
-    },
-    "@emotion/babel-plugin": {
-      "version": "11.13.5",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
-      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/runtime": "^7.18.3",
-        "@emotion/hash": "^0.9.2",
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/serialize": "^1.3.3",
-        "babel-plugin-macros": "^3.1.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^4.0.0",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7",
-        "stylis": "4.2.0"
-      },
-      "dependencies": {
-        "convert-source-map": {
-          "version": "1.9.0",
-          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-          "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
-        }
-      }
-    },
-    "@emotion/cache": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
-      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
-      "requires": {
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/sheet": "^1.4.0",
-        "@emotion/utils": "^1.4.2",
-        "@emotion/weak-memoize": "^0.4.0",
-        "stylis": "4.2.0"
-      }
-    },
-    "@emotion/hash": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
-      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g=="
-    },
-    "@emotion/is-prop-valid": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
-      "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==",
-      "requires": {
-        "@emotion/memoize": "^0.9.0"
-      }
-    },
-    "@emotion/memoize": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
-      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
-    },
-    "@emotion/react": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
-      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
-      "requires": {
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.13.5",
-        "@emotion/cache": "^11.14.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
-        "@emotion/utils": "^1.4.2",
-        "@emotion/weak-memoize": "^0.4.0",
-        "hoist-non-react-statics": "^3.3.1"
-      }
-    },
-    "@emotion/serialize": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
-      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
-      "requires": {
-        "@emotion/hash": "^0.9.2",
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/unitless": "^0.10.0",
-        "@emotion/utils": "^1.4.2",
-        "csstype": "^3.0.2"
-      }
-    },
-    "@emotion/sheet": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
-      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg=="
-    },
-    "@emotion/styled": {
-      "version": "11.14.1",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
-      "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
-      "requires": {
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.13.5",
-        "@emotion/is-prop-valid": "^1.3.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
-        "@emotion/utils": "^1.4.2"
-      }
-    },
-    "@emotion/unitless": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
-      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg=="
-    },
-    "@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
-      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
-      "requires": {}
-    },
-    "@emotion/utils": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
-      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA=="
-    },
-    "@emotion/weak-memoize": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
-      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg=="
-    },
-    "@eslint-community/eslint-utils": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
-      "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
-      "requires": {
-        "eslint-visitor-keys": "^3.4.3"
-      }
-    },
-    "@eslint-community/regexpp": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ=="
-    },
-    "@eslint/eslintrc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
-      "requires": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.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"
-      },
-      "dependencies": {
-        "argparse": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-        },
-        "js-yaml": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-          "requires": {
-            "argparse": "^2.0.1"
-          }
-        }
-      }
-    },
-    "@eslint/js": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
-      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q=="
-    },
-    "@fullcalendar/core": {
-      "version": "6.1.20",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.20.tgz",
-      "integrity": "sha512-1cukXLlePFiJ8YKXn/4tMKsy0etxYLCkXk8nUCFi11nRONF2Ba2CD5b21/ovtOO2tL6afTJfwmc1ed3HG7eB1g==",
-      "peer": true,
-      "requires": {
-        "preact": "~10.12.1"
-      }
-    },
-    "@fullcalendar/daygrid": {
-      "version": "6.1.20",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.20.tgz",
-      "integrity": "sha512-AO9vqhkLP77EesmJzuU+IGXgxNulsA8mgQHynclJ8U70vSwAVnbcLG9qftiTAFSlZjiY/NvhE7sflve6cJelyQ==",
-      "requires": {}
-    },
-    "@fullcalendar/interaction": {
-      "version": "6.1.20",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.20.tgz",
-      "integrity": "sha512-p6txmc5txL0bMiPaJxe2ip6o0T384TyoD2KGdsU6UjZ5yoBlaY+dg7kxfnYKpYMzEJLG58n+URrHr2PgNL2fyA==",
-      "requires": {}
-    },
-    "@fullcalendar/react": {
-      "version": "6.1.20",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-6.1.20.tgz",
-      "integrity": "sha512-1w0pZtceaUdfAnxMSCGHCQalhi+mR1jOe76sXzyAXpcPz/Lf0zHSdcGK/U2XpZlnQgQtBZW+d+QBnnzVQKCxAA==",
-      "requires": {}
-    },
-    "@fullcalendar/timegrid": {
-      "version": "6.1.20",
-      "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.20.tgz",
-      "integrity": "sha512-4H+/MWbz3ntA50lrPif+7TsvMeX3R1GSYjiLULz0+zEJ7/Yfd9pupZmAwUs/PBpA6aAcFmeRr0laWfcz1a9V1A==",
-      "requires": {
-        "@fullcalendar/daygrid": "~6.1.20"
-      }
-    },
-    "@humanwhocodes/config-array": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
-      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
-      "requires": {
-        "@humanwhocodes/object-schema": "^2.0.3",
-        "debug": "^4.3.1",
-        "minimatch": "^3.0.5"
-      }
-    },
-    "@humanwhocodes/module-importer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="
-    },
-    "@humanwhocodes/object-schema": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA=="
-    },
-    "@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "requires": {
-        "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"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-          "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="
-        },
-        "ansi-styles": {
-          "version": "6.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-          "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="
-        },
-        "string-width": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-          "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-          "requires": {
-            "eastasianwidth": "^0.2.0",
-            "emoji-regex": "^9.2.2",
-            "strip-ansi": "^7.0.1"
-          }
-        },
-        "strip-ansi": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-          "requires": {
-            "ansi-regex": "^6.0.1"
-          }
-        },
-        "wrap-ansi": {
-          "version": "8.1.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-          "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-          "requires": {
-            "ansi-styles": "^6.1.0",
-            "string-width": "^5.0.1",
-            "strip-ansi": "^7.0.1"
-          }
-        }
-      }
-    },
-    "@istanbuljs/load-nyc-config": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
-      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
-      "requires": {
-        "camelcase": "^5.3.1",
-        "find-up": "^4.1.0",
-        "get-package-type": "^0.1.0",
-        "js-yaml": "^3.13.1",
-        "resolve-from": "^5.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
-        }
-      }
-    },
-    "@istanbuljs/schema": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
-      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA=="
-    },
-    "@jest/console": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-27.5.1.tgz",
-      "integrity": "sha512-kZ/tNpS3NXn0mlXXXPNuDZnb4c0oZ20r4K5eemM2k30ZC3G0T02nXUvyhf5YdbXWHPEJLc9qGLxEZ216MdL+Zg==",
-      "requires": {
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "jest-message-util": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "slash": "^3.0.0"
-      }
-    },
-    "@jest/core": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/core/-/core-27.5.1.tgz",
-      "integrity": "sha512-AK6/UTrvQD0Cd24NSqmIA6rKsu0tKIxfiCducZvqxYdmMisOYAsdItspT+fQDQYARPf8XgjAFZi0ogW2agH5nQ==",
-      "requires": {
-        "@jest/console": "^27.5.1",
-        "@jest/reporters": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/transform": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "emittery": "^0.8.1",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.9",
-        "jest-changed-files": "^27.5.1",
-        "jest-config": "^27.5.1",
-        "jest-haste-map": "^27.5.1",
-        "jest-message-util": "^27.5.1",
-        "jest-regex-util": "^27.5.1",
-        "jest-resolve": "^27.5.1",
-        "jest-resolve-dependencies": "^27.5.1",
-        "jest-runner": "^27.5.1",
-        "jest-runtime": "^27.5.1",
-        "jest-snapshot": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jest-validate": "^27.5.1",
-        "jest-watcher": "^27.5.1",
-        "micromatch": "^4.0.4",
-        "rimraf": "^3.0.0",
-        "slash": "^3.0.0",
-        "strip-ansi": "^6.0.0"
-      }
-    },
-    "@jest/environment": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-27.5.1.tgz",
-      "integrity": "sha512-/WQjhPJe3/ghaol/4Bq480JKXV/Rfw8nQdN7f41fM8VDHLcxKXou6QyXAh3EFr9/bVG3x74z1NWDkP87EiY8gA==",
-      "requires": {
-        "@jest/fake-timers": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "jest-mock": "^27.5.1"
-      }
-    },
-    "@jest/fake-timers": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.5.1.tgz",
-      "integrity": "sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==",
-      "requires": {
-        "@jest/types": "^27.5.1",
-        "@sinonjs/fake-timers": "^8.0.1",
-        "@types/node": "*",
-        "jest-message-util": "^27.5.1",
-        "jest-mock": "^27.5.1",
-        "jest-util": "^27.5.1"
-      }
-    },
-    "@jest/globals": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-27.5.1.tgz",
-      "integrity": "sha512-ZEJNB41OBQQgGzgyInAv0UUfDDj3upmHydjieSxFvTRuZElrx7tXg/uVQ5hYVEwiXs3+aMsAeEc9X7xiSKCm4Q==",
-      "requires": {
-        "@jest/environment": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "expect": "^27.5.1"
-      }
-    },
-    "@jest/reporters": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-27.5.1.tgz",
-      "integrity": "sha512-cPXh9hWIlVJMQkVk84aIvXuBB4uQQmFqZiacloFuGiP3ah1sbCxCosidXFDfqG8+6fO1oR2dTJTlsOy4VFmUfw==",
-      "requires": {
-        "@bcoe/v8-coverage": "^0.2.3",
-        "@jest/console": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/transform": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "collect-v8-coverage": "^1.0.0",
-        "exit": "^0.1.2",
-        "glob": "^7.1.2",
-        "graceful-fs": "^4.2.9",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-instrument": "^5.1.0",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-lib-source-maps": "^4.0.0",
-        "istanbul-reports": "^3.1.3",
-        "jest-haste-map": "^27.5.1",
-        "jest-resolve": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jest-worker": "^27.5.1",
-        "slash": "^3.0.0",
-        "source-map": "^0.6.0",
-        "string-length": "^4.0.1",
-        "terminal-link": "^2.0.0",
-        "v8-to-istanbul": "^8.1.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "@jest/schemas": {
-      "version": "28.1.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-28.1.3.tgz",
-      "integrity": "sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==",
-      "requires": {
-        "@sinclair/typebox": "^0.24.1"
-      }
-    },
-    "@jest/source-map": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-27.5.1.tgz",
-      "integrity": "sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==",
-      "requires": {
-        "callsites": "^3.0.0",
-        "graceful-fs": "^4.2.9",
-        "source-map": "^0.6.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "@jest/test-result": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-27.5.1.tgz",
-      "integrity": "sha512-EW35l2RYFUcUQxFJz5Cv5MTOxlJIQs4I7gxzi2zVU7PJhOwfYq1MdC5nhSmYjX1gmMmLPvB3sIaC+BkcHRBfag==",
-      "requires": {
-        "@jest/console": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "collect-v8-coverage": "^1.0.0"
-      }
-    },
-    "@jest/test-sequencer": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz",
-      "integrity": "sha512-LCheJF7WB2+9JuCS7VB/EmGIdQuhtqjRNI9A43idHv3E4KltCTsPsLxvdaubFHSYwY/fNjMWjl6vNRhDiN7vpQ==",
-      "requires": {
-        "@jest/test-result": "^27.5.1",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^27.5.1",
-        "jest-runtime": "^27.5.1"
-      }
-    },
-    "@jest/transform": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-27.5.1.tgz",
-      "integrity": "sha512-ipON6WtYgl/1329g5AIJVbUuEh0wZVbdpGwC99Jw4LwuoBNS95MVphU6zOeD9pDkon+LLbFL7lOQRapbB8SCHw==",
-      "requires": {
-        "@babel/core": "^7.1.0",
-        "@jest/types": "^27.5.1",
-        "babel-plugin-istanbul": "^6.1.1",
-        "chalk": "^4.0.0",
-        "convert-source-map": "^1.4.0",
-        "fast-json-stable-stringify": "^2.0.0",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^27.5.1",
-        "jest-regex-util": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "micromatch": "^4.0.4",
-        "pirates": "^4.0.4",
-        "slash": "^3.0.0",
-        "source-map": "^0.6.1",
-        "write-file-atomic": "^3.0.0"
-      },
-      "dependencies": {
-        "convert-source-map": {
-          "version": "1.9.0",
-          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-          "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "@jest/types": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
-      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
-      "requires": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^16.0.0",
-        "chalk": "^4.0.0"
-      }
-    },
-    "@jridgewell/gen-mapping": {
-      "version": "0.3.12",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
-      "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
-      "requires": {
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "@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=="
-    },
-    "@jridgewell/source-map": {
-      "version": "0.3.10",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.10.tgz",
-      "integrity": "sha512-0pPkgz9dY+bijgistcTTJ5mR+ocqRXLuhXHYdzoMmmoJ2C9S46RCm2GMUbatPEUK9Yjy26IrAy8D/M00lLkv+Q==",
-      "requires": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25"
-      }
-    },
-    "@jridgewell/sourcemap-codec": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.4.tgz",
-      "integrity": "sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw=="
-    },
-    "@jridgewell/trace-mapping": {
-      "version": "0.3.29",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
-      "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
-      "requires": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
-    "@leichtgewicht/ip-codec": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
-      "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
-    },
-    "@mui/core-downloads-tracker": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.1.tgz",
-      "integrity": "sha512-+mIK1Z0BhOaQ0vCgOkT1mSrIpEHLo338h4/duuL4TBLXPvUMit732mnwJY3W40Avy30HdeSfwUAAGRkKmwRaEQ=="
-    },
-    "@mui/icons-material": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.1.tgz",
-      "integrity": "sha512-upzCtG6awpL6noEZlJ5Z01khZ9VnLNLaj7tb6iPbN6G97eYfUTs8e9OyPKy3rEms3VQWmVBfri7jzeaRxdFIzA==",
-      "requires": {
-        "@babel/runtime": "^7.28.2"
-      }
-    },
-    "@mui/material": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.1.tgz",
-      "integrity": "sha512-Xf6Shbo03YmcBedZMwSpEFOwpYDtU7tC+rhAHTrA9FHk0FpsDqiQ9jUa1j/9s3HLs7KWb5mDcGnlwdh9Q9KAag==",
-      "requires": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/core-downloads-tracker": "^7.3.1",
-        "@mui/system": "^7.3.1",
-        "@mui/types": "^7.4.5",
-        "@mui/utils": "^7.3.1",
-        "@popperjs/core": "^2.11.8",
-        "@types/react-transition-group": "^4.4.12",
-        "clsx": "^2.1.1",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.1.1",
-        "react-transition-group": "^4.4.5"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "19.1.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
-          "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA=="
-        }
-      }
-    },
-    "@mui/private-theming": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.1.tgz",
-      "integrity": "sha512-WU3YLkKXii/x8ZEKnrLKsPwplCVE11yZxUvlaaZSIzCcI3x2OdFC8eMlNy74hVeUsYQvzzX1Es/k4ARPlFvpPQ==",
-      "requires": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/utils": "^7.3.1",
-        "prop-types": "^15.8.1"
-      }
-    },
-    "@mui/styled-engine": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.1.tgz",
-      "integrity": "sha512-Nqo6OHjvJpXJ1+9TekTE//+8RybgPQUKwns2Lh0sq+8rJOUSUKS3KALv4InSOdHhIM9Mdi8/L7LTF1/Ky6D6TQ==",
-      "requires": {
-        "@babel/runtime": "^7.28.2",
-        "@emotion/cache": "^11.14.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/sheet": "^1.4.0",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1"
-      }
-    },
-    "@mui/system": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.1.tgz",
-      "integrity": "sha512-mIidecvcNVpNJMdPDmCeoSL5zshKBbYPcphjuh6ZMjhybhqhZ4mX6k9zmIWh6XOXcqRQMg5KrcjnO0QstrNj3w==",
-      "requires": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/private-theming": "^7.3.1",
-        "@mui/styled-engine": "^7.3.1",
-        "@mui/types": "^7.4.5",
-        "@mui/utils": "^7.3.1",
-        "clsx": "^2.1.1",
-        "csstype": "^3.1.3",
-        "prop-types": "^15.8.1"
-      }
-    },
-    "@mui/types": {
-      "version": "7.4.5",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.5.tgz",
-      "integrity": "sha512-ZPwlAOE3e8C0piCKbaabwrqZbW4QvWz0uapVPWya7fYj6PeDkl5sSJmomT7wjOcZGPB48G/a6Ubidqreptxz4g==",
-      "requires": {
-        "@babel/runtime": "^7.28.2"
-      }
-    },
-    "@mui/utils": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.1.tgz",
-      "integrity": "sha512-/31y4wZqVWa0jzMnzo6JPjxwP6xXy4P3+iLbosFg/mJQowL1KIou0LC+lquWW60FKVbKz5ZUWBg2H3jausa0pw==",
-      "requires": {
-        "@babel/runtime": "^7.28.2",
-        "@mui/types": "^7.4.5",
-        "@types/prop-types": "^15.7.15",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^19.1.1"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "19.1.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
-          "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA=="
-        }
-      }
-    },
-    "@nicolo-ribaudo/eslint-scope-5-internals": {
-      "version": "5.1.1-v1",
-      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
-      "integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
-      "requires": {
-        "eslint-scope": "5.1.1"
-      },
-      "dependencies": {
-        "eslint-scope": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-          "requires": {
-            "esrecurse": "^4.3.0",
-            "estraverse": "^4.1.1"
-          }
-        },
-        "estraverse": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
-        }
-      }
-    },
-    "@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==",
-      "requires": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      }
-    },
-    "@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=="
-    },
-    "@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==",
-      "requires": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      }
-    },
-    "@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "optional": true
-    },
-    "@pmmmwh/react-refresh-webpack-plugin": {
-      "version": "0.5.17",
-      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.17.tgz",
-      "integrity": "sha512-tXDyE1/jzFsHXjhRZQ3hMl0IVhYe5qula43LDWIhVfjp9G/nT5OQY5AORVOrkEGAUltBJOfOWeETbmhm6kHhuQ==",
-      "requires": {
-        "ansi-html": "^0.0.9",
-        "core-js-pure": "^3.23.3",
-        "error-stack-parser": "^2.0.6",
-        "html-entities": "^2.1.0",
-        "loader-utils": "^2.0.4",
-        "schema-utils": "^4.2.0",
-        "source-map": "^0.7.3"
-      }
-    },
-    "@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
-    },
-    "@reduxjs/toolkit": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
-      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
-      "requires": {
-        "@standard-schema/spec": "^1.0.0",
-        "@standard-schema/utils": "^0.3.0",
-        "immer": "^11.0.0",
-        "redux": "^5.0.1",
-        "redux-thunk": "^3.1.0",
-        "reselect": "^5.1.0"
-      },
-      "dependencies": {
-        "immer": {
-          "version": "11.1.8",
-          "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.8.tgz",
-          "integrity": "sha512-/tbkHMW7y10Lx6i1crLjD4/OhNkRG+Fo7byZHtah0547nIeXYcpIXaUh0IAQY6gO5459qpGGYapcEOHtFXkIuA=="
-        }
-      }
-    },
-    "@rollup/plugin-babel": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
-      "integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.10.4",
-        "@rollup/pluginutils": "^3.1.0"
-      }
-    },
-    "@rollup/plugin-node-resolve": {
-      "version": "11.2.1",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
-      "integrity": "sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==",
-      "requires": {
-        "@rollup/pluginutils": "^3.1.0",
-        "@types/resolve": "1.17.1",
-        "builtin-modules": "^3.1.0",
-        "deepmerge": "^4.2.2",
-        "is-module": "^1.0.0",
-        "resolve": "^1.19.0"
-      }
-    },
-    "@rollup/plugin-replace": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.4.2.tgz",
-      "integrity": "sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==",
-      "requires": {
-        "@rollup/pluginutils": "^3.1.0",
-        "magic-string": "^0.25.7"
-      }
-    },
-    "@rollup/pluginutils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
-      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
-      "requires": {
-        "@types/estree": "0.0.39",
-        "estree-walker": "^1.0.1",
-        "picomatch": "^2.2.2"
-      },
-      "dependencies": {
-        "@types/estree": {
-          "version": "0.0.39",
-          "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
-          "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
-        }
-      }
-    },
-    "@rtsao/scc": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
-      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g=="
-    },
-    "@rushstack/eslint-patch": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.12.0.tgz",
-      "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw=="
-    },
-    "@sinclair/typebox": {
-      "version": "0.24.51",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz",
-      "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA=="
-    },
-    "@sinonjs/commons": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz",
-      "integrity": "sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==",
-      "requires": {
-        "type-detect": "4.0.8"
-      }
-    },
-    "@sinonjs/fake-timers": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz",
-      "integrity": "sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==",
-      "requires": {
-        "@sinonjs/commons": "^1.7.0"
-      }
-    },
-    "@standard-schema/spec": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
-      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="
-    },
-    "@standard-schema/utils": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
-      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="
-    },
-    "@surma/rollup-plugin-off-main-thread": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
-      "integrity": "sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==",
-      "requires": {
-        "ejs": "^3.1.6",
-        "json5": "^2.2.0",
-        "magic-string": "^0.25.0",
-        "string.prototype.matchall": "^4.0.6"
-      }
-    },
-    "@svgr/babel-plugin-add-jsx-attribute": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
-      "integrity": "sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg=="
-    },
-    "@svgr/babel-plugin-remove-jsx-attribute": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz",
-      "integrity": "sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg=="
-    },
-    "@svgr/babel-plugin-remove-jsx-empty-expression": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz",
-      "integrity": "sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA=="
-    },
-    "@svgr/babel-plugin-replace-jsx-attribute-value": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz",
-      "integrity": "sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ=="
-    },
-    "@svgr/babel-plugin-svg-dynamic-title": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz",
-      "integrity": "sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg=="
-    },
-    "@svgr/babel-plugin-svg-em-dimensions": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz",
-      "integrity": "sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw=="
-    },
-    "@svgr/babel-plugin-transform-react-native-svg": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz",
-      "integrity": "sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q=="
-    },
-    "@svgr/babel-plugin-transform-svg-component": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz",
-      "integrity": "sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ=="
-    },
-    "@svgr/babel-preset": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-5.5.0.tgz",
-      "integrity": "sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==",
-      "requires": {
-        "@svgr/babel-plugin-add-jsx-attribute": "^5.4.0",
-        "@svgr/babel-plugin-remove-jsx-attribute": "^5.4.0",
-        "@svgr/babel-plugin-remove-jsx-empty-expression": "^5.0.1",
-        "@svgr/babel-plugin-replace-jsx-attribute-value": "^5.0.1",
-        "@svgr/babel-plugin-svg-dynamic-title": "^5.4.0",
-        "@svgr/babel-plugin-svg-em-dimensions": "^5.4.0",
-        "@svgr/babel-plugin-transform-react-native-svg": "^5.4.0",
-        "@svgr/babel-plugin-transform-svg-component": "^5.5.0"
-      }
-    },
-    "@svgr/core": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-5.5.0.tgz",
-      "integrity": "sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==",
-      "requires": {
-        "@svgr/plugin-jsx": "^5.5.0",
-        "camelcase": "^6.2.0",
-        "cosmiconfig": "^7.0.0"
-      }
-    },
-    "@svgr/hast-util-to-babel-ast": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz",
-      "integrity": "sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==",
-      "requires": {
-        "@babel/types": "^7.12.6"
-      }
-    },
-    "@svgr/plugin-jsx": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz",
-      "integrity": "sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==",
-      "requires": {
-        "@babel/core": "^7.12.3",
-        "@svgr/babel-preset": "^5.5.0",
-        "@svgr/hast-util-to-babel-ast": "^5.5.0",
-        "svg-parser": "^2.0.2"
-      }
-    },
-    "@svgr/plugin-svgo": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz",
-      "integrity": "sha512-r5swKk46GuQl4RrVejVwpeeJaydoxkdwkM1mBKOgJLBUJPGaLci6ylg/IjhrRsREKDkr4kbMWdgOtbXEh0fyLQ==",
-      "requires": {
-        "cosmiconfig": "^7.0.0",
-        "deepmerge": "^4.2.2",
-        "svgo": "^1.2.2"
-      }
-    },
-    "@svgr/webpack": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-5.5.0.tgz",
-      "integrity": "sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==",
-      "requires": {
-        "@babel/core": "^7.12.3",
-        "@babel/plugin-transform-react-constant-elements": "^7.12.1",
-        "@babel/preset-env": "^7.12.1",
-        "@babel/preset-react": "^7.12.5",
-        "@svgr/core": "^5.5.0",
-        "@svgr/plugin-jsx": "^5.5.0",
-        "@svgr/plugin-svgo": "^5.5.0",
-        "loader-utils": "^2.0.0"
-      }
-    },
-    "@tanstack/query-core": {
-      "version": "5.100.10",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.100.10.tgz",
-      "integrity": "sha512-8UR0yJR+GiQ40m3lPhUr0xbfAupe6GSQiksSBSa9SM2NjezFyxXCIA69/lz8cSoNKZLrw1/PktIyQBJcVeMi3w=="
-    },
-    "@tanstack/query-devtools": {
-      "version": "5.100.10",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.100.10.tgz",
-      "integrity": "sha512-3DmJf25hDPus5IpVvp6ujXv6bKV2zPzI9vpbAmpJigsL/H6DPvPjmf7/Q9yVKEke//8fgeQ45abjgnLuyYxAiw=="
-    },
-    "@tanstack/react-query": {
-      "version": "5.100.10",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.100.10.tgz",
-      "integrity": "sha512-FLaZf2RCrA/Zgp4aiu5tG3TyasTRO7aZ99skxQpr3Hg/zXOhu6yq5FZCYQ/tRaJtM9ylnoK8tFK7PolXQadv6Q==",
-      "requires": {
-        "@tanstack/query-core": "5.100.10"
-      }
-    },
-    "@tanstack/react-query-devtools": {
-      "version": "5.100.10",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.100.10.tgz",
-      "integrity": "sha512-zes0+o9ef5rAZXJ9f/SeaLs2nufJaeVkZkl/Or9NGrWVF41kL9Od9ED9nCwtQlgiF2VGtrzhEw5AU/igAO+aAg==",
-      "requires": {
-        "@tanstack/query-devtools": "5.100.10"
-      }
-    },
-    "@testing-library/dom": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
-      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
-      "requires": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "picocolors": "1.1.1",
-        "pretty-format": "^27.0.2"
-      },
-      "dependencies": {
-        "aria-query": {
-          "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-          "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-          "requires": {
-            "dequal": "^2.0.3"
-          }
-        }
-      }
-    },
-    "@testing-library/jest-dom": {
-      "version": "6.6.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.6.4.tgz",
-      "integrity": "sha512-xDXgLjVunjHqczScfkCJ9iyjdNOVHvvCdqHSSxwM9L0l/wHkTRum67SDc020uAlCoqktJplgO2AAQeLP1wgqDQ==",
-      "requires": {
-        "@adobe/css-tools": "^4.4.0",
-        "aria-query": "^5.0.0",
-        "css.escape": "^1.5.1",
-        "dom-accessibility-api": "^0.6.3",
-        "lodash": "^4.17.21",
-        "picocolors": "^1.1.1",
-        "redent": "^3.0.0"
-      },
-      "dependencies": {
-        "dom-accessibility-api": {
-          "version": "0.6.3",
-          "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
-          "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w=="
-        }
-      }
-    },
-    "@testing-library/react": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.0.tgz",
-      "integrity": "sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==",
-      "requires": {
-        "@babel/runtime": "^7.12.5"
-      }
-    },
-    "@testing-library/user-event": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
-      "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==",
-      "requires": {
-        "@babel/runtime": "^7.12.5"
-      }
-    },
-    "@tootallnate/once": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
-      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw=="
-    },
-    "@trysound/sax": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
-      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA=="
-    },
-    "@types/aria-query": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
-      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="
-    },
-    "@types/babel__core": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
-      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-      "requires": {
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
-      }
-    },
-    "@types/babel__generator": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
-      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
-      "requires": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@types/babel__template": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
-      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "requires": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@types/babel__traverse": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
-      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
-      "requires": {
-        "@babel/types": "^7.28.2"
-      }
-    },
-    "@types/body-parser": {
-      "version": "1.19.6",
-      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
-      "integrity": "sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==",
-      "requires": {
-        "@types/connect": "*",
-        "@types/node": "*"
-      }
-    },
-    "@types/bonjour": {
-      "version": "3.5.13",
-      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.13.tgz",
-      "integrity": "sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/connect": {
-      "version": "3.4.38",
-      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
-      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/connect-history-api-fallback": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz",
-      "integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==",
-      "requires": {
-        "@types/express-serve-static-core": "*",
-        "@types/node": "*"
-      }
-    },
-    "@types/eslint": {
-      "version": "8.56.12",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
-      "integrity": "sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==",
-      "requires": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "requires": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
-    "@types/estree": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
-      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="
-    },
-    "@types/express": {
-      "version": "4.17.23",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.23.tgz",
-      "integrity": "sha512-Crp6WY9aTYP3qPi2wGDo9iUe/rceX01UMhnF1jmwDcKCFM6cx7YhGP/Mpr3y9AASpfHixIG0E6azCcL5OcDHsQ==",
-      "requires": {
-        "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^4.17.33",
-        "@types/qs": "*",
-        "@types/serve-static": "*"
-      },
-      "dependencies": {
-        "@types/express-serve-static-core": {
-          "version": "4.19.6",
-          "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz",
-          "integrity": "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==",
-          "requires": {
-            "@types/node": "*",
-            "@types/qs": "*",
-            "@types/range-parser": "*",
-            "@types/send": "*"
-          }
-        }
-      }
-    },
-    "@types/express-serve-static-core": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.7.tgz",
-      "integrity": "sha512-R+33OsgWw7rOhD1emjU7dzCDHucJrgJXMA5PYCzJxVil0dsyx5iBEPHqpPfiKNJQb7lZ1vxwoLR4Z87bBUpeGQ==",
-      "requires": {
-        "@types/node": "*",
-        "@types/qs": "*",
-        "@types/range-parser": "*",
-        "@types/send": "*"
-      }
-    },
-    "@types/graceful-fs": {
-      "version": "4.1.9",
-      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
-      "integrity": "sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/html-minifier-terser": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
-      "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
-    },
-    "@types/http-errors": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.5.tgz",
-      "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg=="
-    },
-    "@types/http-proxy": {
-      "version": "1.17.16",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.16.tgz",
-      "integrity": "sha512-sdWoUajOB1cd0A8cRRQ1cfyWNbmFKLAqBB89Y8x5iYyG/mkJHc0YUH8pdWBy2omi9qtCpiIgGjuwO0dQST2l5w==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/istanbul-lib-coverage": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
-      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w=="
-    },
-    "@types/istanbul-lib-report": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
-      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
-      "requires": {
-        "@types/istanbul-lib-coverage": "*"
-      }
-    },
-    "@types/istanbul-reports": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
-      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
-      "requires": {
-        "@types/istanbul-lib-report": "*"
-      }
-    },
-    "@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=="
-    },
-    "@types/json5": {
-      "version": "0.0.29",
-      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
-      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
-    },
-    "@types/mime": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
-      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w=="
-    },
-    "@types/node": {
-      "version": "24.2.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.2.1.tgz",
-      "integrity": "sha512-DRh5K+ka5eJic8CjH7td8QpYEV6Zo10gfRkjHCO3weqZHWDtAaSTFtl4+VMqOJ4N5jcuhZ9/l+yy8rVgw7BQeQ==",
-      "requires": {
-        "undici-types": "~7.10.0"
-      }
-    },
-    "@types/node-forge": {
-      "version": "1.3.13",
-      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.13.tgz",
-      "integrity": "sha512-zePQJSW5QkwSHKRApqWCVKeKoSOt4xvEnLENZPjyvm9Ezdf/EyDeJM7jqLzOwjVICQQzvLZ63T55MKdJB5H6ww==",
-      "requires": {
-        "@types/node": "*"
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
+      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
       }
     },
-    "@types/parse-json": {
+    "node_modules/zod-validation-error": {
       "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
-      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
-    },
-    "@types/prettier": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
-      "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA=="
-    },
-    "@types/prop-types": {
-      "version": "15.7.15",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
-      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw=="
-    },
-    "@types/q": {
-      "version": "1.5.8",
-      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.8.tgz",
-      "integrity": "sha512-hroOstUScF6zhIi+5+x0dzqrHA1EJi+Irri6b1fxolMTqqHIV/Cg77EtnQcZqZCu8hR3mX2BzIxN4/GzI68Kfw=="
-    },
-    "@types/qs": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
-      "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ=="
-    },
-    "@types/range-parser": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
-      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
-    },
-    "@types/react": {
-      "version": "19.1.10",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.10.tgz",
-      "integrity": "sha512-EhBeSYX0Y6ye8pNebpKrwFJq7BoQ8J5SO6NlvNwwHjSj6adXJViPQrKlsyPw7hLBLvckEMO1yxeGdR82YBBlDg==",
-      "peer": true,
-      "requires": {
-        "csstype": "^3.0.2"
-      }
-    },
-    "@types/react-transition-group": {
-      "version": "4.4.12",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
-      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
-      "requires": {}
-    },
-    "@types/resolve": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
-      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/retry": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
-    },
-    "@types/semver": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA=="
-    },
-    "@types/send": {
-      "version": "0.17.5",
-      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.5.tgz",
-      "integrity": "sha512-z6F2D3cOStZvuk2SaP6YrwkNO65iTZcwA2ZkSABegdkAh/lf+Aa/YQndZVfmEXT5vgAp6zv06VQ3ejSVjAny4w==",
-      "requires": {
-        "@types/mime": "^1",
-        "@types/node": "*"
-      }
-    },
-    "@types/serve-index": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.4.tgz",
-      "integrity": "sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==",
-      "requires": {
-        "@types/express": "*"
-      }
-    },
-    "@types/serve-static": {
-      "version": "1.15.8",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.8.tgz",
-      "integrity": "sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==",
-      "requires": {
-        "@types/http-errors": "*",
-        "@types/node": "*",
-        "@types/send": "*"
-      }
-    },
-    "@types/sockjs": {
-      "version": "0.3.36",
-      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.36.tgz",
-      "integrity": "sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/stack-utils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
-      "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
-    },
-    "@types/trusted-types": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
-      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
-    },
-    "@types/use-sync-external-store": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
-      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="
-    },
-    "@types/ws": {
-      "version": "8.18.1",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
-      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/yargs": {
-      "version": "16.0.9",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.9.tgz",
-      "integrity": "sha512-tHhzvkFXZQeTECenFoRljLBYPZJ7jAVxqqtEI0qTLOmuultnFp4I9yKE17vTuhf7BkhCu7I4XuemPgikDVuYqA==",
-      "requires": {
-        "@types/yargs-parser": "*"
-      }
-    },
-    "@types/yargs-parser": {
-      "version": "21.0.3",
-      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
-      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ=="
-    },
-    "@typescript-eslint/eslint-plugin": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
-      "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
-      "requires": {
-        "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/type-utils": "5.62.0",
-        "@typescript-eslint/utils": "5.62.0",
-        "debug": "^4.3.4",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.2.0",
-        "natural-compare-lite": "^1.4.0",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
-      }
-    },
-    "@typescript-eslint/experimental-utils": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.62.0.tgz",
-      "integrity": "sha512-RTXpeB3eMkpoclG3ZHft6vG/Z30azNHuqY6wKPBHlVMZFuEvrtlEDe8gMqDb+SO+9hjC/pLekeSCryf9vMZlCw==",
-      "requires": {
-        "@typescript-eslint/utils": "5.62.0"
-      }
-    },
-    "@typescript-eslint/parser": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
-      "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
-      "requires": {
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "debug": "^4.3.4"
-      }
-    },
-    "@typescript-eslint/scope-manager": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
-      "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
-      "requires": {
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/visitor-keys": "5.62.0"
-      }
-    },
-    "@typescript-eslint/type-utils": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz",
-      "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==",
-      "requires": {
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "@typescript-eslint/utils": "5.62.0",
-        "debug": "^4.3.4",
-        "tsutils": "^3.21.0"
-      }
-    },
-    "@typescript-eslint/types": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
-      "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ=="
-    },
-    "@typescript-eslint/typescript-estree": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
-      "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
-      "requires": {
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/visitor-keys": "5.62.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
-      }
-    },
-    "@typescript-eslint/utils": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz",
-      "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==",
-      "requires": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@types/json-schema": "^7.0.9",
-        "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "eslint-scope": "^5.1.1",
-        "semver": "^7.3.7"
-      },
-      "dependencies": {
-        "eslint-scope": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-          "requires": {
-            "esrecurse": "^4.3.0",
-            "estraverse": "^4.1.1"
-          }
-        },
-        "estraverse": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
-        }
-      }
-    },
-    "@typescript-eslint/visitor-keys": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
-      "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
-      "requires": {
-        "@typescript-eslint/types": "5.62.0",
-        "eslint-visitor-keys": "^3.3.0"
-      }
-    },
-    "@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=="
-    },
-    "@webassemblyjs/ast": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
-      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
-      "requires": {
-        "@webassemblyjs/helper-numbers": "1.13.2",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
-      }
-    },
-    "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
-      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA=="
-    },
-    "@webassemblyjs/helper-api-error": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
-      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ=="
-    },
-    "@webassemblyjs/helper-buffer": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
-      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA=="
-    },
-    "@webassemblyjs/helper-numbers": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
-      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
-      "requires": {
-        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
-        "@webassemblyjs/helper-api-error": "1.13.2",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
-      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA=="
-    },
-    "@webassemblyjs/helper-wasm-section": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
-      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
-      "requires": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/wasm-gen": "1.14.1"
-      }
-    },
-    "@webassemblyjs/ieee754": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
-      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
-      "requires": {
-        "@xtuc/ieee754": "^1.2.0"
-      }
-    },
-    "@webassemblyjs/leb128": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
-      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
-      "requires": {
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "@webassemblyjs/utf8": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
-      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ=="
-    },
-    "@webassemblyjs/wasm-edit": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
-      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
-      "requires": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/helper-wasm-section": "1.14.1",
-        "@webassemblyjs/wasm-gen": "1.14.1",
-        "@webassemblyjs/wasm-opt": "1.14.1",
-        "@webassemblyjs/wasm-parser": "1.14.1",
-        "@webassemblyjs/wast-printer": "1.14.1"
-      }
-    },
-    "@webassemblyjs/wasm-gen": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
-      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
-      "requires": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/ieee754": "1.13.2",
-        "@webassemblyjs/leb128": "1.13.2",
-        "@webassemblyjs/utf8": "1.13.2"
-      }
-    },
-    "@webassemblyjs/wasm-opt": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
-      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
-      "requires": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/wasm-gen": "1.14.1",
-        "@webassemblyjs/wasm-parser": "1.14.1"
-      }
-    },
-    "@webassemblyjs/wasm-parser": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
-      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
-      "requires": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-api-error": "1.13.2",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/ieee754": "1.13.2",
-        "@webassemblyjs/leb128": "1.13.2",
-        "@webassemblyjs/utf8": "1.13.2"
-      }
-    },
-    "@webassemblyjs/wast-printer": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
-      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
-      "requires": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
-    },
-    "@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
-    },
-    "abab": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
-      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
-    },
-    "accepts": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-      "requires": {
-        "mime-types": "~2.1.34",
-        "negotiator": "0.6.3"
-      },
-      "dependencies": {
-        "negotiator": {
-          "version": "0.6.3",
-          "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-          "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
-        }
-      }
-    },
-    "acorn": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
-      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="
-    },
-    "acorn-globals": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
-      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
-      "requires": {
-        "acorn": "^7.1.1",
-        "acorn-walk": "^7.1.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "7.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
-        }
-      }
-    },
-    "acorn-import-phases": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
-      "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
-      "requires": {}
-    },
-    "acorn-jsx": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "requires": {}
-    },
-    "acorn-walk": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA=="
-    },
-    "address": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
-      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA=="
-    },
-    "adjust-sourcemap-loader": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
-      "integrity": "sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==",
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "regex-parser": "^2.2.11"
-      }
-    },
-    "agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "requires": {
-        "debug": "4"
-      }
-    },
-    "ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "requires": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "ajv-formats": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "requires": {
-        "ajv": "^8.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "8.17.1",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-          "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-          "requires": {
-            "fast-deep-equal": "^3.1.3",
-            "fast-uri": "^3.0.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2"
-          }
-        },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        }
-      }
-    },
-    "ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
-    },
-    "ansi-escapes": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
-      "requires": {
-        "type-fest": "^0.21.3"
-      },
-      "dependencies": {
-        "type-fest": {
-          "version": "0.21.3",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-          "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="
-        }
-      }
-    },
-    "ansi-html": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.9.tgz",
-      "integrity": "sha512-ozbS3LuenHVxNRh/wdnN16QapUHzauqSomAl1jwwJRRsGwFwtj644lIhxfWu0Fy0acCij2+AEgHvjscq3dlVXg=="
-    },
-    "ansi-html-community": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
-      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw=="
-    },
-    "ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
-    },
-    "ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "requires": {
-        "color-convert": "^2.0.1"
-      }
-    },
-    "any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
-    },
-    "anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "requires": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      }
-    },
-    "arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
-    },
-    "argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "requires": {
-        "sprintf-js": "~1.0.2"
-      }
-    },
-    "aria-query": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
-      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="
-    },
-    "array-buffer-byte-length": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
-      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
-      "requires": {
-        "call-bound": "^1.0.3",
-        "is-array-buffer": "^3.0.5"
-      }
-    },
-    "array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
-    },
-    "array-includes": {
-      "version": "3.1.9",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
-      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.24.0",
-        "es-object-atoms": "^1.1.1",
-        "get-intrinsic": "^1.3.0",
-        "is-string": "^1.1.1",
-        "math-intrinsics": "^1.1.0"
-      }
-    },
-    "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=="
-    },
-    "array.prototype.findlast": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
-      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
-      "requires": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "es-shim-unscopables": "^1.0.2"
-      }
-    },
-    "array.prototype.findlastindex": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
-      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.9",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "es-shim-unscopables": "^1.1.0"
-      }
-    },
-    "array.prototype.flat": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
-      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.5",
-        "es-shim-unscopables": "^1.0.2"
-      }
-    },
-    "array.prototype.flatmap": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
-      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.5",
-        "es-shim-unscopables": "^1.0.2"
-      }
-    },
-    "array.prototype.reduce": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.8.tgz",
-      "integrity": "sha512-DwuEqgXFBwbmZSRqt3BpQigWNUoqw9Ml2dTWdF3B2zQlQX4OeUE0zyuzX0fX0IbTvjdkZbcBTU3idgpO78qkTw==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.9",
-        "es-array-method-boxes-properly": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "is-string": "^1.1.1"
-      }
-    },
-    "array.prototype.tosorted": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
-      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
-      "requires": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.3",
-        "es-errors": "^1.3.0",
-        "es-shim-unscopables": "^1.0.2"
-      }
-    },
-    "arraybuffer.prototype.slice": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
-      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
-      "requires": {
-        "array-buffer-byte-length": "^1.0.1",
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.5",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6",
-        "is-array-buffer": "^3.0.4"
-      }
-    },
-    "asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
-    },
-    "ast-types-flow": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
-      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ=="
-    },
-    "async": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
-      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA=="
-    },
-    "async-function": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
-      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA=="
-    },
-    "asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-    },
-    "at-least-node": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
-      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
-    },
-    "autoprefixer": {
-      "version": "10.4.21",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
-      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
-      "requires": {
-        "browserslist": "^4.24.4",
-        "caniuse-lite": "^1.0.30001702",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "available-typed-arrays": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
-      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
-      "requires": {
-        "possible-typed-array-names": "^1.0.0"
-      }
-    },
-    "axe-core": {
-      "version": "4.10.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz",
-      "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg=="
-    },
-    "axios": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.16.0.tgz",
-      "integrity": "sha512-6hp5CwvTPlN2A31g5dxnwAX0orzM7pmCRDLnZSX772mv8WDqICwFjowHuPs04Mc8deIld1+ejhtaMn5vp6b+1w==",
-      "requires": {
-        "follow-redirects": "^1.16.0",
-        "form-data": "^4.0.5",
-        "proxy-from-env": "^2.1.0"
-      },
-      "dependencies": {
-        "form-data": {
-          "version": "4.0.5",
-          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
-          "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
-          "requires": {
-            "asynckit": "^0.4.0",
-            "combined-stream": "^1.0.8",
-            "es-set-tostringtag": "^2.1.0",
-            "hasown": "^2.0.2",
-            "mime-types": "^2.1.12"
-          }
-        }
-      }
-    },
-    "axobject-query": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
-      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="
-    },
-    "babel-jest": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
-      "integrity": "sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==",
-      "requires": {
-        "@jest/transform": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/babel__core": "^7.1.14",
-        "babel-plugin-istanbul": "^6.1.1",
-        "babel-preset-jest": "^27.5.1",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.9",
-        "slash": "^3.0.0"
-      }
-    },
-    "babel-loader": {
-      "version": "8.4.1",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.4.1.tgz",
-      "integrity": "sha512-nXzRChX+Z1GoE6yWavBQg6jDslyFF3SDjl2paADuoQtQW10JqShJt62R6eJQ5m/pjJFDT8xgKIWSP85OY8eXeA==",
-      "requires": {
-        "find-cache-dir": "^3.3.1",
-        "loader-utils": "^2.0.4",
-        "make-dir": "^3.1.0",
-        "schema-utils": "^2.6.5"
-      },
-      "dependencies": {
-        "schema-utils": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-          "requires": {
-            "@types/json-schema": "^7.0.5",
-            "ajv": "^6.12.4",
-            "ajv-keywords": "^3.5.2"
-          }
-        }
-      }
-    },
-    "babel-plugin-istanbul": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
-      "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@istanbuljs/load-nyc-config": "^1.0.0",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-instrument": "^5.0.4",
-        "test-exclude": "^6.0.0"
-      }
-    },
-    "babel-plugin-jest-hoist": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.5.1.tgz",
-      "integrity": "sha512-50wCwD5EMNW4aRpOwtqzyZHIewTYNxLA4nhB+09d8BIssfNfzBRhkBIHiaPv1Si226TQSvp8gxAJm2iY2qs2hQ==",
-      "requires": {
-        "@babel/template": "^7.3.3",
-        "@babel/types": "^7.3.3",
-        "@types/babel__core": "^7.0.0",
-        "@types/babel__traverse": "^7.0.6"
-      }
-    },
-    "babel-plugin-macros": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
-      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
-      "requires": {
-        "@babel/runtime": "^7.12.5",
-        "cosmiconfig": "^7.0.0",
-        "resolve": "^1.19.0"
-      }
-    },
-    "babel-plugin-named-asset-import": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz",
-      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==",
-      "requires": {}
-    },
-    "babel-plugin-polyfill-corejs2": {
-      "version": "0.4.14",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.14.tgz",
-      "integrity": "sha512-Co2Y9wX854ts6U8gAAPXfn0GmAyctHuK8n0Yhfjd6t30g7yvKjspvvOo9yG+z52PZRgFErt7Ka2pYnXCjLKEpg==",
-      "requires": {
-        "@babel/compat-data": "^7.27.7",
-        "@babel/helper-define-polyfill-provider": "^0.6.5",
-        "semver": "^6.3.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
-        }
-      }
-    },
-    "babel-plugin-polyfill-corejs3": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.13.0.tgz",
-      "integrity": "sha512-U+GNwMdSFgzVmfhNm8GJUX88AadB3uo9KpJqS3FaqNIPKgySuvMb+bHPsOmmuWyIcuqZj/pzt1RUIUZns4y2+A==",
-      "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.6.5",
-        "core-js-compat": "^3.43.0"
-      }
-    },
-    "babel-plugin-polyfill-regenerator": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.5.tgz",
-      "integrity": "sha512-ISqQ2frbiNU9vIJkzg7dlPpznPZ4jOiUQ1uSmB0fEHeowtN3COYRsXr/xexn64NpU13P06jc/L5TgiJXOgrbEg==",
-      "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.6.5"
-      }
-    },
-    "babel-plugin-transform-react-remove-prop-types": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
-      "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA=="
-    },
-    "babel-preset-current-node-syntax": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.2.0.tgz",
-      "integrity": "sha512-E/VlAEzRrsLEb2+dv8yp3bo4scof3l9nR4lrld+Iy5NyVqgVYUJnDAmunkhPMisRI32Qc4iRiz425d8vM++2fg==",
-      "requires": {
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/plugin-syntax-bigint": "^7.8.3",
-        "@babel/plugin-syntax-class-properties": "^7.12.13",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5",
-        "@babel/plugin-syntax-import-attributes": "^7.24.7",
-        "@babel/plugin-syntax-import-meta": "^7.10.4",
-        "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
-        "@babel/plugin-syntax-top-level-await": "^7.14.5"
-      }
-    },
-    "babel-preset-jest": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.5.1.tgz",
-      "integrity": "sha512-Nptf2FzlPCWYuJg41HBqXVT8ym6bXOevuCTbhxlUpjwtysGaIWFvDEjp4y+G7fl13FgOdjs7P/DmErqH7da0Ag==",
-      "requires": {
-        "babel-plugin-jest-hoist": "^27.5.1",
-        "babel-preset-current-node-syntax": "^1.0.0"
-      }
-    },
-    "babel-preset-react-app": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-react-app/-/babel-preset-react-app-10.1.0.tgz",
-      "integrity": "sha512-f9B1xMdnkCIqe+2dHrJsoQFRz7reChaAHE/65SdaykPklQqhme2WaC08oD3is77x9ff98/9EazAKFDZv5rFEQg==",
-      "requires": {
-        "@babel/core": "^7.16.0",
-        "@babel/plugin-proposal-class-properties": "^7.16.0",
-        "@babel/plugin-proposal-decorators": "^7.16.4",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
-        "@babel/plugin-proposal-numeric-separator": "^7.16.0",
-        "@babel/plugin-proposal-optional-chaining": "^7.16.0",
-        "@babel/plugin-proposal-private-methods": "^7.16.0",
-        "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
-        "@babel/plugin-transform-flow-strip-types": "^7.16.0",
-        "@babel/plugin-transform-react-display-name": "^7.16.0",
-        "@babel/plugin-transform-runtime": "^7.16.4",
-        "@babel/preset-env": "^7.16.4",
-        "@babel/preset-react": "^7.16.0",
-        "@babel/preset-typescript": "^7.16.0",
-        "@babel/runtime": "^7.16.3",
-        "babel-plugin-macros": "^3.1.0",
-        "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
-      },
-      "dependencies": {
-        "@babel/plugin-proposal-private-property-in-object": {
-          "version": "7.21.11",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
-          "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
-          "requires": {
-            "@babel/helper-annotate-as-pure": "^7.18.6",
-            "@babel/helper-create-class-features-plugin": "^7.21.0",
-            "@babel/helper-plugin-utils": "^7.20.2",
-            "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
-          }
-        }
-      }
-    },
-    "balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-    },
-    "batch": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
-    },
-    "bfj": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.1.0.tgz",
-      "integrity": "sha512-I6MMLkn+anzNdCUp9hMRyui1HaNEUCco50lxbvNS4+EyXg8lN3nJ48PjPWtbH8UVS9CuMoaKE9U2V3l29DaRQw==",
-      "requires": {
-        "bluebird": "^3.7.2",
-        "check-types": "^11.2.3",
-        "hoopy": "^0.1.4",
-        "jsonpath": "^1.1.1",
-        "tryer": "^1.0.1"
-      }
-    },
-    "big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
-    },
-    "binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="
-    },
-    "bluebird": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
-    },
-    "body-parser": {
-      "version": "1.20.3",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
-      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
-      "requires": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.5",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.13.0",
-        "raw-body": "2.5.2",
-        "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "iconv-lite": {
-          "version": "0.4.24",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        }
-      }
-    },
-    "bonjour-service": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.3.0.tgz",
-      "integrity": "sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==",
-      "requires": {
-        "fast-deep-equal": "^3.1.3",
-        "multicast-dns": "^7.2.5"
-      }
-    },
-    "boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
-    },
-    "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==",
-      "requires": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "requires": {
-        "fill-range": "^7.1.1"
-      }
-    },
-    "browser-process-hrtime": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
-      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
-    },
-    "browserslist": {
-      "version": "4.25.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.2.tgz",
-      "integrity": "sha512-0si2SJK3ooGzIawRu61ZdPCO1IncZwS8IzuX73sPZsXW6EQ/w/DAfPyKI8l1ETTCr2MnvqWitmlCUxgdul45jA==",
-      "requires": {
-        "caniuse-lite": "^1.0.30001733",
-        "electron-to-chromium": "^1.5.199",
-        "node-releases": "^2.0.19",
-        "update-browserslist-db": "^1.1.3"
-      }
-    },
-    "bser": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
-      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
-      "requires": {
-        "node-int64": "^0.4.0"
-      }
-    },
-    "buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
-    },
-    "builtin-modules": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
-      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw=="
-    },
-    "bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="
-    },
-    "call-bind": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
-      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
-      "requires": {
-        "call-bind-apply-helpers": "^1.0.0",
-        "es-define-property": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.2"
-      }
-    },
-    "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==",
-      "requires": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      }
-    },
-    "call-bound": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
-      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "requires": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "get-intrinsic": "^1.3.0"
-      }
-    },
-    "callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
-    },
-    "camel-case": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
-      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-      "requires": {
-        "pascal-case": "^3.1.2",
-        "tslib": "^2.0.3"
-      }
-    },
-    "camelcase": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA=="
-    },
-    "camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
-    },
-    "caniuse-api": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
-      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
-      "requires": {
-        "browserslist": "^4.0.0",
-        "caniuse-lite": "^1.0.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.uniq": "^4.5.0"
-      }
-    },
-    "caniuse-lite": {
-      "version": "1.0.30001734",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001734.tgz",
-      "integrity": "sha512-uhE1Ye5vgqju6OI71HTQqcBCZrvHugk0MjLak7Q+HfoBgoq5Bi+5YnwjP4fjDgrtYr/l8MVRBvzz9dPD4KyK0A=="
-    },
-    "case-sensitive-paths-webpack-plugin": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
-      "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw=="
-    },
-    "chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "requires": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      }
-    },
-    "char-regex": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
-      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
-    },
-    "check-types": {
-      "version": "11.2.3",
-      "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.3.tgz",
-      "integrity": "sha512-+67P1GkJRaxQD6PKK0Et9DhwQB+vGg3PM5+aavopCpZT1lj9jeqfvpgTLAWErNj8qApkkmXlu/Ug74kmhagkXg=="
-    },
-    "chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "requires": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "fsevents": "~2.3.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "dependencies": {
-        "glob-parent": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        }
-      }
-    },
-    "chrome-trace-event": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
-      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ=="
-    },
-    "ci-info": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
-      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ=="
-    },
-    "cjs-module-lexer": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.3.tgz",
-      "integrity": "sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q=="
-    },
-    "clean-css": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
-      "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
-      "requires": {
-        "source-map": "~0.6.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "cliui": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-      "requires": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^7.0.0"
-      }
-    },
-    "clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
-    },
-    "co": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ=="
-    },
-    "coa": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
-      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
-      "requires": {
-        "@types/q": "^1.5.1",
-        "chalk": "^2.4.1",
-        "q": "^1.1.2"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "requires": {
-            "color-name": "1.1.3"
-          }
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "collect-v8-coverage": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
-      "integrity": "sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q=="
-    },
-    "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==",
-      "requires": {
-        "color-name": "~1.1.4"
-      }
-    },
-    "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=="
-    },
-    "colord": {
-      "version": "2.9.3",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
-    },
-    "colorette": {
-      "version": "2.0.20",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
-      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
-    },
-    "combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "requires": {
-        "delayed-stream": "~1.0.0"
-      }
-    },
-    "commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
-    },
-    "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=="
-    },
-    "commondir": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg=="
-    },
-    "compressible": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-      "requires": {
-        "mime-db": ">= 1.43.0 < 2"
-      }
-    },
-    "compression": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.8.1.tgz",
-      "integrity": "sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==",
-      "requires": {
-        "bytes": "3.1.2",
-        "compressible": "~2.0.18",
-        "debug": "2.6.9",
-        "negotiator": "~0.6.4",
-        "on-headers": "~1.1.0",
-        "safe-buffer": "5.2.1",
-        "vary": "~1.1.2"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        }
-      }
-    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
-    },
-    "confusing-browser-globals": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
-      "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA=="
-    },
-    "connect-history-api-fallback": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
-      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA=="
-    },
-    "content-disposition": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-      "requires": {
-        "safe-buffer": "5.2.1"
-      }
-    },
-    "content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA=="
-    },
-    "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=="
-    },
-    "cookie": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
-      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w=="
-    },
-    "cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
-    },
-    "core-js": {
-      "version": "3.45.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.0.tgz",
-      "integrity": "sha512-c2KZL9lP4DjkN3hk/an4pWn5b5ZefhRJnAc42n6LJ19kSnbeRbdQZE5dSeE2LBol1OwJD3X1BQvFTAsa8ReeDA=="
-    },
-    "core-js-compat": {
-      "version": "3.45.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.45.0.tgz",
-      "integrity": "sha512-gRoVMBawZg0OnxaVv3zpqLLxaHmsubEGyTnqdpI/CEBvX4JadI1dMSHxagThprYRtSVbuQxvi6iUatdPxohHpA==",
-      "requires": {
-        "browserslist": "^4.25.1"
-      }
-    },
-    "core-js-pure": {
-      "version": "3.45.0",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.45.0.tgz",
-      "integrity": "sha512-OtwjqcDpY2X/eIIg1ol/n0y/X8A9foliaNt1dSK0gV3J2/zw+89FcNG3mPK+N8YWts4ZFUPxnrAzsxs/lf8yDA=="
-    },
-    "core-util-is": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
-      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
-    },
-    "cosmiconfig": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-      "requires": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.2.1",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      }
-    },
-    "cross-spawn": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "requires": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      }
-    },
-    "crypto-random-string": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
-      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA=="
-    },
-    "css-blank-pseudo": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz",
-      "integrity": "sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==",
-      "requires": {
-        "postcss-selector-parser": "^6.0.9"
-      }
-    },
-    "css-declaration-sorter": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
-      "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
-      "requires": {}
-    },
-    "css-has-pseudo": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz",
-      "integrity": "sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==",
-      "requires": {
-        "postcss-selector-parser": "^6.0.9"
-      }
-    },
-    "css-loader": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
-      "integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
-      "requires": {
-        "icss-utils": "^5.1.0",
-        "postcss": "^8.4.33",
-        "postcss-modules-extract-imports": "^3.1.0",
-        "postcss-modules-local-by-default": "^4.0.5",
-        "postcss-modules-scope": "^3.2.0",
-        "postcss-modules-values": "^4.0.0",
-        "postcss-value-parser": "^4.2.0",
-        "semver": "^7.5.4"
-      }
-    },
-    "css-minimizer-webpack-plugin": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz",
-      "integrity": "sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==",
-      "requires": {
-        "cssnano": "^5.0.6",
-        "jest-worker": "^27.0.2",
-        "postcss": "^8.3.5",
-        "schema-utils": "^4.0.0",
-        "serialize-javascript": "^6.0.0",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "css-prefers-color-scheme": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
-      "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
-      "requires": {}
-    },
-    "css-select": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
-      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
-      "requires": {
-        "boolbase": "^1.0.0",
-        "css-what": "^6.0.1",
-        "domhandler": "^4.3.1",
-        "domutils": "^2.8.0",
-        "nth-check": "^2.0.1"
-      }
-    },
-    "css-select-base-adapter": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
-      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
-    },
-    "css-tree": {
-      "version": "1.0.0-alpha.37",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
-      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
-      "requires": {
-        "mdn-data": "2.0.4",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "css-what": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
-      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA=="
-    },
-    "css.escape": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="
-    },
-    "cssdb": {
-      "version": "7.11.2",
-      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.11.2.tgz",
-      "integrity": "sha512-lhQ32TFkc1X4eTefGfYPvgovRSzIMofHkigfH8nWtyRL4XJLsRhJFreRvEgKzept7x1rjBuy3J/MurXLaFxW/A=="
-    },
-    "cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
-    },
-    "cssnano": {
-      "version": "5.1.15",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
-      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
-      "requires": {
-        "cssnano-preset-default": "^5.2.14",
-        "lilconfig": "^2.0.3",
-        "yaml": "^1.10.2"
-      }
-    },
-    "cssnano-preset-default": {
-      "version": "5.2.14",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
-      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
-      "requires": {
-        "css-declaration-sorter": "^6.3.1",
-        "cssnano-utils": "^3.1.0",
-        "postcss-calc": "^8.2.3",
-        "postcss-colormin": "^5.3.1",
-        "postcss-convert-values": "^5.1.3",
-        "postcss-discard-comments": "^5.1.2",
-        "postcss-discard-duplicates": "^5.1.0",
-        "postcss-discard-empty": "^5.1.1",
-        "postcss-discard-overridden": "^5.1.0",
-        "postcss-merge-longhand": "^5.1.7",
-        "postcss-merge-rules": "^5.1.4",
-        "postcss-minify-font-values": "^5.1.0",
-        "postcss-minify-gradients": "^5.1.1",
-        "postcss-minify-params": "^5.1.4",
-        "postcss-minify-selectors": "^5.2.1",
-        "postcss-normalize-charset": "^5.1.0",
-        "postcss-normalize-display-values": "^5.1.0",
-        "postcss-normalize-positions": "^5.1.1",
-        "postcss-normalize-repeat-style": "^5.1.1",
-        "postcss-normalize-string": "^5.1.0",
-        "postcss-normalize-timing-functions": "^5.1.0",
-        "postcss-normalize-unicode": "^5.1.1",
-        "postcss-normalize-url": "^5.1.0",
-        "postcss-normalize-whitespace": "^5.1.1",
-        "postcss-ordered-values": "^5.1.3",
-        "postcss-reduce-initial": "^5.1.2",
-        "postcss-reduce-transforms": "^5.1.0",
-        "postcss-svgo": "^5.1.0",
-        "postcss-unique-selectors": "^5.1.1"
-      }
-    },
-    "cssnano-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
-      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "requires": {}
-    },
-    "csso": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
-      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
-      "requires": {
-        "css-tree": "^1.1.2"
-      },
-      "dependencies": {
-        "css-tree": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-          "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-          "requires": {
-            "mdn-data": "2.0.14",
-            "source-map": "^0.6.1"
-          }
-        },
-        "mdn-data": {
-          "version": "2.0.14",
-          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-          "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "cssom": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
-      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw=="
-    },
-    "cssstyle": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
-      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
-      "requires": {
-        "cssom": "~0.3.6"
-      },
-      "dependencies": {
-        "cssom": {
-          "version": "0.3.8",
-          "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-          "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
-        }
-      }
-    },
-    "csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
-    },
-    "damerau-levenshtein": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
-      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
-    },
-    "data-urls": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
-      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
-      "requires": {
-        "abab": "^2.0.3",
-        "whatwg-mimetype": "^2.3.0",
-        "whatwg-url": "^8.0.0"
-      }
-    },
-    "data-view-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
-      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
-      "requires": {
-        "call-bound": "^1.0.3",
-        "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.2"
-      }
-    },
-    "data-view-byte-length": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
-      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
-      "requires": {
-        "call-bound": "^1.0.3",
-        "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.2"
-      }
-    },
-    "data-view-byte-offset": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
-      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
-      "requires": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
-      }
-    },
-    "debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-      "requires": {
-        "ms": "^2.1.3"
-      }
-    },
-    "decimal.js": {
-      "version": "10.6.0",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
-      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg=="
-    },
-    "dedent": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
-      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA=="
-    },
-    "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=="
-    },
-    "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=="
-    },
-    "default-gateway": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
-      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
-      "requires": {
-        "execa": "^5.0.0"
-      }
-    },
-    "define-data-property": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "requires": {
-        "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.0.1"
-      }
-    },
-    "define-lazy-prop": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
-      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og=="
-    },
-    "define-properties": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
-      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "requires": {
-        "define-data-property": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      }
-    },
-    "delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
-    },
-    "depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
-    },
-    "dequal": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
-    },
-    "destroy": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
-    },
-    "detect-newline": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
-      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA=="
-    },
-    "detect-node": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
-      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
-    },
-    "detect-port-alt": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
-      "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
-      "requires": {
-        "address": "^1.0.1",
-        "debug": "^2.6.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        }
-      }
-    },
-    "didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
-    },
-    "diff-sequences": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.5.1.tgz",
-      "integrity": "sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ=="
-    },
-    "dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "requires": {
-        "path-type": "^4.0.0"
-      }
-    },
-    "dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
-    },
-    "dns-packet": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
-      "integrity": "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==",
-      "requires": {
-        "@leichtgewicht/ip-codec": "^2.0.1"
-      }
-    },
-    "doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "requires": {
-        "esutils": "^2.0.2"
-      }
-    },
-    "dom-accessibility-api": {
-      "version": "0.5.16",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
-      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="
-    },
-    "dom-converter": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
-      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
-      "requires": {
-        "utila": "~0.4"
-      }
-    },
-    "dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "requires": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
-    "dom-serializer": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
-      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
-      "requires": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
-      }
-    },
-    "domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
-    },
-    "domexception": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
-      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
-      "requires": {
-        "webidl-conversions": "^5.0.0"
-      },
-      "dependencies": {
-        "webidl-conversions": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
-          "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA=="
-        }
-      }
-    },
-    "domhandler": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
-      "requires": {
-        "domelementtype": "^2.2.0"
-      }
-    },
-    "domutils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-      "requires": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
-      }
-    },
-    "dot-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-      "requires": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
-    },
-    "dotenv": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
-    },
-    "dotenv-expand": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
-      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA=="
-    },
-    "dunder-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
-      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "requires": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.2.0"
-      }
-    },
-    "duplexer": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
-    },
-    "eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
-    },
-    "ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
-    },
-    "ejs": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
-      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
-      "requires": {
-        "jake": "^10.8.5"
-      }
-    },
-    "electron-to-chromium": {
-      "version": "1.5.200",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.200.tgz",
-      "integrity": "sha512-rFCxROw7aOe4uPTfIAx+rXv9cEcGx+buAF4npnhtTqCJk5KDFRnh3+KYj7rdVh6lsFt5/aPs+Irj9rZ33WMA7w=="
-    },
-    "emittery": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
-      "integrity": "sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg=="
-    },
-    "emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
-    },
-    "emojis-list": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
-    },
-    "encodeurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
-      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="
-    },
-    "enhanced-resolve": {
-      "version": "5.18.3",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
-      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
-      "requires": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      }
-    },
-    "entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
-    },
-    "error-ex": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "requires": {
-        "is-arrayish": "^0.2.1"
-      }
-    },
-    "error-stack-parser": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
-      "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
-      "requires": {
-        "stackframe": "^1.3.4"
-      }
-    },
-    "es-abstract": {
-      "version": "1.24.0",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
-      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
-      "requires": {
-        "array-buffer-byte-length": "^1.0.2",
-        "arraybuffer.prototype.slice": "^1.0.4",
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "data-view-buffer": "^1.0.2",
-        "data-view-byte-length": "^1.0.2",
-        "data-view-byte-offset": "^1.0.1",
-        "es-define-property": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "es-set-tostringtag": "^2.1.0",
-        "es-to-primitive": "^1.3.0",
-        "function.prototype.name": "^1.1.8",
-        "get-intrinsic": "^1.3.0",
-        "get-proto": "^1.0.1",
-        "get-symbol-description": "^1.1.0",
-        "globalthis": "^1.0.4",
-        "gopd": "^1.2.0",
-        "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "hasown": "^2.0.2",
-        "internal-slot": "^1.1.0",
-        "is-array-buffer": "^3.0.5",
-        "is-callable": "^1.2.7",
-        "is-data-view": "^1.0.2",
-        "is-negative-zero": "^2.0.3",
-        "is-regex": "^1.2.1",
-        "is-set": "^2.0.3",
-        "is-shared-array-buffer": "^1.0.4",
-        "is-string": "^1.1.1",
-        "is-typed-array": "^1.1.15",
-        "is-weakref": "^1.1.1",
-        "math-intrinsics": "^1.1.0",
-        "object-inspect": "^1.13.4",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.7",
-        "own-keys": "^1.0.1",
-        "regexp.prototype.flags": "^1.5.4",
-        "safe-array-concat": "^1.1.3",
-        "safe-push-apply": "^1.0.0",
-        "safe-regex-test": "^1.1.0",
-        "set-proto": "^1.0.0",
-        "stop-iteration-iterator": "^1.1.0",
-        "string.prototype.trim": "^1.2.10",
-        "string.prototype.trimend": "^1.0.9",
-        "string.prototype.trimstart": "^1.0.8",
-        "typed-array-buffer": "^1.0.3",
-        "typed-array-byte-length": "^1.0.3",
-        "typed-array-byte-offset": "^1.0.4",
-        "typed-array-length": "^1.0.7",
-        "unbox-primitive": "^1.1.0",
-        "which-typed-array": "^1.1.19"
-      }
-    },
-    "es-array-method-boxes-properly": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
-      "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA=="
-    },
-    "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=="
-    },
-    "es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="
-    },
-    "es-iterator-helpers": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
-      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.6",
-        "es-errors": "^1.3.0",
-        "es-set-tostringtag": "^2.0.3",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.6",
-        "globalthis": "^1.0.4",
-        "gopd": "^1.2.0",
-        "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "internal-slot": "^1.1.0",
-        "iterator.prototype": "^1.1.4",
-        "safe-array-concat": "^1.1.3"
-      }
-    },
-    "es-module-lexer": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
-      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="
-    },
-    "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==",
-      "requires": {
-        "es-errors": "^1.3.0"
-      }
-    },
-    "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==",
-      "requires": {
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.2"
-      }
-    },
-    "es-shim-unscopables": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
-      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
-      "requires": {
-        "hasown": "^2.0.2"
-      }
-    },
-    "es-to-primitive": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
-      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
-      "requires": {
-        "is-callable": "^1.2.7",
-        "is-date-object": "^1.0.5",
-        "is-symbol": "^1.0.4"
-      }
-    },
-    "escalade": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="
-    },
-    "escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
-    },
-    "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=="
-    },
-    "escodegen": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
-      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
-      "requires": {
-        "esprima": "^4.0.1",
-        "estraverse": "^5.2.0",
-        "esutils": "^2.0.2",
-        "source-map": "~0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "optional": true
-        }
-      }
-    },
-    "eslint": {
-      "version": "8.57.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
-      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
-      "requires": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.1",
-        "@humanwhocodes/config-array": "^0.13.0",
-        "@humanwhocodes/module-importer": "^1.0.1",
-        "@nodelib/fs.walk": "^1.2.8",
-        "@ungap/structured-clone": "^1.2.0",
-        "ajv": "^6.12.4",
-        "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
-        "debug": "^4.3.2",
-        "doctrine": "^3.0.0",
-        "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.3",
-        "espree": "^9.6.1",
-        "esquery": "^1.4.2",
-        "esutils": "^2.0.2",
-        "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^6.0.1",
-        "find-up": "^5.0.0",
-        "glob-parent": "^6.0.2",
-        "globals": "^13.19.0",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.2.0",
-        "imurmurhash": "^0.1.4",
-        "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
-        "js-yaml": "^4.1.0",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
-        "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
-      },
-      "dependencies": {
-        "argparse": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-        },
-        "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==",
-          "requires": {
-            "locate-path": "^6.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "js-yaml": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-          "requires": {
-            "argparse": "^2.0.1"
-          }
-        },
-        "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==",
-          "requires": {
-            "p-locate": "^5.0.0"
-          }
-        },
-        "p-limit": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-          "requires": {
-            "yocto-queue": "^0.1.0"
-          }
-        },
-        "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==",
-          "requires": {
-            "p-limit": "^3.0.2"
-          }
-        }
-      }
-    },
-    "eslint-config-react-app": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz",
-      "integrity": "sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==",
-      "requires": {
-        "@babel/core": "^7.16.0",
-        "@babel/eslint-parser": "^7.16.3",
-        "@rushstack/eslint-patch": "^1.1.0",
-        "@typescript-eslint/eslint-plugin": "^5.5.0",
-        "@typescript-eslint/parser": "^5.5.0",
-        "babel-preset-react-app": "^10.0.1",
-        "confusing-browser-globals": "^1.0.11",
-        "eslint-plugin-flowtype": "^8.0.3",
-        "eslint-plugin-import": "^2.25.3",
-        "eslint-plugin-jest": "^25.3.0",
-        "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-react": "^7.27.1",
-        "eslint-plugin-react-hooks": "^4.3.0",
-        "eslint-plugin-testing-library": "^5.0.1"
-      }
-    },
-    "eslint-import-resolver-node": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
-      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
-      "requires": {
-        "debug": "^3.2.7",
-        "is-core-module": "^2.13.0",
-        "resolve": "^1.22.4"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        }
-      }
-    },
-    "eslint-module-utils": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
-      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
-      "requires": {
-        "debug": "^3.2.7"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        }
-      }
-    },
-    "eslint-plugin-flowtype": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-8.0.3.tgz",
-      "integrity": "sha512-dX8l6qUL6O+fYPtpNRideCFSpmWOUVx5QcaGLVqe/vlDiBSe4vYljDWDETwnyFzpl7By/WVIu6rcrniCgH9BqQ==",
-      "requires": {
-        "lodash": "^4.17.21",
-        "string-natural-compare": "^3.0.1"
-      }
-    },
-    "eslint-plugin-import": {
-      "version": "2.32.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
-      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
-      "requires": {
-        "@rtsao/scc": "^1.1.0",
-        "array-includes": "^3.1.9",
-        "array.prototype.findlastindex": "^1.2.6",
-        "array.prototype.flat": "^1.3.3",
-        "array.prototype.flatmap": "^1.3.3",
-        "debug": "^3.2.7",
-        "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.9",
-        "eslint-module-utils": "^2.12.1",
-        "hasown": "^2.0.2",
-        "is-core-module": "^2.16.1",
-        "is-glob": "^4.0.3",
-        "minimatch": "^3.1.2",
-        "object.fromentries": "^2.0.8",
-        "object.groupby": "^1.0.3",
-        "object.values": "^1.2.1",
-        "semver": "^6.3.1",
-        "string.prototype.trimend": "^1.0.9",
-        "tsconfig-paths": "^3.15.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "doctrine": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-          "requires": {
-            "esutils": "^2.0.2"
-          }
-        },
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
-        }
-      }
-    },
-    "eslint-plugin-jest": {
-      "version": "25.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz",
-      "integrity": "sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==",
-      "requires": {
-        "@typescript-eslint/experimental-utils": "^5.0.0"
-      }
-    },
-    "eslint-plugin-jsx-a11y": {
-      "version": "6.10.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
-      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
-      "requires": {
-        "aria-query": "^5.3.2",
-        "array-includes": "^3.1.8",
-        "array.prototype.flatmap": "^1.3.2",
-        "ast-types-flow": "^0.0.8",
-        "axe-core": "^4.10.0",
-        "axobject-query": "^4.1.0",
-        "damerau-levenshtein": "^1.0.8",
-        "emoji-regex": "^9.2.2",
-        "hasown": "^2.0.2",
-        "jsx-ast-utils": "^3.3.5",
-        "language-tags": "^1.0.9",
-        "minimatch": "^3.1.2",
-        "object.fromentries": "^2.0.8",
-        "safe-regex-test": "^1.0.3",
-        "string.prototype.includes": "^2.0.1"
-      }
-    },
-    "eslint-plugin-react": {
-      "version": "7.37.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
-      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
-      "requires": {
-        "array-includes": "^3.1.8",
-        "array.prototype.findlast": "^1.2.5",
-        "array.prototype.flatmap": "^1.3.3",
-        "array.prototype.tosorted": "^1.1.4",
-        "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.2.1",
-        "estraverse": "^5.3.0",
-        "hasown": "^2.0.2",
-        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
-        "minimatch": "^3.1.2",
-        "object.entries": "^1.1.9",
-        "object.fromentries": "^2.0.8",
-        "object.values": "^1.2.1",
-        "prop-types": "^15.8.1",
-        "resolve": "^2.0.0-next.5",
-        "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.12",
-        "string.prototype.repeat": "^1.0.0"
-      },
-      "dependencies": {
-        "doctrine": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-          "requires": {
-            "esutils": "^2.0.2"
-          }
-        },
-        "resolve": {
-          "version": "2.0.0-next.5",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
-          "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
-          "requires": {
-            "is-core-module": "^2.13.0",
-            "path-parse": "^1.0.7",
-            "supports-preserve-symlinks-flag": "^1.0.0"
-          }
-        },
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
-        }
-      }
-    },
-    "eslint-plugin-react-hooks": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
-      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
-      "requires": {}
-    },
-    "eslint-plugin-testing-library": {
-      "version": "5.11.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.1.tgz",
-      "integrity": "sha512-5eX9e1Kc2PqVRed3taaLnAAqPZGEX75C+M/rXzUAI3wIg/ZxzUm1OVAwfe/O+vE+6YXOLetSe9g5GKD2ecXipw==",
-      "requires": {
-        "@typescript-eslint/utils": "^5.58.0"
-      }
-    },
-    "eslint-scope": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
-      "requires": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      }
-    },
-    "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=="
-    },
-    "eslint-webpack-plugin": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-3.2.0.tgz",
-      "integrity": "sha512-avrKcGncpPbPSUHX6B3stNGzkKFto3eL+DKM4+VyMrVnhPc3vRczVlCq3uhuFOdRvDHTVXuzwk1ZKUrqDQHQ9w==",
-      "requires": {
-        "@types/eslint": "^7.29.0 || ^8.4.1",
-        "jest-worker": "^28.0.2",
-        "micromatch": "^4.0.5",
-        "normalize-path": "^3.0.0",
-        "schema-utils": "^4.0.0"
-      },
-      "dependencies": {
-        "jest-worker": {
-          "version": "28.1.3",
-          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-28.1.3.tgz",
-          "integrity": "sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==",
-          "requires": {
-            "@types/node": "*",
-            "merge-stream": "^2.0.0",
-            "supports-color": "^8.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "8.1.1",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "espree": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
-      "requires": {
-        "acorn": "^8.9.0",
-        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^3.4.1"
-      }
-    },
-    "esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
-    },
-    "esquery": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
-      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
-      "requires": {
-        "estraverse": "^5.1.0"
-      }
-    },
-    "esrecurse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "requires": {
-        "estraverse": "^5.2.0"
-      }
-    },
-    "estraverse": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
-    },
-    "estree-walker": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
-      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg=="
-    },
-    "esutils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
-    },
-    "etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
-    },
-    "eventemitter3": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
-    },
-    "events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
-    },
-    "execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "requires": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      }
-    },
-    "exit": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ=="
-    },
-    "expect": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-27.5.1.tgz",
-      "integrity": "sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==",
-      "requires": {
-        "@jest/types": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "jest-matcher-utils": "^27.5.1",
-        "jest-message-util": "^27.5.1"
-      }
-    },
-    "express": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
-      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
-      "requires": {
-        "accepts": "~1.3.8",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.20.3",
-        "content-disposition": "0.5.4",
-        "content-type": "~1.0.4",
-        "cookie": "0.7.1",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "1.3.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.3",
-        "methods": "~1.1.2",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.12",
-        "proxy-addr": "~2.0.7",
-        "qs": "6.13.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.2.1",
-        "send": "0.19.0",
-        "serve-static": "1.16.2",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        }
-      }
-    },
-    "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=="
-    },
-    "fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "requires": {
-        "@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"
-      },
-      "dependencies": {
-        "glob-parent": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        }
-      }
-    },
-    "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=="
-    },
-    "fast-levenshtein": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
-    },
-    "fast-uri": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
-      "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw=="
-    },
-    "fastq": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
-      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
-      "requires": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "faye-websocket": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
-      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
-      "requires": {
-        "websocket-driver": ">=0.5.1"
-      }
-    },
-    "fb-watchman": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
-      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
-      "requires": {
-        "bser": "2.1.1"
-      }
-    },
-    "file-entry-cache": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
-      "requires": {
-        "flat-cache": "^3.0.4"
-      }
-    },
-    "file-loader": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
-      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0"
-      },
-      "dependencies": {
-        "schema-utils": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
-          "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-          "requires": {
-            "@types/json-schema": "^7.0.8",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        }
-      }
-    },
-    "filelist": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
-      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
-      "requires": {
-        "minimatch": "^5.0.1"
-      },
-      "dependencies": {
-        "brace-expansion": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-          "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-          "requires": {
-            "balanced-match": "^1.0.0"
-          }
-        },
-        "minimatch": {
-          "version": "5.1.6",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-          "requires": {
-            "brace-expansion": "^2.0.1"
-          }
-        }
-      }
-    },
-    "filesize": {
-      "version": "8.0.7",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
-      "integrity": "sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ=="
-    },
-    "fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "requires": {
-        "to-regex-range": "^5.0.1"
-      }
-    },
-    "finalhandler": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
-      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
-      "requires": {
-        "debug": "2.6.9",
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "statuses": "2.0.1",
-        "unpipe": "~1.0.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        }
-      }
-    },
-    "find-cache-dir": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-      "requires": {
-        "commondir": "^1.0.1",
-        "make-dir": "^3.0.2",
-        "pkg-dir": "^4.1.0"
-      }
-    },
-    "find-root": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
-    },
-    "find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "requires": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      }
-    },
-    "flat-cache": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
-      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
-      "requires": {
-        "flatted": "^3.2.9",
-        "keyv": "^4.5.3",
-        "rimraf": "^3.0.2"
-      }
-    },
-    "flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="
-    },
-    "follow-redirects": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
-      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw=="
-    },
-    "for-each": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
-      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
-      "requires": {
-        "is-callable": "^1.2.7"
-      }
-    },
-    "foreground-child": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
-      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "requires": {
-        "cross-spawn": "^7.0.6",
-        "signal-exit": "^4.0.1"
-      },
-      "dependencies": {
-        "signal-exit": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-          "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="
-        }
-      }
-    },
-    "fork-ts-checker-webpack-plugin": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz",
-      "integrity": "sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==",
-      "requires": {
-        "@babel/code-frame": "^7.8.3",
-        "@types/json-schema": "^7.0.5",
-        "chalk": "^4.1.0",
-        "chokidar": "^3.4.2",
-        "cosmiconfig": "^6.0.0",
-        "deepmerge": "^4.2.2",
-        "fs-extra": "^9.0.0",
-        "glob": "^7.1.6",
-        "memfs": "^3.1.2",
-        "minimatch": "^3.0.4",
-        "schema-utils": "2.7.0",
-        "semver": "^7.3.2",
-        "tapable": "^1.0.0"
-      },
-      "dependencies": {
-        "cosmiconfig": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-          "requires": {
-            "@types/parse-json": "^4.0.0",
-            "import-fresh": "^3.1.0",
-            "parse-json": "^5.0.0",
-            "path-type": "^4.0.0",
-            "yaml": "^1.7.2"
-          }
-        },
-        "fs-extra": {
-          "version": "9.1.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-          "requires": {
-            "at-least-node": "^1.0.0",
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^6.0.1",
-            "universalify": "^2.0.0"
-          }
-        },
-        "schema-utils": {
-          "version": "2.7.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
-          "requires": {
-            "@types/json-schema": "^7.0.4",
-            "ajv": "^6.12.2",
-            "ajv-keywords": "^3.4.1"
-          }
-        },
-        "tapable": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-          "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
-        }
-      }
-    },
-    "form-data": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.4.tgz",
-      "integrity": "sha512-f0cRzm6dkyVYV3nPoooP8XlccPQukegwhAnpoLcXy+X+A8KfpGOoXwDr9FLZd3wzgLaBGQBE3lY93Zm/i1JvIQ==",
-      "requires": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.35"
-      }
-    },
-    "forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
-    },
-    "fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="
-    },
-    "fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
-    },
-    "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==",
-      "requires": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      }
-    },
-    "fs-monkey": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.1.0.tgz",
-      "integrity": "sha512-QMUezzXWII9EV5aTFXW1UBVUO77wYPpjqIF8/AviUCThNeSYZykpoTixUeaNNBwmCev0AMDWMAni+f8Hxb1IFw=="
-    },
-    "fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
-    },
-    "fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "optional": true
-    },
-    "function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
-    },
-    "function.prototype.name": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
-      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "functions-have-names": "^1.2.3",
-        "hasown": "^2.0.2",
-        "is-callable": "^1.2.7"
-      }
-    },
-    "functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
-    },
-    "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=="
-    },
-    "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=="
-    },
-    "get-intrinsic": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
-      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "requires": {
-        "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"
-      }
-    },
-    "get-own-enumerable-property-symbols": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
-      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
-    },
-    "get-package-type": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
-      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q=="
-    },
-    "get-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
-      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "requires": {
-        "dunder-proto": "^1.0.1",
-        "es-object-atoms": "^1.0.0"
-      }
-    },
-    "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=="
-    },
-    "get-symbol-description": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
-      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
-      "requires": {
-        "call-bound": "^1.0.3",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6"
-      }
-    },
-    "glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "requires": {
-        "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"
-      }
-    },
-    "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==",
-      "requires": {
-        "is-glob": "^4.0.3"
-      }
-    },
-    "glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
-    },
-    "global-modules": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
-      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
-      "requires": {
-        "global-prefix": "^3.0.0"
-      }
-    },
-    "global-prefix": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
-      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
-      "requires": {
-        "ini": "^1.3.5",
-        "kind-of": "^6.0.2",
-        "which": "^1.3.1"
-      },
-      "dependencies": {
-        "which": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
-    "globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-      "requires": {
-        "type-fest": "^0.20.2"
-      }
-    },
-    "globalthis": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
-      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
-      "requires": {
-        "define-properties": "^1.2.1",
-        "gopd": "^1.0.1"
-      }
-    },
-    "globby": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-      "requires": {
-        "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"
-      }
-    },
-    "gopd": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="
-    },
-    "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=="
-    },
-    "graphemer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
-    },
-    "gzip-size": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
-      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
-      "requires": {
-        "duplexer": "^0.1.2"
-      }
-    },
-    "handle-thing": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
-      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
-    },
-    "harmony-reflect": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
-      "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g=="
-    },
-    "has-bigints": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
-      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg=="
-    },
-    "has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-    },
-    "has-property-descriptors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "requires": {
-        "es-define-property": "^1.0.0"
-      }
-    },
-    "has-proto": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
-      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
-      "requires": {
-        "dunder-proto": "^1.0.0"
-      }
-    },
-    "has-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="
-    },
-    "has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "requires": {
-        "has-symbols": "^1.0.3"
-      }
-    },
-    "hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "requires": {
-        "function-bind": "^1.1.2"
-      }
-    },
-    "he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
-    },
-    "hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "requires": {
-        "react-is": "^16.7.0"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        }
-      }
-    },
-    "hoopy": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
-      "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ=="
-    },
-    "hpack.js": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
-      "requires": {
-        "inherits": "^2.0.1",
-        "obuf": "^1.0.0",
-        "readable-stream": "^2.0.1",
-        "wbuf": "^1.1.0"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-        },
-        "readable-stream": {
-          "version": "2.3.8",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-          "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        }
-      }
-    },
-    "html-encoding-sniffer": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
-      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
-      "requires": {
-        "whatwg-encoding": "^1.0.5"
-      }
-    },
-    "html-entities": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",
-      "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ=="
-    },
-    "html-escaper": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
-    },
-    "html-minifier-terser": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
-      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
-      "requires": {
-        "camel-case": "^4.1.2",
-        "clean-css": "^5.2.2",
-        "commander": "^8.3.0",
-        "he": "^1.2.0",
-        "param-case": "^3.0.4",
-        "relateurl": "^0.2.7",
-        "terser": "^5.10.0"
-      }
-    },
-    "html-webpack-plugin": {
-      "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz",
-      "integrity": "sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg==",
-      "requires": {
-        "@types/html-minifier-terser": "^6.0.0",
-        "html-minifier-terser": "^6.0.2",
-        "lodash": "^4.17.21",
-        "pretty-error": "^4.0.0",
-        "tapable": "^2.0.0"
-      }
-    },
-    "htmlparser2": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
-      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
-      "requires": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.0.0",
-        "domutils": "^2.5.2",
-        "entities": "^2.0.0"
-      }
-    },
-    "http-deceiver": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw=="
-    },
-    "http-errors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "requires": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
-      }
-    },
-    "http-parser-js": {
-      "version": "0.5.10",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
-      "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA=="
-    },
-    "http-proxy": {
-      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
-      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
-      "requires": {
-        "eventemitter3": "^4.0.0",
-        "follow-redirects": "^1.0.0",
-        "requires-port": "^1.0.0"
-      }
-    },
-    "http-proxy-agent": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
-      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
-      "requires": {
-        "@tootallnate/once": "1",
-        "agent-base": "6",
-        "debug": "4"
-      }
-    },
-    "http-proxy-middleware": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-3.0.5.tgz",
-      "integrity": "sha512-GLZZm1X38BPY4lkXA01jhwxvDoOkkXqjgVyUzVxiEK4iuRu03PZoYHhHRwxnfhQMDuaxi3vVri0YgSro/1oWqg==",
-      "requires": {
-        "@types/http-proxy": "^1.17.15",
-        "debug": "^4.3.6",
-        "http-proxy": "^1.18.1",
-        "is-glob": "^4.0.3",
-        "is-plain-object": "^5.0.0",
-        "micromatch": "^4.0.8"
-      }
-    },
-    "https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "requires": {
-        "agent-base": "6",
-        "debug": "4"
-      }
-    },
-    "human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
-    },
-    "iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "requires": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      }
-    },
-    "icss-utils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "requires": {}
-    },
-    "idb": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
-      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
-    },
-    "identity-obj-proxy": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
-      "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
-      "requires": {
-        "harmony-reflect": "^1.4.6"
-      }
-    },
-    "ignore": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
-      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="
-    },
-    "immer": {
-      "version": "9.0.21",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
-      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA=="
-    },
-    "import-fresh": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
-      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "requires": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
-      },
-      "dependencies": {
-        "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=="
-        }
-      }
-    },
-    "import-local": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
-      "integrity": "sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==",
-      "requires": {
-        "pkg-dir": "^4.2.0",
-        "resolve-cwd": "^3.0.0"
-      }
-    },
-    "imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="
-    },
-    "indent-string": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="
-    },
-    "inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "requires": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-    },
-    "ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
-    },
-    "internal-slot": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
-      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
-      "requires": {
-        "es-errors": "^1.3.0",
-        "hasown": "^2.0.2",
-        "side-channel": "^1.1.0"
-      }
-    },
-    "ipaddr.js": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
-      "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA=="
-    },
-    "is-array-buffer": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
-      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "get-intrinsic": "^1.2.6"
-      }
-    },
-    "is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
-    },
-    "is-async-function": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
-      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
-      "requires": {
-        "async-function": "^1.0.0",
-        "call-bound": "^1.0.3",
-        "get-proto": "^1.0.1",
-        "has-tostringtag": "^1.0.2",
-        "safe-regex-test": "^1.1.0"
-      }
-    },
-    "is-bigint": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
-      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
-      "requires": {
-        "has-bigints": "^1.0.2"
-      }
-    },
-    "is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "requires": {
-        "binary-extensions": "^2.0.0"
-      }
-    },
-    "is-boolean-object": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
-      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
-      "requires": {
-        "call-bound": "^1.0.3",
-        "has-tostringtag": "^1.0.2"
-      }
-    },
-    "is-callable": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA=="
-    },
-    "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==",
-      "requires": {
-        "hasown": "^2.0.2"
-      }
-    },
-    "is-data-view": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
-      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
-      "requires": {
-        "call-bound": "^1.0.2",
-        "get-intrinsic": "^1.2.6",
-        "is-typed-array": "^1.1.13"
-      }
-    },
-    "is-date-object": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
-      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
-      "requires": {
-        "call-bound": "^1.0.2",
-        "has-tostringtag": "^1.0.2"
-      }
-    },
-    "is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ=="
-    },
-    "is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
-    },
-    "is-finalizationregistry": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
-      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
-      "requires": {
-        "call-bound": "^1.0.3"
-      }
-    },
-    "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=="
-    },
-    "is-generator-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
-      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ=="
-    },
-    "is-generator-function": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
-      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
-      "requires": {
-        "call-bound": "^1.0.3",
-        "get-proto": "^1.0.0",
-        "has-tostringtag": "^1.0.2",
-        "safe-regex-test": "^1.1.0"
-      }
-    },
-    "is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "requires": {
-        "is-extglob": "^2.1.1"
-      }
-    },
-    "is-map": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
-      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw=="
-    },
-    "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=="
-    },
-    "is-negative-zero": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
-      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw=="
-    },
-    "is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
-    },
-    "is-number-object": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
-      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
-      "requires": {
-        "call-bound": "^1.0.3",
-        "has-tostringtag": "^1.0.2"
-      }
-    },
-    "is-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg=="
-    },
-    "is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ=="
-    },
-    "is-plain-obj": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA=="
-    },
-    "is-plain-object": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
-    },
-    "is-potential-custom-element-name": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ=="
-    },
-    "is-regex": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
-      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
-      "requires": {
-        "call-bound": "^1.0.2",
-        "gopd": "^1.2.0",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.2"
-      }
-    },
-    "is-regexp": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
-      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA=="
-    },
-    "is-root": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
-      "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg=="
-    },
-    "is-set": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
-      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg=="
-    },
-    "is-shared-array-buffer": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
-      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
-      "requires": {
-        "call-bound": "^1.0.3"
-      }
-    },
-    "is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg=="
-    },
-    "is-string": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
-      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
-      "requires": {
-        "call-bound": "^1.0.3",
-        "has-tostringtag": "^1.0.2"
-      }
-    },
-    "is-symbol": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
-      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
-      "requires": {
-        "call-bound": "^1.0.2",
-        "has-symbols": "^1.1.0",
-        "safe-regex-test": "^1.1.0"
-      }
-    },
-    "is-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
-      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
-      "requires": {
-        "which-typed-array": "^1.1.16"
-      }
-    },
-    "is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
-    },
-    "is-weakmap": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
-      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w=="
-    },
-    "is-weakref": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
-      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
-      "requires": {
-        "call-bound": "^1.0.3"
-      }
-    },
-    "is-weakset": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
-      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
-      "requires": {
-        "call-bound": "^1.0.3",
-        "get-intrinsic": "^1.2.6"
-      }
-    },
-    "is-wsl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-      "requires": {
-        "is-docker": "^2.0.0"
-      }
-    },
-    "isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
-    },
-    "isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
-    },
-    "istanbul-lib-coverage": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
-      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg=="
-    },
-    "istanbul-lib-instrument": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
-      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
-      "requires": {
-        "@babel/core": "^7.12.3",
-        "@babel/parser": "^7.14.7",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-coverage": "^3.2.0",
-        "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
-        }
-      }
-    },
-    "istanbul-lib-report": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
-      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
-      "requires": {
-        "istanbul-lib-coverage": "^3.0.0",
-        "make-dir": "^4.0.0",
-        "supports-color": "^7.1.0"
-      },
-      "dependencies": {
-        "make-dir": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
-          "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
-          "requires": {
-            "semver": "^7.5.3"
-          }
-        }
-      }
-    },
-    "istanbul-lib-source-maps": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
-      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
-      "requires": {
-        "debug": "^4.1.1",
-        "istanbul-lib-coverage": "^3.0.0",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "istanbul-reports": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.7.tgz",
-      "integrity": "sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==",
-      "requires": {
-        "html-escaper": "^2.0.0",
-        "istanbul-lib-report": "^3.0.0"
-      }
-    },
-    "iterator.prototype": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
-      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
-      "requires": {
-        "define-data-property": "^1.1.4",
-        "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.6",
-        "get-proto": "^1.0.0",
-        "has-symbols": "^1.1.0",
-        "set-function-name": "^2.0.2"
-      }
-    },
-    "jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "requires": {
-        "@isaacs/cliui": "^8.0.2",
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
-    "jake": {
-      "version": "10.9.4",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
-      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
-      "requires": {
-        "async": "^3.2.6",
-        "filelist": "^1.0.4",
-        "picocolors": "^1.1.1"
-      }
-    },
-    "jest": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
-      "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
-      "requires": {
-        "@jest/core": "^27.5.1",
-        "import-local": "^3.0.2",
-        "jest-cli": "^27.5.1"
-      }
-    },
-    "jest-changed-files": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.5.1.tgz",
-      "integrity": "sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==",
-      "requires": {
-        "@jest/types": "^27.5.1",
-        "execa": "^5.0.0",
-        "throat": "^6.0.1"
-      }
-    },
-    "jest-circus": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-27.5.1.tgz",
-      "integrity": "sha512-D95R7x5UtlMA5iBYsOHFFbMD/GVA4R/Kdq15f7xYWUfWHBto9NYRsOvnSauTgdF+ogCpJ4tyKOXhUifxS65gdw==",
-      "requires": {
-        "@jest/environment": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "co": "^4.6.0",
-        "dedent": "^0.7.0",
-        "expect": "^27.5.1",
-        "is-generator-fn": "^2.0.0",
-        "jest-each": "^27.5.1",
-        "jest-matcher-utils": "^27.5.1",
-        "jest-message-util": "^27.5.1",
-        "jest-runtime": "^27.5.1",
-        "jest-snapshot": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "pretty-format": "^27.5.1",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.3",
-        "throat": "^6.0.1"
-      }
-    },
-    "jest-cli": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-27.5.1.tgz",
-      "integrity": "sha512-Hc6HOOwYq4/74/c62dEE3r5elx8wjYqxY0r0G/nFrLDPMFRu6RA/u8qINOIkvhxG7mMQ5EJsOGfRpI8L6eFUVw==",
-      "requires": {
-        "@jest/core": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "chalk": "^4.0.0",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.9",
-        "import-local": "^3.0.2",
-        "jest-config": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jest-validate": "^27.5.1",
-        "prompts": "^2.0.1",
-        "yargs": "^16.2.0"
-      }
-    },
-    "jest-config": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-27.5.1.tgz",
-      "integrity": "sha512-5sAsjm6tGdsVbW9ahcChPAFCk4IlkQUknH5AvKjuLTSlcO/wCZKyFdn7Rg0EkC+OGgWODEy2hDpWB1PgzH0JNA==",
-      "requires": {
-        "@babel/core": "^7.8.0",
-        "@jest/test-sequencer": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "babel-jest": "^27.5.1",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "deepmerge": "^4.2.2",
-        "glob": "^7.1.1",
-        "graceful-fs": "^4.2.9",
-        "jest-circus": "^27.5.1",
-        "jest-environment-jsdom": "^27.5.1",
-        "jest-environment-node": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "jest-jasmine2": "^27.5.1",
-        "jest-regex-util": "^27.5.1",
-        "jest-resolve": "^27.5.1",
-        "jest-runner": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jest-validate": "^27.5.1",
-        "micromatch": "^4.0.4",
-        "parse-json": "^5.2.0",
-        "pretty-format": "^27.5.1",
-        "slash": "^3.0.0",
-        "strip-json-comments": "^3.1.1"
-      }
-    },
-    "jest-diff": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-27.5.1.tgz",
-      "integrity": "sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==",
-      "requires": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      }
-    },
-    "jest-docblock": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-27.5.1.tgz",
-      "integrity": "sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==",
-      "requires": {
-        "detect-newline": "^3.0.0"
-      }
-    },
-    "jest-each": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-27.5.1.tgz",
-      "integrity": "sha512-1Ff6p+FbhT/bXQnEouYy00bkNSY7OUpfIcmdl8vZ31A1UUaurOLPA8a8BbJOF2RDUElwJhmeaV7LnagI+5UwNQ==",
-      "requires": {
-        "@jest/types": "^27.5.1",
-        "chalk": "^4.0.0",
-        "jest-get-type": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      }
-    },
-    "jest-environment-jsdom": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz",
-      "integrity": "sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==",
-      "requires": {
-        "@jest/environment": "^27.5.1",
-        "@jest/fake-timers": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "jest-mock": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jsdom": "^16.6.0"
-      }
-    },
-    "jest-environment-node": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-27.5.1.tgz",
-      "integrity": "sha512-Jt4ZUnxdOsTGwSRAfKEnE6BcwsSPNOijjwifq5sDFSA2kesnXTvNqKHYgM0hDq3549Uf/KzdXNYn4wMZJPlFLw==",
-      "requires": {
-        "@jest/environment": "^27.5.1",
-        "@jest/fake-timers": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "jest-mock": "^27.5.1",
-        "jest-util": "^27.5.1"
-      }
-    },
-    "jest-get-type": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz",
-      "integrity": "sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw=="
-    },
-    "jest-haste-map": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.5.1.tgz",
-      "integrity": "sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==",
-      "requires": {
-        "@jest/types": "^27.5.1",
-        "@types/graceful-fs": "^4.1.2",
-        "@types/node": "*",
-        "anymatch": "^3.0.3",
-        "fb-watchman": "^2.0.0",
-        "fsevents": "^2.3.2",
-        "graceful-fs": "^4.2.9",
-        "jest-regex-util": "^27.5.1",
-        "jest-serializer": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jest-worker": "^27.5.1",
-        "micromatch": "^4.0.4",
-        "walker": "^1.0.7"
-      }
-    },
-    "jest-jasmine2": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-27.5.1.tgz",
-      "integrity": "sha512-jtq7VVyG8SqAorDpApwiJJImd0V2wv1xzdheGHRGyuT7gZm6gG47QEskOlzsN1PG/6WNaCo5pmwMHDf3AkG2pQ==",
-      "requires": {
-        "@jest/environment": "^27.5.1",
-        "@jest/source-map": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "co": "^4.6.0",
-        "expect": "^27.5.1",
-        "is-generator-fn": "^2.0.0",
-        "jest-each": "^27.5.1",
-        "jest-matcher-utils": "^27.5.1",
-        "jest-message-util": "^27.5.1",
-        "jest-runtime": "^27.5.1",
-        "jest-snapshot": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "pretty-format": "^27.5.1",
-        "throat": "^6.0.1"
-      }
-    },
-    "jest-leak-detector": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-27.5.1.tgz",
-      "integrity": "sha512-POXfWAMvfU6WMUXftV4HolnJfnPOGEu10fscNCA76KBpRRhcMN2c8d3iT2pxQS3HLbA+5X4sOUPzYO2NUyIlHQ==",
-      "requires": {
-        "jest-get-type": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      }
-    },
-    "jest-matcher-utils": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz",
-      "integrity": "sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==",
-      "requires": {
-        "chalk": "^4.0.0",
-        "jest-diff": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "pretty-format": "^27.5.1"
-      }
-    },
-    "jest-message-util": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-27.5.1.tgz",
-      "integrity": "sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==",
-      "requires": {
-        "@babel/code-frame": "^7.12.13",
-        "@jest/types": "^27.5.1",
-        "@types/stack-utils": "^2.0.0",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.9",
-        "micromatch": "^4.0.4",
-        "pretty-format": "^27.5.1",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.3"
-      }
-    },
-    "jest-mock": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-27.5.1.tgz",
-      "integrity": "sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==",
-      "requires": {
-        "@jest/types": "^27.5.1",
-        "@types/node": "*"
-      }
-    },
-    "jest-pnp-resolver": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
-      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
-      "requires": {}
-    },
-    "jest-regex-util": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.5.1.tgz",
-      "integrity": "sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg=="
-    },
-    "jest-resolve": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-27.5.1.tgz",
-      "integrity": "sha512-FFDy8/9E6CV83IMbDpcjOhumAQPDyETnU2KZ1O98DwTnz8AOBsW/Xv3GySr1mOZdItLR+zDZ7I/UdTFbgSOVCw==",
-      "requires": {
-        "@jest/types": "^27.5.1",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^27.5.1",
-        "jest-pnp-resolver": "^1.2.2",
-        "jest-util": "^27.5.1",
-        "jest-validate": "^27.5.1",
-        "resolve": "^1.20.0",
-        "resolve.exports": "^1.1.0",
-        "slash": "^3.0.0"
-      }
-    },
-    "jest-resolve-dependencies": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz",
-      "integrity": "sha512-QQOOdY4PE39iawDn5rzbIePNigfe5B9Z91GDD1ae/xNDlu9kaat8QQ5EKnNmVWPV54hUdxCVwwj6YMgR2O7IOg==",
-      "requires": {
-        "@jest/types": "^27.5.1",
-        "jest-regex-util": "^27.5.1",
-        "jest-snapshot": "^27.5.1"
-      }
-    },
-    "jest-runner": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-27.5.1.tgz",
-      "integrity": "sha512-g4NPsM4mFCOwFKXO4p/H/kWGdJp9V8kURY2lX8Me2drgXqG7rrZAx5kv+5H7wtt/cdFIjhqYx1HrlqWHaOvDaQ==",
-      "requires": {
-        "@jest/console": "^27.5.1",
-        "@jest/environment": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/transform": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "emittery": "^0.8.1",
-        "graceful-fs": "^4.2.9",
-        "jest-docblock": "^27.5.1",
-        "jest-environment-jsdom": "^27.5.1",
-        "jest-environment-node": "^27.5.1",
-        "jest-haste-map": "^27.5.1",
-        "jest-leak-detector": "^27.5.1",
-        "jest-message-util": "^27.5.1",
-        "jest-resolve": "^27.5.1",
-        "jest-runtime": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jest-worker": "^27.5.1",
-        "source-map-support": "^0.5.6",
-        "throat": "^6.0.1"
-      }
-    },
-    "jest-runtime": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-27.5.1.tgz",
-      "integrity": "sha512-o7gxw3Gf+H2IGt8fv0RiyE1+r83FJBRruoA+FXrlHw6xEyBsU8ugA6IPfTdVyA0w8HClpbK+DGJxH59UrNMx8A==",
-      "requires": {
-        "@jest/environment": "^27.5.1",
-        "@jest/fake-timers": "^27.5.1",
-        "@jest/globals": "^27.5.1",
-        "@jest/source-map": "^27.5.1",
-        "@jest/test-result": "^27.5.1",
-        "@jest/transform": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "chalk": "^4.0.0",
-        "cjs-module-lexer": "^1.0.0",
-        "collect-v8-coverage": "^1.0.0",
-        "execa": "^5.0.0",
-        "glob": "^7.1.3",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^27.5.1",
-        "jest-message-util": "^27.5.1",
-        "jest-mock": "^27.5.1",
-        "jest-regex-util": "^27.5.1",
-        "jest-resolve": "^27.5.1",
-        "jest-snapshot": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "slash": "^3.0.0",
-        "strip-bom": "^4.0.0"
-      }
-    },
-    "jest-serializer": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.5.1.tgz",
-      "integrity": "sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==",
-      "requires": {
-        "@types/node": "*",
-        "graceful-fs": "^4.2.9"
-      }
-    },
-    "jest-snapshot": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-27.5.1.tgz",
-      "integrity": "sha512-yYykXI5a0I31xX67mgeLw1DZ0bJB+gpq5IpSuCAoyDi0+BhgU/RIrL+RTzDmkNTchvDFWKP8lp+w/42Z3us5sA==",
-      "requires": {
-        "@babel/core": "^7.7.2",
-        "@babel/generator": "^7.7.2",
-        "@babel/plugin-syntax-typescript": "^7.7.2",
-        "@babel/traverse": "^7.7.2",
-        "@babel/types": "^7.0.0",
-        "@jest/transform": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/babel__traverse": "^7.0.4",
-        "@types/prettier": "^2.1.5",
-        "babel-preset-current-node-syntax": "^1.0.0",
-        "chalk": "^4.0.0",
-        "expect": "^27.5.1",
-        "graceful-fs": "^4.2.9",
-        "jest-diff": "^27.5.1",
-        "jest-get-type": "^27.5.1",
-        "jest-haste-map": "^27.5.1",
-        "jest-matcher-utils": "^27.5.1",
-        "jest-message-util": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "natural-compare": "^1.4.0",
-        "pretty-format": "^27.5.1",
-        "semver": "^7.3.2"
-      }
-    },
-    "jest-util": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.5.1.tgz",
-      "integrity": "sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==",
-      "requires": {
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "graceful-fs": "^4.2.9",
-        "picomatch": "^2.2.3"
-      }
-    },
-    "jest-validate": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-27.5.1.tgz",
-      "integrity": "sha512-thkNli0LYTmOI1tDB3FI1S1RTp/Bqyd9pTarJwL87OIBFuqEb5Apv5EaApEudYg4g86e3CT6kM0RowkhtEnCBQ==",
-      "requires": {
-        "@jest/types": "^27.5.1",
-        "camelcase": "^6.2.0",
-        "chalk": "^4.0.0",
-        "jest-get-type": "^27.5.1",
-        "leven": "^3.1.0",
-        "pretty-format": "^27.5.1"
-      }
-    },
-    "jest-watch-typeahead": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/jest-watch-typeahead/-/jest-watch-typeahead-1.1.0.tgz",
-      "integrity": "sha512-Va5nLSJTN7YFtC2jd+7wsoe1pNe5K4ShLux/E5iHEwlB9AxaxmggY7to9KUqKojhaJw3aXqt5WAb4jGPOolpEw==",
-      "requires": {
-        "ansi-escapes": "^4.3.1",
-        "chalk": "^4.0.0",
-        "jest-regex-util": "^28.0.0",
-        "jest-watcher": "^28.0.0",
-        "slash": "^4.0.0",
-        "string-length": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "dependencies": {
-        "@jest/console": {
-          "version": "28.1.3",
-          "resolved": "https://registry.npmjs.org/@jest/console/-/console-28.1.3.tgz",
-          "integrity": "sha512-QPAkP5EwKdK/bxIr6C1I4Vs0rm2nHiANzj/Z5X2JQkrZo6IqvC4ldZ9K95tF0HdidhA8Bo6egxSzUFPYKcEXLw==",
-          "requires": {
-            "@jest/types": "^28.1.3",
-            "@types/node": "*",
-            "chalk": "^4.0.0",
-            "jest-message-util": "^28.1.3",
-            "jest-util": "^28.1.3",
-            "slash": "^3.0.0"
-          },
-          "dependencies": {
-            "slash": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-              "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
-            }
-          }
-        },
-        "@jest/test-result": {
-          "version": "28.1.3",
-          "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-28.1.3.tgz",
-          "integrity": "sha512-kZAkxnSE+FqE8YjW8gNuoVkkC9I7S1qmenl8sGcDOLropASP+BkcGKwhXoyqQuGOGeYY0y/ixjrd/iERpEXHNg==",
-          "requires": {
-            "@jest/console": "^28.1.3",
-            "@jest/types": "^28.1.3",
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "collect-v8-coverage": "^1.0.0"
-          }
-        },
-        "@jest/types": {
-          "version": "28.1.3",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-28.1.3.tgz",
-          "integrity": "sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==",
-          "requires": {
-            "@jest/schemas": "^28.1.3",
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^17.0.8",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/yargs": {
-          "version": "17.0.33",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
-          "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
-          "requires": {
-            "@types/yargs-parser": "*"
-          }
-        },
-        "ansi-styles": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
-        },
-        "emittery": {
-          "version": "0.10.2",
-          "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.10.2.tgz",
-          "integrity": "sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw=="
-        },
-        "jest-message-util": {
-          "version": "28.1.3",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-28.1.3.tgz",
-          "integrity": "sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==",
-          "requires": {
-            "@babel/code-frame": "^7.12.13",
-            "@jest/types": "^28.1.3",
-            "@types/stack-utils": "^2.0.0",
-            "chalk": "^4.0.0",
-            "graceful-fs": "^4.2.9",
-            "micromatch": "^4.0.4",
-            "pretty-format": "^28.1.3",
-            "slash": "^3.0.0",
-            "stack-utils": "^2.0.3"
-          },
-          "dependencies": {
-            "slash": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-              "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
-            }
-          }
-        },
-        "jest-regex-util": {
-          "version": "28.0.2",
-          "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-28.0.2.tgz",
-          "integrity": "sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw=="
-        },
-        "jest-util": {
-          "version": "28.1.3",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-28.1.3.tgz",
-          "integrity": "sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==",
-          "requires": {
-            "@jest/types": "^28.1.3",
-            "@types/node": "*",
-            "chalk": "^4.0.0",
-            "ci-info": "^3.2.0",
-            "graceful-fs": "^4.2.9",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "jest-watcher": {
-          "version": "28.1.3",
-          "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-28.1.3.tgz",
-          "integrity": "sha512-t4qcqj9hze+jviFPUN3YAtAEeFnr/azITXQEMARf5cMwKY2SMBRnCQTXLixTl20OR6mLh9KLMrgVJgJISym+1g==",
-          "requires": {
-            "@jest/test-result": "^28.1.3",
-            "@jest/types": "^28.1.3",
-            "@types/node": "*",
-            "ansi-escapes": "^4.2.1",
-            "chalk": "^4.0.0",
-            "emittery": "^0.10.2",
-            "jest-util": "^28.1.3",
-            "string-length": "^4.0.1"
-          },
-          "dependencies": {
-            "string-length": {
-              "version": "4.0.2",
-              "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
-              "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
-              "requires": {
-                "char-regex": "^1.0.2",
-                "strip-ansi": "^6.0.0"
-              }
-            },
-            "strip-ansi": {
-              "version": "6.0.1",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-              "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-              "requires": {
-                "ansi-regex": "^5.0.1"
-              }
-            }
-          }
-        },
-        "pretty-format": {
-          "version": "28.1.3",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz",
-          "integrity": "sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==",
-          "requires": {
-            "@jest/schemas": "^28.1.3",
-            "ansi-regex": "^5.0.1",
-            "ansi-styles": "^5.0.0",
-            "react-is": "^18.0.0"
-          }
-        },
-        "react-is": {
-          "version": "18.3.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-          "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
-        },
-        "slash": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-          "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew=="
-        },
-        "string-length": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
-          "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
-          "requires": {
-            "char-regex": "^2.0.0",
-            "strip-ansi": "^7.0.1"
-          },
-          "dependencies": {
-            "char-regex": {
-              "version": "2.0.2",
-              "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.2.tgz",
-              "integrity": "sha512-cbGOjAptfM2LVmWhwRFHEKTPkLwNddVmuqYZQt895yXwAsWsXObCG+YN4DGQ/JBtT4GP1a1lPPdio2z413LmTg=="
-            }
-          }
-        },
-        "strip-ansi": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-          "requires": {
-            "ansi-regex": "^6.0.1"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "6.1.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-              "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="
-            }
-          }
-        }
-      }
-    },
-    "jest-watcher": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-27.5.1.tgz",
-      "integrity": "sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==",
-      "requires": {
-        "@jest/test-result": "^27.5.1",
-        "@jest/types": "^27.5.1",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "jest-util": "^27.5.1",
-        "string-length": "^4.0.1"
-      }
-    },
-    "jest-worker": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
-      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "requires": {
-        "@types/node": "*",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^8.0.0"
-      },
-      "dependencies": {
-        "supports-color": {
-          "version": "8.1.1",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="
-    },
-    "js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "requires": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
-      }
-    },
-    "jsdom": {
-      "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
-      "integrity": "sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==",
-      "requires": {
-        "abab": "^2.0.5",
-        "acorn": "^8.2.4",
-        "acorn-globals": "^6.0.0",
-        "cssom": "^0.4.4",
-        "cssstyle": "^2.3.0",
-        "data-urls": "^2.0.0",
-        "decimal.js": "^10.2.1",
-        "domexception": "^2.0.1",
-        "escodegen": "^2.0.0",
-        "form-data": "^3.0.0",
-        "html-encoding-sniffer": "^2.0.1",
-        "http-proxy-agent": "^4.0.1",
-        "https-proxy-agent": "^5.0.0",
-        "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.0",
-        "parse5": "6.0.1",
-        "saxes": "^5.0.1",
-        "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.0.0",
-        "w3c-hr-time": "^1.0.2",
-        "w3c-xmlserializer": "^2.0.0",
-        "webidl-conversions": "^6.1.0",
-        "whatwg-encoding": "^1.0.5",
-        "whatwg-mimetype": "^2.3.0",
-        "whatwg-url": "^8.5.0",
-        "ws": "^7.4.6",
-        "xml-name-validator": "^3.0.0"
-      }
-    },
-    "jsesc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
-      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="
-    },
-    "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=="
-    },
-    "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=="
-    },
-    "json-schema": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
-      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
-    },
-    "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=="
-    },
-    "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=="
-    },
-    "json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
-    },
-    "jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "requires": {
-        "graceful-fs": "^4.1.6",
-        "universalify": "^2.0.0"
-      }
-    },
-    "jsonpath": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/jsonpath/-/jsonpath-1.1.1.tgz",
-      "integrity": "sha512-l6Cg7jRpixfbgoWgkrl77dgEj8RPvND0wMH6TwQmi9Qs4TFfS9u5cUFnbeKTwj5ga5Y3BTGGNI28k117LJ009w==",
-      "requires": {
-        "esprima": "1.2.2",
-        "static-eval": "2.0.2",
-        "underscore": "1.12.1"
-      },
-      "dependencies": {
-        "esprima": {
-          "version": "1.2.2",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.2.2.tgz",
-          "integrity": "sha512-+JpPZam9w5DuJ3Q67SqsMGtiHKENSMRVoxvArfJZK01/BfLEObtZ6orJa/MtoGNR/rfMgp5837T41PAmTwAv/A=="
-        }
-      }
-    },
-    "jsonpointer": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
-      "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="
-    },
-    "jsx-ast-utils": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
-      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
-      "requires": {
-        "array-includes": "^3.1.6",
-        "array.prototype.flat": "^1.3.1",
-        "object.assign": "^4.1.4",
-        "object.values": "^1.1.6"
-      }
-    },
-    "keyv": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
-      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-      "requires": {
-        "json-buffer": "3.0.1"
-      }
-    },
-    "kind-of": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
-    },
-    "kleur": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
-    },
-    "klona": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
-      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA=="
-    },
-    "language-subtag-registry": {
-      "version": "0.3.23",
-      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
-      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ=="
-    },
-    "language-tags": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
-      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
-      "requires": {
-        "language-subtag-registry": "^0.3.20"
-      }
-    },
-    "launch-editor": {
-      "version": "2.11.1",
-      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.11.1.tgz",
-      "integrity": "sha512-SEET7oNfgSaB6Ym0jufAdCeo3meJVeCaaDyzRygy0xsp2BFKCprcfHljTq4QkzTLUxEKkFK6OK4811YM2oSrRg==",
-      "requires": {
-        "picocolors": "^1.1.1",
-        "shell-quote": "^1.8.3"
-      }
-    },
-    "leven": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
-      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A=="
-    },
-    "levn": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-      "requires": {
-        "prelude-ls": "^1.2.1",
-        "type-check": "~0.4.0"
-      }
-    },
-    "lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="
-    },
-    "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=="
-    },
-    "loader-runner": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
-      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg=="
-    },
-    "loader-utils": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-      "requires": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
-      }
-    },
-    "locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "requires": {
-        "p-locate": "^4.1.0"
-      }
-    },
-    "lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
-    "lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
-    },
-    "lodash.memoize": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
-    },
-    "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=="
-    },
-    "lodash.sortby": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
-      "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
-    },
-    "lodash.uniq": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
-    },
-    "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==",
-      "requires": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      }
-    },
-    "lower-case": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
-      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-      "requires": {
-        "tslib": "^2.0.3"
-      }
-    },
-    "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==",
-      "requires": {
-        "yallist": "^3.0.2"
-      }
-    },
-    "lz-string": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
-      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="
-    },
-    "magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-      "requires": {
-        "sourcemap-codec": "^1.4.8"
-      }
-    },
-    "make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "requires": {
-        "semver": "^6.0.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
-        }
-      }
-    },
-    "makeerror": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
-      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
-      "requires": {
-        "tmpl": "1.0.5"
-      }
-    },
-    "math-intrinsics": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="
-    },
-    "mdn-data": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
-      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
-    },
-    "media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ=="
-    },
-    "memfs": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
-      "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
-      "requires": {
-        "fs-monkey": "^1.0.4"
-      }
-    },
-    "merge-descriptors": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
-      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ=="
-    },
-    "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=="
-    },
-    "merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
-    },
-    "methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w=="
-    },
-    "micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "requires": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      }
-    },
-    "mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
-    },
-    "mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
-    },
-    "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==",
-      "requires": {
-        "mime-db": "1.52.0"
-      }
-    },
-    "mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
-    },
-    "min-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
-    },
-    "mini-css-extract-plugin": {
-      "version": "2.9.4",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.4.tgz",
-      "integrity": "sha512-ZWYT7ln73Hptxqxk2DxPU9MmapXRhxkJD6tkSR04dnQxm8BGu2hzgKLugK5yySD97u/8yy7Ma7E76k9ZdvtjkQ==",
-      "requires": {
-        "schema-utils": "^4.0.0",
-        "tapable": "^2.2.1"
-      }
-    },
-    "minimalistic-assert": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
-    },
-    "minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "requires": {
-        "brace-expansion": "^1.1.7"
-      }
-    },
-    "minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
-    },
-    "minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="
-    },
-    "mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "requires": {
-        "minimist": "^1.2.6"
-      }
-    },
-    "ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
-    },
-    "multicast-dns": {
-      "version": "7.2.5",
-      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
-      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
-      "requires": {
-        "dns-packet": "^5.2.2",
-        "thunky": "^1.0.2"
-      }
-    },
-    "mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "requires": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
-    "nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="
-    },
-    "natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
-    },
-    "natural-compare-lite": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
-    },
-    "negotiator": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
-      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w=="
-    },
-    "neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
-    },
-    "no-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
-      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-      "requires": {
-        "lower-case": "^2.0.2",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node-forge": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
-      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA=="
-    },
-    "node-int64": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
-      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
-    },
-    "node-releases": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="
-    },
-    "normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
-    },
-    "normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="
-    },
-    "normalize-url": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A=="
-    },
-    "npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "requires": {
-        "path-key": "^3.0.0"
-      }
-    },
-    "nth-check": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-      "requires": {
-        "boolbase": "^1.0.0"
-      }
-    },
-    "nwsapi": {
-      "version": "2.2.21",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.21.tgz",
-      "integrity": "sha512-o6nIY3qwiSXl7/LuOU0Dmuctd34Yay0yeuZRLFmDPrrdHpXKFndPj3hM+YEPVHYC5fx2otBx4Ilc/gyYSAUaIA=="
-    },
-    "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=="
-    },
-    "object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
-    },
-    "object-inspect": {
-      "version": "1.13.4",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
-      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="
-    },
-    "object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
-    },
-    "object.assign": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
-      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0",
-        "has-symbols": "^1.1.0",
-        "object-keys": "^1.1.1"
-      }
-    },
-    "object.entries": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
-      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.1.1"
-      }
-    },
-    "object.fromentries": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
-      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
-      "requires": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0"
-      }
-    },
-    "object.getownpropertydescriptors": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.8.tgz",
-      "integrity": "sha512-qkHIGe4q0lSYMv0XI4SsBTJz3WaURhLvd0lKSgtVuOsJ2krg4SgMw3PIRQFMp07yi++UR3se2mkcLqsBNpBb/A==",
-      "requires": {
-        "array.prototype.reduce": "^1.0.6",
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0",
-        "gopd": "^1.0.1",
-        "safe-array-concat": "^1.1.2"
-      }
-    },
-    "object.groupby": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
-      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
-      "requires": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2"
-      }
-    },
-    "object.values": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
-      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0"
-      }
-    },
-    "obuf": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
-      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
-    },
-    "on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "requires": {
-        "ee-first": "1.1.1"
-      }
-    },
-    "on-headers": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz",
-      "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A=="
-    },
-    "once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "requires": {
-        "wrappy": "1"
-      }
-    },
-    "onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "requires": {
-        "mimic-fn": "^2.1.0"
-      }
-    },
-    "open": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
-      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
-      "requires": {
-        "define-lazy-prop": "^2.0.0",
-        "is-docker": "^2.1.1",
-        "is-wsl": "^2.2.0"
-      }
-    },
-    "optionator": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
-      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
-      "requires": {
-        "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"
-      }
-    },
-    "own-keys": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
-      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
-      "requires": {
-        "get-intrinsic": "^1.2.6",
-        "object-keys": "^1.1.1",
-        "safe-push-apply": "^1.0.0"
-      }
-    },
-    "p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "requires": {
-        "p-try": "^2.0.0"
-      }
-    },
-    "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==",
-      "requires": {
-        "p-limit": "^2.2.0"
-      }
-    },
-    "p-retry": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
-      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
-      "requires": {
-        "@types/retry": "0.12.0",
-        "retry": "^0.13.1"
-      }
-    },
-    "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=="
-    },
-    "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=="
-    },
-    "param-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
-      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-      "requires": {
-        "dot-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
-    },
-    "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==",
-      "requires": {
-        "callsites": "^3.0.0"
-      }
-    },
-    "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==",
-      "requires": {
-        "@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"
-      }
-    },
-    "parse5": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
-    },
-    "parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
-    },
-    "pascal-case": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
-      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-      "requires": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
-    },
-    "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=="
-    },
-    "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=="
-    },
-    "path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
-    },
-    "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=="
-    },
-    "path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "requires": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "dependencies": {
-        "lru-cache": {
-          "version": "10.4.3",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-          "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
-        }
-      }
-    },
-    "path-to-regexp": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
-      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ=="
-    },
-    "path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
-    },
-    "performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
-    },
-    "picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
-    },
-    "picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
-    },
-    "pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
-    },
-    "pirates": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="
-    },
-    "pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "requires": {
-        "find-up": "^4.0.0"
-      }
-    },
-    "pkg-up": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
-      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
-      "requires": {
-        "find-up": "^3.0.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-          "requires": {
-            "locate-path": "^3.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-          "requires": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-          "requires": {
-            "p-limit": "^2.0.0"
-          }
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ=="
-        }
-      }
-    },
-    "possible-typed-array-names": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
-      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg=="
-    },
-    "postcss": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-      "requires": {
-        "nanoid": "^3.3.11",
-        "picocolors": "^1.1.1",
-        "source-map-js": "^1.2.1"
-      }
-    },
-    "postcss-attribute-case-insensitive": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz",
-      "integrity": "sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==",
-      "requires": {
-        "postcss-selector-parser": "^6.0.10"
-      }
-    },
-    "postcss-browser-comments": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz",
-      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==",
-      "requires": {}
-    },
-    "postcss-calc": {
-      "version": "8.2.4",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
-      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
-      "requires": {
-        "postcss-selector-parser": "^6.0.9",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-clamp": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-clamp/-/postcss-clamp-4.1.0.tgz",
-      "integrity": "sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-color-functional-notation": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz",
-      "integrity": "sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-color-hex-alpha": {
-      "version": "8.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-8.0.4.tgz",
-      "integrity": "sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-color-rebeccapurple": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.1.1.tgz",
-      "integrity": "sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-colormin": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
-      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "caniuse-api": "^3.0.0",
-        "colord": "^2.9.1",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-convert-values": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
-      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-custom-media": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.2.tgz",
-      "integrity": "sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-custom-properties": {
-      "version": "12.1.11",
-      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-12.1.11.tgz",
-      "integrity": "sha512-0IDJYhgU8xDv1KY6+VgUwuQkVtmYzRwu+dMjnmdMafXYv86SWqfxkc7qdDvWS38vsjaEtv8e0vGOUQrAiMBLpQ==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-custom-selectors": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-6.0.3.tgz",
-      "integrity": "sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==",
-      "requires": {
-        "postcss-selector-parser": "^6.0.4"
-      }
-    },
-    "postcss-dir-pseudo-class": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.5.tgz",
-      "integrity": "sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==",
-      "requires": {
-        "postcss-selector-parser": "^6.0.10"
-      }
-    },
-    "postcss-discard-comments": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
-      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "requires": {}
-    },
-    "postcss-discard-duplicates": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
-      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "requires": {}
-    },
-    "postcss-discard-empty": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
-      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "requires": {}
-    },
-    "postcss-discard-overridden": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
-      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "requires": {}
-    },
-    "postcss-double-position-gradients": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.2.tgz",
-      "integrity": "sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==",
-      "requires": {
-        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-env-function": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-4.0.6.tgz",
-      "integrity": "sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-flexbugs-fixes": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
-      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
-      "requires": {}
-    },
-    "postcss-focus-visible": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-6.0.4.tgz",
-      "integrity": "sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==",
-      "requires": {
-        "postcss-selector-parser": "^6.0.9"
-      }
-    },
-    "postcss-focus-within": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-5.0.4.tgz",
-      "integrity": "sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==",
-      "requires": {
-        "postcss-selector-parser": "^6.0.9"
-      }
-    },
-    "postcss-font-variant": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
-      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
-      "requires": {}
-    },
-    "postcss-gap-properties": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz",
-      "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==",
-      "requires": {}
-    },
-    "postcss-image-set-function": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-4.0.7.tgz",
-      "integrity": "sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "requires": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      }
-    },
-    "postcss-initial": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
-      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
-      "requires": {}
-    },
-    "postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "requires": {
-        "camelcase-css": "^2.0.1"
-      }
-    },
-    "postcss-lab-function": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz",
-      "integrity": "sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==",
-      "requires": {
-        "@csstools/postcss-progressive-custom-properties": "^1.1.0",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "requires": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "dependencies": {
-        "lilconfig": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-          "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="
-        },
-        "yaml": {
-          "version": "2.8.1",
-          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
-          "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw=="
-        }
-      }
-    },
-    "postcss-loader": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
-      "integrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==",
-      "requires": {
-        "cosmiconfig": "^7.0.0",
-        "klona": "^2.0.5",
-        "semver": "^7.3.5"
-      }
-    },
-    "postcss-logical": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
-      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
-      "requires": {}
-    },
-    "postcss-media-minmax": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
-      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
-      "requires": {}
-    },
-    "postcss-merge-longhand": {
-      "version": "5.1.7",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
-      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0",
-        "stylehacks": "^5.1.1"
-      }
-    },
-    "postcss-merge-rules": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
-      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "caniuse-api": "^3.0.0",
-        "cssnano-utils": "^3.1.0",
-        "postcss-selector-parser": "^6.0.5"
-      }
-    },
-    "postcss-minify-font-values": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
-      "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-minify-gradients": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
-      "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
-      "requires": {
-        "colord": "^2.9.1",
-        "cssnano-utils": "^3.1.0",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-minify-params": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
-      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "cssnano-utils": "^3.1.0",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-minify-selectors": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
-      "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
-      "requires": {
-        "postcss-selector-parser": "^6.0.5"
-      }
-    },
-    "postcss-modules-extract-imports": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
-      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
-      "requires": {}
-    },
-    "postcss-modules-local-by-default": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz",
-      "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
-      "requires": {
-        "icss-utils": "^5.0.0",
-        "postcss-selector-parser": "^7.0.0",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "dependencies": {
-        "postcss-selector-parser": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
-          "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
-          "requires": {
-            "cssesc": "^3.0.0",
-            "util-deprecate": "^1.0.2"
-          }
-        }
-      }
-    },
-    "postcss-modules-scope": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
-      "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
-      "requires": {
-        "postcss-selector-parser": "^7.0.0"
-      },
-      "dependencies": {
-        "postcss-selector-parser": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
-          "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
-          "requires": {
-            "cssesc": "^3.0.0",
-            "util-deprecate": "^1.0.2"
-          }
-        }
-      }
-    },
-    "postcss-modules-values": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
-      "requires": {
-        "icss-utils": "^5.0.0"
-      }
-    },
-    "postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "requires": {
-        "postcss-selector-parser": "^6.1.1"
-      }
-    },
-    "postcss-nesting": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.2.0.tgz",
-      "integrity": "sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==",
-      "requires": {
-        "@csstools/selector-specificity": "^2.0.0",
-        "postcss-selector-parser": "^6.0.10"
-      }
-    },
-    "postcss-normalize": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize/-/postcss-normalize-10.0.1.tgz",
-      "integrity": "sha512-+5w18/rDev5mqERcG3W5GZNMJa1eoYYNGo8gB7tEwaos0ajk3ZXAI4mHGcNT47NE+ZnZD1pEpUOFLvltIwmeJA==",
-      "requires": {
-        "@csstools/normalize.css": "*",
-        "postcss-browser-comments": "^4",
-        "sanitize.css": "*"
-      }
-    },
-    "postcss-normalize-charset": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
-      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "requires": {}
-    },
-    "postcss-normalize-display-values": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
-      "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-normalize-positions": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
-      "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-normalize-repeat-style": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
-      "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-normalize-string": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
-      "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-normalize-timing-functions": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
-      "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-normalize-unicode": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
-      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-normalize-url": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
-      "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
-      "requires": {
-        "normalize-url": "^6.0.1",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-normalize-whitespace": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
-      "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-opacity-percentage": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz",
-      "integrity": "sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==",
-      "requires": {}
-    },
-    "postcss-ordered-values": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
-      "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
-      "requires": {
-        "cssnano-utils": "^3.1.0",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-overflow-shorthand": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.4.tgz",
-      "integrity": "sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-page-break": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
-      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
-      "requires": {}
-    },
-    "postcss-place": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-7.0.5.tgz",
-      "integrity": "sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-preset-env": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-7.8.3.tgz",
-      "integrity": "sha512-T1LgRm5uEVFSEF83vHZJV2z19lHg4yJuZ6gXZZkqVsqv63nlr6zabMH3l4Pc01FQCyfWVrh2GaUeCVy9Po+Aag==",
-      "requires": {
-        "@csstools/postcss-cascade-layers": "^1.1.1",
-        "@csstools/postcss-color-function": "^1.1.1",
-        "@csstools/postcss-font-format-keywords": "^1.0.1",
-        "@csstools/postcss-hwb-function": "^1.0.2",
-        "@csstools/postcss-ic-unit": "^1.0.1",
-        "@csstools/postcss-is-pseudo-class": "^2.0.7",
-        "@csstools/postcss-nested-calc": "^1.0.0",
-        "@csstools/postcss-normalize-display-values": "^1.0.1",
-        "@csstools/postcss-oklab-function": "^1.1.1",
-        "@csstools/postcss-progressive-custom-properties": "^1.3.0",
-        "@csstools/postcss-stepped-value-functions": "^1.0.1",
-        "@csstools/postcss-text-decoration-shorthand": "^1.0.0",
-        "@csstools/postcss-trigonometric-functions": "^1.0.2",
-        "@csstools/postcss-unset-value": "^1.0.2",
-        "autoprefixer": "^10.4.13",
-        "browserslist": "^4.21.4",
-        "css-blank-pseudo": "^3.0.3",
-        "css-has-pseudo": "^3.0.4",
-        "css-prefers-color-scheme": "^6.0.3",
-        "cssdb": "^7.1.0",
-        "postcss-attribute-case-insensitive": "^5.0.2",
-        "postcss-clamp": "^4.1.0",
-        "postcss-color-functional-notation": "^4.2.4",
-        "postcss-color-hex-alpha": "^8.0.4",
-        "postcss-color-rebeccapurple": "^7.1.1",
-        "postcss-custom-media": "^8.0.2",
-        "postcss-custom-properties": "^12.1.10",
-        "postcss-custom-selectors": "^6.0.3",
-        "postcss-dir-pseudo-class": "^6.0.5",
-        "postcss-double-position-gradients": "^3.1.2",
-        "postcss-env-function": "^4.0.6",
-        "postcss-focus-visible": "^6.0.4",
-        "postcss-focus-within": "^5.0.4",
-        "postcss-font-variant": "^5.0.0",
-        "postcss-gap-properties": "^3.0.5",
-        "postcss-image-set-function": "^4.0.7",
-        "postcss-initial": "^4.0.1",
-        "postcss-lab-function": "^4.2.1",
-        "postcss-logical": "^5.0.4",
-        "postcss-media-minmax": "^5.0.0",
-        "postcss-nesting": "^10.2.0",
-        "postcss-opacity-percentage": "^1.1.2",
-        "postcss-overflow-shorthand": "^3.0.4",
-        "postcss-page-break": "^3.0.4",
-        "postcss-place": "^7.0.5",
-        "postcss-pseudo-class-any-link": "^7.1.6",
-        "postcss-replace-overflow-wrap": "^4.0.0",
-        "postcss-selector-not": "^6.0.1",
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-pseudo-class-any-link": {
-      "version": "7.1.6",
-      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz",
-      "integrity": "sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==",
-      "requires": {
-        "postcss-selector-parser": "^6.0.10"
-      }
-    },
-    "postcss-reduce-initial": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
-      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "caniuse-api": "^3.0.0"
-      }
-    },
-    "postcss-reduce-transforms": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
-      "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0"
-      }
-    },
-    "postcss-replace-overflow-wrap": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
-      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
-      "requires": {}
-    },
-    "postcss-selector-not": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz",
-      "integrity": "sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==",
-      "requires": {
-        "postcss-selector-parser": "^6.0.10"
-      }
-    },
-    "postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "requires": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      }
-    },
-    "postcss-svgo": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
-      "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
-      "requires": {
-        "postcss-value-parser": "^4.2.0",
-        "svgo": "^2.7.0"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
-        },
-        "css-tree": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-          "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-          "requires": {
-            "mdn-data": "2.0.14",
-            "source-map": "^0.6.1"
-          }
-        },
-        "mdn-data": {
-          "version": "2.0.14",
-          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-          "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        },
-        "svgo": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
-          "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
-          "requires": {
-            "@trysound/sax": "0.2.0",
-            "commander": "^7.2.0",
-            "css-select": "^4.1.3",
-            "css-tree": "^1.1.3",
-            "csso": "^4.2.0",
-            "picocolors": "^1.0.0",
-            "stable": "^0.1.8"
-          }
-        }
-      }
-    },
-    "postcss-unique-selectors": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
-      "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
-      "requires": {
-        "postcss-selector-parser": "^6.0.5"
-      }
-    },
-    "postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
-    },
-    "preact": {
-      "version": "10.12.1",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
-      "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
-      "peer": true
-    },
-    "prelude-ls": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
-      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
-    },
-    "pretty-bytes": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
-      "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg=="
-    },
-    "pretty-error": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
-      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
-      "requires": {
-        "lodash": "^4.17.20",
-        "renderkid": "^3.0.0"
-      }
-    },
-    "pretty-format": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
-      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
-      "requires": {
-        "ansi-regex": "^5.0.1",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^17.0.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="
-        }
-      }
-    },
-    "process-nextick-args": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
-    },
-    "promise": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",
-      "integrity": "sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==",
-      "requires": {
-        "asap": "~2.0.6"
-      }
-    },
-    "prompts": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
-      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
-      "requires": {
-        "kleur": "^3.0.3",
-        "sisteransi": "^1.0.5"
-      }
-    },
-    "prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "requires": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "16.13.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-        }
-      }
-    },
-    "proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "requires": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      },
-      "dependencies": {
-        "ipaddr.js": {
-          "version": "1.9.1",
-          "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-          "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
-        }
-      }
-    },
-    "proxy-from-env": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
-      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA=="
-    },
-    "psl": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
-      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
-      "requires": {
-        "punycode": "^2.3.1"
-      }
-    },
-    "punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="
-    },
-    "q": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw=="
-    },
-    "qs": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
-      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
-      "requires": {
-        "side-channel": "^1.0.6"
-      }
-    },
-    "querystringify": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
-    },
-    "queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
-    },
-    "raf": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
-      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "requires": {
-        "performance-now": "^2.1.0"
-      }
-    },
-    "randombytes": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "requires": {
-        "safe-buffer": "^5.1.0"
-      }
-    },
-    "range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
-    },
-    "raw-body": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
-      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
-      "requires": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      },
-      "dependencies": {
-        "iconv-lite": {
-          "version": "0.4.24",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
-          }
-        }
-      }
-    },
-    "react": {
-      "version": "19.1.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
-      "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ=="
-    },
-    "react-app-polyfill": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
-      "integrity": "sha512-sZ41cxiU5llIB003yxxQBYrARBqe0repqPTTYBTmMqTz9szeBbE37BehCE891NZsmdZqqP+xWKdT3eo3vOzN8w==",
-      "requires": {
-        "core-js": "^3.19.2",
-        "object-assign": "^4.1.1",
-        "promise": "^8.1.0",
-        "raf": "^3.4.1",
-        "regenerator-runtime": "^0.13.9",
-        "whatwg-fetch": "^3.6.2"
-      }
-    },
-    "react-dev-utils": {
-      "version": "12.0.1",
-      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
-      "integrity": "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==",
-      "requires": {
-        "@babel/code-frame": "^7.16.0",
-        "address": "^1.1.2",
-        "browserslist": "^4.18.1",
-        "chalk": "^4.1.2",
-        "cross-spawn": "^7.0.3",
-        "detect-port-alt": "^1.1.6",
-        "escape-string-regexp": "^4.0.0",
-        "filesize": "^8.0.6",
-        "find-up": "^5.0.0",
-        "fork-ts-checker-webpack-plugin": "^6.5.0",
-        "global-modules": "^2.0.0",
-        "globby": "^11.0.4",
-        "gzip-size": "^6.0.0",
-        "immer": "^9.0.7",
-        "is-root": "^2.1.0",
-        "loader-utils": "^3.2.0",
-        "open": "^8.4.0",
-        "pkg-up": "^3.1.0",
-        "prompts": "^2.4.2",
-        "react-error-overlay": "^6.0.11",
-        "recursive-readdir": "^2.2.2",
-        "shell-quote": "^1.7.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
-      },
-      "dependencies": {
-        "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==",
-          "requires": {
-            "locate-path": "^6.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "loader-utils": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
-          "integrity": "sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg=="
-        },
-        "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==",
-          "requires": {
-            "p-locate": "^5.0.0"
-          }
-        },
-        "p-limit": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-          "requires": {
-            "yocto-queue": "^0.1.0"
-          }
-        },
-        "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==",
-          "requires": {
-            "p-limit": "^3.0.2"
-          }
-        }
-      }
-    },
-    "react-dom": {
-      "version": "19.1.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
-      "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
-      "requires": {
-        "scheduler": "^0.26.0"
-      }
-    },
-    "react-error-overlay": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.1.0.tgz",
-      "integrity": "sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ=="
-    },
-    "react-icons": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
-      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
-      "requires": {}
-    },
-    "react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-    },
-    "react-redux": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
-      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
-      "requires": {
-        "@types/use-sync-external-store": "^0.0.6",
-        "use-sync-external-store": "^1.4.0"
-      }
-    },
-    "react-refresh": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
-      "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
-    },
-    "react-router": {
-      "version": "7.9.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz",
-      "integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==",
-      "requires": {
-        "cookie": "^1.0.1",
-        "set-cookie-parser": "^2.6.0"
-      },
-      "dependencies": {
-        "cookie": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-          "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="
-        }
-      }
-    },
-    "react-router-dom": {
-      "version": "7.9.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.4.tgz",
-      "integrity": "sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==",
-      "requires": {
-        "react-router": "7.9.4"
-      }
-    },
-    "react-scripts": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
-      "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
-      "requires": {
-        "@babel/core": "^7.16.0",
-        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-        "@svgr/webpack": "^5.5.0",
-        "babel-jest": "^27.4.2",
-        "babel-loader": "^8.2.3",
-        "babel-plugin-named-asset-import": "^0.3.8",
-        "babel-preset-react-app": "^10.0.1",
-        "bfj": "^7.0.2",
-        "browserslist": "^4.18.1",
-        "camelcase": "^6.2.1",
-        "case-sensitive-paths-webpack-plugin": "^2.4.0",
-        "css-loader": "^6.5.1",
-        "css-minimizer-webpack-plugin": "^3.2.0",
-        "dotenv": "^10.0.0",
-        "dotenv-expand": "^5.1.0",
-        "eslint": "^8.3.0",
-        "eslint-config-react-app": "^7.0.1",
-        "eslint-webpack-plugin": "^3.1.1",
-        "file-loader": "^6.2.0",
-        "fs-extra": "^10.0.0",
-        "fsevents": "^2.3.2",
-        "html-webpack-plugin": "^5.5.0",
-        "identity-obj-proxy": "^3.0.0",
-        "jest": "^27.4.3",
-        "jest-resolve": "^27.4.2",
-        "jest-watch-typeahead": "^1.0.0",
-        "mini-css-extract-plugin": "^2.4.5",
-        "postcss": "^8.4.4",
-        "postcss-flexbugs-fixes": "^5.0.2",
-        "postcss-loader": "^6.2.1",
-        "postcss-normalize": "^10.0.1",
-        "postcss-preset-env": "^7.0.1",
-        "prompts": "^2.4.2",
-        "react-app-polyfill": "^3.0.0",
-        "react-dev-utils": "^12.0.1",
-        "react-refresh": "^0.11.0",
-        "resolve": "^1.20.0",
-        "resolve-url-loader": "^4.0.0",
-        "sass-loader": "^12.3.0",
-        "semver": "^7.3.5",
-        "source-map-loader": "^3.0.0",
-        "style-loader": "^3.3.1",
-        "tailwindcss": "^3.0.2",
-        "terser-webpack-plugin": "^5.2.5",
-        "webpack": "^5.64.4",
-        "webpack-dev-server": "^4.6.0",
-        "webpack-manifest-plugin": "^4.0.2",
-        "workbox-webpack-plugin": "^6.4.1"
-      }
-    },
-    "react-toastify": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
-      "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
-      "requires": {
-        "clsx": "^2.1.1"
-      }
-    },
-    "react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      }
-    },
-    "read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "requires": {
-        "pify": "^2.3.0"
-      }
-    },
-    "readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "requires": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      }
-    },
-    "readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "requires": {
-        "picomatch": "^2.2.1"
-      }
-    },
-    "recursive-readdir": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
-      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
-      "requires": {
-        "minimatch": "^3.0.5"
-      }
-    },
-    "redent": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
-      "requires": {
-        "indent-string": "^4.0.0",
-        "strip-indent": "^3.0.0"
-      }
-    },
-    "redux": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
-      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
-    },
-    "redux-thunk": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
-      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
-      "requires": {}
-    },
-    "reflect.getprototypeof": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
-      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.9",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.7",
-        "get-proto": "^1.0.1",
-        "which-builtin-type": "^1.2.1"
-      }
-    },
-    "regenerate": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
-      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
-    },
-    "regenerate-unicode-properties": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz",
-      "integrity": "sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==",
-      "requires": {
-        "regenerate": "^1.4.2"
-      }
-    },
-    "regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
-    },
-    "regex-parser": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.3.1.tgz",
-      "integrity": "sha512-yXLRqatcCuKtVHsWrNg0JL3l1zGfdXeEvDa0bdu4tCDQw0RpMDZsqbkyRTUnKMR0tXF627V2oEWjBEaEdqTwtQ=="
-    },
-    "regexp.prototype.flags": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
-      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "define-properties": "^1.2.1",
-        "es-errors": "^1.3.0",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "set-function-name": "^2.0.2"
-      }
-    },
-    "regexpu-core": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz",
-      "integrity": "sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==",
-      "requires": {
-        "regenerate": "^1.4.2",
-        "regenerate-unicode-properties": "^10.2.0",
-        "regjsgen": "^0.8.0",
-        "regjsparser": "^0.12.0",
-        "unicode-match-property-ecmascript": "^2.0.0",
-        "unicode-match-property-value-ecmascript": "^2.1.0"
-      }
-    },
-    "regjsgen": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
-      "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q=="
-    },
-    "regjsparser": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz",
-      "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==",
-      "requires": {
-        "jsesc": "~3.0.2"
-      },
-      "dependencies": {
-        "jsesc": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
-          "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g=="
-        }
-      }
-    },
-    "relateurl": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog=="
-    },
-    "renderkid": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
-      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
-      "requires": {
-        "css-select": "^4.1.3",
-        "dom-converter": "^0.2.0",
-        "htmlparser2": "^6.1.0",
-        "lodash": "^4.17.21",
-        "strip-ansi": "^6.0.1"
-      }
-    },
-    "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=="
-    },
-    "require-from-string": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
-    },
-    "requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
-    },
-    "reselect": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
-      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
-    },
-    "resolve": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "requires": {
-        "is-core-module": "^2.16.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      }
-    },
-    "resolve-cwd": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
-      "requires": {
-        "resolve-from": "^5.0.0"
-      }
-    },
-    "resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
-    },
-    "resolve-url-loader": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz",
-      "integrity": "sha512-05VEMczVREcbtT7Bz+C+96eUO5HDNvdthIiMB34t7FcF8ehcu4wC0sSgPUubs3XW2Q3CNLJk/BJrCU9wVRymiA==",
-      "requires": {
-        "adjust-sourcemap-loader": "^4.0.0",
-        "convert-source-map": "^1.7.0",
-        "loader-utils": "^2.0.0",
-        "postcss": "^7.0.35",
-        "source-map": "0.6.1"
-      },
-      "dependencies": {
-        "convert-source-map": {
-          "version": "1.9.0",
-          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-          "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
-        },
-        "picocolors": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA=="
-        },
-        "postcss": {
-          "version": "7.0.39",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-          "requires": {
-            "picocolors": "^0.2.1",
-            "source-map": "^0.6.1"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "resolve.exports": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.1.tgz",
-      "integrity": "sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ=="
-    },
-    "retry": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
-      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg=="
-    },
-    "reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="
-    },
-    "rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "requires": {
-        "glob": "^7.1.3"
-      }
-    },
-    "rollup": {
-      "version": "2.79.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
-      "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
-      "requires": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "rollup-plugin-terser": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
-      "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
-      "requires": {
-        "@babel/code-frame": "^7.10.4",
-        "jest-worker": "^26.2.1",
-        "serialize-javascript": "^4.0.0",
-        "terser": "^5.0.0"
-      },
-      "dependencies": {
-        "jest-worker": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
-          "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
-          "requires": {
-            "@types/node": "*",
-            "merge-stream": "^2.0.0",
-            "supports-color": "^7.0.0"
-          }
-        },
-        "serialize-javascript": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
-          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
-          "requires": {
-            "randombytes": "^2.1.0"
-          }
-        }
-      }
-    },
-    "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==",
-      "requires": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "safe-array-concat": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
-      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.2",
-        "get-intrinsic": "^1.2.6",
-        "has-symbols": "^1.1.0",
-        "isarray": "^2.0.5"
-      }
-    },
-    "safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
-    },
-    "safe-push-apply": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
-      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
-      "requires": {
-        "es-errors": "^1.3.0",
-        "isarray": "^2.0.5"
-      }
-    },
-    "safe-regex-test": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
-      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
-      "requires": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "is-regex": "^1.2.1"
-      }
-    },
-    "safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-    },
-    "sanitize.css": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
-      "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
-    },
-    "sass-loader": {
-      "version": "12.6.0",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
-      "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
-      "requires": {
-        "klona": "^2.0.4",
-        "neo-async": "^2.6.2"
-      }
-    },
-    "sax": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
-    },
-    "saxes": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
-      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
-      "requires": {
-        "xmlchars": "^2.2.0"
-      }
-    },
-    "scheduler": {
-      "version": "0.26.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
-      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="
-    },
-    "schema-utils": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.2.tgz",
-      "integrity": "sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==",
-      "requires": {
-        "@types/json-schema": "^7.0.9",
-        "ajv": "^8.9.0",
-        "ajv-formats": "^2.1.1",
-        "ajv-keywords": "^5.1.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "8.17.1",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-          "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-          "requires": {
-            "fast-deep-equal": "^3.1.3",
-            "fast-uri": "^3.0.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2"
-          }
-        },
-        "ajv-keywords": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.3"
-          }
-        },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        }
-      }
-    },
-    "select-hose": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg=="
-    },
-    "selfsigned": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
-      "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
-      "requires": {
-        "@types/node-forge": "^1.3.0",
-        "node-forge": "^1"
-      }
-    },
-    "semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="
-    },
-    "send": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
-      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
-      "requires": {
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "mime": "1.6.0",
-        "ms": "2.1.3",
-        "on-finished": "2.4.1",
-        "range-parser": "~1.2.1",
-        "statuses": "2.0.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          },
-          "dependencies": {
-            "ms": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-              "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-            }
-          }
-        },
-        "encodeurl": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-          "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
-        }
-      }
-    },
-    "serialize-javascript": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
-      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
-      "requires": {
-        "randombytes": "^2.1.0"
-      }
-    },
-    "serve-index": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-      "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
-      "requires": {
-        "accepts": "~1.3.4",
-        "batch": "0.6.1",
-        "debug": "2.6.9",
-        "escape-html": "~1.0.3",
-        "http-errors": "~1.6.2",
-        "mime-types": "~2.1.17",
-        "parseurl": "~1.3.2"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "depd": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-          "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ=="
-        },
-        "http-errors": {
-          "version": "1.6.3",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-          "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
-          "requires": {
-            "depd": "~1.1.2",
-            "inherits": "2.0.3",
-            "setprototypeof": "1.1.0",
-            "statuses": ">= 1.4.0 < 2"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        },
-        "setprototypeof": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-          "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
-        },
-        "statuses": {
-          "version": "1.5.0",
-          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-          "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA=="
-        }
-      }
-    },
-    "serve-static": {
-      "version": "1.16.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
-      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
-      "requires": {
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "0.19.0"
-      }
-    },
-    "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=="
-    },
-    "set-function-length": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
-      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "requires": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.2"
-      }
-    },
-    "set-function-name": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
-      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
-      "requires": {
-        "define-data-property": "^1.1.4",
-        "es-errors": "^1.3.0",
-        "functions-have-names": "^1.2.3",
-        "has-property-descriptors": "^1.0.2"
-      }
-    },
-    "set-proto": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
-      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
-      "requires": {
-        "dunder-proto": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0"
-      }
-    },
-    "setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
-    },
-    "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==",
-      "requires": {
-        "shebang-regex": "^3.0.0"
-      }
-    },
-    "shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
-    },
-    "shell-quote": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
-      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw=="
-    },
-    "side-channel": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
-      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-      "requires": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3",
-        "side-channel-list": "^1.0.0",
-        "side-channel-map": "^1.0.1",
-        "side-channel-weakmap": "^1.0.2"
-      }
-    },
-    "side-channel-list": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
-      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
-      "requires": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3"
-      }
-    },
-    "side-channel-map": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
-      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-      "requires": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3"
-      }
-    },
-    "side-channel-weakmap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
-      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-      "requires": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3",
-        "side-channel-map": "^1.0.1"
-      }
-    },
-    "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=="
-    },
-    "sisteransi": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
-    },
-    "slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
-    },
-    "sockjs": {
-      "version": "0.3.24",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
-      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
-      "requires": {
-        "faye-websocket": "^0.11.3",
-        "uuid": "^8.3.2",
-        "websocket-driver": "^0.7.4"
-      }
-    },
-    "source-list-map": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
-      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
-    },
-    "source-map": {
-      "version": "0.7.6",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
-      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="
-    },
-    "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=="
-    },
-    "source-map-loader": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-3.0.2.tgz",
-      "integrity": "sha512-BokxPoLjyl3iOrgkWaakaxqnelAJSS+0V+De0kKIq6lyWrXuiPgYTGp6z3iHmqljKAaLXwZa+ctD8GccRJeVvg==",
-      "requires": {
-        "abab": "^2.0.5",
-        "iconv-lite": "^0.6.3",
-        "source-map-js": "^1.0.1"
-      }
-    },
-    "source-map-support": {
-      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "requires": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
-    "sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
-    },
-    "spdy": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
-      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
-      "requires": {
-        "debug": "^4.1.0",
-        "handle-thing": "^2.0.0",
-        "http-deceiver": "^1.2.7",
-        "select-hose": "^2.0.0",
-        "spdy-transport": "^3.0.0"
-      }
-    },
-    "spdy-transport": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
-      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
-      "requires": {
-        "debug": "^4.1.0",
-        "detect-node": "^2.0.4",
-        "hpack.js": "^2.1.6",
-        "obuf": "^1.1.2",
-        "readable-stream": "^3.0.6",
-        "wbuf": "^1.7.3"
-      }
-    },
-    "sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
-    },
-    "stable": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
-    },
-    "stack-utils": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
-      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
-      "requires": {
-        "escape-string-regexp": "^2.0.0"
-      },
-      "dependencies": {
-        "escape-string-regexp": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="
-        }
-      }
-    },
-    "stackframe": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
-      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
-    },
-    "static-eval": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.2.tgz",
-      "integrity": "sha512-N/D219Hcr2bPjLxPiV+TQE++Tsmrady7TqAJugLy7Xk1EumfDWS/f5dtBbkRCGE7wKKXuYockQoj8Rm2/pVKyg==",
-      "requires": {
-        "escodegen": "^1.8.1"
-      },
-      "dependencies": {
-        "escodegen": {
-          "version": "1.14.3",
-          "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
-          "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
-          "requires": {
-            "esprima": "^4.0.1",
-            "estraverse": "^4.2.0",
-            "esutils": "^2.0.2",
-            "optionator": "^0.8.1",
-            "source-map": "~0.6.1"
-          }
-        },
-        "estraverse": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
-        },
-        "levn": {
-          "version": "0.3.0",
-          "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
-          "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
-          "requires": {
-            "prelude-ls": "~1.1.2",
-            "type-check": "~0.3.2"
-          }
-        },
-        "optionator": {
-          "version": "0.8.3",
-          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
-          "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
-          "requires": {
-            "deep-is": "~0.1.3",
-            "fast-levenshtein": "~2.0.6",
-            "levn": "~0.3.0",
-            "prelude-ls": "~1.1.2",
-            "type-check": "~0.3.2",
-            "word-wrap": "~1.2.3"
-          }
-        },
-        "prelude-ls": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-          "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w=="
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "optional": true
-        },
-        "type-check": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-          "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
-          "requires": {
-            "prelude-ls": "~1.1.2"
-          }
-        }
-      }
-    },
-    "statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
-    },
-    "stop-iteration-iterator": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
-      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
-      "requires": {
-        "es-errors": "^1.3.0",
-        "internal-slot": "^1.1.0"
-      }
-    },
-    "string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "requires": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
-    "string-length": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
-      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
-      "requires": {
-        "char-regex": "^1.0.2",
-        "strip-ansi": "^6.0.0"
-      }
-    },
-    "string-natural-compare": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/string-natural-compare/-/string-natural-compare-3.0.1.tgz",
-      "integrity": "sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw=="
-    },
-    "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==",
-      "requires": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "dependencies": {
-        "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=="
-        }
-      }
-    },
-    "string-width-cjs": {
-      "version": "npm:string-width@4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "requires": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "dependencies": {
-        "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=="
-        }
-      }
-    },
-    "string.prototype.includes": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
-      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
-      "requires": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.3"
-      }
-    },
-    "string.prototype.matchall": {
-      "version": "4.0.12",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
-      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.3",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.6",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.6",
-        "gopd": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "internal-slot": "^1.1.0",
-        "regexp.prototype.flags": "^1.5.3",
-        "set-function-name": "^2.0.2",
-        "side-channel": "^1.1.0"
-      }
-    },
-    "string.prototype.repeat": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
-      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.5"
-      }
-    },
-    "string.prototype.trim": {
-      "version": "1.2.10",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
-      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.2",
-        "define-data-property": "^1.1.4",
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.5",
-        "es-object-atoms": "^1.0.0",
-        "has-property-descriptors": "^1.0.2"
-      }
-    },
-    "string.prototype.trimend": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
-      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.2",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0"
-      }
-    },
-    "string.prototype.trimstart": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
-      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
-      "requires": {
-        "call-bind": "^1.0.7",
-        "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0"
-      }
-    },
-    "stringify-object": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
-      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
-      "requires": {
-        "get-own-enumerable-property-symbols": "^3.0.0",
-        "is-obj": "^1.0.1",
-        "is-regexp": "^1.0.0"
-      }
-    },
-    "strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "requires": {
-        "ansi-regex": "^5.0.1"
-      }
-    },
-    "strip-ansi-cjs": {
-      "version": "npm:strip-ansi@6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "requires": {
-        "ansi-regex": "^5.0.1"
-      }
-    },
-    "strip-bom": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
-      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w=="
-    },
-    "strip-comments": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
-      "integrity": "sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw=="
-    },
-    "strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA=="
-    },
-    "strip-indent": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-      "requires": {
-        "min-indent": "^1.0.0"
-      }
-    },
-    "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=="
-    },
-    "style-loader": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
-      "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==",
-      "requires": {}
-    },
-    "stylehacks": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
-      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
-      "requires": {
-        "browserslist": "^4.21.4",
-        "postcss-selector-parser": "^6.0.4"
-      }
-    },
-    "stylis": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
-    },
-    "sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "requires": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "dependencies": {
-        "brace-expansion": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-          "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-          "requires": {
-            "balanced-match": "^1.0.0"
-          }
-        },
-        "commander": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
-        },
-        "glob": {
-          "version": "10.4.5",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-          "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-          "requires": {
-            "foreground-child": "^3.1.0",
-            "jackspeak": "^3.1.2",
-            "minimatch": "^9.0.4",
-            "minipass": "^7.1.2",
-            "package-json-from-dist": "^1.0.0",
-            "path-scurry": "^1.11.1"
-          }
-        },
-        "minimatch": {
-          "version": "9.0.5",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-          "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-          "requires": {
-            "brace-expansion": "^2.0.1"
-          }
-        }
-      }
-    },
-    "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==",
-      "requires": {
-        "has-flag": "^4.0.0"
-      }
-    },
-    "supports-hyperlinks": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
-      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
-      "requires": {
-        "has-flag": "^4.0.0",
-        "supports-color": "^7.0.0"
-      }
-    },
-    "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=="
-    },
-    "svg-parser": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
-      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
-    },
-    "svgo": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
-      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
-      "requires": {
-        "chalk": "^2.4.1",
-        "coa": "^2.0.2",
-        "css-select": "^2.0.0",
-        "css-select-base-adapter": "^0.1.1",
-        "css-tree": "1.0.0-alpha.37",
-        "csso": "^4.0.2",
-        "js-yaml": "^3.13.1",
-        "mkdirp": "~0.5.1",
-        "object.values": "^1.1.0",
-        "sax": "~1.2.4",
-        "stable": "^0.1.8",
-        "unquote": "~1.1.1",
-        "util.promisify": "~1.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "requires": {
-            "color-name": "1.1.3"
-          }
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-        },
-        "css-select": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
-          "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
-          "requires": {
-            "boolbase": "^1.0.0",
-            "css-what": "^3.2.1",
-            "domutils": "^1.7.0",
-            "nth-check": "^1.0.2"
-          }
-        },
-        "css-what": {
-          "version": "3.4.2",
-          "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
-          "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ=="
-        },
-        "dom-serializer": {
-          "version": "0.2.2",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
-          "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
-          "requires": {
-            "domelementtype": "^2.0.1",
-            "entities": "^2.0.0"
-          }
-        },
-        "domutils": {
-          "version": "1.7.0",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
-          "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
-          "requires": {
-            "dom-serializer": "0",
-            "domelementtype": "1"
-          },
-          "dependencies": {
-            "domelementtype": {
-              "version": "1.3.1",
-              "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-              "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
-            }
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
-        },
-        "nth-check": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-          "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
-          "requires": {
-            "boolbase": "~1.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "symbol-tree": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
-    },
-    "tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
-      "requires": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "dependencies": {
-        "lilconfig": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-          "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="
-        }
-      }
-    },
-    "tapable": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
-      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg=="
-    },
-    "temp-dir": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
-      "integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg=="
-    },
-    "tempy": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tempy/-/tempy-0.6.0.tgz",
-      "integrity": "sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==",
-      "requires": {
-        "is-stream": "^2.0.0",
-        "temp-dir": "^2.0.0",
-        "type-fest": "^0.16.0",
-        "unique-string": "^2.0.0"
-      },
-      "dependencies": {
-        "type-fest": {
-          "version": "0.16.0",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",
-          "integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg=="
-        }
-      }
-    },
-    "terminal-link": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
-      "integrity": "sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==",
-      "requires": {
-        "ansi-escapes": "^4.2.1",
-        "supports-hyperlinks": "^2.0.0"
-      }
-    },
-    "terser": {
-      "version": "5.43.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.43.1.tgz",
-      "integrity": "sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==",
-      "requires": {
-        "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.14.0",
-        "commander": "^2.20.0",
-        "source-map-support": "~0.5.20"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-        }
-      }
-    },
-    "terser-webpack-plugin": {
-      "version": "5.3.14",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.14.tgz",
-      "integrity": "sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==",
-      "requires": {
-        "@jridgewell/trace-mapping": "^0.3.25",
-        "jest-worker": "^27.4.5",
-        "schema-utils": "^4.3.0",
-        "serialize-javascript": "^6.0.2",
-        "terser": "^5.31.1"
-      }
-    },
-    "test-exclude": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
-      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
-      "requires": {
-        "@istanbuljs/schema": "^0.1.2",
-        "glob": "^7.1.4",
-        "minimatch": "^3.0.4"
-      }
-    },
-    "text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
-    },
-    "thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "requires": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "requires": {
-        "thenify": ">= 3.1.0 < 4"
-      }
-    },
-    "throat": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",
-      "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ=="
-    },
-    "thunky": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
-      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
-    },
-    "tmpl": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
-      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw=="
-    },
-    "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==",
-      "requires": {
-        "is-number": "^7.0.0"
-      }
-    },
-    "toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
-    },
-    "tough-cookie": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
-      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
-      "requires": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
-      },
-      "dependencies": {
-        "universalify": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-          "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg=="
-        }
-      }
-    },
-    "tr46": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
-      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
-      "requires": {
-        "punycode": "^2.1.1"
-      }
-    },
-    "tryer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
-      "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
-    },
-    "ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
-    },
-    "tsconfig-paths": {
-      "version": "3.15.0",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
-      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
-      "requires": {
-        "@types/json5": "^0.0.29",
-        "json5": "^1.0.2",
-        "minimist": "^1.2.6",
-        "strip-bom": "^3.0.0"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "strip-bom": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-          "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="
-        }
-      }
-    },
-    "tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
-    },
-    "tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-      "requires": {
-        "tslib": "^1.8.1"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "type-check": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
-      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
-      "requires": {
-        "prelude-ls": "^1.2.1"
-      }
-    },
-    "type-detect": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g=="
-    },
-    "type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
-    },
-    "type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "requires": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      }
-    },
-    "typed-array-buffer": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
-      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
-      "requires": {
-        "call-bound": "^1.0.3",
-        "es-errors": "^1.3.0",
-        "is-typed-array": "^1.1.14"
-      }
-    },
-    "typed-array-byte-length": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
-      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
-      "requires": {
-        "call-bind": "^1.0.8",
-        "for-each": "^0.3.3",
-        "gopd": "^1.2.0",
-        "has-proto": "^1.2.0",
-        "is-typed-array": "^1.1.14"
-      }
-    },
-    "typed-array-byte-offset": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
-      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
-      "requires": {
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.8",
-        "for-each": "^0.3.3",
-        "gopd": "^1.2.0",
-        "has-proto": "^1.2.0",
-        "is-typed-array": "^1.1.15",
-        "reflect.getprototypeof": "^1.0.9"
-      }
-    },
-    "typed-array-length": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
-      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
-      "requires": {
-        "call-bind": "^1.0.7",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "is-typed-array": "^1.1.13",
-        "possible-typed-array-names": "^1.0.0",
-        "reflect.getprototypeof": "^1.0.6"
-      }
-    },
-    "typedarray-to-buffer": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
-      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
-      "requires": {
-        "is-typedarray": "^1.0.0"
-      }
-    },
-    "typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "peer": true
-    },
-    "unbox-primitive": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
-      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
-      "requires": {
-        "call-bound": "^1.0.3",
-        "has-bigints": "^1.0.2",
-        "has-symbols": "^1.1.0",
-        "which-boxed-primitive": "^1.1.1"
-      }
-    },
-    "underscore": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
-      "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw=="
-    },
-    "undici-types": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz",
-      "integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag=="
-    },
-    "unicode-canonical-property-names-ecmascript": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
-      "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg=="
-    },
-    "unicode-match-property-ecmascript": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
-      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
-      "requires": {
-        "unicode-canonical-property-names-ecmascript": "^2.0.0",
-        "unicode-property-aliases-ecmascript": "^2.0.0"
-      }
-    },
-    "unicode-match-property-value-ecmascript": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz",
-      "integrity": "sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg=="
-    },
-    "unicode-property-aliases-ecmascript": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
-      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w=="
-    },
-    "unique-string": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
-      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
-      "requires": {
-        "crypto-random-string": "^2.0.0"
-      }
-    },
-    "universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw=="
-    },
-    "unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="
-    },
-    "unquote": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
-      "integrity": "sha512-vRCqFv6UhXpWxZPyGDh/F3ZpNv8/qo7w6iufLpQg9aKnQ71qM4B5KiI7Mia9COcjEhrO9LueHpMYjYzsWH3OIg=="
-    },
-    "upath": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
-      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg=="
-    },
-    "update-browserslist-db": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
-      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
-      "requires": {
-        "escalade": "^3.2.0",
-        "picocolors": "^1.1.1"
-      }
-    },
-    "uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "requires": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "url-parse": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-      "requires": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
-    "use-sync-external-store": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
-      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
-      "requires": {}
-    },
-    "util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
-    },
-    "util.promisify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
-      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.2",
-        "has-symbols": "^1.0.1",
-        "object.getownpropertydescriptors": "^2.1.0"
-      }
-    },
-    "utila": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
-    },
-    "utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
-    },
-    "uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
-    },
-    "v8-to-istanbul": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz",
-      "integrity": "sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==",
-      "requires": {
-        "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^1.6.0",
-        "source-map": "^0.7.3"
-      },
-      "dependencies": {
-        "convert-source-map": {
-          "version": "1.9.0",
-          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-          "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
-        }
-      }
-    },
-    "vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
-    },
-    "w3c-hr-time": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
-      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
-      "requires": {
-        "browser-process-hrtime": "^1.0.0"
-      }
-    },
-    "w3c-xmlserializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
-      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
-      "requires": {
-        "xml-name-validator": "^3.0.0"
-      }
-    },
-    "walker": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
-      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
-      "requires": {
-        "makeerror": "1.0.12"
-      }
-    },
-    "watchpack": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
-      "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
-      "requires": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      }
-    },
-    "wbuf": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
-      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
-      "requires": {
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
-    "web-vitals": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",
-      "integrity": "sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg=="
-    },
-    "webidl-conversions": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
-      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w=="
-    },
-    "webpack": {
-      "version": "5.101.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.101.0.tgz",
-      "integrity": "sha512-B4t+nJqytPeuZlHuIKTbalhljIFXeNRqrUGAQgTGlfOl2lXXKXw+yZu6bicycP+PUlM44CxBjCFD6aciKFT3LQ==",
-      "requires": {
-        "@types/eslint-scope": "^3.7.7",
-        "@types/estree": "^1.0.8",
-        "@types/json-schema": "^7.0.15",
-        "@webassemblyjs/ast": "^1.14.1",
-        "@webassemblyjs/wasm-edit": "^1.14.1",
-        "@webassemblyjs/wasm-parser": "^1.14.1",
-        "acorn": "^8.15.0",
-        "acorn-import-phases": "^1.0.3",
-        "browserslist": "^4.24.0",
-        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.17.2",
-        "es-module-lexer": "^1.2.1",
-        "eslint-scope": "5.1.1",
-        "events": "^3.2.0",
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.2.11",
-        "json-parse-even-better-errors": "^2.3.1",
-        "loader-runner": "^4.2.0",
-        "mime-types": "^2.1.27",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^4.3.2",
-        "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.3.11",
-        "watchpack": "^2.4.1",
-        "webpack-sources": "^3.3.3"
-      },
-      "dependencies": {
-        "eslint-scope": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-          "requires": {
-            "esrecurse": "^4.3.0",
-            "estraverse": "^4.1.1"
-          }
-        },
-        "estraverse": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-          "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
-        }
-      }
-    },
-    "webpack-dev-middleware": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
-      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
-      "requires": {
-        "colorette": "^2.0.10",
-        "memfs": "^3.4.3",
-        "mime-types": "^2.1.31",
-        "range-parser": "^1.2.1",
-        "schema-utils": "^4.0.0"
-      }
-    },
-    "webpack-dev-server": {
-      "version": "4.15.2",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz",
-      "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==",
-      "requires": {
-        "@types/bonjour": "^3.5.9",
-        "@types/connect-history-api-fallback": "^1.3.5",
-        "@types/express": "^4.17.13",
-        "@types/serve-index": "^1.9.1",
-        "@types/serve-static": "^1.13.10",
-        "@types/sockjs": "^0.3.33",
-        "@types/ws": "^8.5.5",
-        "ansi-html-community": "^0.0.8",
-        "bonjour-service": "^1.0.11",
-        "chokidar": "^3.5.3",
-        "colorette": "^2.0.10",
-        "compression": "^1.7.4",
-        "connect-history-api-fallback": "^2.0.0",
-        "default-gateway": "^6.0.3",
-        "express": "^4.17.3",
-        "graceful-fs": "^4.2.6",
-        "html-entities": "^2.3.2",
-        "http-proxy-middleware": "^2.0.3",
-        "ipaddr.js": "^2.0.1",
-        "launch-editor": "^2.6.0",
-        "open": "^8.0.9",
-        "p-retry": "^4.5.0",
-        "rimraf": "^3.0.2",
-        "schema-utils": "^4.0.0",
-        "selfsigned": "^2.1.1",
-        "serve-index": "^1.9.1",
-        "sockjs": "^0.3.24",
-        "spdy": "^4.0.2",
-        "webpack-dev-middleware": "^5.3.4",
-        "ws": "^8.13.0"
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
       },
-      "dependencies": {
-        "http-proxy-middleware": {
-          "version": "2.0.9",
-          "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz",
-          "integrity": "sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q==",
-          "requires": {
-            "@types/http-proxy": "^1.17.8",
-            "http-proxy": "^1.18.1",
-            "is-glob": "^4.0.1",
-            "is-plain-obj": "^3.0.0",
-            "micromatch": "^4.0.2"
-          }
-        },
-        "ws": {
-          "version": "8.18.3",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-          "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
-          "requires": {}
-        }
-      }
-    },
-    "webpack-manifest-plugin": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-4.1.1.tgz",
-      "integrity": "sha512-YXUAwxtfKIJIKkhg03MKuiFAD72PlrqCiwdwO4VEXdRO5V0ORCNwaOwAZawPZalCbmH9kBDmXnNeQOw+BIEiow==",
-      "requires": {
-        "tapable": "^2.0.0",
-        "webpack-sources": "^2.2.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        },
-        "webpack-sources": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.1.tgz",
-          "integrity": "sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==",
-          "requires": {
-            "source-list-map": "^2.0.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "webpack-sources": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.3.tgz",
-      "integrity": "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg=="
-    },
-    "websocket-driver": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
-      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
-      "requires": {
-        "http-parser-js": ">=0.5.1",
-        "safe-buffer": ">=5.1.0",
-        "websocket-extensions": ">=0.1.1"
-      }
-    },
-    "websocket-extensions": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
-      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg=="
-    },
-    "whatwg-encoding": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
-      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
-      "requires": {
-        "iconv-lite": "0.4.24"
-      },
-      "dependencies": {
-        "iconv-lite": {
-          "version": "0.4.24",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
-          }
-        }
-      }
-    },
-    "whatwg-fetch": {
-      "version": "3.6.20",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
-      "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="
-    },
-    "whatwg-mimetype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
-      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g=="
-    },
-    "whatwg-url": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
-      "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
-      "requires": {
-        "lodash": "^4.7.0",
-        "tr46": "^2.1.0",
-        "webidl-conversions": "^6.1.0"
-      }
-    },
-    "which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "requires": {
-        "isexe": "^2.0.0"
-      }
-    },
-    "which-boxed-primitive": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
-      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
-      "requires": {
-        "is-bigint": "^1.1.0",
-        "is-boolean-object": "^1.2.1",
-        "is-number-object": "^1.1.1",
-        "is-string": "^1.1.1",
-        "is-symbol": "^1.1.1"
-      }
-    },
-    "which-builtin-type": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
-      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
-      "requires": {
-        "call-bound": "^1.0.2",
-        "function.prototype.name": "^1.1.6",
-        "has-tostringtag": "^1.0.2",
-        "is-async-function": "^2.0.0",
-        "is-date-object": "^1.1.0",
-        "is-finalizationregistry": "^1.1.0",
-        "is-generator-function": "^1.0.10",
-        "is-regex": "^1.2.1",
-        "is-weakref": "^1.0.2",
-        "isarray": "^2.0.5",
-        "which-boxed-primitive": "^1.1.0",
-        "which-collection": "^1.0.2",
-        "which-typed-array": "^1.1.16"
-      }
-    },
-    "which-collection": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
-      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
-      "requires": {
-        "is-map": "^2.0.3",
-        "is-set": "^2.0.3",
-        "is-weakmap": "^2.0.2",
-        "is-weakset": "^2.0.3"
-      }
-    },
-    "which-typed-array": {
-      "version": "1.1.19",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
-      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
-      "requires": {
-        "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "for-each": "^0.3.5",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-tostringtag": "^1.0.2"
-      }
-    },
-    "word-wrap": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
-      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="
-    },
-    "workbox-background-sync": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-6.6.0.tgz",
-      "integrity": "sha512-jkf4ZdgOJxC9u2vztxLuPT/UjlH7m/nWRQ/MgGL0v8BJHoZdVGJd18Kck+a0e55wGXdqyHO+4IQTk0685g4MUw==",
-      "requires": {
-        "idb": "^7.0.1",
-        "workbox-core": "6.6.0"
-      }
-    },
-    "workbox-broadcast-update": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-6.6.0.tgz",
-      "integrity": "sha512-nm+v6QmrIFaB/yokJmQ/93qIJ7n72NICxIwQwe5xsZiV2aI93MGGyEyzOzDPVz5THEr5rC3FJSsO3346cId64Q==",
-      "requires": {
-        "workbox-core": "6.6.0"
-      }
-    },
-    "workbox-build": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-6.6.0.tgz",
-      "integrity": "sha512-Tjf+gBwOTuGyZwMz2Nk/B13Fuyeo0Q84W++bebbVsfr9iLkDSo6j6PST8tET9HYA58mlRXwlMGpyWO8ETJiXdQ==",
-      "requires": {
-        "@apideck/better-ajv-errors": "^0.3.1",
-        "@babel/core": "^7.11.1",
-        "@babel/preset-env": "^7.11.0",
-        "@babel/runtime": "^7.11.2",
-        "@rollup/plugin-babel": "^5.2.0",
-        "@rollup/plugin-node-resolve": "^11.2.1",
-        "@rollup/plugin-replace": "^2.4.1",
-        "@surma/rollup-plugin-off-main-thread": "^2.2.3",
-        "ajv": "^8.6.0",
-        "common-tags": "^1.8.0",
-        "fast-json-stable-stringify": "^2.1.0",
-        "fs-extra": "^9.0.1",
-        "glob": "^7.1.6",
-        "lodash": "^4.17.20",
-        "pretty-bytes": "^5.3.0",
-        "rollup": "^2.43.1",
-        "rollup-plugin-terser": "^7.0.0",
-        "source-map": "^0.8.0-beta.0",
-        "stringify-object": "^3.3.0",
-        "strip-comments": "^2.0.1",
-        "tempy": "^0.6.0",
-        "upath": "^1.2.0",
-        "workbox-background-sync": "6.6.0",
-        "workbox-broadcast-update": "6.6.0",
-        "workbox-cacheable-response": "6.6.0",
-        "workbox-core": "6.6.0",
-        "workbox-expiration": "6.6.0",
-        "workbox-google-analytics": "6.6.0",
-        "workbox-navigation-preload": "6.6.0",
-        "workbox-precaching": "6.6.0",
-        "workbox-range-requests": "6.6.0",
-        "workbox-recipes": "6.6.0",
-        "workbox-routing": "6.6.0",
-        "workbox-strategies": "6.6.0",
-        "workbox-streams": "6.6.0",
-        "workbox-sw": "6.6.0",
-        "workbox-window": "6.6.0"
-      },
-      "dependencies": {
-        "@apideck/better-ajv-errors": {
-          "version": "0.3.6",
-          "resolved": "https://registry.npmjs.org/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
-          "integrity": "sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA==",
-          "requires": {
-            "json-schema": "^0.4.0",
-            "jsonpointer": "^5.0.0",
-            "leven": "^3.1.0"
-          }
-        },
-        "ajv": {
-          "version": "8.17.1",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-          "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-          "requires": {
-            "fast-deep-equal": "^3.1.3",
-            "fast-uri": "^3.0.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2"
-          }
-        },
-        "fs-extra": {
-          "version": "9.1.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-          "requires": {
-            "at-least-node": "^1.0.0",
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^6.0.1",
-            "universalify": "^2.0.0"
-          }
-        },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
-        "source-map": {
-          "version": "0.8.0-beta.0",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
-          "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
-          "requires": {
-            "whatwg-url": "^7.0.0"
-          }
-        },
-        "tr46": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
-          "integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
-          "requires": {
-            "punycode": "^2.1.0"
-          }
-        },
-        "webidl-conversions": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
-          "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
-        },
-        "whatwg-url": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
-          "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
-          "requires": {
-            "lodash.sortby": "^4.7.0",
-            "tr46": "^1.0.1",
-            "webidl-conversions": "^4.0.2"
-          }
-        }
-      }
-    },
-    "workbox-cacheable-response": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-6.6.0.tgz",
-      "integrity": "sha512-JfhJUSQDwsF1Xv3EV1vWzSsCOZn4mQ38bWEBR3LdvOxSPgB65gAM6cS2CX8rkkKHRgiLrN7Wxoyu+TuH67kHrw==",
-      "requires": {
-        "workbox-core": "6.6.0"
-      }
-    },
-    "workbox-core": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-6.6.0.tgz",
-      "integrity": "sha512-GDtFRF7Yg3DD859PMbPAYPeJyg5gJYXuBQAC+wyrWuuXgpfoOrIQIvFRZnQ7+czTIQjIr1DhLEGFzZanAT/3bQ=="
-    },
-    "workbox-expiration": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.6.0.tgz",
-      "integrity": "sha512-baplYXcDHbe8vAo7GYvyAmlS4f6998Jff513L4XvlzAOxcl8F620O91guoJ5EOf5qeXG4cGdNZHkkVAPouFCpw==",
-      "requires": {
-        "idb": "^7.0.1",
-        "workbox-core": "6.6.0"
-      }
-    },
-    "workbox-google-analytics": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-6.6.0.tgz",
-      "integrity": "sha512-p4DJa6OldXWd6M9zRl0H6vB9lkrmqYFkRQ2xEiNdBFp9U0LhsGO7hsBscVEyH9H2/3eZZt8c97NB2FD9U2NJ+Q==",
-      "requires": {
-        "workbox-background-sync": "6.6.0",
-        "workbox-core": "6.6.0",
-        "workbox-routing": "6.6.0",
-        "workbox-strategies": "6.6.0"
-      }
-    },
-    "workbox-navigation-preload": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-6.6.0.tgz",
-      "integrity": "sha512-utNEWG+uOfXdaZmvhshrh7KzhDu/1iMHyQOV6Aqup8Mm78D286ugu5k9MFD9SzBT5TcwgwSORVvInaXWbvKz9Q==",
-      "requires": {
-        "workbox-core": "6.6.0"
-      }
-    },
-    "workbox-precaching": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-6.6.0.tgz",
-      "integrity": "sha512-eYu/7MqtRZN1IDttl/UQcSZFkHP7dnvr/X3Vn6Iw6OsPMruQHiVjjomDFCNtd8k2RdjLs0xiz9nq+t3YVBcWPw==",
-      "requires": {
-        "workbox-core": "6.6.0",
-        "workbox-routing": "6.6.0",
-        "workbox-strategies": "6.6.0"
-      }
-    },
-    "workbox-range-requests": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-6.6.0.tgz",
-      "integrity": "sha512-V3aICz5fLGq5DpSYEU8LxeXvsT//mRWzKrfBOIxzIdQnV/Wj7R+LyJVTczi4CQ4NwKhAaBVaSujI1cEjXW+hTw==",
-      "requires": {
-        "workbox-core": "6.6.0"
-      }
-    },
-    "workbox-recipes": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-6.6.0.tgz",
-      "integrity": "sha512-TFi3kTgYw73t5tg73yPVqQC8QQjxJSeqjXRO4ouE/CeypmP2O/xqmB/ZFBBQazLTPxILUQ0b8aeh0IuxVn9a6A==",
-      "requires": {
-        "workbox-cacheable-response": "6.6.0",
-        "workbox-core": "6.6.0",
-        "workbox-expiration": "6.6.0",
-        "workbox-precaching": "6.6.0",
-        "workbox-routing": "6.6.0",
-        "workbox-strategies": "6.6.0"
-      }
-    },
-    "workbox-routing": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-6.6.0.tgz",
-      "integrity": "sha512-x8gdN7VDBiLC03izAZRfU+WKUXJnbqt6PG9Uh0XuPRzJPpZGLKce/FkOX95dWHRpOHWLEq8RXzjW0O+POSkKvw==",
-      "requires": {
-        "workbox-core": "6.6.0"
-      }
-    },
-    "workbox-strategies": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.6.0.tgz",
-      "integrity": "sha512-eC07XGuINAKUWDnZeIPdRdVja4JQtTuc35TZ8SwMb1ztjp7Ddq2CJ4yqLvWzFWGlYI7CG/YGqaETntTxBGdKgQ==",
-      "requires": {
-        "workbox-core": "6.6.0"
-      }
-    },
-    "workbox-streams": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-6.6.0.tgz",
-      "integrity": "sha512-rfMJLVvwuED09CnH1RnIep7L9+mj4ufkTyDPVaXPKlhi9+0czCu+SJggWCIFbPpJaAZmp2iyVGLqS3RUmY3fxg==",
-      "requires": {
-        "workbox-core": "6.6.0",
-        "workbox-routing": "6.6.0"
-      }
-    },
-    "workbox-sw": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-6.6.0.tgz",
-      "integrity": "sha512-R2IkwDokbtHUE4Kus8pKO5+VkPHD2oqTgl+XJwh4zbF1HyjAbgNmK/FneZHVU7p03XUt9ICfuGDYISWG9qV/CQ=="
-    },
-    "workbox-webpack-plugin": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-6.6.0.tgz",
-      "integrity": "sha512-xNZIZHalboZU66Wa7x1YkjIqEy1gTR+zPM+kjrYJzqN7iurYZBctBLISyScjhkJKYuRrZUP0iqViZTh8rS0+3A==",
-      "requires": {
-        "fast-json-stable-stringify": "^2.1.0",
-        "pretty-bytes": "^5.4.1",
-        "upath": "^1.2.0",
-        "webpack-sources": "^1.4.3",
-        "workbox-build": "6.6.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        },
-        "webpack-sources": {
-          "version": "1.4.3",
-          "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
-          "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
-          "requires": {
-            "source-list-map": "^2.0.0",
-            "source-map": "~0.6.1"
-          }
-        }
-      }
-    },
-    "workbox-window": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-6.6.0.tgz",
-      "integrity": "sha512-L4N9+vka17d16geaJXXRjENLFldvkWy7JyGxElRD0JvBxvFEd8LOhr+uXCcar/NzAmIBRv9EZ+M+Qr4mOoBITw==",
-      "requires": {
-        "@types/trusted-types": "^2.0.2",
-        "workbox-core": "6.6.0"
-      }
-    },
-    "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==",
-      "requires": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      }
-    },
-    "wrap-ansi-cjs": {
-      "version": "npm:wrap-ansi@7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "requires": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      }
-    },
-    "wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
-    },
-    "write-file-atomic": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-      "requires": {
-        "imurmurhash": "^0.1.4",
-        "is-typedarray": "^1.0.0",
-        "signal-exit": "^3.0.2",
-        "typedarray-to-buffer": "^3.1.5"
-      }
-    },
-    "ws": {
-      "version": "7.5.10",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
-      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
-      "requires": {}
-    },
-    "xml-name-validator": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
-      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw=="
-    },
-    "xmlchars": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
-    },
-    "y18n": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
-    },
-    "yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
-    },
-    "yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
-    },
-    "yargs": {
-      "version": "16.2.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
-      "requires": {
-        "cliui": "^7.0.2",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.0",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^20.2.2"
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
       }
-    },
-    "yargs-parser": {
-      "version": "20.2.9",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
-    },
-    "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=="
     }
   }
 }
diff --git a/package.json b/package.json
index d7d4dfd8..c1a28231 100644
--- a/package.json
+++ b/package.json
@@ -2,55 +2,115 @@
   "name": "seahaven-new-app",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:visual": "playwright test --config playwright.visual.config.ts",
+    "test:e2e:ui": "playwright test --ui",
+    "test:terraform-import-plan": "python3 scripts/test-terraform-import-plan-check.py",
+    "test:terraform-release-plan": "python3 scripts/test-terraform-release-plan-check.py",
+    "test:terraform-isolation": "node --test scripts/check-terraform-isolation.test.mjs",
+    "test:terraform": "node scripts/terraform-validate.mjs",
+    "test:hcp-run-guard": "python3 scripts/test-hcp-run-guard.py",
+    "test:cloudfront-release-verify": "bash scripts/test-verify-cloudfront-release.sh",
+    "test:github-workflows": "bash scripts/check-github-workflows.sh",
+    "lint": "eslint . --max-warnings=0",
+    "lint:fix": "eslint . --fix --max-warnings=0",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "governance": "node scripts/governance-check.mjs",
+    "verify": "npm run format:check && npm run lint && npm run build && npm test && npm run governance",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "src/{api,domain,app,lib,providers,infra,config,hooks,components}/**/*.{ts,tsx}": [
+      "eslint --fix --max-warnings=0",
+      "prettier --write"
+    ],
+    "*.{ts,tsx}": [
+      "prettier --write"
+    ],
+    "src/test/**/*.{test,integration.test}.{ts,tsx}": [
+      "prettier --write"
+    ],
+    "*.{json,css,md,mdc}": [
+      "prettier --write"
+    ],
+    "eslint.config.js": [
+      "prettier --write"
+    ],
+    "commitlint.config.js": [
+      "prettier --write"
+    ]
+  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@fullcalendar/daygrid": "^6.1.20",
-    "@fullcalendar/interaction": "^6.1.20",
-    "@fullcalendar/react": "^6.1.20",
-    "@fullcalendar/timegrid": "^6.1.20",
-    "@mui/icons-material": "^7.3.1",
-    "@mui/material": "^7.3.1",
-    "@reduxjs/toolkit": "^2.11.2",
-    "@tanstack/react-query": "^5.100.10",
-    "@tanstack/react-query-devtools": "^5.100.10",
+    "@fontsource/dm-sans": "^5.2.8",
+    "@fontsource/jetbrains-mono": "^5.2.8",
+    "@fontsource/montserrat": "^5.2.8",
+    "@fullcalendar/daygrid": "^6.1.21",
+    "@fullcalendar/interaction": "^6.1.21",
+    "@fullcalendar/react": "^6.1.21",
+    "@fullcalendar/timegrid": "^6.1.21",
+    "@generouted/react-router": "^1.20.2",
+    "@hookform/resolvers": "^5.4.0",
+    "@mui/icons-material": "^9.2.0",
+    "@mui/material": "^9.2.0",
+    "@sentry/react": "10.73.0",
+    "@tanstack/query-broadcast-client-experimental": "5.101.2",
+    "@tanstack/react-query": "5.101.2",
+    "@tanstack/react-query-devtools": "5.101.2",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.4",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.16.0",
-    "http-proxy-middleware": "^3.0.5",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "react-icons": "^5.5.0",
-    "react-redux": "^9.2.0",
-    "react-router-dom": "^7.9.4",
-    "react-scripts": "5.0.1",
-    "react-toastify": "^11.0.5",
-    "web-vitals": "^2.1.4"
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "clsx": "^2.1.1",
+    "ky": "^2.0.2",
+    "lucide-react": "^1.24.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-hook-form": "^7.81.0",
+    "react-icons": "^5.7.0",
+    "react-router": "^8.2.0",
+    "react-toastify": "^11.1.0",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+  "devDependencies": {
+    "@commitlint/cli": "^21.2.1",
+    "@commitlint/config-conventional": "^21.2.0",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.61.1",
+    "@sentry/cli": "3.7.0",
+    "@tailwindcss/vite": "^4.3.2",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/coverage-v8": "^4.1.10",
+    "eslint": "^10.7.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "globals": "^17.7.0",
+    "husky": "^9.1.7",
+    "jsdom": "^29.1.1",
+    "lint-staged": "^17.0.8",
+    "prettier": "^3.9.5",
+    "tailwindcss": "^4.3.2",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.63.0",
+    "vite": "^8.1.4",
+    "vitest": "^4.1.10"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "engines": {
+    "node": ">=22.22.1"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+  "packageManager": "npm@11.16.0"
 }
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 00000000..c37b71ed
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,32 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  testIgnore: "**/*.visual.spec.ts",
+  fullyParallel: true,
+  forbidOnly: Boolean(process.env.CI),
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI ? "github" : "list",
+  use: {
+    // Port 4173 isolates Playwright from the app's normal port 3000 server.
+    baseURL: "http://localhost:4173",
+    // Pin the browser timezone to UTC so date-to-ISO assertions in the default
+    // create flow are deterministic regardless of host locale. DST-transition
+    // scenarios override this with their own non-UTC context.
+    timezoneId: "UTC",
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  webServer: {
+    command: "npm run dev -- --port 4173 --strictPort",
+    url: "http://localhost:4173",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});
diff --git a/playwright.visual.config.ts b/playwright.visual.config.ts
new file mode 100644
index 00000000..f442c886
--- /dev/null
+++ b/playwright.visual.config.ts
@@ -0,0 +1,43 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  testMatch: "**/*.visual.spec.ts",
+  fullyParallel: false,
+  forbidOnly: true,
+  retries: 0,
+  workers: 1,
+  reporter: [["list"], ["html", { outputFolder: "playwright-report-visual", open: "never" }]],
+  outputDir: "test-results/visual",
+  snapshotPathTemplate: "{testDir}/__screenshots__/{testFilePath}/{arg}{ext}",
+  expect: {
+    toHaveScreenshot: {
+      animations: "disabled",
+      caret: "hide",
+      // Keep the changed-pixel budget strict while ignoring sub-perceptual
+      // antialiasing differences between local and hosted container runtimes.
+      maxDiffPixels: 5,
+      threshold: 0.1,
+    },
+  },
+  use: {
+    ...devices["Desktop Chrome"],
+    baseURL: "http://localhost:4174",
+    colorScheme: "light",
+    deviceScaleFactor: 1,
+    locale: "en-US",
+    launchOptions: {
+      args: ["--disable-gpu", "--font-render-hinting=none"],
+    },
+    reducedMotion: "reduce",
+    timezoneId: "UTC",
+    trace: "retain-on-failure",
+    viewport: { width: 1440, height: 1000 },
+  },
+  webServer: {
+    command: "npm run dev -- --port 4174 --strictPort",
+    url: "http://localhost:4174",
+    reuseExistingServer: false,
+    timeout: 120_000,
+  },
+});
diff --git a/public/favicon.ico b/public/favicon.ico
index a11777cc..95e736b5 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 42040d91..00000000
--- a/public/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
-    <!-- Font Awesome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Seahaven - Officetrax</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
diff --git a/public/logo192.png b/public/logo192.png
index fc44b0a3..20a794a1 100644
Binary files a/public/logo192.png and b/public/logo192.png differ
diff --git a/public/logo512.png b/public/logo512.png
index a4e47a65..b9dfa3d7 100644
Binary files a/public/logo512.png and b/public/logo512.png differ
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c77..f058e498 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,10 +1,10 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Work Orders",
+  "name": "Sea Haven - Work Orders",
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
+      "sizes": "64x64 32x32 16x16",
       "type": "image/x-icon"
     },
     {
@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#1c75bc",
   "background_color": "#ffffff"
 }
diff --git a/public/seahaven-logo.svg b/public/seahaven-logo.svg
new file mode 100644
index 00000000..1bcd9280
--- /dev/null
+++ b/public/seahaven-logo.svg
@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Seahaven Industries — official client wordmark. viewBox cropped to the
+     artwork bounds (original art sits in a middle band of a 100x100 canvas);
+     aspect ratio preserved, nothing distorted. -->
+<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="9 40 81 22" xml:space="preserve">
+<title>Seahaven Industries</title>
+<path fill="#A8D6EF" d="M6.3,55.1C6.3,55.1,6.3,55.1,6.3,55.1C6.3,55.1,6.3,55.1,6.3,55.1C6.3,55.1,6.3,55.1,6.3,55.1z"/>
+<g>
+	<path fill="#2BABE2" d="M19.4,43.8c-0.5-0.3-1-0.5-1.6-0.6c-0.6-0.1-1.2-0.2-1.8,0c-0.1,0-0.2,0.1-0.3,0.1
+		c-0.1,0.1-0.2,0.2-0.2,0.3c0,0.2,0.1,0.3,0.2,0.3c0.3,0.1,0.5,0.1,0.8,0.2c0.6,0.1,1.2,0.2,1.7,0.3c0.5,0.1,1,0.3,1.5,0.7
+		c0.5,0.4,0.8,0.9,0.8,1.6c0.1,1.5-0.5,2.6-1.8,3.4c-0.6,0.3-1.2,0.5-1.9,0.6c-0.8,0.1-1.6,0.1-2.4-0.1c-0.8-0.2-1.6-0.5-2.3-1
+		c-0.1-0.1-0.3-0.2-0.4-0.3c0.1-0.3,0.3-0.5,0.4-0.7c0.1-0.3,0.3-0.5,0.4-0.8c0.1-0.2,0.3-0.5,0.4-0.7c0.1,0.1,0.2,0.1,0.3,0.2
+		c1.1,0.7,2.2,1,3.5,0.9c0.2,0,0.4-0.1,0.6-0.2c0.1,0,0.2-0.1,0.2-0.2c0.2-0.2,0.1-0.4-0.1-0.6c-0.2-0.1-0.4-0.1-0.6-0.2
+		c-0.5-0.1-0.9-0.2-1.4-0.2c-0.5-0.1-0.9-0.2-1.3-0.4c-0.3-0.1-0.6-0.3-0.8-0.5c-0.6-0.5-0.8-1.1-0.8-1.9c0.1-1.3,0.7-2.2,1.8-2.8
+		c0.5-0.3,1-0.5,1.6-0.5c1.1-0.2,2.2-0.1,3.2,0.2c0.4,0.1,0.7,0.3,1,0.5c0.2,0.1,0.3,0.2,0.5,0.4C20.2,42.4,19.8,43.1,19.4,43.8z"/>
+	<g>
+		<path fill="#2A2627" d="M84.1,54.2c0.4,0.3,0.7,0.4,1.2,0.3c0.1,0,0.3,0,0.3-0.2c-0.1-0.1-0.2-0.1-0.3-0.2c-0.2,0-0.3-0.1-0.5-0.1
+			c-0.1,0-0.2-0.1-0.3-0.1c-0.5-0.2-0.7-0.7-0.4-1.2c0.1-0.3,0.3-0.4,0.6-0.5c0.6-0.2,1.1-0.2,1.7,0.1c0,0,0.1,0,0.1,0.1
+			c0,0,0,0,0.1,0.1c0,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.1,0.2-0.2,0.3C85.8,53,85.4,52.9,85,53c0,0-0.1,0.1-0.1,0.1
+			c0.1,0.1,0.2,0.1,0.4,0.2c0.2,0,0.4,0.1,0.6,0.1c0.7,0.2,0.8,0.7,0.5,1.3c-0.1,0.2-0.3,0.4-0.5,0.5c-0.7,0.3-1.5,0.2-2.1-0.3
+			c0.1-0.1,0.1-0.2,0.2-0.4C84,54.5,84.1,54.4,84.1,54.2z"/>
+		<path fill="#2A2627" d="M82.6,52.3c0,0.2,0,0.4-0.1,0.6c0,0.1,0,0.1-0.1,0.2c-0.4,0-0.7,0-1.1,0c0,0.1,0,0.2-0.1,0.3
+			c0.3,0,0.6,0,0.9,0c0.1,0.3-0.1,0.5-0.1,0.7c-0.3,0-0.6,0-0.9,0c0,0.1-0.1,0.1-0.1,0.2c0,0.1,0,0.1,0,0.2c0,0,0.1,0,0.1,0
+			c0.2,0,0.5,0,0.7,0c0.1,0,0.2,0,0.3,0c0.1,0.2,0,0.3,0,0.4c0,0.1,0,0.2-0.1,0.4c-0.2,0-0.4,0-0.7,0c-0.2,0-0.4,0-0.7,0
+			c-0.2,0-0.4,0-0.7,0c0-0.5,0.1-1,0.2-1.5c0.1-0.5,0.1-1,0.2-1.5C80.9,52.2,82.3,52.2,82.6,52.3z"/>
+		<g>
+			<path fill="#252122" d="M78.6,40.8c0.9,0,1.8,0,2.8,0c1,1.7,2,3.4,3,5.2c0-0.1,0.1-0.1,0.1-0.2c0.2-1.5,0.4-3,0.5-4.4
+				c0-0.2,0-0.4,0.1-0.6c0.4-0.1,2.4,0,2.7,0c0,0.3-1,8.8-1.2,9.6c-0.4,0.1-0.9,0-1.4,0c-0.5,0-0.9,0-1.4,0c-0.5-0.9-1-1.7-1.5-2.6
+				c-0.5-0.9-1-1.7-1.5-2.6c-0.1,0.2-0.1,0.3-0.1,0.5c0,0.2,0,0.3-0.1,0.5c0,0.2,0,0.3-0.1,0.5c0,0.2,0,0.3-0.1,0.5
+				c0,0.2,0,0.3-0.1,0.5c0,0.2,0,0.3-0.1,0.5c0,0.2,0,0.3-0.1,0.5c0,0.2,0,0.3-0.1,0.5c0,0.2,0,0.3,0,0.5c0,0.2,0,0.3-0.1,0.5
+				c0,0.2,0,0.3-0.1,0.5c-0.4,0.1-2.4,0.1-2.7,0C77.4,50.1,78.5,41.5,78.6,40.8z"/>
+			<path fill="#252122" d="M39.5,50.5c0-0.1,0-0.2,0-0.3c0.4-3.1,0.8-6.2,1.1-9.3c0.2,0,0.5,0,0.7,0c0.2,0,0.5,0,0.7,0
+				c0.2,0,0.4,0,0.7,0c0.2,0,0.4,0,0.7,0c0,0.6-0.1,1.2-0.2,1.8c-0.1,0.6-0.1,1.2-0.2,1.7c0,0,0,0,0,0c0,0,0,0,0,0c1,0,2,0,3,0
+				c0,0,0.1,0,0.1,0c0.1-1.2,0.3-2.3,0.4-3.5c0,0,0,0,0,0c0,0,0,0,0,0c0.1,0,0.2,0,0.4,0c0.8,0,1.5,0,2.3,0c0,0.1,0,0.2,0,0.2
+				c-0.1,0.8-0.2,1.6-0.3,2.4c-0.1,0.8-0.2,1.5-0.3,2.3c-0.1,0.8-0.2,1.5-0.3,2.3c-0.1,0.7-0.2,1.5-0.3,2.2c0,0.1,0,0.2,0,0.2
+				c-0.3,0.1-2.4,0.1-2.8,0c0.1-1.2,0.3-2.3,0.4-3.5c0,0,0-0.1,0-0.1c0,0,0,0,0,0c-0.9,0-1.8,0-2.7,0c-0.1,0-0.2,0-0.3,0
+				c0,0,0,0-0.1,0c-0.1,1.2-0.3,2.3-0.4,3.5C41.4,50.5,40.5,50.5,39.5,50.5z"/>
+			<path fill="#252122" d="M54.2,40.8c0.9,0,1.7,0,2.6,0c0.2,0.4,2.8,9.3,2.8,9.6c0,0,0,0,0,0c0,0,0,0,0,0c-0.8,0-1.7,0-2.5,0
+				c-0.1,0-0.1,0-0.2,0c-0.2-0.5-0.3-1-0.4-1.5c-0.3-0.1-2.8-0.1-3.8,0c-0.3,0.5-0.5,1-0.8,1.6c-0.3,0.1-2.4,0.1-2.8,0c0,0,0,0,0,0
+				c0,0,0,0,0,0c1.7-3.2,3.4-6.3,5.1-9.5C54.1,40.9,54.1,40.8,54.2,40.8z M55.1,44.1C55.1,44.1,55,44.1,55.1,44.1
+				c-0.5,0.9-0.9,1.7-1.4,2.5c0,0,0,0.1,0,0.1c0.2,0,0.4,0,0.7,0c0.2,0,0.5,0,0.7,0c0.2,0,0.4,0,0.7,0C55.6,45.8,55.3,45,55.1,44.1z
+				"/>
+			<path fill="#2BABE2" d="M33.4,40.8c0.9,0,1.7,0,2.6,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0.1,0.1,0.2,0.1,0.3c0.9,3.1,1.8,6.1,2.7,9.2
+				c0,0.1-0.1,0.1-0.2,0.1c-0.8,0-1.6,0-2.5,0c0,0-0.1,0-0.1,0c-0.2-0.5-0.3-1.1-0.5-1.6c-0.3-0.1-3.3-0.1-3.8,0
+				c-0.3,0.5-0.5,1-0.8,1.5c-0.3,0.1-2.2,0.1-2.7,0c-0.1-0.1,0-0.2,0.1-0.2c0.5-1,1.1-2,1.6-3c0.9-1.7,1.9-3.5,2.8-5.2
+				C32.9,41.6,33.1,41.2,33.4,40.8z M35,46.7c-0.2-0.8-0.4-1.6-0.6-2.4c0-0.1-0.1-0.1-0.1-0.2c0,0-0.1,0.1-0.1,0.1
+				c-0.4,0.8-0.8,1.6-1.3,2.5c0,0,0,0,0,0.1C33.3,46.8,34.7,46.8,35,46.7z"/>
+			<path fill="#252122" d="M64.9,50.5c-0.9,0-1.8,0-2.7,0c0,0,0,0,0,0c0,0,0,0,0,0c-0.9-3.2-1.8-6.3-2.7-9.5c0,0,0-0.1,0-0.1
+				c0.3-0.1,2.8-0.1,3.2,0c0.5,1.9,0.9,3.8,1.4,5.7c0.3-0.4,0.4-0.8,0.6-1.2c0.2-0.4,0.4-0.8,0.5-1.1c0.2-0.4,0.4-0.7,0.5-1.1
+				c0.2-0.4,0.4-0.8,0.5-1.1c0.2-0.4,0.4-0.8,0.6-1.1c1.1,0,2.1,0,3.2,0c0,0.1-0.1,0.2-0.1,0.4c-1.1,2-2.1,4-3.2,6.1
+				c-0.5,1-1,1.9-1.5,2.9C65.1,50.2,65,50.3,64.9,50.5z"/>
+			<path fill="#252122" d="M76,50.4c-0.3,0.1-6,0.1-6.5,0c0-0.1,0-0.1,0-0.2c0.1-1,0.2-1.9,0.4-2.9c0.1-1,0.2-1.9,0.3-2.9
+				c0.1-1,0.2-1.9,0.4-2.9c0-0.3,0.1-0.5,0.1-0.8c0,0,0,0,0.1,0c0,0,0,0,0,0c2,0,4,0,6,0c0.1,0,0.2,0,0.3,0c0,0,0,0,0.1,0
+				c0,0.4-0.1,0.8-0.1,1.2c0,0.4-0.1,0.8-0.2,1.2c-0.1,0-0.2,0-0.3,0c-1,0-2,0-3,0c-0.1,0-0.3,0-0.4,0c0,0.1,0,0.2-0.1,0.3
+				c0,0.2-0.1,0.5-0.1,0.7c0.1,0.1,0.2,0.1,0.3,0.1c0.8,0,1.5,0,2.3,0c0.1,0,0.3,0,0.4,0c0,0.3-0.2,1.8-0.3,2.3c-0.1,0-0.2,0-0.3,0
+				c-0.8,0-1.5,0-2.3,0c-0.1,0-0.3,0-0.4,0c-0.1,0.3-0.2,0.8-0.2,1.1c0.6,0,1.2,0,1.8,0c0.6,0,1.2,0,1.8,0c0,0,0,0.1,0,0.1
+				C76.2,48.8,76.1,49.6,76,50.4z"/>
+			<path fill="#2BABE2" d="M28.8,40.8C28.9,40.8,28.9,40.9,28.8,40.8c0,0.8-0.1,1.5-0.2,2.2c0,0.1,0,0.2-0.1,0.3
+				c-0.3,0.1-0.6,0-0.9,0c-0.3,0-0.6,0-0.9,0s-0.6,0-0.9,0c-0.3,0-0.6,0-0.9,0c-0.1,0.4-0.1,0.7-0.1,1c0.1,0.1,0.2,0.1,0.3,0.1
+				c0.7,0,1.5,0,2.2,0c0.1,0,0.3,0,0.4,0c0,0.3-0.1,1.7-0.3,2.3c-0.1,0-0.2,0-0.3,0c-0.8,0-1.5,0-2.3,0c-0.1,0-0.3,0-0.4,0
+				c-0.1,0.4-0.1,0.7-0.1,1.1c0.3,0.1,0.6,0,0.9,0c0.3,0,0.6,0,0.9,0c0.3,0,0.6,0,0.9,0c0.3,0,0.6,0,0.9,0c0,0.3-0.2,2-0.3,2.5
+				c0,0-0.1,0-0.1,0c-2.1,0-4.1,0-6.2,0c0,0-0.1,0-0.1,0c0,0,0,0,0,0c0,0,0,0,0,0c0.4-3.2,0.8-6.4,1.2-9.6c0.1,0,0.2,0,0.3,0
+				c2,0,4,0,5.9,0C28.7,40.8,28.8,40.8,28.8,40.8z"/>
+			<path fill="#282425" d="M52,55.3c0.1-1,0.2-2,0.4-3c0.3,0,0.6,0,0.9,0c0.4,0.5,0.6,1,1,1.6c0.1-0.1,0.1-0.2,0.1-0.3
+				c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.3c0.2,0,0.4,0,0.6,0c0.1,0,0.1,0,0.2,0
+				c0,0.3-0.2,1.9-0.3,3c-0.1,0.1-0.3,0-0.4,0c-0.1,0-0.3,0-0.4,0c-0.3-0.5-0.6-1-0.9-1.6c-0.1,0.5-0.1,1-0.2,1.5
+				C52.6,55.3,52.3,55.3,52,55.3z"/>
+			<path fill="#282425" d="M56.6,55.3c0.1-1,0.2-2,0.4-3c0.1,0,0.2,0,0.2,0c0.3,0,0.7,0,1,0c0.2,0,0.4,0,0.7,0.1
+				c0.5,0.2,0.7,0.5,0.8,1c0.1,1-0.6,1.9-1.6,2C57.6,55.3,57.1,55.3,56.6,55.3z M57.6,54.5c0.1,0,0.2,0,0.3,0c0.4,0,0.6-0.2,0.8-0.5
+				c0.2-0.4-0.1-0.9-0.6-0.9c-0.1,0-0.2,0-0.4,0C57.7,53.5,57.7,54,57.6,54.5z"/>
+			<path fill="#282425" d="M73.8,52.2c0,0,0.1,0,0.1,0c0.4,0,0.8,0,1.1,0c0.1,0,0.3,0,0.4,0c0.5,0.1,0.7,0.5,0.7,0.9
+				c0,0.4-0.2,0.7-0.5,1c-0.1,0-0.1,0.1-0.2,0.1c0.1,0.3,0.4,0.6,0.6,1c-0.3,0.1-0.7,0-1,0c-0.2-0.3-0.3-0.7-0.6-1
+				c-0.1,0.1-0.1,0.1-0.1,0.2c0,0.1,0,0.2,0,0.4c0,0.1,0,0.3-0.1,0.4c-0.3,0-0.6,0-0.8,0C73.4,54.9,73.7,52.6,73.8,52.2z M74.4,53.6
+				c0.2,0,0.3,0,0.5,0c0.1,0,0.2-0.1,0.2-0.1c0.1-0.1,0.1-0.2,0.1-0.4c0-0.1-0.1-0.2-0.2-0.2c-0.2,0-0.3,0-0.5,0
+				C74.5,53.2,74.5,53.4,74.4,53.6z"/>
+			<path fill="#292627" d="M61.3,52.2c0.3,0,0.6,0,0.9,0c0.1,0.2,0,0.3,0,0.4c-0.1,0.4-0.1,0.9-0.2,1.3c0,0.1,0,0.2,0,0.2
+				c0,0.3,0.3,0.4,0.6,0.3c0.2-0.1,0.4-0.2,0.4-0.5c0-0.2,0.1-0.4,0.1-0.5c0.1-0.4,0.1-0.8,0.2-1.3c0.2,0,0.3,0,0.5,0
+				c0.1,0,0.3,0,0.4,0c0,0.1,0,0.1,0,0.1c-0.1,0.6-0.1,1.1-0.2,1.7c-0.1,0.9-0.8,1.3-1.5,1.3c-0.1,0-0.2,0-0.4,0
+				c-0.7-0.1-1.1-0.6-1.1-1.3c0-0.5,0.1-0.9,0.2-1.4C61.3,52.5,61.3,52.4,61.3,52.2z"/>
+			<path fill="#2A2627" d="M66.6,53.1c0.1,0.1,0.2,0.1,0.4,0.2c0.2,0,0.4,0.1,0.6,0.1c0.7,0.2,0.8,0.8,0.5,1.3
+				c-0.1,0.3-0.3,0.5-0.6,0.5c-0.7,0.2-1.3,0.2-2-0.2c0,0-0.1-0.1-0.1-0.1c0.1-0.2,0.2-0.5,0.4-0.7c0.1,0.1,0.2,0.1,0.3,0.2
+				c0.3,0.1,0.5,0.2,0.8,0.2c0.1,0,0.1,0,0.2,0c0.1,0,0.1-0.1,0.1-0.1c0-0.1,0-0.1-0.1-0.1c-0.1,0-0.3-0.1-0.4-0.1
+				c-0.2-0.1-0.4-0.1-0.6-0.2c-0.4-0.2-0.6-0.6-0.4-1.1c0.1-0.3,0.4-0.5,0.7-0.7c0.5-0.2,1-0.2,1.5,0c0.1,0,0.1,0.1,0.2,0.1
+				c0,0,0.1,0.1,0.1,0.1c-0.1,0.2-0.2,0.4-0.4,0.6c-0.1,0-0.1,0-0.2-0.1c-0.3-0.1-0.5-0.1-0.8-0.1C66.7,53,66.6,53,66.6,53.1z"/>
+			<path fill="#292626" d="M72.2,52.3c0,0.2,0,0.5-0.1,0.8c-0.2,0.1-0.5,0-0.8,0c-0.1,0.4-0.1,0.7-0.2,1.1c-0.1,0.4-0.1,0.7-0.1,1.1
+				c-0.3,0-0.6,0-0.9,0c0-0.4,0.1-0.7,0.1-1.1c0-0.4,0.1-0.7,0.1-1.1c-0.3-0.1-0.5,0-0.7,0c-0.1-0.3,0-0.5,0.1-0.8
+				C70,52.2,71.8,52.2,72.2,52.3z"/>
+			<path fill="#292627" d="M49.9,52.2c0.3,0,0.5,0,0.8,0c0,0.5-0.1,1-0.2,1.5c0,0.5-0.1,1-0.2,1.5c-0.3,0-0.6,0-0.8,0
+				C49.5,55,49.7,52.8,49.9,52.2z"/>
+			<path fill="#292526" d="M78,52.2c0.3,0,0.6,0,0.8,0c0,0.1,0,0.1,0,0.2c-0.1,0.6-0.1,1.1-0.2,1.7c0,0.4-0.1,0.7-0.1,1.1
+				c-0.1,0.1-0.3,0-0.4,0c-0.1,0-0.3,0-0.5,0C77.7,54.3,77.8,53.3,78,52.2z"/>
+			<g>
+				<path fill="#60B3E3" d="M42.6,55.2c-0.9,0.1-2,0.1-3.4,0.5c-0.7,0.2-2,0.4-3.5,1.1c-0.7,0.3-0.5,0.3-2.2,1.2
+					c-1.2,0.6-2,1.1-3.1,1.5c-1.3,0.6-2,0.9-2.8,1c-0.8,0.2-2.1,0.3-3.5,0c-0.5-0.1-1.1-0.2-1.9-0.6c-0.9-0.5-1.5-1.1-1.8-1.5
+					c0.2,0,0.4,0,0.7,0c1-0.1,2.3-0.1,3.7-0.6c0.4-0.1,0.8-0.3,1.6-0.6c0.1,0,0.8-0.3,1.6-0.7c1.9-0.9,3.9-1.9,4-2
+					c0,0,3.2-1.7,5-2.6c0.2-0.1,0.6-0.3,1.2-0.3c0.3,0,0.6,0,0.9,0c0.6,0,1.4,0.1,2.4,0.3c1.2,0.3,2,0.7,2.4,0.9
+					c0.2,0.1,1,0.6,2,1.4c0.5,0.4,0.8,0.7,1.1,1C45.3,55.1,43.7,55.1,42.6,55.2z"/>
+				<path fill="#2BABE2" d="M11.5,55c1.1-0.3,1.5-0.3,1.5-0.3c0.5-0.1,0.9-0.1,1.2-0.1c0.8,0,1.4,0,1.7,0.1c1,0.1,1.8,0.3,2.2,0.5
+					c0.4,0.1,1,0.4,2.3,0.9c0.7,0.3,0.8,0.3,1.1,0.4c0.4,0.1,1.1,0.4,1.9,0.5c0.6,0.1,1.6,0.3,3,0.2c1.2-0.1,2-0.4,2.2-0.5
+					c0.4-0.2,0.7-0.3,1.4-0.7c1.1-0.6,1.7-1,2.8-1.7c1.5-0.9,2.2-1.4,2.9-1.7c1.1-0.5,1.9-0.8,1.9-0.9c0-0.1-0.8,0-1.3,0.1
+					c-0.7,0.2-1.2,0.3-1.2,0.4c-1.1,0.4-2.4,0.8-3.6,1.1c-1.4,0.3-2.4,0.6-3.8,0.6c-1.6,0-2.8-0.3-3.5-0.5c-1-0.2-1.1-0.4-2.7-0.8
+					c-1.1-0.3-1.6-0.4-2.2-0.5c-0.6-0.1-1.7-0.2-3.1,0.1c-0.5,0.1-1.2,0.3-2,0.7C12.6,53.7,11.5,55,11.5,55z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/scripts/check-github-workflows.sh b/scripts/check-github-workflows.sh
new file mode 100755
index 00000000..7a27c1ac
--- /dev/null
+++ b/scripts/check-github-workflows.sh
@@ -0,0 +1,50 @@
+#!/usr/bin/env bash
+# bash -n every shell script and every workflow `run:` block. actionlint when present.
+set -euo pipefail
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+cd "${ROOT}"
+
+for script in scripts/*.sh; do
+  bash -n "${script}"
+done
+
+python3 - "${ROOT}" << 'PY'
+import pathlib, re, subprocess, sys, tempfile
+root = pathlib.Path(sys.argv[1])
+failures = 0
+workflow_count = 0
+block_count = 0
+for workflow in sorted((root / ".github/workflows").glob("*.yml")) + sorted(
+    (root / ".github/workflows").glob("*.yaml")
+):
+    workflow_count += 1
+    text = workflow.read_text(encoding="utf-8")
+    blocks = []
+    for match in re.finditer(r"^(\s+)run:\s*\|[^\n]*\n((?:\1  .*\n)+)", text, re.M):
+        indent = len(match.group(1)) + 2
+        body = []
+        for line in match.group(2).splitlines():
+            body.append(line[indent:] if len(line) >= indent else line.lstrip())
+        blocks.append("\n".join(body) + "\n")
+    block_count += len(blocks)
+    for index, block in enumerate(blocks, start=1):
+        with tempfile.NamedTemporaryFile("w", suffix=".sh", delete=False) as handle:
+            handle.write(block)
+            name = handle.name
+        result = subprocess.run(["bash", "-n", name], capture_output=True, text=True)
+        pathlib.Path(name).unlink()
+        if result.returncode != 0:
+            failures += 1
+            sys.stderr.write(f"{workflow.relative_to(root)} run block {index}: {result.stderr}")
+if failures:
+    raise SystemExit(1)
+print(
+    f"bash -n passed for scripts and {block_count} run blocks in {workflow_count} workflows"
+)
+PY
+
+if command -v actionlint >/dev/null 2>&1; then
+  actionlint -color
+else
+  echo "actionlint not installed; skipped (CI installs it)"
+fi
diff --git a/scripts/check-terraform-import-plan.py b/scripts/check-terraform-import-plan.py
new file mode 100755
index 00000000..1e65685f
--- /dev/null
+++ b/scripts/check-terraform-import-plan.py
@@ -0,0 +1,509 @@
+#!/usr/bin/env python3
+"""Reject plans that violate the frontend Terraform adoption boundary."""
+
+from __future__ import annotations
+
+import argparse
+import json
+import sys
+from pathlib import Path
+from typing import Any
+
+from terraform_import_plan_resources import (
+    CONTROLLED_UPDATE_ADDRESSES,
+    ENVIRONMENT_CONFIG,
+    REQUIRED_IMPORT_IDS,
+    REQUIRED_RESOURCES,
+)
+
+BUCKET_POLICY_ADDRESS = "module.environment_owned.aws_s3_bucket_policy.site"
+BUCKET_ADDRESS = "module.environment_owned.aws_s3_bucket.site"
+DISTRIBUTION_ADDRESS = (
+    "module.environment_owned.aws_cloudfront_distribution.site"
+)
+ROLE_ADDRESS = "module.environment_owned.aws_iam_role.github_deploy"
+TAG_UPDATE_ADDRESSES = CONTROLLED_UPDATE_ADDRESSES - {BUCKET_POLICY_ADDRESS}
+OWNERSHIP_TAGS = {
+    "Environment": None,
+    "ManagedBy": "terraform",
+    "Ownership": "terraform",
+    "Project": "shoc-frontend",
+}
+
+
+def parse_args() -> argparse.Namespace:
+    parser = argparse.ArgumentParser()
+    parser.add_argument("plan_json", type=Path)
+    parser.add_argument(
+        "--environment",
+        required=True,
+        choices=sorted(REQUIRED_RESOURCES),
+        help="Exact environment ownership boundary expected in the plan.",
+    )
+    modes = parser.add_mutually_exclusive_group()
+    modes.add_argument(
+        "--post-import-no-op",
+        action="store_true",
+        help=(
+            "Require all managed resources to be no-op after import and forbid "
+            "import metadata."
+        ),
+    )
+    modes.add_argument(
+        "--allow-update-address",
+        action="append",
+        default=[],
+        metavar="ADDRESS",
+        help=(
+            "Enter controlled-update mode and allow one exact reviewed address. "
+            "Repeat for every expected update."
+        ),
+    )
+    return parser.parse_args()
+
+
+def _load_plan(path: Path) -> dict[str, Any]:
+    value = json.loads(path.read_text(encoding="utf-8"))
+    if not isinstance(value, dict):
+        raise ValueError("plan JSON root must be an object")
+    if not isinstance(value.get("resource_changes"), list):
+        raise ValueError("plan JSON must contain a resource_changes array")
+    return value
+
+
+def _validate_import_metadata(
+    *,
+    address: str,
+    change: dict[str, Any],
+    environment: str,
+) -> list[str]:
+    importing = change.get("importing")
+    if not isinstance(importing, dict) or set(importing) != {"id"}:
+        return [f"{address}: import metadata must be exactly {{'id': <string>}}"]
+
+    import_id = importing.get("id")
+    if not isinstance(import_id, str) or not import_id.strip():
+        return [f"{address}: import ID must be a non-empty string"]
+    if import_id.startswith("REPLACE_WITH_"):
+        return [f"{address}: import ID is still a placeholder"]
+
+    expected = REQUIRED_IMPORT_IDS[environment][address]
+    if expected is not None and import_id != expected:
+        return [f"{address}: expected import ID {expected!r}, got {import_id!r}"]
+
+    other_environment_ids = {
+        imports[address]
+        for name, imports in REQUIRED_IMPORT_IDS.items()
+        if name != environment and imports[address] is not None
+    }
+    if import_id in other_environment_ids:
+        return [f"{address}: import ID belongs to another environment"]
+    return []
+
+
+def _contains_unknown(value: Any) -> bool:
+    if value is True:
+        return True
+    if isinstance(value, dict):
+        return any(_contains_unknown(item) for item in value.values())
+    if isinstance(value, list):
+        return any(_contains_unknown(item) for item in value)
+    return False
+
+
+def _changed_leaf_paths(
+    before: Any,
+    after: Any,
+    path: tuple[str, ...] = (),
+) -> set[tuple[str, ...]]:
+    if isinstance(before, dict) and isinstance(after, dict):
+        result: set[tuple[str, ...]] = set()
+        for key in set(before) | set(after):
+            result.update(
+                _changed_leaf_paths(
+                    before.get(key),
+                    after.get(key),
+                    (*path, str(key)),
+                )
+            )
+        return result
+    if before != after:
+        return {path}
+    return set()
+
+
+def _canonical(value: Any) -> Any:
+    if isinstance(value, dict):
+        return {key: _canonical(value[key]) for key in sorted(value)}
+    if isinstance(value, list):
+        items = [_canonical(item) for item in value]
+        return sorted(items, key=lambda item: json.dumps(item, sort_keys=True))
+    return value
+
+
+def _parse_policy(value: Any, address: str, side: str) -> tuple[Any, list[str]]:
+    if not isinstance(value, str):
+        return None, [f"{address}: {side} policy must be a JSON string"]
+    try:
+        document = json.loads(value)
+    except json.JSONDecodeError:
+        return None, [f"{address}: {side} policy is not valid JSON"]
+    if not isinstance(document, dict):
+        return None, [f"{address}: {side} policy must be a JSON object"]
+    return _canonical(document), []
+
+
+def _distribution_id(
+    plan: dict[str, Any],
+    environment: str,
+) -> str | None:
+    configured = ENVIRONMENT_CONFIG[environment]["distribution_id"]
+    if isinstance(configured, str):
+        return configured
+    for resource in plan["resource_changes"]:
+        if not isinstance(resource, dict) or resource.get("address") != DISTRIBUTION_ADDRESS:
+            continue
+        after = resource.get("change", {}).get("after")
+        if isinstance(after, dict):
+            identifier = after.get("id")
+            if isinstance(identifier, str) and identifier.strip():
+                return identifier
+    return None
+
+
+def _expected_pre_adoption_bucket_policy(
+    environment: str,
+    distribution_id: str,
+) -> dict[str, Any]:
+    config = ENVIRONMENT_CONFIG[environment]
+    bucket_arn = f"arn:aws:s3:::{config['bucket_name']}"
+    distribution_arn = (
+        f"arn:aws:cloudfront::396287094661:distribution/{distribution_id}"
+    )
+    return _canonical(
+        {
+            "Version": "2012-10-17",
+            "Statement": [
+                {
+                    "Effect": "Allow",
+                    "Principal": {
+                        "AWS": config["bucket_auto_delete_helper_role_arn"]
+                    },
+                    "Action": [
+                        "s3:DeleteObject*",
+                        "s3:GetBucket*",
+                        "s3:List*",
+                        "s3:PutBucketPolicy",
+                    ],
+                    "Resource": [bucket_arn, f"{bucket_arn}/*"],
+                },
+                {
+                    "Effect": "Allow",
+                    "Principal": {"Service": "cloudfront.amazonaws.com"},
+                    "Action": "s3:GetObject",
+                    "Resource": f"{bucket_arn}/*",
+                    "Condition": {
+                        "StringEquals": {"AWS:SourceArn": distribution_arn}
+                    },
+                },
+                {
+                    "Effect": "Deny",
+                    "Principal": {"AWS": "*"},
+                    "Action": "s3:*",
+                    "Resource": [bucket_arn, f"{bucket_arn}/*"],
+                    "Condition": {"Bool": {"aws:SecureTransport": "false"}},
+                },
+            ],
+        }
+    )
+
+
+def _expected_bucket_policy(environment: str, distribution_id: str) -> dict[str, Any]:
+    bucket = ENVIRONMENT_CONFIG[environment]["bucket_name"]
+    bucket_arn = f"arn:aws:s3:::{bucket}"
+    distribution_arn = (
+        f"arn:aws:cloudfront::396287094661:distribution/{distribution_id}"
+    )
+    return _canonical(
+        {
+            "Version": "2012-10-17",
+            "Statement": [
+                {
+                    "Effect": "Allow",
+                    "Principal": {"Service": "cloudfront.amazonaws.com"},
+                    "Action": "s3:GetObject",
+                    "Resource": f"{bucket_arn}/*",
+                    "Condition": {
+                        "StringEquals": {"AWS:SourceArn": distribution_arn}
+                    },
+                },
+                {
+                    "Effect": "Deny",
+                    "Principal": {"AWS": "*"},
+                    "Action": "s3:*",
+                    "Resource": [bucket_arn, f"{bucket_arn}/*"],
+                    "Condition": {"Bool": {"aws:SecureTransport": "false"}},
+                },
+            ],
+        }
+    )
+
+
+def _validate_tag_update(
+    address: str,
+    before: dict[str, Any],
+    after: dict[str, Any],
+    environment: str,
+) -> list[str]:
+    changed = _changed_leaf_paths(before, after)
+    invalid = {
+        path
+        for path in changed
+        if len(path) != 2 or path[0] not in {"tags", "tags_all"}
+    }
+    violations = [
+        f"{address}: controlled tag update changes forbidden path {'.'.join(path)}"
+        for path in sorted(invalid)
+    ]
+    expected = {**OWNERSHIP_TAGS, "Environment": environment}
+    if address == ROLE_ADDRESS:
+        expected["HcpTerraformWorkspace"] = ENVIRONMENT_CONFIG[environment][
+            "workspace_name"
+        ]
+    if address == BUCKET_ADDRESS:
+        expected["aws-cdk:auto-delete-objects"] = None
+    expected_after = {
+        key: value for key, value in expected.items() if value is not None
+    }
+    for tag_attribute in ("tags", "tags_all"):
+        if after.get(tag_attribute) != expected_after:
+            violations.append(
+                f"{address}: {tag_attribute} must exactly match adopted ownership tags"
+            )
+    for path in sorted(changed - invalid):
+        key = path[1]
+        if key not in expected:
+            violations.append(f"{address}: tag {key!r} is not an ownership tag")
+        elif key == "aws-cdk:auto-delete-objects" and key in after.get(path[0], {}):
+            violations.append(
+                f"{address}: legacy auto-delete ownership tag was not removed"
+            )
+        elif after.get(path[0], {}).get(key) != expected[key]:
+            violations.append(
+                f"{address}: tag {key!r} does not have its expected adopted value"
+            )
+    if not changed:
+        violations.append(f"{address}: update has no changed leaf values")
+    return violations
+
+
+def _validate_policy_update(
+    address: str,
+    before: dict[str, Any],
+    after: dict[str, Any],
+    environment: str,
+    distribution_id: str | None,
+) -> list[str]:
+    changed = _changed_leaf_paths(before, after)
+    if changed != {("policy",)}:
+        return [f"{address}: policy update changes forbidden attributes {sorted(changed)!r}"]
+    before_policy, violations = _parse_policy(before.get("policy"), address, "before")
+    after_policy, after_violations = _parse_policy(
+        after.get("policy"), address, "after"
+    )
+    violations.extend(after_violations)
+    if before_policy == after_policy:
+        violations.append(f"{address}: policy semantics did not change")
+    if distribution_id is None:
+        violations.append(
+            f"{address}: cannot verify policy without the pinned distribution ID"
+        )
+        return violations
+    expected_before = _expected_pre_adoption_bucket_policy(
+        environment, distribution_id
+    )
+    expected_after = _expected_bucket_policy(environment, distribution_id)
+    if before_policy is not None and before_policy != expected_before:
+        violations.append(f"{address}: pre-adoption policy semantics are not exact")
+    if after_policy is not None and after_policy != expected_after:
+        violations.append(f"{address}: post-adoption policy semantics are not exact")
+    return violations
+
+
+def _validate_controlled_update(
+    address: str,
+    change: dict[str, Any],
+    environment: str,
+    distribution_id: str | None,
+) -> list[str]:
+    violations: list[str] = []
+    replace_paths = change.get("replace_paths", [])
+    if replace_paths not in (None, []):
+        violations.append(f"{address}: replace_paths must be empty")
+    if _contains_unknown(change.get("after_unknown", {})):
+        violations.append(f"{address}: controlled update contains unknown values")
+    before = change.get("before")
+    after = change.get("after")
+    if not isinstance(before, dict) or not isinstance(after, dict):
+        return [*violations, f"{address}: controlled update requires before/after objects"]
+    if address in TAG_UPDATE_ADDRESSES:
+        violations.extend(_validate_tag_update(address, before, after, environment))
+    elif address == BUCKET_POLICY_ADDRESS:
+        violations.extend(
+            _validate_policy_update(
+                address,
+                before,
+                after,
+                environment,
+                distribution_id,
+            )
+        )
+    return violations
+
+
+def check_plan(
+    plan: dict[str, Any],
+    *,
+    environment: str,
+    mode: str,
+    allowed_updates: set[str],
+) -> list[str]:
+    violations: list[str] = []
+    invalid_allowed = allowed_updates - CONTROLLED_UPDATE_ADDRESSES
+    for address in sorted(invalid_allowed):
+        violations.append(
+            f"{address}: address is not eligible for the controlled adoption update"
+        )
+
+    distribution_id = _distribution_id(plan, environment)
+    seen_addresses: set[str] = set()
+    seen_updates: set[str] = set()
+    required_resources = REQUIRED_RESOURCES[environment]
+    for resource in plan["resource_changes"]:
+        if not isinstance(resource, dict):
+            violations.append("<unknown>: resource change must be an object")
+            continue
+        if resource.get("mode", "managed") != "managed":
+            continue
+        address = resource.get("address")
+        if not isinstance(address, str):
+            violations.append("<unknown>: managed resource has no valid address")
+            continue
+        if address in seen_addresses:
+            violations.append(f"{address}: duplicate managed resource change")
+        seen_addresses.add(address)
+
+        expected_type = required_resources.get(address)
+        if expected_type is None:
+            violations.append(f"{address}: managed address is outside the ownership boundary")
+        elif resource.get("type") != expected_type:
+            violations.append(
+                f"{address}: expected managed type {expected_type!r}, "
+                f"got {resource.get('type')!r}"
+            )
+
+        change = resource.get("change")
+        if not isinstance(change, dict):
+            violations.append(f"{address}: missing change object")
+            continue
+        actions = change.get("actions")
+        if not isinstance(actions, list) or not all(
+            isinstance(action, str) for action in actions
+        ):
+            violations.append(f"{address}: actions must be a string array")
+            continue
+
+        if change.get("replace_paths") not in (None, []):
+            violations.append(f"{address}: replace_paths must be empty")
+
+        if mode == "import":
+            if actions != ["no-op"]:
+                violations.append(
+                    f"{address}: import mode requires no-op, got {actions!r}"
+                )
+            if expected_type is not None:
+                violations.extend(
+                    _validate_import_metadata(
+                        address=address,
+                        change=change,
+                        environment=environment,
+                    )
+                )
+        elif mode == "post-import":
+            if actions != ["no-op"]:
+                violations.append(
+                    f"{address}: post-import mode requires no-op, got {actions!r}"
+                )
+            if "importing" in change:
+                violations.append(
+                    f"{address}: import metadata is forbidden in post-import mode"
+                )
+        else:
+            if "importing" in change:
+                violations.append(
+                    f"{address}: import metadata is forbidden in controlled-update mode"
+                )
+            if actions == ["update"]:
+                seen_updates.add(address)
+                if address not in allowed_updates:
+                    violations.append(f"{address}: update is not explicitly allowlisted")
+                else:
+                    violations.extend(
+                        _validate_controlled_update(
+                            address,
+                            change,
+                            environment,
+                            distribution_id,
+                        )
+                    )
+            elif actions != ["no-op"]:
+                violations.append(f"{address}: unsafe controlled actions {actions!r}")
+
+    for missing in sorted(set(required_resources) - seen_addresses):
+        violations.append(f"{missing}: required managed resource is absent")
+    for unused in sorted(allowed_updates - seen_updates):
+        violations.append(f"{unused}: allowlisted update address is not updating")
+    return violations
+
+
+def main() -> int:
+    args = parse_args()
+    try:
+        plan = _load_plan(args.plan_json)
+    except (OSError, ValueError, json.JSONDecodeError) as error:
+        print(f"FAIL: unable to read Terraform plan JSON: {error}", file=sys.stderr)
+        return 1
+
+    allowed_updates = set(args.allow_update_address or [])
+    if args.post_import_no_op:
+        mode = "post-import"
+    elif allowed_updates:
+        mode = "controlled"
+    else:
+        mode = "import"
+    violations = check_plan(
+        plan,
+        environment=args.environment,
+        mode=mode,
+        allowed_updates=allowed_updates,
+    )
+    if violations:
+        print("FAIL: Terraform plan is not adoption-safe", file=sys.stderr)
+        for violation in violations:
+            print(f"  - {violation}", file=sys.stderr)
+        return 1
+
+    label = {
+        "import": "zero-change import",
+        "post-import": "post-import no-op",
+        "controlled": "controlled update",
+    }[mode]
+    print(
+        f"PASS: {label} plan has {len(REQUIRED_RESOURCES[args.environment])} "
+        f"managed resources and {len(allowed_updates)} exact updates"
+    )
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/scripts/check-terraform-isolation.mjs b/scripts/check-terraform-isolation.mjs
new file mode 100644
index 00000000..6386456b
--- /dev/null
+++ b/scripts/check-terraform-isolation.mjs
@@ -0,0 +1,137 @@
+// Terraform/application change isolation gate.
+//
+// A merge to `dev` that touches `terraform/**` queues an HCP Terraform VCS run
+// on the workspace. If the same merge also changes deployable application
+// code, the content release and the VCS run race for the workspace lock
+// (backend incident, 2026-09-04). This gate fails a pull request that mixes the
+// two, so Terraform changes ship in their own PR and their VCS run is confirmed
+// or discarded by a human before the next content release.
+//
+// Files that may accompany a Terraform change without triggering a release:
+// the Terraform tree itself, its plan-guard tooling, and documentation.
+//
+// Usage:
+//   node scripts/check-terraform-isolation.mjs --base <ref> --head <ref>
+//   git diff --name-only A B | node scripts/check-terraform-isolation.mjs --stdin
+//
+// TERRAFORM_ISOLATION_OVERRIDE=true downgrades a failure to a warning. CI sets
+// it only when the PR carries the `terraform-isolation-override` label, which
+// reviewers grant to the rare change that must introduce Terraform variables
+// together with the workflow that consumes them. The checker has no memory of
+// a previous pass: the same mixed diff fails again as soon as the override
+// env is unset (label removal).
+import { execFileSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+
+export const OVERRIDE_LABEL = "terraform-isolation-override";
+
+export function isTerraformPath(file) {
+  return file.startsWith("terraform/");
+}
+
+// Markdown under terraform/ does not queue an HCP VCS run (workspace triggers
+// are terraform/live/dev/** and terraform/live/modules/**), so it is not a
+// Terraform change for the mixed-PR check.
+export function isTerraformInfrastructurePath(file) {
+  return isTerraformPath(file) && !file.endsWith(".md");
+}
+
+export function mayAccompanyTerraform(file) {
+  if (isTerraformPath(file)) return true;
+  if (file.endsWith(".md")) return true;
+  if (file.startsWith("docs/")) return true;
+  if (/^scripts\/[^/]*terraform[^/]*$/.test(file)) return true;
+  if (
+    /^scripts\/(hcp-run-guard|test-hcp-run-guard|verify-cloudfront-release|test-verify-cloudfront-release|summarize-cloudfront-live-state|check-github-workflows|read-release-pointer)\.[a-z]+$/.test(
+      file,
+    )
+  ) {
+    return true;
+  }
+  if (file.startsWith("scripts/testdata/terraform-")) return true;
+  return false;
+}
+
+/**
+ * @param {string[]} files changed paths relative to the repository root
+ * @returns {{ terraform: string[], application: string[], mixed: boolean }}
+ */
+export function classifyChangedFiles(files) {
+  const unique = [...new Set(files.map((file) => file.trim()).filter(Boolean))].sort();
+  const terraform = unique.filter(isTerraformInfrastructurePath);
+  const application = unique.filter((file) => !mayAccompanyTerraform(file));
+  return {
+    terraform,
+    application,
+    mixed: terraform.length > 0 && application.length > 0,
+  };
+}
+
+function changedFilesFromGit(base, head) {
+  const mergeBase = execFileSync("git", ["merge-base", base, head], {
+    cwd: ROOT,
+    encoding: "utf8",
+  }).trim();
+  return execFileSync(
+    "git",
+    ["diff", "--name-only", "--diff-filter=ACDMR", "--no-renames", mergeBase, head],
+    { cwd: ROOT, encoding: "utf8" },
+  )
+    .split("\n")
+    .filter(Boolean);
+}
+
+function parseArgs(argv) {
+  const options = { base: null, head: "HEAD", stdin: false };
+  for (let index = 0; index < argv.length; index += 1) {
+    const argument = argv[index];
+    if (argument === "--base") options.base = argv[++index];
+    else if (argument === "--head") options.head = argv[++index];
+    else if (argument === "--stdin") options.stdin = true;
+    else throw new Error(`unknown argument: ${argument}`);
+  }
+  if (!options.stdin && !options.base) {
+    throw new Error("provide --base <ref> (and optionally --head <ref>) or --stdin");
+  }
+  return options;
+}
+
+function main(argv) {
+  const options = parseArgs(argv);
+  const files = options.stdin
+    ? readFileSync(0, "utf8").split("\n")
+    : changedFilesFromGit(options.base, options.head);
+  const result = classifyChangedFiles(files);
+  const override = process.env.TERRAFORM_ISOLATION_OVERRIDE === "true";
+
+  console.log("─".repeat(64));
+  console.log(
+    `terraform isolation gate: ${result.terraform.length} terraform file(s), ${result.application.length} application file(s)`,
+  );
+  if (!result.mixed) {
+    console.log("  PASS: Terraform and application changes are not mixed");
+    return 0;
+  }
+  console.log("  Terraform files:");
+  for (const file of result.terraform) console.log(`    ${file}`);
+  console.log("  Application files that cannot ship in the same PR:");
+  for (const file of result.application) console.log(`    ${file}`);
+  if (override) {
+    console.log(
+      `  WARNING: mixed change accepted through the '${OVERRIDE_LABEL}' label. Confirm or discard the HCP VCS run before the next content release.`,
+    );
+    return 0;
+  }
+  console.log(
+    `  FAIL: split the Terraform change into its own PR, or have a reviewer add the '${OVERRIDE_LABEL}' label.`,
+  );
+  return 1;
+}
+
+if (process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  process.exit(main(process.argv.slice(2)));
+}
diff --git a/scripts/check-terraform-isolation.test.mjs b/scripts/check-terraform-isolation.test.mjs
new file mode 100644
index 00000000..c2913a2f
--- /dev/null
+++ b/scripts/check-terraform-isolation.test.mjs
@@ -0,0 +1,179 @@
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { test } from "node:test";
+import { fileURLToPath } from "node:url";
+
+import {
+  OVERRIDE_LABEL,
+  classifyChangedFiles,
+  isTerraformInfrastructurePath,
+  mayAccompanyTerraform,
+} from "./check-terraform-isolation.mjs";
+
+const SCRIPT = path.join(
+  path.dirname(fileURLToPath(import.meta.url)),
+  "check-terraform-isolation.mjs",
+);
+
+function runGate(files, env = {}) {
+  return spawnSync(process.execPath, [SCRIPT, "--stdin"], {
+    input: `${files.join("\n")}\n`,
+    encoding: "utf8",
+    env: { ...process.env, TERRAFORM_ISOLATION_OVERRIDE: "", ...env },
+  });
+}
+
+test("terraform tree, docs, and terraform tooling may accompany a Terraform change", () => {
+  for (const file of [
+    "terraform/live/dev/main.tf",
+    "terraform/live/modules/environment-owned/main.tf",
+    "terraform/README.md",
+    "README.md",
+    "docs/adr/0003-terraform.md",
+    "scripts/check-terraform-import-plan.py",
+    "scripts/terraform_import_plan_resources.py",
+    "scripts/test-terraform-import-plan-check.py",
+    "scripts/terraform-validate.mjs",
+    "scripts/check-terraform-isolation.mjs",
+    "scripts/check-terraform-release-plan.py",
+    "scripts/hcp-run-guard.py",
+    "scripts/test-hcp-run-guard.py",
+    "scripts/verify-cloudfront-release.sh",
+    "scripts/test-verify-cloudfront-release.sh",
+    "scripts/summarize-cloudfront-live-state.sh",
+    "scripts/check-github-workflows.sh",
+    "scripts/read-release-pointer.py",
+    "scripts/testdata/terraform-release-plans/version-only.json",
+  ]) {
+    assert.equal(mayAccompanyTerraform(file), true, file);
+  }
+});
+
+test("application, workflow, and dependency files count as application changes", () => {
+  for (const file of [
+    "src/App.tsx",
+    "public/favicon.ico",
+    "index.html",
+    "package.json",
+    "package-lock.json",
+    ".env.production",
+    "vite.config.ts",
+    ".github/workflows/deploy.yml",
+    "scripts/deploy-web.sh",
+    "scripts/governance-check.mjs",
+    "e2e/login.spec.ts",
+  ]) {
+    assert.equal(mayAccompanyTerraform(file), false, file);
+  }
+});
+
+test("terraform-only and application-only changes are not mixed", () => {
+  assert.equal(
+    classifyChangedFiles(["terraform/live/dev/main.tf", "terraform/README.md"]).mixed,
+    false,
+  );
+  assert.equal(
+    classifyChangedFiles(["src/App.tsx", ".github/workflows/deploy.yml", "README.md"]).mixed,
+    false,
+  );
+  assert.equal(classifyChangedFiles([]).mixed, false);
+});
+
+test("terraform documentation does not mix with application or workflow changes", () => {
+  assert.equal(isTerraformInfrastructurePath("terraform/README.md"), false);
+  assert.equal(isTerraformInfrastructurePath("terraform/live/dev/main.tf"), true);
+  assert.equal(
+    classifyChangedFiles(["terraform/README.md", ".github/workflows/ci.yaml"]).mixed,
+    false,
+  );
+  const docsOnly = runGate(["terraform/README.md", ".github/workflows/ci.yaml"]);
+  assert.equal(docsOnly.status, 0, docsOnly.stdout + docsOnly.stderr);
+  assert.match(docsOnly.stdout, /PASS/);
+});
+
+test("terraform plus application is mixed and lists the offending files", () => {
+  const result = classifyChangedFiles([
+    "terraform/live/dev/main.tf",
+    "src/App.tsx",
+    "README.md",
+    " ",
+    "src/App.tsx",
+  ]);
+  assert.equal(result.mixed, true);
+  assert.deepEqual(result.terraform, ["terraform/live/dev/main.tf"]);
+  assert.deepEqual(result.application, ["src/App.tsx"]);
+});
+
+test("CLI exits 1 on a mixed change and 0 when isolated", () => {
+  const mixed = runGate(["terraform/live/dev/main.tf", "src/App.tsx"]);
+  assert.equal(mixed.status, 1, mixed.stdout + mixed.stderr);
+  assert.match(mixed.stdout, /FAIL/);
+  assert.match(mixed.stdout, /src\/App\.tsx/);
+
+  const isolated = runGate(["terraform/live/dev/main.tf", "terraform/README.md"]);
+  assert.equal(isolated.status, 0, isolated.stdout + isolated.stderr);
+  assert.match(isolated.stdout, /PASS/);
+});
+
+test("CLI override downgrades a mixed change to a warning that names the label", () => {
+  const result = runGate(["terraform/live/dev/main.tf", "src/App.tsx"], {
+    TERRAFORM_ISOLATION_OVERRIDE: "true",
+  });
+  assert.equal(result.status, 0, result.stdout + result.stderr);
+  assert.match(result.stdout, /WARNING/);
+  assert.match(result.stdout, new RegExp(OVERRIDE_LABEL));
+
+  const notTrue = runGate(["terraform/live/dev/main.tf", "src/App.tsx"], {
+    TERRAFORM_ISOLATION_OVERRIDE: "yes",
+  });
+  assert.equal(notTrue.status, 1);
+});
+
+test("removing the override fails a mixed change that was previously green", () => {
+  const files = ["terraform/live/dev/main.tf", ".github/workflows/deploy.yml"];
+  const previouslyGreen = runGate(files, {
+    TERRAFORM_ISOLATION_OVERRIDE: "true",
+  });
+  assert.equal(previouslyGreen.status, 0, previouslyGreen.stdout + previouslyGreen.stderr);
+  assert.match(previouslyGreen.stdout, /WARNING/);
+
+  // CI sets TERRAFORM_ISOLATION_OVERRIDE from contains(...labels), which is
+  // the string "false" after the label is removed. A stale green check must
+  // not survive that.
+  const afterLabelRemoved = runGate(files, {
+    TERRAFORM_ISOLATION_OVERRIDE: "false",
+  });
+  assert.equal(afterLabelRemoved.status, 1, afterLabelRemoved.stdout + afterLabelRemoved.stderr);
+  assert.match(afterLabelRemoved.stdout, /FAIL/);
+  assert.match(afterLabelRemoved.stdout, /deploy\.yml/);
+});
+
+test("CLI refuses to run without a base ref or --stdin", () => {
+  const result = spawnSync(process.execPath, [SCRIPT], { encoding: "utf8" });
+  assert.notEqual(result.status, 0);
+});
+
+test("isolation workflow re-evaluates on labeled and unlabeled without rerunning Frontend checks", () => {
+  const workflows = path.join(
+    path.dirname(fileURLToPath(import.meta.url)),
+    "..",
+    ".github/workflows",
+  );
+  const ciYaml = readFileSync(path.join(workflows, "ci.yaml"), "utf8");
+  const isolationYaml = readFileSync(path.join(workflows, "terraform-isolation.yaml"), "utf8");
+
+  for (const eventType of ["opened", "synchronize", "reopened", "labeled", "unlabeled"]) {
+    assert.match(isolationYaml, new RegExp(`^ {6}- ${eventType}$`, "m"), eventType);
+  }
+
+  assert.doesNotMatch(ciYaml, /^ {6}- labeled$/m);
+  assert.doesNotMatch(ciYaml, /^ {6}- unlabeled$/m);
+  assert.doesNotMatch(ciYaml, /^ {2}terraform-isolation:\n/m);
+  assert.doesNotMatch(ciYaml, /github\.event\.action != 'labeled'/);
+
+  assert.match(isolationYaml, /^ {2}terraform-isolation:\n/m);
+  assert.match(isolationYaml, /name: Terraform and application changes are isolated/);
+  assert.doesNotMatch(isolationYaml, /github\.event\.action != 'labeled'/);
+});
diff --git a/scripts/check-terraform-release-plan.py b/scripts/check-terraform-release-plan.py
new file mode 100755
index 00000000..03ae590f
--- /dev/null
+++ b/scripts/check-terraform-release-plan.py
@@ -0,0 +1,533 @@
+#!/usr/bin/env python3
+"""Reject HCP Terraform plans that are not a frontend content-release update.
+
+Accepts exactly:
+  - an update of the release pointer (content, plus computed etag/version_id)
+  - an update of the distribution with only origin[*].origin_path changed
+    (response_completion_timeout 0, null, and a missing key are equivalent)
+  - exactly one action invocation for the CloudFront invalidation
+
+after origin_path values must match the expected labels. before origin_path
+values must match the pointer's prior current/previous. This script may read a
+local plan JSON file or download plan JSON from the documented HashiCorp
+endpoint:
+
+    GET https://app.terraform.io/api/v2/plans/:id/json-output
+
+The download follows exactly one redirect, and only to archivist.terraform.io.
+It does not create, apply, discard, or poll runs.
+"""
+
+from __future__ import annotations
+
+import argparse
+import json
+import os
+import re
+import ssl
+import sys
+import urllib.error
+import urllib.request
+from pathlib import Path
+from typing import Any, Callable
+from urllib.parse import urlparse
+
+
+POINTER_ADDRESS = "module.environment_owned.aws_s3_object.release_pointer"
+DISTRIBUTION_ADDRESS = "module.environment_owned.aws_cloudfront_distribution.site"
+ACTION_ADDRESS = (
+    "module.environment_owned.action.aws_cloudfront_create_invalidation.release"
+)
+API_HOST = "app.terraform.io"
+ARCHIVE_HOST = "archivist.terraform.io"
+PLAN_ID_RE = re.compile(r"^plan-[A-Za-z0-9]+$")
+VERSION_LABEL_RE = re.compile(r"^[0-9a-f]{40}-[0-9]+-[0-9]+$")
+IGNORED_ACTIONS = {"no-op", "read"}
+UNSAFE_ACTIONS = {"create", "delete"}
+POINTER_UNKNOWN_ATTRIBUTES = frozenset({"etag", "version_id"})
+DISTRIBUTION_UNKNOWN_ATTRIBUTES = frozenset(
+    {
+        "etag",
+        "last_modified_time",
+        "status",
+        "in_progress_validation_batches",
+    }
+)
+# Not an after_unknown allowlist. AWS returns 0 when the timeout is unset;
+# the provider writes null on origin_path updates. Treat 0, null, and a
+# missing key as the same. Any other value still fails closed.
+ORIGIN_RESPONSE_COMPLETION_TIMEOUT = "response_completion_timeout"
+ORIGIN_TIMEOUT_UNSET = frozenset({0, None})
+REDIRECT_STATUSES = {301, 302, 303, 307, 308}
+
+UrlOpen = Callable[..., Any]
+
+
+class _NoRedirectHandler(urllib.request.HTTPRedirectHandler):
+    """Return the redirect response instead of following it."""
+
+    def http_error_301(self, req, fp, code, msg, headers):
+        return self._capture(req, fp, code, headers)
+
+    http_error_302 = http_error_303 = http_error_307 = http_error_308 = http_error_301
+
+    @staticmethod
+    def _capture(req, fp, code, headers):
+        response = urllib.response.addinfourl(fp, headers, req.full_url, code=code)
+        response.msg = "Redirect"
+        return response
+
+
+def _urlopen_without_redirects(
+    *handlers: urllib.request.BaseHandler,
+) -> UrlOpen:
+    context = ssl.create_default_context()
+    opener = urllib.request.build_opener(
+        urllib.request.HTTPSHandler(context=context),
+        _NoRedirectHandler,
+        *handlers,
+    )
+    return opener.open
+
+
+def parse_args() -> argparse.Namespace:
+    parser = argparse.ArgumentParser()
+    source = parser.add_mutually_exclusive_group(required=True)
+    source.add_argument(
+        "plan_json",
+        type=Path,
+        nargs="?",
+        help="Local Terraform plan JSON. Mutually exclusive with --plan-id.",
+    )
+    source.add_argument(
+        "--plan-id",
+        help="HCP Terraform plan ID. Downloads JSON from app.terraform.io.",
+    )
+    parser.add_argument(
+        "--expected-version-label",
+        required=True,
+        help="Immutable current release the plan must apply. Empty string is the legacy root.",
+    )
+    parser.add_argument(
+        "--expected-previous-version-label",
+        default="",
+        help="Previous release label the origin group must fail over to.",
+    )
+    parser.add_argument(
+        "--evidence-out",
+        type=Path,
+        help="Write machine-readable proof after every assertion passes.",
+    )
+    return parser.parse_args()
+
+
+def download_plan_json(
+    plan_id: str,
+    token: str,
+    *,
+    urlopen: UrlOpen | None = None,
+    handlers: tuple[urllib.request.BaseHandler, ...] = (),
+) -> dict[str, Any]:
+    if not PLAN_ID_RE.fullmatch(plan_id):
+        raise ValueError(f"plan id {plan_id!r} is not a valid HCP plan id")
+    if not token:
+        raise ValueError("TF_API_TOKEN is required to download plan JSON")
+
+    opener = urlopen or _urlopen_without_redirects(*handlers)
+    api_url = f"https://{API_HOST}/api/v2/plans/{plan_id}/json-output"
+    request = urllib.request.Request(
+        api_url,
+        method="GET",
+        headers={
+            "Authorization": f"Bearer {token}",
+            "Content-Type": "application/vnd.api+json",
+            "Accept": "application/json",
+        },
+    )
+    first = _open_pinned(opener, request, allowed_host=API_HOST)
+    try:
+        if first.status == 204:
+            raise ValueError(
+                "plan JSON is not ready; refusing to poll the plans endpoint"
+            )
+        if first.status not in REDIRECT_STATUSES:
+            raise ValueError(
+                f"expected a redirect from {API_HOST}, got HTTP {first.status}"
+            )
+        location = first.headers.get("Location")
+        if not location:
+            raise ValueError(f"{API_HOST} redirect is missing a Location header")
+        archive = urlparse(location)
+        if archive.scheme != "https" or archive.hostname != ARCHIVE_HOST:
+            raise ValueError(
+                "refusing redirect that is not https://"
+                f"{ARCHIVE_HOST}/"
+            )
+        archive_request = urllib.request.Request(location, method="GET")
+        second = _open_pinned(opener, archive_request, allowed_host=ARCHIVE_HOST)
+        try:
+            if second.status in REDIRECT_STATUSES:
+                raise ValueError(
+                    f"refusing a second redirect from {ARCHIVE_HOST}"
+                )
+            if second.status != 200:
+                raise ValueError(
+                    f"plan JSON download from {ARCHIVE_HOST} returned "
+                    f"HTTP {second.status}"
+                )
+            payload = second.read()
+        finally:
+            second.close()
+    finally:
+        first.close()
+
+    plan = json.loads(payload.decode("utf-8"))
+    if not isinstance(plan, dict):
+        raise ValueError("plan JSON must be an object")
+    return plan
+
+
+def _open_pinned(urlopen: UrlOpen, request: urllib.request.Request, *, allowed_host: str):
+    parsed = urlparse(request.full_url)
+    if parsed.scheme != "https" or parsed.hostname != allowed_host:
+        raise ValueError(
+            f"refusing to contact {parsed.scheme}://{parsed.hostname} "
+            f"(pinned host is {allowed_host})"
+        )
+    context = ssl.create_default_context()
+    try:
+        return urlopen(request, context=context, timeout=30)
+    except TypeError:
+        return urlopen(request, timeout=30)
+
+
+def _is_nested_unknown(value: Any) -> bool:
+    if isinstance(value, dict):
+        return any(item is True or _is_nested_unknown(item) for item in value.values())
+    if isinstance(value, list):
+        return any(item is True or _is_nested_unknown(item) for item in value)
+    return False
+
+
+def changed_attributes(
+    change: dict[str, Any],
+    *,
+    computed_unknown: frozenset[str],
+) -> set[str]:
+    before = change.get("before") or {}
+    after = change.get("after") or {}
+    unknown = change.get("after_unknown") or {}
+    keys = set(before) | set(after) | set(unknown)
+    changed: set[str] = set()
+    for key in keys:
+        unknown_value = unknown.get(key)
+        if unknown_value is True:
+            if key in computed_unknown:
+                continue
+            changed.add(key)
+            continue
+        if _is_nested_unknown(unknown_value):
+            changed.add(key)
+            continue
+        if before.get(key) != after.get(key):
+            changed.add(key)
+    return changed
+
+
+def _label_ok(label: str) -> bool:
+    return label == "" or bool(VERSION_LABEL_RE.fullmatch(label))
+
+
+def origin_path_for_label(label: str) -> str:
+    return "" if label == "" else f"/releases/{label}"
+
+
+def _origin_map(origins: Any) -> dict[str, dict[str, Any]]:
+    if not isinstance(origins, list):
+        return {}
+    mapped: dict[str, dict[str, Any]] = {}
+    for origin in origins:
+        if not isinstance(origin, dict):
+            continue
+        origin_id = origin.get("origin_id")
+        if not isinstance(origin_id, str) or not origin_id:
+            continue
+        mapped[origin_id] = origin
+    return mapped
+
+
+def _origin_paths(origins: Any) -> dict[str, str]:
+    return {
+        origin_id: origin.get("origin_path") or ""
+        for origin_id, origin in _origin_map(origins).items()
+    }
+
+
+def _decode_pointer(content: Any) -> dict[str, str]:
+    if not isinstance(content, str) or not content:
+        return {}
+    try:
+        payload = json.loads(content)
+    except json.JSONDecodeError:
+        return {}
+    if not isinstance(payload, dict):
+        return {}
+    return {
+        "current": payload.get("current") or "",
+        "previous": payload.get("previous") or "",
+    }
+
+
+def _validate_pointer(
+    resource: dict[str, Any],
+    expected_current: str,
+    expected_previous: str,
+) -> list[str]:
+    violations: list[str] = []
+    change = resource.get("change") or {}
+    changed = changed_attributes(change, computed_unknown=POINTER_UNKNOWN_ATTRIBUTES)
+    if changed != {"content"}:
+        violations.append(
+            f"{POINTER_ADDRESS}: expected only content to change, found "
+            f"{sorted(changed) if changed else 'no attribute changes'}"
+        )
+    after = _decode_pointer((change.get("after") or {}).get("content"))
+    if after.get("current") != expected_current:
+        violations.append(
+            f"{POINTER_ADDRESS}: after current {after.get('current')!r} does not match "
+            f"{expected_current!r}"
+        )
+    if after.get("previous") != expected_previous:
+        violations.append(
+            f"{POINTER_ADDRESS}: after previous {after.get('previous')!r} does not match "
+            f"{expected_previous!r}"
+        )
+    unknown = change.get("after_unknown") or {}
+    if unknown.get("content") is True:
+        violations.append(f"{POINTER_ADDRESS}: content after value is unknown")
+    return violations
+
+
+def _origin_fields_for_compare(origin: dict[str, Any]) -> dict[str, Any]:
+    rest = {key: value for key, value in origin.items() if key != "origin_path"}
+    timeout = rest.get(ORIGIN_RESPONSE_COMPLETION_TIMEOUT)
+    if timeout in ORIGIN_TIMEOUT_UNSET:
+        rest.pop(ORIGIN_RESPONSE_COMPLETION_TIMEOUT, None)
+    return rest
+
+
+def _origin_non_path_fields_changed(before: dict[str, Any], after: dict[str, Any]) -> bool:
+    return _origin_fields_for_compare(before) != _origin_fields_for_compare(after)
+
+
+def _validate_distribution(
+    resource: dict[str, Any],
+    pointer_before: dict[str, str],
+    expected_current: str,
+    expected_previous: str,
+) -> list[str]:
+    violations: list[str] = []
+    change = resource.get("change") or {}
+    changed = changed_attributes(
+        change, computed_unknown=DISTRIBUTION_UNKNOWN_ATTRIBUTES
+    )
+    if changed != {"origin"}:
+        violations.append(
+            f"{DISTRIBUTION_ADDRESS}: expected only origin to change, found "
+            f"{sorted(changed) if changed else 'no attribute changes'}"
+        )
+        return violations
+
+    before_origins = _origin_map((change.get("before") or {}).get("origin"))
+    after_origins = _origin_map((change.get("after") or {}).get("origin"))
+    if set(before_origins) != set(after_origins):
+        violations.append(
+            f"{DISTRIBUTION_ADDRESS}: origin IDs changed "
+            f"from {sorted(before_origins)} to {sorted(after_origins)}"
+        )
+        return violations
+
+    for origin_id, before_origin in before_origins.items():
+        if _origin_non_path_fields_changed(before_origin, after_origins[origin_id]):
+            violations.append(
+                f"{DISTRIBUTION_ADDRESS}: origin {origin_id!r} changed a field other than origin_path"
+            )
+
+    after_paths = sorted(_origin_paths((change.get("after") or {}).get("origin")).values())
+    expected_after = sorted(
+        [
+            origin_path_for_label(expected_current),
+            origin_path_for_label(expected_previous),
+        ]
+    )
+    if after_paths != expected_after:
+        violations.append(
+            f"{DISTRIBUTION_ADDRESS}: after origin_path {after_paths} does not match "
+            f"{expected_after}"
+        )
+
+    before_paths = sorted(_origin_paths((change.get("before") or {}).get("origin")).values())
+    expected_before = sorted(
+        [
+            origin_path_for_label(pointer_before.get("current", "")),
+            origin_path_for_label(pointer_before.get("previous", "")),
+        ]
+    )
+    if before_paths != expected_before:
+        violations.append(
+            f"{DISTRIBUTION_ADDRESS}: before origin_path {before_paths} does not match "
+            f"pointer prior values {expected_before}"
+        )
+    return violations
+
+
+def _validate_actions(plan: dict[str, Any]) -> list[str]:
+    invocations = plan.get("action_invocations")
+    if invocations is None:
+        return ["plan is missing action_invocations"]
+    if not isinstance(invocations, list):
+        return ["action_invocations must be a list"]
+    addresses = [
+        item.get("address")
+        for item in invocations
+        if isinstance(item, dict)
+    ]
+    if addresses != [ACTION_ADDRESS]:
+        return [
+            "expected exactly one action_invocations entry "
+            f"{ACTION_ADDRESS}, found {addresses}"
+        ]
+    return []
+
+
+def validate_plan(
+    plan: dict[str, Any],
+    expected_current: str,
+    expected_previous: str,
+) -> list[str]:
+    violations: list[str] = []
+    if not _label_ok(expected_current):
+        violations.append(
+            "expected version label must be empty or <full-sha>-<run-id>-<attempt>"
+        )
+        return violations
+    if not _label_ok(expected_previous):
+        violations.append(
+            "expected previous version label must be empty or <full-sha>-<run-id>-<attempt>"
+        )
+        return violations
+
+    updates: dict[str, dict[str, Any]] = {}
+    for resource in plan.get("resource_changes", []):
+        if resource.get("mode", "managed") != "managed":
+            continue
+        address = resource.get("address", "<unknown>")
+        change = resource.get("change") or {}
+        actions = list(change.get("actions") or [])
+        action_set = set(actions)
+        if action_set <= IGNORED_ACTIONS:
+            continue
+
+        if change.get("importing"):
+            violations.append(f"{address}: import actions are not allowed")
+
+        unsafe = sorted(action_set & UNSAFE_ACTIONS)
+        if unsafe:
+            violations.append(f"{address}: unsafe actions {unsafe}")
+        if "replace" in action_set or actions in (
+            ["delete", "create"],
+            ["create", "delete"],
+        ):
+            violations.append(f"{address}: replacement is not allowed")
+
+        if "update" in action_set:
+            updates[address] = resource
+            if action_set != {"update"}:
+                violations.append(
+                    f"{address}: update must be the only action, got {actions}"
+                )
+
+        if address not in {POINTER_ADDRESS, DISTRIBUTION_ADDRESS} and (
+            action_set - IGNORED_ACTIONS
+        ):
+            violations.append(
+                f"{address}: managed address is outside the content-release update"
+            )
+
+    if set(updates) != {POINTER_ADDRESS, DISTRIBUTION_ADDRESS}:
+        violations.append(
+            "expected exactly the pointer and distribution updates, found "
+            f"{sorted(updates)}"
+        )
+        violations.extend(_validate_actions(plan))
+        return violations
+
+    pointer_change = updates[POINTER_ADDRESS].get("change") or {}
+    pointer_before = _decode_pointer((pointer_change.get("before") or {}).get("content"))
+    violations.extend(
+        _validate_pointer(updates[POINTER_ADDRESS], expected_current, expected_previous)
+    )
+    violations.extend(
+        _validate_distribution(
+            updates[DISTRIBUTION_ADDRESS],
+            pointer_before,
+            expected_current,
+            expected_previous,
+        )
+    )
+    violations.extend(_validate_actions(plan))
+    return violations
+
+
+def main() -> int:
+    args = parse_args()
+    if args.plan_id:
+        try:
+            plan = download_plan_json(args.plan_id, os.environ.get("TF_API_TOKEN", ""))
+        except (OSError, ValueError, json.JSONDecodeError, urllib.error.URLError) as exc:
+            print(f"FAIL: could not download plan JSON: {exc}", file=sys.stderr)
+            return 1
+    else:
+        if args.plan_json is None:
+            print("FAIL: plan JSON path or --plan-id is required", file=sys.stderr)
+            return 1
+        plan = json.loads(args.plan_json.read_text(encoding="utf-8"))
+
+    violations = validate_plan(
+        plan,
+        args.expected_version_label,
+        args.expected_previous_version_label,
+    )
+    if violations:
+        print("FAIL: Terraform plan is not a content-release update", file=sys.stderr)
+        for violation in violations:
+            print(f"  - {violation}", file=sys.stderr)
+        return 1
+
+    if args.evidence_out:
+        evidence = {
+            "pointer_address": POINTER_ADDRESS,
+            "distribution_address": DISTRIBUTION_ADDRESS,
+            "action_address": ACTION_ADDRESS,
+            "expected_version_label": args.expected_version_label,
+            "expected_previous_version_label": args.expected_previous_version_label,
+            "managed_updates": 2,
+            "action_invocations": 1,
+            "creates": 0,
+            "deletes": 0,
+            "replacements": 0,
+        }
+        args.evidence_out.write_text(
+            json.dumps(evidence, indent=2, sort_keys=True) + "\n",
+            encoding="utf-8",
+        )
+    print(
+        "PASS: content-release plan updates "
+        f"{POINTER_ADDRESS} and {DISTRIBUTION_ADDRESS} to "
+        f"{args.expected_version_label} (previous {args.expected_previous_version_label!r})"
+    )
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/scripts/deploy-web.sh b/scripts/deploy-web.sh
new file mode 100755
index 00000000..ec64a742
--- /dev/null
+++ b/scripts/deploy-web.sh
@@ -0,0 +1,79 @@
+#!/usr/bin/env bash
+#
+# Content publish step for the environment deploy workflows
+# (`.github/workflows/deploy.yml`, `.github/workflows/deploy-staging.yml`).
+#
+# Runs as the GitHub OIDC deploy role. Builds the SPA, uploads it to the
+# environment's S3 bucket with the right cache headers, and invalidates
+# CloudFront. It never touches infrastructure.
+#
+# Runs from the repo root. The target is resolved from, in order:
+#   1. SITE_BUCKET + CLOUDFRONT_DISTRIBUTION_ID (pinned by the workflow; used by
+#      dev, whose CloudFormation outputs disappear during Terraform adoption)
+#   2. the BucketName/DistributionId outputs of STACK_NAME (staging)
+set -euo pipefail
+
+STACK_NAME="${STACK_NAME:-shoc-frontend-dev}"
+REGION="${AWS_REGION:-us-east-1}"
+WAIT_FOR_INVALIDATION="${WAIT_FOR_INVALIDATION:-false}"
+
+echo "Building SPA (VITE_API_URL comes from the process environment or .env.production)..."
+export VITE_APP_COMMIT_SHA="${VITE_APP_COMMIT_SHA:-${GITHUB_SHA:-}}"
+npm ci
+npm run build
+
+BUCKET="${SITE_BUCKET:-}"
+DIST_ID="${CLOUDFRONT_DISTRIBUTION_ID:-}"
+
+if [[ -n "${BUCKET}" && -n "${DIST_ID}" ]]; then
+  echo "Using pinned target: bucket ${BUCKET}, distribution ${DIST_ID}."
+elif [[ -n "${BUCKET}" || -n "${DIST_ID}" ]]; then
+  echo "::error::Set both SITE_BUCKET and CLOUDFRONT_DISTRIBUTION_ID, or neither." >&2
+  exit 1
+else
+  echo "Reading stack outputs from ${STACK_NAME}..."
+  stack_output() {
+    aws cloudformation describe-stacks \
+      --stack-name "${STACK_NAME}" \
+      --region "${REGION}" \
+      --query "Stacks[0].Outputs[?OutputKey=='$1'].OutputValue" \
+      --output text
+  }
+
+  BUCKET="$(stack_output BucketName)"
+  DIST_ID="$(stack_output DistributionId)"
+
+  if [[ -z "${BUCKET}" || "${BUCKET}" == "None" || -z "${DIST_ID}" || "${DIST_ID}" == "None" ]]; then
+    echo "::error::Could not resolve BucketName/DistributionId from stack ${STACK_NAME}." >&2
+    exit 1
+  fi
+fi
+
+echo "Uploading hashed assets (immutable) to s3://${BUCKET}..."
+# Everything except index.html: long-lived + immutable, prune stale objects.
+aws s3 sync dist/ "s3://${BUCKET}/" \
+  --delete \
+  --exclude "index.html" \
+  --exclude "*.map" \
+  --cache-control "public,max-age=31536000,immutable"
+
+echo "Uploading index.html (never cached)..."
+aws s3 cp dist/index.html "s3://${BUCKET}/index.html" \
+  --cache-control "no-cache,no-store,must-revalidate" \
+  --content-type "text/html"
+
+echo "Invalidating CloudFront ${DIST_ID}..."
+INVALIDATION_ID="$(aws cloudfront create-invalidation \
+  --distribution-id "${DIST_ID}" \
+  --paths "/*" \
+  --query 'Invalidation.Id' \
+  --output text)"
+
+if [[ "${WAIT_FOR_INVALIDATION}" == "true" ]]; then
+  echo "Waiting for CloudFront invalidation ${INVALIDATION_ID}..."
+  aws cloudfront wait invalidation-completed \
+    --distribution-id "${DIST_ID}" \
+    --id "${INVALIDATION_ID}"
+fi
+
+echo "Web deploy complete."
diff --git a/scripts/governance-baseline.json b/scripts/governance-baseline.json
new file mode 100644
index 00000000..3862e898
--- /dev/null
+++ b/scripts/governance-baseline.json
@@ -0,0 +1,6 @@
+{
+  "version": 1,
+  "purpose": "Frozen grandfathered debt inventory for the frontend governance checks. New entries and cap increases fail the governance comparison. Existing caps may only decrease and entries must be removed when compliant.",
+  "maxFileLines": 500,
+  "godfileDebt": []
+}
diff --git a/scripts/governance-check.mjs b/scripts/governance-check.mjs
new file mode 100644
index 00000000..96209314
--- /dev/null
+++ b/scripts/governance-check.mjs
@@ -0,0 +1,329 @@
+import { execFileSync, spawnSync } from "node:child_process";
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const SCRIPT_DIR = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(SCRIPT_DIR, "..");
+const BASELINE_PATH = path.join(SCRIPT_DIR, "governance-baseline.json");
+
+const MAX_FILE_LINES = 500;
+const MAINTAINABILITY_RULES = [
+  'complexity: ["error", { "max": 20 }]',
+  'max-lines-per-function: ["error", { "skipComments": true, "max": 150 }]',
+  'max-params: ["error", 4]',
+  'max-depth: ["error", 4]',
+];
+const GOVERNED_ROOTS = ["src/", "config/"];
+const EXCLUDE_DIR = /(^|\/)(mocks|test|__mocks__|node_modules|dist|coverage|e2e)\//;
+const EXCLUDE_NAME = /\.(mock|test|spec)\.(ts|tsx)$|\.d\.ts$/;
+// Repository-level gates that run after the source gates. Each is an npm
+// script so it can also be run on its own.
+const REPOSITORY_GATES = [
+  ["Terraform import-plan contract", "test:terraform-import-plan"],
+  ["Terraform release-plan contract", "test:terraform-release-plan"],
+  ["Terraform isolation gate", "test:terraform-isolation"],
+  ["Terraform formatting and validation", "test:terraform"],
+  ["HCP run guard", "test:hcp-run-guard"],
+  ["CloudFront release verify", "test:cloudfront-release-verify"],
+  ["GitHub workflow shell", "test:github-workflows"],
+];
+
+function isGoverned(relativePath) {
+  return (
+    GOVERNED_ROOTS.some((root) => relativePath.startsWith(root)) &&
+    /\.(ts|tsx)$/.test(relativePath) &&
+    !EXCLUDE_DIR.test(relativePath) &&
+    !EXCLUDE_NAME.test(relativePath)
+  );
+}
+
+function gitText(args) {
+  return execFileSync("git", args, { cwd: ROOT, encoding: "utf8" }).trim();
+}
+
+function gitLines(args) {
+  return gitText(args).split("\n").filter(Boolean);
+}
+
+function governedFiles() {
+  const tracked = gitLines(["ls-files"]);
+  const untracked = gitLines(["ls-files", "--others", "--exclude-standard"]);
+  return [...new Set([...tracked, ...untracked])].filter(
+    (relativePath) => isGoverned(relativePath) && existsSync(path.join(ROOT, relativePath)),
+  );
+}
+
+function lineCount(relativePath) {
+  const content = readFileSync(path.join(ROOT, relativePath), "utf8");
+  if (content.length === 0) return 0;
+  return content.endsWith("\n") ? content.split("\n").length - 1 : content.split("\n").length;
+}
+
+function readBaseline() {
+  return JSON.parse(readFileSync(BASELINE_PATH, "utf8"));
+}
+
+function readBaselineAtRef(ref) {
+  try {
+    const content = execFileSync("git", ["show", `${ref}:scripts/governance-baseline.json`], {
+      cwd: ROOT,
+      encoding: "utf8",
+      stdio: ["ignore", "pipe", "ignore"],
+    });
+    return JSON.parse(content);
+  } catch {
+    return null;
+  }
+}
+
+function godfileRatchet(baseRef) {
+  const baseline = readBaseline();
+  const cap = baseline.maxFileLines ?? MAX_FILE_LINES;
+  const debtEntries = new Map(
+    (baseline.godfileDebt ?? []).map((entry) => [entry.path, entry.maxLines]),
+  );
+  const files = governedFiles();
+
+  const newDebt = [];
+  const grownDebt = [];
+  for (const file of files) {
+    const lines = lineCount(file);
+    const debtCap = debtEntries.get(file);
+    if (lines > cap && debtCap === undefined) {
+      newDebt.push({ path: file, lines });
+    } else if (debtCap !== undefined && lines > debtCap) {
+      grownDebt.push({ path: file, lines, maxLines: debtCap });
+    }
+  }
+
+  const stale = [];
+  const remaining = [];
+  for (const [debtPath, maxLines] of debtEntries) {
+    const lines = files.includes(debtPath) ? lineCount(debtPath) : -1;
+    if (lines === -1 || lines <= cap) {
+      stale.push({ path: debtPath, lines });
+    } else {
+      remaining.push({ path: debtPath, lines, maxLines });
+    }
+  }
+
+  const baselineLoosening = [];
+  const baseBaseline = baseRef ? readBaselineAtRef(baseRef) : null;
+  if (baseBaseline) {
+    const baseCap = baseBaseline.maxFileLines ?? MAX_FILE_LINES;
+    if (cap > baseCap) {
+      baselineLoosening.push(`global cap increased from ${baseCap} to ${cap}`);
+    }
+    const baseEntries = new Map(
+      (baseBaseline.godfileDebt ?? []).map((entry) => [entry.path, entry.maxLines]),
+    );
+    for (const [debtPath, maxLines] of debtEntries) {
+      const priorMax = baseEntries.get(debtPath);
+      if (priorMax === undefined) {
+        baselineLoosening.push(`new debt entry: ${debtPath}`);
+      } else if (maxLines > priorMax) {
+        baselineLoosening.push(`cap increased for ${debtPath}: ${priorMax} -> ${maxLines}`);
+      }
+    }
+  }
+
+  return {
+    cap,
+    newDebt,
+    grownDebt,
+    stale,
+    remaining,
+    baselineLoosening,
+    comparedBaseline: Boolean(baseBaseline),
+  };
+}
+
+function resolveBaseRef() {
+  if (process.env.GOVERNANCE_BASE) return process.env.GOVERNANCE_BASE;
+  if (process.env.GITHUB_BASE_REF) return `origin/${process.env.GITHUB_BASE_REF}`;
+  for (const candidate of ["origin/dev", "origin/main"]) {
+    try {
+      execFileSync("git", ["rev-parse", "--verify", candidate], {
+        cwd: ROOT,
+        encoding: "utf8",
+        stdio: "ignore",
+      });
+      return candidate;
+    } catch {
+      // candidate ref not present locally; try the next
+    }
+  }
+  return null;
+}
+
+function changedGovernedFiles(baseRef) {
+  let mergeBase;
+  try {
+    mergeBase = execFileSync("git", ["merge-base", baseRef, "HEAD"], {
+      cwd: ROOT,
+      encoding: "utf8",
+      stdio: ["ignore", "pipe", "ignore"],
+    }).trim();
+  } catch {
+    return null;
+  }
+  const diffed = gitLines(["diff", "--name-only", "--diff-filter=AMR", mergeBase, "HEAD"]);
+  const untracked = gitLines(["ls-files", "--others", "--exclude-standard"]);
+  return [...new Set([...diffed, ...untracked])].filter(isGoverned);
+}
+
+function maintainabilityGate(files) {
+  if (files.length === 0) {
+    return { skipped: true, reason: "no changed governed TS/TSX files" };
+  }
+  // Invoke eslint via node so Windows (no shebang exec) and Unix both work.
+  const eslintJs = path.join(ROOT, "node_modules", "eslint", "bin", "eslint.js");
+  const ruleArgs = MAINTAINABILITY_RULES.flatMap((rule) => ["--rule", rule]);
+  const result = spawnSync(
+    process.execPath,
+    [
+      eslintJs,
+      ...files,
+      ...ruleArgs,
+      "--max-warnings=0",
+      "--no-warn-ignored",
+      "--no-error-on-unmatched-pattern",
+    ],
+    { cwd: ROOT, encoding: "utf8" },
+  );
+  return {
+    skipped: false,
+    status: result.status,
+    stdout: result.stdout?.trim() ?? "",
+    stderr: result.stderr?.trim() ?? "",
+    files,
+  };
+}
+
+function plural(count, word) {
+  return `${count} ${word}${count === 1 ? "" : "s"}`;
+}
+
+function runRepositoryGate(label, script) {
+  // Reuse the npm that launched us when available (matches its version and
+  // config); fall back to PATH for direct `node scripts/governance-check.mjs`.
+  const npmCli = process.env.npm_execpath;
+  const executable = npmCli ? process.execPath : "npm";
+  const args = npmCli ? [npmCli, "run", script] : ["run", script];
+  const result = spawnSync(executable, args, {
+    cwd: ROOT,
+    encoding: "utf8",
+    stdio: "inherit",
+  });
+  return { label, status: result.status, error: result.error };
+}
+
+function main() {
+  const failures = [];
+  const baseRef = resolveBaseRef();
+  if (!baseRef) {
+    failures.push(
+      "base ref is required but was not found. Set GOVERNANCE_BASE to a valid commit or fetch origin/dev.",
+    );
+  } else {
+    try {
+      gitText(["merge-base", baseRef, "HEAD"]);
+    } catch {
+      failures.push(
+        `base ref '${baseRef}' cannot be resolved against HEAD. Fetch it or set GOVERNANCE_BASE correctly.`,
+      );
+    }
+  }
+
+  console.log("─".repeat(64));
+  console.log("godfile ratchet: legacy caps may only shrink");
+  const god = godfileRatchet(baseRef);
+  console.log(
+    `  cap: ${god.cap} lines | grandfathered debt: ${plural(god.remaining.length, "file")} | new violations: ${god.newDebt.length}`,
+  );
+  for (const entry of god.remaining) {
+    console.log(`    debt   ${String(entry.lines).padStart(4)}/${entry.maxLines}  ${entry.path}`);
+  }
+  for (const entry of god.newDebt) {
+    console.log(`    NEW    ${String(entry.lines).padStart(4)}  ${entry.path}`);
+  }
+  for (const entry of god.grownDebt) {
+    console.log(`    GREW   ${String(entry.lines).padStart(4)}/${entry.maxLines}  ${entry.path}`);
+  }
+  if (god.newDebt.length > 0) {
+    failures.push(
+      `godfile ratchet: ${plural(god.newDebt.length, "file")} exceed ${god.cap} lines. Refactor them under the cap; new baseline debt is forbidden.`,
+    );
+  }
+  if (god.grownDebt.length > 0) {
+    failures.push(
+      `godfile ratchet: ${plural(god.grownDebt.length, "grandfathered file")} exceeded its frozen line cap.`,
+    );
+  }
+  if (god.baselineLoosening.length > 0) {
+    failures.push(
+      `governance baseline was loosened: ${god.baselineLoosening.join("; ")}. Only cap reductions and entry removals are allowed.`,
+    );
+  }
+  if (!god.comparedBaseline) {
+    console.log("  baseline comparison unavailable (initial adoption or missing base file)");
+  }
+  if (god.stale.length > 0) {
+    console.log(`  stale baseline entries (now compliant — remove to ratchet tighter):`);
+    for (const entry of god.stale) {
+      console.log(`    stale  ${entry.path}`);
+    }
+  }
+
+  console.log("─".repeat(64));
+  if (!baseRef) {
+    console.log("changed-file maintainability gate: FAIL (no valid base ref)");
+  } else {
+    const files = changedGovernedFiles(baseRef);
+    console.log(
+      `changed-file maintainability gate (base: ${baseRef}): ${files === null ? "unresolvable" : plural(files.length, "changed governed file")}`,
+    );
+    if (files === null) {
+      console.log("  failed — base ref could not be resolved against HEAD");
+    } else {
+      const gate = maintainabilityGate(files);
+      if (gate.skipped) {
+        console.log(`  skipped — ${gate.reason}`);
+      } else {
+        const clean = gate.status === 0;
+        console.log(
+          `  result: ${clean ? "PASS" : "FAIL"} (complexity<=20, function<=150 lines, params<=4, depth<=4)`,
+        );
+        if (!clean) {
+          if (gate.stdout) console.log(gate.stdout);
+          if (gate.stderr) console.log(gate.stderr);
+          failures.push(
+            "changed-file maintainability gate: see ESLint output above. Extract functions/components to meet the thresholds; do not relax the thresholds.",
+          );
+        }
+      }
+    }
+  }
+
+  for (const [label, script] of REPOSITORY_GATES) {
+    console.log("─".repeat(64));
+    console.log(`${label}: npm run ${script}`);
+    const gate = runRepositoryGate(label, script);
+    if (gate.error) {
+      failures.push(`${label}: could not start: ${gate.error.message}`);
+    } else if (gate.status !== 0) {
+      failures.push(`${label}: failed with exit code ${gate.status ?? "unknown"}`);
+    }
+  }
+
+  console.log("─".repeat(64));
+  if (failures.length > 0) {
+    console.log(`RESULT: FAIL (${plural(failures.length, "gate")})`);
+    for (const failure of failures) console.log(`  - ${failure}`);
+    process.exit(1);
+  }
+  console.log("RESULT: PASS — all governance gates green");
+}
+
+main();
diff --git a/scripts/hcp-run-guard.py b/scripts/hcp-run-guard.py
new file mode 100755
index 00000000..15c0f318
--- /dev/null
+++ b/scripts/hcp-run-guard.py
@@ -0,0 +1,207 @@
+#!/usr/bin/env python3
+"""Guard HCP Terraform runs used by GitHub content CD.
+
+Subcommands:
+  check-and-discard  Refuse unsafe workspace settings. Discard a blocking
+                     non-speculative VCS run so GitHub CD can create-run.
+  reconcile-apply    Treat an HCP run whose status is already ``applied`` as
+                     success when the GitHub apply-run step reported failure.
+"""
+
+from __future__ import annotations
+
+import argparse
+import json
+import os
+import sys
+import urllib.error
+import urllib.request
+from typing import Any, Callable
+
+API = "https://app.terraform.io/api/v2"
+DEFAULT_WORKSPACE = "shoc-frontend-new-dev"
+EXPECTED_TRIGGER_PATTERNS = [
+    "terraform/live/dev/**",
+    "terraform/live/modules/**",
+]
+DISCARDABLE = {
+    "pending",
+    "planned",
+    "cost_estimated",
+    "policy_checked",
+    "policy_override",
+}
+APPLYING = {"applying", "apply_queued"}
+
+HttpGet = Callable[[str], dict[str, Any]]
+HttpPost = Callable[[str, dict[str, Any]], int]
+
+
+class GuardError(Exception):
+    """Refused to continue."""
+
+
+def _headers(token: str) -> dict[str, str]:
+    return {
+        "Authorization": f"Bearer {token}",
+        "Content-Type": "application/vnd.api+json",
+    }
+
+
+def default_get(token: str) -> HttpGet:
+    def get(url: str) -> dict[str, Any]:
+        request = urllib.request.Request(url, headers=_headers(token))
+        with urllib.request.urlopen(request, timeout=30) as response:
+            return json.load(response)
+
+    return get
+
+
+def default_post(token: str) -> HttpPost:
+    def post(url: str, payload: dict[str, Any]) -> int:
+        data = json.dumps(payload).encode()
+        request = urllib.request.Request(
+            url, data=data, method="POST", headers=_headers(token)
+        )
+        try:
+            with urllib.request.urlopen(request, timeout=30) as response:
+                return int(response.status)
+        except urllib.error.HTTPError as exc:
+            if exc.code in (409, 404):
+                body = exc.read().decode("utf-8", "replace")
+                print(f"discard returned HTTP {exc.code}: {body}")
+                return exc.code
+            raise
+
+    return post
+
+
+def require_token(token: str) -> str:
+    if not token:
+        raise GuardError("TF_API_TOKEN is required")
+    return token
+
+
+def check_invariants(attrs: dict[str, Any], workspace: str) -> None:
+    if attrs.get("auto-apply") is True:
+        raise GuardError(f"{workspace} auto-apply is on; refuse to continue")
+    if not attrs.get("speculative-enabled"):
+        raise GuardError("speculative plans are off; refuse to continue")
+    if (attrs.get("vcs-repo") or {}).get("tags-regex"):
+        raise GuardError("tag-based VCS triggering is set; refuse to continue")
+    if attrs.get("trigger-patterns") != EXPECTED_TRIGGER_PATTERNS:
+        raise GuardError(
+            "trigger-patterns must be "
+            f"{EXPECTED_TRIGGER_PATTERNS}; got {attrs.get('trigger-patterns')}"
+        )
+
+
+def check_and_discard(
+    *,
+    workspace: str,
+    token: str,
+    get: HttpGet | None = None,
+    post: HttpPost | None = None,
+) -> int:
+    token = require_token(token)
+    get = get or default_get(token)
+    post = post or default_post(token)
+    workspace_payload = get(
+        f"{API}/organizations/seahaven/workspaces/{workspace}"
+    )["data"]
+    attrs = workspace_payload["attributes"]
+    check_invariants(attrs, workspace)
+    if not attrs.get("locked"):
+        print("workspace is unlocked")
+        return 0
+
+    current = (
+        workspace_payload.get("relationships", {})
+        .get("current-run", {})
+        .get("data")
+    )
+    if not current:
+        raise GuardError("workspace is locked without a current run")
+    run_id = current["id"]
+    run = get(f"{API}/runs/{run_id}")["data"]
+    run_attrs = run["attributes"]
+    status = run_attrs.get("status")
+    plan_only = run_attrs.get("plan-only")
+    print(f"current run {run_id} status={status} plan-only={plan_only}")
+    if plan_only:
+        print("speculative run does not block GitHub CD")
+        return 0
+    if status in APPLYING:
+        raise GuardError(f"{run_id} is {status}; wait, do not discard an apply")
+    if status not in DISCARDABLE:
+        raise GuardError(f"{run_id} status {status} is not discardable")
+    code = post(
+        f"{API}/runs/{run_id}/actions/discard",
+        {
+            "comment": (
+                "Discarded so GitHub CD can create the content-release applyable run"
+            )
+        },
+    )
+    print(f"discarded {run_id} http={code}")
+    return 0
+
+
+def reconcile_apply(
+    *,
+    run_id: str,
+    apply_outcome: str,
+    token: str,
+    get: HttpGet | None = None,
+) -> int:
+    token = require_token(token)
+    if not run_id:
+        raise GuardError("run id is required")
+    if apply_outcome == "success":
+        print("Apply succeeded.")
+        return 0
+    get = get or default_get(token)
+    status = get(f"{API}/runs/{run_id}")["data"]["attributes"]["status"]
+    print(f"HCP run {run_id} status={status}")
+    if status == "applied":
+        return 0
+    raise GuardError(
+        f"Apply failed: GitHub outcome={apply_outcome} HCP status={status}"
+    )
+
+
+def parse_args(argv: list[str] | None = None) -> argparse.Namespace:
+    parser = argparse.ArgumentParser()
+    sub = parser.add_subparsers(dest="command", required=True)
+
+    check = sub.add_parser("check-and-discard")
+    check.add_argument("--workspace", default=DEFAULT_WORKSPACE)
+    check.add_argument("--token", default=os.environ.get("TF_API_TOKEN", ""))
+
+    reconcile = sub.add_parser("reconcile-apply")
+    reconcile.add_argument("--run-id", required=True)
+    reconcile.add_argument(
+        "--apply-outcome",
+        default=os.environ.get("APPLY_OUTCOME", ""),
+    )
+    reconcile.add_argument("--token", default=os.environ.get("TF_API_TOKEN", ""))
+    return parser.parse_args(argv)
+
+
+def main(argv: list[str] | None = None) -> int:
+    args = parse_args(argv)
+    try:
+        if args.command == "check-and-discard":
+            return check_and_discard(workspace=args.workspace, token=args.token)
+        return reconcile_apply(
+            run_id=args.run_id,
+            apply_outcome=args.apply_outcome,
+            token=args.token,
+        )
+    except GuardError as exc:
+        print(str(exc), file=sys.stderr)
+        return 1
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/scripts/read-release-pointer.py b/scripts/read-release-pointer.py
new file mode 100755
index 00000000..d570310f
--- /dev/null
+++ b/scripts/read-release-pointer.py
@@ -0,0 +1,29 @@
+#!/usr/bin/env python3
+"""Read .release/current JSON from stdin and write GitHub Actions outputs."""
+from __future__ import annotations
+
+import json
+import os
+import sys
+
+
+def main() -> int:
+    raw = sys.stdin.read().strip()
+    data = json.loads(raw) if raw else {}
+    current = data.get("current") or ""
+    previous = data.get("previous") or ""
+    output_path = os.environ["GITHUB_OUTPUT"]
+    with open(output_path, "a", encoding="utf-8") as handle:
+        handle.write(f"live_current={current}\n")
+        handle.write(f"live_previous={previous}\n")
+    print(
+        "Pointer live current="
+        + (current or "<empty>")
+        + " previous="
+        + (previous or "<empty>")
+    )
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/scripts/summarize-cloudfront-live-state.sh b/scripts/summarize-cloudfront-live-state.sh
new file mode 100755
index 00000000..4389ec3e
--- /dev/null
+++ b/scripts/summarize-cloudfront-live-state.sh
@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+# Print pointer body, origin paths, distribution status, and served index hash.
+# Used by deploy.yml's always() summary. Never fails the job on a missing pointer.
+set -u
+DISTRIBUTION_ID="${DISTRIBUTION_ID:-E2CWLM1AFB964P}"
+SITE_BUCKET="${SITE_BUCKET:-seahaven-shoc-frontend-dev}"
+SITE_URL="${SITE_URL:-https://dev.seahaven.com}"
+echo "=== CloudFront live state ==="
+echo "pointer:"
+aws s3 cp "s3://${SITE_BUCKET}/.release/current" - --only-show-errors 2>/dev/null || echo "(missing)"
+echo
+aws cloudfront get-distribution --id "${DISTRIBUTION_ID}" --output json | python3 -c '
+import json, sys
+payload = json.load(sys.stdin)
+dist = payload.get("Distribution") or {}
+config = dist.get("DistributionConfig") or {}
+print("status:", dist.get("Status"))
+for origin in ((config.get("Origins") or {}).get("Items") or []):
+    print("origin %s: origin_path=%r" % (origin.get("Id"), origin.get("OriginPath") or ""))
+'
+echo
+echo -n "served index sha256: "
+curl -fsS --max-time 30 "${SITE_URL}/" | python3 -c "import hashlib,sys; print(hashlib.sha256(sys.stdin.buffer.read()).hexdigest())" || echo "unreachable"
diff --git a/scripts/terraform-validate.mjs b/scripts/terraform-validate.mjs
new file mode 100644
index 00000000..59ee4140
--- /dev/null
+++ b/scripts/terraform-validate.mjs
@@ -0,0 +1,35 @@
+import { spawnSync } from "node:child_process";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const TERRAFORM = process.env.TERRAFORM_BIN || "terraform";
+// Only dev has a live root. Staging adoption (SH-287) adds its own root here.
+const ENVIRONMENTS = ["dev"];
+const ROOTS = ENVIRONMENTS.map((environment) => path.join(ROOT, "terraform", "live", environment));
+
+function run(args, cwd = ROOT) {
+  const result = spawnSync(TERRAFORM, args, {
+    cwd,
+    encoding: "utf8",
+    stdio: "inherit",
+  });
+  if (result.error) {
+    throw new Error(`could not start Terraform: ${result.error.message}`, {
+      cause: result.error,
+    });
+  }
+  if (result.status !== 0) {
+    throw new Error(`terraform ${args.join(" ")} failed with exit code ${result.status}`);
+  }
+}
+
+run(["fmt", "-check", "-recursive", path.join(ROOT, "terraform")]);
+for (const root of ROOTS) {
+  // -backend=false never touches HCP state; -lockfile=readonly refuses to
+  // silently rewrite the committed provider lock.
+  run(["init", "-backend=false", "-input=false", "-lockfile=readonly", "-no-color"], root);
+  run(["validate", "-no-color"], root);
+}
+
+console.log(`Terraform formatting and validation passed for ${ENVIRONMENTS.join(", ")}.`);
diff --git a/scripts/terraform_import_plan_resources.py b/scripts/terraform_import_plan_resources.py
new file mode 100755
index 00000000..a5b6db08
--- /dev/null
+++ b/scripts/terraform_import_plan_resources.py
@@ -0,0 +1,130 @@
+"""Canonical frontend Terraform ownership and import-ID maps.
+
+Only ``dev`` has a Terraform root in this repository. The ``staging`` constants
+are kept so the checker can prove that a dev plan carrying a staging identifier
+is rejected; they do not authorize a staging import.
+"""
+
+COMMON_RESOURCES = {
+    "module.environment_owned.aws_s3_bucket.site": "aws_s3_bucket",
+    "module.environment_owned.aws_s3_bucket_public_access_block.site": (
+        "aws_s3_bucket_public_access_block"
+    ),
+    "module.environment_owned.aws_s3_bucket_ownership_controls.site": (
+        "aws_s3_bucket_ownership_controls"
+    ),
+    "module.environment_owned.aws_s3_bucket_server_side_encryption_configuration.site": (
+        "aws_s3_bucket_server_side_encryption_configuration"
+    ),
+    "module.environment_owned.aws_s3_bucket_versioning.site": "aws_s3_bucket_versioning",
+    "module.environment_owned.aws_s3_bucket_policy.site": "aws_s3_bucket_policy",
+    "module.environment_owned.aws_cloudfront_distribution.site": (
+        "aws_cloudfront_distribution"
+    ),
+    "module.environment_owned.aws_cloudfront_origin_access_control.site": (
+        "aws_cloudfront_origin_access_control"
+    ),
+    "module.environment_owned.aws_cloudfront_function.spa_rewrite": (
+        "aws_cloudfront_function"
+    ),
+    "module.environment_owned.aws_route53_record.site_a": "aws_route53_record",
+    "module.environment_owned.aws_route53_record.site_aaaa": "aws_route53_record",
+    "module.environment_owned.aws_iam_role.github_deploy": "aws_iam_role",
+    "module.environment_owned.aws_iam_role_policy.github_deploy": "aws_iam_role_policy",
+}
+
+REQUIRED_RESOURCES = {
+    environment: dict(COMMON_RESOURCES)
+    for environment in ("dev", "staging")
+}
+
+CONTROLLED_UPDATE_ADDRESSES = frozenset(
+    {
+        "module.environment_owned.aws_s3_bucket.site",
+        "module.environment_owned.aws_s3_bucket_policy.site",
+        "module.environment_owned.aws_cloudfront_distribution.site",
+        "module.environment_owned.aws_cloudfront_function.spa_rewrite",
+        "module.environment_owned.aws_iam_role.github_deploy",
+    }
+)
+
+ENVIRONMENT_CONFIG = {
+    "dev": {
+        "bucket_name": "seahaven-shoc-frontend-dev",
+        "bucket_auto_delete_helper_role_arn": (
+            "arn:aws:iam::396287094661:role/"
+            "shoc-frontend-dev-CustomS3AutoDeleteObjectsCustomRe-dmSDIY8EH7KV"
+        ),
+        "cloudformation_stack_name": "shoc-frontend-dev",
+        "distribution_id": "E2CWLM1AFB964P",
+        "workspace_name": "shoc-frontend-new-dev",
+    },
+    "staging": {
+        "bucket_name": "seahaven-shoc-frontend-staging",
+        "bucket_auto_delete_helper_role_arn": (
+            "arn:aws:iam::396287094661:role/"
+            "shoc-frontend-staging-CustomS3AutoDeleteObjectsCust-QbMDqZbl7YQ3"
+        ),
+        "cloudformation_stack_name": "shoc-frontend-staging",
+        "distribution_id": "E2JDVEZ6EGD49J",
+        "workspace_name": "shoc-frontend-new-staging",
+    },
+}
+
+
+def _bucket_imports(bucket_name: str) -> dict[str, str]:
+    return {
+        address: bucket_name
+        for address in COMMON_RESOURCES
+        if address.startswith("module.environment_owned.aws_s3_bucket")
+    }
+
+
+REQUIRED_IMPORT_IDS: dict[str, dict[str, str | None]] = {
+    "dev": {
+        **_bucket_imports("seahaven-shoc-frontend-dev"),
+        "module.environment_owned.aws_cloudfront_distribution.site": "E2CWLM1AFB964P",
+        "module.environment_owned.aws_cloudfront_origin_access_control.site": (
+            "E30VSIK87N8H64"
+        ),
+        "module.environment_owned.aws_cloudfront_function.spa_rewrite": (
+            "us-east-1shocfrontenddevSpaRewrite58674DB8"
+        ),
+        "module.environment_owned.aws_route53_record.site_a": (
+            "Z07671212N75U4YLPWZR8_dev.seahaven.com_A"
+        ),
+        "module.environment_owned.aws_route53_record.site_aaaa": (
+            "Z07671212N75U4YLPWZR8_dev.seahaven.com_AAAA"
+        ),
+        "module.environment_owned.aws_iam_role.github_deploy": (
+            "githubdeploy-shoc-frontend-new-dev"
+        ),
+        "module.environment_owned.aws_iam_role_policy.github_deploy": (
+            "githubdeploy-shoc-frontend-new-dev:"
+            "GithubDeployRoleDefaultPolicyE8F540D1"
+        ),
+    },
+    "staging": {
+        **_bucket_imports("seahaven-shoc-frontend-staging"),
+        "module.environment_owned.aws_cloudfront_distribution.site": "E2JDVEZ6EGD49J",
+        "module.environment_owned.aws_cloudfront_origin_access_control.site": (
+            "E1PF5R6QQNBZAI"
+        ),
+        "module.environment_owned.aws_cloudfront_function.spa_rewrite": (
+            "us-east-1shocfrontendstagingSpaRewriteE9C0CBDA"
+        ),
+        "module.environment_owned.aws_route53_record.site_a": (
+            "Z02602739VQWBWCAGXP4_staging.seahaven.com_A"
+        ),
+        "module.environment_owned.aws_route53_record.site_aaaa": (
+            "Z02602739VQWBWCAGXP4_staging.seahaven.com_AAAA"
+        ),
+        "module.environment_owned.aws_iam_role.github_deploy": (
+            "githubdeploy-shoc-frontend-new-staging"
+        ),
+        "module.environment_owned.aws_iam_role_policy.github_deploy": (
+            "githubdeploy-shoc-frontend-new-staging:"
+            "GithubDeployRoleDefaultPolicyE8F540D1"
+        ),
+    },
+}
diff --git a/scripts/test-hcp-run-guard.py b/scripts/test-hcp-run-guard.py
new file mode 100755
index 00000000..0e97e6d8
--- /dev/null
+++ b/scripts/test-hcp-run-guard.py
@@ -0,0 +1,243 @@
+#!/usr/bin/env python3
+"""Tests for every hcp-run-guard refusal, exit-0, discard, and reconcile case."""
+
+from __future__ import annotations
+
+import importlib.util
+from pathlib import Path
+from typing import Any
+
+SCRIPT = Path(__file__).with_name("hcp-run-guard.py")
+WORKSPACE = "shoc-frontend-new-dev"
+PATTERNS = [
+    "terraform/live/dev/**",
+    "terraform/live/modules/**",
+]
+
+
+def load_module():
+    spec = importlib.util.spec_from_file_location("hcp_run_guard", SCRIPT)
+    module = importlib.util.module_from_spec(spec)
+    assert spec.loader is not None
+    spec.loader.exec_module(module)
+    return module
+
+
+def workspace_payload(
+    *,
+    auto_apply: bool = False,
+    speculative: bool = True,
+    tags_regex: str | None = None,
+    trigger_patterns: list[str] | None = None,
+    locked: bool = False,
+    current_run: dict[str, Any] | None = None,
+) -> dict[str, Any]:
+    return {
+        "data": {
+            "attributes": {
+                "auto-apply": auto_apply,
+                "speculative-enabled": speculative,
+                "vcs-repo": {"tags-regex": tags_regex},
+                "trigger-patterns": PATTERNS if trigger_patterns is None else trigger_patterns,
+                "locked": locked,
+            },
+            "relationships": {
+                "current-run": {"data": current_run},
+            },
+        }
+    }
+
+
+def run_payload(*, status: str, plan_only: bool = False) -> dict[str, Any]:
+    return {"data": {"attributes": {"status": status, "plan-only": plan_only}}}
+
+
+def check(module, payloads: dict[str, Any], posts: list | None = None):
+    calls: list[str] = []
+
+    def get(url: str) -> dict[str, Any]:
+        calls.append(url)
+        if url not in payloads:
+            raise AssertionError(f"unexpected GET {url}")
+        return payloads[url]
+
+    recorded: list[tuple[str, dict[str, Any]]] = []
+
+    def post(url: str, payload: dict[str, Any]) -> int:
+        recorded.append((url, payload))
+        if posts:
+            return posts.pop(0)
+        return 202
+
+    try:
+        code = module.check_and_discard(
+            workspace=WORKSPACE,
+            token="test-token",
+            get=get,
+            post=post,
+        )
+        return code, None, calls, recorded
+    except module.GuardError as exc:
+        return 1, str(exc), calls, recorded
+
+
+def reconcile(module, outcome: str, payloads: dict[str, Any], run_id: str = "run-1"):
+    def get(url: str) -> dict[str, Any]:
+        if url not in payloads:
+            raise AssertionError(f"unexpected GET {url}")
+        return payloads[url]
+
+    try:
+        code = module.reconcile_apply(
+            run_id=run_id,
+            apply_outcome=outcome,
+            token="test-token",
+            get=get,
+        )
+        return code, None
+    except module.GuardError as exc:
+        return 1, str(exc)
+
+
+def main() -> int:
+    module = load_module()
+    ws = f"https://app.terraform.io/api/v2/organizations/seahaven/workspaces/{WORKSPACE}"
+    run_url = "https://app.terraform.io/api/v2/runs/run-1"
+    discard_url = f"{run_url}/actions/discard"
+    failures: list[str] = []
+
+    def expect_refuse(name: str, payloads: dict[str, Any], fragment: str) -> None:
+        code, error, _, recorded = check(module, payloads)
+        if code != 1 or not error or fragment not in error:
+            failures.append(f"{name}: expected refuse containing {fragment!r}, got {code} {error}")
+        if recorded:
+            failures.append(f"{name}: discard was posted on a refusal")
+
+    expect_refuse(
+        "auto-apply",
+        {ws: workspace_payload(auto_apply=True)},
+        "auto-apply is on",
+    )
+    expect_refuse(
+        "speculative-off",
+        {ws: workspace_payload(speculative=False)},
+        "speculative plans are off",
+    )
+    expect_refuse(
+        "tags-regex",
+        {ws: workspace_payload(tags_regex="^v")},
+        "tag-based VCS triggering",
+    )
+    expect_refuse(
+        "wrong-patterns",
+        {ws: workspace_payload(trigger_patterns=["terraform/**"])},
+        "trigger-patterns must be",
+    )
+    expect_refuse(
+        "locked-without-run",
+        {ws: workspace_payload(locked=True, current_run=None)},
+        "locked without a current run",
+    )
+    expect_refuse(
+        "applying",
+        {
+            ws: workspace_payload(locked=True, current_run={"id": "run-1"}),
+            run_url: run_payload(status="applying"),
+        },
+        "wait, do not discard an apply",
+    )
+    expect_refuse(
+        "not-discardable",
+        {
+            ws: workspace_payload(locked=True, current_run={"id": "run-1"}),
+            run_url: run_payload(status="errored"),
+        },
+        "is not discardable",
+    )
+
+    code, error, _, recorded = check(module, {ws: workspace_payload(locked=False)})
+    if code != 0 or error is not None or recorded:
+        failures.append(f"unlocked: expected exit 0, got {code} {error} {recorded}")
+
+    code, error, _, recorded = check(
+        module,
+        {
+            ws: workspace_payload(locked=True, current_run={"id": "run-1"}),
+            run_url: run_payload(status="planned", plan_only=True),
+        },
+    )
+    if code != 0 or recorded:
+        failures.append(f"plan-only: expected exit 0 without discard, got {code} {recorded}")
+
+    code, error, _, recorded = check(
+        module,
+        {
+            ws: workspace_payload(locked=True, current_run={"id": "run-1"}),
+            run_url: run_payload(status="planned"),
+        },
+    )
+    if code != 0 or error is not None:
+        failures.append(f"discard: expected exit 0, got {code} {error}")
+    if not recorded or recorded[0][0] != discard_url:
+        failures.append(f"discard: posted {recorded}")
+
+    code, error, _, recorded = check(
+        module,
+        {
+            ws: workspace_payload(locked=True, current_run={"id": "run-1"}),
+            run_url: run_payload(status="policy_checked"),
+        },
+        posts=[409],
+    )
+    if code != 0:
+        failures.append(f"discard-409: expected exit 0, got {code} {error}")
+
+    try:
+        module.check_and_discard(workspace=WORKSPACE, token="", get=lambda _url: {})
+        failures.append("missing-token: accepted empty token")
+    except module.GuardError:
+        pass
+
+    code, error = reconcile(module, "success", {})
+    if code != 0:
+        failures.append(f"reconcile-success: expected 0, got {code} {error}")
+
+    code, error = reconcile(
+        module,
+        "failure",
+        {run_url: run_payload(status="applied")},
+    )
+    if code != 0:
+        failures.append(f"reconcile-applied: expected 0, got {code} {error}")
+
+    code, error = reconcile(
+        module,
+        "failure",
+        {run_url: run_payload(status="errored")},
+    )
+    if code != 1 or not error or "errored" not in error:
+        failures.append(f"reconcile-errored: expected refuse, got {code} {error}")
+
+    try:
+        module.reconcile_apply(run_id="", apply_outcome="failure", token="test-token")
+        failures.append("reconcile-missing-run: accepted empty run id")
+    except module.GuardError:
+        pass
+
+    try:
+        module.reconcile_apply(run_id="run-1", apply_outcome="failure", token="")
+        failures.append("reconcile-missing-token: accepted empty token")
+    except module.GuardError:
+        pass
+
+    if failures:
+        print("FAIL: hcp-run-guard cases failed", file=__import__("sys").stderr)
+        for item in failures:
+            print(f"  - {item}", file=__import__("sys").stderr)
+        return 1
+    print("PASS: HCP run guard checks")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/scripts/test-terraform-import-plan-check.py b/scripts/test-terraform-import-plan-check.py
new file mode 100755
index 00000000..f0c8c2e4
--- /dev/null
+++ b/scripts/test-terraform-import-plan-check.py
@@ -0,0 +1,533 @@
+#!/usr/bin/env python3
+"""Deterministic unit tests for the frontend Terraform plan checker."""
+
+from __future__ import annotations
+
+import copy
+import json
+import re
+import subprocess
+import sys
+import tempfile
+import unittest
+from pathlib import Path
+from typing import Any
+
+from terraform_import_plan_resources import (
+    CONTROLLED_UPDATE_ADDRESSES,
+    ENVIRONMENT_CONFIG,
+    REQUIRED_IMPORT_IDS,
+    REQUIRED_RESOURCES,
+)
+
+SCRIPT = Path(__file__).with_name("check-terraform-import-plan.py")
+REPOSITORY = SCRIPT.parent.parent
+BUCKET_POLICY = "module.environment_owned.aws_s3_bucket_policy.site"
+BUCKET = "module.environment_owned.aws_s3_bucket.site"
+DEPLOY_POLICY = "module.environment_owned.aws_iam_role_policy.github_deploy"
+ROLE = "module.environment_owned.aws_iam_role.github_deploy"
+DISTRIBUTION = "module.environment_owned.aws_cloudfront_distribution.site"
+TAG_ADDRESSES = CONTROLLED_UPDATE_ADDRESSES - {BUCKET_POLICY}
+
+
+def import_id(environment: str, address: str) -> str:
+    expected = REQUIRED_IMPORT_IDS[environment][address]
+    assert expected is not None, f"{environment} must pin an import ID for {address}"
+    return expected
+
+
+def distribution_id(environment: str) -> str:
+    configured = ENVIRONMENT_CONFIG[environment]["distribution_id"]
+    assert isinstance(configured, str), f"{environment} must pin a distribution ID"
+    return configured
+
+
+def pre_adoption_bucket_policy(environment: str) -> dict[str, Any]:
+    config = ENVIRONMENT_CONFIG[environment]
+    bucket_arn = f"arn:aws:s3:::{config['bucket_name']}"
+    source = (
+        "arn:aws:cloudfront::396287094661:distribution/"
+        f"{distribution_id(environment)}"
+    )
+    return {
+        "Version": "2012-10-17",
+        "Statement": [
+            {
+                "Effect": "Allow",
+                "Principal": {
+                    "AWS": config["bucket_auto_delete_helper_role_arn"]
+                },
+                "Action": [
+                    "s3:DeleteObject*",
+                    "s3:GetBucket*",
+                    "s3:List*",
+                    "s3:PutBucketPolicy",
+                ],
+                "Resource": [bucket_arn, f"{bucket_arn}/*"],
+            },
+            {
+                "Effect": "Allow",
+                "Principal": {"Service": "cloudfront.amazonaws.com"},
+                "Action": "s3:GetObject",
+                "Resource": f"{bucket_arn}/*",
+                "Condition": {"StringEquals": {"AWS:SourceArn": source}},
+            },
+            {
+                "Effect": "Deny",
+                "Principal": {"AWS": "*"},
+                "Action": "s3:*",
+                "Resource": [bucket_arn, f"{bucket_arn}/*"],
+                "Condition": {"Bool": {"aws:SecureTransport": "false"}},
+            },
+        ],
+    }
+
+
+def bucket_policy(environment: str) -> dict[str, Any]:
+    bucket = ENVIRONMENT_CONFIG[environment]["bucket_name"]
+    bucket_arn = f"arn:aws:s3:::{bucket}"
+    source = (
+        "arn:aws:cloudfront::396287094661:distribution/"
+        f"{distribution_id(environment)}"
+    )
+    return {
+        "Version": "2012-10-17",
+        "Statement": [
+            {
+                "Effect": "Allow",
+                "Principal": {"Service": "cloudfront.amazonaws.com"},
+                "Action": "s3:GetObject",
+                "Resource": f"{bucket_arn}/*",
+                "Condition": {"StringEquals": {"AWS:SourceArn": source}},
+            },
+            {
+                "Effect": "Deny",
+                "Principal": {"AWS": "*"},
+                "Action": "s3:*",
+                "Resource": [bucket_arn, f"{bucket_arn}/*"],
+                "Condition": {"Bool": {"aws:SecureTransport": "false"}},
+            },
+        ],
+    }
+
+
+def tag_change(environment: str, address: str) -> dict[str, Any]:
+    manager = {
+        "HcpTerraformWorkspace": ENVIRONMENT_CONFIG[environment]["workspace_name"]
+    }
+    before_tags = {
+        "Environment": environment,
+        "ManagedBy": "cdk",
+        "Project": "shoc-frontend",
+    }
+    after_tags = {
+        "Environment": environment,
+        "ManagedBy": "terraform",
+        "Ownership": "terraform",
+        "Project": "shoc-frontend",
+    }
+    if address == ROLE:
+        before_tags.update(manager)
+        after_tags.update(manager)
+    if address == BUCKET:
+        before_tags["aws-cdk:auto-delete-objects"] = "true"
+    before: dict[str, Any] = {
+        "tags": before_tags,
+        "tags_all": before_tags,
+    }
+    after: dict[str, Any] = {
+        "tags": after_tags,
+        "tags_all": after_tags,
+    }
+    if address == DISTRIBUTION:
+        before["id"] = distribution_id(environment)
+        after["id"] = distribution_id(environment)
+    return {"actions": ["update"], "before": before, "after": after}
+
+
+def policy_change(environment: str, address: str) -> dict[str, Any]:
+    if address != BUCKET_POLICY:
+        raise AssertionError(f"{address} is not a reviewed policy update")
+    return {
+        "actions": ["update"],
+        "before": {"policy": json.dumps(pre_adoption_bucket_policy(environment))},
+        "after": {"policy": json.dumps(bucket_policy(environment))},
+    }
+
+
+def make_plan(
+    environment: str,
+    *,
+    mode: str = "import",
+    controlled_updates: set[str] | None = None,
+) -> dict[str, Any]:
+    resources: list[dict[str, Any]] = []
+    updates = controlled_updates or set()
+    for address, resource_type in REQUIRED_RESOURCES[environment].items():
+        if mode == "import":
+            change: dict[str, Any] = {
+                "actions": ["no-op"],
+                "importing": {"id": import_id(environment, address)},
+            }
+        elif mode == "post-import":
+            change = {"actions": ["no-op"]}
+        elif address in updates:
+            change = (
+                tag_change(environment, address)
+                if address in TAG_ADDRESSES
+                else policy_change(environment, address)
+            )
+        else:
+            change = {"actions": ["no-op"]}
+            if address == DISTRIBUTION:
+                change["after"] = {"id": distribution_id(environment)}
+        resources.append(
+            {
+                "address": address,
+                "mode": "managed",
+                "type": resource_type,
+                "change": change,
+            }
+        )
+    return {"resource_changes": resources}
+
+
+def resource(plan: dict[str, Any], address: str) -> dict[str, Any]:
+    return next(
+        item for item in plan["resource_changes"] if item["address"] == address
+    )
+
+
+def run_checker(
+    plan: dict[str, Any],
+    environment: str,
+    *allowed_updates: str,
+    post_import: bool = False,
+) -> subprocess.CompletedProcess[str]:
+    with tempfile.TemporaryDirectory() as directory:
+        path = Path(directory) / "plan.json"
+        path.write_text(json.dumps(plan), encoding="utf-8")
+        command = [
+            sys.executable,
+            str(SCRIPT),
+            str(path),
+            "--environment",
+            environment,
+        ]
+        if post_import:
+            command.append("--post-import-no-op")
+        for address in allowed_updates:
+            command.extend(["--allow-update-address", address])
+        return subprocess.run(
+            command,
+            check=False,
+            capture_output=True,
+            text=True,
+        )
+
+
+class ImportPlanCheckerTests(unittest.TestCase):
+    def assert_passes(
+        self,
+        plan: dict[str, Any],
+        environment: str,
+        *allowed_updates: str,
+        post_import: bool = False,
+    ) -> None:
+        result = run_checker(
+            plan,
+            environment,
+            *allowed_updates,
+            post_import=post_import,
+        )
+        self.assertEqual(0, result.returncode, result.stdout + result.stderr)
+
+    def assert_fails(
+        self,
+        plan: dict[str, Any],
+        environment: str,
+        *allowed_updates: str,
+        post_import: bool = False,
+    ) -> None:
+        result = run_checker(
+            plan,
+            environment,
+            *allowed_updates,
+            post_import=post_import,
+        )
+        self.assertNotEqual(0, result.returncode, result.stdout + result.stderr)
+
+    def test_cloudfront_function_source_matches_exact_nine_line_join(self) -> None:
+        source = (
+            REPOSITORY
+            / "terraform/live/modules/environment-owned/main.tf"
+        ).read_text(encoding="utf-8")
+        expected = """  spa_rewrite_code = join("\\n", [
+    "function handler(event) {",
+    "  var request = event.request;",
+    "  var uri = request.uri;",
+    "  // No file extension after the last slash -> a client-side route.",
+    "  if (uri.lastIndexOf('.') <= uri.lastIndexOf('/')) {",
+    "    request.uri = '/index.html';",
+    "  }",
+    "  return request;",
+    "}",
+  ])"""
+        self.assertIn(expected, source)
+
+    def test_only_dev_has_a_live_root(self) -> None:
+        live_roots = sorted(
+            path.name
+            for path in (REPOSITORY / "terraform/live").iterdir()
+            if path.is_dir() and path.name != "modules"
+        )
+        self.assertEqual(["dev"], live_roots)
+
+    def test_dev_root_pins_adoption_complete_in_code(self) -> None:
+        source = (REPOSITORY / "terraform/live/dev/main.tf").read_text(encoding="utf-8")
+        self.assertRegex(source, r"\n\s+adoption_complete\s+= true\n")
+        self.assertRegex(source, r"adoption_complete\s+= local\.adoption_complete")
+        self.assertNotIn('variable "adoption_complete"', source)
+        for root_file in ("main.tf", "imports.tf", "outputs.tf", "providers.tf", "versions.tf"):
+            self.assertNotIn(
+                "variable ",
+                (REPOSITORY / f"terraform/live/dev/{root_file}").read_text(encoding="utf-8"),
+                root_file,
+            )
+
+    def test_managed_modules_use_direct_pinned_inputs(self) -> None:
+        expected = {
+            "dev": (
+                "local.hosted_zone_id",
+                "local.certificate_arn",
+                "local.github_oidc_arn",
+                "local.cache_policy_id",
+            ),
+        }
+        for environment, values in expected.items():
+            source = (
+                REPOSITORY / f"terraform/live/{environment}/main.tf"
+            ).read_text(encoding="utf-8")
+            for name, value in zip(
+                (
+                    "hosted_zone_id",
+                    "certificate_arn",
+                    "github_oidc_provider_arn",
+                    "cache_policy_id",
+                ),
+                values,
+                strict=True,
+            ):
+                self.assertIn(f"{name}", source)
+                self.assertRegex(source, rf"{name}\s+= {re.escape(value)}")
+            self.assertNotRegex(
+                source,
+                r"(hosted_zone_id|certificate_arn|github_oidc_provider_arn|cache_policy_id)\s+= module\.inventory",
+            )
+
+    def test_exact_import_plan_passes_for_every_environment(self) -> None:
+        for environment in REQUIRED_RESOURCES:
+            with self.subTest(environment=environment):
+                self.assert_passes(make_plan(environment), environment)
+
+    def test_import_missing_extra_wrong_type_and_cross_environment_fail(self) -> None:
+        for mutation in ("missing", "extra", "wrong-type", "cross-environment"):
+            plan = make_plan("dev")
+            if mutation == "missing":
+                plan["resource_changes"].pop()
+            elif mutation == "extra":
+                plan["resource_changes"].append(
+                    {
+                        "address": "module.inventory.aws_route53_zone.site",
+                        "mode": "managed",
+                        "type": "aws_route53_zone",
+                        "change": {
+                            "actions": ["no-op"],
+                            "importing": {"id": "Z00000000000000000000"},
+                        },
+                    }
+                )
+            elif mutation == "wrong-type":
+                plan["resource_changes"][0]["type"] = "aws_s3_object"
+            else:
+                resource(plan, DISTRIBUTION)["change"]["importing"]["id"] = (
+                    REQUIRED_IMPORT_IDS["staging"][DISTRIBUTION]
+                )
+            with self.subTest(mutation=mutation):
+                self.assert_fails(plan, "dev")
+
+    def test_import_rejects_mutation_and_invalid_metadata(self) -> None:
+        for actions in (["create"], ["update"], ["delete"], ["delete", "create"]):
+            plan = make_plan("dev")
+            plan["resource_changes"][0]["change"]["actions"] = actions
+            with self.subTest(actions=actions):
+                self.assert_fails(plan, "dev")
+        plan = make_plan("dev")
+        plan["resource_changes"][0]["change"]["importing"] = {"id": ""}
+        self.assert_fails(plan, "dev")
+
+    def test_post_import_no_op_passes(self) -> None:
+        self.assert_passes(
+            make_plan("staging", mode="post-import"),
+            "staging",
+            post_import=True,
+        )
+
+    def test_post_import_rejects_import_metadata_and_update(self) -> None:
+        plan = make_plan("dev", mode="post-import")
+        plan["resource_changes"][0]["change"]["importing"] = {"id": "unexpected"}
+        self.assert_fails(plan, "dev", post_import=True)
+        plan = make_plan("dev", mode="post-import")
+        plan["resource_changes"][0]["change"]["actions"] = ["update"]
+        self.assert_fails(plan, "dev", post_import=True)
+
+    def test_every_allowed_controlled_diff_passes(self) -> None:
+        for environment in REQUIRED_RESOURCES:
+            for address in CONTROLLED_UPDATE_ADDRESSES:
+                with self.subTest(environment=environment, address=address):
+                    self.assert_passes(
+                        make_plan(
+                            environment,
+                            mode="controlled",
+                            controlled_updates={address},
+                        ),
+                        environment,
+                        address,
+                    )
+
+    def test_full_exact_controlled_allowlist_passes(self) -> None:
+        addresses = tuple(sorted(CONTROLLED_UPDATE_ADDRESSES))
+        self.assert_passes(
+            make_plan(
+                "dev",
+                mode="controlled",
+                controlled_updates=set(addresses),
+            ),
+            "dev",
+            *addresses,
+        )
+
+    def test_tag_update_rejects_extra_attribute_and_wrong_value(self) -> None:
+        plan = make_plan("dev", mode="controlled", controlled_updates={ROLE})
+        resource(plan, ROLE)["change"]["after"]["assume_role_policy"] = "{}"
+        self.assert_fails(plan, "dev", ROLE)
+        plan = make_plan("dev", mode="controlled", controlled_updates={ROLE})
+        resource(plan, ROLE)["change"]["after"]["tags"]["ManagedBy"] = "attacker"
+        self.assert_fails(plan, "dev", ROLE)
+
+    def test_tag_update_requires_complete_adopted_tag_sets(self) -> None:
+        plan = make_plan("dev", mode="controlled", controlled_updates={BUCKET})
+        del resource(plan, BUCKET)["change"]["after"]["tags"]["Ownership"]
+        self.assert_fails(plan, "dev", BUCKET)
+
+    def test_role_trust_change_is_rejected(self) -> None:
+        plan = make_plan("dev", mode="controlled", controlled_updates={ROLE})
+        role = resource(plan, ROLE)["change"]
+        role["before"]["assume_role_policy"] = '{"Statement":[]}'
+        role["after"]["assume_role_policy"] = '{"Statement":[{"Effect":"Allow"}]}'
+        self.assert_fails(plan, "dev", ROLE)
+
+    def test_bucket_policy_rejects_malicious_principal_and_extra_statement(self) -> None:
+        for mutation in ("principal", "extra"):
+            plan = make_plan(
+                "dev",
+                mode="controlled",
+                controlled_updates={BUCKET_POLICY},
+            )
+            policy = copy.deepcopy(bucket_policy("dev"))
+            if mutation == "principal":
+                policy["Statement"][0]["Principal"] = {"AWS": "*"}
+            else:
+                policy["Statement"].append(
+                    {
+                        "Effect": "Allow",
+                        "Principal": {"AWS": "*"},
+                        "Action": "s3:*",
+                        "Resource": "*",
+                    }
+                )
+            resource(plan, BUCKET_POLICY)["change"]["after"]["policy"] = json.dumps(
+                policy
+            )
+            with self.subTest(mutation=mutation):
+                self.assert_fails(plan, "dev", BUCKET_POLICY)
+
+    def test_github_deploy_policy_is_release_prefix_only(self) -> None:
+        source = (
+            REPOSITORY / "terraform/live/modules/environment-owned/main.tf"
+        ).read_text(encoding="utf-8")
+        document = source.split('data "aws_iam_policy_document" "github_deploy" {', 1)[1]
+        document = document.split("resource ", 1)[0]
+        self.assertNotIn("var.adoption_complete", document)
+        self.assertIn("ListReleasePrefixes", document)
+        self.assertIn("PublishReleasePrefix", document)
+        self.assertIn("ReadReleasePointer", document)
+        self.assertIn("ReadDistribution", document)
+        self.assertIn("cloudfront:GetDistribution", document)
+        self.assertIn("cloudfront:GetDistributionConfig", document)
+        self.assertIn("releases/*", document)
+        self.assertNotIn("AssumeCdkBootstrapRoles", document)
+        self.assertNotIn("DescribeStack", document)
+        self.assertNotIn("CreateInvalidation", document)
+        self.assertNotIn("ReadDeploymentBucket", document)
+        self.assertNotIn("PublishAndRollbackSiteObjects", document)
+        self.assertNotIn(
+            "module.environment_owned.aws_iam_role_policy.github_deploy",
+            CONTROLLED_UPDATE_ADDRESSES,
+        )
+
+    def test_deploy_policy_is_not_eligible_for_controlled_update(self) -> None:
+        plan = make_plan("dev", mode="controlled", controlled_updates=set())
+        self.assert_fails(plan, "dev", DEPLOY_POLICY)
+        plan = make_plan("dev", mode="controlled", controlled_updates=set())
+        resource(plan, DEPLOY_POLICY)["change"] = {
+            "actions": ["update"],
+            "before": {"policy": "{}"},
+            "after": {"policy": '{"Version":"2012-10-17"}'},
+        }
+        self.assert_fails(plan, "dev", DEPLOY_POLICY)
+
+    def test_policy_updates_require_exact_pre_adoption_state(self) -> None:
+        for environment in REQUIRED_RESOURCES:
+            plan = make_plan(
+                environment,
+                mode="controlled",
+                controlled_updates={BUCKET_POLICY},
+            )
+            change = resource(plan, BUCKET_POLICY)["change"]
+            before = json.loads(change["before"]["policy"])
+            before["Statement"].append(
+                {
+                    "Sid": "UnexpectedDrift",
+                    "Effect": "Deny",
+                    "Action": "*",
+                    "Resource": "*",
+                }
+            )
+            change["before"]["policy"] = json.dumps(before)
+            with self.subTest(environment=environment):
+                self.assert_fails(plan, environment, BUCKET_POLICY)
+
+    def test_controlled_update_rejects_unknown_and_replace_paths(self) -> None:
+        for field, value in (
+            ("after_unknown", {"tags": {"ManagedBy": True}}),
+            ("replace_paths", [["tags"]]),
+        ):
+            plan = make_plan(
+                "dev",
+                mode="controlled",
+                controlled_updates={ROLE},
+            )
+            resource(plan, ROLE)["change"][field] = value
+            with self.subTest(field=field):
+                self.assert_fails(plan, "dev", ROLE)
+
+    def test_nonallowlisted_update_and_unused_allowlist_fail(self) -> None:
+        plan = make_plan("dev", mode="controlled", controlled_updates={ROLE})
+        self.assert_fails(plan, "dev", BUCKET_POLICY)
+        plan = make_plan("dev", mode="controlled", controlled_updates=set())
+        self.assert_fails(plan, "dev", ROLE)
+
+
+if __name__ == "__main__":
+    unittest.main()
diff --git a/scripts/test-terraform-release-plan-check.py b/scripts/test-terraform-release-plan-check.py
new file mode 100755
index 00000000..d050701e
--- /dev/null
+++ b/scripts/test-terraform-release-plan-check.py
@@ -0,0 +1,363 @@
+#!/usr/bin/env python3
+"""Deterministic tests for check-terraform-release-plan.py."""
+
+from __future__ import annotations
+
+import importlib.util
+import io
+import subprocess
+import sys
+import urllib.request
+from email.message import EmailMessage
+from pathlib import Path
+from urllib.request import Request
+
+SCRIPT = Path(__file__).with_name("check-terraform-release-plan.py")
+FIXTURES = Path(__file__).with_name("testdata") / "terraform-release-plans"
+EXPECTED_LABEL = "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+EXPECTED_PREVIOUS = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+PLAN_ID = "plan-8F5JFydVYAmtTjET"
+POINTER_ADDRESS = "module.environment_owned.aws_s3_object.release_pointer"
+
+
+def run_case(
+    fixture_name: str,
+    *,
+    expected_label: str = EXPECTED_LABEL,
+    expected_previous: str = EXPECTED_PREVIOUS,
+) -> subprocess.CompletedProcess[str]:
+    return subprocess.run(
+        [
+            sys.executable,
+            str(SCRIPT),
+            str(FIXTURES / fixture_name),
+            "--expected-version-label",
+            expected_label,
+            "--expected-previous-version-label",
+            expected_previous,
+        ],
+        check=False,
+        capture_output=True,
+        text=True,
+    )
+
+
+class FakeResponse:
+    def __init__(
+        self,
+        *,
+        url: str,
+        status: int,
+        headers: dict[str, str] | None = None,
+        body: bytes = b"",
+    ) -> None:
+        self.url = url
+        self.status = status
+        self.headers = headers or {}
+        self._body = body
+
+    def read(self) -> bytes:
+        return self._body
+
+    def close(self) -> None:
+        return None
+
+
+def load_check_module():
+    spec = importlib.util.spec_from_file_location(
+        "check_terraform_release_plan", SCRIPT
+    )
+    module = importlib.util.module_from_spec(spec)
+    assert spec.loader is not None
+    spec.loader.exec_module(module)
+    return module
+
+
+def test_download_pinning() -> list[str]:
+    module = load_check_module()
+    fixture = (FIXTURES / "version-only.json").read_bytes()
+    archive_url = "https://archivist.terraform.io/v1/object/example"
+    calls: list[str] = []
+
+    def fake_urlopen(request: Request, **_kwargs):
+        url = request.full_url
+        calls.append(url)
+        host = request.host if hasattr(request, "host") else ""
+        if url.startswith("https://app.terraform.io/api/v2/plans/"):
+            if request.get_header("Authorization") != "Bearer test-token":
+                raise AssertionError("API request is missing the bearer token")
+            if "/runs" in url or "/apply" in url or "/discard" in url:
+                raise AssertionError(f"download contacted a run-control path: {url}")
+            return FakeResponse(
+                url=url,
+                status=307,
+                headers={"Location": archive_url},
+            )
+        if url == archive_url:
+            if request.get_header("Authorization"):
+                raise AssertionError("archivist request must not send TF_API_TOKEN")
+            return FakeResponse(url=url, status=200, body=fixture)
+        raise AssertionError(f"unexpected URL {url} host={host}")
+
+    plan = module.download_plan_json(PLAN_ID, "test-token", urlopen=fake_urlopen)
+    failures: list[str] = []
+    addresses = [item["address"] for item in plan["resource_changes"]]
+    if POINTER_ADDRESS not in addresses:
+        failures.append("download did not return the version-only fixture")
+    if calls != [
+        f"https://app.terraform.io/api/v2/plans/{PLAN_ID}/json-output",
+        archive_url,
+    ]:
+        failures.append(f"download URLs were {calls}")
+
+    try:
+        module.download_plan_json("run-not-a-plan", "test-token", urlopen=fake_urlopen)
+        failures.append("invalid plan id was accepted")
+    except ValueError:
+        pass
+
+    def redirect_elsewhere(request: Request, **_kwargs):
+        return FakeResponse(
+            url=request.full_url,
+            status=307,
+            headers={"Location": "https://evil.example/plan.json"},
+        )
+
+    try:
+        module.download_plan_json(PLAN_ID, "test-token", urlopen=redirect_elsewhere)
+        failures.append("redirect to a non-archivist host was accepted")
+    except ValueError:
+        pass
+
+    def double_redirect(request: Request, **_kwargs):
+        if request.full_url.startswith("https://app.terraform.io/"):
+            return FakeResponse(
+                url=request.full_url,
+                status=307,
+                headers={"Location": archive_url},
+            )
+        return FakeResponse(
+            url=request.full_url,
+            status=307,
+            headers={"Location": "https://archivist.terraform.io/v1/object/other"},
+        )
+
+    try:
+        module.download_plan_json(PLAN_ID, "test-token", urlopen=double_redirect)
+        failures.append("second archivist redirect was accepted")
+    except ValueError:
+        pass
+
+    def not_ready(request: Request, **_kwargs):
+        return FakeResponse(url=request.full_url, status=204)
+
+    try:
+        module.download_plan_json(PLAN_ID, "test-token", urlopen=not_ready)
+        failures.append("HTTP 204 was polled or accepted")
+    except ValueError as exc:
+        if "poll" not in str(exc):
+            failures.append(f"HTTP 204 error was {exc}")
+
+    source = SCRIPT.read_text(encoding="utf-8")
+    for banned in ("/apply", "/discard", "/runs"):
+        if banned in source:
+            failures.append(f"download client contains run-control path {banned}")
+
+    return failures
+
+
+def _scripted_https_handler(fixture: bytes, archive_url: str):
+    calls: list[str] = []
+    api_prefix = "https://app.terraform.io/api/v2/plans/"
+
+    class ScriptedHTTPSHandler(urllib.request.BaseHandler):
+        handler_order = 100
+
+        def https_open(self, req: Request):
+            url = req.full_url
+            calls.append(url)
+            headers = EmailMessage()
+            if url.startswith(api_prefix):
+                headers["Location"] = archive_url
+                body = b""
+                status = 307
+                msg = "Temporary Redirect"
+            elif url == archive_url:
+                body = fixture
+                status = 200
+                msg = "OK"
+            else:
+                raise AssertionError(f"unexpected URL {url}")
+            response = urllib.response.addinfourl(
+                io.BytesIO(body),
+                headers,
+                url,
+                code=status,
+            )
+            response.msg = msg
+            return response
+
+    return ScriptedHTTPSHandler(), calls
+
+
+def test_download_standard_opener_redirect() -> list[str]:
+    """urllib follows the HCP 307; the guard must still inspect that first hop."""
+    module = load_check_module()
+    fixture = (FIXTURES / "version-only.json").read_bytes()
+    archive_url = "https://archivist.terraform.io/v1/object/example"
+    api_url = f"https://app.terraform.io/api/v2/plans/{PLAN_ID}/json-output"
+    failures: list[str] = []
+
+    following_handler, following_calls = _scripted_https_handler(fixture, archive_url)
+    followed = urllib.request.build_opener(following_handler).open(api_url)
+    try:
+        if followed.status != 200:
+            failures.append(
+                f"standard opener first status was {followed.status}, not 200"
+            )
+        if following_calls != [api_url, archive_url]:
+            failures.append(f"standard opener URLs were {following_calls}")
+    finally:
+        followed.close()
+
+    guard_handler, guard_calls = _scripted_https_handler(fixture, archive_url)
+    try:
+        plan = module.download_plan_json(
+            PLAN_ID,
+            "test-token",
+            handlers=(guard_handler,),
+        )
+    except ValueError as exc:
+        failures.append(f"no-redirect download failed: {exc}")
+        return failures
+
+    addresses = [item["address"] for item in plan["resource_changes"]]
+    if POINTER_ADDRESS not in addresses:
+        failures.append("no-redirect download did not return the version-only fixture")
+    if guard_calls != [api_url, archive_url]:
+        failures.append(f"no-redirect download URLs were {guard_calls}")
+
+    following_urlopen_handler, _ = _scripted_https_handler(fixture, archive_url)
+    following_urlopen = urllib.request.build_opener(following_urlopen_handler).open
+    try:
+        module.download_plan_json(
+            PLAN_ID,
+            "test-token",
+            urlopen=following_urlopen,
+        )
+        failures.append("redirect-following urlopen was accepted as the first hop")
+    except ValueError as exc:
+        if "expected a redirect" not in str(exc):
+            failures.append(f"following urlopen error was {exc}")
+
+    return failures
+
+
+def test_deploy_workflow_uses_script_flags() -> list[str]:
+    workflow = (
+        Path(__file__).resolve().parents[1] / ".github/workflows/deploy.yml"
+    ).read_text(encoding="utf-8")
+    failures: list[str] = []
+    if workflow.count("--expected-version-label") < 2:
+        failures.append(
+            "deploy.yml must pass --expected-version-label on release and rollback"
+        )
+    if workflow.count("--expected-previous-version-label") < 2:
+        failures.append(
+            "deploy.yml must pass --expected-previous-version-label on release and rollback"
+        )
+    for forbidden in (
+        "--expected-current-label",
+        "--expected-previous-label",
+        "--before-current-label",
+        "--before-previous-label",
+        "--current-origin-id",
+        "--previous-origin-id",
+        "CURRENT_ORIGIN_ID",
+    ):
+        if forbidden in workflow:
+            failures.append(f"deploy.yml still passes unknown flag {forbidden}")
+    return failures
+
+
+def test_deploy_workflow_confirms_prefix_with_head_object() -> list[str]:
+    workflow = (
+        Path(__file__).resolve().parents[1] / ".github/workflows/deploy.yml"
+    ).read_text(encoding="utf-8")
+    failures: list[str] = []
+    if "aws s3api head-object" not in workflow:
+        failures.append(
+            "deploy.yml must confirm the uploaded index.html with s3api head-object"
+        )
+    if "aws s3 ls" in workflow:
+        failures.append("deploy.yml must not list the prefix with aws s3 ls")
+    if any(
+        line.lstrip().startswith("run:") and "npm run verify" in line
+        for line in workflow.splitlines()
+    ):
+        failures.append(
+            "deploy.yml must not re-run npm run verify; Frontend checks owns that gate"
+        )
+    if any(line.lstrip().startswith("pull_request:") for line in workflow.splitlines()):
+        failures.append(
+            "deploy.yml must not run on pull_request; Frontend checks owns PR verify"
+        )
+    return failures
+
+
+def main() -> int:
+    cases = [
+        ("version-only", run_case("version-only.json"), 0),
+        (
+            "origin-timeout-normalization",
+            run_case("origin-timeout-normalization.json"),
+            0,
+        ),
+        ("origin-timeout-change", run_case("origin-timeout-change.json"), 1),
+        ("wrong-label", run_case("wrong-label.json"), 1),
+        ("wrong-before", run_case("wrong-before.json"), 1),
+        ("extra-origin-change", run_case("extra-origin-change.json"), 1),
+        ("iam-update", run_case("iam-update.json"), 1),
+        ("dns-update", run_case("dns-update.json"), 1),
+        ("create", run_case("create.json"), 1),
+        ("delete", run_case("delete.json"), 1),
+        ("replace", run_case("replace.json"), 1),
+        ("multiple-updates", run_case("multiple-updates.json"), 1),
+        ("nested-unknown", run_case("nested-unknown.json"), 1),
+        ("unknown-only", run_case("unknown-only.json"), 1),
+        ("empty", run_case("empty.json"), 1),
+        ("missing-action", run_case("missing-action.json"), 1),
+        ("extra-action", run_case("extra-action.json"), 1),
+    ]
+    failures = [
+        (name, result, expected)
+        for name, result, expected in cases
+        if result.returncode != expected
+    ]
+    download_failures = test_download_pinning()
+    redirect_failures = test_download_standard_opener_redirect()
+    download_failures.extend(redirect_failures)
+    download_failures.extend(test_deploy_workflow_uses_script_flags())
+    download_failures.extend(test_deploy_workflow_confirms_prefix_with_head_object())
+    if failures or download_failures:
+        if failures:
+            print(
+                "FAIL: release plan-check cases failed: "
+                + ", ".join(name for name, _, _ in failures),
+                file=sys.stderr,
+            )
+            for name, result, expected in failures:
+                print(
+                    f"{name}: expected {expected}, got {result.returncode}\n"
+                    f"{result.stdout}{result.stderr}",
+                    file=sys.stderr,
+                )
+        for item in download_failures:
+            print(f"FAIL: {item}", file=sys.stderr)
+        return 1
+    print("PASS: Terraform release plan safety checks")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/scripts/test-verify-cloudfront-release.sh b/scripts/test-verify-cloudfront-release.sh
new file mode 100755
index 00000000..7cc5607b
--- /dev/null
+++ b/scripts/test-verify-cloudfront-release.sh
@@ -0,0 +1,302 @@
+#!/usr/bin/env bash
+# Stubbed aws/curl tests for scripts/verify-cloudfront-release.sh.
+set -euo pipefail
+
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+VERIFY="${ROOT}/scripts/verify-cloudfront-release.sh"
+CURRENT="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+PREVIOUS="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+NEW_HASH="1111111111111111111111111111111111111111111111111111111111111111"
+OLD_HASH="0000000000000000000000000000000000000000000000000000000000000000"
+# Vite writes index.html with a trailing newline. Keep it in the fixture so
+# the expected hash covers every served byte, exactly like dist/index.html.
+INDEX_HTML=$'<!doctype html><html><head><script type="module" src="/assets/app.js"></script></head><body></body></html>\n'
+INDEX_HASH="$(printf '%s' "${INDEX_HTML}" | python3 -c 'import hashlib,sys; print(hashlib.sha256(sys.stdin.buffer.read()).hexdigest())')"
+
+failures=0
+assert_exit() {
+  local name="$1" expected="$2" got="$3" log="$4"
+  if [[ "${got}" != "${expected}" ]]; then
+    echo "FAIL: ${name}: expected exit ${expected}, got ${got}" >&2
+    sed -n '1,80p' "${log}" >&2
+    failures=$((failures + 1))
+  else
+    echo "PASS: ${name}"
+  fi
+}
+
+make_stubs() {
+  local bin="$1"
+  mkdir -p "${bin}"
+  cat > "${bin}/aws" << 'AWS'
+#!/usr/bin/env bash
+set -euo pipefail
+state_dir="${STUB_STATE}"
+if [[ "${1:-}" == "s3" ]]; then
+  cat "${state_dir}/pointer.json"
+  exit 0
+fi
+cat "${state_dir}/distribution.json"
+AWS
+  cat > "${bin}/curl" << 'CURL'
+#!/usr/bin/env bash
+set -euo pipefail
+state_dir="${STUB_STATE}"
+method="GET"
+url=""
+dump=""
+output=""
+write_out=""
+args=("$@")
+i=0
+while [[ $i -lt ${#args[@]} ]]; do
+  arg="${args[$i]}"
+  case "${arg}" in
+    -X) i=$((i + 1)); method="${args[$i]}" ;;
+    -D) i=$((i + 1)); dump="${args[$i]}" ;;
+    -o) i=$((i + 1)); output="${args[$i]}" ;;
+    -w) i=$((i + 1)); write_out="${args[$i]}" ;;
+    -H|--max-time|-s|-S|-f|-fsS|-sS) ;;
+    http*) url="${arg}" ;;
+  esac
+  i=$((i + 1))
+done
+if [[ "${method}" == "OPTIONS" ]]; then
+  [[ -n "${dump}" ]] && printf 'HTTP/1.1 204 No Content\nAccess-Control-Allow-Origin: https://dev.seahaven.com\n\n' > "${dump}"
+  [[ -n "${write_out}" ]] && printf '204'
+  exit 0
+fi
+if [[ "${url}" == *"/assets/"* ]]; then
+  [[ -n "${dump}" ]] && printf 'HTTP/1.1 200 OK\nCache-Control: public,max-age=31536000,immutable\n\n' > "${dump}"
+  if [[ -f "${state_dir}/asset.js" ]]; then
+    body="$(cat "${state_dir}/asset.js")"
+  else
+    body='const api="https://api.dev.seahaven.com/api";'
+  fi
+  [[ -n "${output}" ]] && printf '%s' "${body}" > "${output}"
+  [[ -z "${output}" ]] && printf '%s' "${body}"
+  exit 0
+fi
+# Serve index.html byte-for-byte, trailing newline included, like real curl.
+[[ -n "${dump}" ]] && printf 'HTTP/1.1 200 OK\nCache-Control: no-cache,no-store,must-revalidate\n\n' > "${dump}"
+if [[ -n "${output}" ]]; then
+  cat "${state_dir}/index.html" > "${output}"
+else
+  cat "${state_dir}/index.html"
+fi
+exit 0
+CURL
+  chmod +x "${bin}/aws" "${bin}/curl"
+}
+
+dist_json() {
+  local status="$1" current_path="$2"
+  python3 -c 'import json,sys
+status, path = sys.argv[1], sys.argv[2]
+print(json.dumps({
+  "Distribution": {
+    "Status": status,
+    "DistributionConfig": {
+      "Origins": {"Items": [
+        {"Id": "current", "OriginPath": path},
+        {"Id": "previous", "OriginPath": ""},
+      ]}
+    }
+  }
+}))' "${status}" "${current_path}"
+}
+
+pointer_json() {
+  python3 -c 'import json,sys; print(json.dumps({"current": sys.argv[1], "previous": sys.argv[2]}))' "$1" "$2"
+}
+
+run_case() {
+  local name="$1"
+  local dir
+  dir="$(mktemp -d)"
+  make_stubs "${dir}/bin"
+  printf '%s' "${INDEX_HTML}" > "${dir}/index.html"
+  export STUB_STATE="${dir}"
+  export PATH="${dir}/bin:${PATH}"
+  export DISTRIBUTION_ID="E2CWLM1AFB964P"
+  export EXPECTED_LABEL="${CURRENT}"
+  export EXPECTED_INDEX_SHA256="${NEW_HASH}"
+  export PREVIOUS_INDEX_SHA256="${OLD_HASH}"
+  export SITE_URL="https://dev.seahaven.com"
+  export SITE_BUCKET="seahaven-shoc-frontend-dev"
+  export BUDGET=3
+  export INTERVAL=0
+  local log="${dir}/log.txt"
+  set +e
+  bash "${VERIFY}" > "${log}" 2>&1
+  local code=$?
+  set -e
+  assert_exit "${name}" "$2" "${code}" "${log}"
+  rm -rf "${dir}"
+}
+
+# 1. Right config, then propagates (InProgress -> Deployed, hash already matches).
+{
+  dir="$(mktemp -d)"
+  make_stubs "${dir}/bin"
+  printf '%s' "${INDEX_HTML}" > "${dir}/index.html"
+  pointer_json "${CURRENT}" "${PREVIOUS}" > "${dir}/pointer.json"
+  printf 'InProgress\n' > "${dir}/status"
+  cat > "${dir}/bin/aws" << AWS
+#!/usr/bin/env bash
+set -euo pipefail
+if [[ "\${1:-}" == "s3" ]]; then
+  cat "${dir}/pointer.json"
+  exit 0
+fi
+status="\$(cat "${dir}/status")"
+python3 -c 'import json,sys; print(json.dumps({"Distribution":{"Status":sys.argv[1],"DistributionConfig":{"Origins":{"Items":[{"Id":"current","OriginPath":"/releases/${CURRENT}"},{"Id":"previous","OriginPath":""}]}}}}))' "\${status}"
+echo Deployed > "${dir}/status"
+AWS
+  chmod +x "${dir}/bin/aws"
+  export STUB_STATE="${dir}" PATH="${dir}/bin:${PATH}"
+  export DISTRIBUTION_ID="E2CWLM1AFB964P" EXPECTED_LABEL="${CURRENT}"
+  export EXPECTED_INDEX_SHA256="${INDEX_HASH}" PREVIOUS_INDEX_SHA256="${OLD_HASH}"
+  export SITE_URL="https://dev.seahaven.com" SITE_BUCKET="seahaven-shoc-frontend-dev"
+  export BUDGET=5 INTERVAL=0
+  set +e
+  bash "${VERIFY}" > "${dir}/log.txt" 2>&1
+  code=$?
+  set -e
+  assert_exit "right-config-then-propagates" 0 "${code}" "${dir}/log.txt"
+  rm -rf "${dir}"
+}
+
+# 2. Right config never propagates (Deployed, stale hash).
+{
+  dir="$(mktemp -d)"
+  make_stubs "${dir}/bin"
+  pointer_json "${CURRENT}" "${PREVIOUS}" > "${dir}/pointer.json"
+  dist_json "Deployed" "/releases/${CURRENT}" > "${dir}/distribution.json"
+  printf 'stale' > "${dir}/index.html"
+  export STUB_STATE="${dir}" PATH="${dir}/bin:${PATH}"
+  export DISTRIBUTION_ID="E2CWLM1AFB964P" EXPECTED_LABEL="${CURRENT}"
+  export EXPECTED_INDEX_SHA256="${NEW_HASH}" PREVIOUS_INDEX_SHA256="$(printf 'stale' | python3 -c 'import hashlib,sys; print(hashlib.sha256(sys.stdin.buffer.read()).hexdigest())')"
+  export SITE_URL="https://dev.seahaven.com" SITE_BUCKET="seahaven-shoc-frontend-dev"
+  export BUDGET=2 INTERVAL=0
+  set +e
+  bash "${VERIFY}" > "${dir}/log.txt" 2>&1
+  code=$?
+  set -e
+  assert_exit "right-config-never-propagates" 1 "${code}" "${dir}/log.txt"
+  grep -q "last observed" "${dir}/log.txt" || { echo "FAIL: timeout missing last observed state" >&2; failures=$((failures + 1)); }
+  rm -rf "${dir}"
+}
+
+# 3. Wrong origin path fails fast.
+{
+  dir="$(mktemp -d)"
+  make_stubs "${dir}/bin"
+  pointer_json "${CURRENT}" "${PREVIOUS}" > "${dir}/pointer.json"
+  dist_json "Deployed" "/releases/${PREVIOUS}" > "${dir}/distribution.json"
+  printf '%s' "${INDEX_HTML}" > "${dir}/index.html"
+  export STUB_STATE="${dir}" PATH="${dir}/bin:${PATH}"
+  export DISTRIBUTION_ID="E2CWLM1AFB964P" EXPECTED_LABEL="${CURRENT}"
+  export EXPECTED_INDEX_SHA256="${NEW_HASH}" PREVIOUS_INDEX_SHA256="${OLD_HASH}"
+  export SITE_URL="https://dev.seahaven.com" SITE_BUCKET="seahaven-shoc-frontend-dev"
+  export BUDGET=2 INTERVAL=0
+  set +e
+  bash "${VERIFY}" > "${dir}/log.txt" 2>&1
+  code=$?
+  set -e
+  assert_exit "wrong-origin-path" 1 "${code}" "${dir}/log.txt"
+  grep -q "origin_path" "${dir}/log.txt" || { echo "FAIL: wrong origin path did not name origin_path" >&2; failures=$((failures + 1)); }
+  rm -rf "${dir}"
+}
+
+# 4. Wrong pointer fails fast.
+{
+  dir="$(mktemp -d)"
+  make_stubs "${dir}/bin"
+  pointer_json "${PREVIOUS}" "${PREVIOUS}" > "${dir}/pointer.json"
+  dist_json "Deployed" "/releases/${CURRENT}" > "${dir}/distribution.json"
+  printf '%s' "${INDEX_HTML}" > "${dir}/index.html"
+  export STUB_STATE="${dir}" PATH="${dir}/bin:${PATH}"
+  export DISTRIBUTION_ID="E2CWLM1AFB964P" EXPECTED_LABEL="${CURRENT}"
+  export EXPECTED_INDEX_SHA256="${NEW_HASH}" PREVIOUS_INDEX_SHA256="${OLD_HASH}"
+  export SITE_URL="https://dev.seahaven.com" SITE_BUCKET="seahaven-shoc-frontend-dev"
+  export BUDGET=2 INTERVAL=0
+  set +e
+  bash "${VERIFY}" > "${dir}/log.txt" 2>&1
+  code=$?
+  set -e
+  assert_exit "wrong-pointer" 1 "${code}" "${dir}/log.txt"
+  grep -q "pointer current" "${dir}/log.txt" || { echo "FAIL: wrong pointer did not name pointer current" >&2; failures=$((failures + 1)); }
+  rm -rf "${dir}"
+}
+
+# 5. Never Deployed.
+{
+  dir="$(mktemp -d)"
+  make_stubs "${dir}/bin"
+  pointer_json "${CURRENT}" "${PREVIOUS}" > "${dir}/pointer.json"
+  dist_json "InProgress" "/releases/${CURRENT}" > "${dir}/distribution.json"
+  printf '%s' "${INDEX_HTML}" > "${dir}/index.html"
+  export STUB_STATE="${dir}" PATH="${dir}/bin:${PATH}"
+  export DISTRIBUTION_ID="E2CWLM1AFB964P" EXPECTED_LABEL="${CURRENT}"
+  export EXPECTED_INDEX_SHA256="${NEW_HASH}" PREVIOUS_INDEX_SHA256="${OLD_HASH}"
+  export SITE_URL="https://dev.seahaven.com" SITE_BUCKET="seahaven-shoc-frontend-dev"
+  export BUDGET=2 INTERVAL=0
+  set +e
+  bash "${VERIFY}" > "${dir}/log.txt" 2>&1
+  code=$?
+  set -e
+  assert_exit "never-deployed" 1 "${code}" "${dir}/log.txt"
+  grep -q "last observed" "${dir}/log.txt" || { echo "FAIL: never-deployed missing last observed state" >&2; failures=$((failures + 1)); }
+  rm -rf "${dir}"
+}
+
+# 6. Hash-matched Deployed release whose JS assets omit the baked API URL.
+{
+  dir="$(mktemp -d)"
+  make_stubs "${dir}/bin"
+  pointer_json "${CURRENT}" "${PREVIOUS}" > "${dir}/pointer.json"
+  dist_json "Deployed" "/releases/${CURRENT}" > "${dir}/distribution.json"
+  printf '%s' "${INDEX_HTML}" > "${dir}/index.html"
+  printf 'const x=1;' > "${dir}/asset.js"
+  export STUB_STATE="${dir}" PATH="${dir}/bin:${PATH}"
+  export DISTRIBUTION_ID="E2CWLM1AFB964P" EXPECTED_LABEL="${CURRENT}"
+  export EXPECTED_INDEX_SHA256="${INDEX_HASH}" PREVIOUS_INDEX_SHA256="${OLD_HASH}"
+  export SITE_URL="https://dev.seahaven.com" SITE_BUCKET="seahaven-shoc-frontend-dev"
+  export BUDGET=2 INTERVAL=0
+  set +e
+  bash "${VERIFY}" > "${dir}/log.txt" 2>&1
+  code=$?
+  set -e
+  assert_exit "missing-baked-api-url" 1 "${code}" "${dir}/log.txt"
+  grep -q "baked dev API URL" "${dir}/log.txt" || { echo "FAIL: missing API URL did not name baked dev API URL" >&2; failures=$((failures + 1)); }
+  rm -rf "${dir}"
+}
+
+# 7. Hash-matched Deployed release whose JS assets contain the staging API URL.
+{
+  dir="$(mktemp -d)"
+  make_stubs "${dir}/bin"
+  pointer_json "${CURRENT}" "${PREVIOUS}" > "${dir}/pointer.json"
+  dist_json "Deployed" "/releases/${CURRENT}" > "${dir}/distribution.json"
+  printf '%s' "${INDEX_HTML}" > "${dir}/index.html"
+  printf 'const api="https://api.staging.seahaven.com/api";' > "${dir}/asset.js"
+  export STUB_STATE="${dir}" PATH="${dir}/bin:${PATH}"
+  export DISTRIBUTION_ID="E2CWLM1AFB964P" EXPECTED_LABEL="${CURRENT}"
+  export EXPECTED_INDEX_SHA256="${INDEX_HASH}" PREVIOUS_INDEX_SHA256="${OLD_HASH}"
+  export SITE_URL="https://dev.seahaven.com" SITE_BUCKET="seahaven-shoc-frontend-dev"
+  export BUDGET=2 INTERVAL=0
+  set +e
+  bash "${VERIFY}" > "${dir}/log.txt" 2>&1
+  code=$?
+  set -e
+  assert_exit "forbidden-staging-api-url" 1 "${code}" "${dir}/log.txt"
+  grep -q "forbidden URL api.staging.seahaven.com" "${dir}/log.txt" || { echo "FAIL: staging API URL did not name forbidden URL" >&2; failures=$((failures + 1)); }
+  rm -rf "${dir}"
+}
+
+if [[ "${failures}" -ne 0 ]]; then
+  echo "FAIL: ${failures} verify-cloudfront-release cases failed" >&2
+  exit 1
+fi
+echo "PASS: CloudFront release verify checks"
diff --git a/scripts/testdata/terraform-release-plans/create.json b/scripts/testdata/terraform-release-plans/create.json
new file mode 100644
index 00000000..7933f203
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/create.json
@@ -0,0 +1,94 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["create"],
+        "before": null,
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/delete.json b/scripts/testdata/terraform-release-plans/delete.json
new file mode 100644
index 00000000..4c056b51
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/delete.json
@@ -0,0 +1,94 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["delete"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}"
+        },
+        "after": null
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/dns-update.json b/scripts/testdata/terraform-release-plans/dns-update.json
new file mode 100644
index 00000000..940a2da3
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/dns-update.json
@@ -0,0 +1,116 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_route53_record.site_a",
+      "mode": "managed",
+      "type": "aws_route53_record",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "ttl": 60
+        },
+        "after": {
+          "ttl": 300
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/empty.json b/scripts/testdata/terraform-release-plans/empty.json
new file mode 100644
index 00000000..49edaf62
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/empty.json
@@ -0,0 +1,9 @@
+{
+  "resource_changes": [],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/extra-action.json b/scripts/testdata/terraform-release-plans/extra-action.json
new file mode 100644
index 00000000..758347e8
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/extra-action.json
@@ -0,0 +1,106 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    },
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release_extra",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/extra-origin-change.json b/scripts/testdata/terraform-release-plans/extra-origin-change.json
new file mode 100644
index 00000000..734aed73
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/extra-origin-change.json
@@ -0,0 +1,102 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 20,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/iam-update.json b/scripts/testdata/terraform-release-plans/iam-update.json
new file mode 100644
index 00000000..e4a1019c
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/iam-update.json
@@ -0,0 +1,116 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "policy": "{}"
+        },
+        "after": {
+          "policy": "{\"Version\":\"2012-10-17\"}"
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/missing-action.json b/scripts/testdata/terraform-release-plans/missing-action.json
new file mode 100644
index 00000000..be48195f
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/missing-action.json
@@ -0,0 +1,97 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true
+        }
+      }
+    }
+  ],
+  "action_invocations": []
+}
diff --git a/scripts/testdata/terraform-release-plans/multiple-updates.json b/scripts/testdata/terraform-release-plans/multiple-updates.json
new file mode 100644
index 00000000..a4b5e869
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/multiple-updates.json
@@ -0,0 +1,130 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "policy": "{}"
+        },
+        "after": {
+          "policy": "{\"Version\":\"2012-10-17\"}"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_route53_record.site_a",
+      "mode": "managed",
+      "type": "aws_route53_record",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "ttl": 60
+        },
+        "after": {
+          "ttl": 300
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/nested-unknown.json b/scripts/testdata/terraform-release-plans/nested-unknown.json
new file mode 100644
index 00000000..2c8a4400
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/nested-unknown.json
@@ -0,0 +1,105 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true,
+          "tags": {
+            "Environment": true
+          }
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/origin-timeout-change.json b/scripts/testdata/terraform-release-plans/origin-timeout-change.json
new file mode 100644
index 00000000..a5f42591
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/origin-timeout-change.json
@@ -0,0 +1,104 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1",
+              "response_completion_timeout": 10
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1",
+              "response_completion_timeout": 60
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/origin-timeout-normalization.json b/scripts/testdata/terraform-release-plans/origin-timeout-normalization.json
new file mode 100644
index 00000000..e70aa560
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/origin-timeout-normalization.json
@@ -0,0 +1,105 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1",
+              "response_completion_timeout": 0
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1",
+              "response_completion_timeout": 0
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1",
+              "response_completion_timeout": null
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/replace.json b/scripts/testdata/terraform-release-plans/replace.json
new file mode 100644
index 00000000..c37fb1aa
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/replace.json
@@ -0,0 +1,58 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["delete", "create"],
+        "before": {
+          "origin": []
+        },
+        "after": {
+          "origin": []
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/unknown-only.json b/scripts/testdata/terraform-release-plans/unknown-only.json
new file mode 100644
index 00000000..8ef737df
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/unknown-only.json
@@ -0,0 +1,103 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true,
+          "comment": true
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/version-only.json b/scripts/testdata/terraform-release-plans/version-only.json
new file mode 100644
index 00000000..f9b5a86c
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/version-only.json
@@ -0,0 +1,102 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/wrong-before.json b/scripts/testdata/terraform-release-plans/wrong-before.json
new file mode 100644
index 00000000..478c7f6f
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/wrong-before.json
@@ -0,0 +1,102 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb-2-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/testdata/terraform-release-plans/wrong-label.json b/scripts/testdata/terraform-release-plans/wrong-label.json
new file mode 100644
index 00000000..c823a2e8
--- /dev/null
+++ b/scripts/testdata/terraform-release-plans/wrong-label.json
@@ -0,0 +1,102 @@
+{
+  "resource_changes": [
+    {
+      "address": "module.environment_owned.aws_iam_role_policy.github_deploy",
+      "mode": "managed",
+      "type": "aws_iam_role_policy",
+      "change": {
+        "actions": ["no-op"],
+        "before": {
+          "name": "policy"
+        },
+        "after": {
+          "name": "policy"
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_s3_object.release_pointer",
+      "mode": "managed",
+      "type": "aws_s3_object",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "content": "{\"current\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\",\"previous\":\"0000000000000000000000000000000000000000-1-1\"}",
+          "key": ".release/current"
+        },
+        "after": {
+          "content": "{\"current\":\"cccccccccccccccccccccccccccccccccccccccc-3-1\",\"previous\":\"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1\"}",
+          "key": ".release/current"
+        },
+        "after_unknown": {
+          "etag": true,
+          "version_id": true
+        }
+      }
+    },
+    {
+      "address": "module.environment_owned.aws_cloudfront_distribution.site",
+      "mode": "managed",
+      "type": "aws_cloudfront_distribution",
+      "change": {
+        "actions": ["update"],
+        "before": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/0000000000000000000000000000000000000000-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after": {
+          "origin": [
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1",
+              "origin_path": "/releases/cccccccccccccccccccccccccccccccccccccccc-3-1"
+            },
+            {
+              "connection_attempts": 3,
+              "connection_timeout": 10,
+              "domain_name": "seahaven-shoc-frontend-dev.s3.us-east-1.amazonaws.com",
+              "origin_access_control_id": "E30VSIK87N8H64",
+              "origin_id": "shocfrontenddevDistributionOrigin10CCD0EE1-previous",
+              "origin_path": "/releases/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa-1-1"
+            }
+          ],
+          "enabled": true,
+          "comment": "SeaHaven SHOC frontend (dev)"
+        },
+        "after_unknown": {
+          "etag": true,
+          "last_modified_time": true,
+          "status": true,
+          "in_progress_validation_batches": true
+        }
+      }
+    }
+  ],
+  "action_invocations": [
+    {
+      "address": "module.environment_owned.action.aws_cloudfront_create_invalidation.release",
+      "type": "aws_cloudfront_create_invalidation"
+    }
+  ]
+}
diff --git a/scripts/upload-sourcemaps.sh b/scripts/upload-sourcemaps.sh
new file mode 100755
index 00000000..d790e674
--- /dev/null
+++ b/scripts/upload-sourcemaps.sh
@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+: "${SENTRY_AUTH_TOKEN:?SENTRY_AUTH_TOKEN is required for source-map upload}"
+
+SENTRY_ORG="${SENTRY_ORG:-seahaven}"
+SENTRY_PROJECT="${SENTRY_PROJECT:-shoc-frontend}"
+COMMIT_SHA="${VITE_APP_COMMIT_SHA:-${GITHUB_SHA:-}}"
+
+if [[ ! "${COMMIT_SHA}" =~ ^[0-9a-fA-F]{40}$ ]]; then
+  echo "::error::Source-map upload requires a 40-character VITE_APP_COMMIT_SHA or GITHUB_SHA." >&2
+  exit 1
+fi
+COMMIT_SHA="$(printf '%s' "${COMMIT_SHA}" | tr '[:upper:]' '[:lower:]')"
+RELEASE="shoc-frontend@${COMMIT_SHA}"
+
+npm exec --no -- sentry-cli sourcemaps upload \
+  --org "${SENTRY_ORG}" \
+  --project "${SENTRY_PROJECT}" \
+  --release "${RELEASE}" \
+  --url-prefix "~/" \
+  --validate \
+  dist
diff --git a/scripts/vendor-e2e-mock-server.mjs b/scripts/vendor-e2e-mock-server.mjs
new file mode 100644
index 00000000..3c53457e
--- /dev/null
+++ b/scripts/vendor-e2e-mock-server.mjs
@@ -0,0 +1,224 @@
+import http from "node:http";
+
+const port = Number(process.env.VENDOR_MOCK_PORT ?? 5142);
+let nextCompanyId = 103;
+let nextTechnicianId = 3;
+const companies = [
+  {
+    companyId: 101,
+    rowVersion: "rv-101-1",
+    name: "Gateway Plumbing",
+    companyPhone: "(314) 555-0100",
+    email: "dispatch@gateway.test",
+    address: "1 Market St",
+    city: "St. Louis",
+    state: "MO",
+    zip: "63101",
+    googleMapsUrl: "https://maps.google.com/gateway",
+    notes: "Preferred after-hours vendor",
+    technicians: [
+      {
+        id: 1,
+        contactName: "Adam Whyte",
+        phone: "(314) 555-0198",
+        email: "adam@gateway.test",
+        preferredContact: "Email",
+        tradeSpecialties: "Plumbing",
+        isActive: true,
+        totalJobs: 72,
+      },
+    ],
+  },
+  {
+    companyId: 102,
+    rowVersion: "rv-102-1",
+    name: "Metro HVAC",
+    companyPhone: "(314) 555-0110",
+    email: "dispatch@metro.test",
+    address: "2 Pine St",
+    city: "Clayton",
+    state: "MO",
+    zip: "63105",
+    googleMapsUrl: "",
+    notes: "",
+    technicians: [],
+  },
+];
+
+function json(response, body, status = 200) {
+  response.writeHead(status, {
+    "content-type": "application/json",
+    "access-control-allow-origin": "*",
+  });
+  response.end(JSON.stringify(body));
+}
+
+async function readBody(request) {
+  const chunks = [];
+  for await (const chunk of request) chunks.push(chunk);
+  return chunks.length ? JSON.parse(Buffer.concat(chunks).toString("utf8")) : {};
+}
+
+function findCompany(url) {
+  const vendorId = url.searchParams.get("vendorId");
+  const companyId = url.searchParams.get("companyId");
+  if (vendorId) {
+    return companies.find((company) =>
+      company.technicians.some((technician) => String(technician.id) === vendorId),
+    );
+  }
+  return companies.find((company) => String(company.companyId) === companyId);
+}
+
+function companyFacet(company) {
+  return {
+    companyId: company.companyId,
+    name: company.name,
+    companyPhone: company.companyPhone,
+    email: company.email,
+    address: company.address,
+    city: company.city,
+    state: company.state,
+    zip: company.zip,
+    googleMapsUrl: company.googleMapsUrl,
+  };
+}
+
+function directoryRows() {
+  return companies.flatMap((company) =>
+    company.technicians.length
+      ? company.technicians.map((technician) => ({
+          Id: technician.id,
+          CompanyId: company.companyId,
+          CompanyName: company.name,
+          ContactName: technician.contactName,
+          Email: technician.email,
+          Phone: technician.phone,
+          CompanyPhone: company.companyPhone,
+          City: company.city,
+          State: company.state,
+          TradeSpecialties: technician.tradeSpecialties,
+          GoogleMapsUrl: company.googleMapsUrl,
+          Notes: company.notes,
+          TotalJobs: technician.totalJobs,
+          IsActive: technician.isActive,
+          PreferredContact: technician.preferredContact,
+        }))
+      : [
+          {
+            Id: null,
+            CompanyId: company.companyId,
+            CompanyName: company.name,
+            ContactName: "",
+            Email: company.email,
+            Phone: "",
+            CompanyPhone: company.companyPhone,
+            City: company.city,
+            State: company.state,
+            TradeSpecialties: "",
+            GoogleMapsUrl: company.googleMapsUrl,
+            Notes: company.notes,
+            TotalJobs: 0,
+            IsActive: true,
+            PreferredContact: "Phone",
+          },
+        ],
+  );
+}
+
+const server = http.createServer(async (request, response) => {
+  const url = new URL(request.url ?? "/", `http://${request.headers.host}`);
+  if (request.method === "OPTIONS") return json(response, {});
+
+  if (url.pathname === "/api/Vendor/GetVendorList") {
+    const search = (url.searchParams.get("search") ?? "").toLowerCase();
+    const active = url.searchParams.get("isActive") !== "false";
+    const rows = directoryRows().filter(
+      (row) =>
+        row.IsActive === active &&
+        (!search ||
+          `${row.CompanyName} ${row.ContactName} ${row.TradeSpecialties} ${row.City} ${row.State}`
+            .toLowerCase()
+            .includes(search)),
+    );
+    return json(response, { Data: rows, TotalCount: rows.length, PageNumber: 1, PageSize: 12 });
+  }
+
+  if (url.pathname === "/api/Vendor/facets") {
+    return json(response, {
+      data: {
+        companies: companies.map(companyFacet),
+        trades: ["Plumbing", "HVAC"],
+        locations: companies.map((company) => ({
+          city: company.city,
+          state: company.state,
+          label: `${company.city}, ${company.state}`,
+        })),
+        jobBuckets: [],
+      },
+    });
+  }
+
+  if (url.pathname === "/api/vendor-company-roster" && request.method === "GET") {
+    const company = findCompany(url);
+    return company ? json(response, company) : json(response, { message: "Not found" }, 404);
+  }
+
+  if (url.pathname === "/api/vendor-company-roster" && request.method === "POST") {
+    const body = await readBody(request);
+    const company = {
+      ...body,
+      companyId: nextCompanyId++,
+      rowVersion: `rv-${Date.now()}`,
+      technicians: (body.technicians ?? []).map((technician) => ({
+        ...technician,
+        id: nextTechnicianId++,
+        totalJobs: 0,
+      })),
+    };
+    companies.push(company);
+    return json(response, company);
+  }
+
+  const rosterMatch = url.pathname.match(/^\/api\/vendor-company-roster\/(\d+)$/);
+  if (rosterMatch && request.method === "PUT") {
+    const company = companies.find((item) => item.companyId === Number(rosterMatch[1]));
+    if (!company) return json(response, { message: "Not found" }, 404);
+    const body = await readBody(request);
+    Object.assign(company, body, {
+      companyId: company.companyId,
+      rowVersion: `rv-${Date.now()}`,
+      technicians: (body.technicians ?? []).map((technician) => ({
+        ...technician,
+        id: technician.id ?? nextTechnicianId++,
+        totalJobs:
+          company.technicians.find((existing) => existing.id === technician.id)?.totalJobs ?? 0,
+      })),
+    });
+    return json(response, company);
+  }
+
+  const portalMatch = url.pathname.match(/^\/api\/vendors\/(\d+)\/portal-token$/);
+  if (portalMatch) {
+    return json(response, {
+      data: {
+        portalUrl: "https://vendor.example.test/token",
+        issuedAt: new Date().toISOString(),
+        expiresAt: new Date(Date.now() + 86_400_000).toISOString(),
+      },
+    });
+  }
+
+  const impactMatch = url.pathname.match(/^\/api\/vendors\/(\d+)\/deactivation-impact$/);
+  if (impactMatch) {
+    return json(response, {
+      data: { vendorId: Number(impactMatch[1]), canDeactivate: true, openWorkOrders: [] },
+    });
+  }
+
+  return json(response, { message: `No mock for ${request.method} ${url.pathname}` }, 404);
+});
+
+server.listen(port, "127.0.0.1", () => {
+  process.stdout.write(`Vendor E2E mock listening on http://127.0.0.1:${port}\n`);
+});
diff --git a/scripts/verify-cloudfront-release.sh b/scripts/verify-cloudfront-release.sh
new file mode 100755
index 00000000..f0ed3b7c
--- /dev/null
+++ b/scripts/verify-cloudfront-release.sh
@@ -0,0 +1,210 @@
+#!/usr/bin/env bash
+# Verify a CloudFront content release or rollback.
+#
+# Fail fast when origin_path or .release/current is the wrong label.
+# Poll while the distribution is InProgress or the served index.html hash
+# still matches the previous release. On timeout, print last observed state.
+set -euo pipefail
+
+DISTRIBUTION_ID="${DISTRIBUTION_ID:-}"
+EXPECTED_LABEL="${EXPECTED_LABEL:-}"
+EXPECTED_INDEX_SHA256="${EXPECTED_INDEX_SHA256:-}"
+SITE_URL="${SITE_URL:-}"
+SITE_BUCKET="${SITE_BUCKET:-}"
+PREVIOUS_INDEX_SHA256="${PREVIOUS_INDEX_SHA256:-}"
+API_URL="${API_URL:-https://api.dev.seahaven.com/api}"
+BUDGET="${BUDGET:-40}"
+INTERVAL="${INTERVAL:-15}"
+
+if [[ -z "${DISTRIBUTION_ID}" || -z "${EXPECTED_INDEX_SHA256}" || -z "${SITE_URL}" || -z "${SITE_BUCKET}" ]]; then
+  echo "Usage: DISTRIBUTION_ID EXPECTED_LABEL EXPECTED_INDEX_SHA256 SITE_URL SITE_BUCKET must be set." >&2
+  exit 2
+fi
+
+SITE_URL="${SITE_URL%/}"
+if [[ -n "${EXPECTED_LABEL}" ]]; then
+  EXPECTED_PATH="/releases/${EXPECTED_LABEL}"
+else
+  EXPECTED_PATH=""
+fi
+
+sha256_of() {
+  python3 -c "import hashlib,sys; print(hashlib.sha256(sys.stdin.buffer.read()).hexdigest())"
+}
+
+read_pointer() {
+  aws s3 cp "s3://${SITE_BUCKET}/.release/current" - --only-show-errors 2>/dev/null || true
+}
+
+read_distribution_json() {
+  aws cloudfront get-distribution --id "${DISTRIBUTION_ID}" --output json
+}
+
+parse_distribution() {
+  python3 -c '
+import json, os, sys
+payload = json.load(sys.stdin)
+dist = payload.get("Distribution") or payload
+status = dist.get("Status") or "Unknown"
+config = dist.get("DistributionConfig") or {}
+origins = ((config.get("Origins") or {}).get("Items")) or []
+paths = [origin.get("OriginPath") or "" for origin in origins]
+expected = os.environ["EXPECTED_PATH"]
+print(status)
+print("\x1f".join(paths))
+print("yes" if expected in paths else "no")
+'
+}
+
+pointer_current() {
+  POINTER_BODY="$1" python3 -c '
+import json, os
+raw = os.environ.get("POINTER_BODY", "").strip()
+if not raw:
+    print("")
+    raise SystemExit
+print(json.loads(raw).get("current") or "")
+'
+}
+
+last_status="Unknown"
+last_paths="Unknown"
+last_pointer="Unknown"
+last_hash="Unknown"
+last_path_ok="no"
+
+observe() {
+  last_pointer="$(read_pointer)"
+  local parsed
+  parsed="$(read_distribution_json | EXPECTED_PATH="${EXPECTED_PATH}" parse_distribution)"
+  last_status="$(printf '%s\n' "${parsed}" | sed -n '1p')"
+  last_paths="$(printf '%s\n' "${parsed}" | sed -n '2p' | tr '\037' ' ')"
+  last_path_ok="$(printf '%s\n' "${parsed}" | sed -n '3p')"
+  # Hash the response stream directly. Capturing the body in "$(...)" strips
+  # trailing newlines, so the hash never matched dist/index.html.
+  local hash
+  if hash="$(curl -fsS --max-time 30 "${SITE_URL}/" | sha256_of)" && [[ -n "${hash}" ]]; then
+    last_hash="${hash}"
+  else
+    last_hash="unreachable"
+  fi
+}
+
+report_state() {
+  echo "last observed: status=${last_status} pointer=${last_pointer} origins=${last_paths} served_sha256=${last_hash}"
+}
+
+fail_fast_if_misconfigured() {
+  local current
+  current="$(pointer_current "${last_pointer}")"
+  if [[ "${current}" != "${EXPECTED_LABEL}" ]]; then
+    echo "FAIL: live pointer current is '${current}'; expected '${EXPECTED_LABEL}'." >&2
+    report_state >&2
+    exit 1
+  fi
+  if [[ "${last_path_ok}" != "yes" ]]; then
+    echo "FAIL: live origin_path values are '${last_paths}'; expected '${EXPECTED_PATH}'." >&2
+    report_state >&2
+    exit 1
+  fi
+}
+
+observe
+fail_fast_if_misconfigured
+
+attempt=0
+while [[ "${attempt}" -lt "${BUDGET}" ]]; do
+  attempt=$((attempt + 1))
+  echo "poll ${attempt}/${BUDGET}: status=${last_status} served_sha256=${last_hash}"
+  fail_fast_if_misconfigured
+  if [[ "${last_status}" == "Deployed" && "${last_hash}" == "${EXPECTED_INDEX_SHA256}" ]]; then
+    break
+  fi
+  sleep "${INTERVAL}"
+  observe
+done
+
+if [[ "${last_status}" != "Deployed" || "${last_hash}" != "${EXPECTED_INDEX_SHA256}" ]]; then
+  echo "FAIL: release did not converge within the budget." >&2
+  report_state >&2
+  exit 1
+fi
+
+write_asset_paths() {
+  python3 -c '
+import re, sys
+html = open(sys.argv[1], encoding="utf-8").read()
+seen = []
+for path in re.findall(r"(?:src|href)=\"(/assets/[^\"]+\.(?:js|css))\"", html):
+    if path not in seen:
+        seen.append(path)
+        print(path)
+' "$1"
+}
+
+assert_baked_api_url() {
+  local tmp="$1"
+  if [[ ! -s "${tmp}/asset-paths.txt" ]]; then
+    echo "FAIL: served index.html has no /assets/ URL to check immutable caching." >&2
+    exit 1
+  fi
+  : > "${tmp}/assets.txt"
+  local immutable_ok="no"
+  local asset_path
+  while IFS= read -r asset_path; do
+    curl -fsS --max-time 30 "${SITE_URL}${asset_path}" \
+      -o "${tmp}/asset-body" -D "${tmp}/asset.headers"
+    cat "${tmp}/asset-body" >> "${tmp}/assets.txt"
+    if [[ "${asset_path}" == *.js && "${immutable_ok}" == "no" ]]; then
+      if ! grep -qiE 'cache-control:.*immutable' "${tmp}/asset.headers"; then
+        echo "FAIL: hashed asset is missing Cache-Control immutable." >&2
+        exit 1
+      fi
+      immutable_ok="yes"
+    fi
+  done < "${tmp}/asset-paths.txt"
+  if [[ "${immutable_ok}" != "yes" ]]; then
+    echo "FAIL: served index.html has no hashed JS asset to check immutable caching." >&2
+    exit 1
+  fi
+  cat "${tmp}/index.html" "${tmp}/assets.txt" > "${tmp}/served.txt"
+  local forbidden
+  for forbidden in api.staging.seahaven.com localhost:5141; do
+    if grep -Fq "${forbidden}" "${tmp}/served.txt"; then
+      echo "FAIL: served assets contain forbidden URL ${forbidden}." >&2
+      exit 1
+    fi
+  done
+  if ! grep -Fq "api.dev.seahaven.com" "${tmp}/served.txt"; then
+    echo "FAIL: served JS assets are missing the baked dev API URL." >&2
+    exit 1
+  fi
+}
+
+tmp="$(mktemp -d)"
+trap 'rm -rf "${tmp}"' EXIT
+
+curl -fsS --max-time 30 "${SITE_URL}/" -o "${tmp}/index.html" -D "${tmp}/index.headers"
+curl -fsS --max-time 30 "${SITE_URL}/login" -o "${tmp}/login.html"
+curl -fsS --max-time 30 "${SITE_URL}/work-orders" -o "${tmp}/route.html"
+if ! grep -qiE 'cache-control:.*no-store' "${tmp}/index.headers"; then
+  echo "FAIL: HTML Cache-Control is missing no-store." >&2
+  exit 1
+fi
+write_asset_paths "${tmp}/index.html" > "${tmp}/asset-paths.txt"
+assert_baked_api_url "${tmp}"
+
+cors_code="$(curl -sS --max-time 30 -o /dev/null -D "${tmp}/cors.headers" -w '%{http_code}' -X OPTIONS "${API_URL}" \
+  -H "Origin: ${SITE_URL}" \
+  -H "Access-Control-Request-Method: GET")"
+if [[ "${cors_code}" != "200" && "${cors_code}" != "204" ]]; then
+  echo "FAIL: CORS preflight returned HTTP ${cors_code}." >&2
+  exit 1
+fi
+if ! grep -qi 'access-control-allow-origin' "${tmp}/cors.headers"; then
+  echo "FAIL: CORS preflight is missing Access-Control-Allow-Origin." >&2
+  exit 1
+fi
+
+echo "PASS: CloudFront release ${EXPECTED_LABEL} is Deployed, hash-matched, and smoke-clean."
+report_state
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 09ca4da0..00000000
--- a/src/App.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import React, { useState } from "react";
-import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
-
-import Sidebar from "./components/Sidebar";
-import Topbar from "./components/Topbar";
-import Dashboard from "./pages/Dashboard";
-
-// AUTH
-import LoginPage from "./pages/auth/LoginPage";
-import { isAuthenticated } from "./services/authService";
-
-// CONTACTS
-import ContactsList from "./pages/contacts/list/List";
-import ContactFormPage from "./pages/contacts/form/ContactFormPage";
-
-// ACCOUNTS
-import AccountList from "./pages/accounts/list/List";
-import AccountFormPage from "./pages/accounts/form/AccountFormPage";
-
-// EMPLOYEES
-import EmployeeList from "./pages/employees/list/List";
-import EmployeeFormPage from "./pages/employees/form/EmployeeFormPage";
-
-// LOCATIONS
-import LocationsList from "./pages/locations/list/List";
-import LocationFormPage from "./pages/locations/form/LocationFormPage";
-
-// WORK ORDERS
-import WorkOrdersList from "./pages/workorders/list/List";
-import WorkOrderViewPage from "./pages/workorders/view/WorkOrderViewPage";
-import WorkOrderFormPage from "./pages/workorders/form/WorkOrderFormPage";
-
-// FOLLOW UPS
-import FollowUpList from "./pages/followup/list/List";
-import FollowUpFormPage from "./pages/followup/form/FollowUpFormPage";
-
-// PM SCHEDULES
-import PMScheduleList from "./pages/PmSchedule/list/List";
-import PMScheduleFormPage from "./pages/PmSchedule/form/PmScheduleFormPage";
-
-// ASSETS
-import AssetsList from "./pages/assets/list/List";
-import AssetFormPage from "./pages/assets/form/AssetFormPage";
-
-// CALENDAR
-import CalendarPage from "./pages/calendar/list/CalendarPage";
-import EventFormPage from "./pages/calendar/form/EventFormPage";
-
-// VENDORS
-import VendorsList from "./pages/vendors/list/List";
-import VendorFormPage from "./pages/vendors/form/VendorFormPage";
-
-// UPLIFTS
-import UpliftQueuePage from "./pages/uplifts/UpliftQueuePage";
-
-// VENDOR POs
-import VendorPoList from "./pages/vendor-pos/list/List";
-import VendorPoViewPage from "./pages/vendor-pos/view/VendorPoViewPage";
-
-// SETTINGS
-import DropdownOptionsPage from "./pages/settings/DropdownOptionsPage";
-import TaskTemplatesPage from "./pages/settings/TaskTemplatesPage";
-
-// VENDOR PORTAL (public, token-authenticated, separate tree)
-import VendorPortalLayout from "./pages/vendor-portal/VendorPortalLayout";
-import VendorPortalDashboard from "./pages/vendor-portal/DashboardPage";
-import VendorPortalPos from "./pages/vendor-portal/PosPage";
-import VendorPortalDispatchDetail from "./pages/vendor-portal/DispatchDetailPage";
-
-// Protected Route Component
-function ProtectedRoute({ children }) {
-  return isAuthenticated() ? children : <Navigate to="/login" replace />;
-}
-
-export default function App() {
-  const [navCollapsed, setNavCollapsed] = useState(false);
-
-  return (
-    <BrowserRouter>
-      <Routes>
-        {/* Public Routes */}
-        <Route path="/login" element={<LoginPage />} />
-
-        {/* Vendor Portal — public, token-authenticated via URL */}
-        <Route path="/v/:token" element={<VendorPortalLayout />}>
-          <Route index element={<Navigate to="dashboard" replace />} />
-          <Route path="dashboard" element={<VendorPortalDashboard />} />
-          <Route path="pos" element={<VendorPortalPos />} />
-          <Route path="dispatch/:id" element={<VendorPortalDispatchDetail />} />
-        </Route>
-
-        {/* Protected Routes */}
-        <Route
-          path="/*"
-          element={
-            <ProtectedRoute>
-              <div className={`app ${navCollapsed ? "nav-collapsed" : ""}`}>
-                <Sidebar />
-
-                <div className="mainArea">
-                  <Topbar onToggleNav={() => setNavCollapsed(v => !v)} />
-
-                  <div className="contentWrapper">
-                    <Routes>
-                      <Route path="/" element={<Dashboard />} />
-                      <Route path="/dashboard" element={<Dashboard />} />
-
-                      {/* CONTACTS */}
-                      <Route path="/contacts" element={<ContactsList />} />
-                      <Route path="/contacts/new" element={<ContactFormPage />} />
-                      <Route path="/contacts/edit/:id" element={<ContactFormPage />} />
-
-                      {/* ACCOUNTS */}
-                      <Route path="/accounts" element={<AccountList />} />
-                      <Route path="/accounts/new" element={<AccountFormPage />} />
-                      <Route path="/accounts/edit/:id" element={<AccountFormPage />} />
-
-                      {/* EMPLOYEES */}
-                      <Route path="/employees" element={<EmployeeList />} />
-                      <Route path="/employees/new" element={<EmployeeFormPage />} />
-                      <Route path="/employees/edit/:id" element={<EmployeeFormPage />} />
-
-                      {/* LOCATIONS */}
-                      <Route path="/locations" element={<LocationsList />} />
-                      <Route path="/locations/new" element={<LocationFormPage />} />
-                      <Route path="/locations/edit/:id" element={<LocationFormPage />} />
-
-                      {/* WORK ORDERS */}
-                      <Route path="/workorders" element={<WorkOrdersList />} />
-                      <Route path="/workorders/new" element={<WorkOrderFormPage />} />
-                      <Route path="/workorders/:id" element={<WorkOrderViewPage />} />
-                      <Route path="/workorders/edit/:id" element={<WorkOrderFormPage />} />
-
-                      {/* FOLLOW UPS */}
-                      <Route path="/followups" element={<FollowUpList />} />
-                      <Route path="/followups/new" element={<FollowUpFormPage />} />
-                      <Route path="/followups/edit/:id" element={<FollowUpFormPage />} />
-
-                      {/* PM SCHEDULES */}
-                      <Route path="/pmschedules" element={<PMScheduleList />} />
-                      <Route path="/pmschedules/new" element={<PMScheduleFormPage />} />
-                      <Route path="/pmschedules/edit/:id" element={<PMScheduleFormPage />} />
-
-                      {/* ASSETS */}
-                      <Route path="/assets" element={<AssetsList />} />
-                      <Route path="/assets/new" element={<AssetFormPage />} />
-                      <Route path="/assets/edit/:id" element={<AssetFormPage />} />
-
-                      {/* VENDORS */}
-                      <Route path="/vendors" element={<VendorsList />} />
-                      <Route path="/vendors/new" element={<VendorFormPage />} />
-                      <Route path="/vendors/edit/:id" element={<VendorFormPage />} />
-
-                      {/* CALENDAR */}
-                      <Route path="/calendar" element={<CalendarPage />} />
-                      <Route path="/calendar/new" element={<EventFormPage />} />
-                      <Route path="/calendar/edit/:id" element={<EventFormPage />} />
-
-                      {/* UPLIFTS */}
-                      <Route path="/uplifts" element={<UpliftQueuePage />} />
-
-                      {/* VENDOR POs */}
-                      <Route path="/vendor-pos" element={<VendorPoList />} />
-                      <Route path="/vendor-pos/:id" element={<VendorPoViewPage />} />
-
-                      {/* SETTINGS */}
-                      <Route path="/settings/dropdowns" element={<DropdownOptionsPage />} />
-                      <Route path="/settings/task-templates" element={<TaskTemplatesPage />} />
-                    </Routes>
-                  </div>
-                </div>
-              </div>
-            </ProtectedRoute>
-          }
-        />
-      </Routes>
-    </BrowserRouter>
-  );
-}
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afee..00000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/Site.Layout.js b/src/Site.Layout.js
deleted file mode 100644
index 3b0293d1..00000000
--- a/src/Site.Layout.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from "react";
-import { Container } from "@mui/material";
-import { ThemeProvider, createTheme } from "@mui/material/styles";
-import "./site.css";
-import TopNav from "./components/TopNav";
-import LeftNav from "./components/LeftNav";
-import Main from "./components/Main";
-
-const THEME = createTheme({
-  typography: {
-    fontFamily: `"Dosis", "Nunito", sans-serif`,
-    fontSize: 14,
-    fontWeightLight: 300,
-    fontWeightRegular: 400,
-    fontWeightMedium: 500,
-  },
-  palette: {
-    header: {
-      main: "#4D81B7",
-      contrastText: "header background",
-    },
-  },
-  flexBox: {
-    display: "flex",
-  },
-});
-
-const Layout = (props) => {
-  const [open, setOpen] = React.useState(false);
-
-  const handleDrawerOpen = () => {
-    setOpen(true);
-  };
-
-  const handleDrawerClose = () => {
-    setOpen(false);
-  };
-  return (
-    <ThemeProvider theme={THEME}>
-      <TopNav handleDrawerOpen={handleDrawerOpen}/>
-      <LeftNav handleDrawerClose= {handleDrawerClose} open={open}/>
-      <Main open={open} maxWidth="lg">{props.children}</Main>
-    </ThemeProvider>
-)};
-export default Layout;
diff --git a/src/api/api-error.ts b/src/api/api-error.ts
new file mode 100644
index 00000000..d9dabc83
--- /dev/null
+++ b/src/api/api-error.ts
@@ -0,0 +1,55 @@
+import { isHTTPError, isNetworkError, isTimeoutError } from "ky";
+
+export class ApiError extends Error {
+  readonly status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+  }
+}
+
+export function mapHttpStatusToMessage(status: number, data?: unknown): string {
+  if (status === 401) {
+    return "You are not authorized to access this page.";
+  }
+  if (status === 403) {
+    return "You do not have permission to perform this action.";
+  }
+  if (status === 404) {
+    return "The requested resource was not found.";
+  }
+  if (status === 500) {
+    return "A server error occurred. Please try again later.";
+  }
+
+  if (data && typeof data === "object") {
+    const record = data as Record<string, unknown>;
+    const message = record.message ?? record.Message ?? record.error;
+    if (typeof message === "string" && message.length > 0) {
+      return message;
+    }
+  }
+
+  return "An error occurred";
+}
+
+export function normalizeApiRequestError(error: Error): Error {
+  if (isHTTPError(error)) {
+    error.message = mapHttpStatusToMessage(error.response.status, error.data);
+    return error;
+  }
+
+  if (isNetworkError(error)) {
+    error.message = "No response from server. Please check your connection.";
+    return error;
+  }
+
+  if (isTimeoutError(error)) {
+    error.message = "The request timed out. Please try again.";
+    return error;
+  }
+
+  return error;
+}
diff --git a/src/api/api-paths.ts b/src/api/api-paths.ts
new file mode 100644
index 00000000..64405aa6
--- /dev/null
+++ b/src/api/api-paths.ts
@@ -0,0 +1,195 @@
+export const API_PATHS = {
+  authentication: {
+    login: "Authentication/Login",
+    changePassword: "Authentication/ChangePassword",
+    forgetPassword: "Authentication/ForgetPassword",
+    verificationCode: "Authentication/VerificationCode",
+    resetPassword: "Authentication/ResetPassword",
+  },
+  workOrder: {
+    getList: "WorkOrder/GetWorkOrderList",
+    getById: "WorkOrder/GetWorkorderById",
+    create: "WorkOrder/Create",
+    update: "WorkOrder/Update",
+    delete: "WorkOrder/DeleteWorkOrder",
+    addWorkorder: "WorkOrder/AddWorkorder",
+    editWorkorder: "WorkOrder/EditWorkorder",
+    deleteWorkorder: "WorkOrder/DeleteWorkorder",
+    addCommentJson: "WorkOrder/AddCommentJson",
+    changeAssignment: "WorkOrder/ChangeAssignment",
+    updateChecklistItem: "WorkOrder/UpdateChecklistItem",
+    addChecklistItem: "WorkOrder/AddChecklistItem",
+    verifyDispatch: "WorkOrder/VerifyDispatch",
+    addDispatchSignoff: "WorkOrder/AddDispatchSignoff",
+    getDispatch: "WorkOrder/GetDispatch",
+    updateDispatch: "WorkOrder/UpdateDispatch",
+    addDispatchComment: "WorkOrder/AddDispatchComment",
+    dispatchToVendor: "WorkOrder/DispatchToVendor",
+    changeStatus: "WorkOrder/ChangeStatus",
+    board: "workorders/board",
+    boardCreate: "workorders/board",
+    boardSearch: "workorders/board/search",
+    boardPatch: (id: string | number) => `workorders/${id}/board`,
+    boardDetail: (id: string | number) => `workorders/${id}/detail`,
+    comments: (id: string | number) => `workorders/${id}/comments`,
+    commentItem: (workOrderId: string | number, commentId: string | number) =>
+      `workorders/${workOrderId}/comments/${commentId}`,
+    media: (id: string | number) => `workorders/${id}/media`,
+    mediaItem: (id: string | number, mediaId: string | number) =>
+      `workorders/${id}/media/${mediaId}`,
+    mediaContent: (id: string | number, mediaId: string | number) =>
+      `workorders/${id}/media/${mediaId}/content`,
+    completionDoc: (id: string | number) => `workorders/${id}/completion-doc`,
+    uplifts: (id: string | number) => `workorders/${id}/uplifts`,
+    upliftCancel: (workOrderId: string | number, upliftId: string | number) =>
+      `workorders/${workOrderId}/uplifts/${upliftId}/cancel`,
+    upliftRevoke: (workOrderId: string | number, upliftId: string | number) =>
+      `workorders/${workOrderId}/uplifts/${upliftId}/revoke`,
+    lookupsDispatchers: "workorders/lookups/dispatchers",
+  },
+  pmSchedule: {
+    getList: "PMSchedule/GetList",
+    getById: "PMSchedule/GetById",
+    save: "PMSchedule/Save",
+    delete: "PMSchedule/Delete",
+  },
+  followUp: {
+    getList: "FollowUp/GetFollowUpList",
+    getById: "FollowUp/GetById",
+    create: "FollowUp/Create",
+    update: "FollowUp/Update",
+    delete: "FollowUp/Delete",
+    complete: "FollowUp/Complete",
+    cancel: "FollowUp/Cancel",
+    save: "FollowUp/Save",
+  },
+  employee: {
+    getList: "Employee/GetEmployeeList",
+    getById: "Employee/GetById",
+    create: "Employee/Create",
+    update: "Employee/Update",
+    delete: "Employee/Delete",
+    createEmployee: "Employee/CreateEmployee",
+    updateEmployee: "Employee/UpdateEmployee",
+    deleteEmployee: "Employee/DeleteEmployee",
+    addEmployees: "Employee/AddEmployees",
+    editEmployees: "Employee/EditEmployees",
+    deleteEmployees: "Employee/DeleteEmployees",
+    dropdown: "Employee/Dropdown",
+  },
+  teamMember: {
+    getList: "User",
+    create: "team-members",
+    detail: "team-members",
+  },
+  contact: {
+    getList: "Contact/GetContactList",
+    getContacts: "Contact/GetContacts",
+    create: "Contact/Create",
+    update: "Contact/Update",
+    delete: "Contact/Delete",
+    addContacts: "Contact/AddContacts",
+    editContacts: "Contact/EditContacts",
+    deleteContacts: "Contact/DeleteContacts",
+    dropdown: "Contact/Dropdown",
+    getLocations: "Contact/GetLocations",
+  },
+  location: {
+    getList: "Location/GetLocationList",
+    getById: "Location/GetById",
+    create: "Location/Create",
+    update: "Location/Update",
+    delete: "Location/Delete",
+    deleteLocation: "Location/DeleteLocation",
+    dropdown: "Location/Dropdown",
+    sites: "locations/sites",
+  },
+  account: {
+    getList: "Account/GetAccountList",
+    create: "Account/Create",
+    update: "Account/Update",
+    delete: "Account/Delete",
+    addAccount: "Account/AddAccount",
+    editAccount: "Account/EditAccount",
+    deleteAccount: "Account/DeleteAccount",
+    addAccounts: "Account/AddAccounts",
+    editAccounts: "Account/EditAccounts",
+    deleteAccounts: "Account/DeleteAccounts",
+    dropdown: "Account/Dropdown",
+  },
+  asset: {
+    getList: "Asset/GetAssetList",
+    getById: "Asset/GetById",
+    getAssetById: "Asset/GetAssetById",
+    create: "Asset/Create",
+    update: "Asset/Update",
+    delete: "Asset/Delete",
+    deleteAsset: "Asset/DeleteAsset",
+    addAsset: "Asset/AddAsset",
+    editAsset: "Asset/EditAsset",
+  },
+  vendor: {
+    getList: "Vendor/GetVendorList",
+    getDirectoryList: "Vendor/GetVendorDirectoryList",
+    getById: "Vendor/GetById",
+    create: "Vendor/Create",
+    update: "Vendor/Update",
+    delete: "Vendor/Delete",
+    dropdown: "vendors/Dropdown",
+    facets: "Vendor/facets",
+    deactivationImpact: "deactivation-impact",
+  },
+  vendorCompanyRoster: {
+    base: "vendor-company-roster",
+    byCompany: (companyId: string | number) => `vendor-company-roster/${companyId}`,
+  },
+  calendar: {
+    getEventsForCalendar: "Calendar/GetEventsForCalendar",
+    getEventList: "Calendar/GetEventList",
+    getEventById: "Calendar/GetEventById",
+    addEvent: "Calendar/AddEvent",
+    editEvent: "Calendar/EditEvent",
+    deleteEvent: "Calendar/DeleteEvent",
+  },
+  dashboard: {
+    stats: "Dashboard/Stats",
+    workload: "Dashboard/Workload",
+    performance: "Dashboard/Performance",
+    regions: "Dashboard/Regions",
+    vendorInsights: "Dashboard/VendorInsights",
+    trend: "Dashboard/Trend",
+  },
+  dropdownOptions: {
+    byCategory: "DropdownOptions/ByCategory",
+    create: "DropdownOptions/Create",
+    update: "DropdownOptions/Update",
+    delete: "DropdownOptions",
+  },
+  services: {
+    list: "services",
+  },
+  user: {
+    list: "User",
+  },
+  taskListTemplate: {
+    list: "TaskListTemplate",
+  },
+  vendorPortal: {
+    base: "vendor-portal",
+    session: "/session",
+    dispatches: "/dispatches",
+  },
+  rest: {
+    employees: "employees",
+    contacts: "contacts",
+    accounts: "accounts",
+    locations: "locations",
+    workOrders: "workorders",
+    pmSchedules: "pmschedules",
+    followups: "followups",
+    vendors: "vendors",
+    taskListTemplates: "tasklisttemplates",
+    uplifts: "uplifts",
+    dispatches: "dispatches",
+  },
+} as const;
diff --git a/src/api/api.ts b/src/api/api.ts
new file mode 100644
index 00000000..e85e8e18
--- /dev/null
+++ b/src/api/api.ts
@@ -0,0 +1,178 @@
+import ky, { type KyInstance, type Options } from "ky";
+import { env } from "@/lib/env";
+import { resolveApiPrefixUrl } from "@/lib/resolve-api-prefix-url";
+import { API_PATHS } from "@/api/api-paths";
+import { mapHttpStatusToMessage, normalizeApiRequestError } from "@/api/api-error";
+import { getAccessToken } from "@/lib/auth/auth-storage";
+import { expireSessionAndRedirectToLogin } from "@/lib/auth/expire-session";
+import { traceHttpOperation } from "@/observability/http-transaction";
+
+function isAuthLoginRequest(request: Request): boolean {
+  return request.url.includes(API_PATHS.authentication.login);
+}
+
+export const api: KyInstance = ky.create({
+  prefix: resolveApiPrefixUrl(env.apiUrl),
+  // hazard: no instance-wide Content-Type. Ky sets application/json for `json` bodies, and the
+  // runtime must set `multipart/form-data; boundary=…` for FormData while it builds the Request.
+  // A default here is baked into that Request; deleting it in a hook leaves the multipart body
+  // with no Content-Type at all, so ASP.NET cannot bind [FromForm] fields.
+  headers: {
+    Accept: "application/json",
+  },
+  hooks: {
+    beforeRequest: [
+      ({ request }) => {
+        const token = getAccessToken();
+        if (token) {
+          request.headers.set("Authorization", token);
+        }
+      },
+    ],
+    beforeError: [({ error }) => normalizeApiRequestError(error)],
+    afterResponse: [
+      ({ request, response }) => {
+        if (response.status !== 401 || isAuthLoginRequest(request)) {
+          return response;
+        }
+
+        expireSessionAndRedirectToLogin();
+        return response;
+      },
+    ],
+  },
+});
+
+export type ApiRawMethod = "get" | "post" | "put" | "patch" | "delete";
+
+export async function apiRequestRaw(
+  method: ApiRawMethod,
+  url: string,
+  options?: Options,
+  entryPoint?: string,
+): Promise<Response> {
+  return traceHttpOperation(
+    {
+      method: method.toUpperCase(),
+      url,
+      entryPoint: entryPoint ?? `api.${method}`,
+    },
+    async ({ reportStatus }) => {
+      const response = await api[method](url, options);
+      reportStatus(response.status);
+      return response;
+    },
+  );
+}
+
+export async function apiGet<T>(url: string, options?: Options): Promise<T> {
+  return traceHttpOperation(
+    { method: "GET", url, entryPoint: "api.apiGet" },
+    async ({ reportStatus }) => {
+      const response = await api.get(url, options);
+      reportStatus(response.status);
+      return response.json<T>();
+    },
+  );
+}
+
+export async function apiPost<T>(url: string, body?: unknown, options?: Options): Promise<T> {
+  return traceHttpOperation(
+    { method: "POST", url, entryPoint: "api.apiPost" },
+    async ({ reportStatus }) => {
+      const response = await api.post(url, { ...options, json: body });
+      reportStatus(response.status);
+      return response.json<T>();
+    },
+  );
+}
+
+export async function apiPostForm<T>(url: string, body: FormData, options?: Options): Promise<T> {
+  return traceHttpOperation(
+    { method: "POST", url, entryPoint: "api.apiPostForm" },
+    async ({ reportStatus }) => {
+      const response = await api.post(url, { ...options, body });
+      reportStatus(response.status);
+      return response.json<T>();
+    },
+  );
+}
+
+export async function apiPut<T>(url: string, body?: unknown, options?: Options): Promise<T> {
+  return traceHttpOperation(
+    { method: "PUT", url, entryPoint: "api.apiPut" },
+    async ({ reportStatus }) => {
+      const response = await api.put(url, { ...options, json: body });
+      reportStatus(response.status);
+      return response.json<T>();
+    },
+  );
+}
+
+export async function apiPatch<T>(url: string, body?: unknown, options?: Options): Promise<T> {
+  return traceHttpOperation(
+    { method: "PATCH", url, entryPoint: "api.apiPatch" },
+    async ({ reportStatus }) => {
+      const response = await api.patch(url, { ...options, json: body });
+      reportStatus(response.status);
+      return response.json<T>();
+    },
+  );
+}
+
+export async function apiDelete<T>(url: string, options?: Options): Promise<T> {
+  return traceHttpOperation(
+    { method: "DELETE", url, entryPoint: "api.apiDelete" },
+    async ({ reportStatus }) => {
+      const response = await api.delete(url, options);
+      reportStatus(response.status);
+      return response.json<T>();
+    },
+  );
+}
+
+export async function apiPostNoContent(
+  url: string,
+  body?: unknown,
+  options?: Options,
+): Promise<void> {
+  return traceHttpOperation(
+    { method: "POST", url, entryPoint: "api.apiPostNoContent" },
+    async ({ reportStatus }) => {
+      const response = await api.post(url, { ...options, json: body });
+      reportStatus(response.status);
+      if (response.status === 204) {
+        return;
+      }
+
+      const text = await response.text();
+      if (!text.trim()) {
+        return;
+      }
+
+      JSON.parse(text);
+    },
+  );
+}
+
+export async function apiDeleteNoContent(url: string, options?: Options): Promise<void> {
+  return traceHttpOperation(
+    { method: "DELETE", url, entryPoint: "api.apiDeleteNoContent" },
+    async ({ reportStatus }) => {
+      const response = await api.delete(url, options);
+      reportStatus(response.status);
+      if (response.status === 204) {
+        return;
+      }
+
+      const text = await response.text();
+      if (!text.trim()) {
+        return;
+      }
+
+      JSON.parse(text);
+    },
+  );
+}
+
+export { mapHttpStatusToMessage };
diff --git a/src/api/handle-api-response.ts b/src/api/handle-api-response.ts
new file mode 100644
index 00000000..5adefa96
--- /dev/null
+++ b/src/api/handle-api-response.ts
@@ -0,0 +1,62 @@
+import { readItems, readPage, readPageSize, readTotalCount } from "@/api/paginated-response-fields";
+
+export interface PaginatedResult<T> {
+  items: T[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export function handleApiResponse<T>(data: unknown): T {
+  if (Array.isArray(data)) {
+    return data as T;
+  }
+
+  if (isRecord(data)) {
+    const nested = data.data ?? data.Data ?? data.value;
+    if (nested !== undefined) {
+      return nested as T;
+    }
+  }
+
+  return data as T;
+}
+
+export function handlePaginatedResponse<T>(
+  data: unknown,
+  params?: { page?: number; pageSize?: number },
+): PaginatedResult<T> {
+  const page = params?.page ?? 1;
+  const pageSize = params?.pageSize ?? 12;
+
+  if (Array.isArray(data)) {
+    return {
+      items: data as T[],
+      totalCount: data.length,
+      page,
+      pageSize,
+    };
+  }
+
+  if (isRecord(data)) {
+    const items = readItems<T>(data);
+
+    return {
+      items,
+      totalCount: readTotalCount(data, items.length),
+      page: readPage(data, page),
+      pageSize: readPageSize(data, pageSize),
+    };
+  }
+
+  return {
+    items: [],
+    totalCount: 0,
+    page,
+    pageSize,
+  };
+}
diff --git a/src/api/paginated-response-fields.ts b/src/api/paginated-response-fields.ts
new file mode 100644
index 00000000..cfc31b8f
--- /dev/null
+++ b/src/api/paginated-response-fields.ts
@@ -0,0 +1,38 @@
+/** Field readers for paginated API payloads that tolerate PascalCase/camelCase and nested envelopes. */
+
+export function readItems<T>(record: Record<string, unknown>): T[] {
+  const nested = record.data ?? record.Data ?? record.value;
+  const itemsFromPaged =
+    (Array.isArray(record.items) ? (record.items as T[]) : undefined) ??
+    (Array.isArray(record.Items) ? (record.Items as T[]) : undefined);
+
+  return itemsFromPaged ?? (Array.isArray(nested) ? (nested as T[]) : []);
+}
+
+export function readTotalCount(record: Record<string, unknown>, fallback: number): number {
+  return (
+    (typeof record.totalCount === "number" ? record.totalCount : undefined) ??
+    (typeof record.TotalCount === "number" ? record.TotalCount : undefined) ??
+    (typeof record.total === "number" ? record.total : undefined) ??
+    (typeof record.Total === "number" ? record.Total : undefined) ??
+    (typeof record.Count === "number" ? record.Count : undefined) ??
+    fallback
+  );
+}
+
+export function readPage(record: Record<string, unknown>, fallback: number): number {
+  return (
+    (typeof record.page === "number" ? record.page : undefined) ??
+    (typeof record.pageNumber === "number" ? record.pageNumber : undefined) ??
+    (typeof record.PageNumber === "number" ? record.PageNumber : undefined) ??
+    fallback
+  );
+}
+
+export function readPageSize(record: Record<string, unknown>, fallback: number): number {
+  return (
+    (typeof record.pageSize === "number" ? record.pageSize : undefined) ??
+    (typeof record.PageSize === "number" ? record.PageSize : undefined) ??
+    fallback
+  );
+}
diff --git a/src/api/upload-form-with-progress.ts b/src/api/upload-form-with-progress.ts
new file mode 100644
index 00000000..90a2a254
--- /dev/null
+++ b/src/api/upload-form-with-progress.ts
@@ -0,0 +1,103 @@
+import { getAccessToken } from "@/lib/auth/auth-storage";
+import { expireSessionAndRedirectToLogin } from "@/lib/auth/expire-session";
+import { env } from "@/lib/env";
+import { resolveApiBaseUrl } from "@/lib/resolve-api-prefix-url";
+
+export interface UploadFormResult {
+  ok: boolean;
+  status: number;
+  data: unknown;
+}
+
+export interface UploadFormOptions {
+  signal?: AbortSignal;
+  onProgress?: (percent: number) => void;
+}
+
+function parseJsonBody(text: string): unknown {
+  if (!text.trim()) {
+    return undefined;
+  }
+
+  try {
+    return JSON.parse(text) as unknown;
+  } catch {
+    return undefined;
+  }
+}
+
+function createAbortError(): DOMException {
+  return new DOMException("The upload was aborted.", "AbortError");
+}
+
+/**
+ * hazard: Ky's `onUploadProgress` turns the body into a ReadableStream, and browsers only accept
+ * streamed request bodies over HTTP/2 — on HTTP/1.1 (Vite proxy, plain-HTTP hosts) the request dies
+ * as a network error before reaching the API. XHR reports progress on every transport.
+ */
+export function uploadFormWithProgress(
+  path: string,
+  body: FormData,
+  options?: UploadFormOptions,
+): Promise<UploadFormResult> {
+  return new Promise((resolve, reject) => {
+    if (options?.signal?.aborted) {
+      reject(createAbortError());
+      return;
+    }
+
+    const request = new XMLHttpRequest();
+    request.open("POST", `${resolveApiBaseUrl(env.apiUrl)}/${path.replace(/^\/+/, "")}`);
+    request.setRequestHeader("Accept", "application/json");
+
+    const token = getAccessToken();
+    if (token) {
+      request.setRequestHeader("Authorization", token);
+    }
+
+    const abortRequest = () => {
+      request.abort();
+    };
+    options?.signal?.addEventListener("abort", abortRequest);
+
+    const detachSignal = () => {
+      options?.signal?.removeEventListener("abort", abortRequest);
+    };
+
+    const { onProgress } = options ?? {};
+    if (onProgress) {
+      request.upload.addEventListener("progress", (event) => {
+        if (event.lengthComputable && event.total > 0) {
+          onProgress(Math.round((event.loaded / event.total) * 100));
+        }
+      });
+    }
+
+    request.addEventListener("load", () => {
+      detachSignal();
+      const { status } = request;
+
+      if (status === 401) {
+        expireSessionAndRedirectToLogin();
+      }
+
+      resolve({
+        ok: status >= 200 && status < 300,
+        status,
+        data: parseJsonBody(request.responseText),
+      });
+    });
+
+    request.addEventListener("error", () => {
+      detachSignal();
+      reject(new Error("Upload failed. Check your connection and try again."));
+    });
+
+    request.addEventListener("abort", () => {
+      detachSignal();
+      reject(createAbortError());
+    });
+
+    request.send(body);
+  });
+}
diff --git a/src/apiUtil.js b/src/apiUtil.js
deleted file mode 100644
index f2604308..00000000
--- a/src/apiUtil.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { API_ERROR_MESSAGE } from "./constants";
-import { getAccessToken } from "./tokenUtility";
-
-const getHeaders = () => ({
-  Accept: "application/json",
-  "Content-Type": "application/json",
-  pragma: "no-cache",
-  "cache-control": "no-cache",
-  Authorization: getAccessToken(),
-});
-
-const getFormHeaders = () => ({
-  accept: "application/json",
-  pragma: "no-cache",
-  "cache-control": "no-cache",
-  Authorization: getAccessToken(),
-});
-
-export const get = (url) =>
-  fetch(url, {
-    headers: getHeaders(),
-    method: "GET",
-  }).then(handleHttpResponse);
-
-export const post = (url, payload) =>
-  fetch(url, {
-    headers: getHeaders(),
-    method: "POST",
-    body: JSON.stringify(payload),
-  }).then(handleHttpResponse);
-
-export const postFormBody = (url, payload) => {
-  const formData = new FormData();
-  for (const [key, value] of Object.entries(payload)) {
-    formData.append(key, value);
-  }
-  return fetch(url, {
-    method: "POST",
-    headers: getFormHeaders(),
-    body: formData,
-  }).then(handleHttpResponse);
-};
-
-export const put = (url, payload) =>
-  fetch(url, {
-    headers: getHeaders(),
-    method: "PUT",
-    body: JSON.stringify(payload),
-  }).then(handleHttpResponse);
-
-export const putFormBody = (url, payload) => {
-  const formData = new FormData();
-  for (const [key, value] of Object.entries(payload)) {
-    formData.append(key, value);
-  }
-  return fetch(url, {
-    method: "PUT",
-    headers: getFormHeaders(),
-    body: formData,
-  }).then(handleHttpResponse);
-};
-
-export const deleteItem = (url, payload) =>
-  fetch(url, {
-    headers: getHeaders(),
-    method: "DELETE",
-    body: JSON.stringify(payload),
-  }).then(handleHttpResponse);
-
-const handleHttpResponse = (response) => {
-  if (response.ok) return response.json();
-  if (response.status === 401) {
-    throw new Error("You are not authorized to access this page.");
-  }
-  throw new Error(API_ERROR_MESSAGE);
-};
diff --git a/src/app-root.tsx b/src/app-root.tsx
new file mode 100644
index 00000000..b3100ba5
--- /dev/null
+++ b/src/app-root.tsx
@@ -0,0 +1,5 @@
+import { Routes } from "@/app-routes";
+
+export function AppRoot() {
+  return <Routes />;
+}
diff --git a/src/app-routes.tsx b/src/app-routes.tsx
new file mode 100644
index 00000000..c5958fa8
--- /dev/null
+++ b/src/app-routes.tsx
@@ -0,0 +1 @@
+export { Routes } from "@/routing";
diff --git a/src/app/(auth)/_components/auth-brand-logo.tsx b/src/app/(auth)/_components/auth-brand-logo.tsx
new file mode 100644
index 00000000..fd23aac3
--- /dev/null
+++ b/src/app/(auth)/_components/auth-brand-logo.tsx
@@ -0,0 +1,25 @@
+import { useState } from "react";
+
+import { BrandLockup } from "@/components/common/brand-lockup";
+import { cn } from "@/lib/utils";
+
+export type AuthBrandLogoProps = {
+  className?: string;
+};
+
+export function AuthBrandLogo({ className }: AuthBrandLogoProps) {
+  const [useFallback, setUseFallback] = useState(false);
+
+  if (useFallback) {
+    return <BrandLockup className={className} />;
+  }
+
+  return (
+    <img
+      src="/seahaven-logo.svg"
+      alt="Seahaven"
+      onError={() => setUseFallback(true)}
+      className={cn("mx-auto block h-10 w-auto", className)}
+    />
+  );
+}
diff --git a/src/app/(auth)/_components/auth-card-header.tsx b/src/app/(auth)/_components/auth-card-header.tsx
new file mode 100644
index 00000000..51d2b147
--- /dev/null
+++ b/src/app/(auth)/_components/auth-card-header.tsx
@@ -0,0 +1,30 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import { Text } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+export type AuthCardHeaderProps = ComponentPropsWithoutRef<"div"> & {
+  title: string;
+  subtitle?: string;
+};
+
+export function AuthCardHeader({ title, subtitle, className, ...props }: AuthCardHeaderProps) {
+  return (
+    <div className={cn(className)} {...props}>
+      <Text
+        variant="display"
+        className="m-0 text-center !font-bold ![font-size:var(--text-xl)] !leading-[1.5] text-foreground"
+      >
+        {title}
+      </Text>
+      <Text
+        variant="description"
+        tone="muted"
+        when={Boolean(subtitle)}
+        className="mb-6! mt-1.5! text-center font-normal ![font-size:var(--text-base)]"
+      >
+        {subtitle}
+      </Text>
+    </div>
+  );
+}
diff --git a/src/app/(auth)/_components/auth-page-shell.tsx b/src/app/(auth)/_components/auth-page-shell.tsx
new file mode 100644
index 00000000..b5dca71e
--- /dev/null
+++ b/src/app/(auth)/_components/auth-page-shell.tsx
@@ -0,0 +1,34 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export type AuthPageShellProps = ComponentPropsWithoutRef<"div"> & {
+  cardClassName?: string;
+  children: ReactNode;
+};
+
+export function AuthPageShell({
+  children,
+  className,
+  cardClassName,
+  ...props
+}: AuthPageShellProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-screen w-full items-center justify-center bg-(--color-bg-page) px-4",
+        className,
+      )}
+      {...props}
+    >
+      <div
+        className={cn(
+          "w-full max-w-sm rounded-(--radius-lg) border border-border bg-card p-10! shadow-sm",
+          cardClassName,
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(auth)/_components/login-form.tsx b/src/app/(auth)/_components/login-form.tsx
new file mode 100644
index 00000000..3e3d8456
--- /dev/null
+++ b/src/app/(auth)/_components/login-form.tsx
@@ -0,0 +1,96 @@
+import type {
+  FieldErrors,
+  UseFormHandleSubmit,
+  UseFormRegister,
+  UseFormWatch,
+} from "react-hook-form";
+import { Box } from "@mui/material";
+
+import { Button } from "@/components/ui/button";
+import { FormErrorMessage } from "@/components/ui/form-error-message";
+import { FormField } from "@/components/ui/form-field";
+import { PasswordField } from "@/components/ui/password-field";
+import { TextField } from "@/components/ui/text-field";
+import { loginSchema, type LoginFormValues } from "@/domain/auth/schemas/login-schema";
+
+export type LoginFormProps = {
+  register: UseFormRegister<LoginFormValues>;
+  handleSubmit: UseFormHandleSubmit<LoginFormValues>;
+  watch: UseFormWatch<LoginFormValues>;
+  errors: FieldErrors<LoginFormValues>;
+  onSubmit: (values: LoginFormValues) => void;
+  isLoggingIn: boolean;
+  loginError: Error | null;
+};
+
+export function LoginForm({
+  register,
+  handleSubmit,
+  watch,
+  errors,
+  onSubmit,
+  isLoggingIn,
+  loginError,
+}: LoginFormProps) {
+  const [username, password] = watch(["username", "password"]);
+  const isSubmitDisabled = !loginSchema.safeParse({ username, password }).success;
+
+  return (
+    <Box
+      component="form"
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex flex-col gap-4"
+      autoComplete="off"
+    >
+      <FormField
+        label="Email"
+        htmlFor="login-email"
+        error={Boolean(errors.username)}
+        helperText={errors.username?.message}
+        appearance="auth"
+      >
+        <TextField
+          {...register("username")}
+          id="login-email"
+          type="email"
+          autoComplete="email"
+          placeholder="you@seahavenind.com"
+          disabled={isLoggingIn}
+          error={Boolean(errors.username)}
+        />
+      </FormField>
+
+      <FormField
+        label="Password"
+        htmlFor="login-password"
+        error={Boolean(errors.password)}
+        helperText={errors.password?.message}
+        appearance="auth"
+      >
+        <PasswordField
+          {...register("password")}
+          id="login-password"
+          autoComplete="current-password"
+          placeholder="••••••••"
+          disabled={isLoggingIn}
+          error={Boolean(errors.password)}
+        />
+        {Boolean(loginError) && (
+          <FormErrorMessage message="Invalid email or password. Please try again." />
+        )}
+      </FormField>
+
+      <Button
+        type="submit"
+        fullWidth
+        size="lg"
+        loading={isLoggingIn}
+        loadingText="Signing in…"
+        disabled={isSubmitDisabled}
+        className="mt-1!"
+      >
+        Sign In
+      </Button>
+    </Box>
+  );
+}
diff --git a/src/app/(auth)/_layout.tsx b/src/app/(auth)/_layout.tsx
new file mode 100644
index 00000000..8be86a0b
--- /dev/null
+++ b/src/app/(auth)/_layout.tsx
@@ -0,0 +1,11 @@
+import { Outlet } from "react-router";
+
+import { GuestRoute } from "@/components/auth/guest-route";
+
+export default function AuthLayout() {
+  return (
+    <GuestRoute>
+      <Outlet />
+    </GuestRoute>
+  );
+}
diff --git a/src/app/(auth)/login.tsx b/src/app/(auth)/login.tsx
new file mode 100644
index 00000000..a98e5b3d
--- /dev/null
+++ b/src/app/(auth)/login.tsx
@@ -0,0 +1,50 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { AuthBrandLogo } from "@/app/(auth)/_components/auth-brand-logo";
+import { AuthCardHeader } from "@/app/(auth)/_components/auth-card-header";
+import { AuthPageShell } from "@/app/(auth)/_components/auth-page-shell";
+import { LoginForm } from "@/app/(auth)/_components/login-form";
+import { Text } from "@/components/ui/text";
+import { loginSchema, type LoginFormValues } from "@/domain/auth/schemas/login-schema";
+import { useAuthContext } from "@/providers/auth-context";
+
+export default function LoginPage() {
+  const { login, isLoggingIn, loginError } = useAuthContext();
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<LoginFormValues>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: {
+      username: "",
+      password: "",
+    },
+  });
+
+  return (
+    <AuthPageShell>
+      <AuthBrandLogo className="mb-8" />
+      <AuthCardHeader title="Welcome back" subtitle="Sign in to your account" />
+      <LoginForm
+        register={register}
+        handleSubmit={handleSubmit}
+        watch={watch}
+        errors={errors}
+        onSubmit={login}
+        isLoggingIn={isLoggingIn}
+        loginError={loginError}
+      />
+      <Text
+        variant="caption"
+        tone="muted"
+        className="mt-5! block text-center text-(length:--text-xs)"
+      >
+        Having trouble? Contact your administrator.
+      </Text>
+    </AuthPageShell>
+  );
+}
diff --git a/src/app/(protected)/_layout.tsx b/src/app/(protected)/_layout.tsx
new file mode 100644
index 00000000..eca5363c
--- /dev/null
+++ b/src/app/(protected)/_layout.tsx
@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { Outlet } from "react-router";
+import { Box, useMediaQuery, useTheme } from "@mui/material";
+
+import { ProtectedRoute } from "@/components/auth/protected-route";
+import { AppSidebar } from "@/components/layout/app-sidebar";
+import { getSidebarWidth } from "@/config/menu";
+import { AppTopbar } from "@/components/layout/app-topbar";
+
+export default function AdminShellLayout() {
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up("md"));
+  const [navCollapsed, setNavCollapsed] = useState(false);
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  const sidebarWidth = isDesktop ? getSidebarWidth(navCollapsed) : 0;
+
+  const handleToggleNav = () => {
+    if (isDesktop) {
+      setNavCollapsed((value) => !value);
+      return;
+    }
+
+    setMobileNavOpen((value) => !value);
+  };
+
+  return (
+    <ProtectedRoute>
+      <Box className="flex h-screen w-full overflow-hidden bg-background">
+        <AppSidebar
+          collapsed={isDesktop ? navCollapsed : false}
+          mobile={!isDesktop}
+          open={isDesktop || mobileNavOpen}
+          onClose={() => setMobileNavOpen(false)}
+        />
+
+        <Box
+          className="flex h-screen min-w-0 flex-1 flex-col overflow-hidden"
+          sx={{ width: `calc(100% - ${sidebarWidth}px)` }}
+        >
+          <AppTopbar onToggleNav={handleToggleNav} />
+
+          <Box
+            component="main"
+            className="flex-1 overflow-auto"
+            sx={{ backgroundColor: "var(--color-bg-page)" }}
+          >
+            <Outlet />
+          </Box>
+        </Box>
+      </Box>
+    </ProtectedRoute>
+  );
+}
diff --git a/src/app/(protected)/accounts/_components/account-form.tsx b/src/app/(protected)/accounts/_components/account-form.tsx
new file mode 100644
index 00000000..cbb8829a
--- /dev/null
+++ b/src/app/(protected)/accounts/_components/account-form.tsx
@@ -0,0 +1,194 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate, useParams } from "react-router";
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { accountSchema, type AccountFormValues } from "@/domain/accounts/schemas/account-schema";
+import { useAccountDetail } from "@/domain/accounts/use-cases/use-account-detail";
+import { useCreateAccount } from "@/domain/accounts/use-cases/use-create-account";
+import { useUpdateAccount } from "@/domain/accounts/use-cases/use-update-account";
+
+const defaultValues: AccountFormValues = {
+  AccountName: "",
+  AccountNumber: "",
+  Industry: "",
+  Website: "",
+  Notes: "",
+  Address1: "",
+  Address2: "",
+  City: "",
+  State: "",
+  Zip: "",
+  Country: "US",
+};
+
+export default function AccountFormPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const isEdit = Boolean(id);
+
+  const { data: account, isLoading, error } = useAccountDetail(id);
+  const createAccount = useCreateAccount();
+  const updateAccount = useUpdateAccount();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm<AccountFormValues>({
+    resolver: zodResolver(accountSchema),
+    defaultValues,
+  });
+
+  useEffect(() => {
+    if (account && isEdit) {
+      reset({
+        AccountName: account.AccountName ?? "",
+        AccountNumber: account.AccountNumber ?? "",
+        Industry: account.Industry ?? "",
+        Website: account.Website ?? "",
+        Notes: account.Notes ?? "",
+        Address1: account.Address1 ?? "",
+        Address2: account.Address2 ?? "",
+        City: account.City ?? "",
+        State: account.State ?? "",
+        Zip: account.Zip ?? "",
+        Country: account.Country ?? "US",
+      });
+    }
+  }, [account, isEdit, reset]);
+
+  const isSaving = createAccount.isPending || updateAccount.isPending;
+
+  const onSubmit = (values: AccountFormValues) => {
+    if (isEdit && id) {
+      updateAccount.mutate({ id, values });
+      return;
+    }
+    createAccount.mutate(values);
+  };
+
+  if (isEdit && isLoading) {
+    return (
+      <Box className="flex justify-center p-10">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box className="mx-auto max-w-4xl p-4">
+      <Paper variant="outlined" className="p-6">
+        <Stack spacing={4}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Typography variant="h5" component="h1">
+              {isEdit ? "Edit Account" : "Create an Account"}
+            </Typography>
+            <Button variant="text" onClick={() => navigate("/accounts")}>
+              Back to list
+            </Button>
+          </Stack>
+
+          {Boolean(error) && (
+            <Alert severity="error">
+              {error instanceof Error ? error.message : "Failed to load account"}
+            </Alert>
+          )}
+
+          <Box component="form" onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
+            <Stack spacing={2}>
+              <Typography variant="subtitle1" className="font-semibold">
+                General Details
+              </Typography>
+              <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+                <TextField
+                  {...register("AccountName")}
+                  label="Account Name"
+                  required
+                  error={Boolean(errors.AccountName)}
+                  helperText={errors.AccountName?.message}
+                  fullWidth
+                />
+                <TextField {...register("AccountNumber")} label="Account Number" fullWidth />
+              </Stack>
+              <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+                <TextField {...register("Industry")} label="Industry" fullWidth />
+                <TextField {...register("Website")} label="Website" fullWidth />
+              </Stack>
+              <TextField {...register("Notes")} label="Notes" fullWidth multiline minRows={2} />
+            </Stack>
+
+            <Stack spacing={2}>
+              <Typography variant="subtitle1" className="font-semibold">
+                Address
+              </Typography>
+              <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+                <TextField {...register("Address1")} label="Address 1" fullWidth />
+                <TextField {...register("Address2")} label="Address 2" fullWidth />
+              </Stack>
+              <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+                <TextField {...register("City")} label="City" fullWidth />
+                <TextField {...register("State")} label="State / Province" fullWidth />
+                <TextField {...register("Zip")} label="Zip/Postal Code" fullWidth />
+              </Stack>
+              <Controller
+                name="Country"
+                control={control}
+                render={({ field }) => (
+                  <FormControl fullWidth>
+                    <InputLabel id="country-label">Country</InputLabel>
+                    <Select
+                      {...field}
+                      labelId="country-label"
+                      label="Country"
+                      value={field.value ?? "US"}
+                    >
+                      <MenuItem value="">Select Country</MenuItem>
+                      <MenuItem value="US">United States</MenuItem>
+                    </Select>
+                  </FormControl>
+                )}
+              />
+            </Stack>
+
+            <Stack
+              direction="row"
+              spacing={2}
+              sx={{
+                justifyContent: "flex-end",
+              }}
+            >
+              <Button variant="outlined" onClick={() => navigate("/accounts")} disabled={isSaving}>
+                Cancel
+              </Button>
+              <Button type="submit" variant="contained" disabled={isSaving}>
+                {isSaving ? "Saving..." : isEdit ? "Update Account" : "Create Account"}
+              </Button>
+            </Stack>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/accounts/edit/[id].tsx b/src/app/(protected)/accounts/edit/[id].tsx
new file mode 100644
index 00000000..8a48c8a9
--- /dev/null
+++ b/src/app/(protected)/accounts/edit/[id].tsx
@@ -0,0 +1 @@
+export { default } from "../_components/account-form";
diff --git a/src/app/(protected)/accounts/index.tsx b/src/app/(protected)/accounts/index.tsx
new file mode 100644
index 00000000..7697c764
--- /dev/null
+++ b/src/app/(protected)/accounts/index.tsx
@@ -0,0 +1,242 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TablePagination,
+  TableRow,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import type { AccountListItem } from "@/domain/accounts/types/account";
+import { useAccountsList } from "@/domain/accounts/use-cases/use-accounts-list";
+import { useDeleteAccount } from "@/domain/accounts/use-cases/use-delete-account";
+import { useDebounce } from "@/hooks/use-debounce";
+
+export default function AccountsListPage() {
+  const navigate = useNavigate();
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(12);
+  const [deleteTarget, setDeleteTarget] = useState<AccountListItem | null>(null);
+
+  const debouncedSearch = useDebounce(search, 300);
+  const deleteAccount = useDeleteAccount();
+
+  const listParams = useMemo(
+    () => ({
+      search: debouncedSearch,
+      page: page + 1,
+      pageSize,
+    }),
+    [debouncedSearch, page, pageSize],
+  );
+
+  const { data, isLoading, isFetching, error } = useAccountsList(listParams);
+
+  const rows = data?.items ?? [];
+  const totalCount = data?.totalCount ?? 0;
+
+  const handleDeleteConfirm = () => {
+    if (!deleteTarget) {
+      return;
+    }
+
+    deleteAccount.mutate(deleteTarget.id, {
+      onSuccess: () => setDeleteTarget(null),
+    });
+  };
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{
+          alignItems: { xs: "stretch", md: "center" },
+          justifyContent: "space-between",
+        }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: "baseline",
+          }}
+        >
+          <Typography variant="h5" component="h1">
+            Accounts
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{
+              color: "text.secondary",
+            }}
+          >
+            {totalCount} total
+          </Typography>
+          {isFetching && !isLoading && <CircularProgress size={16} />}
+        </Stack>
+
+        <Stack
+          direction={{ xs: "column", sm: "row" }}
+          spacing={2}
+          sx={{
+            alignItems: "center",
+          }}
+        >
+          <TextField
+            size="small"
+            value={search}
+            onChange={(event) => {
+              setSearch(event.target.value);
+              setPage(0);
+            }}
+            placeholder="Search accounts..."
+            className="min-w-[220px]"
+          />
+          <Button variant="contained" onClick={() => navigate("/accounts/new")}>
+            + New Account
+          </Button>
+        </Stack>
+      </Stack>
+      {Boolean(error) && (
+        <Alert severity="error">
+          {error instanceof Error ? error.message : "Failed to load accounts"}
+        </Alert>
+      )}
+      <TableContainer component={Paper} variant="outlined">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell className="font-semibold">Name</TableCell>
+              <TableCell className="font-semibold">Number</TableCell>
+              <TableCell className="font-semibold">Industry</TableCell>
+              <TableCell className="font-semibold">Website</TableCell>
+              <TableCell className="font-semibold">Primary Contact</TableCell>
+              <TableCell className="font-semibold">Phone</TableCell>
+              <TableCell className="font-semibold">Owner</TableCell>
+              <TableCell align="right" className="font-semibold">
+                Actions
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={8} align="center" className="py-10">
+                  <CircularProgress size={28} />
+                </TableCell>
+              </TableRow>
+            ) : rows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={8} align="center" className="py-10">
+                  <Typography
+                    sx={{
+                      color: "text.secondary",
+                    }}
+                  >
+                    No accounts found
+                  </Typography>
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((row) => (
+                <TableRow key={String(row.id)} hover>
+                  <TableCell>
+                    <Button
+                      variant="text"
+                      size="small"
+                      className="font-semibold"
+                      onClick={() => navigate(`/accounts/edit/${row.id}`)}
+                    >
+                      {row.name || "—"}
+                    </Button>
+                  </TableCell>
+                  <TableCell>{row.number || "—"}</TableCell>
+                  <TableCell>{row.industry || "—"}</TableCell>
+                  <TableCell>{row.website || "—"}</TableCell>
+                  <TableCell>{row.primaryContact || "—"}</TableCell>
+                  <TableCell>{row.phoneNumber || "—"}</TableCell>
+                  <TableCell>{row.owner || "—"}</TableCell>
+                  <TableCell align="right">
+                    <Tooltip title="Edit">
+                      <IconButton
+                        size="small"
+                        aria-label="Edit account"
+                        onClick={() => navigate(`/accounts/edit/${row.id}`)}
+                      >
+                        <EditOutlinedIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                    <Tooltip title="Delete">
+                      <IconButton
+                        size="small"
+                        aria-label="Delete account"
+                        onClick={() => setDeleteTarget(row)}
+                      >
+                        <DeleteOutlineIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        component="div"
+        count={totalCount}
+        page={page}
+        onPageChange={(_event, nextPage) => setPage(nextPage)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(event) => {
+          setPageSize(Number(event.target.value));
+          setPage(0);
+        }}
+        rowsPerPageOptions={[12, 24, 48]}
+      />
+      <Dialog open={Boolean(deleteTarget)} onClose={() => setDeleteTarget(null)}>
+        <DialogTitle>Delete Account</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Are you sure you want to delete &quot;{deleteTarget?.name}&quot;? This action cannot be
+            undone.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeleteTarget(null)} disabled={deleteAccount.isPending}>
+            Cancel
+          </Button>
+          <Button
+            color="error"
+            variant="contained"
+            onClick={handleDeleteConfirm}
+            disabled={deleteAccount.isPending}
+          >
+            {deleteAccount.isPending ? "Deleting..." : "Delete"}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/accounts/new.tsx b/src/app/(protected)/accounts/new.tsx
new file mode 100644
index 00000000..6f506b87
--- /dev/null
+++ b/src/app/(protected)/accounts/new.tsx
@@ -0,0 +1 @@
+export { default } from "./_components/account-form";
diff --git a/src/app/(protected)/assets/_components/asset-form.tsx b/src/app/(protected)/assets/_components/asset-form.tsx
new file mode 100644
index 00000000..513f1837
--- /dev/null
+++ b/src/app/(protected)/assets/_components/asset-form.tsx
@@ -0,0 +1,218 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate, useParams } from "react-router";
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  FormControl,
+  FormControlLabel,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  Stack,
+  Switch,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { assetSchema, type AssetFormValues } from "@/domain/assets/schemas/asset-schema";
+import { useAssetDetail } from "@/domain/assets/use-cases/use-asset-detail";
+import { useAssetFormOptions } from "@/domain/assets/use-cases/use-asset-form-options";
+import { useCreateAsset } from "@/domain/assets/use-cases/use-create-asset";
+import { useUpdateAsset } from "@/domain/assets/use-cases/use-update-asset";
+
+const defaultValues: AssetFormValues = {
+  assetCode: "",
+  name: "",
+  description: "",
+  accountId: null,
+  locationId: null,
+  isActive: true,
+};
+
+export default function AssetFormPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const isEdit = Boolean(id);
+
+  const { data: asset, isLoading, error } = useAssetDetail(id);
+  const { accounts, sites, isLoading: optionsLoading, error: optionsError } = useAssetFormOptions();
+  const createAsset = useCreateAsset();
+  const updateAsset = useUpdateAsset();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm<AssetFormValues>({
+    resolver: zodResolver(assetSchema),
+    defaultValues,
+  });
+
+  useEffect(() => {
+    if (asset && isEdit) {
+      reset({
+        assetCode: asset.assetCode,
+        name: asset.name,
+        description: asset.description,
+        accountId: asset.accountId,
+        locationId: asset.locationId,
+        isActive: asset.isActive,
+      });
+    }
+  }, [asset, isEdit, reset]);
+
+  const isSaving = createAsset.isPending || updateAsset.isPending;
+
+  const onSubmit = (values: AssetFormValues) => {
+    if (isEdit && id) {
+      updateAsset.mutate({ id, values });
+      return;
+    }
+    createAsset.mutate(values);
+  };
+
+  if ((isEdit && isLoading) || optionsLoading) {
+    return (
+      <Box className="flex justify-center p-10">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box className="mx-auto max-w-3xl p-4">
+      <Paper variant="outlined" className="p-6">
+        <Stack spacing={3}>
+          <Typography variant="h5">{isEdit ? "Edit Asset" : "Create Asset"}</Typography>
+
+          {Boolean(error || optionsError) && (
+            <Alert severity="error">
+              {error instanceof Error
+                ? error.message
+                : optionsError instanceof Error
+                  ? optionsError.message
+                  : "Failed to load asset"}
+            </Alert>
+          )}
+
+          <Box component="form" onSubmit={handleSubmit(onSubmit)}>
+            <Stack spacing={3}>
+              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+                <TextField
+                  label="Asset Code"
+                  required
+                  fullWidth
+                  error={Boolean(errors.assetCode)}
+                  helperText={errors.assetCode?.message}
+                  {...register("assetCode")}
+                />
+                <TextField
+                  label="Name"
+                  required
+                  fullWidth
+                  error={Boolean(errors.name)}
+                  helperText={errors.name?.message}
+                  {...register("name")}
+                />
+              </Stack>
+
+              <TextField
+                label="Description"
+                fullWidth
+                multiline
+                rows={3}
+                {...register("description")}
+              />
+
+              <Controller
+                name="accountId"
+                control={control}
+                render={({ field }) => (
+                  <FormControl fullWidth>
+                    <InputLabel>Account</InputLabel>
+                    <Select
+                      label="Account"
+                      value={field.value ?? ""}
+                      onChange={(event) => {
+                        const value = String(event.target.value);
+                        field.onChange(value === "" ? null : Number(value));
+                      }}
+                    >
+                      <MenuItem value="">
+                        <em>None</em>
+                      </MenuItem>
+                      {accounts.map((account) => (
+                        <MenuItem key={String(account.id)} value={account.id}>
+                          {account.name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+
+              <Controller
+                name="locationId"
+                control={control}
+                render={({ field }) => (
+                  <FormControl fullWidth>
+                    <InputLabel>Location</InputLabel>
+                    <Select
+                      label="Location"
+                      value={field.value ?? ""}
+                      onChange={(event) => {
+                        const value = String(event.target.value);
+                        field.onChange(value === "" ? null : Number(value));
+                      }}
+                    >
+                      <MenuItem value="">
+                        <em>None</em>
+                      </MenuItem>
+                      {sites.map((site) => (
+                        <MenuItem key={String(site.id)} value={site.id}>
+                          {site.title ? `${site.title} - ${site.name}` : site.name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+
+              <Controller
+                name="isActive"
+                control={control}
+                render={({ field }) => (
+                  <FormControlLabel
+                    control={<Switch checked={field.value} onChange={field.onChange} />}
+                    label="Active"
+                  />
+                )}
+              />
+
+              <Stack
+                direction="row"
+                spacing={2}
+                sx={{
+                  justifyContent: "flex-end",
+                }}
+              >
+                <Button variant="outlined" onClick={() => navigate("/assets")} disabled={isSaving}>
+                  Cancel
+                </Button>
+                <Button type="submit" variant="contained" disabled={isSaving}>
+                  {isSaving ? "Saving..." : isEdit ? "Update" : "Create"}
+                </Button>
+              </Stack>
+            </Stack>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/assets/edit/[id].tsx b/src/app/(protected)/assets/edit/[id].tsx
new file mode 100644
index 00000000..dba59b2a
--- /dev/null
+++ b/src/app/(protected)/assets/edit/[id].tsx
@@ -0,0 +1 @@
+export { default } from "../_components/asset-form";
diff --git a/src/app/(protected)/assets/index.tsx b/src/app/(protected)/assets/index.tsx
new file mode 100644
index 00000000..e6d6451f
--- /dev/null
+++ b/src/app/(protected)/assets/index.tsx
@@ -0,0 +1,244 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import {
+  Alert,
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TablePagination,
+  TableRow,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import type { AssetListItem } from "@/domain/assets/types/asset";
+import { useAssetsList } from "@/domain/assets/use-cases/use-assets-list";
+import { useDeleteAsset } from "@/domain/assets/use-cases/use-delete-asset";
+import { useDebounce } from "@/hooks/use-debounce";
+
+export default function AssetsListPage() {
+  const navigate = useNavigate();
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(12);
+  const [deleteTarget, setDeleteTarget] = useState<AssetListItem | null>(null);
+
+  const debouncedSearch = useDebounce(search, 300);
+  const deleteAsset = useDeleteAsset();
+
+  const listParams = useMemo(
+    () => ({
+      search: debouncedSearch,
+      page: page + 1,
+      pageSize,
+    }),
+    [debouncedSearch, page, pageSize],
+  );
+
+  const { data, isLoading, isFetching, error } = useAssetsList(listParams);
+
+  const rows = data?.items ?? [];
+  const totalCount = data?.totalCount ?? 0;
+
+  const handleDeleteConfirm = () => {
+    if (!deleteTarget) return;
+    deleteAsset.mutate(deleteTarget.id, {
+      onSuccess: () => setDeleteTarget(null),
+    });
+  };
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{
+          alignItems: { xs: "stretch", md: "center" },
+          justifyContent: "space-between",
+        }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: "baseline",
+          }}
+        >
+          <Typography variant="h5" component="h1">
+            Assets
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{
+              color: "text.secondary",
+            }}
+          >
+            {totalCount} total
+          </Typography>
+          {isFetching && !isLoading && <CircularProgress size={16} />}
+        </Stack>
+
+        <Stack
+          direction={{ xs: "column", sm: "row" }}
+          spacing={2}
+          sx={{
+            alignItems: "center",
+          }}
+        >
+          <TextField
+            size="small"
+            value={search}
+            onChange={(event) => {
+              setSearch(event.target.value);
+              setPage(0);
+            }}
+            placeholder="Search assets..."
+            className="min-w-sidebar"
+          />
+          <Button variant="contained" onClick={() => navigate("/assets/new")}>
+            + New Asset
+          </Button>
+        </Stack>
+      </Stack>
+      {Boolean(error) && (
+        <Alert severity="error">
+          {error instanceof Error ? error.message : "Failed to load assets"}
+        </Alert>
+      )}
+      <TableContainer component={Paper} variant="outlined">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell className="font-semibold">Asset Code</TableCell>
+              <TableCell className="font-semibold">Name</TableCell>
+              <TableCell className="font-semibold">Description</TableCell>
+              <TableCell className="font-semibold">Account</TableCell>
+              <TableCell className="font-semibold">Location</TableCell>
+              <TableCell className="font-semibold">Status</TableCell>
+              <TableCell align="right" className="font-semibold">
+                Actions
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={7} align="center" className="py-10">
+                  <CircularProgress size={28} />
+                </TableCell>
+              </TableRow>
+            ) : rows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={7} align="center" className="py-10">
+                  <Typography
+                    sx={{
+                      color: "text.secondary",
+                    }}
+                  >
+                    No assets found
+                  </Typography>
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((row) => (
+                <TableRow key={String(row.id)} hover>
+                  <TableCell>{row.assetCode || "—"}</TableCell>
+                  <TableCell>
+                    <Button
+                      variant="text"
+                      size="small"
+                      className="font-semibold"
+                      onClick={() => navigate(`/assets/edit/${row.id}`)}
+                    >
+                      {row.name || "—"}
+                    </Button>
+                  </TableCell>
+                  <TableCell>{row.description || "—"}</TableCell>
+                  <TableCell>{row.accountName || "—"}</TableCell>
+                  <TableCell>{row.locationName || "—"}</TableCell>
+                  <TableCell>
+                    <Chip
+                      label={row.isActive ? "Active" : "Inactive"}
+                      color={row.isActive ? "success" : "default"}
+                      size="small"
+                    />
+                  </TableCell>
+                  <TableCell align="right">
+                    <Tooltip title="Edit">
+                      <IconButton
+                        size="small"
+                        aria-label="Edit asset"
+                        onClick={() => navigate(`/assets/edit/${row.id}`)}
+                      >
+                        <EditOutlinedIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                    <Tooltip title="Delete">
+                      <IconButton
+                        size="small"
+                        aria-label="Delete asset"
+                        onClick={() => setDeleteTarget(row)}
+                      >
+                        <DeleteOutlineIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        component="div"
+        count={totalCount}
+        page={page}
+        onPageChange={(_event, nextPage) => setPage(nextPage)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(event) => {
+          setPageSize(Number(event.target.value));
+          setPage(0);
+        }}
+        rowsPerPageOptions={[12, 24, 48]}
+      />
+      <Dialog open={Boolean(deleteTarget)} onClose={() => setDeleteTarget(null)}>
+        <DialogTitle>Delete Asset</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Are you sure you want to delete &quot;{deleteTarget?.name}&quot;? This action cannot be
+            undone.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeleteTarget(null)} disabled={deleteAsset.isPending}>
+            Cancel
+          </Button>
+          <Button
+            color="error"
+            variant="contained"
+            onClick={handleDeleteConfirm}
+            disabled={deleteAsset.isPending}
+          >
+            {deleteAsset.isPending ? "Deleting..." : "Delete"}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/assets/new.tsx b/src/app/(protected)/assets/new.tsx
new file mode 100644
index 00000000..6feb5f6c
--- /dev/null
+++ b/src/app/(protected)/assets/new.tsx
@@ -0,0 +1 @@
+export { default } from "./_components/asset-form";
diff --git a/src/app/(protected)/calendar/_components/calendar-unavailable.tsx b/src/app/(protected)/calendar/_components/calendar-unavailable.tsx
new file mode 100644
index 00000000..885d6058
--- /dev/null
+++ b/src/app/(protected)/calendar/_components/calendar-unavailable.tsx
@@ -0,0 +1,27 @@
+import { Alert, Box, Typography } from "@mui/material";
+
+export function CalendarUnavailablePanel() {
+  return (
+    <Box className="mx-auto max-w-3xl">
+      <Alert severity="warning" className="mb-4">
+        Calendário indisponível — a API de calendário ainda não está implementada no backend.
+      </Alert>
+      <Typography
+        variant="body2"
+        sx={{
+          color: "text.secondary",
+        }}
+      >
+        As rotas permanecem reservadas para quando o CalendarController for disponibilizado.
+      </Typography>
+    </Box>
+  );
+}
+
+export default function CalendarUnavailablePage() {
+  return (
+    <Box className="p-4">
+      <CalendarUnavailablePanel />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/calendar/_components/event-form.tsx b/src/app/(protected)/calendar/_components/event-form.tsx
new file mode 100644
index 00000000..01134222
--- /dev/null
+++ b/src/app/(protected)/calendar/_components/event-form.tsx
@@ -0,0 +1,289 @@
+import { useEffect } from "react";
+import { Controller, useForm, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate, useParams, useSearchParams } from "react-router";
+import {
+  Alert,
+  Box,
+  Button,
+  Checkbox,
+  CircularProgress,
+  FormControl,
+  FormControlLabel,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import {
+  CALENDAR_REMINDER_OPTIONS,
+  CALENDAR_TIME_OPTIONS,
+} from "@/components/common/calendar/calendar-utils";
+import {
+  calendarEventSchema,
+  type CalendarEventFormValues,
+} from "@/domain/calendar/schemas/calendar-event-schema";
+import { useCalendarEventDetail } from "@/domain/calendar/use-cases/use-calendar-event-detail";
+import { useCreateCalendarEvent } from "@/domain/calendar/use-cases/use-create-calendar-event";
+import { useUpdateCalendarEvent } from "@/domain/calendar/use-cases/use-update-calendar-event";
+import { toDateInputValue } from "@/lib/time-utils";
+
+const COLORS = ["primary", "success", "info", "warning", "danger"] as const;
+
+const defaultValues: CalendarEventFormValues = {
+  title: "",
+  description: "",
+  location: "",
+  recordId: null,
+  recordName: "",
+  recordTargetType: "",
+  reminderMinutes: 15,
+  eventColor: "primary",
+  startDate: new Date().toISOString().split("T")[0],
+  startTime: "08:00 AM",
+  endDate: new Date().toISOString().split("T")[0],
+  endTime: "08:30 AM",
+  allDay: false,
+};
+
+export default function EventFormPage() {
+  const { id } = useParams();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const isEdit = Boolean(id);
+
+  const { data: event, isLoading, error } = useCalendarEventDetail(id);
+  const createEvent = useCreateCalendarEvent();
+  const updateEvent = useUpdateCalendarEvent();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm<CalendarEventFormValues>({
+    resolver: zodResolver(calendarEventSchema),
+    defaultValues: {
+      ...defaultValues,
+      startDate: searchParams.get("date") ?? defaultValues.startDate,
+      endDate: searchParams.get("date") ?? defaultValues.endDate,
+    },
+  });
+
+  const allDay = useWatch({ control, name: "allDay" });
+
+  useEffect(() => {
+    if (event && isEdit) {
+      reset({
+        title: event.title,
+        description: event.description,
+        location: event.location,
+        recordId: event.recordId,
+        recordName: event.recordName,
+        recordTargetType: event.recordTargetType,
+        reminderMinutes: event.reminderMinutes,
+        eventColor: event.eventColor,
+        startDate: toDateInputValue(event.startDate),
+        startTime: event.startTime || "08:00 AM",
+        endDate: toDateInputValue(event.endDate),
+        endTime: event.endTime || "08:30 AM",
+        allDay: event.allDay,
+      });
+    }
+  }, [event, isEdit, reset]);
+
+  const isSaving = createEvent.isPending || updateEvent.isPending;
+
+  const onSubmit = (values: CalendarEventFormValues) => {
+    if (isEdit && id) {
+      updateEvent.mutate({ id, values });
+      return;
+    }
+    createEvent.mutate(values);
+  };
+
+  if (isEdit && isLoading) {
+    return (
+      <Box className="flex justify-center p-10">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box className="mx-auto max-w-3xl p-4">
+      <Paper variant="outlined" className="p-6">
+        <Stack spacing={3}>
+          <Typography variant="h5">{isEdit ? "Edit Event" : "Create Event"}</Typography>
+
+          {Boolean(error) && <Alert severity="error">Failed to load event</Alert>}
+
+          <Box component="form" onSubmit={handleSubmit(onSubmit)}>
+            <Stack spacing={3}>
+              <TextField
+                label="Title"
+                required
+                fullWidth
+                error={Boolean(errors.title)}
+                helperText={errors.title?.message}
+                {...register("title")}
+                slotProps={{
+                  htmlInput: { maxLength: 100 },
+                }}
+              />
+
+              <TextField
+                label="Description"
+                fullWidth
+                multiline
+                rows={3}
+                {...register("description")}
+              />
+
+              <TextField
+                label="Location"
+                fullWidth
+                {...register("location")}
+                slotProps={{
+                  htmlInput: { maxLength: 150 },
+                }}
+              />
+
+              <Controller
+                name="reminderMinutes"
+                control={control}
+                render={({ field }) => (
+                  <FormControl fullWidth>
+                    <InputLabel>Remind Attendees</InputLabel>
+                    <Select
+                      label="Remind Attendees"
+                      value={field.value}
+                      onChange={(event) => field.onChange(Number(event.target.value))}
+                    >
+                      {CALENDAR_REMINDER_OPTIONS.map((option) => (
+                        <MenuItem key={option.value} value={option.value}>
+                          {option.label}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+
+              <Controller
+                name="eventColor"
+                control={control}
+                render={({ field }) => (
+                  <FormControl fullWidth>
+                    <InputLabel>Calendar Color</InputLabel>
+                    <Select label="Calendar Color" value={field.value} onChange={field.onChange}>
+                      {COLORS.map((color) => (
+                        <MenuItem key={color} value={color}>
+                          {color}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+
+              {!allDay && (
+                <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+                  <TextField
+                    label="Start Date"
+                    type="date"
+                    fullWidth
+                    slotProps={{ inputLabel: { shrink: true } }}
+                    error={Boolean(errors.startDate)}
+                    helperText={errors.startDate?.message}
+                    {...register("startDate")}
+                  />
+                  <Controller
+                    name="startTime"
+                    control={control}
+                    render={({ field }) => (
+                      <FormControl fullWidth>
+                        <InputLabel>Start Time</InputLabel>
+                        <Select label="Start Time" value={field.value} onChange={field.onChange}>
+                          {CALENDAR_TIME_OPTIONS.map((time) => (
+                            <MenuItem key={time} value={time}>
+                              {time}
+                            </MenuItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                </Stack>
+              )}
+
+              {!allDay && (
+                <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+                  <TextField
+                    label="End Date"
+                    type="date"
+                    fullWidth
+                    slotProps={{ inputLabel: { shrink: true } }}
+                    error={Boolean(errors.endDate)}
+                    helperText={errors.endDate?.message}
+                    {...register("endDate")}
+                  />
+                  <Controller
+                    name="endTime"
+                    control={control}
+                    render={({ field }) => (
+                      <FormControl fullWidth>
+                        <InputLabel>End Time</InputLabel>
+                        <Select label="End Time" value={field.value} onChange={field.onChange}>
+                          {CALENDAR_TIME_OPTIONS.map((time) => (
+                            <MenuItem key={time} value={time}>
+                              {time}
+                            </MenuItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                </Stack>
+              )}
+
+              <Controller
+                name="allDay"
+                control={control}
+                render={({ field }) => (
+                  <FormControlLabel
+                    control={<Checkbox checked={field.value} onChange={field.onChange} />}
+                    label="All day event"
+                  />
+                )}
+              />
+
+              <Stack
+                direction="row"
+                spacing={2}
+                sx={{
+                  justifyContent: "flex-end",
+                }}
+              >
+                <Button
+                  variant="outlined"
+                  onClick={() => navigate("/calendar")}
+                  disabled={isSaving}
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" variant="contained" disabled={isSaving}>
+                  {isSaving ? "Saving..." : isEdit ? "Update" : "Create"}
+                </Button>
+              </Stack>
+            </Stack>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/calendar/_layout.tsx b/src/app/(protected)/calendar/_layout.tsx
new file mode 100644
index 00000000..7527ef71
--- /dev/null
+++ b/src/app/(protected)/calendar/_layout.tsx
@@ -0,0 +1,13 @@
+import { Outlet } from "react-router";
+import { Alert, Box } from "@mui/material";
+
+export default function CalendarLayout() {
+  return (
+    <Box className="flex flex-col gap-4">
+      <Alert severity="warning" className="mx-4 mt-4">
+        Calendário indisponível — a API de calendário ainda não está implementada no backend.
+      </Alert>
+      <Outlet />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/calendar/edit/[id].tsx b/src/app/(protected)/calendar/edit/[id].tsx
new file mode 100644
index 00000000..98c47fcd
--- /dev/null
+++ b/src/app/(protected)/calendar/edit/[id].tsx
@@ -0,0 +1 @@
+export { default } from "../_components/calendar-unavailable";
diff --git a/src/app/(protected)/calendar/index.tsx b/src/app/(protected)/calendar/index.tsx
new file mode 100644
index 00000000..be1a4079
--- /dev/null
+++ b/src/app/(protected)/calendar/index.tsx
@@ -0,0 +1 @@
+export { default } from "./_components/calendar-unavailable";
diff --git a/src/app/(protected)/calendar/new.tsx b/src/app/(protected)/calendar/new.tsx
new file mode 100644
index 00000000..be1a4079
--- /dev/null
+++ b/src/app/(protected)/calendar/new.tsx
@@ -0,0 +1 @@
+export { default } from "./_components/calendar-unavailable";
diff --git a/src/app/(protected)/contacts/_components/contact-form.tsx b/src/app/(protected)/contacts/_components/contact-form.tsx
new file mode 100644
index 00000000..401265d6
--- /dev/null
+++ b/src/app/(protected)/contacts/_components/contact-form.tsx
@@ -0,0 +1,265 @@
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate, useParams } from "react-router";
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { contactSchema, type ContactFormValues } from "@/domain/contacts/schemas/contact-schema";
+import { useContactDetail } from "@/domain/contacts/use-cases/use-contact-detail";
+import { useCreateContact } from "@/domain/contacts/use-cases/use-create-contact";
+import { useUpdateContact } from "@/domain/contacts/use-cases/use-update-contact";
+
+const defaultValues: ContactFormValues = {
+  firstName: "",
+  middleName: "",
+  lastName: "",
+  title: "",
+  contactType: "",
+  gender: "",
+  dateOfBirth: "",
+  territory: "-1",
+  owner: "1",
+  privacySetting: "PublicReadWrite",
+  about: "",
+  tags: "",
+  street: "",
+  streetLineTwo: "",
+  city: "",
+  zip: "",
+  country: "US",
+  state: "",
+  county: "",
+  timeZone: "Eastern Standard Time",
+  smsAddress: "",
+  website: "",
+  facebookUrl: "",
+  linkedInUrl: "",
+  twitterUrl: "",
+};
+
+const CONTACT_TYPES = ["Corporate", "Store Mgr", "Facilities", "Area Leader"];
+const US_STATES = ["AL", "AK", "AZ", "CA", "FL", "NY", "TX"];
+
+export default function ContactFormPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const isEdit = Boolean(id);
+
+  const { data: contact, isLoading, error } = useContactDetail(id);
+  const createContact = useCreateContact();
+  const updateContact = useUpdateContact();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<ContactFormValues>({
+    resolver: zodResolver(contactSchema),
+    defaultValues,
+  });
+
+  useEffect(() => {
+    if (contact && isEdit) {
+      reset({
+        firstName: contact.firstName,
+        middleName: contact.middleName,
+        lastName: contact.lastName,
+        title: contact.title,
+        contactType: contact.contactType,
+        gender: contact.gender,
+        dateOfBirth: contact.dateOfBirth,
+        territory: contact.territory || "-1",
+        owner: contact.owner || "1",
+        privacySetting: contact.privacySetting,
+        about: contact.about,
+        tags: contact.tags,
+        street: contact.street,
+        streetLineTwo: contact.streetLineTwo,
+        city: contact.city,
+        zip: contact.zip,
+        country: contact.country,
+        state: contact.state,
+        county: contact.county,
+        timeZone: contact.timeZone,
+        smsAddress: contact.smsAddress,
+        website: contact.website,
+        facebookUrl: contact.facebookUrl,
+        linkedInUrl: contact.linkedInUrl,
+        twitterUrl: contact.twitterUrl,
+      });
+    }
+  }, [contact, isEdit, reset]);
+
+  const isSaving = createContact.isPending || updateContact.isPending;
+
+  const onSubmit = (values: ContactFormValues) => {
+    if (isEdit && id) {
+      updateContact.mutate({ id, values });
+      return;
+    }
+    createContact.mutate(values);
+  };
+
+  if (isEdit && isLoading) {
+    return (
+      <Box className="flex justify-center p-10">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box className="mx-auto max-w-4xl p-4">
+      <Paper variant="outlined" className="p-6">
+        <Stack spacing={4}>
+          <Typography variant="h5">{isEdit ? "Edit Contact" : "Create Contact"}</Typography>
+
+          {Boolean(error) && (
+            <Alert severity="error">
+              {error instanceof Error ? error.message : "Failed to load contact"}
+            </Alert>
+          )}
+
+          <Box component="form" onSubmit={handleSubmit(onSubmit)}>
+            <Stack spacing={3}>
+              <Typography variant="subtitle2" className="font-semibold uppercase">
+                General Details
+              </Typography>
+
+              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+                <TextField
+                  label="First Name"
+                  required
+                  fullWidth
+                  error={Boolean(errors.firstName)}
+                  helperText={errors.firstName?.message}
+                  {...register("firstName")}
+                />
+                <TextField label="Middle Name" fullWidth {...register("middleName")} />
+                <TextField
+                  label="Last Name"
+                  required
+                  fullWidth
+                  error={Boolean(errors.lastName)}
+                  helperText={errors.lastName?.message}
+                  {...register("lastName")}
+                />
+              </Stack>
+
+              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+                <TextField label="Title" fullWidth {...register("title")} />
+                <FormControl fullWidth>
+                  <InputLabel>Contact Type</InputLabel>
+                  <Select label="Contact Type" defaultValue="" {...register("contactType")}>
+                    <MenuItem value="">Select type</MenuItem>
+                    {CONTACT_TYPES.map((type) => (
+                      <MenuItem key={type} value={type}>
+                        {type}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              </Stack>
+
+              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+                <FormControl fullWidth>
+                  <InputLabel>Territory</InputLabel>
+                  <Select label="Territory" required defaultValue="-1" {...register("territory")}>
+                    <MenuItem value="">Select territory</MenuItem>
+                    <MenuItem value="-1">No Territory</MenuItem>
+                  </Select>
+                </FormControl>
+                <FormControl fullWidth>
+                  <InputLabel>Owner</InputLabel>
+                  <Select label="Owner" required defaultValue="1" {...register("owner")}>
+                    <MenuItem value="">Select owner</MenuItem>
+                    <MenuItem value="1">Employee 1</MenuItem>
+                    <MenuItem value="2">Employee 2</MenuItem>
+                  </Select>
+                </FormControl>
+                <FormControl fullWidth>
+                  <InputLabel>Privacy</InputLabel>
+                  <Select
+                    label="Privacy"
+                    defaultValue="PublicReadWrite"
+                    {...register("privacySetting")}
+                  >
+                    <MenuItem value="PublicReadWrite">Public read/write</MenuItem>
+                    <MenuItem value="PublicReadOnly">Public read only</MenuItem>
+                    <MenuItem value="Private">Private</MenuItem>
+                  </Select>
+                </FormControl>
+              </Stack>
+
+              <TextField label="About" fullWidth {...register("about")} />
+
+              <Typography variant="subtitle2" className="font-semibold uppercase">
+                Address
+              </Typography>
+              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+                <TextField label="Address 1" fullWidth {...register("street")} />
+                <TextField label="Address 2" fullWidth {...register("streetLineTwo")} />
+              </Stack>
+              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+                <TextField label="City" fullWidth {...register("city")} />
+                <TextField label="Zip" fullWidth {...register("zip")} />
+              </Stack>
+              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+                <FormControl fullWidth>
+                  <InputLabel>State</InputLabel>
+                  <Select label="State" defaultValue="" {...register("state")}>
+                    <MenuItem value="">Select state</MenuItem>
+                    {US_STATES.map((st) => (
+                      <MenuItem key={st} value={st}>
+                        {st}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+                <TextField label="Country" fullWidth {...register("country")} />
+              </Stack>
+
+              <Typography variant="subtitle2" className="font-semibold uppercase">
+                Additional
+              </Typography>
+              <TextField label="Website" fullWidth placeholder="http://" {...register("website")} />
+              <TextField label="SMS Address" fullWidth {...register("smsAddress")} />
+
+              <Stack
+                direction="row"
+                spacing={2}
+                sx={{
+                  justifyContent: "flex-end",
+                }}
+              >
+                <Button
+                  variant="outlined"
+                  onClick={() => navigate("/contacts")}
+                  disabled={isSaving}
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" variant="contained" disabled={isSaving}>
+                  {isSaving ? "Saving..." : isEdit ? "Update" : "Create"}
+                </Button>
+              </Stack>
+            </Stack>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/contacts/edit/[id].tsx b/src/app/(protected)/contacts/edit/[id].tsx
new file mode 100644
index 00000000..7a4bf5ac
--- /dev/null
+++ b/src/app/(protected)/contacts/edit/[id].tsx
@@ -0,0 +1 @@
+export { default } from "../_components/contact-form";
diff --git a/src/app/(protected)/contacts/index.tsx b/src/app/(protected)/contacts/index.tsx
new file mode 100644
index 00000000..e910c8f4
--- /dev/null
+++ b/src/app/(protected)/contacts/index.tsx
@@ -0,0 +1,221 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TablePagination,
+  TableRow,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import type { ContactListItem } from "@/domain/contacts/types/contact";
+import { useContactsList } from "@/domain/contacts/use-cases/use-contacts-list";
+import { useDeleteContact } from "@/domain/contacts/use-cases/use-delete-contact";
+import { useDebounce } from "@/hooks/use-debounce";
+
+export default function ContactsListPage() {
+  const navigate = useNavigate();
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(12);
+  const [deleteTarget, setDeleteTarget] = useState<ContactListItem | null>(null);
+
+  const debouncedSearch = useDebounce(search, 300);
+  const deleteContact = useDeleteContact();
+
+  const listParams = useMemo(
+    () => ({ search: debouncedSearch, page: page + 1, pageSize }),
+    [debouncedSearch, page, pageSize],
+  );
+
+  const { data, isLoading, isFetching, error } = useContactsList(listParams);
+  const rows = data?.items ?? [];
+  const totalCount = data?.totalCount ?? 0;
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{
+          alignItems: { xs: "stretch", md: "center" },
+          justifyContent: "space-between",
+        }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: "baseline",
+          }}
+        >
+          <Typography variant="h5" component="h1">
+            Contacts
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{
+              color: "text.secondary",
+            }}
+          >
+            {totalCount} total
+          </Typography>
+          {isFetching && !isLoading && <CircularProgress size={16} />}
+        </Stack>
+
+        <Stack
+          direction={{ xs: "column", sm: "row" }}
+          spacing={2}
+          sx={{
+            alignItems: "center",
+          }}
+        >
+          <TextField
+            size="small"
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(0);
+            }}
+            placeholder="Search contacts..."
+            className="min-w-sidebar"
+          />
+          <Button variant="contained" onClick={() => navigate("/contacts/new")}>
+            + New Contact
+          </Button>
+        </Stack>
+      </Stack>
+      {Boolean(error) && (
+        <Alert severity="error">
+          {error instanceof Error ? error.message : "Failed to load contacts"}
+        </Alert>
+      )}
+      <TableContainer component={Paper} variant="outlined">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell className="font-semibold">Name</TableCell>
+              <TableCell className="font-semibold">Account</TableCell>
+              <TableCell className="font-semibold">Title</TableCell>
+              <TableCell className="font-semibold">Email</TableCell>
+              <TableCell className="font-semibold">Phone</TableCell>
+              <TableCell className="font-semibold">Owner</TableCell>
+              <TableCell align="right" className="font-semibold">
+                Actions
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={7} align="center" className="py-10">
+                  <CircularProgress size={28} />
+                </TableCell>
+              </TableRow>
+            ) : rows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={7} align="center" className="py-10">
+                  <Typography
+                    sx={{
+                      color: "text.secondary",
+                    }}
+                  >
+                    No contacts found
+                  </Typography>
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((row) => (
+                <TableRow key={String(row.id)} hover>
+                  <TableCell>
+                    <Button
+                      variant="text"
+                      size="small"
+                      className="font-semibold"
+                      onClick={() => navigate(`/contacts/edit/${row.id}`)}
+                    >
+                      {row.name || "—"}
+                    </Button>
+                  </TableCell>
+                  <TableCell>{row.account || "—"}</TableCell>
+                  <TableCell>{row.title || "—"}</TableCell>
+                  <TableCell>{row.email || "—"}</TableCell>
+                  <TableCell>{row.phoneNumber || "—"}</TableCell>
+                  <TableCell>{row.owner || "—"}</TableCell>
+                  <TableCell align="right">
+                    <Tooltip title="Edit">
+                      <IconButton size="small" onClick={() => navigate(`/contacts/edit/${row.id}`)}>
+                        <EditOutlinedIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                    <Tooltip title="Delete">
+                      <IconButton size="small" onClick={() => setDeleteTarget(row)}>
+                        <DeleteOutlineIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        component="div"
+        count={totalCount}
+        page={page}
+        onPageChange={(_e, nextPage) => setPage(nextPage)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(e) => {
+          setPageSize(Number(e.target.value));
+          setPage(0);
+        }}
+        rowsPerPageOptions={[12, 24, 48]}
+      />
+      <Dialog open={Boolean(deleteTarget)} onClose={() => setDeleteTarget(null)}>
+        <DialogTitle>Delete Contact</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Are you sure you want to delete &quot;{deleteTarget?.name}&quot;?
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeleteTarget(null)} disabled={deleteContact.isPending}>
+            Cancel
+          </Button>
+          <Button
+            color="error"
+            variant="contained"
+            disabled={deleteContact.isPending}
+            onClick={() => {
+              if (!deleteTarget) return;
+              deleteContact.mutate(deleteTarget.id, {
+                onSuccess: () => setDeleteTarget(null),
+              });
+            }}
+          >
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/contacts/new.tsx b/src/app/(protected)/contacts/new.tsx
new file mode 100644
index 00000000..0d47fdbc
--- /dev/null
+++ b/src/app/(protected)/contacts/new.tsx
@@ -0,0 +1 @@
+export { default } from "./_components/contact-form";
diff --git a/src/app/(protected)/dashboard/_components/dashboard-bar-list.tsx b/src/app/(protected)/dashboard/_components/dashboard-bar-list.tsx
new file mode 100644
index 00000000..f449a957
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dashboard-bar-list.tsx
@@ -0,0 +1,86 @@
+import { Box, ButtonBase } from "@mui/material";
+import { Text } from "@/components/ui/text";
+
+export interface DashboardBarListRow {
+  id: string;
+  label: string;
+  count: number;
+}
+
+interface DashboardBarListProps {
+  rows: DashboardBarListRow[];
+  onSelectRow?: (row: DashboardBarListRow) => void;
+  isSelectable?: (row: DashboardBarListRow) => boolean;
+  ariaLabel: string;
+}
+
+function percentOf(count: number, max: number): number {
+  if (max <= 0 || count <= 0) {
+    return 0;
+  }
+
+  return Math.round((count / max) * 100);
+}
+
+function BarListRow({ row, width }: { row: DashboardBarListRow; width: number }) {
+  return (
+    <Box className="flex w-full flex-col gap-1 py-1.5">
+      <Box className="flex items-baseline justify-between gap-2">
+        <Text variant="description" className="truncate">
+          {row.label}
+        </Text>
+        <Text variant="description" tone="muted">
+          {row.count.toLocaleString()}
+        </Text>
+      </Box>
+      <Box className="h-2 w-full overflow-hidden rounded-full" sx={{ bgcolor: "action.hover" }}>
+        {width > 0 && (
+          <Box
+            data-testid="dashboard-bar-mark"
+            className="h-full rounded-full"
+            sx={{ width: `${width}%`, bgcolor: "primary.main" }}
+          />
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export function DashboardBarList({
+  rows,
+  onSelectRow,
+  isSelectable,
+  ariaLabel,
+}: DashboardBarListProps) {
+  const max = Math.max(...rows.map((row) => row.count), 0);
+
+  return (
+    <Box aria-label={ariaLabel} className="flex flex-col">
+      {rows.map((row) => {
+        const width = percentOf(row.count, max);
+        const selectable = Boolean(onSelectRow) && row.count > 0 && (isSelectable?.(row) ?? true);
+
+        return selectable ? (
+          <ButtonBase
+            key={row.id}
+            onClick={() => onSelectRow?.(row)}
+            sx={{
+              width: "100%",
+              textAlign: "left",
+              borderRadius: 1,
+              px: 1,
+              mx: -1,
+              cursor: "pointer",
+            }}
+          >
+            <BarListRow row={row} width={width} />
+          </ButtonBase>
+        ) : (
+          <Box key={row.id} sx={{ px: 1, mx: -1 }}>
+            <BarListRow row={row} width={width} />
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/dashboard-card.tsx b/src/app/(protected)/dashboard/_components/dashboard-card.tsx
new file mode 100644
index 00000000..46938810
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dashboard-card.tsx
@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import { Box, CircularProgress, Paper } from "@mui/material";
+import { QueryErrorPanel } from "@/components/ui/query-error-panel";
+import { Text } from "@/components/ui/text";
+
+interface DashboardCardProps {
+  title: string;
+  /** Optional scope caption shown beside the title (e.g. SH-349's all-time note). */
+  caption?: string;
+  isLoading?: boolean;
+  error?: unknown;
+  isEmpty: boolean;
+  emptyMessage: string;
+  children: ReactNode;
+}
+
+export function DashboardCard({
+  title,
+  caption,
+  isLoading = false,
+  error,
+  isEmpty,
+  emptyMessage,
+  children,
+}: DashboardCardProps) {
+  return (
+    <Paper variant="outlined" className="flex flex-col overflow-hidden">
+      <Box className="flex items-baseline justify-between gap-2 border-b border-border px-4 py-3">
+        <Text variant="heading">{title}</Text>
+        {!!caption && (
+          <Text variant="description" tone="muted">
+            {caption}
+          </Text>
+        )}
+      </Box>
+      {isLoading && (
+        <Box className="flex items-center justify-center p-8">
+          <CircularProgress size={24} />
+        </Box>
+      )}
+      {!isLoading && Boolean(error) && <QueryErrorPanel compact className="m-4" />}
+      {!isLoading && !error && isEmpty && (
+        <Box className="p-6">
+          <Text variant="description" tone="muted">
+            {emptyMessage}
+          </Text>
+        </Box>
+      )}
+      {!isLoading && !error && !isEmpty && <Box className="p-4">{children}</Box>}
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/dashboard-header-actions.tsx b/src/app/(protected)/dashboard/_components/dashboard-header-actions.tsx
new file mode 100644
index 00000000..e410c72b
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dashboard-header-actions.tsx
@@ -0,0 +1,67 @@
+import { Box, Button, CircularProgress } from "@mui/material";
+import { Users } from "lucide-react";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import { DashboardRangeToggle } from "./dashboard-range-toggle";
+import { DashboardScopePicker } from "./dashboard-scope-picker";
+import type { DashboardScope } from "./dashboard-scope";
+
+interface DashboardHeaderActionsProps {
+  isRefreshing: boolean;
+  showReset: boolean;
+  onResetFilters: () => void;
+  canViewAll: boolean;
+  scope: DashboardScope;
+  onScopeChange: (scope: DashboardScope) => void;
+  dispatcherUsers: WorkOrderUser[];
+  dispatcherUsersLoading: boolean;
+  currentUserId: string | number | undefined;
+  range: DashboardRangeKey;
+  onRangeChange: (range: DashboardRangeKey) => void;
+}
+
+export function DashboardHeaderActions({
+  isRefreshing,
+  showReset,
+  onResetFilters,
+  canViewAll,
+  scope,
+  onScopeChange,
+  dispatcherUsers,
+  dispatcherUsersLoading,
+  currentUserId,
+  range,
+  onRangeChange,
+}: DashboardHeaderActionsProps) {
+  return (
+    <Box className="flex items-center gap-2">
+      {isRefreshing && <CircularProgress size={16} />}
+      {showReset && (
+        <Button size="small" onClick={onResetFilters}>
+          Reset filters
+        </Button>
+      )}
+      {canViewAll ? (
+        <DashboardScopePicker
+          scope={scope}
+          onChange={onScopeChange}
+          users={dispatcherUsers}
+          usersLoading={dispatcherUsersLoading}
+          currentUserId={currentUserId}
+        />
+      ) : (
+        <Box
+          className="flex shrink-0 items-center gap-1.5 whitespace-nowrap"
+          style={{ fontSize: 13, fontWeight: 500, color: "var(--muted-foreground)" }}
+        >
+          <Users size={13} aria-hidden style={{ color: "var(--muted-foreground)" }} />
+          <Text variant="description" tone="muted">
+            My WOs
+          </Text>
+        </Box>
+      )}
+      <DashboardRangeToggle value={range} onChange={onRangeChange} />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/dashboard-kpi-card.tsx b/src/app/(protected)/dashboard/_components/dashboard-kpi-card.tsx
new file mode 100644
index 00000000..69d29c58
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dashboard-kpi-card.tsx
@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+import { Box, ButtonBase, Paper } from "@mui/material";
+import { Text } from "@/components/ui/text";
+
+type KpiTone = "success" | "primary" | "info" | "warning";
+
+const toneColor: Record<KpiTone, string> = {
+  success: "success.main",
+  primary: "primary.main",
+  info: "info.main",
+  warning: "warning.main",
+};
+
+interface DashboardKpiCardProps {
+  title: string;
+  value?: number;
+  icon: ReactNode;
+  tone: KpiTone;
+  loading?: boolean;
+  active?: boolean;
+  onSelect?: () => void;
+}
+
+export function DashboardKpiCard({
+  title,
+  value,
+  icon,
+  tone,
+  loading = false,
+  active = false,
+  onSelect,
+}: DashboardKpiCardProps) {
+  const color = toneColor[tone];
+  const content = (
+    <Box className="flex w-full items-center gap-4 p-4" sx={{ textAlign: "left" }}>
+      <Box
+        className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full"
+        sx={{ bgcolor: `${color}22`, color }}
+      >
+        {icon}
+      </Box>
+      <Box className="flex min-w-0 flex-col gap-0.5">
+        <Text variant="label" tone="muted">
+          {title}
+        </Text>
+        <Text variant="label" sx={{ fontSize: 28, fontWeight: 700, lineHeight: 1.2 }}>
+          {loading ? "…" : (value ?? 0).toLocaleString()}
+        </Text>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Paper
+      variant="outlined"
+      className="min-h-[104px]"
+      sx={{ borderLeftWidth: 4, borderLeftStyle: "solid", borderLeftColor: color }}
+    >
+      {active && Boolean(onSelect) ? (
+        <ButtonBase sx={{ width: "100%", cursor: "pointer" }} onClick={onSelect}>
+          {content}
+        </ButtonBase>
+      ) : (
+        content
+      )}
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/dashboard-range-toggle.tsx b/src/app/(protected)/dashboard/_components/dashboard-range-toggle.tsx
new file mode 100644
index 00000000..b97cb672
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dashboard-range-toggle.tsx
@@ -0,0 +1,42 @@
+import { ToggleButton, ToggleButtonGroup } from "@mui/material";
+import { DASHBOARD_RANGES, type DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+
+const RANGE_LABELS: Record<DashboardRangeKey, string> = {
+  "this-week": "This week",
+  "last-3-months": "Last 3 months",
+  today: "Today",
+  "all-time": "All time",
+};
+
+interface DashboardRangeToggleProps {
+  value: DashboardRangeKey;
+  onChange: (value: DashboardRangeKey) => void;
+  disabled?: boolean;
+}
+
+export function DashboardRangeToggle({
+  value,
+  onChange,
+  disabled = false,
+}: DashboardRangeToggleProps) {
+  return (
+    <ToggleButtonGroup
+      exclusive
+      size="small"
+      value={value}
+      disabled={disabled}
+      aria-label="Dashboard date range"
+      onChange={(_, next: DashboardRangeKey | null) => {
+        if (next) {
+          onChange(next);
+        }
+      }}
+    >
+      {DASHBOARD_RANGES.map((range) => (
+        <ToggleButton key={range} value={range}>
+          {RANGE_LABELS[range]}
+        </ToggleButton>
+      ))}
+    </ToggleButtonGroup>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/dashboard-scope-picker.tsx b/src/app/(protected)/dashboard/_components/dashboard-scope-picker.tsx
new file mode 100644
index 00000000..66c63dae
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dashboard-scope-picker.tsx
@@ -0,0 +1,118 @@
+import { useMemo } from "react";
+import { Popover, Skeleton } from "@mui/material";
+import { ChevronDown, Users } from "lucide-react";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { CheckboxMenuItem } from "@/components/ui/checkbox-menu-item";
+import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
+import { useMenuAnchor } from "@/hooks/use-menu-anchor";
+import type { DashboardScope } from "./dashboard-scope";
+
+type DashboardScopePickerProps = {
+  scope: DashboardScope;
+  onChange: (scope: DashboardScope) => void;
+  users: WorkOrderUser[];
+  usersLoading?: boolean;
+  currentUserId?: string | number;
+};
+
+export function DashboardScopePicker({
+  scope,
+  onChange,
+  users,
+  usersLoading = false,
+  currentUserId,
+}: DashboardScopePickerProps) {
+  const { anchorEl, open, setAnchor, close } = useMenuAnchor();
+  const meId = currentUserId != null && currentUserId !== "" ? String(currentUserId) : null;
+
+  const dispatchers = useMemo(
+    () => [...users].sort((a, b) => a.name.localeCompare(b.name)),
+    [users],
+  );
+
+  const label = useMemo(() => {
+    if (scope.mode === "all") return "All dispatchers";
+    if (scope.mode === "mine") return "My WOs";
+    return dispatchers.find((user) => String(user.id) === scope.id)?.name ?? "Dispatcher";
+  }, [scope, dispatchers]);
+
+  const select = (next: DashboardScope) => {
+    onChange(next);
+    close();
+  };
+
+  if (usersLoading && users.length === 0) {
+    return (
+      <Skeleton
+        variant="rounded"
+        width={140}
+        height={18}
+        animation="wave"
+        aria-label="Loading dispatchers"
+      />
+    );
+  }
+
+  return (
+    <>
+      <MenuAnchorButton
+        onAnchor={setAnchor}
+        open={open}
+        className="flex w-auto shrink-0 items-center gap-1.5 whitespace-nowrap transition-colors"
+        style={{ fontSize: 13, fontWeight: 500, color: "var(--muted-foreground)" }}
+        aria-haspopup="listbox"
+      >
+        <Users size={13} aria-hidden style={{ color: "var(--muted-foreground)" }} />
+        {label}
+        <ChevronDown size={13} aria-hidden style={{ color: "var(--muted-foreground)" }} />
+      </MenuAnchorButton>
+
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={close}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
+        slotProps={{
+          paper: {
+            className: "mt-1 w-[220px] rounded-lg border border-border p-1.5 shadow-md",
+          },
+        }}
+      >
+        <CheckboxMenuItem
+          checked={scope.mode === "all"}
+          label="All dispatchers"
+          onClick={() => select({ mode: "all" })}
+        />
+
+        {meId != null && (
+          <CheckboxMenuItem
+            checked={scope.mode === "mine"}
+            label="My WOs only"
+            labelClassName="font-medium text-primary"
+            className="mb-1 pb-2"
+            style={{ borderBottom: "1px solid var(--color-border)" }}
+            onClick={() => select({ mode: "mine" })}
+          />
+        )}
+
+        {dispatchers.map((user) => {
+          const id = String(user.id);
+          return (
+            <CheckboxMenuItem
+              key={id}
+              checked={scope.mode === "individual" && scope.id === id}
+              label={user.name}
+              right={
+                meId === id ? (
+                  <span className="text-[10px] text-muted-foreground">me</span>
+                ) : undefined
+              }
+              onClick={() => select({ mode: "individual", id })}
+            />
+          );
+        })}
+      </Popover>
+    </>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/dashboard-scope.ts b/src/app/(protected)/dashboard/_components/dashboard-scope.ts
new file mode 100644
index 00000000..62e6e7c8
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dashboard-scope.ts
@@ -0,0 +1,21 @@
+/**
+ * SH-336 dispatcher-scope selection. Single-select — the Dashboard scopes to at
+ * most one dispatcher at a time (All company / My WOs / one individual), unlike
+ * the board's multi-select dispatcher filter.
+ */
+export type DashboardScope =
+  { mode: "all" } | { mode: "mine" } | { mode: "individual"; id: string };
+
+export const DASHBOARD_SCOPE_ALL: DashboardScope = { mode: "all" };
+
+/** Resolves the scope to the `dispatcherId` query param, or null for company-wide. */
+export function scopeDispatcherId(
+  scope: DashboardScope,
+  currentUserId: string | number | undefined,
+): string | null {
+  if (scope.mode === "all") return null;
+  if (scope.mode === "mine") {
+    return currentUserId != null && currentUserId !== "" ? String(currentUserId) : null;
+  }
+  return scope.id || null;
+}
diff --git a/src/app/(protected)/dashboard/_components/dashboard-trend-card.tsx b/src/app/(protected)/dashboard/_components/dashboard-trend-card.tsx
new file mode 100644
index 00000000..6b273323
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dashboard-trend-card.tsx
@@ -0,0 +1,119 @@
+import { useMemo, useState } from "react";
+import { Box, IconButton } from "@mui/material";
+import ArrowBackOutlinedIcon from "@mui/icons-material/ArrowBackOutlined";
+import ArrowForwardOutlinedIcon from "@mui/icons-material/ArrowForwardOutlined";
+import { Text } from "@/components/ui/text";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import type { DashboardTrendPoint } from "@/domain/dashboard/types/dashboard-trend";
+import { useDashboardTrend } from "@/domain/dashboard/use-cases/use-dashboard-trend";
+import {
+  businessTodayIso,
+  dashboardRangeParams,
+} from "@/domain/dashboard/utils/dashboard-range-utils";
+import { DashboardCard } from "./dashboard-card";
+
+interface DashboardTrendCardProps {
+  range: DashboardRangeKey;
+}
+
+function trendParams(range: DashboardRangeKey, year: number) {
+  if (range === "all-time") return { year };
+  const params = dashboardRangeParams(range);
+  return {
+    ...params,
+    ...(range === "last-3-months" ? { range: "3m" as const } : {}),
+  };
+}
+
+function barHeight(point: DashboardTrendPoint, max: number): number {
+  if (point.total <= 0 || max <= 0) return 0;
+  return Math.max(6, Math.round((point.total / max) * 100));
+}
+
+function TrendBar({ point, max }: { point: DashboardTrendPoint; max: number }) {
+  const height = barHeight(point, max);
+  return (
+    <Box
+      className="flex min-w-[42px] flex-1 flex-col items-center gap-1"
+      data-testid="dashboard-trend-point"
+      sx={{ borderLeft: point.isCurrent ? "2px dashed" : undefined, borderColor: "warning.main" }}
+    >
+      <Text variant="description" tone="muted">
+        {point.total.toLocaleString()}
+      </Text>
+      <Box className="flex h-32 items-end">
+        {height > 0 && (
+          <Box
+            data-testid="dashboard-trend-bar"
+            className="w-6 rounded-t"
+            sx={{
+              height: `${height}%`,
+              bgcolor: point.isCurrent ? "warning.main" : "primary.main",
+            }}
+          />
+        )}
+      </Box>
+      <Text variant="description" className="max-w-16 truncate text-center" title={point.label}>
+        {point.label}
+      </Text>
+      {point.isCurrent && <Text variant="description">Today</Text>}
+    </Box>
+  );
+}
+
+export function DashboardTrendCard({ range }: DashboardTrendCardProps) {
+  const currentYear = Number(businessTodayIso().slice(0, 4));
+  const [year, setYear] = useState(currentYear);
+  const params = useMemo(() => trendParams(range, year), [range, year]);
+  const trend = useDashboardTrend(params);
+  const points = trend.data?.points ?? [];
+  const max = Math.max(...points.map((point) => point.total), 0);
+
+  return (
+    <DashboardCard
+      title="Work Order Trend"
+      isLoading={trend.isLoading}
+      error={trend.error}
+      isEmpty={!trend.isLoading && !trend.error && points.length === 0}
+      emptyMessage="No work orders match the current filters."
+    >
+      <Box className="flex flex-col gap-3">
+        <Box className="flex items-center justify-between">
+          <Text variant="description" tone="muted">
+            {trend.data?.granularity ? `${trend.data.granularity} buckets` : "Trend"}
+          </Text>
+          {range === "all-time" && (
+            <Box className="flex items-center">
+              <IconButton
+                aria-label="Previous year"
+                size="small"
+                onClick={() => setYear((value) => value - 1)}
+              >
+                <ArrowBackOutlinedIcon fontSize="small" />
+              </IconButton>
+              <Text variant="description">{year}</Text>
+              <IconButton
+                aria-label="Next year"
+                size="small"
+                onClick={() => setYear((value) => value + 1)}
+              >
+                <ArrowForwardOutlinedIcon fontSize="small" />
+              </IconButton>
+            </Box>
+          )}
+        </Box>
+        <Box
+          className="flex min-h-48 items-end gap-1 overflow-x-auto pb-1"
+          aria-label="Work Order Trend chart"
+        >
+          {points.map((point) => (
+            <TrendBar key={`${point.date}-${point.label}`} point={point} max={max} />
+          ))}
+        </Box>
+        <Text variant="description" tone="muted">
+          The dashed marker and “Today” label identify the current business date.
+        </Text>
+      </Box>
+    </DashboardCard>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/dispatcher-performance-card.tsx b/src/app/(protected)/dashboard/_components/dispatcher-performance-card.tsx
new file mode 100644
index 00000000..eb491726
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dispatcher-performance-card.tsx
@@ -0,0 +1,139 @@
+import { useNavigate } from "react-router";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import type { DispatcherPerformanceRow } from "@/domain/dashboard/types/dashboard-performance";
+import {
+  workOrderDispatcherDrilldownSearch,
+  workOrderDrilldownUrl,
+} from "@/domain/dashboard/utils/work-order-drilldown-links";
+import { DashboardCard } from "./dashboard-card";
+import { DispatcherTablePager } from "./dispatcher-table-pager";
+
+const EMPTY_MESSAGE = "No dispatchers are set up yet.";
+
+interface DispatcherPerformanceCardProps {
+  rows: DispatcherPerformanceRow[];
+  range: DashboardRangeKey;
+  page: number;
+  pageSize: number;
+  totalDispatchers: number;
+  onPageChange: (page: number) => void;
+  isLoading?: boolean;
+  error?: unknown;
+}
+
+function formatDays(value: number): string {
+  return (Math.round(value * 10) / 10).toLocaleString();
+}
+
+// SH-347: colour the completion rate green at 90+, amber 70–89, red below 70.
+function completionRateColor(rate: number): string {
+  if (rate >= 90) return "success.main";
+  if (rate >= 70) return "warning.main";
+  return "error.main";
+}
+
+function DispatcherNameCell({
+  row,
+  range,
+}: {
+  row: DispatcherPerformanceRow;
+  range: DashboardRangeKey;
+}) {
+  const navigate = useNavigate();
+  // A listed dispatcher is one with work in range; the drill-down filters Work
+  // Orders by dispatcher + range and never uses the completion rate, so gate on
+  // identity rather than the rate. (A dispatcher with assigned work but a 0%
+  // rate was previously inert here while drillable from Workload.) The gate stays
+  // on identity rather than `assignedCount > 0` so a legacy response without the
+  // SH-347 count field (assignedCount → 0) keeps its rows drillable.
+  const drillable = Boolean(row.dispatcherId);
+
+  if (!drillable) {
+    return <Text variant="description">{row.dispatcherName}</Text>;
+  }
+
+  return (
+    <Text
+      variant="description"
+      as="button"
+      className="cursor-pointer text-left font-medium underline-offset-2 hover:underline"
+      onClick={() =>
+        navigate(workOrderDrilldownUrl(workOrderDispatcherDrilldownSearch(row.dispatcherId, range)))
+      }
+    >
+      {row.dispatcherName}
+    </Text>
+  );
+}
+
+export function DispatcherPerformanceCard({
+  rows,
+  range,
+  page,
+  pageSize,
+  totalDispatchers,
+  onPageChange,
+  isLoading = false,
+  error,
+}: DispatcherPerformanceCardProps) {
+  return (
+    <DashboardCard
+      title="Dispatcher Performance"
+      isLoading={isLoading}
+      error={error}
+      isEmpty={!isLoading && !error && rows.length === 0}
+      emptyMessage={EMPTY_MESSAGE}
+    >
+      <TableContainer>
+        <Table size="small" aria-label="Dispatcher Performance">
+          <TableHead>
+            <TableRow>
+              <TableCell className="font-semibold">Dispatcher</TableCell>
+              <TableCell align="right" className="font-semibold">
+                Assigned
+              </TableCell>
+              <TableCell align="right" className="font-semibold">
+                Completed
+              </TableCell>
+              <TableCell align="right" className="font-semibold">
+                Completion %
+              </TableCell>
+              <TableCell align="right" className="font-semibold">
+                Avg days
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow key={row.dispatcherId || row.dispatcherName}>
+                <TableCell>
+                  <DispatcherNameCell row={row} range={range} />
+                </TableCell>
+                <TableCell align="right">{row.assignedCount.toLocaleString()}</TableCell>
+                <TableCell align="right">{row.completedCount.toLocaleString()}</TableCell>
+                <TableCell
+                  align="right"
+                  sx={{ color: completionRateColor(row.completionRate), fontWeight: 600 }}
+                >
+                  {`${row.completionRate.toLocaleString()}%`}
+                </TableCell>
+                <TableCell align="right">
+                  {row.averageResolutionDays == null ? "—" : formatDays(row.averageResolutionDays)}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <DispatcherTablePager
+        page={page}
+        pageSize={pageSize}
+        totalDispatchers={totalDispatchers}
+        onPageChange={onPageChange}
+        label="Dispatcher Performance pagination"
+      />
+    </DashboardCard>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/dispatcher-table-pager.tsx b/src/app/(protected)/dashboard/_components/dispatcher-table-pager.tsx
new file mode 100644
index 00000000..b0837efb
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dispatcher-table-pager.tsx
@@ -0,0 +1,40 @@
+import { Box, Pagination } from "@mui/material";
+
+interface DispatcherTablePagerProps {
+  page: number;
+  pageSize: number;
+  totalDispatchers: number;
+  onPageChange: (page: number) => void;
+  label: string;
+}
+
+/**
+ * 10-row pager for the dispatcher tables (SH-346/SH-347). Renders nothing until
+ * there is more than one page, so single-page tables are unchanged.
+ */
+export function DispatcherTablePager({
+  page,
+  pageSize,
+  totalDispatchers,
+  onPageChange,
+  label,
+}: DispatcherTablePagerProps) {
+  const pageCount = pageSize > 0 ? Math.ceil(totalDispatchers / pageSize) : 1;
+
+  if (pageCount <= 1) {
+    return null;
+  }
+
+  return (
+    <Box className="mt-3 flex justify-end">
+      <Pagination
+        size="small"
+        color="primary"
+        count={pageCount}
+        page={page}
+        onChange={(_event, value) => onPageChange(value)}
+        aria-label={label}
+      />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/dispatcher-tables-section.tsx b/src/app/(protected)/dashboard/_components/dispatcher-tables-section.tsx
new file mode 100644
index 00000000..05e1f301
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dispatcher-tables-section.tsx
@@ -0,0 +1,60 @@
+import type { UseQueryResult } from "@tanstack/react-query";
+import {
+  DISPATCHER_PAGE_SIZE,
+  type DispatcherPage,
+} from "@/domain/dashboard/types/dashboard-dispatcher-page";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import type { DispatcherPerformanceRow } from "@/domain/dashboard/types/dashboard-performance";
+import type { DispatcherWorkloadRow } from "@/domain/dashboard/types/dashboard-workload";
+import { DispatcherPerformanceCard } from "./dispatcher-performance-card";
+import { DispatcherWorkloadCard } from "./dispatcher-workload-card";
+
+interface DispatcherTablesSectionProps {
+  range: DashboardRangeKey;
+  workload: UseQueryResult<DispatcherPage<DispatcherWorkloadRow>, Error>;
+  performance: UseQueryResult<DispatcherPage<DispatcherPerformanceRow>, Error>;
+  workloadPage: number;
+  performancePage: number;
+  onWorkloadPageChange: (page: number) => void;
+  onPerformancePageChange: (page: number) => void;
+}
+
+/**
+ * The two paged dispatcher tables. Kept as a fragment so both cards stay direct
+ * children of the dashboard grid, and so the paging view-model derivation lives
+ * here rather than inflating the page component.
+ */
+export function DispatcherTablesSection({
+  range,
+  workload,
+  performance,
+  workloadPage,
+  performancePage,
+  onWorkloadPageChange,
+  onPerformancePageChange,
+}: DispatcherTablesSectionProps) {
+  return (
+    <>
+      <DispatcherWorkloadCard
+        rows={workload.data?.items ?? []}
+        range={range}
+        page={workloadPage}
+        pageSize={workload.data?.pageSize ?? DISPATCHER_PAGE_SIZE}
+        totalDispatchers={workload.data?.totalDispatchers ?? 0}
+        onPageChange={onWorkloadPageChange}
+        isLoading={workload.isLoading}
+        error={workload.error}
+      />
+      <DispatcherPerformanceCard
+        rows={performance.data?.items ?? []}
+        range={range}
+        page={performancePage}
+        pageSize={performance.data?.pageSize ?? DISPATCHER_PAGE_SIZE}
+        totalDispatchers={performance.data?.totalDispatchers ?? 0}
+        onPageChange={onPerformancePageChange}
+        isLoading={performance.isLoading}
+        error={performance.error}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/dispatcher-workload-card.tsx b/src/app/(protected)/dashboard/_components/dispatcher-workload-card.tsx
new file mode 100644
index 00000000..99980df2
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/dispatcher-workload-card.tsx
@@ -0,0 +1,107 @@
+import { useNavigate } from "react-router";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import type { DispatcherWorkloadRow } from "@/domain/dashboard/types/dashboard-workload";
+import {
+  workOrderDispatcherDrilldownSearch,
+  workOrderDrilldownUrl,
+} from "@/domain/dashboard/utils/work-order-drilldown-links";
+import { DashboardCard } from "./dashboard-card";
+import { DispatcherTablePager } from "./dispatcher-table-pager";
+
+const EMPTY_MESSAGE = "No dispatchers are set up yet.";
+
+interface DispatcherWorkloadCardProps {
+  rows: DispatcherWorkloadRow[];
+  range: DashboardRangeKey;
+  page: number;
+  pageSize: number;
+  totalDispatchers: number;
+  onPageChange: (page: number) => void;
+  isLoading?: boolean;
+  error?: unknown;
+}
+
+function DispatcherNameCell({
+  row,
+  range,
+}: {
+  row: DispatcherWorkloadRow;
+  range: DashboardRangeKey;
+}) {
+  const navigate = useNavigate();
+  const drillable = Boolean(row.dispatcherId) && row.totalWorkOrders > 0;
+
+  if (!drillable) {
+    return <Text variant="description">{row.dispatcherName}</Text>;
+  }
+
+  return (
+    <Text
+      variant="description"
+      as="button"
+      className="cursor-pointer text-left font-medium underline-offset-2 hover:underline"
+      onClick={() =>
+        navigate(workOrderDrilldownUrl(workOrderDispatcherDrilldownSearch(row.dispatcherId, range)))
+      }
+    >
+      {row.dispatcherName}
+    </Text>
+  );
+}
+
+export function DispatcherWorkloadCard({
+  rows,
+  range,
+  page,
+  pageSize,
+  totalDispatchers,
+  onPageChange,
+  isLoading = false,
+  error,
+}: DispatcherWorkloadCardProps) {
+  return (
+    <DashboardCard
+      title="Dispatcher Workload"
+      isLoading={isLoading}
+      error={error}
+      isEmpty={!isLoading && !error && rows.length === 0}
+      emptyMessage={EMPTY_MESSAGE}
+    >
+      <TableContainer>
+        <Table size="small" aria-label="Dispatcher Workload">
+          <TableHead>
+            <TableRow>
+              <TableCell className="font-semibold">Dispatcher</TableCell>
+              <TableCell align="right" className="font-semibold">
+                Open
+              </TableCell>
+              <TableCell align="right" className="font-semibold">
+                Total
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow key={row.dispatcherId || row.dispatcherName}>
+                <TableCell>
+                  <DispatcherNameCell row={row} range={range} />
+                </TableCell>
+                <TableCell align="right">{row.openWorkOrders.toLocaleString()}</TableCell>
+                <TableCell align="right">{row.totalWorkOrders.toLocaleString()}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <DispatcherTablePager
+        page={page}
+        pageSize={pageSize}
+        totalDispatchers={totalDispatchers}
+        onPageChange={onPageChange}
+        label="Dispatcher Workload pagination"
+      />
+    </DashboardCard>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/status-distribution-card.tsx b/src/app/(protected)/dashboard/_components/status-distribution-card.tsx
new file mode 100644
index 00000000..956735eb
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/status-distribution-card.tsx
@@ -0,0 +1,55 @@
+import { useNavigate } from "react-router";
+import { ALL_WIZARD_STATUSES } from "@/domain/work-orders/types/work-order-wizard";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import type { DashboardStatusBucketRow } from "@/domain/dashboard/types/dashboard-stats";
+import {
+  workOrderDrilldownUrl,
+  workOrderStatusDrilldownSearch,
+} from "@/domain/dashboard/utils/work-order-drilldown-links";
+import { DashboardBarList } from "./dashboard-bar-list";
+import { DashboardCard } from "./dashboard-card";
+
+const EMPTY_MESSAGE = "No work orders match the current filters.";
+
+const DRILLABLE_STATUSES = new Set<string>(ALL_WIZARD_STATUSES);
+
+interface StatusDistributionCardProps {
+  rows: DashboardStatusBucketRow[];
+  range: DashboardRangeKey;
+  isLoading?: boolean;
+  error?: unknown;
+}
+
+export function StatusDistributionCard({
+  rows,
+  range,
+  isLoading = false,
+  error,
+}: StatusDistributionCardProps) {
+  const navigate = useNavigate();
+
+  return (
+    <DashboardCard
+      title="Status Distribution"
+      isLoading={isLoading}
+      error={error}
+      isEmpty={!isLoading && !error && rows.length === 0}
+      emptyMessage={EMPTY_MESSAGE}
+    >
+      <DashboardBarList
+        ariaLabel="Status Distribution"
+        rows={rows.map((row) => ({
+          id: row.status,
+          label: row.status,
+          count: row.count,
+        }))}
+        // Lifecycle labels the board can filter on are drillable; the "Unknown"
+        // bucket (unparseable statuses) has no board filter, so leave it inert.
+        isSelectable={(row) => DRILLABLE_STATUSES.has(row.id)}
+        onSelectRow={(row) =>
+          navigate(workOrderDrilldownUrl(workOrderStatusDrilldownSearch(row.id, range)))
+        }
+      />
+    </DashboardCard>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/use-dashboard-scope.ts b/src/app/(protected)/dashboard/_components/use-dashboard-scope.ts
new file mode 100644
index 00000000..868b8d05
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/use-dashboard-scope.ts
@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { canViewAllDispatchersOnDashboard } from "@/lib/auth/user-utils";
+import { useAuthContext } from "@/providers/auth-context";
+import {
+  DEFAULT_DASHBOARD_RANGE,
+  type DashboardRangeKey,
+} from "@/domain/dashboard/types/dashboard-range";
+import { DASHBOARD_SCOPE_ALL, scopeDispatcherId, type DashboardScope } from "./dashboard-scope";
+
+export interface DashboardScopeState {
+  canViewAll: boolean;
+  currentUserId: string | number | undefined;
+  range: DashboardRangeKey;
+  scope: DashboardScope;
+  /** The `dispatcherId` query param for the scoped endpoints (null = company-wide). */
+  dispatcherId: string | null;
+  workloadPage: number;
+  performancePage: number;
+  showReset: boolean;
+  setWorkloadPage: (page: number) => void;
+  setPerformancePage: (page: number) => void;
+  changeRange: (next: DashboardRangeKey) => void;
+  changeScope: (next: DashboardScope) => void;
+  resetFilters: () => void;
+}
+
+/**
+ * SH-336 dashboard scope/paging state. A Dispatcher (no
+ * `viewAllDispatchersOnDashboard`) is locked to their own work orders and sends
+ * no dispatcherId; Scheduler/Admin drive an explicit scope through the picker.
+ */
+export function useDashboardScope(): DashboardScopeState {
+  const { user } = useAuthContext();
+  const canViewAll = canViewAllDispatchersOnDashboard(user?.userRoles);
+
+  const [range, setRange] = useState<DashboardRangeKey>(DEFAULT_DASHBOARD_RANGE);
+  const [scope, setScope] = useState<DashboardScope>(DASHBOARD_SCOPE_ALL);
+  const [workloadPage, setWorkloadPage] = useState(1);
+  const [performancePage, setPerformancePage] = useState(1);
+
+  const dispatcherId = canViewAll ? scopeDispatcherId(scope, user?.id) : null;
+
+  // A range or scope change re-scopes both dispatcher tables, so their page must
+  // reset — otherwise a switch while on page 3 lands on an out-of-range empty
+  // page that reads as a false "no dispatchers" state.
+  const resetPages = () => {
+    setWorkloadPage(1);
+    setPerformancePage(1);
+  };
+
+  const changeRange = (next: DashboardRangeKey) => {
+    setRange(next);
+    resetPages();
+  };
+
+  const changeScope = (next: DashboardScope) => {
+    setScope(next);
+    resetPages();
+  };
+
+  const resetFilters = () => {
+    setRange(DEFAULT_DASHBOARD_RANGE);
+    setScope(DASHBOARD_SCOPE_ALL);
+    resetPages();
+  };
+
+  // A Dispatcher's forced own-WOs scope never triggers the reset affordance (only
+  // an active date range can, for that role); a Scheduler/Admin's non-All scope does.
+  const scopeIsFiltered = canViewAll && scope.mode !== "all";
+  const showReset = range !== DEFAULT_DASHBOARD_RANGE || scopeIsFiltered;
+
+  return {
+    canViewAll,
+    currentUserId: user?.id,
+    range,
+    scope,
+    dispatcherId,
+    workloadPage,
+    performancePage,
+    showReset,
+    setWorkloadPage,
+    setPerformancePage,
+    changeRange,
+    changeScope,
+    resetFilters,
+  };
+}
diff --git a/src/app/(protected)/dashboard/_components/vendor-insights-card.tsx b/src/app/(protected)/dashboard/_components/vendor-insights-card.tsx
new file mode 100644
index 00000000..d23776ff
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/vendor-insights-card.tsx
@@ -0,0 +1,64 @@
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import type { VendorInsightRow } from "@/domain/dashboard/types/dashboard-vendor-insights";
+import { DashboardCard } from "./dashboard-card";
+
+const EMPTY_MESSAGE = "No active vendor has any work orders yet.";
+
+interface VendorInsightsCardProps {
+  rows: VendorInsightRow[];
+  isLoading?: boolean;
+  error?: unknown;
+}
+
+export function VendorInsightsCard({ rows, isLoading = false, error }: VendorInsightsCardProps) {
+  return (
+    <DashboardCard
+      title="Vendor Insights"
+      caption="All-time, company-wide"
+      isLoading={isLoading}
+      error={error}
+      isEmpty={!isLoading && !error && rows.length === 0}
+      emptyMessage={EMPTY_MESSAGE}
+    >
+      <TableContainer>
+        <Table size="small" aria-label="Vendor Insights">
+          <TableHead>
+            <TableRow>
+              <TableCell className="font-semibold">Vendor</TableCell>
+              <TableCell align="right" className="font-semibold">
+                Completion %
+              </TableCell>
+              <TableCell align="right" className="font-semibold">
+                Reschedule %
+              </TableCell>
+              <TableCell align="right" className="font-semibold">
+                Avg days
+              </TableCell>
+              <TableCell align="right" className="font-semibold">
+                Jobs
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow key={row.vendorId || row.vendorName}>
+                <TableCell>
+                  <Text variant="description">{row.vendorName}</Text>
+                </TableCell>
+                <TableCell align="right">{`${row.completionRate.toLocaleString()}%`}</TableCell>
+                <TableCell align="right">{`${row.rescheduleRate.toLocaleString()}%`}</TableCell>
+                <TableCell align="right">
+                  {row.averageResolutionDays == null
+                    ? "—"
+                    : row.averageResolutionDays.toLocaleString()}
+                </TableCell>
+                <TableCell align="right">{row.totalJobs.toLocaleString()}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </DashboardCard>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/work-order-breakdown-card.tsx b/src/app/(protected)/dashboard/_components/work-order-breakdown-card.tsx
new file mode 100644
index 00000000..84f32923
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/work-order-breakdown-card.tsx
@@ -0,0 +1,47 @@
+import { useNavigate } from "react-router";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import type { DashboardBreakdownRow } from "@/domain/dashboard/types/dashboard-stats";
+import {
+  workOrderDrilldownUrl,
+  workOrderTypeDrilldownSearch,
+} from "@/domain/dashboard/utils/work-order-drilldown-links";
+import { DashboardBarList } from "./dashboard-bar-list";
+import { DashboardCard } from "./dashboard-card";
+
+const EMPTY_MESSAGE = "No work orders match the current filters.";
+
+interface WorkOrderBreakdownCardProps {
+  breakdown: DashboardBreakdownRow[];
+  range: DashboardRangeKey;
+  isLoading?: boolean;
+  error?: unknown;
+}
+
+export function WorkOrderBreakdownCard({
+  breakdown,
+  range,
+  isLoading = false,
+  error,
+}: WorkOrderBreakdownCardProps) {
+  const navigate = useNavigate();
+
+  return (
+    <DashboardCard
+      title="Work Order Breakdown"
+      isLoading={isLoading}
+      error={error}
+      isEmpty={!isLoading && !error && breakdown.length === 0}
+      emptyMessage={EMPTY_MESSAGE}
+    >
+      <DashboardBarList
+        ariaLabel="Work Order Breakdown"
+        rows={breakdown.map((row) => ({ id: row.status, label: row.status, count: row.count }))}
+        isSelectable={(row) => workOrderTypeDrilldownSearch(row.id, range) !== null}
+        onSelectRow={(row) => {
+          const search = workOrderTypeDrilldownSearch(row.id, range);
+          if (search) navigate(workOrderDrilldownUrl(search));
+        }}
+      />
+    </DashboardCard>
+  );
+}
diff --git a/src/app/(protected)/dashboard/_components/work-orders-by-region-card.tsx b/src/app/(protected)/dashboard/_components/work-orders-by-region-card.tsx
new file mode 100644
index 00000000..40c53e0d
--- /dev/null
+++ b/src/app/(protected)/dashboard/_components/work-orders-by-region-card.tsx
@@ -0,0 +1,57 @@
+import { useNavigate } from "react-router";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import {
+  UNMAPPED_REGION_LABEL,
+  type RegionWorkOrdersRow,
+} from "@/domain/dashboard/types/dashboard-regions";
+import {
+  workOrderDrilldownUrl,
+  workOrderRegionDrilldownSearch,
+} from "@/domain/dashboard/utils/work-order-drilldown-links";
+import { DashboardBarList } from "./dashboard-bar-list";
+import { DashboardCard } from "./dashboard-card";
+
+const EMPTY_MESSAGE = "No work orders match the current filters.";
+
+interface WorkOrdersByRegionCardProps {
+  rows: RegionWorkOrdersRow[];
+  range: DashboardRangeKey;
+  isLoading?: boolean;
+  error?: unknown;
+}
+
+export function WorkOrdersByRegionCard({
+  rows,
+  range,
+  isLoading = false,
+  error,
+}: WorkOrdersByRegionCardProps) {
+  const navigate = useNavigate();
+
+  // SH-348 open point: the "Unmapped/Other" bucket is proposed but not yet
+  // confirmed with the client ("do not implement until confirmed"), so only the
+  // four canonical zones are shown.
+  const zones = rows.filter((row) => row.region !== UNMAPPED_REGION_LABEL);
+
+  return (
+    <DashboardCard
+      title="Work Orders by Region"
+      isLoading={isLoading}
+      error={error}
+      isEmpty={!isLoading && !error && zones.length === 0}
+      emptyMessage={EMPTY_MESSAGE}
+    >
+      <DashboardBarList
+        ariaLabel="Work Orders by Region"
+        rows={zones.map((row) => ({
+          id: row.region,
+          label: row.region,
+          count: row.workOrderCount,
+        }))}
+        onSelectRow={(row) =>
+          navigate(workOrderDrilldownUrl(workOrderRegionDrilldownSearch(row.id, range)))
+        }
+      />
+    </DashboardCard>
+  );
+}
diff --git a/src/app/(protected)/dashboard/index.tsx b/src/app/(protected)/dashboard/index.tsx
new file mode 100644
index 00000000..60795d8f
--- /dev/null
+++ b/src/app/(protected)/dashboard/index.tsx
@@ -0,0 +1,133 @@
+import { useNavigate } from "react-router";
+import EventOutlinedIcon from "@mui/icons-material/EventOutlined";
+import PendingActionsIcon from "@mui/icons-material/PendingActions";
+import ShieldOutlinedIcon from "@mui/icons-material/ShieldOutlined";
+import { Box } from "@mui/material";
+import { PageHeader } from "@/components/ui/page-header";
+import { DashboardHeaderActions } from "@/app/(protected)/dashboard/_components/dashboard-header-actions";
+import { DashboardKpiCard } from "@/app/(protected)/dashboard/_components/dashboard-kpi-card";
+import { DashboardTrendCard } from "@/app/(protected)/dashboard/_components/dashboard-trend-card";
+import { DispatcherTablesSection } from "@/app/(protected)/dashboard/_components/dispatcher-tables-section";
+import { StatusDistributionCard } from "@/app/(protected)/dashboard/_components/status-distribution-card";
+import { useDashboardScope } from "@/app/(protected)/dashboard/_components/use-dashboard-scope";
+import { VendorInsightsCard } from "@/app/(protected)/dashboard/_components/vendor-insights-card";
+import { WorkOrderBreakdownCard } from "@/app/(protected)/dashboard/_components/work-order-breakdown-card";
+import { WorkOrdersByRegionCard } from "@/app/(protected)/dashboard/_components/work-orders-by-region-card";
+import { useDashboardPerformance } from "@/domain/dashboard/use-cases/use-dashboard-performance";
+import { useDashboardRegions } from "@/domain/dashboard/use-cases/use-dashboard-regions";
+import { useDashboardStats } from "@/domain/dashboard/use-cases/use-dashboard-stats";
+import { useDashboardVendorInsights } from "@/domain/dashboard/use-cases/use-dashboard-vendor-insights";
+import { useDashboardWorkload } from "@/domain/dashboard/use-cases/use-dashboard-workload";
+import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
+import {
+  avetaPendingDrilldownSearch,
+  scheduledTomorrowDrilldownSearch,
+  UPLIFTS_ROUTE,
+  workOrderDrilldownUrl,
+} from "@/domain/dashboard/utils/work-order-drilldown-links";
+
+export default function DashboardPage() {
+  const navigate = useNavigate();
+  const scope = useDashboardScope();
+  const { canViewAll, range, dispatcherId, workloadPage, performancePage } = scope;
+
+  const dispatcherUsers = useWorkOrderUsers();
+  const stats = useDashboardStats(range, dispatcherId);
+  const workload = useDashboardWorkload(range, workloadPage, dispatcherId, canViewAll);
+  const performance = useDashboardPerformance(range, performancePage, dispatcherId, canViewAll);
+  const regions = useDashboardRegions(range, dispatcherId);
+  const vendors = useDashboardVendorInsights();
+
+  const isRefreshing =
+    [stats, workload, performance, regions, vendors].some((query) => query.isFetching) &&
+    !stats.isLoading;
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <PageHeader
+        title="Dashboard"
+        actions={
+          <DashboardHeaderActions
+            isRefreshing={isRefreshing}
+            showReset={scope.showReset}
+            onResetFilters={scope.resetFilters}
+            canViewAll={canViewAll}
+            scope={scope.scope}
+            onScopeChange={scope.changeScope}
+            dispatcherUsers={dispatcherUsers.data ?? []}
+            dispatcherUsersLoading={dispatcherUsers.isLoading}
+            currentUserId={scope.currentUserId}
+            range={range}
+            onRangeChange={scope.changeRange}
+          />
+        }
+      />
+      <Box className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <DashboardKpiCard
+          title="Scheduled Tomorrow"
+          icon={<EventOutlinedIcon />}
+          tone="primary"
+          value={stats.data?.scheduledTomorrow}
+          loading={stats.isLoading}
+          active={(stats.data?.scheduledTomorrow ?? 0) > 0}
+          onSelect={() => navigate(workOrderDrilldownUrl(scheduledTomorrowDrilldownSearch()))}
+        />
+        <DashboardKpiCard
+          title="Pending Uplifts"
+          icon={<PendingActionsIcon />}
+          tone="info"
+          value={stats.data?.pendingUplifts}
+          loading={stats.isLoading}
+          active={(stats.data?.pendingUplifts ?? 0) > 0}
+          onSelect={() => navigate(UPLIFTS_ROUTE)}
+        />
+        <DashboardKpiCard
+          title="Aveta Pending"
+          icon={<ShieldOutlinedIcon />}
+          tone="warning"
+          value={stats.data?.avetaPending}
+          loading={stats.isLoading}
+          active={(stats.data?.avetaPending ?? 0) > 0}
+          onSelect={() => navigate(workOrderDrilldownUrl(avetaPendingDrilldownSearch()))}
+        />
+      </Box>
+      <Box className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <WorkOrderBreakdownCard
+          breakdown={stats.data?.breakdown ?? []}
+          range={range}
+          isLoading={stats.isLoading}
+          error={stats.error}
+        />
+        <StatusDistributionCard
+          rows={stats.data?.statusDistribution ?? []}
+          range={range}
+          isLoading={stats.isLoading}
+          error={stats.error}
+        />
+        <WorkOrdersByRegionCard
+          rows={regions.data ?? []}
+          range={range}
+          isLoading={regions.isLoading}
+          error={regions.error}
+        />
+        {canViewAll && (
+          <DispatcherTablesSection
+            range={range}
+            workload={workload}
+            performance={performance}
+            workloadPage={workloadPage}
+            performancePage={performancePage}
+            onWorkloadPageChange={scope.setWorkloadPage}
+            onPerformancePageChange={scope.setPerformancePage}
+          />
+        )}
+      </Box>
+      <DashboardTrendCard range={range} />
+      <VendorInsightsCard
+        rows={vendors.data ?? []}
+        isLoading={vendors.isLoading}
+        error={vendors.error}
+      />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/employees/_components/employee-form.tsx b/src/app/(protected)/employees/_components/employee-form.tsx
new file mode 100644
index 00000000..6d5413a8
--- /dev/null
+++ b/src/app/(protected)/employees/_components/employee-form.tsx
@@ -0,0 +1,378 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate, useParams } from "react-router";
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Divider,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import {
+  resolveJobTitleId,
+  resolveJobTitleLabel,
+} from "@/domain/employees/lib/resolve-job-title-id";
+import {
+  employeeDefaultValues,
+  employeeSchema,
+  type EmployeeFormValues,
+} from "@/domain/employees/schemas/employee-schema";
+import { useCreateEmployee } from "@/domain/employees/use-cases/use-create-employee";
+import { useEmployeeDetail } from "@/domain/employees/use-cases/use-employee-detail";
+import { useUpdateEmployee } from "@/domain/employees/use-cases/use-update-employee";
+import { JobTitleSelect } from "@/app/(protected)/employees/_components/job-title-select";
+
+const DEPARTMENTS = ["Administration", "Sales", "Service", "Field Service"] as const;
+const TIME_ZONES = [
+  "Eastern Standard Time",
+  "Central Standard Time",
+  "Mountain Standard Time",
+  "Pacific Standard Time",
+] as const;
+const ROLES = [
+  "Admin",
+  "Administrator User",
+  "Dispatcher",
+  "Editor User",
+  "Employee",
+  "Read Only User",
+  "Technician",
+] as const;
+const US_STATES = ["AL", "AK", "AZ", "CA", "FL", "NY", "TX"] as const;
+
+function SelectField({
+  name,
+  label,
+  control,
+  options,
+  required,
+  error,
+  helperText,
+}: {
+  name: keyof EmployeeFormValues;
+  label: string;
+  control: ReturnType<typeof useForm<EmployeeFormValues>>["control"];
+  options: readonly string[];
+  required?: boolean;
+  error?: boolean;
+  helperText?: string;
+}) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <FormControl fullWidth required={required} error={error}>
+          <InputLabel id={`${name}-label`}>{label}</InputLabel>
+          <Select {...field} labelId={`${name}-label`} label={label} value={field.value ?? ""}>
+            <MenuItem value="">
+              <em>Select...</em>
+            </MenuItem>
+            {options.map((option) => (
+              <MenuItem key={option} value={option}>
+                {option}
+              </MenuItem>
+            ))}
+          </Select>
+          {Boolean(helperText) && (
+            <Typography variant="caption" color="error" className="mt-1">
+              {helperText}
+            </Typography>
+          )}
+        </FormControl>
+      )}
+    />
+  );
+}
+
+export default function EmployeeFormPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const isEdit = Boolean(id);
+
+  const { data: employee, isLoading, error } = useEmployeeDetail(id);
+  const createEmployee = useCreateEmployee();
+  const updateEmployee = useUpdateEmployee();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    setValue,
+    formState: { errors },
+  } = useForm<EmployeeFormValues>({
+    resolver: zodResolver(employeeSchema),
+    defaultValues: employeeDefaultValues,
+  });
+
+  useEffect(() => {
+    if (employee && isEdit) {
+      const jobTitleId = resolveJobTitleId(employee.jobTitleId, employee.jobTitle);
+      const jobTitle = resolveJobTitleLabel(jobTitleId, employee.jobTitle);
+
+      reset({
+        firstName: employee.firstName,
+        middleName: employee.middleName,
+        lastName: employee.lastName,
+        email: employee.email,
+        phone: employee.phone,
+        jobTitle,
+        jobTitleId,
+        role: employee.role,
+        status: employee.status,
+        hireDate: employee.hireDate,
+        dateOfBirth: employee.dateOfBirth,
+        address: employee.address,
+        department: employee.department,
+        timeZone: employee.timeZone,
+        gender: employee.gender,
+        employeeNumber: employee.employeeNumber,
+        regionName: employee.regionName,
+        userName: employee.userName,
+        confirmUserName: employee.confirmUserName,
+        street: employee.street,
+        streetLineTwo: employee.streetLineTwo,
+        city: employee.city,
+        zip: employee.zip,
+        country: employee.country,
+        state: employee.state,
+        county: employee.county,
+        smsAddress: employee.smsAddress,
+        website: employee.website,
+        facebookUrl: employee.facebookUrl,
+        linkedInUrl: employee.linkedInUrl,
+        twitterUrl: employee.twitterUrl,
+      });
+    }
+  }, [employee, isEdit, reset]);
+
+  const isSaving = createEmployee.isPending || updateEmployee.isPending;
+
+  const onSubmit = (values: EmployeeFormValues) => {
+    if (isEdit && id) {
+      updateEmployee.mutate({ id, values });
+      return;
+    }
+    createEmployee.mutate(values);
+  };
+
+  if (isEdit && isLoading) {
+    return (
+      <Box className="flex justify-center p-10">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box className="mx-auto max-w-5xl p-4">
+      <Paper variant="outlined" className="p-6">
+        <Stack spacing={3}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Typography variant="h5" component="h1">
+              {isEdit ? "Edit an Employee" : "Create an Employee"}
+            </Typography>
+            <Button variant="text" onClick={() => navigate("/employees")}>
+              Back to list
+            </Button>
+          </Stack>
+
+          {Boolean(error) && (
+            <Alert severity="error">
+              {error instanceof Error ? error.message : "Failed to load employee"}
+            </Alert>
+          )}
+
+          <Box component="form" onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
+            <Typography variant="subtitle1" className="font-semibold">
+              General Details
+            </Typography>
+            <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+              <TextField
+                {...register("firstName")}
+                label="First Name"
+                required
+                error={Boolean(errors.firstName)}
+                helperText={errors.firstName?.message}
+                fullWidth
+              />
+              <TextField {...register("middleName")} label="Middle Name" fullWidth />
+              <TextField
+                {...register("lastName")}
+                label="Last Name"
+                required
+                error={Boolean(errors.lastName)}
+                helperText={errors.lastName?.message}
+                fullWidth
+              />
+            </Stack>
+            <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+              <SelectField
+                name="department"
+                label="Department"
+                control={control}
+                options={DEPARTMENTS}
+              />
+              <SelectField
+                name="timeZone"
+                label="Time Zone"
+                control={control}
+                options={TIME_ZONES}
+                required
+                error={Boolean(errors.timeZone)}
+                helperText={errors.timeZone?.message}
+              />
+              <SelectField
+                name="gender"
+                label="Gender"
+                control={control}
+                options={["Male", "Female", "Not specified", "Other"]}
+              />
+            </Stack>
+            <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+              <TextField
+                {...register("dateOfBirth")}
+                label="Date of Birth"
+                type="date"
+                slotProps={{ inputLabel: { shrink: true } }}
+                fullWidth
+              />
+              <JobTitleSelect control={control} setValue={setValue} />
+              <TextField {...register("employeeNumber")} label="Employee #" fullWidth />
+            </Stack>
+            <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+              <TextField
+                {...register("hireDate")}
+                label="Hire Date"
+                type="date"
+                slotProps={{ inputLabel: { shrink: true } }}
+                fullWidth
+              />
+              <SelectField
+                name="regionName"
+                label="Region Name"
+                control={control}
+                options={["Region 1", "Region 2"]}
+              />
+            </Stack>
+
+            <Divider />
+
+            <Typography variant="subtitle1" className="font-semibold">
+              Login &amp; Role
+            </Typography>
+            <Typography
+              variant="body2"
+              sx={{
+                color: "text.secondary",
+              }}
+            >
+              {isEdit
+                ? "If the Username is changed, the Employee's account will have to be confirmed again before they can log in."
+                : "A confirmation email will be sent to activate the Employee's account."}
+            </Typography>
+            <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+              <SelectField
+                name="role"
+                label="Role"
+                control={control}
+                options={ROLES}
+                required
+                error={Boolean(errors.role)}
+                helperText={errors.role?.message}
+              />
+              <TextField
+                {...register("userName")}
+                label="User Name"
+                type="email"
+                required
+                error={Boolean(errors.userName)}
+                helperText={errors.userName?.message}
+                fullWidth
+              />
+              <TextField
+                {...register("confirmUserName")}
+                label="Confirm User Name"
+                type="email"
+                required
+                error={Boolean(errors.confirmUserName)}
+                helperText={errors.confirmUserName?.message}
+                fullWidth
+              />
+            </Stack>
+
+            <Divider />
+
+            <Typography variant="subtitle1" className="font-semibold">
+              Address
+            </Typography>
+            <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+              <TextField {...register("street")} label="Address 1" fullWidth />
+              <TextField {...register("streetLineTwo")} label="Address 2" fullWidth />
+            </Stack>
+            <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+              <TextField {...register("city")} label="City" fullWidth />
+              <TextField {...register("zip")} label="Zip/Postal Code" fullWidth />
+            </Stack>
+            <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+              <SelectField name="country" label="Country" control={control} options={["US"]} />
+              <SelectField
+                name="state"
+                label="State / Province"
+                control={control}
+                options={US_STATES}
+              />
+              <TextField {...register("county")} label="County" fullWidth />
+            </Stack>
+
+            <Divider />
+
+            <Typography variant="subtitle1" className="font-semibold">
+              Additional Details
+            </Typography>
+            <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+              <TextField {...register("smsAddress")} label="SMS Address" type="email" fullWidth />
+              <TextField {...register("website")} label="Website" fullWidth />
+            </Stack>
+            <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+              <TextField {...register("facebookUrl")} label="Facebook" fullWidth />
+              <TextField {...register("linkedInUrl")} label="LinkedIn" fullWidth />
+              <TextField {...register("twitterUrl")} label="Twitter" fullWidth />
+            </Stack>
+
+            <Stack
+              direction="row"
+              spacing={2}
+              sx={{
+                justifyContent: "flex-end",
+              }}
+            >
+              <Button variant="outlined" onClick={() => navigate("/employees")} disabled={isSaving}>
+                Cancel
+              </Button>
+              <Button type="submit" variant="contained" disabled={isSaving}>
+                {isSaving ? "Saving..." : isEdit ? "Update" : "Create"}
+              </Button>
+            </Stack>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/employees/_components/job-title-select.tsx b/src/app/(protected)/employees/_components/job-title-select.tsx
new file mode 100644
index 00000000..a9f0cf75
--- /dev/null
+++ b/src/app/(protected)/employees/_components/job-title-select.tsx
@@ -0,0 +1,44 @@
+import { Controller, type Control, type UseFormSetValue } from "react-hook-form";
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import { JOB_TITLE_OPTIONS } from "@/domain/employees/constants/job-title-options";
+import type { EmployeeFormValues } from "@/domain/employees/schemas/employee-schema";
+
+interface JobTitleSelectProps {
+  control: Control<EmployeeFormValues>;
+  setValue: UseFormSetValue<EmployeeFormValues>;
+}
+
+export function JobTitleSelect({ control, setValue }: JobTitleSelectProps) {
+  return (
+    <Controller
+      name="jobTitleId"
+      control={control}
+      render={({ field }) => (
+        <FormControl fullWidth>
+          <InputLabel id="jobTitleId-label">Job Title</InputLabel>
+          <Select
+            labelId="jobTitleId-label"
+            label="Job Title"
+            value={field.value ?? ""}
+            onChange={(event) => {
+              const value = String(event.target.value);
+              const nextId = value === "" ? null : Number(value);
+              field.onChange(nextId);
+              const label = JOB_TITLE_OPTIONS.find((option) => option.id === nextId)?.label ?? "";
+              setValue("jobTitle", label, { shouldDirty: true });
+            }}
+          >
+            <MenuItem value="">
+              <em>Select...</em>
+            </MenuItem>
+            {JOB_TITLE_OPTIONS.map((option) => (
+              <MenuItem key={option.id} value={option.id}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      )}
+    />
+  );
+}
diff --git a/src/app/(protected)/employees/edit/[id].tsx b/src/app/(protected)/employees/edit/[id].tsx
new file mode 100644
index 00000000..133b472d
--- /dev/null
+++ b/src/app/(protected)/employees/edit/[id].tsx
@@ -0,0 +1 @@
+export { default } from "../_components/employee-form";
diff --git a/src/app/(protected)/employees/index.tsx b/src/app/(protected)/employees/index.tsx
new file mode 100644
index 00000000..ed56887b
--- /dev/null
+++ b/src/app/(protected)/employees/index.tsx
@@ -0,0 +1,253 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import {
+  Alert,
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TablePagination,
+  TableRow,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import type { EmployeeListItem } from "@/domain/employees/types/employee";
+import { useDeleteEmployee } from "@/domain/employees/use-cases/use-delete-employee";
+import { useEmployeesList } from "@/domain/employees/use-cases/use-employees-list";
+import { useDebounce } from "@/hooks/use-debounce";
+
+const STATUS_COLORS: Record<string, "default" | "success" | "warning" | "error"> = {
+  Active: "success",
+  Inactive: "default",
+};
+
+export default function EmployeesListPage() {
+  const navigate = useNavigate();
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(12);
+  const [deleteTarget, setDeleteTarget] = useState<EmployeeListItem | null>(null);
+
+  const debouncedSearch = useDebounce(search, 300);
+  const deleteEmployee = useDeleteEmployee();
+
+  const listParams = useMemo(
+    () => ({
+      search: debouncedSearch,
+      page: page + 1,
+      pageSize,
+    }),
+    [debouncedSearch, page, pageSize],
+  );
+
+  const { data, isLoading, isFetching, error } = useEmployeesList(listParams);
+
+  const rows = data?.items ?? [];
+  const totalCount = data?.totalCount ?? 0;
+
+  const handleDeleteConfirm = () => {
+    if (!deleteTarget) {
+      return;
+    }
+
+    deleteEmployee.mutate(deleteTarget.id, {
+      onSuccess: () => setDeleteTarget(null),
+    });
+  };
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{
+          alignItems: { xs: "stretch", md: "center" },
+          justifyContent: "space-between",
+        }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: "baseline",
+          }}
+        >
+          <Typography variant="h5" component="h1">
+            Employees
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{
+              color: "text.secondary",
+            }}
+          >
+            {totalCount} total
+          </Typography>
+          {isFetching && !isLoading && <CircularProgress size={16} />}
+        </Stack>
+
+        <Stack
+          direction={{ xs: "column", sm: "row" }}
+          spacing={2}
+          sx={{
+            alignItems: "center",
+          }}
+        >
+          <TextField
+            size="small"
+            value={search}
+            onChange={(event) => {
+              setSearch(event.target.value);
+              setPage(0);
+            }}
+            placeholder="Search employees..."
+            className="min-w-sidebar"
+          />
+          <Button variant="contained" onClick={() => navigate("/employees/new")}>
+            + New Employee
+          </Button>
+        </Stack>
+      </Stack>
+      {Boolean(error) && (
+        <Alert severity="error">
+          {error instanceof Error ? error.message : "Failed to load employees"}
+        </Alert>
+      )}
+      <TableContainer component={Paper} variant="outlined">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell className="font-semibold">Name</TableCell>
+              <TableCell className="font-semibold">Job Title</TableCell>
+              <TableCell className="font-semibold">Email</TableCell>
+              <TableCell className="font-semibold">Phone</TableCell>
+              <TableCell className="font-semibold">Department</TableCell>
+              <TableCell className="font-semibold">Status</TableCell>
+              <TableCell align="right" className="font-semibold">
+                Actions
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={7} align="center" className="py-10">
+                  <CircularProgress size={28} />
+                </TableCell>
+              </TableRow>
+            ) : rows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={7} align="center" className="py-10">
+                  <Typography
+                    sx={{
+                      color: "text.secondary",
+                    }}
+                  >
+                    No employees found
+                  </Typography>
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((row) => (
+                <TableRow key={String(row.id)} hover>
+                  <TableCell>
+                    <Button
+                      variant="text"
+                      size="small"
+                      className="font-semibold"
+                      onClick={() => navigate(`/employees/edit/${row.id}`)}
+                    >
+                      {row.name || "—"}
+                    </Button>
+                  </TableCell>
+                  <TableCell>{row.jobTitle || "—"}</TableCell>
+                  <TableCell>{row.email || "—"}</TableCell>
+                  <TableCell>{row.phone || "—"}</TableCell>
+                  <TableCell>{row.department || "—"}</TableCell>
+                  <TableCell>
+                    <Chip
+                      size="small"
+                      label={row.status || "—"}
+                      color={STATUS_COLORS[row.status] ?? "default"}
+                      variant="outlined"
+                    />
+                  </TableCell>
+                  <TableCell align="right">
+                    <Tooltip title="Edit">
+                      <IconButton
+                        size="small"
+                        aria-label="Edit employee"
+                        onClick={() => navigate(`/employees/edit/${row.id}`)}
+                      >
+                        <EditOutlinedIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                    <Tooltip title="Delete">
+                      <IconButton
+                        size="small"
+                        aria-label="Delete employee"
+                        onClick={() => setDeleteTarget(row)}
+                      >
+                        <DeleteOutlineIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        component="div"
+        count={totalCount}
+        page={page}
+        onPageChange={(_event, nextPage) => setPage(nextPage)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(event) => {
+          setPageSize(Number(event.target.value));
+          setPage(0);
+        }}
+        rowsPerPageOptions={[12, 24, 48]}
+      />
+      <Dialog open={Boolean(deleteTarget)} onClose={() => setDeleteTarget(null)}>
+        <DialogTitle>Delete Employee</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Are you sure you want to delete &quot;{deleteTarget?.name}&quot;? This action cannot be
+            undone.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeleteTarget(null)} disabled={deleteEmployee.isPending}>
+            Cancel
+          </Button>
+          <Button
+            color="error"
+            variant="contained"
+            onClick={handleDeleteConfirm}
+            disabled={deleteEmployee.isPending}
+          >
+            {deleteEmployee.isPending ? "Deleting..." : "Delete"}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/employees/new.tsx b/src/app/(protected)/employees/new.tsx
new file mode 100644
index 00000000..a1aa5d20
--- /dev/null
+++ b/src/app/(protected)/employees/new.tsx
@@ -0,0 +1 @@
+export { default } from "./_components/employee-form";
diff --git a/src/app/(protected)/followups/_components/follow-up-form.tsx b/src/app/(protected)/followups/_components/follow-up-form.tsx
new file mode 100644
index 00000000..d7a6a86c
--- /dev/null
+++ b/src/app/(protected)/followups/_components/follow-up-form.tsx
@@ -0,0 +1,245 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate, useParams } from "react-router";
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { useAccountsList } from "@/domain/accounts/use-cases/use-accounts-list";
+import { useEmployeesList } from "@/domain/employees/use-cases/use-employees-list";
+import {
+  followUpSchema,
+  type FollowUpFormValues,
+} from "@/domain/follow-ups/schemas/follow-up-schema";
+import { useCreateFollowUp } from "@/domain/follow-ups/use-cases/use-create-follow-up";
+import { useFollowUpDetail } from "@/domain/follow-ups/use-cases/use-follow-up-detail";
+import { useUpdateFollowUp } from "@/domain/follow-ups/use-cases/use-update-follow-up";
+import { useLocationsList } from "@/domain/locations/use-cases/use-locations-list";
+
+const defaultValues: FollowUpFormValues = {
+  reason: "",
+  scheduleDate: "",
+  scheduleStartTime: "09:00",
+  employeeId: null,
+  accountId: null,
+  locationId: null,
+  workOrderId: null,
+};
+
+export default function FollowUpFormPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const isEdit = Boolean(id);
+
+  const { data: followUp, isLoading, error } = useFollowUpDetail(id);
+  const { data: employeesData } = useEmployeesList({ page: 1, pageSize: 500 });
+  const { data: accountsData } = useAccountsList({ page: 1, pageSize: 500 });
+  const { data: locationsData } = useLocationsList({ page: 1, pageSize: 500 });
+
+  const createFollowUp = useCreateFollowUp();
+  const updateFollowUp = useUpdateFollowUp();
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm<FollowUpFormValues>({
+    resolver: zodResolver(followUpSchema),
+    defaultValues,
+  });
+
+  useEffect(() => {
+    if (followUp && isEdit) {
+      reset({
+        reason: followUp.reason,
+        scheduleDate: followUp.scheduleDate,
+        scheduleStartTime: followUp.scheduleStartTime,
+        employeeId: followUp.employeeId,
+        accountId: followUp.accountId,
+        locationId: followUp.locationId,
+        workOrderId: followUp.workOrderId,
+      });
+    }
+  }, [followUp, isEdit, reset]);
+
+  const employees = employeesData?.items ?? [];
+  const accounts = accountsData?.items ?? [];
+  const locations = locationsData?.items ?? [];
+  const isSaving = createFollowUp.isPending || updateFollowUp.isPending;
+
+  const onSubmit = (values: FollowUpFormValues) => {
+    if (isEdit && id) {
+      updateFollowUp.mutate({ id, values });
+      return;
+    }
+    createFollowUp.mutate(values);
+  };
+
+  if (isEdit && isLoading) {
+    return (
+      <Box className="flex justify-center p-10">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box className="mx-auto max-w-3xl p-4">
+      <Paper variant="outlined" className="p-6">
+        <Stack spacing={4}>
+          <Typography variant="h5">{isEdit ? "Edit Follow-up" : "Create Follow-up"}</Typography>
+
+          {Boolean(error) && (
+            <Alert severity="error">
+              {error instanceof Error ? error.message : "Failed to load follow-up"}
+            </Alert>
+          )}
+
+          <Box component="form" onSubmit={handleSubmit(onSubmit)}>
+            <Stack spacing={3}>
+              <TextField
+                label="Reason"
+                required
+                fullWidth
+                multiline
+                minRows={2}
+                error={Boolean(errors.reason)}
+                helperText={errors.reason?.message}
+                {...register("reason")}
+              />
+
+              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+                <TextField
+                  label="Schedule Date"
+                  type="date"
+                  required
+                  fullWidth
+                  error={Boolean(errors.scheduleDate)}
+                  helperText={errors.scheduleDate?.message}
+                  slotProps={{ inputLabel: { shrink: true } }}
+                  {...register("scheduleDate")}
+                />
+                <TextField
+                  label="Start Time"
+                  type="time"
+                  required
+                  fullWidth
+                  error={Boolean(errors.scheduleStartTime)}
+                  helperText={errors.scheduleStartTime?.message}
+                  slotProps={{ inputLabel: { shrink: true } }}
+                  {...register("scheduleStartTime")}
+                />
+              </Stack>
+
+              <Controller
+                name="employeeId"
+                control={control}
+                render={({ field }) => (
+                  <FormControl fullWidth>
+                    <InputLabel>Assigned Employee</InputLabel>
+                    <Select
+                      label="Assigned Employee"
+                      value={field.value != null ? String(field.value) : ""}
+                      onChange={(e) =>
+                        field.onChange(e.target.value ? Number(e.target.value) : null)
+                      }
+                    >
+                      <MenuItem value="">None</MenuItem>
+                      {employees.map((emp) => (
+                        <MenuItem key={String(emp.id)} value={String(emp.id)}>
+                          {emp.name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+
+              <Controller
+                name="accountId"
+                control={control}
+                render={({ field }) => (
+                  <FormControl fullWidth>
+                    <InputLabel>Account</InputLabel>
+                    <Select
+                      label="Account"
+                      value={field.value != null ? String(field.value) : ""}
+                      onChange={(e) =>
+                        field.onChange(e.target.value ? Number(e.target.value) : null)
+                      }
+                    >
+                      <MenuItem value="">None</MenuItem>
+                      {accounts.map((acc) => (
+                        <MenuItem key={String(acc.id)} value={String(acc.id)}>
+                          {acc.name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+
+              <Controller
+                name="locationId"
+                control={control}
+                render={({ field }) => (
+                  <FormControl fullWidth>
+                    <InputLabel>Location</InputLabel>
+                    <Select
+                      label="Location"
+                      value={field.value != null ? String(field.value) : ""}
+                      onChange={(e) =>
+                        field.onChange(e.target.value ? Number(e.target.value) : null)
+                      }
+                    >
+                      <MenuItem value="">None</MenuItem>
+                      {locations.map((loc) => (
+                        <MenuItem key={String(loc.id)} value={String(loc.id)}>
+                          {loc.name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+
+              <TextField label="Work Order ID" fullWidth {...register("workOrderId")} />
+
+              <Stack
+                direction="row"
+                spacing={2}
+                sx={{
+                  justifyContent: "flex-end",
+                }}
+              >
+                <Button
+                  variant="outlined"
+                  onClick={() => navigate("/followups")}
+                  disabled={isSaving}
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" variant="contained" disabled={isSaving}>
+                  {isSaving ? "Saving..." : isEdit ? "Update" : "Create"}
+                </Button>
+              </Stack>
+            </Stack>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/followups/edit/[id].tsx b/src/app/(protected)/followups/edit/[id].tsx
new file mode 100644
index 00000000..f491a56f
--- /dev/null
+++ b/src/app/(protected)/followups/edit/[id].tsx
@@ -0,0 +1 @@
+export { default } from "../_components/follow-up-form";
diff --git a/src/app/(protected)/followups/index.tsx b/src/app/(protected)/followups/index.tsx
new file mode 100644
index 00000000..30980fc0
--- /dev/null
+++ b/src/app/(protected)/followups/index.tsx
@@ -0,0 +1,255 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import {
+  Alert,
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  FormControl,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TablePagination,
+  TableRow,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import type { FollowUpListItem } from "@/domain/follow-ups/types/follow-up";
+import { useDeleteFollowUp } from "@/domain/follow-ups/use-cases/use-delete-follow-up";
+import { useFollowUpsList } from "@/domain/follow-ups/use-cases/use-follow-ups-list";
+import { useDebounce } from "@/hooks/use-debounce";
+import { toDateInputValue } from "@/lib/time-utils";
+
+const STATUS_OPTIONS = ["Open", "Completed", "Cancelled", ""];
+
+export default function FollowUpsListPage() {
+  const navigate = useNavigate();
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(12);
+  const [status, setStatus] = useState("Open");
+  const [deleteTarget, setDeleteTarget] = useState<FollowUpListItem | null>(null);
+
+  const debouncedSearch = useDebounce(search, 300);
+  const deleteFollowUp = useDeleteFollowUp();
+
+  const listParams = useMemo(
+    () => ({ search: debouncedSearch, page: page + 1, pageSize, status }),
+    [debouncedSearch, page, pageSize, status],
+  );
+
+  const { data, isLoading, isFetching, error } = useFollowUpsList(listParams);
+  const rows = data?.items ?? [];
+  const totalCount = data?.totalCount ?? 0;
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{
+          alignItems: { xs: "stretch", md: "center" },
+          justifyContent: "space-between",
+        }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: "baseline",
+          }}
+        >
+          <Typography variant="h5" component="h1">
+            Follow-ups
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{
+              color: "text.secondary",
+            }}
+          >
+            {totalCount} total
+          </Typography>
+          {isFetching && !isLoading && <CircularProgress size={16} />}
+        </Stack>
+
+        <Stack
+          direction={{ xs: "column", sm: "row" }}
+          spacing={2}
+          sx={{
+            alignItems: "center",
+          }}
+        >
+          <TextField
+            size="small"
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(0);
+            }}
+            placeholder="Search follow-ups..."
+            className="min-w-sidebar"
+          />
+          <FormControl size="small" className="min-w-[140px]">
+            <InputLabel>Status</InputLabel>
+            <Select
+              label="Status"
+              value={status}
+              onChange={(e) => {
+                setStatus(e.target.value);
+                setPage(0);
+              }}
+            >
+              {STATUS_OPTIONS.map((s) => (
+                <MenuItem key={s || "all"} value={s}>
+                  {s || "All"}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <Button variant="contained" onClick={() => navigate("/followups/new")}>
+            + New Follow-up
+          </Button>
+        </Stack>
+      </Stack>
+      {Boolean(error) && (
+        <Alert severity="error">
+          {error instanceof Error ? error.message : "Failed to load follow-ups"}
+        </Alert>
+      )}
+      <TableContainer component={Paper} variant="outlined">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell className="font-semibold">Reason</TableCell>
+              <TableCell className="font-semibold">Schedule</TableCell>
+              <TableCell className="font-semibold">Assigned To</TableCell>
+              <TableCell className="font-semibold">Account</TableCell>
+              <TableCell className="font-semibold">Location</TableCell>
+              <TableCell className="font-semibold">WO #</TableCell>
+              <TableCell className="font-semibold">Status</TableCell>
+              <TableCell align="right" className="font-semibold">
+                Actions
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={8} align="center" className="py-10">
+                  <CircularProgress size={28} />
+                </TableCell>
+              </TableRow>
+            ) : rows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={8} align="center" className="py-10">
+                  <Typography
+                    sx={{
+                      color: "text.secondary",
+                    }}
+                  >
+                    No follow-ups found
+                  </Typography>
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((row) => (
+                <TableRow key={String(row.id)} hover>
+                  <TableCell>
+                    <Button
+                      variant="text"
+                      size="small"
+                      className="font-semibold"
+                      onClick={() => navigate(`/followups/edit/${row.id}`)}
+                    >
+                      {row.reason || "—"}
+                    </Button>
+                  </TableCell>
+                  <TableCell>
+                    {toDateInputValue(row.scheduleDate) || "—"}
+                    {row.scheduleStartTime ? ` ${row.scheduleStartTime.slice(0, 5)}` : ""}
+                  </TableCell>
+                  <TableCell>{row.assignedTo || "—"}</TableCell>
+                  <TableCell>{row.accountName || "—"}</TableCell>
+                  <TableCell>{row.locationName || "—"}</TableCell>
+                  <TableCell>{row.internalWONumber || row.workOrderNumber || "—"}</TableCell>
+                  <TableCell>
+                    <Chip size="small" label={row.status || "—"} />
+                  </TableCell>
+                  <TableCell align="right">
+                    <Tooltip title="Edit">
+                      <IconButton
+                        size="small"
+                        onClick={() => navigate(`/followups/edit/${row.id}`)}
+                      >
+                        <EditOutlinedIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                    <Tooltip title="Delete">
+                      <IconButton size="small" onClick={() => setDeleteTarget(row)}>
+                        <DeleteOutlineIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        component="div"
+        count={totalCount}
+        page={page}
+        onPageChange={(_e, nextPage) => setPage(nextPage)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(e) => {
+          setPageSize(Number(e.target.value));
+          setPage(0);
+        }}
+        rowsPerPageOptions={[12, 24, 48]}
+      />
+      <Dialog open={Boolean(deleteTarget)} onClose={() => setDeleteTarget(null)}>
+        <DialogTitle>Delete Follow-up</DialogTitle>
+        <DialogContent>
+          <DialogContentText>Are you sure you want to delete this follow-up?</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeleteTarget(null)} disabled={deleteFollowUp.isPending}>
+            Cancel
+          </Button>
+          <Button
+            color="error"
+            variant="contained"
+            disabled={deleteFollowUp.isPending}
+            onClick={() => {
+              if (!deleteTarget) return;
+              deleteFollowUp.mutate(deleteTarget.id, {
+                onSuccess: () => setDeleteTarget(null),
+              });
+            }}
+          >
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/followups/new.tsx b/src/app/(protected)/followups/new.tsx
new file mode 100644
index 00000000..b1223e90
--- /dev/null
+++ b/src/app/(protected)/followups/new.tsx
@@ -0,0 +1 @@
+export { default } from "./_components/follow-up-form";
diff --git a/src/app/(protected)/index.tsx b/src/app/(protected)/index.tsx
new file mode 100644
index 00000000..b32a2d05
--- /dev/null
+++ b/src/app/(protected)/index.tsx
@@ -0,0 +1,5 @@
+import DashboardPage from "@/app/(protected)/dashboard";
+
+export default function HomePage() {
+  return <DashboardPage />;
+}
diff --git a/src/app/(protected)/locations/_components/area-facet.tsx b/src/app/(protected)/locations/_components/area-facet.tsx
new file mode 100644
index 00000000..2e41da3e
--- /dev/null
+++ b/src/app/(protected)/locations/_components/area-facet.tsx
@@ -0,0 +1,22 @@
+import { Autocomplete, TextField } from "@mui/material";
+import { AREA_ZONES, type AreaZone } from "@/data/areas";
+
+interface AreaFacetProps {
+  value: AreaZone[];
+  onChange: (zones: AreaZone[]) => void;
+}
+
+/** Multi-select area facet; an empty selection means no area filtering. */
+export function AreaFacet({ value, onChange }: AreaFacetProps) {
+  return (
+    <Autocomplete<AreaZone, true, false, false>
+      multiple
+      size="small"
+      className="min-w-[200px]"
+      options={AREA_ZONES}
+      value={value}
+      onChange={(_event, zones) => onChange(zones)}
+      renderInput={(params) => <TextField {...params} label="Area" placeholder="All areas" />}
+    />
+  );
+}
diff --git a/src/app/(protected)/locations/_components/location-contacts-field-array.tsx b/src/app/(protected)/locations/_components/location-contacts-field-array.tsx
new file mode 100644
index 00000000..9053cbe4
--- /dev/null
+++ b/src/app/(protected)/locations/_components/location-contacts-field-array.tsx
@@ -0,0 +1,237 @@
+import { useCallback, useRef, useState, type KeyboardEvent } from "react";
+import {
+  useFieldArray,
+  type Control,
+  type FieldErrors,
+  type UseFormRegister,
+} from "react-hook-form";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import {
+  Box,
+  Button,
+  Chip,
+  IconButton,
+  Paper,
+  Stack,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import type {
+  LocationContactFormValues,
+  LocationFormValues,
+} from "@/domain/locations/schemas/location-schema";
+
+interface ContactRowProps {
+  canRemove: boolean;
+  dragIndex: number | null;
+  errors: FieldErrors<LocationContactFormValues>;
+  fieldId: string;
+  index: number;
+  isLast: boolean;
+  register: UseFormRegister<LocationFormValues>;
+  onDragEnd: () => void;
+  onDragStart: (index: number) => void;
+  onDrop: (index: number) => void;
+  onRemove: (index: number) => void;
+  onKeyboardMove: (from: number, to: number) => void;
+}
+
+function ContactRow({
+  canRemove,
+  dragIndex,
+  errors,
+  fieldId,
+  index,
+  isLast,
+  register,
+  onDragEnd,
+  onDragStart,
+  onDrop,
+  onRemove,
+  onKeyboardMove,
+}: ContactRowProps) {
+  const handleRef = useRef<HTMLSpanElement | null>(null);
+  const isDragging = dragIndex === index;
+  const isDropTarget = dragIndex !== null && dragIndex !== index;
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => {
+    if (event.key === "ArrowUp" && index > 0) {
+      event.preventDefault();
+      onKeyboardMove(index, index - 1);
+    }
+    if (event.key === "ArrowDown" && !isLast) {
+      event.preventDefault();
+      onKeyboardMove(index, index + 1);
+    }
+  };
+
+  return (
+    <Paper
+      variant="outlined"
+      component="div"
+      onDragOver={(event) => {
+        if (dragIndex !== null) {
+          event.preventDefault();
+        }
+      }}
+      onDrop={(event) => {
+        event.preventDefault();
+        onDrop(index);
+      }}
+      className="transition-opacity"
+      sx={{ opacity: isDragging ? 0.5 : 1, borderStyle: isDropTarget ? "dashed" : "solid" }}
+    >
+      <Stack
+        direction={{ xs: "column", sm: "row" }}
+        spacing={1.5}
+        sx={{ alignItems: "center", p: 1.5 }}
+      >
+        <Tooltip title="Drag to reorder. Use arrow keys to move up or down.">
+          <Box
+            component="span"
+            ref={handleRef}
+            role="button"
+            tabIndex={0}
+            aria-label={`Reorder contact ${index + 1}. Use arrow up or down to move.`}
+            draggable
+            data-field-id={fieldId}
+            onDragStart={(event) => {
+              event.dataTransfer.effectAllowed = "move";
+              event.dataTransfer.setData("text/plain", String(index));
+              onDragStart(index);
+            }}
+            onDragEnd={onDragEnd}
+            onKeyDown={handleKeyDown}
+            sx={{ cursor: "grab", display: "inline-flex", color: "text.secondary" }}
+          >
+            <DragIndicatorIcon fontSize="small" />
+          </Box>
+        </Tooltip>
+        {index === 0 && <Chip label="Main" size="small" color="primary" variant="outlined" />}
+        <TextField
+          {...register(`contacts.${index}.name` as const)}
+          label={index === 0 ? "Contact Name (Main)" : "Contact Name"}
+          required
+          error={Boolean(errors?.name)}
+          helperText={errors?.name?.message}
+          fullWidth
+          size="small"
+          slotProps={{ htmlInput: { maxLength: 100 } }}
+        />
+        <TextField
+          {...register(`contacts.${index}.phone` as const)}
+          label="Phone"
+          required
+          error={Boolean(errors?.phone)}
+          helperText={errors?.phone?.message}
+          fullWidth
+          size="small"
+          slotProps={{ htmlInput: { maxLength: 20 } }}
+        />
+        <Tooltip title={canRemove ? "Remove" : "At least one contact is required"}>
+          <span>
+            <IconButton
+              size="small"
+              aria-label={`Remove contact ${index + 1}`}
+              disabled={!canRemove}
+              onClick={() => onRemove(index)}
+            >
+              <DeleteOutlineIcon fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </Stack>
+    </Paper>
+  );
+}
+
+interface LocationContactsFieldArrayProps {
+  control: Control<LocationFormValues>;
+  errors: FieldErrors<LocationFormValues>;
+  register: UseFormRegister<LocationFormValues>;
+}
+
+export function LocationContactsFieldArray({
+  control,
+  errors,
+  register,
+}: LocationContactsFieldArrayProps) {
+  const { fields, append, remove, move } = useFieldArray({
+    control,
+    name: "contacts",
+    keyName: "fieldKey",
+  });
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  const focusHandle = useCallback((fieldId: string) => {
+    requestAnimationFrame(() => {
+      const handle = rootRef.current?.querySelector<HTMLElement>(`[data-field-id="${fieldId}"]`);
+      handle?.focus();
+    });
+  }, []);
+
+  const handleKeyboardMove = useCallback(
+    (from: number, to: number) => {
+      if (to < 0 || to >= fields.length) {
+        return;
+      }
+      const fieldId = fields[from]?.fieldKey;
+      move(from, to);
+      if (fieldId) {
+        focusHandle(fieldId);
+      }
+    },
+    [fields, move, focusHandle],
+  );
+
+  const handleDrop = useCallback(
+    (index: number) => {
+      if (dragIndex !== null && dragIndex !== index) {
+        move(dragIndex, index);
+      }
+      setDragIndex(null);
+    },
+    [dragIndex, move],
+  );
+
+  return (
+    <Box ref={rootRef}>
+      <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
+        <Typography variant="subtitle2" className="font-semibold uppercase">
+          Contacts
+        </Typography>
+        <Button
+          size="small"
+          variant="text"
+          startIcon={<AddIcon fontSize="small" />}
+          onClick={() => append({ name: "", phone: "" })}
+        >
+          Add Contact
+        </Button>
+      </Stack>
+      <Stack spacing={1.5} className="mt-2">
+        {fields.map((field, index) => (
+          <ContactRow
+            key={field.fieldKey}
+            canRemove={fields.length > 1}
+            dragIndex={dragIndex}
+            errors={errors.contacts?.[index] ?? {}}
+            fieldId={field.fieldKey}
+            index={index}
+            isLast={index === fields.length - 1}
+            register={register}
+            onDragEnd={() => setDragIndex(null)}
+            onDragStart={setDragIndex}
+            onDrop={handleDrop}
+            onRemove={remove}
+            onKeyboardMove={handleKeyboardMove}
+          />
+        ))}
+      </Stack>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/locations/_components/location-delete-dialog.tsx b/src/app/(protected)/locations/_components/location-delete-dialog.tsx
new file mode 100644
index 00000000..0b02c348
--- /dev/null
+++ b/src/app/(protected)/locations/_components/location-delete-dialog.tsx
@@ -0,0 +1,42 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import type { LocationListItem } from "@/domain/locations/types/location";
+
+interface LocationDeleteDialogProps {
+  isPending: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  target: LocationListItem | null;
+}
+
+export function LocationDeleteDialog({
+  isPending,
+  onClose,
+  onConfirm,
+  target,
+}: LocationDeleteDialogProps) {
+  return (
+    <Dialog open={Boolean(target)} onClose={onClose}>
+      <DialogTitle>Delete Location</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          Are you sure you want to delete &quot;{target?.name}&quot;? This action cannot be undone.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} disabled={isPending}>
+          Cancel
+        </Button>
+        <Button color="error" variant="contained" onClick={onConfirm} disabled={isPending}>
+          {isPending ? "Deleting..." : "Delete"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/locations/_components/location-form-fields.tsx b/src/app/(protected)/locations/_components/location-form-fields.tsx
new file mode 100644
index 00000000..39f22296
--- /dev/null
+++ b/src/app/(protected)/locations/_components/location-form-fields.tsx
@@ -0,0 +1,143 @@
+import { Controller, type Control, type FieldErrors, type UseFormRegister } from "react-hook-form";
+import {
+  Autocomplete,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import type { AccountListItem } from "@/domain/accounts/types/account";
+import type { LocationFormValues } from "@/domain/locations/schemas/location-schema";
+import { LOCATION_STATUS_OPTIONS } from "@/domain/locations/types/location";
+import { LocationContactsFieldArray } from "./location-contacts-field-array";
+import { StateSelect } from "./state-select";
+
+interface SharedFieldsProps {
+  control: Control<LocationFormValues>;
+  errors: FieldErrors<LocationFormValues>;
+  register: UseFormRegister<LocationFormValues>;
+}
+
+interface LocationDetailsFieldsProps extends SharedFieldsProps {
+  accountOptions: AccountListItem[];
+  isLoadingAccounts: boolean;
+  onAccountSearchChange: (value: string) => void;
+}
+
+export function LocationDetailsFields({
+  accountOptions,
+  control,
+  errors,
+  isLoadingAccounts,
+  onAccountSearchChange,
+  register,
+}: LocationDetailsFieldsProps) {
+  return (
+    <Stack spacing={2}>
+      <Typography variant="subtitle1" className="font-semibold">
+        Location Information
+      </Typography>
+      <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+        <TextField
+          {...register("name")}
+          label="Name"
+          required
+          error={Boolean(errors.name)}
+          helperText={errors.name?.message}
+          fullWidth
+        />
+        <Controller
+          name="accountId"
+          control={control}
+          render={({ field }) => (
+            <Autocomplete
+              options={accountOptions}
+              loading={isLoadingAccounts}
+              getOptionLabel={(option: AccountListItem) => option.name || String(option.id)}
+              isOptionEqualToValue={(option, value) => String(option.id) === String(value.id)}
+              value={accountOptions.find((account) => String(account.id) === field.value) ?? null}
+              onChange={(_event, option) => field.onChange(option ? String(option.id) : "")}
+              onInputChange={(_event, value, reason) => {
+                if (reason === "input") {
+                  onAccountSearchChange(value);
+                }
+              }}
+              renderInput={(params) => (
+                <TextField {...params} label="Account" placeholder="Search accounts..." />
+              )}
+              className="flex-1"
+            />
+          )}
+        />
+      </Stack>
+      <TextField
+        {...register("address")}
+        label="Address"
+        required
+        error={Boolean(errors.address)}
+        helperText={errors.address?.message}
+        fullWidth
+      />
+      <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+        <TextField
+          {...register("city")}
+          label="City"
+          required
+          error={Boolean(errors.city)}
+          helperText={errors.city?.message}
+          fullWidth
+        />
+        <StateSelect control={control} error={errors.state} />
+        <TextField
+          {...register("zipCode")}
+          label="Zip Code"
+          required
+          error={Boolean(errors.zipCode)}
+          helperText={errors.zipCode?.message}
+          fullWidth
+        />
+      </Stack>
+    </Stack>
+  );
+}
+
+export function LocationContactFields({ control, errors, register }: SharedFieldsProps) {
+  return (
+    <Stack spacing={2}>
+      <Typography variant="subtitle1" className="font-semibold">
+        Contact Information
+      </Typography>
+      <LocationContactsFieldArray control={control} errors={errors} register={register} />
+      <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+        <TextField
+          {...register("contactEmail")}
+          label="Contact Email"
+          type="email"
+          required
+          error={Boolean(errors.contactEmail)}
+          helperText={errors.contactEmail?.message}
+          fullWidth
+        />
+        <Controller
+          name="status"
+          control={control}
+          render={({ field }) => (
+            <FormControl fullWidth required error={Boolean(errors.status)}>
+              <InputLabel id="status-label">Status</InputLabel>
+              <Select {...field} labelId="status-label" label="Status" value={field.value}>
+                {LOCATION_STATUS_OPTIONS.map((status) => (
+                  <MenuItem key={status} value={status}>
+                    {status}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+        />
+      </Stack>
+    </Stack>
+  );
+}
diff --git a/src/app/(protected)/locations/_components/location-form.tsx b/src/app/(protected)/locations/_components/location-form.tsx
new file mode 100644
index 00000000..b410d43d
--- /dev/null
+++ b/src/app/(protected)/locations/_components/location-form.tsx
@@ -0,0 +1,141 @@
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate, useParams } from "react-router";
+import { Alert, Box, Button, CircularProgress, Paper, Stack, Typography } from "@mui/material";
+import { useAccountsList } from "@/domain/accounts/use-cases/use-accounts-list";
+import { normalizeStateCode } from "@/data/areas";
+import {
+  locationDefaultValues,
+  locationSchema,
+  type LocationFormValues,
+} from "@/domain/locations/schemas/location-schema";
+import { useCreateLocation } from "@/domain/locations/use-cases/use-create-location";
+import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
+import { useUpdateLocation } from "@/domain/locations/use-cases/use-update-location";
+import { useDebounce } from "@/hooks/use-debounce";
+import { LocationContactFields, LocationDetailsFields } from "./location-form-fields";
+
+export default function LocationFormPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const isEdit = Boolean(id);
+
+  const [accountSearch, setAccountSearch] = useState("");
+  const debouncedAccountSearch = useDebounce(accountSearch, 300);
+
+  const { data: location, isLoading, error } = useLocationDetail(id);
+  const { data: accountsData, isLoading: isLoadingAccounts } = useAccountsList({
+    search: debouncedAccountSearch,
+    page: 1,
+    pageSize: 50,
+  });
+  const createLocation = useCreateLocation();
+  const updateLocation = useUpdateLocation();
+
+  const accountOptions = useMemo(() => accountsData?.items ?? [], [accountsData?.items]);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm<LocationFormValues>({
+    resolver: zodResolver(locationSchema),
+    defaultValues: locationDefaultValues,
+  });
+
+  useEffect(() => {
+    if (location && isEdit) {
+      reset({
+        name: location.name ?? "",
+        accountId: location.accountId != null ? String(location.accountId) : "",
+        address: location.address ?? "",
+        city: location.city ?? "",
+        state: normalizeStateCode(location.state) ?? "",
+        zipCode: location.zipCode ?? "",
+        contacts:
+          location.contacts && location.contacts.length > 0
+            ? location.contacts
+            : [{ name: location.contact ?? "", phone: location.phone ?? "" }],
+        contactEmail: location.contactEmail ?? "",
+        status: (location.status as LocationFormValues["status"]) || "Active",
+      });
+    }
+  }, [location, isEdit, reset]);
+
+  const isSaving = createLocation.isPending || updateLocation.isPending;
+
+  const onSubmit = (values: LocationFormValues) => {
+    if (isEdit && id) {
+      updateLocation.mutate({ id, values });
+      return;
+    }
+    createLocation.mutate(values);
+  };
+
+  if (isEdit && isLoading) {
+    return (
+      <Box className="flex justify-center p-10">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box className="mx-auto max-w-4xl p-4">
+      <Paper variant="outlined" className="p-6">
+        <Stack spacing={4}>
+          <Stack
+            direction="row"
+            sx={{
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <Typography variant="h5" component="h1">
+              {isEdit ? "Edit Location" : "Create a Location"}
+            </Typography>
+            <Button variant="text" onClick={() => navigate("/locations")}>
+              Back to list
+            </Button>
+          </Stack>
+
+          {Boolean(error) && (
+            <Alert severity="error">
+              {error instanceof Error ? error.message : "Failed to load location"}
+            </Alert>
+          )}
+
+          <Box component="form" onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
+            <LocationDetailsFields
+              accountOptions={accountOptions}
+              control={control}
+              errors={errors}
+              isLoadingAccounts={isLoadingAccounts}
+              onAccountSearchChange={setAccountSearch}
+              register={register}
+            />
+            <LocationContactFields control={control} errors={errors} register={register} />
+
+            <Stack
+              direction="row"
+              spacing={2}
+              sx={{
+                justifyContent: "flex-end",
+              }}
+            >
+              <Button variant="outlined" onClick={() => navigate("/locations")} disabled={isSaving}>
+                Cancel
+              </Button>
+              <Button type="submit" variant="contained" disabled={isSaving}>
+                {isSaving ? "Saving..." : isEdit ? "Update Location" : "Create Location"}
+              </Button>
+            </Stack>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/locations/_components/locations-contacts-cell.tsx b/src/app/(protected)/locations/_components/locations-contacts-cell.tsx
new file mode 100644
index 00000000..60a15f27
--- /dev/null
+++ b/src/app/(protected)/locations/_components/locations-contacts-cell.tsx
@@ -0,0 +1,46 @@
+import { Chip, Stack, Tooltip, Typography } from "@mui/material";
+import type { LocationListItem } from "@/domain/locations/types/location";
+
+/** Main contact name with a `+N` chip; hover/focus lists the remaining contact names. */
+export function LocationsContactsCell({ row }: { row: LocationListItem }) {
+  const contacts = row.contacts ?? [];
+  const mainName = row.contact || contacts[0]?.name || "";
+  const remainingNames = contacts
+    .slice(1)
+    .map((contact) => contact.name.trim())
+    .filter((name) => name !== "");
+
+  if (mainName === "") {
+    return (
+      <Typography variant="body2" component="span">
+        —
+      </Typography>
+    );
+  }
+
+  if (remainingNames.length === 0) {
+    return (
+      <Typography variant="body2" component="span">
+        {mainName}
+      </Typography>
+    );
+  }
+
+  const remainingLabel = remainingNames.join(", ");
+
+  return (
+    <Stack direction="row" spacing={0.5} sx={{ alignItems: "center" }}>
+      <Typography variant="body2" component="span">
+        {mainName}
+      </Typography>
+      <Tooltip title={remainingLabel}>
+        <Chip
+          label={`+${remainingNames.length}`}
+          size="small"
+          tabIndex={0}
+          aria-label={`${remainingNames.length} more contacts: ${remainingLabel}`}
+        />
+      </Tooltip>
+    </Stack>
+  );
+}
diff --git a/src/app/(protected)/locations/_components/locations-table.tsx b/src/app/(protected)/locations/_components/locations-table.tsx
new file mode 100644
index 00000000..bfd36118
--- /dev/null
+++ b/src/app/(protected)/locations/_components/locations-table.tsx
@@ -0,0 +1,105 @@
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import {
+  Button,
+  CircularProgress,
+  IconButton,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import type { LocationListItem } from "@/domain/locations/types/location";
+import { LocationsContactsCell } from "./locations-contacts-cell";
+import { StateAreaCell } from "./state-area-cell";
+
+interface LocationsTableProps {
+  isLoading: boolean;
+  onDelete: (row: LocationListItem) => void;
+  onEdit: (row: LocationListItem) => void;
+  rows: LocationListItem[];
+}
+
+export function LocationsTable({ isLoading, onDelete, onEdit, rows }: LocationsTableProps) {
+  return (
+    <TableContainer component={Paper} variant="outlined">
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell className="font-semibold">Location Name</TableCell>
+            <TableCell className="font-semibold">Address</TableCell>
+            <TableCell className="font-semibold">City</TableCell>
+            <TableCell className="font-semibold">State</TableCell>
+            <TableCell className="font-semibold">Phone</TableCell>
+            <TableCell className="font-semibold">Contact</TableCell>
+            <TableCell className="font-semibold">Status</TableCell>
+            <TableCell align="right" className="font-semibold">
+              Actions
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {isLoading ? (
+            <TableRow>
+              <TableCell colSpan={8} align="center" className="py-10">
+                <CircularProgress size={28} />
+              </TableCell>
+            </TableRow>
+          ) : rows.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={8} align="center" className="py-10">
+                <Typography sx={{ color: "text.secondary" }}>No locations found</Typography>
+              </TableCell>
+            </TableRow>
+          ) : (
+            rows.map((row) => (
+              <TableRow key={String(row.id)} hover>
+                <TableCell>
+                  <Button
+                    variant="text"
+                    size="small"
+                    className="font-semibold"
+                    onClick={() => onEdit(row)}
+                  >
+                    {row.name || "—"}
+                  </Button>
+                </TableCell>
+                <TableCell>{row.address || "—"}</TableCell>
+                <TableCell>{row.city || "—"}</TableCell>
+                <TableCell>
+                  <StateAreaCell state={row.state} />
+                </TableCell>
+                <TableCell>{row.phone || "—"}</TableCell>
+                <TableCell>
+                  <LocationsContactsCell row={row} />
+                </TableCell>
+                <TableCell>{row.status || "—"}</TableCell>
+                <TableCell align="right">
+                  <Tooltip title="Edit">
+                    <IconButton size="small" aria-label="Edit location" onClick={() => onEdit(row)}>
+                      <EditOutlinedIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title="Delete">
+                    <IconButton
+                      size="small"
+                      aria-label="Delete location"
+                      onClick={() => onDelete(row)}
+                    >
+                      <DeleteOutlineIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/src/app/(protected)/locations/_components/state-area-cell.tsx b/src/app/(protected)/locations/_components/state-area-cell.tsx
new file mode 100644
index 00000000..cf5d5e4f
--- /dev/null
+++ b/src/app/(protected)/locations/_components/state-area-cell.tsx
@@ -0,0 +1,35 @@
+import { Stack, Typography } from "@mui/material";
+import { getAreaForState, normalizeStateCode } from "@/data/areas";
+
+/** State abbreviation with the derived area as secondary text. */
+export function StateAreaCell({ state }: { state?: string | null }) {
+  const code = normalizeStateCode(state);
+  const area = code === null ? null : getAreaForState(code);
+
+  if (code === null) {
+    return (
+      <Typography variant="body2" component="span">
+        {state?.trim() || "—"}
+      </Typography>
+    );
+  }
+
+  return (
+    <Stack spacing={0}>
+      <Typography variant="body2" component="span">
+        {code}
+      </Typography>
+      {area !== null && (
+        <Typography
+          variant="caption"
+          component="span"
+          sx={{
+            color: "text.secondary",
+          }}
+        >
+          {area}
+        </Typography>
+      )}
+    </Stack>
+  );
+}
diff --git a/src/app/(protected)/locations/_components/state-select.tsx b/src/app/(protected)/locations/_components/state-select.tsx
new file mode 100644
index 00000000..3348019a
--- /dev/null
+++ b/src/app/(protected)/locations/_components/state-select.tsx
@@ -0,0 +1,49 @@
+import { Controller, type Control, type FieldError } from "react-hook-form";
+import { Autocomplete, TextField } from "@mui/material";
+import {
+  US_STATE_CODES,
+  formatStateOptionLabel,
+  getAreaForState,
+  type StateCode,
+} from "@/data/areas";
+import type { LocationFormValues } from "@/domain/locations/schemas/location-schema";
+
+interface StateSelectProps {
+  control: Control<LocationFormValues>;
+  error?: FieldError;
+}
+
+/** Searchable, non-free-text state picker with derived area helper text. */
+export function StateSelect({ control, error }: StateSelectProps) {
+  return (
+    <Controller
+      name="state"
+      control={control}
+      render={({ field }) => {
+        const selected: StateCode | null =
+          US_STATE_CODES.find((code) => code === field.value) ?? null;
+        const area = selected === null ? null : getAreaForState(selected);
+        const helperText = error?.message ?? (area === null ? undefined : `Area: ${area}`);
+
+        return (
+          <Autocomplete<StateCode>
+            options={US_STATE_CODES}
+            value={selected}
+            onChange={(_event, option) => field.onChange(option ?? "")}
+            onBlur={field.onBlur}
+            getOptionLabel={formatStateOptionLabel}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                label="State"
+                required
+                error={Boolean(error)}
+                helperText={helperText}
+              />
+            )}
+          />
+        );
+      }}
+    />
+  );
+}
diff --git a/src/app/(protected)/locations/edit/[id].tsx b/src/app/(protected)/locations/edit/[id].tsx
new file mode 100644
index 00000000..f25ea225
--- /dev/null
+++ b/src/app/(protected)/locations/edit/[id].tsx
@@ -0,0 +1 @@
+export { default } from "../_components/location-form";
diff --git a/src/app/(protected)/locations/index.tsx b/src/app/(protected)/locations/index.tsx
new file mode 100644
index 00000000..79674137
--- /dev/null
+++ b/src/app/(protected)/locations/index.tsx
@@ -0,0 +1,151 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Stack,
+  TablePagination,
+  TextField,
+  Typography,
+} from "@mui/material";
+import type { LocationListItem } from "@/domain/locations/types/location";
+import { useDeleteLocation } from "@/domain/locations/use-cases/use-delete-location";
+import { useLocationsList } from "@/domain/locations/use-cases/use-locations-list";
+import { useDebounce } from "@/hooks/use-debounce";
+import { expandAreasToStateCodes, type AreaZone } from "@/data/areas";
+import { AreaFacet } from "./_components/area-facet";
+import { LocationDeleteDialog } from "./_components/location-delete-dialog";
+import { LocationsTable } from "./_components/locations-table";
+
+export default function LocationsListPage() {
+  const navigate = useNavigate();
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(12);
+  const [selectedAreas, setSelectedAreas] = useState<AreaZone[]>([]);
+  const [deleteTarget, setDeleteTarget] = useState<LocationListItem | null>(null);
+
+  const debouncedSearch = useDebounce(search, 300);
+  const deleteLocation = useDeleteLocation();
+
+  const stateCodes = useMemo(() => expandAreasToStateCodes(selectedAreas), [selectedAreas]);
+
+  const listParams = useMemo(
+    () => ({
+      search: debouncedSearch,
+      page: page + 1,
+      pageSize,
+      states: stateCodes.length > 0 ? stateCodes : undefined,
+    }),
+    [debouncedSearch, page, pageSize, stateCodes],
+  );
+
+  const { data, isLoading, isFetching, error } = useLocationsList(listParams);
+
+  const rows = data?.items ?? [];
+  const totalCount = data?.totalCount ?? 0;
+
+  const handleDeleteConfirm = () => {
+    if (!deleteTarget) {
+      return;
+    }
+
+    deleteLocation.mutate(deleteTarget.id, {
+      onSuccess: () => setDeleteTarget(null),
+    });
+  };
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{
+          alignItems: { xs: "stretch", md: "center" },
+          justifyContent: "space-between",
+        }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: "baseline",
+          }}
+        >
+          <Typography variant="h5" component="h1">
+            Locations
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{
+              color: "text.secondary",
+            }}
+          >
+            {totalCount} total
+          </Typography>
+          {isFetching && !isLoading && <CircularProgress size={16} />}
+        </Stack>
+
+        <Stack
+          direction={{ xs: "column", sm: "row" }}
+          spacing={2}
+          sx={{
+            alignItems: "center",
+          }}
+        >
+          <AreaFacet
+            value={selectedAreas}
+            onChange={(zones) => {
+              setSelectedAreas(zones);
+              setPage(0);
+            }}
+          />
+          <TextField
+            size="small"
+            value={search}
+            onChange={(event) => {
+              setSearch(event.target.value);
+              setPage(0);
+            }}
+            placeholder="Search locations..."
+            className="min-w-[220px]"
+          />
+          <Button variant="contained" onClick={() => navigate("/locations/new")}>
+            + New Location
+          </Button>
+        </Stack>
+      </Stack>
+      {Boolean(error) && (
+        <Alert severity="error">
+          {error instanceof Error ? error.message : "Failed to load locations"}
+        </Alert>
+      )}
+      <LocationsTable
+        isLoading={isLoading}
+        rows={rows}
+        onEdit={(row) => navigate(`/locations/edit/${row.id}`)}
+        onDelete={setDeleteTarget}
+      />
+      <TablePagination
+        component="div"
+        count={totalCount}
+        page={page}
+        onPageChange={(_event, nextPage) => setPage(nextPage)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(event) => {
+          setPageSize(Number(event.target.value));
+          setPage(0);
+        }}
+        rowsPerPageOptions={[12, 24, 48]}
+      />
+      <LocationDeleteDialog
+        target={deleteTarget}
+        isPending={deleteLocation.isPending}
+        onClose={() => setDeleteTarget(null)}
+        onConfirm={handleDeleteConfirm}
+      />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/locations/new.tsx b/src/app/(protected)/locations/new.tsx
new file mode 100644
index 00000000..da675675
--- /dev/null
+++ b/src/app/(protected)/locations/new.tsx
@@ -0,0 +1 @@
+export { default } from "./_components/location-form";
diff --git a/src/app/(protected)/notifications/index.tsx b/src/app/(protected)/notifications/index.tsx
new file mode 100644
index 00000000..c4e0b75e
--- /dev/null
+++ b/src/app/(protected)/notifications/index.tsx
@@ -0,0 +1,104 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  Alert,
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Paper,
+  Stack,
+  Typography,
+} from "@mui/material";
+import { Link } from "react-router";
+import { vendorOperationsApi } from "@/domain/vendor-operations/api/vendor-operations-api";
+
+export default function NotificationsPage() {
+  const {
+    data = [],
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["vendor-operations", "notifications"],
+    queryFn: vendorOperationsApi.notifications,
+    refetchInterval: 30_000,
+  });
+
+  const groups = data.reduce((result, item) => {
+    const items = result.get(item.group) ?? [];
+    items.push(item);
+    result.set(item.group, items);
+    return result;
+  }, new Map<string, typeof data>());
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <Box>
+        <Typography variant="h5" component="h1">
+          Items requiring attention
+        </Typography>
+        <Typography color="text.secondary">
+          Medium-severity vendor reminders refresh automatically. They do not create banners or
+          toasts.
+        </Typography>
+      </Box>
+      {isLoading && <CircularProgress aria-label="Loading notifications" />}
+      {Boolean(error) && <Alert severity="error">{error?.message}</Alert>}
+      {!isLoading && !error && data.length === 0 && (
+        <Paper variant="outlined" className="p-6">
+          <Typography>No vendor alerts require attention.</Typography>
+        </Paper>
+      )}
+      {[...groups.entries()].map(([group, items]) => (
+        <Paper key={group} variant="outlined" className="p-4">
+          <Stack direction="row" spacing={1} className="mb-3" sx={{ alignItems: "center" }}>
+            <Typography variant="h6">{group}</Typography>
+            <Chip label={items.length} size="small" />
+          </Stack>
+          <Stack spacing={2}>
+            {items.map((item) => (
+              <Paper key={item.id} variant="outlined" className="p-3">
+                <Stack
+                  direction={{ xs: "column", md: "row" }}
+                  sx={{ gap: 2, justifyContent: "space-between" }}
+                >
+                  <Box>
+                    <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+                      <Chip label={item.severity} color="warning" size="small" />
+                      <Typography sx={{ fontWeight: 600 }}>{item.title}</Typography>
+                    </Stack>
+                    <Typography color="text.secondary" className="mt-1">
+                      {item.workOrderNumber ??
+                        item.workOrders?.map((workOrder) => workOrder.workOrderNumber).join(" ↔ ")}
+                    </Typography>
+                    {item.scheduledAt != null && (
+                      <Typography variant="caption">
+                        Scheduled {new Date(item.scheduledAt).toLocaleString()}
+                      </Typography>
+                    )}
+                  </Box>
+                  <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+                    {item.action != null && (
+                      <Button component={Link} to={item.action.href} variant="contained">
+                        {item.action.label}
+                      </Button>
+                    )}
+                    {item.actions?.map((action) => (
+                      <Button
+                        key={action.href}
+                        component={Link}
+                        to={action.href}
+                        variant="outlined"
+                      >
+                        {action.label}
+                      </Button>
+                    ))}
+                  </Stack>
+                </Stack>
+              </Paper>
+            ))}
+          </Stack>
+        </Paper>
+      ))}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/pmschedules/_components/pm-schedule-form.tsx b/src/app/(protected)/pmschedules/_components/pm-schedule-form.tsx
new file mode 100644
index 00000000..0253a149
--- /dev/null
+++ b/src/app/(protected)/pmschedules/_components/pm-schedule-form.tsx
@@ -0,0 +1,216 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate, useParams } from "react-router";
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  FormControl,
+  FormControlLabel,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  Stack,
+  Switch,
+  TextField,
+  Typography,
+} from "@mui/material";
+import {
+  pmScheduleDefaultValues,
+  pmScheduleSchema,
+  type PmScheduleFormValues,
+} from "@/domain/pm-schedules/schemas/pm-schedule-schema";
+import { usePmScheduleDetail } from "@/domain/pm-schedules/use-cases/use-pm-schedule-detail";
+import { usePmScheduleFormOptions } from "@/domain/pm-schedules/use-cases/use-pm-schedule-form-options";
+import { useSavePmSchedule } from "@/domain/pm-schedules/use-cases/use-save-pm-schedule";
+import { toDateInputValue } from "@/lib/time-utils";
+
+export default function PmScheduleFormPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const isEdit = Boolean(id);
+
+  const { data: schedule, isLoading, error } = usePmScheduleDetail(id);
+  const {
+    assets,
+    locations,
+    isLoading: optionsLoading,
+    error: optionsError,
+  } = usePmScheduleFormOptions();
+  const savePmSchedule = useSavePmSchedule(id);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm<PmScheduleFormValues>({
+    resolver: zodResolver(pmScheduleSchema),
+    defaultValues: pmScheduleDefaultValues,
+  });
+
+  useEffect(() => {
+    if (schedule && isEdit) {
+      reset({
+        name: schedule.name,
+        frequency: schedule.frequency as PmScheduleFormValues["frequency"],
+        startDate: toDateInputValue(schedule.startDate),
+        isActive: schedule.isActive,
+        assetId: schedule.assetId,
+        locationId: schedule.locationId,
+      });
+    }
+  }, [schedule, isEdit, reset]);
+
+  if ((isEdit && isLoading) || optionsLoading) {
+    return (
+      <Box className="flex justify-center p-10">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box className="mx-auto max-w-3xl p-4">
+      <Paper variant="outlined" className="p-6">
+        <Stack spacing={3}>
+          <Typography variant="h5">{isEdit ? "Edit PM Schedule" : "Create PM Schedule"}</Typography>
+
+          {Boolean(error) && <Alert severity="error">Failed to load PM schedule</Alert>}
+          {Boolean(optionsError) && (
+            <Alert severity="error">
+              {optionsError instanceof Error ? optionsError.message : "Failed to load form options"}
+            </Alert>
+          )}
+
+          <Box component="form" onSubmit={handleSubmit((values) => savePmSchedule.mutate(values))}>
+            <Stack spacing={3}>
+              <TextField
+                label="Name"
+                required
+                fullWidth
+                error={Boolean(errors.name)}
+                helperText={errors.name?.message}
+                {...register("name")}
+              />
+
+              <Controller
+                name="frequency"
+                control={control}
+                render={({ field }) => (
+                  <FormControl fullWidth>
+                    <InputLabel>Frequency</InputLabel>
+                    <Select label="Frequency" value={field.value} onChange={field.onChange}>
+                      {["Daily", "Weekly", "Monthly", "Quarterly", "Semi-Annual", "Annual"].map(
+                        (value) => (
+                          <MenuItem key={value} value={value}>
+                            {value}
+                          </MenuItem>
+                        ),
+                      )}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+
+              <TextField
+                label="Start Date"
+                type="date"
+                required
+                fullWidth
+                slotProps={{ inputLabel: { shrink: true } }}
+                error={Boolean(errors.startDate)}
+                helperText={errors.startDate?.message}
+                {...register("startDate")}
+              />
+
+              <Controller
+                name="assetId"
+                control={control}
+                render={({ field }) => (
+                  <FormControl fullWidth>
+                    <InputLabel>Asset</InputLabel>
+                    <Select
+                      label="Asset"
+                      value={field.value ?? ""}
+                      onChange={(event) => {
+                        const value = String(event.target.value);
+                        field.onChange(value === "" ? null : Number(value));
+                      }}
+                    >
+                      <MenuItem value="">
+                        <em>None</em>
+                      </MenuItem>
+                      {assets.map((asset) => (
+                        <MenuItem key={String(asset.id)} value={asset.id}>
+                          {asset.name || asset.assetCode}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+
+              <Controller
+                name="locationId"
+                control={control}
+                render={({ field }) => (
+                  <FormControl fullWidth>
+                    <InputLabel>Location</InputLabel>
+                    <Select
+                      label="Location"
+                      value={field.value ?? ""}
+                      onChange={(event) => {
+                        const value = String(event.target.value);
+                        field.onChange(value === "" ? null : Number(value));
+                      }}
+                    >
+                      <MenuItem value="">
+                        <em>None</em>
+                      </MenuItem>
+                      {locations.map((location) => (
+                        <MenuItem key={String(location.id)} value={location.id}>
+                          {location.name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+
+              <Controller
+                name="isActive"
+                control={control}
+                render={({ field }) => (
+                  <FormControlLabel
+                    control={<Switch checked={field.value} onChange={field.onChange} />}
+                    label="Active"
+                  />
+                )}
+              />
+
+              <Stack
+                direction="row"
+                spacing={2}
+                sx={{
+                  justifyContent: "flex-end",
+                }}
+              >
+                <Button variant="outlined" onClick={() => navigate("/pmschedules")}>
+                  Cancel
+                </Button>
+                <Button type="submit" variant="contained" disabled={savePmSchedule.isPending}>
+                  {savePmSchedule.isPending ? "Saving..." : isEdit ? "Update" : "Create"}
+                </Button>
+              </Stack>
+            </Stack>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/pmschedules/_components/pm-schedule-unavailable.tsx b/src/app/(protected)/pmschedules/_components/pm-schedule-unavailable.tsx
new file mode 100644
index 00000000..bf7faea9
--- /dev/null
+++ b/src/app/(protected)/pmschedules/_components/pm-schedule-unavailable.tsx
@@ -0,0 +1,38 @@
+import { Alert, Box, Button, Typography } from "@mui/material";
+import { useNavigate } from "react-router";
+
+export function PmScheduleEditUnavailablePanel() {
+  return (
+    <Box className="mx-auto max-w-3xl">
+      <Alert severity="warning" className="mb-4">
+        PM Schedule editing is unavailable — the production API does not expose{" "}
+        <code className="text-sm">PMSchedule/GetById</code>.
+      </Alert>
+      <Typography
+        variant="body2"
+        sx={{
+          color: "text.secondary",
+        }}
+      >
+        List and create remain available via <code className="text-sm">GetList</code> and{" "}
+        <code className="text-sm">Save</code>. Enable editing after the backend Dev branch exposes
+        GetById.
+      </Typography>
+    </Box>
+  );
+}
+
+export default function PmScheduleEditUnavailablePage() {
+  const navigate = useNavigate();
+
+  return (
+    <Box className="p-4">
+      <PmScheduleEditUnavailablePanel />
+      <Box className="mt-4 flex justify-end">
+        <Button variant="outlined" onClick={() => navigate("/pmschedules")}>
+          Back to PM Schedules
+        </Button>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/pmschedules/edit/[id].tsx b/src/app/(protected)/pmschedules/edit/[id].tsx
new file mode 100644
index 00000000..24b9b509
--- /dev/null
+++ b/src/app/(protected)/pmschedules/edit/[id].tsx
@@ -0,0 +1,5 @@
+import { pmScheduleCapabilities } from "@/config/pm-schedule-capabilities";
+import PmScheduleFormPage from "../_components/pm-schedule-form";
+import PmScheduleEditUnavailablePage from "../_components/pm-schedule-unavailable";
+
+export default pmScheduleCapabilities.canEdit ? PmScheduleFormPage : PmScheduleEditUnavailablePage;
diff --git a/src/app/(protected)/pmschedules/index.tsx b/src/app/(protected)/pmschedules/index.tsx
new file mode 100644
index 00000000..826381e7
--- /dev/null
+++ b/src/app/(protected)/pmschedules/index.tsx
@@ -0,0 +1,267 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import {
+  Alert,
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TablePagination,
+  TableRow,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import { pmScheduleCapabilities } from "@/config/pm-schedule-capabilities";
+import type { PmScheduleListItem } from "@/domain/pm-schedules/types/pm-schedule";
+import { useDeletePmSchedule } from "@/domain/pm-schedules/use-cases/use-delete-pm-schedule";
+import { usePmSchedulesList } from "@/domain/pm-schedules/use-cases/use-pm-schedules-list";
+import { useDebounce } from "@/hooks/use-debounce";
+
+export default function PmSchedulesListPage() {
+  const navigate = useNavigate();
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(12);
+  const [deleteTarget, setDeleteTarget] = useState<PmScheduleListItem | null>(null);
+
+  const debouncedSearch = useDebounce(search, 300);
+  const deletePmSchedule = useDeletePmSchedule();
+
+  const showActionsColumn = pmScheduleCapabilities.canEdit || pmScheduleCapabilities.canDelete;
+  const columnCount = showActionsColumn ? 7 : 6;
+
+  const listParams = useMemo(
+    () => ({
+      search: debouncedSearch,
+      page: page + 1,
+      pageSize,
+    }),
+    [debouncedSearch, page, pageSize],
+  );
+
+  const { data, isLoading, isFetching, error } = usePmSchedulesList(listParams);
+
+  const rows = data?.items ?? [];
+  const totalCount = data?.totalCount ?? 0;
+
+  const handleDeleteConfirm = () => {
+    if (!deleteTarget || !pmScheduleCapabilities.canDelete) return;
+    deletePmSchedule.mutate(deleteTarget.id, {
+      onSuccess: () => setDeleteTarget(null),
+    });
+  };
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{
+          alignItems: { xs: "stretch", md: "center" },
+          justifyContent: "space-between",
+        }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: "baseline",
+          }}
+        >
+          <Typography variant="h5" component="h1">
+            PM Schedules
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{
+              color: "text.secondary",
+            }}
+          >
+            {totalCount} total
+          </Typography>
+          {isFetching && !isLoading && <CircularProgress size={16} />}
+        </Stack>
+
+        <Stack
+          direction={{ xs: "column", sm: "row" }}
+          spacing={2}
+          sx={{
+            alignItems: "center",
+          }}
+        >
+          <TextField
+            size="small"
+            value={search}
+            onChange={(event) => {
+              setSearch(event.target.value);
+              setPage(0);
+            }}
+            placeholder="Search PM schedules..."
+            className="min-w-[220px]"
+          />
+          {pmScheduleCapabilities.canCreate && (
+            <Button variant="contained" onClick={() => navigate("/pmschedules/new")}>
+              + New PM Schedule
+            </Button>
+          )}
+        </Stack>
+      </Stack>
+      {Boolean(error) && (
+        <Alert severity="error">
+          {error instanceof Error ? error.message : "Failed to load PM schedules"}
+        </Alert>
+      )}
+      <TableContainer component={Paper} variant="outlined">
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell className="font-semibold">Name</TableCell>
+              <TableCell className="font-semibold">Frequency</TableCell>
+              <TableCell className="font-semibold">Start Date</TableCell>
+              <TableCell className="font-semibold">Status</TableCell>
+              <TableCell className="font-semibold">Asset</TableCell>
+              <TableCell className="font-semibold">Location</TableCell>
+              {showActionsColumn && (
+                <TableCell align="right" className="font-semibold">
+                  Actions
+                </TableCell>
+              )}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={columnCount} align="center" className="py-10">
+                  <CircularProgress size={28} />
+                </TableCell>
+              </TableRow>
+            ) : rows.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={columnCount} align="center" className="py-10">
+                  <Typography
+                    sx={{
+                      color: "text.secondary",
+                    }}
+                  >
+                    No PM schedules found
+                  </Typography>
+                </TableCell>
+              </TableRow>
+            ) : (
+              rows.map((row) => (
+                <TableRow key={String(row.id)} hover>
+                  <TableCell>
+                    {pmScheduleCapabilities.canEdit ? (
+                      <Button
+                        variant="text"
+                        size="small"
+                        className="font-semibold"
+                        onClick={() => navigate(`/pmschedules/edit/${row.id}`)}
+                      >
+                        {row.name || "—"}
+                      </Button>
+                    ) : (
+                      <Typography variant="body2" className="font-semibold">
+                        {row.name || "—"}
+                      </Typography>
+                    )}
+                  </TableCell>
+                  <TableCell>{row.frequency || "—"}</TableCell>
+                  <TableCell>{row.startDate || "—"}</TableCell>
+                  <TableCell>
+                    <Chip
+                      label={row.isActive ? "Active" : "Inactive"}
+                      size="small"
+                      color={row.isActive ? "success" : "default"}
+                      variant="outlined"
+                    />
+                  </TableCell>
+                  <TableCell>{row.asset || "—"}</TableCell>
+                  <TableCell>{row.location || "—"}</TableCell>
+                  {showActionsColumn && (
+                    <TableCell align="right">
+                      {pmScheduleCapabilities.canEdit && (
+                        <Tooltip title="Edit">
+                          <IconButton
+                            size="small"
+                            aria-label="Edit PM schedule"
+                            onClick={() => navigate(`/pmschedules/edit/${row.id}`)}
+                          >
+                            <EditOutlinedIcon fontSize="small" />
+                          </IconButton>
+                        </Tooltip>
+                      )}
+                      {pmScheduleCapabilities.canDelete && (
+                        <Tooltip title="Delete">
+                          <IconButton
+                            size="small"
+                            aria-label="Delete PM schedule"
+                            onClick={() => setDeleteTarget(row)}
+                          >
+                            <DeleteOutlineIcon fontSize="small" />
+                          </IconButton>
+                        </Tooltip>
+                      )}
+                    </TableCell>
+                  )}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        component="div"
+        count={totalCount}
+        page={page}
+        onPageChange={(_event, nextPage) => setPage(nextPage)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(event) => {
+          setPageSize(Number(event.target.value));
+          setPage(0);
+        }}
+        rowsPerPageOptions={[12, 24, 48]}
+      />
+      {pmScheduleCapabilities.canDelete && (
+        <Dialog open={Boolean(deleteTarget)} onClose={() => setDeleteTarget(null)}>
+          <DialogTitle>Delete PM Schedule</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              Are you sure you want to delete &quot;{deleteTarget?.name}&quot;? This action cannot
+              be undone.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setDeleteTarget(null)} disabled={deletePmSchedule.isPending}>
+              Cancel
+            </Button>
+            <Button
+              color="error"
+              variant="contained"
+              onClick={handleDeleteConfirm}
+              disabled={deletePmSchedule.isPending}
+            >
+              {deletePmSchedule.isPending ? "Deleting..." : "Delete"}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/pmschedules/new.tsx b/src/app/(protected)/pmschedules/new.tsx
new file mode 100644
index 00000000..1095dbc3
--- /dev/null
+++ b/src/app/(protected)/pmschedules/new.tsx
@@ -0,0 +1 @@
+export { default } from "./_components/pm-schedule-form";
diff --git a/src/app/(protected)/settings/dropdowns.tsx b/src/app/(protected)/settings/dropdowns.tsx
new file mode 100644
index 00000000..e4aef562
--- /dev/null
+++ b/src/app/(protected)/settings/dropdowns.tsx
@@ -0,0 +1,324 @@
+import { useMemo, useState } from "react";
+import {
+  Alert,
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Paper,
+  Select,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { SettingsNav } from "@/components/common/settings-nav";
+import {
+  DROPDOWN_OPTION_CATEGORIES,
+  type DropdownOption,
+  type DropdownOptionCategory,
+} from "@/domain/settings/dropdown-options/types/dropdown-option";
+import { useCreateDropdownOption } from "@/domain/settings/dropdown-options/use-cases/use-create-dropdown-option";
+import { useDeleteDropdownOption } from "@/domain/settings/dropdown-options/use-cases/use-delete-dropdown-option";
+import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
+import { useUpdateDropdownOption } from "@/domain/settings/dropdown-options/use-cases/use-update-dropdown-option";
+
+export default function DropdownOptionsPage() {
+  const [activeCategory, setActiveCategory] = useState<DropdownOptionCategory>("Trade");
+  const [newValue, setNewValue] = useState("");
+  const [newParent, setNewParent] = useState("");
+  const [editingId, setEditingId] = useState<string | number | null>(null);
+  const [editValue, setEditValue] = useState("");
+
+  const categoryConfig = useMemo(
+    () => DROPDOWN_OPTION_CATEGORIES.find((category) => category.key === activeCategory),
+    [activeCategory],
+  );
+
+  const parentCategory =
+    categoryConfig && "parent" in categoryConfig ? categoryConfig.parent : undefined;
+
+  const { data: options = [], isLoading, error } = useDropdownOptionsByCategory(activeCategory);
+  const { data: parentOptions = [] } = useDropdownOptionsByCategory("Trade", {
+    enabled: Boolean(parentCategory),
+  });
+
+  const createMutation = useCreateDropdownOption();
+  const updateMutation = useUpdateDropdownOption();
+  const deleteMutation = useDeleteDropdownOption();
+
+  const resetFormState = () => {
+    setNewValue("");
+    setNewParent("");
+    setEditingId(null);
+    setEditValue("");
+  };
+
+  const handleCategoryChange = (category: DropdownOptionCategory) => {
+    if (category !== activeCategory) {
+      resetFormState();
+    }
+    setActiveCategory(category);
+  };
+
+  const handleAdd = () => {
+    const value = newValue.trim();
+    if (!value) {
+      return;
+    }
+
+    createMutation.mutate(
+      {
+        category: activeCategory,
+        value,
+        parentValue: parentCategory ? newParent || null : null,
+        sortOrder: options.length,
+        isActive: true,
+      },
+      {
+        onSuccess: () => {
+          setNewValue("");
+          setNewParent("");
+        },
+      },
+    );
+  };
+
+  const handleEditSave = (item: DropdownOption) => {
+    const value = editValue.trim();
+    if (!value) {
+      return;
+    }
+
+    updateMutation.mutate(
+      {
+        id: item.id,
+        category: item.category,
+        value,
+        parentValue: item.parentValue,
+        sortOrder: item.sortOrder,
+        isActive: item.isActive,
+      },
+      {
+        onSuccess: () => {
+          setEditingId(null);
+        },
+      },
+    );
+  };
+
+  const handleDelete = (id: string | number) => {
+    deleteMutation.mutate(id);
+  };
+
+  const addPlaceholder = `Add new ${categoryConfig?.label.slice(0, -1) ?? "option"}...`;
+  const isMutating =
+    createMutation.isPending || updateMutation.isPending || deleteMutation.isPending;
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <SettingsNav />
+      <Stack spacing={0.5}>
+        <Typography variant="h5" component="h1">
+          Dropdown Options
+        </Typography>
+        <Typography
+          variant="body2"
+          sx={{
+            color: "text.secondary",
+          }}
+        >
+          Manage configurable dropdown values for work orders
+        </Typography>
+      </Stack>
+      <Paper variant="outlined" className="flex min-h-[400px] overflow-hidden">
+        <Stack className="w-[180px] shrink-0 border-r border-border bg-muted/30" spacing={0}>
+          {DROPDOWN_OPTION_CATEGORIES.map((category) => (
+            <Button
+              key={category.key}
+              onClick={() => handleCategoryChange(category.key)}
+              className={`justify-start rounded-none border-b border-border px-4 py-3 text-left normal-case ${
+                activeCategory === category.key
+                  ? "border-r-2 border-r-primary bg-background font-semibold text-primary"
+                  : "font-medium text-muted-foreground hover:bg-muted/50"
+              }`}
+            >
+              {category.label}
+            </Button>
+          ))}
+        </Stack>
+
+        <Box className="flex flex-1 flex-col gap-4 p-4">
+          <Stack
+            direction={{ xs: "column", sm: "row" }}
+            spacing={2}
+            sx={{
+              alignItems: "stretch",
+            }}
+          >
+            {Boolean(parentCategory) && (
+              <FormControl size="small" className="min-w-[160px]">
+                <InputLabel id="parent-trade-label">Parent Trade</InputLabel>
+                <Select
+                  labelId="parent-trade-label"
+                  label="Parent Trade"
+                  value={newParent}
+                  onChange={(event) => setNewParent(event.target.value)}
+                >
+                  <MenuItem value="">Parent: All</MenuItem>
+                  {parentOptions.map((option) => (
+                    <MenuItem key={String(option.id)} value={option.value}>
+                      {option.value}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+
+            <TextField
+              size="small"
+              value={newValue}
+              onChange={(event) => setNewValue(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  handleAdd();
+                }
+              }}
+              placeholder={addPlaceholder}
+              className="flex-1"
+            />
+
+            <Button
+              variant="contained"
+              onClick={handleAdd}
+              disabled={!newValue.trim() || isMutating}
+              className="shrink-0"
+            >
+              Add
+            </Button>
+          </Stack>
+
+          {Boolean(error) && (
+            <Alert severity="error">
+              {error instanceof Error ? error.message : "Failed to load options"}
+            </Alert>
+          )}
+
+          {isLoading ? (
+            <Stack
+              className="py-10"
+              sx={{
+                alignItems: "center",
+              }}
+            >
+              <CircularProgress size={28} />
+            </Stack>
+          ) : options.length === 0 ? (
+            <Typography
+              align="center"
+              className="py-10"
+              sx={{
+                color: "text.secondary",
+              }}
+            >
+              No options configured yet
+            </Typography>
+          ) : (
+            <Stack spacing={1}>
+              {options.map((item) => (
+                <Paper
+                  key={String(item.id)}
+                  variant="outlined"
+                  className="flex items-center justify-between gap-3 px-3 py-2"
+                >
+                  {editingId === item.id ? (
+                    <TextField
+                      size="small"
+                      value={editValue}
+                      onChange={(event) => setEditValue(event.target.value)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter") {
+                          handleEditSave(item);
+                        }
+                        if (event.key === "Escape") {
+                          setEditingId(null);
+                        }
+                      }}
+                      autoFocus
+                      className="flex-1"
+                    />
+                  ) : (
+                    <Stack
+                      direction="row"
+                      spacing={1}
+                      className="min-w-0"
+                      sx={{
+                        alignItems: "center",
+                      }}
+                    >
+                      <Typography variant="body2" className="truncate">
+                        {item.value}
+                      </Typography>
+                      {Boolean(item.parentValue) && (
+                        <Chip size="small" label={item.parentValue} variant="outlined" />
+                      )}
+                    </Stack>
+                  )}
+
+                  <Stack direction="row" spacing={1} className="shrink-0">
+                    {editingId === item.id ? (
+                      <>
+                        <Button
+                          size="small"
+                          variant="contained"
+                          color="success"
+                          onClick={() => handleEditSave(item)}
+                          disabled={isMutating}
+                        >
+                          Save
+                        </Button>
+                        <Button
+                          size="small"
+                          variant="outlined"
+                          color="inherit"
+                          onClick={() => setEditingId(null)}
+                        >
+                          Cancel
+                        </Button>
+                      </>
+                    ) : (
+                      <>
+                        <Button
+                          size="small"
+                          variant="outlined"
+                          onClick={() => {
+                            setEditingId(item.id);
+                            setEditValue(item.value);
+                          }}
+                        >
+                          Edit
+                        </Button>
+                        <Button
+                          size="small"
+                          variant="outlined"
+                          color="error"
+                          onClick={() => handleDelete(item.id)}
+                          disabled={isMutating}
+                        >
+                          Delete
+                        </Button>
+                      </>
+                    )}
+                  </Stack>
+                </Paper>
+              ))}
+            </Stack>
+          )}
+        </Box>
+      </Paper>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/settings/task-templates.tsx b/src/app/(protected)/settings/task-templates.tsx
new file mode 100644
index 00000000..d9888509
--- /dev/null
+++ b/src/app/(protected)/settings/task-templates.tsx
@@ -0,0 +1,286 @@
+import { useState } from "react";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  List,
+  ListItemButton,
+  ListItemText,
+  Paper,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { SettingsNav } from "@/components/common/settings-nav";
+import { mapTaskTemplateToFormValues } from "@/domain/settings/task-templates/mappers/task-template-mapper";
+import type {
+  TaskTemplate,
+  TaskTemplateFormValues,
+} from "@/domain/settings/task-templates/types/task-template";
+import {
+  useCreateTaskTemplate,
+  useDeleteTaskTemplate,
+  useUpdateTaskTemplate,
+} from "@/domain/settings/task-templates/use-cases/use-task-template-mutations";
+import { useTaskTemplates } from "@/domain/settings/task-templates/use-cases/use-task-templates";
+
+const emptyForm: TaskTemplateFormValues = { name: "", description: "", items: [] };
+
+export default function TaskTemplatesPage() {
+  const { data: templates = [], isLoading, error } = useTaskTemplates();
+  const createTemplate = useCreateTaskTemplate();
+  const updateTemplate = useUpdateTaskTemplate();
+  const deleteTemplate = useDeleteTaskTemplate();
+
+  const [selectedId, setSelectedId] = useState<string | number | "new" | null>(null);
+  const [form, setForm] = useState<TaskTemplateFormValues>(emptyForm);
+  const [newItemText, setNewItemText] = useState("");
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  const isNew = selectedId === "new";
+  const isSaving = createTemplate.isPending || updateTemplate.isPending;
+
+  const handleSelect = (template: TaskTemplate) => {
+    setSelectedId(template.id);
+    setForm(mapTaskTemplateToFormValues(template));
+    setNewItemText("");
+  };
+
+  const handleNew = () => {
+    setSelectedId("new");
+    setForm(emptyForm);
+    setNewItemText("");
+  };
+
+  const handleAddItem = () => {
+    if (!newItemText.trim()) return;
+    setForm((prev) => ({
+      ...prev,
+      items: [...prev.items, { text: newItemText.trim(), sortOrder: prev.items.length }],
+    }));
+    setNewItemText("");
+  };
+
+  const handleRemoveItem = (index: number) => {
+    setForm((prev) => ({
+      ...prev,
+      items: prev.items.filter((_, i) => i !== index).map((item, i) => ({ ...item, sortOrder: i })),
+    }));
+  };
+
+  const handleMoveItem = (index: number, direction: -1 | 1) => {
+    setForm((prev) => {
+      const items = [...prev.items];
+      const target = index + direction;
+      if (target < 0 || target >= items.length) return prev;
+      [items[index], items[target]] = [items[target], items[index]];
+      return { ...prev, items: items.map((item, i) => ({ ...item, sortOrder: i })) };
+    });
+  };
+
+  const handleSave = () => {
+    if (!form.name.trim()) return;
+    if (isNew) {
+      createTemplate.mutate(form, {
+        onSuccess: (result) => setSelectedId(result.id),
+      });
+      return;
+    }
+    if (selectedId && selectedId !== "new") {
+      updateTemplate.mutate({ id: selectedId, values: form });
+    }
+  };
+
+  const handleDelete = () => {
+    if (!selectedId || selectedId === "new") return;
+    deleteTemplate.mutate(selectedId, {
+      onSuccess: () => {
+        setSelectedId(null);
+        setForm(emptyForm);
+        setConfirmDelete(false);
+      },
+    });
+  };
+
+  return (
+    <Box className="p-4">
+      <SettingsNav />
+      <Stack spacing={1} className="mb-4">
+        <Typography variant="h5">Task List Templates</Typography>
+        <Typography
+          variant="body2"
+          sx={{
+            color: "text.secondary",
+          }}
+        >
+          Create reusable checklists for work order dispatches
+        </Typography>
+      </Stack>
+      {Boolean(error) && (
+        <Alert severity="error" className="mb-4">
+          {error instanceof Error ? error.message : "Failed to load templates"}
+        </Alert>
+      )}
+      <Box className="grid grid-cols-1 gap-4 md:grid-cols-[280px_1fr]">
+        <Paper variant="outlined" className="p-3">
+          <Button fullWidth variant="contained" className="mb-3" onClick={handleNew}>
+            + New Template
+          </Button>
+          {isLoading ? (
+            <Box className="flex justify-center p-4">
+              <CircularProgress size={24} />
+            </Box>
+          ) : (
+            <List dense disablePadding>
+              {templates.map((template) => (
+                <ListItemButton
+                  key={String(template.id)}
+                  selected={selectedId === template.id}
+                  onClick={() => handleSelect(template)}
+                >
+                  <ListItemText
+                    primary={template.name}
+                    secondary={`${template.items.length} items`}
+                  />
+                </ListItemButton>
+              ))}
+            </List>
+          )}
+        </Paper>
+
+        <Paper variant="outlined" className="p-4">
+          {!selectedId ? (
+            <Typography
+              className="py-10 text-center"
+              sx={{
+                color: "text.secondary",
+              }}
+            >
+              Select a template or create a new one
+            </Typography>
+          ) : (
+            <Stack spacing={3}>
+              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+                <TextField
+                  label="Template Name"
+                  fullWidth
+                  required
+                  value={form.name}
+                  onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+                  placeholder="e.g., HVAC Inspection"
+                />
+                <TextField
+                  label="Description"
+                  fullWidth
+                  value={form.description}
+                  onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
+                />
+              </Stack>
+
+              <Typography variant="subtitle2" className="font-semibold">
+                Checklist Items ({form.items.length})
+              </Typography>
+
+              <Stack spacing={1}>
+                {form.items.map((item, index) => (
+                  <Box
+                    key={`${item.sortOrder}-${index}`}
+                    className="flex items-center gap-2 rounded border border-border p-2"
+                  >
+                    <Typography variant="body2" className="w-6 text-muted-foreground">
+                      {index + 1}
+                    </Typography>
+                    <Typography variant="body2" className="flex-1">
+                      {item.text}
+                    </Typography>
+                    <IconButton
+                      size="small"
+                      disabled={index === 0}
+                      onClick={() => handleMoveItem(index, -1)}
+                    >
+                      <ArrowUpwardIcon fontSize="small" />
+                    </IconButton>
+                    <IconButton
+                      size="small"
+                      disabled={index === form.items.length - 1}
+                      onClick={() => handleMoveItem(index, 1)}
+                    >
+                      <ArrowDownwardIcon fontSize="small" />
+                    </IconButton>
+                    <IconButton size="small" color="error" onClick={() => handleRemoveItem(index)}>
+                      <DeleteOutlineIcon fontSize="small" />
+                    </IconButton>
+                  </Box>
+                ))}
+              </Stack>
+
+              <Stack direction="row" spacing={1}>
+                <TextField
+                  fullWidth
+                  size="small"
+                  value={newItemText}
+                  onChange={(e) => setNewItemText(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      handleAddItem();
+                    }
+                  }}
+                  placeholder="Add checklist item..."
+                />
+                <Button variant="outlined" onClick={handleAddItem} disabled={!newItemText.trim()}>
+                  Add
+                </Button>
+              </Stack>
+
+              <Stack
+                direction="row"
+                spacing={2}
+                sx={{
+                  justifyContent: "flex-end",
+                }}
+              >
+                {!isNew && (
+                  <Button variant="outlined" color="error" onClick={() => setConfirmDelete(true)}>
+                    Delete
+                  </Button>
+                )}
+                <Button
+                  variant="contained"
+                  onClick={handleSave}
+                  disabled={isSaving || !form.name.trim()}
+                >
+                  {isSaving ? "Saving..." : isNew ? "Create Template" : "Save Changes"}
+                </Button>
+              </Stack>
+            </Stack>
+          )}
+        </Paper>
+      </Box>
+      <Dialog open={confirmDelete} onClose={() => setConfirmDelete(false)}>
+        <DialogTitle>Delete Template</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Are you sure you want to delete &quot;{form.name}&quot;?
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setConfirmDelete(false)}>Cancel</Button>
+          <Button color="error" variant="contained" onClick={handleDelete}>
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/team-members/_components/add-team-member-dialog.tsx b/src/app/(protected)/team-members/_components/add-team-member-dialog.tsx
new file mode 100644
index 00000000..ef9064df
--- /dev/null
+++ b/src/app/(protected)/team-members/_components/add-team-member-dialog.tsx
@@ -0,0 +1,394 @@
+import { useEffect, useMemo, useRef, useState, type Dispatch, type SetStateAction } from "react";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Alert,
+  Box,
+  Button,
+  Checkbox,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { AREA_ZONES } from "@/data/areas";
+import { useCreateTeamMember } from "@/domain/team-members/use-cases/use-create-team-member";
+import type {
+  CreateTeamMemberInput,
+  TeamMemberRole,
+} from "@/domain/team-members/types/team-member";
+import {
+  defaultsForRole,
+  getFormErrors,
+  PERMISSION_GROUPS,
+  PERMISSION_LABELS,
+  permissionOverrides,
+} from "./team-member-permissions";
+import { TEAM_MEMBER_COLORS, TEAM_MEMBER_ROLES } from "./team-member-form-options";
+
+const LEGACY_ROLE_OPTION = "__legacy-role__";
+
+function emptyForm() {
+  return {
+    name: "",
+    role: "Dispatcher" as TeamMemberRole | "",
+    color: "",
+    colorNotice: "",
+    email: "",
+    phone: "",
+    active: true,
+    serviceAreas: [] as string[],
+    permissions: defaultsForRole("Dispatcher"),
+  };
+}
+
+export type TeamMemberForm = ReturnType<typeof emptyForm>;
+type FormErrors = ReturnType<typeof getFormErrors>;
+
+function PermissionsSection({
+  form,
+  togglePermission,
+}: {
+  form: TeamMemberForm;
+  togglePermission: (key: string) => void;
+}) {
+  return (
+    <Box>
+      <Typography variant="h6" sx={{ mb: 1 }}>
+        Permissions
+      </Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+        Permissions start with the selected role's defaults. Customize them before saving.
+      </Typography>
+      {PERMISSION_GROUPS.map((group) => (
+        <Accordion key={group.label} disableGutters>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography>{group.label}</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Stack>
+              {group.keys.map((key) => (
+                <FormControlLabel
+                  key={key}
+                  control={
+                    <Checkbox
+                      checked={form.permissions.has(key)}
+                      onChange={() => togglePermission(key)}
+                    />
+                  }
+                  label={PERMISSION_LABELS[key]}
+                />
+              ))}
+            </Stack>
+          </AccordionDetails>
+        </Accordion>
+      ))}
+    </Box>
+  );
+}
+
+function RoleSelectField({
+  role,
+  roleError,
+  updateRole,
+  disabled,
+  legacyRole,
+}: {
+  role: TeamMemberRole | "";
+  roleError: string;
+  updateRole: (role: TeamMemberRole) => void;
+  disabled: boolean;
+  legacyRole: string;
+}) {
+  const legacyRolePending = Boolean(legacyRole) && !role;
+
+  return (
+    <FormControl fullWidth required error={Boolean(roleError)}>
+      <InputLabel id="team-member-role-label">Role</InputLabel>
+      <Select
+        labelId="team-member-role-label"
+        label="Role"
+        value={legacyRolePending ? LEGACY_ROLE_OPTION : role}
+        disabled={disabled}
+        onChange={(event) => updateRole(event.target.value as TeamMemberRole)}
+      >
+        {legacyRolePending && (
+          <MenuItem value={LEGACY_ROLE_OPTION} disabled>
+            {legacyRole} (legacy)
+          </MenuItem>
+        )}
+        {TEAM_MEMBER_ROLES.map((option) => (
+          <MenuItem key={option} value={option}>
+            {option}
+          </MenuItem>
+        ))}
+      </Select>
+      {legacyRolePending && (
+        <FormHelperText error={Boolean(roleError)}>
+          {legacyRole} is a legacy role and can no longer be saved. Choose Dispatcher, Scheduler, or
+          Admin.
+        </FormHelperText>
+      )}
+      {!legacyRolePending && Boolean(roleError) && <FormHelperText>{roleError}</FormHelperText>}
+    </FormControl>
+  );
+}
+
+export function TeamMemberFormFields({
+  form,
+  setForm,
+  errors,
+  updateRole,
+  toggleArea,
+  togglePermission,
+  roleDisabled = false,
+  legacyRole = "",
+}: {
+  form: TeamMemberForm;
+  setForm: Dispatch<SetStateAction<TeamMemberForm>>;
+  errors: FormErrors;
+  updateRole: (role: TeamMemberRole) => void;
+  toggleArea: (area: string) => void;
+  togglePermission: (key: string) => void;
+  roleDisabled?: boolean;
+  legacyRole?: string;
+}) {
+  return (
+    <Stack spacing={2.5}>
+      <TextField
+        label="Name"
+        placeholder="Team member name"
+        value={form.name}
+        onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))}
+        error={Boolean(errors.name)}
+        helperText={errors.name}
+        required
+        fullWidth
+      />
+      <RoleSelectField
+        role={form.role}
+        roleError={errors.role}
+        updateRole={updateRole}
+        disabled={roleDisabled}
+        legacyRole={legacyRole}
+      />
+
+      <Box>
+        <Typography component="p" variant="body2" sx={{ mb: 1, fontWeight: 600 }}>
+          Color <span aria-hidden="true">*</span>
+        </Typography>
+        <Stack direction="row" spacing={1} useFlexGap sx={{ flexWrap: "wrap" }}>
+          {TEAM_MEMBER_COLORS.map((color) => (
+            <Button
+              key={color}
+              type="button"
+              aria-label={`Select color ${color}`}
+              aria-pressed={form.color === color}
+              onClick={() => setForm((current) => ({ ...current, color, colorNotice: "" }))}
+              sx={{
+                minWidth: 32,
+                width: 32,
+                height: 32,
+                borderRadius: "50%",
+                backgroundColor: color,
+                border: form.color === color ? "3px solid" : "2px solid transparent",
+                borderColor: form.color === color ? "text.primary" : "transparent",
+                boxShadow: form.color === color ? "0 0 0 2px white" : "none",
+                p: 0,
+                "&:hover": { backgroundColor: color, opacity: 0.85 },
+              }}
+            />
+          ))}
+        </Stack>
+        {Boolean(form.colorNotice) && !errors.color && (
+          <FormHelperText>{form.colorNotice}</FormHelperText>
+        )}
+        {Boolean(errors.color) && <FormHelperText error>{errors.color}</FormHelperText>}
+      </Box>
+
+      {form.role === "Dispatcher" && (
+        <Box>
+          <Typography component="p" variant="body2" sx={{ mb: 1, fontWeight: 600 }}>
+            Service Area <span aria-hidden="true">*</span>
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+            {form.serviceAreas.length ? form.serviceAreas.join(", ") : "Select service areas…"}
+          </Typography>
+          <Stack direction="row" useFlexGap sx={{ flexWrap: "wrap", columnGap: 1 }}>
+            {AREA_ZONES.map((area) => (
+              <FormControlLabel
+                key={area}
+                control={
+                  <Checkbox
+                    checked={form.serviceAreas.includes(area)}
+                    onChange={() => toggleArea(area)}
+                  />
+                }
+                label={area}
+              />
+            ))}
+          </Stack>
+          {Boolean(errors.serviceAreas) && (
+            <FormHelperText error>{errors.serviceAreas}</FormHelperText>
+          )}
+        </Box>
+      )}
+      {form.role !== "Dispatcher" && (
+        <Typography variant="body2" color="text.secondary">
+          Not applicable for this role
+        </Typography>
+      )}
+
+      <TextField
+        label="Phone"
+        placeholder="(555) 555-0100"
+        value={form.phone}
+        onChange={(event) => setForm((current) => ({ ...current, phone: event.target.value }))}
+        fullWidth
+      />
+      <TextField
+        label="Email"
+        placeholder="name@seahavenind.com"
+        value={form.email}
+        onChange={(event) => setForm((current) => ({ ...current, email: event.target.value }))}
+        error={Boolean(errors.email)}
+        helperText={errors.email || "A valid email is required to send the invite"}
+        required
+        type="email"
+        fullWidth
+      />
+
+      <PermissionsSection form={form} togglePermission={togglePermission} />
+    </Stack>
+  );
+}
+
+export function AddTeamMemberDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const [form, setForm] = useState(emptyForm);
+  const [submitted, setSubmitted] = useState(false);
+  const submissionId = useRef(0);
+  const { error: mutationError, isPending, mutate, reset } = useCreateTeamMember();
+
+  useEffect(() => {
+    submissionId.current += 1;
+    reset();
+    if (open) {
+      setForm(emptyForm());
+      setSubmitted(false);
+    }
+  }, [open, reset]);
+
+  const handleClose = () => {
+    if (isPending) return;
+
+    submissionId.current += 1;
+    reset();
+    onClose();
+  };
+
+  const emailIsValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim());
+  const errors = useMemo(
+    () => getFormErrors(form, submitted, emailIsValid),
+    [emailIsValid, form, submitted],
+  );
+  const isValid =
+    Boolean(form.name.trim()) &&
+    Boolean(form.role) &&
+    Boolean(form.color) &&
+    emailIsValid &&
+    (form.role !== "Dispatcher" || form.serviceAreas.length > 0);
+
+  const updateRole = (role: TeamMemberRole) => {
+    setForm((current) => ({
+      ...current,
+      role,
+      serviceAreas: [],
+      permissions: defaultsForRole(role),
+    }));
+  };
+
+  const togglePermission = (key: string) => {
+    setForm((current) => {
+      const permissions = new Set(current.permissions);
+      if (permissions.has(key)) permissions.delete(key);
+      else permissions.add(key);
+      return { ...current, permissions };
+    });
+  };
+
+  const toggleArea = (area: string) => {
+    setForm((current) => ({
+      ...current,
+      serviceAreas: current.serviceAreas.includes(area)
+        ? current.serviceAreas.filter((value) => value !== area)
+        : [...current.serviceAreas, area],
+    }));
+  };
+
+  const submit = () => {
+    setSubmitted(true);
+    if (!isValid || form.role === "") return;
+
+    const input: CreateTeamMemberInput = {
+      name: form.name.trim(),
+      role: form.role,
+      color: form.color,
+      email: form.email.trim(),
+      phone: form.phone.trim() || undefined,
+      serviceAreas: form.serviceAreas,
+      permissionOverrides: permissionOverrides(form.role, form.permissions),
+    };
+    const currentSubmissionId = submissionId.current;
+    mutate(input, {
+      onSuccess: () => {
+        if (submissionId.current !== currentSubmissionId) return;
+        reset();
+        onClose();
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose} fullWidth maxWidth="md" scroll="paper">
+      <DialogTitle>Add Member</DialogTitle>
+      <DialogContent dividers>
+        <Typography color="text.secondary" sx={{ mb: 3 }}>
+          Register a new team member.
+        </Typography>
+        {Boolean(mutationError) && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {mutationError?.message}
+          </Alert>
+        )}
+        <TeamMemberFormFields
+          form={form}
+          setForm={setForm}
+          errors={errors}
+          updateRole={updateRole}
+          toggleArea={toggleArea}
+          togglePermission={togglePermission}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} disabled={isPending}>
+          Cancel
+        </Button>
+        <Button variant="contained" onClick={submit} disabled={isPending}>
+          {isPending ? <CircularProgress size={20} color="inherit" /> : "Add Member"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/team-members/_components/team-member-detail-drawer.tsx b/src/app/(protected)/team-members/_components/team-member-detail-drawer.tsx
new file mode 100644
index 00000000..7c00b463
--- /dev/null
+++ b/src/app/(protected)/team-members/_components/team-member-detail-drawer.tsx
@@ -0,0 +1,491 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from "react";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Alert,
+  Avatar,
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Divider,
+  Drawer,
+  FormControlLabel,
+  IconButton,
+  Stack,
+  Switch,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import {
+  defaultsForRole,
+  PERMISSION_GROUPS,
+  PERMISSION_LABELS,
+  permissionOverrides,
+} from "./team-member-permissions";
+import { getFormErrors } from "./team-member-permissions";
+import { TeamMemberFormFields, type TeamMemberForm } from "./add-team-member-dialog";
+import { canonicalRole, resolveFormColor } from "./team-member-form-options";
+import {
+  useTeamMemberDetail,
+  useUpdateTeamMember,
+} from "@/domain/team-members/use-cases/use-team-member-detail";
+import type {
+  TeamMemberDetail,
+  TeamMemberListItem,
+  TeamMemberRole,
+} from "@/domain/team-members/types/team-member";
+
+function formFromMember(member: TeamMemberDetail): TeamMemberForm {
+  const { color, notice: colorNotice } = resolveFormColor(member.color);
+  return {
+    name: member.name,
+    role: canonicalRole(member.role) ?? "",
+    color,
+    colorNotice,
+    email: member.email,
+    phone: member.phone,
+    active: member.status === "Active",
+    serviceAreas: member.serviceAreas,
+    permissions: new Set(
+      member.permissions
+        .filter((permission) => permission.isGranted)
+        .map((permission) => permission.permissionKey),
+    ),
+  };
+}
+
+function emptyForm(): TeamMemberForm {
+  return {
+    name: "",
+    role: "Dispatcher",
+    color: "",
+    colorNotice: "",
+    email: "",
+    phone: "",
+    active: true,
+    serviceAreas: [],
+    permissions: new Set(),
+  };
+}
+
+function Field({ label, value }: { label: string; value: ReactNode }) {
+  return (
+    <Box>
+      <Typography variant="caption" color="text.secondary">
+        {label}
+      </Typography>
+      <Typography>{value || "—"}</Typography>
+    </Box>
+  );
+}
+
+function PermissionSummary({ member }: { member: TeamMemberDetail }) {
+  const permissions = new Map(
+    member.permissions.map((permission) => [permission.permissionKey, permission.isGranted]),
+  );
+
+  return (
+    <Box>
+      <Typography variant="h6" sx={{ mb: 1 }}>
+        Permissions
+      </Typography>
+      <Stack spacing={1}>
+        {PERMISSION_GROUPS.map((group) => {
+          const granted = group.keys.filter((key) => permissions.get(key)).length;
+          return (
+            <Accordion key={group.label} disableGutters>
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <Typography sx={{ flex: 1 }}>{group.label}</Typography>
+                <Chip size="small" label={`${granted}/${group.keys.length}`} />
+              </AccordionSummary>
+              <AccordionDetails>
+                <Stack spacing={1}>
+                  {group.keys.map((key) => (
+                    <Stack
+                      key={key}
+                      direction="row"
+                      sx={{ alignItems: "center", justifyContent: "space-between" }}
+                    >
+                      <Typography variant="body2">{PERMISSION_LABELS[key]}</Typography>
+                      <Chip
+                        size="small"
+                        label={permissions.get(key) ? "Granted" : "Not granted"}
+                        color={permissions.get(key) ? "success" : "default"}
+                      />
+                    </Stack>
+                  ))}
+                </Stack>
+              </AccordionDetails>
+            </Accordion>
+          );
+        })}
+      </Stack>
+    </Box>
+  );
+}
+
+function MemberView({ member }: { member: TeamMemberDetail }) {
+  return (
+    <Stack spacing={2.5}>
+      <Stack direction="row" spacing={2} sx={{ alignItems: "center" }}>
+        <Avatar sx={{ bgcolor: member.color || "primary.main" }}>
+          {member.name.slice(0, 1).toUpperCase() || "?"}
+        </Avatar>
+        <Chip
+          label={member.status}
+          color={member.status === "Active" ? "success" : "default"}
+          size="small"
+        />
+      </Stack>
+      <Stack spacing={1.5}>
+        <Field label="Name" value={member.name} />
+        <Field
+          label="Role"
+          value={canonicalRole(member.role) ? member.role : `${member.role} (legacy)`}
+        />
+        <Field label="Color" value={member.color} />
+        <Field
+          label="Service Area"
+          value={member.serviceAreas.length ? member.serviceAreas.join(", ") : "Not applicable"}
+        />
+        <Field label="Phone" value={member.phone} />
+        <Field label="Email" value={member.email} />
+        <Field
+          label="Registration"
+          value={member.pendingRegistration ? "Pending registration" : "Registered"}
+        />
+      </Stack>
+      <PermissionSummary member={member} />
+    </Stack>
+  );
+}
+
+function MemberEditForm({
+  form,
+  setForm,
+  errors,
+  updateRole,
+  toggleArea,
+  togglePermission,
+  roleDisabled,
+  legacyRole,
+}: {
+  form: TeamMemberForm;
+  setForm: Dispatch<SetStateAction<TeamMemberForm>>;
+  errors: ReturnType<typeof getFormErrors>;
+  updateRole: (role: TeamMemberRole) => void;
+  toggleArea: (area: string) => void;
+  togglePermission: (key: string) => void;
+  roleDisabled: boolean;
+  legacyRole: string;
+}) {
+  return (
+    <TeamMemberFormFields
+      form={form}
+      setForm={setForm}
+      errors={errors}
+      updateRole={updateRole}
+      toggleArea={toggleArea}
+      togglePermission={togglePermission}
+      roleDisabled={roleDisabled}
+      legacyRole={legacyRole}
+    />
+  );
+}
+
+function DrawerFooter({
+  editing,
+  form,
+  setForm,
+  protectedOwner,
+  isPending,
+  onCancel,
+  onEdit,
+  onSave,
+}: {
+  editing: boolean;
+  form: TeamMemberForm;
+  setForm: Dispatch<SetStateAction<TeamMemberForm>>;
+  protectedOwner: boolean;
+  isPending: boolean;
+  onCancel: () => void;
+  onEdit: () => void;
+  onSave: () => void;
+}) {
+  return (
+    <Box sx={{ borderTop: "1px solid var(--color-border)", p: 2, flexShrink: 0 }}>
+      {editing ? (
+        <Stack spacing={1.5}>
+          <Tooltip
+            title={protectedOwner ? "The account owner cannot be deactivated." : ""}
+            disableHoverListener={!protectedOwner}
+          >
+            <span>
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={form.active}
+                    disabled={protectedOwner}
+                    onChange={(event) =>
+                      setForm((current) => ({ ...current, active: event.target.checked }))
+                    }
+                  />
+                }
+                label="Active"
+              />
+            </span>
+          </Tooltip>
+          <Stack direction="row" sx={{ justifyContent: "flex-end", gap: 1.5 }}>
+            <Button onClick={onCancel} disabled={isPending}>
+              Cancel
+            </Button>
+            <Button variant="contained" onClick={onSave} disabled={isPending}>
+              {isPending ? <CircularProgress size={20} /> : "Save changes"}
+            </Button>
+          </Stack>
+        </Stack>
+      ) : (
+        <Stack direction="row" sx={{ justifyContent: "flex-end" }}>
+          <Button variant="contained" onClick={onEdit}>
+            Edit
+          </Button>
+        </Stack>
+      )}
+    </Box>
+  );
+}
+
+function useTeamMemberEditor(
+  currentMember: TeamMemberDetail | undefined,
+  memberId: string | number | undefined,
+) {
+  const [editing, setEditing] = useState(false);
+  const [form, setForm] = useState<TeamMemberForm>(emptyForm);
+  const [submitted, setSubmitted] = useState(false);
+  const updateTeamMember = useUpdateTeamMember();
+  const currentMemberRef = useRef(currentMember);
+
+  useEffect(() => {
+    currentMemberRef.current = currentMember;
+  }, [currentMember]);
+
+  useEffect(() => {
+    const member = currentMemberRef.current;
+    if (member) {
+      setForm(formFromMember(member));
+      setEditing(false);
+      setSubmitted(false);
+    }
+  }, [currentMember?.id]);
+
+  useEffect(() => {
+    setEditing(false);
+    setSubmitted(false);
+  }, [memberId]);
+
+  const emailIsValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim());
+  const errors = useMemo(
+    () => getFormErrors(form, submitted, emailIsValid),
+    [emailIsValid, form, submitted],
+  );
+  const isValid =
+    Boolean(form.name.trim()) &&
+    Boolean(form.role) &&
+    Boolean(form.color) &&
+    emailIsValid &&
+    (form.role !== "Dispatcher" || form.serviceAreas.length > 0);
+  const protectedOwner = currentMember?.isAccountOwner === true;
+  const legacyRole = currentMember && !canonicalRole(currentMember.role) ? currentMember.role : "";
+
+  const updateRole = (role: TeamMemberRole) => {
+    setForm((current) => ({
+      ...current,
+      role,
+      serviceAreas: [],
+      permissions: defaultsForRole(role),
+    }));
+  };
+
+  const toggleArea = (area: string) => {
+    setForm((current) => ({
+      ...current,
+      serviceAreas: current.serviceAreas.includes(area)
+        ? current.serviceAreas.filter((value) => value !== area)
+        : [...current.serviceAreas, area],
+    }));
+  };
+
+  const togglePermission = (key: string) => {
+    setForm((current) => {
+      const permissions = new Set(current.permissions);
+      if (permissions.has(key)) permissions.delete(key);
+      else permissions.add(key);
+      return { ...current, permissions };
+    });
+  };
+
+  const save = () => {
+    setSubmitted(true);
+    if (!isValid || !currentMember || form.role === "") return;
+
+    updateTeamMember.mutate(
+      {
+        id: currentMember.id,
+        input: {
+          name: form.name.trim(),
+          role: form.role,
+          color: form.color,
+          email: form.email.trim(),
+          phone: form.phone.trim() || undefined,
+          serviceAreas: form.serviceAreas,
+          permissionOverrides: permissionOverrides(form.role, form.permissions),
+          isActive: form.active,
+        },
+      },
+      { onSuccess: () => setEditing(false) },
+    );
+  };
+
+  return {
+    editing,
+    form,
+    setForm,
+    errors,
+    protectedOwner,
+    legacyRole,
+    isPending: updateTeamMember.isPending,
+    updateRole,
+    toggleArea,
+    togglePermission,
+    save,
+    cancel: () => {
+      if (currentMember) setForm(formFromMember(currentMember));
+      setSubmitted(false);
+      setEditing(false);
+    },
+    beginEdit: () => setEditing(true),
+  };
+}
+
+function DrawerHeader({
+  member,
+  currentMember,
+  onClose,
+}: {
+  member: TeamMemberListItem | null;
+  currentMember: TeamMemberDetail | undefined;
+  onClose: () => void;
+}) {
+  return (
+    <>
+      <Stack
+        direction="row"
+        sx={{ alignItems: "center", justifyContent: "space-between", p: 2.5, flexShrink: 0 }}
+      >
+        <Box sx={{ minWidth: 0 }}>
+          <Typography noWrap variant="h6">
+            {currentMember?.name ?? member?.name ?? "Team Member"}
+          </Typography>
+          <Typography noWrap variant="body2" color="text.secondary">
+            {currentMember?.role ?? member?.role ?? ""}
+          </Typography>
+        </Box>
+        <IconButton aria-label="Close team member details" onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      </Stack>
+      <Divider />
+    </>
+  );
+}
+
+function DrawerContent({
+  detail,
+  currentMember,
+  editing,
+  editor,
+}: {
+  detail: ReturnType<typeof useTeamMemberDetail>;
+  currentMember: TeamMemberDetail | undefined;
+  editing: boolean;
+  editor: ReturnType<typeof useTeamMemberEditor>;
+}) {
+  return (
+    <Box sx={{ flex: 1, minHeight: 0, overflow: "auto", p: 2.5 }}>
+      {Boolean(detail.isLoading) && <CircularProgress aria-label="Loading team member details" />}
+      {detail.error !== null && detail.error !== undefined && (
+        <Alert severity="error">{detail.error.message}</Alert>
+      )}
+      {currentMember !== undefined && !editing && <MemberView member={currentMember} />}
+      {currentMember !== undefined && editing && (
+        <MemberEditForm
+          form={editor.form}
+          setForm={editor.setForm}
+          errors={editor.errors}
+          updateRole={editor.updateRole}
+          toggleArea={editor.toggleArea}
+          togglePermission={editor.togglePermission}
+          roleDisabled={editor.protectedOwner}
+          legacyRole={editor.legacyRole}
+        />
+      )}
+    </Box>
+  );
+}
+
+export function TeamMemberDetailDrawer({
+  member,
+  onClose,
+}: {
+  member: TeamMemberListItem | null;
+  onClose: () => void;
+}) {
+  const detail = useTeamMemberDetail(member?.id ?? null);
+  const currentMember = detail.data;
+  const editor = useTeamMemberEditor(currentMember, member?.id);
+
+  return (
+    <Drawer
+      anchor="right"
+      open={Boolean(member)}
+      onClose={onClose}
+      aria-label={currentMember?.name ?? "Team Member"}
+      slotProps={{ paper: { sx: { width: { xs: "100vw", sm: 420 }, display: "flex" } } }}
+    >
+      <Stack sx={{ height: "100%", minHeight: 0 }}>
+        <DrawerHeader member={member} currentMember={currentMember} onClose={onClose} />
+        <DrawerContent
+          detail={detail}
+          currentMember={currentMember}
+          editing={editor.editing}
+          editor={editor}
+        />
+
+        {currentMember !== undefined && (
+          <DrawerFooter
+            editing={editor.editing}
+            form={editor.form}
+            setForm={editor.setForm}
+            protectedOwner={editor.protectedOwner}
+            isPending={editor.isPending}
+            onCancel={editor.cancel}
+            onEdit={editor.beginEdit}
+            onSave={editor.save}
+          />
+        )}
+      </Stack>
+    </Drawer>
+  );
+}
diff --git a/src/app/(protected)/team-members/_components/team-member-form-options.ts b/src/app/(protected)/team-members/_components/team-member-form-options.ts
new file mode 100644
index 00000000..3f220a37
--- /dev/null
+++ b/src/app/(protected)/team-members/_components/team-member-form-options.ts
@@ -0,0 +1,78 @@
+import type { TeamMemberRole } from "@/domain/team-members/types/team-member";
+
+export const TEAM_MEMBER_ROLES: readonly TeamMemberRole[] = ["Dispatcher", "Scheduler", "Admin"];
+
+export const TEAM_MEMBER_COLORS = [
+  "#F59E0B",
+  "#0D9488",
+  "#6366F1",
+  "#F43F5E",
+  "#7C3AED",
+  "#0EA5E9",
+  "#16A34A",
+  "#EA580C",
+  "#0891B2",
+  "#C026D3",
+] as const;
+
+/** Returns the supported role matching the stored value (case-insensitive), or null for legacy roles. */
+export function canonicalRole(value: string): TeamMemberRole | null {
+  const trimmed = value.trim();
+  return TEAM_MEMBER_ROLES.find((role) => role.toLowerCase() === trimmed.toLowerCase()) ?? null;
+}
+
+function parseHexColor(value: string): [number, number, number] | null {
+  const match = /^#?([0-9a-f]{6})$/i.exec(value.trim());
+  if (!match) return null;
+  const numeric = Number.parseInt(match[1], 16);
+  return [(numeric >> 16) & 255, (numeric >> 8) & 255, numeric & 255];
+}
+
+/** Returns the palette color closest to the stored color by RGB distance, or the first palette color when unparseable. */
+export function nearestPaletteColor(value: string): string {
+  const target = parseHexColor(value);
+  if (!target) return TEAM_MEMBER_COLORS[0];
+
+  let nearest: string = TEAM_MEMBER_COLORS[0];
+  let nearestDistance = Number.POSITIVE_INFINITY;
+  for (const color of TEAM_MEMBER_COLORS) {
+    const [red, green, blue] = parseHexColor(color) ?? [0, 0, 0];
+    const distance = (red - target[0]) ** 2 + (green - target[1]) ** 2 + (blue - target[2]) ** 2;
+    if (distance < nearestDistance) {
+      nearest = color;
+      nearestDistance = distance;
+    }
+  }
+  return nearest;
+}
+
+export interface ResolvedFormColor {
+  color: string;
+  notice: string;
+}
+
+/**
+ * Maps a stored color onto the current palette. Palette colors (any casing) are
+ * canonicalized; legacy colors are replaced by the nearest palette color with a
+ * notice so the replacement is never silent.
+ */
+export function resolveFormColor(stored: string): ResolvedFormColor {
+  const trimmed = stored.trim();
+  if (!trimmed) {
+    return {
+      color: TEAM_MEMBER_COLORS[0],
+      notice: `No color was saved for this member; preselected ${TEAM_MEMBER_COLORS[0]} from the palette.`,
+    };
+  }
+
+  const canonical = TEAM_MEMBER_COLORS.find(
+    (color) => color.toLowerCase() === trimmed.toLowerCase(),
+  );
+  if (canonical) return { color: canonical, notice: "" };
+
+  const nearest = nearestPaletteColor(trimmed);
+  return {
+    color: nearest,
+    notice: `Saved color ${trimmed} is not in the current palette and was replaced with the nearest palette color ${nearest}.`,
+  };
+}
diff --git a/src/app/(protected)/team-members/_components/team-member-permissions.ts b/src/app/(protected)/team-members/_components/team-member-permissions.ts
new file mode 100644
index 00000000..bd1097f5
--- /dev/null
+++ b/src/app/(protected)/team-members/_components/team-member-permissions.ts
@@ -0,0 +1,120 @@
+import type { TeamMemberRole } from "@/domain/team-members/types/team-member";
+
+export const PERMISSION_GROUPS = [
+  { label: "Team Members", keys: ["manageTeamMembers", "changeTeamMemberRole"] },
+  { label: "Vendors", keys: ["createVendors", "editVendors", "deactivateVendors"] },
+  { label: "Sites", keys: ["createSites", "editSites", "deleteSites"] },
+  { label: "Services", keys: ["createServices", "editServices", "deactivateServices"] },
+  {
+    label: "Completion Document Templates",
+    keys: [
+      "createCompletionDocTemplates",
+      "editCompletionDocTemplates",
+      "deleteCompletionDocTemplates",
+    ],
+  },
+  {
+    label: "Work Orders",
+    keys: ["createWorkOrders", "editOthersWorkOrders", "cancelWorkOrders", "deleteWorkOrders"],
+  },
+  { label: "Uplifts", keys: ["requestUplifts", "autoApproveUplifts", "reviewUplifts"] },
+  { label: "Dashboard", keys: ["viewAllDispatchersOnDashboard"] },
+] as const;
+
+export const PERMISSION_LABELS: Record<string, string> = {
+  manageTeamMembers: "Manage team members",
+  changeTeamMemberRole: "Change team member role",
+  createVendors: "Create vendors",
+  editVendors: "Edit vendors",
+  deactivateVendors: "Deactivate vendors",
+  createSites: "Create sites",
+  editSites: "Edit sites",
+  deleteSites: "Delete sites",
+  createServices: "Create services",
+  editServices: "Edit services",
+  deactivateServices: "Deactivate services",
+  createCompletionDocTemplates: "Create completion document templates",
+  editCompletionDocTemplates: "Edit completion document templates",
+  deleteCompletionDocTemplates: "Delete completion document templates",
+  createWorkOrders: "Create work orders",
+  editOthersWorkOrders: "Edit other users' work orders",
+  cancelWorkOrders: "Cancel work orders",
+  deleteWorkOrders: "Delete work orders",
+  requestUplifts: "Request uplifts",
+  autoApproveUplifts: "Automatically approve uplifts",
+  reviewUplifts: "Review uplifts",
+  viewAllDispatchersOnDashboard: "View all Dispatchers on dashboard",
+};
+
+export const ALL_PERMISSION_KEYS = PERMISSION_GROUPS.flatMap((group) => group.keys);
+const DISPATCHER_DEFAULTS = new Set([
+  "createVendors",
+  "editVendors",
+  "deactivateVendors",
+  "createSites",
+  "editSites",
+  "createWorkOrders",
+  "editOthersWorkOrders",
+  "cancelWorkOrders",
+  "requestUplifts",
+  "autoApproveUplifts",
+]);
+const SCHEDULER_DEFAULTS = new Set([
+  ...Array.from(DISPATCHER_DEFAULTS).filter(
+    (key) => key !== "requestUplifts" && key !== "autoApproveUplifts",
+  ),
+  "deleteSites",
+  "createServices",
+  "editServices",
+  "createCompletionDocTemplates",
+  "editCompletionDocTemplates",
+  "viewAllDispatchersOnDashboard",
+]);
+
+export function defaultsForRole(role: TeamMemberRole): Set<string> {
+  if (role === "Admin") return new Set(ALL_PERMISSION_KEYS);
+  return role === "Scheduler" ? new Set(SCHEDULER_DEFAULTS) : new Set(DISPATCHER_DEFAULTS);
+}
+
+export function permissionOverrides(role: TeamMemberRole, selected: Set<string>) {
+  const defaults = defaultsForRole(role);
+  return Object.fromEntries(
+    ALL_PERMISSION_KEYS.filter((key) => defaults.has(key) !== selected.has(key)).map((key) => [
+      key,
+      selected.has(key) ? 1 : 2,
+    ]),
+  ) as Record<string, 1 | 2>;
+}
+
+export interface TeamMemberFormValues {
+  name: string;
+  role: TeamMemberRole | "";
+  color: string;
+  email: string;
+  phone: string;
+  active: boolean;
+  serviceAreas: string[];
+  permissions: Set<string>;
+}
+
+export function getFormErrors(
+  form: TeamMemberFormValues,
+  submitted: boolean,
+  emailIsValid: boolean,
+) {
+  return {
+    name: submitted && !form.name.trim() ? "Name is required." : "",
+    role: submitted && !form.role ? "Role is required." : "",
+    color: submitted && !form.color ? "Color is required." : "",
+    email:
+      submitted && !form.email.trim()
+        ? "Email is required."
+        : submitted && !emailIsValid
+          ? "Enter a valid email address."
+          : "",
+    serviceAreas:
+      submitted && form.role === "Dispatcher" && form.serviceAreas.length === 0
+        ? "Select at least one service area."
+        : "",
+  };
+}
diff --git a/src/app/(protected)/team-members/_components/team-members-table.tsx b/src/app/(protected)/team-members/_components/team-members-table.tsx
new file mode 100644
index 00000000..777aeea4
--- /dev/null
+++ b/src/app/(protected)/team-members/_components/team-members-table.tsx
@@ -0,0 +1,110 @@
+import {
+  Avatar,
+  Button,
+  CircularProgress,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import type { TeamMemberListItem } from "@/domain/team-members/types/team-member";
+
+const HEADINGS = ["Team Member", "Role", "Service Area", "Phone", "Email", "Color", "Status"];
+
+function memberStatusLabel(member: TeamMemberListItem) {
+  return member.pendingRegistration ? "Pending registration" : member.status;
+}
+
+export function TeamMembersTable({
+  rows,
+  isLoading,
+  hasError,
+  tab,
+  onOpen,
+}: {
+  rows: TeamMemberListItem[];
+  isLoading: boolean;
+  hasError: boolean;
+  tab: "active" | "inactive";
+  onOpen: (member: TeamMemberListItem) => void;
+}) {
+  return (
+    <TableContainer component={Paper} variant="outlined">
+      <Table stickyHeader size="small" sx={{ minWidth: 900 }}>
+        <TableHead>
+          <TableRow>
+            {HEADINGS.map((heading) => (
+              <TableCell key={heading} className="font-semibold">
+                {heading}
+              </TableCell>
+            ))}
+            <TableCell align="right" className="font-semibold">
+              Actions
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {isLoading ? (
+            <TableRow>
+              <TableCell colSpan={8} align="center" sx={{ py: 8 }}>
+                <CircularProgress size={28} />
+              </TableCell>
+            </TableRow>
+          ) : hasError ? (
+            <TableRow>
+              <TableCell colSpan={8} align="center" sx={{ py: 8 }}>
+                <Typography sx={{ fontWeight: 600 }}>Unable to load team members</Typography>
+                <Typography variant="body2" color="text.secondary">
+                  Check your connection and try again.
+                </Typography>
+              </TableCell>
+            </TableRow>
+          ) : rows.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={8} align="center" sx={{ py: 8 }}>
+                <Typography sx={{ fontWeight: 600 }}>No {tab} team members found</Typography>
+                <Typography variant="body2" color="text.secondary">
+                  Try a different search, or add a new team member.
+                </Typography>
+              </TableCell>
+            </TableRow>
+          ) : (
+            rows.map((member) => (
+              <TableRow
+                key={String(member.id)}
+                hover
+                onClick={() => onOpen(member)}
+                sx={{ cursor: "pointer" }}
+              >
+                <TableCell>{member.name || "—"}</TableCell>
+                <TableCell>{member.role || "—"}</TableCell>
+                <TableCell>{member.serviceArea || "—"}</TableCell>
+                <TableCell>{member.phone || "—"}</TableCell>
+                <TableCell>{member.email || "—"}</TableCell>
+                <TableCell>
+                  <Avatar sx={{ width: 22, height: 22, bgcolor: member.color || "primary.main" }} />
+                </TableCell>
+                <TableCell>{memberStatusLabel(member)}</TableCell>
+                <TableCell align="right">
+                  <Button
+                    size="small"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onOpen(member);
+                    }}
+                  >
+                    View
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/src/app/(protected)/team-members/index.tsx b/src/app/(protected)/team-members/index.tsx
new file mode 100644
index 00000000..02e9c2ab
--- /dev/null
+++ b/src/app/(protected)/team-members/index.tsx
@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { useDebounce } from "@/hooks/use-debounce";
+import { useTeamMembersList } from "@/domain/team-members/use-cases/use-team-members-list";
+import type { TeamMemberListItem } from "@/domain/team-members/types/team-member";
+import { Alert, Box, Button, Stack, Tab, Tabs, TextField, Typography } from "@mui/material";
+import { TeamMembersTable } from "./_components/team-members-table";
+import { AddTeamMemberDialog } from "./_components/add-team-member-dialog";
+import { TeamMemberDetailDrawer } from "./_components/team-member-detail-drawer";
+
+type StatusTab = "active" | "inactive";
+
+const STATUS_LABELS: Record<StatusTab, "Active" | "Inactive"> = {
+  active: "Active",
+  inactive: "Inactive",
+};
+
+export default function TeamMembersListPage() {
+  const [search, setSearch] = useState("");
+  const [tab, setTab] = useState<StatusTab>("active");
+  const [selectedMember, setSelectedMember] = useState<TeamMemberListItem | null>(null);
+  const [addMemberOpen, setAddMemberOpen] = useState(false);
+  const debouncedSearch = useDebounce(search, 300).trim().toLowerCase();
+  const { data, isLoading, error } = useTeamMembersList();
+  const allMembers = data?.items ?? [];
+
+  const activeCount = allMembers.filter((member) => member.status === "Active").length;
+  const inactiveCount = allMembers.length - activeCount;
+  const rows = allMembers
+    .filter((member) => member.status === STATUS_LABELS[tab])
+    .filter((member) => !debouncedSearch || member.name.toLowerCase().includes(debouncedSearch));
+
+  return (
+    <Box
+      className="flex h-full flex-col overflow-hidden"
+      sx={{ backgroundColor: "var(--color-bg-page)" }}
+    >
+      <Stack
+        direction={{ xs: "column", sm: "row" }}
+        spacing={2}
+        sx={{
+          alignItems: { xs: "stretch", sm: "center" },
+          justifyContent: "space-between",
+          p: 2.5,
+          backgroundColor: "var(--color-bg-surface)",
+          borderBottom: "1px solid var(--color-border)",
+        }}
+      >
+        <Box>
+          <Typography variant="h4" component="h1">
+            Team Members
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.75 }}>
+            {allMembers.length} team member{allMembers.length === 1 ? "" : "s"} · {activeCount}{" "}
+            active
+          </Typography>
+        </Box>
+        <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+          <TextField
+            size="small"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder="Search team member…"
+            aria-label="Search team member"
+            sx={{ width: 224 }}
+          />
+          <Button variant="contained" size="small" onClick={() => setAddMemberOpen(true)}>
+            Add Member
+          </Button>
+        </Stack>
+      </Stack>
+
+      <Tabs
+        value={tab}
+        onChange={(_event, value: StatusTab) => setTab(value)}
+        aria-label="Team member status"
+      >
+        <Tab value="active" label={`Active ${activeCount}`} />
+        <Tab value="inactive" label={`Inactive ${inactiveCount}`} />
+      </Tabs>
+
+      {Boolean(error) && (
+        <Alert severity="error">
+          {error instanceof Error ? error.message : "Failed to load team members"}
+        </Alert>
+      )}
+
+      <Box sx={{ flex: 1, overflow: "auto", p: 2 }}>
+        <TeamMembersTable
+          rows={rows}
+          isLoading={isLoading}
+          hasError={Boolean(error)}
+          tab={tab}
+          onOpen={setSelectedMember}
+        />
+      </Box>
+
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: "space-between",
+          px: 2,
+          py: 1,
+          borderTop: "1px solid var(--color-border)",
+          backgroundColor: "var(--color-bg-surface)",
+        }}
+      >
+        <Typography variant="caption" color="text.secondary">
+          {rows.length} {tab} team member{rows.length === 1 ? "" : "s"}
+          {debouncedSearch ? " · filtered" : ""}
+        </Typography>
+        <Typography variant="caption" color="text.secondary">
+          {activeCount} active · {inactiveCount} inactive
+        </Typography>
+      </Stack>
+
+      <TeamMemberDetailDrawer member={selectedMember} onClose={() => setSelectedMember(null)} />
+      <AddTeamMemberDialog open={addMemberOpen} onClose={() => setAddMemberOpen(false)} />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/uplifts/_components/format-uplift-money.ts b/src/app/(protected)/uplifts/_components/format-uplift-money.ts
new file mode 100644
index 00000000..01aa64ff
--- /dev/null
+++ b/src/app/(protected)/uplifts/_components/format-uplift-money.ts
@@ -0,0 +1,6 @@
+export function formatUpliftMoney(value: number): string {
+  return `$${value.toLocaleString("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })}`;
+}
diff --git a/src/app/(protected)/uplifts/_components/open-uplift-evidence.ts b/src/app/(protected)/uplifts/_components/open-uplift-evidence.ts
new file mode 100644
index 00000000..2654fedd
--- /dev/null
+++ b/src/app/(protected)/uplifts/_components/open-uplift-evidence.ts
@@ -0,0 +1,13 @@
+import { toast } from "react-toastify";
+import type { UpliftQueueItem } from "@/domain/uplifts/types/uplift";
+import { upliftsApi } from "@/domain/uplifts/api/uplifts-api";
+
+export function openUpliftEvidence(row: UpliftQueueItem): void {
+  void upliftsApi
+    .downloadEvidence(row.id, row.evidenceFileName || "uplift-evidence")
+    .catch((error: unknown) => {
+      toast.error(
+        error instanceof Error ? error.message : "Unable to download evidence right now.",
+      );
+    });
+}
diff --git a/src/app/(protected)/uplifts/_components/reject-dialog.tsx b/src/app/(protected)/uplifts/_components/reject-dialog.tsx
new file mode 100644
index 00000000..016da452
--- /dev/null
+++ b/src/app/(protected)/uplifts/_components/reject-dialog.tsx
@@ -0,0 +1,100 @@
+import { useEffect, useState } from "react";
+import { Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import { formatUpliftMoney } from "@/app/(protected)/uplifts/_components/format-uplift-money";
+import { UpliftReasonField } from "@/app/(protected)/uplifts/_components/uplift-reason-field";
+import { Button } from "@/components/ui/button";
+import { DialogCancelButton } from "@/components/ui/dialog-cancel-button";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+import { Text } from "@/components/ui/text";
+import { guardDialogClose } from "@/lib/dialog-guard";
+
+export type RejectDialogProps = {
+  open: boolean;
+  amount?: number | null;
+  woNumber?: string | null;
+  onClose: () => void;
+  onConfirm: (reason: string) => void;
+  isPending?: boolean;
+};
+
+function rejectTitle(amount: number | null | undefined): string {
+  if (amount != null && Number.isFinite(amount)) {
+    return `Reject uplift of ${formatUpliftMoney(amount)}?`;
+  }
+  return "Reject uplift?";
+}
+
+export function RejectDialog({
+  open,
+  amount,
+  woNumber,
+  onClose,
+  onConfirm,
+  isPending = false,
+}: RejectDialogProps) {
+  const [reason, setReason] = useState("");
+  const canConfirm = reason.trim().length > 0 && !isPending;
+
+  useEffect(() => {
+    if (open) {
+      setReason("");
+    }
+  }, [open]);
+
+  const handleClose = () => {
+    if (isPending) return;
+    setReason("");
+    onClose();
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={guardDialogClose(isPending, handleClose)}
+      maxWidth={false}
+      slotProps={{
+        ...dialogBlurBackdropSlotProps,
+        paper: {
+          className: "w-full",
+          style: { borderRadius: 12, maxWidth: 480 },
+        },
+      }}
+    >
+      <DialogTitle
+        className="p-6 pb-0"
+        style={{ fontSize: 16, color: "var(--color-text-primary)" }}
+      >
+        {rejectTitle(amount)}
+      </DialogTitle>
+      <DialogContent className="px-6 pt-3">
+        {Boolean(woNumber) && (
+          <Text as="p" variant="description" className="mb-3">
+            The dispatcher sees this reason on WO #{woNumber}.
+          </Text>
+        )}
+        <UpliftReasonField
+          id="reject-uplift-reason"
+          label="Reason for rejection"
+          required
+          value={reason}
+          disabled={isPending}
+          placeholder="Explain why this uplift is not approved..."
+          onChange={setReason}
+        />
+      </DialogContent>
+      <DialogActions className="px-6 pb-6 pt-2">
+        <DialogCancelButton onClick={handleClose} disabled={isPending} />
+        <Button
+          variant="destructive"
+          className="min-h-0 px-3 py-1 text-[12px]"
+          disabled={!canConfirm}
+          loading={isPending}
+          loadingText="Rejecting…"
+          onClick={() => onConfirm(reason.trim())}
+        >
+          Reject uplift
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/uplifts/_components/revoke-dialog.tsx b/src/app/(protected)/uplifts/_components/revoke-dialog.tsx
new file mode 100644
index 00000000..38bf8024
--- /dev/null
+++ b/src/app/(protected)/uplifts/_components/revoke-dialog.tsx
@@ -0,0 +1,110 @@
+import { useEffect, useState } from "react";
+import { Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import { formatUpliftMoney } from "@/app/(protected)/uplifts/_components/format-uplift-money";
+import { UpliftReasonField } from "@/app/(protected)/uplifts/_components/uplift-reason-field";
+import { Button } from "@/components/ui/button";
+import { DialogCancelButton } from "@/components/ui/dialog-cancel-button";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+import { Text } from "@/components/ui/text";
+import { guardDialogClose } from "@/lib/dialog-guard";
+
+export type RevokeDialogProps = {
+  open: boolean;
+  amount?: number | null;
+  woNumber?: string | null;
+  onClose: () => void;
+  onConfirm: (reason: string) => void;
+  isPending?: boolean;
+};
+
+function revokeAmountLabel(amount: number | null | undefined): string {
+  if (amount != null && Number.isFinite(amount)) {
+    return formatUpliftMoney(amount);
+  }
+  return "this uplift";
+}
+
+function revokeConfirmLabel(amount: number | null | undefined): string {
+  if (amount != null && Number.isFinite(amount)) {
+    return `Revoke ${formatUpliftMoney(amount)}`;
+  }
+  return "Revoke";
+}
+
+export function RevokeDialog({
+  open,
+  amount,
+  woNumber,
+  onClose,
+  onConfirm,
+  isPending = false,
+}: RevokeDialogProps) {
+  const [reason, setReason] = useState("");
+  const canConfirm = reason.trim().length > 0 && !isPending;
+
+  useEffect(() => {
+    if (open) {
+      setReason("");
+    }
+  }, [open]);
+
+  const handleClose = () => {
+    if (isPending) return;
+    setReason("");
+    onClose();
+  };
+
+  const amountLabel = revokeAmountLabel(amount);
+  const woSuffix = woNumber ? ` on WO ${woNumber}` : "";
+
+  return (
+    <Dialog
+      open={open}
+      onClose={guardDialogClose(isPending, handleClose)}
+      maxWidth={false}
+      slotProps={{
+        ...dialogBlurBackdropSlotProps,
+        paper: {
+          className: "w-full",
+          style: { borderRadius: 12, maxWidth: 480 },
+        },
+      }}
+    >
+      <DialogTitle
+        className="p-6 pb-0"
+        style={{ fontSize: 16, color: "var(--color-text-primary)" }}
+      >
+        Revoke this approval?
+      </DialogTitle>
+      <DialogContent className="px-6 pt-3">
+        <Text as="p" variant="description" className="mb-3">
+          The approved uplift of {amountLabel}
+          {woSuffix} will be withdrawn. This does not recover money already spent — it records that
+          the authorization was a mistake.
+        </Text>
+        <UpliftReasonField
+          id="revoke-uplift-reason"
+          label="Reason for revoking"
+          required
+          value={reason}
+          disabled={isPending}
+          placeholder="Explain why this approval is being withdrawn..."
+          onChange={setReason}
+        />
+      </DialogContent>
+      <DialogActions className="px-6 pb-6 pt-2">
+        <DialogCancelButton onClick={handleClose} disabled={isPending} />
+        <Button
+          variant="destructive"
+          className="min-h-0 px-3 py-1 text-[12px]"
+          disabled={!canConfirm}
+          loading={isPending}
+          loadingText="Revoking…"
+          onClick={() => onConfirm(reason.trim())}
+        >
+          {revokeConfirmLabel(amount)}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/uplifts/_components/uplift-approvals-table.tsx b/src/app/(protected)/uplifts/_components/uplift-approvals-table.tsx
new file mode 100644
index 00000000..fb40d7c1
--- /dev/null
+++ b/src/app/(protected)/uplifts/_components/uplift-approvals-table.tsx
@@ -0,0 +1,371 @@
+import {
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Tooltip,
+} from "@mui/material";
+import { formatUpliftMoney } from "@/app/(protected)/uplifts/_components/format-uplift-money";
+import { Text } from "@/components/ui/text";
+import { useUpliftsCanApprove } from "@/domain/uplifts/use-cases/use-uplifts-can-approve";
+import type { UpliftQueueItem } from "@/domain/uplifts/types/uplift";
+import { formatDateTime, getWaitTimeTextClass, timeSince, waitTimeColor } from "@/lib/time-utils";
+
+export type UpliftApprovalTab = "pending" | "approved";
+
+const CLOSED_WO_TOOLTIP = "This work order is closed. Uplifts can no longer be revoked.";
+const ADMIN_ONLY_REVOKE_TOOLTIP = "Only admins can revoke uplifts";
+
+function workOrderLabel(row: UpliftQueueItem): string {
+  return row.woNumber || row.dispatchNumber || "—";
+}
+
+function WaitingCell({ row }: { row: UpliftQueueItem }) {
+  if (!row.requestedAt) {
+    return (
+      <Text variant="caption" tone="muted">
+        —
+      </Text>
+    );
+  }
+  const color = waitTimeColor(row.requestedAt);
+  const className = getWaitTimeTextClass(color);
+  return (
+    <Text variant="caption" className={className}>
+      {timeSince(row.requestedAt)}
+    </Text>
+  );
+}
+
+function AttachmentsCell({
+  row,
+  onOpenAttachment,
+}: {
+  row: UpliftQueueItem;
+  onOpenAttachment: (row: UpliftQueueItem) => void;
+}) {
+  if (row.evidenceDocumentId == null && !row.evidenceFileName) {
+    return (
+      <Text variant="caption" tone="muted">
+        —
+      </Text>
+    );
+  }
+  const extraCount =
+    typeof row.attachmentCount === "number" && row.attachmentCount > 1
+      ? row.attachmentCount - 1
+      : 0;
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+      <Chip
+        size="small"
+        label={row.evidenceFileName || "Attachment"}
+        onClick={row.evidenceDocumentId != null ? () => onOpenAttachment(row) : undefined}
+        clickable={row.evidenceDocumentId != null}
+      />
+      {extraCount > 0 && <Chip size="small" label={`+${extraCount}`} />}
+    </Box>
+  );
+}
+
+function PendingRowActions({
+  row,
+  onApprove,
+  onReject,
+  isDecisionPending,
+}: {
+  row: UpliftQueueItem;
+  onApprove: (row: UpliftQueueItem) => void;
+  onReject: (row: UpliftQueueItem) => void;
+  isDecisionPending: boolean;
+}) {
+  const canApproveTier = useUpliftsCanApprove(row.requiredTier);
+  const canDecide = row.canDecide && canApproveTier.data === true;
+  const tooltip = canDecide ? "" : `Requires Tier ${row.requiredTier} role`;
+  return (
+    <Box sx={{ display: "flex", gap: 1 }} onClick={(e) => e.stopPropagation()}>
+      <Tooltip title={tooltip}>
+        <span>
+          <Button
+            size="small"
+            variant="contained"
+            color="success"
+            disabled={!canDecide || isDecisionPending}
+            onClick={() => onApprove(row)}
+          >
+            Approve
+          </Button>
+        </span>
+      </Tooltip>
+      <Tooltip title={tooltip}>
+        <span>
+          <Button
+            size="small"
+            variant="contained"
+            color="error"
+            disabled={!canDecide || isDecisionPending}
+            onClick={() => onReject(row)}
+          >
+            Reject
+          </Button>
+        </span>
+      </Tooltip>
+    </Box>
+  );
+}
+
+function ApprovedRowActions({
+  row,
+  canRevoke,
+  onRevoke,
+  isDecisionPending,
+}: {
+  row: UpliftQueueItem;
+  canRevoke: boolean;
+  onRevoke: (row: UpliftQueueItem) => void;
+  isDecisionPending: boolean;
+}) {
+  const closed = row.workOrderClosed === true;
+  const tooltip = !canRevoke ? ADMIN_ONLY_REVOKE_TOOLTIP : closed ? CLOSED_WO_TOOLTIP : "";
+  return (
+    <Box sx={{ display: "flex", gap: 1 }} onClick={(e) => e.stopPropagation()}>
+      <Tooltip title={tooltip}>
+        <span>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            disabled={!canRevoke || isDecisionPending || closed || row.workOrderId == null}
+            onClick={() => onRevoke(row)}
+          >
+            Revoke
+          </Button>
+        </span>
+      </Tooltip>
+    </Box>
+  );
+}
+
+function UpliftApprovalRow({
+  row,
+  tab,
+  canRevoke,
+  onOpenDetail,
+  onApprove,
+  onReject,
+  onRevoke,
+  onOpenAttachment,
+  isDecisionPending,
+}: {
+  row: UpliftQueueItem;
+  tab: UpliftApprovalTab;
+  canRevoke: boolean;
+  onOpenDetail: (row: UpliftQueueItem) => void;
+  onApprove: (row: UpliftQueueItem) => void;
+  onReject: (row: UpliftQueueItem) => void;
+  onRevoke: (row: UpliftQueueItem) => void;
+  onOpenAttachment: (row: UpliftQueueItem) => void;
+  isDecisionPending: boolean;
+}) {
+  return (
+    <TableRow
+      hover
+      sx={{ cursor: "pointer" }}
+      onClick={() => onOpenDetail(row)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") onOpenDetail(row);
+      }}
+      tabIndex={0}
+      aria-label={`Open uplift details for ${workOrderLabel(row)}`}
+    >
+      <TableCell>
+        <Box>
+          <Text variant="body" className="font-medium">
+            {workOrderLabel(row)}
+          </Text>
+          {Boolean(row.site) && (
+            <Text variant="caption" tone="muted" className="block">
+              {row.site}
+            </Text>
+          )}
+        </Box>
+      </TableCell>
+      <TableCell>
+        <Box>
+          {Boolean(row.serviceName) && (
+            <Text variant="body" className="block">
+              {row.serviceName}
+            </Text>
+          )}
+          <Text variant="caption" tone="muted">
+            {row.vendorCompanyName || "—"}
+          </Text>
+        </Box>
+      </TableCell>
+      <TableCell>
+        <Text variant="body" className="font-medium">
+          {formatUpliftMoney(row.requestedNTE)}
+        </Text>
+      </TableCell>
+      <TableCell>
+        {row.approvedOnWoTotal != null ? (
+          <Text variant="body">{formatUpliftMoney(row.approvedOnWoTotal)}</Text>
+        ) : (
+          <Text variant="caption" tone="muted">
+            —
+          </Text>
+        )}
+      </TableCell>
+      <TableCell sx={{ maxWidth: 220 }}>
+        <Text variant="caption" sx={{ whiteSpace: "pre-wrap" }}>
+          {row.vendorReason}
+        </Text>
+      </TableCell>
+      <TableCell>
+        <AttachmentsCell row={row} onOpenAttachment={onOpenAttachment} />
+      </TableCell>
+      <TableCell>{row.requestedByVendorName || "—"}</TableCell>
+      {tab === "pending" ? (
+        <TableCell>
+          <WaitingCell row={row} />
+        </TableCell>
+      ) : (
+        <>
+          <TableCell>{row.decidedByName || "—"}</TableCell>
+          <TableCell>{row.decidedAt ? formatDateTime(row.decidedAt) : "—"}</TableCell>
+        </>
+      )}
+      <TableCell>
+        {tab === "pending" ? (
+          <PendingRowActions
+            row={row}
+            onApprove={onApprove}
+            onReject={onReject}
+            isDecisionPending={isDecisionPending}
+          />
+        ) : (
+          <ApprovedRowActions
+            row={row}
+            canRevoke={canRevoke}
+            onRevoke={onRevoke}
+            isDecisionPending={isDecisionPending}
+          />
+        )}
+      </TableCell>
+    </TableRow>
+  );
+}
+
+const PENDING_HEADER_CELLS = [
+  "Work Order",
+  "Service / Vendor",
+  "Amount",
+  "Approved on WO",
+  "Notes",
+  "Attachments",
+  "Requested By",
+  "Waiting",
+  "Actions",
+] as const;
+
+const APPROVED_HEADER_CELLS = [
+  "Work Order",
+  "Service / Vendor",
+  "Amount",
+  "Approved on WO",
+  "Notes",
+  "Attachments",
+  "Requested By",
+  "Approved By",
+  "Approved At",
+  "Actions",
+] as const;
+
+export function UpliftApprovalsTable({
+  tab,
+  isLoading,
+  rows,
+  canRevoke,
+  onOpenDetail,
+  onApprove,
+  onReject,
+  onRevoke,
+  onOpenAttachment,
+  isDecisionPending,
+}: {
+  tab: UpliftApprovalTab;
+  isLoading: boolean;
+  rows: UpliftQueueItem[];
+  canRevoke: boolean;
+  onOpenDetail: (row: UpliftQueueItem) => void;
+  onApprove: (row: UpliftQueueItem) => void;
+  onReject: (row: UpliftQueueItem) => void;
+  onRevoke: (row: UpliftQueueItem) => void;
+  onOpenAttachment: (row: UpliftQueueItem) => void;
+  isDecisionPending: boolean;
+}) {
+  const headerCells = tab === "pending" ? PENDING_HEADER_CELLS : APPROVED_HEADER_CELLS;
+  return (
+    <TableContainer component={Paper} variant="outlined">
+      <Table size="small" aria-label={`${tab} uplift requests`}>
+        <TableHead>
+          <TableRow>
+            {headerCells.map((label) => (
+              <TableCell key={label} className="font-semibold">
+                {label}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {isLoading ? (
+            <TableRow>
+              <TableCell colSpan={headerCells.length} align="center" className="py-10">
+                <CircularProgress size={28} />
+              </TableCell>
+            </TableRow>
+          ) : rows.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={headerCells.length} align="center" className="py-10">
+                {tab === "pending" ? (
+                  <Text variant="description" tone="muted">
+                    No uplifts waiting for approval.
+                  </Text>
+                ) : (
+                  <Box>
+                    <Text variant="description">No approved uplifts yet</Text>
+                    <Text variant="caption" tone="muted">
+                      Uplifts you approve are archived here for reference.
+                    </Text>
+                  </Box>
+                )}
+              </TableCell>
+            </TableRow>
+          ) : (
+            rows.map((row) => (
+              <UpliftApprovalRow
+                key={String(row.id)}
+                row={row}
+                tab={tab}
+                canRevoke={canRevoke}
+                onOpenDetail={onOpenDetail}
+                onApprove={onApprove}
+                onReject={onReject}
+                onRevoke={onRevoke}
+                onOpenAttachment={onOpenAttachment}
+                isDecisionPending={isDecisionPending}
+              />
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/src/app/(protected)/uplifts/_components/uplift-decision-dialogs.tsx b/src/app/(protected)/uplifts/_components/uplift-decision-dialogs.tsx
new file mode 100644
index 00000000..7cc8537b
--- /dev/null
+++ b/src/app/(protected)/uplifts/_components/uplift-decision-dialogs.tsx
@@ -0,0 +1,42 @@
+import { RejectDialog } from "@/app/(protected)/uplifts/_components/reject-dialog";
+import { RevokeDialog } from "@/app/(protected)/uplifts/_components/revoke-dialog";
+import type { useUpliftApprovalController } from "@/domain/uplifts/use-cases/use-uplift-approval-controller";
+
+export type UpliftApprovalController = ReturnType<typeof useUpliftApprovalController>;
+
+function woFallbackNumber(target: UpliftApprovalController["rejectTarget"]): string {
+  return target?.woNumber || String(target?.workOrderId ?? "");
+}
+
+export function UpliftDecisionDialogs({ controller }: { controller: UpliftApprovalController }) {
+  const {
+    rejectTarget,
+    revokeTarget,
+    rejectPending,
+    revokePending,
+    handleRejectConfirm,
+    handleRevokeConfirm,
+    closeReject,
+    closeRevoke,
+  } = controller;
+  return (
+    <>
+      <RejectDialog
+        open={rejectTarget != null}
+        amount={rejectTarget?.requestedNTE}
+        woNumber={woFallbackNumber(rejectTarget)}
+        onClose={closeReject}
+        onConfirm={handleRejectConfirm}
+        isPending={rejectPending}
+      />
+      <RevokeDialog
+        open={revokeTarget != null}
+        amount={revokeTarget?.requestedNTE}
+        woNumber={woFallbackNumber(revokeTarget)}
+        onClose={closeRevoke}
+        onConfirm={handleRevokeConfirm}
+        isPending={revokePending}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/uplifts/_components/uplift-detail-modal.tsx b/src/app/(protected)/uplifts/_components/uplift-detail-modal.tsx
new file mode 100644
index 00000000..55422e2e
--- /dev/null
+++ b/src/app/(protected)/uplifts/_components/uplift-detail-modal.tsx
@@ -0,0 +1,418 @@
+import { useMemo, type ReactNode } from "react";
+import {
+  Box,
+  Button,
+  Chip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Tooltip,
+} from "@mui/material";
+import { formatUpliftMoney } from "@/app/(protected)/uplifts/_components/format-uplift-money";
+import { Text } from "@/components/ui/text";
+import { useWorkOrderBoardDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useWorkOrderUplifts } from "@/domain/work-orders/use-cases/use-work-order-uplifts";
+import { useUpliftsCanApprove } from "@/domain/uplifts/use-cases/use-uplifts-can-approve";
+import { isWorkOrderUpliftsReadOnly } from "@/domain/work-orders/utils/uplift-display-utils";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { UpliftQueueItem } from "@/domain/uplifts/types/uplift";
+import { getWaitTimeTextClass, timeSince, waitTimeColor } from "@/lib/time-utils";
+
+const CLOSED_WO_TOOLTIP = "This work order is closed. Uplifts can no longer be revoked.";
+const ADMIN_ONLY_REVOKE_TOOLTIP = "Only admins can revoke uplifts";
+const UNAVAILABLE_LABEL = "Unavailable";
+
+type ModalCallbacks = {
+  onClose: () => void;
+  onApprove: (row: UpliftQueueItem) => void;
+  onReject: (row: UpliftQueueItem) => void;
+  onRevoke: (row: UpliftQueueItem) => void;
+  onOpenAttachment: (row: UpliftQueueItem) => void;
+};
+
+function DetailField({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <Box>
+      <Text variant="label" tone="muted" className="block">
+        {label}
+      </Text>
+      {children}
+    </Box>
+  );
+}
+
+function DetailSection({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <Box>
+      <Text variant="heading" className="mb-1 block">
+        {title}
+      </Text>
+      <Box sx={{ display: "grid", gap: 1.5 }}>{children}</Box>
+    </Box>
+  );
+}
+
+function UpliftAttachments({
+  item,
+  onOpenAttachment,
+}: {
+  item: UpliftQueueItem;
+  onOpenAttachment: (row: UpliftQueueItem) => void;
+}) {
+  if (item.evidenceDocumentId == null && !item.evidenceFileName) {
+    return (
+      <Text variant="description" tone="muted">
+        No attachments
+      </Text>
+    );
+  }
+  const extraCount =
+    typeof item.attachmentCount === "number" && item.attachmentCount > 1
+      ? item.attachmentCount - 1
+      : 0;
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 0.5, flexWrap: "wrap" }}>
+      <Chip
+        size="small"
+        label={item.evidenceFileName || "Attachment"}
+        onClick={item.evidenceDocumentId != null ? () => onOpenAttachment(item) : undefined}
+        clickable={item.evidenceDocumentId != null}
+      />
+      {extraCount > 0 && <Chip size="small" label={`+${extraCount}`} />}
+    </Box>
+  );
+}
+
+function WorkOrderSection({
+  item,
+  info,
+  unavailable,
+}: {
+  item: UpliftQueueItem;
+  info?: WorkOrderTableRow;
+  unavailable: boolean;
+}) {
+  const statusFallback = unavailable ? UNAVAILABLE_LABEL : "—";
+  return (
+    <DetailSection title="Work order">
+      <DetailField label="Work order #">
+        <Text variant="body">{item.woNumber || "—"}</Text>
+      </DetailField>
+      <DetailField label="Site">
+        <Text variant="body">{info?.site || item.site || "—"}</Text>
+      </DetailField>
+      <DetailField label="Status">
+        <Text variant="body">{info?.status || statusFallback}</Text>
+      </DetailField>
+      <DetailField label="Scheduled">
+        <Text variant="body">
+          {info?.scheduledOn || (unavailable ? UNAVAILABLE_LABEL : "Unscheduled")}
+        </Text>
+      </DetailField>
+      <DetailField label="Vendor">
+        <Text variant="body">{item.vendorCompanyName || "—"}</Text>
+      </DetailField>
+    </DetailSection>
+  );
+}
+
+function RequestSection({
+  item,
+  onOpenAttachment,
+}: {
+  item: UpliftQueueItem;
+  onOpenAttachment: (row: UpliftQueueItem) => void;
+}) {
+  const waitingClass = item.requestedAt
+    ? getWaitTimeTextClass(waitTimeColor(item.requestedAt))
+    : undefined;
+  return (
+    <DetailSection title="Request">
+      <DetailField label="Amount">
+        <Text variant="body">
+          {formatUpliftMoney(item.currentNTE ?? 0)} → {formatUpliftMoney(item.requestedNTE)}
+        </Text>
+      </DetailField>
+      <DetailField label="Requested by">
+        <Text variant="body">{item.requestedByVendorName || "—"}</Text>
+      </DetailField>
+      <DetailField label="Waiting">
+        <Text variant="body" className={waitingClass}>
+          {item.requestedAt ? timeSince(item.requestedAt) : "—"}
+        </Text>
+      </DetailField>
+      <DetailField label="Notes">
+        <Text variant="description">{item.vendorReason || "No justification provided."}</Text>
+      </DetailField>
+      <DetailField label="Attachments">
+        <UpliftAttachments item={item} onOpenAttachment={onOpenAttachment} />
+      </DetailField>
+    </DetailSection>
+  );
+}
+
+function ApprovedOnWoBreakdown({
+  auto,
+  admin,
+  total,
+  unavailable,
+}: {
+  auto: number | null;
+  admin: number | null;
+  total: number | null;
+  unavailable: boolean;
+}) {
+  const rows: Array<{ label: string; value: number | null; strong: boolean }> = [
+    { label: "Auto-approved", value: auto, strong: false },
+    { label: "Admin-approved", value: admin, strong: false },
+    { label: "Total", value: total, strong: true },
+  ];
+  return (
+    <Box sx={{ display: "grid", gap: 0.5 }}>
+      {rows.map((row) => (
+        <BreakdownRow key={row.label} unavailable={unavailable} {...row} />
+      ))}
+    </Box>
+  );
+}
+
+function BreakdownRow({
+  label,
+  value,
+  strong,
+  unavailable,
+}: {
+  label: string;
+  value: number | null;
+  strong: boolean;
+  unavailable: boolean;
+}) {
+  return (
+    <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+      <Text
+        variant={strong ? "body" : "description"}
+        tone={strong ? "default" : "muted"}
+        className={strong ? "font-medium" : undefined}
+      >
+        {label}
+      </Text>
+      <Text
+        variant={strong ? "body" : "description"}
+        className={strong ? "font-medium" : undefined}
+      >
+        {value != null ? formatUpliftMoney(value) : unavailable ? UNAVAILABLE_LABEL : "—"}
+      </Text>
+    </Box>
+  );
+}
+
+function PendingModalActions({
+  item,
+  approvePending,
+  onApprove,
+  onReject,
+}: {
+  item: UpliftQueueItem;
+  approvePending: boolean;
+  onApprove: (row: UpliftQueueItem) => void;
+  onReject: (row: UpliftQueueItem) => void;
+}) {
+  const canApproveTier = useUpliftsCanApprove(item.requiredTier);
+  const canDecide = item.canDecide && canApproveTier.data === true;
+  const tooltip = canDecide ? "" : `Requires Tier ${item.requiredTier} role`;
+  return (
+    <>
+      <Tooltip title={tooltip}>
+        <span>
+          <Button
+            size="small"
+            variant="contained"
+            color="success"
+            disabled={!canDecide || approvePending}
+            onClick={() => onApprove(item)}
+          >
+            Approve
+          </Button>
+        </span>
+      </Tooltip>
+      <Tooltip title={tooltip}>
+        <span>
+          <Button
+            size="small"
+            variant="contained"
+            color="error"
+            disabled={!canDecide}
+            onClick={() => onReject(item)}
+          >
+            Reject
+          </Button>
+        </span>
+      </Tooltip>
+    </>
+  );
+}
+
+function UpliftModalActions({
+  item,
+  closed,
+  canRevoke,
+  approvePending,
+  revokePending,
+  onApprove,
+  onReject,
+  onRevoke,
+}: {
+  item: UpliftQueueItem;
+  closed: boolean;
+  canRevoke: boolean;
+  approvePending: boolean;
+  revokePending: boolean;
+  onApprove: (row: UpliftQueueItem) => void;
+  onReject: (row: UpliftQueueItem) => void;
+  onRevoke: (row: UpliftQueueItem) => void;
+}) {
+  const revokeTooltip = !canRevoke ? ADMIN_ONLY_REVOKE_TOOLTIP : closed ? CLOSED_WO_TOOLTIP : "";
+  return (
+    <>
+      {item.status === "Pending" && (
+        <PendingModalActions
+          item={item}
+          approvePending={approvePending}
+          onApprove={onApprove}
+          onReject={onReject}
+        />
+      )}
+      {item.status === "Approved" && (
+        <Tooltip title={revokeTooltip}>
+          <span>
+            <Button
+              size="small"
+              variant="outlined"
+              color="error"
+              disabled={!canRevoke || closed || item.workOrderId == null || revokePending}
+              onClick={() => onRevoke(item)}
+            >
+              Revoke
+            </Button>
+          </span>
+        </Tooltip>
+      )}
+    </>
+  );
+}
+
+export function UpliftDetailModal({
+  item,
+  canRevoke,
+  approvePending,
+  revokePending,
+  onClose,
+  onApprove,
+  onReject,
+  onRevoke,
+  onOpenAttachment,
+}: {
+  item: UpliftQueueItem | null;
+  canRevoke: boolean;
+  approvePending: boolean;
+  revokePending: boolean;
+} & ModalCallbacks) {
+  const open = item != null;
+  // Permission failures (e.g. 403 for account-scoped users) are handled quietly
+  // in this modal: dependent sections fall back to "Unavailable" instead of toasting.
+  const quietMeta = { suppressErrorToast: true } as const;
+  const boardDetail = useWorkOrderBoardDetail(
+    item != null && item.workOrderId != null ? item.workOrderId : undefined,
+    true,
+    quietMeta,
+  );
+  const woUpliftsQuery = useWorkOrderUplifts(
+    item != null && item.workOrderId != null ? item.workOrderId : null,
+    quietMeta,
+  );
+
+  const info = boardDetail.data?.info;
+  const closed = useMemo(() => {
+    if (item?.workOrderClosed === true) return true;
+    return info ? isWorkOrderUpliftsReadOnly(info.status) : false;
+  }, [item?.workOrderClosed, info]);
+
+  const breakdown = useMemo(() => {
+    const woUplifts = woUpliftsQuery.data ?? [];
+    const autoFallback = sumUpliftAmounts(woUplifts, "auto_approved");
+    const adminFallback = sumUpliftAmounts(woUplifts, "approved");
+    const hasWoData = woUplifts.length > 0;
+    return {
+      auto: item?.approvedOnWoAuto ?? (hasWoData ? autoFallback : null),
+      admin: item?.approvedOnWoAdmin ?? (hasWoData ? adminFallback : null),
+      total: item?.approvedOnWoTotal ?? (hasWoData ? autoFallback + adminFallback : null),
+    };
+  }, [
+    item?.approvedOnWoAuto,
+    item?.approvedOnWoAdmin,
+    item?.approvedOnWoTotal,
+    woUpliftsQuery.data,
+  ]);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      maxWidth="sm"
+      fullWidth
+      aria-label="Uplift request details"
+    >
+      <DialogTitle>
+        <Text variant="title" as="div">
+          Uplift request
+        </Text>
+        <Text variant="description" tone="muted">
+          {item.woNumber || item.dispatchNumber || "Work order"} · {item.status}
+        </Text>
+      </DialogTitle>
+      <DialogContent>
+        <Box sx={{ display: "grid", gap: 3 }}>
+          <WorkOrderSection item={item} info={info} unavailable={boardDetail.isError} />
+          <RequestSection item={item} onOpenAttachment={onOpenAttachment} />
+          <DetailSection title="Approved on work order">
+            <ApprovedOnWoBreakdown
+              auto={breakdown.auto}
+              admin={breakdown.admin}
+              total={breakdown.total}
+              unavailable={woUpliftsQuery.isError}
+            />
+          </DetailSection>
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button size="small" variant="outlined" onClick={onClose}>
+          Close
+        </Button>
+        <UpliftModalActions
+          item={item}
+          closed={closed}
+          canRevoke={canRevoke}
+          approvePending={approvePending}
+          revokePending={revokePending}
+          onApprove={onApprove}
+          onReject={onReject}
+          onRevoke={onRevoke}
+        />
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+function sumUpliftAmounts(
+  uplifts: ReadonlyArray<{ status: string; amount: number }>,
+  status: string,
+): number {
+  return uplifts
+    .filter((uplift) => uplift.status === status)
+    .reduce((sum, uplift) => sum + uplift.amount, 0);
+}
diff --git a/src/app/(protected)/uplifts/_components/uplift-reason-field.tsx b/src/app/(protected)/uplifts/_components/uplift-reason-field.tsx
new file mode 100644
index 00000000..ee4deddc
--- /dev/null
+++ b/src/app/(protected)/uplifts/_components/uplift-reason-field.tsx
@@ -0,0 +1,46 @@
+import {
+  DLG_INPUT_CLS,
+  DLG_INPUT_STYLE,
+} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
+import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
+
+type UpliftReasonFieldProps = {
+  id: string;
+  label: string;
+  value: string;
+  placeholder: string;
+  required?: boolean;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+};
+
+export function UpliftReasonField({
+  id,
+  label,
+  value,
+  placeholder,
+  required = false,
+  disabled = false,
+  onChange,
+}: UpliftReasonFieldProps) {
+  return (
+    <div>
+      <FieldLabel htmlFor={id} required={required}>
+        {label}
+      </FieldLabel>
+      <textarea
+        id={id}
+        value={value}
+        disabled={disabled}
+        placeholder={placeholder}
+        required={required}
+        aria-required={required}
+        rows={3}
+        autoFocus
+        className={`${DLG_INPUT_CLS} resize-none`}
+        style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit" }}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/uplifts/index.tsx b/src/app/(protected)/uplifts/index.tsx
new file mode 100644
index 00000000..eb891ab7
--- /dev/null
+++ b/src/app/(protected)/uplifts/index.tsx
@@ -0,0 +1,190 @@
+import { useState } from "react";
+import { Alert, Box, Chip, Stack, Tab, Tabs, TablePagination } from "@mui/material";
+import {
+  UpliftApprovalsTable,
+  type UpliftApprovalTab,
+} from "@/app/(protected)/uplifts/_components/uplift-approvals-table";
+import { UpliftDecisionDialogs } from "@/app/(protected)/uplifts/_components/uplift-decision-dialogs";
+import { UpliftDetailModal } from "@/app/(protected)/uplifts/_components/uplift-detail-modal";
+import { openUpliftEvidence } from "@/app/(protected)/uplifts/_components/open-uplift-evidence";
+import { formatUpliftMoney } from "@/app/(protected)/uplifts/_components/format-uplift-money";
+import { isAdminUser } from "@/lib/auth/user-utils";
+import { useAuthContext } from "@/providers/auth-context";
+import { useUpliftApprovalController } from "@/domain/uplifts/use-cases/use-uplift-approval-controller";
+import { useUpliftsQueue } from "@/domain/uplifts/use-cases/use-uplifts-queue";
+import { Text } from "@/components/ui/text";
+
+const PAGE_SIZE = 25;
+
+function UpliftApprovalsHeader({ pendingExposureTotal }: { pendingExposureTotal: number | null }) {
+  return (
+    <Box>
+      <Text variant="title" as="h1">
+        Uplift Approvals
+      </Text>
+      <Text variant="description" tone="muted">
+        Requests to increase the approved spend on a work order, above its remaining auto-approval
+        allowance.
+      </Text>
+      <Text when={pendingExposureTotal != null} variant="caption" tone="muted">
+        Pending exposure:{" "}
+        {pendingExposureTotal && pendingExposureTotal > 0
+          ? formatUpliftMoney(pendingExposureTotal)
+          : "—"}
+      </Text>
+    </Box>
+  );
+}
+
+function UpliftApprovalsTabs({
+  tab,
+  pendingCount,
+  onChange,
+}: {
+  tab: UpliftApprovalTab;
+  pendingCount: number;
+  onChange: (_event: unknown, value: string) => void;
+}) {
+  return (
+    <Tabs value={tab} onChange={onChange}>
+      <Tab
+        value="pending"
+        label={
+          <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+            <span>Pending</span>
+            <Chip
+              size="small"
+              label={pendingCount}
+              aria-label={`${pendingCount} pending uplifts`}
+            />
+          </Stack>
+        }
+      />
+      <Tab value="approved" label="Approved" />
+    </Tabs>
+  );
+}
+
+function UpliftApprovalsPagination({
+  tab,
+  count,
+  pendingPage,
+  approvedPage,
+  onPendingPageChange,
+  onApprovedPageChange,
+}: {
+  tab: UpliftApprovalTab;
+  count: number;
+  pendingPage: number;
+  approvedPage: number;
+  onPendingPageChange: (page: number) => void;
+  onApprovedPageChange: (page: number) => void;
+}) {
+  return (
+    <TablePagination
+      component="div"
+      count={count}
+      page={tab === "pending" ? pendingPage : approvedPage}
+      onPageChange={(_event, nextPage) =>
+        tab === "pending" ? onPendingPageChange(nextPage) : onApprovedPageChange(nextPage)
+      }
+      rowsPerPage={PAGE_SIZE}
+      rowsPerPageOptions={[PAGE_SIZE]}
+    />
+  );
+}
+
+function UpliftQueueError({ error }: { error: unknown }) {
+  if (!error) return null;
+  return (
+    <Alert severity="error">
+      {error instanceof Error ? error.message : "Failed to load uplift queue"}
+    </Alert>
+  );
+}
+
+export default function UpliftQueuePage() {
+  const [tab, setTab] = useState<UpliftApprovalTab>("pending");
+  const [pendingPage, setPendingPage] = useState(0);
+  const [approvedPage, setApprovedPage] = useState(0);
+
+  const { user } = useAuthContext();
+  const canRevokeUplifts = isAdminUser(user?.userRoles);
+
+  const pendingQuery = useUpliftsQueue({
+    status: "Pending",
+    page: pendingPage + 1,
+    pageSize: PAGE_SIZE,
+  });
+  const approvedQuery = useUpliftsQueue({
+    status: "Approved",
+    page: approvedPage + 1,
+    pageSize: PAGE_SIZE,
+  });
+
+  const controller = useUpliftApprovalController();
+  const {
+    detailItem,
+    approvePending,
+    rejectPending,
+    revokePending,
+    handleApprove,
+    handleRejectRequest,
+    handleRevokeRequest,
+    closeDetail,
+    openDetail,
+  } = controller;
+
+  const activeQuery = tab === "pending" ? pendingQuery : approvedQuery;
+  const rows = activeQuery.data?.items ?? [];
+  const pendingCount = pendingQuery.data?.totalCount ?? 0;
+  const pendingExposureTotal = pendingQuery.data?.pendingExposureTotal ?? null;
+
+  const handleTabChange = (_event: unknown, value: string) => {
+    if (value === "pending" || value === "approved") {
+      setTab(value);
+    }
+  };
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <UpliftApprovalsHeader pendingExposureTotal={pendingExposureTotal} />
+      <UpliftApprovalsTabs tab={tab} pendingCount={pendingCount} onChange={handleTabChange} />
+      <UpliftQueueError error={activeQuery.error} />
+      <UpliftApprovalsTable
+        tab={tab}
+        isLoading={activeQuery.isLoading}
+        rows={rows}
+        canRevoke={canRevokeUplifts}
+        onOpenDetail={openDetail}
+        onApprove={handleApprove}
+        onReject={handleRejectRequest}
+        onRevoke={handleRevokeRequest}
+        onOpenAttachment={openUpliftEvidence}
+        isDecisionPending={approvePending || rejectPending || revokePending}
+      />
+      <UpliftApprovalsPagination
+        tab={tab}
+        count={activeQuery.data?.totalCount ?? 0}
+        pendingPage={pendingPage}
+        approvedPage={approvedPage}
+        onPendingPageChange={setPendingPage}
+        onApprovedPageChange={setApprovedPage}
+      />
+      {detailItem != null && (
+        <UpliftDetailModal
+          item={detailItem}
+          canRevoke={canRevokeUplifts}
+          approvePending={approvePending}
+          revokePending={revokePending}
+          onClose={closeDetail}
+          onApprove={handleApprove}
+          onReject={handleRejectRequest}
+          onRevoke={handleRevokeRequest}
+          onOpenAttachment={openUpliftEvidence}
+        />
+      )}
+      <UpliftDecisionDialogs controller={controller} />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/vendor-pos/[id].tsx b/src/app/(protected)/vendor-pos/[id].tsx
new file mode 100644
index 00000000..dc47b341
--- /dev/null
+++ b/src/app/(protected)/vendor-pos/[id].tsx
@@ -0,0 +1,161 @@
+import { useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import { Alert, Box, Button, Chip, CircularProgress, Stack, Typography } from "@mui/material";
+import { toast } from "react-toastify";
+import { upliftsApi } from "@/domain/uplifts/api/uplifts-api";
+import type { UpliftRequest } from "@/domain/uplifts/types/uplift";
+import {
+  useApproveUplift,
+  useRejectUplift,
+  useRequestChangesUplift,
+} from "@/domain/uplifts/use-cases/use-uplift-actions";
+import { useVendorPoDetail } from "@/domain/vendor-pos/use-cases/use-vendor-po-detail";
+import {
+  PoDetailsPaper,
+  SitePaper,
+  UpliftDecisionDialog,
+  UpliftHistoryPaper,
+  VendorSummaryPaper,
+  WorkOrdersPaper,
+  type UpliftActionType,
+  type VendorPoUpliftDecision,
+} from "@/app/(protected)/vendor-pos/_components/vendor-po-sections";
+
+function formatMoney(value: number | null | undefined): string {
+  if (value == null) return "—";
+  return `$${Number(value).toFixed(2)}`;
+}
+
+export default function VendorPoViewPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { data: dispatch, isLoading, error, refetch } = useVendorPoDetail(id);
+
+  const approveUplift = useApproveUplift(id);
+  const rejectUplift = useRejectUplift(id);
+  const requestChangesUplift = useRequestChangesUplift(id);
+
+  const [upliftAction, setUpliftAction] = useState<VendorPoUpliftDecision | null>(null);
+  const [note, setNote] = useState("");
+
+  const noteRequired = upliftAction?.type === "reject" || upliftAction?.type === "request-changes";
+  const decisionPending =
+    approveUplift.isPending || rejectUplift.isPending || requestChangesUplift.isPending;
+
+  const closeUpliftDialog = () => {
+    setUpliftAction(null);
+    setNote("");
+  };
+
+  const handleUpliftConfirm = () => {
+    if (!upliftAction) return;
+    if (noteRequired && !note.trim()) return;
+    const upliftId = upliftAction.uplift.id;
+    const onDone = () => {
+      closeUpliftDialog();
+      void refetch();
+    };
+    if (upliftAction.type === "approve") {
+      approveUplift.mutate({ id: upliftId, note: note || undefined }, { onSuccess: onDone });
+    } else if (upliftAction.type === "reject") {
+      rejectUplift.mutate({ id: upliftId, note: note.trim() }, { onSuccess: onDone });
+    } else {
+      requestChangesUplift.mutate({ id: upliftId, note: note.trim() }, { onSuccess: onDone });
+    }
+  };
+
+  const downloadEvidence = async (uplift: UpliftRequest) => {
+    try {
+      await upliftsApi.downloadEvidence(uplift.id, uplift.evidenceFileName || "uplift-evidence");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Unable to download evidence.");
+    }
+  };
+
+  const handleDecide = (type: UpliftActionType, uplift: UpliftRequest) => {
+    setUpliftAction({ type, uplift });
+    setNote("");
+  };
+
+  if (isLoading) {
+    return (
+      <Box className="flex justify-center p-10">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (error || !dispatch) {
+    return (
+      <Box className="p-4">
+        <Alert severity="error">
+          {error instanceof Error ? error.message : "Vendor PO not found"}
+        </Alert>
+      </Box>
+    );
+  }
+
+  const vendor = dispatch.vendor;
+
+  return (
+    <Box className="mx-auto max-w-5xl p-4">
+      <Stack
+        direction="row"
+        className="mb-4"
+        sx={{ justifyContent: "space-between", alignItems: "center" }}
+      >
+        <Button variant="text" onClick={() => navigate(-1)}>
+          ← Back
+        </Button>
+        <Button variant="outlined" onClick={() => window.print()}>
+          Print
+        </Button>
+      </Stack>
+
+      <Stack spacing={1} className="mb-4">
+        <Typography variant="h5">{dispatch.poNumber || "(no PO #)"}</Typography>
+        <Stack direction="row" spacing={1} sx={{ alignItems: "center", flexWrap: "wrap" }}>
+          <Typography variant="body2" color="text.secondary">
+            Dispatch {dispatch.dispatchNumber || "—"}
+          </Typography>
+          <Chip size="small" label={dispatch.status || "—"} />
+          {vendor != null && Boolean(vendor.companyName) && (
+            <Typography variant="body2" color="text.secondary">
+              · {vendor.companyName}
+            </Typography>
+          )}
+          {dispatch.nteAmount != null && (
+            <Typography variant="body2" color="text.secondary">
+              · NTE {formatMoney(dispatch.nteAmount)}
+            </Typography>
+          )}
+        </Stack>
+      </Stack>
+
+      <Stack spacing={3}>
+        <VendorSummaryPaper vendor={vendor} />
+        <PoDetailsPaper dispatch={dispatch} />
+        <SitePaper location={dispatch.primaryLocation} />
+        <WorkOrdersPaper
+          workOrders={dispatch.workOrders}
+          onView={(workOrderId) => navigate(`/workorders/${workOrderId}`)}
+        />
+        <UpliftHistoryPaper
+          upliftRequests={dispatch.upliftRequests}
+          onDownload={(uplift) => void downloadEvidence(uplift)}
+          onDecide={handleDecide}
+        />
+      </Stack>
+
+      <UpliftDecisionDialog
+        action={upliftAction}
+        note={note}
+        noteRequired={noteRequired}
+        decisionPending={decisionPending}
+        onNoteChange={setNote}
+        onClose={closeUpliftDialog}
+        onConfirm={handleUpliftConfirm}
+      />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/vendor-pos/_components/vendor-po-sections.tsx b/src/app/(protected)/vendor-pos/_components/vendor-po-sections.tsx
new file mode 100644
index 00000000..5d77b7cf
--- /dev/null
+++ b/src/app/(protected)/vendor-pos/_components/vendor-po-sections.tsx
@@ -0,0 +1,346 @@
+import { type ReactNode } from "react";
+import {
+  Box,
+  Button,
+  Chip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
+import { DialogCancelButton } from "@/components/ui/dialog-cancel-button";
+import type { UpliftRequest } from "@/domain/uplifts/types/uplift";
+import type {
+  VendorPoDetail,
+  VendorPoLocation,
+  VendorPoVendor,
+  VendorPoWorkOrder,
+} from "@/domain/vendor-pos/types/vendor-po";
+import { formatDateTime, toDateInputValue } from "@/lib/time-utils";
+
+export type UpliftActionType = "approve" | "reject" | "request-changes";
+
+export type VendorPoUpliftDecision = { type: UpliftActionType; uplift: UpliftRequest };
+
+function formatMoney(value: number | null | undefined): string {
+  if (value == null) return "—";
+  return `$${Number(value).toFixed(2)}`;
+}
+
+function InfoRow({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <Box>
+      <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
+        {label}
+      </Typography>
+      <Typography variant="body2">
+        {children == null || children === "" ? "—" : children}
+      </Typography>
+    </Box>
+  );
+}
+
+export function VendorSummaryPaper({ vendor }: { vendor: VendorPoVendor | null }) {
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        Vendor
+      </Typography>
+      {vendor ? (
+        <Box className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
+          <InfoRow label="Company">{vendor.companyName}</InfoRow>
+          <InfoRow label="Contact">{vendor.contactName}</InfoRow>
+          <InfoRow label="Email">{vendor.email}</InfoRow>
+          <InfoRow label="Phone">{vendor.phone}</InfoRow>
+          <InfoRow label="Address">
+            {[vendor.address, vendor.city, vendor.state, vendor.zip].filter(Boolean).join(", ")}
+          </InfoRow>
+          <InfoRow label="Trades">{vendor.tradeSpecialties}</InfoRow>
+        </Box>
+      ) : (
+        <Typography color="text.secondary">No vendor attached.</Typography>
+      )}
+    </Paper>
+  );
+}
+
+export function PoDetailsPaper({ dispatch }: { dispatch: VendorPoDetail }) {
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        PO Details
+      </Typography>
+      <Box className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
+        <InfoRow label="PO #">{dispatch.poNumber}</InfoRow>
+        <InfoRow label="Dispatch #">{dispatch.dispatchNumber}</InfoRow>
+        <InfoRow label="Status">{dispatch.status}</InfoRow>
+        <InfoRow label="NTE">{formatMoney(dispatch.nteAmount)}</InfoRow>
+        <InfoRow label="Dispatched">{formatDateTime(dispatch.dispatchedAt)}</InfoRow>
+        <InfoRow label="Acknowledged">{formatDateTime(dispatch.acknowledgedAt)}</InfoRow>
+        <InfoRow label="Scheduled">{toDateInputValue(dispatch.scheduledDate) || "—"}</InfoRow>
+        <InfoRow label="Completed">{toDateInputValue(dispatch.completedDate) || "—"}</InfoRow>
+        <InfoRow label="Verified">{formatDateTime(dispatch.verifiedAt)}</InfoRow>
+        <InfoRow label="Email sent">{dispatch.emailSent ? "Yes" : "No"}</InfoRow>
+      </Box>
+      {Boolean(dispatch.description) && (
+        <Box className="mt-3">
+          <Typography variant="caption" color="text.secondary">
+            Description
+          </Typography>
+          <Typography variant="body2" className="whitespace-pre-wrap">
+            {dispatch.description}
+          </Typography>
+        </Box>
+      )}
+    </Paper>
+  );
+}
+
+export function SitePaper({ location }: { location: VendorPoLocation | null }) {
+  if (location == null) return null;
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        Site
+      </Typography>
+      <Box className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        <InfoRow label="Location">{location.name}</InfoRow>
+        <InfoRow label="Address">
+          {[location.address, location.city, location.state, location.zipCode]
+            .filter(Boolean)
+            .join(", ")}
+        </InfoRow>
+      </Box>
+    </Paper>
+  );
+}
+
+export function WorkOrdersPaper({
+  workOrders,
+  onView,
+}: {
+  workOrders: VendorPoWorkOrder[];
+  onView: (workOrderId: string | number) => void;
+}) {
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        Linked Work Orders ({workOrders.length})
+      </Typography>
+      {workOrders.length === 0 ? (
+        <Typography color="text.secondary">No work orders linked.</Typography>
+      ) : (
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>WO #</TableCell>
+              <TableCell>Title</TableCell>
+              <TableCell>Trade</TableCell>
+              <TableCell>Status</TableCell>
+              <TableCell>Location</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {workOrders.map((wo) => (
+              <TableRow key={String(wo.workOrderId)}>
+                <TableCell>
+                  <Button variant="text" size="small" onClick={() => onView(wo.workOrderId)}>
+                    {wo.internalWONumber || wo.workOrderId}
+                  </Button>
+                </TableCell>
+                <TableCell>{wo.title}</TableCell>
+                <TableCell>{wo.trade}</TableCell>
+                <TableCell>{wo.status}</TableCell>
+                <TableCell>{wo.locationName}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </Paper>
+  );
+}
+
+function UpliftHistoryItem({
+  uplift,
+  onDownload,
+  onDecide,
+}: {
+  uplift: UpliftRequest;
+  onDownload: (uplift: UpliftRequest) => void;
+  onDecide: (type: UpliftActionType, uplift: UpliftRequest) => void;
+}) {
+  const decisionable = uplift.status === "Pending";
+  return (
+    <Box className="rounded border border-border p-3">
+      <Stack direction="row" sx={{ justifyContent: "space-between", alignItems: "center" }}>
+        <Typography variant="body2" className="font-semibold">
+          {formatMoney(uplift.currentNTE)} → {formatMoney(uplift.requestedNTE)}
+          <Typography component="span" variant="caption" color="text.secondary" className="ml-2">
+            (Tier {uplift.requiredTier})
+          </Typography>
+        </Typography>
+        <Chip size="small" label={uplift.status} />
+      </Stack>
+      {Boolean(uplift.expiresAt) && (
+        <Typography variant="caption" color="text.secondary" className="mt-1 block">
+          Expires {formatDateTime(uplift.expiresAt)}
+        </Typography>
+      )}
+      {Boolean(uplift.vendorReason) && (
+        <Typography variant="body2" className="mt-1">
+          <strong>Reason:</strong> {uplift.vendorReason}
+        </Typography>
+      )}
+      {uplift.evidenceDocumentId != null && (
+        <Stack direction="row" spacing={1} sx={{ alignItems: "center" }} className="mt-1">
+          <Typography variant="body2">
+            <strong>Evidence:</strong>{" "}
+            {uplift.evidenceFileName || `Document #${uplift.evidenceDocumentId}`}
+          </Typography>
+          <Button size="small" variant="text" onClick={() => onDownload(uplift)}>
+            Download
+          </Button>
+        </Stack>
+      )}
+      {Boolean(uplift.decisionNote) && (
+        <Typography variant="body2" className="mt-1">
+          <strong>Decision:</strong> {uplift.decisionNote}
+        </Typography>
+      )}
+      {uplift.notificationStatus === "Error" && Boolean(uplift.notificationError) && (
+        <Typography variant="body2" color="error" className="mt-1">
+          Notification error: {uplift.notificationError}
+        </Typography>
+      )}
+      {decisionable && (
+        <Stack direction="row" spacing={1} className="mt-2">
+          <Button
+            size="small"
+            variant="contained"
+            color="success"
+            disabled={!uplift.canDecide}
+            onClick={() => onDecide("approve", uplift)}
+          >
+            Approve
+          </Button>
+          <Button
+            size="small"
+            variant="contained"
+            color="error"
+            disabled={!uplift.canDecide}
+            onClick={() => onDecide("reject", uplift)}
+          >
+            Reject
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!uplift.canDecide}
+            onClick={() => onDecide("request-changes", uplift)}
+          >
+            Request Changes
+          </Button>
+        </Stack>
+      )}
+    </Box>
+  );
+}
+
+export function UpliftHistoryPaper({
+  upliftRequests,
+  onDownload,
+  onDecide,
+}: {
+  upliftRequests: UpliftRequest[];
+  onDownload: (uplift: UpliftRequest) => void;
+  onDecide: (type: UpliftActionType, uplift: UpliftRequest) => void;
+}) {
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        NTE Uplift History ({upliftRequests.length})
+      </Typography>
+      {upliftRequests.length === 0 ? (
+        <Typography color="text.secondary">No uplift requests on this PO.</Typography>
+      ) : (
+        <Stack spacing={2}>
+          {upliftRequests.map((uplift) => (
+            <UpliftHistoryItem
+              key={String(uplift.id)}
+              uplift={uplift}
+              onDownload={onDownload}
+              onDecide={onDecide}
+            />
+          ))}
+        </Stack>
+      )}
+    </Paper>
+  );
+}
+
+export function UpliftDecisionDialog({
+  action,
+  note,
+  noteRequired,
+  decisionPending,
+  onNoteChange,
+  onClose,
+  onConfirm,
+}: {
+  action: VendorPoUpliftDecision | null;
+  note: string;
+  noteRequired: boolean;
+  decisionPending: boolean;
+  onNoteChange: (value: string) => void;
+  onClose: () => void;
+  onConfirm: () => void;
+}) {
+  return (
+    <Dialog open={Boolean(action)} onClose={onClose}>
+      <DialogTitle>
+        {action?.type === "approve"
+          ? "Approve Uplift"
+          : action?.type === "reject"
+            ? "Reject Uplift"
+            : "Request Changes"}
+      </DialogTitle>
+      <DialogContent>
+        <FieldLabel htmlFor="vendor-po-uplift-note" required={noteRequired}>
+          {noteRequired ? "Note" : "Optional note"}
+        </FieldLabel>
+        <TextField
+          id="vendor-po-uplift-note"
+          fullWidth
+          multiline
+          minRows={2}
+          className="mt-2"
+          value={note}
+          required={noteRequired}
+          onChange={(e) => onNoteChange(e.target.value)}
+        />
+      </DialogContent>
+      <DialogActions>
+        <DialogCancelButton onClick={onClose} disabled={decisionPending} />
+        <Button
+          variant="contained"
+          color={action?.type === "approve" ? "success" : "primary"}
+          disabled={noteRequired ? !note.trim() || decisionPending : decisionPending}
+          onClick={onConfirm}
+        >
+          Confirm
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/vendor-pos/_components/vendor-pos-list-controls.tsx b/src/app/(protected)/vendor-pos/_components/vendor-pos-list-controls.tsx
new file mode 100644
index 00000000..df8ab433
--- /dev/null
+++ b/src/app/(protected)/vendor-pos/_components/vendor-pos-list-controls.tsx
@@ -0,0 +1,157 @@
+import {
+  Button,
+  CircularProgress,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import type { VendorListItem } from "@/domain/vendors/types/vendor";
+import type { VendorPosFilters } from "../_hooks/use-vendor-pos-filters";
+
+const STATUS_OPTIONS = [
+  "",
+  "Sent",
+  "Acknowledged",
+  "In Progress",
+  "Completed",
+  "Verified",
+  "Cancelled",
+];
+
+interface VendorPosListControlsProps {
+  filters: VendorPosFilters;
+  vendors: VendorListItem[];
+  totalCount: number;
+  isFetching: boolean;
+  isLoading: boolean;
+  onSearchChange: (value: string) => void;
+  onFilterChange: (name: Exclude<keyof VendorPosFilters, "search">, value: string) => void;
+  onClearFilters: () => void;
+}
+
+export function VendorPosListControls({
+  filters,
+  vendors,
+  totalCount,
+  isFetching,
+  isLoading,
+  onSearchChange,
+  onFilterChange,
+  onClearFilters,
+}: VendorPosListControlsProps) {
+  return (
+    <>
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{
+          alignItems: { xs: "stretch", md: "center" },
+          justifyContent: "space-between",
+        }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: "baseline",
+            flexShrink: 0,
+            flexWrap: "wrap",
+            minWidth: 0,
+          }}
+        >
+          <Typography variant="h5" component="h1" sx={{ flexShrink: 0, whiteSpace: "nowrap" }}>
+            Vendor POs
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{ color: "text.secondary", flexShrink: 0, whiteSpace: "nowrap" }}
+          >
+            {totalCount} total
+          </Typography>
+          {isFetching && !isLoading && <CircularProgress size={16} />}
+        </Stack>
+
+        <TextField
+          size="small"
+          value={filters.search}
+          onChange={(event) => onSearchChange(event.target.value)}
+          placeholder="Search PO #, dispatch, vendor, WO..."
+          sx={{ width: { xs: "100%", sm: 360 }, minWidth: 280, flexShrink: 0 }}
+        />
+      </Stack>
+
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{ flexWrap: "wrap", alignItems: "flex-start" }}
+      >
+        <FormControl
+          size="small"
+          sx={{ width: { xs: "100%", sm: 160 }, minWidth: 140, flexShrink: 0 }}
+        >
+          <InputLabel>Status</InputLabel>
+          <Select
+            label="Status"
+            value={filters.status}
+            onChange={(event) => onFilterChange("status", event.target.value)}
+          >
+            {STATUS_OPTIONS.map((status) => (
+              <MenuItem key={status || "all"} value={status}>
+                {status || "All"}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        <FormControl
+          size="small"
+          sx={{ width: { xs: "100%", sm: 240 }, minWidth: 180, flexShrink: 0 }}
+        >
+          <InputLabel>Vendor</InputLabel>
+          <Select
+            label="Vendor"
+            value={filters.vendorId}
+            onChange={(event) => onFilterChange("vendorId", event.target.value)}
+          >
+            <MenuItem value="">All</MenuItem>
+            {vendors.map((vendor) => (
+              <MenuItem key={String(vendor.id)} value={String(vendor.id)}>
+                {vendor.companyName}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+
+        <TextField
+          size="small"
+          type="date"
+          label="From"
+          value={filters.dateFrom}
+          onChange={(event) => onFilterChange("dateFrom", event.target.value)}
+          slotProps={{ inputLabel: { shrink: true } }}
+          sx={{ width: { xs: "100%", sm: 164 }, minWidth: 140, flexShrink: 0 }}
+        />
+        <TextField
+          size="small"
+          type="date"
+          label="To"
+          value={filters.dateTo}
+          onChange={(event) => onFilterChange("dateTo", event.target.value)}
+          slotProps={{ inputLabel: { shrink: true } }}
+          sx={{ width: { xs: "100%", sm: 164 }, minWidth: 140, flexShrink: 0 }}
+        />
+        <Button
+          variant="text"
+          onClick={onClearFilters}
+          sx={{ minWidth: "max-content", flexShrink: 0 }}
+        >
+          Clear filters
+        </Button>
+      </Stack>
+    </>
+  );
+}
diff --git a/src/app/(protected)/vendor-pos/_components/vendor-pos-list-table.tsx b/src/app/(protected)/vendor-pos/_components/vendor-pos-list-table.tsx
new file mode 100644
index 00000000..28d8f7c6
--- /dev/null
+++ b/src/app/(protected)/vendor-pos/_components/vendor-pos-list-table.tsx
@@ -0,0 +1,111 @@
+import {
+  Button,
+  Chip,
+  CircularProgress,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import type { VendorPoListItem } from "@/domain/vendor-pos/types/vendor-po";
+import { toDateInputValue } from "@/lib/time-utils";
+
+interface VendorPosListTableProps {
+  rows: VendorPoListItem[];
+  isLoading: boolean;
+  onNavigate: (id: string | number) => void;
+}
+
+function formatMoney(value: number | null): string {
+  if (value == null) return "—";
+  return `$${value.toFixed(2)}`;
+}
+
+function formatDate(value: string): string {
+  if (!value) return "—";
+  return toDateInputValue(value) || "—";
+}
+
+export function VendorPosListTable({ rows, isLoading, onNavigate }: VendorPosListTableProps) {
+  return (
+    <TableContainer component={Paper} variant="outlined">
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell className="font-semibold">PO #</TableCell>
+            <TableCell className="font-semibold">Dispatch #</TableCell>
+            <TableCell className="font-semibold">Vendor</TableCell>
+            <TableCell className="font-semibold">WO #</TableCell>
+            <TableCell className="font-semibold">Location</TableCell>
+            <TableCell className="font-semibold">NTE</TableCell>
+            <TableCell className="font-semibold">Status</TableCell>
+            <TableCell className="font-semibold">Uplifts</TableCell>
+            <TableCell className="font-semibold">Dispatched</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {isLoading ? (
+            <TableRow>
+              <TableCell colSpan={9} align="center" className="py-10">
+                <CircularProgress size={28} />
+              </TableCell>
+            </TableRow>
+          ) : rows.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={9} align="center" className="py-10">
+                <Typography sx={{ color: "text.secondary" }}>No vendor POs found</Typography>
+              </TableCell>
+            </TableRow>
+          ) : (
+            rows.map((row) => (
+              <TableRow
+                key={String(row.id)}
+                hover
+                className="cursor-pointer"
+                onClick={() => onNavigate(row.id)}
+              >
+                <TableCell>
+                  <Button
+                    variant="text"
+                    size="small"
+                    className="font-semibold"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onNavigate(row.id);
+                    }}
+                  >
+                    {row.poNumber || "—"}
+                  </Button>
+                </TableCell>
+                <TableCell>{row.dispatchNumber || "—"}</TableCell>
+                <TableCell>{row.vendorName || "—"}</TableCell>
+                <TableCell>{row.primaryWOInternalNumber || "—"}</TableCell>
+                <TableCell>{row.locationName || "—"}</TableCell>
+                <TableCell>{formatMoney(row.nteAmount)}</TableCell>
+                <TableCell>
+                  <Chip size="small" label={row.status || "—"} />
+                </TableCell>
+                <TableCell>
+                  {row.pendingUpliftCount > 0 ? (
+                    <Chip
+                      size="small"
+                      color="warning"
+                      label={`${row.pendingUpliftCount} pending`}
+                    />
+                  ) : (
+                    "—"
+                  )}
+                </TableCell>
+                <TableCell>{formatDate(row.dispatchedAt)}</TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/src/app/(protected)/vendor-pos/_hooks/use-vendor-pos-filters.ts b/src/app/(protected)/vendor-pos/_hooks/use-vendor-pos-filters.ts
new file mode 100644
index 00000000..d88fa2fa
--- /dev/null
+++ b/src/app/(protected)/vendor-pos/_hooks/use-vendor-pos-filters.ts
@@ -0,0 +1,87 @@
+import { useMemo, useState } from "react";
+import type { VendorPoListParams } from "@/domain/vendor-pos/types/vendor-po";
+import { useDebounce } from "@/hooks/use-debounce";
+
+export interface VendorPosFilters {
+  search: string;
+  status: string;
+  vendorId: string;
+  dateFrom: string;
+  dateTo: string;
+}
+
+type VendorPosFilterName = Exclude<keyof VendorPosFilters, "search">;
+
+const INITIAL_FILTERS: VendorPosFilters = {
+  search: "",
+  status: "",
+  vendorId: "",
+  dateFrom: "",
+  dateTo: "",
+};
+
+export function useVendorPosFilters() {
+  const [filters, setFilters] = useState<VendorPosFilters>(INITIAL_FILTERS);
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(12);
+  const debouncedSearch = useDebounce(filters.search, 300);
+
+  const listParams = useMemo<VendorPoListParams>(
+    () => ({
+      search: debouncedSearch,
+      page: page + 1,
+      pageSize,
+      status: filters.status,
+      vendorId: filters.vendorId,
+      dateFrom: filters.dateFrom,
+      dateTo: filters.dateTo,
+    }),
+    [
+      debouncedSearch,
+      filters.dateFrom,
+      filters.dateTo,
+      filters.status,
+      filters.vendorId,
+      page,
+      pageSize,
+    ],
+  );
+
+  const setSearch = (search: string) => {
+    setFilters((current) => ({ ...current, search }));
+    setPage(0);
+  };
+
+  const setFilter = (name: VendorPosFilterName, value: string) => {
+    setFilters((current) => ({ ...current, [name]: value }));
+    setPage(0);
+  };
+
+  const clearFilters = () => {
+    setFilters((current) => ({
+      ...current,
+      status: "",
+      vendorId: "",
+      dateFrom: "",
+      dateTo: "",
+    }));
+    setPage(0);
+  };
+
+  const changePageSize = (nextPageSize: number) => {
+    setPageSize(nextPageSize);
+    setPage(0);
+  };
+
+  return {
+    filters,
+    page,
+    pageSize,
+    listParams,
+    setSearch,
+    setFilter,
+    clearFilters,
+    setPage,
+    changePageSize,
+  };
+}
diff --git a/src/app/(protected)/vendor-pos/index.tsx b/src/app/(protected)/vendor-pos/index.tsx
new file mode 100644
index 00000000..17c65bce
--- /dev/null
+++ b/src/app/(protected)/vendor-pos/index.tsx
@@ -0,0 +1,61 @@
+import { Alert, Box, TablePagination } from "@mui/material";
+import { useNavigate } from "react-router";
+import { VendorPosListControls } from "./_components/vendor-pos-list-controls";
+import { VendorPosListTable } from "./_components/vendor-pos-list-table";
+import { useVendorPosFilters } from "./_hooks/use-vendor-pos-filters";
+import { useVendorPosList } from "@/domain/vendor-pos/use-cases/use-vendor-pos-list";
+import { useVendorsList } from "@/domain/vendors/use-cases/use-vendors-list";
+
+export default function VendorPosListPage() {
+  const navigate = useNavigate();
+  const {
+    filters,
+    page,
+    pageSize,
+    listParams,
+    setSearch,
+    setFilter,
+    clearFilters,
+    setPage,
+    changePageSize,
+  } = useVendorPosFilters();
+  const { data, isLoading, isFetching, error } = useVendorPosList(listParams);
+  const { data: vendorsData } = useVendorsList({ page: 1, pageSize: 500 });
+  const rows = data?.items ?? [];
+  const totalCount = data?.totalCount ?? 0;
+  const vendors = vendorsData?.items ?? [];
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <VendorPosListControls
+        filters={filters}
+        vendors={vendors}
+        totalCount={totalCount}
+        isFetching={isFetching}
+        isLoading={isLoading}
+        onSearchChange={setSearch}
+        onFilterChange={setFilter}
+        onClearFilters={clearFilters}
+      />
+      {Boolean(error) && (
+        <Alert severity="error">
+          {error instanceof Error ? error.message : "Failed to load vendor POs"}
+        </Alert>
+      )}
+      <VendorPosListTable
+        rows={rows}
+        isLoading={isLoading}
+        onNavigate={(id) => navigate(`/vendor-pos/${id}`)}
+      />
+      <TablePagination
+        component="div"
+        count={totalCount}
+        page={page}
+        onPageChange={(_event, nextPage) => setPage(nextPage)}
+        rowsPerPage={pageSize}
+        onRowsPerPageChange={(event) => changePageSize(Number(event.target.value))}
+        rowsPerPageOptions={[12, 24, 48]}
+      />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
new file mode 100644
index 00000000..5870f7db
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/use-vendor-deactivation.ts
@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { useDeleteVendor } from "@/domain/vendors/use-cases/use-delete-vendor";
+import { useVendorDeactivationImpact } from "@/domain/vendors/use-cases/use-vendor-deactivation-impact";
+import type { VendorDeactivationImpact, VendorListItem } from "@/domain/vendors/types/vendor";
+
+export interface VendorDeactivationState {
+  target: VendorListItem | null;
+  error: string | null;
+  impact: VendorDeactivationImpact | undefined;
+  isLoading: boolean;
+  impactError: Error | null;
+  isSaving: boolean;
+  open: (row: VendorListItem) => void;
+  close: () => void;
+  confirm: () => void;
+}
+
+export function useVendorDeactivation(onSuccess?: () => void): VendorDeactivationState {
+  const [target, setTarget] = useState<VendorListItem | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const deleteVendor = useDeleteVendor();
+  const {
+    data: impact,
+    isLoading,
+    error: impactError,
+  } = useVendorDeactivationImpact(target?.id ?? undefined);
+
+  const open = (row: VendorListItem) => {
+    setTarget(row);
+    setError(null);
+  };
+
+  const close = () => {
+    setTarget(null);
+    setError(null);
+  };
+
+  const confirm = () => {
+    if (!target || target.id == null) return;
+    setError(null);
+    // The dialog has shown whatever open work orders exist, so confirming here is
+    // the explicit confirmation the API requires to deactivate past them (SH-254).
+    deleteVendor.mutate(
+      { id: target.id, confirmOpenWorkOrders: (impact?.openWorkOrders.length ?? 0) > 0 },
+      {
+        onSuccess: () => {
+          setTarget(null);
+          onSuccess?.();
+        },
+        onError: (err: Error) => setError(err.message || "Failed to deactivate vendor"),
+      },
+    );
+  };
+
+  return {
+    target,
+    error,
+    impact,
+    isLoading,
+    impactError,
+    isSaving: deleteVendor.isPending,
+    open,
+    close,
+    confirm,
+  };
+}
diff --git a/src/app/(protected)/vendors/_components/use-vendor-list-state.ts b/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
new file mode 100644
index 00000000..0b56ddf3
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/use-vendor-list-state.ts
@@ -0,0 +1,105 @@
+import { useMemo, useState } from "react";
+import { emptyVendorFilters, type VendorFilters } from "./vendor-filters";
+import { useDebounce } from "@/hooks/use-debounce";
+
+export interface VendorListState {
+  search: string;
+  debouncedSearch: string;
+  page: number;
+  pageSize: number;
+  isActive: boolean;
+  appliedFilters: VendorFilters;
+  listParams: {
+    search: string;
+    page: number;
+    pageSize: number;
+    isActive: boolean;
+    companies: string[];
+    trades: string[];
+    areas: string[];
+    locations: string[];
+    jobBuckets: string[];
+  };
+  setSearchWithReset: (value: string) => void;
+  setPage: (page: number) => void;
+  setPageSizeWithReset: (size: number) => void;
+  setIsActiveWithReset: (isActive: boolean) => void;
+  setAppliedFiltersWithReset: (filters: VendorFilters) => void;
+  removeFilter: (category: keyof VendorFilters, value: string) => void;
+  clearFilters: () => void;
+}
+
+export function useVendorListState(): VendorListState {
+  const [search, setSearch] = useState("");
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(48);
+  const [isActive, setIsActive] = useState(true);
+  const [appliedFilters, setAppliedFilters] = useState<VendorFilters>(emptyVendorFilters);
+
+  const debouncedSearch = useDebounce(search, 300);
+
+  const listParams = useMemo(
+    () => ({
+      search: debouncedSearch,
+      page: page + 1,
+      pageSize,
+      isActive,
+      companies: appliedFilters.companies,
+      trades: appliedFilters.trades,
+      areas: appliedFilters.areas,
+      locations: appliedFilters.locations,
+      jobBuckets: appliedFilters.jobBuckets,
+    }),
+    [debouncedSearch, page, pageSize, isActive, appliedFilters],
+  );
+
+  const setSearchWithReset = (value: string) => {
+    setSearch(value);
+    setPage(0);
+  };
+
+  const setPageSizeWithReset = (size: number) => {
+    setPageSize(size);
+    setPage(0);
+  };
+
+  const setIsActiveWithReset = (next: boolean) => {
+    setIsActive(next);
+    setPage(0);
+  };
+
+  const setAppliedFiltersWithReset = (filters: VendorFilters) => {
+    setAppliedFilters(filters);
+    setPage(0);
+  };
+
+  const removeFilter = (category: keyof VendorFilters, value: string) => {
+    setAppliedFilters((current) => ({
+      ...current,
+      [category]: current[category].filter((item) => item !== value),
+    }));
+    setPage(0);
+  };
+
+  const clearFilters = () => {
+    setAppliedFilters(emptyVendorFilters);
+    setPage(0);
+  };
+
+  return {
+    search,
+    debouncedSearch,
+    page,
+    pageSize,
+    isActive,
+    appliedFilters,
+    listParams,
+    setSearchWithReset,
+    setPage,
+    setPageSizeWithReset,
+    setIsActiveWithReset,
+    setAppliedFiltersWithReset,
+    removeFilter,
+    clearFilters,
+  };
+}
diff --git a/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
new file mode 100644
index 00000000..0beb87fe
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/use-vendor-roster-form.ts
@@ -0,0 +1,273 @@
+import { useCallback, useContext, useMemo, useState } from "react";
+import { toast } from "react-toastify";
+import { useForm, useWatch, type FieldErrors } from "react-hook-form";
+import {
+  emptyVendorCompanyRosterForm,
+  emptyRosterTechnician,
+  vendorCompanyRosterSchema,
+  type VendorCompanyRosterFormValues,
+} from "@/domain/vendors/schemas/vendor-roster-schema";
+import { useVendorCompanyRoster } from "@/domain/vendors/use-cases/use-vendor-company-roster";
+import {
+  buildAdditiveRosterPatch,
+  getSingleStatusOnlyChange,
+  useSaveVendorCompanyRoster,
+  type EditedCompanyFields,
+} from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
+import { useVendorRosterResolver } from "./use-vendor-roster-resolver";
+import { AuthContext } from "@/providers/auth-context";
+import { isAdminUser } from "@/lib/auth/user-utils";
+
+const VENDOR_ROSTER_NO_CHANGES_MESSAGE =
+  "No changes to save. Enter technician details or update a company field.";
+
+const EDITABLE_COMPANY_FIELDS = [
+  "name",
+  "companyPhone",
+  "email",
+  "address",
+  "city",
+  "state",
+  "zip",
+  "notes",
+  "areaId",
+] as const;
+
+/**
+ * Company fields the user actually typed into, taken from react-hook-form dirty state.
+ * Selecting a company calls reset(), so loaded values are not dirty; only genuine edits are.
+ * The additive PATCH must send these rather than a form-vs-roster diff, which would resend
+ * stale values for fields another user changed while a conflict was being resolved.
+ */
+function pickEditedCompanyFields(dirtyFields: Record<string, unknown>): EditedCompanyFields {
+  const edited: EditedCompanyFields = {};
+  for (const field of EDITABLE_COMPANY_FIELDS) {
+    if (dirtyFields[field] === true) edited[field] = true;
+  }
+  return edited;
+}
+import { toFormValues, useVendorRosterSelection } from "./use-vendor-roster-selection";
+import { useVendorFacets } from "@/domain/vendors/use-cases/use-vendor-facets";
+import { isVendorRosterConflictError } from "@/domain/vendors/lib/vendor-roster-conflict";
+import type {
+  VendorCompanyRoster,
+  VendorFacetArea,
+  VendorFacetCompany,
+  VendorRosterConflict,
+} from "@/domain/vendors/types/vendor";
+
+export interface VendorRosterAreaFieldProps {
+  areaOptions: VendorFacetArea[];
+  currentArea: VendorFacetArea | null;
+  canAssignArea: boolean;
+}
+
+function toCurrentArea(roster: VendorCompanyRoster | null | undefined): VendorFacetArea | null {
+  return roster && roster.areaId !== "" ? { id: roster.areaId, name: roster.areaName } : null;
+}
+
+function withoutBlankNewTechnicians(
+  values: VendorCompanyRosterFormValues,
+): VendorCompanyRosterFormValues {
+  return {
+    ...values,
+    technicians: values.technicians.filter(
+      (technician) =>
+        technician.id != null ||
+        Boolean(
+          technician.contactName.trim() ||
+          technician.phone.trim() ||
+          technician.email.trim() ||
+          technician.tradeSpecialties.trim(),
+        ),
+    ),
+  };
+}
+
+export interface VendorRosterFormProps {
+  mode: "create" | "update";
+  vendorId?: string | number;
+  companyId?: string | number;
+  onSuccess?: (roster: VendorCompanyRoster) => void;
+  startWithTechnician?: boolean;
+}
+
+export interface VendorRosterForm {
+  control: ReturnType<typeof useForm<VendorCompanyRosterFormValues>>["control"];
+  errors: FieldErrors<VendorCompanyRosterFormValues>;
+  handleSubmit: ReturnType<typeof useForm<VendorCompanyRosterFormValues>>["handleSubmit"];
+  isLoading: boolean;
+  isError: boolean;
+  error: Error | null;
+  isSaving: boolean;
+  isValid: boolean;
+  conflict: VendorRosterConflict | null;
+  loadErrorMessage: string | null;
+  submit: (values: VendorCompanyRosterFormValues) => void;
+  reload: () => void;
+  retryLoad: () => void;
+  roster: VendorCompanyRoster | undefined;
+  companies: VendorFacetCompany[];
+  trades: string[];
+  tradesLoading: boolean;
+  areaField: VendorRosterAreaFieldProps;
+  selectedCompanyId: string | number | null;
+  selectCompany: (company: VendorFacetCompany | null) => Promise<void>;
+  clearSelectedCompany: (nextName?: string) => void;
+  setTechnicianActive: (index: number, isActive: boolean) => void;
+  resetForm: () => void;
+}
+
+export function useVendorRosterForm({
+  mode,
+  vendorId,
+  companyId,
+  onSuccess,
+  startWithTechnician = false,
+}: VendorRosterFormProps): VendorRosterForm {
+  const query = useVendorCompanyRoster(
+    mode === "update" ? vendorId : undefined,
+    mode === "update" ? companyId : undefined,
+  );
+  const { data: facets, isLoading: facetsLoading } = useVendorFacets();
+  const save = useSaveVendorCompanyRoster();
+  // Area assignment is Admin-only; the API enforces it and the field mirrors it.
+  const canAssignArea = isAdminUser(useContext(AuthContext)?.user?.userRoles);
+  const [conflict, setConflict] = useState<VendorRosterConflict | null>(null);
+
+  const routeRoster = mode === "update" ? query.data : undefined;
+  const companies = useMemo(() => facets?.companies ?? [], [facets]);
+  const trades = useMemo(() => facets?.trades ?? [], [facets]);
+  const resolver = useVendorRosterResolver(routeRoster);
+
+  const createDefaults = useMemo(
+    () => ({
+      ...emptyVendorCompanyRosterForm,
+      technicians: startWithTechnician ? [{ ...emptyRosterTechnician }] : [],
+    }),
+    [startWithTechnician],
+  );
+  const form = useForm<VendorCompanyRosterFormValues>({
+    resolver,
+    defaultValues: createDefaults,
+    values: mode === "update" && routeRoster ? toFormValues(routeRoster) : undefined,
+    mode: "onChange",
+  });
+  const { control, handleSubmit, reset, setValue, formState } = form;
+  // react-hook-form exposes formState through a Proxy that only tracks properties read during
+  // render. Reading dirtyFields inside the submit callback would not subscribe and would come
+  // back empty, so it is resolved here on every render.
+  const editedCompanyFields = pickEditedCompanyFields(formState.dirtyFields);
+  const watched = useWatch({ control });
+
+  const clearConflict = useCallback(() => setConflict(null), []);
+  const selection = useVendorRosterSelection({
+    mode,
+    reset,
+    query,
+    clearConflict,
+  });
+  const { resetSelection } = selection;
+  const areaField = useMemo<VendorRosterAreaFieldProps>(
+    () => ({
+      areaOptions: facets?.areas ?? [],
+      currentArea: toCurrentArea(routeRoster ?? selection.selectedRoster),
+      canAssignArea,
+    }),
+    [canAssignArea, facets, routeRoster, selection.selectedRoster],
+  );
+
+  const isValid = useMemo(() => {
+    if (vendorCompanyRosterSchema.safeParse(watched).success) return true;
+    return Boolean(
+      routeRoster &&
+      getSingleStatusOnlyChange(routeRoster, watched as VendorCompanyRosterFormValues),
+    );
+  }, [routeRoster, watched]);
+
+  const resetForm = useCallback(() => {
+    reset(createDefaults);
+    resetSelection();
+    clearConflict();
+  }, [clearConflict, createDefaults, reset, resetSelection]);
+
+  const setTechnicianActive = useCallback(
+    (index: number, isActive: boolean) => {
+      setValue(`technicians.${index}.isActive`, isActive, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+    },
+    [setValue],
+  );
+
+  const submit = (formValues: VendorCompanyRosterFormValues) => {
+    setConflict(null);
+    const values = withoutBlankNewTechnicians(formValues);
+    if (mode === "create" && selection.selectedRoster != null) {
+      const selected = selection.selectedRoster;
+      if (!buildAdditiveRosterPatch(selected, values, selected.rowVersion, editedCompanyFields)) {
+        toast.error(VENDOR_ROSTER_NO_CHANGES_MESSAGE);
+        return;
+      }
+      save.mutate(
+        {
+          mode: "add",
+          values,
+          companyId: selected.companyId,
+          rowVersion: selected.rowVersion,
+          originalRoster: selected,
+          editedCompanyFields,
+        },
+        {
+          onSuccess: (data) => onSuccess?.(data),
+          onError: (error) => {
+            if (isVendorRosterConflictError(error)) setConflict(error.conflict);
+          },
+        },
+      );
+      return;
+    }
+    save.mutate(
+      {
+        mode: mode === "update" ? "update" : "create",
+        values,
+        companyId: mode === "update" ? (routeRoster?.companyId ?? companyId) : undefined,
+        rowVersion: mode === "update" ? routeRoster?.rowVersion : undefined,
+        originalRoster: mode === "update" ? routeRoster : undefined,
+      },
+      {
+        onSuccess: (data) => onSuccess?.(data),
+        onError: (error) => {
+          if (isVendorRosterConflictError(error)) setConflict(error.conflict);
+        },
+      },
+    );
+  };
+
+  return {
+    control,
+    errors: formState.errors,
+    handleSubmit,
+    isLoading: Boolean(query.isLoading),
+    isError: Boolean(query.isError),
+    error: query.error ?? null,
+    isSaving: save.isPending,
+    isValid,
+    conflict,
+    loadErrorMessage: selection.loadErrorMessage,
+    submit,
+    reload: selection.reload,
+    retryLoad: selection.retryLoad,
+    roster: routeRoster,
+    companies,
+    trades,
+    tradesLoading: facetsLoading,
+    areaField,
+    selectedCompanyId: selection.selectedCompanyId,
+    selectCompany: selection.selectCompany,
+    clearSelectedCompany: selection.clearSelectedCompany,
+    setTechnicianActive,
+    resetForm,
+  };
+}
diff --git a/src/app/(protected)/vendors/_components/use-vendor-roster-resolver.ts b/src/app/(protected)/vendors/_components/use-vendor-roster-resolver.ts
new file mode 100644
index 00000000..864bdb4a
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/use-vendor-roster-resolver.ts
@@ -0,0 +1,43 @@
+import { useMemo } from "react";
+import { type Resolver } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  vendorCompanyRosterSchema,
+  type VendorCompanyRosterFormValues,
+} from "@/domain/vendors/schemas/vendor-roster-schema";
+import { getSingleStatusOnlyChange } from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
+import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
+
+function withoutTechnicianStubs(
+  values: VendorCompanyRosterFormValues,
+): VendorCompanyRosterFormValues {
+  return {
+    ...values,
+    technicians: values.technicians.filter((technician) => {
+      if (technician === null || typeof technician !== "object" || Array.isArray(technician)) {
+        return true;
+      }
+      const candidate = technician as unknown as Record<string, unknown>;
+      const keys = Object.keys(candidate);
+      const isGeneratedStatusStub =
+        keys.length === 1 && keys[0] === "isActive" && typeof candidate.isActive === "boolean";
+      return !isGeneratedStatusStub;
+    }),
+  };
+}
+
+export function useVendorRosterResolver(
+  routeRoster: VendorCompanyRoster | undefined,
+): Resolver<VendorCompanyRosterFormValues> {
+  const strictResolver = useMemo(() => zodResolver(vendorCompanyRosterSchema), []);
+  return useMemo<Resolver<VendorCompanyRosterFormValues>>(
+    () => async (values, context, options) => {
+      const normalizedValues = withoutTechnicianStubs(values);
+      if (routeRoster && getSingleStatusOnlyChange(routeRoster, normalizedValues)) {
+        return { values: normalizedValues, errors: {} };
+      }
+      return strictResolver(normalizedValues, context, options);
+    },
+    [routeRoster, strictResolver],
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/use-vendor-roster-selection.ts b/src/app/(protected)/vendors/_components/use-vendor-roster-selection.ts
new file mode 100644
index 00000000..f0893e32
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/use-vendor-roster-selection.ts
@@ -0,0 +1,204 @@
+import { useCallback, useRef, useState } from "react";
+import { useQueryClient, type UseQueryResult } from "@tanstack/react-query";
+import {
+  emptyRosterTechnician,
+  emptyVendorCompanyRosterForm,
+  type VendorCompanyRosterFormValues,
+} from "@/domain/vendors/schemas/vendor-roster-schema";
+import { vendorCompanyRosterApi } from "@/domain/vendors/api/vendor-company-roster-api";
+import { queryKeys } from "@/infra/query-key/query-key";
+import type { VendorCompanyRoster, VendorFacetCompany } from "@/domain/vendors/types/vendor";
+import type { UseFormReset } from "react-hook-form";
+
+const SELECT_ERROR_MESSAGE = "Couldn't load that company's roster. Try again.";
+const RELOAD_ERROR_MESSAGE = "Couldn't reload the latest company. Try again.";
+
+export interface VendorRosterSelection {
+  selectedRoster: VendorCompanyRoster | null;
+  loadErrorMessage: string | null;
+  selectedCompanyId: string | number | null;
+  selectCompany: (company: VendorFacetCompany | null) => Promise<void>;
+  clearSelectedCompany: (nextName?: string) => void;
+  reload: () => void;
+  retryLoad: () => void;
+  resetSelection: () => void;
+}
+
+interface UseVendorRosterSelectionOptions {
+  mode: "create" | "update";
+  reset: UseFormReset<VendorCompanyRosterFormValues>;
+  query: UseQueryResult<VendorCompanyRoster, Error>;
+  clearConflict: () => void;
+}
+
+export function toFormValues(roster: VendorCompanyRoster): VendorCompanyRosterFormValues {
+  return {
+    name: roster.name,
+    companyPhone: roster.companyPhone,
+    email: roster.email,
+    address: roster.address,
+    city: roster.city,
+    state: roster.state,
+    zip: roster.zip,
+    // The deprecated stored Maps URL is intentionally not seeded: the form has
+    // no input for it, and carrying it would re-emit a legacy value on write.
+    notes: roster.notes,
+    areaId: roster.areaId,
+    technicians: roster.technicians.map((technician) => ({
+      id: technician.id,
+      contactName: technician.contactName,
+      phone: technician.phone,
+      email: technician.email,
+      preferredContact: technician.preferredContact,
+      tradeSpecialties: technician.tradeSpecialties,
+      isActive: technician.isActive,
+    })),
+  };
+}
+
+export function toCompanyFormValues(roster: VendorCompanyRoster): VendorCompanyRosterFormValues {
+  return { ...toFormValues(roster), technicians: [] };
+}
+
+function withCompanyFieldsOnly(
+  roster: VendorCompanyRoster,
+): (current: VendorCompanyRosterFormValues) => VendorCompanyRosterFormValues {
+  return (current) => ({
+    ...toCompanyFormValues(roster),
+    technicians:
+      current.technicians.length > 0 ? current.technicians : [{ ...emptyRosterTechnician }],
+  });
+}
+
+export function useVendorRosterSelection({
+  mode,
+  reset,
+  query,
+  clearConflict,
+}: UseVendorRosterSelectionOptions): VendorRosterSelection {
+  const queryClient = useQueryClient();
+  const [selectedRoster, setSelectedRoster] = useState<VendorCompanyRoster | null>(null);
+  const [loadErrorMessage, setLoadErrorMessage] = useState<string | null>(null);
+  const retryTargetRef = useRef<
+    { kind: "select"; company: VendorFacetCompany } | { kind: "reload" } | null
+  >(null);
+  const requestIdRef = useRef(0);
+
+  const fetchRosterByCompany = useCallback(
+    async (id: string | number): Promise<VendorCompanyRoster> =>
+      queryClient.fetchQuery({
+        queryKey: queryKeys.vendors.roster("companyId", id),
+        queryFn: () => vendorCompanyRosterApi.get({ companyId: id }),
+        // SH-250: this fetch exists to obtain the freshest rowVersion, so it must not
+        // serve the global 5-minute staleTime cache. A conflict never invalidates this
+        // key (useSaveVendorCompanyRoster invalidates only on success, and its onError
+        // returns early for conflicts), and the Add flow has no mounted observer on it.
+        // Without staleTime: 0 the Reload button re-seeds the same stale rowVersion and
+        // the retry 409s again indefinitely.
+        staleTime: 0,
+      }),
+    [queryClient],
+  );
+
+  const selectCompany = useCallback(
+    async (company: VendorFacetCompany | null) => {
+      if (!company || company.companyId == null) {
+        requestIdRef.current += 1;
+        setSelectedRoster(null);
+        setLoadErrorMessage(null);
+        retryTargetRef.current = null;
+        return;
+      }
+      const requestId = (requestIdRef.current += 1);
+      setLoadErrorMessage(null);
+      retryTargetRef.current = { kind: "select", company };
+      try {
+        const roster = await fetchRosterByCompany(company.companyId);
+        if (requestIdRef.current !== requestId) return;
+        reset(withCompanyFieldsOnly(roster));
+        setSelectedRoster(roster);
+        clearConflict();
+        retryTargetRef.current = null;
+      } catch {
+        if (requestIdRef.current !== requestId) return;
+        setLoadErrorMessage(SELECT_ERROR_MESSAGE);
+      }
+    },
+    [clearConflict, fetchRosterByCompany, reset],
+  );
+
+  const clearSelectedCompany = useCallback(
+    (nextName = "") => {
+      requestIdRef.current += 1;
+      if (selectedRoster) {
+        reset((current) => ({
+          ...emptyVendorCompanyRosterForm,
+          name: nextName,
+          technicians: current.technicians,
+        }));
+      }
+      setSelectedRoster(null);
+      clearConflict();
+      setLoadErrorMessage(null);
+      retryTargetRef.current = null;
+    },
+    [clearConflict, reset, selectedRoster],
+  );
+
+  const reload = useCallback(() => {
+    const requestId = (requestIdRef.current += 1);
+    clearConflict();
+    setLoadErrorMessage(null);
+    retryTargetRef.current = { kind: "reload" };
+    if (mode === "update") {
+      void query.refetch().then((result) => {
+        if (requestIdRef.current !== requestId) return;
+        if (result.isError) setLoadErrorMessage(RELOAD_ERROR_MESSAGE);
+        else retryTargetRef.current = null;
+      });
+      return;
+    }
+    if (selectedRoster?.companyId != null) {
+      void fetchRosterByCompany(selectedRoster.companyId)
+        .then((roster) => {
+          if (requestIdRef.current !== requestId) return;
+          // SH-250: refresh the visible company fields alongside rowVersion.
+          // Refreshing only selectedRoster left the form on pre-conflict values,
+          // so a retry diffed stale fields against the reloaded roster and could
+          // overwrite the concurrent company update that caused the 409.
+          reset(withCompanyFieldsOnly(roster));
+          setSelectedRoster(roster);
+          retryTargetRef.current = null;
+        })
+        .catch(() => {
+          if (requestIdRef.current !== requestId) return;
+          setLoadErrorMessage(RELOAD_ERROR_MESSAGE);
+        });
+    }
+  }, [clearConflict, fetchRosterByCompany, mode, query, reset, selectedRoster]);
+
+  const retryLoad = useCallback(() => {
+    const target = retryTargetRef.current;
+    if (!target) return;
+    if (target.kind === "select") void selectCompany(target.company);
+    else void reload();
+  }, [reload, selectCompany]);
+
+  const resetSelection = useCallback(() => {
+    requestIdRef.current += 1;
+    setSelectedRoster(null);
+    setLoadErrorMessage(null);
+    retryTargetRef.current = null;
+  }, []);
+
+  return {
+    selectedRoster,
+    loadErrorMessage,
+    selectedCompanyId: selectedRoster?.companyId ?? null,
+    selectCompany,
+    clearSelectedCompany,
+    reload,
+    retryLoad,
+    resetSelection,
+  };
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-company-contact-fields.tsx b/src/app/(protected)/vendors/_components/vendor-company-contact-fields.tsx
new file mode 100644
index 00000000..e379223f
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-company-contact-fields.tsx
@@ -0,0 +1,89 @@
+import { Controller, useWatch, type Control, type FieldErrors } from "react-hook-form";
+import { Stack, TextField } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import {
+  VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE,
+  type VendorCompanyRosterFormValues,
+} from "@/domain/vendors/schemas/vendor-roster-schema";
+import { formatNorthAmericanPhone } from "@/lib/format/na-phone";
+
+const COMPANY_CONTACT_ERROR_ID = "vendor-company-contact-error";
+const COMPANY_PHONE_HELPER_ID = "vendor-company-phone-helper";
+const COMPANY_EMAIL_HELPER_ID = "vendor-company-email-helper";
+
+interface VendorCompanyContactFieldsProps {
+  control: Control<VendorCompanyRosterFormValues>;
+  errors: FieldErrors<VendorCompanyRosterFormValues>;
+}
+
+export function VendorCompanyContactFields({ control, errors }: VendorCompanyContactFieldsProps) {
+  const companyPhone = useWatch({ control, name: "companyPhone" }) ?? "";
+  const companyEmail = useWatch({ control, name: "email" }) ?? "";
+  const showCompanyContactError = Boolean(
+    errors.companyContact && !companyPhone.trim() && !companyEmail.trim(),
+  );
+  const contactDescribedBy = (helperId: string, hasHelper: boolean) =>
+    [hasHelper ? helperId : null, showCompanyContactError ? COMPANY_CONTACT_ERROR_ID : null]
+      .filter(Boolean)
+      .join(" ") || undefined;
+
+  return (
+    <>
+      <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+        <Controller
+          control={control}
+          name="companyPhone"
+          render={({ field }) => (
+            <TextField
+              {...field}
+              label="Company Phone (optional)"
+              placeholder="(214) 555-0100"
+              inputMode="tel"
+              value={field.value ?? ""}
+              onChange={(event) => field.onChange(formatNorthAmericanPhone(event.target.value))}
+              error={Boolean(errors.companyPhone)}
+              helperText={errors.companyPhone?.message}
+              slotProps={{
+                formHelperText: { id: COMPANY_PHONE_HELPER_ID },
+                htmlInput: {
+                  "aria-describedby": contactDescribedBy(
+                    COMPANY_PHONE_HELPER_ID,
+                    Boolean(errors.companyPhone?.message),
+                  ),
+                },
+              }}
+              fullWidth
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="email"
+          render={({ field }) => (
+            <TextField
+              {...field}
+              label="Email (optional)"
+              placeholder="dispatch@vendor.com"
+              type="email"
+              error={Boolean(errors.email)}
+              helperText={errors.email?.message}
+              slotProps={{
+                formHelperText: { id: COMPANY_EMAIL_HELPER_ID },
+                htmlInput: {
+                  "aria-describedby": contactDescribedBy(
+                    COMPANY_EMAIL_HELPER_ID,
+                    Boolean(errors.email?.message),
+                  ),
+                },
+              }}
+              fullWidth
+            />
+          )}
+        />
+      </Stack>
+      <Text variant="error" id={COMPANY_CONTACT_ERROR_ID} when={showCompanyContactError}>
+        {VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE}
+      </Text>
+    </>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-create-modal.tsx b/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
new file mode 100644
index 00000000..cf8dcb8e
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-create-modal.tsx
@@ -0,0 +1,101 @@
+import { useEffect } from "react";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Stack,
+} from "@mui/material";
+import { Text } from "@/components/ui/text";
+import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
+import { VendorRosterFormFields } from "./vendor-roster-form-fields";
+import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
+import { useVendorRosterForm } from "./use-vendor-roster-form";
+
+interface VendorCreateModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function VendorCreateModal({ open, onClose }: VendorCreateModalProps) {
+  const form = useVendorRosterForm({
+    mode: "create",
+    onSuccess: onClose,
+    startWithTechnician: true,
+  });
+  const { resetForm } = form;
+
+  useEffect(() => {
+    if (!open) resetForm();
+  }, [open, resetForm]);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={form.isSaving ? undefined : onClose}
+      fullWidth
+      maxWidth="sm"
+      aria-labelledby="vendor-create-dialog-title"
+      slotProps={{
+        paper: {
+          role: "dialog",
+          sx: { maxHeight: "88vh", borderRadius: 2 },
+        },
+      }}
+    >
+      <DialogTitle id="vendor-create-dialog-title">
+        <Text variant="title" as="span">
+          Add Vendor
+        </Text>
+        <Text variant="description" tone="muted" sx={{ mt: 0.5 }}>
+          Register a vendor company and its technicians.
+        </Text>
+      </DialogTitle>
+      <DialogContent
+        sx={{
+          maxHeight: "55vh",
+          "&.MuiDialogContent-root": { pt: "12px" },
+        }}
+      >
+        <Stack spacing={2} className="mt-1">
+          {form.loadErrorMessage !== null && (
+            <VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
+          )}
+          {form.conflict !== null && (
+            <VendorRosterConflictAlert conflict={form.conflict} onReload={form.reload} />
+          )}
+          <Box component="form" id="vendor-create-form" onSubmit={form.handleSubmit(form.submit)}>
+            <VendorRosterFormFields
+              control={form.control}
+              errors={form.errors}
+              companies={form.companies}
+              tradeOptions={form.trades}
+              tradeOptionsLoading={form.tradesLoading}
+              selectedCompanyId={form.selectedCompanyId}
+              onSelectCompany={form.selectCompany}
+              onClearSelectedCompany={form.clearSelectedCompany}
+              {...form.areaField}
+            />
+          </Box>
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} disabled={form.isSaving}>
+          Cancel
+        </Button>
+        <Button
+          color="primary"
+          variant="contained"
+          type="submit"
+          form="vendor-create-form"
+          disabled={form.isSaving}
+        >
+          {form.isSaving ? <CircularProgress size={20} color="inherit" /> : "Add Vendor"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-deactivation-dialog.tsx b/src/app/(protected)/vendors/_components/vendor-deactivation-dialog.tsx
new file mode 100644
index 00000000..a56ca3b5
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-deactivation-dialog.tsx
@@ -0,0 +1,131 @@
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Link,
+  List,
+  ListItem,
+  Stack,
+  Typography,
+} from "@mui/material";
+import { Link as RouterLink } from "react-router";
+import type { VendorDeactivationImpact, VendorListItem } from "@/domain/vendors/types/vendor";
+
+interface VendorDeactivationDialogProps {
+  target: VendorListItem | null;
+  isLoading: boolean;
+  isSaving: boolean;
+  error: string | null;
+  impact: VendorDeactivationImpact | undefined;
+  impactError: Error | null;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+function deactivationMessage(companyName: string | undefined, openCount: number): string {
+  const name = companyName ? `"${companyName}"` : "This vendor";
+  if (openCount === 0) {
+    return `${name} will no longer be selectable for new work orders.`;
+  }
+  const plural = openCount === 1 ? "work order" : "work orders";
+  return `${name} will no longer be selectable for new work orders. It still has ${openCount} open ${plural} — they'll keep it as-is unless you reassign them.`;
+}
+
+export function VendorDeactivationDialog({
+  target,
+  isLoading,
+  isSaving,
+  error,
+  impact,
+  impactError,
+  onClose,
+  onConfirm,
+}: VendorDeactivationDialogProps) {
+  const openWorkOrders = impact?.openWorkOrders ?? [];
+  const hasOpenWorkOrders = openWorkOrders.length > 0;
+
+  return (
+    <Dialog open={Boolean(target)} onClose={isSaving ? undefined : onClose}>
+      <DialogTitle>Deactivate this vendor?</DialogTitle>
+      <DialogContent>
+        <Stack spacing={2}>
+          <DialogContentText>
+            {deactivationMessage(target?.companyName, openWorkOrders.length)}
+          </DialogContentText>
+
+          {isLoading && (
+            <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+              <CircularProgress size={16} />
+              <Typography variant="body2" sx={{ color: "text.secondary" }}>
+                Checking linked work orders...
+              </Typography>
+            </Stack>
+          )}
+
+          {Boolean(impactError) && !isLoading && (
+            <Alert severity="warning">
+              Could not verify linked work orders. Close and try again.
+            </Alert>
+          )}
+
+          {hasOpenWorkOrders && (
+            <Box>
+              <Typography variant="subtitle2" className="font-semibold uppercase">
+                Open work orders ({openWorkOrders.length})
+              </Typography>
+              <List dense sx={{ mt: 0.5 }}>
+                {openWorkOrders.map((wo) => (
+                  <ListItem
+                    key={String(wo.workOrderId)}
+                    sx={{ px: 0, py: 0.25 }}
+                    secondaryAction={
+                      wo.scheduledDate ? (
+                        <Typography variant="caption" sx={{ color: "text.secondary" }}>
+                          {wo.scheduledDate}
+                        </Typography>
+                      ) : undefined
+                    }
+                  >
+                    <Stack>
+                      <Link component={RouterLink} to={`/workorders/${wo.workOrderId}`}>
+                        {wo.workOrderNumber
+                          ? `${wo.workOrderNumber} — ${wo.workOrderTitle || "Untitled"}`
+                          : wo.workOrderTitle || `Work order ${wo.workOrderId}`}
+                      </Link>
+                      {Boolean(wo.status) && (
+                        <Typography variant="caption" sx={{ color: "text.secondary" }}>
+                          {wo.status}
+                        </Typography>
+                      )}
+                    </Stack>
+                  </ListItem>
+                ))}
+              </List>
+            </Box>
+          )}
+
+          {Boolean(error) && <Alert severity="error">{error}</Alert>}
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} disabled={isSaving}>
+          Cancel
+        </Button>
+        <Button
+          color={hasOpenWorkOrders ? "warning" : "error"}
+          variant="contained"
+          onClick={onConfirm}
+          disabled={isSaving || isLoading || Boolean(impactError)}
+        >
+          {isSaving ? "Deactivating..." : hasOpenWorkOrders ? "Deactivate anyway" : "Deactivate"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx b/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
new file mode 100644
index 00000000..2a69b204
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-detail-drawer.tsx
@@ -0,0 +1,494 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { useWatch } from "react-hook-form";
+import CloseIcon from "@mui/icons-material/Close";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import {
+  Alert,
+  Box,
+  Button,
+  Chip,
+  CircularProgress,
+  Divider,
+  Drawer,
+  IconButton,
+  Link,
+  Stack,
+  Switch,
+} from "@mui/material";
+import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
+import { VendorStatusBadge } from "./vendor-status-badge";
+import { VendorRosterFormFields } from "./vendor-roster-form-fields";
+import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
+import { useVendorRosterForm } from "./use-vendor-roster-form";
+import { Text } from "@/components/ui/text";
+import { AddressMapPreview } from "@/components/common/address-map-preview";
+import { mapsSearchUrl } from "@/lib/address/vendor-address";
+import type {
+  VendorCompanyRoster,
+  VendorListItem,
+  VendorRosterTechnician,
+} from "@/domain/vendors/types/vendor";
+import { useVendorCompanyRoster } from "@/domain/vendors/use-cases/use-vendor-company-roster";
+
+const DRAWER_WIDTH = 420;
+
+function splitTrades(value: string | undefined): string[] {
+  return (value ?? "")
+    .split(",")
+    .map((trade) => trade.trim())
+    .filter(Boolean);
+}
+
+interface VendorDetailDrawerProps {
+  open: boolean;
+  vendor: VendorListItem | null;
+  startInEdit?: boolean;
+  onRequestDeactivation?: (vendor: VendorListItem) => void;
+  onClose: () => void;
+}
+
+function SectionTitle({ children }: { children: ReactNode }) {
+  return (
+    <Text
+      variant="label"
+      tone="muted"
+      className="font-semibold tracking-[0.06em] uppercase"
+      sx={{ mb: 1 }}
+    >
+      {children}
+    </Text>
+  );
+}
+
+function Field({ label, value }: { label: string; value?: string }) {
+  const display = !value || value.trim() === "" ? "—" : value;
+  return (
+    <Box>
+      <Text variant="caption" tone="muted" sx={{ display: "block" }}>
+        {label}
+      </Text>
+      <Text variant="description">{display}</Text>
+    </Box>
+  );
+}
+
+function DrawerHeader({
+  roster,
+  vendor,
+  technician,
+  onClose,
+}: {
+  roster?: VendorCompanyRoster;
+  vendor: VendorListItem | null;
+  technician?: VendorRosterTechnician;
+  onClose: () => void;
+}) {
+  const title = technician?.contactName || vendor?.contactName || roster?.name || "Vendor company";
+  const company = roster?.name || vendor?.companyName || "Vendor details";
+  // The company is a subtitle under the technician's name. When there is no
+  // technician the title already falls back to the company, and repeating it
+  // would render the same line twice.
+  const subtitle = company === title ? null : company;
+
+  return (
+    <Stack
+      direction="row"
+      sx={{
+        alignItems: "center",
+        justifyContent: "space-between",
+        px: 2.5,
+        py: 2,
+        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+      }}
+    >
+      <Box>
+        <Text id="vendor-detail-drawer-title" variant="title" as="h2" className="font-semibold">
+          {title}
+        </Text>
+        {subtitle !== null && (
+          <Text variant="description" tone="muted">
+            {subtitle}
+          </Text>
+        )}
+      </Box>
+      <IconButton aria-label="Close drawer" onClick={onClose} size="small">
+        <CloseIcon fontSize="small" />
+      </IconButton>
+    </Stack>
+  );
+}
+
+function CompanySection({ roster }: { roster: VendorCompanyRoster }) {
+  // SH-271 replaced the separate "Open in Google Maps" row: the Street Address
+  // itself is the link now, and the location is derived from the structured
+  // parts rather than a stored URL.
+  const address = { street: roster.address, city: roster.city, state: roster.state };
+  const mapsUrl = mapsSearchUrl(address);
+
+  return (
+    <Stack spacing={1.5}>
+      <Field label="Company" value={roster.name} />
+      <Field label="Company Phone" value={roster.companyPhone} />
+      <Field label="Company Email" value={roster.email} />
+      <Box>
+        <Text variant="caption" tone="muted" sx={{ display: "block" }}>
+          Street Address
+        </Text>
+        {roster.address && mapsUrl ? (
+          <Link
+            href={mapsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            sx={{ "&:hover": { textDecoration: "underline" } }}
+          >
+            {roster.address}
+          </Link>
+        ) : (
+          <Text variant="description">{roster.address || "—"}</Text>
+        )}
+      </Box>
+      <Stack direction="row" spacing={2}>
+        <Box sx={{ flex: 1 }}>
+          <Field label="City" value={roster.city} />
+        </Box>
+        <Box sx={{ flex: 1 }}>
+          <Field label="State" value={roster.state} />
+        </Box>
+      </Stack>
+      <Field label="Service Area" value={roster.areaName || "Unassigned"} />
+      <AddressMapPreview address={address} />
+    </Stack>
+  );
+}
+
+function TechnicianSection({ technician }: { technician: VendorRosterTechnician }) {
+  const trades = splitTrades(technician.tradeSpecialties);
+
+  return (
+    <Box>
+      <Stack spacing={1.5}>
+        <Field label="Phone" value={technician.phone} />
+        <Box>
+          <Text variant="caption" tone="muted" sx={{ display: "block", mb: 0.75 }}>
+            Trade
+          </Text>
+          <Stack direction="row" spacing={0.75} sx={{ flexWrap: "wrap" }}>
+            {trades.length > 0 ? (
+              trades.map((trade, index) => (
+                <Chip key={`${trade}-${index}`} size="small" variant="outlined" label={trade} />
+              ))
+            ) : (
+              <Text variant="description">—</Text>
+            )}
+          </Stack>
+        </Box>
+        <Stack direction="row" sx={{ alignItems: "flex-end", justifyContent: "space-between" }}>
+          <Box>
+            <Text variant="title">{technician.totalJobs ?? 0}</Text>
+            <Text variant="caption" tone="muted" sx={{ display: "block" }}>
+              Total Jobs
+            </Text>
+          </Box>
+          <VendorStatusBadge isActive={technician.isActive} />
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
+
+function DrawerBody({
+  roster,
+  technician,
+}: {
+  roster: VendorCompanyRoster;
+  technician?: VendorRosterTechnician;
+}) {
+  return (
+    <Stack spacing={3} className="flex-1 overflow-y-auto" sx={{ p: 2.5 }}>
+      <Box>
+        <CompanySection roster={roster} />
+      </Box>
+      <Divider />
+      {technician ? (
+        <TechnicianSection technician={technician} />
+      ) : (
+        <Text variant="description" tone="muted">
+          No technicians assigned to this company.
+        </Text>
+      )}
+      {Boolean(roster.notes) && (
+        <>
+          <Divider />
+          <Box>
+            <SectionTitle>Notes</SectionTitle>
+            <Text variant="description" sx={{ overflowWrap: "anywhere", whiteSpace: "pre-wrap" }}>
+              {roster.notes}
+            </Text>
+          </Box>
+        </>
+      )}
+    </Stack>
+  );
+}
+
+function DrawerActions({ onEdit }: { onEdit: () => void }) {
+  return (
+    <Stack
+      direction="row"
+      sx={{
+        px: 2.5,
+        py: 1.5,
+        borderTop: (theme) => `1px solid ${theme.palette.divider}`,
+        alignItems: "center",
+        justifyContent: "flex-end",
+      }}
+    >
+      <Button variant="contained" onClick={onEdit} startIcon={<EditOutlinedIcon />}>
+        Edit
+      </Button>
+    </Stack>
+  );
+}
+
+function TechnicianStatusControl({
+  isActive,
+  persistedIsActive,
+  onRequestDeactivation,
+  onChange,
+}: {
+  isActive: boolean;
+  persistedIsActive: boolean;
+  onRequestDeactivation: () => void;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+      <Text variant="description">{isActive ? "Active" : "Inactive"}</Text>
+      <Switch
+        checked={isActive}
+        slotProps={{ input: { "aria-label": "Active status" } }}
+        onChange={(_event, checked) => {
+          if (persistedIsActive && !checked) onRequestDeactivation();
+          else onChange(checked);
+        }}
+      />
+    </Stack>
+  );
+}
+
+function DrawerEditor({
+  vendor,
+  onClose,
+  onSaved,
+  onRequestDeactivation = () => undefined,
+}: {
+  vendor: VendorListItem;
+  onClose: () => void;
+  onSaved: () => void;
+  onRequestDeactivation: (vendor: VendorListItem) => void;
+}) {
+  const form = useVendorRosterForm({
+    mode: "update",
+    vendorId: vendor.id ?? undefined,
+    companyId: vendor.id == null ? (vendor.companyId ?? undefined) : undefined,
+    onSuccess: onSaved,
+  });
+  const roster = form.roster;
+  const technicians = useWatch({ control: form.control, name: "technicians" }) ?? [];
+  const selectedIndex = technicians.findIndex(
+    (technician) => technician.id != null && String(technician.id) === String(vendor.id),
+  );
+  const persistedTechnician = roster?.technicians.find(
+    (technician) => technician.id != null && String(technician.id) === String(vendor.id),
+  );
+  const selectedTotalJobs = persistedTechnician?.totalJobs ?? vendor.totalJobs;
+  // Deactivation is a property of the saved vendor, not of the toggle: flipping an
+  // inactive vendor on and back off without saving must not ask to deactivate it.
+  const persistedIsActive = persistedTechnician?.isActive ?? vendor.isActive;
+
+  if (form.isLoading) {
+    return <CircularProgress size={28} sx={{ m: "auto" }} />;
+  }
+  if (form.isError || !roster) {
+    return (
+      <Alert severity="error" sx={{ m: 2 }}>
+        Failed to load vendor company. Try again.
+      </Alert>
+    );
+  }
+
+  return (
+    <Box
+      component="form"
+      id="vendor-drawer-edit-form"
+      onSubmit={form.handleSubmit(form.submit)}
+      className="flex min-h-0 flex-1 flex-col"
+    >
+      <Stack spacing={2} className="flex-1 overflow-y-auto" sx={{ p: 2.5 }}>
+        {form.loadErrorMessage !== null && (
+          <VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
+        )}
+        {form.conflict !== null && (
+          <VendorRosterConflictAlert conflict={form.conflict} onReload={form.reload} />
+        )}
+        <VendorRosterFormFields
+          control={form.control}
+          errors={form.errors}
+          tradeOptions={form.trades}
+          tradeOptionsLoading={form.tradesLoading}
+          showTechnicianStatus={false}
+          {...form.areaField}
+        />
+        {selectedIndex >= 0 && (
+          <>
+            <Divider />
+            <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
+              <Box>
+                <Text variant="title">{selectedTotalJobs}</Text>
+                <Text variant="caption" tone="muted">
+                  Total Jobs
+                </Text>
+              </Box>
+              <TechnicianStatusControl
+                isActive={Boolean(technicians[selectedIndex]?.isActive)}
+                persistedIsActive={persistedIsActive}
+                onRequestDeactivation={() => onRequestDeactivation(vendor)}
+                onChange={(checked) => form.setTechnicianActive(selectedIndex, checked)}
+              />
+            </Stack>
+          </>
+        )}
+      </Stack>
+      <Stack
+        direction="row"
+        spacing={1.5}
+        sx={{ p: 2, borderTop: 1, borderColor: "divider", justifyContent: "flex-end" }}
+      >
+        <Button onClick={onClose} disabled={form.isSaving}>
+          Cancel
+        </Button>
+        <Button type="submit" variant="contained" disabled={form.isSaving}>
+          {form.isSaving ? "Saving..." : "Save changes"}
+        </Button>
+      </Stack>
+    </Box>
+  );
+}
+
+function resolveTechnician(
+  roster: VendorCompanyRoster | undefined,
+  vendor: VendorListItem | null,
+): VendorRosterTechnician | undefined {
+  if (!roster || !vendor) return undefined;
+
+  const match = roster.technicians.find(
+    (technician) =>
+      vendor.id != null && technician.id != null && String(technician.id) === String(vendor.id),
+  );
+  if (match) return match;
+  if (!vendor.contactName) return undefined;
+
+  return {
+    id: vendor.id ?? undefined,
+    contactName: vendor.contactName,
+    phone: vendor.phone,
+    email: vendor.email,
+    tradeSpecialties: vendor.tradeSpecialties,
+    isActive: vendor.isActive,
+    totalJobs: vendor.totalJobs,
+  };
+}
+
+export function VendorDetailDrawer({
+  open,
+  vendor,
+  startInEdit = false,
+  onRequestDeactivation = () => undefined,
+  onClose,
+}: VendorDetailDrawerProps) {
+  const [isEditing, setIsEditing] = useState(startInEdit);
+  const vendorId = vendor?.id;
+  const companyId = vendor?.companyId;
+  const hasVendorId = vendorId != null;
+  const {
+    data: roster,
+    isLoading,
+    error,
+  } = useVendorCompanyRoster(
+    hasVendorId ? vendorId : undefined,
+    !hasVendorId ? (companyId ?? undefined) : undefined,
+  );
+
+  const selectedTechnician = resolveTechnician(roster, vendor);
+
+  useEffect(() => {
+    if (open) setIsEditing(startInEdit);
+  }, [open, startInEdit, vendor]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && !isEditing) onClose();
+    };
+
+    window.addEventListener("keydown", closeOnEscape);
+    return () => window.removeEventListener("keydown", closeOnEscape);
+  }, [isEditing, onClose, open]);
+
+  return (
+    <Drawer
+      open={open}
+      onClose={(_event, reason) => {
+        if (reason === "escapeKeyDown" && isEditing) return;
+        onClose();
+      }}
+      anchor="right"
+      aria-labelledby="vendor-detail-drawer-title"
+      ModalProps={{ keepMounted: false }}
+      sx={{
+        "& .MuiDrawer-paper": {
+          width: { xs: "100%", sm: DRAWER_WIDTH },
+          maxWidth: "100%",
+        },
+      }}
+    >
+      <Stack className="flex h-full flex-col">
+        <DrawerHeader
+          roster={roster}
+          vendor={vendor}
+          technician={selectedTechnician}
+          onClose={onClose}
+        />
+
+        {isEditing && vendor ? (
+          <DrawerEditor
+            vendor={vendor}
+            onClose={onClose}
+            onSaved={() => setIsEditing(false)}
+            onRequestDeactivation={onRequestDeactivation}
+          />
+        ) : isLoading ? (
+          <Box className="flex flex-1 items-center justify-center">
+            <CircularProgress size={28} />
+          </Box>
+        ) : error ? (
+          <Alert severity="error" sx={{ m: 2 }}>
+            Failed to load vendor company. Try again.
+          </Alert>
+        ) : roster ? (
+          <>
+            <DrawerBody roster={roster} technician={selectedTechnician} />
+            <DrawerActions onEdit={() => setIsEditing(true)} />
+          </>
+        ) : (
+          <Box className="flex flex-1 items-center justify-center">
+            <Text variant="description" tone="muted">
+              No vendor selected.
+            </Text>
+          </Box>
+        )}
+      </Stack>
+    </Drawer>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-filter-options.tsx b/src/app/(protected)/vendors/_components/vendor-filter-options.tsx
new file mode 100644
index 00000000..aac0b212
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-filter-options.tsx
@@ -0,0 +1,286 @@
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
+import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
+import MapOutlinedIcon from "@mui/icons-material/MapOutlined";
+import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Autocomplete,
+  Box,
+  Button,
+  Checkbox,
+  Chip,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import {
+  type VendorFacetArea,
+  type VendorFacets,
+  type VendorFacetCompany,
+  type VendorFacetJobBucket,
+  type VendorFacetLocation,
+} from "@/domain/vendors/types/vendor";
+import { serviceAreaFilterOptions, type VendorFilters } from "./vendor-filters";
+
+type DraftSetter = Dispatch<SetStateAction<VendorFilters>>;
+
+function FilterSection({
+  title,
+  icon,
+  children,
+}: {
+  title: string;
+  icon: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Accordion disableGutters elevation={0} square sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${title}-filters-content`}>
+        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
+          <Box sx={{ color: "primary.main", display: "flex" }}>{icon}</Box>
+          <Typography variant="subtitle1" className="font-semibold">
+            {title}
+          </Typography>
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails id={`${title}-filters-content`} sx={{ pt: 0, pb: 2.5 }}>
+        {children}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+function CompanyFilter({
+  options,
+  draft,
+  setDraft,
+}: {
+  options: VendorFacetCompany[];
+  draft: VendorFilters;
+  setDraft: DraftSetter;
+}) {
+  const allSelected = draft.companies.length === options.length && options.length > 0;
+  return (
+    <FilterSection title="Company" icon={<BusinessOutlinedIcon />}>
+      <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
+        <Typography variant="caption" sx={{ color: "text.secondary" }}>
+          Select vendor companies
+        </Typography>
+        <Button
+          size="small"
+          onClick={() =>
+            setDraft((current) => ({
+              ...current,
+              companies: allSelected ? [] : options.map((company) => company.name),
+            }))
+          }
+        >
+          {allSelected ? "Clear all" : "Select all"}
+        </Button>
+      </Stack>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        getOptionLabel={(option) => (typeof option === "string" ? option : option.name)}
+        isOptionEqualToValue={(option, value) =>
+          typeof option === "string" || typeof value === "string"
+            ? option === value
+            : option.name === value.name
+        }
+        value={options.filter((option) => draft.companies.includes(option.name))}
+        onChange={(_event, value) => {
+          const next = (value as (string | VendorFacetCompany)[]).map((entry) =>
+            typeof entry === "string" ? entry : entry.name,
+          );
+          setDraft((current) => ({ ...current, companies: next }));
+        }}
+        renderOption={(props, option, { selected }) => {
+          const { key, ...optionProps } = props;
+          return (
+            <li key={key} {...optionProps}>
+              <Checkbox checked={selected} size="small" sx={{ mr: 1 }} />
+              {option.name}
+            </li>
+          );
+        }}
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const label = typeof option === "string" ? option : option.name;
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={label} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            placeholder={draft.companies.length === 0 ? "All companies" : ""}
+          />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+function TradeFilter({ options, draft, setDraft }: FilterProps<string>) {
+  return (
+    <FilterSection title="Trade" icon={<BuildOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        value={draft.trades}
+        onChange={(_event, value) =>
+          setDraft((current) => ({ ...current, trades: value as string[] }))
+        }
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={option} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField {...params} placeholder={draft.trades.length === 0 ? "All trades" : ""} />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+interface FilterProps<T> {
+  options: T[];
+  draft: VendorFilters;
+  setDraft: DraftSetter;
+}
+
+function ServiceAreaFilter({ options, draft, setDraft }: FilterProps<VendorFacetArea>) {
+  return (
+    <FilterSection title="Service Area" icon={<MapOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        getOptionLabel={(option) => option.name}
+        isOptionEqualToValue={(option, value) => option.id === value.id}
+        value={options.filter((option) => draft.areas.includes(option.id))}
+        onChange={(_event, value) =>
+          setDraft((current) => ({ ...current, areas: value.map((entry) => entry.id) }))
+        }
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={option.name} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField {...params} placeholder={draft.areas.length === 0 ? "All areas" : ""} />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+function LocationFilter({ options, draft, setDraft }: FilterProps<VendorFacetLocation>) {
+  return (
+    <FilterSection title="Location" icon={<LocationOnOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
+        isOptionEqualToValue={(option, value) =>
+          typeof option === "string" || typeof value === "string"
+            ? option === value
+            : option.label === value.label
+        }
+        value={options.filter((option) => draft.locations.includes(option.label))}
+        onChange={(_event, value) => {
+          const next = (value as (string | VendorFacetLocation)[]).map((entry) =>
+            typeof entry === "string" ? entry : entry.label,
+          );
+          setDraft((current) => ({ ...current, locations: next }));
+        }}
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const label = typeof option === "string" ? option : option.label;
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={label} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            placeholder={draft.locations.length === 0 ? "All locations" : ""}
+          />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+function JobCountFilter({ options, draft, setDraft }: FilterProps<VendorFacetJobBucket>) {
+  return (
+    <FilterSection title="Total Jobs" icon={<TagOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={options}
+        getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
+        isOptionEqualToValue={(option, value) =>
+          typeof option === "string" || typeof value === "string"
+            ? option === value
+            : option.id === value.id
+        }
+        value={options.filter((option) => draft.jobBuckets.includes(option.id))}
+        onChange={(_event, value) => {
+          const next = (value as (string | VendorFacetJobBucket)[]).map((entry) =>
+            typeof entry === "string" ? entry : entry.id,
+          );
+          setDraft((current) => ({ ...current, jobBuckets: next }));
+        }}
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const label = typeof option === "string" ? option : option.label;
+            const { key, ...chipProps } = getItemProps({ index });
+            return <Chip key={key} size="small" label={label} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            placeholder={draft.jobBuckets.length === 0 ? "All job counts" : ""}
+          />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+export function VendorFilterOptions({
+  facets,
+  draft,
+  setDraft,
+}: {
+  facets: VendorFacets | undefined;
+  draft: VendorFilters;
+  setDraft: DraftSetter;
+}) {
+  return (
+    <>
+      <CompanyFilter options={facets?.companies ?? []} draft={draft} setDraft={setDraft} />
+      <TradeFilter options={facets?.trades ?? []} draft={draft} setDraft={setDraft} />
+      <ServiceAreaFilter
+        options={serviceAreaFilterOptions(facets?.areas ?? [])}
+        draft={draft}
+        setDraft={setDraft}
+      />
+      <LocationFilter options={facets?.locations ?? []} draft={draft} setDraft={setDraft} />
+      <JobCountFilter options={facets?.jobBuckets ?? []} draft={draft} setDraft={setDraft} />
+    </>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-filters-drawer-fields.tsx b/src/app/(protected)/vendors/_components/vendor-filters-drawer-fields.tsx
new file mode 100644
index 00000000..eadbf15d
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-filters-drawer-fields.tsx
@@ -0,0 +1,248 @@
+import type { Dispatch, SetStateAction } from "react";
+import BusinessOutlinedIcon from "@mui/icons-material/BusinessOutlined";
+import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
+import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
+import TagOutlinedIcon from "@mui/icons-material/TagOutlined";
+import { Autocomplete, Button, Checkbox, Chip, Stack, TextField, Typography } from "@mui/material";
+import type {
+  VendorFacetCompany,
+  VendorFacetJobBucket,
+  VendorFacetLocation,
+} from "@/domain/vendors/types/vendor";
+import type { VendorFilters } from "./vendor-filters";
+import { FilterSection } from "./vendor-filters-drawer-section";
+
+interface VendorFiltersDrawerFieldsProps {
+  draft: VendorFilters;
+  setDraft: Dispatch<SetStateAction<VendorFilters>>;
+  options: {
+    companies: VendorFacetCompany[];
+    trades: string[];
+    locations: VendorFacetLocation[];
+    jobBuckets: VendorFacetJobBucket[];
+  };
+}
+
+function CompanyFilterFields({
+  draft,
+  setDraft,
+  companyOptions,
+}: {
+  draft: VendorFilters;
+  setDraft: Dispatch<SetStateAction<VendorFilters>>;
+  companyOptions: VendorFacetCompany[];
+}) {
+  return (
+    <FilterSection title="Company" icon={<BusinessOutlinedIcon />}>
+      <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
+        <Typography variant="caption" sx={{ color: "text.secondary" }}>
+          Select vendor companies
+        </Typography>
+        <Button
+          size="small"
+          onClick={() =>
+            setDraft((current) => ({
+              ...current,
+              companies:
+                current.companies.length === companyOptions.length
+                  ? []
+                  : companyOptions.map((company) => company.name),
+            }))
+          }
+        >
+          {draft.companies.length === companyOptions.length && companyOptions.length > 0
+            ? "Clear all"
+            : "Select all"}
+        </Button>
+      </Stack>
+      <Autocomplete
+        multiple
+        size="small"
+        options={companyOptions}
+        getOptionLabel={(option) => (typeof option === "string" ? option : option.name)}
+        isOptionEqualToValue={(option, value) =>
+          typeof option === "string" || typeof value === "string"
+            ? option === value
+            : option.name === value.name
+        }
+        value={companyOptions.filter((option) => draft.companies.includes(option.name))}
+        onChange={(_event, value) => {
+          const next = (value as (string | VendorFacetCompany)[]).map((entry) =>
+            typeof entry === "string" ? entry : entry.name,
+          );
+          setDraft((current) => ({ ...current, companies: next }));
+        }}
+        renderOption={(props, option, { selected }) => {
+          const { key, ...optionProps } = props;
+          return (
+            <li key={key} {...optionProps}>
+              <Checkbox checked={selected} size="small" sx={{ mr: 1 }} />
+              {option.name}
+            </li>
+          );
+        }}
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const label = typeof option === "string" ? option : option.name;
+            const tagProps = getItemProps({ index });
+            const { key, ...chipProps } = tagProps;
+            return <Chip key={key} size="small" label={label} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            placeholder={draft.companies.length === 0 ? "All companies" : ""}
+          />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+function TradeFilterFields({
+  draft,
+  setDraft,
+  tradeOptions,
+}: {
+  draft: VendorFilters;
+  setDraft: Dispatch<SetStateAction<VendorFilters>>;
+  tradeOptions: string[];
+}) {
+  return (
+    <FilterSection title="Trade" icon={<BuildOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={tradeOptions}
+        value={draft.trades}
+        onChange={(_event, value) =>
+          setDraft((current) => ({ ...current, trades: value as string[] }))
+        }
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const tagProps = getItemProps({ index });
+            const { key, ...chipProps } = tagProps;
+            return <Chip key={key} size="small" label={option} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField {...params} placeholder={draft.trades.length === 0 ? "All trades" : ""} />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+function LocationFilterFields({
+  draft,
+  setDraft,
+  locationOptions,
+}: {
+  draft: VendorFilters;
+  setDraft: Dispatch<SetStateAction<VendorFilters>>;
+  locationOptions: VendorFacetLocation[];
+}) {
+  return (
+    <FilterSection title="Location" icon={<LocationOnOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={locationOptions}
+        getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
+        isOptionEqualToValue={(option, value) =>
+          typeof option === "string" || typeof value === "string"
+            ? option === value
+            : option.label === value.label
+        }
+        value={locationOptions.filter((option) => draft.locations.includes(option.label))}
+        onChange={(_event, value) => {
+          const next = (value as (string | VendorFacetLocation)[]).map((entry) =>
+            typeof entry === "string" ? entry : entry.label,
+          );
+          setDraft((current) => ({ ...current, locations: next }));
+        }}
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const label = typeof option === "string" ? option : option.label;
+            const tagProps = getItemProps({ index });
+            const { key, ...chipProps } = tagProps;
+            return <Chip key={key} size="small" label={label} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            placeholder={draft.locations.length === 0 ? "All locations" : ""}
+          />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+function JobBucketFilterFields({
+  draft,
+  setDraft,
+  jobBucketOptions,
+}: {
+  draft: VendorFilters;
+  setDraft: Dispatch<SetStateAction<VendorFilters>>;
+  jobBucketOptions: VendorFacetJobBucket[];
+}) {
+  return (
+    <FilterSection title="Total Jobs" icon={<TagOutlinedIcon />}>
+      <Autocomplete
+        multiple
+        size="small"
+        options={jobBucketOptions}
+        getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
+        isOptionEqualToValue={(option, value) =>
+          typeof option === "string" || typeof value === "string"
+            ? option === value
+            : option.id === value.id
+        }
+        value={jobBucketOptions.filter((option) => draft.jobBuckets.includes(option.id))}
+        onChange={(_event, value) => {
+          const next = (value as (string | VendorFacetJobBucket)[]).map((entry) =>
+            typeof entry === "string" ? entry : entry.id,
+          );
+          setDraft((current) => ({ ...current, jobBuckets: next }));
+        }}
+        renderValue={(value, getItemProps) =>
+          value.map((option, index) => {
+            const label = typeof option === "string" ? option : option.label;
+            const tagProps = getItemProps({ index });
+            const { key, ...chipProps } = tagProps;
+            return <Chip key={key} size="small" label={label} {...chipProps} />;
+          })
+        }
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            placeholder={draft.jobBuckets.length === 0 ? "All job counts" : ""}
+          />
+        )}
+      />
+    </FilterSection>
+  );
+}
+
+export function VendorFiltersDrawerFields({
+  draft,
+  setDraft,
+  options,
+}: VendorFiltersDrawerFieldsProps) {
+  return (
+    <>
+      <CompanyFilterFields draft={draft} setDraft={setDraft} companyOptions={options.companies} />
+      <TradeFilterFields draft={draft} setDraft={setDraft} tradeOptions={options.trades} />
+      <LocationFilterFields draft={draft} setDraft={setDraft} locationOptions={options.locations} />
+      <JobBucketFilterFields
+        draft={draft}
+        setDraft={setDraft}
+        jobBucketOptions={options.jobBuckets}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-filters-drawer-section.tsx b/src/app/(protected)/vendors/_components/vendor-filters-drawer-section.tsx
new file mode 100644
index 00000000..9d7c2997
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-filters-drawer-section.tsx
@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Stack,
+  Typography,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+export function FilterSection({
+  title,
+  icon,
+  children,
+}: {
+  title: string;
+  icon: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Accordion disableGutters elevation={0} square sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`${title}-filters-content`}>
+        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
+          <Box sx={{ color: "primary.main", display: "flex" }}>{icon}</Box>
+          <Typography variant="subtitle1" className="font-semibold">
+            {title}
+          </Typography>
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails id={`${title}-filters-content`} sx={{ pt: 0, pb: 2.5 }}>
+        {children}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx b/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
new file mode 100644
index 00000000..1aae6720
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-filters-drawer.tsx
@@ -0,0 +1,108 @@
+import { useEffect, useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, Button, Chip, Drawer, IconButton, Stack, Typography } from "@mui/material";
+import type { VendorFacets } from "@/domain/vendors/types/vendor";
+import { VendorFilterOptions } from "./vendor-filter-options";
+import { emptyVendorFilters, type VendorFilters } from "./vendor-filters";
+
+interface VendorFiltersDrawerProps {
+  open: boolean;
+  onClose: () => void;
+  facets: VendorFacets | undefined;
+  appliedFilters: VendorFilters;
+  onApply: (filters: VendorFilters) => void;
+}
+
+const DRAWER_WIDTH = 360;
+
+export function VendorFiltersDrawer({
+  open,
+  onClose,
+  facets,
+  appliedFilters,
+  onApply,
+}: VendorFiltersDrawerProps) {
+  const [draft, setDraft] = useState<VendorFilters>(appliedFilters);
+
+  useEffect(() => {
+    if (open) {
+      setDraft(appliedFilters);
+    }
+  }, [open, appliedFilters]);
+
+  const activeCount =
+    draft.companies.length +
+    draft.trades.length +
+    draft.areas.length +
+    draft.locations.length +
+    draft.jobBuckets.length;
+
+  const handleClear = () => {
+    setDraft(emptyVendorFilters);
+  };
+
+  const handleApply = () => {
+    onApply(draft);
+    onClose();
+  };
+
+  return (
+    <Drawer
+      open={open}
+      onClose={onClose}
+      anchor="right"
+      aria-labelledby="vendor-filters-drawer-title"
+      ModalProps={{ keepMounted: false }}
+      sx={{
+        "& .MuiDrawer-paper": {
+          width: { xs: "100%", sm: DRAWER_WIDTH },
+          maxWidth: "100%",
+        },
+      }}
+    >
+      <Stack className="flex h-full flex-col">
+        <Stack
+          direction="row"
+          sx={{
+            alignItems: "center",
+            justifyContent: "space-between",
+            px: 3,
+            py: 2,
+            borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+          }}
+        >
+          <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+            <Typography id="vendor-filters-drawer-title" variant="h6" component="h2">
+              Filters
+            </Typography>
+            {Boolean(activeCount > 0) && <Chip size="small" color="primary" label={activeCount} />}
+          </Stack>
+          <IconButton aria-label="Close filters" onClick={onClose} size="small">
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </Stack>
+
+        <Box className="flex-1 overflow-y-auto" sx={{ px: 2.5 }}>
+          <VendorFilterOptions facets={facets} draft={draft} setDraft={setDraft} />
+        </Box>
+
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            px: 3,
+            py: 2,
+            borderTop: (theme) => `1px solid ${theme.palette.divider}`,
+          }}
+        >
+          <Button variant="outlined" onClick={handleClear} disabled={activeCount === 0} fullWidth>
+            Clear all
+          </Button>
+          <Button variant="contained" onClick={handleApply} fullWidth>
+            Apply filters
+          </Button>
+        </Stack>
+      </Stack>
+    </Drawer>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-filters.ts b/src/app/(protected)/vendors/_components/vendor-filters.ts
new file mode 100644
index 00000000..2bd23452
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-filters.ts
@@ -0,0 +1,28 @@
+import { VENDOR_AREA_UNASSIGNED, type VendorFacetArea } from "@/domain/vendors/types/vendor";
+
+export interface VendorFilters {
+  companies: string[];
+  trades: string[];
+  /** Stable Area ids or VENDOR_AREA_UNASSIGNED; OR within the facet. */
+  areas: string[];
+  locations: string[];
+  jobBuckets: string[];
+}
+
+export const emptyVendorFilters: VendorFilters = {
+  companies: [],
+  trades: [],
+  areas: [],
+  locations: [],
+  jobBuckets: [],
+};
+
+const UNASSIGNED_AREA_OPTION: VendorFacetArea = { id: VENDOR_AREA_UNASSIGNED, name: "Unassigned" };
+
+/** Unassigned first, then the active Area catalogue A–Z (case-insensitive). */
+export function serviceAreaFilterOptions(areas: VendorFacetArea[]): VendorFacetArea[] {
+  const sorted = [...areas].sort((a, b) =>
+    a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
+  );
+  return [UNASSIGNED_AREA_OPTION, ...sorted];
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-portal-token-panel.tsx b/src/app/(protected)/vendors/_components/vendor-portal-token-panel.tsx
new file mode 100644
index 00000000..b50ec833
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-portal-token-panel.tsx
@@ -0,0 +1,183 @@
+import { useState } from "react";
+import {
+  Alert,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Paper,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import {
+  useGenerateVendorPortalToken,
+  useRevokeVendorPortalToken,
+  useRotateVendorPortalToken,
+  useVendorPortalToken,
+} from "@/domain/vendors/use-cases/use-vendor-portal-token";
+
+interface VendorPortalTokenPanelProps {
+  vendorId: string | number;
+}
+
+export function VendorPortalTokenPanel({ vendorId }: VendorPortalTokenPanelProps) {
+  const { data: tokenInfo, isLoading, isError } = useVendorPortalToken(vendorId);
+  const rotate = useRotateVendorPortalToken(vendorId);
+  const revoke = useRevokeVendorPortalToken(vendorId);
+  const generate = useGenerateVendorPortalToken(vendorId);
+
+  const [confirmAction, setConfirmAction] = useState<"rotate" | "revoke" | null>(null);
+
+  const busy = rotate.isPending || revoke.isPending || generate.isPending;
+
+  const copyUrl = async () => {
+    if (!tokenInfo?.portalUrl) return;
+    try {
+      await navigator.clipboard.writeText(tokenInfo.portalUrl);
+    } catch {
+      // clipboard may be unavailable
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Paper variant="outlined" className="p-4">
+        <CircularProgress size={20} />
+        <Typography
+          variant="body2"
+          className="mt-2"
+          sx={{
+            color: "text.secondary",
+          }}
+        >
+          Loading portal link…
+        </Typography>
+      </Paper>
+    );
+  }
+
+  if (isError) {
+    return <Alert severity="error">Failed to load portal token</Alert>;
+  }
+
+  if (!tokenInfo) {
+    return (
+      <Paper variant="outlined" className="p-4">
+        <Typography variant="subtitle1" className="font-semibold">
+          Vendor Portal
+        </Typography>
+        <Typography
+          variant="body2"
+          className="mt-1 mb-3"
+          sx={{
+            color: "text.secondary",
+          }}
+        >
+          No active portal link. Generate one so this vendor can access the portal.
+        </Typography>
+        <Button variant="contained" onClick={() => generate.mutate()} disabled={busy}>
+          Generate Link
+        </Button>
+      </Paper>
+    );
+  }
+
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        Vendor Portal
+      </Typography>
+      <Stack direction={{ xs: "column", sm: "row" }} spacing={1} className="mb-2">
+        <TextField
+          fullWidth
+          size="small"
+          value={tokenInfo.portalUrl}
+          slotProps={{ input: { readOnly: true } }}
+          onFocus={(e) => e.target.select()}
+        />
+        <Button variant="outlined" onClick={() => void copyUrl()}>
+          Copy
+        </Button>
+      </Stack>
+      <Typography
+        variant="caption"
+        className="mb-3"
+        sx={{
+          color: "text.secondary",
+          display: "block",
+        }}
+      >
+        Issued {new Date(tokenInfo.issuedAt).toLocaleDateString()}
+        {" · "}Expires {new Date(tokenInfo.expiresAt).toLocaleDateString()}
+        {tokenInfo.lastUsedAt
+          ? ` · Last used ${new Date(tokenInfo.lastUsedAt).toLocaleString()}`
+          : " · Never used"}
+      </Typography>
+      <Stack direction="row" spacing={1}>
+        <Button
+          variant="outlined"
+          color="warning"
+          onClick={() => setConfirmAction("rotate")}
+          disabled={busy}
+        >
+          Rotate
+        </Button>
+        <Button
+          variant="outlined"
+          color="error"
+          onClick={() => setConfirmAction("revoke")}
+          disabled={busy}
+        >
+          Revoke
+        </Button>
+      </Stack>
+      <Dialog open={confirmAction === "rotate"} onClose={() => setConfirmAction(null)}>
+        <DialogTitle>Rotate Portal Token</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Rotate the portal token? The previous link will stop working immediately.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setConfirmAction(null)}>Cancel</Button>
+          <Button
+            color="warning"
+            variant="contained"
+            onClick={() => {
+              rotate.mutate();
+              setConfirmAction(null);
+            }}
+          >
+            Rotate
+          </Button>
+        </DialogActions>
+      </Dialog>
+      <Dialog open={confirmAction === "revoke"} onClose={() => setConfirmAction(null)}>
+        <DialogTitle>Revoke Portal Tokens</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Revoke all active portal tokens? The vendor will lose access until a new link is
+            generated.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setConfirmAction(null)}>Cancel</Button>
+          <Button
+            color="error"
+            variant="contained"
+            onClick={() => {
+              revoke.mutate();
+              setConfirmAction(null);
+            }}
+          >
+            Revoke
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-conflict-alert.tsx b/src/app/(protected)/vendors/_components/vendor-roster-conflict-alert.tsx
new file mode 100644
index 00000000..30878dc3
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-roster-conflict-alert.tsx
@@ -0,0 +1,67 @@
+import { Alert, AlertTitle, Box, Button, List, ListItem, Stack, Typography } from "@mui/material";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import type { VendorRosterConflict } from "@/domain/vendors/types/vendor";
+
+interface VendorRosterConflictAlertProps {
+  conflict: VendorRosterConflict;
+  onReload: () => void;
+}
+
+export function VendorRosterConflictAlert({ conflict, onReload }: VendorRosterConflictAlertProps) {
+  if (conflict.kind === "duplicate") {
+    return (
+      <Alert severity="warning">
+        <AlertTitle>Company name already exists</AlertTitle>
+        {conflict.message}
+      </Alert>
+    );
+  }
+
+  if (conflict.kind === "stale") {
+    return (
+      <Alert
+        severity="warning"
+        icon={<RefreshIcon fontSize="small" />}
+        action={
+          <Button color="inherit" size="small" onClick={onReload}>
+            Reload
+          </Button>
+        }
+      >
+        <AlertTitle>Someone else updated this company</AlertTitle>
+        {conflict.message}
+      </Alert>
+    );
+  }
+
+  return (
+    <Alert severity="error">
+      <AlertTitle>Open work orders block this save</AlertTitle>
+      {conflict.message}
+      {conflict.blockedWorkOrders.length > 0 && (
+        <Box className="mt-1">
+          <List dense disablePadding>
+            {conflict.blockedWorkOrders.map((workOrder) => (
+              <ListItem key={String(workOrder.workOrderId)} disableGutters>
+                <Stack>
+                  <Typography variant="body2">
+                    {workOrder.workOrderNumber
+                      ? `${workOrder.workOrderNumber} — ${workOrder.workOrderTitle || "Untitled"}`
+                      : workOrder.workOrderTitle || `Work order ${workOrder.workOrderId}`}
+                  </Typography>
+                  {Boolean(workOrder.status) && (
+                    <Typography variant="caption" sx={{ color: "text.secondary" }}>
+                      {workOrder.status}
+                      {workOrder.scheduledDate ? ` · ${workOrder.scheduledDate}` : ""}
+                    </Typography>
+                  )}
+                </Stack>
+              </ListItem>
+            ))}
+          </List>
+          <Typography variant="caption">Resolve these work orders, then save again.</Typography>
+        </Box>
+      )}
+    </Alert>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
new file mode 100644
index 00000000..d5094cf0
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-roster-form-fields.tsx
@@ -0,0 +1,454 @@
+import {
+  Controller,
+  useController,
+  useFieldArray,
+  useWatch,
+  type Control,
+  type FieldErrors,
+} from "react-hook-form";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined";
+import {
+  Autocomplete,
+  Box,
+  Button,
+  Divider,
+  FormControlLabel,
+  IconButton,
+  Stack,
+  Switch,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import { VendorTradeSpecialtiesField } from "./vendor-trade-specialties-field";
+import { AddressAutocompleteField } from "@/components/common/address-autocomplete-field";
+import { AddressMapPreview } from "@/components/common/address-map-preview";
+import { formatNorthAmericanPhone } from "@/lib/format/na-phone";
+import {
+  VENDOR_NOTES_MAX_LENGTH,
+  type RosterTechnicianValues,
+  type VendorCompanyRosterFormValues,
+} from "@/domain/vendors/schemas/vendor-roster-schema";
+import type { VendorFacetArea, VendorFacetCompany } from "@/domain/vendors/types/vendor";
+import { normalizeStateCode } from "@/data/areas";
+import { VendorCompanyContactFields } from "./vendor-company-contact-fields";
+import { VendorServiceAreaField } from "./vendor-service-area-field";
+import { VendorStateSelectField } from "./vendor-state-select-field";
+
+interface VendorRosterFormFieldsProps {
+  control: Control<VendorCompanyRosterFormValues>;
+  errors: FieldErrors<VendorCompanyRosterFormValues>;
+  companies?: VendorFacetCompany[];
+  tradeOptions?: string[];
+  tradeOptionsLoading?: boolean;
+  selectedCompanyId?: string | number | null;
+  onSelectCompany?: (company: VendorFacetCompany | null) => Promise<void>;
+  onClearSelectedCompany?: (nextName?: string) => void;
+  showTechnicianStatus?: boolean;
+  areaOptions?: VendorFacetArea[];
+  currentArea?: VendorFacetArea | null;
+  canAssignArea?: boolean;
+}
+
+function CompanyNameField({
+  control,
+  errors,
+  companies,
+  selectedCompanyId,
+  onSelectCompany,
+  onClearSelectedCompany,
+}: VendorRosterFormFieldsProps) {
+  const useAutocomplete = companies !== undefined && onSelectCompany !== undefined;
+  const selectedCompany =
+    companies?.find(
+      (company) =>
+        company.companyId != null && String(company.companyId) === String(selectedCompanyId),
+    ) ?? null;
+
+  if (!useAutocomplete) {
+    return (
+      <Controller
+        control={control}
+        name="name"
+        render={({ field }) => (
+          <TextField
+            {...field}
+            label="Company (required)"
+            placeholder="Start typing a company…"
+            slotProps={{ htmlInput: { required: true } }}
+            error={Boolean(errors.name)}
+            helperText={errors.name?.message}
+            fullWidth
+          />
+        )}
+      />
+    );
+  }
+
+  return (
+    <Controller
+      control={control}
+      name="name"
+      render={({ field }) => (
+        <Autocomplete<VendorFacetCompany, false, false, true>
+          freeSolo
+          options={companies ?? []}
+          value={selectedCompany ?? field.value}
+          inputValue={field.value}
+          getOptionLabel={(option) => (typeof option === "string" ? option : option.name)}
+          isOptionEqualToValue={(option, value) =>
+            typeof value !== "string" &&
+            option.companyId != null &&
+            String(option.companyId) === String(value.companyId)
+          }
+          onChange={(_event, value) => {
+            if (typeof value === "object" && value !== null) {
+              void onSelectCompany?.(value);
+              return;
+            }
+            onClearSelectedCompany?.(typeof value === "string" ? value : "");
+            field.onChange(typeof value === "string" ? value : "");
+          }}
+          onInputChange={(_event, value, reason) => {
+            if (reason !== "input") return;
+            if (selectedCompanyId != null) onClearSelectedCompany?.(value);
+            field.onChange(value);
+          }}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label="Company (required)"
+              placeholder="Start typing a company…"
+              error={Boolean(errors.name)}
+              helperText={errors.name?.message}
+              inputRef={field.ref}
+              slotProps={{
+                ...params.slotProps,
+                htmlInput: { ...params.slotProps?.htmlInput, required: true },
+              }}
+            />
+          )}
+        />
+      )}
+    />
+  );
+}
+
+function CompanyFields({
+  control,
+  errors,
+  companies,
+  selectedCompanyId,
+  onSelectCompany,
+  onClearSelectedCompany,
+  areaOptions = [],
+  currentArea = null,
+  canAssignArea = false,
+}: VendorRosterFormFieldsProps) {
+  const notes = useWatch({ control, name: "notes" }) ?? "";
+  const { field: streetField } = useController({ control, name: "address" });
+  const { field: cityField } = useController({ control, name: "city" });
+  const { field: stateField } = useController({ control, name: "state" });
+
+  return (
+    <Box>
+      <Stack spacing={2}>
+        <CompanyNameField
+          control={control}
+          errors={errors}
+          companies={companies}
+          selectedCompanyId={selectedCompanyId}
+          onSelectCompany={onSelectCompany}
+          onClearSelectedCompany={onClearSelectedCompany}
+        />
+        <VendorCompanyContactFields control={control} errors={errors} />
+        <AddressAutocompleteField
+          value={streetField.value ?? ""}
+          onInputChange={streetField.onChange}
+          onSelect={(parts) => {
+            // One pick fills all three. City and State are written through
+            // their own controllers so react-hook-form marks them dirty and
+            // revalidates — a plain assignment would be discarded on save.
+            streetField.onChange(parts.street);
+            cityField.onChange(parts.city);
+            stateField.onChange(normalizeStateCode(parts.state) ?? parts.state);
+          }}
+          label="Street Address (required)"
+          required
+          error={Boolean(errors.address)}
+          helperText={
+            errors.address?.message ??
+            "Pick a suggestion to auto-fill City/State, or type your own."
+          }
+        />
+        <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+          <TextField
+            {...cityField}
+            value={cityField.value ?? ""}
+            label="City (required)"
+            error={Boolean(errors.city)}
+            helperText={errors.city?.message}
+            fullWidth
+            slotProps={{ htmlInput: { required: true } }}
+          />
+          <VendorStateSelectField
+            value={stateField.value ?? ""}
+            onChange={stateField.onChange}
+            onBlur={stateField.onBlur}
+            inputRef={stateField.ref}
+            error={Boolean(errors.state)}
+            helperText={errors.state?.message}
+          />
+        </Stack>
+        <Controller
+          control={control}
+          name="zip"
+          render={({ field }) => <TextField {...field} label="Zip" sx={{ display: "none" }} />}
+        />
+        <AddressMapPreview
+          address={{
+            street: streetField.value ?? "",
+            city: cityField.value ?? "",
+            state: stateField.value ?? "",
+          }}
+          placeholderWhenIncomplete
+        />
+        <Controller
+          control={control}
+          name="notes"
+          render={({ field }) => (
+            <TextField
+              {...field}
+              label="Notes (optional)"
+              placeholder="Internal notes, scheduling preferences, certifications…"
+              multiline
+              minRows={2}
+              fullWidth
+              error={Boolean(errors.notes)}
+              helperText={`${notes.length}/${VENDOR_NOTES_MAX_LENGTH} characters · ${
+                errors.notes?.message ?? `Maximum ${VENDOR_NOTES_MAX_LENGTH} characters`
+              }`}
+              slotProps={{
+                htmlInput: {
+                  maxLength: VENDOR_NOTES_MAX_LENGTH,
+                  style: {
+                    overflowWrap: "anywhere",
+                    whiteSpace: "pre-wrap",
+                  },
+                },
+              }}
+            />
+          )}
+        />
+        <VendorServiceAreaField
+          control={control}
+          areaOptions={areaOptions}
+          currentArea={currentArea}
+          canAssign={canAssignArea}
+        />
+      </Stack>
+    </Box>
+  );
+}
+
+interface TechnicianRowProps {
+  control: Control<VendorCompanyRosterFormValues>;
+  index: number;
+  error: FieldErrors<RosterTechnicianValues> | undefined;
+  onRemove: () => void;
+  canRemove: boolean;
+  tradeOptions: string[];
+  tradeOptionsLoading?: boolean;
+  showStatus: boolean;
+}
+
+function TechnicianRow({
+  control,
+  index,
+  error,
+  onRemove,
+  canRemove,
+  tradeOptions,
+  tradeOptionsLoading,
+  showStatus,
+}: TechnicianRowProps) {
+  return (
+    <Stack spacing={2} className="rounded-md border border-solid border-gray-200 p-3">
+      <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
+        <Typography variant="subtitle2" className="font-semibold">
+          {index + 1} - TECHNICIAN
+        </Typography>
+        <Tooltip title="Remove technician">
+          <span>
+            <IconButton
+              size="small"
+              aria-label={`Remove technician ${index + 1}`}
+              onClick={onRemove}
+              disabled={!canRemove}
+            >
+              <DeleteOutlineIcon fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </Stack>
+      <Controller
+        control={control}
+        name={`technicians.${index}.contactName`}
+        render={({ field }) => (
+          <TextField
+            {...field}
+            label="Technician name (optional)"
+            placeholder="Technician name"
+            error={Boolean(error?.contactName)}
+            helperText={error?.contactName?.message}
+            fullWidth
+          />
+        )}
+      />
+      <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+        <Controller
+          control={control}
+          name={`technicians.${index}.phone`}
+          render={({ field }) => (
+            <TextField
+              {...field}
+              label="Technician phone (optional)"
+              placeholder="(000) 000-0000"
+              inputMode="tel"
+              value={field.value ?? ""}
+              onChange={(event) => field.onChange(formatNorthAmericanPhone(event.target.value))}
+              error={Boolean(error?.phone)}
+              helperText={error?.phone?.message}
+              fullWidth
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name={`technicians.${index}.email`}
+          render={({ field }) => (
+            <TextField
+              {...field}
+              label="Technician Email"
+              type="email"
+              error={Boolean(error?.email)}
+              helperText={error?.email?.message}
+              fullWidth
+              sx={{ display: "none" }}
+            />
+          )}
+        />
+      </Stack>
+      <VendorTradeSpecialtiesField
+        control={control}
+        index={index}
+        tradeOptions={tradeOptions}
+        tradeOptionsLoading={tradeOptionsLoading}
+      />
+      <Controller
+        control={control}
+        name={`technicians.${index}.isActive`}
+        render={({ field }) => (
+          <FormControlLabel
+            sx={{ display: showStatus ? undefined : "none" }}
+            control={
+              <Switch
+                checked={Boolean(field.value)}
+                onChange={(_event, checked) => field.onChange(checked)}
+              />
+            }
+            label={field.value ? "Active" : "Inactive"}
+          />
+        )}
+      />
+    </Stack>
+  );
+}
+
+function TechniciansFieldArray({
+  control,
+  errors,
+  tradeOptions,
+  tradeOptionsLoading,
+  showStatus,
+}: {
+  control: Control<VendorCompanyRosterFormValues>;
+  errors: FieldErrors<VendorCompanyRosterFormValues>;
+  tradeOptions: string[];
+  tradeOptionsLoading?: boolean;
+  showStatus: boolean;
+}) {
+  const { fields, append, remove } = useFieldArray({ control, name: "technicians" });
+
+  return (
+    <Box>
+      <Stack direction="row" sx={{ alignItems: "center", justifyContent: "space-between" }}>
+        <Typography variant="subtitle2" className="font-semibold uppercase">
+          Technician details (optional)
+        </Typography>
+        <Button
+          size="small"
+          color="primary"
+          variant="text"
+          startIcon={<AddIcon fontSize="small" />}
+          onClick={() =>
+            append({
+              contactName: "",
+              phone: "",
+              email: "",
+              tradeSpecialties: "",
+              isActive: true,
+            })
+          }
+        >
+          Add technician
+        </Button>
+      </Stack>
+      <Stack spacing={2} className="mt-2">
+        {fields.length === 0 ? (
+          <Typography variant="body2" sx={{ color: "text.secondary" }}>
+            No technicians yet. A company can be saved with zero technicians.
+          </Typography>
+        ) : (
+          fields.map((field, index) => (
+            <TechnicianRow
+              key={field.id}
+              control={control}
+              index={index}
+              error={errors.technicians?.[index]}
+              onRemove={() => remove(index)}
+              canRemove
+              tradeOptions={tradeOptions}
+              tradeOptionsLoading={tradeOptionsLoading}
+              showStatus={showStatus}
+            />
+          ))
+        )}
+      </Stack>
+    </Box>
+  );
+}
+
+export function VendorRosterFormFields(props: VendorRosterFormFieldsProps) {
+  const {
+    control,
+    errors,
+    tradeOptions = [],
+    tradeOptionsLoading = false,
+    showTechnicianStatus = true,
+  } = props;
+  return (
+    <Stack spacing={3}>
+      <CompanyFields {...props} />
+      <Divider />
+      <TechniciansFieldArray
+        control={control}
+        errors={errors}
+        tradeOptions={tradeOptions}
+        tradeOptionsLoading={tradeOptionsLoading}
+        showStatus={showTechnicianStatus}
+      />
+    </Stack>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-load-error.tsx b/src/app/(protected)/vendors/_components/vendor-roster-load-error.tsx
new file mode 100644
index 00000000..0f9fb3d4
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-roster-load-error.tsx
@@ -0,0 +1,21 @@
+import { Alert, Button } from "@mui/material";
+
+interface VendorRosterLoadErrorAlertProps {
+  message: string;
+  onRetry: () => void;
+}
+
+export function VendorRosterLoadErrorAlert({ message, onRetry }: VendorRosterLoadErrorAlertProps) {
+  return (
+    <Alert
+      severity="error"
+      action={
+        <Button color="inherit" size="small" onClick={onRetry}>
+          Try again
+        </Button>
+      }
+    >
+      {message}
+    </Alert>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-roster-page.tsx b/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
new file mode 100644
index 00000000..45a1c823
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-roster-page.tsx
@@ -0,0 +1,151 @@
+import type { ReactNode } from "react";
+import { useNavigate } from "react-router";
+import { Alert, Box, Button, CircularProgress, Paper, Stack, Typography } from "@mui/material";
+import { VendorPortalTokenPanel } from "./vendor-portal-token-panel";
+import { VendorRosterConflictAlert } from "./vendor-roster-conflict-alert";
+import { VendorRosterFormFields } from "./vendor-roster-form-fields";
+import { VendorRosterLoadErrorAlert } from "./vendor-roster-load-error";
+import { useVendorRosterForm } from "./use-vendor-roster-form";
+
+interface VendorRosterPageProps {
+  vendorId?: string;
+  companyId?: string;
+}
+
+function PageShell({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle: string;
+  children: ReactNode;
+}) {
+  return (
+    <Box className="mx-auto max-w-4xl p-4">
+      <Paper variant="outlined" className="p-6">
+        <Stack spacing={4}>
+          <Box>
+            <Typography variant="h5" component="h1">
+              {title}
+            </Typography>
+            <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.5 }}>
+              {subtitle}
+            </Typography>
+          </Box>
+          {children}
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+function RosterLoadErrorState({ onBack }: { onBack: () => void }) {
+  return (
+    <PageShell title="Vendor company" subtitle="Edit the company and its technicians.">
+      <Alert severity="error">Failed to load vendor company. Try again.</Alert>
+      <Stack direction="row" sx={{ justifyContent: "flex-end" }}>
+        <Button variant="outlined" onClick={onBack}>
+          Back to vendors
+        </Button>
+      </Stack>
+    </PageShell>
+  );
+}
+
+function rosterPageCopy(isEdit: boolean): { title: string; subtitle: string } {
+  if (isEdit) {
+    return {
+      title: "Edit Vendor Company",
+      subtitle: "Update company details and technicians in one save.",
+    };
+  }
+  return {
+    title: "Add Vendor Company",
+    subtitle: "Register a company and add zero, one, or multiple technicians.",
+  };
+}
+
+function submitLabel(isSaving: boolean, isEdit: boolean): string {
+  if (isSaving) return "Saving...";
+  return isEdit ? "Save" : "Create";
+}
+
+export default function VendorRosterPage({ vendorId, companyId }: VendorRosterPageProps) {
+  const navigate = useNavigate();
+  const isEdit = vendorId !== undefined || companyId !== undefined;
+  const form = useVendorRosterForm({
+    mode: isEdit ? "update" : "create",
+    vendorId,
+    companyId,
+    onSuccess: () => navigate("/vendors"),
+  });
+
+  if (isEdit && form.isLoading) {
+    return (
+      <Box className="flex justify-center p-10">
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (isEdit && form.isError) {
+    return <RosterLoadErrorState onBack={() => navigate("/vendors")} />;
+  }
+
+  if (isEdit && !form.roster) {
+    return null;
+  }
+
+  const { title, subtitle } = rosterPageCopy(isEdit);
+  const companySelectionProps = isEdit
+    ? {}
+    : {
+        companies: form.companies,
+        selectedCompanyId: form.selectedCompanyId,
+        onSelectCompany: form.selectCompany,
+        onClearSelectedCompany: form.clearSelectedCompany,
+      };
+  const showPortalToken = Boolean(isEdit && vendorId);
+
+  return (
+    <PageShell title={title} subtitle={subtitle}>
+      <Box component="form" onSubmit={form.handleSubmit(form.submit)}>
+        <Stack spacing={3}>
+          {form.loadErrorMessage !== null && (
+            <VendorRosterLoadErrorAlert message={form.loadErrorMessage} onRetry={form.retryLoad} />
+          )}
+
+          {form.conflict !== null && (
+            <VendorRosterConflictAlert conflict={form.conflict} onReload={form.reload} />
+          )}
+
+          <VendorRosterFormFields
+            control={form.control}
+            errors={form.errors}
+            tradeOptions={form.trades}
+            tradeOptionsLoading={form.tradesLoading}
+            {...companySelectionProps}
+          />
+
+          {showPortalToken && vendorId !== undefined && (
+            <VendorPortalTokenPanel vendorId={vendorId} />
+          )}
+
+          <Stack direction="row" spacing={2} sx={{ justifyContent: "flex-end" }}>
+            <Button
+              variant="outlined"
+              onClick={() => navigate("/vendors")}
+              disabled={form.isSaving}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" variant="contained" disabled={form.isSaving}>
+              {submitLabel(form.isSaving, isEdit)}
+            </Button>
+          </Stack>
+        </Stack>
+      </Box>
+    </PageShell>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-service-area-field.tsx b/src/app/(protected)/vendors/_components/vendor-service-area-field.tsx
new file mode 100644
index 00000000..d8171aa0
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-service-area-field.tsx
@@ -0,0 +1,58 @@
+import { Controller, type Control } from "react-hook-form";
+import { Autocomplete, TextField } from "@mui/material";
+import type { VendorCompanyRosterFormValues } from "@/domain/vendors/schemas/vendor-roster-schema";
+import type { VendorFacetArea } from "@/domain/vendors/types/vendor";
+
+interface VendorServiceAreaFieldProps {
+  control: Control<VendorCompanyRosterFormValues>;
+  areaOptions: VendorFacetArea[];
+  currentArea?: VendorFacetArea | null;
+  canAssign: boolean;
+}
+
+export const SERVICE_AREA_ADMIN_ONLY_MESSAGE = "Only administrators can assign a Service Area.";
+
+/**
+ * Zero or one Service Area per vendor company, chosen from the Area
+ * catalogue by stable id. Clearing the selection leaves the company Unassigned.
+ * The saved Area stays visible when it is no longer in the active catalogue.
+ */
+export function VendorServiceAreaField({
+  control,
+  areaOptions,
+  currentArea,
+  canAssign,
+}: VendorServiceAreaFieldProps) {
+  const options =
+    currentArea && !areaOptions.some((area) => area.id === currentArea.id)
+      ? [...areaOptions, currentArea]
+      : areaOptions;
+
+  return (
+    <Controller
+      control={control}
+      name="areaId"
+      render={({ field }) => (
+        <Autocomplete<VendorFacetArea>
+          options={options}
+          value={options.find((area) => area.id === field.value) ?? null}
+          onChange={(_event, option) => field.onChange(option?.id ?? "")}
+          onBlur={field.onBlur}
+          getOptionLabel={(option) => option.name}
+          isOptionEqualToValue={(option, value) => option.id === value.id}
+          disabled={!canAssign}
+          fullWidth
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label="Service Area (optional)"
+              placeholder="Unassigned"
+              inputRef={field.ref}
+              helperText={canAssign ? undefined : SERVICE_AREA_ADMIN_ONLY_MESSAGE}
+            />
+          )}
+        />
+      )}
+    />
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-state-select-field.tsx b/src/app/(protected)/vendors/_components/vendor-state-select-field.tsx
new file mode 100644
index 00000000..db9e0329
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-state-select-field.tsx
@@ -0,0 +1,57 @@
+import type { Ref } from "react";
+import { Autocomplete, TextField } from "@mui/material";
+import {
+  US_STATE_CODES,
+  formatStateOptionLabel,
+  normalizeStateCode,
+  type StateCode,
+} from "@/data/areas";
+
+interface VendorStateSelectFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  inputRef?: Ref<HTMLInputElement>;
+  error?: boolean;
+  helperText?: string;
+}
+
+/**
+ * Closed, searchable list of the 50 US states for the vendor company.
+ * Legacy full names are shown as their canonical code. Service Area is chosen
+ * independently, so no Area is derived from the selected State here.
+ */
+export function VendorStateSelectField({
+  value,
+  onChange,
+  onBlur,
+  inputRef,
+  error,
+  helperText,
+}: VendorStateSelectFieldProps) {
+  const selected: StateCode | null = normalizeStateCode(value);
+  return (
+    <Autocomplete<StateCode>
+      options={US_STATE_CODES}
+      value={selected}
+      onChange={(_event, option) => onChange(option ?? "")}
+      onBlur={onBlur}
+      getOptionLabel={formatStateOptionLabel}
+      fullWidth
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="State (required)"
+          placeholder="Select a state"
+          inputRef={inputRef}
+          error={error}
+          helperText={helperText}
+          slotProps={{
+            ...params.slotProps,
+            htmlInput: { ...params.slotProps?.htmlInput, required: true },
+          }}
+        />
+      )}
+    />
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-status-badge.tsx b/src/app/(protected)/vendors/_components/vendor-status-badge.tsx
new file mode 100644
index 00000000..7fee8970
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-status-badge.tsx
@@ -0,0 +1,20 @@
+import { Box, Stack } from "@mui/material";
+import { Text } from "@/components/ui/text";
+
+/** Dot plus text, so the status never reads by colour alone. */
+export function VendorStatusBadge({ isActive }: { isActive: boolean }) {
+  return (
+    <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+      <Box
+        component="span"
+        sx={{
+          width: 6,
+          height: 6,
+          borderRadius: "9999px",
+          backgroundColor: isActive ? "success.main" : "text.secondary",
+        }}
+      />
+      <Text variant="description">{isActive ? "Active" : "Inactive"}</Text>
+    </Stack>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-table-row.tsx b/src/app/(protected)/vendors/_components/vendor-table-row.tsx
new file mode 100644
index 00000000..41e2b740
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-table-row.tsx
@@ -0,0 +1,340 @@
+import { type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
+import { Avatar, Box, IconButton, Link, Stack, TableCell, TableRow, Tooltip } from "@mui/material";
+import { VendorStatusBadge } from "./vendor-status-badge";
+import { Text } from "@/components/ui/text";
+import type { VendorDirectoryTechnician, VendorListItem } from "@/domain/vendors/types/vendor";
+
+function stopPropagation(event: MouseEvent): void {
+  event.stopPropagation();
+}
+function stopBadgeKeyDown(event: KeyboardEvent): void {
+  if (event.key !== "Enter" && event.key !== " ") return;
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+const truncatedTextSx = {
+  display: "block",
+  minWidth: 0,
+  maxWidth: "100%",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+};
+
+function TruncatedText({
+  value,
+  testId,
+  focusable = false,
+  href,
+  variant,
+}: {
+  value: string;
+  testId: string;
+  focusable?: boolean;
+  href?: string;
+  variant?: "description";
+}) {
+  const hasValue = value !== "—";
+  const content = href ? (
+    <Link
+      href={href}
+      underline="hover"
+      color="inherit"
+      data-testid={testId}
+      sx={truncatedTextSx}
+      onClick={stopPropagation}
+    >
+      {value}
+    </Link>
+  ) : variant ? (
+    <Text variant={variant} data-testid={testId} sx={{ ...truncatedTextSx, flex: "1 1 auto" }}>
+      {value}
+    </Text>
+  ) : (
+    <Box
+      component="span"
+      data-testid={testId}
+      tabIndex={focusable && hasValue ? 0 : undefined}
+      sx={truncatedTextSx}
+    >
+      {value}
+    </Box>
+  );
+  return (
+    <Tooltip title={hasValue ? value : ""} placement="top" arrow describeChild>
+      {content}
+    </Tooltip>
+  );
+}
+
+function OverflowBadge({
+  count,
+  label,
+  kind,
+}: {
+  count: number;
+  label: string;
+  kind: "trade" | "technician";
+}) {
+  const noun = count === 1 ? kind : `${kind}s`;
+  const ariaLabel = `+${count} more ${noun}${kind === "trade" ? `: ${label}` : ""}`;
+  return (
+    <Tooltip title={label} placement="top" arrow>
+      <Box
+        component="span"
+        tabIndex={0}
+        aria-label={ariaLabel}
+        data-testid={`vendor-${kind}-badge`}
+        className="focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--color-primary)]"
+        onClick={stopPropagation}
+        onKeyDown={stopBadgeKeyDown}
+        sx={{
+          flexShrink: 0,
+          borderRadius: "9999px",
+          backgroundColor: "var(--color-bg-muted)",
+          px: 0.75,
+          py: 0.25,
+          fontSize: 10.5,
+          lineHeight: 1.2,
+        }}
+      >
+        +{count}
+      </Box>
+    </Tooltip>
+  );
+}
+
+function CellText({
+  value,
+  testId,
+  href,
+  focusable,
+}: {
+  value: string;
+  testId: string;
+  href?: string;
+  focusable?: boolean;
+}) {
+  return (
+    <TableCell sx={{ color: "var(--color-muted-foreground)", overflow: "hidden" }}>
+      <TruncatedText
+        value={value.trim() || "—"}
+        testId={testId}
+        href={href}
+        focusable={focusable}
+      />
+    </TableCell>
+  );
+}
+
+function CompanyCells({ row }: { row: VendorListItem }) {
+  const phone = row.companyPhone.trim();
+  const email = row.email.trim();
+  return (
+    <>
+      <TableCell sx={{ overflow: "hidden" }}>
+        <TruncatedText
+          value={row.companyName || "—"}
+          testId="vendor-text-company"
+          variant="description"
+        />
+      </TableCell>
+      <CellText
+        value={phone}
+        testId="vendor-text-company-phone"
+        href={phone ? `tel:${phone}` : undefined}
+      />
+      <CellText
+        value={email}
+        testId="vendor-text-company-email"
+        href={email ? `mailto:${email}` : undefined}
+      />
+      <CellText value={row.address} testId="vendor-text-street-address" focusable />
+      <CellText value={row.city} testId="vendor-text-city" focusable />
+      <CellText value={row.state} testId="vendor-text-state" focusable />
+      <CellText value={row.areaName || "Unassigned"} testId="vendor-text-service-area" focusable />
+    </>
+  );
+}
+
+function orderedTechnicians(row: VendorListItem): VendorDirectoryTechnician[] {
+  const technicians = row.technicians ?? [];
+  const primaryIndex =
+    row.id == null ? -1 : technicians.findIndex((item) => String(item.id) === String(row.id));
+  if (primaryIndex <= 0) return technicians;
+  return [technicians[primaryIndex]!, ...technicians.filter((_, index) => index !== primaryIndex)];
+}
+
+function primaryTechnician(row: VendorListItem, technicians: VendorDirectoryTechnician[]) {
+  return (
+    technicians[0] ?? {
+      id: row.id ?? "",
+      contactName: row.contactName,
+      email: "",
+      phone: row.phone,
+      preferredContact: row.preferredContact,
+      tradeSpecialties: row.tradeSpecialties,
+      isActive: row.isActive,
+      totalJobs: row.totalJobs,
+    }
+  );
+}
+
+function TradeCell({ value }: { value: string }) {
+  const trades = value
+    .split(",")
+    .map((trade) => trade.trim())
+    .filter(Boolean);
+  const omitted = trades.slice(1);
+  return (
+    <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
+      {trades.length === 0 ? (
+        "—"
+      ) : (
+        <Stack direction="row" spacing={0.5} sx={{ alignItems: "center" }}>
+          <span>{trades[0]}</span>
+          {omitted.length > 0 && (
+            <OverflowBadge count={omitted.length} label={omitted.join(", ")} kind="trade" />
+          )}
+        </Stack>
+      )}
+    </TableCell>
+  );
+}
+
+function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  return `${parts[0]?.[0] ?? ""}${parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? "") : ""}`.toUpperCase();
+}
+
+function TechnicianCells({ row }: { row: VendorListItem }) {
+  const technicians = orderedTechnicians(row);
+  const primary = primaryTechnician(row, technicians);
+  const omitted = technicians.slice(1);
+  const phone = primary.phone.trim();
+  return (
+    <>
+      <TableCell sx={{ overflow: "hidden" }}>
+        <Stack
+          direction="row"
+          spacing={1.25}
+          sx={{ alignItems: "center", minWidth: 0, overflow: "hidden" }}
+        >
+          <Avatar
+            sx={{
+              width: 28,
+              height: 28,
+              flexShrink: 0,
+              backgroundColor: "var(--color-bg-muted)",
+              color: "var(--color-primary)",
+              fontSize: 10.5,
+              fontWeight: 600,
+            }}
+          >
+            {getInitials(primary.contactName)}
+          </Avatar>
+          <TruncatedText
+            value={primary.contactName || "—"}
+            testId="vendor-text-technician"
+            variant="description"
+          />
+          {omitted.length > 0 && (
+            <OverflowBadge
+              count={omitted.length}
+              label={omitted.map((item) => item.contactName || "Unnamed technician").join(", ")}
+              kind="technician"
+            />
+          )}
+        </Stack>
+      </TableCell>
+      <CellText
+        value={phone}
+        testId="vendor-text-technician-phone"
+        href={phone ? `tel:${phone}` : undefined}
+      />
+    </>
+  );
+}
+
+function RowActions({
+  row,
+  onOpenDetail,
+  onOpenEdit,
+}: {
+  row: VendorListItem;
+  onOpenDetail: () => void;
+  onOpenEdit: () => void;
+}) {
+  const action = (label: string, icon: ReactNode, handler: () => void) => (
+    <Tooltip title={label}>
+      <IconButton
+        size="small"
+        aria-label={`${label} vendor ${row.companyName}`}
+        onClick={(event) => {
+          event.stopPropagation();
+          handler();
+        }}
+      >
+        {icon}
+      </IconButton>
+    </Tooltip>
+  );
+  return (
+    <TableCell align="right">
+      <Stack
+        direction="row"
+        spacing={0.5}
+        className="vendor-row-actions"
+        sx={{ alignItems: "center", justifyContent: "flex-end" }}
+      >
+        {action("View", <VisibilityOutlinedIcon fontSize="small" />, onOpenDetail)}
+        {action("Edit", <EditOutlinedIcon fontSize="small" />, onOpenEdit)}
+      </Stack>
+    </TableCell>
+  );
+}
+
+export function VendorTableRow({
+  row,
+  onOpenDetail,
+  onOpenEdit,
+}: {
+  row: VendorListItem;
+  onOpenDetail: (row: VendorListItem) => void;
+  onOpenEdit: (row: VendorListItem) => void;
+}) {
+  const openDetail = () => onOpenDetail(row);
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.target instanceof Element && event.target.closest("a, button")) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    event.stopPropagation();
+    openDetail();
+  };
+  return (
+    <TableRow
+      hover
+      tabIndex={0}
+      role="button"
+      aria-label={`Open vendor details for ${row.companyName}`}
+      sx={{ cursor: "pointer" }}
+      onClick={openDetail}
+      onKeyDown={handleKeyDown}
+    >
+      <CompanyCells row={row} />
+      <TradeCell value={row.tradeSpecialties} />
+      <TechnicianCells row={row} />
+      <TableCell align="center">{row.totalJobs ?? 0}</TableCell>
+      <TableCell>
+        <Box sx={{ pl: 1 }}>
+          <VendorStatusBadge isActive={row.isActive} />
+        </Box>
+      </TableCell>
+      <RowActions row={row} onOpenDetail={openDetail} onOpenEdit={() => onOpenEdit(row)} />
+    </TableRow>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendor-trade-specialties-field.tsx b/src/app/(protected)/vendors/_components/vendor-trade-specialties-field.tsx
new file mode 100644
index 00000000..88f258dd
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendor-trade-specialties-field.tsx
@@ -0,0 +1,213 @@
+import { useRef, useState } from "react";
+import { Controller, type Control } from "react-hook-form";
+import AddIcon from "@mui/icons-material/Add";
+import CloseIcon from "@mui/icons-material/Close";
+import {
+  Autocomplete,
+  Box,
+  Button,
+  Chip,
+  FormLabel,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { Text } from "@/components/ui/text";
+import type { VendorCompanyRosterFormValues } from "@/domain/vendors/schemas/vendor-roster-schema";
+
+/**
+ * `Text variant="feedback"` stays mounted when silent so the aria-live region can announce later.
+ * An empty paragraph still claims a line box, which would add a permanent gap under the trades
+ * input and shift the approved drawer layout. Collapse the box while keeping the node in the DOM
+ * (never `display: none`, which would stop announcements).
+ */
+function collapsedWhenSilent(visible: boolean) {
+  return visible ? undefined : { height: 0, margin: 0, overflow: "hidden" as const };
+}
+
+function TradeFeedbackRegions({
+  listUnavailable,
+  message,
+}: {
+  listUnavailable: boolean;
+  message: string | null;
+}) {
+  return (
+    <>
+      <Text
+        variant="feedback"
+        tone="warning"
+        when={listUnavailable}
+        sx={collapsedWhenSilent(listUnavailable)}
+      >
+        Trade list is unavailable right now — you can still type a trade manually.
+      </Text>
+      <Text variant="feedback" when={Boolean(message)} sx={collapsedWhenSilent(Boolean(message))}>
+        {message}
+      </Text>
+    </>
+  );
+}
+
+function splitTrades(value: string | undefined): string[] {
+  return (value ?? "")
+    .split(",")
+    .map((trade) => trade.trim())
+    .filter(Boolean);
+}
+
+function dedupeTrades(options: string[], current: string[]): string[] {
+  const seen = new Set<string>();
+  const merged: string[] = [];
+  for (const trade of [...options, ...current]) {
+    const key = trade.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    merged.push(trade);
+  }
+  return merged;
+}
+
+function matchTradeOption(input: string, options: string[]): string | null {
+  const exact = options.find((option) => option === input);
+  if (exact) return exact;
+  const normalized = input.toLowerCase();
+  return options.find((option) => option.toLowerCase() === normalized) ?? null;
+}
+
+interface VendorTradeSpecialtiesFieldProps {
+  control: Control<VendorCompanyRosterFormValues>;
+  index: number;
+  tradeOptions: string[];
+  tradeOptionsLoading?: boolean;
+}
+
+/**
+ * SH-249: an empty tradeOptions array means two different things. While the facets
+ * query is in flight it means "not loaded yet"; only once it settles does it mean
+ * "vocabulary genuinely unavailable". Failing open during the cold-fetch window let
+ * free text through the canonical gate permanently, because anything committed there
+ * is added to knownTradesRef and stays selectable after the real list arrives.
+ *
+ * SH-249: why a typed trade was refused. Extracted to module scope so the field
+ * component stays inside the maintainability gate's function-length cap.
+ */
+function resolveRejectionMessage(value: string, loading: boolean): string {
+  return loading
+    ? "Trades are still loading. Wait for the list, then pick a trade."
+    : `"${value}" is not in the trades list. Pick a trade from the list.`;
+}
+
+export function VendorTradeSpecialtiesField({
+  control,
+  index,
+  tradeOptions,
+  tradeOptionsLoading = false,
+}: VendorTradeSpecialtiesFieldProps) {
+  const [tradeInput, setTradeInput] = useState("");
+  const [feedbackMessage, setFeedbackMessage] = useState<string | null>(null);
+  const knownTradesRef = useRef<Set<string>>(new Set());
+  const tradeListUnavailable = !tradeOptionsLoading && tradeOptions.length === 0;
+  const gateActive = tradeOptions.length > 0 || tradeOptionsLoading;
+
+  return (
+    <Box>
+      <FormLabel component="legend">Trade Specialties</FormLabel>
+      <Typography variant="caption" sx={{ color: "text.secondary" }}>
+        First trade is primary.
+      </Typography>
+      <Controller
+        control={control}
+        name={`technicians.${index}.tradeSpecialties`}
+        render={({ field }) => {
+          const trades = splitTrades(field.value);
+          for (const trade of trades) knownTradesRef.current.add(trade);
+          const selectableTrades = dedupeTrades(tradeOptions, [...knownTradesRef.current]);
+          const commit = (next: string[]) => field.onChange(next.join(", "));
+          const add = (value: string) => {
+            const normalized = value.trim();
+            setFeedbackMessage(null);
+            if (!normalized) {
+              setTradeInput("");
+              return;
+            }
+            const canonical = matchTradeOption(normalized, selectableTrades);
+            if (gateActive && !canonical) {
+              setFeedbackMessage(resolveRejectionMessage(normalized, tradeOptionsLoading));
+              return;
+            }
+            const trade = canonical ?? normalized;
+            if (trades.some((existing) => existing.toLowerCase() === trade.toLowerCase())) {
+              setFeedbackMessage(`${trade} is already on this technician.`);
+              setTradeInput("");
+              return;
+            }
+            commit([...trades, trade]);
+            setTradeInput("");
+          };
+          return (
+            <Stack spacing={1} className="mt-2">
+              <Box className="flex flex-wrap gap-1.5">
+                <Text variant="description" tone="muted" when={trades.length === 0}>
+                  No trades selected.
+                </Text>
+                {trades.map((trade, tradeIndex) => (
+                  <Chip
+                    key={`${trade}-${tradeIndex}`}
+                    label={tradeIndex === 0 ? `${trade} (primary)` : trade}
+                    onDelete={() =>
+                      commit(trades.filter((_, itemIndex) => itemIndex !== tradeIndex))
+                    }
+                    deleteIcon={<CloseIcon data-testid={`remove-trade-${trade}`} />}
+                  />
+                ))}
+              </Box>
+              <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+                <Autocomplete
+                  freeSolo
+                  options={selectableTrades}
+                  value={null}
+                  inputValue={tradeInput}
+                  onInputChange={(_event, value, reason) => {
+                    if (reason === "input") {
+                      setTradeInput(value);
+                      setFeedbackMessage(null);
+                    }
+                  }}
+                  onChange={(_event, value) => {
+                    if (typeof value === "string") add(value);
+                  }}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      label="Add Trade"
+                      placeholder="Type or select a trade"
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter") {
+                          event.preventDefault();
+                          add(tradeInput);
+                        }
+                      }}
+                    />
+                  )}
+                  className="flex-1"
+                />
+                <Button
+                  color="primary"
+                  onClick={() => add(tradeInput)}
+                  aria-label="Add trade"
+                  disabled={!tradeInput.trim()}
+                >
+                  <AddIcon />
+                </Button>
+              </Stack>
+            </Stack>
+          );
+        }}
+      />
+      {/* Outside the spaced Stack: an always-mounted live region would otherwise inherit Stack
+          spacing and add a permanent gap under the trades input, shifting the approved layout. */}
+      <TradeFeedbackRegions listUnavailable={tradeListUnavailable} message={feedbackMessage} />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx b/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
new file mode 100644
index 00000000..9e61d66e
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
@@ -0,0 +1,168 @@
+import { Button, Chip, CircularProgress, Stack, TablePagination } from "@mui/material";
+import { Plus, SlidersHorizontal } from "lucide-react";
+import { PageHeader } from "@/components/ui/page-header";
+import { SearchInput } from "@/components/ui/search-input";
+import { Text } from "@/components/ui/text";
+import { ToolbarButton } from "@/components/ui/toolbar-button";
+
+interface VendorsListToolbarProps {
+  activeCount: number;
+  isFetching: boolean;
+  isLoading: boolean;
+  search: string;
+  onSearchChange: (value: string) => void;
+  appliedFilterCount: number;
+  onOpenFilters: () => void;
+  onAddVendor: () => void;
+}
+
+export function VendorsListToolbar({
+  activeCount,
+  isFetching,
+  isLoading,
+  search,
+  onSearchChange,
+  appliedFilterCount,
+  onOpenFilters,
+  onAddVendor,
+}: VendorsListToolbarProps) {
+  return (
+    <PageHeader
+      surface
+      className="-mx-4 -mt-4"
+      title="Vendors / Technicians"
+      subtitle={`${activeCount} active ${activeCount === 1 ? "company" : "companies"}`}
+      actions={
+        <>
+          <SearchInput
+            value={search}
+            onChange={onSearchChange}
+            placeholder="Search name, company, trade…"
+            aria-label="Search vendors"
+            fullWidth
+            className="w-full md:w-56"
+            inputClassName="h-8 py-0 text-[13px]"
+          />
+          <ToolbarButton
+            variant="outline"
+            icon={<SlidersHorizontal size={16} />}
+            onClick={onOpenFilters}
+            aria-label="Open vendor filters"
+            badge={appliedFilterCount}
+            className="min-w-[88.609375px] flex-1 text-[13px] md:w-[88.609375px] md:flex-none"
+          >
+            Filters
+          </ToolbarButton>
+          <ToolbarButton
+            variant="primary"
+            icon={<Plus size={16} />}
+            onClick={onAddVendor}
+            className="min-w-[115.546875px] flex-1 border-0 px-3 text-[13px] md:w-[115.546875px] md:flex-none"
+          >
+            Add Vendor
+          </ToolbarButton>
+          {isFetching && !isLoading && (
+            <CircularProgress size={14} aria-label="Refreshing vendors" role="status" />
+          )}
+        </>
+      }
+    />
+  );
+}
+
+interface AppliedChipEntry {
+  key: string;
+  label: string;
+  onRemove: () => void;
+}
+
+interface VendorAppliedFiltersBarProps {
+  chips: AppliedChipEntry[];
+  resultCount: number;
+  onClearAll: () => void;
+}
+
+export function VendorAppliedFiltersBar({
+  chips,
+  resultCount,
+  onClearAll,
+}: VendorAppliedFiltersBarProps) {
+  if (chips.length === 0) return null;
+  return (
+    <Stack direction="row" spacing={1} className="flex flex-wrap items-center">
+      <Text variant="caption" tone="muted">
+        {resultCount} {resultCount === 1 ? "company" : "companies"} · filtered by
+      </Text>
+      {chips.map((chip) => (
+        <Chip
+          key={chip.key}
+          size="small"
+          label={chip.label}
+          onDelete={chip.onRemove}
+          aria-label={`Remove filter ${chip.label}`}
+        />
+      ))}
+      <Button size="small" onClick={onClearAll}>
+        Clear all
+      </Button>
+    </Stack>
+  );
+}
+
+interface VendorsListFooterProps {
+  totalCount: number;
+  isActive: boolean;
+  activeCount: number;
+  inactiveCount: number;
+  isFiltered: boolean;
+  page: number;
+  pageSize: number;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+}
+
+export function VendorsListFooter({
+  totalCount,
+  isActive,
+  activeCount,
+  inactiveCount,
+  isFiltered,
+  page,
+  pageSize,
+  onPageChange,
+  onPageSizeChange,
+}: VendorsListFooterProps) {
+  return (
+    <Stack
+      direction={{ xs: "column", sm: "row" }}
+      spacing={2}
+      sx={{
+        alignItems: { xs: "stretch", sm: "center" },
+        justifyContent: "space-between",
+        minHeight: 33.5,
+        mx: -2,
+        px: 2,
+        backgroundColor: "var(--color-bg-surface)",
+      }}
+    >
+      <Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
+        {totalCount} {isActive ? "active" : "inactive"} {totalCount === 1 ? "company" : "companies"}
+        {isFiltered && " · filtered"}
+      </Text>
+      <Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
+        {activeCount} active · {inactiveCount} inactive
+      </Text>
+      {totalCount > pageSize && (
+        <TablePagination
+          component="div"
+          count={totalCount}
+          page={page}
+          onPageChange={(_e, nextPage) => onPageChange(nextPage)}
+          rowsPerPage={pageSize}
+          onRowsPerPageChange={(e) => onPageSizeChange(Number(e.target.value))}
+          rowsPerPageOptions={[24, 48, 96]}
+        />
+      )}
+    </Stack>
+  );
+}
diff --git a/src/app/(protected)/vendors/_components/vendors-table.tsx b/src/app/(protected)/vendors/_components/vendors-table.tsx
new file mode 100644
index 00000000..92b13609
--- /dev/null
+++ b/src/app/(protected)/vendors/_components/vendors-table.tsx
@@ -0,0 +1,153 @@
+import SearchOffOutlinedIcon from "@mui/icons-material/SearchOffOutlined";
+import {
+  CircularProgress,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import { VendorTableRow } from "./vendor-table-row";
+import { Text } from "@/components/ui/text";
+import type { VendorListItem } from "@/domain/vendors/types/vendor";
+
+const TABLE_COLUMNS = [
+  "Company",
+  "Company Phone",
+  "Company Email",
+  "Street Address",
+  "City",
+  "State",
+  "Service Area",
+  "Trade",
+  "Technician",
+  "Technician Phone",
+  "Total Jobs",
+] as const;
+
+interface VendorsTableProps {
+  rows: VendorListItem[];
+  isActive: boolean;
+  isFiltered: boolean;
+  isLoading: boolean;
+  showError: boolean;
+  onOpenDetail: (row: VendorListItem) => void;
+  onOpenEdit: (row: VendorListItem) => void;
+}
+
+export function VendorsTable({
+  rows,
+  isActive,
+  isFiltered,
+  isLoading,
+  showError,
+  onOpenDetail,
+  onOpenEdit,
+}: VendorsTableProps) {
+  const showEmptyRow = !isLoading && !showError && rows.length === 0;
+  const columnCount = TABLE_COLUMNS.length + 2;
+  return (
+    <TableContainer
+      component={Paper}
+      variant="outlined"
+      sx={{
+        mt: 2,
+        mb: 2,
+        flex: "1 1 auto",
+        overflow: "auto",
+        borderRadius: 1.5,
+        fontSize: 13,
+        containerType: "inline-size",
+      }}
+    >
+      <Table
+        size="small"
+        stickyHeader
+        sx={{
+          minWidth: 2200,
+          tableLayout: "fixed",
+          "& .MuiTableCell-head": {
+            backgroundColor: "var(--color-bg-muted)",
+            color: "var(--color-foreground)",
+            fontSize: 10.5,
+            fontWeight: 700,
+            letterSpacing: "0.06em",
+            lineHeight: "24px",
+            px: 1.75,
+            py: 1.375,
+            textTransform: "uppercase",
+            whiteSpace: "nowrap",
+          },
+          "& .MuiTableCell-body": {
+            fontSize: 13,
+            px: 1.5,
+            py: 1,
+            height: 52,
+            lineHeight: 1.43,
+            whiteSpace: "nowrap",
+          },
+          "& .vendor-row-actions": { opacity: { xs: 1, md: 0 }, transition: "opacity 120ms ease" },
+          "& .MuiTableRow-root:hover .vendor-row-actions, & .MuiTableRow-root:focus-within .vendor-row-actions":
+            { opacity: 1 },
+        }}
+      >
+        <colgroup>
+          {[190, 160, 220, 220, 140, 100, 150, 190, 220, 170, 110, 120, 130].map((width, index) => (
+            <col key={`${width}-${index}`} style={{ width }} />
+          ))}
+        </colgroup>
+        <TableHead>
+          <TableRow>
+            {TABLE_COLUMNS.map((column) => (
+              <TableCell key={column} align={column === "Total Jobs" ? "center" : "left"}>
+                {column}
+              </TableCell>
+            ))}
+            <TableCell>Status</TableCell>
+            <TableCell align="right" aria-label="Vendor actions" />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {isLoading ? (
+            <TableRow>
+              <TableCell colSpan={columnCount} className="py-10">
+                <Stack sx={{ width: "calc(100cqw - 24px)", alignItems: "center" }}>
+                  <CircularProgress size={28} />
+                </Stack>
+              </TableCell>
+            </TableRow>
+          ) : showEmptyRow ? (
+            <TableRow>
+              <TableCell colSpan={columnCount} className="py-10">
+                <Stack spacing={1} sx={{ width: "calc(100cqw - 24px)", alignItems: "center" }}>
+                  <SearchOffOutlinedIcon sx={{ color: "text.secondary", fontSize: 32 }} />
+                  <Text
+                    variant="description"
+                    className="font-semibold"
+                  >{`No ${isActive ? "active" : "inactive"} companies found`}</Text>
+                  <Text variant="caption" tone="muted">
+                    {isFiltered
+                      ? "Try a different search, or add a new vendor."
+                      : "Add a vendor to get started."}
+                  </Text>
+                </Stack>
+              </TableCell>
+            </TableRow>
+          ) : (
+            rows.map((row) => (
+              <VendorTableRow
+                key={String(row.id ?? `company-${row.companyId ?? ""}`)}
+                row={row}
+                onOpenDetail={onOpenDetail}
+                onOpenEdit={onOpenEdit}
+              />
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/src/app/(protected)/vendors/company/[companyId].tsx b/src/app/(protected)/vendors/company/[companyId].tsx
new file mode 100644
index 00000000..f2f356f6
--- /dev/null
+++ b/src/app/(protected)/vendors/company/[companyId].tsx
@@ -0,0 +1,7 @@
+import { useParams } from "react-router";
+import VendorRosterPage from "../_components/vendor-roster-page";
+
+export default function EditVendorCompanyByCompanyPage() {
+  const { companyId } = useParams();
+  return <VendorRosterPage companyId={companyId} />;
+}
diff --git a/src/app/(protected)/vendors/edit/[id].tsx b/src/app/(protected)/vendors/edit/[id].tsx
new file mode 100644
index 00000000..3fc0f3e7
--- /dev/null
+++ b/src/app/(protected)/vendors/edit/[id].tsx
@@ -0,0 +1,7 @@
+import { useParams } from "react-router";
+import VendorRosterPage from "../_components/vendor-roster-page";
+
+export default function EditVendorCompanyPage() {
+  const { id } = useParams();
+  return <VendorRosterPage vendorId={id} />;
+}
diff --git a/src/app/(protected)/vendors/index.tsx b/src/app/(protected)/vendors/index.tsx
new file mode 100644
index 00000000..9adeb936
--- /dev/null
+++ b/src/app/(protected)/vendors/index.tsx
@@ -0,0 +1,261 @@
+import { useMemo, useState } from "react";
+import { Alert, Box, Tab, Tabs } from "@mui/material";
+import { VendorCreateModal } from "./_components/vendor-create-modal";
+import { VendorDetailDrawer } from "./_components/vendor-detail-drawer";
+import { VendorDeactivationDialog } from "./_components/vendor-deactivation-dialog";
+import { VendorFiltersDrawer } from "./_components/vendor-filters-drawer";
+import {
+  VendorAppliedFiltersBar,
+  VendorsListFooter,
+  VendorsListToolbar,
+} from "./_components/vendors-list-toolbar";
+import { VendorsTable } from "./_components/vendors-table";
+import { useVendorDeactivation } from "./_components/use-vendor-deactivation";
+import { useVendorListState } from "./_components/use-vendor-list-state";
+import type { VendorFilters } from "./_components/vendor-filters";
+import { VENDOR_AREA_UNASSIGNED, type VendorListItem } from "@/domain/vendors/types/vendor";
+import { useVendorFacets } from "@/domain/vendors/use-cases/use-vendor-facets";
+import { useVendorDirectoryList } from "@/domain/vendors/use-cases/use-vendor-directory-list";
+
+interface AppliedChip {
+  category: keyof VendorFilters;
+  value: string;
+  label: string;
+}
+
+function statusTabLabel(label: string, count: number) {
+  return (
+    <Box className="flex items-center gap-2">
+      <Box component="span">{label}</Box>
+      <Box
+        component="span"
+        className="min-w-5 rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none"
+        sx={{ backgroundColor: "action.hover", color: "text.secondary" }}
+      >
+        {count}
+      </Box>
+    </Box>
+  );
+}
+
+function VendorStatusTabs({
+  isActive,
+  activeCount,
+  inactiveCount,
+  onChange,
+}: {
+  isActive: boolean;
+  activeCount: number;
+  inactiveCount: number;
+  onChange: (isActive: boolean) => void;
+}) {
+  return (
+    <Tabs
+      value={isActive ? "active" : "inactive"}
+      onChange={(_event, value: "active" | "inactive") => onChange(value === "active")}
+      aria-label="Vendor status"
+      sx={{
+        minHeight: 36,
+        flexShrink: 0,
+        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+        backgroundColor: "var(--color-bg-surface)",
+        mx: -2,
+        px: 1.5,
+        "& .MuiTab-root": {
+          minHeight: 36,
+          px: 2,
+          py: 0,
+          fontSize: 13,
+          fontWeight: 500,
+          textTransform: "none",
+        },
+        "& .MuiTab-root:first-of-type": { width: 102.84375 },
+        "& .Mui-selected": { fontWeight: 600 },
+        "& .MuiTabs-indicator": { height: 2 },
+      }}
+    >
+      <Tab
+        value="active"
+        label={statusTabLabel("Active", activeCount)}
+        aria-label={`Active (${activeCount})`}
+      />
+      <Tab
+        value="inactive"
+        label={statusTabLabel("Inactive", inactiveCount)}
+        aria-label={`Inactive (${inactiveCount})`}
+      />
+    </Tabs>
+  );
+}
+
+function describeChips(
+  filters: VendorFilters,
+  jobBucketLabels: Map<string, string>,
+  areaLabels: Map<string, string>,
+): AppliedChip[] {
+  const chips: AppliedChip[] = [];
+  filters.companies.forEach((value) =>
+    chips.push({ category: "companies", value, label: `Company: ${value}` }),
+  );
+  filters.trades.forEach((value) =>
+    chips.push({ category: "trades", value, label: `Trade: ${value}` }),
+  );
+  filters.areas.forEach((value) =>
+    chips.push({
+      category: "areas",
+      value,
+      label: `Service Area: ${areaLabels.get(value) ?? value}`,
+    }),
+  );
+  filters.locations.forEach((value) =>
+    chips.push({ category: "locations", value, label: `Location: ${value}` }),
+  );
+  filters.jobBuckets.forEach((value) =>
+    chips.push({
+      category: "jobBuckets",
+      value,
+      label: `Total Jobs: ${jobBucketLabels.get(value) ?? value}`,
+    }),
+  );
+  return chips;
+}
+
+export default function VendorsListPage() {
+  const filters = useVendorListState();
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [detailTarget, setDetailTarget] = useState<VendorListItem | null>(null);
+  const [detailStartsInEdit, setDetailStartsInEdit] = useState(false);
+  const closeDetail = () => {
+    setDetailTarget(null);
+    setDetailStartsInEdit(false);
+  };
+  const deactivation = useVendorDeactivation(closeDetail);
+
+  const { data: facets } = useVendorFacets(filters.isActive);
+  const { data, isLoading, isFetching, error } = useVendorDirectoryList(filters.listParams);
+  const { data: activeCountData } = useVendorDirectoryList({
+    isActive: true,
+    page: 1,
+    pageSize: 1,
+  });
+  const { data: inactiveCountData } = useVendorDirectoryList({
+    isActive: false,
+    page: 1,
+    pageSize: 1,
+  });
+
+  const rows = data?.items ?? [];
+  const totalCount = data?.totalCount ?? 0;
+  const activeCount = activeCountData?.totalCount ?? 0;
+  const inactiveCount = inactiveCountData?.totalCount ?? 0;
+
+  const jobBucketLabels = useMemo(
+    () => new Map((facets?.jobBuckets ?? []).map((bucket) => [bucket.id, bucket.label])),
+    [facets],
+  );
+  const areaLabels = useMemo(
+    () =>
+      new Map([
+        [VENDOR_AREA_UNASSIGNED, "Unassigned"],
+        ...(facets?.areas ?? []).map((area): [string, string] => [area.id, area.name]),
+      ]),
+    [facets],
+  );
+  const appliedChips = describeChips(filters.appliedFilters, jobBucketLabels, areaLabels);
+
+  return (
+    <Box className="flex h-full flex-col overflow-hidden px-4 pt-4 pb-0">
+      <VendorsListToolbar
+        activeCount={activeCount}
+        isFetching={isFetching}
+        isLoading={isLoading}
+        search={filters.search}
+        onSearchChange={filters.setSearchWithReset}
+        appliedFilterCount={appliedChips.length}
+        onOpenFilters={() => setFiltersOpen(true)}
+        onAddVendor={() => setCreateOpen(true)}
+      />
+
+      <VendorStatusTabs
+        isActive={filters.isActive}
+        activeCount={activeCount}
+        inactiveCount={inactiveCount}
+        onChange={filters.setIsActiveWithReset}
+      />
+
+      <VendorAppliedFiltersBar
+        resultCount={totalCount}
+        chips={appliedChips.map((chip) => ({
+          key: `${chip.category}-${chip.value}`,
+          label: chip.label,
+          onRemove: () => filters.removeFilter(chip.category, chip.value),
+        }))}
+        onClearAll={filters.clearFilters}
+      />
+
+      {Boolean(error) && (
+        <Alert severity="error">
+          {error instanceof Error ? error.message : "Failed to load vendors"}
+        </Alert>
+      )}
+
+      <VendorsTable
+        rows={rows}
+        isActive={filters.isActive}
+        isFiltered={appliedChips.length > 0 || Boolean(filters.debouncedSearch)}
+        isLoading={isLoading}
+        showError={Boolean(error)}
+        onOpenDetail={(row) => {
+          setDetailStartsInEdit(false);
+          setDetailTarget(row);
+        }}
+        onOpenEdit={(row) => {
+          setDetailStartsInEdit(true);
+          setDetailTarget(row);
+        }}
+      />
+
+      <VendorsListFooter
+        totalCount={totalCount}
+        isActive={filters.isActive}
+        activeCount={activeCount}
+        inactiveCount={inactiveCount}
+        isFiltered={appliedChips.length > 0 || Boolean(filters.debouncedSearch)}
+        page={filters.page}
+        pageSize={filters.pageSize}
+        onPageChange={filters.setPage}
+        onPageSizeChange={filters.setPageSizeWithReset}
+      />
+
+      <VendorCreateModal open={createOpen} onClose={() => setCreateOpen(false)} />
+
+      <VendorFiltersDrawer
+        open={filtersOpen}
+        onClose={() => setFiltersOpen(false)}
+        facets={facets}
+        appliedFilters={filters.appliedFilters}
+        onApply={filters.setAppliedFiltersWithReset}
+      />
+
+      <VendorDetailDrawer
+        open={Boolean(detailTarget)}
+        vendor={detailTarget}
+        startInEdit={detailStartsInEdit}
+        onRequestDeactivation={deactivation.open}
+        onClose={closeDetail}
+      />
+
+      <VendorDeactivationDialog
+        target={deactivation.target}
+        isLoading={deactivation.isLoading}
+        isSaving={deactivation.isSaving}
+        error={deactivation.error}
+        impact={deactivation.impact}
+        impactError={deactivation.impactError}
+        onClose={deactivation.close}
+        onConfirm={deactivation.confirm}
+      />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/vendors/insights.tsx b/src/app/(protected)/vendors/insights.tsx
new file mode 100644
index 00000000..de5c5f0c
--- /dev/null
+++ b/src/app/(protected)/vendors/insights.tsx
@@ -0,0 +1,123 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { vendorOperationsApi } from "@/domain/vendor-operations/api/vendor-operations-api";
+
+function percent(value: number) {
+  return `${(Number(value || 0) * 100).toFixed(1)}%`;
+}
+
+export default function VendorInsightsPage() {
+  const [from, setFrom] = useState("");
+  const [to, setTo] = useState("");
+  const [trade, setTrade] = useState("");
+  const params = { from: from || undefined, to: to || undefined, trade: trade || undefined };
+  const {
+    data = [],
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["vendor-operations", "insights", params],
+    queryFn: () => vendorOperationsApi.insights(params),
+  });
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <Box>
+        <Typography variant="h5" component="h1">
+          Vendor performance insights
+        </Typography>
+        <Typography color="text.secondary">
+          Metrics include inactive vendors for historical reporting and use the same filtered
+          dispatch population.
+        </Typography>
+      </Box>
+      <Paper variant="outlined" className="p-4">
+        <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+          <TextField
+            label="From"
+            type="date"
+            value={from}
+            onChange={(event) => setFrom(event.target.value)}
+            slotProps={{ inputLabel: { shrink: true } }}
+          />
+          <TextField
+            label="To"
+            type="date"
+            value={to}
+            onChange={(event) => setTo(event.target.value)}
+            slotProps={{ inputLabel: { shrink: true } }}
+          />
+          <TextField
+            label="Trade"
+            value={trade}
+            onChange={(event) => setTrade(event.target.value)}
+          />
+          <Button
+            variant="outlined"
+            onClick={() => void vendorOperationsApi.downloadInsights("csv", params)}
+          >
+            Export CSV
+          </Button>
+          <Button
+            variant="outlined"
+            onClick={() => void vendorOperationsApi.downloadInsights("pdf", params)}
+          >
+            Export PDF
+          </Button>
+        </Stack>
+      </Paper>
+      {isLoading && <CircularProgress aria-label="Loading vendor insights" />}
+      {Boolean(error) && <Alert severity="error">{error?.message}</Alert>}
+      {!isLoading && !error && data.length === 0 && (
+        <Alert severity="info">No data matches the selected filters.</Alert>
+      )}
+      {data.length > 0 && (
+        <Paper variant="outlined" sx={{ overflowX: "auto" }}>
+          <Table aria-label="Vendor performance metrics">
+            <TableHead>
+              <TableRow>
+                <TableCell>Vendor</TableCell>
+                <TableCell align="right">Completed</TableCell>
+                <TableCell align="right">Cancellation / refusal</TableCell>
+                <TableCell align="right">On-time arrival</TableCell>
+                <TableCell align="right">On-time completion</TableCell>
+                <TableCell align="right">Avg. cycle</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.map((row) => (
+                <TableRow key={row.vendorId}>
+                  <TableCell>{row.vendor}</TableCell>
+                  <TableCell align="right">{row.completedJobs}</TableCell>
+                  <TableCell align="right">{percent(row.cancellationRefusalRate)}</TableCell>
+                  <TableCell align="right">{percent(row.onTimeArrivalRate)}</TableCell>
+                  <TableCell align="right">{percent(row.onTimeCompletionRate)}</TableCell>
+                  <TableCell align="right">
+                    {row.averageCycleHours == null
+                      ? "Insufficient data"
+                      : `${Number(row.averageCycleHours).toFixed(1)}h`}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </Paper>
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/vendors/new.tsx b/src/app/(protected)/vendors/new.tsx
new file mode 100644
index 00000000..ea698cb7
--- /dev/null
+++ b/src/app/(protected)/vendors/new.tsx
@@ -0,0 +1,5 @@
+import VendorRosterPage from "./_components/vendor-roster-page";
+
+export default function NewVendorCompanyPage() {
+  return <VendorRosterPage />;
+}
diff --git a/src/app/(protected)/vendors/preferences.tsx b/src/app/(protected)/vendors/preferences.tsx
new file mode 100644
index 00000000..fdb93618
--- /dev/null
+++ b/src/app/(protected)/vendors/preferences.tsx
@@ -0,0 +1,254 @@
+import { useEffect, useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  Alert,
+  Autocomplete,
+  Box,
+  Button,
+  IconButton,
+  Paper,
+  Stack,
+  TextField,
+} from "@mui/material";
+import { ArrowDown, ArrowUp, Trash2 } from "lucide-react";
+import { toast } from "react-toastify";
+import { Text } from "@/components/ui/text";
+import { vendorOperationsApi } from "@/domain/vendor-operations/api/vendor-operations-api";
+import type { SiteVendorPreference } from "@/domain/vendor-operations/types/vendor-operations";
+import {
+  useWorkOrderLocations,
+  useWorkOrderVendors,
+} from "@/domain/work-orders/use-cases/use-work-order-detail";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+
+const EMPTY_PREFERENCES: SiteVendorPreference[] = [];
+
+type AddVendorPreferenceControlsProps = {
+  trade: string;
+  onTradeChange: (value: string) => void;
+  vendorOptions: VendorDropdownItem[];
+  vendors: VendorDropdownItem[];
+  vendorId: number | null;
+  onVendorChange: (vendorId: number | null) => void;
+  onAdd: () => void;
+};
+
+function AddVendorPreferenceControls({
+  trade,
+  onTradeChange,
+  vendorOptions,
+  vendors,
+  vendorId,
+  onVendorChange,
+  onAdd,
+}: AddVendorPreferenceControlsProps) {
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+        <TextField
+          label="Trade scope (optional)"
+          value={trade}
+          onChange={(event) => onTradeChange(event.target.value)}
+        />
+        <Autocomplete
+          options={vendorOptions}
+          getOptionLabel={(option) =>
+            `${option.companyName}${option.tradeSpecialties ? ` · ${option.tradeSpecialties}` : ""}`
+          }
+          value={vendors.find((vendor) => Number(vendor.id) === vendorId) ?? null}
+          onChange={(_event, option) => onVendorChange(option ? Number(option.id) : null)}
+          renderInput={(params) => <TextField {...params} label="Vendor / technician" />}
+          className="flex-1"
+        />
+        <Button variant="contained" onClick={onAdd} disabled={vendorId == null}>
+          Add
+        </Button>
+      </Stack>
+    </Paper>
+  );
+}
+
+type PreferenceRowProps = {
+  item: SiteVendorPreference;
+  index: number;
+  total: number;
+  onMove: (index: number, offset: number) => void;
+  onRemove: (index: number) => void;
+};
+
+function PreferenceRow({ item, index, total, onMove, onRemove }: PreferenceRowProps) {
+  return (
+    <Paper variant="outlined" className="p-3">
+      <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+        <Text className="flex-1">
+          {index + 1}. {item.vendorName} {item.trade ? `· ${item.trade}` : "· All trades"}
+        </Text>
+        {item.isStale && (
+          <Alert severity="warning">
+            <Text as="span">Stale preference</Text>
+          </Alert>
+        )}
+        <IconButton
+          aria-label={`Move ${item.vendorName} up`}
+          onClick={() => onMove(index, -1)}
+          disabled={index === 0}
+        >
+          <ArrowUp size={18} />
+        </IconButton>
+        <IconButton
+          aria-label={`Move ${item.vendorName} down`}
+          onClick={() => onMove(index, 1)}
+          disabled={index === total - 1}
+        >
+          <ArrowDown size={18} />
+        </IconButton>
+        <IconButton aria-label={`Remove ${item.vendorName}`} onClick={() => onRemove(index)}>
+          <Trash2 size={18} />
+        </IconButton>
+      </Stack>
+    </Paper>
+  );
+}
+
+export default function VendorPreferencesPage() {
+  const queryClient = useQueryClient();
+  const [locationId, setLocationId] = useState<string | number>("");
+  const [draft, setDraft] = useState<SiteVendorPreference[]>([]);
+  const [isDirty, setIsDirty] = useState(false);
+  const [trade, setTrade] = useState("");
+  const [vendorId, setVendorId] = useState<number | null>(null);
+  const { data: locations = [] } = useWorkOrderLocations();
+  const { data: vendors = [] } = useWorkOrderVendors(trade || undefined);
+  const queryKey = ["vendor-operations", "site-preferences", locationId];
+  const { data: serverPreferences = EMPTY_PREFERENCES, error } = useQuery({
+    queryKey,
+    queryFn: () => vendorOperationsApi.sitePreferences(locationId),
+    enabled: locationId !== "",
+  });
+
+  // A background refetch must not clobber in-flight edits, so only adopt server
+  // data while the draft is clean (initial load, site change, or after a save).
+  useEffect(() => {
+    if (!isDirty) {
+      setDraft(serverPreferences);
+    }
+  }, [isDirty, serverPreferences]);
+
+  const vendorOptions = useMemo(() => {
+    const selectedVendorIds = new Set(draft.map((preference) => preference.vendorId));
+    return vendors.filter((vendor) => !selectedVendorIds.has(Number(vendor.id)));
+  }, [draft, vendors]);
+
+  const save = useMutation({
+    mutationFn: () =>
+      vendorOperationsApi.replaceSitePreferences(
+        locationId,
+        draft.map((item, sortOrder) => ({ vendorId: item.vendorId, trade: item.trade, sortOrder })),
+      ),
+    onMutate: async () => {
+      await queryClient.cancelQueries({ queryKey });
+    },
+    onSuccess: (savedPreferences) => {
+      queryClient.setQueryData(queryKey, savedPreferences);
+      setDraft(savedPreferences);
+      setIsDirty(false);
+      toast.success("Preferred vendors updated");
+    },
+    onError: () => toast.error("Unable to save preferred vendors. Please try again."),
+  });
+
+  const move = (index: number, offset: number) => {
+    setDraft((current) => {
+      const target = index + offset;
+      if (target < 0 || target >= current.length) return current;
+      const next = [...current];
+      [next[index], next[target]] = [next[target]!, next[index]!];
+      return next.map((item, sortOrder) => ({ ...item, sortOrder }));
+    });
+    setIsDirty(true);
+  };
+
+  const add = () => {
+    const vendor = vendors.find((item) => Number(item.id) === vendorId);
+    if (!vendor || locationId === "") return;
+    setDraft((current) => [
+      ...current,
+      {
+        id: -Date.now(),
+        locationId: Number(locationId),
+        vendorId: Number(vendor.id),
+        vendorName: vendor.companyName,
+        trade: trade.trim() || undefined,
+        sortOrder: current.length,
+        isStale: false,
+      },
+    ]);
+    setVendorId(null);
+    setIsDirty(true);
+  };
+
+  const remove = (index: number) => {
+    setDraft((current) => current.filter((_, row) => row !== index));
+    setIsDirty(true);
+  };
+
+  const selectLocation = (nextLocationId: string | number) => {
+    setLocationId(nextLocationId);
+    setDraft(EMPTY_PREFERENCES);
+    setIsDirty(false);
+  };
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <Box>
+        <Text variant="title" as="h1">
+          Preferred vendors by site
+        </Text>
+        <Text variant="description" tone="muted">
+          Preferred vendors rank first, but availability, conflict, trade, active-state, and
+          permission checks still apply.
+        </Text>
+      </Box>
+      <Paper variant="outlined" className="p-4">
+        <Autocomplete
+          options={locations}
+          getOptionLabel={(option) => option.name}
+          value={locations.find((location) => location.id === locationId) ?? null}
+          onChange={(_event, option) => selectLocation(option?.id ?? "")}
+          renderInput={(params) => <TextField {...params} label="Site" />}
+        />
+      </Paper>
+      <Text variant="error" when={Boolean(error)}>
+        Unable to load preferred vendors. Please try again.
+      </Text>
+      {locationId !== "" && (
+        <>
+          <AddVendorPreferenceControls
+            trade={trade}
+            onTradeChange={setTrade}
+            vendorOptions={vendorOptions}
+            vendors={vendors}
+            vendorId={vendorId}
+            onVendorChange={setVendorId}
+            onAdd={add}
+          />
+          <Stack spacing={1}>
+            {draft.map((item, index) => (
+              <PreferenceRow
+                key={`${item.vendorId}-${item.trade ?? "all"}`}
+                item={item}
+                index={index}
+                total={draft.length}
+                onMove={move}
+                onRemove={remove}
+              />
+            ))}
+          </Stack>
+          <Button variant="contained" onClick={() => save.mutate()} disabled={save.isPending}>
+            {save.isPending ? "Saving…" : "Save preferences"}
+          </Button>
+        </>
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/[id].tsx b/src/app/(protected)/workorders/[id].tsx
new file mode 100644
index 00000000..6741c4ea
--- /dev/null
+++ b/src/app/(protected)/workorders/[id].tsx
@@ -0,0 +1,155 @@
+import { useParams } from "react-router";
+import { useState } from "react";
+import { Box } from "@mui/material";
+import { QueryErrorPanel } from "@/components/ui/query-error-panel";
+import { DetailPageSkeleton } from "./_components/loading/detail-page-skeleton";
+import { DispatchCreateModal } from "./_components/dispatch-create-modal";
+import { DispatchDetailModal } from "./_components/dispatch-detail-modal";
+import { WorkOrderActivityPanel } from "./_components/view/work-order-activity-panel";
+import { WorkOrderDispatchesAccordion } from "./_components/view/work-order-dispatches-accordion";
+import { WorkOrderVendorEditorDialog } from "./_components/view/work-order-vendor-editor-dialog";
+import { WorkOrderViewAccordions } from "./_components/view/work-order-view-accordions";
+import { WorkOrderViewDetails } from "./_components/view/work-order-view-details";
+import { WorkOrderViewHeader } from "./_components/view/work-order-view-header";
+import { useWorkOrderViewPage } from "./_hooks/use-work-order-view-page";
+import { WorkOrderCompleteDialog } from "./_components/list/work-order-complete-dialog";
+import {
+  detailToClosabilityInput,
+  getClosabilityGaps,
+  isCompletionStatusLabel,
+} from "@/domain/work-orders/utils/wo-closability";
+import {
+  isWorkOrderCoreLocked,
+  isWorkOrderFullyLocked,
+} from "@/domain/work-orders/utils/work-order-lock";
+import type { WorkOrderStatus } from "@/domain/work-orders/types/work-order";
+
+export default function WorkOrderViewPage() {
+  const { id } = useParams();
+  const workOrderId = id ?? "";
+  const view = useWorkOrderViewPage(workOrderId);
+  const [confirmComplete, setConfirmComplete] = useState(false);
+
+  if (view.isLoading && !view.wo) {
+    return <DetailPageSkeleton variant="view" />;
+  }
+
+  if (!view.wo) {
+    return (
+      <Box className="p-4">
+        <QueryErrorPanel
+          message={view.error instanceof Error ? view.error.message : "Work order not found."}
+          onRetry={() => void view.refetch()}
+        />
+      </Box>
+    );
+  }
+
+  const wo = view.wo;
+  const isLocked = isWorkOrderCoreLocked(wo.status) || isWorkOrderFullyLocked(wo.status);
+
+  const handleStatusChange = (status: string) => {
+    if (isLocked) return;
+    const isCompletionStatus = isCompletionStatusLabel(status);
+    if (
+      isCompletionStatus &&
+      (!view.isClosabilityReady || getClosabilityGaps(detailToClosabilityInput(wo)).length > 0)
+    ) {
+      return;
+    }
+    if (isCompletionStatus) {
+      setConfirmComplete(true);
+      return;
+    }
+    view.statusMutation.mutate(status as WorkOrderStatus);
+  };
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <WorkOrderViewHeader
+        wo={wo}
+        workOrderId={workOrderId}
+        isClosabilityReady={view.isClosabilityReady}
+        statusAnchor={view.statusAnchor}
+        onStatusAnchorChange={view.setStatusAnchor}
+        onStatusChange={handleStatusChange}
+        onOpenDispatch={() => view.setDispatchOpen(true)}
+        readOnly={isLocked}
+      />
+
+      <WorkOrderViewDetails
+        wo={view.wo}
+        users={view.users}
+        assignAnchor={view.assignAnchor}
+        onAssignAnchorChange={view.setAssignAnchor}
+        onAssign={(userId, userName) => {
+          if (isLocked) return;
+          view.assignmentMutation.mutate({ userId, userName });
+        }}
+        onUnassign={() => {
+          if (isLocked) return;
+          view.assignmentMutation.mutate({ userId: "", userName: "" });
+        }}
+        readOnly={isLocked}
+      />
+
+      <WorkOrderViewAccordions wo={view.wo} />
+
+      <WorkOrderDispatchesAccordion
+        wo={view.wo}
+        vendorViewOnly={isLocked}
+        onOpenDispatchDetail={view.setDispatchDetailId}
+        onOpenVendorEditor={view.openVendorEditor}
+      />
+
+      <WorkOrderActivityPanel
+        customerComments={view.customerComments}
+        internalComments={view.internalComments}
+        auditLog={view.auditLog}
+        mentionUsers={view.mentionUsers}
+        isSubmitting={view.commentMutation.isPending}
+        onSubmitComment={view.submitComment}
+      />
+
+      {view.dispatchOpen && (
+        <DispatchCreateModal
+          workOrder={view.wo}
+          onClose={() => view.setDispatchOpen(false)}
+          onDispatched={() => void view.refetch()}
+        />
+      )}
+      {view.dispatchDetailId != null && (
+        <DispatchDetailModal
+          dispatchId={view.dispatchDetailId}
+          workOrderId={workOrderId}
+          onClose={() => view.setDispatchDetailId(null)}
+          onUpdated={() => void view.refetch()}
+        />
+      )}
+
+      <WorkOrderVendorEditorDialog
+        editor={view.vendorEditor}
+        loading={view.vendorEditorLoading}
+        error={view.vendorEditorError}
+        isSaving={view.vendorMutation.isPending}
+        viewOnly={isLocked}
+        onClose={() => {
+          if (!view.vendorMutation.isPending) view.setVendorEditor(null);
+        }}
+        onSave={view.saveVendorEditor}
+        onEditorChange={view.setVendorEditor}
+      />
+
+      <WorkOrderCompleteDialog
+        open={confirmComplete}
+        isPending={view.statusMutation.isPending}
+        onDialogClose={() => setConfirmComplete(false)}
+        onKeepOpen={() => setConfirmComplete(false)}
+        onConfirm={() => {
+          view.statusMutation.mutate("Done");
+          setConfirmComplete(false);
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-co-line.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-co-line.tsx
new file mode 100644
index 00000000..5d3804bb
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-co-line.tsx
@@ -0,0 +1,19 @@
+import type { ElementType } from "react";
+
+type CompDocCoLineProps = {
+  icon: ElementType;
+  text: string;
+  bold?: boolean;
+};
+
+export function CompDocCoLine({ icon: Icon, text, bold }: CompDocCoLineProps) {
+  return (
+    <div
+      className="flex items-center justify-end gap-1.5 break-words"
+      style={{ fontSize: 11, color: "#161E38", overflowWrap: "break-word" }}
+    >
+      <span style={{ fontWeight: bold ? 600 : 400 }}>{text}</span>
+      <Icon size={12} className="shrink-0" style={{ color: "#1C75BC" }} />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-detail-row.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-detail-row.tsx
new file mode 100644
index 00000000..c5f08558
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-detail-row.tsx
@@ -0,0 +1,39 @@
+import type { ElementType } from "react";
+
+type CompDocDetailRowProps = {
+  icon: ElementType;
+  label: string;
+  value: string;
+  last?: boolean;
+};
+
+export function CompDocDetailRow({ icon: Icon, label, value, last }: CompDocDetailRowProps) {
+  return (
+    <div
+      className="flex items-start gap-2.5"
+      style={{
+        padding: "10px 0",
+        borderBottom: last ? "none" : "1px solid var(--color-border)",
+      }}
+    >
+      <Icon
+        size={15}
+        className="shrink-0"
+        style={{ color: "var(--muted-foreground)", marginTop: 2 }}
+      />
+      <div className="min-w-0">
+        <div style={{ fontSize: 11.5, color: "var(--muted-foreground)" }}>{label}</div>
+        <div
+          style={{
+            fontSize: 13,
+            fontWeight: 500,
+            color: "var(--color-text-primary)",
+            marginTop: 1,
+          }}
+        >
+          {value}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-details-section.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-details-section.tsx
new file mode 100644
index 00000000..26ba67fd
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-details-section.tsx
@@ -0,0 +1,75 @@
+import { Building2, MapPin, Users, Wrench } from "lucide-react";
+import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { CompDocDetailRow } from "./comp-doc-detail-row";
+import { CompDocEditableRow } from "./comp-doc-editable-row";
+
+type CompDocDetailsSectionProps = {
+  row: WorkOrderTableRow;
+  site: CompDocSiteInfo;
+  editAddress: string;
+  onAddressChange: (value: string) => void;
+  editDateCompleted: string;
+  onDateCompletedChange: (value: string) => void;
+  amazonRep: string;
+  seaRep: string;
+  isGenerated: boolean;
+};
+
+export function CompDocDetailsSection({
+  row,
+  site,
+  editAddress,
+  onAddressChange,
+  editDateCompleted,
+  onDateCompletedChange,
+  amazonRep,
+  seaRep,
+  isGenerated,
+}: CompDocDetailsSectionProps) {
+  return (
+    <div style={{ marginTop: 20 }}>
+      <div
+        style={{
+          fontFamily: "var(--font-mono)",
+          fontSize: 10,
+          fontWeight: 600,
+          letterSpacing: "0.1em",
+          textTransform: "uppercase",
+          color: "var(--muted-foreground)",
+        }}
+      >
+        Work Order Details
+      </div>
+      <div style={{ marginTop: 6 }}>
+        <CompDocDetailRow icon={Building2} label="WO #" value={`#${row.woNumber}`} />
+        <CompDocDetailRow
+          icon={MapPin}
+          label="Site Code"
+          value={`${site.code} · Amazon.com Services LLC`}
+        />
+        <CompDocEditableRow
+          label="Address"
+          value={editAddress}
+          onChange={onAddressChange}
+          placeholder={site.fullAddress !== "—" ? site.fullAddress : "Street address"}
+          disabled={isGenerated}
+        />
+        <CompDocEditableRow
+          label="Date Work Completed"
+          value={editDateCompleted}
+          onChange={onDateCompletedChange}
+          type="date"
+          disabled={isGenerated}
+        />
+        <CompDocDetailRow icon={Users} label="Amazon Representative" value={amazonRep || "—"} />
+        <CompDocDetailRow
+          icon={Wrench}
+          label="Seahaven Representative"
+          value={seaRep || "—"}
+          last
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-draft-actions.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-draft-actions.tsx
new file mode 100644
index 00000000..4468592b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-draft-actions.tsx
@@ -0,0 +1,73 @@
+import type { RefObject } from "react";
+import { Ban, Save, Sparkles, Upload } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { COMP_DOC_FOOTER_BTN_SX } from "./comp-doc-footer-button-sx";
+
+type CompDocDialogFooterDraftActionsProps = {
+  rowVersion?: string | number | null;
+  isUploading: boolean;
+  pdfInputRef: RefObject<HTMLInputElement | null>;
+  onMarkNotRequired: () => void;
+  onSaveDraft: () => void;
+  onGenerate: () => void;
+};
+
+export function CompDocDialogFooterDraftActions({
+  rowVersion,
+  isUploading,
+  pdfInputRef,
+  onMarkNotRequired,
+  onSaveDraft,
+  onGenerate,
+}: CompDocDialogFooterDraftActionsProps) {
+  return (
+    <>
+      <Button
+        variant="ghost"
+        size="default"
+        className="gap-1.5 whitespace-nowrap text-[12px]"
+        sx={COMP_DOC_FOOTER_BTN_SX}
+        style={{ color: "var(--muted-foreground)" }}
+        disabled={isUploading}
+        onClick={onMarkNotRequired}
+      >
+        <Ban size={14} /> Mark as not required
+      </Button>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button
+          variant="outline"
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          disabled={isUploading}
+          onClick={onSaveDraft}
+        >
+          <Save size={14} /> Save draft
+        </Button>
+        <Button
+          variant="outline"
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          disabled={!rowVersion || isUploading}
+          loading={isUploading}
+          loadingText="Uploading…"
+          onClick={() => pdfInputRef.current?.click()}
+          startIcon={!isUploading ? <Upload size={14} /> : undefined}
+        >
+          Upload PDF
+        </Button>
+        <Button
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          style={{ background: "var(--color-primary)", color: "#fff" }}
+          disabled={isUploading}
+          onClick={onGenerate}
+        >
+          <Sparkles size={14} /> Generate
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-draft.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-draft.tsx
new file mode 100644
index 00000000..fad1529f
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-draft.tsx
@@ -0,0 +1,50 @@
+import { Ban, Save, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { COMP_DOC_FOOTER_BTN_SX } from "./comp-doc-footer-btn-sx";
+
+type CompDocDialogFooterDraftProps = {
+  onMarkNotRequired: () => void;
+  onSaveDraft: () => void;
+  onGenerate: () => void;
+};
+
+export function CompDocDialogFooterDraft({
+  onMarkNotRequired,
+  onSaveDraft,
+  onGenerate,
+}: CompDocDialogFooterDraftProps) {
+  return (
+    <>
+      <Button
+        variant="ghost"
+        size="default"
+        className="gap-1.5 whitespace-nowrap text-[12px]"
+        sx={COMP_DOC_FOOTER_BTN_SX}
+        style={{ color: "var(--muted-foreground)" }}
+        onClick={onMarkNotRequired}
+      >
+        <Ban size={14} /> Mark as not required
+      </Button>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button
+          variant="outline"
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          onClick={onSaveDraft}
+        >
+          <Save size={14} /> Save draft
+        </Button>
+        <Button
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          style={{ background: "var(--color-primary)", color: "#fff" }}
+          onClick={onGenerate}
+        >
+          <Sparkles size={14} /> Generate
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-generated-actions.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-generated-actions.tsx
new file mode 100644
index 00000000..5c006a97
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-generated-actions.tsx
@@ -0,0 +1,62 @@
+import type { RefObject } from "react";
+import { CheckCircle2, Download, Upload } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { COMP_DOC_FOOTER_BTN_SX } from "./comp-doc-footer-button-sx";
+
+type CompDocDialogFooterGeneratedActionsProps = {
+  generatedAt: string;
+  signOffAttachment?: string | null;
+  isDocumentsReadOnly: boolean;
+  rowVersion?: string | number | null;
+  isUploading: boolean;
+  pdfInputRef: RefObject<HTMLInputElement | null>;
+  onDownloadPdf: () => void;
+};
+
+export function CompDocDialogFooterGeneratedActions({
+  generatedAt,
+  signOffAttachment,
+  isDocumentsReadOnly,
+  rowVersion,
+  isUploading,
+  pdfInputRef,
+  onDownloadPdf,
+}: CompDocDialogFooterGeneratedActionsProps) {
+  return (
+    <>
+      <span
+        className="inline-flex items-center gap-1.5 whitespace-nowrap"
+        style={{ fontSize: 12, color: "var(--color-success)" }}
+      >
+        <CheckCircle2 size={14} />{" "}
+        {signOffAttachment ? "Document on file" : `Generated ${generatedAt}`}
+      </span>
+      <div className="flex shrink-0 items-center gap-2">
+        {!isDocumentsReadOnly && (
+          <Button
+            variant="outline"
+            size="default"
+            className="gap-1.5 whitespace-nowrap text-[12px]"
+            sx={COMP_DOC_FOOTER_BTN_SX}
+            disabled={!rowVersion}
+            loading={isUploading}
+            loadingText="Uploading…"
+            onClick={() => pdfInputRef.current?.click()}
+            startIcon={!isUploading ? <Upload size={14} /> : undefined}
+          >
+            Replace PDF
+          </Button>
+        )}
+        <Button
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          style={{ background: "var(--color-primary)", color: "#fff" }}
+          onClick={onDownloadPdf}
+        >
+          <Download size={14} /> Download PDF
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-generated.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-generated.tsx
new file mode 100644
index 00000000..91b9792c
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-generated.tsx
@@ -0,0 +1,35 @@
+import { CheckCircle2, Download } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { COMP_DOC_FOOTER_BTN_SX } from "./comp-doc-footer-btn-sx";
+
+type CompDocDialogFooterGeneratedProps = {
+  generatedAt: string;
+  onDownloadPdf: () => void;
+};
+
+export function CompDocDialogFooterGenerated({
+  generatedAt,
+  onDownloadPdf,
+}: CompDocDialogFooterGeneratedProps) {
+  return (
+    <>
+      <span
+        className="inline-flex items-center gap-1.5 whitespace-nowrap"
+        style={{ fontSize: 12, color: "var(--color-success)" }}
+      >
+        <CheckCircle2 size={14} /> Generated {generatedAt}
+      </span>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          style={{ background: "var(--color-primary)", color: "#fff" }}
+          onClick={onDownloadPdf}
+        >
+          <Download size={14} /> Download PDF
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-not-required-actions.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-not-required-actions.tsx
new file mode 100644
index 00000000..79d16bca
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-not-required-actions.tsx
@@ -0,0 +1,53 @@
+import { Ban, Sparkles, Undo2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { COMP_DOC_FOOTER_BTN_SX } from "./comp-doc-footer-button-sx";
+
+type CompDocDialogFooterNotRequiredActionsProps = {
+  isDocumentsReadOnly: boolean;
+  onUndo: () => void;
+};
+
+export function CompDocDialogFooterNotRequiredActions({
+  isDocumentsReadOnly,
+  onUndo,
+}: CompDocDialogFooterNotRequiredActionsProps) {
+  return (
+    <>
+      <span
+        className="inline-flex items-center gap-1.5 whitespace-nowrap"
+        style={{ fontSize: 12, color: "var(--muted-foreground)" }}
+      >
+        <Ban size={14} style={{ color: "var(--warning)" }} /> Marked{" "}
+        <b style={{ fontWeight: 600 }}>not required</b> for this work order
+      </span>
+      <div className="flex shrink-0 items-center gap-2">
+        {!isDocumentsReadOnly && (
+          <Button
+            variant="outline"
+            size="default"
+            className="gap-1.5 whitespace-nowrap text-[12px]"
+            sx={COMP_DOC_FOOTER_BTN_SX}
+            onClick={onUndo}
+          >
+            <Undo2 size={14} /> Undo
+          </Button>
+        )}
+        <Button
+          size="default"
+          disabled
+          title="Marked not required — undo to generate"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          style={{
+            background: "var(--color-primary)",
+            color: "#fff",
+            opacity: 0.5,
+            pointerEvents: "none",
+          }}
+        >
+          <Sparkles size={14} /> Generate
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-not-required.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-not-required.tsx
new file mode 100644
index 00000000..da1976bb
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer-not-required.tsx
@@ -0,0 +1,47 @@
+import { Ban, Sparkles, Undo2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { COMP_DOC_FOOTER_BTN_SX } from "./comp-doc-footer-btn-sx";
+
+type CompDocDialogFooterNotRequiredProps = {
+  onUndo: () => void;
+};
+
+export function CompDocDialogFooterNotRequired({ onUndo }: CompDocDialogFooterNotRequiredProps) {
+  return (
+    <>
+      <span
+        className="inline-flex items-center gap-1.5 whitespace-nowrap"
+        style={{ fontSize: 12, color: "var(--muted-foreground)" }}
+      >
+        <Ban size={14} style={{ color: "var(--warning)" }} /> Marked{" "}
+        <b style={{ fontWeight: 600 }}>not required</b> for this work order
+      </span>
+      <div className="flex shrink-0 items-center gap-2">
+        <Button
+          variant="outline"
+          size="default"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          onClick={onUndo}
+        >
+          <Undo2 size={14} /> Undo
+        </Button>
+        <Button
+          size="default"
+          disabled
+          title="Marked not required — undo to generate"
+          className="gap-1.5 whitespace-nowrap text-[12px]"
+          sx={COMP_DOC_FOOTER_BTN_SX}
+          style={{
+            background: "var(--color-primary)",
+            color: "#fff",
+            opacity: 0.5,
+            pointerEvents: "none",
+          }}
+        >
+          <Sparkles size={14} /> Generate
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer.tsx
new file mode 100644
index 00000000..b21cbd05
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer.tsx
@@ -0,0 +1,94 @@
+import type { RefObject } from "react";
+import type { DocState } from "@/domain/work-orders/types/completion-doc";
+import { CompDocDialogFooterDraftActions } from "./comp-doc-dialog-footer-draft-actions";
+import { CompDocDialogFooterGeneratedActions } from "./comp-doc-dialog-footer-generated-actions";
+import { CompDocDialogFooterNotRequiredActions } from "./comp-doc-dialog-footer-not-required-actions";
+
+type CompDocDialogFooterProps = {
+  docState: DocState;
+  isDocumentsReadOnly: boolean;
+  rowVersion?: string | number | null;
+  isUploading: boolean;
+  signOffAttachment?: string | null;
+  generatedAt: string;
+  pdfInputRef: RefObject<HTMLInputElement | null>;
+  onMarkNotRequired: () => void;
+  onSaveDraft: () => void;
+  onGenerate: () => void;
+  onUndo: () => void;
+  onDownloadPdf: () => void;
+  onUploadPdf: (files: FileList | null) => void;
+};
+
+export function CompDocDialogFooter({
+  docState,
+  isDocumentsReadOnly,
+  rowVersion,
+  isUploading,
+  signOffAttachment,
+  generatedAt,
+  pdfInputRef,
+  onMarkNotRequired,
+  onSaveDraft,
+  onGenerate,
+  onUndo,
+  onDownloadPdf,
+  onUploadPdf,
+}: CompDocDialogFooterProps) {
+  // Exclusive footer branches (prototype: one docState at a time). A signed PDF
+  // on file implies Generated even if local docState has not caught up yet — never
+  // render Draft actions alongside Generated.
+  const showNotRequired = docState === "not-required";
+  const showGenerated =
+    !showNotRequired && (docState === "generated" || Boolean(signOffAttachment));
+  const showDraft = !showNotRequired && !showGenerated && docState === "draft";
+
+  return (
+    <div
+      className="flex shrink-0 items-center justify-between gap-3"
+      style={{
+        padding: "14px 20px",
+        borderTop: "1px solid var(--color-border)",
+        background: "var(--color-bg-surface)",
+      }}
+    >
+      <input
+        ref={pdfInputRef}
+        type="file"
+        accept="application/pdf,.pdf"
+        hidden
+        onChange={(event) => {
+          onUploadPdf(event.target.files);
+          event.target.value = "";
+        }}
+      />
+      {Boolean(showDraft && !isDocumentsReadOnly) && (
+        <CompDocDialogFooterDraftActions
+          rowVersion={rowVersion}
+          isUploading={isUploading}
+          pdfInputRef={pdfInputRef}
+          onMarkNotRequired={onMarkNotRequired}
+          onSaveDraft={onSaveDraft}
+          onGenerate={onGenerate}
+        />
+      )}
+      {showGenerated && (
+        <CompDocDialogFooterGeneratedActions
+          generatedAt={generatedAt}
+          signOffAttachment={signOffAttachment}
+          isDocumentsReadOnly={isDocumentsReadOnly}
+          rowVersion={rowVersion}
+          isUploading={isUploading}
+          pdfInputRef={pdfInputRef}
+          onDownloadPdf={onDownloadPdf}
+        />
+      )}
+      {showNotRequired && (
+        <CompDocDialogFooterNotRequiredActions
+          isDocumentsReadOnly={isDocumentsReadOnly}
+          onUndo={onUndo}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-header.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-header.tsx
new file mode 100644
index 00000000..7a492060
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-header.tsx
@@ -0,0 +1,96 @@
+import { FileText, X } from "lucide-react";
+import type { CompletionDocStateConfig } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { serviceTitle } from "@/domain/work-orders/utils/completion-doc-service-title";
+
+type CompDocDialogHeaderProps = {
+  row: WorkOrderTableRow;
+  cfg: CompletionDocStateConfig;
+  isUploading: boolean;
+  onClose: () => void;
+};
+
+export function CompDocDialogHeader({ row, cfg, isUploading, onClose }: CompDocDialogHeaderProps) {
+  return (
+    <div
+      className="flex shrink-0 items-center justify-between"
+      style={{
+        height: 60,
+        padding: "0 20px",
+        borderBottom: "1px solid var(--color-border)",
+        background: "var(--color-bg-surface)",
+      }}
+    >
+      <div className="flex min-w-0 items-center gap-2.5">
+        <FileText size={18} className="shrink-0" style={{ color: "var(--color-primary)" }} />
+        <div className="min-w-0">
+          <div
+            style={{
+              fontFamily: "var(--font-display)",
+              fontSize: 16,
+              fontWeight: 700,
+              color: "var(--color-text-primary)",
+              lineHeight: 1.1,
+            }}
+          >
+            Completion Document
+          </div>
+          <div
+            className="truncate"
+            style={{
+              fontSize: 13,
+              color: "var(--muted-foreground)",
+              marginTop: 2,
+            }}
+          >
+            WO{" "}
+            <span className="font-mono" style={{ color: "var(--color-primary)", fontWeight: 600 }}>
+              #{row.woNumber}
+            </span>
+            {" · "}
+            {serviceTitle(row)}
+          </div>
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <span
+          className="inline-flex items-center gap-1.5"
+          style={{
+            height: 26,
+            padding: "0 10px",
+            borderRadius: 9999,
+            background: cfg.pillBg,
+            color: cfg.pillText,
+            fontSize: 12,
+            fontWeight: 600,
+          }}
+        >
+          <span
+            style={{
+              width: 6,
+              height: 6,
+              borderRadius: 9999,
+              background: cfg.pillText,
+            }}
+          />
+          {cfg.pillLabel}
+        </span>
+        <button
+          type="button"
+          onClick={onClose}
+          disabled={isUploading}
+          aria-label="Close"
+          className="flex items-center justify-center rounded-md transition-colors hover:bg-[var(--color-bg-muted)] disabled:opacity-40"
+          style={{
+            width: 32,
+            height: 32,
+            border: "1px solid var(--color-border)",
+            color: "var(--color-text-muted)",
+          }}
+        >
+          <X size={16} />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-resource-links.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-resource-links.tsx
new file mode 100644
index 00000000..bb772f0b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-resource-links.tsx
@@ -0,0 +1,48 @@
+import { Download, FileText } from "lucide-react";
+
+type CompDocDialogResourceLinksProps = {
+  templateUrl?: string | null;
+  signOffAttachment?: string | null;
+};
+
+export function CompDocDialogResourceLinks({
+  templateUrl,
+  signOffAttachment,
+}: CompDocDialogResourceLinksProps) {
+  if (!templateUrl && !signOffAttachment) return null;
+
+  return (
+    <div
+      className="flex shrink-0 flex-wrap items-center gap-3 px-5 py-2"
+      style={{
+        borderBottom: "1px solid var(--color-border)",
+        background: "var(--color-bg-muted)",
+      }}
+    >
+      {Boolean(templateUrl) && (
+        <a
+          href={templateUrl ?? undefined}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+          style={{ color: "var(--color-primary)" }}
+        >
+          <Download size={13} />
+          Download blank template
+        </a>
+      )}
+      {Boolean(signOffAttachment) && (
+        <a
+          href={signOffAttachment ?? undefined}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+          style={{ color: "var(--color-primary)" }}
+        >
+          <FileText size={13} />
+          Open uploaded PDF
+        </a>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog.tsx
new file mode 100644
index 00000000..030e63df
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog.tsx
@@ -0,0 +1,212 @@
+import { useRef, useState, type MouseEvent } from "react";
+import { Dialog, DialogContent, DialogTitle } from "@mui/material";
+import { toast } from "react-toastify";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+import { Text } from "@/components/ui/text";
+import type { CompDocData, CompDocSaveStatus } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { useWorkOrderBoardDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useUploadCompletionDoc } from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import {
+  formatMediaSizeLimit,
+  isWorkOrderDocumentsReadOnly,
+  isWorkOrderFileTooLarge,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+import { useCompDocDialog } from "@/app/(protected)/workorders/_hooks/use-comp-doc-dialog";
+import { CompDocDialogFooter } from "./comp-doc-dialog-footer";
+import { CompDocDialogHeader } from "./comp-doc-dialog-header";
+import { CompDocDialogResourceLinks } from "./comp-doc-dialog-resource-links";
+import { CompDocPreview } from "./comp-doc-preview";
+import { CompDocSidebar } from "./comp-doc-sidebar";
+
+type CompDocDialogProps = {
+  row: WorkOrderTableRow;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  data?: CompDocData;
+  onSave: (data: CompDocData, status: CompDocSaveStatus) => void | Promise<void>;
+  onDateCompletedChange?: (date: string) => void | Promise<void>;
+};
+
+type UseCompDocPdfUploadArgs = {
+  workOrderId: string | number;
+  rowVersion: string;
+  onUploaded: () => void | Promise<void>;
+};
+
+function rejectCompDocPdf(file: File, rowVersion: string): string | null {
+  if (isWorkOrderFileTooLarge(file)) {
+    return `File exceeds the ${formatMediaSizeLimit()} limit.`;
+  }
+  if (file.type !== "application/pdf" && !file.name.toLowerCase().endsWith(".pdf")) {
+    return "Please upload a PDF file.";
+  }
+  if (!rowVersion) {
+    return "Missing work order version. Refresh and try again.";
+  }
+  return null;
+}
+
+function useCompDocPdfUpload({ workOrderId, rowVersion, onUploaded }: UseCompDocPdfUploadArgs) {
+  const uploadCompletionMutation = useUploadCompletionDoc(workOrderId);
+  const pdfInputRef = useRef<HTMLInputElement>(null);
+  const [isFinalizing, setIsFinalizing] = useState(false);
+
+  function handleUploadPdf(files: FileList | null) {
+    const file = files?.[0];
+    if (!file) return;
+
+    const rejection = rejectCompDocPdf(file, rowVersion);
+    if (rejection) {
+      toast.error(rejection);
+      return;
+    }
+
+    uploadCompletionMutation.mutate(
+      { file, workOrderVersion: rowVersion },
+      {
+        onSuccess: () => {
+          // Keep close/actions disabled across the gap between upload settle and docStatus persist.
+          setIsFinalizing(true);
+          void Promise.resolve(onUploaded()).finally(() => setIsFinalizing(false));
+        },
+      },
+    );
+  }
+
+  return {
+    pdfInputRef,
+    handleUploadPdf,
+    isUploading: uploadCompletionMutation.isPending || isFinalizing,
+  };
+}
+
+export function CompDocDialog({
+  row,
+  open,
+  onOpenChange,
+  data,
+  onSave,
+  onDateCompletedChange,
+}: CompDocDialogProps) {
+  const dialog = useCompDocDialog({ row, open, data, onSave, onDateCompletedChange });
+  const { data: boardDetail } = useWorkOrderBoardDetail(row.id, open);
+
+  const templateUrl = boardDetail?.completion.template?.templateUrl;
+  const signOffAttachment = boardDetail?.completion.signOffAttachment || null;
+  const rowVersion = boardDetail?.info.rowVersion || row.rowVersion;
+  const isDocumentsReadOnly = isWorkOrderDocumentsReadOnly(boardDetail?.info.status ?? row.status);
+
+  // Uploading a signed PDF finalizes through the same Generate flow, so the
+  // completedDate/address prerequisites still persist before docStatus Yes.
+  const upload = useCompDocPdfUpload({
+    workOrderId: row.id,
+    rowVersion,
+    onUploaded: dialog.handleGenerate,
+  });
+
+  // A signed PDF on file means the document exists even if docState has not caught up.
+  const isGenerated = dialog.isGenerated || Boolean(signOffAttachment);
+  const handleClose = upload.isUploading ? undefined : () => onOpenChange(false);
+
+  function handleDownloadPdf() {
+    if (signOffAttachment) {
+      window.open(signOffAttachment, "_blank", "noopener,noreferrer");
+      return;
+    }
+    dialog.handleDownloadPdf();
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      maxWidth={false}
+      slotProps={{
+        ...dialogBlurBackdropSlotProps,
+        paper: {
+          className: "flex h-[85vh] max-h-[85vh] flex-col overflow-hidden border border-border p-0",
+          style: {
+            borderRadius: 12,
+            width: "min(1024px, calc(100vw - 32px))",
+            maxWidth: "none",
+          },
+          onClick: (e: MouseEvent<HTMLDivElement>) => e.stopPropagation(),
+        },
+      }}
+    >
+      <DialogContent
+        dividers={false}
+        className="flex min-h-0 flex-1 flex-col gap-0 overflow-hidden p-0"
+        sx={{
+          p: 0,
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+        }}
+      >
+        <DialogTitle className="sr-only">Completion Document — WO #{row.woNumber}</DialogTitle>
+        <Text className="sr-only" variant="description">
+          Generate, save or mark not-required the completion document for this work order.
+        </Text>
+
+        <div className="flex min-h-0 flex-1 flex-col">
+          <CompDocDialogHeader
+            row={row}
+            cfg={dialog.cfg}
+            isUploading={upload.isUploading}
+            onClose={() => handleClose?.()}
+          />
+
+          <CompDocDialogResourceLinks
+            templateUrl={templateUrl}
+            signOffAttachment={signOffAttachment}
+          />
+
+          <div className="flex min-h-0 flex-1 flex-row">
+            <CompDocPreview
+              row={row}
+              site={dialog.site}
+              notes={dialog.notes}
+              generatedAt={dialog.generatedAt}
+              isGenerated={isGenerated}
+              isNotRequired={dialog.isNotRequired}
+            />
+            <CompDocSidebar
+              row={row}
+              site={dialog.site}
+              docState={dialog.docState}
+              generatedAt={dialog.generatedAt}
+              notes={dialog.notes}
+              editAddress={dialog.editAddress}
+              onAddressChange={dialog.setEditAddress}
+              editDateCompleted={dialog.editDateCompleted}
+              amazonRep={dialog.amazonRep}
+              seaRep={dialog.seaRep}
+              isGenerated={isGenerated}
+              onNotesChange={dialog.setNotes}
+              onDateCompletedChange={dialog.setEditDateCompleted}
+            />
+          </div>
+
+          <CompDocDialogFooter
+            docState={dialog.docState}
+            isDocumentsReadOnly={isDocumentsReadOnly}
+            rowVersion={rowVersion}
+            isUploading={upload.isUploading}
+            signOffAttachment={signOffAttachment}
+            generatedAt={dialog.generatedAt}
+            pdfInputRef={upload.pdfInputRef}
+            onMarkNotRequired={dialog.handleMarkNotRequired}
+            onSaveDraft={dialog.handleSaveDraft}
+            onGenerate={dialog.handleGenerate}
+            onUndo={dialog.handleUndo}
+            onDownloadPdf={handleDownloadPdf}
+            onUploadPdf={upload.handleUploadPdf}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-draft-toast.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-draft-toast.tsx
new file mode 100644
index 00000000..910b7227
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-draft-toast.tsx
@@ -0,0 +1,29 @@
+import { CheckCircle2 } from "lucide-react";
+import { toast } from "react-toastify";
+
+export function showCompDocDraftSavedToast() {
+  toast(
+    <div
+      className="flex items-center gap-2"
+      style={{
+        background: "var(--foreground)",
+        color: "#fff",
+        padding: "10px 18px",
+        borderRadius: 9999,
+        fontSize: 13,
+        fontWeight: 600,
+        boxShadow: "0 10px 30px -10px rgba(0,0,0,.45)",
+      }}
+    >
+      <CheckCircle2 size={16} /> Draft saved
+    </div>,
+    {
+      position: "bottom-center",
+      autoClose: 3000,
+      hideProgressBar: true,
+      closeButton: false,
+      icon: false,
+      className: "!min-h-0 !bg-transparent !p-0 !shadow-none",
+    },
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-edit-row.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-edit-row.tsx
new file mode 100644
index 00000000..3823f39b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-edit-row.tsx
@@ -0,0 +1,51 @@
+import type { CSSProperties } from "react";
+
+const COMP_DOC_INPUT_CLS = "w-full rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1";
+
+const COMP_DOC_INPUT_STYLE: CSSProperties = {
+  fontSize: 13,
+  border: "1px solid var(--color-border)",
+  color: "var(--color-text-primary)",
+  background: "var(--color-bg-surface)",
+};
+
+type CompDocEditRowProps = {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  type?: string;
+  readOnly?: boolean;
+};
+
+export function CompDocEditRow({
+  label,
+  value,
+  onChange,
+  type = "text",
+  readOnly = false,
+}: CompDocEditRowProps) {
+  return (
+    <div style={{ padding: "8px 0", borderBottom: "1px solid var(--color-border)" }}>
+      <div style={{ fontSize: 11.5, color: "var(--muted-foreground)", marginBottom: 4 }}>
+        {label}
+      </div>
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        readOnly={readOnly}
+        className={COMP_DOC_INPUT_CLS}
+        style={{
+          ...COMP_DOC_INPUT_STYLE,
+          ...(readOnly
+            ? {
+                opacity: 0.6,
+                cursor: "default",
+                pointerEvents: "none" as const,
+              }
+            : {}),
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-editable-row.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-editable-row.tsx
new file mode 100644
index 00000000..8e9261e2
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-editable-row.tsx
@@ -0,0 +1,54 @@
+import type { CSSProperties } from "react";
+
+const COMP_DOC_INPUT_CLS = "w-full rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1";
+
+const COMP_DOC_INPUT_STYLE: CSSProperties = {
+  fontSize: 13,
+  border: "1px solid var(--color-border)",
+  color: "var(--color-text-primary)",
+  background: "var(--color-bg-surface)",
+};
+
+const COMP_DOC_INPUT_DISABLED_STYLE: CSSProperties = {
+  opacity: 0.6,
+  cursor: "default",
+  pointerEvents: "none",
+};
+
+type CompDocEditableRowProps = {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  type?: string;
+  placeholder?: string;
+  disabled?: boolean;
+};
+
+export function CompDocEditableRow({
+  label,
+  value,
+  onChange,
+  type = "text",
+  placeholder = "",
+  disabled = false,
+}: CompDocEditableRowProps) {
+  return (
+    <div style={{ padding: "8px 0", borderBottom: "1px solid var(--color-border)" }}>
+      <div style={{ fontSize: 11.5, color: "var(--muted-foreground)", marginBottom: 4 }}>
+        {label}
+      </div>
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        readOnly={disabled}
+        placeholder={placeholder}
+        className={COMP_DOC_INPUT_CLS}
+        style={{
+          ...COMP_DOC_INPUT_STYLE,
+          ...(disabled ? COMP_DOC_INPUT_DISABLED_STYLE : {}),
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-footer-btn-sx.ts b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-footer-btn-sx.ts
new file mode 100644
index 00000000..f5c0f2ba
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-footer-btn-sx.ts
@@ -0,0 +1,8 @@
+export const COMP_DOC_FOOTER_BTN_SX = {
+  minHeight: 28,
+  height: 28,
+  fontSize: 12,
+  px: 1.25,
+  py: 0.5,
+  gap: 0.75,
+} as const;
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-footer-button-sx.ts b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-footer-button-sx.ts
new file mode 100644
index 00000000..f5c0f2ba
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-footer-button-sx.ts
@@ -0,0 +1,8 @@
+export const COMP_DOC_FOOTER_BTN_SX = {
+  minHeight: 28,
+  height: 28,
+  fontSize: 12,
+  px: 1.25,
+  py: 0.5,
+  gap: 0.75,
+} as const;
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-not-required-stamp.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-not-required-stamp.tsx
new file mode 100644
index 00000000..ab3cbf04
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-not-required-stamp.tsx
@@ -0,0 +1,25 @@
+import { Ban } from "lucide-react";
+
+export function CompDocNotRequiredStamp() {
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-start justify-center">
+      <div
+        className="inline-flex items-center gap-2"
+        style={{
+          marginTop: "30%",
+          transform: "rotate(-15deg)",
+          border: "3px solid var(--warning)",
+          color: "var(--warning)",
+          borderRadius: 8,
+          padding: "8px 18px",
+          fontWeight: 800,
+          fontSize: 22,
+          letterSpacing: "0.06em",
+          background: "rgba(255,255,255,0.65)",
+        }}
+      >
+        <Ban size={20} /> NOT REQUIRED
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-notes-field.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-notes-field.tsx
new file mode 100644
index 00000000..f6deb5e5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-notes-field.tsx
@@ -0,0 +1,50 @@
+type CompDocNotesFieldProps = {
+  notes: string;
+  onNotesChange: (value: string) => void;
+  isGenerated: boolean;
+};
+
+export function CompDocNotesField({ notes, onNotesChange, isGenerated }: CompDocNotesFieldProps) {
+  return (
+    <div style={{ marginTop: 18 }}>
+      <label
+        style={{
+          fontSize: 13,
+          fontWeight: 600,
+          color: "var(--color-text-primary)",
+        }}
+      >
+        PM Comments{" "}
+        <span style={{ fontWeight: 400, color: "var(--muted-foreground)" }}>
+          — optional, included in the document
+        </span>
+      </label>
+      <textarea
+        value={notes}
+        onChange={(e) => onNotesChange(e.target.value)}
+        readOnly={isGenerated}
+        rows={3}
+        placeholder="Add findings, parts used, access notes, or anything the site POC should see…"
+        className="mt-2 w-full resize-none"
+        style={{
+          fontSize: 13,
+          fontFamily: "var(--font-sans)",
+          color: "var(--color-text-primary)",
+          background: "var(--color-bg-surface)",
+          border: "1px solid var(--color-border)",
+          borderRadius: 8,
+          padding: "10px 12px",
+          lineHeight: 1.5,
+          outline: "none",
+          ...(isGenerated
+            ? {
+                opacity: 0.6,
+                cursor: "default",
+                pointerEvents: "none" as const,
+              }
+            : {}),
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-badge.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-badge.tsx
new file mode 100644
index 00000000..9df6c499
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-badge.tsx
@@ -0,0 +1,32 @@
+import { CheckCircle2, FileText } from "lucide-react";
+
+type CompDocPreviewBadgeProps = {
+  isGenerated: boolean;
+};
+
+export function CompDocPreviewBadge({ isGenerated }: CompDocPreviewBadgeProps) {
+  return (
+    <div className="flex shrink-0 items-center justify-center" style={{ padding: "12px 0" }}>
+      <span
+        className="inline-flex items-center gap-1.5"
+        style={{
+          height: 28,
+          padding: "0 12px",
+          borderRadius: 9999,
+          background: "var(--color-bg-surface)",
+          border: "1px solid var(--color-border)",
+          fontSize: 12,
+          fontWeight: 500,
+          color: "var(--muted-foreground)",
+        }}
+      >
+        {isGenerated ? (
+          <CheckCircle2 size={13} style={{ color: "var(--color-success)" }} />
+        ) : (
+          <FileText size={13} />
+        )}
+        {isGenerated ? "Generated document" : "Preview — not yet generated"}
+      </span>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-company-header.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-company-header.tsx
new file mode 100644
index 00000000..0797a44d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-company-header.tsx
@@ -0,0 +1,36 @@
+import { Building2, Mail, MapPin, Phone, Printer } from "lucide-react";
+import { SEAHAVEN_HEADER } from "@/domain/work-orders/utils/completion-doc-html";
+import { CompDocCoLine } from "./comp-doc-co-line";
+
+export function CompDocPreviewCompanyHeader() {
+  return (
+    <>
+      <div
+        className="flex flex-wrap items-start justify-between gap-y-3"
+        style={{ padding: "20px 0 12px" }}
+      >
+        <div className="flex items-center">
+          <img
+            src="/seahaven-logo.svg"
+            alt="Seahaven Industries"
+            style={{ height: 34, width: "auto", display: "block" }}
+          />
+        </div>
+        <div className="space-y-1">
+          <CompDocCoLine icon={Building2} text={SEAHAVEN_HEADER.name} bold />
+          <CompDocCoLine icon={MapPin} text={SEAHAVEN_HEADER.address} />
+          <CompDocCoLine icon={Phone} text={SEAHAVEN_HEADER.phone} />
+          <CompDocCoLine icon={Printer} text={SEAHAVEN_HEADER.fax} />
+          <CompDocCoLine icon={Mail} text={SEAHAVEN_HEADER.email} />
+        </div>
+      </div>
+      <div
+        style={{
+          height: 3,
+          borderRadius: 2,
+          background: "linear-gradient(90deg,#27AAE1,#1C75BC)",
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-document.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-document.tsx
new file mode 100644
index 00000000..3e7cbfe6
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-document.tsx
@@ -0,0 +1,58 @@
+import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { CompDocPreviewCompanyHeader } from "./comp-doc-preview-company-header";
+import { CompDocPreviewProcedureNotes } from "./comp-doc-preview-procedure-notes";
+import { CompDocPreviewServiceInfo } from "./comp-doc-preview-service-info";
+import { CompDocPreviewVendorSafety } from "./comp-doc-preview-vendor-safety";
+
+type CompDocPreviewDocumentProps = {
+  row: WorkOrderTableRow;
+  site: CompDocSiteInfo;
+  notes: string;
+  generatedAt: string;
+  isGenerated: boolean;
+  isNotRequired: boolean;
+};
+
+export function CompDocPreviewDocument({
+  row,
+  site,
+  notes,
+  generatedAt,
+  isGenerated,
+  isNotRequired,
+}: CompDocPreviewDocumentProps) {
+  return (
+    <div
+      style={{
+        opacity: isNotRequired ? 0.5 : 1,
+        filter: isNotRequired ? "grayscale(0.4)" : "none",
+      }}
+    >
+      <div
+        style={{
+          height: 12,
+          background: "linear-gradient(100deg,#27AAE1,#1C75BC)",
+        }}
+      />
+      <div style={{ padding: "0 28px 28px" }}>
+        <CompDocPreviewCompanyHeader />
+        <CompDocPreviewServiceInfo
+          row={row}
+          site={site}
+          isGenerated={isGenerated}
+          generatedAt={generatedAt}
+        />
+        <CompDocPreviewVendorSafety site={site} />
+        <CompDocPreviewProcedureNotes pm={row.pm} notes={notes} />
+      </div>
+      <div
+        style={{
+          height: 24,
+          background: "linear-gradient(100deg,#1C75BC,#27AAE1)",
+          clipPath: "polygon(0 45%,100% 0,100% 100%,0 100%)",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-header.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-header.tsx
new file mode 100644
index 00000000..3fdeb30a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-header.tsx
@@ -0,0 +1,36 @@
+import { Building2, Mail, MapPin, Phone, Printer } from "lucide-react";
+import { SEAHAVEN_HEADER } from "@/domain/work-orders/utils/completion-doc-html";
+import { CompDocCoLine } from "./comp-doc-co-line";
+
+export function CompDocPreviewHeader() {
+  return (
+    <>
+      <div
+        className="flex flex-wrap items-start justify-between gap-y-3"
+        style={{ padding: "20px 0 12px" }}
+      >
+        <div className="flex items-center">
+          <img
+            src="/seahaven-logo.svg"
+            alt="Seahaven Industries"
+            style={{ height: 34, width: "auto", display: "block" }}
+          />
+        </div>
+        <div className="space-y-1">
+          <CompDocCoLine icon={Building2} text={SEAHAVEN_HEADER.name} bold />
+          <CompDocCoLine icon={MapPin} text={SEAHAVEN_HEADER.address} />
+          <CompDocCoLine icon={Phone} text={SEAHAVEN_HEADER.phone} />
+          <CompDocCoLine icon={Printer} text={SEAHAVEN_HEADER.fax} />
+          <CompDocCoLine icon={Mail} text={SEAHAVEN_HEADER.email} />
+        </div>
+      </div>
+      <div
+        style={{
+          height: 3,
+          borderRadius: 2,
+          background: "linear-gradient(90deg,#27AAE1,#1C75BC)",
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-not-required-stamp.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-not-required-stamp.tsx
new file mode 100644
index 00000000..c3ed0ec2
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-not-required-stamp.tsx
@@ -0,0 +1,25 @@
+import { Ban } from "lucide-react";
+
+export function CompDocPreviewNotRequiredStamp() {
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-start justify-center">
+      <div
+        className="inline-flex items-center gap-2"
+        style={{
+          marginTop: "30%",
+          transform: "rotate(-15deg)",
+          border: "3px solid var(--warning)",
+          color: "var(--warning)",
+          borderRadius: 8,
+          padding: "8px 18px",
+          fontWeight: 800,
+          fontSize: 22,
+          letterSpacing: "0.06em",
+          background: "rgba(255,255,255,0.65)",
+        }}
+      >
+        <Ban size={20} /> NOT REQUIRED
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-procedure-notes.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-procedure-notes.tsx
new file mode 100644
index 00000000..e0c13e1a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-procedure-notes.tsx
@@ -0,0 +1,68 @@
+import { Text } from "@/components/ui/text";
+import { procedureFor } from "@/domain/work-orders/utils/completion-doc-procedures";
+import { CompDocProcedureList } from "./comp-doc-procedure-list";
+
+type CompDocPreviewProcedureNotesProps = {
+  pm: string;
+  notes: string;
+};
+
+export function CompDocPreviewProcedureNotes({ pm, notes }: CompDocPreviewProcedureNotesProps) {
+  const proc = procedureFor(pm);
+
+  return (
+    <>
+      <Text
+        as="h3"
+        style={{
+          fontSize: 13,
+          fontWeight: 700,
+          color: "#161E38",
+          margin: "16px 0 4px",
+        }}
+      >
+        {proc.heading}
+      </Text>
+      <Text
+        as="p"
+        style={{
+          fontSize: 12.5,
+          lineHeight: 1.5,
+          color: "#58595B",
+          margin: "0 0 8px",
+        }}
+      >
+        {proc.intro}
+      </Text>
+      <CompDocProcedureList proc={proc} />
+
+      {Boolean(notes) && (
+        <>
+          <Text
+            as="h3"
+            style={{
+              fontSize: 13,
+              fontWeight: 700,
+              color: "#161E38",
+              margin: "16px 0 4px",
+            }}
+          >
+            PM Comments
+          </Text>
+          <Text
+            as="p"
+            style={{
+              fontSize: 12.5,
+              lineHeight: 1.5,
+              color: "#161E38",
+              margin: 0,
+              whiteSpace: "pre-wrap",
+            }}
+          >
+            {notes}
+          </Text>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-procedure.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-procedure.tsx
new file mode 100644
index 00000000..871468fc
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-procedure.tsx
@@ -0,0 +1,87 @@
+import { Text } from "@/components/ui/text";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { procedureFor, SAFETY_BULLETS } from "@/domain/work-orders/utils/completion-doc-procedures";
+import { CompDocProcedureList } from "./comp-doc-procedure-list";
+
+type CompDocPreviewProcedureProps = {
+  row: WorkOrderTableRow;
+  notes: string;
+};
+
+export function CompDocPreviewProcedure({ row, notes }: CompDocPreviewProcedureProps) {
+  const proc = procedureFor(row.pm);
+
+  return (
+    <>
+      <ul style={{ listStyle: "disc", paddingLeft: 18, margin: "8px 0 0" }}>
+        {SAFETY_BULLETS.map((b, i) => (
+          <li
+            key={i}
+            style={{
+              fontSize: 12.5,
+              lineHeight: 1.5,
+              margin: "5px 0",
+              color: "#161E38",
+            }}
+          >
+            {b}
+          </li>
+        ))}
+      </ul>
+
+      <Text
+        as="h3"
+        variant="heading"
+        sx={{
+          fontSize: 13,
+          fontWeight: 700,
+          color: "#161E38",
+          margin: "16px 0 4px",
+        }}
+      >
+        {proc.heading}
+      </Text>
+      <Text
+        variant="body"
+        sx={{
+          fontSize: 12.5,
+          lineHeight: 1.5,
+          color: "#58595B",
+          margin: "0 0 8px",
+        }}
+      >
+        {proc.intro}
+      </Text>
+      <CompDocProcedureList proc={proc} />
+
+      {notes.length > 0 && (
+        <>
+          <Text
+            as="h3"
+            variant="heading"
+            sx={{
+              fontSize: 13,
+              fontWeight: 700,
+              color: "#161E38",
+              margin: "16px 0 4px",
+            }}
+          >
+            PM Comments
+          </Text>
+          <Text
+            variant="body"
+            sx={{
+              fontSize: 12.5,
+              lineHeight: 1.5,
+              color: "#161E38",
+              margin: 0,
+              whiteSpace: "pre-wrap",
+            }}
+          >
+            {notes}
+          </Text>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-service-info.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-service-info.tsx
new file mode 100644
index 00000000..34aad1a3
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-service-info.tsx
@@ -0,0 +1,89 @@
+import { CheckCircle2 } from "lucide-react";
+import { Text } from "@/components/ui/text";
+import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { serviceTitle } from "@/domain/work-orders/utils/completion-doc-service-title";
+
+type CompDocPreviewServiceInfoProps = {
+  row: WorkOrderTableRow;
+  site: CompDocSiteInfo;
+  isGenerated: boolean;
+  generatedAt: string;
+};
+
+export function CompDocPreviewServiceInfo({
+  row,
+  site,
+  isGenerated,
+  generatedAt,
+}: CompDocPreviewServiceInfoProps) {
+  return (
+    <>
+      {isGenerated && (
+        <div
+          className="inline-flex items-center gap-1.5"
+          style={{
+            marginTop: 16,
+            padding: "4px 10px",
+            borderRadius: 9999,
+            background: "var(--doc-yes-bg)",
+            color: "var(--color-success)",
+            fontSize: 11.5,
+            fontWeight: 600,
+          }}
+        >
+          <CheckCircle2 size={13} /> Generated · {generatedAt} · v1
+        </div>
+      )}
+
+      <Text
+        as="h2"
+        style={{
+          fontFamily: "var(--font-sans)",
+          fontSize: 13,
+          fontWeight: 700,
+          letterSpacing: "0.02em",
+          color: "#161E38",
+          margin: "16px 0 4px",
+        }}
+      >
+        {serviceTitle(row).toUpperCase()}
+      </Text>
+      <Text
+        as="p"
+        className="font-mono"
+        style={{
+          fontSize: 12.5,
+          fontWeight: 600,
+          color: "#1C75BC",
+          margin: "2px 0",
+        }}
+      >
+        WO# {row.woNumber}
+      </Text>
+
+      <div style={{ marginTop: 14 }}>
+        <Text
+          as="p"
+          style={{
+            fontSize: 13,
+            fontWeight: 600,
+            color: "#161E38",
+            margin: "2px 0",
+          }}
+        >
+          Site ID — {site.code}
+        </Text>
+        <Text as="p" style={{ fontSize: 13, color: "#161E38", margin: "2px 0" }}>
+          Amazon.com Services LLC {site.code}
+        </Text>
+        <Text as="p" style={{ fontSize: 13, color: "#58595B", margin: "2px 0" }}>
+          {site.street},
+        </Text>
+        <Text as="p" style={{ fontSize: 13, color: "#58595B", margin: "2px 0" }}>
+          {site.label}
+        </Text>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-status-badge.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-status-badge.tsx
new file mode 100644
index 00000000..5cf12ae6
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-status-badge.tsx
@@ -0,0 +1,32 @@
+import { CheckCircle2, FileText } from "lucide-react";
+
+type CompDocPreviewStatusBadgeProps = {
+  isGenerated: boolean;
+};
+
+export function CompDocPreviewStatusBadge({ isGenerated }: CompDocPreviewStatusBadgeProps) {
+  return (
+    <div className="flex shrink-0 items-center justify-center" style={{ padding: "12px 0" }}>
+      <span
+        className="inline-flex items-center gap-1.5"
+        style={{
+          height: 28,
+          padding: "0 12px",
+          borderRadius: 9999,
+          background: "var(--color-bg-surface)",
+          border: "1px solid var(--color-border)",
+          fontSize: 12,
+          fontWeight: 500,
+          color: "var(--muted-foreground)",
+        }}
+      >
+        {isGenerated ? (
+          <CheckCircle2 size={13} style={{ color: "var(--color-success)" }} />
+        ) : (
+          <FileText size={13} />
+        )}
+        {isGenerated ? "Generated document" : "Preview — not yet generated"}
+      </span>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-summary.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-summary.tsx
new file mode 100644
index 00000000..e07e3726
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-summary.tsx
@@ -0,0 +1,96 @@
+import { CheckCircle2 } from "lucide-react";
+import { Text } from "@/components/ui/text";
+import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { serviceTitle } from "@/domain/work-orders/utils/completion-doc-service-title";
+
+type CompDocPreviewSummaryProps = {
+  row: WorkOrderTableRow;
+  site: CompDocSiteInfo;
+  generatedAt: string;
+  isGenerated: boolean;
+};
+
+export function CompDocPreviewSummary({
+  row,
+  site,
+  generatedAt,
+  isGenerated,
+}: CompDocPreviewSummaryProps) {
+  return (
+    <>
+      {isGenerated && (
+        <div
+          className="inline-flex items-center gap-1.5"
+          style={{
+            marginTop: 16,
+            padding: "4px 10px",
+            borderRadius: 9999,
+            background: "var(--doc-yes-bg)",
+            color: "var(--color-success)",
+            fontSize: 11.5,
+            fontWeight: 600,
+          }}
+        >
+          <CheckCircle2 size={13} /> Generated · {generatedAt} · v1
+        </div>
+      )}
+
+      <Text
+        as="h2"
+        variant="heading"
+        sx={{
+          fontFamily: "var(--font-sans)",
+          fontSize: 13,
+          fontWeight: 700,
+          letterSpacing: "0.02em",
+          color: "#161E38",
+          margin: "16px 0 4px",
+        }}
+      >
+        {serviceTitle(row).toUpperCase()}
+      </Text>
+      <Text
+        family="mono"
+        variant="body"
+        sx={{
+          fontSize: 12.5,
+          fontWeight: 600,
+          color: "#1C75BC",
+          margin: "2px 0",
+        }}
+      >
+        WO# {row.woNumber}
+      </Text>
+
+      <div style={{ marginTop: 14 }}>
+        <Text
+          variant="body"
+          sx={{
+            fontSize: 13,
+            fontWeight: 600,
+            color: "#161E38",
+            margin: "2px 0",
+          }}
+        >
+          Site ID — {site.code}
+        </Text>
+        <Text variant="body" sx={{ fontSize: 13, color: "#161E38", margin: "2px 0" }}>
+          Amazon.com Services LLC {site.code}
+        </Text>
+        <Text variant="body" sx={{ fontSize: 13, color: "#58595B", margin: "2px 0" }}>
+          {site.street},
+        </Text>
+        <Text variant="body" sx={{ fontSize: 13, color: "#58595B", margin: "2px 0" }}>
+          {site.label}
+        </Text>
+      </div>
+
+      <Text variant="body" sx={{ fontSize: 13, color: "#161E38", margin: "14px 0 6px" }}>
+        <span style={{ fontWeight: 700 }}>Vendor / Technician:&nbsp;</span>
+        {site.tech || "—"}
+        {site.company ? ` · ${site.company}` : ""}
+      </Text>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-vendor-safety.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-vendor-safety.tsx
new file mode 100644
index 00000000..dec94e83
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview-vendor-safety.tsx
@@ -0,0 +1,35 @@
+import { Text } from "@/components/ui/text";
+import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
+import { SAFETY_BULLETS } from "@/domain/work-orders/utils/completion-doc-procedures";
+
+type CompDocPreviewVendorSafetyProps = {
+  site: CompDocSiteInfo;
+};
+
+export function CompDocPreviewVendorSafety({ site }: CompDocPreviewVendorSafetyProps) {
+  return (
+    <>
+      <Text as="p" style={{ fontSize: 13, color: "#161E38", margin: "14px 0 6px" }}>
+        <span style={{ fontWeight: 700 }}>Vendor / Technician:&nbsp;</span>
+        {site.tech || "—"}
+        {site.company ? ` · ${site.company}` : ""}
+      </Text>
+
+      <ul style={{ listStyle: "disc", paddingLeft: 18, margin: "8px 0 0" }}>
+        {SAFETY_BULLETS.map((b, i) => (
+          <li
+            key={i}
+            style={{
+              fontSize: 12.5,
+              lineHeight: 1.5,
+              margin: "5px 0",
+              color: "#161E38",
+            }}
+          >
+            {b}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview.tsx
new file mode 100644
index 00000000..64e167bc
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-preview.tsx
@@ -0,0 +1,89 @@
+import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { CompDocNotRequiredStamp } from "./comp-doc-not-required-stamp";
+import { CompDocPreviewBadge } from "./comp-doc-preview-badge";
+import { CompDocPreviewHeader } from "./comp-doc-preview-header";
+import { CompDocPreviewProcedure } from "./comp-doc-preview-procedure";
+import { CompDocPreviewSummary } from "./comp-doc-preview-summary";
+
+type CompDocPreviewProps = {
+  row: WorkOrderTableRow;
+  site: CompDocSiteInfo;
+  notes: string;
+  generatedAt: string;
+  isGenerated: boolean;
+  isNotRequired: boolean;
+};
+
+export function CompDocPreview({
+  row,
+  site,
+  notes,
+  generatedAt,
+  isGenerated,
+  isNotRequired,
+}: CompDocPreviewProps) {
+  return (
+    <div
+      className="flex min-h-0 flex-col"
+      style={{
+        width: "58%",
+        borderRight: "1px solid var(--color-border)",
+        background: "var(--color-bg-muted)",
+      }}
+    >
+      <CompDocPreviewBadge isGenerated={isGenerated} />
+
+      <div
+        className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto"
+        style={{ padding: "0 20px 20px" }}
+      >
+        <div
+          className="relative break-words"
+          style={{
+            background: "#ffffff",
+            borderRadius: 8,
+            boxShadow: "0 1px 3px rgba(0,0,0,.08), 0 12px 32px -16px rgba(0,0,0,.25)",
+            overflow: "hidden",
+            fontFamily: "var(--font-sans)",
+            overflowWrap: "break-word",
+            wordBreak: "break-word",
+          }}
+        >
+          <div
+            style={{
+              opacity: isNotRequired ? 0.5 : 1,
+              filter: isNotRequired ? "grayscale(0.4)" : "none",
+            }}
+          >
+            <div
+              style={{
+                height: 12,
+                background: "linear-gradient(100deg,#27AAE1,#1C75BC)",
+              }}
+            />
+            <div style={{ padding: "0 28px 28px" }}>
+              <CompDocPreviewHeader />
+              <CompDocPreviewSummary
+                row={row}
+                site={site}
+                generatedAt={generatedAt}
+                isGenerated={isGenerated}
+              />
+              <CompDocPreviewProcedure row={row} notes={notes} />
+            </div>
+            <div
+              style={{
+                height: 24,
+                background: "linear-gradient(100deg,#1C75BC,#27AAE1)",
+                clipPath: "polygon(0 45%,100% 0,100% 100%,0 100%)",
+              }}
+            />
+          </div>
+
+          {isNotRequired && <CompDocNotRequiredStamp />}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-procedure-list.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-procedure-list.tsx
new file mode 100644
index 00000000..a16fbbbe
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-procedure-list.tsx
@@ -0,0 +1,35 @@
+import type { Procedure } from "@/domain/work-orders/utils/completion-doc-procedures";
+
+type CompDocProcedureListProps = {
+  proc: Procedure;
+};
+
+export function CompDocProcedureList({ proc }: CompDocProcedureListProps) {
+  return (
+    <ol style={{ listStyle: "decimal", paddingLeft: 22, margin: 0 }}>
+      {proc.steps.map((st, i) => {
+        const subSteps = st.sub ?? [];
+        return (
+          <li key={i} style={{ margin: "6px 0", fontSize: 13, lineHeight: 1.5 }}>
+            {st.text}
+            {subSteps.length > 0 && (
+              <ol
+                style={{
+                  listStyle: "lower-alpha",
+                  paddingLeft: 22,
+                  margin: "4px 0 0",
+                }}
+              >
+                {subSteps.map((x, j) => (
+                  <li key={j} style={{ margin: "2px 0" }}>
+                    {x}
+                  </li>
+                ))}
+              </ol>
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-sidebar.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-sidebar.tsx
new file mode 100644
index 00000000..a48499c4
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-sidebar.tsx
@@ -0,0 +1,60 @@
+import type { CompDocSiteInfo, DocState } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { CompDocDetailsSection } from "./comp-doc-details-section";
+import { CompDocNotesField } from "./comp-doc-notes-field";
+import { CompDocStatusCard } from "./comp-doc-status-card";
+
+type CompDocSidebarProps = {
+  row: WorkOrderTableRow;
+  site: CompDocSiteInfo;
+  docState: DocState;
+  generatedAt: string;
+  notes: string;
+  editAddress: string;
+  onAddressChange: (value: string) => void;
+  editDateCompleted: string;
+  amazonRep: string;
+  seaRep: string;
+  isGenerated: boolean;
+  onNotesChange: (value: string) => void;
+  onDateCompletedChange: (value: string) => void;
+};
+
+export function CompDocSidebar({
+  row,
+  site,
+  docState,
+  generatedAt,
+  notes,
+  editAddress,
+  onAddressChange,
+  editDateCompleted,
+  amazonRep,
+  seaRep,
+  isGenerated,
+  onNotesChange,
+  onDateCompletedChange,
+}: CompDocSidebarProps) {
+  return (
+    <div
+      className="flex min-h-0 flex-col"
+      style={{ width: "42%", background: "var(--color-bg-surface)" }}
+    >
+      <div className="min-h-0 flex-1 overflow-y-auto" style={{ padding: 20 }}>
+        <CompDocStatusCard docState={docState} generatedAt={generatedAt} />
+        <CompDocDetailsSection
+          row={row}
+          site={site}
+          editAddress={editAddress}
+          onAddressChange={onAddressChange}
+          editDateCompleted={editDateCompleted}
+          onDateCompletedChange={onDateCompletedChange}
+          amazonRep={amazonRep}
+          seaRep={seaRep}
+          isGenerated={isGenerated}
+        />
+        <CompDocNotesField notes={notes} onNotesChange={onNotesChange} isGenerated={isGenerated} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/comp-doc-status-card.tsx b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-status-card.tsx
new file mode 100644
index 00000000..b2aaf7d7
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/comp-doc-status-card.tsx
@@ -0,0 +1,61 @@
+import type { DocState } from "@/domain/work-orders/types/completion-doc";
+import {
+  DOC_STATE_CFG,
+  docStatusCardDescription,
+} from "@/domain/work-orders/utils/completion-doc-state";
+
+type CompDocStatusCardProps = {
+  docState: DocState;
+  generatedAt: string;
+};
+
+export function CompDocStatusCard({ docState, generatedAt }: CompDocStatusCardProps) {
+  const cfg = DOC_STATE_CFG[docState];
+  const StateIcon = cfg.icon;
+
+  return (
+    <div
+      className="flex items-start gap-3"
+      style={{
+        padding: 14,
+        borderRadius: 10,
+        background: cfg.cardBg,
+        border: `1px solid ${cfg.cardBorder}`,
+      }}
+    >
+      <div
+        className="flex shrink-0 items-center justify-center"
+        style={{
+          width: 34,
+          height: 34,
+          borderRadius: 8,
+          background: cfg.cardIconBg,
+          border: `1px solid ${cfg.cardBorder}`,
+        }}
+      >
+        <StateIcon size={17} style={{ color: cfg.iconColor }} />
+      </div>
+      <div className="min-w-0">
+        <div
+          style={{
+            fontSize: 13.5,
+            fontWeight: 600,
+            color: "var(--color-text-primary)",
+          }}
+        >
+          {cfg.cardTitle}
+        </div>
+        <div
+          style={{
+            fontSize: 12.5,
+            lineHeight: 1.45,
+            color: "var(--muted-foreground)",
+            marginTop: 3,
+          }}
+        >
+          {docStatusCardDescription(docState, generatedAt)}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog-seed.ts b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog-seed.ts
new file mode 100644
index 00000000..d189971f
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog-seed.ts
@@ -0,0 +1,59 @@
+import { useEffect, useRef, type Dispatch, type SetStateAction } from "react";
+import type { CompDocData, DocState } from "@/domain/work-orders/types/completion-doc";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+import { docStateOf } from "@/domain/work-orders/utils/completion-doc-state";
+
+type UseCompDocDialogSeedArgs = {
+  open: boolean;
+  infoId: string | number;
+  infoDocStatus: CompletionDocStatus;
+  infoCompletedDate?: string | null;
+  completionDocStatus?: CompletionDocStatus | null;
+  data?: CompDocData;
+  setNotes: Dispatch<SetStateAction<string>>;
+  setDocState: Dispatch<SetStateAction<DocState>>;
+  setGeneratedAt: Dispatch<SetStateAction<string>>;
+  setEditDateCompleted: Dispatch<SetStateAction<string>>;
+};
+
+/** Prototype seeds once per open/WO session; detail refetches must not wipe edits. */
+export function useCompDocDialogSeed({
+  open,
+  infoId,
+  infoDocStatus,
+  infoCompletedDate,
+  completionDocStatus,
+  data,
+  setNotes,
+  setDocState,
+  setGeneratedAt,
+  setEditDateCompleted,
+}: UseCompDocDialogSeedArgs) {
+  const seedKeyRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      seedKeyRef.current = null;
+      return;
+    }
+    const key = String(infoId);
+    if (seedKeyRef.current === key) return;
+    seedKeyRef.current = key;
+    setNotes(data?.notes ?? "");
+    setDocState(docStateOf(completionDocStatus || infoDocStatus));
+    setGeneratedAt(data?.generatedAt ?? "");
+    setEditDateCompleted(infoCompletedDate || "");
+  }, [
+    open,
+    infoId,
+    infoDocStatus,
+    infoCompletedDate,
+    completionDocStatus,
+    data?.notes,
+    data?.generatedAt,
+    setNotes,
+    setDocState,
+    setGeneratedAt,
+    setEditDateCompleted,
+  ]);
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog.tsx b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog.tsx
new file mode 100644
index 00000000..b11f6464
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-dialog.tsx
@@ -0,0 +1,190 @@
+import { useMemo, useRef, useState } from "react";
+import { toast } from "react-toastify";
+import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
+import type {
+  CompDocData,
+  CompDocSaveStatus,
+  DocFields,
+  DocState,
+} from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { useWorkOrderBoardDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useUploadCompletionDoc } from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { resolveCompDocSite } from "@/domain/work-orders/utils/completion-doc-site";
+import { DOC_STATE_CFG } from "@/domain/work-orders/utils/completion-doc-state";
+import {
+  effectiveCompany,
+  effectivePoc,
+  effectiveSite,
+} from "@/domain/work-orders/utils/effective-completion-snapshot";
+import { isWorkOrderDocumentsReadOnly } from "@/domain/work-orders/utils/work-order-media-limits";
+import { useCompDocDialogSeed } from "./use-comp-doc-dialog-seed";
+import { useCompDocNotRequiredActions } from "./use-comp-doc-not-required-actions";
+import { useCompDocPdfActions } from "./use-comp-doc-pdf-actions";
+import { useCompDocPersistFlow } from "./use-comp-doc-persist-flow";
+
+type UseCompDocDialogArgs = {
+  row: WorkOrderTableRow;
+  open: boolean;
+  data?: CompDocData;
+  onSave: (data: CompDocData, status: CompDocSaveStatus) => void | Promise<void>;
+  onDateCompletedChange?: (date: string) => void | Promise<void>;
+};
+
+function notifyDraftSaved() {
+  toast(
+    <div
+      className="flex items-center gap-2"
+      style={{
+        background: "var(--foreground)",
+        color: "#fff",
+        padding: "10px 18px",
+        borderRadius: 9999,
+        fontSize: 13,
+        fontWeight: 600,
+        boxShadow: "0 10px 30px -10px rgba(0,0,0,.45)",
+      }}
+    >
+      Draft saved
+    </div>,
+    {
+      position: "bottom-center",
+      autoClose: 3000,
+      hideProgressBar: true,
+      closeButton: false,
+      icon: false,
+      className: "!min-h-0 !bg-transparent !p-0 !shadow-none",
+    },
+  );
+}
+
+export function useCompDocDialog({
+  row,
+  open,
+  data,
+  onSave,
+  onDateCompletedChange,
+}: UseCompDocDialogArgs) {
+  const locId = String(row.locationId || "");
+  const { data: locationDetail } = useLocationDetail(
+    effectiveSite(row) != null ? undefined : locId || undefined,
+  );
+  const { data: boardDetail } = useWorkOrderBoardDetail(row.id, open);
+  const uploadCompletionMutation = useUploadCompletionDoc(row.id);
+  const pdfInputRef = useRef<HTMLInputElement>(null);
+  const [isFinalizing, setIsFinalizing] = useState(false);
+
+  const info = boardDetail?.info ?? row;
+  const completion = boardDetail?.completion;
+  const templateUrl = completion?.template?.templateUrl;
+  const signOffAttachment = completion?.signOffAttachment;
+  const rowVersion = info.rowVersion || row.rowVersion;
+  const isDocumentsReadOnly = isWorkOrderDocumentsReadOnly(info.status);
+  const site = useMemo(() => resolveCompDocSite(info, locationDetail), [info, locationDetail]);
+
+  const [notes, setNotes] = useState("");
+  const [docState, setDocState] = useState<DocState>("draft");
+  const [generatedAt, setGeneratedAt] = useState("");
+  const [editDateCompleted, setEditDateCompleted] = useState("");
+
+  useCompDocDialogSeed({
+    open,
+    infoId: info.id,
+    infoDocStatus: info.docStatus,
+    infoCompletedDate: info.completedDate,
+    completionDocStatus: completion?.docStatus,
+    data,
+    setNotes,
+    setDocState,
+    setGeneratedAt,
+    setEditDateCompleted,
+  });
+
+  const company = effectiveCompany(info);
+  const amazonRep = effectivePoc(info).contacts[0]?.name || "";
+  const seaRep = company.contactName || "";
+  const cfg = DOC_STATE_CFG[docState];
+  const isNotRequired = docState === "not-required";
+  const isGenerated = docState === "generated" || Boolean(signOffAttachment);
+
+  const docFields: DocFields = {
+    street: site.street,
+    city: site.city,
+    state: site.state,
+    zip: site.zip,
+    dateCompleted: editDateCompleted,
+    amazonRep,
+    seaRep,
+    siteCode: site.code,
+    tech: company.contactName || "",
+    company: company.name || "",
+  };
+
+  const { persist, syncDateIfChanged, refreshAuthoritativeState, handleSaveDraft, handleGenerate } =
+    useCompDocPersistFlow({
+      workOrderId: row.id,
+      notes,
+      generatedAt,
+      editDateCompleted,
+      currentCompletedDate: info.completedDate || "",
+      onSave,
+      onDateCompletedChange,
+      onGenerated: (ts) => {
+        setGeneratedAt(ts);
+        setDocState("generated");
+      },
+      onDraftSaved: notifyDraftSaved,
+    });
+
+  const { handleMarkNotRequired, handleUndo } = useCompDocNotRequiredActions({
+    docState,
+    setDocState,
+    persist,
+    refreshAuthoritativeState,
+    setIsFinalizing,
+  });
+
+  const { handleDownloadPdf, handleUploadPdf } = useCompDocPdfActions({
+    info,
+    signOffAttachment,
+    rowVersion,
+    notes,
+    generatedAt,
+    docFields,
+    uploadCompletionMutation,
+    persist,
+    syncDateIfChanged,
+    setGeneratedAt,
+    markGenerated: () => setDocState("generated"),
+    onPersistFailure: refreshAuthoritativeState,
+    onFinalizingChange: setIsFinalizing,
+  });
+
+  return {
+    info,
+    templateUrl,
+    signOffAttachment,
+    rowVersion,
+    isDocumentsReadOnly,
+    site,
+    notes,
+    setNotes,
+    docState,
+    generatedAt,
+    editDateCompleted,
+    setEditDateCompleted,
+    amazonRep,
+    seaRep,
+    cfg,
+    isNotRequired,
+    isGenerated,
+    isUploading: uploadCompletionMutation.isPending || isFinalizing,
+    pdfInputRef,
+    handleMarkNotRequired,
+    handleUndo,
+    handleSaveDraft,
+    handleGenerate,
+    handleDownloadPdf,
+    handleUploadPdf,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-not-required-actions.ts b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-not-required-actions.ts
new file mode 100644
index 00000000..4159b926
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-not-required-actions.ts
@@ -0,0 +1,58 @@
+import { toast } from "react-toastify";
+import type {
+  CompDocData,
+  CompDocSaveStatus,
+  DocState,
+} from "@/domain/work-orders/types/completion-doc";
+
+type PersistFn = (data: Partial<CompDocData>, status: CompDocSaveStatus) => void | Promise<void>;
+
+type UseCompDocNotRequiredActionsArgs = {
+  docState: DocState;
+  setDocState: (state: DocState) => void;
+  persist: PersistFn;
+  refreshAuthoritativeState: () => void;
+  setIsFinalizing: (value: boolean) => void;
+};
+
+export function useCompDocNotRequiredActions({
+  docState,
+  setDocState,
+  persist,
+  refreshAuthoritativeState,
+  setIsFinalizing,
+}: UseCompDocNotRequiredActionsArgs) {
+  async function handleMarkNotRequired() {
+    const previous = docState;
+    setDocState("not-required");
+    setIsFinalizing(true);
+    try {
+      await persist({}, "NN");
+    } catch (error) {
+      setDocState(previous);
+      refreshAuthoritativeState();
+      toast.error(
+        error instanceof Error ? error.message : "Failed to mark document as not required",
+      );
+    } finally {
+      setIsFinalizing(false);
+    }
+  }
+
+  async function handleUndo() {
+    const previous = docState;
+    setDocState("draft");
+    setIsFinalizing(true);
+    try {
+      await persist({}, "No");
+    } catch (error) {
+      setDocState(previous);
+      refreshAuthoritativeState();
+      toast.error(error instanceof Error ? error.message : "Failed to undo not-required");
+    } finally {
+      setIsFinalizing(false);
+    }
+  }
+
+  return { handleMarkNotRequired, handleUndo };
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-pdf-actions.ts b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-pdf-actions.ts
new file mode 100644
index 00000000..5d3b6475
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-pdf-actions.ts
@@ -0,0 +1,98 @@
+import { toast } from "react-toastify";
+import type {
+  CompDocData,
+  CompDocSaveStatus,
+  DocFields,
+} from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { useUploadCompletionDoc } from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { buildDocHtml, printDoc } from "@/domain/work-orders/utils/completion-doc-html";
+import { fmtDocNow } from "@/domain/work-orders/utils/completion-doc-state";
+import {
+  formatMediaSizeLimit,
+  isWorkOrderFileTooLarge,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+
+type UseCompDocPdfActionsArgs = {
+  info: WorkOrderTableRow;
+  signOffAttachment?: string | null;
+  rowVersion?: string;
+  notes: string;
+  generatedAt: string;
+  docFields: DocFields;
+  uploadCompletionMutation: ReturnType<typeof useUploadCompletionDoc>;
+  persist: (extra: Partial<CompDocData>, status: CompDocSaveStatus) => Promise<void>;
+  syncDateIfChanged: () => Promise<void>;
+  setGeneratedAt: (value: string) => void;
+  markGenerated: () => void;
+  onPersistFailure?: () => void;
+  onFinalizingChange?: (finalizing: boolean) => void;
+};
+
+export function useCompDocPdfActions({
+  info,
+  signOffAttachment,
+  rowVersion,
+  notes,
+  generatedAt,
+  docFields,
+  uploadCompletionMutation,
+  persist,
+  syncDateIfChanged,
+  setGeneratedAt,
+  markGenerated,
+  onPersistFailure,
+  onFinalizingChange,
+}: UseCompDocPdfActionsArgs) {
+  function handleDownloadPdf() {
+    if (signOffAttachment) {
+      window.open(signOffAttachment, "_blank", "noopener,noreferrer");
+      return;
+    }
+    printDoc(buildDocHtml(info, { notes, generatedAt }, docFields));
+  }
+
+  function handleUploadPdf(files: FileList | null) {
+    const file = files?.[0];
+    if (!file) return;
+    if (isWorkOrderFileTooLarge(file)) {
+      toast.error(`File exceeds the ${formatMediaSizeLimit()} limit.`);
+      return;
+    }
+    if (file.type !== "application/pdf" && !file.name.toLowerCase().endsWith(".pdf")) {
+      toast.error("Please upload a PDF file.");
+      return;
+    }
+    if (!rowVersion) {
+      toast.error("Missing work order version. Refresh and try again.");
+      return;
+    }
+    uploadCompletionMutation.mutate(
+      { file, workOrderVersion: rowVersion },
+      {
+        onSuccess: () => {
+          // Keep close disabled across the gap between upload settle and docStatus persist.
+          onFinalizingChange?.(true);
+          void (async () => {
+            const ts = fmtDocNow();
+            try {
+              await syncDateIfChanged();
+              await persist({ generatedAt: ts }, "Yes");
+              setGeneratedAt(ts);
+              markGenerated();
+            } catch (error) {
+              onPersistFailure?.();
+              toast.error(
+                error instanceof Error ? error.message : "Failed to finalize completion document",
+              );
+            } finally {
+              onFinalizingChange?.(false);
+            }
+          })();
+        },
+      },
+    );
+  }
+
+  return { handleDownloadPdf, handleUploadPdf };
+}
diff --git a/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-persist-flow.ts b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-persist-flow.ts
new file mode 100644
index 00000000..57a89c17
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/comp-doc/use-comp-doc-persist-flow.ts
@@ -0,0 +1,84 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import type { CompDocData, CompDocSaveStatus } from "@/domain/work-orders/types/completion-doc";
+import { fmtDocNow } from "@/domain/work-orders/utils/completion-doc-state";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+type UseCompDocPersistFlowArgs = {
+  workOrderId: string | number;
+  notes: string;
+  generatedAt: string;
+  editDateCompleted: string;
+  currentCompletedDate: string;
+  onSave: (data: CompDocData, status: CompDocSaveStatus) => void | Promise<void>;
+  onDateCompletedChange?: (date: string) => void | Promise<void>;
+  onGenerated: (generatedAt: string) => void;
+  onDraftSaved: () => void;
+};
+
+export function useCompDocPersistFlow({
+  workOrderId,
+  notes,
+  generatedAt,
+  editDateCompleted,
+  currentCompletedDate,
+  onSave,
+  onDateCompletedChange,
+  onGenerated,
+  onDraftSaved,
+}: UseCompDocPersistFlowArgs) {
+  const queryClient = useQueryClient();
+
+  const refreshAuthoritativeState = () => {
+    void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+    void queryClient.invalidateQueries({
+      queryKey: queryKeys.workOrders.boardDetail(workOrderId),
+    });
+    void queryClient.invalidateQueries({
+      queryKey: queryKeys.workOrders.detail(workOrderId),
+    });
+  };
+
+  const persist = async (extra: Partial<CompDocData>, status: CompDocSaveStatus) => {
+    await onSave({ notes, generatedAt, ...extra }, status);
+  };
+
+  const syncDateIfChanged = async () => {
+    if (editDateCompleted !== currentCompletedDate) {
+      await onDateCompletedChange?.(editDateCompleted);
+    }
+  };
+
+  async function handleSaveDraft() {
+    try {
+      // Prerequisites first; docStatus last.
+      await syncDateIfChanged();
+      await persist({}, "No");
+      onDraftSaved();
+    } catch (error) {
+      refreshAuthoritativeState();
+      toast.error(error instanceof Error ? error.message : "Failed to save draft");
+    }
+  }
+
+  async function handleGenerate() {
+    const ts = fmtDocNow();
+    try {
+      // Prerequisites first; only mark Generated after completedDate persists.
+      await syncDateIfChanged();
+      await persist({ generatedAt: ts }, "Yes");
+      onGenerated(ts);
+    } catch (error) {
+      refreshAuthoritativeState();
+      toast.error(error instanceof Error ? error.message : "Failed to generate document");
+    }
+  }
+
+  return {
+    persist,
+    syncDateIfChanged,
+    refreshAuthoritativeState,
+    handleSaveDraft,
+    handleGenerate,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/detail/audit-timeline.tsx b/src/app/(protected)/workorders/_components/detail/audit-timeline.tsx
new file mode 100644
index 00000000..2e646ab5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/audit-timeline.tsx
@@ -0,0 +1,67 @@
+import { useMemo } from "react";
+import { Box, Typography } from "@mui/material";
+import type { WorkOrderAuditEntry } from "@/domain/work-orders/types/work-order";
+import { formatDateTime } from "@/lib/time-utils";
+
+type AuditTimelineProps = {
+  entries: WorkOrderAuditEntry[];
+  emptyMessage?: string;
+  maxHeightClass?: string;
+};
+
+export function AuditTimeline({
+  entries,
+  emptyMessage = "No changes recorded.",
+  maxHeightClass = "max-h-72",
+}: AuditTimelineProps) {
+  const sorted = useMemo(
+    () =>
+      [...entries].sort(
+        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+      ),
+    [entries],
+  );
+
+  if (!sorted.length) {
+    return <Typography color="text.secondary">{emptyMessage}</Typography>;
+  }
+
+  return (
+    <Box className={`${maxHeightClass} space-y-3 overflow-y-auto`}>
+      {sorted.map((entry) => (
+        <Box key={String(entry.id)} className="rounded border border-border p-3">
+          <Box className="mb-1 flex justify-between gap-2">
+            <Typography variant="caption" className="font-semibold">
+              {entry.userName || "System"}
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              {entry.createdAt ? formatDateTime(entry.createdAt) : ""}
+            </Typography>
+          </Box>
+          <Typography variant="body2">
+            {entry.action ? (
+              entry.action
+            ) : (
+              <>
+                <strong>{entry.fieldName}</strong> {entry.oldValue} → {entry.newValue}
+              </>
+            )}
+          </Typography>
+          {Boolean(entry.action && entry.fieldName) && (
+            <Typography
+              variant="caption"
+              color="text.secondary"
+              className="mt-1"
+              sx={{ display: "block" }}
+            >
+              {entry.fieldName}
+              {entry.oldValue || entry.newValue
+                ? `: ${entry.oldValue || "—"} → ${entry.newValue || "—"}`
+                : ""}
+            </Typography>
+          )}
+        </Box>
+      ))}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/slide-over-audit-list.tsx b/src/app/(protected)/workorders/_components/detail/slide-over-audit-list.tsx
new file mode 100644
index 00000000..c64145c8
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/slide-over-audit-list.tsx
@@ -0,0 +1,135 @@
+import { Settings } from "lucide-react";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderAuditEntry, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import {
+  getAvatarColorFromName,
+  getDispatcherAvatarColor,
+  getInitialsFromName,
+} from "@/domain/work-orders/utils/dispatcher-avatar-color";
+import { formatAuditTimestamp } from "@/domain/work-orders/utils/format-audit-timestamp";
+import { formatBoardAuditAction } from "@/domain/work-orders/utils/format-board-audit-action";
+
+function isSystemEntry(entry: WorkOrderAuditEntry): boolean {
+  if (entry.type === "system") return true;
+  if (entry.type === "manual") return false;
+  const name = entry.userName?.trim();
+  return !name || name.toLowerCase() === "system";
+}
+
+type SlideOverAuditListProps = {
+  entries: WorkOrderAuditEntry[];
+  users?: WorkOrderUser[];
+};
+
+export function SlideOverAuditList({ entries, users = [] }: SlideOverAuditListProps) {
+  return (
+    <div>
+      <Text
+        as="p"
+        className="mb-3 text-[10px] font-medium uppercase"
+        style={{ letterSpacing: "0.06em", color: "var(--color-text-muted)" }}
+      >
+        Audit Log
+      </Text>
+      <div className="space-y-2.5">
+        {entries.length === 0 ? (
+          <Text
+            as="p"
+            className="py-4 text-center text-[12px]"
+            style={{ color: "var(--muted-foreground)" }}
+          >
+            No changes recorded
+          </Text>
+        ) : (
+          entries.map((entry, index) => {
+            const isSys = isSystemEntry(entry);
+            const dispatcher = users.find(
+              (user) =>
+                entry.dispatcherId != null && String(user.id) === String(entry.dispatcherId),
+            );
+            const name =
+              dispatcher?.name ||
+              entry.userName?.trim() ||
+              (entry.dispatcherId ? String(entry.dispatcherId) : "Unknown");
+            const color = dispatcher
+              ? getDispatcherAvatarColor(dispatcher)
+              : getAvatarColorFromName(name);
+            const initials = dispatcher
+              ? getInitialsFromName(dispatcher.name)
+              : getInitialsFromName(name);
+            const action = formatBoardAuditAction(entry);
+
+            return (
+              <div
+                key={String(entry.id) || index}
+                className="flex items-start gap-2.5"
+                style={
+                  isSys
+                    ? {
+                        background: "#F8FAFC",
+                        borderRadius: 6,
+                        padding: "10px",
+                      }
+                    : {
+                        background: "transparent",
+                        padding: "10px 0",
+                      }
+                }
+              >
+                {isSys ? (
+                  <div
+                    className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded"
+                    style={{ background: "#E2E8F0" }}
+                  >
+                    <Settings size={10} style={{ color: "#64748B" }} />
+                  </div>
+                ) : (
+                  <div
+                    className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[8px] font-bold"
+                    style={
+                      dispatcher || name !== "Unknown"
+                        ? { background: `${color}25`, color }
+                        : {
+                            background: "var(--color-bg-muted)",
+                            color: "var(--color-text-muted)",
+                          }
+                    }
+                  >
+                    {initials}
+                  </div>
+                )}
+                <div className="min-w-0 flex-1">
+                  {isSys ? (
+                    <Text as="p" className="text-[12px] leading-snug" style={{ color: "#374151" }}>
+                      <span style={{ fontStyle: "italic", color: "#6B7280" }}>System</span>
+                      <span style={{ color: "#6B7280" }}> — </span>
+                      {action}
+                    </Text>
+                  ) : (
+                    <Text as="p" className="text-[12px] leading-snug">
+                      <span className="font-semibold" style={{ color: "#1E293B" }}>
+                        {name}
+                      </span>
+                      <span style={{ color: "#D1D5DB" }}> · </span>
+                      <span style={{ color: "#374151" }}>{action}</span>
+                    </Text>
+                  )}
+                  <Text
+                    as="p"
+                    className="mt-0.5 text-[10px]"
+                    style={{
+                      fontFamily: "var(--font-mono)",
+                      color: "#9CA3AF",
+                    }}
+                  >
+                    {formatAuditTimestamp(entry.createdAt)}
+                  </Text>
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/slide-over-footer.tsx b/src/app/(protected)/workorders/_components/detail/slide-over-footer.tsx
new file mode 100644
index 00000000..cc623902
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/slide-over-footer.tsx
@@ -0,0 +1,149 @@
+import { AlertTriangle, Ban, Check, Pencil } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+
+type SlideOverFooterProps = {
+  isCancelled: boolean;
+  isCompleted?: boolean;
+  editing: boolean;
+  isDirty: boolean;
+  showUnsaved: boolean;
+  saving?: boolean;
+  onCancelWO: () => void;
+  onCancelEdit: () => void;
+  onClose: () => void;
+  onEdit: () => void;
+  onSave: () => void;
+  onDiscard: () => void;
+  onKeepEditing: () => void;
+};
+
+export function SlideOverFooter({
+  isCancelled,
+  isCompleted = false,
+  editing,
+  isDirty,
+  showUnsaved,
+  saving,
+  onCancelWO,
+  onCancelEdit,
+  onClose,
+  onEdit,
+  onSave,
+  onDiscard,
+  onKeepEditing,
+}: SlideOverFooterProps) {
+  if (isCancelled) {
+    return (
+      <div
+        className="flex shrink-0 items-center gap-2 px-4 py-2.5"
+        style={{
+          background: "var(--color-bg-muted)",
+          borderTop: "1px solid var(--color-border)",
+        }}
+      >
+        <Ban size={14} style={{ color: "var(--muted-foreground)" }} />
+        <Text as="p" className="text-[12px]" style={{ color: "var(--muted-foreground)" }}>
+          This work order has been cancelled and is read-only.
+        </Text>
+      </div>
+    );
+  }
+
+  if (isCompleted) {
+    return null;
+  }
+
+  if (showUnsaved) {
+    return (
+      <div
+        className="flex shrink-0 items-center justify-between gap-2 px-5 py-3"
+        style={{
+          borderTop: "1px solid var(--color-border)",
+          background: "var(--color-bg-surface)",
+        }}
+      >
+        <span
+          className="flex items-center gap-1.5 text-[12px]"
+          style={{ color: "var(--color-warning)" }}
+        >
+          <AlertTriangle size={13} />
+          You have unsaved changes.
+        </span>
+        <div className="flex gap-2">
+          <Button variant="ghost" className="text-[12px]" onClick={onDiscard}>
+            Discard
+          </Button>
+          <Button
+            variant="default"
+            className="gap-1.5 text-[12px]"
+            onClick={onSave}
+            loading={saving}
+          >
+            <Check size={13} />
+            Save
+          </Button>
+          <Button variant="ghost" className="text-[12px]" onClick={onKeepEditing}>
+            Keep editing
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex shrink-0 items-center justify-between gap-3 px-5 py-3"
+      style={{
+        borderTop: "1px solid var(--color-border)",
+        background: "var(--color-bg-surface)",
+      }}
+    >
+      <button
+        type="button"
+        onClick={onCancelWO}
+        className="flex items-center gap-1.5 text-[12px] font-medium transition-opacity hover:opacity-80"
+        style={{ color: "var(--destructive)" }}
+      >
+        <AlertTriangle size={13} />
+        Cancel WO
+      </button>
+
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={editing ? onCancelEdit : onClose}
+          disabled={saving}
+          className="text-[12px] transition-colors"
+          style={{ color: "var(--color-text-muted)" }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = "var(--color-text-primary)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = "var(--color-text-muted)";
+          }}
+        >
+          Cancel
+        </button>
+
+        {editing ? (
+          <Button
+            variant="default"
+            className="gap-1.5 text-[12px]"
+            onClick={onSave}
+            disabled={!isDirty}
+            loading={saving}
+          >
+            <Check size={13} />
+            Save
+          </Button>
+        ) : (
+          <Button variant="default" className="gap-1.5 text-[12px]" onClick={onEdit}>
+            <Pencil size={13} />
+            Edit WO
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/slide-over-header.tsx b/src/app/(protected)/workorders/_components/detail/slide-over-header.tsx
new file mode 100644
index 00000000..32facebb
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/slide-over-header.tsx
@@ -0,0 +1,112 @@
+import { CircularProgress } from "@mui/material";
+import { X } from "lucide-react";
+import { AvetaBadge } from "@/app/(protected)/workorders/_components/list/table/cells/aveta-badge";
+import { RescheduleCounterPill } from "@/app/(protected)/workorders/_components/list/table/cells/wo-counter-pills";
+import { WoTableStatusLabel } from "@/app/(protected)/workorders/_components/list/table/cells/wo-table-status-label";
+import { WoTableTypeLabel } from "@/app/(protected)/workorders/_components/list/table/cells/wo-table-type-label";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+type SlideOverHeaderProps = {
+  row: WorkOrderTableRow;
+  isCancelled: boolean;
+  isFetching?: boolean;
+  closeDisabled?: boolean;
+  onClose: () => void;
+};
+
+export function SlideOverHeader({
+  row,
+  isCancelled,
+  isFetching = false,
+  closeDisabled = false,
+  onClose,
+}: SlideOverHeaderProps) {
+  return (
+    <div
+      className="flex shrink-0 items-center justify-between gap-3 px-5 py-3.5"
+      style={{ borderBottom: "1px solid var(--color-border)" }}
+    >
+      <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+        <Text
+          as="h2"
+          className="text-[15px] font-semibold leading-none"
+          style={{ color: "var(--color-text-primary)" }}
+        >
+          #{row.woNumber || "—"}
+        </Text>
+        <RescheduleCounterPill count={row.rescheduleCount} originalDate={row.originalDate} />
+        {Boolean(row.avetaRequired) && (
+          <AvetaBadge size={13} attached={Boolean(row.hasAvetaDocument)} />
+        )}
+
+        {isCancelled && (
+          <span
+            className="rounded-full px-2 py-0.5 text-[12px] font-medium"
+            style={{
+              background: "var(--color-bg-muted)",
+              color: "var(--muted-foreground)",
+              border: "1px solid var(--color-border)",
+            }}
+          >
+            Cancelled
+          </span>
+        )}
+
+        {Boolean(row.site) && (
+          <span
+            className="rounded px-1.5 py-0.5 font-mono text-[11px]"
+            style={{
+              background: "var(--color-bg-muted)",
+              color: "var(--color-text-secondary)",
+            }}
+          >
+            {row.site}
+          </span>
+        )}
+
+        {row.isPastDue ? (
+          <span
+            className="inline-flex items-center gap-1.5 text-[11px] font-medium leading-none"
+            style={{
+              background: "var(--status-pastdue-bg)",
+              color: "var(--status-pastdue-text)",
+              borderRadius: 4,
+              padding: "3px 8px",
+            }}
+          >
+            <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-[#BE123C]" />
+            Past Due
+          </span>
+        ) : row.status ? (
+          <WoTableStatusLabel status={row.status} />
+        ) : null}
+
+        {Boolean(row.type) && <WoTableTypeLabel type={row.type as WOType} />}
+      </div>
+
+      <div className="flex shrink-0 items-center gap-1">
+        {isFetching && <CircularProgress size={14} aria-label="Refreshing details" />}
+        <button
+          type="button"
+          aria-label="Close"
+          onClick={onClose}
+          disabled={closeDisabled}
+          className="shrink-0 rounded p-1.5 transition-colors disabled:opacity-40"
+          style={{ color: "var(--color-text-muted)" }}
+          onMouseEnter={(e) => {
+            if (!closeDisabled) {
+              e.currentTarget.style.background = "var(--color-bg-muted)";
+            }
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = "transparent";
+          }}
+        >
+          <X size={15} />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/slide-over-info-row.tsx b/src/app/(protected)/workorders/_components/detail/slide-over-info-row.tsx
new file mode 100644
index 00000000..38942db6
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/slide-over-info-row.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+type SlideOverInfoRowProps = {
+  label: string;
+  children: ReactNode;
+};
+
+export function SlideOverInfoRow({ label, children }: SlideOverInfoRowProps) {
+  return (
+    <div
+      className="flex items-center gap-2 py-1.5"
+      style={{ borderBottom: "1px solid var(--color-bg-muted)" }}
+    >
+      <span className="w-28 shrink-0 text-[13px]" style={{ color: "var(--color-text-muted)" }}>
+        {label}
+      </span>
+      <div className="min-w-0 flex-1 text-[12.5px]" style={{ color: "var(--color-text-primary)" }}>
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-audit-tab.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-audit-tab.tsx
new file mode 100644
index 00000000..87719588
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-audit-tab.tsx
@@ -0,0 +1,16 @@
+import { useMemo } from "react";
+import { SlideOverAuditList } from "@/app/(protected)/workorders/_components/detail/slide-over-audit-list";
+import { useWorkOrderDirectory } from "@/domain/work-orders/use-cases/use-work-orders-list";
+import type { WorkOrderAuditEntry, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { mergeWorkOrderUsers } from "@/domain/work-orders/utils/merge-work-order-users";
+
+type SlideOverAuditTabProps = {
+  entries: WorkOrderAuditEntry[];
+  users?: WorkOrderUser[];
+};
+
+export function SlideOverAuditTab({ entries, users = [] }: SlideOverAuditTabProps) {
+  const { data: directory = [] } = useWorkOrderDirectory();
+  const actors = useMemo(() => mergeWorkOrderUsers(users, directory), [users, directory]);
+  return <SlideOverAuditList entries={entries} users={actors} />;
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-comments-tab.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-comments-tab.tsx
new file mode 100644
index 00000000..1d13f890
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-comments-tab.tsx
@@ -0,0 +1,265 @@
+import { useState } from "react";
+import { Pencil } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderComment } from "@/domain/work-orders/types/work-order";
+import { isOwnWorkOrderComment } from "@/domain/work-orders/utils/comment-ownership";
+import {
+  getAvatarColorFromName,
+  getInitialsFromName,
+} from "@/domain/work-orders/utils/dispatcher-avatar-color";
+
+function formatCommentTime(value: string): string {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+const textareaStyle = {
+  border: "1px solid var(--color-border)",
+  color: "var(--color-text-primary)",
+  background: "var(--color-bg-surface)",
+} as const;
+
+type SlideOverCommentItemProps = {
+  comment: WorkOrderComment;
+  canEdit: boolean;
+  isEditing: boolean;
+  draftText: string;
+  isUpdatePending: boolean;
+  onStartEdit: () => void;
+  onDraftChange: (value: string) => void;
+  onCancelEdit: () => void;
+  onSaveEdit: () => void;
+};
+
+function SlideOverCommentItem({
+  comment,
+  canEdit,
+  isEditing,
+  draftText,
+  isUpdatePending,
+  onStartEdit,
+  onDraftChange,
+  onCancelEdit,
+  onSaveEdit,
+}: SlideOverCommentItemProps) {
+  const author = comment.userName || comment.commenter || "Unknown";
+  const color = getAvatarColorFromName(author);
+  const initials = getInitialsFromName(author);
+
+  return (
+    <div className="flex items-start gap-2.5 py-2.5">
+      <span
+        className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[9px] font-semibold"
+        style={{ background: `${color}25`, color }}
+      >
+        {initials}
+      </span>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center justify-between gap-1.5">
+          <div className="flex min-w-0 items-center gap-1.5">
+            <span
+              className="truncate text-[12px] font-semibold"
+              style={{ color: "var(--color-text-primary)" }}
+            >
+              {author}
+            </span>
+            <span className="shrink-0 text-[10px]" style={{ color: "var(--color-text-muted)" }}>
+              {formatCommentTime(comment.createdDate)}
+            </span>
+          </div>
+          {canEdit && !isEditing && (
+            <button
+              type="button"
+              title="Edit comment"
+              aria-label="Edit comment"
+              onClick={onStartEdit}
+              className="shrink-0 rounded p-0.5 transition-opacity hover:opacity-70"
+              style={{ color: "var(--color-text-muted)" }}
+            >
+              <Pencil size={12} />
+            </button>
+          )}
+        </div>
+
+        {isEditing ? (
+          <div className="mt-1.5 space-y-2">
+            <textarea
+              value={draftText}
+              onChange={(event) => onDraftChange(event.target.value)}
+              rows={3}
+              disabled={isUpdatePending}
+              className="w-full resize-none rounded-lg px-3 py-2 text-[12px] focus:outline-none focus:ring-1"
+              style={textareaStyle}
+            />
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="ghost"
+                size="default"
+                className="h-8 text-[12px]"
+                disabled={isUpdatePending}
+                onClick={onCancelEdit}
+                style={{ color: "var(--color-text-muted)" }}
+              >
+                Cancel
+              </Button>
+              <Button
+                size="default"
+                className="h-8 text-[12px]"
+                disabled={!draftText.trim() || isUpdatePending}
+                loading={isUpdatePending}
+                onClick={onSaveEdit}
+              >
+                Save
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Text
+            as="p"
+            className="mt-0.5 text-[12px] leading-snug"
+            style={{ color: "var(--color-text-secondary)" }}
+          >
+            {comment.commenttext}
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+}
+
+type SlideOverCommentsTabProps = {
+  comments: WorkOrderComment[];
+  isReadOnly: boolean;
+  isPending: boolean;
+  currentUserId?: string | number;
+  isUpdatePending?: boolean;
+  onSubmit: (text: string, options?: { onSuccess?: () => void }) => void;
+  onUpdateComment?: (
+    commentId: string | number,
+    text: string,
+    options?: { onSuccess?: () => void },
+  ) => void;
+};
+
+export function SlideOverCommentsTab({
+  comments,
+  isReadOnly,
+  isPending,
+  currentUserId,
+  isUpdatePending = false,
+  onSubmit,
+  onUpdateComment,
+}: SlideOverCommentsTabProps) {
+  const [commentText, setCommentText] = useState("");
+  const [editingCommentId, setEditingCommentId] = useState<string | number | null>(null);
+  const [draftText, setDraftText] = useState("");
+
+  const handlePost = () => {
+    const text = commentText.trim();
+    if (!text || isReadOnly || isPending) return;
+    onSubmit(text, { onSuccess: () => setCommentText("") });
+  };
+
+  const startEdit = (comment: WorkOrderComment) => {
+    setEditingCommentId(comment.id);
+    setDraftText(comment.commenttext);
+  };
+
+  const cancelEdit = () => {
+    setEditingCommentId(null);
+    setDraftText("");
+  };
+
+  const saveEdit = () => {
+    if (editingCommentId == null || !onUpdateComment) return;
+    const text = draftText.trim();
+    if (!text || isUpdatePending) return;
+    onUpdateComment(editingCommentId, text, {
+      onSuccess: () => {
+        setEditingCommentId(null);
+        setDraftText("");
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-3">
+      {!isReadOnly && (
+        <>
+          <textarea
+            value={commentText}
+            onChange={(event) => setCommentText(event.target.value)}
+            placeholder="Add comment…"
+            rows={3}
+            disabled={isPending}
+            className="w-full resize-none rounded-lg px-3 py-2 text-[12px] focus:outline-none focus:ring-1"
+            style={textareaStyle}
+          />
+          <div className="flex justify-end">
+            <Button
+              size="default"
+              className="h-8 text-[12px]"
+              disabled={!commentText.trim() || isPending}
+              onClick={handlePost}
+              loading={isPending}
+            >
+              Post
+            </Button>
+          </div>
+        </>
+      )}
+
+      <div
+        style={{
+          borderTop: "1px solid var(--color-bg-muted)",
+          pointerEvents: isReadOnly ? "none" : undefined,
+        }}
+      >
+        {comments.length === 0 ? (
+          <Text
+            as="p"
+            className="py-6 text-center text-[12px]"
+            style={{ color: "var(--muted-foreground)" }}
+          >
+            No comments yet
+          </Text>
+        ) : (
+          comments.map((comment) => {
+            const canEdit =
+              !isReadOnly &&
+              Boolean(onUpdateComment) &&
+              isOwnWorkOrderComment(comment, currentUserId);
+            const isEditing = editingCommentId === comment.id;
+
+            return (
+              <div
+                key={String(comment.id)}
+                style={{ borderBottom: "1px solid var(--color-bg-muted)" }}
+              >
+                <SlideOverCommentItem
+                  comment={comment}
+                  canEdit={canEdit}
+                  isEditing={isEditing}
+                  draftText={isEditing ? draftText : comment.commenttext}
+                  isUpdatePending={isUpdatePending && isEditing}
+                  onStartEdit={() => startEdit(comment)}
+                  onDraftChange={setDraftText}
+                  onCancelEdit={cancelEdit}
+                  onSaveEdit={saveEdit}
+                />
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-actions.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-actions.tsx
new file mode 100644
index 00000000..2853c205
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-actions.tsx
@@ -0,0 +1,116 @@
+import type { RefObject } from "react";
+import { Ban, CheckCircle2, FileText, Upload } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+
+type SlideOverCompletionActionsProps = {
+  docStatus: CompletionDocStatus;
+  rowVersion?: string | number | null;
+  completionPending: boolean;
+  /** Completion documents require a selected primary service. */
+  hasService: boolean;
+  hasUploadHandler: boolean;
+  pdfInputRef: RefObject<HTMLInputElement | null>;
+  onPdfSelected: (files: FileList | null) => void;
+  onOpenCompletionDoc: () => void;
+};
+
+function DocStatusButtonContent({
+  docStatus,
+  hasService,
+}: {
+  docStatus: CompletionDocStatus;
+  hasService: boolean;
+}) {
+  if (!hasService) {
+    return (
+      <>
+        <FileText size={13} />
+        Select service
+      </>
+    );
+  }
+  if (docStatus === "Yes") {
+    return (
+      <>
+        <CheckCircle2 size={13} />
+        View / Edit Document
+      </>
+    );
+  }
+  if (docStatus === "NN") {
+    return (
+      <>
+        <Ban size={13} />
+        Document Not Required — Review
+      </>
+    );
+  }
+  return (
+    <>
+      <FileText size={13} />
+      Open completion document
+    </>
+  );
+}
+
+export function SlideOverCompletionActions({
+  docStatus,
+  rowVersion,
+  completionPending,
+  hasService,
+  hasUploadHandler,
+  pdfInputRef,
+  onPdfSelected,
+  onOpenCompletionDoc,
+}: SlideOverCompletionActionsProps) {
+  return (
+    <div className="space-y-2">
+      {hasUploadHandler && (
+        <>
+          <Button
+            variant="outline"
+            className="w-full gap-1.5 text-[12px]"
+            disabled={!rowVersion}
+            loading={completionPending}
+            loadingText="Uploading…"
+            onClick={() => pdfInputRef.current?.click()}
+            startIcon={!completionPending ? <Upload size={13} /> : undefined}
+          >
+            Upload signed PDF
+          </Button>
+          <input
+            ref={pdfInputRef}
+            type="file"
+            accept="application/pdf,.pdf"
+            hidden
+            onChange={(event) => {
+              onPdfSelected(event.target.files);
+              event.target.value = "";
+            }}
+          />
+          {!rowVersion && (
+            <Text as="p" style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+              Waiting for work order version before upload is available.
+            </Text>
+          )}
+        </>
+      )}
+      <Button
+        variant="outline"
+        className="w-full gap-1.5 text-[12px]"
+        disabled={!hasService}
+        title={hasService ? undefined : "Select a service before opening the completion document"}
+        onClick={onOpenCompletionDoc}
+      >
+        <DocStatusButtonContent docStatus={docStatus} hasService={hasService} />
+      </Button>
+      {!hasService && (
+        <Text as="p" style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+          Select a service before opening the completion document.
+        </Text>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-media.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-media.tsx
new file mode 100644
index 00000000..24e468d1
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-media.tsx
@@ -0,0 +1,52 @@
+import { Image as ImageIcon } from "lucide-react";
+import {
+  MediaUploader,
+  type MediaUploadRequest,
+} from "@/app/(protected)/workorders/_components/media/media-uploader";
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+
+type SlideOverCompletionMediaProps = {
+  isReadOnly: boolean;
+  media: MediaFile[];
+  mediaPending: boolean;
+  onUploadMedia?: (requests: MediaUploadRequest[]) => void;
+  onCategorizeMedia?: (id: string, category: UploadableMediaCategory) => void;
+  onRemoveMedia?: (id: string) => void;
+  onRetryMedia?: (localId: string) => void;
+  onCancelMedia?: (localId: string) => void;
+};
+
+export function SlideOverCompletionMedia({
+  isReadOnly,
+  media,
+  mediaPending,
+  onUploadMedia,
+  onCategorizeMedia,
+  onRemoveMedia,
+  onRetryMedia,
+  onCancelMedia,
+}: SlideOverCompletionMediaProps) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-1.5">
+        <ImageIcon size={14} style={{ color: "var(--foreground)" }} />
+        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--foreground)" }}>
+          Photos &amp; Videos
+        </span>
+      </div>
+      <div style={isReadOnly ? { opacity: 0.6, pointerEvents: "none" } : undefined}>
+        <MediaUploader
+          uploads={media}
+          onUpload={onUploadMedia}
+          onCategorize={onCategorizeMedia}
+          onRemove={onRemoveMedia}
+          onRetry={onRetryMedia}
+          onCancel={onCancelMedia}
+          readOnly={isReadOnly}
+          pending={mediaPending}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-readonly-status.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-readonly-status.tsx
new file mode 100644
index 00000000..e9310484
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-readonly-status.tsx
@@ -0,0 +1,45 @@
+import { CheckCircle2, FileText } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+
+type SlideOverCompletionReadonlyStatusProps = {
+  docStatus: CompletionDocStatus;
+  onOpenCompletionDoc: () => void;
+};
+
+export function SlideOverCompletionReadonlyStatus({
+  docStatus,
+  onOpenCompletionDoc,
+}: SlideOverCompletionReadonlyStatusProps) {
+  if (docStatus === "Yes") {
+    return (
+      <Button
+        variant="outline"
+        className="w-full gap-1.5 text-[12px]"
+        onClick={onOpenCompletionDoc}
+      >
+        <CheckCircle2 size={13} />
+        View Document
+      </Button>
+    );
+  }
+
+  return (
+    <div
+      className="flex items-center gap-2"
+      style={{
+        padding: "10px 12px",
+        borderRadius: 8,
+        background: "var(--color-bg-muted)",
+        border: "1px solid var(--color-border)",
+      }}
+    >
+      <FileText size={14} className="shrink-0" style={{ color: "var(--color-text-muted)" }} />
+      <span style={{ fontSize: 12, color: "var(--muted-foreground)" }}>
+        {docStatus === "NN"
+          ? "No completion document was required for this work order."
+          : "No completion document was generated."}
+      </span>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-signoffs.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-signoffs.tsx
new file mode 100644
index 00000000..a0e51bf5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-signoffs.tsx
@@ -0,0 +1,35 @@
+import type { WorkOrderBoardCompletion } from "@/domain/work-orders/types/work-order-board-detail";
+
+type SlideOverCompletionSignoffsProps = {
+  completion?: WorkOrderBoardCompletion;
+};
+
+export function SlideOverCompletionSignoffs({ completion }: SlideOverCompletionSignoffsProps) {
+  if (!completion || completion.dispatchSignoffs.length === 0) return null;
+
+  return (
+    <div className="space-y-1 pt-2">
+      <span
+        style={{
+          fontSize: 10,
+          fontWeight: 700,
+          letterSpacing: "0.06em",
+          textTransform: "uppercase",
+          color: "var(--color-text-muted)",
+        }}
+      >
+        Dispatch sign-offs
+      </span>
+      {completion.dispatchSignoffs.map((signoff, index) => (
+        <div
+          key={`${signoff.dispatchId ?? "d"}-${index}`}
+          style={{ fontSize: 12, color: "var(--color-text-secondary)" }}
+        >
+          {signoff.signoffType || "Sign-off"}
+          {signoff.name ? ` — ${signoff.name}` : ""}
+          {signoff.signedAt ? ` · ${signoff.signedAt}` : ""}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-tab.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-tab.tsx
new file mode 100644
index 00000000..cf89d2bf
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-tab.tsx
@@ -0,0 +1,141 @@
+import { useRef } from "react";
+import { Download, FileText } from "lucide-react";
+import { toast } from "react-toastify";
+import type { MediaUploadRequest } from "@/app/(protected)/workorders/_components/media/media-uploader";
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { WorkOrderBoardCompletion } from "@/domain/work-orders/types/work-order-board-detail";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { hasCompletionDocService } from "@/domain/work-orders/utils/completion-doc-service-gate";
+import { hasCompletionMediaGallery } from "@/domain/work-orders/utils/partition-slide-over-media";
+import {
+  formatMediaSizeLimit,
+  isWorkOrderFileTooLarge,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+import { SlideOverCompletionActions } from "./slide-over-completion-actions";
+import { SlideOverCompletionMedia } from "./slide-over-completion-media";
+import { SlideOverCompletionReadonlyStatus } from "./slide-over-completion-readonly-status";
+import { SlideOverCompletionSignoffs } from "./slide-over-completion-signoffs";
+
+type SlideOverCompletionTabProps = {
+  row: WorkOrderTableRow;
+  isReadOnly: boolean;
+  completion?: WorkOrderBoardCompletion;
+  media: MediaFile[];
+  mediaPending?: boolean;
+  completionPending?: boolean;
+  onUploadMedia?: (requests: MediaUploadRequest[]) => void;
+  onCategorizeMedia?: (id: string, category: UploadableMediaCategory) => void;
+  onRemoveMedia?: (id: string) => void;
+  onRetryMedia?: (localId: string) => void;
+  onCancelMedia?: (localId: string) => void;
+  onUploadCompletionPdf?: (file: File) => void;
+  onOpenCompletionDoc: () => void;
+};
+
+export function SlideOverCompletionTab({
+  row,
+  isReadOnly,
+  completion,
+  media,
+  mediaPending = false,
+  completionPending = false,
+  onUploadMedia,
+  onCategorizeMedia,
+  onRemoveMedia,
+  onRetryMedia,
+  onCancelMedia,
+  onUploadCompletionPdf,
+  onOpenCompletionDoc,
+}: SlideOverCompletionTabProps) {
+  const pdfInputRef = useRef<HTMLInputElement>(null);
+  const docStatus = completion?.docStatus || row.docStatus;
+  const templateUrl = completion?.template?.templateUrl;
+  const signOffAttachment = completion?.signOffAttachment;
+
+  if (hasCompletionMediaGallery(row.type)) {
+    return (
+      <SlideOverCompletionMedia
+        isReadOnly={isReadOnly}
+        media={media}
+        mediaPending={mediaPending}
+        onUploadMedia={onUploadMedia}
+        onCategorizeMedia={onCategorizeMedia}
+        onRemoveMedia={onRemoveMedia}
+        onRetryMedia={onRetryMedia}
+        onCancelMedia={onCancelMedia}
+      />
+    );
+  }
+
+  const handlePdfSelected = (files: FileList | null) => {
+    const file = files?.[0];
+    if (!file || !onUploadCompletionPdf) return;
+    if (isWorkOrderFileTooLarge(file)) {
+      toast.error(`File exceeds the ${formatMediaSizeLimit()} limit.`);
+      return;
+    }
+    if (file.type !== "application/pdf" && !file.name.toLowerCase().endsWith(".pdf")) {
+      toast.error("Please upload a PDF file.");
+      return;
+    }
+    onUploadCompletionPdf(file);
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-1.5">
+        <FileText size={14} style={{ color: "var(--foreground)" }} />
+        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--foreground)" }}>
+          Completion Document
+        </span>
+      </div>
+
+      {Boolean(templateUrl) && (
+        <a
+          href={templateUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+          style={{ color: "var(--color-primary)" }}
+        >
+          <Download size={13} />
+          Download blank template
+        </a>
+      )}
+
+      {Boolean(signOffAttachment) && (
+        <a
+          href={signOffAttachment}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+          style={{ color: "var(--color-primary)" }}
+        >
+          <FileText size={13} />
+          View uploaded document
+        </a>
+      )}
+
+      {isReadOnly ? (
+        <SlideOverCompletionReadonlyStatus
+          docStatus={docStatus}
+          onOpenCompletionDoc={onOpenCompletionDoc}
+        />
+      ) : (
+        <SlideOverCompletionActions
+          docStatus={docStatus}
+          rowVersion={row.rowVersion}
+          completionPending={completionPending}
+          hasService={hasCompletionDocService(row.pm)}
+          hasUploadHandler={Boolean(onUploadCompletionPdf)}
+          pdfInputRef={pdfInputRef}
+          onPdfSelected={handlePdfSelected}
+          onOpenCompletionDoc={onOpenCompletionDoc}
+        />
+      )}
+
+      <SlideOverCompletionSignoffs completion={completion} />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-doc-badge.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-doc-badge.tsx
new file mode 100644
index 00000000..5282cda2
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-doc-badge.tsx
@@ -0,0 +1,44 @@
+import { Image as ImageIcon } from "lucide-react";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+function isMediaWO(type: WOType | ""): boolean {
+  return type === "Emergency" || type === "Reactive";
+}
+
+const DOC_BADGE_STYLE: Record<"Yes" | "No" | "NN", { bg: string; text: string }> = {
+  Yes: { bg: "#F0FDF4", text: "#166534" },
+  No: { bg: "#FFF1F2", text: "#BE123C" },
+  NN: { bg: "#F3F4F6", text: "#6B7280" },
+};
+
+export function DocBadge({ row }: { row: WorkOrderTableRow }) {
+  if (isMediaWO(row.type)) {
+    return (
+      <span
+        className="inline-flex items-center gap-1.5 text-[12.5px] font-semibold"
+        style={{ color: "var(--color-primary)" }}
+      >
+        <ImageIcon size={14} />
+        {row.mediaCount > 0 ? `${row.mediaCount} file${row.mediaCount !== 1 ? "s" : ""}` : "Media"}
+      </span>
+    );
+  }
+
+  const key = row.docStatus === "Yes" ? "Yes" : row.docStatus === "NN" ? "NN" : "No";
+  const style = DOC_BADGE_STYLE[key];
+  const label = key === "NN" ? "NN" : key;
+
+  return (
+    <span
+      className="inline-flex items-center px-1.5 py-0.5 text-[11px] font-medium leading-none"
+      style={{
+        background: style.bg,
+        color: style.text,
+        borderRadius: 4,
+      }}
+    >
+      {label}
+    </span>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx
new file mode 100644
index 00000000..a02ecb56
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx
@@ -0,0 +1,293 @@
+import { useRef } from "react";
+import {
+  File as FileIcon,
+  FileText,
+  Film,
+  Image as ImageIcon,
+  Paperclip,
+  ShieldCheck,
+  Upload,
+  X,
+} from "lucide-react";
+import { toast } from "react-toastify";
+import { Text } from "@/components/ui/text";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { FileCategory, MediaFile } from "@/domain/work-orders/types/work-order-media";
+import {
+  hasExplicitAvetaFile,
+  resolveExtraDocCategory,
+} from "@/domain/work-orders/utils/extra-docs-aveta";
+import {
+  canDeleteWorkOrderMedia,
+  formatMediaSizeLimit,
+  isWorkOrderExtraDocTypeAllowed,
+  isWorkOrderFileTooLarge,
+  workOrderExtraDocsAcceptAttribute,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+
+const FILETYPE_ICON: Record<FileCategory, typeof ImageIcon> = {
+  image: ImageIcon,
+  video: Film,
+  pdf: FileText,
+  doc: FileIcon,
+  other: Paperclip,
+};
+
+const FILETYPE_LABEL: Record<FileCategory, string> = {
+  image: "Photo",
+  video: "Video",
+  pdf: "PDF",
+  doc: "Document",
+  other: "File",
+};
+
+const EXTRA_DOC_PURPOSES: Array<Extract<UploadableMediaCategory, "Extra" | "Aveta">> = [
+  "Extra",
+  "Aveta",
+];
+
+type SlideOverExtrasTabProps = {
+  uploads: MediaFile[];
+  isReadOnly: boolean;
+  pending?: boolean;
+  avetaRequired?: boolean;
+  workOrderId?: string | number;
+  onUpload: (files: File[]) => void;
+  onRemove: (id: string) => void;
+  onCategorize?: (id: string, category: UploadableMediaCategory) => void;
+};
+
+async function openExtraDocContent(workOrderId: string | number, mediaId: string): Promise<void> {
+  const tab = window.open("about:blank", "_blank");
+  if (!tab) {
+    toast.error("Unable to open this document. Please allow pop-ups and try again.");
+    return;
+  }
+
+  try {
+    const blob = await workOrdersApi.getMediaContent(workOrderId, mediaId);
+    const objectUrl = URL.createObjectURL(blob);
+    tab.opener = null;
+    tab.location.href = objectUrl;
+    window.setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
+  } catch {
+    tab.close();
+    toast.error("Unable to open this document.");
+  }
+}
+
+function ExtraDocRow({
+  file,
+  isReadOnly,
+  pending,
+  workOrderId,
+  onRemove,
+  onCategorize,
+}: {
+  file: MediaFile;
+  isReadOnly: boolean;
+  pending: boolean;
+  workOrderId?: string | number;
+  onRemove: (id: string) => void;
+  onCategorize?: (id: string, category: UploadableMediaCategory) => void;
+}) {
+  const category = resolveExtraDocCategory(file);
+  const isAveta = category === "Aveta";
+  const ItemIcon = isAveta ? ShieldCheck : FILETYPE_ICON[file.fileType];
+  const showDelete = !isReadOnly && canDeleteWorkOrderMedia(file);
+  const showCategory = !isReadOnly && Boolean(onCategorize) && !file.isLegacy;
+  const purpose = file.purpose === "Aveta" || isAveta ? "Aveta" : "Extra";
+
+  return (
+    <div
+      role="group"
+      aria-label={`${FILETYPE_LABEL[file.fileType]}, ${purpose}: ${file.name}`}
+      className="flex items-center gap-2 py-1"
+    >
+      <ItemIcon
+        aria-hidden
+        size={12}
+        className="shrink-0"
+        style={{ color: isAveta ? "var(--warning)" : "var(--color-text-muted)" }}
+      />
+      <button
+        type="button"
+        disabled={workOrderId == null}
+        onClick={() => {
+          if (workOrderId == null) {
+            return;
+          }
+          void openExtraDocContent(workOrderId, file.id);
+        }}
+        className="min-w-0 flex-1 truncate text-left hover:underline disabled:cursor-not-allowed disabled:opacity-50"
+        style={{ fontSize: 12, color: "var(--foreground)" }}
+      >
+        {file.name}
+      </button>
+      {showCategory ? (
+        <select
+          aria-label={`Category for ${file.name}`}
+          value={purpose}
+          disabled={pending}
+          onChange={(event) => {
+            const value = event.target.value;
+            if (value === "Extra" || value === "Aveta") {
+              onCategorize?.(file.id, value);
+            }
+          }}
+          className="rounded border px-1 py-0.5 text-[10px]"
+          style={{
+            borderColor: "var(--color-border)",
+            color: "var(--color-text-primary)",
+            background: "var(--color-bg-surface)",
+          }}
+        >
+          {EXTRA_DOC_PURPOSES.map((value) => (
+            <option key={value} value={value}>
+              {value}
+            </option>
+          ))}
+        </select>
+      ) : (
+        isAveta && (
+          <span style={{ fontSize: 10, fontWeight: 600, color: "var(--warning)" }}>Aveta</span>
+        )
+      )}
+      {showDelete && (
+        <button
+          type="button"
+          title="Remove"
+          disabled={pending}
+          onClick={() => onRemove(file.id)}
+          className="rounded p-0.5 transition-opacity hover:opacity-70 disabled:opacity-50"
+          style={{ color: "var(--color-text-muted)" }}
+        >
+          <X size={12} />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function SlideOverExtrasTab({
+  uploads,
+  isReadOnly,
+  pending = false,
+  avetaRequired = false,
+  workOrderId,
+  onUpload,
+  onRemove,
+  onCategorize,
+}: SlideOverExtrasTabProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const avetaAttached = hasExplicitAvetaFile(uploads);
+
+  const addFiles = (files: FileList | null) => {
+    if (isReadOnly || pending || !files || files.length === 0) return;
+    const accepted: File[] = [];
+    for (const file of Array.from(files)) {
+      if (!isWorkOrderExtraDocTypeAllowed(file)) {
+        toast.error(`"${file.name}" is not a supported type (JPG, PNG, MP4, MOV, PDF, DOC).`);
+        continue;
+      }
+      if (isWorkOrderFileTooLarge(file)) {
+        toast.error(`"${file.name}" exceeds the ${formatMediaSizeLimit()} limit.`);
+        continue;
+      }
+      accepted.push(file);
+    }
+    if (accepted.length > 0) {
+      onUpload(accepted);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-1.5">
+        <ImageIcon size={14} style={{ color: "var(--foreground)" }} />
+        <span style={{ fontSize: 12, fontWeight: 600, color: "var(--foreground)" }}>
+          Extra Documents
+        </span>
+        {Boolean(avetaRequired) && (
+          <span
+            className="inline-flex items-center gap-1"
+            style={{
+              fontSize: 11,
+              fontWeight: 500,
+              color: avetaAttached ? "var(--success)" : "var(--warning)",
+            }}
+          >
+            <ShieldCheck size={12} />
+            Aveta
+          </span>
+        )}
+      </div>
+
+      {!isReadOnly && (
+        <>
+          <button
+            type="button"
+            disabled={pending}
+            onClick={() => inputRef.current?.click()}
+            onDragOver={(event) => event.preventDefault()}
+            onDrop={(event) => {
+              event.preventDefault();
+              addFiles(event.dataTransfer.files);
+            }}
+            className="flex w-full flex-col items-center justify-center gap-1.5 transition-colors hover:bg-(--color-bg-muted) disabled:opacity-60"
+            style={{
+              minHeight: 100,
+              border: "1px dashed var(--color-border)",
+              borderRadius: 8,
+            }}
+          >
+            <Upload size={20} style={{ color: "var(--color-text-muted)" }} />
+            <span
+              style={{ fontSize: 13, color: "var(--color-text-muted)" }}
+              aria-busy={pending || undefined}
+            >
+              {pending ? "Uploading…" : "Upload documents, photos or videos"}
+            </span>
+            <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+              Accepted: JPG, PNG, MP4, MOV, PDF, DOC · Max {formatMediaSizeLimit().replace(" ", "")}{" "}
+              per file
+            </span>
+          </button>
+          <input
+            ref={inputRef}
+            type="file"
+            accept={workOrderExtraDocsAcceptAttribute()}
+            multiple
+            hidden
+            disabled={pending}
+            onChange={(event) => {
+              addFiles(event.target.files);
+              event.target.value = "";
+            }}
+          />
+        </>
+      )}
+
+      {uploads.length === 0 ? (
+        <Text as="p" style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+          No extra documents yet.
+        </Text>
+      ) : (
+        <div className="space-y-1">
+          {uploads.map((file) => (
+            <ExtraDocRow
+              key={file.id}
+              file={file}
+              isReadOnly={isReadOnly}
+              pending={pending}
+              workOrderId={workOrderId}
+              onRemove={onRemove}
+              onCategorize={onCategorize}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-assigned-field.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-assigned-field.tsx
new file mode 100644
index 00000000..8d7bc8ba
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-assigned-field.tsx
@@ -0,0 +1,28 @@
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { getDispatcherAvatarColor } from "@/domain/work-orders/utils/dispatcher-avatar-color";
+
+type SlideOverInfoTabAssignedFieldProps = {
+  dispatcher?: WorkOrderUser;
+  dispatcherName?: string;
+};
+
+export function SlideOverInfoTabAssignedField({
+  dispatcher,
+  dispatcherName,
+}: SlideOverInfoTabAssignedFieldProps) {
+  if (!dispatcher && !dispatcherName) {
+    return <span style={{ color: "var(--color-text-muted)" }}>—</span>;
+  }
+
+  return (
+    <span className="inline-flex items-center gap-1.5 text-[12.5px]">
+      {dispatcher != null && (
+        <span
+          className="h-2 w-2 shrink-0 rounded-full"
+          style={{ background: getDispatcherAvatarColor(dispatcher) }}
+        />
+      )}
+      {dispatcher?.name || dispatcherName}
+    </span>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-display-view.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-display-view.tsx
new file mode 100644
index 00000000..f74bcf78
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-display-view.tsx
@@ -0,0 +1,239 @@
+import { SiteCell } from "@/app/(protected)/workorders/_components/list/table/cells/site-cell";
+import { PMTypeCell } from "@/app/(protected)/workorders/_components/list/table/cells/pm-type-cell";
+import { VendorCell } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-cell";
+import { SlideOverInfoRow } from "@/app/(protected)/workorders/_components/detail/slide-over-info-row";
+import { AvetaBadge } from "@/app/(protected)/workorders/_components/list/table/cells/aveta-badge";
+import { PmTypeIcon } from "@/app/(protected)/workorders/_components/list/table/pm-type-icons";
+import { WoTableTypeLabel } from "@/app/(protected)/workorders/_components/list/table/cells/wo-table-type-label";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { formatApptRange, parseApptTime } from "@/domain/work-orders/utils/wizard-date-utils";
+import {
+  effectiveCompany,
+  effectivePoc,
+  effectiveSite,
+} from "@/domain/work-orders/utils/effective-completion-snapshot";
+import { DocBadge } from "./slide-over-doc-badge";
+import { SlideOverInfoTabAssignedField } from "./slide-over-info-tab-assigned-field";
+import { SlideOverInfoTabStatusField } from "./slide-over-info-tab-status-field";
+import { SlideOverInfoTabVendorField } from "./slide-over-info-tab-vendor-field";
+
+type SlideOverInfoTabDisplayViewProps = {
+  source: WorkOrderTableRow;
+  isCancelled: boolean;
+  isCompleted?: boolean;
+  dispatcher?: WorkOrderUser;
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+};
+
+type FrozenPoc = ReturnType<typeof effectivePoc>;
+
+function formatScheduleOn(source: WorkOrderTableRow): string {
+  if (source.scheduleWeekOnly && source.targetWeek) {
+    return `Week of ${source.targetWeek}`;
+  }
+  return source.scheduledOn || "—";
+}
+
+function formatApptDisplay(apptTime: string): string {
+  const appt = parseApptTime(apptTime);
+  if (appt.start) return formatApptRange(appt.start, appt.end);
+  return apptTime || "—";
+}
+
+function formatPocLine(poc: FrozenPoc): string {
+  const primary = poc.contacts[0];
+  const name = primary?.name || "—";
+  if (!primary?.phone) return name;
+  return `${name} · ${primary.phone}`;
+}
+
+function SlideOverTypeField({ type }: { type: WorkOrderTableRow["type"] }) {
+  if (!type) {
+    return <span style={{ color: "var(--color-text-muted)" }}>—</span>;
+  }
+  return <WoTableTypeLabel type={type as WOType} />;
+}
+
+function SlideOverCompletedSite({
+  source,
+  poc,
+  sites,
+}: {
+  source: WorkOrderTableRow;
+  poc: FrozenPoc;
+  sites: LocationOption[];
+}) {
+  const primaryPoc = poc.contacts[0];
+  const frozenSite = effectiveSite(source);
+  return (
+    <SiteCell
+      value={frozenSite?.code ?? source.site}
+      location={frozenSite?.label ?? source.location}
+      locationId={source.locationId}
+      pocName={primaryPoc?.name ?? ""}
+      pocPhone={primaryPoc?.phone ?? ""}
+      pocNotes={poc.notes ?? ""}
+      additionalContacts={poc.contacts.slice(1).map((contact) => ({
+        name: contact.name ?? "",
+        phone: contact.phone ?? "",
+        notes: contact.notes ?? "",
+      }))}
+      sites={sites}
+      viewOnly
+      frozenSite={frozenSite}
+      onSave={() => undefined}
+    />
+  );
+}
+
+function SlideOverSiteField({
+  source,
+  isCompleted,
+  poc,
+  sites,
+}: {
+  source: WorkOrderTableRow;
+  isCompleted: boolean;
+  poc: FrozenPoc;
+  sites: LocationOption[];
+}) {
+  if (!isCompleted) {
+    return (
+      <span className="font-mono text-[12.5px] font-bold" style={{ color: "var(--foreground)" }}>
+        {source.site || "—"}
+      </span>
+    );
+  }
+  return <SlideOverCompletedSite source={source} poc={poc} sites={sites} />;
+}
+
+function SlideOverOpenService({ source }: { source: WorkOrderTableRow }) {
+  if (!source.pm) {
+    return <span style={{ color: "var(--color-text-muted)" }}>—</span>;
+  }
+  return (
+    <span className="inline-flex items-center gap-1.5 text-[12.5px]">
+      <PmTypeIcon pmType={source.pm} size={14} />
+      {source.pm}
+      {Boolean(source.avetaRequired) && (
+        <AvetaBadge size={11} attached={Boolean(source.hasAvetaDocument)} />
+      )}
+    </span>
+  );
+}
+
+function SlideOverServiceField({
+  source,
+  isCompleted,
+  pmTypes,
+}: {
+  source: WorkOrderTableRow;
+  isCompleted: boolean;
+  pmTypes: string[];
+}) {
+  if (!isCompleted) return <SlideOverOpenService source={source} />;
+  return (
+    <PMTypeCell
+      value={source.pm}
+      pmTypes={pmTypes}
+      serviceNotes={source.serviceNotes}
+      extraServices={source.extraServices}
+      avetaRequired={source.avetaRequired}
+      avetaAttached={source.hasAvetaDocument}
+      woNumber={source.woNumber}
+      viewOnly
+      onSave={() => undefined}
+    />
+  );
+}
+
+function SlideOverVendorField({
+  source,
+  isCompleted,
+  vendors,
+}: {
+  source: WorkOrderTableRow;
+  isCompleted: boolean;
+  vendors: VendorDropdownItem[];
+}) {
+  if (!isCompleted) return <SlideOverInfoTabVendorField source={source} />;
+  const company = effectiveCompany(source);
+  return (
+    <VendorCell
+      vendorId={source.vendorId}
+      company={company.name ?? source.company}
+      tech={company.contactName ?? source.tech}
+      techPhone={company.phone ?? source.techPhone}
+      vendors={vendors}
+      viewOnly
+      frozenCompany={source.frozenCompany}
+      onSave={() => undefined}
+    />
+  );
+}
+
+export function SlideOverInfoTabDisplayView({
+  source,
+  isCancelled,
+  isCompleted = false,
+  dispatcher,
+  sites,
+  vendors,
+  pmTypes,
+}: SlideOverInfoTabDisplayViewProps) {
+  const poc = effectivePoc(source);
+
+  return (
+    <div style={isCancelled ? { opacity: 0.6, pointerEvents: "none" } : undefined}>
+      <SlideOverInfoRow label="WO #">
+        <span className="font-mono text-[12.5px] font-semibold">{source.woNumber || "—"}</span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Site">
+        <SlideOverSiteField source={source} isCompleted={isCompleted} poc={poc} sites={sites} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Type of WO">
+        <SlideOverTypeField type={source.type} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Assigned To">
+        <SlideOverInfoTabAssignedField
+          dispatcher={dispatcher}
+          dispatcherName={source.dispatcherName}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Schedule On">
+        <span className="text-[12.5px]">{formatScheduleOn(source)}</span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Due Date">
+        <span className="text-[12.5px]">{source.dueDate || "—"}</span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Appt Time">
+        <span className="text-[12.5px]">{formatApptDisplay(source.apptTime)}</span>
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Service">
+        <SlideOverServiceField source={source} isCompleted={isCompleted} pmTypes={pmTypes} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Vendor">
+        <SlideOverVendorField source={source} isCompleted={isCompleted} vendors={vendors} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Status">
+        <SlideOverInfoTabStatusField source={source} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Comp Doc">
+        <DocBadge row={source} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="POC">
+        <span className="text-[12.5px]" style={{ color: "var(--color-text-secondary)" }}>
+          {formatPocLine(poc)}
+        </span>
+      </SlideOverInfoRow>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-edit-view.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-edit-view.tsx
new file mode 100644
index 00000000..fc12a91e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-edit-view.tsx
@@ -0,0 +1,242 @@
+import { AssignedToCell } from "@/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell";
+import { ApptTimeCell } from "@/app/(protected)/workorders/_components/list/table/cells/appt-time-cell";
+import { DateCell } from "@/app/(protected)/workorders/_components/list/table/cells/date-cell";
+import { DueDateCell } from "@/app/(protected)/workorders/_components/list/table/cells/due-date-cell";
+import { EditableWONumberCell } from "@/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell";
+import { PMTypeCell } from "@/app/(protected)/workorders/_components/list/table/cells/pm-type-cell";
+import { SiteCell } from "@/app/(protected)/workorders/_components/list/table/cells/site-cell";
+import { StatusCell } from "@/app/(protected)/workorders/_components/list/table/cells/status-cell";
+import { TypeCell } from "@/app/(protected)/workorders/_components/list/table/cells/type-cell";
+import { VendorCell } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-cell";
+import { SlideOverInfoRow } from "@/app/(protected)/workorders/_components/detail/slide-over-info-row";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WizardWOStatus } from "@/domain/work-orders/types/work-order-wizard";
+import { deriveDayFields } from "@/domain/work-orders/utils/table-day-utils";
+import { toVendorTablePatch } from "@/domain/work-orders/utils/vendor-assignment-patch";
+import { DocBadge } from "./slide-over-doc-badge";
+import {
+  clearDueDateBeforeSchedule,
+  resolveDueDateFloor,
+} from "@/domain/work-orders/utils/due-date-floor";
+
+type SlideOverInfoTabEditViewProps = {
+  draft: WorkOrderTableRow;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allOrders: WorkOrderTableRow[];
+  onDraftChange: (patch: Partial<WorkOrderTableRow>) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+  onRequestComplete?: () => void;
+};
+
+function SlideOverScheduleOnField({
+  draft,
+  onDraftChange,
+}: {
+  draft: WorkOrderTableRow;
+  onDraftChange: (patch: Partial<WorkOrderTableRow>) => void;
+}) {
+  const hasSchedule =
+    Boolean(draft.scheduledOn) || Boolean(draft.targetWeek) || Boolean(draft.scheduleEnd);
+
+  return (
+    <DateCell
+      value={draft.scheduledOn}
+      allowWeekMode
+      targetWeek={draft.targetWeek}
+      defaultMode={draft.scheduleWeekOnly ? "week" : "date"}
+      scheduleEnd={draft.scheduleEnd}
+      schedMode={draft.schedMode}
+      onSave={(scheduledOn) =>
+        onDraftChange({
+          ...clearDueDateBeforeSchedule(draft.dueDate, scheduledOn),
+          scheduledOn,
+          scheduleWeekOnly: false,
+          targetWeek: scheduledOn ? "" : draft.targetWeek,
+          scheduleEnd: "",
+          schedMode: "date",
+          isPastDue: false,
+          ...deriveDayFields(scheduledOn),
+        })
+      }
+      onSaveWeek={(weekStart) =>
+        onDraftChange({
+          ...clearDueDateBeforeSchedule(draft.dueDate, weekStart),
+          scheduledOn: "",
+          targetWeek: weekStart,
+          scheduleWeekOnly: true,
+          scheduleEnd: "",
+          schedMode: "week",
+          isPastDue: false,
+          ...deriveDayFields(""),
+        })
+      }
+      onSaveRange={(start, end) =>
+        onDraftChange({
+          ...clearDueDateBeforeSchedule(draft.dueDate, start),
+          scheduledOn: start,
+          scheduleEnd: end,
+          schedMode: "range",
+          scheduleWeekOnly: false,
+          targetWeek: "",
+          isPastDue: false,
+          ...deriveDayFields(start),
+        })
+      }
+      onClear={
+        hasSchedule
+          ? () =>
+              onDraftChange({
+                scheduledOn: "",
+                scheduleWeekOnly: false,
+                targetWeek: "",
+                scheduleEnd: "",
+                schedMode: undefined,
+                isPastDue: false,
+                ...deriveDayFields(""),
+              })
+          : undefined
+      }
+    />
+  );
+}
+
+export function SlideOverInfoTabEditView({
+  draft,
+  users,
+  sites,
+  vendors,
+  pmTypes,
+  allOrders,
+  onDraftChange,
+  onDuplicateFound,
+  onRequestComplete,
+}: SlideOverInfoTabEditViewProps) {
+  return (
+    <div>
+      <SlideOverInfoRow label="WO #">
+        <EditableWONumberCell
+          value={draft.woNumber}
+          rescheduleCount={draft.rescheduleCount}
+          carriedOver={draft.carriedOver}
+          originalDate={draft.originalDate}
+          originalWeek={draft.originalWeek}
+          scheduledOn={draft.scheduledOn}
+          status={draft.status}
+          currentId={draft.id}
+          allOrders={allOrders}
+          onSave={(woNumber) => onDraftChange({ woNumber })}
+          onDuplicateFound={onDuplicateFound}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Site">
+        <SiteCell
+          value={draft.site}
+          location={draft.location}
+          locationId={draft.locationId}
+          pocName={draft.pocName}
+          pocPhone={draft.pocPhone}
+          pocNotes={draft.pocNotes}
+          additionalContacts={draft.additionalContacts}
+          sites={sites}
+          onSave={(patch) =>
+            onDraftChange({
+              site: patch.site,
+              location: patch.location,
+              locationId: patch.locationId,
+              pocName: patch.pocName,
+              pocPhone: patch.pocPhone,
+              pocNotes: patch.pocNotes,
+              ...(patch.additionalContacts !== undefined
+                ? { additionalContacts: patch.additionalContacts }
+                : {}),
+            })
+          }
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Type of WO">
+        <TypeCell
+          value={draft.type}
+          severity={draft.severity}
+          onSave={(type, severity) => onDraftChange({ type, severity })}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Assigned To">
+        <AssignedToCell
+          dispatcherId={draft.dispatcherId}
+          users={users}
+          onSave={(id, name) => onDraftChange({ dispatcherId: id, dispatcherName: name })}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Schedule On">
+        <SlideOverScheduleOnField draft={draft} onDraftChange={onDraftChange} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Due Date">
+        <DueDateCell
+          type={draft.type}
+          value={draft.dueDate}
+          minDate={resolveDueDateFloor(draft)}
+          onSave={(dueDate) => onDraftChange({ dueDate })}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Appt Time (optional)">
+        <ApptTimeCell
+          apptTime={draft.apptTime}
+          onSave={(apptTime) => onDraftChange({ apptTime })}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Service">
+        <PMTypeCell
+          value={draft.pm}
+          pmTypes={pmTypes}
+          serviceNotes={draft.serviceNotes}
+          extraServices={draft.extraServices}
+          avetaRequired={draft.avetaRequired}
+          woNumber={draft.woNumber}
+          onSave={(pm) => onDraftChange({ pm })}
+          onSaveDetails={(details) =>
+            onDraftChange({
+              pm: details.pm,
+              serviceNotes: details.serviceNotes,
+              extraServices: details.extraServices,
+              avetaRequired: details.avetaRequired,
+            })
+          }
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Vendor">
+        <VendorCell
+          company={draft.company}
+          tech={draft.tech}
+          techPhone={draft.techPhone}
+          vendors={vendors}
+          onSave={(patch) => onDraftChange(toVendorTablePatch(patch))}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Status">
+        <StatusCell
+          wo={draft}
+          onChangeStatus={(status: WizardWOStatus) => onDraftChange({ status })}
+          onOpenSlideOver={() => {}}
+          onRequestComplete={onRequestComplete}
+        />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="Comp Doc">
+        <DocBadge row={draft} />
+      </SlideOverInfoRow>
+      <SlideOverInfoRow label="POC">
+        <span className="text-[13px]" style={{ color: "var(--color-text-secondary)" }}>
+          {draft.pocName || "—"}
+          {draft.pocPhone ? ` · ${draft.pocPhone}` : ""}
+        </span>
+      </SlideOverInfoRow>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-status-field.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-status-field.tsx
new file mode 100644
index 00000000..a01d741d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-status-field.tsx
@@ -0,0 +1,26 @@
+import { WoTableStatusLabel } from "@/app/(protected)/workorders/_components/list/table/cells/wo-table-status-label";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type SlideOverInfoTabStatusFieldProps = {
+  source: WorkOrderTableRow;
+};
+
+export function SlideOverInfoTabStatusField({ source }: SlideOverInfoTabStatusFieldProps) {
+  if (source.isPastDue) {
+    return (
+      <span
+        className="inline-flex items-center gap-1.5 text-[12.5px] font-semibold"
+        style={{ color: "var(--status-pastdue-text)" }}
+      >
+        <span className="h-2 w-2 shrink-0 rounded-full bg-[#BE123C]" />
+        Past Due
+      </span>
+    );
+  }
+
+  if (source.status) {
+    return <WoTableStatusLabel status={source.status} />;
+  }
+
+  return <span style={{ color: "var(--color-text-muted)" }}>—</span>;
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-vendor-field.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-vendor-field.tsx
new file mode 100644
index 00000000..6c66e829
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-vendor-field.tsx
@@ -0,0 +1,25 @@
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type SlideOverInfoTabVendorFieldProps = {
+  source: WorkOrderTableRow;
+};
+
+/** Display-only vendor summary. Assignment edits belong in edit mode (VendorCell). */
+export function SlideOverInfoTabVendorField({ source }: SlideOverInfoTabVendorFieldProps) {
+  if (!source.tech && !source.company) {
+    return <span style={{ color: "var(--color-text-muted)" }}>—</span>;
+  }
+
+  return (
+    <div>
+      <div className="text-[13px] font-semibold" style={{ color: "var(--foreground)" }}>
+        {source.tech || source.company}
+      </div>
+      {Boolean(source.tech && source.company) && (
+        <div className="text-[11px] font-normal" style={{ color: "var(--muted-foreground)" }}>
+          {source.company}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab.tsx
new file mode 100644
index 00000000..a9a186f2
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab.tsx
@@ -0,0 +1,72 @@
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { SlideOverInfoTabDisplayView } from "./slide-over-info-tab-display-view";
+import { SlideOverInfoTabEditView } from "./slide-over-info-tab-edit-view";
+
+type SlideOverInfoTabProps = {
+  row: WorkOrderTableRow;
+  draft: WorkOrderTableRow;
+  editing: boolean;
+  isCancelled: boolean;
+  isCompleted?: boolean;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allOrders: WorkOrderTableRow[];
+  onDraftChange: (patch: Partial<WorkOrderTableRow>) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+  onRequestComplete?: () => void;
+};
+
+export function SlideOverInfoTab({
+  row,
+  draft,
+  editing,
+  isCancelled,
+  isCompleted = false,
+  users,
+  sites,
+  vendors,
+  pmTypes,
+  allOrders,
+  onDraftChange,
+  onDuplicateFound,
+  onRequestComplete,
+}: SlideOverInfoTabProps) {
+  const isEditing = editing && !isCancelled && !isCompleted;
+  const source = isEditing ? draft : row;
+  const dispatcher = users.find((u) => String(u.id) === source.dispatcherId);
+
+  if (isEditing) {
+    return (
+      <SlideOverInfoTabEditView
+        draft={draft}
+        users={users}
+        sites={sites}
+        vendors={vendors}
+        pmTypes={pmTypes}
+        allOrders={allOrders}
+        onDraftChange={onDraftChange}
+        onDuplicateFound={onDuplicateFound}
+        onRequestComplete={onRequestComplete}
+      />
+    );
+  }
+
+  return (
+    <SlideOverInfoTabDisplayView
+      source={source}
+      isCancelled={isCancelled}
+      isCompleted={isCompleted}
+      dispatcher={dispatcher}
+      sites={sites}
+      vendors={vendors}
+      pmTypes={pmTypes}
+    />
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/use-slide-over-edit-state.ts b/src/app/(protected)/workorders/_components/detail/use-slide-over-edit-state.ts
new file mode 100644
index 00000000..4fe4a6b1
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/use-slide-over-edit-state.ts
@@ -0,0 +1,188 @@
+import { useEffect, useMemo, useState } from "react";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import {
+  buildSlideOverPatch,
+  isSlideOverDraftDirty,
+} from "@/domain/work-orders/utils/slide-over-draft";
+import { notifySlideOverSaveSuccess } from "@/domain/work-orders/utils/work-order-feedback-toasts";
+import {
+  isWorkOrderCoreLocked,
+  isWorkOrderFullyLocked,
+} from "@/domain/work-orders/utils/work-order-lock";
+import type { SlideOverSaveOptions } from "./work-order-slide-over";
+import type { SlideOverTab } from "./use-work-order-slide-over";
+
+function isSlideOverInfoLocked(status: string | null | undefined): boolean {
+  return isWorkOrderFullyLocked(status) || isWorkOrderCoreLocked(status);
+}
+
+type UseSlideOverEditStateArgs = {
+  row: WorkOrderTableRow | null;
+  editMode: boolean;
+  infoSource: WorkOrderTableRow | null | undefined;
+  onSave: (id: string | number, patch: WorkOrderTablePatch, options?: SlideOverSaveOptions) => void;
+  onClose: () => void;
+  closeDisabled: boolean;
+  setTab: (tab: SlideOverTab) => void;
+};
+
+export function useSlideOverEditState({
+  row,
+  editMode,
+  infoSource,
+  onSave,
+  onClose,
+  closeDisabled,
+  setTab,
+}: UseSlideOverEditStateArgs) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState<WorkOrderTableRow | null>(null);
+  /** Last confirmed baseline for dirty/patch — not overwritten by optimistic parent row. */
+  const [baseline, setBaseline] = useState<WorkOrderTableRow | null>(null);
+  const [showUnsaved, setShowUnsaved] = useState(false);
+  const [unsavedIntent, setUnsavedIntent] = useState<"close" | "cancel-edit" | null>(null);
+
+  // Reset draft/baseline only when the opened WO identity or editMode intent changes —
+  // not on every optimistic parent-row field update during a failed/in-flight save.
+  useEffect(() => {
+    if (!row) {
+      setDraft(null);
+      setBaseline(null);
+      setEditing(false);
+      setShowUnsaved(false);
+      setUnsavedIntent(null);
+      return;
+    }
+    setDraft(row);
+    setBaseline(row);
+    setEditing(editMode && !isSlideOverInfoLocked(row.status));
+    setTab("info");
+    setShowUnsaved(false);
+    setUnsavedIntent(null);
+    // Intentionally identity-only: depending on `row` would absorb optimistic patches.
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- row.id / editMode gate
+  }, [row?.id, editMode]);
+
+  const lockStatus = infoSource?.status ?? row?.status;
+  const isInfoLocked = isSlideOverInfoLocked(lockStatus);
+
+  useEffect(() => {
+    if (!isInfoLocked) return;
+    setEditing(false);
+    setShowUnsaved(false);
+    setUnsavedIntent(null);
+    const source = infoSource ?? row;
+    if (source) {
+      setDraft(source);
+      setBaseline(source);
+    }
+  }, [isInfoLocked, infoSource, row]);
+
+  useEffect(() => {
+    if (!infoSource) return;
+    if (!editing) {
+      setDraft(infoSource);
+      setBaseline(infoSource);
+      return;
+    }
+    // While editing, freeze baseline so optimistic parent-row patches cannot clear dirty.
+    setDraft((prev) => {
+      if (prev && baseline && isSlideOverDraftDirty(prev, baseline)) return prev;
+      return infoSource;
+    });
+  }, [infoSource, editing, baseline]);
+
+  const activeDraft = draft ?? infoSource;
+  const dirtyBaseline = baseline ?? infoSource;
+  const isDirty = useMemo(() => {
+    if (!dirtyBaseline || !activeDraft || !editing) return false;
+    return isSlideOverDraftDirty(activeDraft, dirtyBaseline);
+  }, [activeDraft, dirtyBaseline, editing]);
+
+  const handleDraftChange = (patch: Partial<WorkOrderTableRow>) => {
+    setDraft((prev) => (prev ? { ...prev, ...patch } : prev));
+  };
+
+  const commit = () => {
+    if (!row || !activeDraft || !dirtyBaseline) return;
+    if (isSlideOverInfoLocked(infoSource?.status ?? row.status)) return;
+    const patch = buildSlideOverPatch(activeDraft, dirtyBaseline);
+    if (Object.keys(patch).length === 0) {
+      setEditing(false);
+      setShowUnsaved(false);
+      return;
+    }
+    onSave(row.id, patch, {
+      onSuccess: () => {
+        notifySlideOverSaveSuccess(patch);
+        setBaseline(activeDraft);
+        setEditing(false);
+        setShowUnsaved(false);
+      },
+    });
+  };
+
+  const discard = () => {
+    if (!dirtyBaseline) return;
+    setDraft(dirtyBaseline);
+    setEditing(false);
+    setShowUnsaved(false);
+  };
+
+  const requestClose = () => {
+    if (closeDisabled) return;
+    if (editing && isDirty) {
+      setUnsavedIntent("close");
+      setShowUnsaved(true);
+      return;
+    }
+    onClose();
+  };
+
+  const handleCancelEdit = () => {
+    if (isDirty) {
+      setUnsavedIntent("cancel-edit");
+      setShowUnsaved(true);
+      return;
+    }
+    if (dirtyBaseline) setDraft(dirtyBaseline);
+    setEditing(false);
+  };
+
+  const handleDiscard = () => {
+    const intent = unsavedIntent;
+    discard();
+    setUnsavedIntent(null);
+    // Close only when Discard was opened from panel close — never from cancel-edit.
+    // Skip when uploads block close (closeDisabled).
+    if (intent === "close" && !closeDisabled) {
+      onClose();
+    }
+  };
+
+  const startEditing = () => {
+    if (!infoSource || isSlideOverInfoLocked(infoSource.status)) return;
+    setDraft(infoSource);
+    setBaseline(infoSource);
+    setEditing(true);
+    setTab("info");
+  };
+
+  return {
+    editing,
+    activeDraft,
+    isDirty,
+    showUnsaved,
+    setShowUnsaved,
+    handleDraftChange,
+    commit,
+    discard,
+    handleDiscard,
+    requestClose,
+    handleCancelEdit,
+    startEditing,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/detail/use-slide-over-media-state.ts b/src/app/(protected)/workorders/_components/detail/use-slide-over-media-state.ts
new file mode 100644
index 00000000..5bde5578
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/use-slide-over-media-state.ts
@@ -0,0 +1,207 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "react-toastify";
+import type { MediaUploadRequest } from "@/app/(protected)/workorders/_components/media/media-uploader";
+import { useMediaUploadSession } from "@/app/(protected)/workorders/_hooks/use-media-upload-session";
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import { boardMediaItemsToMediaFiles } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail";
+import type {
+  useDeleteWorkOrderMedia,
+  useUpdateWorkOrderMediaCategory,
+  useUploadWorkOrderMedia,
+  UploadWorkOrderMediaInput,
+} from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import {
+  hasCompletionMediaGallery,
+  isCompletionSurfaceMedia,
+  isExtrasSurfaceMedia,
+  type MediaSurfaceOwnership,
+} from "@/domain/work-orders/utils/partition-slide-over-media";
+
+type UseSlideOverMediaStateArgs = {
+  detailForRow?: WorkOrderBoardDetail;
+  uploadMediaMutation: ReturnType<typeof useUploadWorkOrderMedia>;
+  deleteMediaMutation: ReturnType<typeof useDeleteWorkOrderMedia>;
+  categorizeMediaMutation: ReturnType<typeof useUpdateWorkOrderMediaCategory>;
+};
+
+function addOwnedId(previous: Set<string>, id: string | undefined): Set<string> {
+  if (!id) return previous;
+  const next = new Set(previous);
+  next.add(id);
+  return next;
+}
+
+function dropOwnedId(previous: Set<string>, id: string): Set<string> {
+  if (!previous.has(id)) return previous;
+  const next = new Set(previous);
+  next.delete(id);
+  return next;
+}
+
+const OWNERSHIP_STORAGE_PREFIX = "work-order-media-surface:";
+
+function loadOwnership(workOrderId: string | number | undefined): MediaSurfaceOwnership {
+  if (workOrderId == null) return { completionOwnedIds: new Set(), extraOwnedIds: new Set() };
+  try {
+    const stored = sessionStorage.getItem(`${OWNERSHIP_STORAGE_PREFIX}${workOrderId}`);
+    if (!stored) return { completionOwnedIds: new Set(), extraOwnedIds: new Set() };
+    const parsed = JSON.parse(stored) as { completion?: unknown; extra?: unknown };
+    return {
+      completionOwnedIds: new Set(Array.isArray(parsed.completion) ? parsed.completion : []),
+      extraOwnedIds: new Set(Array.isArray(parsed.extra) ? parsed.extra : []),
+    };
+  } catch {
+    return { completionOwnedIds: new Set(), extraOwnedIds: new Set() };
+  }
+}
+
+function saveOwnership(
+  workOrderId: string | number | undefined,
+  ownership: MediaSurfaceOwnership,
+): void {
+  if (workOrderId == null) return;
+  try {
+    sessionStorage.setItem(
+      `${OWNERSHIP_STORAGE_PREFIX}${workOrderId}`,
+      JSON.stringify({
+        completion: [...ownership.completionOwnedIds],
+        extra: [...ownership.extraOwnedIds],
+      }),
+    );
+  } catch {
+    return;
+  }
+}
+
+export function useSlideOverMediaState({
+  detailForRow,
+  uploadMediaMutation,
+  deleteMediaMutation,
+  categorizeMediaMutation,
+}: UseSlideOverMediaStateArgs) {
+  const workOrderId = detailForRow?.info.id;
+  const completionHasGallery = hasCompletionMediaGallery(detailForRow?.info.type);
+  const [mediaBatchPending, setMediaBatchPending] = useState(false);
+  const [ownership, setOwnershipState] = useState<MediaSurfaceOwnership>(() =>
+    loadOwnership(workOrderId),
+  );
+
+  useEffect(() => {
+    setOwnershipState(loadOwnership(workOrderId));
+  }, [workOrderId]);
+
+  const updateOwnership = useCallback(
+    (update: (current: MediaSurfaceOwnership) => MediaSurfaceOwnership) => {
+      setOwnershipState((current) => {
+        const next = update(current);
+        saveOwnership(workOrderId, next);
+        return next;
+      });
+    },
+    [workOrderId],
+  );
+
+  const persistCompletionUpload = useCallback(
+    async (input: UploadWorkOrderMediaInput) => {
+      const item = await uploadMediaMutation.mutateAsync(input);
+      updateOwnership((current) => ({
+        completionOwnedIds: addOwnedId(new Set(current.completionOwnedIds), item.id),
+        extraOwnedIds: dropOwnedId(new Set(current.extraOwnedIds), item.id),
+      }));
+      return item;
+    },
+    [updateOwnership, uploadMediaMutation],
+  );
+
+  const { uploads, startUploads, retryUpload, cancelUpload, removeLocal, isLocal } =
+    useMediaUploadSession(detailForRow, persistCompletionUpload);
+
+  const completionMedia = useMemo(
+    () => uploads.filter((item) => isCompletionSurfaceMedia(item, ownership, completionHasGallery)),
+    [uploads, ownership, completionHasGallery],
+  );
+
+  const extrasUploads = useMemo(
+    () =>
+      boardMediaItemsToMediaFiles(detailForRow?.media ?? []).filter((item) =>
+        isExtrasSurfaceMedia(item, ownership, completionHasGallery),
+      ),
+    [detailForRow?.media, ownership, completionHasGallery],
+  );
+
+  const hasLocalUploading = uploads.some((item) => item.uploadStatus === "uploading");
+  const mediaPending =
+    mediaBatchPending ||
+    hasLocalUploading ||
+    uploadMediaMutation.isPending ||
+    deleteMediaMutation.isPending ||
+    categorizeMediaMutation.isPending;
+
+  const uploadMediaRequests = (requests: MediaUploadRequest[]) => {
+    startUploads(requests);
+  };
+
+  const uploadExtraFiles = async (files: File[]) => {
+    setMediaBatchPending(true);
+    try {
+      for (const file of files) {
+        // Upload stays Extra; Aveta is applied only by an explicit Extra Docs PATCH.
+        const item = await uploadMediaMutation.mutateAsync({ file, category: "Extra" });
+        updateOwnership((current) => ({
+          completionOwnedIds: dropOwnedId(new Set(current.completionOwnedIds), item.id),
+          extraOwnedIds: addOwnedId(new Set(current.extraOwnedIds), item.id),
+        }));
+      }
+    } finally {
+      setMediaBatchPending(false);
+    }
+  };
+
+  const categorizeMedia = (mediaId: string, category: UploadableMediaCategory) => {
+    const workOrderVersion = detailForRow?.info.rowVersion;
+    if (!workOrderVersion) {
+      toast.error("Missing work order version. Refresh and try again.");
+      return;
+    }
+    categorizeMediaMutation.mutate(
+      { mediaId, category, workOrderVersion },
+      {
+        onSuccess: () => {
+          updateOwnership((current) => ({
+            completionOwnedIds: dropOwnedId(new Set(current.completionOwnedIds), mediaId),
+            extraOwnedIds:
+              category === "Extra"
+                ? addOwnedId(new Set(current.extraOwnedIds), mediaId)
+                : dropOwnedId(new Set(current.extraOwnedIds), mediaId),
+          }));
+        },
+      },
+    );
+  };
+
+  const removeMedia = (id: string) => {
+    if (isLocal(id)) {
+      removeLocal(id);
+      return;
+    }
+    const workOrderVersion = detailForRow?.info.rowVersion;
+    if (!workOrderVersion) {
+      toast.error("Missing work order version. Refresh and try again.");
+      return;
+    }
+    deleteMediaMutation.mutate({ mediaId: id, workOrderVersion });
+  };
+
+  return {
+    completionMedia,
+    extrasUploads,
+    mediaPending,
+    uploadMediaRequests,
+    uploadExtraFiles,
+    categorizeMedia,
+    retryUpload,
+    cancelUpload,
+    removeMedia,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/detail/use-work-order-slide-over.ts b/src/app/(protected)/workorders/_components/detail/use-work-order-slide-over.ts
new file mode 100644
index 00000000..dee476ec
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/use-work-order-slide-over.ts
@@ -0,0 +1,209 @@
+import { useState } from "react";
+import { toast } from "react-toastify";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { useWorkOrderBoardDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import {
+  useAddWorkOrderComment,
+  useDeleteWorkOrderMedia,
+  useUpdateWorkOrderComment,
+  useUpdateWorkOrderMediaCategory,
+  useUploadCompletionDoc,
+  useUploadWorkOrderMedia,
+} from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import {
+  canMutateWorkOrderComments,
+  canMutateWorkOrderExtraDocs,
+  isWorkOrderCompleted,
+  isWorkOrderFullyLocked,
+} from "@/domain/work-orders/utils/work-order-lock";
+import { isWorkOrderDocumentsReadOnly } from "@/domain/work-orders/utils/work-order-media-limits";
+import { todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+import { useAuthContext } from "@/providers/auth-context";
+import { useSlideOverEditState } from "./use-slide-over-edit-state";
+import { useSlideOverMediaState } from "./use-slide-over-media-state";
+import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail";
+import type { SlideOverSaveOptions } from "./work-order-slide-over";
+
+export type SlideOverTab = "info" | "comments" | "audit" | "completion" | "extras";
+
+type UseWorkOrderSlideOverArgs = {
+  row: WorkOrderTableRow | null;
+  editMode: boolean;
+  onSave: (id: string | number, patch: WorkOrderTablePatch, options?: SlideOverSaveOptions) => void;
+  onClose: () => void;
+  saving?: boolean;
+};
+
+type CompletionUploadMutate = (
+  input: { file: File; workOrderVersion: string },
+  options: { onSuccess: () => Promise<void> | void },
+) => void;
+
+function uploadSlideOverCompletionPdf({
+  file,
+  row,
+  infoSource,
+  onSave,
+  mutate,
+}: {
+  file: File;
+  row: WorkOrderTableRow | null;
+  infoSource: WorkOrderTableRow | null | undefined;
+  onSave: UseWorkOrderSlideOverArgs["onSave"];
+  mutate: CompletionUploadMutate;
+}) {
+  const version = infoSource?.rowVersion;
+  if (!version || !row || !infoSource) {
+    toast.error("Missing work order version. Refresh and try again.");
+    return;
+  }
+  mutate(
+    { file, workOrderVersion: version },
+    {
+      onSuccess: async () => {
+        const patch: WorkOrderTablePatch = { docStatus: "Yes" };
+        if (!infoSource.completedDate) {
+          patch.completedDate = todayIso();
+        }
+        try {
+          await new Promise<void>((resolve, reject) => {
+            onSave(row.id, patch, {
+              onSuccess: () => resolve(),
+              onError: (error) => reject(error),
+            });
+          });
+        } catch {
+          toast.error("Uploaded PDF but failed to update document status. Refresh and retry.");
+        }
+      },
+    },
+  );
+}
+
+function resolveSlideOverSource(
+  detail: WorkOrderBoardDetail | undefined,
+  row: WorkOrderTableRow | null,
+) {
+  const detailForRow =
+    detail && row && String(detail.info.id) === String(row.id) ? detail : undefined;
+  return { detailForRow, infoSource: detailForRow?.info ?? row };
+}
+
+function slideOverReadFlags(status: string | null | undefined) {
+  return {
+    isCancelled: isWorkOrderFullyLocked(status),
+    isCompleted: isWorkOrderCompleted(status),
+    isDocumentsReadOnly: isWorkOrderDocumentsReadOnly(status),
+    isCommentsReadOnly: !canMutateWorkOrderComments(status),
+    isExtrasReadOnly: !canMutateWorkOrderExtraDocs(status),
+  };
+}
+
+function slideOverErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : "Failed to load work order details.";
+}
+
+export function useWorkOrderSlideOver({
+  row,
+  editMode,
+  onSave,
+  onClose,
+  saving,
+}: UseWorkOrderSlideOverArgs) {
+  const { user } = useAuthContext();
+  const workOrderId = row?.id;
+  const {
+    data: detail,
+    isLoading,
+    isFetching,
+    error,
+    refetch,
+  } = useWorkOrderBoardDetail(workOrderId, Boolean(row));
+  const commentMutation = useAddWorkOrderComment(workOrderId ?? "");
+  const updateCommentMutation = useUpdateWorkOrderComment(workOrderId ?? "");
+  const uploadMediaMutation = useUploadWorkOrderMedia(workOrderId ?? "");
+  const categorizeMediaMutation = useUpdateWorkOrderMediaCategory(workOrderId ?? "");
+  const deleteMediaMutation = useDeleteWorkOrderMedia(workOrderId ?? "");
+  const uploadCompletionMutation = useUploadCompletionDoc(workOrderId ?? "");
+
+  const [tab, setTab] = useState<SlideOverTab>("info");
+  const { detailForRow, infoSource } = resolveSlideOverSource(detail, row);
+  const readFlags = slideOverReadFlags(infoSource?.status);
+
+  const {
+    completionMedia,
+    extrasUploads,
+    mediaPending,
+    uploadMediaRequests,
+    uploadExtraFiles,
+    categorizeMedia,
+    retryUpload,
+    cancelUpload,
+    removeMedia,
+  } = useSlideOverMediaState({
+    detailForRow,
+    uploadMediaMutation,
+    deleteMediaMutation,
+    categorizeMediaMutation,
+  });
+  const completionPending = uploadCompletionMutation.isPending;
+  const closeDisabled = Boolean(saving || mediaPending || completionPending);
+
+  const editState = useSlideOverEditState({
+    row,
+    editMode,
+    infoSource,
+    onSave,
+    onClose,
+    closeDisabled,
+    setTab,
+  });
+
+  const uploadCompletionPdf = (file: File) => {
+    uploadSlideOverCompletionPdf({
+      file,
+      row,
+      infoSource,
+      onSave,
+      mutate: uploadCompletionMutation.mutate,
+    });
+  };
+
+  const showDetailSkeleton = isLoading && !detailForRow;
+  const errorMessage = slideOverErrorMessage(error);
+
+  return {
+    user,
+    detail,
+    isLoading,
+    isFetching,
+    error,
+    refetch,
+    commentMutation,
+    updateCommentMutation,
+    tab,
+    setTab,
+    detailForRow,
+    infoSource,
+    ...readFlags,
+    completionMedia,
+    extrasUploads,
+    mediaPending,
+    completionPending,
+    closeDisabled,
+    uploadMediaRequests,
+    uploadExtraFiles,
+    categorizeMedia,
+    retryUpload,
+    cancelUpload,
+    removeMedia,
+    deleteMediaMutation,
+    uploadCompletionPdf,
+    showDetailSkeleton,
+    errorMessage,
+    ...editState,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-activity-section.tsx b/src/app/(protected)/workorders/_components/detail/work-order-activity-section.tsx
new file mode 100644
index 00000000..7b72c393
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-activity-section.tsx
@@ -0,0 +1,101 @@
+import { useMemo, useState } from "react";
+import { Box, Paper, Tab, Tabs, TextField, Typography } from "@mui/material";
+import { CommentTimeline } from "@/components/common/comment-timeline";
+import { mapWorkOrderCommentsToTimeline } from "@/components/common/comment-timeline-mappers";
+import { Button } from "@/components/ui/button";
+import { AuditTimeline } from "./audit-timeline";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+
+type ActivityTab = "customer" | "internal" | "audit";
+
+type WorkOrderActivitySectionProps = {
+  wo: WorkOrderDetail;
+  onCommentSubmit: (
+    text: string,
+    commentType: "customer" | "internal",
+    options?: { onSuccess?: () => void },
+  ) => void;
+  isCommentPending: boolean;
+};
+
+export function WorkOrderActivitySection({
+  wo,
+  onCommentSubmit,
+  isCommentPending,
+}: WorkOrderActivitySectionProps) {
+  const [activeTab, setActiveTab] = useState<ActivityTab>("customer");
+  const [commentText, setCommentText] = useState("");
+
+  const customerComments = useMemo(
+    () => (wo.comments ?? []).filter((comment) => comment.commentType === "customer"),
+    [wo.comments],
+  );
+  const internalComments = useMemo(
+    () => (wo.comments ?? []).filter((comment) => comment.commentType === "internal"),
+    [wo.comments],
+  );
+  const auditLog = wo.auditLog ?? [];
+
+  const handleCommentSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!commentText.trim()) {
+      return;
+    }
+    onCommentSubmit(commentText.trim(), activeTab === "customer" ? "customer" : "internal", {
+      onSuccess: () => setCommentText(""),
+    });
+  };
+
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        Activity
+      </Typography>
+      <Tabs
+        value={activeTab}
+        onChange={(_event, value: ActivityTab) => setActiveTab(value)}
+        className="mb-3"
+      >
+        <Tab value="customer" label={`Customer (${customerComments.length})`} />
+        <Tab value="internal" label={`Internal (${internalComments.length})`} />
+        <Tab value="audit" label={`Audit Log (${auditLog.length})`} />
+      </Tabs>
+
+      {activeTab === "customer" && (
+        <CommentTimeline
+          items={mapWorkOrderCommentsToTimeline(customerComments)}
+          emptyMessage="No comments yet."
+        />
+      )}
+      {activeTab === "internal" && (
+        <CommentTimeline
+          items={mapWorkOrderCommentsToTimeline(internalComments)}
+          emptyMessage="No comments yet."
+        />
+      )}
+      {activeTab === "audit" && <AuditTimeline entries={auditLog} />}
+
+      {activeTab === "internal" && (
+        <Box component="form" onSubmit={handleCommentSubmit} className="mt-4 flex flex-col gap-2">
+          <TextField
+            multiline
+            rows={2}
+            value={commentText}
+            onChange={(event) => setCommentText(event.target.value)}
+            placeholder="Type a comment..."
+            disabled={isCommentPending}
+          />
+          <Button
+            type="submit"
+            className="self-end"
+            disabled={!commentText.trim()}
+            loading={isCommentPending}
+            loadingText="Sending…"
+          >
+            Send
+          </Button>
+        </Box>
+      )}
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-assignee-menu.tsx b/src/app/(protected)/workorders/_components/detail/work-order-assignee-menu.tsx
new file mode 100644
index 00000000..fed7b761
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-assignee-menu.tsx
@@ -0,0 +1,56 @@
+import { Button, Menu, MenuItem } from "@mui/material";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { useMenuAnchor } from "@/hooks/use-menu-anchor";
+
+type WorkOrderAssigneeMenuProps = {
+  assignedTo: string;
+  users: WorkOrderUser[];
+  disabled?: boolean;
+  onAssign: (userId: string | number, userName: string) => void;
+};
+
+export function WorkOrderAssigneeMenu({
+  assignedTo,
+  users,
+  disabled = false,
+  onAssign,
+}: WorkOrderAssigneeMenuProps) {
+  const { anchorEl, open, setAnchor, close } = useMenuAnchor();
+
+  return (
+    <>
+      <Button
+        size="small"
+        disabled={disabled}
+        aria-busy={disabled || undefined}
+        onClick={(event) => setAnchor(event.currentTarget)}
+      >
+        {disabled ? "Updating…" : assignedTo || "Unassigned"}
+      </Button>
+      <Menu anchorEl={anchorEl} open={open} onClose={close}>
+        <MenuItem
+          disabled={disabled}
+          onClick={() => {
+            close();
+            onAssign("", "");
+          }}
+        >
+          Unassigned
+        </MenuItem>
+        {users.map((user) => (
+          <MenuItem
+            key={String(user.id)}
+            selected={assignedTo === user.name}
+            disabled={disabled}
+            onClick={() => {
+              close();
+              onAssign(user.id, user.name);
+            }}
+          >
+            {user.name}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-description-accordion.tsx b/src/app/(protected)/workorders/_components/detail/work-order-description-accordion.tsx
new file mode 100644
index 00000000..ec67beae
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-description-accordion.tsx
@@ -0,0 +1,20 @@
+import { Accordion, AccordionDetails, AccordionSummary, Typography } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+
+type WorkOrderDescriptionAccordionProps = {
+  wo: WorkOrderDetail;
+};
+
+export function WorkOrderDescriptionAccordion({ wo }: WorkOrderDescriptionAccordionProps) {
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography sx={{ fontWeight: 600 }}>Description</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>{wo.description || "No description provided."}</Typography>
+      </AccordionDetails>
+    </Accordion>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-detail-sections.tsx b/src/app/(protected)/workorders/_components/detail/work-order-detail-sections.tsx
new file mode 100644
index 00000000..d1ba2d09
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-detail-sections.tsx
@@ -0,0 +1,49 @@
+import type { WorkOrderDetail, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { WorkOrderActivitySection } from "./work-order-activity-section";
+import { WorkOrderDescriptionAccordion } from "./work-order-description-accordion";
+import { WorkOrderDetailsCard } from "./work-order-details-card";
+import { WorkOrderDispatchesAccordion } from "./work-order-dispatches-accordion";
+import { WorkOrderSimpleAccordions } from "./work-order-simple-accordions";
+
+type WorkOrderDetailsSectionProps = {
+  wo: WorkOrderDetail;
+  users: WorkOrderUser[];
+  onAssign: (userId: string | number, userName: string) => void;
+  isAssignPending?: boolean;
+  onDispatchClick: (dispatchId: string | number) => void;
+  onCommentSubmit: (
+    text: string,
+    commentType: "customer" | "internal",
+    options?: { onSuccess?: () => void },
+  ) => void;
+  isCommentPending: boolean;
+};
+
+export function WorkOrderDetailsSection({
+  wo,
+  users,
+  onAssign,
+  isAssignPending = false,
+  onDispatchClick,
+  onCommentSubmit,
+  isCommentPending,
+}: WorkOrderDetailsSectionProps) {
+  return (
+    <>
+      <WorkOrderDetailsCard
+        wo={wo}
+        users={users}
+        onAssign={onAssign}
+        isAssignPending={isAssignPending}
+      />
+      <WorkOrderSimpleAccordions wo={wo} />
+      <WorkOrderDispatchesAccordion wo={wo} onDispatchClick={onDispatchClick} />
+      <WorkOrderDescriptionAccordion wo={wo} />
+      <WorkOrderActivitySection
+        wo={wo}
+        onCommentSubmit={onCommentSubmit}
+        isCommentPending={isCommentPending}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-details-card.tsx b/src/app/(protected)/workorders/_components/detail/work-order-details-card.tsx
new file mode 100644
index 00000000..fb332ce1
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-details-card.tsx
@@ -0,0 +1,45 @@
+import { Box, Paper, Typography } from "@mui/material";
+import { DetailField, DetailFieldGrid } from "@/components/common/detail-field";
+import { WorkOrderAssigneeMenu } from "./work-order-assignee-menu";
+import type { WorkOrderDetail, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+
+type WorkOrderDetailsCardProps = {
+  wo: WorkOrderDetail;
+  users: WorkOrderUser[];
+  onAssign: (userId: string | number, userName: string) => void;
+  isAssignPending?: boolean;
+};
+
+export function WorkOrderDetailsCard({
+  wo,
+  users,
+  onAssign,
+  isAssignPending = false,
+}: WorkOrderDetailsCardProps) {
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        Details
+      </Typography>
+      <DetailFieldGrid>
+        <DetailField label="Internal WO" value={wo.internalWONumber} />
+        <DetailField label="Customer WO" value={wo.workOrderNumber || "—"} />
+        <DetailField label="Priority" value={wo.priority || "—"} />
+        <DetailField label="Location" value={wo.location || "—"} />
+        <Box>
+          <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
+            Assigned To
+          </Typography>
+          <WorkOrderAssigneeMenu
+            assignedTo={wo.assignedTo}
+            users={users}
+            disabled={isAssignPending}
+            onAssign={onAssign}
+          />
+        </Box>
+        <DetailField label="Source" value={wo.source || "—"} />
+        <DetailField label="TT" value={wo.tt || "—"} />
+      </DetailFieldGrid>
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-dispatches-accordion.tsx b/src/app/(protected)/workorders/_components/detail/work-order-dispatches-accordion.tsx
new file mode 100644
index 00000000..30de5b9e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-dispatches-accordion.tsx
@@ -0,0 +1,85 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+import { formatDateTime, getWaitTimeTextClass, timeSince, waitTimeColor } from "@/lib/time-utils";
+
+type WorkOrderDispatchesAccordionProps = {
+  wo: WorkOrderDetail;
+  onDispatchClick: (dispatchId: string | number) => void;
+};
+
+export function WorkOrderDispatchesAccordion({
+  wo,
+  onDispatchClick,
+}: WorkOrderDispatchesAccordionProps) {
+  return (
+    <Accordion defaultExpanded={Boolean(wo.dispatches.length)}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography sx={{ fontWeight: 600 }}>Dispatches ({wo.dispatches.length})</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        {wo.dispatches.length ? (
+          <TableContainer>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>Dispatch #</TableCell>
+                  <TableCell>Vendor</TableCell>
+                  <TableCell>NTE</TableCell>
+                  <TableCell>Status</TableCell>
+                  <TableCell>Date</TableCell>
+                  <TableCell>Wait</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {wo.dispatches.map((dispatch) => {
+                  const color = waitTimeColor(dispatch.dispatchedAt);
+                  return (
+                    <TableRow
+                      key={String(dispatch.id)}
+                      hover
+                      className="cursor-pointer"
+                      onClick={() => onDispatchClick(dispatch.id)}
+                    >
+                      <TableCell>{dispatch.dispatchNumber || dispatch.poNumber}</TableCell>
+                      <TableCell>{dispatch.vendorName}</TableCell>
+                      <TableCell>
+                        {dispatch.nteAmount != null ? `$${dispatch.nteAmount.toFixed(2)}` : "—"}
+                      </TableCell>
+                      <TableCell>{dispatch.status}</TableCell>
+                      <TableCell>
+                        {dispatch.dispatchedAt ? formatDateTime(dispatch.dispatchedAt) : "—"}
+                      </TableCell>
+                      <TableCell>
+                        {dispatch.status === "Sent" ? (
+                          <Typography variant="caption" className={getWaitTimeTextClass(color)}>
+                            {timeSince(dispatch.dispatchedAt)}
+                          </Typography>
+                        ) : (
+                          "—"
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        ) : (
+          <Typography color="text.secondary">No dispatches yet.</Typography>
+        )}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-simple-accordions.tsx b/src/app/(protected)/workorders/_components/detail/work-order-simple-accordions.tsx
new file mode 100644
index 00000000..9c8b4214
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-simple-accordions.tsx
@@ -0,0 +1,61 @@
+import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { DetailField, DetailFieldGrid } from "@/components/common/detail-field";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+import { formatDateTime } from "@/lib/time-utils";
+
+type WorkOrderSimpleAccordionsProps = {
+  wo: WorkOrderDetail;
+};
+
+export function WorkOrderSimpleAccordions({ wo }: WorkOrderSimpleAccordionsProps) {
+  return (
+    <>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Classification</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <DetailFieldGrid>
+            <DetailField label="Problem" value={wo.problem || "—"} />
+            <DetailField label="Trade" value={wo.trade || "—"} />
+            <DetailField label="Sub-Trade" value={wo.subTrade || "—"} />
+          </DetailFieldGrid>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Schedule</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <DetailField
+              label="Created"
+              value={wo.createdDateFull ? formatDateTime(wo.createdDateFull) : "—"}
+            />
+            <DetailField label="Due Date" value={wo.dueDate || "—"} />
+            <DetailField label="Scheduled" value={wo.scheduledDate || "—"} />
+            <DetailField label="Completed" value={wo.completedDate || "—"} />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Financial</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <DetailField
+              label="Vendor NTE"
+              value={wo.vendorNTE ? `$${parseFloat(wo.vendorNTE).toFixed(2)}` : "—"}
+            />
+            <DetailField label="Customer PO" value={wo.po || "—"} />
+            <DetailField label="Customer NTE" value="Not connected" />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-nav.tsx b/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-nav.tsx
new file mode 100644
index 00000000..2efcac54
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-nav.tsx
@@ -0,0 +1,52 @@
+import type { SlideOverTab } from "./use-work-order-slide-over";
+
+const SLIDE_OVER_TABS: { id: SlideOverTab; label: string }[] = [
+  { id: "info", label: "Info" },
+  { id: "comments", label: "Comments" },
+  { id: "audit", label: "Audit Log" },
+  { id: "completion", label: "Completion Doc" },
+  { id: "extras", label: "Extra Docs" },
+];
+
+type WorkOrderSlideOverTabNavProps = {
+  tab: SlideOverTab;
+  saving?: boolean;
+  onTabChange: (tab: SlideOverTab) => void;
+};
+
+export function WorkOrderSlideOverTabNav({
+  tab,
+  saving,
+  onTabChange,
+}: WorkOrderSlideOverTabNavProps) {
+  return (
+    <div
+      className="mt-2 flex shrink-0 gap-4 overflow-x-auto px-4"
+      style={{ borderBottom: "1px solid var(--color-border)" }}
+      role="tablist"
+      aria-label="Work order sections"
+    >
+      {SLIDE_OVER_TABS.map((item) => {
+        const active = tab === item.id;
+        return (
+          <button
+            key={item.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            disabled={Boolean(saving)}
+            onClick={() => onTabChange(item.id)}
+            className="shrink-0 border-b-2 pb-2.5 text-[12px] transition-colors disabled:opacity-50"
+            style={{
+              borderBottomColor: active ? "var(--color-primary)" : "transparent",
+              color: active ? "var(--color-primary)" : "var(--color-text-muted)",
+              fontWeight: active ? 500 : 400,
+            }}
+          >
+            {item.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-panel.tsx b/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-panel.tsx
new file mode 100644
index 00000000..9f682b89
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tab-panel.tsx
@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { QueryErrorPanel } from "@/components/ui/query-error-panel";
+import { SlideOverTabSkeleton } from "@/app/(protected)/workorders/_components/loading/slide-over-tab-skeleton";
+
+type SlideOverTabSkeletonVariant = "comments" | "audit" | "completion" | "extras";
+
+type WorkOrderSlideOverTabPanelProps = {
+  variant: SlideOverTabSkeletonVariant;
+  showSkeleton: boolean;
+  hasError: boolean;
+  errorMessage: string;
+  onRetry: () => void;
+  showContent: boolean;
+  children: ReactNode;
+};
+
+export function WorkOrderSlideOverTabPanel({
+  variant,
+  showSkeleton,
+  hasError,
+  errorMessage,
+  onRetry,
+  showContent,
+  children,
+}: WorkOrderSlideOverTabPanelProps) {
+  return (
+    <>
+      {showSkeleton && <SlideOverTabSkeleton variant={variant} />}
+      {hasError && <QueryErrorPanel compact message={errorMessage} onRetry={onRetry} />}
+      {showContent && children}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tabs.tsx b/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tabs.tsx
new file mode 100644
index 00000000..d43d94c1
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-slide-over-tabs.tsx
@@ -0,0 +1,168 @@
+import { Box } from "@mui/material";
+import { SlideOverAuditTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-audit-tab";
+import { SlideOverCommentsTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-comments-tab";
+import { SlideOverCompletionTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-tab";
+import { SlideOverExtrasTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab";
+import { SlideOverInfoTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { resolveSlideOverAvetaRequired } from "@/domain/work-orders/utils/resolve-slide-over-aveta-required";
+import type { useWorkOrderSlideOver, SlideOverTab } from "./use-work-order-slide-over";
+import { WorkOrderSlideOverTabPanel } from "./work-order-slide-over-tab-panel";
+
+type SlideOverState = ReturnType<typeof useWorkOrderSlideOver>;
+
+type WorkOrderSlideOverTabsProps = {
+  tab: SlideOverTab;
+  state: SlideOverState;
+  saving?: boolean;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allOrders: WorkOrderTableRow[];
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+  onOpenCompletionDoc: () => void;
+  onRequestComplete?: () => void;
+};
+
+export function WorkOrderSlideOverTabs({
+  tab,
+  state,
+  saving,
+  users,
+  sites,
+  vendors,
+  pmTypes,
+  allOrders,
+  onDuplicateFound,
+  onOpenCompletionDoc,
+  onRequestComplete,
+}: WorkOrderSlideOverTabsProps) {
+  const hasError = Boolean(state.error) && !state.detailForRow;
+  const showContent = Boolean(state.detailForRow || !state.isLoading);
+  const { infoSource, activeDraft } = state;
+
+  return (
+    <Box className="flex-1 overflow-y-auto p-5">
+      {tab === "info" && infoSource != null && activeDraft != null && (
+        <SlideOverInfoTab
+          row={infoSource}
+          draft={activeDraft}
+          editing={state.editing && !saving}
+          isCancelled={state.isCancelled}
+          isCompleted={state.isCompleted}
+          users={users}
+          sites={sites}
+          vendors={vendors}
+          pmTypes={pmTypes}
+          allOrders={allOrders}
+          onDraftChange={state.handleDraftChange}
+          onDuplicateFound={onDuplicateFound}
+          onRequestComplete={onRequestComplete}
+        />
+      )}
+
+      {tab === "comments" && (
+        <WorkOrderSlideOverTabPanel
+          variant="comments"
+          showSkeleton={state.showDetailSkeleton}
+          hasError={hasError}
+          errorMessage={state.errorMessage}
+          onRetry={() => void state.refetch()}
+          showContent={state.detailForRow != null}
+        >
+          {state.detailForRow != null && (
+            <SlideOverCommentsTab
+              comments={state.detailForRow.comments}
+              isReadOnly={state.isCommentsReadOnly}
+              isPending={state.commentMutation.isPending}
+              currentUserId={state.user?.id}
+              isUpdatePending={state.updateCommentMutation.isPending}
+              onSubmit={(text, options) => state.commentMutation.mutate({ text }, options)}
+              onUpdateComment={(commentId, text, options) =>
+                state.updateCommentMutation.mutate({ commentId, text }, options)
+              }
+            />
+          )}
+        </WorkOrderSlideOverTabPanel>
+      )}
+
+      {tab === "audit" && (
+        <WorkOrderSlideOverTabPanel
+          variant="audit"
+          showSkeleton={state.showDetailSkeleton}
+          hasError={hasError}
+          errorMessage={state.errorMessage}
+          onRetry={() => void state.refetch()}
+          showContent={state.detailForRow != null}
+        >
+          {state.detailForRow != null && (
+            <SlideOverAuditTab entries={state.detailForRow.audit} users={users} />
+          )}
+        </WorkOrderSlideOverTabPanel>
+      )}
+
+      {tab === "completion" && state.infoSource != null && (
+        <WorkOrderSlideOverTabPanel
+          variant="completion"
+          showSkeleton={state.showDetailSkeleton}
+          hasError={hasError}
+          errorMessage={state.errorMessage}
+          onRetry={() => void state.refetch()}
+          showContent={showContent}
+        >
+          <SlideOverCompletionTab
+            row={state.infoSource}
+            isReadOnly={state.isDocumentsReadOnly}
+            completion={state.detailForRow?.completion}
+            media={state.completionMedia}
+            mediaPending={state.mediaPending}
+            completionPending={state.completionPending}
+            onUploadMedia={(requests) => {
+              state.uploadMediaRequests(requests);
+            }}
+            onCategorizeMedia={state.categorizeMedia}
+            onRemoveMedia={state.removeMedia}
+            onRetryMedia={state.retryUpload}
+            onCancelMedia={state.cancelUpload}
+            onUploadCompletionPdf={state.uploadCompletionPdf}
+            onOpenCompletionDoc={onOpenCompletionDoc}
+          />
+        </WorkOrderSlideOverTabPanel>
+      )}
+
+      {tab === "extras" && (
+        <WorkOrderSlideOverTabPanel
+          variant="extras"
+          showSkeleton={state.showDetailSkeleton}
+          hasError={hasError}
+          errorMessage={state.errorMessage}
+          onRetry={() => void state.refetch()}
+          showContent={showContent}
+        >
+          <SlideOverExtrasTab
+            uploads={state.extrasUploads}
+            workOrderId={infoSource?.id}
+            avetaRequired={resolveSlideOverAvetaRequired(
+              state.editing,
+              infoSource?.avetaRequired,
+              activeDraft?.avetaRequired,
+            )}
+            isReadOnly={state.isExtrasReadOnly}
+            pending={state.mediaPending}
+            onUpload={(files) => {
+              void state.uploadExtraFiles(files);
+            }}
+            onRemove={state.removeMedia}
+            onCategorize={state.categorizeMedia}
+          />
+        </WorkOrderSlideOverTabPanel>
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-slide-over.tsx b/src/app/(protected)/workorders/_components/detail/work-order-slide-over.tsx
new file mode 100644
index 00000000..c240c19e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-slide-over.tsx
@@ -0,0 +1,112 @@
+import { Box } from "@mui/material";
+import { SideSheet } from "@/components/ui/side-sheet";
+import { SlideOverHeader } from "@/app/(protected)/workorders/_components/detail/slide-over-header";
+import { SlideOverFooter } from "@/app/(protected)/workorders/_components/detail/slide-over-footer";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { useWorkOrderSlideOver } from "./use-work-order-slide-over";
+import { WorkOrderSlideOverTabNav } from "./work-order-slide-over-tab-nav";
+import { WorkOrderSlideOverTabs } from "./work-order-slide-over-tabs";
+
+export type SlideOverSaveOptions = {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+};
+
+type WorkOrderSlideOverProps = {
+  row: WorkOrderTableRow | null;
+  editMode: boolean;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allOrders: WorkOrderTableRow[];
+  onSave: (id: string | number, patch: WorkOrderTablePatch, options?: SlideOverSaveOptions) => void;
+  onOpenCompletionDoc: (row: WorkOrderTableRow) => void;
+  onCancelWO: (row: WorkOrderTableRow) => void;
+  onRequestComplete?: (row: WorkOrderTableRow) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+  onClose: () => void;
+  saving?: boolean;
+};
+
+export function WorkOrderSlideOver({
+  row,
+  editMode,
+  users,
+  sites,
+  vendors,
+  pmTypes,
+  allOrders,
+  onSave,
+  onOpenCompletionDoc,
+  onCancelWO,
+  onRequestComplete,
+  onDuplicateFound,
+  onClose,
+  saving,
+}: WorkOrderSlideOverProps) {
+  const state = useWorkOrderSlideOver({ row, editMode, onSave, onClose, saving });
+  const { infoSource, activeDraft } = state;
+
+  return (
+    <SideSheet
+      open={Boolean(row)}
+      onClose={state.requestClose}
+      closeDisabled={state.closeDisabled}
+      widthClass="w-[480px] max-w-[480px]"
+      aria-label="Work order details"
+    >
+      {row != null && infoSource != null && activeDraft != null && (
+        <Box className="flex h-full flex-col overflow-hidden">
+          <SlideOverHeader
+            row={infoSource}
+            isCancelled={state.isCancelled}
+            isFetching={state.isFetching && !state.isLoading}
+            closeDisabled={state.closeDisabled}
+            onClose={state.requestClose}
+          />
+
+          <WorkOrderSlideOverTabNav tab={state.tab} saving={saving} onTabChange={state.setTab} />
+
+          <WorkOrderSlideOverTabs
+            tab={state.tab}
+            state={state}
+            saving={saving}
+            users={users}
+            sites={sites}
+            vendors={vendors}
+            pmTypes={pmTypes}
+            allOrders={allOrders}
+            onDuplicateFound={onDuplicateFound}
+            onOpenCompletionDoc={() => onOpenCompletionDoc(infoSource)}
+            onRequestComplete={() => onRequestComplete?.(infoSource)}
+          />
+
+          <SlideOverFooter
+            isCancelled={state.isCancelled}
+            isCompleted={state.isCompleted}
+            editing={state.editing}
+            isDirty={state.isDirty}
+            showUnsaved={state.showUnsaved}
+            saving={saving}
+            onCancelWO={() => onCancelWO(infoSource)}
+            onCancelEdit={state.handleCancelEdit}
+            onClose={state.requestClose}
+            onEdit={state.startEditing}
+            onSave={state.commit}
+            onDiscard={state.handleDiscard}
+            onKeepEditing={() => state.setShowUnsaved(false)}
+          />
+        </Box>
+      )}
+    </SideSheet>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/detail/work-order-status-menu.tsx b/src/app/(protected)/workorders/_components/detail/work-order-status-menu.tsx
new file mode 100644
index 00000000..e01cd994
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/detail/work-order-status-menu.tsx
@@ -0,0 +1,69 @@
+import { Menu, MenuItem } from "@mui/material";
+import { WorkOrderStatusBadge } from "@/components/domain/status-badge";
+import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
+import { WORK_ORDER_STATUS_OPTIONS } from "@/domain/work-orders/types/work-order";
+import {
+  formatClosabilityMissingTitle,
+  getClosabilityGaps,
+  isCompletionStatusLabel,
+  type WoClosabilityInput,
+} from "@/domain/work-orders/utils/wo-closability";
+import { useMenuAnchor } from "@/hooks/use-menu-anchor";
+
+type WorkOrderStatusMenuProps = {
+  status: string;
+  disabled?: boolean;
+  closability: WoClosabilityInput;
+  onStatusChange: (status: string) => void;
+};
+
+export function WorkOrderStatusMenu({
+  status,
+  disabled = false,
+  closability,
+  onStatusChange,
+}: WorkOrderStatusMenuProps) {
+  const { anchorEl, open, setAnchor, close } = useMenuAnchor();
+  const closabilityGaps = getClosabilityGaps(closability);
+
+  return (
+    <>
+      <MenuAnchorButton
+        onAnchor={setAnchor}
+        open={open}
+        disabled={disabled}
+        aria-label="Change status"
+        aria-busy={disabled || undefined}
+      >
+        <WorkOrderStatusBadge status={status} />
+      </MenuAnchorButton>
+      <Menu anchorEl={anchorEl} open={open} onClose={close}>
+        {WORK_ORDER_STATUS_OPTIONS.map((option) => {
+          const isCompletionStatus = isCompletionStatusLabel(option);
+          const isCompletedBlocked = isCompletionStatus && closabilityGaps.length > 0;
+          return (
+            <MenuItem
+              key={option}
+              selected={option === status}
+              disabled={disabled || isCompletedBlocked}
+              title={
+                isCompletedBlocked ? formatClosabilityMissingTitle(closabilityGaps) : undefined
+              }
+              onClick={() => {
+                if (isCompletedBlocked) {
+                  return;
+                }
+                close();
+                if (option !== status) {
+                  onStatusChange(option);
+                }
+              }}
+            >
+              {option}
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch-create-modal/dispatch-create-checklist-fields.tsx b/src/app/(protected)/workorders/_components/dispatch-create-modal/dispatch-create-checklist-fields.tsx
new file mode 100644
index 00000000..8b9aa5e8
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch-create-modal/dispatch-create-checklist-fields.tsx
@@ -0,0 +1,84 @@
+import { Chip, MenuItem, Skeleton, Stack, TextField } from "@mui/material";
+import type { TaskListTemplate } from "@/domain/work-orders/types/work-order";
+
+interface DispatchCreateChecklistFieldsProps {
+  taskTemplates: TaskListTemplate[];
+  isLoadingTemplates: boolean;
+  selectedTemplateId: string;
+  onTemplateChange: (id: string) => void;
+  isPending: boolean;
+  customItems: string[];
+  onRemoveCustomItem: (index: number) => void;
+  newCustomItem: string;
+  onNewCustomItemChange: (value: string) => void;
+  onAddCustomItem: () => void;
+}
+
+export function DispatchCreateChecklistFields({
+  taskTemplates,
+  isLoadingTemplates,
+  selectedTemplateId,
+  onTemplateChange,
+  isPending,
+  customItems,
+  onRemoveCustomItem,
+  newCustomItem,
+  onNewCustomItemChange,
+  onAddCustomItem,
+}: DispatchCreateChecklistFieldsProps) {
+  return (
+    <>
+      {isLoadingTemplates ? (
+        <Skeleton variant="rounded" height={56} animation="wave" aria-label="Loading templates" />
+      ) : (
+        <TextField
+          label="Task List Template"
+          select
+          value={selectedTemplateId}
+          onChange={(event) => onTemplateChange(event.target.value)}
+          fullWidth
+          disabled={isPending}
+        >
+          <MenuItem value="">No checklist template</MenuItem>
+          {taskTemplates.map((template) => (
+            <MenuItem key={String(template.id)} value={String(template.id)}>
+              {template.name} ({template.items?.length ?? 0} items)
+            </MenuItem>
+          ))}
+        </TextField>
+      )}
+
+      {customItems.length > 0 && (
+        <Stack
+          direction="row"
+          sx={{
+            flexWrap: "wrap",
+            gap: 1,
+          }}
+        >
+          {customItems.map((item, index) => (
+            <Chip
+              key={`${item}-${index}`}
+              label={item}
+              onDelete={() => onRemoveCustomItem(index)}
+            />
+          ))}
+        </Stack>
+      )}
+
+      <TextField
+        value={newCustomItem}
+        onChange={(event) => onNewCustomItemChange(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" && newCustomItem.trim()) {
+            event.preventDefault();
+            onAddCustomItem();
+          }
+        }}
+        placeholder="Add custom checklist item..."
+        fullWidth
+        size="small"
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch-create-modal/dispatch-create-details-fields.tsx b/src/app/(protected)/workorders/_components/dispatch-create-modal/dispatch-create-details-fields.tsx
new file mode 100644
index 00000000..fa265c4f
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch-create-modal/dispatch-create-details-fields.tsx
@@ -0,0 +1,38 @@
+import { Stack, TextField } from "@mui/material";
+
+interface DispatchCreateDetailsFieldsProps {
+  nteAmount: string;
+  onNteAmountChange: (value: string) => void;
+  scheduledDate: string;
+  onScheduledDateChange: (value: string) => void;
+}
+
+export function DispatchCreateDetailsFields({
+  nteAmount,
+  onNteAmountChange,
+  scheduledDate,
+  onScheduledDateChange,
+}: DispatchCreateDetailsFieldsProps) {
+  return (
+    <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+      <TextField
+        label="NTE Amount"
+        type="number"
+        value={nteAmount}
+        onChange={(event) => onNteAmountChange(event.target.value)}
+        fullWidth
+        slotProps={{
+          htmlInput: { step: "0.01", min: 0 },
+        }}
+      />
+      <TextField
+        label="Vendor Scheduled Date"
+        type="date"
+        value={scheduledDate}
+        onChange={(event) => onScheduledDateChange(event.target.value)}
+        slotProps={{ inputLabel: { shrink: true } }}
+        fullWidth
+      />
+    </Stack>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch-create-modal/dispatch-create-vendor-section.tsx b/src/app/(protected)/workorders/_components/dispatch-create-modal/dispatch-create-vendor-section.tsx
new file mode 100644
index 00000000..29133854
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch-create-modal/dispatch-create-vendor-section.tsx
@@ -0,0 +1,110 @@
+import { Box, Radio, Skeleton, Stack, TextField, Typography } from "@mui/material";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+
+interface DispatchCreateVendorSectionProps {
+  vendors: VendorDropdownItem[];
+  isLoading: boolean;
+  vendorSearch: string;
+  selectedVendorId: string | number | null;
+  onSearchChange: (value: string) => void;
+  onSelect: (vendorId: string | number) => void;
+}
+
+function VendorLine({ label }: { label: string }) {
+  return (
+    <Typography
+      variant="caption"
+      sx={{
+        color: "text.secondary",
+        display: "block",
+      }}
+    >
+      {label}
+    </Typography>
+  );
+}
+
+function VendorOption({
+  vendor,
+  isSelected,
+  onSelect,
+}: {
+  vendor: VendorDropdownItem;
+  isSelected: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <Box
+      className={`flex cursor-pointer items-start gap-2 rounded border p-2 ${
+        isSelected ? "border-primary bg-primary/10" : "border-border"
+      }`}
+      onClick={onSelect}
+    >
+      <Radio checked={isSelected} readOnly size="small" />
+      <Box className="flex-1">
+        <Typography variant="body2" className="font-semibold">
+          {vendor.companyName}
+        </Typography>
+        {Boolean(vendor.contactName) && <VendorLine label={vendor.contactName} />}
+        {Boolean(vendor.tradeSpecialties) && <VendorLine label={vendor.tradeSpecialties} />}
+        {Boolean(vendor.address) && <VendorLine label={vendor.address} />}
+      </Box>
+      {vendor.distanceMiles != null && (
+        <Typography variant="caption" className="whitespace-nowrap">
+          {vendor.distanceMiles} miles
+        </Typography>
+      )}
+    </Box>
+  );
+}
+
+export function DispatchCreateVendorSection({
+  vendors,
+  isLoading,
+  vendorSearch,
+  selectedVendorId,
+  onSearchChange,
+  onSelect,
+}: DispatchCreateVendorSectionProps) {
+  return (
+    <Box>
+      <Typography variant="subtitle2" className="mb-2">
+        Select Vendor
+      </Typography>
+      <TextField
+        size="small"
+        value={vendorSearch}
+        onChange={(event) => onSearchChange(event.target.value)}
+        placeholder="Search vendors..."
+        fullWidth
+        className="mb-2"
+      />
+      {isLoading ? (
+        <Stack spacing={1} aria-busy="true" role="status" aria-label="Loading vendors">
+          {Array.from({ length: 3 }, (_, i) => (
+            <Skeleton key={i} variant="rounded" height={56} animation="wave" />
+          ))}
+        </Stack>
+      ) : vendors.length === 0 ? (
+        <Typography
+          sx={{
+            color: "text.secondary",
+          }}
+        >
+          No vendors found
+        </Typography>
+      ) : (
+        <Stack spacing={1} className="max-h-60 overflow-y-auto">
+          {vendors.map((vendor) => (
+            <VendorOption
+              key={String(vendor.id)}
+              vendor={vendor}
+              isSelected={selectedVendorId === vendor.id}
+              onSelect={() => onSelect(vendor.id)}
+            />
+          ))}
+        </Stack>
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch-create-modal/dispatch-create-work-orders-section.tsx b/src/app/(protected)/workorders/_components/dispatch-create-modal/dispatch-create-work-orders-section.tsx
new file mode 100644
index 00000000..c3026a26
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch-create-modal/dispatch-create-work-orders-section.tsx
@@ -0,0 +1,73 @@
+import { Box, Chip, Stack, TextField, Typography } from "@mui/material";
+import type { SelectedWorkOrderRef } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+interface DispatchCreateWorkOrdersSectionProps {
+  workOrderId: string | number;
+  selectedWOs: SelectedWorkOrderRef[];
+  siteWorkOrders: WorkOrderTableRow[];
+  filteredSiteWOs: WorkOrderTableRow[];
+  woSearch: string;
+  onWoSearchChange: (value: string) => void;
+  onAddWO: (item: WorkOrderTableRow) => void;
+  onRemoveWO: (id: string | number) => void;
+}
+
+export function DispatchCreateWorkOrdersSection({
+  workOrderId,
+  selectedWOs,
+  siteWorkOrders,
+  filteredSiteWOs,
+  woSearch,
+  onWoSearchChange,
+  onAddWO,
+  onRemoveWO,
+}: DispatchCreateWorkOrdersSectionProps) {
+  return (
+    <Box>
+      <Typography variant="subtitle2" className="mb-2">
+        Work Orders ({selectedWOs.length})
+      </Typography>
+      <Stack
+        direction="row"
+        sx={{
+          flexWrap: "wrap",
+          gap: 1,
+        }}
+      >
+        {selectedWOs.map((wo) => (
+          <Chip
+            key={String(wo.id)}
+            label={`${wo.number} — ${wo.title}`}
+            onDelete={String(wo.id) !== String(workOrderId) ? () => onRemoveWO(wo.id) : undefined}
+          />
+        ))}
+      </Stack>
+      {siteWorkOrders.length > 0 && (
+        <Box className="mt-3">
+          <TextField
+            size="small"
+            value={woSearch}
+            onChange={(event) => onWoSearchChange(event.target.value)}
+            placeholder="Search to filter..."
+            fullWidth
+            className="mb-2"
+          />
+          <Box className="max-h-40 overflow-y-auto rounded border border-border p-1">
+            {filteredSiteWOs.map((item) => (
+              <Box
+                key={String(item.id)}
+                className="cursor-pointer rounded px-2 py-1 hover:bg-muted/50"
+                onClick={() => onAddWO(item)}
+              >
+                <Typography variant="body2">
+                  <strong>{item.woNumber}</strong> — {item.title}
+                </Typography>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch-create-modal/index.tsx b/src/app/(protected)/workorders/_components/dispatch-create-modal/index.tsx
new file mode 100644
index 00000000..08fe407d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch-create-modal/index.tsx
@@ -0,0 +1,114 @@
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  TextField,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { Button } from "@/components/ui/button";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+import { useDispatchCreateController } from "@/app/(protected)/workorders/_hooks/use-dispatch-create-controller";
+import { DispatchCreateWorkOrdersSection } from "./dispatch-create-work-orders-section";
+import { DispatchCreateVendorSection } from "./dispatch-create-vendor-section";
+import { DispatchCreateChecklistFields } from "./dispatch-create-checklist-fields";
+import { DispatchCreateDetailsFields } from "./dispatch-create-details-fields";
+
+interface DispatchCreateModalProps {
+  workOrder: WorkOrderDetail;
+  onClose: () => void;
+  onDispatched: () => void;
+}
+
+export function DispatchCreateModal({
+  workOrder,
+  onClose,
+  onDispatched,
+}: DispatchCreateModalProps) {
+  const controller = useDispatchCreateController(workOrder, onClose, onDispatched);
+
+  return (
+    <Dialog open onClose={controller.handleClose} maxWidth="md" fullWidth>
+      <DialogTitle className="flex items-center justify-between pr-2">
+        Dispatch{" "}
+        {controller.selectedWOs.length > 1
+          ? `${controller.selectedWOs.length} Work Orders`
+          : `Work Order ${workOrder.internalWONumber}`}
+        <IconButton
+          aria-label="Close"
+          onClick={onClose}
+          size="small"
+          disabled={controller.isPending}
+        >
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent className="flex flex-col gap-4">
+        <DispatchCreateWorkOrdersSection
+          workOrderId={workOrder.id}
+          selectedWOs={controller.selectedWOs}
+          siteWorkOrders={controller.siteWorkOrders}
+          filteredSiteWOs={controller.filteredSiteWOs}
+          woSearch={controller.woSearch}
+          onWoSearchChange={controller.setWoSearch}
+          onAddWO={controller.addSelectedWO}
+          onRemoveWO={controller.removeSelectedWO}
+        />
+
+        <DispatchCreateVendorSection
+          vendors={controller.vendors}
+          isLoading={controller.isLoadingVendors}
+          vendorSearch={controller.vendorSearch}
+          selectedVendorId={controller.selectedVendorId}
+          onSearchChange={controller.setVendorSearch}
+          onSelect={(vendorId) =>
+            controller.setSelectedVendorId((current) => (current === vendorId ? null : vendorId))
+          }
+        />
+
+        <DispatchCreateDetailsFields
+          nteAmount={controller.nteAmount}
+          onNteAmountChange={controller.setNteAmount}
+          scheduledDate={controller.scheduledDate}
+          onScheduledDateChange={controller.setScheduledDate}
+        />
+
+        <DispatchCreateChecklistFields
+          taskTemplates={controller.taskTemplates}
+          isLoadingTemplates={controller.isLoadingTemplates}
+          selectedTemplateId={controller.selectedTemplateId}
+          onTemplateChange={controller.setSelectedTemplateId}
+          isPending={controller.isPending}
+          customItems={controller.customItems}
+          onRemoveCustomItem={controller.removeCustomItem}
+          newCustomItem={controller.newCustomItem}
+          onNewCustomItemChange={controller.setNewCustomItem}
+          onAddCustomItem={controller.addCustomItem}
+        />
+
+        <TextField
+          label="Description"
+          multiline
+          rows={4}
+          value={controller.description}
+          onChange={(event) => controller.setDescription(event.target.value)}
+          fullWidth
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button variant="outline" onClick={onClose} disabled={controller.isPending}>
+          Cancel
+        </Button>
+        <Button
+          onClick={controller.handleSubmit}
+          disabled={!controller.selectedVendorId}
+          loading={controller.isPending}
+          loadingText="Dispatching…"
+        >
+          Dispatch
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch-detail-modal.tsx b/src/app/(protected)/workorders/_components/dispatch-detail-modal.tsx
new file mode 100644
index 00000000..d155ef33
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch-detail-modal.tsx
@@ -0,0 +1 @@
+export { DispatchDetailModal } from "./dispatch/dispatch-detail";
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/build-dispatch-edit-form.ts b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/build-dispatch-edit-form.ts
new file mode 100644
index 00000000..0573c385
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/build-dispatch-edit-form.ts
@@ -0,0 +1,13 @@
+import type { DispatchDetail } from "@/domain/work-orders/types/work-order";
+import { toDateInputValue } from "@/lib/time-utils";
+import type { DispatchEditFormState } from "./dispatch-edit-form";
+
+export function buildDispatchEditForm(dispatch: DispatchDetail): DispatchEditFormState {
+  return {
+    status: dispatch.status || "",
+    nteAmount: dispatch.nteAmount != null ? String(dispatch.nteAmount) : "",
+    scheduledDate: toDateInputValue(dispatch.scheduledDate),
+    completedDate: toDateInputValue(dispatch.completedDate),
+    description: dispatch.description || "",
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-checklist-section.tsx b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-checklist-section.tsx
new file mode 100644
index 00000000..0f54f805
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-checklist-section.tsx
@@ -0,0 +1,77 @@
+import { Box, Checkbox, Stack, TextField, Typography } from "@mui/material";
+import type { DispatchChecklistItem } from "@/domain/work-orders/types/work-order";
+import { formatDateTime } from "@/lib/time-utils";
+
+type DispatchChecklistSectionProps = {
+  items: DispatchChecklistItem[];
+  isLocked: boolean;
+  isUpdating: boolean;
+  isAdding?: boolean;
+  newItem: string;
+  onNewItemChange: (value: string) => void;
+  onToggleItem: (itemId: string | number, isCompleted: boolean) => void;
+  onAddItem: (text: string) => void;
+};
+
+export function DispatchChecklistSection({
+  items,
+  isLocked,
+  isUpdating,
+  isAdding = false,
+  newItem,
+  onNewItemChange,
+  onToggleItem,
+  onAddItem,
+}: DispatchChecklistSectionProps) {
+  if (items.length === 0 && isLocked) {
+    return null;
+  }
+
+  const completedCount = items.filter((item) => item.isCompleted).length;
+
+  return (
+    <Box>
+      <Typography variant="subtitle1" className="mb-2 font-semibold">
+        Checklist ({completedCount}/{items.length})
+      </Typography>
+      <Stack spacing={1}>
+        {items.map((item) => (
+          <Stack key={String(item.id)} direction="row" spacing={1} sx={{ alignItems: "center" }}>
+            <Checkbox
+              checked={item.isCompleted}
+              disabled={isLocked || isUpdating}
+              onChange={() => onToggleItem(item.id, !item.isCompleted)}
+            />
+            <Box className="flex-1">
+              <Typography variant="body2">{item.itemText}</Typography>
+              {item.isCompleted && Boolean(item.completedBy || item.completedAt) && (
+                <Typography variant="caption" color="text.secondary">
+                  {item.completedBy?.trim() || "Unknown"}
+                  {item.completedAt ? ` · ${formatDateTime(item.completedAt)}` : ""}
+                </Typography>
+              )}
+            </Box>
+          </Stack>
+        ))}
+      </Stack>
+      {!isLocked && (
+        <TextField
+          size="small"
+          value={newItem}
+          onChange={(event) => onNewItemChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && newItem.trim() && !isAdding) {
+              event.preventDefault();
+              onAddItem(newItem.trim());
+            }
+          }}
+          placeholder={isAdding ? "Adding…" : "Add checklist item..."}
+          disabled={isAdding}
+          fullWidth
+          className="mt-2"
+          slotProps={{ htmlInput: { "aria-busy": isAdding || undefined } }}
+        />
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-detail-body.tsx b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-detail-body.tsx
new file mode 100644
index 00000000..ae7819d8
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-detail-body.tsx
@@ -0,0 +1,103 @@
+import { DialogContent, Skeleton } from "@mui/material";
+import type { DispatchDetail } from "@/domain/work-orders/types/work-order";
+import type { DispatchDetailController } from "@/app/(protected)/workorders/_hooks/use-dispatch-detail-controller";
+import { DispatchChecklistSection } from "./dispatch-checklist-section";
+import { DispatchDetailsGrid, DispatchDetailsView, DispatchEditForm } from "./dispatch-edit-form";
+import { DispatchSignoffsSection } from "./dispatch-signoffs-section";
+import { DispatchUpliftsSection } from "./dispatch-uplifts-section";
+import { DispatchVendorCommunication } from "./dispatch-vendor-communication";
+import { DispatchVerifyFooter } from "./dispatch-verify-footer";
+
+interface DispatchDetailBodyProps {
+  dispatch: DispatchDetail;
+  controller: DispatchDetailController;
+}
+
+export function DispatchDetailBody({ dispatch, controller }: DispatchDetailBodyProps) {
+  return (
+    <DialogContent className="flex flex-col gap-6">
+      <DispatchDetailsGrid>
+        {controller.editing ? (
+          <DispatchEditForm
+            form={controller.form}
+            onChange={controller.setForm}
+            onSave={controller.handleSave}
+            onCancel={() => controller.setEditing(false)}
+            isSaving={controller.updateDispatchMutation.isPending}
+          />
+        ) : (
+          <DispatchDetailsView
+            dispatch={dispatch}
+            isLocked={controller.isLocked}
+            onEdit={controller.beginEditing}
+            onCancelDispatch={() => controller.handleCancelDispatch(dispatch)}
+          />
+        )}
+      </DispatchDetailsGrid>
+
+      {(dispatch.checklistItems.length > 0 || !controller.isLocked) && (
+        <DispatchChecklistSection
+          items={dispatch.checklistItems}
+          isLocked={controller.isLocked}
+          isUpdating={controller.updateChecklistMutation.isPending}
+          isAdding={controller.addChecklistMutation.isPending}
+          newItem={controller.newChecklistItem}
+          onNewItemChange={controller.setNewChecklistItem}
+          onToggleItem={(itemId, isCompleted) =>
+            controller.updateChecklistMutation.mutate({
+              itemId,
+              isCompleted,
+              completedBy: controller.userName,
+            })
+          }
+          onAddItem={(text) =>
+            controller.addChecklistMutation.mutate(text, {
+              onSuccess: () => controller.setNewChecklistItem(""),
+            })
+          }
+        />
+      )}
+
+      <DispatchSignoffsSection
+        signoffs={dispatch.signoffs}
+        isLocked={controller.isLocked}
+        isSigningOff={controller.addSignoffMutation.isPending}
+        onCollectSignature={controller.setSigCaptureType}
+      />
+
+      {controller.isLoadingUplifts ? (
+        <Skeleton variant="rounded" height={80} animation="wave" aria-label="Loading uplifts" />
+      ) : (
+        <DispatchUpliftsSection
+          uplifts={controller.uplifts}
+          isLocked={controller.isLocked}
+          onApprove={(uplift) => controller.setUpliftAction({ type: "approve", uplift })}
+          onReject={(uplift) => controller.setUpliftAction({ type: "reject", uplift })}
+          onRequestChanges={(uplift) =>
+            controller.setUpliftAction({ type: "request-changes", uplift })
+          }
+        />
+      )}
+
+      <DispatchVendorCommunication
+        comments={dispatch.comments}
+        commentText={controller.commentText}
+        sendEmail={controller.sendEmail}
+        isLocked={controller.isLocked}
+        isPending={controller.addCommentMutation.isPending}
+        onCommentTextChange={controller.setCommentText}
+        onSendEmailChange={controller.setSendEmail}
+        onSubmit={controller.handleComment}
+      />
+
+      <DispatchVerifyFooter
+        verifiedAt={dispatch.verifiedAt}
+        verifiedBy={dispatch.verifiedBy}
+        canVerify={controller.verifyState.canVerify}
+        missing={controller.verifyState.missing}
+        isPending={controller.verifyMutation.isPending}
+        onVerify={() => controller.verifyMutation.mutate(undefined)}
+      />
+    </DialogContent>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-detail-header.tsx b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-detail-header.tsx
new file mode 100644
index 00000000..a345fdf4
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-detail-header.tsx
@@ -0,0 +1,30 @@
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, IconButton, Typography } from "@mui/material";
+import type { DispatchDetail } from "@/domain/work-orders/types/work-order";
+
+type DispatchDetailHeaderProps = {
+  dispatch: DispatchDetail;
+  onClose: () => void;
+};
+
+export function DispatchDetailHeader({ dispatch, onClose }: DispatchDetailHeaderProps) {
+  return (
+    <Box className="flex items-start justify-between gap-4 pr-2">
+      <Box>
+        <Typography variant="h6">
+          {dispatch.dispatchNumber || dispatch.poNumber} · {dispatch.vendorName}
+        </Typography>
+        <Typography variant="caption" color="text.secondary">
+          PO: {dispatch.poNumber} ·{" "}
+          {dispatch.workOrders.length > 0
+            ? `${dispatch.workOrders.length} WO(s): ${dispatch.workOrders.map((wo) => wo.woNumber).join(", ")}`
+            : `WO: ${dispatch.woNumber}`}{" "}
+          · {dispatch.vendorEmail}
+        </Typography>
+      </Box>
+      <IconButton aria-label="Close" onClick={onClose} size="small">
+        <CloseIcon fontSize="small" />
+      </IconButton>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-edit-form.tsx b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-edit-form.tsx
new file mode 100644
index 00000000..152eb807
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-edit-form.tsx
@@ -0,0 +1,156 @@
+import { Box, MenuItem, Stack, TextField } from "@mui/material";
+import { DetailField } from "@/components/common/detail-field";
+import { Button } from "@/components/ui/button";
+import {
+  DISPATCH_STATUS_OPTIONS,
+  type DispatchDetail,
+} from "@/domain/work-orders/types/work-order";
+import {
+  formatDateTime,
+  timeBetween,
+  timeSince,
+  toDateInputValue,
+  waitTimeColor,
+} from "@/lib/time-utils";
+
+export type DispatchEditFormState = {
+  status: string;
+  nteAmount: string;
+  scheduledDate: string;
+  completedDate: string;
+  description: string;
+};
+
+type DispatchEditFormProps = {
+  form: DispatchEditFormState;
+  onChange: (form: DispatchEditFormState) => void;
+  onSave: () => void;
+  onCancel: () => void;
+  isSaving: boolean;
+};
+
+export function DispatchEditForm({
+  form,
+  onChange,
+  onSave,
+  onCancel,
+  isSaving,
+}: DispatchEditFormProps) {
+  return (
+    <>
+      <TextField
+        label="Status"
+        select
+        size="small"
+        value={form.status}
+        onChange={(event) => onChange({ ...form, status: event.target.value })}
+      >
+        {DISPATCH_STATUS_OPTIONS.map((status) => (
+          <MenuItem key={status} value={status}>
+            {status}
+          </MenuItem>
+        ))}
+      </TextField>
+      <TextField
+        label="NTE Amount"
+        type="number"
+        size="small"
+        value={form.nteAmount}
+        onChange={(event) => onChange({ ...form, nteAmount: event.target.value })}
+        slotProps={{ htmlInput: { step: "0.01" } }}
+      />
+      <TextField
+        label="Scheduled Date"
+        type="date"
+        size="small"
+        value={form.scheduledDate}
+        onChange={(event) => onChange({ ...form, scheduledDate: event.target.value })}
+        slotProps={{ inputLabel: { shrink: true } }}
+      />
+      <TextField
+        label="Completed Date"
+        type="date"
+        size="small"
+        value={form.completedDate}
+        onChange={(event) => onChange({ ...form, completedDate: event.target.value })}
+        slotProps={{ inputLabel: { shrink: true } }}
+      />
+      <TextField
+        label="Description"
+        multiline
+        rows={3}
+        size="small"
+        className="sm:col-span-2"
+        value={form.description}
+        onChange={(event) => onChange({ ...form, description: event.target.value })}
+      />
+      <Stack direction="row" spacing={1} className="sm:col-span-2">
+        <Button onClick={onSave} loading={isSaving} loadingText="Saving…">
+          Save
+        </Button>
+        <Button variant="outline" onClick={onCancel} disabled={isSaving}>
+          Cancel
+        </Button>
+      </Stack>
+    </>
+  );
+}
+
+type DispatchDetailsViewProps = {
+  dispatch: DispatchDetail;
+  isLocked: boolean;
+  onEdit: () => void;
+  onCancelDispatch: () => void;
+};
+
+export function DispatchDetailsView({
+  dispatch,
+  isLocked,
+  onEdit,
+  onCancelDispatch,
+}: DispatchDetailsViewProps) {
+  const waitColor = waitTimeColor(dispatch.dispatchedAt);
+
+  return (
+    <>
+      <DetailField label="Status" value={dispatch.status} />
+      <DetailField
+        label="NTE"
+        value={dispatch.nteAmount != null ? `$${dispatch.nteAmount.toFixed(2)}` : "—"}
+      />
+      <DetailField label="Scheduled" value={toDateInputValue(dispatch.scheduledDate) || "—"} />
+      <DetailField label="Completed" value={toDateInputValue(dispatch.completedDate) || "—"} />
+      <DetailField
+        label="Dispatched"
+        value={dispatch.dispatchedAt ? formatDateTime(dispatch.dispatchedAt) : "—"}
+      />
+      <DetailField
+        label="Accepted"
+        value={
+          dispatch.acknowledgedAt
+            ? `${formatDateTime(dispatch.acknowledgedAt)} (after ${timeBetween(dispatch.dispatchedAt, dispatch.acknowledgedAt)})`
+            : dispatch.status === "Sent"
+              ? `Awaiting acceptance · ${timeSince(dispatch.dispatchedAt)}`
+              : "—"
+        }
+        highlight={dispatch.status === "Sent" && !dispatch.acknowledgedAt ? waitColor : undefined}
+      />
+      <DetailField label="Vendor Email" value={dispatch.vendorEmail || "—"} />
+      {Boolean(dispatch.description) && (
+        <DetailField label="Description" value={dispatch.description} className="sm:col-span-2" />
+      )}
+      {!isLocked && (
+        <Stack direction="row" spacing={1} className="sm:col-span-2">
+          <Button variant="destructive" onClick={onCancelDispatch}>
+            Cancel Dispatch
+          </Button>
+          <Button onClick={onEdit}>Edit</Button>
+        </Stack>
+      )}
+    </>
+  );
+}
+
+export function DispatchDetailsGrid({ children }: { children: React.ReactNode }) {
+  return <Box className="grid grid-cols-1 gap-3 sm:grid-cols-2">{children}</Box>;
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-signoffs-section.tsx b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-signoffs-section.tsx
new file mode 100644
index 00000000..c2526620
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-signoffs-section.tsx
@@ -0,0 +1,68 @@
+import { Box, Button, Chip, Stack, Typography } from "@mui/material";
+import type { DispatchSignoff } from "@/domain/work-orders/types/work-order";
+import { formatDateTime } from "@/lib/time-utils";
+
+type DispatchSignoffsSectionProps = {
+  signoffs: DispatchSignoff[];
+  isLocked: boolean;
+  isSigningOff?: boolean;
+  onCollectSignature: (type: "Customer" | "Vendor") => void;
+};
+
+export function DispatchSignoffsSection({
+  signoffs,
+  isLocked,
+  isSigningOff = false,
+  onCollectSignature,
+}: DispatchSignoffsSectionProps) {
+  return (
+    <Box>
+      <Typography variant="subtitle1" className="mb-2 font-semibold">
+        Sign-offs
+      </Typography>
+      <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+        {(["Customer", "Vendor"] as const).map((type) => {
+          const signoff = signoffs.find((item) => item.signoffType === type);
+          return (
+            <Box key={type} className="flex-1 rounded border border-border p-3">
+              <Typography variant="subtitle2">{type}</Typography>
+              {signoff ? (
+                <Box className="mt-2">
+                  {signoff.signatureMethod === "drawn" && Boolean(signoff.signature) && (
+                    <img
+                      src={signoff.signature}
+                      alt="Signature"
+                      className="mb-2 max-h-20 max-w-full"
+                    />
+                  )}
+                  {signoff.signatureMethod === "typed" && (
+                    <Typography variant="h6" className="italic">
+                      {signoff.signature}
+                    </Typography>
+                  )}
+                  <Typography variant="caption" color="text.secondary">
+                    {signoff.name}
+                    {signoff.signedAt ? ` · ${formatDateTime(signoff.signedAt)}` : ""}
+                  </Typography>
+                </Box>
+              ) : (
+                <Button
+                  size="small"
+                  variant="outlined"
+                  className="mt-2"
+                  onClick={() => onCollectSignature(type)}
+                  disabled={isLocked || isSigningOff}
+                >
+                  {isLocked ? "Not signed" : isSigningOff ? "Saving…" : "Collect Signature"}
+                </Button>
+              )}
+            </Box>
+          );
+        })}
+      </Stack>
+      {signoffs.length >= 2 && (
+        <Chip label="All Signed ✓" color="success" size="small" className="mt-2" />
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-uplifts-section.tsx b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-uplifts-section.tsx
new file mode 100644
index 00000000..afe2da7b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-uplifts-section.tsx
@@ -0,0 +1,210 @@
+import { Box, Button, Chip, Stack, Tooltip, Typography } from "@mui/material";
+import type { UpliftRequest } from "@/domain/uplifts/types/uplift";
+import { upliftsApi } from "@/domain/uplifts/api/uplifts-api";
+import { formatDateTime } from "@/lib/time-utils";
+import { toast } from "react-toastify";
+
+type UpliftAction = "approve" | "reject" | "request-changes";
+
+type DispatchUpliftsSectionProps = {
+  uplifts: UpliftRequest[];
+  isLocked: boolean;
+  onApprove: (uplift: UpliftRequest) => void;
+  onReject: (uplift: UpliftRequest) => void;
+  onRequestChanges: (uplift: UpliftRequest) => void;
+};
+
+const ACTION_LABELS: Record<Exclude<UpliftAction, "approve">, string> = {
+  reject: "Reject",
+  "request-changes": "Request Changes",
+};
+
+function actionColor(action: UpliftAction): "success" | "error" | "primary" {
+  if (action === "approve") return "success";
+  if (action === "reject") return "error";
+  return "primary";
+}
+
+function actionVariant(action: UpliftAction): "contained" | "outlined" {
+  return action === "request-changes" ? "outlined" : "contained";
+}
+
+type UpliftCardProps = Omit<DispatchUpliftsSectionProps, "uplifts"> & {
+  uplift: UpliftRequest;
+};
+
+type UpliftCardActionsProps = Pick<
+  UpliftCardProps,
+  "isLocked" | "onApprove" | "onReject" | "onRequestChanges"
+> & {
+  uplift: UpliftRequest;
+};
+
+function downloadUpliftEvidence(uplift: UpliftRequest) {
+  return upliftsApi
+    .downloadEvidence(uplift.id, uplift.evidenceFileName || "uplift-evidence")
+    .catch((err: unknown) => {
+      toast.error(err instanceof Error ? err.message : "Unable to download evidence.");
+    });
+}
+
+function UpliftCardHeader({ uplift }: { uplift: UpliftRequest }) {
+  const evidenceDocumentId = uplift.evidenceDocumentId;
+  return (
+    <>
+      <Stack direction="row" spacing={1} sx={{ alignItems: "center", flexWrap: "wrap" }}>
+        <Chip label={uplift.status} size="small" />
+        {uplift.requiredTier === 2 && (
+          <Typography variant="caption">Tier 2 · Manager approval</Typography>
+        )}
+        <Typography variant="body2">
+          ${Number(uplift.currentNTE ?? 0).toFixed(2)} → ${Number(uplift.requestedNTE).toFixed(2)}
+        </Typography>
+      </Stack>
+      {Boolean(uplift.expiresAt) && (
+        <Typography variant="caption" color="text.secondary" className="mt-1 block">
+          Expires {formatDateTime(uplift.expiresAt)}
+        </Typography>
+      )}
+      {Boolean(uplift.vendorReason) && (
+        <Typography variant="body2" className="mt-1">
+          <strong>Reason:</strong> {uplift.vendorReason}
+        </Typography>
+      )}
+      {evidenceDocumentId != null && (
+        <Stack direction="row" spacing={1} sx={{ alignItems: "center" }} className="mt-1">
+          <Typography variant="body2">
+            <strong>Evidence:</strong>{" "}
+            {uplift.evidenceFileName || `Document #${evidenceDocumentId}`}
+          </Typography>
+          <Button size="small" variant="text" onClick={() => void downloadUpliftEvidence(uplift)}>
+            Download
+          </Button>
+        </Stack>
+      )}
+      {uplift.notificationStatus === "Error" && Boolean(uplift.notificationError) && (
+        <Typography variant="body2" color="error" className="mt-1">
+          Notification error: {uplift.notificationError}
+        </Typography>
+      )}
+      {Boolean(uplift.requestedByVendorName || uplift.requestedAt) && (
+        <Typography variant="body2" color="text.secondary" className="mt-1">
+          Requested by {uplift.requestedByVendorName || "vendor"}
+          {uplift.requestedAt ? ` · ${formatDateTime(uplift.requestedAt)}` : ""}
+        </Typography>
+      )}
+    </>
+  );
+}
+
+function UpliftCardDecisionSummary({ uplift }: { uplift: UpliftRequest }) {
+  if (uplift.status === "Pending") return null;
+  if (!uplift.decidedByName && !uplift.decidedAt && !uplift.decisionNote) return null;
+  return (
+    <Box className="mt-1">
+      {Boolean(uplift.decidedByName || uplift.decidedAt) && (
+        <Typography variant="body2" color="text.secondary">
+          {uplift.status} by {uplift.decidedByName || "—"}
+          {uplift.decidedAt ? ` · ${formatDateTime(uplift.decidedAt)}` : ""}
+        </Typography>
+      )}
+      {Boolean(uplift.decisionNote) && (
+        <Typography variant="body2" className="mt-0.5">
+          <strong>Note:</strong> {uplift.decisionNote}
+        </Typography>
+      )}
+    </Box>
+  );
+}
+
+function UpliftCardActions({
+  uplift,
+  isLocked,
+  onApprove,
+  onReject,
+  onRequestChanges,
+}: UpliftCardActionsProps) {
+  if (uplift.status !== "Pending") return null;
+  const canDecide = uplift.canDecide && !isLocked;
+  const decisionActions: Exclude<UpliftAction, "approve">[] = ["reject", "request-changes"];
+  return (
+    <Stack direction="row" spacing={1} className="mt-2">
+      <Tooltip title={!canDecide ? `Requires Tier ${uplift.requiredTier} role` : ""}>
+        <span>
+          <Button
+            size="small"
+            color="success"
+            variant="contained"
+            disabled={!canDecide}
+            onClick={() => onApprove(uplift)}
+          >
+            Approve
+          </Button>
+        </span>
+      </Tooltip>
+      {decisionActions.map((action) => (
+        <Tooltip key={action} title={!canDecide ? `Requires Tier ${uplift.requiredTier} role` : ""}>
+          <span>
+            <Button
+              size="small"
+              color={actionColor(action)}
+              variant={actionVariant(action)}
+              disabled={!canDecide}
+              onClick={() => (action === "reject" ? onReject(uplift) : onRequestChanges(uplift))}
+            >
+              {ACTION_LABELS[action]}
+            </Button>
+          </span>
+        </Tooltip>
+      ))}
+    </Stack>
+  );
+}
+
+function UpliftCard({ uplift, isLocked, onApprove, onReject, onRequestChanges }: UpliftCardProps) {
+  return (
+    <Box className="rounded border border-border p-3">
+      <UpliftCardHeader uplift={uplift} />
+      <UpliftCardDecisionSummary uplift={uplift} />
+      <UpliftCardActions
+        uplift={uplift}
+        isLocked={isLocked}
+        onApprove={onApprove}
+        onReject={onReject}
+        onRequestChanges={onRequestChanges}
+      />
+    </Box>
+  );
+}
+
+export function DispatchUpliftsSection({
+  uplifts,
+  isLocked,
+  onApprove,
+  onReject,
+  onRequestChanges,
+}: DispatchUpliftsSectionProps) {
+  return (
+    <Box>
+      <Typography variant="subtitle1" className="mb-2 font-semibold">
+        NTE Uplift Requests
+      </Typography>
+      {uplifts.length === 0 ? (
+        <Typography color="text.secondary">No uplift requests.</Typography>
+      ) : (
+        <Stack spacing={2}>
+          {uplifts.map((uplift) => (
+            <UpliftCard
+              key={String(uplift.id)}
+              uplift={uplift}
+              isLocked={isLocked}
+              onApprove={onApprove}
+              onReject={onReject}
+              onRequestChanges={onRequestChanges}
+            />
+          ))}
+        </Stack>
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-vendor-communication.tsx b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-vendor-communication.tsx
new file mode 100644
index 00000000..816b78a5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-vendor-communication.tsx
@@ -0,0 +1,75 @@
+import { Box, Checkbox, FormControlLabel, Stack, TextField } from "@mui/material";
+import { CommentTimeline } from "@/components/common/comment-timeline";
+import { mapDispatchCommentsToTimeline } from "@/components/common/comment-timeline-mappers";
+import { Button } from "@/components/ui/button";
+import type { DispatchComment } from "@/domain/work-orders/types/work-order";
+
+type DispatchVendorCommunicationProps = {
+  comments: DispatchComment[];
+  commentText: string;
+  sendEmail: boolean;
+  isLocked: boolean;
+  isPending: boolean;
+  onCommentTextChange: (value: string) => void;
+  onSendEmailChange: (value: boolean) => void;
+  onSubmit: (event: React.FormEvent) => void;
+};
+
+export function DispatchVendorCommunication({
+  comments,
+  commentText,
+  sendEmail,
+  isLocked,
+  isPending,
+  onCommentTextChange,
+  onSendEmailChange,
+  onSubmit,
+}: DispatchVendorCommunicationProps) {
+  return (
+    <Box>
+      <span className="mb-2 block text-base font-semibold">Vendor Communication</span>
+      <Box className="mb-3 max-h-48 overflow-y-auto rounded border border-border p-2">
+        <CommentTimeline
+          items={mapDispatchCommentsToTimeline(comments)}
+          emptyMessage="No messages yet."
+          maxHeightClass="max-h-none"
+        />
+      </Box>
+      <Box component="form" onSubmit={onSubmit}>
+        <TextField
+          multiline
+          rows={2}
+          value={commentText}
+          onChange={(event) => onCommentTextChange(event.target.value)}
+          placeholder="Message vendor..."
+          fullWidth
+          disabled={isLocked || isPending}
+        />
+        <Stack
+          direction="row"
+          className="mt-2"
+          sx={{ justifyContent: "space-between", alignItems: "center" }}
+        >
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={sendEmail}
+                onChange={(event) => onSendEmailChange(event.target.checked)}
+                disabled={isLocked}
+              />
+            }
+            label="Send email"
+          />
+          <Button
+            type="submit"
+            disabled={isLocked || !commentText.trim()}
+            loading={isPending}
+            loadingText="Sending…"
+          >
+            Send
+          </Button>
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-verify-footer.tsx b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-verify-footer.tsx
new file mode 100644
index 00000000..4c8cb8a7
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-verify-footer.tsx
@@ -0,0 +1,52 @@
+import { Alert, Stack, Typography } from "@mui/material";
+import { Button } from "@/components/ui/button";
+import { formatDateTime } from "@/lib/time-utils";
+
+type DispatchVerifyFooterProps = {
+  verifiedAt: string;
+  verifiedBy: string;
+  canVerify: boolean;
+  missing: string[];
+  isPending: boolean;
+  onVerify: () => void;
+};
+
+export function DispatchVerifyFooter({
+  verifiedAt,
+  verifiedBy,
+  canVerify,
+  missing,
+  isPending,
+  onVerify,
+}: DispatchVerifyFooterProps) {
+  if (verifiedAt) {
+    return (
+      <Alert severity="success">
+        Verified by {verifiedBy} on {formatDateTime(verifiedAt)}
+      </Alert>
+    );
+  }
+
+  return (
+    <Stack direction="row" sx={{ justifyContent: "space-between", alignItems: "center" }}>
+      {missing.length > 0 && (
+        <Typography variant="body2" color="text.secondary">
+          Missing: {missing.join(", ")}
+        </Typography>
+      )}
+      <Button
+        disabled={!canVerify}
+        loading={isPending}
+        loadingText="Verifying…"
+        onClick={onVerify}
+        sx={{
+          backgroundColor: "success.main",
+          color: "#fff",
+          "&:hover": { backgroundColor: "success.dark" },
+        }}
+      >
+        Verify & Close
+      </Button>
+    </Stack>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/index.tsx b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/index.tsx
new file mode 100644
index 00000000..9f281015
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/index.tsx
@@ -0,0 +1,94 @@
+import { Dialog, DialogTitle } from "@mui/material";
+import { SignatureCapture } from "@/components/common/signature-capture";
+import { useDispatchDetailController } from "@/app/(protected)/workorders/_hooks/use-dispatch-detail-controller";
+import { DispatchDetailSkeleton } from "@/app/(protected)/workorders/_components/loading/dispatch-detail-skeleton";
+import { guardDialogClose } from "@/lib/dialog-guard";
+import { DispatchDetailBody } from "./dispatch-detail-body";
+import { DispatchDetailHeader } from "./dispatch-detail-header";
+import { UpliftDecisionDialog } from "./uplift-decision-dialog";
+
+interface DispatchDetailModalProps {
+  dispatchId: string | number;
+  workOrderId: string | number;
+  onClose: () => void;
+  onUpdated?: () => void;
+}
+
+export function DispatchDetailModal({
+  dispatchId,
+  workOrderId,
+  onClose,
+}: DispatchDetailModalProps) {
+  const controller = useDispatchDetailController(dispatchId, workOrderId);
+  const handleClose = guardDialogClose(controller.isMutating, onClose);
+  const isDecidingUplift =
+    controller.approveUpliftMutation.isPending ||
+    controller.rejectUpliftMutation.isPending ||
+    controller.requestChangesUpliftMutation.isPending;
+
+  if (controller.isLoading && !controller.dispatch) {
+    return (
+      <Dialog open onClose={onClose} maxWidth="md" fullWidth>
+        <DispatchDetailSkeleton />
+      </Dialog>
+    );
+  }
+
+  if (!controller.dispatch) {
+    return null;
+  }
+
+  const { dispatch } = controller;
+
+  return (
+    <>
+      <Dialog open onClose={handleClose} maxWidth="md" fullWidth scroll="paper">
+        <DialogTitle>
+          <DispatchDetailHeader
+            dispatch={dispatch}
+            onClose={() => {
+              if (!controller.isMutating) onClose();
+            }}
+          />
+        </DialogTitle>
+
+        <DispatchDetailBody dispatch={dispatch} controller={controller} />
+      </Dialog>
+
+      {controller.sigCaptureType != null && (
+        <SignatureCapture
+          title={`${controller.sigCaptureType} Sign-off`}
+          isPending={controller.addSignoffMutation.isPending}
+          onClose={() => controller.setSigCaptureType(null)}
+          onSave={(signature, method, name) => {
+            controller.addSignoffMutation.mutate(
+              {
+                signoffType: controller.sigCaptureType!,
+                name,
+                signature,
+                signatureMethod: method,
+              },
+              { onSuccess: () => controller.setSigCaptureType(null) },
+            );
+          }}
+        />
+      )}
+
+      {controller.upliftAction != null && (
+        <UpliftDecisionDialog
+          open
+          type={controller.upliftAction.type}
+          requestedNTE={controller.upliftAction.uplift.requestedNTE}
+          currentNTE={controller.upliftAction.uplift.currentNTE}
+          onClose={() => {
+            if (!isDecidingUplift) {
+              controller.setUpliftAction(null);
+            }
+          }}
+          onConfirm={controller.handleUpliftConfirm}
+          isPending={isDecidingUplift}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/uplift-decision-dialog.tsx b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/uplift-decision-dialog.tsx
new file mode 100644
index 00000000..c55751b8
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/dispatch/dispatch-detail/uplift-decision-dialog.tsx
@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@mui/material";
+import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
+import { Button } from "@/components/ui/button";
+import { DialogCancelButton } from "@/components/ui/dialog-cancel-button";
+import { Text } from "@/components/ui/text";
+import { guardDialogClose } from "@/lib/dialog-guard";
+
+type UpliftDecisionDialogProps = {
+  open: boolean;
+  type: "approve" | "reject" | "request-changes";
+  requestedNTE: number;
+  currentNTE: number | null;
+  onClose: () => void;
+  onConfirm: (note: string) => void;
+  isPending?: boolean;
+};
+
+function titleFor(type: UpliftDecisionDialogProps["type"], requestedNTE: number): string {
+  if (type === "approve") {
+    return `Approve uplift to $${requestedNTE.toFixed(2)}?`;
+  }
+  return type === "reject" ? "Reject Uplift" : "Request Changes";
+}
+
+export function UpliftDecisionDialog({
+  open,
+  type,
+  requestedNTE,
+  currentNTE,
+  onClose,
+  onConfirm,
+  isPending = false,
+}: UpliftDecisionDialogProps) {
+  const [note, setNote] = useState("");
+  const noteRequired = type === "reject" || type === "request-changes";
+
+  const handleClose = () => {
+    if (isPending) return;
+    setNote("");
+    onClose();
+  };
+
+  const handleConfirm = () => {
+    if (noteRequired && !note.trim()) return;
+    onConfirm(note.trim());
+  };
+
+  return (
+    <Dialog open={open} onClose={guardDialogClose(isPending, handleClose)}>
+      <DialogTitle>{titleFor(type, requestedNTE)}</DialogTitle>
+      <DialogContent>
+        {type === "approve" && (
+          <Text as="p" variant="description" className="mt-1 mb-3">
+            ${Number(currentNTE ?? 0).toFixed(2)} → ${requestedNTE.toFixed(2)} (+$
+            {(requestedNTE - Number(currentNTE ?? 0)).toFixed(2)})
+          </Text>
+        )}
+        <FieldLabel htmlFor="dispatch-uplift-note" required={noteRequired}>
+          {noteRequired ? "Note" : "Optional note"}
+        </FieldLabel>
+        <TextField
+          id="dispatch-uplift-note"
+          fullWidth
+          multiline
+          minRows={2}
+          className="mt-2"
+          value={note}
+          required={noteRequired}
+          onChange={(event) => setNote(event.target.value)}
+          disabled={isPending}
+        />
+      </DialogContent>
+      <DialogActions>
+        <DialogCancelButton onClick={handleClose} disabled={isPending} />
+        <Button
+          variant={type === "reject" ? "destructive" : "default"}
+          disabled={noteRequired && !note.trim()}
+          loading={isPending}
+          loadingText="Confirming…"
+          onClick={handleConfirm}
+        >
+          Confirm
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/advanced-search/adv-date-range-section.tsx b/src/app/(protected)/workorders/_components/list/advanced-search/adv-date-range-section.tsx
new file mode 100644
index 00000000..ee9f1b25
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/advanced-search/adv-date-range-section.tsx
@@ -0,0 +1,55 @@
+import type { Dispatch, SetStateAction } from "react";
+import { CalendarDays } from "lucide-react";
+import { AdvFilterPill } from "./adv-filter-pill";
+import { AdvSection } from "./adv-section";
+import { DateField } from "@/components/ui/date-input";
+import {
+  DATE_RANGE_OPTIONS,
+  type WorkOrderAdvancedFilters,
+} from "@/domain/work-orders/types/work-order-advanced-filters";
+import { isDefaultDateRange } from "@/domain/work-orders/utils/advanced-filters-utils";
+
+type AdvDateRangeSectionProps = {
+  draft: WorkOrderAdvancedFilters;
+  setDraft: Dispatch<SetStateAction<WorkOrderAdvancedFilters>>;
+};
+
+function dateRangeSectionCount(draft: WorkOrderAdvancedFilters): number {
+  return (isDefaultDateRange(draft.dateRange) ? 0 : 1) + (draft.unscheduledOnly ? 1 : 0);
+}
+
+export function AdvDateRangeSection({ draft, setDraft }: AdvDateRangeSectionProps) {
+  return (
+    <AdvSection icon={CalendarDays} label="Date range" count={dateRangeSectionCount(draft)}>
+      <div className="flex flex-wrap gap-1.5">
+        {DATE_RANGE_OPTIONS.map((option) => (
+          <AdvFilterPill
+            key={option.key}
+            label={option.label}
+            selected={draft.dateRange === option.key}
+            onClick={() => setDraft((prev) => ({ ...prev, dateRange: option.key }))}
+          />
+        ))}
+        <AdvFilterPill
+          label="Unscheduled"
+          selected={draft.unscheduledOnly}
+          onClick={() => setDraft((prev) => ({ ...prev, unscheduledOnly: !prev.unscheduledOnly }))}
+        />
+      </div>
+      {draft.dateRange === "custom" && (
+        <div className="mt-2.5 flex items-center gap-2">
+          <DateField
+            label="From"
+            value={draft.customFrom}
+            onChange={(value) => setDraft((prev) => ({ ...prev, customFrom: value }))}
+          />
+          <DateField
+            label="To"
+            value={draft.customTo}
+            onChange={(value) => setDraft((prev) => ({ ...prev, customTo: value }))}
+          />
+        </div>
+      )}
+    </AdvSection>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/advanced-search/adv-filter-pill.tsx b/src/app/(protected)/workorders/_components/list/advanced-search/adv-filter-pill.tsx
new file mode 100644
index 00000000..5b7c3394
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/advanced-search/adv-filter-pill.tsx
@@ -0,0 +1,78 @@
+import { DotTogglePill } from "@/components/ui/dot-toggle-pill";
+
+import { TogglePill } from "@/components/ui/toggle-pill";
+
+import { ToggleSegment } from "@/components/ui/toggle-segment";
+
+type AdvFilterPillProps = {
+  label: string;
+
+  selected: boolean;
+
+  onClick: () => void;
+
+  className?: string;
+};
+
+export function AdvFilterPill({ label, selected, onClick, className }: AdvFilterPillProps) {
+  return (
+    <TogglePill selected={selected} onClick={onClick} className={className}>
+      {label}
+    </TogglePill>
+  );
+}
+
+type AdvStatusPillProps = {
+  label: string;
+
+  dotColor: string;
+
+  selected: boolean;
+
+  selectedBg?: string;
+
+  selectedText?: string;
+
+  onClick: () => void;
+};
+
+export function AdvStatusPill({
+  label,
+
+  dotColor,
+
+  selected,
+
+  selectedBg,
+
+  selectedText,
+
+  onClick,
+}: AdvStatusPillProps) {
+  return (
+    <DotTogglePill
+      label={label}
+      dotColor={dotColor}
+      selected={selected}
+      selectedBg={selectedBg}
+      selectedText={selectedText}
+      onClick={onClick}
+    />
+  );
+}
+
+type AdvDocPillProps = {
+  label: string;
+
+  selected: boolean;
+
+  onClick: () => void;
+};
+
+export function AdvDocPill({ label, selected, onClick }: AdvDocPillProps) {
+  return (
+    <ToggleSegment selected={selected} onClick={onClick}>
+      {label}
+    </ToggleSegment>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/advanced-search/adv-filter-sections.tsx b/src/app/(protected)/workorders/_components/list/advanced-search/adv-filter-sections.tsx
new file mode 100644
index 00000000..b21120b7
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/advanced-search/adv-filter-sections.tsx
@@ -0,0 +1,175 @@
+import type { Dispatch, SetStateAction } from "react";
+import {
+  AlertTriangle,
+  CheckCircle2,
+  FileText,
+  Flame,
+  MapPin,
+  Tag,
+  Truck,
+  UserX,
+  Users,
+} from "lucide-react";
+import { AdvDocPill, AdvStatusPill } from "./adv-filter-pill";
+import { AdvDateRangeSection } from "./adv-date-range-section";
+import { AdvMultiSelect } from "./adv-multi-select";
+import { AdvFlagInternalUpliftSections, AdvIndicatorsSection } from "./adv-parity-filter-sections";
+import { AdvSection } from "./adv-section";
+import { AdvSeverityList } from "./adv-severity-list";
+import { AdvTypeGrid } from "./adv-type-grid";
+import { PmTypeIcon } from "@/app/(protected)/workorders/_components/list/table/pm-type-icons";
+import { SelectAllAction } from "@/components/ui/select-all-action";
+import {
+  ALL_WIZARD_STATUSES,
+  ASSIGNEE_FILTER_UNASSIGNED,
+  COMPLETION_DOC_OPTIONS,
+  DOC_FILTER_LABELS,
+  type AdvancedFilterSetKey,
+  type WorkOrderAdvancedFilters,
+} from "@/domain/work-orders/types/work-order-advanced-filters";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { WIZARD_STATUS_DOTS } from "@/domain/work-orders/types/work-order-wizard";
+
+type AdvancedSearchFilterSectionsProps = {
+  draft: WorkOrderAdvancedFilters;
+  setDraft: Dispatch<SetStateAction<WorkOrderAdvancedFilters>>;
+  toggleIn: (key: AdvancedFilterSetKey, value: string) => void;
+  setMany: (key: AdvancedFilterSetKey, values: string[], select: boolean) => void;
+  sites: { id: string | number; name: string }[];
+  users: WorkOrderUser[];
+  pmTypes: string[];
+  vendorTechs: string[];
+};
+
+export function AdvancedSearchFilterSections({
+  draft,
+  setDraft,
+  toggleIn,
+  setMany,
+  sites,
+  users,
+  pmTypes,
+  vendorTechs,
+}: AdvancedSearchFilterSectionsProps) {
+  const selectAllRow = (key: AdvancedFilterSetKey, all: string[], selectedSize: number) => (
+    <div className="mb-2 flex justify-end">
+      <SelectAllAction
+        anySelected={selectedSize > 0}
+        onClick={() => setMany(key, all, selectedSize === 0)}
+      />
+    </div>
+  );
+
+  return (
+    <div className="min-h-0 flex-1 overflow-y-auto px-4">
+      <AdvDateRangeSection draft={draft} setDraft={setDraft} />
+
+      <AdvSection icon={MapPin} label="Site" count={draft.sites.size}>
+        <AdvMultiSelect
+          options={sites.map((site) => ({
+            value: String(site.id),
+            label: site.name,
+          }))}
+          selected={draft.sites}
+          onToggle={(value) => toggleIn("sites", value)}
+          onBulkToggle={(values, select) => setMany("sites", values, select)}
+          placeholder="Search site…"
+        />
+      </AdvSection>
+
+      <AdvSection icon={Tag} label="Type of WO" count={draft.types.size}>
+        <AdvTypeGrid
+          selected={draft.types}
+          onToggle={(type) => toggleIn("types", type)}
+          onSelectAll={(types, select) => setMany("types", types, select)}
+        />
+      </AdvSection>
+
+      <AdvSection icon={AlertTriangle} label="Severity" count={draft.severities.size}>
+        <AdvSeverityList draft={draft} setDraft={setDraft} />
+      </AdvSection>
+
+      <AdvSection icon={Users} label="Assigned to" count={draft.dispatchers.size}>
+        <AdvMultiSelect
+          options={[
+            { value: ASSIGNEE_FILTER_UNASSIGNED, label: "Unassigned" },
+            ...users.map((user) => ({ value: String(user.id), label: user.name })),
+          ]}
+          selected={draft.dispatchers}
+          onToggle={(value) => toggleIn("dispatchers", value)}
+          onBulkToggle={(values, select) => setMany("dispatchers", values, select)}
+          placeholder="Search assigned to…"
+          renderLeft={(id) =>
+            id === ASSIGNEE_FILTER_UNASSIGNED ? (
+              <UserX size={14} className="shrink-0 text-muted-foreground" />
+            ) : (
+              <span className="size-2 shrink-0 rounded-full bg-muted-foreground" />
+            )
+          }
+        />
+      </AdvSection>
+
+      <AdvSection icon={CheckCircle2} label="Status" count={draft.statuses.size}>
+        {selectAllRow("statuses", [...ALL_WIZARD_STATUSES], draft.statuses.size)}
+        <div className="flex flex-wrap gap-1.5">
+          {ALL_WIZARD_STATUSES.map((status) => (
+            <AdvStatusPill
+              key={status}
+              label={status}
+              dotColor={WIZARD_STATUS_DOTS[status]}
+              selected={draft.statuses.has(status)}
+              selectedBg="var(--color-primary-tint)"
+              onClick={() => toggleIn("statuses", status)}
+            />
+          ))}
+        </div>
+      </AdvSection>
+
+      <AdvIndicatorsSection draft={draft} setDraft={setDraft} />
+
+      <AdvSection icon={Flame} label="Service" count={draft.pmTypes.size}>
+        <AdvMultiSelect
+          options={pmTypes.map((pmType) => ({ value: pmType, label: pmType }))}
+          selected={draft.pmTypes}
+          onToggle={(value) => toggleIn("pmTypes", value)}
+          onBulkToggle={(values, select) => setMany("pmTypes", values, select)}
+          placeholder="Search service…"
+          renderLeft={(pmType) => (
+            <PmTypeIcon pmType={pmType} size={14} className="shrink-0 text-muted-foreground" />
+          )}
+        />
+      </AdvSection>
+
+      <AdvSection icon={Truck} label="Vendor / tech" count={draft.vendorTechs.size}>
+        <AdvMultiSelect
+          options={vendorTechs.map((name) => ({ value: name, label: name }))}
+          selected={draft.vendorTechs}
+          onToggle={(value) => toggleIn("vendorTechs", value)}
+          onBulkToggle={(values, select) => setMany("vendorTechs", values, select)}
+          placeholder="Search vendor / tech…"
+        />
+      </AdvSection>
+
+      <AdvSection icon={FileText} label="Completion doc" count={draft.docs.size}>
+        {selectAllRow("docs", [...COMPLETION_DOC_OPTIONS], draft.docs.size)}
+        <div className="flex items-center gap-2">
+          {COMPLETION_DOC_OPTIONS.map((doc) => (
+            <AdvDocPill
+              key={doc}
+              label={DOC_FILTER_LABELS[doc]}
+              selected={draft.docs.has(doc)}
+              onClick={() => toggleIn("docs", doc)}
+            />
+          ))}
+        </div>
+      </AdvSection>
+
+      <AdvFlagInternalUpliftSections
+        draft={draft}
+        setDraft={setDraft}
+        toggleIn={toggleIn}
+        setMany={setMany}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/advanced-search/adv-multi-select.tsx b/src/app/(protected)/workorders/_components/list/advanced-search/adv-multi-select.tsx
new file mode 100644
index 00000000..f9f877aa
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/advanced-search/adv-multi-select.tsx
@@ -0,0 +1,100 @@
+import { useState, type ReactNode } from "react";
+
+import { CheckboxListItem } from "@/components/ui/checkbox-list-item";
+
+import { SearchInput } from "@/components/ui/search-input";
+
+import { SelectAllAction } from "@/components/ui/select-all-action";
+
+type AdvMultiSelectOption = {
+  value: string;
+
+  label: string;
+};
+
+type AdvMultiSelectProps = {
+  options: AdvMultiSelectOption[];
+
+  selected: Set<string>;
+
+  onToggle: (value: string) => void;
+
+  onBulkToggle?: (values: string[], select: boolean) => void;
+
+  placeholder: string;
+
+  renderLeft?: (value: string) => ReactNode;
+};
+
+export function AdvMultiSelect({
+  options,
+
+  selected,
+
+  onToggle,
+
+  onBulkToggle,
+
+  placeholder,
+
+  renderLeft,
+}: AdvMultiSelectProps) {
+  const [query, setQuery] = useState("");
+
+  const list = query
+    ? options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()))
+    : options;
+
+  const anySelected = selected.size > 0;
+
+  return (
+    <div>
+      <SearchInput
+        value={query}
+        onChange={setQuery}
+        placeholder={placeholder}
+        fullWidth
+        className="mb-2"
+      />
+
+      <div className="mb-1.5 flex items-center justify-between">
+        <span className="text-[11px] text-muted-foreground">
+          {selected.size} of {options.length} selected
+        </span>
+
+        <SelectAllAction
+          anySelected={anySelected}
+          onClick={() =>
+            anySelected
+              ? onBulkToggle?.(
+                  options.map((option) => option.value),
+
+                  false,
+                )
+              : onBulkToggle?.(
+                  list.map((option) => option.value),
+
+                  true,
+                )
+          }
+        />
+      </div>
+
+      <div className="max-h-48 overflow-y-auto rounded-lg border border-border p-1">
+        {list.map((option) => (
+          <CheckboxListItem
+            key={option.value}
+            selected={selected.has(option.value)}
+            label={option.label}
+            left={renderLeft?.(option.value)}
+            onClick={() => onToggle(option.value)}
+          />
+        ))}
+
+        {list.length === 0 && (
+          <div className="px-2 py-3 text-center text-xs text-muted-foreground">No matches</div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/advanced-search/adv-parity-filter-sections.tsx b/src/app/(protected)/workorders/_components/list/advanced-search/adv-parity-filter-sections.tsx
new file mode 100644
index 00000000..8c6b1446
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/advanced-search/adv-parity-filter-sections.tsx
@@ -0,0 +1,233 @@
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+import {
+  ArrowRight,
+  Check,
+  DollarSign,
+  Flag,
+  Hash,
+  Plus,
+  RefreshCw,
+  ShieldCheck,
+} from "lucide-react";
+import { Checkbox } from "@mui/material";
+import { AdvDocPill } from "./adv-filter-pill";
+import { AdvMultiSelect } from "./adv-multi-select";
+import { AdvSection } from "./adv-section";
+import { FLAG_COLORS } from "@/domain/work-orders/flag-colors";
+import {
+  type AdvancedFilterSetKey,
+  type WorkOrderAdvancedFilters,
+} from "@/domain/work-orders/types/work-order-advanced-filters";
+import {
+  UPLIFT_FILTER_LABELS,
+  UPLIFT_FILTER_STATUSES,
+  type UpliftFilterStatus,
+} from "@/domain/work-orders/types/work-order-uplift-filter";
+
+type DraftProps = {
+  draft: WorkOrderAdvancedFilters;
+  setDraft: Dispatch<SetStateAction<WorkOrderAdvancedFilters>>;
+};
+
+type AdvFlagInternalUpliftSectionsProps = DraftProps & {
+  toggleIn: (key: AdvancedFilterSetKey, value: string) => void;
+  setMany: (key: AdvancedFilterSetKey, values: string[], select: boolean) => void;
+};
+
+function indicatorCount(draft: WorkOrderAdvancedFilters): number {
+  return (draft.rescheduled ? 1 : 0) + (draft.carriedOver ? 1 : 0) + (draft.addOn ? 1 : 0);
+}
+
+function FlagColorDot({ value }: { value: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className="size-3 shrink-0 rounded-full"
+      style={{ background: value, border: "1px solid var(--color-border)" }}
+    />
+  );
+}
+
+type IndicatorKind = "rescheduled" | "carriedOver" | "addOn";
+
+const INDICATOR_SELECTED: Record<IndicatorKind, { background: string; color: string }> = {
+  rescheduled: { background: "#f5f3ff", color: "#7c3aed" },
+  carriedOver: { background: "var(--color-bg-muted)", color: "var(--color-text-primary)" },
+  addOn: { background: "var(--type-addon-bg)", color: "var(--type-addon-text)" },
+};
+
+function IndicatorPill({
+  selected,
+  onClick,
+  kind,
+  children,
+}: {
+  selected: boolean;
+  onClick: () => void;
+  kind: IndicatorKind;
+  children: ReactNode;
+}) {
+  const selectedLook = INDICATOR_SELECTED[kind];
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      data-indicator={kind}
+      data-selected={selected ? "true" : "false"}
+      aria-pressed={selected}
+      className="inline-flex items-center gap-1.5"
+      style={{
+        height: 26,
+        padding: "0 9px",
+        borderRadius: 9999,
+        border: `1px solid ${selected ? "var(--color-primary)" : "var(--color-border)"}`,
+        background: selected ? selectedLook.background : "var(--color-bg-surface)",
+        color: selected ? selectedLook.color : "var(--color-text-secondary)",
+        fontSize: 12,
+        fontWeight: 500,
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function AdvIndicatorsSection({ draft, setDraft }: DraftProps) {
+  return (
+    <AdvSection icon={RefreshCw} label="Indicators" count={indicatorCount(draft)}>
+      <div className="flex flex-wrap gap-1.5">
+        <IndicatorPill
+          kind="rescheduled"
+          selected={draft.rescheduled}
+          onClick={() => setDraft((prev) => ({ ...prev, rescheduled: !prev.rescheduled }))}
+        >
+          <RefreshCw size={12} className="shrink-0" style={{ color: "#7c3aed" }} />
+          Rescheduled ≥ 2
+        </IndicatorPill>
+        <IndicatorPill
+          kind="carriedOver"
+          selected={draft.carriedOver}
+          onClick={() => setDraft((prev) => ({ ...prev, carriedOver: !prev.carriedOver }))}
+        >
+          <ArrowRight size={12} className="shrink-0" style={{ color: "var(--color-text-muted)" }} />
+          Carried Over ≥ 2
+        </IndicatorPill>
+        <IndicatorPill
+          kind="addOn"
+          selected={draft.addOn}
+          onClick={() => setDraft((prev) => ({ ...prev, addOn: !prev.addOn }))}
+        >
+          <Plus size={12} className="shrink-0" style={{ color: "var(--type-addon-text)" }} />
+          Add-On
+        </IndicatorPill>
+      </div>
+    </AdvSection>
+  );
+}
+
+const FILTER_TOGGLE_CHECKBOX_SX = {
+  padding: 0,
+  color: "var(--color-border-hover)",
+  "&.Mui-checked": { color: "var(--color-primary)" },
+} as const;
+
+export function AdvAvetaSection({ draft, setDraft }: DraftProps) {
+  return (
+    <AdvSection icon={ShieldCheck} label="Aveta Compliance" count={draft.avetaOnly ? 1 : 0}>
+      <label className="flex cursor-pointer items-center gap-1.5 select-none">
+        <Checkbox
+          size="small"
+          checked={draft.avetaOnly}
+          onChange={() => setDraft((prev) => ({ ...prev, avetaOnly: !prev.avetaOnly }))}
+          sx={FILTER_TOGGLE_CHECKBOX_SX}
+        />
+        <span className="text-sm text-muted-foreground">Aveta required only</span>
+      </label>
+    </AdvSection>
+  );
+}
+
+export function AdvFlagInternalUpliftSections({
+  draft,
+  setDraft,
+  toggleIn,
+  setMany,
+}: AdvFlagInternalUpliftSectionsProps) {
+  const toggleUpliftStatus = (status: UpliftFilterStatus) => {
+    setDraft((prev) => {
+      const next = new Set(prev.upliftStatuses);
+      if (next.has(status)) {
+        next.delete(status);
+      } else {
+        next.add(status);
+      }
+      return { ...prev, upliftStatuses: next };
+    });
+  };
+
+  return (
+    <>
+      <AdvSection icon={Flag} label="Flag" count={draft.flagColors.size}>
+        <AdvMultiSelect
+          options={FLAG_COLORS.map((color) => ({ value: color.value, label: color.name }))}
+          selected={draft.flagColors}
+          onToggle={(value) => toggleIn("flagColors", value)}
+          onBulkToggle={(values, select) => setMany("flagColors", values, select)}
+          placeholder="Search flag colour…"
+          renderLeft={(value) => <FlagColorDot value={value} />}
+        />
+      </AdvSection>
+
+      <AdvSection icon={Hash} label="Work Order Number" count={draft.internalOnly ? 1 : 0}>
+        <button
+          type="button"
+          onClick={() => setDraft((prev) => ({ ...prev, internalOnly: !prev.internalOnly }))}
+          className="flex w-full items-center gap-2 text-left"
+        >
+          <span
+            className="flex size-[18px] shrink-0 items-center justify-center rounded border"
+            style={{
+              borderColor: draft.internalOnly ? "var(--color-primary)" : "var(--color-border)",
+              background: draft.internalOnly ? "var(--color-primary)" : "var(--color-bg-surface)",
+            }}
+          >
+            {Boolean(draft.internalOnly) && <Check size={12} className="text-white" />}
+          </span>
+          <span className="text-sm text-muted-foreground">Internal numbers only (SH prefix)</span>
+        </button>
+      </AdvSection>
+
+      <AdvAvetaSection draft={draft} setDraft={setDraft} />
+
+      <AdvSection icon={DollarSign} label="Uplift" count={draft.hasUplift ? 1 : 0}>
+        <label className="flex cursor-pointer items-center gap-1.5 select-none">
+          <Checkbox
+            size="small"
+            checked={draft.hasUplift}
+            onChange={() =>
+              setDraft((prev) => ({
+                ...prev,
+                hasUplift: !prev.hasUplift,
+                upliftStatuses: prev.hasUplift ? new Set() : prev.upliftStatuses,
+              }))
+            }
+            sx={FILTER_TOGGLE_CHECKBOX_SX}
+          />
+          <span className="text-sm text-muted-foreground">Has uplift</span>
+        </label>
+        {Boolean(draft.hasUplift) && (
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            {UPLIFT_FILTER_STATUSES.map((status) => (
+              <AdvDocPill
+                key={status}
+                label={UPLIFT_FILTER_LABELS[status]}
+                selected={draft.upliftStatuses.has(status)}
+                onClick={() => toggleUpliftStatus(status)}
+              />
+            ))}
+          </div>
+        )}
+      </AdvSection>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/advanced-search/adv-section.tsx b/src/app/(protected)/workorders/_components/list/advanced-search/adv-section.tsx
new file mode 100644
index 00000000..f7195508
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/advanced-search/adv-section.tsx
@@ -0,0 +1,19 @@
+import type { ElementType, ReactNode } from "react";
+
+import { CollapsibleSection } from "@/components/ui/collapsible-section";
+
+type AdvSectionProps = {
+  icon?: ElementType;
+
+  label: string;
+
+  count?: number;
+
+  defaultOpen?: boolean;
+
+  children: ReactNode;
+};
+
+export function AdvSection(props: AdvSectionProps) {
+  return <CollapsibleSection {...props} />;
+}
diff --git a/src/app/(protected)/workorders/_components/list/advanced-search/adv-severity-list.tsx b/src/app/(protected)/workorders/_components/list/advanced-search/adv-severity-list.tsx
new file mode 100644
index 00000000..05e6d9c6
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/advanced-search/adv-severity-list.tsx
@@ -0,0 +1,84 @@
+import type { Dispatch, SetStateAction } from "react";
+import { Check } from "lucide-react";
+import { SelectAllAction } from "@/components/ui/select-all-action";
+import {
+  SEVERITY_LEVELS,
+  SEVERITY_TOKEN_COLOR,
+  WORK_ORDER_SEVERITIES,
+  type WorkOrderSeverity,
+} from "@/domain/work-orders/types/work-order-severity";
+import type { WorkOrderAdvancedFilters } from "@/domain/work-orders/types/work-order-advanced-filters";
+
+type AdvSeverityListProps = {
+  draft: WorkOrderAdvancedFilters;
+  setDraft: Dispatch<SetStateAction<WorkOrderAdvancedFilters>>;
+};
+
+export function AdvSeverityList({ draft, setDraft }: AdvSeverityListProps) {
+  const toggleLevel = (level: WorkOrderSeverity) => {
+    setDraft((prev) => {
+      const next = new Set(prev.severities);
+      if (next.has(level)) {
+        next.delete(level);
+      } else {
+        next.add(level);
+      }
+      return { ...prev, severities: next };
+    });
+  };
+
+  return (
+    <>
+      <div className="mb-2 flex justify-end">
+        <SelectAllAction
+          anySelected={draft.severities.size > 0}
+          onClick={() =>
+            setDraft((prev) => ({
+              ...prev,
+              severities:
+                prev.severities.size > 0
+                  ? new Set()
+                  : new Set<WorkOrderSeverity>(WORK_ORDER_SEVERITIES),
+            }))
+          }
+        />
+      </div>
+      <div className="grid gap-1.5">
+        {WORK_ORDER_SEVERITIES.map((level) => {
+          const meta = SEVERITY_LEVELS[level];
+          const color = SEVERITY_TOKEN_COLOR[meta.token];
+          const selected = draft.severities.has(level);
+          return (
+            <button
+              key={level}
+              type="button"
+              onClick={() => toggleLevel(level)}
+              className="flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-left transition-colors"
+              style={{
+                borderColor: selected ? color : "var(--color-border)",
+                background: selected ? "var(--color-bg-muted)" : "transparent",
+              }}
+            >
+              <span
+                className="flex size-4 shrink-0 items-center justify-center rounded"
+                style={{
+                  border: `1px solid ${selected ? color : "var(--color-border)"}`,
+                  background: selected ? color : "transparent",
+                }}
+              >
+                {Boolean(selected) && <Check size={11} className="text-white" />}
+              </span>
+              <span
+                className="shrink-0 rounded border px-1.5 py-px text-[11px] font-semibold whitespace-nowrap"
+                style={{ color, borderColor: color }}
+              >
+                {meta.label}
+              </span>
+              <span className="flex-1 text-xs text-foreground">{meta.description}</span>
+            </button>
+          );
+        })}
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/advanced-search/adv-type-grid.tsx b/src/app/(protected)/workorders/_components/list/advanced-search/adv-type-grid.tsx
new file mode 100644
index 00000000..b1762731
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/advanced-search/adv-type-grid.tsx
@@ -0,0 +1,43 @@
+import { SelectAllAction } from "@/components/ui/select-all-action";
+
+import { ToggleCard } from "@/components/ui/toggle-card";
+
+import {
+  WO_TYPE_DESCRIPTIONS,
+  WO_TYPES,
+} from "@/domain/work-orders/types/work-order-advanced-filters";
+
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+type AdvTypeGridProps = {
+  selected: Set<WOType>;
+
+  onToggle: (type: WOType) => void;
+
+  onSelectAll: (types: WOType[], select: boolean) => void;
+};
+
+export function AdvTypeGrid({ selected, onToggle, onSelectAll }: AdvTypeGridProps) {
+  return (
+    <>
+      <div className="mb-2 flex justify-end">
+        <SelectAllAction
+          anySelected={selected.size > 0}
+          onClick={() => onSelectAll([...WO_TYPES], selected.size === 0)}
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-2">
+        {WO_TYPES.map((type) => (
+          <ToggleCard
+            key={type}
+            selected={selected.has(type)}
+            title={type}
+            description={WO_TYPE_DESCRIPTIONS[type]}
+            onClick={() => onToggle(type)}
+          />
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/advanced-search/use-advanced-search-draft.ts b/src/app/(protected)/workorders/_components/list/advanced-search/use-advanced-search-draft.ts
new file mode 100644
index 00000000..e1061f0e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/advanced-search/use-advanced-search-draft.ts
@@ -0,0 +1,74 @@
+import { useEffect, useState } from "react";
+import {
+  EMPTY_ADVANCED_FILTERS,
+  type AdvancedFilterSetKey,
+  type WorkOrderAdvancedFilters,
+} from "@/domain/work-orders/types/work-order-advanced-filters";
+import {
+  cloneAdvancedFilters,
+  countAdvancedFilters,
+} from "@/domain/work-orders/utils/advanced-filters-utils";
+
+type UseAdvancedSearchDraftOptions = {
+  open: boolean;
+  initial: WorkOrderAdvancedFilters;
+  onApply: (filters: WorkOrderAdvancedFilters) => void;
+  onClearAll: () => void;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function useAdvancedSearchDraft({
+  open,
+  initial,
+  onApply,
+  onClearAll,
+  onOpenChange,
+}: UseAdvancedSearchDraftOptions) {
+  const [draft, setDraft] = useState<WorkOrderAdvancedFilters>(initial);
+
+  useEffect(() => {
+    if (open) {
+      setDraft(cloneAdvancedFilters(initial));
+    }
+  }, [open, initial]);
+
+  const activeCount = countAdvancedFilters(draft);
+
+  const toggleIn = (key: AdvancedFilterSetKey, value: string) => {
+    setDraft((prev) => {
+      const next = new Set(prev[key] as Set<string>);
+      if (next.has(value)) {
+        next.delete(value);
+      } else {
+        next.add(value);
+      }
+      return { ...prev, [key]: next };
+    });
+  };
+
+  const setMany = (key: AdvancedFilterSetKey, values: string[], select: boolean) => {
+    setDraft((prev) => {
+      const next = new Set(prev[key] as Set<string>);
+      values.forEach((value) => (select ? next.add(value) : next.delete(value)));
+      return { ...prev, [key]: next };
+    });
+  };
+
+  const handleClearAll = () => {
+    if (activeCount === 0) {
+      return;
+    }
+    setDraft(cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS));
+    onClearAll();
+  };
+
+  const handleApply = () => {
+    if (activeCount === 0) {
+      return;
+    }
+    onApply(cloneAdvancedFilters(draft));
+    onOpenChange(false);
+  };
+
+  return { draft, setDraft, activeCount, toggleIn, setMany, handleClearAll, handleApply };
+}
diff --git a/src/app/(protected)/workorders/_components/list/advanced-search/work-orders-advanced-search-sheet.tsx b/src/app/(protected)/workorders/_components/list/advanced-search/work-orders-advanced-search-sheet.tsx
new file mode 100644
index 00000000..b18415f5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/advanced-search/work-orders-advanced-search-sheet.tsx
@@ -0,0 +1,88 @@
+import { SlidersHorizontal } from "lucide-react";
+import { AdvancedSearchFilterSections } from "./adv-filter-sections";
+import { useAdvancedSearchDraft } from "./use-advanced-search-draft";
+import { Button } from "@/components/ui/button";
+import { IconCloseButton } from "@/components/ui/icon-close-button";
+import { SideSheet } from "@/components/ui/side-sheet";
+import type { WorkOrderAdvancedFilters } from "@/domain/work-orders/types/work-order-advanced-filters";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+
+type WorkOrdersAdvancedSearchSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initial: WorkOrderAdvancedFilters;
+  onApply: (filters: WorkOrderAdvancedFilters) => void;
+  onClearAll: () => void;
+  sites: { id: string | number; name: string }[];
+  users: WorkOrderUser[];
+  pmTypes: string[];
+  vendorTechs: string[];
+};
+
+export function WorkOrdersAdvancedSearchSheet({
+  open,
+  onOpenChange,
+  initial,
+  onApply,
+  onClearAll,
+  sites,
+  users,
+  pmTypes,
+  vendorTechs,
+}: WorkOrdersAdvancedSearchSheetProps) {
+  const { draft, setDraft, activeCount, toggleIn, setMany, handleClearAll, handleApply } =
+    useAdvancedSearchDraft({ open, initial, onApply, onClearAll, onOpenChange });
+
+  return (
+    <SideSheet open={open} onClose={() => onOpenChange(false)} aria-label="Advanced Filters">
+      <span className="sr-only">Advanced Filters</span>
+
+      <div className="flex h-14 shrink-0 items-center justify-between border-b border-border px-4">
+        <div className="flex items-baseline gap-2">
+          <span className="flex items-center gap-2">
+            <SlidersHorizontal size={16} className="text-primary" />
+            <span className="font-display text-[15px] font-bold text-foreground">
+              Advanced Filters
+            </span>
+          </span>
+          {activeCount > 0 && (
+            <span className="text-xs text-muted-foreground">· {activeCount} active</span>
+          )}
+        </div>
+        <IconCloseButton onClick={() => onOpenChange(false)} />
+      </div>
+
+      <AdvancedSearchFilterSections
+        draft={draft}
+        setDraft={setDraft}
+        toggleIn={toggleIn}
+        setMany={setMany}
+        sites={sites}
+        users={users}
+        pmTypes={pmTypes}
+        vendorTechs={vendorTechs}
+      />
+
+      <div className="flex shrink-0 items-center gap-2 border-t border-border px-4 py-3">
+        <Button
+          variant="ghost"
+          className="text-xs"
+          disabled={activeCount === 0}
+          onClick={handleClearAll}
+        >
+          Clear all
+        </Button>
+        <div className="flex flex-1 justify-center">
+          {activeCount > 0 && (
+            <span className="text-xs font-medium text-muted-foreground">
+              {activeCount} filter set
+            </span>
+          )}
+        </div>
+        <Button className="px-5 text-xs" disabled={activeCount === 0} onClick={handleApply}>
+          Apply filters
+        </Button>
+      </div>
+    </SideSheet>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog.tsx b/src/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog.tsx
new file mode 100644
index 00000000..95decbe7
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog.tsx
@@ -0,0 +1,45 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type DuplicateWoNumberDialogProps = {
+  open: boolean;
+  existing: WorkOrderTableRow | null;
+  onDismiss: () => void;
+  onViewExisting: (row: WorkOrderTableRow) => void;
+};
+
+export function DuplicateWoNumberDialog({
+  open,
+  existing,
+  onDismiss,
+  onViewExisting,
+}: DuplicateWoNumberDialogProps) {
+  const woNumber = existing?.woNumber ?? "";
+
+  return (
+    <Dialog open={open} onClose={onDismiss} aria-labelledby="duplicate-wo-number-dialog-title">
+      <DialogTitle id="duplicate-wo-number-dialog-title">Duplicate Work Order Number</DialogTitle>
+      <DialogContent>
+        <Text variant="body">
+          Work order number {woNumber} is already assigned to another work order. View the existing
+          record or dismiss to keep editing.
+        </Text>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onDismiss}>Dismiss</Button>
+        <Button
+          variant="contained"
+          disabled={existing == null}
+          onClick={() => {
+            if (existing != null) {
+              onViewExisting(existing);
+            }
+          }}
+        >
+          View existing
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/filter-bar/day-tabs.tsx b/src/app/(protected)/workorders/_components/list/filter-bar/day-tabs.tsx
new file mode 100644
index 00000000..1745af5a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/filter-bar/day-tabs.tsx
@@ -0,0 +1,35 @@
+import { NavPillButton } from "@/components/ui/nav-pill-button";
+import { formatDayTabLabel, weekdaysMonFri } from "@/domain/work-orders/utils/week-day-nav-utils";
+
+type DayTabsProps = {
+  weekMonday: string;
+  selectedDayIso: string;
+  onChange: (dayIso: string) => void;
+  disabled?: boolean;
+};
+
+export function DayTabs({ weekMonday, selectedDayIso, onChange, disabled = false }: DayTabsProps) {
+  const days = weekdaysMonFri(weekMonday);
+
+  return (
+    <div className="flex items-center gap-1.5 overflow-x-auto" role="tablist" aria-label="Weekdays">
+      {days.map((iso) => {
+        const label = formatDayTabLabel(iso);
+        const active = iso === selectedDayIso;
+        return (
+          <NavPillButton
+            key={iso}
+            active={active}
+            disabled={disabled}
+            role="tab"
+            aria-selected={active}
+            aria-label={label}
+            onClick={() => onChange(iso)}
+          >
+            {label}
+          </NavPillButton>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/filter-bar/dispatcher-filter.tsx b/src/app/(protected)/workorders/_components/list/filter-bar/dispatcher-filter.tsx
new file mode 100644
index 00000000..3998b53f
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/filter-bar/dispatcher-filter.tsx
@@ -0,0 +1,157 @@
+import { useMemo } from "react";
+import { Popover, Skeleton } from "@mui/material";
+import { ChevronDown, UserX, Users } from "lucide-react";
+import { ASSIGNEE_FILTER_UNASSIGNED } from "@/domain/work-orders/types/work-order-list";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { getDispatcherAvatarColor } from "@/domain/work-orders/utils/dispatcher-avatar-color";
+import { CheckboxMenuItem } from "@/components/ui/checkbox-menu-item";
+import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
+import { useMenuAnchor } from "@/hooks/use-menu-anchor";
+
+type DispatcherFilterProps = {
+  selectedIds: Set<string>;
+  onChange: (ids: Set<string>) => void;
+  users: WorkOrderUser[];
+  usersLoading?: boolean;
+  currentUserId?: string | number;
+  disabled?: boolean;
+};
+
+function userInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+}
+
+function DispatcherAvatar({ name, color }: { name: string; color: string }) {
+  return (
+    <span
+      aria-hidden
+      className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[9px] font-semibold"
+      style={{ background: `${color}25`, color }}
+    >
+      {userInitials(name)}
+    </span>
+  );
+}
+
+export function DispatcherFilter({
+  selectedIds,
+  onChange,
+  users,
+  usersLoading = false,
+  currentUserId,
+  disabled = false,
+}: DispatcherFilterProps) {
+  const { anchorEl, open, setAnchor, close } = useMenuAnchor();
+
+  const meId = currentUserId != null && currentUserId !== "" ? String(currentUserId) : null;
+  const allSelected = selectedIds.size === 0;
+  const meOnly = meId != null && selectedIds.size === 1 && selectedIds.has(meId);
+  const unassignedOnly = selectedIds.size === 1 && selectedIds.has(ASSIGNEE_FILTER_UNASSIGNED);
+
+  const label = useMemo(() => {
+    if (allSelected) return "All dispatchers";
+    if (meOnly) return "My WOs";
+    if (unassignedOnly) return "Unassigned";
+    return `${selectedIds.size} selected`;
+  }, [allSelected, meOnly, unassignedOnly, selectedIds.size]);
+
+  const dispatchers = useMemo(() => {
+    return [...users].sort((a, b) => a.name.localeCompare(b.name));
+  }, [users]);
+
+  const toggle = (id: string) => {
+    const next = new Set(selectedIds);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    onChange(next);
+  };
+
+  if (usersLoading && users.length === 0) {
+    return (
+      <Skeleton
+        variant="rounded"
+        width={140}
+        height={18}
+        animation="wave"
+        aria-label="Loading dispatchers"
+      />
+    );
+  }
+
+  return (
+    <>
+      <MenuAnchorButton
+        onAnchor={setAnchor}
+        open={open}
+        disabled={disabled}
+        className="flex w-auto shrink-0 items-center gap-1.5 whitespace-nowrap transition-colors"
+        style={{ fontSize: 13, fontWeight: 500, color: "var(--muted-foreground)" }}
+        aria-haspopup="listbox"
+      >
+        <Users size={13} aria-hidden style={{ color: "var(--muted-foreground)" }} />
+        {label}
+        <ChevronDown size={13} aria-hidden style={{ color: "var(--muted-foreground)" }} />
+      </MenuAnchorButton>
+
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={close}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
+        slotProps={{
+          paper: {
+            className: "mt-1 w-[220px] rounded-lg border border-border p-1.5 shadow-md",
+          },
+        }}
+      >
+        <CheckboxMenuItem
+          checked={allSelected}
+          label="All dispatchers"
+          onClick={() => onChange(new Set())}
+        />
+
+        {meId != null && (
+          <CheckboxMenuItem
+            checked={meOnly}
+            label="My WOs only"
+            labelClassName="font-medium text-primary"
+            onClick={() => onChange(new Set([meId]))}
+          />
+        )}
+
+        <CheckboxMenuItem
+          checked={selectedIds.has(ASSIGNEE_FILTER_UNASSIGNED)}
+          label="Unassigned"
+          left={<UserX size={14} className="shrink-0 text-muted-foreground" />}
+          className="mb-1 pb-2"
+          style={{ borderBottom: "1px solid var(--color-border)" }}
+          onClick={() => toggle(ASSIGNEE_FILTER_UNASSIGNED)}
+        />
+
+        {dispatchers.map((user) => {
+          const id = String(user.id);
+          const isMe = meId === id;
+          return (
+            <CheckboxMenuItem
+              key={id}
+              checked={selectedIds.has(id)}
+              label={user.name}
+              left={<DispatcherAvatar name={user.name} color={getDispatcherAvatarColor(user)} />}
+              right={
+                isMe ? <span className="text-[10px] text-muted-foreground">me</span> : undefined
+              }
+              onClick={() => toggle(id)}
+            />
+          );
+        })}
+      </Popover>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/filter-bar/week-selector.tsx b/src/app/(protected)/workorders/_components/list/filter-bar/week-selector.tsx
new file mode 100644
index 00000000..49f985f4
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/filter-bar/week-selector.tsx
@@ -0,0 +1,81 @@
+import { Popover } from "@mui/material";
+import { ChevronDown } from "lucide-react";
+import { WeekPicker } from "@/app/(protected)/workorders/_components/wizard/week-picker";
+import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
+import {
+  compactWeekLabel,
+  isFutureWeek,
+  isLiveWeek,
+} from "@/domain/work-orders/utils/list-week-utils";
+import { useMenuAnchor } from "@/hooks/use-menu-anchor";
+import { cn } from "@/lib/utils";
+
+type WeekSelectorProps = {
+  weekMonday: string;
+  onChange: (mondayIso: string) => void;
+  disabled?: boolean;
+};
+
+function WeekLiveBadge() {
+  return (
+    <span
+      className="uppercase"
+      style={{
+        fontFamily: "var(--font-mono)",
+        fontSize: 9,
+        fontWeight: 700,
+        color: "#ffffff",
+        background: "var(--success)",
+        borderRadius: 9999,
+        padding: "1px 5px",
+        letterSpacing: "0.04em",
+      }}
+    >
+      Live
+    </span>
+  );
+}
+
+export function WeekSelector({ weekMonday, onChange, disabled = false }: WeekSelectorProps) {
+  const { anchorEl, open, setAnchor, close } = useMenuAnchor();
+  const live = isLiveWeek(weekMonday);
+  const label = compactWeekLabel(weekMonday);
+
+  const handlePick = (mondayIso: string) => {
+    if (isFutureWeek(mondayIso)) {
+      return;
+    }
+    onChange(mondayIso);
+    close();
+  };
+
+  return (
+    <>
+      <MenuAnchorButton
+        onAnchor={setAnchor}
+        open={open}
+        disabled={disabled}
+        aria-label={`Week ${label}`}
+        className={cn(
+          "flex h-8 shrink-0 items-center gap-1.5 rounded-md border px-[13px] text-[13px] font-semibold",
+          "border-[#bfe2f5] bg-(--color-primary-tint) text-primary",
+        )}
+      >
+        {label}
+        {Boolean(live) && <WeekLiveBadge />}
+        <ChevronDown size={14} aria-hidden />
+      </MenuAnchorButton>
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={close}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
+      >
+        <div className="p-3">
+          <WeekPicker selected={weekMonday} onPick={handlePick} isWeekDisabled={isFutureWeek} />
+        </div>
+      </Popover>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/filter-bar/wo-type-filter.tsx b/src/app/(protected)/workorders/_components/list/filter-bar/wo-type-filter.tsx
new file mode 100644
index 00000000..bd9c66c6
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/filter-bar/wo-type-filter.tsx
@@ -0,0 +1,124 @@
+import { useMemo } from "react";
+import { Menu, MenuItem } from "@mui/material";
+import { ChevronDown, Tag } from "lucide-react";
+import { CheckboxIndicator } from "@/components/ui/checkbox-indicator";
+import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
+import { WO_TYPES, type WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { useMenuAnchor } from "@/hooks/use-menu-anchor";
+import { cn } from "@/lib/utils";
+
+type WoTypeFilterProps = {
+  selected: Set<WOType>;
+  onChange: (types: Set<WOType>) => void;
+  disabled?: boolean;
+};
+
+const TYPE_FILTER_MENU_LIST_PROPS = {
+  "aria-label": "Work order types",
+  "data-testid": "wo-type-filter-menu",
+};
+
+function typeFilterLabel(selected: Set<WOType>): string {
+  if (selected.size === 0) return "All types";
+  if (selected.size === 1) {
+    const [only] = selected;
+    return only ?? "All types";
+  }
+  return `${selected.size} types selected`;
+}
+
+function TypeFilterMenuItem({
+  checked,
+  label,
+  onClick,
+}: {
+  checked: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <MenuItem
+      role="menuitemcheckbox"
+      aria-checked={checked}
+      dense
+      disableGutters
+      onClick={onClick}
+      className="flex w-full cursor-pointer items-center gap-2.5 rounded px-2.5 py-1.5"
+    >
+      <CheckboxIndicator checked={checked} size="sm" />
+      <span className="flex-1 text-left text-[13px] text-foreground">{label}</span>
+    </MenuItem>
+  );
+}
+
+export function WoTypeFilter({ selected, onChange, disabled = false }: WoTypeFilterProps) {
+  const { anchorEl, open, setAnchor, close } = useMenuAnchor();
+  const allSelected = selected.size === 0;
+  const label = useMemo(() => typeFilterLabel(selected), [selected]);
+
+  const toggle = (type: WOType) => {
+    const next = new Set(selected);
+    if (next.has(type)) {
+      next.delete(type);
+    } else {
+      next.add(type);
+    }
+    onChange(next);
+  };
+
+  return (
+    <>
+      <MenuAnchorButton
+        onAnchor={setAnchor}
+        open={open}
+        disabled={disabled}
+        aria-label={`Work order types, ${label}`}
+        data-testid="wo-type-filter-trigger"
+        className={cn(
+          "flex h-[38px] w-auto shrink-0 items-center gap-2 rounded-md border px-3 text-[13px] font-semibold whitespace-nowrap transition-colors",
+          allSelected
+            ? "border-(--color-border) bg-(--color-bg-surface) text-foreground"
+            : "border-[#bfe2f5] bg-(--color-primary-tint) text-primary",
+        )}
+      >
+        <Tag size={15} aria-hidden style={{ color: "var(--muted-foreground)" }} />
+        {label}
+        <ChevronDown size={14} aria-hidden style={{ color: "var(--muted-foreground)" }} />
+      </MenuAnchorButton>
+
+      <Menu
+        open={open}
+        anchorEl={anchorEl}
+        variant="menu"
+        transitionDuration={0}
+        onClose={(_event, reason) => {
+          if (reason === "backdropClick" || reason === "escapeKeyDown" || reason === "tabKeyDown") {
+            close();
+          }
+        }}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
+        slotProps={{
+          paper: {
+            className: "mt-1 w-[180px] rounded-lg border border-border p-1.5 shadow-md",
+          },
+          list: TYPE_FILTER_MENU_LIST_PROPS,
+        }}
+      >
+        <TypeFilterMenuItem
+          checked={allSelected}
+          label="All types"
+          onClick={() => onChange(new Set())}
+        />
+        {WO_TYPES.map((type) => (
+          <TypeFilterMenuItem
+            key={type}
+            checked={selected.has(type)}
+            label={type}
+            onClick={() => toggle(type)}
+          />
+        ))}
+      </Menu>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar.tsx b/src/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar.tsx
new file mode 100644
index 00000000..e43ccad3
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar.tsx
@@ -0,0 +1,58 @@
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { DayTabs } from "@/app/(protected)/workorders/_components/list/filter-bar/day-tabs";
+import { WeekSelector } from "@/app/(protected)/workorders/_components/list/filter-bar/week-selector";
+import { WoTypeFilter } from "@/app/(protected)/workorders/_components/list/filter-bar/wo-type-filter";
+import { Text } from "@/components/ui/text";
+
+type WorkOrdersFilterBarProps = {
+  weekMonday: string;
+  onWeekChange: (mondayIso: string) => void;
+  selectedDayIso: string;
+  onSelectedDayChange: (dayIso: string) => void;
+  types: Set<WOType>;
+  onTypesChange: (value: Set<WOType>) => void;
+  filteredCount: number;
+  scopeTotalCount: number;
+  disabled?: boolean;
+};
+
+export function WorkOrdersFilterBar({
+  weekMonday,
+  onWeekChange,
+  selectedDayIso,
+  onSelectedDayChange,
+  types,
+  onTypesChange,
+  filteredCount,
+  scopeTotalCount,
+  disabled = false,
+}: WorkOrdersFilterBarProps) {
+  const resultLabel = `${filteredCount} of ${scopeTotalCount}`;
+
+  return (
+    <div
+      className="-mx-2.5 shrink-0 border-b border-(--color-border) bg-(--color-bg-surface)"
+      aria-disabled={disabled}
+    >
+      <div
+        className="flex h-14 shrink-0 flex-nowrap items-center gap-3 px-4 py-2"
+        aria-label="Week and day"
+      >
+        <WeekSelector weekMonday={weekMonday} onChange={onWeekChange} disabled={disabled} />
+        <div className="min-w-0 overflow-x-auto">
+          <DayTabs
+            weekMonday={weekMonday}
+            selectedDayIso={selectedDayIso}
+            onChange={onSelectedDayChange}
+            disabled={disabled}
+          />
+        </div>
+        <div className="flex-1" />
+        <Text variant="caption" tone="muted" className="shrink-0">
+          {resultLabel}
+        </Text>
+        <WoTypeFilter selected={types} onChange={onTypesChange} disabled={disabled} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/add-on-override-toggle.tsx b/src/app/(protected)/workorders/_components/list/table/add-on-override-toggle.tsx
new file mode 100644
index 00000000..d7dc4ada
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/add-on-override-toggle.tsx
@@ -0,0 +1,25 @@
+type AddOnOverrideToggleProps = {
+  checked: boolean;
+  visible: boolean;
+  onChange: (checked: boolean) => void;
+};
+
+export function AddOnOverrideToggle({ checked, visible, onChange }: AddOnOverrideToggleProps) {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <label className="flex cursor-pointer items-center gap-1">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(event) => onChange(event.target.checked)}
+        aria-label="Mark as Add-On"
+      />
+      <span className="text-[10px]" style={{ color: "var(--color-text-secondary)" }}>
+        Add-On
+      </span>
+    </label>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/build-inline-draft-create-input.ts b/src/app/(protected)/workorders/_components/list/table/build-inline-draft-create-input.ts
new file mode 100644
index 00000000..0058d354
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/build-inline-draft-create-input.ts
@@ -0,0 +1,56 @@
+import type { LocationOption, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableDraft } from "@/domain/work-orders/types/work-order-table-row";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import { resolveSiteCode } from "@/domain/work-orders/mappers/work-order-board-mapper";
+import { resolveCreationStatus } from "@/domain/work-orders/utils/wo-lifecycle-transitions";
+
+export function buildInlineDraftCreateInput(
+  draft: WorkOrderTableDraft,
+  users: WorkOrderUser[],
+  sites: LocationOption[],
+): WorkOrderWizardDraft {
+  const assignee = users.find((u) => String(u.id) === draft.dispatcherId);
+  const location = sites.find((s) => String(s.id) === String(draft.locationId));
+  const locationName = draft.location || draft.site || location?.name || "";
+
+  const hasWeekTarget = Boolean(draft.targetWeek?.trim());
+  const scheduleWeekOnly = draft.scheduleWeekOnly && (hasWeekTarget || Boolean(draft.scheduledOn));
+
+  return {
+    locationId: String(draft.locationId || ""),
+    locationName,
+    siteCode: location ? resolveSiteCode(location) : resolveSiteCode({ name: locationName }),
+    woNumber: draft.woNumber,
+    type: draft.type || "PM",
+    severity: draft.severity,
+    assigneeId: draft.dispatcherId,
+    assigneeName: assignee?.name ?? "",
+    scheduledOn: draft.scheduledOn,
+    dueDate: draft.dueDate,
+    pm: draft.pm,
+    serviceId: null,
+    extraServices: draft.extraServices ?? [],
+    avetaRequired: Boolean(draft.avetaRequired),
+    pmNote: draft.serviceNotes ?? "",
+    vendorId: draft.vendorId || "",
+    vendorName: draft.company,
+    techPhone: draft.techPhone,
+    vendorNotes: "",
+    apptStart: draft.apptStart,
+    apptEnd: draft.apptEnd,
+    status: resolveCreationStatus({
+      status: draft.status || "Incomplete",
+      scheduledOn: draft.scheduledOn,
+      scheduleWeekOnly,
+    }),
+    pocName: draft.pocName,
+    pocPhone: draft.pocPhone,
+    pocNotes: draft.pocNotes,
+    additionalContacts: draft.additionalContacts ?? [],
+    scheduleWeekOnly,
+    targetWeek: draft.targetWeek || "",
+    scheduleEnd: draft.scheduleEnd || "",
+    schedMode: draft.schedMode,
+    isAddOnOverride: draft.isAddOnOverride,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/appt-time-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/appt-time-cell.tsx
new file mode 100644
index 00000000..e43832d2
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/appt-time-cell.tsx
@@ -0,0 +1,167 @@
+import { useEffect, useState } from "react";
+import { Clock } from "lucide-react";
+import { Button, Popover } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import {
+  apptTimePopoverHint,
+  commitApptTimeSelection,
+} from "@/domain/work-orders/utils/appt-time-selection";
+import {
+  fmt12,
+  formatApptRange,
+  parseApptTime,
+  TIME_SLOTS,
+} from "@/domain/work-orders/utils/wizard-date-utils";
+import { HoverChevron } from "./hover-chevron";
+
+type ApptTimeCellProps = {
+  apptTime: string;
+  onSave: (value: string) => void;
+};
+
+const SLOT_HEADER_SX = {
+  fontSize: 10,
+  fontWeight: 600,
+  textTransform: "uppercase" as const,
+  letterSpacing: "0.05em",
+  color: "var(--color-text-muted)",
+};
+
+function slotStyle(active: boolean): React.CSSProperties {
+  return {
+    background: active ? "var(--color-primary-tint)" : "transparent",
+    color: active ? "var(--color-primary)" : "var(--color-text-primary)",
+    fontWeight: active ? 600 : 400,
+  };
+}
+
+function nextStartSelection(
+  currentStart: string,
+  currentEnd: string,
+  slot: string,
+): { start: string; end: string } {
+  if (slot === currentStart) {
+    return { start: "", end: "" };
+  }
+  return {
+    start: slot,
+    end: currentEnd && currentEnd <= slot ? "" : currentEnd,
+  };
+}
+
+function ApptTimeSlotList({
+  slots,
+  active,
+  onPick,
+}: {
+  slots: string[];
+  active: string;
+  onPick: (slot: string) => void;
+}) {
+  return (
+    <div className="max-h-[220px] overflow-y-auto px-1.5 pb-1.5">
+      {slots.map((t) => (
+        <button
+          key={t}
+          type="button"
+          onClick={() => onPick(t)}
+          className="w-full rounded px-2 py-1 text-left text-xs transition-colors hover:bg-[#F9FAFB]"
+          style={slotStyle(active === t)}
+        >
+          {fmt12(t)}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function ApptTimeCell({ apptTime, onSave }: ApptTimeCellProps) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [start, setStart] = useState(() => parseApptTime(apptTime).start);
+  const [end, setEnd] = useState(() => parseApptTime(apptTime).end);
+
+  useEffect(() => {
+    const p = parseApptTime(apptTime);
+    setStart(p.start);
+    setEnd(p.end);
+  }, [apptTime]);
+
+  const parsed = parseApptTime(apptTime);
+  const display = parsed.start ? formatApptRange(parsed.start, parsed.end) : apptTime;
+  const showPlaceholder = !display || display === "—";
+  const endSlots = TIME_SLOTS.filter((t) => !start || t > start);
+
+  const close = () => setAnchorEl(null);
+  const done = () => {
+    commitApptTimeSelection(start, end, apptTime, onSave);
+    close();
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          setAnchorEl(e.currentTarget);
+        }}
+        className="group/cell flex w-full items-center gap-1.5 transition-opacity hover:opacity-80"
+      >
+        <Clock size={11} className="shrink-0 text-[var(--color-text-muted)]" />
+        {showPlaceholder ? (
+          <span className="text-[13px] text-[var(--color-text-muted)]">Select appt time …</span>
+        ) : (
+          <span className="whitespace-nowrap text-[13px] text-[var(--color-text-secondary)]">
+            {display}
+          </span>
+        )}
+        <HoverChevron />
+      </button>
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={close}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        onClick={(e) => e.stopPropagation()}
+        slotProps={{ paper: { className: "w-[264px] rounded-lg border border-border p-0" } }}
+      >
+        <div className="grid grid-cols-2 border-b border-border">
+          <div className="border-r border-border">
+            <Text as="p" className="px-3 pb-1 pt-2" style={SLOT_HEADER_SX}>
+              Start
+            </Text>
+            <ApptTimeSlotList
+              slots={TIME_SLOTS}
+              active={start}
+              onPick={(t) => {
+                const next = nextStartSelection(start, end, t);
+                setStart(next.start);
+                setEnd(next.end);
+              }}
+            />
+          </div>
+          <div>
+            <Text as="p" className="px-3 pb-1 pt-2" style={SLOT_HEADER_SX}>
+              End <span className="font-normal normal-case">(optional)</span>
+            </Text>
+            <ApptTimeSlotList
+              slots={endSlots}
+              active={end}
+              onPick={(t) => {
+                setEnd(t === end ? "" : t);
+              }}
+            />
+          </div>
+        </div>
+        <div className="flex items-center justify-between px-3 py-2">
+          <span className="text-xs text-[var(--color-text-muted)]">
+            {apptTimePopoverHint(start, end)}
+          </span>
+          <Button size="small" variant="contained" onClick={done}>
+            Done
+          </Button>
+        </div>
+      </Popover>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell.tsx
new file mode 100644
index 00000000..bd0db367
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell.tsx
@@ -0,0 +1,111 @@
+import { useState } from "react";
+import { Check, Users } from "lucide-react";
+import { Popover } from "@mui/material";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { DispatcherPill } from "./dispatcher-pill";
+import { HoverChevron } from "./hover-chevron";
+
+type AssignedToCellProps = {
+  dispatcherId: string;
+  users: WorkOrderUser[];
+  highlight?: boolean;
+  onSave: (id: string, name: string) => void;
+};
+
+export function AssignedToCell({ dispatcherId, users, highlight, onSave }: AssignedToCellProps) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [search, setSearch] = useState("");
+  const selected = users.find((d) => String(d.id) === dispatcherId);
+  const filtered = search
+    ? users.filter((d) => d.name.toLowerCase().includes(search.toLowerCase()))
+    : users;
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          setAnchorEl(e.currentTarget);
+        }}
+        className="group/cell flex w-full min-w-0 items-center gap-1.5 rounded transition-opacity hover:opacity-80"
+        style={
+          highlight
+            ? {
+                boxShadow: "0 0 0 2px var(--color-accent)",
+                background: "var(--color-primary-tint)",
+                padding: "2px 6px",
+                margin: "0 -6px",
+              }
+            : undefined
+        }
+      >
+        {selected ? (
+          <DispatcherPill user={selected} />
+        ) : (
+          <span className="flex min-w-0 items-center gap-1.5 text-[13px] text-[var(--color-text-muted)]">
+            <Users
+              size={13}
+              className="shrink-0"
+              style={{ color: highlight ? "var(--primary)" : "var(--color-text-muted)" }}
+            />
+            <span className="truncate whitespace-nowrap">Select dispatcher</span>
+          </span>
+        )}
+        <HoverChevron />
+      </button>
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={() => {
+          setAnchorEl(null);
+          setSearch("");
+        }}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        onClick={(e) => e.stopPropagation()}
+        slotProps={{ paper: { className: "w-[212px] rounded-lg border border-border p-1.5" } }}
+      >
+        <div className="mb-1.5 border-b border-border px-1 pb-1.5">
+          <input
+            autoFocus
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search dispatcher…"
+            className="w-full rounded border border-border bg-[var(--color-bg-surface)] px-2 py-1 text-xs text-[var(--color-text-primary)] focus:outline-none"
+          />
+        </div>
+        <div className="max-h-52 overflow-y-auto">
+          <button
+            type="button"
+            onClick={() => {
+              onSave("", "");
+              setAnchorEl(null);
+              setSearch("");
+            }}
+            className="flex w-full items-center justify-between gap-2 rounded px-1.5 py-1 transition-colors hover:bg-[#F9FAFB]"
+          >
+            <span className="text-[13px] text-[var(--color-text-muted)]">Unassigned</span>
+            {!dispatcherId && <Check size={10} className="shrink-0 text-[var(--color-primary)]" />}
+          </button>
+          {filtered.map((d) => (
+            <button
+              key={String(d.id)}
+              type="button"
+              onClick={() => {
+                onSave(String(d.id), d.name);
+                setAnchorEl(null);
+                setSearch("");
+              }}
+              className="flex w-full items-center justify-between gap-2 rounded px-1.5 py-1 transition-colors hover:bg-[#F9FAFB]"
+            >
+              <DispatcherPill user={d} />
+              {dispatcherId === String(d.id) && (
+                <Check size={10} className="shrink-0 text-[var(--color-primary)]" />
+              )}
+            </button>
+          ))}
+        </div>
+      </Popover>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/aveta-badge.tsx b/src/app/(protected)/workorders/_components/list/table/cells/aveta-badge.tsx
new file mode 100644
index 00000000..d5993fc5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/aveta-badge.tsx
@@ -0,0 +1,24 @@
+import { ShieldCheck } from "lucide-react";
+import { Tooltip } from "@mui/material";
+
+type AvetaBadgeProps = {
+  size?: number;
+  attached?: boolean;
+};
+
+/** Per-WO Aveta shield — never a site-level flag. Color is paired with the icon. */
+export function AvetaBadge({ size = 11, attached = false }: AvetaBadgeProps) {
+  const color = attached ? "var(--success)" : "var(--warning)";
+  const title = attached
+    ? "Aveta documentation is attached"
+    : "This work order requires Aveta compliance documentation";
+  const label = attached ? "Aveta attached" : "Aveta required";
+
+  return (
+    <Tooltip title={title} arrow placement="top">
+      <span className="inline-flex shrink-0" aria-label={label}>
+        <ShieldCheck size={size} style={{ color }} />
+      </span>
+    </Tooltip>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/aveta-checkbox.tsx b/src/app/(protected)/workorders/_components/list/table/cells/aveta-checkbox.tsx
new file mode 100644
index 00000000..6ebd6daa
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/aveta-checkbox.tsx
@@ -0,0 +1,28 @@
+type AvetaCheckboxProps = {
+  checked: boolean;
+  onChange: (value: boolean) => void;
+  disabled?: boolean;
+};
+
+export function AvetaCheckbox({ checked, onChange, disabled = false }: AvetaCheckboxProps) {
+  return (
+    <label className="flex cursor-pointer items-center gap-2 select-none">
+      <input
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={(event) => onChange(event.target.checked)}
+        className="size-3.5 accent-[var(--warning)]"
+      />
+      <span
+        style={{
+          fontSize: 12,
+          fontWeight: 500,
+          color: "var(--color-text-primary)",
+        }}
+      >
+        Requires Aveta documentation
+      </span>
+    </label>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/build-site-dialog-patch.ts b/src/app/(protected)/workorders/_components/list/table/cells/build-site-dialog-patch.ts
new file mode 100644
index 00000000..3fe930cd
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/build-site-dialog-patch.ts
@@ -0,0 +1,42 @@
+import { extractLocationLabel } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-helpers";
+import type { SitePatch } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-types";
+import { resolveSiteCode } from "@/domain/work-orders/mappers/work-order-board-mapper";
+import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+
+type BuildSiteDialogPatchArgs = {
+  code: string;
+  locId: string;
+  selected: LocationOption | undefined;
+  pocName: string;
+  pocPhone: string;
+  pocNotes: string;
+  extraContacts: WorkOrderAdditionalContact[];
+  contactsDirty: boolean;
+  baselineHadContacts: boolean;
+};
+
+export function buildSiteDialogPatch({
+  code,
+  locId,
+  selected,
+  pocName,
+  pocPhone,
+  pocNotes,
+  extraContacts,
+  contactsDirty,
+  baselineHadContacts,
+}: BuildSiteDialogPatchArgs): SitePatch {
+  const patch: SitePatch = {
+    site: code || (selected ? resolveSiteCode(selected) : ""),
+    location: selected ? extractLocationLabel(selected) : "",
+    locationId: locId,
+    pocName,
+    pocPhone,
+    pocNotes,
+  };
+  if (contactsDirty || baselineHadContacts) {
+    patch.additionalContacts = extraContacts;
+  }
+  return patch;
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/comp-doc-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/comp-doc-cell.tsx
new file mode 100644
index 00000000..78a62e61
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/comp-doc-cell.tsx
@@ -0,0 +1,90 @@
+import { Ban, FileText, Image as ImageIcon } from "lucide-react";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { hasCompletionDocService } from "@/domain/work-orders/utils/completion-doc-service-gate";
+
+function isMediaWO(type: WOType | ""): boolean {
+  return type === "Emergency" || type === "Reactive";
+}
+
+type CompDocCellProps = {
+  status: CompletionDocStatus;
+  woType: WOType | "";
+  /** Primary service (`pm`). Required before CompDoc can open. */
+  pm?: string;
+  mediaCount?: number;
+  /** Omit until completion-doc slice mounts CompDocDialog. */
+  onOpen?: () => void;
+  onOpenMedia: () => void;
+};
+
+export function CompDocCell({
+  status,
+  woType,
+  pm = "",
+  mediaCount = 0,
+  onOpen,
+  onOpenMedia,
+}: CompDocCellProps) {
+  if (isMediaWO(woType)) {
+    return (
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onOpenMedia();
+        }}
+        title="Photos & videos"
+        className="flex w-full items-center gap-1.5 whitespace-nowrap text-xs font-semibold text-[var(--color-primary)] transition-opacity hover:opacity-80"
+      >
+        <ImageIcon size={15} className="shrink-0 text-[var(--color-primary)]" />
+        {mediaCount > 0 ? `${mediaCount} file${mediaCount !== 1 ? "s" : ""}` : "Media"}
+      </button>
+    );
+  }
+
+  if (!onOpen) {
+    return null;
+  }
+
+  if (!hasCompletionDocService(pm)) {
+    return (
+      <span
+        title="Select a service before opening the completion document"
+        className="flex w-full items-center gap-1.5 whitespace-nowrap text-xs font-semibold"
+        style={{ color: "var(--color-text-muted)", opacity: 0.65 }}
+        aria-disabled="true"
+      >
+        <FileText size={15} className="shrink-0" style={{ color: "var(--color-text-muted)" }} />
+        Select service
+      </span>
+    );
+  }
+
+  const generated = status === "Yes";
+  const notRequired = status === "NN";
+  const color = generated ? "var(--color-success)" : "var(--color-text-muted)";
+  const Icon = notRequired ? Ban : FileText;
+
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        onOpen();
+      }}
+      title={
+        generated
+          ? "View completion document"
+          : notRequired
+            ? "Completion document — not required"
+            : "Completion document — draft"
+      }
+      className="flex w-full items-center gap-1.5 whitespace-nowrap text-xs font-semibold transition-opacity hover:opacity-80"
+      style={{ color }}
+    >
+      <Icon size={15} className="shrink-0" style={{ color }} />
+      {generated ? "View Doc" : notRequired ? "N/N" : "Draft"}
+    </button>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/date-cell-value.tsx b/src/app/(protected)/workorders/_components/list/table/cells/date-cell-value.tsx
new file mode 100644
index 00000000..7f9a35d9
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/date-cell-value.tsx
@@ -0,0 +1,60 @@
+import { CalendarDays, Calendar as CalendarIcon, CalendarRange } from "lucide-react";
+import { fmtDateRange, fmtWeekOf } from "@/domain/work-orders/utils/wizard-date-utils";
+import { HighlightText } from "./highlight-text";
+
+type DateCellValueArgs = {
+  showRange: boolean;
+  showWeek: boolean;
+  value: string;
+  scheduleEnd: string;
+  targetWeek: string;
+  q?: string;
+  highlight?: boolean;
+};
+
+export function DateCellValue({
+  showRange,
+  showWeek,
+  value,
+  scheduleEnd,
+  targetWeek,
+  q,
+  highlight,
+}: DateCellValueArgs) {
+  if (showRange) {
+    return (
+      <>
+        <CalendarRange size={11} className="shrink-0 text-[var(--color-text-muted)]" />
+        <span className="truncate text-[13px] text-[var(--color-text-secondary)]">
+          {fmtDateRange(value, scheduleEnd)}
+        </span>
+      </>
+    );
+  }
+  if (showWeek) {
+    return (
+      <>
+        <CalendarDays size={10} className="shrink-0 text-[var(--color-text-muted)]" />
+        <span className="truncate text-[11px] font-medium text-[var(--color-text-muted)]">
+          {fmtWeekOf(targetWeek)}
+        </span>
+      </>
+    );
+  }
+  return (
+    <>
+      <CalendarIcon
+        size={11}
+        className="shrink-0"
+        style={{ color: highlight ? "var(--primary)" : "var(--color-text-muted)" }}
+      />
+      {value ? (
+        <span className="truncate text-[13px] text-[var(--color-text-secondary)]">
+          <HighlightText text={value.replace(/^\d{4}-/, "")} q={q} />
+        </span>
+      ) : (
+        <span className="text-[13px] text-[var(--color-text-muted)]">—</span>
+      )}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/date-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/date-cell.tsx
new file mode 100644
index 00000000..5c76c5a6
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/date-cell.tsx
@@ -0,0 +1,170 @@
+import { useState } from "react";
+import { ChevronDown, X } from "lucide-react";
+import { Popover } from "@mui/material";
+import { DateCellValue } from "@/app/(protected)/workorders/_components/list/table/cells/date-cell-value";
+import { MiniCalendar } from "@/app/(protected)/workorders/_components/wizard/mini-calendar";
+import { WeekPicker } from "@/app/(protected)/workorders/_components/wizard/week-picker";
+import { useWizardDateFieldState } from "@/app/(protected)/workorders/_components/wizard/use-wizard-date-field-state";
+import { WizardDateModeTabs } from "@/app/(protected)/workorders/_components/wizard/wizard-date-mode-tabs";
+import { WizardDateRangePanel } from "@/app/(protected)/workorders/_components/wizard/wizard-date-range-panel";
+import type { WizardSchedMode } from "@/domain/work-orders/types/work-order-wizard";
+
+type DateCellProps = {
+  value: string;
+  q?: string;
+  highlight?: boolean;
+  onSave: (date: string) => void;
+  allowWeekMode?: boolean;
+  targetWeek?: string;
+  onSaveWeek?: (weekStart: string) => void;
+  defaultMode?: "week" | "date";
+  scheduleEnd?: string;
+  schedMode?: WizardSchedMode;
+  onSaveRange?: (start: string, end: string) => void;
+  /** When set, shows Clear in the popover so schedule can be removed (e.g. day-group → Unscheduled). */
+  onClear?: () => void;
+  /** Screen-reader-only status appended inside the button so the accessible name keeps the visible date and adds durable state. */
+  srStatusSuffix?: string;
+  /** Earliest selectable day in the date calendar (SH-356). */
+  minDate?: string;
+};
+
+export function DateCell({
+  value,
+  q,
+  highlight,
+  onSave,
+  allowWeekMode,
+  targetWeek = "",
+  onSaveWeek,
+  defaultMode,
+  scheduleEnd = "",
+  schedMode,
+  onSaveRange,
+  onClear,
+  srStatusSuffix,
+  minDate,
+}: DateCellProps) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const open = Boolean(anchorEl);
+  const allowRange = Boolean(allowWeekMode && onSaveRange);
+  const { cellMode, setCellMode, rangeStart, rangeEnd, handleRangeClick } = useWizardDateFieldState(
+    {
+      open,
+      value,
+      scheduleEnd,
+      allowRange,
+      allowWeekMode,
+      targetWeek,
+      schedMode,
+      defaultMode,
+    },
+  );
+  const showWeek = Boolean(allowWeekMode && !value && targetWeek);
+  const showRange = Boolean(allowRange && schedMode === "range" && value && scheduleEnd);
+  const modes: WizardSchedMode[] = allowRange
+    ? ["week", "date", "range"]
+    : allowWeekMode
+      ? ["week", "date"]
+      : [];
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          setAnchorEl(e.currentTarget);
+        }}
+        className="group/cell flex w-full items-center whitespace-nowrap rounded transition-opacity hover:opacity-80"
+        style={
+          highlight
+            ? {
+                boxShadow: "0 0 0 2px var(--color-accent)",
+                background: "var(--color-primary-tint)",
+                padding: "2px 8px",
+                margin: "0 -8px",
+              }
+            : undefined
+        }
+      >
+        <span className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
+          <DateCellValue
+            showRange={showRange}
+            showWeek={showWeek}
+            value={value}
+            scheduleEnd={scheduleEnd}
+            targetWeek={targetWeek}
+            q={q}
+            highlight={highlight}
+          />
+        </span>
+        {Boolean(srStatusSuffix) && <span className="sr-only">{srStatusSuffix}</span>}
+        <ChevronDown
+          size={14}
+          className="ml-2 shrink-0 opacity-0 transition-opacity group-hover/cell:opacity-100"
+          style={{ color: "var(--muted-foreground)" }}
+        />
+      </button>
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        onClick={(e) => e.stopPropagation()}
+        slotProps={{ paper: { className: "rounded-lg border border-border p-3" } }}
+      >
+        {Boolean(onClear) && (
+          <div className="mb-1.5 flex justify-end">
+            <button
+              type="button"
+              onClick={() => {
+                onClear?.();
+                setAnchorEl(null);
+              }}
+              className="inline-flex items-center gap-0.5 text-xs font-medium transition-colors"
+              style={{ color: "var(--color-text-muted)" }}
+            >
+              <X size={12} />
+              Clear
+            </button>
+          </div>
+        )}
+        <WizardDateModeTabs
+          modes={modes}
+          cellMode={cellMode}
+          allowRange={allowRange}
+          onSelect={setCellMode}
+        />
+        {allowWeekMode && cellMode === "week" ? (
+          <WeekPicker
+            selected={!value ? targetWeek : ""}
+            onPick={(mon) => {
+              onSaveWeek?.(mon);
+              setAnchorEl(null);
+            }}
+          />
+        ) : allowRange && cellMode === "range" ? (
+          <WizardDateRangePanel
+            rangeStart={rangeStart}
+            rangeEnd={rangeEnd}
+            onRangeClick={handleRangeClick}
+            onDone={(start, end) => {
+              onSaveRange?.(start, end);
+              setAnchorEl(null);
+            }}
+          />
+        ) : (
+          <MiniCalendar
+            value={value}
+            minDate={minDate}
+            onChange={(d) => {
+              onSave(d);
+              setAnchorEl(null);
+            }}
+          />
+        )}
+      </Popover>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/dialog-field-label.tsx b/src/app/(protected)/workorders/_components/list/table/cells/dialog-field-label.tsx
new file mode 100644
index 00000000..94a61e61
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/dialog-field-label.tsx
@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+
+type FieldLabelProps = {
+  children: ReactNode;
+  required?: boolean;
+  htmlFor?: string;
+};
+
+export function FieldLabel({ children, required = false, htmlFor }: FieldLabelProps) {
+  return (
+    <label
+      htmlFor={htmlFor}
+      className="mb-1.5 flex items-center gap-1.5 text-[12px] font-medium"
+      style={{ color: "var(--color-text-secondary)" }}
+    >
+      {children}
+      {Boolean(required) && (
+        <span aria-hidden style={{ color: "var(--destructive)" }}>
+          *
+        </span>
+      )}
+    </label>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/dispatcher-pill.tsx b/src/app/(protected)/workorders/_components/list/table/cells/dispatcher-pill.tsx
new file mode 100644
index 00000000..d5db15c6
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/dispatcher-pill.tsx
@@ -0,0 +1,40 @@
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+
+import { getDispatcherAvatarColor } from "@/domain/work-orders/utils/dispatcher-avatar-color";
+
+import { HighlightText } from "./highlight-text";
+
+type DispatcherPillProps = {
+  user: WorkOrderUser;
+
+  q?: string;
+};
+
+export function DispatcherPill({ user, q }: DispatcherPillProps) {
+  const color = getDispatcherAvatarColor(user);
+
+  return (
+    <span
+      className="inline-flex max-w-full items-center truncate whitespace-nowrap leading-none"
+      style={{
+        height: 26,
+
+        padding: "0 11px",
+
+        borderRadius: 9999,
+
+        border: `1.5px solid ${color}`,
+
+        background: "var(--card)",
+
+        color,
+
+        fontSize: 12.5,
+
+        fontWeight: 600,
+      }}
+    >
+      <HighlightText text={user.name} q={q} />
+    </span>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/due-date-calendar-dialog.tsx b/src/app/(protected)/workorders/_components/list/table/cells/due-date-calendar-dialog.tsx
new file mode 100644
index 00000000..3f5d4915
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/due-date-calendar-dialog.tsx
@@ -0,0 +1,59 @@
+import type { MouseEvent } from "react";
+import { Dialog, DialogContent, DialogTitle } from "@mui/material";
+import { MiniCalendar } from "@/app/(protected)/workorders/_components/wizard/mini-calendar";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+
+type DueDateCalendarDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: string;
+  onSave: (iso: string) => void;
+  minDate?: string;
+};
+
+/**
+ * Emergency Due Date picker — dedicated calendar Dialog (no time, no week/range).
+ * Reuses the shared MiniCalendar used by the standard Due Date popover.
+ */
+export function DueDateCalendarDialog({
+  open,
+  onOpenChange,
+  value,
+  onSave,
+  minDate,
+}: DueDateCalendarDialogProps) {
+  return (
+    <Dialog
+      open={open}
+      onClose={() => onOpenChange(false)}
+      maxWidth={false}
+      slotProps={{
+        ...dialogBlurBackdropSlotProps,
+        paper: {
+          className: "w-full",
+          style: { borderRadius: 12, maxWidth: 320 },
+          onClick: (e: MouseEvent<HTMLDivElement>) => e.stopPropagation(),
+        },
+      }}
+    >
+      <DialogContent className="p-5" onClick={(e) => e.stopPropagation()}>
+        <DialogTitle
+          className="mb-3 p-0"
+          style={{ fontSize: 16, color: "var(--color-text-primary)" }}
+        >
+          Due Date
+        </DialogTitle>
+        <div className="flex justify-center">
+          <MiniCalendar
+            value={value}
+            minDate={minDate}
+            onChange={(iso) => {
+              onSave(iso);
+              onOpenChange(false);
+            }}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/due-date-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/due-date-cell.tsx
new file mode 100644
index 00000000..5f09b0a4
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/due-date-cell.tsx
@@ -0,0 +1,103 @@
+import { useState } from "react";
+import { Calendar as CalendarIcon, ChevronDown } from "lucide-react";
+import { DateCell } from "@/app/(protected)/workorders/_components/list/table/cells/date-cell";
+import { DueDateCalendarDialog } from "@/app/(protected)/workorders/_components/list/table/cells/due-date-calendar-dialog";
+import { HighlightText } from "@/app/(protected)/workorders/_components/list/table/cells/highlight-text";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+type DueDateCellProps = {
+  type: WOType | "";
+  value: string;
+  q?: string;
+  highlight?: boolean;
+  /**
+   * Past-due is durable business state, unlike `highlight`, which is also raised
+   * transiently to draw attention to a row. Announce it so the state does not
+   * read by colour alone.
+   */
+  pastDue?: boolean;
+  /** Schedule On floor: earlier days are not selectable (SH-356). */
+  minDate?: string;
+  onSave: (date: string) => void;
+};
+
+/**
+ * Board / slide-over Due Date editor.
+ * Emergency → dedicated calendar Dialog; other types → standard DateCell popover.
+ */
+export function DueDateCell({
+  type,
+  value,
+  q,
+  highlight,
+  pastDue = false,
+  minDate,
+  onSave,
+}: DueDateCellProps) {
+  const [open, setOpen] = useState(false);
+
+  if (type !== "Emergency") {
+    return (
+      <DateCell
+        value={value}
+        q={q}
+        highlight={highlight}
+        onSave={onSave}
+        minDate={minDate}
+        srStatusSuffix={pastDue ? "Past due" : undefined}
+      />
+    );
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          setOpen(true);
+        }}
+        className="group/cell flex w-full items-center whitespace-nowrap rounded transition-opacity hover:opacity-80"
+        style={
+          highlight
+            ? {
+                boxShadow: "0 0 0 2px var(--color-accent)",
+                background: "var(--color-primary-tint)",
+                padding: "2px 8px",
+                margin: "0 -8px",
+              }
+            : undefined
+        }
+        aria-label={pastDue ? "Due Date, past due" : "Due Date"}
+        aria-haspopup="dialog"
+      >
+        <span className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
+          <CalendarIcon
+            size={11}
+            className="shrink-0"
+            style={{ color: highlight ? "var(--primary)" : "var(--color-text-muted)" }}
+          />
+          {value ? (
+            <span className="truncate text-[13px] text-[var(--color-text-secondary)]">
+              <HighlightText text={value.replace(/^\d{4}-/, "")} q={q} />
+            </span>
+          ) : (
+            <span className="text-[13px] text-[var(--color-text-muted)]">—</span>
+          )}
+        </span>
+        <ChevronDown
+          size={14}
+          className="ml-2 shrink-0 opacity-0 transition-opacity group-hover/cell:opacity-100"
+          style={{ color: "var(--muted-foreground)" }}
+        />
+      </button>
+      <DueDateCalendarDialog
+        minDate={minDate}
+        open={open}
+        onOpenChange={setOpen}
+        value={value}
+        onSave={onSave}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell.tsx
new file mode 100644
index 00000000..9273a5e8
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell.tsx
@@ -0,0 +1,219 @@
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { findDuplicateWoNumberRow } from "@/domain/work-orders/utils/find-duplicate-wo-number-row";
+import {
+  WO_NUMBER_DOWNGRADE_MESSAGE,
+  WO_NUMBER_FORMAT_MESSAGE,
+  isValidBoardWoNumber,
+  isWoNumberDowngrade,
+} from "@/domain/work-orders/utils/wo-number-input";
+import { EditableWONumberInput } from "./editable-wo-number-input";
+import { HighlightText } from "./highlight-text";
+import { AddOnPill, CarriedOverCounterPill, RescheduleCounterPill } from "./wo-counter-pills";
+
+type EditableWONumberCellProps = {
+  value: string;
+  rescheduleCount: number;
+  carriedOver?: number;
+  isAddOn?: boolean;
+  originalDate?: string;
+  originalWeek?: string;
+  scheduledOn?: string;
+  status?: string;
+  q?: string;
+  currentId: string | number;
+  allOrders: WorkOrderTableRow[];
+  onSave: (v: string) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+  locked?: boolean;
+  /** Empty-state label for create flows; renders with a persistent required asterisk. */
+  requiredPlaceholder?: string;
+};
+
+/** Inline-create rows pass this id; their number is draft state, never a saved WO number. */
+const UNSAVED_DRAFT_ID = "draft";
+
+async function resolveDuplicateWoNumber(
+  draft: string,
+  allOrders: WorkOrderTableRow[],
+  currentId: string | number,
+) {
+  const local = findDuplicateWoNumberRow(draft, allOrders, currentId);
+  const remote = local ?? (await workOrdersApi.findByWoNumber(draft));
+  return remote && String(remote.id) !== String(currentId) ? remote : undefined;
+}
+
+function EmptyWoNumberLabel({
+  value,
+  q,
+  requiredPlaceholder,
+}: {
+  value: string;
+  q?: string;
+  requiredPlaceholder?: string;
+}) {
+  if (value) {
+    return <HighlightText text={value} q={q} />;
+  }
+  if (!requiredPlaceholder) {
+    return "-";
+  }
+  return (
+    <span className="font-sans text-[13px] font-normal">
+      {requiredPlaceholder} <span style={{ color: "var(--destructive)" }}>*</span>
+    </span>
+  );
+}
+
+export function EditableWONumberCell({
+  value,
+  rescheduleCount,
+  carriedOver = 0,
+  isAddOn = false,
+  originalDate,
+  originalWeek,
+  scheduledOn,
+  status,
+  q,
+  currentId,
+  allOrders,
+  onSave,
+  onDuplicateFound,
+  locked = false,
+  requiredPlaceholder,
+}: EditableWONumberCellProps) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [isChecking, setIsChecking] = useState(false);
+
+  useEffect(() => {
+    if (!editing) setDraft(value);
+  }, [value, editing]);
+
+  const commit = () => {
+    if (draft === value || isChecking) {
+      setEditing(false);
+      return;
+    }
+    if (!isValidBoardWoNumber(draft)) {
+      toast(WO_NUMBER_FORMAT_MESSAGE);
+      return;
+    }
+    if (String(currentId) !== UNSAVED_DRAFT_ID && isWoNumberDowngrade(value, draft)) {
+      toast.error(WO_NUMBER_DOWNGRADE_MESSAGE);
+      setDraft(value);
+      setEditing(false);
+      return;
+    }
+    setIsChecking(true);
+    void (async () => {
+      try {
+        const duplicate = await resolveDuplicateWoNumber(draft, allOrders, currentId);
+        if (duplicate) {
+          if (onDuplicateFound) {
+            onDuplicateFound(duplicate);
+          } else {
+            toast.error(`WO #${duplicate.woNumber} is already assigned to another work order.`);
+          }
+          setDraft(value);
+          return;
+        }
+        onSave(draft);
+      } catch {
+        toast.error("Unable to verify the work order number. Please try again.");
+      } finally {
+        setIsChecking(false);
+        setEditing(false);
+      }
+    })();
+  };
+
+  const cancel = () => {
+    setDraft(value);
+    setEditing(false);
+  };
+
+  const handleBlur = () => {
+    if (isChecking) return;
+    if (draft !== value && isValidBoardWoNumber(draft)) {
+      commit();
+      return;
+    }
+    setEditing(false);
+  };
+
+  const invalid = editing && draft.length > 0 && !isValidBoardWoNumber(draft);
+
+  if (locked) {
+    return (
+      <div className="flex items-center gap-1.5">
+        <span
+          title="WO number cannot be changed after completion"
+          className="inline-block cursor-default font-mono"
+          style={{
+            fontSize: 13,
+            fontWeight: 700,
+            color: value ? "var(--foreground)" : "var(--color-text-muted)",
+            borderRadius: 4,
+            padding: "2px 4px",
+          }}
+        >
+          {value ? <HighlightText text={value} q={q} /> : "-"}
+        </span>
+        <AddOnPill when={isAddOn} />
+        <RescheduleCounterPill count={rescheduleCount} originalDate={originalDate} />
+        <CarriedOverCounterPill
+          count={carriedOver}
+          originalWeek={originalWeek}
+          originalDate={originalDate}
+          scheduledOn={scheduledOn}
+          status={status}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-1.5">
+      {editing ? (
+        <EditableWONumberInput
+          draft={draft}
+          invalid={invalid}
+          isChecking={isChecking}
+          onChange={setDraft}
+          onCommit={commit}
+          onBlur={handleBlur}
+          onCancel={cancel}
+        />
+      ) : (
+        <span
+          onClick={(e) => {
+            e.stopPropagation();
+            setEditing(true);
+          }}
+          className="inline-block cursor-text font-mono transition-colors hover:bg-[var(--color-bg-muted)]"
+          style={{
+            fontSize: 13,
+            fontWeight: 700,
+            color: value ? "var(--foreground)" : "var(--color-text-muted)",
+            borderRadius: 4,
+            padding: "2px 4px",
+          }}
+        >
+          <EmptyWoNumberLabel value={value} q={q} requiredPlaceholder={requiredPlaceholder} />
+        </span>
+      )}
+      <AddOnPill when={isAddOn} />
+      <RescheduleCounterPill count={rescheduleCount} originalDate={originalDate} />
+      <CarriedOverCounterPill
+        count={carriedOver}
+        originalWeek={originalWeek}
+        originalDate={originalDate}
+        scheduledOn={scheduledOn}
+        status={status}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-input.tsx b/src/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-input.tsx
new file mode 100644
index 00000000..1ef6512e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-input.tsx
@@ -0,0 +1,57 @@
+import { sanitizeBoardWoNumberInput } from "@/domain/work-orders/utils/wo-number-input";
+
+type EditableWONumberInputProps = {
+  draft: string;
+  invalid: boolean;
+  isChecking?: boolean;
+  onChange: (value: string) => void;
+  onCommit: () => void;
+  onBlur?: () => void;
+  onCancel: () => void;
+};
+
+export function EditableWONumberInput({
+  draft,
+  invalid,
+  isChecking = false,
+  onChange,
+  onCommit,
+  onBlur,
+  onCancel,
+}: EditableWONumberInputProps) {
+  return (
+    <input
+      autoFocus
+      disabled={isChecking}
+      value={draft}
+      onChange={(event) => onChange(sanitizeBoardWoNumberInput(event.target.value))}
+      onFocus={(event) => event.target.select()}
+      onClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          onCommit();
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          onCancel();
+        }
+      }}
+      onBlur={onBlur ?? onCommit}
+      placeholder="e.g. 12345678901 or SH00001"
+      aria-label="Work order number"
+      aria-invalid={invalid}
+      className="font-mono focus:outline-none"
+      style={{
+        fontSize: 13,
+        fontWeight: 700,
+        color: "var(--foreground)",
+        background: "var(--color-bg-surface)",
+        border: `1px solid ${invalid ? "var(--color-destructive)" : "var(--color-ring)"}`,
+        boxShadow: `0 0 0 1px ${invalid ? "var(--color-destructive)" : "var(--color-accent)"}`,
+        borderRadius: 4,
+        padding: "2px 4px",
+        width: 120,
+      }}
+    />
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/flag-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/flag-cell.tsx
new file mode 100644
index 00000000..ce17fa54
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/flag-cell.tsx
@@ -0,0 +1,110 @@
+import { useState } from "react";
+import { Flag, X } from "lucide-react";
+import { Popover } from "@mui/material";
+import { FLAG_COLORS, flagTriggerAccessibleName } from "@/domain/work-orders/flag-colors";
+
+type FlagCellProps = {
+  color?: string | null;
+  disabled?: boolean;
+  onChange: (color: string | null) => void;
+};
+
+export function FlagCell({ color, disabled, onChange }: FlagCellProps) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const triggerName = flagTriggerAccessibleName(color);
+  const popoverOpen = Boolean(anchorEl);
+
+  if (disabled) {
+    return (
+      <span
+        role="img"
+        className="flex h-[22px] w-[22px] items-center justify-center opacity-30"
+        aria-label={triggerName}
+      >
+        <Flag size={14} aria-hidden="true" />
+      </span>
+    );
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label={triggerName}
+        aria-haspopup="dialog"
+        aria-expanded={popoverOpen}
+        title={triggerName}
+        onClick={(e) => {
+          e.stopPropagation();
+          setAnchorEl(e.currentTarget);
+        }}
+        className="flex h-[22px] w-[22px] items-center justify-center transition-opacity hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--color-primary)]"
+      >
+        <Flag
+          size={14}
+          aria-hidden="true"
+          strokeWidth={color ? 1.5 : 1.75}
+          style={{
+            color: color ?? "var(--color-text-muted)",
+            fill: color ?? "transparent",
+          }}
+        />
+      </button>
+      <Popover
+        open={popoverOpen}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        onClick={(e) => e.stopPropagation()}
+        slotProps={{
+          paper: {
+            className: "rounded-lg border border-border p-2",
+            role: "dialog",
+            "aria-label": "Choose flag color",
+          },
+        }}
+      >
+        <div className="grid grid-cols-4 gap-1.5">
+          {FLAG_COLORS.map((c) => {
+            const selected = color === c.value;
+            return (
+              <button
+                key={c.value}
+                type="button"
+                aria-label={c.name}
+                aria-pressed={selected}
+                title={c.name}
+                onClick={() => {
+                  onChange(c.value);
+                  setAnchorEl(null);
+                }}
+                className="flex h-7 w-7 items-center justify-center rounded transition-transform hover:scale-110 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--color-primary)]"
+              >
+                <span
+                  aria-hidden="true"
+                  className="rounded-full"
+                  style={{
+                    width: 18,
+                    height: 18,
+                    background: c.value,
+                    boxShadow: selected ? `0 0 0 2px var(--card), 0 0 0 4px ${c.value}` : "none",
+                  }}
+                />
+              </button>
+            );
+          })}
+        </div>
+        <button
+          type="button"
+          onClick={() => {
+            onChange(null);
+            setAnchorEl(null);
+          }}
+          className="mt-2 flex w-full items-center gap-1.5 border-t border-border px-1 pt-2 text-xs text-[var(--color-text-secondary)] transition-colors hover:opacity-80"
+        >
+          <X size={12} aria-hidden="true" /> Clear flag
+        </button>
+      </Popover>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/highlight-text.tsx b/src/app/(protected)/workorders/_components/list/table/cells/highlight-text.tsx
new file mode 100644
index 00000000..95b10c15
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/highlight-text.tsx
@@ -0,0 +1,26 @@
+type HighlightTextProps = {
+  text: string;
+  q?: string;
+};
+
+export function HighlightText({ text, q }: HighlightTextProps) {
+  if (!q?.trim() || !text) {
+    return <>{text}</>;
+  }
+  const query = q.trim();
+  const lower = text.toLowerCase();
+  const idx = lower.indexOf(query.toLowerCase());
+  if (idx < 0) {
+    return <>{text}</>;
+  }
+  const before = text.slice(0, idx);
+  const match = text.slice(idx, idx + query.length);
+  const after = text.slice(idx + query.length);
+  return (
+    <>
+      {before}
+      <mark className="rounded-sm bg-[var(--color-primary-tint)] px-0.5 text-inherit">{match}</mark>
+      {after}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/hover-chevron.tsx b/src/app/(protected)/workorders/_components/list/table/cells/hover-chevron.tsx
new file mode 100644
index 00000000..69227086
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/hover-chevron.tsx
@@ -0,0 +1,11 @@
+import { ChevronDown } from "lucide-react";
+
+export function HoverChevron() {
+  return (
+    <ChevronDown
+      size={14}
+      className="ml-auto shrink-0 opacity-0 transition-opacity group-hover/cell:opacity-100"
+      style={{ color: "var(--muted-foreground)" }}
+    />
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/pm-type-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/pm-type-cell.tsx
new file mode 100644
index 00000000..be03e7fe
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/pm-type-cell.tsx
@@ -0,0 +1,180 @@
+import { useState } from "react";
+import {
+  ServiceNotesDialog,
+  type ServiceNotesDetails,
+} from "@/app/(protected)/workorders/_components/list/table/cells/service-notes-dialog";
+import { HighlightText } from "@/app/(protected)/workorders/_components/list/table/cells/highlight-text";
+import { HoverChevron } from "@/app/(protected)/workorders/_components/list/table/cells/hover-chevron";
+import { PmTypeIcon } from "@/app/(protected)/workorders/_components/list/table/pm-type-icons";
+import { AvetaBadge } from "@/app/(protected)/workorders/_components/list/table/cells/aveta-badge";
+import { PmTypeDetailsTrigger } from "@/app/(protected)/workorders/_components/list/table/cells/pm-type-details-trigger";
+import { PmTypePickerPopover } from "@/app/(protected)/workorders/_components/list/table/cells/pm-type-picker-popover";
+import {
+  hasServiceNotesDetails,
+  truncateServiceNotesPreview,
+} from "@/domain/work-orders/utils/service-notes-ui";
+
+type PMTypeCellProps = {
+  value: string;
+  pmTypes: string[];
+  q?: string;
+  onSave: (v: string) => void;
+  serviceNotes?: string;
+  extraServices?: string[];
+  avetaRequired?: boolean;
+  avetaAttached?: boolean;
+  woNumber?: string;
+  onSaveDetails?: (details: ServiceNotesDetails) => void;
+  viewOnly?: boolean;
+};
+
+export function PMTypeCell({
+  value,
+  pmTypes,
+  q,
+  onSave,
+  serviceNotes = "",
+  extraServices = [],
+  avetaRequired = false,
+  avetaAttached = false,
+  woNumber,
+  onSaveDetails,
+  viewOnly = false,
+}: PMTypeCellProps) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [search, setSearch] = useState("");
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const filtered = search
+    ? pmTypes.filter((p) => p.toLowerCase().includes(search.toLowerCase()))
+    : pmTypes;
+
+  const extras = extraServices ?? [];
+  const hasDetails = hasServiceNotesDetails(serviceNotes, extras, avetaRequired);
+  const notePreview = serviceNotes?.trim() ? truncateServiceNotesPreview(serviceNotes) : "";
+
+  const closePopover = () => {
+    setAnchorEl(null);
+    setSearch("");
+  };
+
+  const modal =
+    onSaveDetails != null || viewOnly ? (
+      <ServiceNotesDialog
+        open={modalOpen}
+        onOpenChange={setModalOpen}
+        pm={value}
+        extraServices={extras}
+        serviceNotes={serviceNotes ?? ""}
+        avetaRequired={avetaRequired}
+        woNumber={woNumber}
+        pmTypes={pmTypes}
+        viewOnly={viewOnly}
+        onSave={onSaveDetails ?? (() => undefined)}
+      />
+    ) : null;
+
+  if (viewOnly) {
+    return (
+      <>
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            setModalOpen(true);
+          }}
+          className="group/cell flex w-full items-center gap-1.5 transition-opacity hover:opacity-80"
+        >
+          <PmTypeIcon
+            pmType={value}
+            size={12}
+            className="shrink-0"
+            style={{ color: "var(--color-text-muted)" }}
+          />
+          {value ? (
+            <span
+              className="min-w-0 truncate"
+              style={{ fontSize: 13, color: "var(--color-text-primary)" }}
+            >
+              <HighlightText text={value} q={q} />
+            </span>
+          ) : (
+            <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>—</span>
+          )}
+          {Boolean(avetaRequired) && <AvetaBadge size={11} attached={avetaAttached} />}
+        </button>
+        {modal}
+      </>
+    );
+  }
+
+  if (hasDetails && onSaveDetails) {
+    return (
+      <>
+        <PmTypeDetailsTrigger
+          value={value}
+          q={q}
+          notePreview={notePreview}
+          extrasCount={extras.length}
+          avetaRequired={avetaRequired}
+          avetaAttached={avetaAttached}
+          onOpenDetails={() => setModalOpen(true)}
+        />
+        {modal}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          setAnchorEl(e.currentTarget);
+        }}
+        className="group/cell flex w-full items-center gap-1.5 transition-opacity hover:opacity-80"
+      >
+        <PmTypeIcon
+          pmType={value}
+          size={12}
+          className="shrink-0"
+          style={{ color: "var(--color-text-muted)" }}
+        />
+        {value ? (
+          <span
+            className="min-w-0 truncate"
+            style={{
+              fontSize: 13,
+              color: "var(--color-text-primary)",
+            }}
+          >
+            <HighlightText text={value} q={q} />
+          </span>
+        ) : (
+          <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>Select …</span>
+        )}
+        <HoverChevron />
+      </button>
+
+      <PmTypePickerPopover
+        anchorEl={anchorEl}
+        search={search}
+        filtered={filtered}
+        value={value}
+        showAddDetails={Boolean(onSaveDetails)}
+        onSearchChange={setSearch}
+        onClose={closePopover}
+        onPick={(pm) => {
+          onSave(pm);
+          closePopover();
+        }}
+        onAddDetails={() => {
+          closePopover();
+          setModalOpen(true);
+        }}
+      />
+      {modal}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/pm-type-details-trigger.tsx b/src/app/(protected)/workorders/_components/list/table/cells/pm-type-details-trigger.tsx
new file mode 100644
index 00000000..3bb7d5aa
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/pm-type-details-trigger.tsx
@@ -0,0 +1,77 @@
+import { AvetaBadge } from "@/app/(protected)/workorders/_components/list/table/cells/aveta-badge";
+import { HighlightText } from "@/app/(protected)/workorders/_components/list/table/cells/highlight-text";
+import { PmTypeIcon } from "@/app/(protected)/workorders/_components/list/table/pm-type-icons";
+
+type PmTypeDetailsTriggerProps = {
+  value: string;
+  q?: string;
+  notePreview: string;
+  extrasCount: number;
+  avetaRequired?: boolean;
+  avetaAttached?: boolean;
+  onOpenDetails: () => void;
+};
+
+export function PmTypeDetailsTrigger({
+  value,
+  q,
+  notePreview,
+  extrasCount,
+  avetaRequired = false,
+  avetaAttached = false,
+  onOpenDetails,
+}: PmTypeDetailsTriggerProps) {
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        onOpenDetails();
+      }}
+      className="flex w-full min-w-0 flex-col items-start text-left leading-tight transition-opacity hover:opacity-80"
+    >
+      <span className="flex w-full min-w-0 items-center gap-1.5">
+        <PmTypeIcon
+          pmType={value}
+          size={12}
+          className="shrink-0"
+          style={{ color: "var(--color-text-muted)" }}
+        />
+        <span
+          className="min-w-0 truncate"
+          style={{
+            fontSize: 13,
+            color: value ? "var(--color-text-primary)" : "var(--color-text-muted)",
+          }}
+        >
+          {value ? <HighlightText text={value} q={q} /> : "Select …"}
+        </span>
+        {Boolean(avetaRequired) && <AvetaBadge size={11} attached={avetaAttached} />}
+      </span>
+      {notePreview ? (
+        <span
+          className="w-full min-w-0 truncate"
+          style={{
+            fontSize: 11,
+            fontStyle: "italic",
+            color: "var(--color-text-muted)",
+            paddingLeft: 18,
+          }}
+        >
+          {notePreview}
+        </span>
+      ) : extrasCount > 0 ? (
+        <span
+          className="w-full min-w-0 truncate"
+          style={{
+            fontSize: 11,
+            color: "var(--color-text-muted)",
+            paddingLeft: 18,
+          }}
+        >
+          +{extrasCount} more
+        </span>
+      ) : null}
+    </button>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/pm-type-picker-popover.tsx b/src/app/(protected)/workorders/_components/list/table/cells/pm-type-picker-popover.tsx
new file mode 100644
index 00000000..8f7d75a6
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/pm-type-picker-popover.tsx
@@ -0,0 +1,84 @@
+import { Check, Plus } from "lucide-react";
+import { Popover } from "@mui/material";
+import { PmTypeIcon } from "@/app/(protected)/workorders/_components/list/table/pm-type-icons";
+
+type PmTypePickerPopoverProps = {
+  anchorEl: HTMLElement | null;
+  search: string;
+  filtered: string[];
+  value: string;
+  showAddDetails: boolean;
+  onSearchChange: (value: string) => void;
+  onClose: () => void;
+  onPick: (pm: string) => void;
+  onAddDetails: () => void;
+};
+
+export function PmTypePickerPopover({
+  anchorEl,
+  search,
+  filtered,
+  value,
+  showAddDetails,
+  onSearchChange,
+  onClose,
+  onPick,
+  onAddDetails,
+}: PmTypePickerPopoverProps) {
+  return (
+    <Popover
+      open={Boolean(anchorEl)}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+      onClick={(e) => e.stopPropagation()}
+      slotProps={{ paper: { className: "w-[244px] rounded-lg border border-border p-1.5" } }}
+    >
+      <div className="mb-1.5 border-b border-border px-1 pb-1.5">
+        <input
+          autoFocus
+          value={search}
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder="Search service…"
+          className="w-full rounded border border-border bg-[var(--color-bg-surface)] px-2 py-1 text-xs text-[var(--color-text-primary)] focus:outline-none"
+        />
+      </div>
+
+      <div className="max-h-52 overflow-y-auto">
+        {showAddDetails && (
+          <button
+            type="button"
+            onClick={onAddDetails}
+            className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-[12px] font-medium transition-colors"
+            style={{ color: "var(--color-primary)" }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = "var(--color-primary-tint)";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = "transparent";
+            }}
+          >
+            <Plus size={12} className="shrink-0" /> Add service and notes
+          </button>
+        )}
+        {filtered.map((pm) => (
+          <button
+            key={pm}
+            type="button"
+            onClick={() => onPick(pm)}
+            className="flex w-full items-center gap-2 rounded px-2 py-1.5 transition-colors hover:bg-[#F9FAFB]"
+          >
+            <PmTypeIcon pmType={pm} size={12} style={{ color: "var(--color-text-muted)" }} />
+            <span
+              className="flex-1 truncate text-left text-xs"
+              style={{ color: "var(--color-text-primary)" }}
+            >
+              {pm}
+            </span>
+            {value === pm && <Check size={10} className="text-[var(--color-primary)]" />}
+          </button>
+        ))}
+      </div>
+    </Popover>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/resolve-technician-key.ts b/src/app/(protected)/workorders/_components/list/table/cells/resolve-technician-key.ts
new file mode 100644
index 00000000..95a75a3b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/resolve-technician-key.ts
@@ -0,0 +1,36 @@
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+
+/**
+ * Board rows often have tech/company but no vendorId — resolve via vendors list.
+ * Prefers a stable vendor id over name+company matching.
+ */
+export function resolveTechnicianKey(
+  vendorId: string | number,
+  tech: string,
+  company: string,
+  vendors: VendorDropdownItem[],
+): string {
+  const idStr = vendorId !== "" && vendorId != null ? String(vendorId) : "";
+  if (idStr && vendors.some((vendor) => String(vendor.id) === idStr)) {
+    return idStr;
+  }
+  if (idStr && vendors.length === 0) {
+    return idStr;
+  }
+
+  const name = tech.trim();
+  if (!name) {
+    return idStr;
+  }
+
+  const byNameAndCompany =
+    vendors.find((vendor) => vendor.contactName === name && vendor.companyName === company) ??
+    vendors.find((vendor) => vendor.contactName === name);
+
+  if (byNameAndCompany) {
+    return String(byNameAndCompany.id);
+  }
+
+  // Orphan tech string used as option key when no vendor row matches (legacy board cells).
+  return idStr || name;
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/resolve-vendor-company-anchor.ts b/src/app/(protected)/workorders/_components/list/table/cells/resolve-vendor-company-anchor.ts
new file mode 100644
index 00000000..3357830c
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/resolve-vendor-company-anchor.ts
@@ -0,0 +1,53 @@
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+
+type ResolveVendorCompanyAnchorInput = {
+  company: string;
+  resolvedCompany: string;
+  selectedVendor: VendorDropdownItem | undefined;
+  vendors: VendorDropdownItem[];
+};
+
+export function resolveVendorCompanyAnchor({
+  company,
+  resolvedCompany,
+  selectedVendor,
+  vendors,
+}: ResolveVendorCompanyAnchorInput): {
+  companyName: string;
+  companyVendor: VendorDropdownItem | null;
+} {
+  const companyName = resolvedCompany || company;
+  if (!companyName) {
+    return { companyName: "", companyVendor: null };
+  }
+
+  const companyVendor =
+    selectedVendor ??
+    vendors.find((vendor) => vendor.companyName === companyName) ??
+    ({
+      id: "",
+      companyName,
+      contactName: "",
+      tradeSpecialties: "",
+      address: "",
+      distanceMiles: null,
+    } satisfies VendorDropdownItem);
+
+  return { companyName, companyVendor };
+}
+
+export function mergeVendorDropdownItems(
+  vendors: VendorDropdownItem[],
+  addedVendors: VendorDropdownItem[],
+): VendorDropdownItem[] {
+  const byId = new Map<string, VendorDropdownItem>();
+  for (const vendor of vendors) {
+    if (vendor.id === "") continue;
+    byId.set(String(vendor.id), vendor);
+  }
+  for (const vendor of addedVendors) {
+    if (vendor.id === "") continue;
+    byId.set(String(vendor.id), vendor);
+  }
+  return Array.from(byId.values());
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/service-notes-dialog.tsx b/src/app/(protected)/workorders/_components/list/table/cells/service-notes-dialog.tsx
new file mode 100644
index 00000000..124357ce
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/service-notes-dialog.tsx
@@ -0,0 +1,139 @@
+import { useEffect, useState } from "react";
+import { Wrench } from "lucide-react";
+import { Dialog, DialogContent, DialogTitle } from "@mui/material";
+import { WizardServiceNotesFields } from "@/app/(protected)/workorders/_components/wizard/wizard-service-notes-fields";
+import { Button } from "@/components/ui/button";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+
+export type ServiceNotesDetails = {
+  pm: string;
+  extraServices: string[];
+  serviceNotes: string;
+  avetaRequired: boolean;
+};
+
+type ServiceNotesDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  pm: string;
+  extraServices: string[];
+  serviceNotes: string;
+  avetaRequired?: boolean;
+  woNumber?: string;
+  pmTypes: string[];
+  viewOnly?: boolean;
+  onSave: (details: ServiceNotesDetails) => void;
+};
+
+export function ServiceNotesDialog({
+  open,
+  onOpenChange,
+  pm,
+  extraServices,
+  serviceNotes,
+  avetaRequired = false,
+  woNumber,
+  pmTypes,
+  viewOnly = false,
+  onSave,
+}: ServiceNotesDialogProps) {
+  const [sel, setSel] = useState<string[]>([]);
+  const [note, setNote] = useState("");
+  const [aveta, setAveta] = useState(false);
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    setSel([pm, ...(extraServices ?? [])].filter((p, i, a) => !!p && a.indexOf(p) === i));
+    setNote(serviceNotes ?? "");
+    setAveta(Boolean(avetaRequired));
+    setSearch("");
+  }, [open, pm, extraServices, serviceNotes, avetaRequired]);
+
+  const toggle = (value: string) => {
+    setSel((cur) => (cur.includes(value) ? cur.filter((x) => x !== value) : [...cur, value]));
+  };
+
+  const services = pmTypes.map((value) => ({ id: value, value }));
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => onOpenChange(false)}
+      maxWidth="sm"
+      fullWidth
+      slotProps={dialogBlurBackdropSlotProps}
+    >
+      <DialogTitle
+        className="flex items-center gap-2"
+        style={{ fontSize: 16, color: "var(--color-text-primary)" }}
+      >
+        <Wrench size={16} style={{ color: "var(--color-text-muted)" }} />
+        Service &amp; Notes
+        {Boolean(woNumber) && (
+          <span style={{ fontSize: 13, fontWeight: 400, color: "var(--color-text-muted)" }}>
+            #{woNumber}
+          </span>
+        )}
+      </DialogTitle>
+      <DialogContent
+        className="space-y-4"
+        onClick={(e) => e.stopPropagation()}
+        style={{ paddingTop: 8 }}
+      >
+        <fieldset disabled={viewOnly} className="min-w-0 space-y-4 border-0 p-0">
+          <WizardServiceNotesFields
+            services={services}
+            sel={sel}
+            onToggle={toggle}
+            note={note}
+            setNote={setNote}
+            search={search}
+            setSearch={setSearch}
+            avetaRequired={aveta}
+            onAvetaRequiredChange={setAveta}
+          />
+        </fieldset>
+        <div className="mt-2 flex items-center justify-end gap-2">
+          {viewOnly ? (
+            <Button
+              type="button"
+              className="min-h-0 px-3 py-1 text-[12px]"
+              onClick={() => onOpenChange(false)}
+            >
+              Close
+            </Button>
+          ) : (
+            <>
+              <Button
+                type="button"
+                variant="ghost"
+                className="min-h-0 px-2 py-1 text-[12px]"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                className="min-h-0 px-3 py-1 text-[12px]"
+                onClick={() => {
+                  onSave({
+                    pm: sel[0] ?? "",
+                    extraServices: sel.slice(1),
+                    serviceNotes: note,
+                    avetaRequired: aveta,
+                  });
+                  onOpenChange(false);
+                }}
+              >
+                Save
+              </Button>
+            </>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/severity-badge.tsx b/src/app/(protected)/workorders/_components/list/table/cells/severity-badge.tsx
new file mode 100644
index 00000000..18e3092a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/severity-badge.tsx
@@ -0,0 +1,39 @@
+import { Tooltip } from "@mui/material";
+
+import {
+  SEVERITY_LEVELS,
+  SEVERITY_TOKEN_COLOR,
+  type WorkOrderSeverity,
+} from "@/domain/work-orders/types/work-order-severity";
+
+type SeverityBadgeProps = {
+  severity: WorkOrderSeverity;
+  onClick?: (e: React.MouseEvent) => void;
+};
+
+export function SeverityBadge({ severity, onClick }: SeverityBadgeProps) {
+  const lvl = SEVERITY_LEVELS[severity];
+  const color = SEVERITY_TOKEN_COLOR[lvl.token];
+  const title = `${lvl.description} · ${lvl.deadline} · After hours: ${lvl.afterHours}`;
+
+  return (
+    <Tooltip title={title} enterDelay={400}>
+      <span
+        onClick={onClick}
+        role={onClick ? "button" : undefined}
+        className="inline-flex shrink-0 items-center whitespace-nowrap rounded leading-none"
+        style={{
+          fontSize: 10,
+          fontWeight: 600,
+          color,
+          border: `1px solid ${color}`,
+          padding: "1px 5px",
+          marginLeft: 4,
+          cursor: onClick ? "pointer" : "default",
+        }}
+      >
+        {lvl.label}
+      </span>
+    </Tooltip>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/severity-options-list.tsx b/src/app/(protected)/workorders/_components/list/table/cells/severity-options-list.tsx
new file mode 100644
index 00000000..656b5baf
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/severity-options-list.tsx
@@ -0,0 +1,90 @@
+import { Text } from "@/components/ui/text";
+import {
+  SEVERITY_LEVELS,
+  SEVERITY_TOKEN_COLOR,
+  WORK_ORDER_SEVERITIES,
+  type WorkOrderSeverity,
+} from "@/domain/work-orders/types/work-order-severity";
+
+type SeverityOptionsListProps = {
+  value: WorkOrderSeverity | null;
+  onSelect: (severity: WorkOrderSeverity) => void;
+};
+
+export function SeverityOptionsList({ value, onSelect }: SeverityOptionsListProps) {
+  return (
+    <div className="grid gap-1.5">
+      {WORK_ORDER_SEVERITIES.map((n) => {
+        const lvl = SEVERITY_LEVELS[n];
+        const color = SEVERITY_TOKEN_COLOR[lvl.token];
+        const selected = value === n;
+        return (
+          <button
+            key={n}
+            type="button"
+            onClick={() => onSelect(n)}
+            className="flex items-start gap-2 rounded-md text-left transition-colors"
+            style={{
+              padding: "6px 10px",
+              border: `1px solid ${selected ? color : "var(--color-border)"}`,
+              background: selected ? "var(--color-bg-muted)" : "transparent",
+            }}
+          >
+            <span
+              style={{
+                fontSize: 11,
+                fontWeight: 600,
+                color,
+                border: `1px solid ${color}`,
+                borderRadius: 4,
+                padding: "1px 5px",
+                whiteSpace: "nowrap",
+                flexShrink: 0,
+              }}
+            >
+              {lvl.label}
+            </span>
+            <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
+              <span style={{ fontSize: 12, color: "var(--color-text-primary)" }}>
+                {lvl.description}
+              </span>
+              <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>{lvl.deadline}</span>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+type SeverityFieldProps = {
+  value: WorkOrderSeverity | null;
+  onSelect: (severity: WorkOrderSeverity) => void;
+};
+
+export function SeverityField({ value, onSelect }: SeverityFieldProps) {
+  return (
+    <div>
+      <Text
+        as="p"
+        variant="description"
+        sx={{ fontSize: 12, fontWeight: 600, marginBottom: "4px" }}
+      >
+        Severity (from APM)
+        <Text as="span" variant="label" tone="error">
+          {" "}
+          *
+        </Text>
+      </Text>
+      <Text
+        as="p"
+        variant="description"
+        sx={{ fontSize: 11, color: "var(--color-text-muted)", margin: "0 0 8px" }}
+      >
+        Transcribe the severity already assigned on the client&apos;s ticket — this is not a
+        judgment call.
+      </Text>
+      <SeverityOptionsList value={value} onSelect={onSelect} />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/site-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/site-cell.tsx
new file mode 100644
index 00000000..ccc16b35
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/site-cell.tsx
@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { MapPin } from "lucide-react";
+import { formatSitePlace } from "@/domain/locations/mappers/location-mapper";
+import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderFrozenSite } from "@/domain/work-orders/types/work-order-table-row";
+import { HighlightText } from "./highlight-text";
+import { HoverChevron } from "./hover-chevron";
+import { SiteDialog, type SitePatch } from "./site-dialog";
+
+type SiteCellProps = {
+  value: string;
+  location: string;
+  locationId: string | number;
+  city?: string;
+  state?: string;
+  pocName?: string;
+  pocPhone?: string;
+  pocNotes?: string;
+  additionalContacts?: WorkOrderAdditionalContact[];
+  sites: LocationOption[];
+  q?: string;
+  /** Inline create: editable POC + Site/POC required to confirm the modal. */
+  createMode?: boolean;
+  viewOnly?: boolean;
+  frozenSite?: WorkOrderFrozenSite;
+  onSave: (patch: SitePatch) => void;
+};
+
+export function SiteCell({
+  value,
+  location,
+  locationId,
+  city,
+  state,
+  pocName,
+  pocPhone,
+  pocNotes,
+  additionalContacts,
+  sites,
+  q,
+  createMode = false,
+  viewOnly = false,
+  frozenSite,
+  onSave,
+}: SiteCellProps) {
+  const [open, setOpen] = useState(false);
+  const place = formatSitePlace(
+    frozenSite?.city ?? city,
+    frozenSite?.state ?? state,
+    frozenSite?.label ?? location,
+  );
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          setOpen(true);
+        }}
+        className="group/cell flex w-full min-w-0 items-center gap-1.5 transition-opacity hover:opacity-80"
+      >
+        {value ? (
+          <span className="flex min-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap">
+            <MapPin size={13} className="shrink-0 text-[var(--color-text-muted)]" />
+            <span
+              className="shrink-0 font-mono text-[12.5px] font-bold tracking-wide"
+              style={{ color: "var(--foreground)" }}
+            >
+              <HighlightText text={value} q={q} />
+            </span>
+            {Boolean(place) && (
+              <>
+                <span
+                  className="inline-flex shrink-0 items-center self-center text-[12.5px] leading-none text-[var(--color-text-muted)]"
+                  aria-hidden
+                >
+                  .
+                </span>
+                <span className="truncate text-xs text-[var(--muted-foreground)]">
+                  <HighlightText text={place} q={q} />
+                </span>
+              </>
+            )}
+          </span>
+        ) : (
+          <span className="text-[12.5px] text-[var(--color-text-muted)]">
+            {createMode ? (
+              <>
+                Site <span style={{ color: "var(--destructive)" }}>*</span>
+              </>
+            ) : (
+              "—"
+            )}
+          </span>
+        )}
+        <HoverChevron />
+      </button>
+      <SiteDialog
+        open={open}
+        onOpenChange={setOpen}
+        value={value}
+        locationId={locationId}
+        pocName={pocName}
+        pocPhone={pocPhone}
+        pocNotes={pocNotes}
+        additionalContacts={additionalContacts}
+        sites={sites}
+        createMode={createMode}
+        viewOnly={viewOnly}
+        frozenSite={frozenSite}
+        onSave={onSave}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-detail-panel.tsx b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-detail-panel.tsx
new file mode 100644
index 00000000..07b1bb94
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-detail-panel.tsx
@@ -0,0 +1,79 @@
+import { ExternalLink, Mail, MapPin, Phone } from "lucide-react";
+import { Detail } from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
+import { Text } from "@/components/ui/text";
+import type { Location } from "@/domain/locations/types/location";
+import { buildMapsUrl } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-helpers";
+
+type SiteDialogDetailPanelProps = {
+  locationDetail: Location | undefined;
+  locationDetailLoading: boolean;
+  locationDetailError: boolean;
+  addressPreview: string;
+  fallbackLabel: string;
+};
+
+function SiteDialogSkeleton() {
+  return (
+    <div className="space-y-1.5" aria-busy="true" role="status" aria-label="Loading site details">
+      <span
+        className="block animate-pulse rounded"
+        style={{ background: "var(--color-bg-muted)", width: "75%", height: 12 }}
+      />
+      <span
+        className="block animate-pulse rounded"
+        style={{ background: "var(--color-bg-muted)", width: "50%", height: 12 }}
+      />
+    </div>
+  );
+}
+
+export function SiteDialogDetailPanel({
+  locationDetail,
+  locationDetailLoading,
+  locationDetailError,
+  addressPreview,
+  fallbackLabel,
+}: SiteDialogDetailPanelProps) {
+  return (
+    <div
+      className="space-y-1.5 rounded-lg p-3"
+      style={{
+        background: "var(--color-bg-muted)",
+        border: "1px solid var(--color-border)",
+      }}
+    >
+      {locationDetail ? (
+        <>
+          <Detail icon={MapPin} text={addressPreview || fallbackLabel} />
+          {Boolean(locationDetail.phone) && (
+            <Detail icon={Phone} text={locationDetail.phone ?? ""} />
+          )}
+          {Boolean(locationDetail.contactEmail) && (
+            <Detail icon={Mail} text={locationDetail.contactEmail ?? ""} />
+          )}
+          {Boolean(addressPreview) && (
+            <a
+              href={buildMapsUrl(locationDetail)}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+              style={{ color: "var(--color-primary)" }}
+            >
+              <ExternalLink size={12} /> Open in Google Maps
+            </a>
+          )}
+        </>
+      ) : (
+        <>
+          <Detail icon={MapPin} text={fallbackLabel} />
+          {locationDetailLoading && <SiteDialogSkeleton />}
+          {locationDetailError && (
+            <Text as="p" style={{ fontSize: 12, color: "var(--muted-foreground)" }}>
+              Could not load full site details. City and site code above are still available.
+            </Text>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-footer.tsx b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-footer.tsx
new file mode 100644
index 00000000..8492225e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-footer.tsx
@@ -0,0 +1,30 @@
+import { Button } from "@/components/ui/button";
+
+type SiteDialogFooterProps = {
+  onClose: () => void;
+  onConfirm: () => void;
+  viewOnly?: boolean;
+};
+
+export function SiteDialogFooter({ onClose, onConfirm, viewOnly = false }: SiteDialogFooterProps) {
+  if (viewOnly) {
+    return (
+      <div className="mt-4 flex items-center justify-end gap-2">
+        <Button className="min-h-0 px-3 py-1 text-[12px]" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-4 flex items-center justify-end gap-2">
+      <Button variant="ghost" className="min-h-0 px-2 py-1 text-[12px]" onClick={onClose}>
+        Cancel
+      </Button>
+      <Button className="min-h-0 px-3 py-1 text-[12px]" onClick={onConfirm}>
+        Save
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-helpers.ts b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-helpers.ts
new file mode 100644
index 00000000..e28e1f10
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-helpers.ts
@@ -0,0 +1,45 @@
+import type { Location } from "@/domain/locations/types/location";
+import { formatLocationAddressPreview } from "@/domain/locations/mappers/location-mapper";
+import { resolveSiteCode } from "@/domain/work-orders/mappers/work-order-board-mapper";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+
+export function extractLocationLabel(site: LocationOption): string {
+  const place = [site.city, site.state].filter(Boolean).join(", ");
+  if (place) {
+    return place;
+  }
+  const name = site.name;
+  for (const sep of [" · ", " — ", " - "]) {
+    const idx = name.indexOf(sep);
+    if (idx > 0) {
+      return name.slice(idx + sep.length).trim();
+    }
+  }
+  return name;
+}
+
+/** Board rows often have siteCode but no locationId — resolve via sites list. */
+export function resolveLocationId(
+  locationId: string | number,
+  siteCode: string,
+  sites: LocationOption[],
+): string {
+  const idStr = locationId !== "" && locationId != null ? String(locationId) : "";
+  if (idStr && sites.some((s) => String(s.id) === idStr)) {
+    return idStr;
+  }
+  if (idStr && sites.length === 0) {
+    return idStr;
+  }
+  const code = siteCode.trim().toLowerCase();
+  if (!code) {
+    return idStr;
+  }
+  const byCode = sites.find((s) => resolveSiteCode(s).toLowerCase() === code);
+  return byCode ? String(byCode.id) : idStr;
+}
+
+export function buildMapsUrl(location: Location): string {
+  const query = formatLocationAddressPreview(location);
+  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`;
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-fields.tsx b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-fields.tsx
new file mode 100644
index 00000000..66874d72
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-fields.tsx
@@ -0,0 +1 @@
+export { PocContactFields as SiteDialogPocFields } from "@/app/(protected)/workorders/_components/poc/poc-contact-fields";
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-section.tsx b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-section.tsx
new file mode 100644
index 00000000..bdccff61
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-section.tsx
@@ -0,0 +1,44 @@
+import { PocContactFields } from "@/app/(protected)/workorders/_components/poc/poc-contact-fields";
+import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
+
+type SiteDialogPocSectionProps = {
+  pocName: string;
+  pocPhone: string;
+  pocNotes: string;
+  additionalContacts: WorkOrderAdditionalContact[];
+  showPrimaryErrors?: boolean;
+  primaryRequired?: boolean;
+  onPocNameChange: (value: string) => void;
+  onPocPhoneChange: (value: string) => void;
+  onPocNotesChange: (value: string) => void;
+  onAdditionalContactsChange: (contacts: WorkOrderAdditionalContact[]) => void;
+};
+
+export function SiteDialogPocSection({
+  pocName,
+  pocPhone,
+  pocNotes,
+  additionalContacts,
+  showPrimaryErrors = false,
+  primaryRequired = false,
+  onPocNameChange,
+  onPocPhoneChange,
+  onPocNotesChange,
+  onAdditionalContactsChange,
+}: SiteDialogPocSectionProps) {
+  return (
+    <PocContactFields
+      pocName={pocName}
+      pocPhone={pocPhone}
+      pocNotes={pocNotes}
+      additionalContacts={additionalContacts}
+      showPrimaryErrors={showPrimaryErrors}
+      primaryRequired={primaryRequired}
+      onPocNameChange={onPocNameChange}
+      onPocPhoneChange={onPocPhoneChange}
+      onPocNotesChange={onPocNotesChange}
+      onAdditionalContactsChange={onAdditionalContactsChange}
+      helperText="Auto-filled from site records when empty. Additional contacts persist on save."
+    />
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-types.ts b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-types.ts
new file mode 100644
index 00000000..499af6aa
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog-types.ts
@@ -0,0 +1,12 @@
+import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
+
+export type SitePatch = {
+  site: string;
+  location: string;
+  locationId: string | number;
+  pocName: string;
+  pocPhone: string;
+  pocNotes: string;
+  /** Omitted for site-only saves when GET had no contacts and the user did not edit them. */
+  additionalContacts?: WorkOrderAdditionalContact[];
+};
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/site-dialog.tsx b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog.tsx
new file mode 100644
index 00000000..06c5e6bb
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/site-dialog.tsx
@@ -0,0 +1,145 @@
+import type { MouseEvent } from "react";
+import { MapPin } from "lucide-react";
+import { Dialog, DialogContent, DialogTitle } from "@mui/material";
+import { WizardFieldSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select";
+import { Text } from "@/components/ui/text";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderFrozenSite } from "@/domain/work-orders/types/work-order-table-row";
+import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
+import { SiteDialogDetailPanel } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-detail-panel";
+import { SiteDialogFooter } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-footer";
+import { SiteDialogPocSection } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-poc-section";
+import type { SitePatch } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-types";
+import { useSiteDialogState } from "@/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state";
+
+export type { SitePatch };
+
+type SiteDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: string;
+  locationId: string | number;
+  pocName?: string;
+  pocPhone?: string;
+  pocNotes?: string;
+  additionalContacts?: WorkOrderAdditionalContact[];
+  sites: LocationOption[];
+  createMode?: boolean;
+  viewOnly?: boolean;
+  frozenSite?: WorkOrderFrozenSite;
+  onSave: (patch: SitePatch) => void;
+};
+
+export function SiteDialog({
+  open,
+  onOpenChange,
+  value,
+  locationId,
+  pocName = "",
+  pocPhone = "",
+  pocNotes = "",
+  additionalContacts = [],
+  sites,
+  createMode = false,
+  viewOnly = false,
+  frozenSite,
+  onSave,
+}: SiteDialogProps) {
+  const s = useSiteDialogState({
+    open,
+    onOpenChange,
+    value,
+    locationId,
+    pocName,
+    pocPhone,
+    pocNotes,
+    additionalContacts,
+    sites,
+    createMode,
+    frozenSite,
+    onSave,
+  });
+
+  return (
+    <Dialog
+      open={open}
+      onClose={s.close}
+      maxWidth={false}
+      slotProps={{
+        ...dialogBlurBackdropSlotProps,
+        paper: {
+          className: "w-full",
+          style: { borderRadius: 12, maxWidth: 480 },
+          onClick: (e: MouseEvent<HTMLDivElement>) => e.stopPropagation(),
+        },
+      }}
+    >
+      <DialogContent className="p-6" onClick={(e) => e.stopPropagation()}>
+        <DialogTitle className="p-0" style={{ fontSize: 16, color: "var(--color-text-primary)" }}>
+          Site
+        </DialogTitle>
+        <Text as="p" className="sr-only">
+          Select a site and edit its point of contact
+        </Text>
+
+        <fieldset disabled={viewOnly} className="mt-3 space-y-3 border-0 p-0">
+          <div>
+            <FieldLabel required={createMode}>Site</FieldLabel>
+            <WizardFieldSelect
+              value={s.locId}
+              placeholder="Select site …"
+              icon={
+                <MapPin
+                  size={14}
+                  className="shrink-0"
+                  style={{ color: "var(--color-text-muted)" }}
+                />
+              }
+              searchPlaceholder="Search site code or city…"
+              options={sites.map((site) => ({
+                key: String(site.id),
+                label: site.name,
+              }))}
+              onPick={s.handlePick}
+            />
+            <Text
+              as="p"
+              variant="error"
+              when={Boolean(createMode && s.showErrors && s.siteMissing)}
+              className="mt-1 text-[11px]"
+            >
+              Site is required
+            </Text>
+          </div>
+
+          {Boolean(s.locId) && (
+            <SiteDialogDetailPanel
+              locationDetail={s.locationDetail}
+              locationDetailLoading={s.locationDetailLoading}
+              locationDetailError={s.locationDetailError}
+              addressPreview={s.addressPreview}
+              fallbackLabel={s.selected?.name || s.code || "—"}
+            />
+          )}
+
+          <SiteDialogPocSection
+            pocName={s.pn}
+            pocPhone={s.pp}
+            pocNotes={s.notes}
+            additionalContacts={s.extraContacts}
+            showPrimaryErrors={createMode && s.showErrors}
+            primaryRequired={createMode}
+            onPocNameChange={s.setPn}
+            onPocPhoneChange={s.setPp}
+            onPocNotesChange={s.setNotes}
+            onAdditionalContactsChange={s.setExtraContacts}
+          />
+        </fieldset>
+
+        <SiteDialogFooter viewOnly={viewOnly} onClose={s.close} onConfirm={s.attemptSave} />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/status-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/status-cell.tsx
new file mode 100644
index 00000000..0f0ceb50
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/status-cell.tsx
@@ -0,0 +1,211 @@
+import { useState } from "react";
+import { AlertTriangle, Check } from "lucide-react";
+import { Popover } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import type { WizardWOStatus } from "@/domain/work-orders/types/work-order-wizard";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  getClosabilityGaps,
+  tableRowToClosabilityInput,
+} from "@/domain/work-orders/utils/wo-closability";
+import {
+  PAST_DUE_BADGE_TOOLTIP,
+  PAST_DUE_POPOVER_BODY,
+  PAST_DUE_RESCHEDULE_CTA,
+  getInlineStatusTransitions,
+  getStatusOptionState,
+} from "@/domain/work-orders/utils/wo-lifecycle-transitions";
+import { HoverChevron } from "./hover-chevron";
+import { WoTableStatusLabel } from "./wo-table-status-label";
+
+const COMPLETED_STATUS_LOCKED_LABEL = "Status is locked because this work order is completed";
+
+type StatusCellProps = {
+  wo: WorkOrderTableRow;
+  onChangeStatus: (status: WizardWOStatus) => void;
+  onOpenSlideOver: () => void;
+  onPastDueAttempt?: () => void;
+  onRequestComplete?: () => void;
+  readOnly?: boolean;
+  /** Explicit list for inline create; existing WOs derive valid transitions from `wo.status`. */
+  statusOptions?: readonly WizardWOStatus[];
+};
+
+function ReadOnlyStatusLabel({ status }: { status: string }) {
+  return (
+    <span
+      className="flex w-full items-center gap-1"
+      aria-disabled="true"
+      aria-label={COMPLETED_STATUS_LOCKED_LABEL}
+    >
+      {status ? (
+        <WoTableStatusLabel status={status} />
+      ) : (
+        <span className="text-[11px] text-[var(--color-text-muted)]">—</span>
+      )}
+    </span>
+  );
+}
+
+function rowClosabilityGaps(wo: WorkOrderTableRow) {
+  return getClosabilityGaps(tableRowToClosabilityInput(wo));
+}
+
+function PastDueStatusCell({
+  onOpenSlideOver,
+  onPastDueAttempt,
+}: {
+  onOpenSlideOver: () => void;
+  onPastDueAttempt?: () => void;
+}) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onPastDueAttempt?.();
+          setAnchorEl(e.currentTarget);
+        }}
+        title={PAST_DUE_BADGE_TOOLTIP}
+        className="group/cell flex w-full cursor-pointer items-center gap-1.5 whitespace-nowrap leading-none transition-opacity hover:opacity-80"
+        style={{ fontSize: 12.5, fontWeight: 600, color: "var(--status-pastdue-text)" }}
+      >
+        <span className="h-2 w-2 shrink-0 rounded-full bg-[#BE123C]" />
+        Past Due
+        <HoverChevron />
+      </button>
+
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        onClick={(e) => e.stopPropagation()}
+        slotProps={{
+          paper: { className: "w-[264px] overflow-hidden rounded-lg border border-border p-0" },
+        }}
+      >
+        <div
+          className="flex items-start gap-2 p-3"
+          style={{ background: "var(--status-pending-bg)" }}
+        >
+          <AlertTriangle size={13} className="mt-0.5 shrink-0 text-[var(--warning)]" />
+          <div>
+            <Text
+              as="p"
+              style={{
+                fontSize: 11,
+                lineHeight: 1.375,
+                color: "var(--status-pending-text)",
+              }}
+            >
+              {PAST_DUE_POPOVER_BODY}
+            </Text>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpenSlideOver();
+                setAnchorEl(null);
+              }}
+              className="mt-2 block text-[11px] font-medium text-[var(--color-primary)]"
+            >
+              {PAST_DUE_RESCHEDULE_CTA}
+            </button>
+          </div>
+        </div>
+      </Popover>
+    </>
+  );
+}
+
+export function StatusCell({
+  wo,
+  onChangeStatus,
+  onOpenSlideOver,
+  onPastDueAttempt,
+  onRequestComplete,
+  readOnly = false,
+  statusOptions,
+}: StatusCellProps) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const closabilityGaps = rowClosabilityGaps(wo);
+  const options = statusOptions ?? getInlineStatusTransitions(wo.status);
+
+  if (readOnly) {
+    return <ReadOnlyStatusLabel status={wo.status} />;
+  }
+
+  if (wo.isPastDue) {
+    return (
+      <PastDueStatusCell onOpenSlideOver={onOpenSlideOver} onPastDueAttempt={onPastDueAttempt} />
+    );
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          setAnchorEl(e.currentTarget);
+        }}
+        className="group/cell flex w-full items-center gap-1 transition-opacity hover:opacity-80"
+      >
+        {wo.status ? (
+          <WoTableStatusLabel status={wo.status} />
+        ) : (
+          <span className="text-[11px] text-[var(--color-text-muted)]">—</span>
+        )}
+        <HoverChevron />
+      </button>
+
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        onClick={(e) => e.stopPropagation()}
+        slotProps={{ paper: { className: "min-w-[190px] rounded-lg border border-border p-1" } }}
+      >
+        {options.map((status) => {
+          const option = getStatusOptionState(wo, status, closabilityGaps);
+
+          return (
+            <button
+              key={status}
+              type="button"
+              disabled={option.disabled}
+              title={option.title}
+              onClick={() => {
+                if (option.disabled) {
+                  return;
+                }
+                if (status === "Completed" && wo.status !== "Completed") {
+                  onRequestComplete?.();
+                  setAnchorEl(null);
+                  return;
+                }
+                onChangeStatus(status);
+                setAnchorEl(null);
+              }}
+              className={
+                option.disabled
+                  ? "flex w-full cursor-not-allowed items-center justify-between gap-2 rounded px-2 py-1.5 opacity-50"
+                  : "flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 hover:bg-[#F9FAFB]"
+              }
+            >
+              <WoTableStatusLabel status={status} />
+              {Boolean(wo.status === status) && (
+                <Check size={10} className="ml-auto text-[var(--color-primary)]" />
+              )}
+            </button>
+          );
+        })}
+      </Popover>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/type-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/type-cell.tsx
new file mode 100644
index 00000000..949722d6
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/type-cell.tsx
@@ -0,0 +1,121 @@
+import { useState } from "react";
+
+import { Check } from "lucide-react";
+import { Popover } from "@mui/material";
+
+import {
+  typeNeedsSeverity,
+  type WorkOrderSeverity,
+} from "@/domain/work-orders/types/work-order-severity";
+import { WO_TYPES, type WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+import { HoverChevron } from "./hover-chevron";
+import { SeverityBadge } from "./severity-badge";
+import { TypeSeverityModal } from "./type-severity-modal";
+import { WoTableTypeLabel } from "./wo-table-type-label";
+
+type TypeCellProps = {
+  value: WOType | "";
+  severity?: WorkOrderSeverity | null;
+  q?: string;
+  viewOnly?: boolean;
+  onSave: (type: WOType, severity: WorkOrderSeverity | null) => void;
+};
+
+function TypeCellValue({ value, q }: { value: WOType | ""; q?: string }) {
+  if (value) {
+    return <WoTableTypeLabel type={value} q={q} />;
+  }
+  return <span className="text-[13px] text-[var(--color-text-muted)]">Select type of WO</span>;
+}
+
+export function TypeCell({ value, severity = null, q, viewOnly = false, onSave }: TypeCellProps) {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalSeed, setModalSeed] = useState<WOType | "">(value);
+  const [resetSeverity, setResetSeverity] = useState(false);
+  const showSeverityBadge = Boolean(value !== "" && typeNeedsSeverity(value) && severity != null);
+
+  if (viewOnly) {
+    return (
+      <div className="flex w-full items-center gap-1">
+        <TypeCellValue value={value} q={q} />
+        {Boolean(showSeverityBadge && severity != null) && <SeverityBadge severity={severity!} />}
+      </div>
+    );
+  }
+
+  function pick(t: WOType) {
+    setAnchorEl(null);
+    const needsSeverity = typeNeedsSeverity(t);
+    const switchingSeverityType =
+      needsSeverity && value !== "" && typeNeedsSeverity(value) && t !== value;
+
+    if (needsSeverity && (severity == null || switchingSeverityType)) {
+      setModalSeed(t);
+      setResetSeverity(Boolean(switchingSeverityType && severity != null));
+      setModalOpen(true);
+      return;
+    }
+
+    onSave(t, needsSeverity ? severity : null);
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label={value ? `Type of WO, ${value}` : "Select type of WO"}
+        title={value ? undefined : "Select type of WO"}
+        onClick={(e) => {
+          e.stopPropagation();
+          setAnchorEl(e.currentTarget);
+        }}
+        className="group/cell flex w-full items-center gap-1 transition-opacity hover:opacity-80"
+      >
+        <TypeCellValue value={value} q={q} />
+        {Boolean(showSeverityBadge && severity != null) && (
+          <SeverityBadge
+            severity={severity!}
+            onClick={(e) => {
+              e.stopPropagation();
+              setModalSeed(value);
+              setResetSeverity(false);
+              setModalOpen(true);
+            }}
+          />
+        )}
+        <HoverChevron />
+      </button>
+
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        onClick={(e) => e.stopPropagation()}
+        slotProps={{ paper: { className: "min-w-[168px] rounded-lg border border-border p-1" } }}
+      >
+        {WO_TYPES.map((t) => (
+          <button
+            key={t}
+            type="button"
+            onClick={() => pick(t)}
+            className="flex w-full items-center gap-2 rounded px-2 py-1.5 transition-colors hover:bg-[#F9FAFB]"
+          >
+            <WoTableTypeLabel type={t} />
+            {value === t && <Check size={10} className="ml-auto text-[var(--color-primary)]" />}
+          </button>
+        ))}
+      </Popover>
+
+      <TypeSeverityModal
+        open={modalOpen}
+        onOpenChange={setModalOpen}
+        type={modalSeed}
+        severity={resetSeverity ? null : severity}
+        onSave={onSave}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/type-severity-modal.tsx b/src/app/(protected)/workorders/_components/list/table/cells/type-severity-modal.tsx
new file mode 100644
index 00000000..f1ecde6b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/type-severity-modal.tsx
@@ -0,0 +1,165 @@
+import { useEffect, useState } from "react";
+
+import CloseIcon from "@mui/icons-material/Close";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+} from "@mui/material";
+
+import { Text } from "@/components/ui/text";
+import {
+  typeNeedsSeverity,
+  type WorkOrderSeverity,
+} from "@/domain/work-orders/types/work-order-severity";
+import { WO_TYPES, type WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+import { SeverityField } from "./severity-options-list";
+import { WoTableTypeLabel } from "./wo-table-type-label";
+
+type TypeSeverityModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  type: WOType | "";
+  severity: WorkOrderSeverity | null;
+  onSave: (type: WOType, severity: WorkOrderSeverity | null) => void;
+};
+
+export function TypeSeverityModal({
+  open,
+  onOpenChange,
+  type,
+  severity,
+  onSave,
+}: TypeSeverityModalProps) {
+  const [draftType, setDraftType] = useState<WOType | "">(type);
+  const [draftSeverity, setDraftSeverity] = useState<WorkOrderSeverity | null>(severity);
+
+  useEffect(() => {
+    if (open) {
+      setDraftType(type);
+      setDraftSeverity(severity);
+    }
+  }, [open, type, severity]);
+
+  const needsSeverity = typeNeedsSeverity(draftType);
+
+  function pickType(t: WOType) {
+    if (typeNeedsSeverity(t)) {
+      if (t !== draftType) {
+        setDraftSeverity(null);
+      }
+      setDraftType(t);
+      return;
+    }
+    onSave(t, null);
+    onOpenChange(false);
+  }
+
+  function confirm() {
+    if (!draftType || (needsSeverity && draftSeverity == null)) {
+      return;
+    }
+    onSave(draftType, needsSeverity ? draftSeverity : null);
+    onOpenChange(false);
+  }
+
+  const canConfirm = Boolean(draftType) && (!needsSeverity || draftSeverity != null);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => onOpenChange(false)}
+      maxWidth="xs"
+      fullWidth
+      onClick={(e) => e.stopPropagation()}
+      slotProps={{
+        paper: {
+          sx: { borderRadius: 2, background: "var(--color-bg-surface)" },
+        },
+      }}
+    >
+      <DialogTitle
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          paddingRight: 1,
+          fontFamily: "var(--font-display)",
+          fontSize: 18,
+          fontWeight: 600,
+          color: "var(--color-text-primary)",
+        }}
+      >
+        Type &amp; severity
+        <IconButton aria-label="Close" onClick={() => onOpenChange(false)} size="small">
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent>
+        <div className="space-y-3">
+          <div>
+            <Text
+              as="p"
+              variant="description"
+              sx={{ fontSize: 12, fontWeight: 600, marginBottom: "6px" }}
+            >
+              Type
+              <Text as="span" variant="label" tone="error">
+                {" "}
+                *
+              </Text>
+            </Text>
+            <div className="flex flex-wrap gap-1.5">
+              {WO_TYPES.map((t) => (
+                <button
+                  key={t}
+                  type="button"
+                  onClick={() => pickType(t)}
+                  className="rounded-full transition-opacity hover:opacity-80"
+                  style={{
+                    padding: "4px 10px",
+                    border: `1px solid ${
+                      draftType === t ? "var(--color-primary)" : "var(--color-border)"
+                    }`,
+                    background: draftType === t ? "var(--color-primary-tint)" : "transparent",
+                  }}
+                >
+                  <WoTableTypeLabel type={t} />
+                </button>
+              ))}
+            </div>
+          </div>
+          {Boolean(needsSeverity) && (
+            <SeverityField value={draftSeverity} onSelect={setDraftSeverity} />
+          )}
+        </div>
+      </DialogContent>
+      <DialogActions sx={{ padding: "12px 20px", gap: 1 }}>
+        <Button variant="text" size="small" onClick={() => onOpenChange(false)}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          size="small"
+          onClick={confirm}
+          disabled={!canConfirm}
+          sx={
+            canConfirm
+              ? undefined
+              : {
+                  opacity: 0.5,
+                  cursor: "not-allowed",
+                  "&:hover": { backgroundColor: "var(--color-primary)", opacity: 0.5 },
+                }
+          }
+        >
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/uplift-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/uplift-cell.tsx
new file mode 100644
index 00000000..6f4c4558
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/uplift-cell.tsx
@@ -0,0 +1,48 @@
+import type { UpliftSummary } from "@/domain/work-orders/types/work-order-uplift";
+import {
+  getUpliftCellLabel,
+  getUpliftStatusPillStyle,
+} from "@/domain/work-orders/utils/uplift-display-utils";
+
+type UpliftCellProps = {
+  summary: UpliftSummary;
+  onOpen?: () => void;
+};
+
+export function UpliftCell({ summary, onOpen }: UpliftCellProps) {
+  const label = getUpliftCellLabel(summary);
+
+  if (!onOpen) {
+    return label ? (
+      <span className="text-[11px] text-[var(--color-text-muted)]">{label}</span>
+    ) : (
+      <span className="text-[11px] text-[var(--color-text-muted)]">—</span>
+    );
+  }
+
+  const pillStatus = summary.pendingCount > 0 ? "pending" : summary.primaryStatus;
+  const pillStyle = pillStatus ? getUpliftStatusPillStyle(pillStatus) : null;
+
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        onOpen();
+      }}
+      title={label ? "View uplifts" : "Manage uplifts"}
+      className="flex w-full items-center justify-start transition-opacity hover:opacity-80"
+    >
+      {label && pillStyle ? (
+        <span
+          className="inline-flex max-w-full items-center rounded-full px-2 py-0.5 text-[11px] font-semibold whitespace-nowrap"
+          style={pillStyle}
+        >
+          {label}
+        </span>
+      ) : (
+        <span className="text-[11px] font-semibold text-[var(--color-primary)]">Manage</span>
+      )}
+    </button>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-form-fields.ts b/src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-form-fields.ts
new file mode 100644
index 00000000..1b0a4f30
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-form-fields.ts
@@ -0,0 +1,122 @@
+import { useEffect, useState } from "react";
+import { resolveLocationId } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-helpers";
+import { resolveSiteCode } from "@/domain/work-orders/mappers/work-order-board-mapper";
+import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+
+type UseSiteDialogFormFieldsArgs = {
+  open: boolean;
+  value: string;
+  locationId: string | number;
+  pocName: string;
+  pocPhone: string;
+  pocNotes: string;
+  additionalContacts: WorkOrderAdditionalContact[];
+  sites: LocationOption[];
+  createMode: boolean;
+};
+
+export function useSiteDialogFormFields({
+  open,
+  value,
+  locationId,
+  pocName,
+  pocPhone,
+  pocNotes,
+  additionalContacts,
+  sites,
+  createMode,
+}: UseSiteDialogFormFieldsArgs) {
+  const [code, setCode] = useState(value);
+  const [locId, setLocId] = useState(() => resolveLocationId(locationId, value, sites));
+  const [pn, setPn] = useState(pocName);
+  const [pp, setPp] = useState(pocPhone);
+  const [notes, setNotes] = useState(pocNotes);
+  const [extraContacts, setExtraContacts] = useState(additionalContacts);
+  const [pocFilledFor, setPocFilledFor] = useState("");
+  const [dirty, setDirty] = useState(false);
+  const [contactsDirty, setContactsDirty] = useState(false);
+  const [baselineHadContacts, setBaselineHadContacts] = useState(
+    () => additionalContacts.length > 0,
+  );
+  const [showErrors, setShowErrors] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setDirty(false);
+      setContactsDirty(false);
+      setShowErrors(false);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open || dirty) {
+      return;
+    }
+    const resolved = resolveLocationId(locationId, value, sites);
+    setCode(value);
+    setLocId(resolved);
+    setPn(pocName);
+    setPp(pocPhone);
+    setNotes(pocNotes);
+    setExtraContacts(additionalContacts);
+    setBaselineHadContacts(additionalContacts.length > 0);
+    setPocFilledFor(pocName.trim() || pocPhone.trim() ? resolved : "");
+  }, [open, dirty, value, locationId, pocName, pocPhone, pocNotes, additionalContacts, sites]);
+
+  const handlePick = (id: string) => {
+    const next = sites.find((s) => String(s.id) === id);
+    const siteChanged = id !== locId;
+    setLocId(id);
+    if (next) {
+      setCode(resolveSiteCode(next));
+    }
+    if (siteChanged) {
+      setExtraContacts([]);
+      setContactsDirty(true);
+      setDirty(true);
+      if (createMode) {
+        setPn("");
+        setPp("");
+      }
+      setPocFilledFor("");
+    } else if (id !== pocFilledFor) {
+      setPocFilledFor("");
+    }
+  };
+
+  const markPocDirty = (apply: () => void) => {
+    setDirty(true);
+    apply();
+  };
+
+  return {
+    code,
+    locId,
+    pn,
+    pp,
+    notes,
+    extraContacts,
+    pocFilledFor,
+    dirty,
+    contactsDirty,
+    baselineHadContacts,
+    showErrors,
+    selected: sites.find((s) => String(s.id) === locId),
+    siteMissing: !locId,
+    setPocFilledFor,
+    setPn,
+    setPp,
+    setShowErrors,
+    markDirty: () => setDirty(true),
+    handlePick,
+    setPnDirty: (next: string) => markPocDirty(() => setPn(next)),
+    setPpDirty: (next: string) => markPocDirty(() => setPp(next)),
+    setNotesDirty: (next: string) => markPocDirty(() => setNotes(next)),
+    setExtraContactsDirty: (contacts: WorkOrderAdditionalContact[]) => {
+      setDirty(true);
+      setContactsDirty(true);
+      setExtraContacts(contacts);
+    },
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state.ts b/src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state.ts
new file mode 100644
index 00000000..5800cbf4
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state.ts
@@ -0,0 +1,135 @@
+import { useEffect, useMemo } from "react";
+import { buildSiteDialogPatch } from "@/app/(protected)/workorders/_components/list/table/cells/build-site-dialog-patch";
+import type { SitePatch } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog-types";
+import { useSiteDialogFormFields } from "@/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-form-fields";
+import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
+import { formatLocationAddressPreview } from "@/domain/locations/mappers/location-mapper";
+import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderFrozenSite } from "@/domain/work-orders/types/work-order-table-row";
+
+export type { SitePatch };
+
+type UseSiteDialogStateArgs = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: string;
+  locationId: string | number;
+  pocName: string;
+  pocPhone: string;
+  pocNotes: string;
+  additionalContacts: WorkOrderAdditionalContact[];
+  sites: LocationOption[];
+  createMode: boolean;
+  frozenSite?: WorkOrderFrozenSite;
+  onSave: (patch: SitePatch) => void;
+};
+
+export function useSiteDialogState({
+  open,
+  onOpenChange,
+  value,
+  locationId,
+  pocName,
+  pocPhone,
+  pocNotes,
+  additionalContacts = [],
+  sites,
+  createMode,
+  frozenSite,
+  onSave,
+}: UseSiteDialogStateArgs) {
+  const fields = useSiteDialogFormFields({
+    open,
+    value,
+    locationId,
+    pocName,
+    pocPhone,
+    pocNotes,
+    additionalContacts,
+    sites,
+    createMode,
+  });
+  const { locId, pocFilledFor, pn, pp, setPn, setPp, setPocFilledFor, siteMissing } = fields;
+  const {
+    data: liveLocationDetail,
+    isLoading: liveLocationDetailLoading,
+    isError: liveLocationDetailError,
+  } = useLocationDetail(frozenSite == null && open && locId ? locId : undefined);
+  const frozenLocationDetail = useMemo(
+    () =>
+      frozenSite == null
+        ? undefined
+        : {
+            name: frozenSite.label,
+            address: frozenSite.address,
+            city: frozenSite.city,
+            state: frozenSite.state,
+            zipCode: frozenSite.zip,
+            phone: frozenSite.phone,
+            contact: undefined,
+            contactEmail: frozenSite.email,
+          },
+    [frozenSite],
+  );
+  const locationDetail = frozenLocationDetail ?? liveLocationDetail;
+  const locationDetailLoading = frozenSite == null && liveLocationDetailLoading;
+  const locationDetailError = frozenSite == null && liveLocationDetailError;
+
+  const addressPreview = locationDetail ? formatLocationAddressPreview(locationDetail) : "";
+  const pocMissing = !pn.trim() || !pp.trim();
+  const canConfirm = !siteMissing && (!createMode || !pocMissing);
+
+  useEffect(() => {
+    if (frozenSite != null || !open || !locId || !locationDetail || pocFilledFor === locId) {
+      return;
+    }
+    setPn((prev) => (prev.trim() ? prev : (locationDetail.contact ?? "")));
+    setPp((prev) => (prev.trim() ? prev : (locationDetail.phone ?? "")));
+    setPocFilledFor(locId);
+  }, [open, locId, locationDetail, pocFilledFor, setPn, setPp, setPocFilledFor, frozenSite]);
+
+  const attemptSave = () => {
+    if (createMode && !canConfirm) {
+      fields.setShowErrors(true);
+      return;
+    }
+    onSave(
+      buildSiteDialogPatch({
+        code: fields.code,
+        locId: fields.locId,
+        selected: fields.selected,
+        pocName: fields.pn,
+        pocPhone: fields.pp,
+        pocNotes: fields.notes,
+        extraContacts: fields.extraContacts,
+        contactsDirty: fields.contactsDirty,
+        baselineHadContacts: fields.baselineHadContacts,
+      }),
+    );
+    onOpenChange(false);
+  };
+
+  return {
+    locId: fields.locId,
+    code: fields.code,
+    selected: fields.selected,
+    locationDetail,
+    locationDetailLoading,
+    locationDetailError,
+    addressPreview,
+    pn: fields.pn,
+    pp: fields.pp,
+    notes: fields.notes,
+    extraContacts: fields.extraContacts,
+    showErrors: fields.showErrors,
+    siteMissing: fields.siteMissing,
+    handlePick: fields.handlePick,
+    attemptSave,
+    setPn: fields.setPnDirty,
+    setPp: fields.setPpDirty,
+    setNotes: fields.setNotesDirty,
+    setExtraContacts: fields.setExtraContactsDirty,
+    close: () => onOpenChange(false),
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/use-vendor-dialog-form.ts b/src/app/(protected)/workorders/_components/list/table/cells/use-vendor-dialog-form.ts
new file mode 100644
index 00000000..cf3624c9
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/use-vendor-dialog-form.ts
@@ -0,0 +1,177 @@
+import { useEffect, useMemo, useState } from "react";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { VendorFormValues } from "@/domain/vendors/schemas/vendor-schema";
+import { useCreateVendor } from "@/domain/vendors/use-cases/use-create-vendor";
+import {
+  buildCompanyOptions,
+  buildTechnicianOptions,
+  phoneForOption,
+} from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-options";
+import {
+  mergeVendorDropdownItems,
+  resolveVendorCompanyAnchor,
+} from "@/app/(protected)/workorders/_components/list/table/cells/resolve-vendor-company-anchor";
+import { resolveTechnicianKey } from "@/app/(protected)/workorders/_components/list/table/cells/resolve-technician-key";
+import { useVendorDialogSave } from "@/app/(protected)/workorders/_components/list/table/cells/use-vendor-dialog-save";
+import { computeVendorDialogCanSubmit } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-can-submit";
+import type { VendorPatch } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-types";
+
+type UseVendorDialogFormArgs = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  vendorId: string | number;
+  company: string;
+  tech: string;
+  techPhone: string;
+  vendors: VendorDropdownItem[];
+  onSave: (patch: VendorPatch) => void;
+};
+
+export function useVendorDialogForm({
+  open,
+  onOpenChange,
+  vendorId,
+  company,
+  tech,
+  techPhone,
+  vendors,
+  onSave,
+}: UseVendorDialogFormArgs) {
+  const createVendor = useCreateVendor();
+  const [selectedCompany, setSelectedCompany] = useState(company);
+  const [selectedKey, setSelectedKey] = useState(() =>
+    resolveTechnicianKey(vendorId, tech, company, vendors),
+  );
+  const [t, setT] = useState(tech);
+  const [phone, setPhone] = useState(techPhone);
+  const [notes, setNotes] = useState("");
+  const [addedVendors, setAddedVendors] = useState<VendorDropdownItem[]>([]);
+  const [pendingCreates, setPendingCreates] = useState<Record<string, VendorFormValues>>({});
+  const [saveError, setSaveError] = useState<string | null>(null);
+
+  const allVendors = useMemo(
+    () => mergeVendorDropdownItems(vendors, addedVendors),
+    [vendors, addedVendors],
+  );
+
+  const companyOptions = useMemo(
+    () => buildCompanyOptions(allVendors, company),
+    [allVendors, company],
+  );
+
+  const technicianOptions = useMemo(
+    () => buildTechnicianOptions(allVendors, selectedCompany, tech, company),
+    [allVendors, selectedCompany, tech, company],
+  );
+
+  useEffect(() => {
+    if (open) {
+      const key = resolveTechnicianKey(vendorId, tech, company, vendors);
+      const initialOptions = buildTechnicianOptions(vendors, company, tech, company);
+      setSelectedCompany(company);
+      setSelectedKey(key);
+      setT(tech);
+      setPhone(techPhone || phoneForOption(tech, initialOptions));
+      setNotes("");
+      setAddedVendors([]);
+      setPendingCreates({});
+      setSaveError(null);
+    }
+    // invariant: rebuilding options after Add must not clear staged technician drafts.
+  }, [open, tech, techPhone, vendors, company, vendorId]);
+
+  const selected = technicianOptions.find((option) => option.key === selectedKey);
+  const resolvedCompany = selectedCompany;
+  const selectedVendor =
+    selected?.vendor ?? allVendors.find((vendor) => vendor.companyName === selectedCompany);
+
+  const { companyName: anchorCompanyName, companyVendor } = resolveVendorCompanyAnchor({
+    company: selectedCompany,
+    resolvedCompany,
+    selectedVendor,
+    vendors: allVendors,
+  });
+
+  const canSubmit = computeVendorDialogCanSubmit({
+    current: {
+      company: selectedCompany,
+      selectedKey,
+      phone,
+      notes,
+      pendingCreateCount: Object.keys(pendingCreates).length,
+    },
+    baseline: {
+      company,
+      selectedKey: resolveTechnicianKey(vendorId, tech, company, vendors),
+      phone:
+        techPhone || phoneForOption(tech, buildTechnicianOptions(vendors, company, tech, company)),
+      notes: "",
+      pendingCreateCount: 0,
+    },
+  });
+
+  const { handleSave } = useVendorDialogSave({
+    allVendors,
+    pendingCreates,
+    selectedKey,
+    selectedVendor,
+    resolvedCompany,
+    anchorCompanyName,
+    tech: selected?.name ?? t,
+    phone,
+    createVendor,
+    onSave,
+    onOpenChange,
+    setSaveError,
+    canSubmit,
+  });
+
+  return {
+    companyOptions,
+    technicianOptions,
+    selected,
+    t,
+    phone,
+    notes,
+    resolvedCompany,
+    selectedVendor,
+    selectedCompany,
+    selectedKey,
+    anchorCompanyName,
+    companyVendor,
+    saveError,
+    canSubmit,
+    isPending: createVendor.isPending,
+    handleSave,
+    handleCompanyPick: (nextCompany: string) => {
+      const selectedOption = technicianOptions.find((option) => option.key === selectedKey);
+      setSelectedCompany(nextCompany);
+      if (selectedOption?.company !== nextCompany) {
+        setAddedVendors([]);
+        setPendingCreates({});
+        setSelectedKey("");
+        setT("");
+        setPhone("");
+      }
+    },
+    handlePick: (key: string) => {
+      const option = technicianOptions.find((o) => o.key === key);
+      setSelectedKey(key);
+      setT(option?.name ?? key);
+      setPhone(option?.phone || phoneForOption(option?.name ?? key, technicianOptions));
+    },
+    handleTechnicianCreated: (
+      created: VendorDropdownItem,
+      createdPhone: string,
+      payload: VendorFormValues,
+    ) => {
+      setAddedVendors((current) => [...current, created]);
+      setPendingCreates((current) => ({ ...current, [String(created.id)]: payload }));
+      setSelectedKey(String(created.id));
+      setT(created.contactName);
+      setPhone(createdPhone);
+    },
+    setPhone,
+    setNotes,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/use-vendor-dialog-save.ts b/src/app/(protected)/workorders/_components/list/table/cells/use-vendor-dialog-save.ts
new file mode 100644
index 00000000..619bc6c9
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/use-vendor-dialog-save.ts
@@ -0,0 +1,78 @@
+import { isDraftVendorId } from "@/domain/vendors/utils/draft-vendor";
+import { vendorToDropdownItem } from "@/domain/vendors/utils/vendor-to-dropdown-item";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { VendorFormValues } from "@/domain/vendors/schemas/vendor-schema";
+import type { VendorPatch } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-types";
+import type { useCreateVendor } from "@/domain/vendors/use-cases/use-create-vendor";
+
+type UseVendorDialogSaveArgs = {
+  allVendors: VendorDropdownItem[];
+  pendingCreates: Record<string, VendorFormValues>;
+  selectedKey: string;
+  selectedVendor: VendorDropdownItem | undefined;
+  resolvedCompany: string;
+  anchorCompanyName: string;
+  tech: string;
+  phone: string;
+  createVendor: ReturnType<typeof useCreateVendor>;
+  onSave: (patch: VendorPatch) => void;
+  onOpenChange: (open: boolean) => void;
+  setSaveError: (error: string | null) => void;
+  canSubmit: boolean;
+};
+
+export function useVendorDialogSave({
+  allVendors,
+  pendingCreates,
+  selectedKey,
+  selectedVendor,
+  resolvedCompany,
+  anchorCompanyName,
+  tech,
+  phone,
+  createVendor,
+  onSave,
+  onOpenChange,
+  setSaveError,
+  canSubmit,
+}: UseVendorDialogSaveArgs) {
+  const resolveSaveVendor = () =>
+    allVendors.find((vendor) => String(vendor.id) === selectedKey) ??
+    allVendors.find(
+      (vendor) =>
+        vendor.contactName === tech &&
+        vendor.companyName === (resolvedCompany || anchorCompanyName),
+    ) ??
+    selectedVendor;
+
+  const handleSave = async () => {
+    if (!canSubmit) return;
+    setSaveError(null);
+    let saveVendor = resolveSaveVendor();
+    const pendingPayload = saveVendor ? pendingCreates[String(saveVendor.id)] : undefined;
+
+    if (saveVendor != null && isDraftVendorId(saveVendor.id) && pendingPayload) {
+      try {
+        const created = await createVendor.mutateAsync({
+          ...pendingPayload,
+          phone: phone.trim() || pendingPayload.phone,
+        });
+        saveVendor = vendorToDropdownItem(created);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to create technician";
+        setSaveError(message);
+        return;
+      }
+    }
+
+    onSave({
+      vendorId: saveVendor ? String(saveVendor.id) : "",
+      company: resolvedCompany || anchorCompanyName,
+      tech: selectedKey ? (saveVendor?.contactName ?? tech) : "",
+      techPhone: selectedKey ? phone : "",
+    });
+    onOpenChange(false);
+  };
+
+  return { handleSave };
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/vendor-cell.tsx
new file mode 100644
index 00000000..1cfac800
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-cell.tsx
@@ -0,0 +1,74 @@
+import { useState } from "react";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderFrozenCompany } from "@/domain/work-orders/types/work-order-table-row";
+import { HighlightText } from "./highlight-text";
+import { HoverChevron } from "./hover-chevron";
+import { VendorDialog, type VendorPatch } from "./vendor-dialog";
+
+type VendorCellProps = {
+  vendorId?: string | number;
+  company: string;
+  tech: string;
+  techPhone?: string;
+  vendors: VendorDropdownItem[];
+  q?: string;
+  viewOnly?: boolean;
+  frozenCompany?: WorkOrderFrozenCompany;
+  onSave: (patch: VendorPatch) => void;
+};
+
+export function VendorCell({
+  vendorId = "",
+  company,
+  tech,
+  techPhone,
+  vendors,
+  q,
+  viewOnly = false,
+  frozenCompany,
+  onSave,
+}: VendorCellProps) {
+  const [open, setOpen] = useState(false);
+  const hasAny = !!(tech || company);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          setOpen(true);
+        }}
+        className="group/cell flex w-full items-center gap-1.5 text-left transition-opacity hover:opacity-80"
+      >
+        {hasAny ? (
+          <div className="min-w-0 flex-1 leading-tight">
+            <div className="truncate text-[13px] font-semibold text-[var(--foreground)]">
+              {tech ? <HighlightText text={tech} q={q} /> : <HighlightText text={company} q={q} />}
+            </div>
+            {Boolean(tech && company) && (
+              <div className="truncate text-[11px] text-[var(--muted-foreground)]">
+                <HighlightText text={company} q={q} />
+              </div>
+            )}
+          </div>
+        ) : (
+          <span className="flex-1 text-[13px] text-[var(--color-text-muted)]">—</span>
+        )}
+        <HoverChevron />
+      </button>
+      <VendorDialog
+        open={open}
+        onOpenChange={setOpen}
+        vendorId={vendorId}
+        company={company}
+        tech={tech}
+        techPhone={techPhone}
+        vendors={vendors}
+        viewOnly={viewOnly}
+        frozenCompany={frozenCompany}
+        onSave={onSave}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-add-technician.tsx b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-add-technician.tsx
new file mode 100644
index 00000000..f559bb7d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-add-technician.tsx
@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import {
+  DLG_INPUT_CLS,
+  DLG_INPUT_STYLE,
+} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { vendorSchema, type VendorFormValues } from "@/domain/vendors/schemas/vendor-schema";
+import { buildTechnicianCreatePayload } from "@/domain/vendors/utils/build-technician-create-payload";
+import { createDraftVendorDropdownItem } from "@/domain/vendors/utils/draft-vendor";
+import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
+
+type VendorDialogAddTechnicianProps = {
+  companyName: string;
+  companyVendor: VendorDropdownItem;
+  onCreated: (vendor: VendorDropdownItem, phone: string, payload: VendorFormValues) => void;
+};
+
+export function VendorDialogAddTechnician({
+  companyName,
+  companyVendor,
+  onCreated,
+}: VendorDialogAddTechnicianProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [contactName, setContactName] = useState("");
+  const [phone, setPhone] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const resetForm = () => {
+    setContactName("");
+    setPhone("");
+    setError(null);
+  };
+
+  const handleAdd = () => {
+    const payload = buildTechnicianCreatePayload({
+      companyVendor,
+      contactName,
+      phone,
+    });
+    const parsed = vendorSchema.safeParse(payload);
+    if (!parsed.success) {
+      const fieldErrors = parsed.error.flatten().fieldErrors;
+      const message =
+        fieldErrors.contactName?.[0] ??
+        fieldErrors.phone?.[0] ??
+        fieldErrors.companyName?.[0] ??
+        "Enter a valid technician name";
+      setError(message);
+      return;
+    }
+
+    setError(null);
+    const draftItem = createDraftVendorDropdownItem(parsed.data);
+    onCreated(draftItem, parsed.data.phone || phone.trim(), parsed.data);
+    resetForm();
+    setExpanded(false);
+  };
+
+  if (!expanded) {
+    return (
+      <button
+        type="button"
+        onClick={() => setExpanded(true)}
+        className="flex items-center gap-1.5 text-[12px] font-medium transition-opacity hover:opacity-80"
+        style={{ color: "var(--color-primary)" }}
+      >
+        <Plus size={12} className="shrink-0" aria-hidden />+ Add technician
+      </button>
+    );
+  }
+
+  return (
+    <div
+      className="space-y-2 rounded-lg p-3"
+      style={{
+        background: "var(--color-bg-muted)",
+        border: "1px solid var(--color-border)",
+      }}
+    >
+      <Text as="p" variant="caption" sx={{ fontSize: 12, color: "var(--muted-foreground)" }}>
+        New technician for {companyName}
+      </Text>
+      <div>
+        <FieldLabel>Technician Name</FieldLabel>
+        <input
+          autoFocus
+          value={contactName}
+          onChange={(e) => setContactName(e.target.value)}
+          placeholder="Full name"
+          className={DLG_INPUT_CLS}
+          style={DLG_INPUT_STYLE}
+        />
+      </div>
+      <div>
+        <FieldLabel>Technician Phone</FieldLabel>
+        <input
+          type="tel"
+          value={phone}
+          onChange={(e) => setPhone(e.target.value)}
+          placeholder="(000) 000-0000"
+          className={DLG_INPUT_CLS}
+          style={DLG_INPUT_STYLE}
+        />
+      </div>
+      {Boolean(error) && (
+        <Text as="p" variant="caption" sx={{ fontSize: 11.5, color: "var(--color-destructive)" }}>
+          {error}
+        </Text>
+      )}
+      <div className="flex items-center justify-end gap-2 pt-1">
+        <Button
+          variant="ghost"
+          className="min-h-0 px-2 py-1 text-[12px]"
+          onClick={() => {
+            resetForm();
+            setExpanded(false);
+          }}
+        >
+          Cancel
+        </Button>
+        <Button
+          className="min-h-0 px-3 py-1 text-[12px]"
+          disabled={contactName.trim() === ""}
+          onClick={handleAdd}
+        >
+          Add
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-body.tsx b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-body.tsx
new file mode 100644
index 00000000..62e69494
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-body.tsx
@@ -0,0 +1,169 @@
+import { Building2, Wrench } from "lucide-react";
+import {
+  DLG_INPUT_CLS,
+  DLG_INPUT_STYLE,
+} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
+import { WizardFieldSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select";
+import { Text } from "@/components/ui/text";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
+import { VendorDialogAddTechnician } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-add-technician";
+import { VendorDialogCompanyCard } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-company-card";
+import type { VendorFormValues } from "@/domain/vendors/schemas/vendor-schema";
+import type {
+  CompanyOption,
+  TechnicianOption,
+} from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-options";
+import type { WorkOrderFrozenCompany } from "@/domain/work-orders/types/work-order-table-row";
+
+type VendorDialogBodyProps = {
+  selectedCompany: string;
+  companyOptions: CompanyOption[];
+  selectedKey: string;
+  technicianOptions: TechnicianOption[];
+  anchorCompanyName: string;
+  companyVendorForAdd: VendorDropdownItem | undefined;
+  tech: string;
+  phone: string;
+  notes: string;
+  resolvedCompany: string;
+  selectedVendor: VendorDropdownItem | undefined;
+  frozenCompany?: WorkOrderFrozenCompany;
+  saveError: string | null;
+  onCompanyPick: (company: string) => void;
+  onPick: (key: string) => void;
+  onPhoneChange: (phone: string) => void;
+  onNotesChange: (notes: string) => void;
+  onTechnicianCreated: (
+    created: VendorDropdownItem,
+    createdPhone: string,
+    payload: VendorFormValues,
+  ) => void;
+};
+
+export function VendorDialogBody({
+  selectedCompany,
+  companyOptions,
+  selectedKey,
+  technicianOptions,
+  anchorCompanyName,
+  companyVendorForAdd,
+  tech,
+  phone,
+  notes,
+  resolvedCompany,
+  selectedVendor,
+  frozenCompany,
+  saveError,
+  onCompanyPick,
+  onPick,
+  onPhoneChange,
+  onNotesChange,
+  onTechnicianCreated,
+}: VendorDialogBodyProps) {
+  return (
+    <>
+      <div className="mt-3 space-y-3">
+        <div>
+          <FieldLabel required>Company</FieldLabel>
+          <WizardFieldSelect
+            value={selectedCompany}
+            placeholder="Select company …"
+            icon={
+              <Building2
+                size={14}
+                className="shrink-0"
+                style={{ color: "var(--color-text-muted)" }}
+              />
+            }
+            searchPlaceholder="Search company…"
+            options={companyOptions.map((option) => ({
+              key: option.key,
+              label: option.label,
+            }))}
+            onPick={onCompanyPick}
+          />
+        </div>
+
+        {Boolean(resolvedCompany) && (
+          <div>
+            <FieldLabel>Company info</FieldLabel>
+            <VendorDialogCompanyCard
+              company={resolvedCompany}
+              vendor={selectedVendor}
+              frozenCompany={frozenCompany}
+            />
+          </div>
+        )}
+
+        <div>
+          <FieldLabel>Technician (optional)</FieldLabel>
+          {frozenCompany != null ? (
+            <div className={DLG_INPUT_CLS} style={DLG_INPUT_STYLE}>
+              {frozenCompany.contactName?.trim() || tech || "—"}
+            </div>
+          ) : (
+            <WizardFieldSelect
+              value={selectedKey}
+              placeholder={selectedCompany ? "Select technician …" : "Pick a company first"}
+              disabled={!selectedCompany}
+              icon={
+                <Wrench
+                  size={14}
+                  className="shrink-0"
+                  style={{ color: "var(--color-text-muted)" }}
+                />
+              }
+              searchPlaceholder="Search technician…"
+              options={technicianOptions.map((option) => ({
+                key: option.key,
+                label: option.name,
+              }))}
+              onPick={onPick}
+            />
+          )}
+          {frozenCompany == null && companyVendorForAdd != null && (
+            <div className="mt-2">
+              <VendorDialogAddTechnician
+                companyName={anchorCompanyName}
+                companyVendor={companyVendorForAdd}
+                onCreated={onTechnicianCreated}
+              />
+            </div>
+          )}
+        </div>
+
+        {Boolean(tech) && (
+          <div>
+            <FieldLabel>Technician Phone (optional)</FieldLabel>
+            <input
+              type="tel"
+              value={phone}
+              onChange={(e) => onPhoneChange(e.target.value)}
+              className={DLG_INPUT_CLS}
+              style={DLG_INPUT_STYLE}
+            />
+          </div>
+        )}
+
+        <div>
+          <FieldLabel>Notes (optional)</FieldLabel>
+          <textarea
+            value={notes}
+            onChange={(e) => onNotesChange(e.target.value)}
+            placeholder="Contact preferences, availability, etc."
+            rows={3}
+            className={`${DLG_INPUT_CLS} resize-none`}
+            style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit" }}
+          />
+        </div>
+      </div>
+
+      {Boolean(saveError) && (
+        <Text as="p" variant="caption" sx={{ fontSize: 11.5, color: "var(--color-destructive)" }}>
+          {saveError}
+        </Text>
+      )}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-can-submit.ts b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-can-submit.ts
new file mode 100644
index 00000000..3a0ddc19
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-can-submit.ts
@@ -0,0 +1,26 @@
+export type VendorDialogSubmitSnapshot = {
+  company: string;
+  selectedKey: string;
+  phone: string;
+  notes: string;
+  pendingCreateCount: number;
+};
+
+type VendorDialogCanSubmitInput = {
+  current: VendorDialogSubmitSnapshot;
+  baseline: VendorDialogSubmitSnapshot;
+};
+
+export function computeVendorDialogCanSubmit({
+  current,
+  baseline,
+}: VendorDialogCanSubmitInput): boolean {
+  const valid = current.company.trim() !== "";
+  const hasNewTechs = current.pendingCreateCount > 0;
+  const dirty =
+    current.company !== baseline.company ||
+    current.selectedKey !== baseline.selectedKey ||
+    current.phone !== baseline.phone ||
+    current.pendingCreateCount !== baseline.pendingCreateCount;
+  return valid && (dirty || hasNewTechs);
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-company-card.tsx b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-company-card.tsx
new file mode 100644
index 00000000..57266630
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-company-card.tsx
@@ -0,0 +1,134 @@
+import { ExternalLink, Mail, MapPin, Phone, User } from "lucide-react";
+import { AddressMapPreview } from "@/components/common/address-map-preview";
+import { Detail } from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderFrozenCompany } from "@/domain/work-orders/types/work-order-table-row";
+import { formatVendorDistance } from "@/domain/work-orders/utils/vendor-dropdown-label";
+
+type VendorDialogCompanyCardProps = {
+  company: string;
+  vendor: VendorDropdownItem | undefined;
+  frozenCompany?: WorkOrderFrozenCompany;
+};
+
+type CompanyCardModel = {
+  title: string;
+  distance: string;
+  contactName: string;
+  email: string;
+  address: string;
+  mapsUrl: string;
+  phone: string;
+};
+
+function formatFrozenCompanyAddress(company: WorkOrderFrozenCompany): string {
+  const region = [company.city, company.state]
+    .map((part) => part?.trim())
+    .filter(Boolean)
+    .join(", ");
+
+  return [company.address?.trim(), region, company.zip?.trim()].filter(Boolean).join(", ");
+}
+
+function liveMapsUrl(address: string): string {
+  if (!address) return "";
+  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
+}
+
+function resolveFrozenCompanyCard(
+  company: string,
+  frozen: WorkOrderFrozenCompany,
+): CompanyCardModel {
+  return {
+    title: company,
+    distance: "",
+    contactName: frozen.contactName?.trim() ?? "",
+    email: frozen.email?.trim() ?? "",
+    address: formatFrozenCompanyAddress(frozen),
+    mapsUrl: frozen.maps ?? "",
+    phone: frozen.phone ?? "",
+  };
+}
+
+function resolveLiveCompanyCard(
+  company: string,
+  vendor: VendorDropdownItem | undefined,
+): CompanyCardModel {
+  const address = vendor?.address ?? "";
+  return {
+    title: company,
+    distance: formatVendorDistance(vendor?.distanceMiles),
+    contactName: "",
+    email: vendor?.email?.trim() ?? "",
+    address,
+    mapsUrl: liveMapsUrl(address),
+    phone: "",
+  };
+}
+
+function resolveCompanyCardModel(
+  company: string,
+  vendor: VendorDropdownItem | undefined,
+  frozenCompany?: WorkOrderFrozenCompany,
+): CompanyCardModel {
+  if (frozenCompany != null) return resolveFrozenCompanyCard(company, frozenCompany);
+  return resolveLiveCompanyCard(company, vendor);
+}
+
+function CompanyCardDetails({ model }: { model: CompanyCardModel }) {
+  return (
+    <>
+      {Boolean(model.address) && <Detail icon={MapPin} text={model.address} />}
+      {Boolean(model.contactName) && <Detail icon={User} text={model.contactName} />}
+      {Boolean(model.phone) && <Detail icon={Phone} text={model.phone} />}
+      {Boolean(model.email) && <Detail icon={Mail} text={model.email} />}
+    </>
+  );
+}
+
+export function VendorDialogCompanyCard({
+  company,
+  vendor,
+  frozenCompany,
+}: VendorDialogCompanyCardProps) {
+  const model = resolveCompanyCardModel(company, vendor, frozenCompany);
+
+  return (
+    <div
+      className="space-y-1.5 rounded-lg p-3"
+      style={{
+        background: "var(--color-bg-muted)",
+        border: "1px solid var(--color-border)",
+      }}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div style={{ fontSize: 13, fontWeight: 500, color: "var(--foreground)" }}>
+          {model.title || "—"}
+        </div>
+        {Boolean(model.distance) && (
+          <span className="shrink-0 text-[11px]" style={{ color: "var(--muted-foreground)" }}>
+            {model.distance}
+          </span>
+        )}
+      </div>
+      <CompanyCardDetails model={model} />
+      {Boolean(model.mapsUrl) && (
+        <a
+          href={model.mapsUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+          style={{ color: "var(--color-primary)" }}
+        >
+          <ExternalLink size={12} /> Open in Google Maps
+        </a>
+      )}
+      {/*
+        The card holds one composed address line for both live and frozen
+        companies, so the preview is given the line directly rather than
+        structured parts; it is saved data either way.
+      */}
+      <AddressMapPreview query={model.address} height={140} />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-footer.tsx b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-footer.tsx
new file mode 100644
index 00000000..954382ad
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-footer.tsx
@@ -0,0 +1,59 @@
+import { Button } from "@/components/ui/button";
+
+type VendorDialogFooterProps = {
+  isPending: boolean;
+  onCancel: () => void;
+  onSave: () => void;
+  viewOnly?: boolean;
+  canSubmit?: boolean;
+};
+
+const lookDisabledSx = {
+  opacity: 0.5,
+  cursor: "not-allowed",
+  "&:hover": { backgroundColor: "var(--color-primary)", opacity: 0.5 },
+};
+
+export function VendorDialogFooter({
+  isPending,
+  onCancel,
+  onSave,
+  viewOnly = false,
+  canSubmit = false,
+}: VendorDialogFooterProps) {
+  if (viewOnly) {
+    return (
+      <div className="mt-4 flex items-center justify-end gap-2">
+        <Button className="min-h-0 px-3 py-1 text-[12px]" onClick={onCancel}>
+          Close
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-4 flex items-center justify-end gap-2">
+      <Button
+        variant="ghost"
+        className="min-h-0 px-2 py-1 text-[12px]"
+        disabled={isPending}
+        onClick={onCancel}
+      >
+        Cancel
+      </Button>
+      <Button
+        className="min-h-0 px-3 py-1 text-[12px]"
+        disabled={isPending}
+        aria-disabled={!canSubmit && !isPending}
+        // why: AAP Save stays clickable; native disabled would change the no-op look-disabled gate.
+        sx={canSubmit || isPending ? undefined : lookDisabledSx}
+        onClick={() => {
+          if (!canSubmit) return;
+          void onSave();
+        }}
+      >
+        {isPending ? "Saving…" : "Save"}
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-options.ts b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-options.ts
new file mode 100644
index 00000000..dc694816
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-options.ts
@@ -0,0 +1,96 @@
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { formatVendorTechnicianLabel } from "@/domain/work-orders/utils/vendor-dropdown-label";
+
+export type TechnicianOption = {
+  key: string;
+  label: string;
+  name: string;
+  company: string;
+  phone: string;
+  vendor?: VendorDropdownItem;
+};
+
+export type CompanyOption = {
+  key: string;
+  label: string;
+  vendor?: VendorDropdownItem;
+};
+
+export function buildCompanyOptions(
+  vendors: VendorDropdownItem[],
+  currentCompany: string,
+): CompanyOption[] {
+  const companies = new Map<string, CompanyOption>();
+
+  for (const vendor of vendors) {
+    const companyName = vendor.companyName.trim();
+    if (companyName && !companies.has(companyName)) {
+      companies.set(companyName, {
+        key: companyName,
+        label: companyName,
+        vendor,
+      });
+    }
+  }
+
+  if (currentCompany && !companies.has(currentCompany)) {
+    companies.set(currentCompany, {
+      key: currentCompany,
+      label: currentCompany,
+    });
+  }
+
+  return Array.from(companies.values());
+}
+
+export function buildTechnicianOptions(
+  vendors: VendorDropdownItem[],
+  selectedCompany: string,
+  tech: string,
+  currentCompany: string,
+): TechnicianOption[] {
+  const options = new Map<string, TechnicianOption>();
+
+  const add = (option: TechnicianOption) => {
+    if (!option.key) {
+      return;
+    }
+    options.set(option.key, option);
+  };
+
+  for (const vendor of vendors) {
+    if (vendor.companyName !== selectedCompany) {
+      continue;
+    }
+    const contact = vendor.contactName.trim() || vendor.companyName.trim();
+    add({
+      key: String(vendor.id),
+      label: formatVendorTechnicianLabel(vendor),
+      name: contact,
+      company: vendor.companyName,
+      phone: "",
+      vendor,
+    });
+  }
+
+  if (tech && selectedCompany === currentCompany) {
+    const vendor =
+      vendors.find((v) => v.contactName === tech && v.companyName === currentCompany) ??
+      vendors.find((v) => v.contactName === tech);
+    const key = vendor ? String(vendor.id) : tech;
+    add({
+      key,
+      label: tech,
+      name: tech,
+      company: currentCompany,
+      phone: "",
+      vendor,
+    });
+  }
+
+  return Array.from(options.values());
+}
+
+export function phoneForOption(name: string, options: TechnicianOption[], fallback = ""): string {
+  return options.find((o) => o.name === name)?.phone ?? fallback;
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-types.ts b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-types.ts
new file mode 100644
index 00000000..b2e35c0a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-types.ts
@@ -0,0 +1,6 @@
+export type VendorPatch = {
+  vendorId: string;
+  company: string;
+  tech: string;
+  techPhone: string;
+};
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog.tsx b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog.tsx
new file mode 100644
index 00000000..c9bf6b21
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/vendor-dialog.tsx
@@ -0,0 +1,122 @@
+import type { MouseEvent } from "react";
+import { Dialog, DialogContent, DialogTitle } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { VendorDialogBody } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-body";
+import { VendorDialogFooter } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-footer";
+import { useVendorDialogForm } from "@/app/(protected)/workorders/_components/list/table/cells/use-vendor-dialog-form";
+import type { VendorPatch } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-types";
+import type { WorkOrderFrozenCompany } from "@/domain/work-orders/types/work-order-table-row";
+
+export type { VendorPatch } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-types";
+
+/**
+ * Height bound for the dialog surface. The company card grew with the map
+ * preview, so the dialog itself — not just the card — must cap its height and
+ * scroll internally or it outgrows short viewports.
+ */
+export const VENDOR_DIALOG_SURFACE_MAX_HEIGHT = "55vh";
+
+type VendorDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  vendorId?: string | number;
+  company: string;
+  tech: string;
+  techPhone?: string;
+  vendors: VendorDropdownItem[];
+  viewOnly?: boolean;
+  frozenCompany?: WorkOrderFrozenCompany;
+  onSave: (patch: VendorPatch) => void;
+};
+
+export function VendorDialog({
+  open,
+  onOpenChange,
+  vendorId = "",
+  company,
+  tech,
+  techPhone = "",
+  vendors,
+  viewOnly = false,
+  frozenCompany,
+  onSave,
+}: VendorDialogProps) {
+  const form = useVendorDialogForm({
+    open,
+    onOpenChange,
+    vendorId,
+    company,
+    tech,
+    techPhone,
+    vendors,
+    onSave,
+  });
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => onOpenChange(false)}
+      maxWidth={false}
+      slotProps={{
+        ...dialogBlurBackdropSlotProps,
+        paper: {
+          className: "w-full",
+          style: {
+            borderRadius: 12,
+            maxWidth: 560,
+            maxHeight: VENDOR_DIALOG_SURFACE_MAX_HEIGHT,
+            display: "flex",
+            flexDirection: "column",
+          },
+          onClick: (e: MouseEvent<HTMLDivElement>) => e.stopPropagation(),
+        },
+      }}
+    >
+      <DialogContent
+        className="p-6"
+        onClick={(e) => e.stopPropagation()}
+        style={{ overflowY: "auto", minHeight: 0 }}
+      >
+        <DialogTitle className="p-0" style={{ fontSize: 16, color: "var(--color-text-primary)" }}>
+          Vendor
+        </DialogTitle>
+        <Text as="p" className="sr-only">
+          Search and select the vendor company
+        </Text>
+
+        <fieldset disabled={viewOnly} className="min-w-0 border-0 p-0">
+          <VendorDialogBody
+            selectedCompany={form.selectedCompany}
+            companyOptions={form.companyOptions}
+            selectedKey={form.selectedKey}
+            technicianOptions={form.technicianOptions}
+            anchorCompanyName={form.anchorCompanyName}
+            companyVendorForAdd={viewOnly ? undefined : (form.companyVendor ?? undefined)}
+            tech={frozenCompany?.contactName ?? form.selected?.name ?? form.t}
+            phone={frozenCompany?.phone ?? form.phone}
+            notes={form.notes}
+            resolvedCompany={form.resolvedCompany}
+            selectedVendor={form.selectedVendor}
+            frozenCompany={frozenCompany}
+            saveError={form.saveError}
+            onCompanyPick={form.handleCompanyPick}
+            onPick={form.handlePick}
+            onPhoneChange={form.setPhone}
+            onNotesChange={form.setNotes}
+            onTechnicianCreated={form.handleTechnicianCreated}
+          />
+        </fieldset>
+
+        <VendorDialogFooter
+          viewOnly={viewOnly}
+          isPending={form.isPending}
+          canSubmit={form.canSubmit}
+          onCancel={() => onOpenChange(false)}
+          onSave={form.handleSave}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/wo-counter-pills.tsx b/src/app/(protected)/workorders/_components/list/table/cells/wo-counter-pills.tsx
new file mode 100644
index 00000000..32c13d49
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/wo-counter-pills.tsx
@@ -0,0 +1,101 @@
+import { RefreshCw } from "lucide-react";
+import { Tooltip } from "@mui/material";
+import {
+  formatCarriedOverHover,
+  resolveCarryOverSourceWeek,
+  shouldShowCarriedOverPill,
+} from "@/domain/work-orders/utils/carry-over-display";
+import { formatRescheduleHover } from "@/domain/work-orders/utils/reschedule-indicator";
+
+const RESCHEDULE_PILL_STYLE = {
+  background: "#f5f3ff",
+  color: "#7c3aed",
+  border: "1px solid #ddd6fe",
+} as const;
+
+const MUTED_PILL_STYLE = {
+  background: "var(--color-bg-muted)",
+  color: "var(--color-text-secondary)",
+  border: "1px solid var(--color-border)",
+} as const;
+
+const ADDON_PILL_STYLE = {
+  background: "var(--type-addon-bg)",
+  color: "var(--type-addon-text)",
+} as const;
+
+export function RescheduleCounterPill({
+  count,
+  originalDate,
+}: {
+  count: number;
+  originalDate?: string;
+}) {
+  if (count < 2) {
+    return null;
+  }
+
+  const hover = formatRescheduleHover(count, originalDate);
+
+  return (
+    <Tooltip title={hover} arrow placement="top">
+      <span
+        aria-label={hover}
+        className="inline-flex h-[18px] items-center gap-0.5 rounded px-1.5 text-[10px] font-semibold"
+        style={RESCHEDULE_PILL_STYLE}
+      >
+        <RefreshCw size={10} className="shrink-0" />
+        {count}
+      </span>
+    </Tooltip>
+  );
+}
+
+export function CarriedOverCounterPill({
+  count,
+  originalWeek,
+  originalDate,
+  scheduledOn,
+  status,
+}: {
+  count: number;
+  originalWeek?: string;
+  originalDate?: string;
+  scheduledOn?: string;
+  status?: string;
+}) {
+  if (!shouldShowCarriedOverPill(count, status)) {
+    return null;
+  }
+
+  const sourceWeek = resolveCarryOverSourceWeek({ originalWeek, originalDate, scheduledOn });
+  const hover = formatCarriedOverHover(count, sourceWeek);
+
+  return (
+    <Tooltip title={hover} arrow placement="top">
+      <span
+        aria-label={hover}
+        className="inline-flex h-[18px] items-center rounded px-1.5 text-[10px] font-semibold"
+        style={MUTED_PILL_STYLE}
+      >
+        {count}
+      </span>
+    </Tooltip>
+  );
+}
+
+export function AddOnPill({ when }: { when: boolean }) {
+  if (!when) {
+    return null;
+  }
+
+  return (
+    <span
+      title="Add-On"
+      className="inline-flex h-[18px] items-center rounded px-1.5 text-[10px] font-semibold"
+      style={ADDON_PILL_STYLE}
+    >
+      Add-On
+    </span>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/wo-table-status-label.tsx b/src/app/(protected)/workorders/_components/list/table/cells/wo-table-status-label.tsx
new file mode 100644
index 00000000..4c45f593
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/wo-table-status-label.tsx
@@ -0,0 +1,25 @@
+import { getWoTableStatusStyle } from "../wo-table-status-style";
+import { HighlightText } from "./highlight-text";
+
+type WoTableStatusLabelProps = {
+  status: string;
+  q?: string;
+};
+
+export function WoTableStatusLabel({ status, q }: WoTableStatusLabelProps) {
+  const style = getWoTableStatusStyle(status);
+  const label = status || "—";
+
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 whitespace-nowrap leading-none"
+      style={{ fontSize: 12.5, fontWeight: 600, color: style.text }}
+    >
+      <span
+        className="shrink-0 rounded-full"
+        style={{ width: 8, height: 8, background: style.dot }}
+      />
+      <HighlightText text={label} q={q} />
+    </span>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/wo-table-type-label.tsx b/src/app/(protected)/workorders/_components/list/table/cells/wo-table-type-label.tsx
new file mode 100644
index 00000000..3568a379
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/cells/wo-table-type-label.tsx
@@ -0,0 +1,19 @@
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { getWoTableTypeColor } from "../wo-table-type-style";
+import { HighlightText } from "./highlight-text";
+
+type WoTableTypeLabelProps = {
+  type: WOType;
+  q?: string;
+};
+
+export function WoTableTypeLabel({ type, q }: WoTableTypeLabelProps) {
+  return (
+    <span
+      className="inline-flex items-center whitespace-nowrap leading-none"
+      style={{ fontSize: 12.5, fontWeight: 700, color: getWoTableTypeColor(type) }}
+    >
+      <HighlightText text={type} q={q} />
+    </span>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/inline-create-field.tsx b/src/app/(protected)/workorders/_components/list/table/inline-create-field.tsx
new file mode 100644
index 00000000..f7f8ce8a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/inline-create-field.tsx
@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { Text } from "@/components/ui/text";
+
+type InlineCreateFieldProps = {
+  showError?: boolean;
+  error?: string;
+  children: ReactNode;
+};
+
+/** Bordered create-cell wrapper; error ring + helper reveal after a failed Save attempt. */
+export function InlineCreateField({ showError = false, error, children }: InlineCreateFieldProps) {
+  return (
+    <div className="flex w-full min-w-0 flex-col gap-1">
+      <div
+        className="flex w-full min-w-0 items-center"
+        style={{
+          minHeight: 34,
+          borderRadius: 6,
+          padding: "0 8px",
+          background: "var(--color-bg-surface)",
+          border: `1px solid ${showError ? "var(--destructive)" : "var(--color-border)"}`,
+          boxShadow: showError ? "0 0 0 1px var(--destructive)" : "none",
+        }}
+      >
+        {children}
+      </div>
+      <Text as="p" variant="error" when={Boolean(showError && error)} className="m-0 text-[11px]">
+        {error}
+      </Text>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/inline-wo-number-cell.tsx b/src/app/(protected)/workorders/_components/list/table/inline-wo-number-cell.tsx
new file mode 100644
index 00000000..8b3b196f
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/inline-wo-number-cell.tsx
@@ -0,0 +1,33 @@
+import type { WorkOrderTableDraft } from "@/domain/work-orders/types/work-order-table-row";
+import { AddOnOverrideToggle } from "./add-on-override-toggle";
+import { EditableWONumberCell } from "./cells/editable-wo-number-cell";
+
+type InlineWoNumberCellProps = {
+  draft: WorkOrderTableDraft;
+  allRows: { id: string | number; woNumber: string }[];
+  onPatch: (patch: Partial<WorkOrderTableDraft>) => void;
+};
+
+export function InlineWoNumberCell({ draft, allRows, onPatch }: InlineWoNumberCellProps) {
+  const isUnscheduled = Boolean(!draft.scheduledOn && !draft.targetWeek);
+
+  return (
+    <td style={{ padding: "0 14px" }}>
+      <div className="flex flex-col gap-1">
+        <EditableWONumberCell
+          value={draft.woNumber}
+          rescheduleCount={0}
+          isAddOn={Boolean(draft.isAddOnOverride && isUnscheduled)}
+          currentId="draft"
+          allOrders={allRows as never[]}
+          onSave={(woNumber) => onPatch({ woNumber })}
+        />
+        <AddOnOverrideToggle
+          checked={draft.isAddOnOverride}
+          visible={isUnscheduled}
+          onChange={(isAddOnOverride) => onPatch({ isAddOnOverride })}
+        />
+      </div>
+    </td>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/pm-type-icons.ts b/src/app/(protected)/workorders/_components/list/table/pm-type-icons.ts
new file mode 100644
index 00000000..5c263d60
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/pm-type-icons.ts
@@ -0,0 +1,132 @@
+import { createElement, type ComponentProps } from "react";
+import type { LucideIcon } from "lucide-react";
+import {
+  AlertTriangle,
+  Droplets,
+  Filter,
+  Flame,
+  Gauge,
+  Lightbulb,
+  Lock,
+  Shield,
+  ShieldCheck,
+  Thermometer,
+  Video,
+  Waves,
+  Wind,
+  Wrench,
+  Zap,
+} from "lucide-react";
+
+/**
+ * Frontend-only icon keys for service / PM types.
+ * Display mapping only — never sent to or stored by the API.
+ */
+export enum ServiceIcon {
+  ScrubberPit = "scrubber-pit",
+  BackflowPreventers = "backflow-preventers",
+  DomesticBackflow = "domestic-backflow",
+  TankWaterHeater = "tank-water-heater",
+  PressureReducingValve = "pressure-reducing-valve",
+  PumpingSystems = "pumping-systems",
+  HvacInspection = "hvac-inspection",
+  Electrical = "electrical",
+  Plumbing = "plumbing",
+  DoorHardware = "door-hardware",
+  FloorDrainBackingUp = "floor-drain-backing-up",
+  ParkingLotLighting = "parking-lot-lighting",
+  MensRestroomCameraLine = "mens-restroom-camera-line",
+  AssessWindowLeaks = "assess-window-leaks",
+  FireSuppression = "fire-suppression",
+  Leak = "leak",
+  Default = "default",
+}
+
+const SERVICE_ICON_COMPONENTS: Record<ServiceIcon, LucideIcon> = {
+  [ServiceIcon.ScrubberPit]: Filter,
+  [ServiceIcon.BackflowPreventers]: Shield,
+  [ServiceIcon.DomesticBackflow]: ShieldCheck,
+  [ServiceIcon.TankWaterHeater]: Thermometer,
+  [ServiceIcon.PressureReducingValve]: Gauge,
+  [ServiceIcon.PumpingSystems]: Waves,
+  [ServiceIcon.HvacInspection]: Wind,
+  [ServiceIcon.Electrical]: Zap,
+  [ServiceIcon.Plumbing]: Wrench,
+  [ServiceIcon.DoorHardware]: Lock,
+  [ServiceIcon.FloorDrainBackingUp]: Droplets,
+  [ServiceIcon.ParkingLotLighting]: Lightbulb,
+  [ServiceIcon.MensRestroomCameraLine]: Video,
+  [ServiceIcon.AssessWindowLeaks]: AlertTriangle,
+  [ServiceIcon.FireSuppression]: Flame,
+  [ServiceIcon.Leak]: Droplets,
+  [ServiceIcon.Default]: Wrench,
+};
+
+/** Exact label match (case-insensitive) — design PM types + common API Problems. */
+const SERVICE_LABEL_TO_ICON: Record<string, ServiceIcon> = {
+  "scrubber pit": ServiceIcon.ScrubberPit,
+  "backflow preventers": ServiceIcon.BackflowPreventers,
+  "domestic backflow": ServiceIcon.DomesticBackflow,
+  "tank / water heater": ServiceIcon.TankWaterHeater,
+  "pressure reducing valve": ServiceIcon.PressureReducingValve,
+  "pumping systems": ServiceIcon.PumpingSystems,
+  "hvac inspection": ServiceIcon.HvacInspection,
+  electrical: ServiceIcon.Electrical,
+  plumbing: ServiceIcon.Plumbing,
+  "door / hardware": ServiceIcon.DoorHardware,
+  "floor drain backing up": ServiceIcon.FloorDrainBackingUp,
+  "parking lot lighting": ServiceIcon.ParkingLotLighting,
+  "mens restroom camera line": ServiceIcon.MensRestroomCameraLine,
+  "assess window leaks": ServiceIcon.AssessWindowLeaks,
+  "fire suppression system": ServiceIcon.FireSuppression,
+  leak: ServiceIcon.Leak,
+};
+
+/** Keyword heuristics for API Problem labels not in the exact map. */
+const SERVICE_KEYWORD_RULES: { test: RegExp; icon: ServiceIcon }[] = [
+  { test: /\b(fire|suppression)\b/i, icon: ServiceIcon.FireSuppression },
+  { test: /\b(camera|video)\b/i, icon: ServiceIcon.MensRestroomCameraLine },
+  { test: /\b(window)\b/i, icon: ServiceIcon.AssessWindowLeaks },
+  { test: /\b(leak|drain)\b/i, icon: ServiceIcon.Leak },
+  { test: /\b(backflow)\b/i, icon: ServiceIcon.BackflowPreventers },
+  { test: /\b(hvac|air)\b/i, icon: ServiceIcon.HvacInspection },
+  { test: /\b(electric)/i, icon: ServiceIcon.Electrical },
+  { test: /\b(plumb)/i, icon: ServiceIcon.Plumbing },
+  { test: /\b(door|hardware|lock)\b/i, icon: ServiceIcon.DoorHardware },
+  { test: /\b(light)/i, icon: ServiceIcon.ParkingLotLighting },
+  { test: /\b(pump)/i, icon: ServiceIcon.PumpingSystems },
+  { test: /\b(tank|heater|thermo)/i, icon: ServiceIcon.TankWaterHeater },
+  { test: /\b(valve|pressure|gauge)\b/i, icon: ServiceIcon.PressureReducingValve },
+  { test: /\b(scrubber|filter)\b/i, icon: ServiceIcon.ScrubberPit },
+  { test: /\b(broken|damaged|fault)\b/i, icon: ServiceIcon.AssessWindowLeaks },
+];
+
+export function resolveServiceIcon(serviceLabel: string): ServiceIcon {
+  const key = serviceLabel.trim().toLowerCase();
+  if (!key) {
+    return ServiceIcon.Default;
+  }
+
+  const exact = SERVICE_LABEL_TO_ICON[key];
+  if (exact) {
+    return exact;
+  }
+
+  for (const rule of SERVICE_KEYWORD_RULES) {
+    if (rule.test.test(key)) {
+      return rule.icon;
+    }
+  }
+
+  return ServiceIcon.Default;
+}
+
+export function getPmTypeIcon(pmType: string): LucideIcon {
+  return SERVICE_ICON_COMPONENTS[resolveServiceIcon(pmType)];
+}
+
+type PmTypeIconProps = ComponentProps<LucideIcon> & { pmType: string };
+
+export function PmTypeIcon({ pmType, ...props }: PmTypeIconProps) {
+  return createElement(getPmTypeIcon(pmType), props);
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/reschedule-notify.ts b/src/app/(protected)/workorders/_components/list/table/reschedule-notify.ts
new file mode 100644
index 00000000..1391cf32
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/reschedule-notify.ts
@@ -0,0 +1,57 @@
+import { toast, type ToastOptions } from "react-toastify";
+import { createElement } from "react";
+import { fmtDate, fmtWeekOf } from "@/domain/work-orders/utils/wizard-date-utils";
+import { RescheduleToast } from "./reschedule-toast";
+
+const TOAST_DURATION_MS = 6000;
+
+const TOAST_OPTIONS: ToastOptions = {
+  position: "top-center",
+  autoClose: TOAST_DURATION_MS,
+  hideProgressBar: true,
+  closeButton: false,
+  icon: false,
+  className: "!min-h-0 !bg-transparent !p-0 !shadow-none",
+};
+
+type NotifyNavigate = {
+  onNavigate: () => void;
+};
+
+function showRescheduleToast(
+  message: string,
+  onNavigate: () => void,
+  linkLabel = "Click to view it.",
+) {
+  const toastId = toast(
+    createElement(RescheduleToast, {
+      message,
+      linkLabel,
+      onNavigate: () => {
+        toast.dismiss(toastId);
+        onNavigate();
+      },
+      onDismiss: () => toast.dismiss(toastId),
+    }),
+    TOAST_OPTIONS,
+  );
+  return toastId;
+}
+
+export function weekMoveNotify(weekStart: string, { onNavigate }: NotifyNavigate) {
+  if (!weekStart) {
+    return showRescheduleToast(
+      "Work order moved to Unscheduled.",
+      onNavigate,
+      "View in Advanced Filters.",
+    );
+  }
+  return showRescheduleToast(
+    `Work order moved to Unscheduled · ${fmtWeekOf(weekStart)}.`,
+    onNavigate,
+  );
+}
+
+export function rescheduleNotify(dateIso: string, { onNavigate }: NotifyNavigate) {
+  return showRescheduleToast(`Work order rescheduled to ${fmtDate(dateIso)}.`, onNavigate);
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/reschedule-toast.tsx b/src/app/(protected)/workorders/_components/list/table/reschedule-toast.tsx
new file mode 100644
index 00000000..73a4ab28
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/reschedule-toast.tsx
@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import { Calendar as CalendarIcon, X } from "lucide-react";
+import { Text } from "@/components/ui/text";
+
+const TOAST_DURATION_MS = 6000;
+
+type RescheduleToastProps = {
+  message: string;
+  linkLabel: string;
+  onNavigate: () => void;
+  onDismiss: () => void;
+};
+
+export function RescheduleToast({
+  message,
+  linkLabel,
+  onNavigate,
+  onDismiss,
+}: RescheduleToastProps) {
+  const [w, setW] = useState(100);
+
+  useEffect(() => {
+    const t = setTimeout(() => setW(0), 30);
+    return () => clearTimeout(t);
+  }, []);
+
+  return (
+    <div
+      style={{
+        width: 360,
+        background: "var(--card)",
+        border: "1px solid var(--border)",
+        borderRadius: 8,
+        boxShadow: "0 8px 24px -8px rgba(38,34,98,.25)",
+        overflow: "hidden",
+      }}
+    >
+      <div className="flex items-start gap-2.5 p-3">
+        <CalendarIcon size={16} className="mt-0.5 shrink-0" style={{ color: "var(--primary)" }} />
+        <button type="button" onClick={onNavigate} className="flex-1 text-left hover:opacity-80">
+          <Text as="p" style={{ fontSize: 13 }}>
+            {message} <span style={{ color: "var(--primary)", fontWeight: 500 }}>{linkLabel}</span>
+          </Text>
+        </button>
+        <button type="button" onClick={onDismiss} title="Dismiss" className="shrink-0">
+          <X size={14} />
+        </button>
+      </div>
+      <div
+        style={{
+          height: 3,
+          width: `${w}%`,
+          background: "var(--primary)",
+          transition: `width ${TOAST_DURATION_MS}ms linear`,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/save-existing-row-type.ts b/src/app/(protected)/workorders/_components/list/table/save-existing-row-type.ts
new file mode 100644
index 00000000..6af21133
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/save-existing-row-type.ts
@@ -0,0 +1,33 @@
+import { toast } from "react-toastify";
+import type { WorkOrderSeverity } from "@/domain/work-orders/types/work-order-severity";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import {
+  formatSeverityEscalationToast,
+  shouldAnnounceSeverityEscalation,
+} from "@/domain/work-orders/utils/severity-escalation";
+
+type PersistPatchFn = (
+  id: string | number,
+  patch: WorkOrderTablePatch,
+  options?: { onSuccess?: () => void },
+) => void;
+
+export function saveExistingRowType(
+  onPatch: PersistPatchFn,
+  row: Pick<WorkOrderTableRow, "id" | "woNumber" | "severity">,
+  type: WOType,
+  severity: WorkOrderSeverity | null,
+) {
+  const patch = { type, severity };
+  if (!shouldAnnounceSeverityEscalation(row.severity, severity)) {
+    onPatch(row.id, patch);
+    return;
+  }
+  onPatch(row.id, patch, {
+    onSuccess: () => toast.warn(formatSeverityEscalationToast(row.woNumber, severity)),
+  });
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/site-place-lookup.ts b/src/app/(protected)/workorders/_components/list/table/site-place-lookup.ts
new file mode 100644
index 00000000..fc17f979
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/site-place-lookup.ts
@@ -0,0 +1,47 @@
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+
+export type SitePlaceLookup = {
+  city: string;
+  state: string;
+};
+
+export function buildSitePlaceLookups(sites: LocationOption[]): {
+  byId: Map<string, SitePlaceLookup>;
+  byCode: Map<string, SitePlaceLookup>;
+} {
+  const byId = new Map<string, SitePlaceLookup>();
+  const byCode = new Map<string, SitePlaceLookup>();
+  for (const site of sites) {
+    const place: SitePlaceLookup = {
+      city: site.city ?? "",
+      state: site.state ?? "",
+    };
+    if (!place.city && !place.state) {
+      continue;
+    }
+    byId.set(String(site.id), place);
+    const code = site.siteCode?.trim();
+    if (code) {
+      byCode.set(code.toUpperCase(), place);
+    }
+  }
+  return { byId, byCode };
+}
+
+export function resolveSitePlace(
+  locationId: string | number | undefined,
+  siteCode: string | undefined,
+  lookups: { byId: Map<string, SitePlaceLookup>; byCode: Map<string, SitePlaceLookup> },
+): SitePlaceLookup | undefined {
+  if (locationId !== undefined && locationId !== "") {
+    const byId = lookups.byId.get(String(locationId));
+    if (byId) {
+      return byId;
+    }
+  }
+  const code = siteCode?.trim();
+  if (code) {
+    return lookups.byCode.get(code.toUpperCase());
+  }
+  return undefined;
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/to-inline-draft-row.ts b/src/app/(protected)/workorders/_components/list/table/to-inline-draft-row.ts
new file mode 100644
index 00000000..ce63baec
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/to-inline-draft-row.ts
@@ -0,0 +1,33 @@
+import type { WorkOrderTableDraft } from "@/domain/work-orders/types/work-order-table-row";
+
+/** Minimal row shape needed by StatusCell while a new work order is being drafted inline. */
+export function toInlineDraftRow(draft: WorkOrderTableDraft) {
+  return {
+    id: "draft",
+    woNumber: draft.woNumber,
+    status: draft.status,
+    isPastDue: false,
+    type: draft.type,
+    rescheduleCount: 0,
+    carriedOver: 0,
+    docStatus: "" as const,
+    mediaCount: 0,
+    site: draft.site,
+    location: draft.location,
+    dispatcherId: draft.dispatcherId,
+    dispatcherName: "",
+    scheduledOn: draft.scheduledOn,
+    scheduleWeekOnly: draft.scheduleWeekOnly,
+    scheduleEnd: draft.scheduleEnd,
+    schedMode: draft.schedMode,
+    vendorId: draft.vendorId,
+    completedDate: "",
+    dueDate: draft.dueDate,
+    pm: draft.pm,
+    serviceNotes: draft.serviceNotes,
+    extraServices: draft.extraServices,
+    company: draft.company,
+    tech: draft.tech,
+    targetWeek: draft.targetWeek,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/use-wo-table-inline-create.ts b/src/app/(protected)/workorders/_components/list/table/use-wo-table-inline-create.ts
new file mode 100644
index 00000000..d6097cb4
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/use-wo-table-inline-create.ts
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { toast } from "react-toastify";
+import type { LocationOption, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import { useCreateWorkOrderFromWizard } from "@/domain/work-orders/use-cases/use-create-work-order-from-wizard";
+import { findDuplicateWoNumberRow } from "@/domain/work-orders/utils/find-duplicate-wo-number-row";
+import type { ReturnTypeOfUseWorkOrdersTableData } from "./wo-table-types";
+import { buildInlineDraftCreateInput } from "./build-inline-draft-create-input";
+
+type UseWoTableInlineCreateArgs = {
+  tableData: ReturnTypeOfUseWorkOrdersTableData;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  onDuplicateFound: (row: WorkOrderTableRow) => void;
+};
+
+export function useWoTableInlineCreate({
+  tableData,
+  users,
+  sites,
+  onDuplicateFound,
+}: UseWoTableInlineCreateArgs) {
+  const [isCheckingInlineDuplicate, setIsCheckingInlineDuplicate] = useState(false);
+  const createMutation = useCreateWorkOrderFromWizard(() => {
+    tableData.cancelDraft();
+  });
+
+  const handleInlineSave = () => {
+    void (async () => {
+      const draftSnapshot = tableData.draft;
+      const woNumber = draftSnapshot.woNumber.trim();
+      if (woNumber) {
+        setIsCheckingInlineDuplicate(true);
+        try {
+          const duplicate =
+            findDuplicateWoNumberRow(woNumber, tableData.rows, "draft") ??
+            (await workOrdersApi.findByWoNumber(woNumber));
+          if (duplicate && String(duplicate.id) !== "draft") {
+            onDuplicateFound(duplicate);
+            return;
+          }
+        } catch {
+          toast.error("Unable to verify the work order number. Please try again.");
+          return;
+        } finally {
+          setIsCheckingInlineDuplicate(false);
+        }
+      }
+      createMutation.mutate(buildInlineDraftCreateInput(tableData.draft, users, sites));
+    })();
+  };
+
+  return {
+    handleInlineSave,
+    saving: createMutation.isPending || isCheckingInlineDuplicate,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/use-wo-table-row-handlers.ts b/src/app/(protected)/workorders/_components/list/table/use-wo-table-row-handlers.ts
new file mode 100644
index 00000000..acea0710
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/use-wo-table-row-handlers.ts
@@ -0,0 +1,220 @@
+import { useMemo } from "react";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  applySchedulePatch,
+  applyScheduleRangePatch,
+  type WorkOrderTablePatchFn,
+} from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+import { shouldNotifyCrossWeek } from "@/domain/work-orders/utils/should-notify-cross-week";
+import type { ReturnTypeOfUseWorkOrdersTableData } from "./wo-table-types";
+import { rescheduleNotify, weekMoveNotify } from "./reschedule-notify";
+import type { WoTableRowHandlers } from "./wo-table-row";
+import { clearDueDateBeforeSchedule } from "@/domain/work-orders/utils/due-date-floor";
+
+function revealOrNotifyScheduledDay(args: {
+  id: string | number;
+  date: string;
+  weekMonday: string;
+  onNavigateToDay: (dateIso: string) => void;
+  revealScheduledRow: (id: string | number) => void;
+}) {
+  const { id, date, weekMonday, onNavigateToDay, revealScheduledRow } = args;
+  if (shouldNotifyCrossWeek(date, weekMonday)) {
+    rescheduleNotify(date, {
+      onNavigate: () => {
+        onNavigateToDay(date);
+        revealScheduledRow(id);
+      },
+    });
+    return;
+  }
+  onNavigateToDay(date);
+  revealScheduledRow(id);
+}
+
+type DragHandlersArgs = Pick<
+  ReturnTypeOfUseWorkOrdersTableData,
+  "dragState" | "setDragViz" | "reorderRows" | "endDrag"
+>;
+
+function createDragHandlers({ dragState, setDragViz, reorderRows, endDrag }: DragHandlersArgs) {
+  return {
+    onDragStart: (id: string | number) => {
+      dragState.current = { dragId: id, overId: null };
+      setDragViz({ dragId: id, overId: null });
+    },
+    onDragOver: (id: string | number) => {
+      const did = dragState.current.dragId;
+      if (did && did !== id && dragState.current.overId !== id) {
+        dragState.current.overId = id;
+        setDragViz((v) => ({ ...v, overId: id }));
+      }
+    },
+    onDrop: () => {
+      const { dragId, overId } = dragState.current;
+      if (dragId && overId) {
+        reorderRows(dragId, overId);
+      }
+      endDrag();
+    },
+    onDragEnd: endDrag,
+  };
+}
+
+type UseWoTableRowHandlersOptions = {
+  tableData: ReturnTypeOfUseWorkOrdersTableData;
+  weekMonday: string;
+  onNavigateToDay: (dateIso: string) => void;
+  onOpenAdvancedFilters?: () => void;
+  onOpenSlideOver: (row: WorkOrderTableRow, edit?: boolean) => void;
+  onRequestComplete?: (row: WorkOrderTableRow) => void;
+  onOpenCompDoc?: (row: WorkOrderTableRow) => void;
+  onOpenUplifts?: (row: WorkOrderTableRow) => void;
+  onOpenMedia: (row: WorkOrderTableRow) => void;
+  onPatch: WorkOrderTablePatchFn;
+  onScheduleHighlight: (id: string | number | null) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+};
+
+export function useWoTableRowHandlers({
+  tableData,
+  weekMonday,
+  onNavigateToDay,
+  onOpenAdvancedFilters,
+  onOpenSlideOver,
+  onRequestComplete,
+  onOpenCompDoc,
+  onOpenUplifts,
+  onOpenMedia,
+  onPatch,
+  onScheduleHighlight,
+  onDuplicateFound,
+}: UseWoTableRowHandlersOptions): WoTableRowHandlers {
+  const {
+    dragState: dragStateRef,
+    setDragViz,
+    reorderRows,
+    endDrag,
+    revealScheduledRow,
+  } = tableData;
+
+  return useMemo(
+    () => ({
+      onRowClick: (row: WorkOrderTableRow) => {
+        tableData.setSelectedId(row.id);
+        onOpenSlideOver(row, false);
+      },
+      onView: (row: WorkOrderTableRow) => {
+        tableData.setSelectedId(row.id);
+        onOpenSlideOver(row, false);
+      },
+      onEdit: (row: WorkOrderTableRow) => {
+        tableData.setSelectedId(row.id);
+        onOpenSlideOver(row, true);
+      },
+      onOpenCompDoc: onOpenCompDoc
+        ? (row: WorkOrderTableRow) => {
+            tableData.setSelectedId(row.id);
+            onOpenCompDoc(row);
+          }
+        : undefined,
+      onOpenUplifts: onOpenUplifts
+        ? (row: WorkOrderTableRow) => {
+            tableData.setSelectedId(row.id);
+            onOpenUplifts(row);
+          }
+        : undefined,
+      onOpenMedia: (row: WorkOrderTableRow) => {
+        tableData.setSelectedId(row.id);
+        onOpenMedia(row);
+      },
+      onPatch: (id, patch, options) => {
+        onPatch(id, patch, options);
+      },
+      onScheduleDate: (id: string | number, date: string, dueDate?: string) => {
+        onPatch(id, {
+          ...applySchedulePatch(date, false),
+          ...clearDueDateBeforeSchedule(dueDate, date),
+        });
+        revealOrNotifyScheduledDay({
+          id,
+          date,
+          weekMonday,
+          onNavigateToDay,
+          revealScheduledRow,
+        });
+      },
+      onScheduleRange: (id: string | number, start: string, end: string, dueDate?: string) => {
+        onPatch(id, {
+          ...applyScheduleRangePatch(start, end),
+          ...clearDueDateBeforeSchedule(dueDate, start),
+        });
+        revealOrNotifyScheduledDay({
+          id,
+          date: start,
+          weekMonday,
+          onNavigateToDay,
+          revealScheduledRow,
+        });
+      },
+      onScheduleWeek: (id: string | number, week: string, dueDate?: string) => {
+        const isClear = week === "";
+        onPatch(
+          id,
+          isClear
+            ? applySchedulePatch("", false)
+            : {
+                scheduledOn: "",
+                targetWeek: week,
+                scheduleWeekOnly: true,
+                scheduleEnd: "",
+                schedMode: "week",
+                dayGroup: "",
+                dayLabel: "",
+                ...clearDueDateBeforeSchedule(dueDate, week),
+              },
+        );
+        weekMoveNotify(week, {
+          onNavigate: () => {
+            if (!isClear) {
+              onNavigateToDay(week);
+            }
+            onOpenAdvancedFilters?.();
+          },
+        });
+      },
+      onDuplicateFound: (existing: WorkOrderTableRow) => {
+        onDuplicateFound?.(existing);
+      },
+      onOpenSlideOver: (row: WorkOrderTableRow) => onOpenSlideOver(row, false),
+      onRequestComplete,
+      onPastDueAttempt: (id: string | number) => onScheduleHighlight(id),
+      onReorder: reorderRows,
+      ...createDragHandlers({
+        dragState: dragStateRef,
+        setDragViz,
+        reorderRows,
+        endDrag,
+      }),
+    }),
+    [
+      tableData,
+      dragStateRef,
+      setDragViz,
+      reorderRows,
+      endDrag,
+      revealScheduledRow,
+      weekMonday,
+      onNavigateToDay,
+      onOpenAdvancedFilters,
+      onOpenSlideOver,
+      onRequestComplete,
+      onOpenCompDoc,
+      onOpenUplifts,
+      onOpenMedia,
+      onPatch,
+      onScheduleHighlight,
+      onDuplicateFound,
+    ],
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-day-pagination-footer.tsx b/src/app/(protected)/workorders/_components/list/table/wo-day-pagination-footer.tsx
new file mode 100644
index 00000000..6f5af206
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-day-pagination-footer.tsx
@@ -0,0 +1,83 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { NavArrowButton } from "@/components/ui/nav-arrow-button";
+import { Text } from "@/components/ui/text";
+import {
+  DAY_PAGE_SIZE_OPTIONS,
+  asDayPageSize,
+  formatDayPaginationSummary,
+  type DayPageSize,
+} from "@/domain/work-orders/utils/day-pagination";
+
+type WoDayPaginationFooterProps = {
+  dayLabel: string;
+  itemCount: number;
+  pageSize: DayPageSize;
+  pageIndex: number;
+  pageCount: number;
+  onPageSizeChange: (pageSize: DayPageSize) => void;
+  onPrev: () => void;
+  onNext: () => void;
+  testId?: string;
+};
+
+export function WoDayPaginationFooter({
+  dayLabel,
+  itemCount,
+  pageSize,
+  pageIndex,
+  pageCount,
+  onPageSizeChange,
+  onPrev,
+  onNext,
+  testId = "wo-day-pagination",
+}: WoDayPaginationFooterProps) {
+  const canPrev = pageIndex > 0;
+  const canNext = pageIndex < pageCount - 1;
+  const pageLabel = `Page ${pageIndex + 1} of ${pageCount}`;
+  const summary = formatDayPaginationSummary(dayLabel, itemCount);
+
+  return (
+    <nav
+      className="flex shrink-0 items-center justify-between gap-3"
+      aria-label="Day pagination"
+      data-testid={testId}
+    >
+      <Text variant="caption" tone="muted">
+        {summary}
+      </Text>
+      <div className="flex items-center gap-3">
+        <label className="flex items-center gap-2">
+          <Text variant="caption" tone="muted">
+            Rows per page
+          </Text>
+          <select
+            aria-label="Rows per page"
+            className="rounded-md border border-border bg-card px-2 py-1 text-xs"
+            value={pageSize}
+            onChange={(event) => onPageSizeChange(asDayPageSize(Number(event.target.value)))}
+          >
+            {DAY_PAGE_SIZE_OPTIONS.map((option) => (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            ))}
+          </select>
+        </label>
+        <div className="flex items-center gap-2">
+          <NavArrowButton aria-label="Previous page" disabled={!canPrev} onClick={onPrev}>
+            <ChevronLeft size={15} />
+          </NavArrowButton>
+          <Text variant="caption">{pageLabel}</Text>
+          <NavArrowButton
+            aria-label="Next page"
+            data-testid={`${testId}-next`}
+            disabled={!canNext}
+            onClick={onNext}
+          >
+            <ChevronRight size={15} />
+          </NavArrowButton>
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-body.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-body.tsx
new file mode 100644
index 00000000..0bf98e17
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-body.tsx
@@ -0,0 +1,34 @@
+import { Fragment, type ReactNode } from "react";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { ReturnTypeOfUseWorkOrdersTableData } from "./wo-table-types";
+import { WoTableSectionHeader } from "./wo-table-section-header";
+
+type WoTableBodyProps = {
+  tableData: ReturnTypeOfUseWorkOrdersTableData;
+  renderRow: (row: WorkOrderTableRow, forceScheduleHighlight?: boolean) => ReactNode;
+  renderInlineRow: (dayKey: string) => ReactNode;
+};
+
+export function WoTableBody({ tableData, renderRow, renderInlineRow }: WoTableBodyProps) {
+  if (tableData.advActive) {
+    return <tbody>{tableData.advResults.map((row) => renderRow(row))}</tbody>;
+  }
+
+  return (
+    <tbody>
+      {tableData.displayGroups.map((group) => (
+        <Fragment key={group.key}>
+          <WoTableSectionHeader
+            variant="day"
+            label={group.label}
+            count={group.totalCount ?? group.items.length}
+            isToday={group.key === tableData.todayKey}
+            onAddWo={() => tableData.startDayDraft(group.key, group.date)}
+          />
+          {renderInlineRow(group.key)}
+          {group.items.map((row) => renderRow(row))}
+        </Fragment>
+      ))}
+    </tbody>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-collapsible-section-header.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-collapsible-section-header.tsx
new file mode 100644
index 00000000..654ad5fe
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-collapsible-section-header.tsx
@@ -0,0 +1,119 @@
+import type { LucideIcon } from "lucide-react";
+import { ChevronDown, ChevronRight, Plus } from "lucide-react";
+import { WO_TABLE_COLS } from "./wo-table-cols";
+
+type CollapsibleSectionStyle = {
+  background: string;
+  borderTop: string;
+  borderBottom: string;
+  accentColor: string;
+  boxShadow: string;
+  labelFontFamily: string;
+  labelLetterSpacing: string;
+};
+
+const SECTION_STYLES: Record<"unassigned" | "unscheduled", CollapsibleSectionStyle> = {
+  unassigned: {
+    background: "rgba(99, 102, 241, 0.08)",
+    borderTop: "1px solid #C7D2FE",
+    borderBottom: "1px solid #C7D2FE",
+    accentColor: "var(--primary)",
+    boxShadow: "inset 3px 0 0 var(--primary)",
+    labelFontFamily: "var(--font-mono)",
+    labelLetterSpacing: "0.08em",
+  },
+  unscheduled: {
+    background: "rgba(217, 119, 6, 0.08)",
+    borderTop: "1px solid #FDE68A",
+    borderBottom: "1px solid #FDE68A",
+    accentColor: "var(--warning)",
+    boxShadow: "inset 3px 0 0 var(--warning)",
+    labelFontFamily: "var(--font-mono)",
+    labelLetterSpacing: "0.08em",
+  },
+};
+
+type WoTableCollapsibleSectionHeaderProps = {
+  tone: "unassigned" | "unscheduled";
+  icon: LucideIcon;
+  label: string;
+  count: number;
+  collapsed?: boolean;
+  onToggleCollapse: () => void;
+  onAddWo?: () => void;
+};
+
+export function WoTableCollapsibleSectionHeader({
+  tone,
+  icon: Icon,
+  label,
+  count,
+  collapsed,
+  onToggleCollapse,
+  onAddWo,
+}: WoTableCollapsibleSectionHeaderProps) {
+  const style = SECTION_STYLES[tone];
+
+  return (
+    <tr style={{ background: style.background }}>
+      <td
+        colSpan={WO_TABLE_COLS.length}
+        style={{
+          height: 40,
+          padding: "0 14px",
+          boxShadow: style.boxShadow,
+          borderTop: style.borderTop,
+          borderBottom: style.borderBottom,
+        }}
+      >
+        <div className="flex items-center gap-2.5">
+          <button
+            type="button"
+            className="flex flex-1 items-center gap-2.5"
+            aria-expanded={!collapsed}
+            aria-label={`${label}, ${count} work order${count !== 1 ? "s" : ""}${collapsed ? ", collapsed" : ", expanded"}`}
+            onClick={onToggleCollapse}
+            style={{
+              background: "transparent",
+              border: "none",
+              padding: 0,
+              cursor: "pointer",
+              color: "inherit",
+            }}
+          >
+            <Icon size={14} className="shrink-0" style={{ color: style.accentColor }} />
+            <span
+              className="uppercase"
+              style={{
+                fontFamily: style.labelFontFamily,
+                fontSize: 12,
+                fontWeight: 700,
+                letterSpacing: style.labelLetterSpacing,
+                color: style.accentColor,
+              }}
+            >
+              {label}
+            </span>
+            <span style={{ fontSize: 12, color: "var(--color-text-muted)" }}>
+              {count} work order{count !== 1 ? "s" : ""}
+            </span>
+            <span className="ml-auto flex items-center" style={{ color: style.accentColor }}>
+              {collapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
+            </span>
+          </button>
+          {Boolean(onAddWo) && (
+            <button
+              type="button"
+              className="flex items-center gap-1 transition-opacity hover:opacity-70"
+              style={{ fontSize: 12.5, fontWeight: 600, color: "var(--primary)" }}
+              onClick={onAddWo}
+            >
+              <Plus size={13} />
+              Add WO
+            </button>
+          )}
+        </div>
+      </td>
+    </tr>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-cols.ts b/src/app/(protected)/workorders/_components/list/table/wo-table-cols.ts
new file mode 100644
index 00000000..1051ea00
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-cols.ts
@@ -0,0 +1,22 @@
+export const WO_TABLE_COLS = [
+  { key: "grip", label: "", w: 28 },
+  { key: "flag", label: "", srLabel: "Flag", w: 28 },
+  { key: "site", label: "SITE", w: 168 },
+  { key: "wo", label: "WO", w: 120 },
+  { key: "type", label: "TYPE OF WO", w: 108 },
+  { key: "assigned", label: "ASSIGNED TO", w: 136 },
+  { key: "sched", label: "SCHEDULE ON", w: 112 },
+  { key: "due", label: "DUE DATE", w: 112 },
+  { key: "pm", label: "SERVICE", w: 168 },
+  { key: "vendor", label: "VENDOR", w: 184 },
+  { key: "appt", label: "APPT TIME", w: 128 },
+  { key: "status", label: "STATUS", w: 148 },
+  // Completed Date gates the Completion Document, so it sits between Status and Comp Doc.
+  { key: "completed", label: "COMPLETED DATE", w: 130 },
+  { key: "doc", label: "COMP DOC", w: 84 },
+  { key: "uplift", label: "UPLIFT", w: 108 },
+  { key: "actions", label: "", w: 100 },
+] as const;
+
+export const WO_TABLE_MIN_WIDTH = 1742;
+export const WO_TABLE_ROW_HEIGHT = 52;
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-head.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-head.tsx
new file mode 100644
index 00000000..14a446fd
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-head.tsx
@@ -0,0 +1,37 @@
+import { WO_TABLE_COLS } from "./wo-table-cols";
+import { WoTableHeaderLabel } from "./wo-table-header-label";
+
+export function WoTableHead() {
+  return (
+    <thead className="sticky top-0 z-10">
+      <tr>
+        {WO_TABLE_COLS.map((col) => {
+          const srLabel = "srLabel" in col ? col.srLabel : undefined;
+          return (
+            <th
+              key={col.key}
+              scope="col"
+              style={{
+                width: col.w,
+                minWidth: col.w,
+                padding: "11px 14px",
+                textAlign: "left",
+                fontSize: 10.5,
+                fontWeight: 700,
+                textTransform: "uppercase",
+                letterSpacing: "0.06em",
+                color: "var(--foreground)",
+                whiteSpace: "nowrap",
+                background: "var(--color-bg-muted)",
+                borderBottom: "1px solid var(--border)",
+              }}
+            >
+              <WoTableHeaderLabel colKey={col.key} label={col.label} />
+              {Boolean(srLabel) && <span className="sr-only">{srLabel}</span>}
+            </th>
+          );
+        })}
+      </tr>
+    </thead>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-header-label.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-header-label.tsx
new file mode 100644
index 00000000..1902b463
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-header-label.tsx
@@ -0,0 +1,39 @@
+import { Tooltip } from "@mui/material";
+import { CircleQuestionMark } from "lucide-react";
+
+import { getWoTableHeaderTooltip } from "@/domain/work-orders/constants/wo-table-header-tooltips";
+
+type WoTableHeaderLabelProps = {
+  colKey: string;
+  label: string;
+};
+
+export function WoTableHeaderLabel({ colKey, label }: WoTableHeaderLabelProps) {
+  const tooltip = getWoTableHeaderTooltip(colKey);
+
+  if (!tooltip) {
+    return <>{label}</>;
+  }
+
+  return (
+    <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
+      {label}
+      <Tooltip title={tooltip} arrow placement="top">
+        <button
+          type="button"
+          aria-label={`${label} column help`}
+          style={{
+            display: "inline-flex",
+            cursor: "help",
+            color: "var(--color-text-muted)",
+            padding: 0,
+            border: 0,
+            background: "transparent",
+          }}
+        >
+          <CircleQuestionMark size={13} aria-hidden="true" />
+        </button>
+      </Tooltip>
+    </span>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-identity-cells.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-identity-cells.tsx
new file mode 100644
index 00000000..50915a28
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-identity-cells.tsx
@@ -0,0 +1,104 @@
+import type { RefObject } from "react";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+import type {
+  WorkOrderTableDraft,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { AddOnOverrideToggle } from "./add-on-override-toggle";
+import { EditableWONumberCell } from "./cells/editable-wo-number-cell";
+import { SiteCell } from "./cells/site-cell";
+import { InlineCreateField } from "./inline-create-field";
+
+type WoTableInlineIdentityCellsProps = {
+  draft: WorkOrderTableDraft;
+  sites: LocationOption[];
+  sitePlace?: { city: string; state: string };
+  allRows: { id: string | number; woNumber: string }[];
+  siteCellRef: RefObject<HTMLTableCellElement | null>;
+  woCellRef: RefObject<HTMLTableCellElement | null>;
+  siteShowError: boolean;
+  siteError: string;
+  woShowError: boolean;
+  onPatch: (patch: Partial<WorkOrderTableDraft>) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+};
+
+export function WoTableInlineIdentityCells({
+  draft,
+  sites,
+  sitePlace,
+  allRows,
+  siteCellRef,
+  woCellRef,
+  siteShowError,
+  siteError,
+  woShowError,
+  onPatch,
+  onDuplicateFound,
+}: WoTableInlineIdentityCellsProps) {
+  const isUnscheduled = Boolean(!draft.scheduledOn && !draft.targetWeek);
+
+  return (
+    <>
+      <td
+        ref={siteCellRef}
+        className="group/cell"
+        style={{ padding: "8px 6px 0", verticalAlign: "top" }}
+      >
+        <InlineCreateField showError={siteShowError} error={siteError}>
+          <SiteCell
+            value={draft.site}
+            location={draft.location}
+            locationId={draft.locationId}
+            city={sitePlace?.city}
+            state={sitePlace?.state}
+            pocName={draft.pocName}
+            pocPhone={draft.pocPhone}
+            pocNotes={draft.pocNotes}
+            additionalContacts={draft.additionalContacts}
+            sites={sites}
+            createMode
+            onSave={(p) =>
+              onPatch({
+                site: p.site,
+                location: p.location,
+                locationId: p.locationId,
+                pocName: p.pocName,
+                pocPhone: p.pocPhone,
+                pocNotes: p.pocNotes,
+                ...(p.additionalContacts !== undefined
+                  ? { additionalContacts: p.additionalContacts }
+                  : {}),
+              })
+            }
+          />
+        </InlineCreateField>
+      </td>
+
+      <td
+        ref={woCellRef}
+        style={{ padding: "8px 6px 0", verticalAlign: "top", whiteSpace: "nowrap" }}
+      >
+        <InlineCreateField showError={woShowError} error="Work order number is required">
+          <div className="flex flex-col gap-1">
+            <EditableWONumberCell
+              value={draft.woNumber}
+              rescheduleCount={0}
+              isAddOn={Boolean(draft.isAddOnOverride && isUnscheduled)}
+              currentId="draft"
+              allOrders={allRows as never[]}
+              onSave={(v) => onPatch({ woNumber: v })}
+              onDuplicateFound={onDuplicateFound}
+              requiredPlaceholder="Insert WO #"
+            />
+            <AddOnOverrideToggle
+              checked={draft.isAddOnOverride}
+              visible={isUnscheduled}
+              onChange={(isAddOnOverride) => onPatch({ isAddOnOverride })}
+            />
+          </div>
+        </InlineCreateField>
+      </td>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-actions.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-actions.tsx
new file mode 100644
index 00000000..a1688424
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-actions.tsx
@@ -0,0 +1,63 @@
+import { CircularProgress } from "@mui/material";
+import { Check, X } from "lucide-react";
+
+type WoTableInlineRowActionsProps = {
+  canSave: boolean;
+  saving: boolean;
+  saveHint: string;
+  onSave: () => void;
+  onCancel: () => void;
+};
+
+export function WoTableInlineRowActions({
+  canSave,
+  saving,
+  saveHint,
+  onSave,
+  onCancel,
+}: WoTableInlineRowActionsProps) {
+  return (
+    <div className="flex items-center gap-0.5" style={{ minHeight: 34 }}>
+      <button
+        type="button"
+        onClick={onSave}
+        disabled={saving}
+        title={saveHint}
+        aria-label={saving ? "Saving work order" : "Save work order"}
+        className="rounded p-1 transition-colors disabled:opacity-30"
+        style={{
+          color: "var(--color-primary)",
+          ...(canSave || saving ? {} : { opacity: 0.5, cursor: "not-allowed" }),
+        }}
+        onMouseEnter={(e) => {
+          if (canSave) {
+            (e.currentTarget as HTMLButtonElement).style.background = "var(--color-primary-tint)";
+          }
+        }}
+        onMouseLeave={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.background = "transparent";
+        }}
+      >
+        {saving ? <CircularProgress size={13} color="inherit" /> : <Check size={13} />}
+      </button>
+
+      <button
+        type="button"
+        onClick={onCancel}
+        disabled={saving}
+        title="Cancel"
+        aria-label="Cancel draft"
+        className="rounded p-1 transition-colors disabled:opacity-30"
+        style={{ color: "var(--color-text-muted)" }}
+        onMouseEnter={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.background = "var(--color-bg-muted)";
+        }}
+        onMouseLeave={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.background = "transparent";
+        }}
+      >
+        <X size={13} />
+      </button>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
new file mode 100644
index 00000000..08b55238
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells.tsx
@@ -0,0 +1,281 @@
+import type { ReactNode, RefObject } from "react";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type {
+  WorkOrderTableDraft,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { AssignedToCell } from "./cells/assigned-to-cell";
+import { ApptTimeCell } from "./cells/appt-time-cell";
+import { DateCell } from "./cells/date-cell";
+import { DueDateCell } from "./cells/due-date-cell";
+import { PMTypeCell } from "./cells/pm-type-cell";
+import {
+  CREATION_INLINE_STATUSES,
+  withAutoScheduleStatus,
+} from "@/domain/work-orders/utils/wo-lifecycle-transitions";
+import { StatusCell } from "./cells/status-cell";
+import { TypeCell } from "./cells/type-cell";
+import { VendorCell } from "./cells/vendor-cell";
+import { toVendorTablePatch } from "@/domain/work-orders/utils/vendor-assignment-patch";
+import { InlineCreateField } from "./inline-create-field";
+import { toInlineDraftRow } from "./to-inline-draft-row";
+import { WoTableInlineIdentityCells } from "./wo-table-inline-identity-cells";
+import {
+  clearDueDateBeforeSchedule,
+  resolveDueDateFloor,
+} from "@/domain/work-orders/utils/due-date-floor";
+
+type WoTableInlineRowCellsProps = {
+  draft: WorkOrderTableDraft;
+  weekDefault: boolean;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  sitePlace?: { city: string; state: string };
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allRows: { id: string | number; woNumber: string }[];
+  siteCellRef: RefObject<HTMLTableCellElement | null>;
+  woCellRef: RefObject<HTMLTableCellElement | null>;
+  siteShowError: boolean;
+  siteError: string;
+  woShowError: boolean;
+  onPatch: (patch: Partial<WorkOrderTableDraft>) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+  onRequestComplete?: () => void;
+};
+
+/** Matches the identity cells: top-aligned so field boxes and error helpers line up. */
+const INLINE_FIELD_TD_STYLE = { padding: "8px 6px 0", verticalAlign: "top" } as const;
+
+function InlineFieldCell({ children }: { children: ReactNode }) {
+  return (
+    <td className="group/cell" style={INLINE_FIELD_TD_STYLE}>
+      <InlineCreateField>{children}</InlineCreateField>
+    </td>
+  );
+}
+
+function InlineTypeSeverityCell({
+  draft,
+  onPatch,
+}: {
+  draft: WorkOrderTableDraft;
+  onPatch: (patch: Partial<WorkOrderTableDraft>) => void;
+}) {
+  return (
+    <InlineFieldCell>
+      <TypeCell
+        value={draft.type}
+        severity={draft.severity}
+        onSave={(t, sev) => onPatch({ type: t, severity: sev })}
+      />
+    </InlineFieldCell>
+  );
+}
+
+function InlineMutedDashCell() {
+  return (
+    <td style={INLINE_FIELD_TD_STYLE}>
+      <div className="flex items-center" style={{ minHeight: 34 }}>
+        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>—</span>
+      </div>
+    </td>
+  );
+}
+
+function InlineScheduleOnCell({
+  draft,
+  weekDefault,
+  onPatch,
+}: {
+  draft: WorkOrderTableDraft;
+  weekDefault: boolean;
+  onPatch: (patch: Partial<WorkOrderTableDraft>) => void;
+}) {
+  const hasSchedule =
+    Boolean(draft.scheduledOn) || Boolean(draft.targetWeek) || Boolean(draft.scheduleEnd);
+  return (
+    <InlineFieldCell>
+      <DateCell
+        value={draft.scheduledOn}
+        allowWeekMode
+        targetWeek={draft.targetWeek}
+        defaultMode={weekDefault ? "week" : "date"}
+        scheduleEnd={draft.scheduleEnd}
+        schedMode={draft.schedMode}
+        onSave={(date) =>
+          onPatch(
+            withAutoScheduleStatus(draft, {
+              ...clearDueDateBeforeSchedule(draft.dueDate, date),
+              scheduledOn: date,
+              scheduleWeekOnly: false,
+              targetWeek: "",
+              scheduleEnd: "",
+              schedMode: "date",
+              isAddOnOverride: false,
+            }),
+          )
+        }
+        onSaveWeek={(week) =>
+          onPatch(
+            withAutoScheduleStatus(draft, {
+              ...clearDueDateBeforeSchedule(draft.dueDate, week),
+              scheduledOn: "",
+              targetWeek: week,
+              scheduleWeekOnly: true,
+              scheduleEnd: "",
+              schedMode: "week",
+              isAddOnOverride: false,
+            }),
+          )
+        }
+        onSaveRange={(start, end) =>
+          onPatch(
+            withAutoScheduleStatus(draft, {
+              ...clearDueDateBeforeSchedule(draft.dueDate, start),
+              scheduledOn: start,
+              scheduleEnd: end,
+              schedMode: "range",
+              scheduleWeekOnly: false,
+              targetWeek: "",
+              isAddOnOverride: false,
+            }),
+          )
+        }
+        onClear={
+          hasSchedule
+            ? () =>
+                onPatch(
+                  withAutoScheduleStatus(draft, {
+                    scheduledOn: "",
+                    targetWeek: "",
+                    scheduleWeekOnly: false,
+                    scheduleEnd: "",
+                    schedMode: undefined,
+                    isAddOnOverride: false,
+                  }),
+                )
+            : undefined
+        }
+      />
+    </InlineFieldCell>
+  );
+}
+
+export function WoTableInlineRowCells({
+  draft,
+  weekDefault,
+  users,
+  sites,
+  sitePlace,
+  vendors,
+  pmTypes,
+  allRows,
+  siteCellRef,
+  woCellRef,
+  siteShowError,
+  siteError,
+  woShowError,
+  onPatch,
+  onDuplicateFound,
+  onRequestComplete,
+}: WoTableInlineRowCellsProps) {
+  const draftRow = toInlineDraftRow(draft);
+
+  return (
+    <>
+      <WoTableInlineIdentityCells
+        draft={draft}
+        sites={sites}
+        sitePlace={sitePlace}
+        allRows={allRows}
+        siteCellRef={siteCellRef}
+        woCellRef={woCellRef}
+        siteShowError={siteShowError}
+        siteError={siteError}
+        woShowError={woShowError}
+        onPatch={onPatch}
+        onDuplicateFound={onDuplicateFound}
+      />
+
+      <InlineTypeSeverityCell draft={draft} onPatch={onPatch} />
+
+      <InlineFieldCell>
+        <AssignedToCell
+          dispatcherId={draft.dispatcherId}
+          users={users}
+          onSave={(id) => {
+            onPatch({ dispatcherId: id, status: draft.status || "Incomplete" });
+          }}
+        />
+      </InlineFieldCell>
+      <InlineScheduleOnCell draft={draft} weekDefault={weekDefault} onPatch={onPatch} />
+
+      <InlineFieldCell>
+        <DueDateCell
+          type={draft.type}
+          value={draft.dueDate}
+          minDate={resolveDueDateFloor(draft)}
+          onSave={(date) => onPatch({ dueDate: date })}
+        />
+      </InlineFieldCell>
+      <InlineFieldCell>
+        <PMTypeCell
+          value={draft.pm}
+          pmTypes={pmTypes}
+          serviceNotes={draft.serviceNotes}
+          extraServices={draft.extraServices}
+          avetaRequired={draft.avetaRequired}
+          woNumber={draft.woNumber}
+          onSave={(pm) => onPatch({ pm })}
+          onSaveDetails={(d) =>
+            onPatch({
+              pm: d.pm,
+              extraServices: d.extraServices,
+              serviceNotes: d.serviceNotes,
+              avetaRequired: d.avetaRequired,
+            })
+          }
+        />
+      </InlineFieldCell>
+      <InlineFieldCell>
+        <VendorCell
+          vendorId={draft.vendorId}
+          company={draft.company}
+          tech={draft.tech}
+          techPhone={draft.techPhone}
+          vendors={vendors}
+          onSave={(p) => onPatch(toVendorTablePatch(p))}
+        />
+      </InlineFieldCell>
+      <InlineFieldCell>
+        <ApptTimeCell
+          apptTime={
+            draft.apptStart ? `${draft.apptStart}${draft.apptEnd ? ` – ${draft.apptEnd}` : ""}` : ""
+          }
+          onSave={(v) => {
+            const [start, end] = v.split(" – ");
+            onPatch({ apptStart: start ?? "", apptEnd: end ?? "" });
+          }}
+        />
+      </InlineFieldCell>
+      <InlineFieldCell>
+        <StatusCell
+          wo={draftRow as never}
+          statusOptions={CREATION_INLINE_STATUSES}
+          onChangeStatus={(status) => onPatch({ status })}
+          onOpenSlideOver={() => {}}
+          onRequestComplete={onRequestComplete}
+        />
+      </InlineFieldCell>
+
+      <InlineMutedDashCell />
+      <InlineMutedDashCell />
+      <InlineMutedDashCell />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row.tsx
new file mode 100644
index 00000000..ffce7992
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-inline-row.tsx
@@ -0,0 +1,171 @@
+import { useRef, useState, type RefObject } from "react";
+import { Flag } from "lucide-react";
+import { WorkOrderCompleteDialog } from "@/app/(protected)/workorders/_components/list/work-order-complete-dialog";
+
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type {
+  WorkOrderTableDraft,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import {
+  UNASSIGNED_DAY_KEY,
+  UNSCHEDULED_DAY_KEY,
+} from "@/domain/work-orders/types/work-order-table-row";
+import {
+  draftHasScheduleDate,
+  getInlineCreateMissing,
+  inlineCreateSaveHint,
+  inlineCreateSiteError,
+} from "@/domain/work-orders/utils/get-inline-create-missing";
+import { WO_TABLE_ROW_HEIGHT } from "./wo-table-cols";
+import { WoTableInlineRowCells } from "./wo-table-inline-row-cells";
+import { WoTableInlineRowActions } from "./wo-table-inline-row-actions";
+
+type WoTableInlineRowProps = {
+  draft: WorkOrderTableDraft;
+  draftDayKey: string;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  sitePlace?: { city: string; state: string };
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  allRows: { id: string | number; woNumber: string }[];
+  saving?: boolean;
+  onChange: (draft: WorkOrderTableDraft) => void;
+  onSave: () => void;
+  onCancel: () => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+};
+
+const PRE_SCHEDULE = new Set(["Incomplete", "Pending", ""]);
+
+function withScheduleStatusSync(next: WorkOrderTableDraft): WorkOrderTableDraft {
+  const dated = draftHasScheduleDate(next);
+  if (dated && PRE_SCHEDULE.has(next.status)) {
+    return { ...next, status: "Scheduled" };
+  }
+  if (!dated && next.status === "Scheduled") {
+    return { ...next, status: "Pending" };
+  }
+  return next;
+}
+
+export function WoTableInlineRow({
+  draft,
+  draftDayKey,
+  users,
+  sites,
+  sitePlace,
+  vendors,
+  pmTypes,
+  allRows,
+  saving = false,
+  onChange,
+  onSave,
+  onCancel,
+  onDuplicateFound,
+}: WoTableInlineRowProps) {
+  const weekDefault = draftDayKey === UNSCHEDULED_DAY_KEY || draftDayKey === UNASSIGNED_DAY_KEY;
+  const missing = getInlineCreateMissing(draft);
+  const canSave = !saving && missing.length === 0;
+  const [showErrors, setShowErrors] = useState(false);
+  const [confirmComplete, setConfirmComplete] = useState(false);
+  const siteCellRef = useRef<HTMLTableCellElement>(null);
+  const woCellRef = useRef<HTMLTableCellElement>(null);
+
+  const siteCellMissing = missing.some((f) => f === "site" || f === "pocName" || f === "pocPhone");
+  const siteShowError = showErrors && siteCellMissing;
+  const woShowError = showErrors && missing.includes("woNumber");
+
+  const patch = (p: Partial<WorkOrderTableDraft>) =>
+    onChange(withScheduleStatusSync({ ...draft, ...p }));
+
+  const focusCell = (r: RefObject<HTMLTableCellElement | null>) =>
+    r.current?.querySelector<HTMLElement>("input, button, [tabindex]")?.focus();
+
+  const attemptSave = () => {
+    if (saving) {
+      return;
+    }
+    if (canSave) {
+      onSave();
+      return;
+    }
+    setShowErrors(true);
+    if (siteCellMissing) {
+      focusCell(siteCellRef);
+    } else if (missing.includes("woNumber")) {
+      focusCell(woCellRef);
+    }
+  };
+
+  return (
+    <tr
+      aria-busy={saving || undefined}
+      style={{
+        height: WO_TABLE_ROW_HEIGHT,
+        borderBottom: "1px solid var(--color-border)",
+        borderLeft: "2px solid var(--color-primary)",
+        background: "var(--color-primary-tint)",
+        opacity: saving ? 0.7 : 1,
+        pointerEvents: saving ? "none" : undefined,
+      }}
+    >
+      <td style={{ padding: "8px 0 0 6px", verticalAlign: "top" }} />
+
+      <td style={{ padding: "8px 2px 0 8px", verticalAlign: "top" }}>
+        <div className="flex items-center" style={{ minHeight: 34 }}>
+          <Flag
+            size={14}
+            strokeWidth={1.75}
+            aria-hidden="true"
+            style={{ color: "var(--color-border)" }}
+          />
+        </div>
+      </td>
+
+      <WoTableInlineRowCells
+        draft={draft}
+        weekDefault={weekDefault}
+        users={users}
+        sites={sites}
+        sitePlace={sitePlace}
+        vendors={vendors}
+        pmTypes={pmTypes}
+        allRows={allRows}
+        siteCellRef={siteCellRef}
+        woCellRef={woCellRef}
+        siteShowError={siteShowError}
+        siteError={inlineCreateSiteError(missing)}
+        woShowError={woShowError}
+        onPatch={patch}
+        onDuplicateFound={onDuplicateFound}
+        onRequestComplete={() => setConfirmComplete(true)}
+      />
+
+      <td style={{ padding: "8px 4px 0", verticalAlign: "top" }}>
+        <WoTableInlineRowActions
+          canSave={canSave}
+          saving={saving}
+          saveHint={saving ? "Saving…" : inlineCreateSaveHint(missing)}
+          onSave={attemptSave}
+          onCancel={onCancel}
+        />
+        <WorkOrderCompleteDialog
+          open={confirmComplete}
+          isPending={false}
+          onDialogClose={() => setConfirmComplete(false)}
+          onKeepOpen={() => setConfirmComplete(false)}
+          onConfirm={() => {
+            patch({ status: "Completed" });
+            setConfirmComplete(false);
+          }}
+        />
+      </td>
+    </tr>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-row-actions.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-row-actions.tsx
new file mode 100644
index 00000000..9fa10db1
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-row-actions.tsx
@@ -0,0 +1,67 @@
+import { Eye, Pencil } from "lucide-react";
+
+type WoTableRowActionsProps = {
+  onView: () => void;
+
+  onEdit?: () => void;
+};
+
+export function WoTableRowActions({ onView, onEdit }: WoTableRowActionsProps) {
+  const mk = (
+    Icon: React.ElementType,
+
+    title: string,
+
+    onClick: () => void,
+
+    hoverBg: string,
+
+    hoverColor: string,
+  ) => (
+    <button
+      type="button"
+      title={title}
+      onClick={(e) => {
+        e.stopPropagation();
+
+        onClick();
+      }}
+      className="flex items-center justify-center transition-colors"
+      style={{
+        width: 28,
+
+        height: 28,
+
+        borderRadius: 6,
+
+        color: "var(--muted-foreground)",
+
+        background: "transparent",
+      }}
+      onMouseEnter={(e) => {
+        const b = e.currentTarget as HTMLButtonElement;
+
+        b.style.background = hoverBg;
+
+        b.style.color = hoverColor;
+      }}
+      onMouseLeave={(e) => {
+        const b = e.currentTarget as HTMLButtonElement;
+
+        b.style.background = "transparent";
+
+        b.style.color = "var(--muted-foreground)";
+      }}
+    >
+      <Icon size={15} />
+    </button>
+  );
+
+  return (
+    <div className="flex items-center justify-end gap-1 opacity-0 transition-opacity group-hover/row:opacity-100">
+      {mk(Eye, "View details", onView, "#e6f4fb", "var(--primary)")}
+
+      {onEdit != null && mk(Pencil, "Edit", onEdit, "#e6f4fb", "var(--primary)")}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-row-cells.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-row-cells.tsx
new file mode 100644
index 00000000..1cd88e6b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-row-cells.tsx
@@ -0,0 +1,173 @@
+import type { CSSProperties } from "react";
+import type { LocationOption, WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { applyAssignedToTableSave } from "@/domain/work-orders/utils/work-order-feedback-toasts";
+import { isWorkOrderCompletionSurfaceReadOnly } from "@/domain/work-orders/utils/work-order-lock";
+import {
+  effectiveAdditionalContacts,
+  effectivePoc,
+  effectiveSite,
+} from "@/domain/work-orders/utils/effective-completion-snapshot";
+import { saveExistingRowType } from "./save-existing-row-type";
+import { AssignedToCell } from "./cells/assigned-to-cell";
+import { DateCell } from "./cells/date-cell";
+import { DueDateCell } from "./cells/due-date-cell";
+import { EditableWONumberCell } from "./cells/editable-wo-number-cell";
+import { SiteCell } from "./cells/site-cell";
+import { TypeCell } from "./cells/type-cell";
+import type { WoTableRowHandlers } from "./wo-table-row";
+import { resolveDueDateFloor } from "@/domain/work-orders/utils/due-date-floor";
+
+type WoTableRowCellsProps = {
+  row: WorkOrderTableRow;
+  allRows: WorkOrderTableRow[];
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  sitePlace?: { city: string; state: string };
+  search?: string;
+  forceScheduleHighlight?: boolean;
+  forceDueDateHighlight?: boolean;
+  mutationCellStyle?: CSSProperties;
+  viewOnly?: boolean;
+  canceledLockStyle?: CSSProperties;
+  handlers: WoTableRowHandlers;
+  onPatchRow: (patch: Partial<WorkOrderTableRow>) => void;
+};
+
+export function WoTableRowCells({
+  row,
+  allRows,
+  users,
+  sites,
+  sitePlace,
+  search,
+  forceScheduleHighlight,
+  forceDueDateHighlight,
+  mutationCellStyle,
+  viewOnly = false,
+  canceledLockStyle,
+  handlers,
+  onPatchRow,
+}: WoTableRowCellsProps) {
+  const hasSchedule =
+    Boolean(row.scheduledOn) || Boolean(row.targetWeek) || Boolean(row.scheduleEnd);
+  const frozenSite = effectiveSite(row);
+  const poc = effectivePoc(row);
+  const primaryPoc = poc.contacts[0];
+
+  return (
+    <>
+      <td
+        className="group/cell"
+        style={{ padding: "0 14px", ...canceledLockStyle }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <SiteCell
+          value={frozenSite?.code ?? row.site}
+          location={frozenSite?.label ?? row.location}
+          locationId={row.locationId}
+          city={sitePlace?.city}
+          state={sitePlace?.state}
+          pocName={primaryPoc?.name ?? ""}
+          pocPhone={primaryPoc?.phone ?? ""}
+          pocNotes={poc.notes ?? ""}
+          additionalContacts={effectiveAdditionalContacts(row)}
+          sites={sites}
+          q={search}
+          viewOnly={viewOnly}
+          frozenSite={frozenSite}
+          onSave={(p) =>
+            onPatchRow({
+              site: p.site,
+              location: p.location,
+              locationId: p.locationId,
+              pocName: p.pocName,
+              pocPhone: p.pocPhone,
+              pocNotes: p.pocNotes,
+              ...(p.additionalContacts !== undefined
+                ? { additionalContacts: p.additionalContacts }
+                : {}),
+            })
+          }
+        />
+      </td>
+      <td style={{ padding: "0 14px", whiteSpace: "nowrap", ...mutationCellStyle }}>
+        <EditableWONumberCell
+          value={row.woNumber}
+          rescheduleCount={row.rescheduleCount}
+          carriedOver={row.carriedOver}
+          isAddOn={row.isAddOn}
+          originalDate={row.originalDate}
+          originalWeek={row.originalWeek}
+          scheduledOn={row.scheduledOn}
+          status={row.status}
+          q={search}
+          currentId={row.id}
+          allOrders={allRows}
+          locked={viewOnly}
+          onSave={(v) => onPatchRow({ woNumber: v })}
+          onDuplicateFound={handlers.onDuplicateFound}
+        />
+      </td>
+      <td
+        className="group/cell"
+        style={{ padding: "0 14px", ...mutationCellStyle }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <TypeCell
+          value={row.type}
+          severity={row.severity}
+          q={search}
+          viewOnly={isWorkOrderCompletionSurfaceReadOnly(row.status)}
+          onSave={(t, sev) => saveExistingRowType(handlers.onPatch, row, t, sev)}
+        />
+      </td>
+      <td
+        className="group/cell"
+        style={{ padding: "0 14px", ...mutationCellStyle }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <AssignedToCell
+          dispatcherId={row.dispatcherId}
+          users={users}
+          highlight={!row.dispatcherId}
+          onSave={(id, name) => applyAssignedToTableSave(handlers.onPatch, row.id, id, name)}
+        />
+      </td>
+      <td
+        className="group/cell"
+        style={{ padding: "0 14px", ...mutationCellStyle }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <DateCell
+          value={row.scheduledOn}
+          q={search}
+          highlight={forceScheduleHighlight}
+          allowWeekMode
+          targetWeek={row.targetWeek}
+          scheduleEnd={row.scheduleEnd}
+          schedMode={row.schedMode}
+          onSave={(date) => handlers.onScheduleDate(row.id, date, row.dueDate)}
+          onSaveWeek={(week) => handlers.onScheduleWeek(row.id, week, row.dueDate)}
+          onSaveRange={(start, end) => handlers.onScheduleRange(row.id, start, end, row.dueDate)}
+          onClear={hasSchedule && !viewOnly ? () => handlers.onScheduleWeek(row.id, "") : undefined}
+        />
+      </td>
+      <td
+        className="group/cell"
+        style={{ padding: "0 14px", ...mutationCellStyle }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <DueDateCell
+          type={row.type}
+          value={row.dueDate}
+          q={search}
+          highlight={forceDueDateHighlight || row.isPastDue}
+          pastDue={row.isPastDue}
+          minDate={resolveDueDateFloor(row)}
+          onSave={(date) => onPatchRow({ dueDate: date })}
+        />
+      </td>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-row-reorder-handle.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-row-reorder-handle.tsx
new file mode 100644
index 00000000..cfd2dcf5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-row-reorder-handle.tsx
@@ -0,0 +1,40 @@
+import { GripVertical } from "lucide-react";
+
+type WoTableRowReorderHandleProps = {
+  disabled: boolean;
+  isDragging: boolean;
+  woNumber: string;
+  onArrowReorder: (delta: -1 | 1) => void;
+};
+
+export function WoTableRowReorderHandle({
+  disabled,
+  isDragging,
+  woNumber,
+  onArrowReorder,
+}: WoTableRowReorderHandleProps) {
+  return (
+    <span
+      role="button"
+      aria-disabled={disabled}
+      tabIndex={disabled ? -1 : 0}
+      aria-label={woNumber ? `Reorder work order ${woNumber}` : "Reorder work order"}
+      className="flex items-center justify-center"
+      style={{
+        cursor: isDragging ? "grabbing" : "grab",
+        color: "var(--color-text-muted)",
+      }}
+      onClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => {
+        if (disabled || (event.key !== "ArrowUp" && event.key !== "ArrowDown")) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        onArrowReorder(event.key === "ArrowUp" ? -1 : 1);
+      }}
+    >
+      <GripVertical size={14} aria-hidden />
+    </span>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells.tsx
new file mode 100644
index 00000000..ad995968
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells.tsx
@@ -0,0 +1,142 @@
+import type { CSSProperties } from "react";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { ApptTimeCell } from "./cells/appt-time-cell";
+import { CompDocCell } from "./cells/comp-doc-cell";
+import { DateCell } from "./cells/date-cell";
+import { PMTypeCell } from "./cells/pm-type-cell";
+import { StatusCell } from "./cells/status-cell";
+import { UpliftCell } from "./cells/uplift-cell";
+import { VendorCell } from "./cells/vendor-cell";
+import { EMPTY_UPLIFT_SUMMARY } from "@/domain/work-orders/types/work-order-uplift";
+import { canOpenUpliftsDialog } from "@/domain/work-orders/utils/uplift-display-utils";
+import { applyVendorTableSave } from "@/domain/work-orders/utils/work-order-feedback-toasts";
+import { effectiveCompany } from "@/domain/work-orders/utils/effective-completion-snapshot";
+import type { WoTableRowHandlers } from "./wo-table-row";
+
+type WoTableRowServiceCellsProps = {
+  row: WorkOrderTableRow;
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  search?: string;
+  mutationCellStyle?: CSSProperties;
+  viewOnly?: boolean;
+  canceledLockStyle?: CSSProperties;
+  handlers: WoTableRowHandlers;
+  onPatchRow: (patch: Partial<WorkOrderTableRow>) => void;
+};
+
+export function WoTableRowServiceCells({
+  row,
+  vendors,
+  pmTypes,
+  search,
+  mutationCellStyle,
+  viewOnly = false,
+  canceledLockStyle,
+  handlers,
+  onPatchRow,
+}: WoTableRowServiceCellsProps) {
+  const company = effectiveCompany(row);
+
+  return (
+    <>
+      <td
+        className="group/cell"
+        style={{ padding: "0 14px", ...canceledLockStyle }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <PMTypeCell
+          value={row.pm}
+          pmTypes={pmTypes}
+          q={search}
+          serviceNotes={row.serviceNotes}
+          extraServices={row.extraServices}
+          avetaRequired={row.avetaRequired}
+          avetaAttached={row.hasAvetaDocument}
+          woNumber={row.woNumber}
+          viewOnly={viewOnly}
+          onSave={(pm) => onPatchRow({ pm })}
+          onSaveDetails={(d) =>
+            onPatchRow({
+              pm: d.pm,
+              extraServices: d.extraServices,
+              serviceNotes: d.serviceNotes,
+              avetaRequired: d.avetaRequired,
+            })
+          }
+        />
+      </td>
+      <td
+        className="group/cell"
+        style={{ padding: "0 14px", ...canceledLockStyle }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <VendorCell
+          vendorId={row.vendorId}
+          company={company.name ?? row.company}
+          tech={company.contactName ?? row.tech}
+          techPhone={company.phone ?? row.techPhone}
+          vendors={vendors}
+          q={search}
+          viewOnly={viewOnly}
+          frozenCompany={row.status === "Completed" ? row.frozenCompany : undefined}
+          onSave={(p) => applyVendorTableSave(handlers.onPatch, row.id, p)}
+        />
+      </td>
+      <td
+        className="group/cell"
+        style={{ padding: "0 14px", ...mutationCellStyle }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <ApptTimeCell apptTime={row.apptTime} onSave={(v) => onPatchRow({ apptTime: v })} />
+      </td>
+      <td
+        className="group/cell"
+        style={{ padding: "0 14px", ...mutationCellStyle }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <StatusCell
+          wo={row}
+          readOnly={viewOnly}
+          onChangeStatus={(status) => onPatchRow({ status })}
+          onOpenSlideOver={() => handlers.onOpenSlideOver(row)}
+          onPastDueAttempt={() => handlers.onPastDueAttempt?.(row.id)}
+          onRequestComplete={() => handlers.onRequestComplete?.(row)}
+        />
+      </td>
+      <td
+        className="group/cell"
+        style={{ padding: "0 14px", ...mutationCellStyle }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <DateCell
+          value={row.completedDate}
+          q={search}
+          onSave={(date) => onPatchRow({ completedDate: date })}
+        />
+      </td>
+      <td style={{ padding: "0 14px" }} onClick={(e) => e.stopPropagation()}>
+        <CompDocCell
+          status={row.docStatus}
+          woType={row.type}
+          pm={row.pm}
+          mediaCount={row.mediaCount}
+          onOpen={handlers.onOpenCompDoc ? () => handlers.onOpenCompDoc!(row) : undefined}
+          onOpenMedia={() => handlers.onOpenMedia(row)}
+        />
+      </td>
+      <td style={{ padding: "0 14px" }} onClick={(e) => e.stopPropagation()}>
+        <UpliftCell
+          summary={row.upliftSummary ?? EMPTY_UPLIFT_SUMMARY}
+          onOpen={
+            canOpenUpliftsDialog(row.upliftSummary ?? EMPTY_UPLIFT_SUMMARY, row.status) &&
+            handlers.onOpenUplifts
+              ? () => handlers.onOpenUplifts!(row)
+              : undefined
+          }
+        />
+      </td>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-row-style.ts b/src/app/(protected)/workorders/_components/list/table/wo-table-row-style.ts
new file mode 100644
index 00000000..4e2be089
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-row-style.ts
@@ -0,0 +1,43 @@
+import type { CSSProperties } from "react";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { WO_TABLE_ROW_HEIGHT } from "./wo-table-cols";
+
+export const MUTATION_CELL_STYLE: CSSProperties = { pointerEvents: "none" };
+
+export function resolveFirstCellShadow(row: WorkOrderTableRow): string {
+  if (row.type === "Emergency") {
+    return "inset 3px 0 0 var(--destructive)";
+  }
+  if (row.isPastDue) {
+    return "inset 3px 0 0 var(--warning)";
+  }
+  return "none";
+}
+
+type WoTableRowStyleInput = {
+  isDragging: boolean;
+  isDropTarget: boolean;
+  isFlashing: boolean;
+  isSelected: boolean;
+  isCanceled: boolean;
+};
+
+export function resolveWoTableRowStyle({
+  isDragging,
+  isDropTarget,
+  isFlashing,
+  isSelected,
+  isCanceled,
+}: WoTableRowStyleInput): CSSProperties {
+  return {
+    height: WO_TABLE_ROW_HEIGHT,
+    borderBottom: "1px solid var(--border)",
+    borderTop: isDropTarget ? "2px solid var(--color-primary)" : undefined,
+    opacity: isCanceled ? 0.45 : isDragging ? 0.4 : 1,
+    background: isFlashing || isSelected ? "var(--color-primary-tint)" : "var(--card)",
+    outline: isFlashing ? "2px solid var(--color-primary)" : "none",
+    outlineOffset: isFlashing ? "-2px" : undefined,
+    borderRadius: isFlashing ? 4 : undefined,
+    transition: "background 1.8s ease-out, outline 1.8s ease-out",
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-row.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-row.tsx
new file mode 100644
index 00000000..8a7814ec
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-row.tsx
@@ -0,0 +1,229 @@
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WorkOrderTablePatchOptions } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+import type { DragVizState } from "@/app/(protected)/workorders/_hooks/use-work-orders-table-data";
+import { neighborIdForReorder } from "@/domain/work-orders/utils/board-row-order-storage";
+import {
+  canApplyWorkOrderTablePatch,
+  canMutateWorkOrderFlag,
+  isWorkOrderCoreLocked,
+  isWorkOrderFullyLocked,
+} from "@/domain/work-orders/utils/work-order-lock";
+import { FlagCell } from "./cells/flag-cell";
+import { WoTableRowActions } from "./wo-table-row-actions";
+import { WoTableRowCells } from "./wo-table-row-cells";
+import { WoTableRowReorderHandle } from "./wo-table-row-reorder-handle";
+import { WoTableRowServiceCells } from "./wo-table-row-service-cells";
+import {
+  MUTATION_CELL_STYLE,
+  resolveFirstCellShadow,
+  resolveWoTableRowStyle,
+} from "./wo-table-row-style";
+
+export type WoTableRowHandlers = {
+  onRowClick: (row: WorkOrderTableRow) => void;
+  onView: (row: WorkOrderTableRow) => void;
+  onEdit: (row: WorkOrderTableRow) => void;
+  onOpenCompDoc?: (row: WorkOrderTableRow) => void;
+  onOpenUplifts?: (row: WorkOrderTableRow) => void;
+  onOpenMedia: (row: WorkOrderTableRow) => void;
+  onPatch: (
+    id: string | number,
+    patch: Partial<WorkOrderTableRow>,
+    options?: WorkOrderTablePatchOptions,
+  ) => void;
+  /** `dueDate` is the row's current Due Date, cleared when the new schedule passes it (SH-356). */
+  onScheduleDate: (id: string | number, date: string, dueDate?: string) => void;
+  onScheduleWeek: (id: string | number, week: string, dueDate?: string) => void;
+  onScheduleRange: (id: string | number, start: string, end: string, dueDate?: string) => void;
+  onDuplicateFound?: (existing: WorkOrderTableRow) => void;
+  onOpenSlideOver: (row: WorkOrderTableRow) => void;
+  onRequestComplete?: (row: WorkOrderTableRow) => void;
+  onPastDueAttempt?: (id: string | number) => void;
+  onReorder: (dragId: string | number, overId: string | number) => void;
+  onDragStart: (id: string | number) => void;
+  onDragOver: (id: string | number) => void;
+  onDrop: () => void;
+  onDragEnd: () => void;
+};
+
+type WoTableRowProps = {
+  row: WorkOrderTableRow;
+  allRows: WorkOrderTableRow[];
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  sitePlace?: { city: string; state: string };
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  search?: string;
+  forceScheduleHighlight?: boolean;
+  forceDueDateHighlight?: boolean;
+  isSelected: boolean;
+  isFlashing: boolean;
+  dragViz: DragVizState;
+  handlers: WoTableRowHandlers;
+};
+
+function guardScheduleHandlers(
+  row: WorkOrderTableRow,
+  handlers: WoTableRowHandlers,
+): WoTableRowHandlers {
+  return {
+    ...handlers,
+    onPatch: (id, patch, options) => {
+      if (!canApplyWorkOrderTablePatch(row.status, patch)) return;
+      handlers.onPatch(id, patch, options);
+    },
+    onScheduleDate: (id, date, dueDate) => {
+      if (!canApplyWorkOrderTablePatch(row.status, { scheduledOn: date })) return;
+      handlers.onScheduleDate(id, date, dueDate);
+    },
+    onScheduleWeek: (id, week, dueDate) => {
+      if (!canApplyWorkOrderTablePatch(row.status, { targetWeek: week })) return;
+      handlers.onScheduleWeek(id, week, dueDate);
+    },
+    onScheduleRange: (id, start, end, dueDate) => {
+      if (!canApplyWorkOrderTablePatch(row.status, { scheduledOn: start })) return;
+      handlers.onScheduleRange(id, start, end, dueDate);
+    },
+  };
+}
+
+export function WoTableRow({
+  row,
+  allRows,
+  users,
+  sites,
+  sitePlace,
+  vendors,
+  pmTypes,
+  search,
+  forceScheduleHighlight,
+  forceDueDateHighlight,
+  isSelected,
+  isFlashing,
+  dragViz,
+  handlers,
+}: WoTableRowProps) {
+  const isDragging = dragViz.dragId === row.id;
+  const isDropTarget = dragViz.overId === row.id && dragViz.dragId !== row.id;
+  const isCanceled = isWorkOrderFullyLocked(row.status);
+  const isCoreLocked = isWorkOrderCoreLocked(row.status);
+  const closedForEdit = isCanceled || isCoreLocked;
+
+  const guardedHandlers = guardScheduleHandlers(row, handlers);
+
+  const patchRow = (patch: Partial<WorkOrderTableRow>) => {
+    if (!canApplyWorkOrderTablePatch(row.status, patch)) return;
+    handlers.onPatch(row.id, patch);
+  };
+
+  const coreLockStyle = closedForEdit ? MUTATION_CELL_STYLE : undefined;
+  const canceledLockStyle = isCanceled ? MUTATION_CELL_STYLE : undefined;
+
+  return (
+    <tr
+      id={`wo-row-${row.id}`}
+      draggable={!isCanceled}
+      title={isCanceled ? "This work order has been cancelled" : undefined}
+      onClick={() => handlers.onRowClick(row)}
+      onDragStart={() => {
+        if (isCanceled) return;
+        handlers.onDragStart(row.id);
+      }}
+      onDragOver={(e) => {
+        if (isCanceled) return;
+        e.preventDefault();
+        handlers.onDragOver(row.id);
+      }}
+      onDrop={(e) => {
+        if (isCanceled) return;
+        e.preventDefault();
+        handlers.onDrop();
+      }}
+      onDragEnd={handlers.onDragEnd}
+      className="group/row cursor-pointer transition-colors"
+      style={resolveWoTableRowStyle({
+        isDragging,
+        isDropTarget,
+        isFlashing,
+        isSelected,
+        isCanceled,
+      })}
+      onMouseEnter={(e) => {
+        if (!isSelected && !isFlashing) {
+          (e.currentTarget as HTMLTableRowElement).style.background = "var(--color-primary-tint)";
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!isSelected && !isFlashing) {
+          (e.currentTarget as HTMLTableRowElement).style.background = "var(--card)";
+        }
+      }}
+    >
+      <td
+        style={{ padding: "0 0 0 6px", boxShadow: resolveFirstCellShadow(row) }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <WoTableRowReorderHandle
+          disabled={isCanceled}
+          isDragging={isDragging}
+          woNumber={row.woNumber}
+          onArrowReorder={(delta) => {
+            const overId = neighborIdForReorder(
+              allRows,
+              row,
+              delta,
+              (item) => !isWorkOrderFullyLocked(item.status),
+            );
+            if (overId == null) return;
+            handlers.onReorder(row.id, overId);
+          }}
+        />
+      </td>
+      <td style={{ padding: "0 2px 0 8px" }} onClick={(e) => e.stopPropagation()}>
+        <FlagCell
+          color={row.flagColor}
+          disabled={!canMutateWorkOrderFlag(row.status)}
+          onChange={(c) => guardedHandlers.onPatch(row.id, { flagColor: c })}
+        />
+      </td>
+      <WoTableRowCells
+        row={row}
+        allRows={allRows}
+        users={users}
+        sites={sites}
+        sitePlace={sitePlace}
+        search={search}
+        forceScheduleHighlight={forceScheduleHighlight}
+        forceDueDateHighlight={forceDueDateHighlight}
+        mutationCellStyle={coreLockStyle}
+        viewOnly={closedForEdit}
+        canceledLockStyle={canceledLockStyle}
+        handlers={guardedHandlers}
+        onPatchRow={patchRow}
+      />
+      <WoTableRowServiceCells
+        row={row}
+        vendors={vendors}
+        pmTypes={pmTypes}
+        search={search}
+        mutationCellStyle={coreLockStyle}
+        viewOnly={closedForEdit}
+        canceledLockStyle={canceledLockStyle}
+        handlers={guardedHandlers}
+        onPatchRow={patchRow}
+      />
+      <td style={{ padding: "0 8px" }} onClick={(e) => e.stopPropagation()}>
+        <WoTableRowActions
+          onView={() => handlers.onView(row)}
+          onEdit={closedForEdit ? undefined : () => handlers.onEdit(row)}
+        />
+      </td>
+    </tr>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-section-header.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-section-header.tsx
new file mode 100644
index 00000000..a730c7f5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-section-header.tsx
@@ -0,0 +1,116 @@
+import { AlertTriangle, Plus, Users } from "lucide-react";
+import { WO_TABLE_COLS } from "./wo-table-cols";
+import { WoTableCollapsibleSectionHeader } from "./wo-table-collapsible-section-header";
+
+type WoTableSectionHeaderProps = {
+  variant: "unassigned" | "unscheduled" | "day";
+  label: string;
+  count: number;
+  isToday?: boolean;
+  collapsed?: boolean;
+  onToggleCollapse?: () => void;
+  onAddWo?: () => void;
+};
+
+export function WoTableSectionHeader({
+  variant,
+  label,
+  count,
+  isToday,
+  collapsed,
+  onToggleCollapse,
+  onAddWo,
+}: WoTableSectionHeaderProps) {
+  if (variant === "unassigned") {
+    return (
+      <WoTableCollapsibleSectionHeader
+        tone="unassigned"
+        icon={Users}
+        label={label}
+        count={count}
+        collapsed={collapsed}
+        onToggleCollapse={() => onToggleCollapse?.()}
+      />
+    );
+  }
+
+  if (variant === "unscheduled") {
+    return (
+      <WoTableCollapsibleSectionHeader
+        tone="unscheduled"
+        icon={AlertTriangle}
+        label={label}
+        count={count}
+        collapsed={collapsed}
+        onToggleCollapse={() => onToggleCollapse?.()}
+        onAddWo={onAddWo}
+      />
+    );
+  }
+
+  return (
+    <tr style={{ background: "#eef1f6" }}>
+      <td
+        colSpan={WO_TABLE_COLS.length}
+        style={{
+          height: 40,
+          padding: "0 14px",
+          borderTop: "1px solid var(--border)",
+          borderBottom: "1px solid var(--border)",
+        }}
+      >
+        <div className="flex items-center gap-2.5">
+          <span
+            className="uppercase"
+            style={{
+              fontFamily: "var(--font-sans)",
+              fontSize: 12.5,
+              fontWeight: 500,
+              letterSpacing: "0.02em",
+              color: "var(--muted-foreground)",
+            }}
+          >
+            {label}
+          </span>
+          <span
+            style={{
+              fontSize: 11,
+              fontWeight: 500,
+              color: "var(--muted-foreground)",
+            }}
+          >
+            {count} WO{count !== 1 ? "s" : ""}
+          </span>
+          {Boolean(isToday) && (
+            <span
+              className="uppercase"
+              style={{
+                fontFamily: "var(--font-mono)",
+                fontSize: 9,
+                fontWeight: 700,
+                color: "#ffffff",
+                background: "var(--success)",
+                borderRadius: 9999,
+                padding: "1px 5px",
+                letterSpacing: "0.04em",
+              }}
+            >
+              Today
+            </span>
+          )}
+          {Boolean(onAddWo) && (
+            <button
+              type="button"
+              className="flex items-center gap-1 transition-opacity hover:opacity-70"
+              style={{ fontSize: 12.5, fontWeight: 600, color: "var(--primary)" }}
+              onClick={onAddWo}
+            >
+              <Plus size={13} />
+              Add WO
+            </button>
+          )}
+        </div>
+      </td>
+    </tr>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-shell.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table-shell.tsx
new file mode 100644
index 00000000..8282e06a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-shell.tsx
@@ -0,0 +1,58 @@
+import { SearchX } from "lucide-react";
+import { Text } from "@/components/ui/text";
+
+const CARD_STYLE: React.CSSProperties = {
+  background: "var(--card)",
+  border: "1px solid var(--border)",
+  borderRadius: 8,
+  boxShadow: "0 1px 3px rgba(38,34,98,.05)",
+};
+
+export function WoTableShell({
+  children,
+  footer,
+}: {
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden px-2 py-4">
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden" style={CARD_STYLE}>
+        <div className="min-h-0 flex-1 overflow-auto">{children}</div>
+        {Boolean(footer) && (
+          <div className="relative z-10 shrink-0 border-t border-border px-3 py-2">{footer}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+type WoTableEmptyStateProps = {
+  message: string;
+  actionLabel: string;
+  onAction?: () => void;
+};
+
+export function WoTableEmptyState({ message, actionLabel, onAction }: WoTableEmptyStateProps) {
+  return (
+    <div
+      className="flex h-full flex-col items-center justify-center text-center"
+      style={{ gap: 14, padding: 48 }}
+    >
+      <SearchX size={34} style={{ color: "var(--color-text-muted)" }} />
+      <Text as="p" style={{ fontSize: 14, color: "var(--muted-foreground)" }}>
+        {message}
+      </Text>
+      {Boolean(onAction) && (
+        <button
+          type="button"
+          onClick={onAction}
+          className="transition-opacity hover:opacity-80"
+          style={{ fontSize: 13, fontWeight: 500, color: "var(--color-accent)" }}
+        >
+          {actionLabel}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-status-style.ts b/src/app/(protected)/workorders/_components/list/table/wo-table-status-style.ts
new file mode 100644
index 00000000..f23d8fbd
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-status-style.ts
@@ -0,0 +1,23 @@
+import type { StatusVariant } from "@/components/domain/status-badge";
+import { resolveStatusVariant } from "@/components/domain/status-badge-utils";
+
+export type WoTableStatusStyle = { text: string; dot: string };
+
+const STATUS_TABLE_STYLE: Record<StatusVariant, WoTableStatusStyle> = {
+  incomplete: { text: "var(--status-incomplete-text)", dot: "#9CA3AF" },
+  pending: { text: "var(--status-pending-text)", dot: "#D97706" },
+  scheduled: { text: "var(--status-scheduled-text)", dot: "#3B82F6" },
+  inroute: { text: "var(--status-inroute-text)", dot: "#0EA5E9" },
+  onsite: { text: "var(--status-onsite-text)", dot: "#10B981" },
+  inprogress: { text: "var(--status-inprogress-text)", dot: "#2563EB" },
+  completed: { text: "var(--status-completed-text)", dot: "#16A34A" },
+  rescheduled: { text: "var(--status-rescheduled-text)", dot: "#F59E0B" },
+  canceled: { text: "var(--status-canceled-text)", dot: "#9CA3AF" },
+  pendingquote: { text: "var(--status-pendingquote-text)", dot: "#9333EA" },
+  pastdue: { text: "var(--status-pastdue-text)", dot: "#BE123C" },
+};
+
+export function getWoTableStatusStyle(status: string): WoTableStatusStyle {
+  const variant = resolveStatusVariant(status) ?? "incomplete";
+  return STATUS_TABLE_STYLE[variant];
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-type-style.ts b/src/app/(protected)/workorders/_components/list/table/wo-table-type-style.ts
new file mode 100644
index 00000000..d64eab65
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-type-style.ts
@@ -0,0 +1,13 @@
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+export const WO_TABLE_TYPE_TEXT: Record<WOType, string> = {
+  Emergency: "var(--destructive)",
+  Reactive: "#e0701a",
+  PM: "var(--primary)",
+  Overdue: "#9F1239",
+};
+
+export function getWoTableTypeColor(type: WOType | ""): string {
+  if (!type) return "var(--color-text-muted)";
+  return WO_TABLE_TYPE_TEXT[type];
+}
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table-types.ts b/src/app/(protected)/workorders/_components/list/table/wo-table-types.ts
new file mode 100644
index 00000000..2bdf0152
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table-types.ts
@@ -0,0 +1,3 @@
+import type { useWorkOrdersTableData } from "@/app/(protected)/workorders/_hooks/use-work-orders-table-data";
+
+export type ReturnTypeOfUseWorkOrdersTableData = ReturnType<typeof useWorkOrdersTableData>;
diff --git a/src/app/(protected)/workorders/_components/list/table/wo-table.tsx b/src/app/(protected)/workorders/_components/list/table/wo-table.tsx
new file mode 100644
index 00000000..3fb69fba
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/table/wo-table.tsx
@@ -0,0 +1,238 @@
+import { useMemo, useState } from "react";
+import { useLocationSites } from "@/domain/locations/use-cases/use-location-sites";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTablePatchFn } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { effectiveSitePlace } from "@/domain/work-orders/utils/effective-completion-snapshot";
+import { DuplicateWoNumberDialog } from "@/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog";
+import { WoTableSkeleton } from "@/app/(protected)/workorders/_components/loading/wo-table-skeleton";
+import { WoDayPaginationFooter } from "./wo-day-pagination-footer";
+import type { ReturnTypeOfUseWorkOrdersTableData } from "./wo-table-types";
+import { buildSitePlaceLookups, resolveSitePlace } from "./site-place-lookup";
+import { useWoTableInlineCreate } from "./use-wo-table-inline-create";
+import { useWoTableRowHandlers } from "./use-wo-table-row-handlers";
+import { WoTableBody } from "./wo-table-body";
+import { WoTableHead } from "./wo-table-head";
+import { WoTableInlineRow } from "./wo-table-inline-row";
+import { WoTableRow } from "./wo-table-row";
+import { WoTableEmptyState, WoTableShell } from "./wo-table-shell";
+import { WO_TABLE_MIN_WIDTH } from "./wo-table-cols";
+
+type WoTableProps = {
+  tableData: ReturnTypeOfUseWorkOrdersTableData;
+  users: WorkOrderUser[];
+  sites: LocationOption[];
+  vendors: VendorDropdownItem[];
+  pmTypes: string[];
+  weekMonday: string;
+  onNavigateToDay: (dateIso: string) => void;
+  onOpenSlideOver: (row: WorkOrderTableRow, edit?: boolean) => void;
+  onRequestComplete?: (row: WorkOrderTableRow) => void;
+  /** Omit until completion-doc slice mounts CompDocDialog. */
+  onOpenCompDoc?: (row: WorkOrderTableRow) => void;
+  onOpenUplifts?: (row: WorkOrderTableRow) => void;
+  onOpenMedia: (row: WorkOrderTableRow) => void;
+  onClearSearch?: () => void;
+  onOpenAdvancedFilters?: () => void;
+  onPatch: WorkOrderTablePatchFn;
+};
+
+type WoTableEmptyShellProps = {
+  message: string;
+  actionLabel: string;
+  onAction?: () => void;
+};
+
+function WoTableLoading({
+  weekMonday,
+  selectedDayIso,
+}: {
+  weekMonday: string;
+  selectedDayIso?: string;
+}) {
+  return (
+    <WoTableShell>
+      <WoTableSkeleton weekMonday={weekMonday} selectedDayIso={selectedDayIso} />
+    </WoTableShell>
+  );
+}
+
+function WoTableEmptyShell({ message, actionLabel, onAction }: WoTableEmptyShellProps) {
+  return (
+    <WoTableShell>
+      <WoTableEmptyState message={message} actionLabel={actionLabel} onAction={onAction} />
+    </WoTableShell>
+  );
+}
+
+function WoTablePager({ tableData }: { tableData: ReturnTypeOfUseWorkOrdersTableData }) {
+  if (!tableData.showDayPagination) {
+    return undefined;
+  }
+  return (
+    <WoDayPaginationFooter
+      dayLabel={tableData.dayFooterLabel}
+      itemCount={tableData.dayItemCount}
+      pageSize={tableData.dayPageSize}
+      pageIndex={tableData.dayPageIndex}
+      pageCount={tableData.dayPageCount}
+      onPageSizeChange={tableData.setDayPageSize}
+      onPrev={tableData.goToPrevDayPage}
+      onNext={tableData.goToNextDayPage}
+    />
+  );
+}
+
+export function WoTable({
+  tableData,
+  users,
+  sites,
+  vendors,
+  pmTypes,
+  weekMonday,
+  onNavigateToDay,
+  onOpenSlideOver,
+  onRequestComplete,
+  onOpenCompDoc,
+  onOpenUplifts,
+  onOpenMedia,
+  onClearSearch,
+  onOpenAdvancedFilters,
+  onPatch,
+}: WoTableProps) {
+  const [dueDateHighlightId, setDueDateHighlightId] = useState<string | number | null>(null);
+  const [duplicateRow, setDuplicateRow] = useState<WorkOrderTableRow | null>(null);
+  const { data: locationSites = [] } = useLocationSites();
+  const sitePlaceLookups = useMemo(() => buildSitePlaceLookups(locationSites), [locationSites]);
+  const { handleInlineSave, saving } = useWoTableInlineCreate({
+    tableData,
+    users,
+    sites,
+    onDuplicateFound: setDuplicateRow,
+  });
+
+  const handlers = useWoTableRowHandlers({
+    tableData,
+    weekMonday,
+    onNavigateToDay,
+    onOpenAdvancedFilters,
+    onOpenSlideOver,
+    onRequestComplete,
+    onOpenCompDoc,
+    onOpenUplifts,
+    onOpenMedia,
+    onPatch,
+    onScheduleHighlight: setDueDateHighlightId,
+    onDuplicateFound: setDuplicateRow,
+  });
+
+  const renderRow = (row: WorkOrderTableRow, forceScheduleHighlight = false) => (
+    <WoTableRow
+      key={String(row.id)}
+      row={row}
+      allRows={tableData.rows}
+      users={users}
+      sites={sites}
+      sitePlace={
+        effectiveSitePlace(row) ?? resolveSitePlace(row.locationId, row.site, sitePlaceLookups)
+      }
+      vendors={vendors}
+      pmTypes={pmTypes}
+      search={tableData.search}
+      forceScheduleHighlight={forceScheduleHighlight}
+      forceDueDateHighlight={dueDateHighlightId === row.id}
+      isSelected={tableData.selectedId === row.id}
+      isFlashing={tableData.flashId === row.id}
+      dragViz={tableData.dragViz}
+      handlers={handlers}
+    />
+  );
+
+  const renderInlineRow = (dayKey: string) =>
+    tableData.draftDayKey === dayKey && (
+      <WoTableInlineRow
+        draft={tableData.draft}
+        draftDayKey={tableData.draftDayKey}
+        users={users}
+        sites={sites}
+        sitePlace={resolveSitePlace(
+          tableData.draft.locationId,
+          tableData.draft.site,
+          sitePlaceLookups,
+        )}
+        vendors={vendors}
+        pmTypes={pmTypes}
+        allRows={tableData.rows}
+        saving={saving}
+        onChange={tableData.setDraft}
+        onSave={handleInlineSave}
+        onCancel={tableData.cancelDraft}
+        onDuplicateFound={setDuplicateRow}
+      />
+    );
+
+  if (tableData.isLoading) {
+    return (
+      <WoTableLoading weekMonday={weekMonday} selectedDayIso={tableData.displayGroups[0]?.date} />
+    );
+  }
+
+  const emptyAdv = tableData.advActive && tableData.scopeTotalCount === 0;
+
+  if (emptyAdv) {
+    return (
+      <WoTableEmptyShell
+        message="No work orders match these filters"
+        actionLabel="Adjust filters"
+        onAction={onOpenAdvancedFilters}
+      />
+    );
+  }
+
+  const showSearchEmpty = !tableData.advActive && tableData.noSearchResults;
+
+  if (showSearchEmpty) {
+    return (
+      <WoTableEmptyShell
+        message="No work orders match your search"
+        actionLabel="Clear search"
+        onAction={onClearSearch}
+      />
+    );
+  }
+
+  return (
+    <>
+      <WoTableShell footer={WoTablePager({ tableData })}>
+        <table
+          style={{
+            width: "100%",
+            minWidth: WO_TABLE_MIN_WIDTH,
+            borderCollapse: "collapse",
+          }}
+        >
+          <WoTableHead />
+          <WoTableBody
+            tableData={tableData}
+            renderRow={renderRow}
+            renderInlineRow={renderInlineRow}
+          />
+        </table>
+      </WoTableShell>
+
+      <DuplicateWoNumberDialog
+        open={duplicateRow != null}
+        existing={duplicateRow}
+        onDismiss={() => setDuplicateRow(null)}
+        onViewExisting={(row) => {
+          setDuplicateRow(null);
+          onOpenSlideOver(row, false);
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/work-order-cancel-dialog.tsx b/src/app/(protected)/workorders/_components/list/work-order-cancel-dialog.tsx
new file mode 100644
index 00000000..e17a262a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/work-order-cancel-dialog.tsx
@@ -0,0 +1,50 @@
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import { Button } from "@/components/ui/button";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type WorkOrderCancelDialogProps = {
+  row: WorkOrderTableRow | null;
+  isPending: boolean;
+  onDialogClose: (() => void) | undefined;
+  onKeepWO: () => void;
+  onConfirm: () => void;
+};
+
+export function WorkOrderCancelDialog({
+  row,
+  isPending,
+  onDialogClose,
+  onKeepWO,
+  onConfirm,
+}: WorkOrderCancelDialogProps) {
+  return (
+    <Dialog open={Boolean(row)} onClose={onDialogClose} slotProps={dialogBlurBackdropSlotProps}>
+      <DialogTitle>Cancel work order?</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          Cancel WO #{row?.woNumber}? The record will be kept with status Canceled.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="outline" onClick={onKeepWO} disabled={isPending}>
+          Keep WO
+        </Button>
+        <Button
+          variant="destructive"
+          onClick={onConfirm}
+          loading={isPending}
+          loadingText="Canceling…"
+        >
+          Cancel WO
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/work-order-complete-dialog.tsx b/src/app/(protected)/workorders/_components/list/work-order-complete-dialog.tsx
new file mode 100644
index 00000000..bc87d99d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/work-order-complete-dialog.tsx
@@ -0,0 +1,44 @@
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import { Button } from "@/components/ui/button";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+
+type WorkOrderCompleteDialogProps = {
+  open: boolean;
+  isPending: boolean;
+  onDialogClose: (() => void) | undefined;
+  onKeepOpen: () => void;
+  onConfirm: () => void;
+};
+
+export function WorkOrderCompleteDialog({
+  open,
+  isPending,
+  onDialogClose,
+  onKeepOpen,
+  onConfirm,
+}: WorkOrderCompleteDialogProps) {
+  return (
+    <Dialog open={open} onClose={onDialogClose} slotProps={dialogBlurBackdropSlotProps}>
+      <DialogTitle>Mark as Complete?</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          Once marked as complete, this work order cannot be edited anymore.
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="outline" onClick={onKeepOpen} disabled={isPending}>
+          Cancel
+        </Button>
+        <Button onClick={onConfirm} loading={isPending} loadingText="Saving…">
+          Mark as Complete
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/work-orders-advanced-filters-banner.tsx b/src/app/(protected)/workorders/_components/list/work-orders-advanced-filters-banner.tsx
new file mode 100644
index 00000000..7b729bd1
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/work-orders-advanced-filters-banner.tsx
@@ -0,0 +1,53 @@
+import { AppliedFilterChip } from "@/components/ui/applied-filter-chip";
+import { AppliedFiltersBar } from "@/components/ui/applied-filters-bar";
+import type { WorkOrderAdvancedFilters } from "@/domain/work-orders/types/work-order-advanced-filters";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import {
+  buildAdvancedFilterChips,
+  countAdvancedFilters,
+} from "@/domain/work-orders/utils/advanced-filters-utils";
+
+type WorkOrdersAdvancedFiltersBannerProps = {
+  applied: WorkOrderAdvancedFilters;
+  totalCount: number;
+  sites: { id: string | number; name: string }[];
+  users: WorkOrderUser[];
+  onClearChip: (chipKey: string) => void;
+  onClearAll: () => void;
+};
+
+export function WorkOrdersAdvancedFiltersBanner({
+  applied,
+  totalCount,
+  sites,
+  users,
+  onClearChip,
+  onClearAll,
+}: WorkOrdersAdvancedFiltersBannerProps) {
+  if (countAdvancedFilters(applied) === 0) {
+    return null;
+  }
+
+  const siteNameOf = (id: string) => sites.find((site) => String(site.id) === id)?.name ?? id;
+  const dispatcherNameOf = (id: string) => users.find((user) => String(user.id) === id)?.name ?? id;
+
+  const chips = buildAdvancedFilterChips(applied, { siteNameOf, dispatcherNameOf });
+
+  return (
+    <AppliedFiltersBar
+      countLabel={`${totalCount} work order${totalCount !== 1 ? "s" : ""}`}
+      onClearAll={onClearAll}
+    >
+      {chips.map((chip) => (
+        <AppliedFilterChip
+          key={chip.key}
+          group={chip.group}
+          value={chip.value}
+          count={chip.count}
+          accent={chip.accent}
+          onDismiss={() => onClearChip(chip.key)}
+        />
+      ))}
+    </AppliedFiltersBar>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/work-orders-list-header.tsx b/src/app/(protected)/workorders/_components/list/work-orders-list-header.tsx
new file mode 100644
index 00000000..3f52ea0f
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/work-orders-list-header.tsx
@@ -0,0 +1,76 @@
+import { CircularProgress } from "@mui/material";
+import { Plus, SlidersHorizontal } from "lucide-react";
+import { SearchInput } from "@/components/ui/search-input";
+import { ToolbarButton } from "@/components/ui/toolbar-button";
+
+type WorkOrdersListHeaderProps = {
+  search: string;
+  /** Compact label of the active board week (e.g. "5/4–5/8"). */
+  weekLabel: string;
+  onSearchChange: (value: string) => void;
+  /** Omit until Advanced Search slice mounts the sheet. */
+  onOpenAdvancedFilters?: () => void;
+  /** Omit until wizard shell slice mounts New WO. */
+  onNewWorkOrder?: () => void;
+  activeFilterCount: number;
+  /** True while Advanced Filters are applied; results are global and the keyword box is inert. */
+  advancedFiltersActive?: boolean;
+  isFetching?: boolean;
+};
+
+export function WorkOrdersListHeader({
+  search,
+  weekLabel,
+  onSearchChange,
+  onOpenAdvancedFilters,
+  onNewWorkOrder,
+  activeFilterCount,
+  advancedFiltersActive = false,
+  isFetching = false,
+}: WorkOrdersListHeaderProps) {
+  return (
+    <>
+      <div className="relative">
+        <SearchInput
+          value={search}
+          onChange={onSearchChange}
+          placeholder="Search this week…"
+          aria-label="Search work orders"
+        />
+        {/* Keyword search is scoped to the active week; make that scope visible. */}
+        {!advancedFiltersActive && search.trim() !== "" && Boolean(weekLabel) && (
+          <span
+            role="status"
+            className="absolute left-0 whitespace-nowrap text-(length:--text-xs) text-muted-foreground"
+            style={{ top: "calc(100% + 4px)" }}
+          >
+            Searching within {weekLabel}
+          </span>
+        )}
+      </div>
+
+      {Boolean(onOpenAdvancedFilters) && (
+        <ToolbarButton
+          variant="outline"
+          icon={<SlidersHorizontal size={13} />}
+          onClick={onOpenAdvancedFilters}
+          aria-label="Advanced Filters"
+          title="Advanced Filters"
+          badge={activeFilterCount}
+        >
+          Filters
+        </ToolbarButton>
+      )}
+
+      {Boolean(onNewWorkOrder) && (
+        <ToolbarButton variant="primary" icon={<Plus size={13} />} onClick={onNewWorkOrder}>
+          New WO
+        </ToolbarButton>
+      )}
+
+      {isFetching && (
+        <CircularProgress size={14} aria-label="Refreshing work orders" role="status" />
+      )}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/work-orders-list-overlays.tsx b/src/app/(protected)/workorders/_components/list/work-orders-list-overlays.tsx
new file mode 100644
index 00000000..6bb73f82
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/work-orders-list-overlays.tsx
@@ -0,0 +1,24 @@
+import { WorkOrderUpliftsDialog } from "@/app/(protected)/workorders/_components/uplifts/work-order-uplifts-dialog";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type WorkOrdersListOverlaysProps = {
+  activeUpliftsRow: WorkOrderTableRow | null;
+  onCloseUplifts: () => void;
+};
+
+export function WorkOrdersListOverlays({
+  activeUpliftsRow,
+  onCloseUplifts,
+}: WorkOrdersListOverlaysProps) {
+  return (
+    <>
+      {activeUpliftsRow != null && (
+        <WorkOrderUpliftsDialog
+          row={activeUpliftsRow}
+          open={Boolean(activeUpliftsRow)}
+          onClose={onCloseUplifts}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/work-orders-list-page-panels.tsx b/src/app/(protected)/workorders/_components/list/work-orders-list-page-panels.tsx
new file mode 100644
index 00000000..8b150532
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/work-orders-list-page-panels.tsx
@@ -0,0 +1,115 @@
+import { CompDocDialog } from "@/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog";
+import { WorkOrderSlideOver } from "@/app/(protected)/workorders/_components/detail/work-order-slide-over";
+import { MediaUploadModal } from "@/app/(protected)/workorders/_components/media/media-upload-modal";
+import { WorkOrdersAdvancedSearchSheet } from "@/app/(protected)/workorders/_components/list/advanced-search/work-orders-advanced-search-sheet";
+import { WorkOrderCancelDialog } from "@/app/(protected)/workorders/_components/list/work-order-cancel-dialog";
+import { WorkOrderCompleteDialog } from "@/app/(protected)/workorders/_components/list/work-order-complete-dialog";
+import { WorkOrdersListOverlays } from "@/app/(protected)/workorders/_components/list/work-orders-list-overlays";
+import { WorkOrdersListWizard } from "@/app/(protected)/workorders/_components/list/work-orders-list-wizard";
+import type { useWorkOrdersListPage } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-page";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { hasCompletionDocService } from "@/domain/work-orders/utils/completion-doc-service-gate";
+
+function openCompletionDoc(
+  row: WorkOrderTableRow,
+  setDocRow: (row: WorkOrderTableRow | null) => void,
+) {
+  if (!hasCompletionDocService(row.pm)) return;
+  setDocRow(row);
+}
+
+type WorkOrdersListPagePanelsProps = {
+  page: ReturnType<typeof useWorkOrdersListPage>;
+};
+
+export function WorkOrdersListPagePanels({ page }: WorkOrdersListPagePanelsProps) {
+  const { filters, tableData, activeDocRow, users, locations, vendors, pmTypes, vendorTechs } =
+    page;
+
+  return (
+    <>
+      <WorkOrdersListWizard
+        open={page.wizardOpen}
+        onOpenChange={page.setWizardOpen}
+        users={users}
+        rows={tableData.rows}
+        onViewExisting={(row) => page.handleOpenSlideOver(row, false)}
+      />
+
+      <WorkOrdersAdvancedSearchSheet
+        open={filters.advOpen}
+        onOpenChange={filters.setAdvOpen}
+        initial={filters.advInitial}
+        onApply={filters.applyAdvancedFilters}
+        onClearAll={filters.clearAdvancedFilters}
+        sites={locations}
+        users={users}
+        pmTypes={pmTypes}
+        vendorTechs={vendorTechs}
+      />
+
+      <WorkOrderSlideOver
+        row={page.activeSlideOverRow}
+        editMode={page.slideOverEdit}
+        users={users}
+        sites={locations}
+        vendors={vendors}
+        pmTypes={pmTypes}
+        allOrders={tableData.rows}
+        onSave={(id, patch, options) => page.patchField(id, patch, options)}
+        onOpenCompletionDoc={(row) => openCompletionDoc(row, page.setDocRow)}
+        onCancelWO={page.setConfirmCancel}
+        onRequestComplete={page.setConfirmComplete}
+        onDuplicateFound={(existing) => page.handleOpenSlideOver(existing, false)}
+        saving={page.isPatchPending}
+        onClose={page.handleCloseSlideOver}
+      />
+
+      <WorkOrderCancelDialog
+        row={page.confirmCancel}
+        isPending={page.isPatchPending}
+        onDialogClose={page.cancelDialogClose}
+        onKeepWO={() => page.setConfirmCancel(null)}
+        onConfirm={page.handleConfirmCancel}
+      />
+
+      <WorkOrderCompleteDialog
+        open={Boolean(page.confirmComplete)}
+        isPending={page.isPatchPending}
+        onDialogClose={page.completeDialogClose}
+        onKeepOpen={() => page.setConfirmComplete(null)}
+        onConfirm={page.handleConfirmComplete}
+      />
+
+      {page.activeMediaRow != null && (
+        <MediaUploadModal
+          row={page.activeMediaRow}
+          open={Boolean(page.activeMediaRow)}
+          onOpenChange={(open) => {
+            if (!open) page.setMediaRow(null);
+          }}
+        />
+      )}
+
+      {activeDocRow != null && (
+        <CompDocDialog
+          row={activeDocRow}
+          open={Boolean(activeDocRow)}
+          onOpenChange={(open) => {
+            if (!open) page.setDocRow(null);
+          }}
+          data={page.completionDocs[String(activeDocRow.id)]}
+          onSave={(data, status) => page.saveCompletionDoc(activeDocRow, data, status)}
+          onDateCompletedChange={async (date) => {
+            await page.patchFieldAsync(activeDocRow.id, { completedDate: date });
+          }}
+        />
+      )}
+
+      <WorkOrdersListOverlays
+        activeUpliftsRow={page.activeUpliftsRow}
+        onCloseUplifts={() => page.setUpliftsRow(null)}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/work-orders-list-wizard.tsx b/src/app/(protected)/workorders/_components/list/work-orders-list-wizard.tsx
new file mode 100644
index 00000000..c9ab1c6c
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/work-orders-list-wizard.tsx
@@ -0,0 +1,32 @@
+import { NewWoWizard } from "@/app/(protected)/workorders/_components/wizard/new-wo-wizard";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+type WorkOrdersListWizardProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  users: WorkOrderUser[];
+  rows: WorkOrderTableRow[];
+  onViewExisting: (row: WorkOrderTableRow) => void;
+};
+
+export function WorkOrdersListWizard({
+  open,
+  onOpenChange,
+  users,
+  rows,
+  onViewExisting,
+}: WorkOrdersListWizardProps) {
+  return (
+    <NewWoWizard
+      open={open}
+      onOpenChange={onOpenChange}
+      users={users}
+      existingRows={rows}
+      onViewExistingWo={(row) => {
+        onOpenChange(false);
+        onViewExisting(row);
+      }}
+    />
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/list/work-orders-table.tsx b/src/app/(protected)/workorders/_components/list/work-orders-table.tsx
new file mode 100644
index 00000000..5579f5ca
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/list/work-orders-table.tsx
@@ -0,0 +1,117 @@
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
+import { Button, IconButton, Tooltip } from "@mui/material";
+import { ResourceListTable, type ResourceListColumn } from "@/components/ui/resource-list-table";
+import { WorkOrderStatusBadge } from "@/components/domain/status-badge";
+import type { WorkOrderListItem } from "@/domain/work-orders/types/work-order";
+import type { SortDirection } from "@/domain/work-orders/types/work-order-list";
+import { formatDateTime } from "@/lib/time-utils";
+
+function displayDateTime(value: string): string {
+  return formatDateTime(value) || "—";
+}
+
+type WorkOrdersTableProps = {
+  rows: WorkOrderListItem[];
+  isLoading: boolean;
+  sort: { column: string; direction: SortDirection };
+  onSort: (column: string) => void;
+  onView: (id: string | number) => void;
+  onEdit: (id: string | number) => void;
+};
+
+export function WorkOrdersTable({
+  rows,
+  isLoading,
+  sort,
+  onSort,
+  onView,
+  onEdit,
+}: WorkOrdersTableProps) {
+  const columns: ResourceListColumn<WorkOrderListItem>[] = [
+    {
+      id: "number",
+      header: "WO #",
+      sortable: true,
+      render: (row) => (
+        <Button
+          variant="text"
+          size="small"
+          className="font-semibold"
+          onClick={() => onView(row.id)}
+        >
+          {row.number || row.id}
+        </Button>
+      ),
+    },
+    {
+      id: "title",
+      header: "Title",
+      sortable: true,
+      render: (row) => row.title,
+    },
+    {
+      id: "location",
+      header: "Location",
+      render: (row) => row.location,
+    },
+    {
+      id: "priority",
+      header: "Priority",
+      render: (row) => row.priority,
+    },
+    {
+      id: "status",
+      header: "Status",
+      render: (row) => <WorkOrderStatusBadge status={row.status || "Open"} />,
+    },
+    {
+      id: "createdDate",
+      header: "Created",
+      cellClassName: "whitespace-nowrap",
+      render: (row) => displayDateTime(row.createdDate),
+    },
+    {
+      id: "assignedTo",
+      header: "Assigned To",
+      render: (row) => row.assignedTo || "Unassigned",
+    },
+    {
+      id: "lastUpdated",
+      header: "Last Updated",
+      cellClassName: "whitespace-nowrap",
+      render: (row) => displayDateTime(row.lastUpdated),
+    },
+    {
+      id: "actions",
+      header: "Actions",
+      align: "right",
+      render: (row) => (
+        <>
+          <Tooltip title="View">
+            <IconButton size="small" aria-label="View work order" onClick={() => onView(row.id)}>
+              <VisibilityOutlinedIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Edit">
+            <IconButton size="small" aria-label="Edit work order" onClick={() => onEdit(row.id)}>
+              <EditOutlinedIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <ResourceListTable
+      columns={columns}
+      rows={rows}
+      rowKey={(row) => String(row.id)}
+      isLoading={isLoading}
+      emptyMessage="No work orders found"
+      sort={sort}
+      onSort={onSort}
+    />
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/loading/detail-page-skeleton.tsx b/src/app/(protected)/workorders/_components/loading/detail-page-skeleton.tsx
new file mode 100644
index 00000000..c9dbd36e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/loading/detail-page-skeleton.tsx
@@ -0,0 +1,50 @@
+import { Box, Skeleton, Stack } from "@mui/material";
+import { LoadingRegion } from "@/components/ui/loading-region";
+
+type DetailPageSkeletonProps = {
+  /** Form layout (create/edit) vs view layout. */
+  variant?: "view" | "form";
+};
+
+export function DetailPageSkeleton({ variant = "view" }: DetailPageSkeletonProps) {
+  return (
+    <LoadingRegion
+      label={variant === "form" ? "Loading work order form" : "Loading work order"}
+      className="flex flex-col gap-4 p-4"
+    >
+      <Skeleton variant="text" width={200} height={20} animation="wave" />
+      <Skeleton variant="text" width={280} height={32} animation="wave" />
+
+      {variant === "view" ? (
+        <Stack spacing={3} className="mt-2">
+          {Array.from({ length: 3 }, (_, i) => (
+            <Box key={i} className="rounded-lg border border-border p-4">
+              <Skeleton variant="text" width={120} height={18} className="mb-3" animation="wave" />
+              <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+                <Skeleton variant="rounded" height={40} className="flex-1" animation="wave" />
+                <Skeleton variant="rounded" height={40} className="flex-1" animation="wave" />
+                <Skeleton variant="rounded" height={40} className="flex-1" animation="wave" />
+              </Stack>
+            </Box>
+          ))}
+        </Stack>
+      ) : (
+        <Stack spacing={3} className="mt-2">
+          {Array.from({ length: 4 }, (_, i) => (
+            <Box key={i}>
+              <Skeleton variant="text" width={100} height={16} className="mb-2" animation="wave" />
+              <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+                <Skeleton variant="rounded" height={56} className="flex-1" animation="wave" />
+                <Skeleton variant="rounded" height={56} className="flex-1" animation="wave" />
+              </Stack>
+            </Box>
+          ))}
+          <Stack direction="row" spacing={2} sx={{ justifyContent: "flex-end" }} className="mt-4">
+            <Skeleton variant="rounded" width={96} height={36} animation="wave" />
+            <Skeleton variant="rounded" width={96} height={36} animation="wave" />
+          </Stack>
+        </Stack>
+      )}
+    </LoadingRegion>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/loading/dispatch-detail-skeleton.tsx b/src/app/(protected)/workorders/_components/loading/dispatch-detail-skeleton.tsx
new file mode 100644
index 00000000..8a1d81c5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/loading/dispatch-detail-skeleton.tsx
@@ -0,0 +1,49 @@
+import { Box, DialogContent, DialogTitle, Skeleton, Stack } from "@mui/material";
+import { LoadingRegion } from "@/components/ui/loading-region";
+
+export function DispatchDetailSkeleton() {
+  return (
+    <LoadingRegion label="Loading dispatch details">
+      <DialogTitle>
+        <div className="flex items-center justify-between">
+          <Skeleton variant="text" width={200} height={28} animation="wave" />
+          <Skeleton variant="circular" width={28} height={28} animation="wave" />
+        </div>
+      </DialogTitle>
+      <DialogContent className="flex flex-col gap-6">
+        <Box className="rounded border border-border p-3">
+          <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+            {Array.from({ length: 4 }, (_, i) => (
+              <div key={i} className="flex-1 space-y-1">
+                <Skeleton variant="text" width={64} height={12} animation="wave" />
+                <Skeleton variant="rounded" height={24} animation="wave" />
+              </div>
+            ))}
+          </Stack>
+        </Box>
+
+        <Box>
+          <Skeleton variant="text" width={120} height={20} className="mb-2" animation="wave" />
+          <Stack spacing={1}>
+            {Array.from({ length: 3 }, (_, i) => (
+              <div key={i} className="flex items-center gap-2">
+                <Skeleton variant="rounded" width={20} height={20} animation="wave" />
+                <Skeleton variant="text" width="50%" height={16} animation="wave" />
+              </div>
+            ))}
+          </Stack>
+        </Box>
+
+        <Box>
+          <Skeleton variant="text" width={80} height={20} className="mb-2" animation="wave" />
+          <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
+            <Skeleton variant="rounded" height={100} className="flex-1" animation="wave" />
+            <Skeleton variant="rounded" height={100} className="flex-1" animation="wave" />
+          </Stack>
+        </Box>
+
+        <Skeleton variant="rounded" height={80} animation="wave" />
+      </DialogContent>
+    </LoadingRegion>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/loading/slide-over-tab-skeleton.tsx b/src/app/(protected)/workorders/_components/loading/slide-over-tab-skeleton.tsx
new file mode 100644
index 00000000..b7df1d07
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/loading/slide-over-tab-skeleton.tsx
@@ -0,0 +1,75 @@
+import { Skeleton, Stack } from "@mui/material";
+import { LoadingRegion } from "@/components/ui/loading-region";
+
+export type SlideOverTabSkeletonVariant = "info" | "comments" | "audit" | "completion" | "extras";
+
+type SlideOverTabSkeletonProps = {
+  variant?: SlideOverTabSkeletonVariant;
+};
+
+export function SlideOverTabSkeleton({ variant = "info" }: SlideOverTabSkeletonProps) {
+  return (
+    <LoadingRegion label="Loading details" className="w-full">
+      {variant === "info" && <InfoSkeleton />}
+      {variant === "comments" && <CommentsSkeleton />}
+      {variant === "audit" && <AuditSkeleton />}
+      {(variant === "completion" || variant === "extras") && <DocsSkeleton />}
+    </LoadingRegion>
+  );
+}
+
+function InfoSkeleton() {
+  return (
+    <Stack spacing={2.5}>
+      {Array.from({ length: 6 }, (_, i) => (
+        <div key={i} className="space-y-1.5">
+          <Skeleton variant="text" width={72} height={12} animation="wave" />
+          <Skeleton variant="rounded" height={36} animation="wave" />
+        </div>
+      ))}
+    </Stack>
+  );
+}
+
+function CommentsSkeleton() {
+  return (
+    <Stack spacing={2}>
+      {Array.from({ length: 3 }, (_, i) => (
+        <div key={i} className="space-y-1.5 rounded-lg border border-border p-3">
+          <div className="flex items-center gap-2">
+            <Skeleton variant="circular" width={28} height={28} animation="wave" />
+            <Skeleton variant="text" width={120} height={14} animation="wave" />
+          </div>
+          <Skeleton variant="rounded" height={40} animation="wave" />
+        </div>
+      ))}
+      <Skeleton variant="rounded" height={80} animation="wave" />
+    </Stack>
+  );
+}
+
+function AuditSkeleton() {
+  return (
+    <Stack spacing={2}>
+      {Array.from({ length: 4 }, (_, i) => (
+        <div key={i} className="flex gap-3">
+          <Skeleton variant="circular" width={10} height={10} className="mt-1.5 shrink-0" />
+          <div className="flex-1 space-y-1">
+            <Skeleton variant="text" width="60%" height={14} animation="wave" />
+            <Skeleton variant="text" width="40%" height={12} animation="wave" />
+          </div>
+        </div>
+      ))}
+    </Stack>
+  );
+}
+
+function DocsSkeleton() {
+  return (
+    <Stack spacing={2}>
+      <Skeleton variant="text" width={140} height={16} animation="wave" />
+      <Skeleton variant="rounded" height={48} animation="wave" />
+      <Skeleton variant="rounded" height={120} animation="wave" />
+    </Stack>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/loading/wo-table-skeleton.tsx b/src/app/(protected)/workorders/_components/loading/wo-table-skeleton.tsx
new file mode 100644
index 00000000..b94f7c68
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/loading/wo-table-skeleton.tsx
@@ -0,0 +1,83 @@
+import { Skeleton } from "@mui/material";
+import { LoadingRegion } from "@/components/ui/loading-region";
+import { TableSkeletonRows } from "@/components/ui/table-skeleton-rows";
+import { formatDayTabLabel, weekdaysMonFri } from "@/domain/work-orders/utils/week-day-nav-utils";
+import { WoTableHead } from "@/app/(protected)/workorders/_components/list/table/wo-table-head";
+import {
+  WO_TABLE_COLS,
+  WO_TABLE_MIN_WIDTH,
+  WO_TABLE_ROW_HEIGHT,
+} from "@/app/(protected)/workorders/_components/list/table/wo-table-cols";
+
+type WoTableSkeletonProps = {
+  weekMonday: string;
+  selectedDayIso?: string;
+  rowsPerDay?: number;
+};
+
+const SKELETON_COLS = WO_TABLE_COLS.map((col) => ({ key: col.key, width: col.w }));
+
+function skeletonDayIso(weekMonday: string, selectedDayIso?: string): string {
+  const days = weekdaysMonFri(weekMonday);
+  if (selectedDayIso && days.includes(selectedDayIso)) {
+    return selectedDayIso;
+  }
+  return weekMonday;
+}
+
+export function WoTableSkeleton({
+  weekMonday,
+  selectedDayIso,
+  rowsPerDay = 2,
+}: WoTableSkeletonProps) {
+  const dayIso = skeletonDayIso(weekMonday, selectedDayIso);
+
+  return (
+    <LoadingRegion label="Loading work orders" className="h-full">
+      <table
+        style={{
+          width: "100%",
+          minWidth: WO_TABLE_MIN_WIDTH,
+          borderCollapse: "collapse",
+        }}
+      >
+        <WoTableHead />
+        <tbody>
+          <DaySkeletonSection label={formatDayTabLabel(dayIso)} rows={rowsPerDay} />
+        </tbody>
+      </table>
+    </LoadingRegion>
+  );
+}
+
+function DaySkeletonSection({ label, rows }: { label: string; rows: number }) {
+  return (
+    <>
+      <tr>
+        <td
+          colSpan={WO_TABLE_COLS.length}
+          style={{
+            padding: "10px 14px",
+            background: "var(--color-bg-muted)",
+            borderBottom: "1px solid var(--border)",
+          }}
+        >
+          <div className="flex items-center gap-2">
+            <span
+              style={{
+                fontSize: 11,
+                fontWeight: 700,
+                letterSpacing: "0.04em",
+                color: "var(--color-text-muted)",
+              }}
+            >
+              {label}
+            </span>
+            <Skeleton variant="rounded" width={28} height={16} animation="wave" />
+          </div>
+        </td>
+      </tr>
+      <TableSkeletonRows rows={rows} columns={SKELETON_COLS} rowHeight={WO_TABLE_ROW_HEIGHT} />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-upload-modal.tsx b/src/app/(protected)/workorders/_components/media/media-upload-modal.tsx
new file mode 100644
index 00000000..e3aa23ee
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-upload-modal.tsx
@@ -0,0 +1,127 @@
+import { type MouseEvent } from "react";
+import { Dialog, DialogContent, DialogTitle, Skeleton, Stack } from "@mui/material";
+import { Image as ImageIcon } from "lucide-react";
+import { toast } from "react-toastify";
+import { Button } from "@/components/ui/button";
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+import { LoadingRegion } from "@/components/ui/loading-region";
+import { Text } from "@/components/ui/text";
+import { MediaUploader } from "@/app/(protected)/workorders/_components/media/media-uploader";
+import { useMediaUploadSession } from "@/app/(protected)/workorders/_hooks/use-media-upload-session";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { useWorkOrderBoardDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import {
+  useDeleteWorkOrderMedia,
+  useUploadWorkOrderMedia,
+} from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { isWorkOrderDocumentsReadOnly } from "@/domain/work-orders/utils/work-order-media-limits";
+import { guardDialogClose } from "@/lib/dialog-guard";
+
+type MediaUploadModalProps = {
+  row: WorkOrderTableRow;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+function resolveWorkOrderVersion(
+  detailRowVersion: string | null | undefined,
+  rowVersion: string | null | undefined,
+): string | null {
+  const version = detailRowVersion?.trim() || rowVersion?.trim() || "";
+  return version || null;
+}
+
+export function MediaUploadModal({ row, open, onOpenChange }: MediaUploadModalProps) {
+  const { data: detail, isLoading } = useWorkOrderBoardDetail(row.id, open);
+  const uploadMutation = useUploadWorkOrderMedia(row.id);
+  const deleteMutation = useDeleteWorkOrderMedia(row.id);
+  const isReadOnly = isWorkOrderDocumentsReadOnly(detail?.info.status ?? row.status);
+  const { uploads, startUploads, retryUpload, cancelUpload, removeLocal, isLocal } =
+    useMediaUploadSession(detail, (input) => uploadMutation.mutateAsync(input));
+
+  const pending = uploadMutation.isPending || deleteMutation.isPending;
+  const handleClose = guardDialogClose(pending, () => onOpenChange(false));
+
+  const requireVersion = (): string | null => {
+    const version = resolveWorkOrderVersion(detail?.info.rowVersion, row.rowVersion);
+    if (!version) {
+      toast.error("Missing work order version. Refresh and try again.");
+      return null;
+    }
+    return version;
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      maxWidth={false}
+      slotProps={{
+        ...dialogBlurBackdropSlotProps,
+        paper: {
+          style: { borderRadius: 12, maxWidth: 520, width: "100%" },
+          onClick: (e: MouseEvent<HTMLDivElement>) => e.stopPropagation(),
+        },
+      }}
+    >
+      <DialogContent className="p-6" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center gap-2">
+          <ImageIcon size={18} className="shrink-0" style={{ color: "var(--foreground)" }} />
+          <DialogTitle
+            sx={{ p: 0, fontSize: 16, lineHeight: 1.25, color: "var(--color-text-primary)" }}
+          >
+            Photos &amp; Videos
+          </DialogTitle>
+          <span style={{ fontSize: 13, fontWeight: 600, color: "var(--color-text-muted)" }}>
+            #{row.woNumber}
+          </span>
+        </div>
+        <Text className="sr-only" variant="description">
+          Upload photos and videos for this work order.
+        </Text>
+
+        <div className="mt-4">
+          {isLoading && !detail ? (
+            <LoadingRegion label="Loading media">
+              <Stack spacing={1.5}>
+                <Skeleton variant="rounded" height={100} animation="wave" />
+                <Skeleton variant="rounded" height={40} animation="wave" />
+                <Skeleton variant="rounded" height={40} animation="wave" />
+              </Stack>
+            </LoadingRegion>
+          ) : (
+            <MediaUploader
+              uploads={uploads}
+              onUpload={startUploads}
+              onRemove={(id) => {
+                if (isLocal(id)) {
+                  removeLocal(id);
+                  return;
+                }
+                const workOrderVersion = requireVersion();
+                if (!workOrderVersion) return;
+                deleteMutation.mutate({ mediaId: id, workOrderVersion });
+              }}
+              onRetry={retryUpload}
+              onCancel={cancelUpload}
+              readOnly={isReadOnly}
+              pending={pending}
+            />
+          )}
+        </div>
+
+        <div className="mt-2 flex justify-end">
+          <Button
+            variant="outline"
+            size="default"
+            className="text-[12px]"
+            disabled={pending}
+            onClick={() => onOpenChange(false)}
+          >
+            Close
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx
new file mode 100644
index 00000000..0f96ba9c
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx
@@ -0,0 +1,62 @@
+import type { RefObject } from "react";
+import { Upload } from "lucide-react";
+import {
+  formatMediaSizeLimit,
+  workOrderMediaAcceptAttribute,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+
+type MediaUploaderDropzoneProps = {
+  inputRef: RefObject<HTMLInputElement | null>;
+  pending: boolean;
+  categorizeAfterUpload?: boolean;
+  onFilesSelected: (files: FileList | null) => void;
+};
+
+export function MediaUploaderDropzone({
+  inputRef,
+  pending,
+  categorizeAfterUpload = false,
+  onFilesSelected,
+}: MediaUploaderDropzoneProps) {
+  return (
+    <>
+      <button
+        type="button"
+        disabled={pending}
+        onClick={() => inputRef.current?.click()}
+        onDragOver={(e) => e.preventDefault()}
+        onDrop={(e) => {
+          e.preventDefault();
+          onFilesSelected(e.dataTransfer.files);
+        }}
+        className="flex w-full flex-col items-center justify-center gap-1.5 transition-colors hover:bg-(--color-bg-muted) disabled:opacity-60"
+        style={{
+          minHeight: 120,
+          border: "1px dashed var(--color-border)",
+          borderRadius: 8,
+        }}
+      >
+        <Upload size={20} style={{ color: "var(--color-text-muted)" }} />
+        <span style={{ fontSize: 13, color: "var(--color-text-muted)" }}>
+          {pending ? "Uploading…" : "Drag files here or click to browse"}
+        </span>
+        <span style={{ fontSize: 11, color: "var(--color-text-muted)" }}>
+          Accepted: JPG, PNG, MP4, MOV · Max {formatMediaSizeLimit().replace(" ", "")} per file
+          {categorizeAfterUpload ? " · categorize after upload" : ""}
+        </span>
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={workOrderMediaAcceptAttribute()}
+        multiple
+        hidden
+        disabled={pending}
+        onChange={(e) => {
+          onFilesSelected(e.target.files);
+          e.target.value = "";
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-chrome.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-chrome.tsx
new file mode 100644
index 00000000..1399c90a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-chrome.tsx
@@ -0,0 +1,113 @@
+import { RotateCcw, X } from "lucide-react";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import { canDeleteWorkOrderMedia } from "@/domain/work-orders/utils/work-order-media-limits";
+import { MediaUploaderGridItemPreview } from "./media-uploader-grid-item-preview";
+
+type MediaUploaderGridItemChromeProps = {
+  file: MediaFile;
+  readOnly: boolean;
+  pending: boolean;
+  onRemove: (id: string) => void;
+  onRetry?: (id: string) => void;
+  onCancel?: (id: string) => void;
+};
+
+export function MediaUploaderGridItemChrome({
+  file,
+  readOnly,
+  pending,
+  onRemove,
+  onRetry,
+  onCancel,
+}: MediaUploaderGridItemChromeProps) {
+  const uploading = file.uploadStatus === "uploading";
+  const failed = file.uploadStatus === "failed";
+  const showDelete = !readOnly && canDeleteWorkOrderMedia(file);
+
+  return (
+    <div
+      className="relative"
+      style={{
+        aspectRatio: "1 / 1",
+        background: "var(--color-bg-muted)",
+      }}
+    >
+      <MediaUploaderGridItemPreview file={file} />
+      {Boolean(uploading) && (
+        <div
+          className="absolute inset-x-0 bottom-0"
+          style={{ height: 4, background: "rgba(0,0,0,0.25)" }}
+        >
+          <div
+            style={{
+              height: "100%",
+              width: `${file.progress ?? 0}%`,
+              background: "var(--color-brand-primary, #2563eb)",
+            }}
+          />
+        </div>
+      )}
+      {Boolean(uploading && onCancel) && (
+        <button
+          type="button"
+          onClick={() => onCancel?.(file.id)}
+          title="Cancel upload"
+          className="absolute flex items-center justify-center"
+          style={{
+            top: 4,
+            right: 4,
+            width: 18,
+            height: 18,
+            borderRadius: 4,
+            background: "var(--color-bg-surface)",
+            border: "1px solid var(--color-border)",
+            color: "var(--color-text-muted)",
+          }}
+        >
+          <X size={11} />
+        </button>
+      )}
+      {Boolean(failed && onRetry) && (
+        <button
+          type="button"
+          onClick={() => onRetry?.(file.id)}
+          title="Retry upload"
+          className="absolute flex items-center justify-center"
+          style={{
+            top: 4,
+            left: 4,
+            width: 18,
+            height: 18,
+            borderRadius: 4,
+            background: "var(--color-bg-surface)",
+            border: "1px solid var(--color-border)",
+            color: "var(--color-text-muted)",
+          }}
+        >
+          <RotateCcw size={11} />
+        </button>
+      )}
+      {Boolean(showDelete && !uploading) && (
+        <button
+          type="button"
+          onClick={() => onRemove(file.id)}
+          title="Remove"
+          disabled={pending}
+          className="absolute flex items-center justify-center transition-opacity hover:opacity-80 disabled:opacity-50"
+          style={{
+            top: 4,
+            right: 4,
+            width: 18,
+            height: 18,
+            borderRadius: 4,
+            background: "var(--color-bg-surface)",
+            border: "1px solid var(--color-border)",
+            color: "var(--color-text-muted)",
+          }}
+        >
+          <X size={11} />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-meta.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-meta.tsx
new file mode 100644
index 00000000..209e5a2e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-meta.tsx
@@ -0,0 +1,69 @@
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+
+const PURPOSE_OPTIONS: UploadableMediaCategory[] = ["Before", "After", "Extra"];
+
+type MediaUploaderGridItemMetaProps = {
+  file: MediaFile;
+  readOnly: boolean;
+  pending: boolean;
+  onCategorize?: (id: string, category: UploadableMediaCategory) => void;
+};
+
+export function MediaUploaderGridItemMeta({
+  file,
+  readOnly,
+  pending,
+  onCategorize,
+}: MediaUploaderGridItemMetaProps) {
+  const failed = file.uploadStatus === "failed";
+  const managesPurpose = Boolean(onCategorize);
+  const needsCategory =
+    !readOnly &&
+    !file.isLegacy &&
+    file.uploadStatus !== "uploading" &&
+    file.uploadStatus !== "failed" &&
+    managesPurpose;
+
+  return (
+    <div className="space-y-1 px-1 py-1">
+      <div className="truncate" style={{ fontSize: 10, color: "var(--color-text-muted)" }}>
+        {file.name}
+      </div>
+      {Boolean(failed) && (
+        <div style={{ fontSize: 10, color: "var(--color-danger, #b91c1c)" }}>
+          {file.errorMessage || "Upload failed"}
+        </div>
+      )}
+      {needsCategory && (
+        <select
+          aria-label={`Category for ${file.name}`}
+          value={file.purpose === "Extra" ? "" : (file.purpose ?? "")}
+          disabled={pending}
+          onChange={(event) => {
+            const value = event.target.value as UploadableMediaCategory;
+            if (value) onCategorize?.(file.id, value);
+          }}
+          className="w-full rounded border px-1 py-0.5 text-[10px]"
+          style={{
+            borderColor: "var(--color-border)",
+            color: "var(--color-text-primary)",
+            background: "var(--color-bg-surface)",
+          }}
+        >
+          <option value="">Assign purpose…</option>
+          {PURPOSE_OPTIONS.map((value) => (
+            <option key={value} value={value}>
+              {value}
+            </option>
+          ))}
+        </select>
+      )}
+      {Boolean(!needsCategory && managesPurpose) && (
+        <div style={{ fontSize: 10, color: "var(--color-text-muted)" }}>
+          {file.purpose || (file.isLegacy ? "Legacy" : "")}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-preview.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-preview.tsx
new file mode 100644
index 00000000..3634fc1f
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item-preview.tsx
@@ -0,0 +1,52 @@
+import {
+  File as FileIcon,
+  FileText,
+  Film,
+  Image as ImageIcon,
+  Paperclip,
+  Play,
+} from "lucide-react";
+import type { FileCategory, MediaFile } from "@/domain/work-orders/types/work-order-media";
+
+const FILETYPE_ICON: Record<FileCategory, typeof ImageIcon> = {
+  image: ImageIcon,
+  video: Film,
+  pdf: FileText,
+  doc: FileIcon,
+  other: Paperclip,
+};
+
+type MediaUploaderGridItemPreviewProps = {
+  file: MediaFile;
+};
+
+export function MediaUploaderGridItemPreview({ file }: MediaUploaderGridItemPreviewProps) {
+  const TypeIcon = FILETYPE_ICON[file.fileType];
+
+  if (file.fileType === "image") {
+    return (
+      <img
+        src={file.url}
+        alt={file.name}
+        style={{ width: "100%", height: "100%", objectFit: "cover" }}
+      />
+    );
+  }
+
+  if (file.fileType === "video") {
+    return (
+      <>
+        <video src={file.url} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+        <span className="absolute inset-0 flex items-center justify-center">
+          <Play size={18} style={{ color: "#fff" }} />
+        </span>
+      </>
+    );
+  }
+
+  return (
+    <span className="absolute inset-0 flex items-center justify-center">
+      <TypeIcon size={18} style={{ color: "var(--color-text-muted)" }} />
+    </span>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-grid-item.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item.tsx
new file mode 100644
index 00000000..81943b68
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item.tsx
@@ -0,0 +1,46 @@
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import { MediaUploaderGridItemChrome } from "./media-uploader-grid-item-chrome";
+import { MediaUploaderGridItemMeta } from "./media-uploader-grid-item-meta";
+
+type MediaUploaderGridItemProps = {
+  file: MediaFile;
+  readOnly: boolean;
+  pending: boolean;
+  onRemove: (id: string) => void;
+  onCategorize?: (id: string, category: UploadableMediaCategory) => void;
+  onRetry?: (id: string) => void;
+  onCancel?: (id: string) => void;
+};
+
+export function MediaUploaderGridItem({
+  file,
+  readOnly,
+  pending,
+  onRemove,
+  onCategorize,
+  onRetry,
+  onCancel,
+}: MediaUploaderGridItemProps) {
+  return (
+    <div
+      className="overflow-hidden rounded-lg border"
+      style={{ borderColor: "var(--color-border)" }}
+    >
+      <MediaUploaderGridItemChrome
+        file={file}
+        readOnly={readOnly}
+        pending={pending}
+        onRemove={onRemove}
+        onRetry={onRetry}
+        onCancel={onCancel}
+      />
+      <MediaUploaderGridItemMeta
+        file={file}
+        readOnly={readOnly}
+        pending={pending}
+        onCategorize={onCategorize}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-grid.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-grid.tsx
new file mode 100644
index 00000000..052bd161
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-grid.tsx
@@ -0,0 +1,42 @@
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import { MediaUploaderGridItem } from "./media-uploader-grid-item";
+
+type MediaUploaderGridProps = {
+  uploads: MediaFile[];
+  readOnly: boolean;
+  pending: boolean;
+  onRemove: (id: string) => void;
+  onCategorize?: (id: string, category: UploadableMediaCategory) => void;
+  onRetry?: (id: string) => void;
+  onCancel?: (id: string) => void;
+};
+
+export function MediaUploaderGrid({
+  uploads,
+  readOnly,
+  pending,
+  onRemove,
+  onCategorize,
+  onRetry,
+  onCancel,
+}: MediaUploaderGridProps) {
+  if (uploads.length === 0) return null;
+
+  return (
+    <div className="mt-3 grid grid-cols-3 gap-2">
+      {uploads.map((file) => (
+        <MediaUploaderGridItem
+          key={file.id}
+          file={file}
+          readOnly={readOnly}
+          pending={pending}
+          onRemove={onRemove}
+          onCategorize={onCategorize}
+          onRetry={onRetry}
+          onCancel={onCancel}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader.tsx b/src/app/(protected)/workorders/_components/media/media-uploader.tsx
new file mode 100644
index 00000000..aed81332
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader.tsx
@@ -0,0 +1,112 @@
+import { useRef } from "react";
+import { toast } from "react-toastify";
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import {
+  canDeleteWorkOrderMedia,
+  formatMediaSizeLimit,
+  isWorkOrderFileTooLarge,
+  isWorkOrderMediaTypeAllowed,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+import { makeMediaFile } from "@/domain/work-orders/utils/work-order-media-utils";
+import { MediaUploaderDropzone } from "./media-uploader-dropzone";
+import { MediaUploaderGrid } from "./media-uploader-grid";
+
+export type MediaUploadRequest = {
+  localId: string;
+  file: File;
+  onProgress: (percent: number) => void;
+};
+
+type MediaUploaderProps = {
+  uploads: MediaFile[];
+  /** Upload-then-categorize: files only — category assigned after persist. */
+  onUpload?: (requests: MediaUploadRequest[]) => void;
+  onRemove?: (id: string) => void;
+  onCategorize?: (id: string, category: UploadableMediaCategory) => void;
+  onRetry?: (localId: string) => void;
+  onCancel?: (localId: string) => void;
+  /** Legacy local-only mode (table modal fallback). */
+  onChange?: (next: MediaFile[]) => void;
+  readOnly?: boolean;
+  pending?: boolean;
+};
+
+export function MediaUploader({
+  uploads,
+  onUpload,
+  onRemove,
+  onCategorize,
+  onRetry,
+  onCancel,
+  onChange,
+  readOnly = false,
+  pending = false,
+}: MediaUploaderProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const addFiles = (files: FileList | null) => {
+    if (readOnly || pending || !files || files.length === 0) return;
+
+    const accepted: File[] = [];
+    for (const file of Array.from(files)) {
+      if (!isWorkOrderMediaTypeAllowed(file)) {
+        toast.error(`"${file.name}" is not a supported type (JPG, PNG, MP4, MOV).`);
+        continue;
+      }
+      if (isWorkOrderFileTooLarge(file)) {
+        toast.error(`"${file.name}" exceeds the ${formatMediaSizeLimit()} limit.`);
+        continue;
+      }
+      accepted.push(file);
+    }
+    if (accepted.length === 0) return;
+
+    if (onUpload) {
+      const requests: MediaUploadRequest[] = accepted.map((file) => ({
+        localId: `local-${crypto.randomUUID()}`,
+        file,
+        onProgress: () => undefined,
+      }));
+      onUpload(requests);
+      return;
+    }
+
+    if (onChange) {
+      onChange([...uploads, ...accepted.map(makeMediaFile)]);
+    }
+  };
+
+  const remove = (id: string) => {
+    if (readOnly || pending) return;
+    const target = uploads.find((u) => u.id === id);
+    if (target && !canDeleteWorkOrderMedia(target) && target.uploadStatus !== "failed") return;
+    if (onRemove) {
+      onRemove(id);
+      return;
+    }
+    onChange?.(uploads.filter((u) => u.id !== id));
+  };
+
+  return (
+    <div>
+      {!readOnly && (
+        <MediaUploaderDropzone
+          inputRef={inputRef}
+          pending={pending}
+          categorizeAfterUpload={Boolean(onCategorize)}
+          onFilesSelected={addFiles}
+        />
+      )}
+      <MediaUploaderGrid
+        uploads={uploads}
+        readOnly={readOnly}
+        pending={pending}
+        onRemove={remove}
+        onCategorize={onCategorize}
+        onRetry={onRetry}
+        onCancel={onCancel}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/poc/poc-contact-fields.tsx b/src/app/(protected)/workorders/_components/poc/poc-contact-fields.tsx
new file mode 100644
index 00000000..c12c2eab
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/poc/poc-contact-fields.tsx
@@ -0,0 +1,240 @@
+import { useId } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+import {
+  DLG_INPUT_CLS,
+  DLG_INPUT_STYLE,
+} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
+import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
+import { isIncompleteAdditionalContact } from "@/domain/work-orders/mappers/additional-contacts-mapper";
+import {
+  EMPTY_ADDITIONAL_CONTACT,
+  type WorkOrderAdditionalContact,
+} from "@/domain/work-orders/types/work-order-additional-contact";
+
+type PocContactFieldsProps = {
+  pocName: string;
+  pocPhone: string;
+  pocNotes: string;
+  additionalContacts: WorkOrderAdditionalContact[];
+  onPocNameChange: (value: string) => void;
+  onPocPhoneChange: (value: string) => void;
+  onPocNotesChange: (value: string) => void;
+  onAdditionalContactsChange: (contacts: WorkOrderAdditionalContact[]) => void;
+  helperText?: string;
+  showPrimaryErrors?: boolean;
+  /** Labels the primary name/phone inputs with a persistent required asterisk. */
+  primaryRequired?: boolean;
+};
+
+function extraNameMissing(contact: WorkOrderAdditionalContact): boolean {
+  return isIncompleteAdditionalContact(contact) && !contact.name.trim();
+}
+
+function extraPhoneMissing(contact: WorkOrderAdditionalContact): boolean {
+  return isIncompleteAdditionalContact(contact) && !contact.phone.trim();
+}
+
+function updateContactAt(
+  contacts: WorkOrderAdditionalContact[],
+  index: number,
+  patch: Partial<WorkOrderAdditionalContact>,
+): WorkOrderAdditionalContact[] {
+  return contacts.map((contact, contactIndex) =>
+    contactIndex === index ? { ...contact, ...patch } : contact,
+  );
+}
+
+function AdditionalPocCard({
+  contact,
+  index,
+  onChange,
+  onRemove,
+}: {
+  contact: WorkOrderAdditionalContact;
+  index: number;
+  onChange: (patch: Partial<WorkOrderAdditionalContact>) => void;
+  onRemove: () => void;
+}) {
+  const nameMissing = extraNameMissing(contact);
+  const phoneMissing = extraPhoneMissing(contact);
+
+  return (
+    <div
+      className="mt-3 space-y-2 rounded-lg p-3"
+      style={{ border: "1px solid var(--color-border)", background: "var(--color-bg-muted)" }}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <Text
+          as="p"
+          className="text-[11px] font-semibold uppercase tracking-wide"
+          style={{ color: "var(--color-text-muted)" }}
+        >
+          Point of contact {index + 2}
+        </Text>
+        <button
+          type="button"
+          aria-label={`Remove point of contact ${index + 2}`}
+          className="inline-flex shrink-0 items-center justify-center rounded p-1 transition-colors hover:bg-[var(--color-bg-surface)]"
+          style={{ color: "var(--color-text-muted)" }}
+          onClick={onRemove}
+        >
+          <Trash2 size={14} />
+        </button>
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <input
+            value={contact.name}
+            onChange={(event) => onChange({ name: event.target.value })}
+            placeholder="POC name"
+            className={DLG_INPUT_CLS}
+            style={{
+              ...DLG_INPUT_STYLE,
+              borderColor: nameMissing ? "var(--destructive)" : undefined,
+            }}
+          />
+          <Text as="p" variant="error" when={nameMissing} className="mt-1 text-[11px]">
+            Contact name is required
+          </Text>
+        </div>
+        <div>
+          <input
+            value={contact.phone}
+            onChange={(event) => onChange({ phone: event.target.value })}
+            placeholder="POC phone"
+            className={DLG_INPUT_CLS}
+            style={{
+              ...DLG_INPUT_STYLE,
+              borderColor: phoneMissing ? "var(--destructive)" : undefined,
+            }}
+          />
+          <Text as="p" variant="error" when={phoneMissing} className="mt-1 text-[11px]">
+            Contact phone is required
+          </Text>
+        </div>
+      </div>
+      <textarea
+        value={contact.notes ?? ""}
+        onChange={(event) => onChange({ notes: event.target.value })}
+        placeholder="Notes…"
+        rows={2}
+        className={`${DLG_INPUT_CLS} resize-none`}
+        style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit" }}
+      />
+    </div>
+  );
+}
+
+export function PocContactFields({
+  pocName,
+  pocPhone,
+  pocNotes,
+  additionalContacts,
+  onPocNameChange,
+  onPocPhoneChange,
+  onPocNotesChange,
+  onAdditionalContactsChange,
+  helperText,
+  showPrimaryErrors = false,
+  primaryRequired = false,
+}: PocContactFieldsProps) {
+  const fieldId = useId();
+  const nameMissing = showPrimaryErrors && !pocName.trim();
+  const phoneMissing = showPrimaryErrors && !pocPhone.trim();
+
+  const handleAddContact = () => {
+    onAdditionalContactsChange([...additionalContacts, { ...EMPTY_ADDITIONAL_CONTACT }]);
+  };
+
+  return (
+    <div className="pt-1">
+      <FieldLabel>Point of Contact</FieldLabel>
+      {Boolean(helperText) && (
+        <Text as="p" className="mb-2 text-[11px]" style={{ color: "var(--color-text-muted)" }}>
+          {helperText}
+        </Text>
+      )}
+      <div className="space-y-2">
+        <div>
+          {primaryRequired && (
+            <FieldLabel required htmlFor={`${fieldId}-name`}>
+              POC name
+            </FieldLabel>
+          )}
+          <input
+            id={`${fieldId}-name`}
+            value={pocName}
+            onChange={(event) => onPocNameChange(event.target.value)}
+            placeholder="POC name"
+            className={DLG_INPUT_CLS}
+            style={{
+              ...DLG_INPUT_STYLE,
+              borderColor: nameMissing ? "var(--destructive)" : undefined,
+            }}
+          />
+          <Text as="p" variant="error" when={nameMissing} className="mt-1 text-[11px]">
+            Contact name is required
+          </Text>
+        </div>
+        <div>
+          {primaryRequired && (
+            <FieldLabel required htmlFor={`${fieldId}-phone`}>
+              POC phone
+            </FieldLabel>
+          )}
+          <input
+            id={`${fieldId}-phone`}
+            value={pocPhone}
+            onChange={(event) => onPocPhoneChange(event.target.value)}
+            placeholder="POC phone"
+            className={DLG_INPUT_CLS}
+            style={{
+              ...DLG_INPUT_STYLE,
+              borderColor: phoneMissing ? "var(--destructive)" : undefined,
+            }}
+          />
+          <Text as="p" variant="error" when={phoneMissing} className="mt-1 text-[11px]">
+            Contact phone is required
+          </Text>
+        </div>
+        <textarea
+          value={pocNotes}
+          onChange={(event) => onPocNotesChange(event.target.value)}
+          placeholder="Notes…"
+          rows={2}
+          className={`${DLG_INPUT_CLS} resize-none`}
+          style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit" }}
+        />
+      </div>
+
+      {additionalContacts.map((contact, index) => (
+        <AdditionalPocCard
+          key={`additional-poc-${index}`}
+          contact={contact}
+          index={index}
+          onChange={(patch) =>
+            onAdditionalContactsChange(updateContactAt(additionalContacts, index, patch))
+          }
+          onRemove={() =>
+            onAdditionalContactsChange(
+              additionalContacts.filter((_, contactIndex) => contactIndex !== index),
+            )
+          }
+        />
+      ))}
+
+      <Button
+        type="button"
+        variant="ghost"
+        className="mt-3 min-h-0 gap-1.5 px-0 py-1 text-[12px]"
+        style={{ color: "var(--color-primary)" }}
+        onClick={handleAddContact}
+      >
+        <Plus size={14} className="shrink-0" />
+        Add point of contact
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/uplifts/revoke-uplift-dialog.tsx b/src/app/(protected)/workorders/_components/uplifts/revoke-uplift-dialog.tsx
new file mode 100644
index 00000000..2c7b9584
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/uplifts/revoke-uplift-dialog.tsx
@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+import { Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@mui/material";
+import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
+import { Button } from "@/components/ui/button";
+import { DialogCancelButton } from "@/components/ui/dialog-cancel-button";
+import { Text } from "@/components/ui/text";
+import { guardDialogClose } from "@/lib/dialog-guard";
+
+type RevokeUpliftDialogProps = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: (reason: string) => void;
+  pending?: boolean;
+  requireReason?: boolean;
+  title?: string;
+  description?: string;
+};
+
+export function RevokeUpliftDialog({
+  open,
+  onClose,
+  onConfirm,
+  pending = false,
+  requireReason = false,
+  title = "Revoke auto-approved uplift?",
+  description = "This will mark the uplift as revoked. Optional reason is stored with the decision.",
+}: RevokeUpliftDialogProps) {
+  const [reason, setReason] = useState("");
+
+  // Clear only after the dialog closes (parent closes on mutation success).
+  useEffect(() => {
+    if (!open) {
+      setReason("");
+    }
+  }, [open]);
+
+  const handleClose = () => {
+    if (pending) return;
+    onClose();
+  };
+
+  const handleConfirm = () => {
+    onConfirm(reason.trim());
+  };
+
+  const reasonMissing = requireReason && reason.trim() === "";
+
+  return (
+    <Dialog open={open} onClose={guardDialogClose(pending, handleClose)} maxWidth="xs" fullWidth>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <Text as="p" variant="description" className="mb-3">
+          {description}
+        </Text>
+        <FieldLabel htmlFor="wo-revoke-uplift-reason" required={requireReason}>
+          Reason
+        </FieldLabel>
+        <TextField
+          id="wo-revoke-uplift-reason"
+          fullWidth
+          multiline
+          minRows={2}
+          value={reason}
+          required={requireReason}
+          onChange={(event) => setReason(event.target.value)}
+        />
+      </DialogContent>
+      <DialogActions>
+        <DialogCancelButton onClick={handleClose} disabled={pending} />
+        <Button
+          variant="destructive"
+          className="min-h-0 px-3 py-1 text-[12px]"
+          disabled={pending || reasonMissing}
+          onClick={handleConfirm}
+        >
+          Revoke
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/uplifts/work-order-uplift-create-form.tsx b/src/app/(protected)/workorders/_components/uplifts/work-order-uplift-create-form.tsx
new file mode 100644
index 00000000..8e0902e6
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/uplifts/work-order-uplift-create-form.tsx
@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { Button, TextField } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import { formatUpliftMoney } from "@/domain/work-orders/utils/uplift-display-utils";
+
+type WorkOrderUpliftCreateFormProps = {
+  pending?: boolean;
+  remainingAllowance: number;
+  onSubmit: (input: { amount: number; notes: string }) => void | Promise<void>;
+};
+
+function amountHelperText(parsedAmount: number, remainingAllowance: number): string {
+  const remaining = `Remaining auto-approval: ${formatUpliftMoney(remainingAllowance)}.`;
+  if (!Number.isFinite(parsedAmount) || parsedAmount <= 0) {
+    return remaining;
+  }
+  if (parsedAmount <= remainingAllowance) {
+    return `${remaining} This request will auto-approve.`;
+  }
+  return `${remaining} This request will go to the admin approval queue.`;
+}
+
+export function WorkOrderUpliftCreateForm({
+  pending = false,
+  remainingAllowance,
+  onSubmit,
+}: WorkOrderUpliftCreateFormProps) {
+  const [amount, setAmount] = useState("");
+  const [notes, setNotes] = useState("");
+
+  const parsedAmount = Number(amount);
+  const canSubmit = Number.isFinite(parsedAmount) && parsedAmount > 0 && notes.trim().length > 0;
+
+  const handleSubmit = async () => {
+    try {
+      await onSubmit({ amount: parsedAmount, notes: notes.trim() });
+      setAmount("");
+      setNotes("");
+    } catch {
+      // Mutation onError already toasts; keep form values after failure.
+    }
+  };
+
+  return (
+    <div className="rounded-lg border border-[var(--color-border)] p-3">
+      <Text as="p" variant="label" className="mb-2">
+        Request uplift
+      </Text>
+      <div className="grid gap-2">
+        <TextField
+          label="Amount"
+          type="number"
+          size="small"
+          value={amount}
+          onChange={(event) => setAmount(event.target.value)}
+          helperText={amountHelperText(parsedAmount, remainingAllowance)}
+          slotProps={{ htmlInput: { min: 0, step: "0.01" } }}
+        />
+        <TextField
+          label="Notes"
+          size="small"
+          multiline
+          minRows={2}
+          value={notes}
+          onChange={(event) => setNotes(event.target.value)}
+        />
+        <TextField
+          label="Attachments"
+          size="small"
+          disabled
+          helperText="Attachment upload will be wired when BE accepts files."
+        />
+        <Button
+          variant="contained"
+          disabled={!canSubmit || pending}
+          onClick={() => {
+            void handleSubmit();
+          }}
+        >
+          Create uplift
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/uplifts/work-order-uplift-list-item.tsx b/src/app/(protected)/workorders/_components/uplifts/work-order-uplift-list-item.tsx
new file mode 100644
index 00000000..0578302c
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/uplifts/work-order-uplift-list-item.tsx
@@ -0,0 +1,80 @@
+import { Button } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderUplift } from "@/domain/work-orders/types/work-order-uplift";
+import {
+  canRevokeWorkOrderUplift,
+  formatUpliftMoney,
+  formatUpliftStatusLabel,
+  getUpliftStatusPillStyle,
+} from "@/domain/work-orders/utils/uplift-display-utils";
+
+type WorkOrderUpliftListItemProps = {
+  uplift: WorkOrderUplift;
+  readOnly: boolean;
+  currentUserId: string | number | null | undefined;
+  pendingAction?: boolean;
+  onCancel?: () => void;
+  onRevoke?: () => void;
+};
+
+export function WorkOrderUpliftListItem({
+  uplift,
+  readOnly,
+  currentUserId,
+  pendingAction = false,
+  onCancel,
+  onRevoke,
+}: WorkOrderUpliftListItemProps) {
+  const pillStyle = getUpliftStatusPillStyle(uplift.status);
+  const showCancel = !readOnly && uplift.status === "pending" && Boolean(onCancel);
+  const showRevoke =
+    !readOnly && canRevokeWorkOrderUplift(uplift, currentUserId) && Boolean(onRevoke);
+
+  return (
+    <div className="rounded-lg border border-[var(--color-border)] p-3">
+      <div className="mb-2 flex flex-wrap items-center gap-2">
+        <span
+          className="inline-flex rounded-full px-2 py-0.5 text-[11px] font-semibold"
+          style={pillStyle}
+        >
+          {formatUpliftStatusLabel(uplift.status)}
+        </span>
+        <Text as="span" variant="label">
+          {formatUpliftMoney(uplift.amount)}
+        </Text>
+      </div>
+      {Boolean(uplift.notes) && (
+        <Text as="p" variant="description" className="mb-2">
+          {uplift.notes}
+        </Text>
+      )}
+      {Boolean(uplift.requestedByName) && (
+        <Text as="p" variant="caption" tone="muted">
+          Requested by {uplift.requestedByName}
+        </Text>
+      )}
+      {showCancel && (
+        <Button
+          size="small"
+          color="inherit"
+          disabled={pendingAction}
+          onClick={onCancel}
+          className="mt-2"
+        >
+          Cancel pending
+        </Button>
+      )}
+      {showRevoke && (
+        <Button
+          size="small"
+          color="error"
+          disabled={pendingAction}
+          onClick={onRevoke}
+          className="mt-2"
+        >
+          Revoke
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/uplifts/work-order-uplifts-dialog-content.tsx b/src/app/(protected)/workorders/_components/uplifts/work-order-uplifts-dialog-content.tsx
new file mode 100644
index 00000000..b0c0c6a0
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/uplifts/work-order-uplifts-dialog-content.tsx
@@ -0,0 +1,101 @@
+import { CircularProgress } from "@mui/material";
+import { QueryErrorPanel } from "@/components/ui/query-error-panel";
+import { Text } from "@/components/ui/text";
+import { WorkOrderUpliftCreateForm } from "@/app/(protected)/workorders/_components/uplifts/work-order-uplift-create-form";
+import { WorkOrderUpliftListItem } from "@/app/(protected)/workorders/_components/uplifts/work-order-uplift-list-item";
+import type {
+  CreateWorkOrderUpliftInput,
+  WorkOrderUplift,
+} from "@/domain/work-orders/types/work-order-uplift";
+import { hasOpenWorkOrderUplift } from "@/domain/work-orders/utils/uplift-display-utils";
+
+type WorkOrderUpliftsDialogContentProps = {
+  readOnly: boolean;
+  currentUserId: string | number | null | undefined;
+  readOnlyStatusLabel?: string;
+  isLoading: boolean;
+  error: Error | null;
+  uplifts: WorkOrderUplift[];
+  remainingAllowance: number;
+  actionPending: boolean;
+  createPending: boolean;
+  onRetry: () => void;
+  onCreate: (input: CreateWorkOrderUpliftInput) => void | Promise<void>;
+  onCancelUplift: (upliftId: string | number) => void;
+  onRevokeUplift: (upliftId: string | number) => void;
+};
+
+export function WorkOrderUpliftsDialogContent({
+  readOnly,
+  currentUserId,
+  readOnlyStatusLabel,
+  isLoading,
+  error,
+  uplifts,
+  remainingAllowance,
+  actionPending,
+  createPending,
+  onRetry,
+  onCreate,
+  onCancelUplift,
+  onRevokeUplift,
+}: WorkOrderUpliftsDialogContentProps) {
+  const hasOpenRequest = hasOpenWorkOrderUplift(uplifts);
+
+  return (
+    <>
+      {readOnly && (
+        <Text as="p" variant="description" tone="muted">
+          This work order is {readOnlyStatusLabel?.toLowerCase()}. Uplifts are read-only.
+        </Text>
+      )}
+
+      {Boolean(error) && (
+        <QueryErrorPanel
+          compact
+          message={error instanceof Error ? error.message : "Failed to load uplifts."}
+          onRetry={onRetry}
+        />
+      )}
+
+      {isLoading && (
+        <div className="flex justify-center py-6">
+          <CircularProgress size={24} />
+        </div>
+      )}
+
+      {!isLoading && !error && uplifts.length === 0 && (
+        <Text as="p" variant="description" tone="muted">
+          No uplift requests yet.
+        </Text>
+      )}
+
+      {!isLoading &&
+        uplifts.map((uplift) => (
+          <WorkOrderUpliftListItem
+            key={String(uplift.id)}
+            uplift={uplift}
+            readOnly={readOnly}
+            currentUserId={currentUserId}
+            pendingAction={actionPending}
+            onCancel={readOnly ? undefined : () => onCancelUplift(uplift.id)}
+            onRevoke={readOnly ? undefined : () => onRevokeUplift(uplift.id)}
+          />
+        ))}
+
+      {!readOnly && !isLoading && hasOpenRequest && (
+        <Text as="p" variant="description" tone="muted">
+          Cancel the pending request to file a new one.
+        </Text>
+      )}
+
+      {!readOnly && !isLoading && !hasOpenRequest && (
+        <WorkOrderUpliftCreateForm
+          pending={createPending}
+          remainingAllowance={remainingAllowance}
+          onSubmit={onCreate}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/uplifts/work-order-uplifts-dialog.tsx b/src/app/(protected)/workorders/_components/uplifts/work-order-uplifts-dialog.tsx
new file mode 100644
index 00000000..7e6cbc27
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/uplifts/work-order-uplifts-dialog.tsx
@@ -0,0 +1,122 @@
+import { useMemo, useState } from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import { RevokeUpliftDialog } from "@/app/(protected)/workorders/_components/uplifts/revoke-uplift-dialog";
+import { WorkOrderUpliftsDialogContent } from "@/app/(protected)/workorders/_components/uplifts/work-order-uplifts-dialog-content";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WorkOrderUpliftStatus } from "@/domain/work-orders/types/work-order-uplift";
+import {
+  useCancelWorkOrderUplift,
+  useCreateWorkOrderUplift,
+  useRevokeWorkOrderUplift,
+  useWorkOrderUplifts,
+} from "@/domain/work-orders/use-cases/use-work-order-uplifts";
+import {
+  getRemainingUpliftAllowance,
+  isWorkOrderUpliftsReadOnly,
+  upliftRevokeRequiresReason,
+} from "@/domain/work-orders/utils/uplift-display-utils";
+import { useAuthContext } from "@/providers/auth-context";
+
+type RevokeTarget = {
+  id: string | number;
+  status: WorkOrderUpliftStatus;
+};
+
+type WorkOrderUpliftsDialogProps = {
+  row: WorkOrderTableRow | null;
+  open: boolean;
+  onClose: () => void;
+};
+
+export function WorkOrderUpliftsDialog({ row, open, onClose }: WorkOrderUpliftsDialogProps) {
+  const { user } = useAuthContext();
+  const workOrderId = row?.id ?? null;
+  const readOnly = row ? isWorkOrderUpliftsReadOnly(row.status) : true;
+  const {
+    data: uplifts = [],
+    isLoading,
+    error,
+    refetch,
+  } = useWorkOrderUplifts(open ? workOrderId : null);
+  const createUplift = useCreateWorkOrderUplift(workOrderId ?? "");
+  const cancelUplift = useCancelWorkOrderUplift(workOrderId ?? "");
+  const revokeUplift = useRevokeWorkOrderUplift(workOrderId ?? "");
+  const [revokeTarget, setRevokeTarget] = useState<RevokeTarget | null>(null);
+
+  const actionPending = createUplift.isPending || cancelUplift.isPending || revokeUplift.isPending;
+
+  const revokeDialogCopy = useMemo(() => {
+    if (revokeTarget?.status === "approved") {
+      return {
+        title: "Revoke approved uplift?",
+        description:
+          "Admin revoke requires a reason. This will mark the uplift as revoked and store your note with the decision.",
+      };
+    }
+    return {
+      title: "Revoke auto-approved uplift?",
+      description:
+        "This will mark the uplift as revoked. Optional reason is stored with the decision.",
+    };
+  }, [revokeTarget?.status]);
+
+  const handleRevokeUplift = (upliftId: string | number) => {
+    const uplift = uplifts.find((item) => String(item.id) === String(upliftId));
+    if (!uplift) {
+      return;
+    }
+    setRevokeTarget({ id: upliftId, status: uplift.status });
+  };
+
+  const remainingAllowance = getRemainingUpliftAllowance(row?.type ?? "", uplifts);
+
+  return (
+    <>
+      <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+        <DialogTitle>Uplifts — WO {row?.woNumber ?? ""}</DialogTitle>
+        <DialogContent className="flex flex-col gap-3">
+          <WorkOrderUpliftsDialogContent
+            readOnly={readOnly}
+            currentUserId={user?.id}
+            readOnlyStatusLabel={row?.status}
+            isLoading={isLoading}
+            error={error}
+            uplifts={uplifts}
+            remainingAllowance={remainingAllowance}
+            actionPending={actionPending}
+            createPending={createUplift.isPending}
+            onRetry={() => void refetch()}
+            onCreate={async (input) => {
+              await createUplift.mutateAsync(input);
+            }}
+            onCancelUplift={(upliftId) => cancelUplift.mutate(upliftId)}
+            onRevokeUplift={handleRevokeUplift}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onClose}>Close</Button>
+        </DialogActions>
+      </Dialog>
+
+      <RevokeUpliftDialog
+        open={revokeTarget != null}
+        pending={revokeUplift.isPending}
+        requireReason={
+          revokeTarget != null ? upliftRevokeRequiresReason(revokeTarget.status) : false
+        }
+        title={revokeDialogCopy.title}
+        description={revokeDialogCopy.description}
+        onClose={() => setRevokeTarget(null)}
+        onConfirm={(reason) => {
+          if (revokeTarget == null) {
+            return;
+          }
+          revokeUplift.mutate(
+            { upliftId: revokeTarget.id, reason },
+            { onSuccess: () => setRevokeTarget(null) },
+          );
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/use-vendor-editor.ts b/src/app/(protected)/workorders/_components/use-vendor-editor.ts
new file mode 100644
index 00000000..b666f1b7
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/use-vendor-editor.ts
@@ -0,0 +1,151 @@
+import { useState } from "react";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import { useUpdateWorkOrderVendor } from "@/domain/work-orders/use-cases/use-work-order-mutations";
+
+export interface VendorEditorState {
+  vendorId: string | number;
+  vendorName: string;
+  contactName: string;
+  phone: string;
+  email: string;
+  notes: string;
+}
+
+const PHONE_PATTERN = /^\(\d{3}\) \d{3}-\d{4}$/;
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const MAX_CONTACT_LENGTH = 200;
+const MAX_NOTES_LENGTH = 2000;
+
+export function formatPhoneMask(input: string): string {
+  const digits = input.replace(/\D/g, "").slice(0, 10);
+  if (digits.length <= 3) return digits;
+  if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+}
+
+export function isVendorEditorValid(editor: VendorEditorState): boolean {
+  const phoneValid = editor.phone === "" || PHONE_PATTERN.test(editor.phone);
+  const emailValid = editor.email === "" || EMAIL_PATTERN.test(editor.email);
+  return (
+    phoneValid &&
+    emailValid &&
+    editor.notes.length <= MAX_NOTES_LENGTH &&
+    editor.contactName.length <= MAX_CONTACT_LENGTH
+  );
+}
+
+interface UseVendorEditorOptions {
+  workOrderId: string;
+  onSaved: () => void;
+}
+
+export interface UseVendorEditorResult {
+  editor: VendorEditorState | null;
+  loading: boolean;
+  error: string;
+  isPending: boolean;
+  phoneInvalid: boolean;
+  isValid: boolean;
+  open: (event: React.MouseEvent, vendorId: string | number, vendorName: string) => Promise<void>;
+  close: () => void;
+  save: () => void;
+  updateField: (field: keyof VendorEditorState, value: string) => void;
+}
+
+export function useVendorEditor({
+  workOrderId,
+  onSaved,
+}: UseVendorEditorOptions): UseVendorEditorResult {
+  const vendorMutation = useUpdateWorkOrderVendor(workOrderId);
+  const [editor, setEditor] = useState<VendorEditorState | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const open = async (event: React.MouseEvent, vendorId: string | number, vendorName: string) => {
+    event.stopPropagation();
+    setError("");
+    setLoading(true);
+    setEditor({
+      vendorId,
+      vendorName,
+      contactName: "",
+      phone: "",
+      email: "",
+      notes: "",
+    });
+
+    try {
+      const vendor = await vendorsApi.getById(vendorId);
+      setEditor({
+        vendorId,
+        vendorName: vendor.companyName || vendorName,
+        contactName: vendor.contactName,
+        phone: vendor.phone,
+        email: vendor.email,
+        notes: vendor.notes,
+      });
+    } catch (vendorError) {
+      setError(
+        vendorError instanceof Error ? vendorError.message : "Unable to load vendor details",
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const close = () => {
+    if (!vendorMutation.isPending) {
+      setEditor(null);
+    }
+  };
+
+  const save = () => {
+    if (!editor || !isVendorEditorValid(editor)) return;
+    const numericWorkOrderId = Number(workOrderId);
+    if (!Number.isInteger(numericWorkOrderId) || numericWorkOrderId <= 0) {
+      setError("A valid work order is required");
+      return;
+    }
+
+    vendorMutation.mutate(
+      {
+        vendorId: editor.vendorId,
+        payload: {
+          workOrderId: numericWorkOrderId,
+          contactName: editor.contactName.trim(),
+          phone: editor.phone,
+          email: editor.email.trim(),
+          notes: editor.notes.trim(),
+        },
+      },
+      {
+        onSuccess: () => {
+          setEditor(null);
+          onSaved();
+        },
+        onError: (vendorError) => setError(vendorError.message),
+      },
+    );
+  };
+
+  const updateField = (field: keyof VendorEditorState, value: string) => {
+    setEditor((current) =>
+      current
+        ? { ...current, [field]: field === "phone" ? formatPhoneMask(value) : value }
+        : current,
+    );
+  };
+
+  return {
+    editor,
+    loading,
+    error,
+    isPending: vendorMutation.isPending,
+    phoneInvalid: Boolean(editor?.phone && !PHONE_PATTERN.test(editor.phone)),
+    isValid: editor ? isVendorEditorValid(editor) : false,
+    open,
+    close,
+    save,
+    updateField,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/vendor-assignment-section.tsx b/src/app/(protected)/workorders/_components/vendor-assignment-section.tsx
new file mode 100644
index 00000000..92e55413
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/vendor-assignment-section.tsx
@@ -0,0 +1,153 @@
+import {
+  Alert,
+  Autocomplete,
+  Box,
+  Chip,
+  FormControlLabel,
+  Stack,
+  Switch,
+  TextField,
+} from "@mui/material";
+import { Text } from "@/components/ui/text";
+import type { VendorAvailability } from "@/domain/vendor-operations/types/vendor-operations";
+
+function SectionTitle({ children }: { children: string }) {
+  return (
+    <Text variant="label" className="mb-3 font-semibold uppercase tracking-wide">
+      {children}
+    </Text>
+  );
+}
+
+type VendorAndTimeSectionProps = {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  availableVendors: VendorAvailability[];
+  isLoadingVendors: boolean;
+  selectedVendorId: number | null;
+  onSelectVendor: (id: number | null) => void;
+  estimatedArrivalAt: string;
+  onEtaChange: (value: string) => void;
+  etaManualOverride: boolean;
+  onOverrideChange: (value: boolean) => void;
+  scheduledStartLocal: string;
+  onScheduledStartChange: (value: string) => void;
+  scheduledEndLocal: string;
+  onScheduledEndChange: (value: string) => void;
+  scheduleBoundsError: string | null;
+};
+
+export function VendorAndTimeSection({
+  containerRef,
+  availableVendors,
+  isLoadingVendors,
+  selectedVendorId,
+  onSelectVendor,
+  estimatedArrivalAt,
+  onEtaChange,
+  etaManualOverride,
+  onOverrideChange,
+  scheduledStartLocal,
+  onScheduledStartChange,
+  scheduledEndLocal,
+  onScheduledEndChange,
+  scheduleBoundsError,
+}: VendorAndTimeSectionProps) {
+  const hasBoundsError = Boolean(scheduleBoundsError);
+  return (
+    <Box ref={containerRef} role="region" aria-label="Vendor & Time" tabIndex={-1}>
+      <SectionTitle>Vendor & Time</SectionTitle>
+      <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+        <TextField
+          label="Appointment start"
+          type="datetime-local"
+          value={scheduledStartLocal}
+          onChange={(event) => onScheduledStartChange(event.target.value)}
+          error={hasBoundsError}
+          slotProps={{ inputLabel: { shrink: true } }}
+          className="flex-1"
+        />
+        <TextField
+          label="Appointment end"
+          type="datetime-local"
+          value={scheduledEndLocal}
+          onChange={(event) => onScheduledEndChange(event.target.value)}
+          error={hasBoundsError}
+          slotProps={{ inputLabel: { shrink: true } }}
+          className="flex-1"
+        />
+      </Stack>
+      <Text variant="error" when={hasBoundsError} className="mt-1">
+        {scheduleBoundsError}
+      </Text>
+      <Stack direction={{ xs: "column", md: "row" }} spacing={2} className="mt-2">
+        <Autocomplete
+          options={availableVendors}
+          loading={isLoadingVendors}
+          getOptionLabel={(option) =>
+            `${option.companyName}${option.contactName ? ` · ${option.contactName}` : ""}`
+          }
+          value={availableVendors.find((vendor) => vendor.id === selectedVendorId) ?? null}
+          onChange={(_event, option) => onSelectVendor(option?.id ?? null)}
+          renderOption={(props, option) => (
+            <li {...props} key={option.id}>
+              <Stack className="w-full">
+                <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
+                  <Text as="span">
+                    {option.companyName}
+                    {option.contactName ? ` · ${option.contactName}` : ""}
+                  </Text>
+                  {option.isPreferred && <Chip label="Preferred" color="primary" size="small" />}
+                  <Chip
+                    label={option.availabilityStatus}
+                    color={
+                      option.availabilityStatus === "Available"
+                        ? "success"
+                        : option.availabilityStatus === "Unavailable"
+                          ? "error"
+                          : "default"
+                    }
+                    size="small"
+                  />
+                </Stack>
+                {option.conflicts.length > 0 && (
+                  <Text variant="caption" tone="error">
+                    Conflicts with{" "}
+                    {option.conflicts.map((conflict) => conflict.workOrderNumber).join(", ")}
+                  </Text>
+                )}
+              </Stack>
+            </li>
+          )}
+          renderInput={(params) => <TextField {...params} label="Company + Technician" />}
+          className="flex-1"
+        />
+        <TextField
+          label="Assignment ETA"
+          type="datetime-local"
+          value={estimatedArrivalAt}
+          onChange={(event) => onEtaChange(event.target.value)}
+          slotProps={{ inputLabel: { shrink: true } }}
+          className="flex-1"
+        />
+        <FormControlLabel
+          control={
+            <Switch
+              checked={etaManualOverride}
+              onChange={(event) => onOverrideChange(event.target.checked)}
+            />
+          }
+          label="Manual ETA override"
+        />
+      </Stack>
+      {selectedVendorId != null &&
+        availableVendors.find((vendor) => vendor.id === selectedVendorId)?.availabilityStatus ===
+          "Unknown" && (
+          <Alert severity="warning" className="mt-2">
+            <Text as="span">
+              Availability is unknown. This selection is not treated as confirmed availability.
+            </Text>
+          </Alert>
+        )}
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/vendor-editor-dialog.tsx b/src/app/(protected)/workorders/_components/vendor-editor-dialog.tsx
new file mode 100644
index 00000000..bf26a89d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/vendor-editor-dialog.tsx
@@ -0,0 +1,102 @@
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import type { VendorEditorState } from "./use-vendor-editor";
+
+const MAX_CONTACT_LENGTH = 200;
+const MAX_NOTES_LENGTH = 2000;
+
+interface VendorEditorDialogProps {
+  editor: VendorEditorState | null;
+  loading: boolean;
+  error: string;
+  isPending: boolean;
+  phoneInvalid: boolean;
+  isValid: boolean;
+  onClose: () => void;
+  onSave: () => void;
+  onFieldChange: (field: keyof VendorEditorState, value: string) => void;
+}
+
+export function VendorEditorDialog({
+  editor,
+  loading,
+  error,
+  isPending,
+  phoneInvalid,
+  isValid,
+  onClose,
+  onSave,
+  onFieldChange,
+}: VendorEditorDialogProps) {
+  return (
+    <Dialog open={editor !== null} onClose={onClose} fullWidth maxWidth="sm">
+      <DialogTitle>Edit assigned vendor</DialogTitle>
+      <DialogContent>
+        <Stack spacing={2} className="pt-2">
+          <Typography variant="body2" color="text.secondary">
+            {editor?.vendorName}
+          </Typography>
+          {Boolean(error) && <Alert severity="error">{error}</Alert>}
+          {loading ? (
+            <Box className="flex justify-center p-6">
+              <CircularProgress size={28} />
+            </Box>
+          ) : (
+            <>
+              <TextField
+                label="Technician name"
+                value={editor?.contactName ?? ""}
+                onChange={(event) => onFieldChange("contactName", event.target.value)}
+                slotProps={{ htmlInput: { maxLength: MAX_CONTACT_LENGTH } }}
+              />
+              <TextField
+                label="Phone"
+                value={editor?.phone ?? ""}
+                onChange={(event) => onFieldChange("phone", event.target.value)}
+                error={phoneInvalid}
+                helperText="Use (XXX) XXX-XXXX"
+              />
+              <TextField
+                label="Email"
+                type="email"
+                value={editor?.email ?? ""}
+                onChange={(event) => onFieldChange("email", event.target.value)}
+              />
+              <TextField
+                label="Notes"
+                multiline
+                minRows={3}
+                value={editor?.notes ?? ""}
+                onChange={(event) => onFieldChange("notes", event.target.value)}
+                slotProps={{ htmlInput: { maxLength: MAX_NOTES_LENGTH } }}
+              />
+            </>
+          )}
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} disabled={isPending}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          onClick={onSave}
+          disabled={!editor || loading || isPending || !isValid}
+        >
+          {isPending ? "Saving..." : "Save"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-activity-panel.tsx b/src/app/(protected)/workorders/_components/view/work-order-activity-panel.tsx
new file mode 100644
index 00000000..ca276156
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-activity-panel.tsx
@@ -0,0 +1,107 @@
+import { useMemo, useState } from "react";
+import { Box, Button, Paper, Tab, Tabs } from "@mui/material";
+import { CommentMentionComposer } from "@/components/common/comment-mention-composer";
+import { CommentTimeline } from "@/components/common/comment-timeline";
+import { mapWorkOrderCommentsToTimeline } from "@/components/common/comment-timeline-mappers";
+import type {
+  WorkOrderAuditEntry,
+  WorkOrderComment,
+} from "@/domain/work-orders/types/work-order-detail";
+import { WorkOrderAuditTimeline } from "@/app/(protected)/workorders/_components/view/work-order-audit-timeline";
+import { Text } from "@/components/ui/text";
+
+export type WorkOrderActivityTab = "customer" | "internal" | "audit";
+
+type MentionUser = { id: string | number; name: string };
+
+type WorkOrderActivityPanelProps = {
+  customerComments: WorkOrderComment[];
+  internalComments: WorkOrderComment[];
+  auditLog: WorkOrderAuditEntry[];
+  mentionUsers: MentionUser[];
+  isSubmitting: boolean;
+  onSubmitComment: (text: string) => void | Promise<void>;
+};
+
+export function WorkOrderActivityPanel({
+  customerComments,
+  internalComments,
+  auditLog,
+  mentionUsers,
+  isSubmitting,
+  onSubmitComment,
+}: WorkOrderActivityPanelProps) {
+  const [activeTab, setActiveTab] = useState<WorkOrderActivityTab>("customer");
+  const [commentText, setCommentText] = useState("");
+
+  const customerTimelineItems = useMemo(
+    () => mapWorkOrderCommentsToTimeline(customerComments),
+    [customerComments],
+  );
+  const internalTimelineItems = useMemo(
+    () => mapWorkOrderCommentsToTimeline(internalComments),
+    [internalComments],
+  );
+
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Text as="p" variant="heading" className="mb-3 font-semibold">
+        Activity
+      </Text>
+      <Tabs
+        value={activeTab}
+        onChange={(_event, value: WorkOrderActivityTab) => setActiveTab(value)}
+        className="mb-3"
+      >
+        <Tab value="customer" label={`Customer (${customerComments.length})`} />
+        <Tab value="internal" label={`Internal (${internalComments.length})`} />
+        <Tab value="audit" label={`Audit Log (${auditLog.length})`} />
+      </Tabs>
+
+      {activeTab === "customer" && (
+        <CommentTimeline items={customerTimelineItems} mentionUsers={mentionUsers} />
+      )}
+      {activeTab === "internal" && (
+        <CommentTimeline items={internalTimelineItems} mentionUsers={mentionUsers} />
+      )}
+      {activeTab === "audit" && <WorkOrderAuditTimeline entries={auditLog} />}
+
+      {activeTab === "internal" && (
+        <Box
+          component="form"
+          onSubmit={(event) => {
+            event.preventDefault();
+            const trimmed = commentText.trim();
+            if (!trimmed) {
+              return;
+            }
+            void (async () => {
+              try {
+                await onSubmitComment(trimmed);
+                setCommentText("");
+              } catch {
+                // Mutation toast handles failure; keep the draft for retry.
+              }
+            })();
+          }}
+          className="mt-4 flex flex-col gap-2"
+        >
+          <CommentMentionComposer
+            value={commentText}
+            onChange={setCommentText}
+            candidates={mentionUsers}
+            disabled={isSubmitting}
+          />
+          <Button
+            type="submit"
+            variant="contained"
+            className="self-end"
+            disabled={isSubmitting || !commentText.trim()}
+          >
+            {isSubmitting ? "Sending..." : "Send"}
+          </Button>
+        </Box>
+      )}
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-audit-timeline.tsx b/src/app/(protected)/workorders/_components/view/work-order-audit-timeline.tsx
new file mode 100644
index 00000000..46c7b374
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-audit-timeline.tsx
@@ -0,0 +1,38 @@
+import { useMemo } from "react";
+import { Box, Stack, Typography } from "@mui/material";
+import type { WorkOrderAuditEntry } from "@/domain/work-orders/types/work-order";
+import { formatDateTime } from "@/lib/time-utils";
+
+export function WorkOrderAuditTimeline({ entries }: { entries: WorkOrderAuditEntry[] }) {
+  const sorted = useMemo(
+    () =>
+      [...entries].sort(
+        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+      ),
+    [entries],
+  );
+
+  if (!sorted.length) {
+    return <Typography sx={{ color: "text.secondary" }}>No changes recorded.</Typography>;
+  }
+
+  return (
+    <Stack spacing={2} className="max-h-72 overflow-y-auto">
+      {sorted.map((entry) => (
+        <Box key={String(entry.id)} className="rounded border border-border p-3">
+          <Stack direction="row" className="mb-1" sx={{ justifyContent: "space-between" }}>
+            <Typography variant="caption" className="font-semibold">
+              {entry.userName || "System"}
+            </Typography>
+            <Typography variant="caption" sx={{ color: "text.secondary" }}>
+              {entry.createdAt ? formatDateTime(entry.createdAt) : ""}
+            </Typography>
+          </Stack>
+          <Typography variant="body2">
+            <strong>{entry.fieldName}</strong> {entry.oldValue} → {entry.newValue}
+          </Typography>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-detail-field.tsx b/src/app/(protected)/workorders/_components/view/work-order-detail-field.tsx
new file mode 100644
index 00000000..1e9f5184
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-detail-field.tsx
@@ -0,0 +1,12 @@
+import { Box, Typography } from "@mui/material";
+
+export function WorkOrderDetailField({ label, value }: { label: string; value: string }) {
+  return (
+    <Box>
+      <Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
+        {label}
+      </Typography>
+      <Typography variant="body2">{value}</Typography>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-details-panel.tsx b/src/app/(protected)/workorders/_components/view/work-order-details-panel.tsx
new file mode 100644
index 00000000..55186842
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-details-panel.tsx
@@ -0,0 +1,76 @@
+import { Box, Button, Menu, MenuItem, Paper, Typography } from "@mui/material";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { Field } from "@/app/(protected)/workorders/_components/view/work-order-timelines";
+
+interface WorkOrderDetailsPanelProps {
+  wo: WorkOrderDetail;
+  users: WorkOrderUser[];
+  assignAnchor: HTMLElement | null;
+  onAssignAnchorChange: (anchor: HTMLElement | null) => void;
+  onAssign: (userId: string | number, userName: string) => void;
+}
+
+export function WorkOrderDetailsPanel({
+  wo,
+  users,
+  assignAnchor,
+  onAssignAnchorChange,
+  onAssign,
+}: WorkOrderDetailsPanelProps) {
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        Details
+      </Typography>
+      <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <Field label="Internal WO" value={wo.internalWONumber} />
+        <Field label="Customer WO" value={wo.workOrderNumber || "—"} />
+        <Field label="Priority" value={wo.priority || "—"} />
+        <Field label="Location" value={wo.location || "—"} />
+        <Box>
+          <Typography
+            variant="caption"
+            sx={{
+              color: "text.secondary",
+              display: "block",
+            }}
+          >
+            Assigned To
+          </Typography>
+          <Button size="small" onClick={(event) => onAssignAnchorChange(event.currentTarget)}>
+            {wo.assignedTo || "Unassigned"}
+          </Button>
+          <Menu
+            anchorEl={assignAnchor}
+            open={Boolean(assignAnchor)}
+            onClose={() => onAssignAnchorChange(null)}
+          >
+            <MenuItem
+              onClick={() => {
+                onAssignAnchorChange(null);
+                onAssign("", "");
+              }}
+            >
+              Unassigned
+            </MenuItem>
+            {users.map((user) => (
+              <MenuItem
+                key={String(user.id)}
+                selected={wo.assignedTo === user.name}
+                onClick={() => {
+                  onAssignAnchorChange(null);
+                  onAssign(user.id, user.name);
+                }}
+              >
+                {user.name}
+              </MenuItem>
+            ))}
+          </Menu>
+        </Box>
+        <Field label="Source" value={wo.source || "—"} />
+        <Field label="TT" value={wo.tt || "—"} />
+      </Box>
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-dispatches-accordion.tsx b/src/app/(protected)/workorders/_components/view/work-order-dispatches-accordion.tsx
new file mode 100644
index 00000000..aa48451b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-dispatches-accordion.tsx
@@ -0,0 +1,115 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import { formatDateTime, timeSince, waitTimeColor } from "@/lib/time-utils";
+
+type WorkOrderDispatchesAccordionProps = {
+  wo: WorkOrderDetail;
+  vendorViewOnly?: boolean;
+  onOpenDispatchDetail: (dispatchId: string | number) => void;
+  onOpenVendorEditor: (
+    event: React.MouseEvent,
+    vendorId: string | number,
+    vendorName: string,
+  ) => void;
+};
+
+export function WorkOrderDispatchesAccordion({
+  wo,
+  vendorViewOnly = false,
+  onOpenDispatchDetail,
+  onOpenVendorEditor,
+}: WorkOrderDispatchesAccordionProps) {
+  return (
+    <Accordion defaultExpanded={Boolean(wo.dispatches.length)}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography sx={{ fontWeight: 600 }}>Dispatches ({wo.dispatches.length})</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        {wo.dispatches.length ? (
+          <TableContainer>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>Dispatch #</TableCell>
+                  <TableCell>Vendor</TableCell>
+                  <TableCell>NTE</TableCell>
+                  <TableCell>Status</TableCell>
+                  <TableCell>Date</TableCell>
+                  <TableCell>Wait</TableCell>
+                  <TableCell align="right">Actions</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {wo.dispatches.map((dispatch) => {
+                  const waitColor = waitTimeColor(dispatch.dispatchedAt);
+                  return (
+                    <TableRow
+                      key={String(dispatch.id)}
+                      hover
+                      className="cursor-pointer"
+                      onClick={() => onOpenDispatchDetail(dispatch.id)}
+                    >
+                      <TableCell>{dispatch.dispatchNumber || dispatch.poNumber}</TableCell>
+                      <TableCell>{dispatch.vendorName}</TableCell>
+                      <TableCell>
+                        {dispatch.nteAmount != null ? `$${dispatch.nteAmount.toFixed(2)}` : "—"}
+                      </TableCell>
+                      <TableCell>{dispatch.status}</TableCell>
+                      <TableCell>
+                        {dispatch.dispatchedAt ? formatDateTime(dispatch.dispatchedAt) : "—"}
+                      </TableCell>
+                      <TableCell>
+                        {dispatch.status === "Sent" ? (
+                          <Typography
+                            variant="caption"
+                            className={
+                              waitColor === "green"
+                                ? "text-green-600"
+                                : waitColor === "yellow"
+                                  ? "text-yellow-600"
+                                  : "text-red-600"
+                            }
+                          >
+                            {timeSince(dispatch.dispatchedAt)}
+                          </Typography>
+                        ) : (
+                          "—"
+                        )}
+                      </TableCell>
+                      <TableCell align="right">
+                        <Button
+                          size="small"
+                          onClick={(event) =>
+                            void onOpenVendorEditor(event, dispatch.vendorId, dispatch.vendorName)
+                          }
+                          disabled={dispatch.vendorId === ""}
+                        >
+                          {vendorViewOnly ? "View vendor" : "Edit vendor"}
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        ) : (
+          <Typography sx={{ color: "text.secondary" }}>No dispatches yet.</Typography>
+        )}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-header-section.tsx b/src/app/(protected)/workorders/_components/view/work-order-header-section.tsx
new file mode 100644
index 00000000..0fa4ede7
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-header-section.tsx
@@ -0,0 +1,113 @@
+import { Link as RouterLink } from "react-router";
+import { Breadcrumbs, Button, Chip, Link, Menu, MenuItem, Stack, Typography } from "@mui/material";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import {
+  WORK_ORDER_STATUS_OPTIONS,
+  type WorkOrderStatus,
+} from "@/domain/work-orders/types/work-order";
+
+const STATUS_COLORS: Record<
+  string,
+  "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning"
+> = {
+  Open: "primary",
+  "In Progress": "info",
+  "On Hold": "warning",
+  Done: "success",
+  Cancelled: "default",
+};
+
+interface WorkOrderHeaderSectionProps {
+  wo: WorkOrderDetail;
+  statusAnchor: HTMLElement | null;
+  onStatusAnchorChange: (anchor: HTMLElement | null) => void;
+  onStatusChange: (status: WorkOrderStatus) => void;
+  onDispatch: () => void;
+  onEdit: () => void;
+  onBack: () => void;
+}
+
+export function WorkOrderHeaderSection({
+  wo,
+  statusAnchor,
+  onStatusAnchorChange,
+  onStatusChange,
+  onDispatch,
+  onEdit,
+  onBack,
+}: WorkOrderHeaderSectionProps) {
+  return (
+    <>
+      <Breadcrumbs>
+        <Link component={RouterLink} to="/workorders" underline="hover">
+          Work Orders
+        </Link>
+        <Typography
+          sx={{
+            color: "text.primary",
+          }}
+        >
+          {wo.internalWONumber}
+        </Typography>
+      </Breadcrumbs>
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{
+          justifyContent: "space-between",
+          alignItems: { xs: "stretch", md: "flex-start" },
+        }}
+      >
+        <Stack spacing={1}>
+          <Typography variant="h5" component="h1">
+            {wo.title}
+          </Typography>
+          <Chip
+            label={wo.status}
+            color={STATUS_COLORS[wo.status] ?? "default"}
+            onClick={(event) => onStatusAnchorChange(event.currentTarget)}
+            className="w-fit cursor-pointer"
+          />
+          <Menu
+            anchorEl={statusAnchor}
+            open={Boolean(statusAnchor)}
+            onClose={() => onStatusAnchorChange(null)}
+          >
+            {WORK_ORDER_STATUS_OPTIONS.map((status) => (
+              <MenuItem
+                key={status}
+                selected={status === wo.status}
+                onClick={() => {
+                  onStatusAnchorChange(null);
+                  if (status !== wo.status) {
+                    onStatusChange(status);
+                  }
+                }}
+              >
+                {status}
+              </MenuItem>
+            ))}
+          </Menu>
+        </Stack>
+
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            flexWrap: "wrap",
+          }}
+        >
+          <Button variant="contained" color="success" onClick={onDispatch}>
+            Dispatch
+          </Button>
+          <Button variant="contained" onClick={onEdit}>
+            Edit
+          </Button>
+          <Button variant="outlined" onClick={onBack}>
+            Back to List
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-info-accordions.tsx b/src/app/(protected)/workorders/_components/view/work-order-info-accordions.tsx
new file mode 100644
index 00000000..2fce76a7
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-info-accordions.tsx
@@ -0,0 +1,68 @@
+import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import { formatDateTime } from "@/lib/time-utils";
+import { Field } from "@/app/(protected)/workorders/_components/view/work-order-timelines";
+
+export function WorkOrderInfoAccordions({ wo }: { wo: WorkOrderDetail }) {
+  return (
+    <>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Classification</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <Field label="Problem" value={wo.problem || "—"} />
+            <Field label="Trade" value={wo.trade || "—"} />
+            <Field label="Sub-Trade" value={wo.subTrade || "—"} />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Schedule</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <Field
+              label="Created"
+              value={wo.createdDateFull ? formatDateTime(wo.createdDateFull) : "—"}
+            />
+            <Field label="Due Date" value={wo.dueDate || "—"} />
+            <Field label="Scheduled" value={wo.scheduledDate || "—"} />
+            <Field label="Completed" value={wo.completedDate || "—"} />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Financial</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <Field
+              label="Vendor NTE"
+              value={wo.vendorNTE ? `$${parseFloat(wo.vendorNTE).toFixed(2)}` : "—"}
+            />
+            <Field label="Customer PO" value={wo.po || "—"} />
+            <Field label="Customer NTE" value="Not connected" />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+    </>
+  );
+}
+
+export function WorkOrderDescriptionAccordion({ description }: { description: string }) {
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography sx={{ fontWeight: 600 }}>Description</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>{description || "No description provided."}</Typography>
+      </AccordionDetails>
+    </Accordion>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-timelines.tsx b/src/app/(protected)/workorders/_components/view/work-order-timelines.tsx
new file mode 100644
index 00000000..3ce629fb
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-timelines.tsx
@@ -0,0 +1,125 @@
+import { useMemo } from "react";
+import { Box, Stack, Typography } from "@mui/material";
+import type { WorkOrderAuditEntry, WorkOrderComment } from "@/domain/work-orders/types/work-order";
+import { formatDateTime } from "@/lib/time-utils";
+
+export function Field({ label, value }: { label: string; value: string }) {
+  return (
+    <Box>
+      <Typography
+        variant="caption"
+        sx={{
+          color: "text.secondary",
+          display: "block",
+        }}
+      >
+        {label}
+      </Typography>
+      <Typography variant="body2">{value}</Typography>
+    </Box>
+  );
+}
+
+export function CommentTimeline({ comments }: { comments: WorkOrderComment[] }) {
+  const sorted = useMemo(
+    () =>
+      [...comments].sort(
+        (a, b) => new Date(a.createdDate).getTime() - new Date(b.createdDate).getTime(),
+      ),
+    [comments],
+  );
+
+  if (!sorted.length) {
+    return (
+      <Typography
+        sx={{
+          color: "text.secondary",
+        }}
+      >
+        No comments yet.
+      </Typography>
+    );
+  }
+
+  return (
+    <Stack spacing={2} className="max-h-72 overflow-y-auto">
+      {sorted.map((comment) => (
+        <Box key={String(comment.id)} className="rounded border border-border p-3">
+          <Stack
+            direction="row"
+            className="mb-1"
+            sx={{
+              justifyContent: "space-between",
+            }}
+          >
+            <Typography variant="caption" className="font-semibold">
+              {comment.userName || comment.commenter || "System"}
+            </Typography>
+            <Typography
+              variant="caption"
+              sx={{
+                color: "text.secondary",
+              }}
+            >
+              {comment.createdDate ? formatDateTime(comment.createdDate) : ""}
+            </Typography>
+          </Stack>
+          <Typography variant="body2">{comment.commenttext}</Typography>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
+
+export function AuditTimeline({ entries }: { entries: WorkOrderAuditEntry[] }) {
+  const sorted = useMemo(
+    () =>
+      [...entries].sort(
+        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+      ),
+    [entries],
+  );
+
+  if (!sorted.length) {
+    return (
+      <Typography
+        sx={{
+          color: "text.secondary",
+        }}
+      >
+        No changes recorded.
+      </Typography>
+    );
+  }
+
+  return (
+    <Stack spacing={2} className="max-h-72 overflow-y-auto">
+      {sorted.map((entry) => (
+        <Box key={String(entry.id)} className="rounded border border-border p-3">
+          <Stack
+            direction="row"
+            className="mb-1"
+            sx={{
+              justifyContent: "space-between",
+            }}
+          >
+            <Typography variant="caption" className="font-semibold">
+              {entry.userName || "System"}
+            </Typography>
+            <Typography
+              variant="caption"
+              sx={{
+                color: "text.secondary",
+              }}
+            >
+              {entry.createdAt ? formatDateTime(entry.createdAt) : ""}
+            </Typography>
+          </Stack>
+          <Typography variant="body2">
+            <strong>{entry.fieldName}</strong> {entry.oldValue} → {entry.newValue}
+          </Typography>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-actions.tsx b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-actions.tsx
new file mode 100644
index 00000000..3c8da517
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-actions.tsx
@@ -0,0 +1,40 @@
+import { Button } from "@mui/material";
+import type { VendorEditorState } from "./work-order-vendor-editor-types";
+import { isVendorEditorValid } from "./work-order-vendor-editor-utils";
+
+type WorkOrderVendorEditorActionsProps = {
+  viewOnly: boolean;
+  editor: VendorEditorState | null;
+  loading: boolean;
+  isSaving: boolean;
+  onClose: () => void;
+  onSave: () => void;
+};
+
+export function WorkOrderVendorEditorActions({
+  viewOnly,
+  editor,
+  loading,
+  isSaving,
+  onClose,
+  onSave,
+}: WorkOrderVendorEditorActionsProps) {
+  if (viewOnly) {
+    return <Button onClick={onClose}>Close</Button>;
+  }
+
+  return (
+    <>
+      <Button onClick={onClose} disabled={isSaving}>
+        Cancel
+      </Button>
+      <Button
+        variant="contained"
+        onClick={onSave}
+        disabled={!editor || loading || isSaving || !isVendorEditorValid(editor)}
+      >
+        {isSaving ? "Saving..." : "Save"}
+      </Button>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-dialog.tsx b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-dialog.tsx
new file mode 100644
index 00000000..78439708
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-dialog.tsx
@@ -0,0 +1,73 @@
+import {
+  Alert,
+  Box,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Stack,
+  Typography,
+} from "@mui/material";
+import type { VendorEditorState } from "./work-order-vendor-editor-types";
+import { WorkOrderVendorEditorActions } from "./work-order-vendor-editor-actions";
+import { WorkOrderVendorEditorFields } from "./work-order-vendor-editor-fields";
+
+type WorkOrderVendorEditorDialogProps = {
+  editor: VendorEditorState | null;
+  loading: boolean;
+  error: string;
+  isSaving: boolean;
+  viewOnly?: boolean;
+  onClose: () => void;
+  onSave: () => void;
+  onEditorChange: (
+    updater: (current: VendorEditorState | null) => VendorEditorState | null,
+  ) => void;
+};
+
+export function WorkOrderVendorEditorDialog({
+  editor,
+  loading,
+  error,
+  isSaving,
+  viewOnly = false,
+  onClose,
+  onSave,
+  onEditorChange,
+}: WorkOrderVendorEditorDialogProps) {
+  return (
+    <Dialog open={editor !== null} onClose={onClose} fullWidth maxWidth="sm">
+      <DialogTitle>{viewOnly ? "Assigned vendor" : "Edit assigned vendor"}</DialogTitle>
+      <DialogContent>
+        <Stack spacing={2} className="pt-2">
+          <Typography variant="body2" color="text.secondary">
+            {editor?.vendorName}
+          </Typography>
+          {Boolean(error) && <Alert severity="error">{error}</Alert>}
+          {loading ? (
+            <Box className="flex justify-center p-6">
+              <CircularProgress size={28} />
+            </Box>
+          ) : (
+            <WorkOrderVendorEditorFields
+              editor={editor}
+              disabled={viewOnly}
+              onEditorChange={onEditorChange}
+            />
+          )}
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <WorkOrderVendorEditorActions
+          viewOnly={viewOnly}
+          editor={editor}
+          loading={loading}
+          isSaving={isSaving}
+          onClose={onClose}
+          onSave={onSave}
+        />
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-fields.tsx b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-fields.tsx
new file mode 100644
index 00000000..3366ed82
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-fields.tsx
@@ -0,0 +1,71 @@
+import { TextField } from "@mui/material";
+import type { VendorEditorState } from "./work-order-vendor-editor-types";
+import { formatPhoneMask } from "./work-order-vendor-editor-utils";
+
+type VendorEditorChange = (
+  updater: (current: VendorEditorState | null) => VendorEditorState | null,
+) => void;
+
+type WorkOrderVendorEditorFieldsProps = {
+  editor: VendorEditorState | null;
+  disabled: boolean;
+  onEditorChange: VendorEditorChange;
+};
+
+export function WorkOrderVendorEditorFields({
+  editor,
+  disabled,
+  onEditorChange,
+}: WorkOrderVendorEditorFieldsProps) {
+  return (
+    <>
+      <TextField
+        label="Technician name"
+        value={editor?.contactName ?? ""}
+        disabled={disabled}
+        onChange={(event) =>
+          onEditorChange((current) =>
+            current ? { ...current, contactName: event.target.value } : current,
+          )
+        }
+        slotProps={{ htmlInput: { maxLength: 200 } }}
+      />
+      <TextField
+        label="Phone"
+        value={editor?.phone ?? ""}
+        disabled={disabled}
+        onChange={(event) =>
+          onEditorChange((current) =>
+            current ? { ...current, phone: formatPhoneMask(event.target.value) } : current,
+          )
+        }
+        error={Boolean(editor?.phone && !/^\(\d{3}\) \d{3}-\d{4}$/.test(editor.phone))}
+        helperText="Use (XXX) XXX-XXXX"
+      />
+      <TextField
+        label="Email"
+        type="email"
+        value={editor?.email ?? ""}
+        disabled={disabled}
+        onChange={(event) =>
+          onEditorChange((current) =>
+            current ? { ...current, email: event.target.value } : current,
+          )
+        }
+      />
+      <TextField
+        label="Notes"
+        multiline
+        minRows={3}
+        value={editor?.notes ?? ""}
+        disabled={disabled}
+        onChange={(event) =>
+          onEditorChange((current) =>
+            current ? { ...current, notes: event.target.value } : current,
+          )
+        }
+        slotProps={{ htmlInput: { maxLength: 2000 } }}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-types.ts b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-types.ts
new file mode 100644
index 00000000..7504b91b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-types.ts
@@ -0,0 +1,8 @@
+export interface VendorEditorState {
+  vendorId: string | number;
+  vendorName: string;
+  contactName: string;
+  phone: string;
+  email: string;
+  notes: string;
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils.ts b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils.ts
new file mode 100644
index 00000000..a73099ab
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils.ts
@@ -0,0 +1,16 @@
+import type { VendorEditorState } from "./work-order-vendor-editor-types";
+
+export function formatPhoneMask(input: string): string {
+  const digits = input.replace(/\D/g, "").slice(0, 10);
+  if (digits.length <= 3) return digits;
+  if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+}
+
+export function isVendorEditorValid(editor: VendorEditorState): boolean {
+  const phoneValid = editor.phone === "" || /^\(\d{3}\) \d{3}-\d{4}$/.test(editor.phone);
+  const emailValid = editor.email === "" || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(editor.email);
+  return (
+    phoneValid && emailValid && editor.notes.length <= 2000 && editor.contactName.length <= 200
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-view-accordions.tsx b/src/app/(protected)/workorders/_components/view/work-order-view-accordions.tsx
new file mode 100644
index 00000000..707d8d61
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-view-accordions.tsx
@@ -0,0 +1,66 @@
+import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import { WorkOrderDetailField } from "@/app/(protected)/workorders/_components/view/work-order-detail-field";
+import { formatDateTime } from "@/lib/time-utils";
+
+export function WorkOrderViewAccordions({ wo }: { wo: WorkOrderDetail }) {
+  return (
+    <>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Classification</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <WorkOrderDetailField label="Problem" value={wo.problem || "—"} />
+            <WorkOrderDetailField label="Trade" value={wo.trade || "—"} />
+            <WorkOrderDetailField label="Sub-Trade" value={wo.subTrade || "—"} />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Schedule</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <WorkOrderDetailField
+              label="Created"
+              value={wo.createdDateFull ? formatDateTime(wo.createdDateFull) : "—"}
+            />
+            <WorkOrderDetailField label="Due Date" value={wo.dueDate || "—"} />
+            <WorkOrderDetailField label="Scheduled" value={wo.scheduledDate || "—"} />
+            <WorkOrderDetailField label="Completed" value={wo.completedDate || "—"} />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Financial</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <WorkOrderDetailField
+              label="Vendor NTE"
+              value={wo.vendorNTE ? `$${parseFloat(wo.vendorNTE).toFixed(2)}` : "—"}
+            />
+            <WorkOrderDetailField label="Customer PO" value={wo.po || "—"} />
+            <WorkOrderDetailField label="Customer NTE" value="Not connected" />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography sx={{ fontWeight: 600 }}>Description</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>{wo.description || "No description provided."}</Typography>
+        </AccordionDetails>
+      </Accordion>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-view-details.tsx b/src/app/(protected)/workorders/_components/view/work-order-view-details.tsx
new file mode 100644
index 00000000..0c28b48e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-view-details.tsx
@@ -0,0 +1,79 @@
+import { Box, Button, Menu, MenuItem, Paper, Typography } from "@mui/material";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import { WorkOrderDetailField } from "@/app/(protected)/workorders/_components/view/work-order-detail-field";
+import { Text } from "@/components/ui/text";
+
+type WorkOrderViewDetailsProps = {
+  wo: WorkOrderDetail;
+  users: WorkOrderUser[];
+  assignAnchor: HTMLElement | null;
+  onAssignAnchorChange: (anchor: HTMLElement | null) => void;
+  onAssign: (userId: string | number, userName: string) => void;
+  onUnassign: () => void;
+  readOnly?: boolean;
+};
+
+export function WorkOrderViewDetails({
+  wo,
+  users,
+  assignAnchor,
+  onAssignAnchorChange,
+  onAssign,
+  onUnassign,
+  readOnly = false,
+}: WorkOrderViewDetailsProps) {
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Text as="p" variant="heading" className="mb-3 font-semibold">
+        Details
+      </Text>
+      <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <WorkOrderDetailField label="Internal WO" value={wo.internalWONumber} />
+        <WorkOrderDetailField label="Customer WO" value={wo.workOrderNumber || "—"} />
+        <WorkOrderDetailField label="Priority" value={wo.priority || "—"} />
+        <WorkOrderDetailField label="Location" value={wo.location || "—"} />
+        {readOnly ? (
+          <WorkOrderDetailField label="Assigned To" value={wo.assignedTo || "Unassigned"} />
+        ) : (
+          <Box>
+            <Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
+              Assigned To
+            </Typography>
+            <Button size="small" onClick={(event) => onAssignAnchorChange(event.currentTarget)}>
+              {wo.assignedTo || "Unassigned"}
+            </Button>
+            <Menu
+              anchorEl={assignAnchor}
+              open={Boolean(assignAnchor)}
+              onClose={() => onAssignAnchorChange(null)}
+            >
+              <MenuItem
+                onClick={() => {
+                  onAssignAnchorChange(null);
+                  onUnassign();
+                }}
+              >
+                Unassigned
+              </MenuItem>
+              {users.map((user) => (
+                <MenuItem
+                  key={String(user.id)}
+                  selected={wo.assignedTo === user.name}
+                  onClick={() => {
+                    onAssignAnchorChange(null);
+                    onAssign(user.id, user.name);
+                  }}
+                >
+                  {user.name}
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+        )}
+        <WorkOrderDetailField label="Source" value={wo.source || "—"} />
+        <WorkOrderDetailField label="TT" value={wo.tt || "—"} />
+      </Box>
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-view-header.tsx b/src/app/(protected)/workorders/_components/view/work-order-view-header.tsx
new file mode 100644
index 00000000..096bf32b
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-view-header.tsx
@@ -0,0 +1,73 @@
+import { Link as RouterLink, useNavigate } from "react-router";
+import { Breadcrumbs, Button, Link, Stack, Typography } from "@mui/material";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import { WorkOrderViewStatusControl } from "./work-order-view-status-control";
+
+type WorkOrderViewHeaderProps = {
+  wo: WorkOrderDetail;
+  workOrderId: string;
+  /** False while board detail is pending/errored — fail closed for Done. */
+  isClosabilityReady: boolean;
+  statusAnchor: HTMLElement | null;
+  onStatusAnchorChange: (anchor: HTMLElement | null) => void;
+  onStatusChange: (status: string) => void;
+  onOpenDispatch: () => void;
+  readOnly?: boolean;
+};
+
+export function WorkOrderViewHeader({
+  wo,
+  workOrderId,
+  isClosabilityReady,
+  statusAnchor,
+  onStatusAnchorChange,
+  onStatusChange,
+  onOpenDispatch,
+  readOnly = false,
+}: WorkOrderViewHeaderProps) {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <Breadcrumbs>
+        <Link component={RouterLink} to="/workorders" underline="hover">
+          Work Orders
+        </Link>
+        <Typography sx={{ color: "text.primary" }}>{wo.internalWONumber}</Typography>
+      </Breadcrumbs>
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{ justifyContent: "space-between", alignItems: { xs: "stretch", md: "flex-start" } }}
+      >
+        <Stack spacing={1}>
+          <Typography variant="h5" component="h1">
+            {wo.title}
+          </Typography>
+          <WorkOrderViewStatusControl
+            wo={wo}
+            readOnly={readOnly}
+            isClosabilityReady={isClosabilityReady}
+            statusAnchor={statusAnchor}
+            onStatusAnchorChange={onStatusAnchorChange}
+            onStatusChange={onStatusChange}
+          />
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: "wrap" }}>
+          <Button variant="contained" color="success" onClick={onOpenDispatch}>
+            Dispatch
+          </Button>
+          {Boolean(!readOnly) && (
+            <Button variant="contained" onClick={() => navigate(`/workorders/edit/${workOrderId}`)}>
+              Edit
+            </Button>
+          )}
+          <Button variant="outlined" onClick={() => navigate("/workorders")}>
+            Back to List
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/view/work-order-view-status-control.tsx b/src/app/(protected)/workorders/_components/view/work-order-view-status-control.tsx
new file mode 100644
index 00000000..85775d8e
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/view/work-order-view-status-control.tsx
@@ -0,0 +1,103 @@
+import { Chip, Menu, MenuItem } from "@mui/material";
+import { WORK_ORDER_STATUS_OPTIONS } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import {
+  detailToClosabilityInput,
+  formatClosabilityMissingTitle,
+  getClosabilityGaps,
+  isCompletionStatusLabel,
+} from "@/domain/work-orders/utils/wo-closability";
+
+const STATUS_COLORS: Record<
+  string,
+  "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning"
+> = {
+  Open: "primary",
+  "In Progress": "info",
+  "On Hold": "warning",
+  Done: "success",
+  Completed: "success",
+  Cancelled: "default",
+  Canceled: "default",
+};
+
+const CLOSABILITY_UNAVAILABLE_TITLE = "Unable to verify completion requirements";
+const LOCKED_STATUS_LABEL = "Status is locked because this work order is completed";
+
+type WorkOrderViewStatusControlProps = {
+  wo: WorkOrderDetail;
+  readOnly?: boolean;
+  isClosabilityReady: boolean;
+  statusAnchor: HTMLElement | null;
+  onStatusAnchorChange: (anchor: HTMLElement | null) => void;
+  onStatusChange: (status: string) => void;
+};
+
+export function WorkOrderViewStatusControl({
+  wo,
+  readOnly = false,
+  isClosabilityReady,
+  statusAnchor,
+  onStatusAnchorChange,
+  onStatusChange,
+}: WorkOrderViewStatusControlProps) {
+  const chipColor = STATUS_COLORS[wo.status] ?? "default";
+
+  if (readOnly) {
+    return (
+      <Chip
+        label={wo.status}
+        color={chipColor}
+        className="w-fit"
+        aria-disabled
+        aria-label={LOCKED_STATUS_LABEL}
+      />
+    );
+  }
+
+  const closabilityGaps = getClosabilityGaps(detailToClosabilityInput(wo));
+
+  return (
+    <>
+      <Chip
+        label={wo.status}
+        color={chipColor}
+        onClick={(event) => onStatusAnchorChange(event.currentTarget)}
+        className="w-fit cursor-pointer"
+      />
+      <Menu
+        anchorEl={statusAnchor}
+        open={Boolean(statusAnchor)}
+        onClose={() => onStatusAnchorChange(null)}
+      >
+        {WORK_ORDER_STATUS_OPTIONS.map((status) => {
+          const isCompletionStatus = isCompletionStatusLabel(status);
+          const isCompletedBlocked =
+            isCompletionStatus && (!isClosabilityReady || closabilityGaps.length > 0);
+          const blockedTitle = !isClosabilityReady
+            ? CLOSABILITY_UNAVAILABLE_TITLE
+            : formatClosabilityMissingTitle(closabilityGaps);
+          return (
+            <MenuItem
+              key={status}
+              selected={status === wo.status}
+              disabled={isCompletedBlocked}
+              title={isCompletedBlocked ? blockedTitle : undefined}
+              onClick={() => {
+                if (isCompletedBlocked) {
+                  return;
+                }
+                onStatusAnchorChange(null);
+                if (status !== wo.status) {
+                  onStatusChange(status);
+                }
+              }}
+            >
+              {status}
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/mini-calendar-cell-style.ts b/src/app/(protected)/workorders/_components/wizard/mini-calendar-cell-style.ts
new file mode 100644
index 00000000..3bb28759
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/mini-calendar-cell-style.ts
@@ -0,0 +1,71 @@
+export type MiniCalendarCellStyle = {
+  bg: string;
+  fg: string;
+  radius: number | string;
+  filled: boolean;
+};
+
+function rangeBounds(rangeStart: string, rangeEnd: string): { lo: string; hi: string } {
+  if (!rangeEnd) {
+    return { lo: rangeStart, hi: rangeStart };
+  }
+  return rangeStart <= rangeEnd
+    ? { lo: rangeStart, hi: rangeEnd }
+    : { lo: rangeEnd, hi: rangeStart };
+}
+
+function rangeCellStyle(
+  iso: string,
+  rangeStart: string,
+  rangeEnd: string,
+): MiniCalendarCellStyle | null {
+  const { lo, hi } = rangeBounds(rangeStart, rangeEnd);
+  const filledStyle = { fg: "var(--color-primary-foreground)", bg: "var(--color-primary)" };
+
+  if (lo === hi) {
+    return iso === lo ? { ...filledStyle, radius: 4, filled: true } : null;
+  }
+  if (iso === lo) {
+    return { ...filledStyle, radius: "4px 0 0 4px", filled: true };
+  }
+  if (iso === hi) {
+    return { ...filledStyle, radius: "0 4px 4px 0", filled: true };
+  }
+  if (iso > lo && iso < hi) {
+    return { bg: "var(--color-primary-tint)", fg: "var(--color-primary)", radius: 0, filled: true };
+  }
+  return null;
+}
+
+/** Resolves the visual state of a single day cell for both single-value and range selection. */
+export function getMiniCalendarCellStyle(args: {
+  iso: string;
+  value: string;
+  isToday: boolean;
+  range?: boolean;
+  rangeStart?: string;
+  rangeEnd?: string;
+}): MiniCalendarCellStyle {
+  const { iso, value, isToday, range, rangeStart = "", rangeEnd = "" } = args;
+  const defaultStyle: MiniCalendarCellStyle = {
+    bg: "transparent",
+    fg: isToday ? "var(--color-primary)" : "var(--color-text-primary)",
+    radius: 4,
+    filled: false,
+  };
+
+  if (range && rangeStart) {
+    return rangeCellStyle(iso, rangeStart, rangeEnd) ?? defaultStyle;
+  }
+
+  if (iso === value) {
+    return {
+      bg: "var(--color-primary)",
+      fg: "var(--color-primary-foreground)",
+      radius: 4,
+      filled: true,
+    };
+  }
+
+  return defaultStyle;
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/mini-calendar.tsx b/src/app/(protected)/workorders/_components/wizard/mini-calendar.tsx
new file mode 100644
index 00000000..5b494167
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/mini-calendar.tsx
@@ -0,0 +1,137 @@
+import { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { getMiniCalendarCellStyle } from "@/app/(protected)/workorders/_components/wizard/mini-calendar-cell-style";
+import { MONTH_NAMES, pad2, todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+
+const WEEKDAY_HEADER = ["S", "M", "T", "W", "T", "F", "S"];
+
+type MiniCalendarProps = {
+  value: string;
+  onChange: (iso: string) => void;
+  /** Range-selection mode — parent owns the click logic. */
+  range?: boolean;
+  rangeStart?: string;
+  rangeEnd?: string;
+  /** Days before this ISO date are disabled (SH-356 Due Date floor). */
+  minDate?: string;
+};
+
+export function MiniCalendar({
+  value,
+  onChange,
+  range,
+  rangeStart = "",
+  rangeEnd = "",
+  minDate = "",
+}: MiniCalendarProps) {
+  const initRaw = range ? rangeStart || value : value;
+  const fallback = minDate > todayIso() ? minDate : todayIso();
+  const init = /^\d{4}-\d{2}-\d{2}$/.test(initRaw) ? initRaw : fallback;
+  const [iy, im] = init.split("-").map(Number);
+  const [viewY, setViewY] = useState(iy);
+  const [viewM, setViewM] = useState(im);
+
+  const firstWeekday = new Date(viewY, viewM - 1, 1).getDay();
+  const daysInMonth = new Date(viewY, viewM, 0).getDate();
+  const cells: (number | null)[] = [
+    ...Array(firstWeekday).fill(null),
+    ...Array.from({ length: daysInMonth }, (_, i) => i + 1),
+  ];
+
+  const step = (delta: number) => {
+    let m = viewM + delta;
+    let y = viewY;
+    if (m < 1) {
+      m = 12;
+      y -= 1;
+    }
+    if (m > 12) {
+      m = 1;
+      y += 1;
+    }
+    setViewM(m);
+    setViewY(y);
+  };
+
+  const today = todayIso();
+
+  return (
+    <div style={{ width: 224 }}>
+      <div className="mb-2 flex items-center justify-between">
+        <button
+          type="button"
+          onClick={() => step(-1)}
+          className="rounded p-1 transition-colors hover:bg-[#F9FAFB]"
+          style={{ color: "var(--color-text-secondary)" }}
+          aria-label="Previous month"
+        >
+          <ChevronLeft size={14} />
+        </button>
+        <span className="text-[12px] font-medium" style={{ color: "var(--color-text-primary)" }}>
+          {MONTH_NAMES[viewM - 1]} {viewY}
+        </span>
+        <button
+          type="button"
+          onClick={() => step(1)}
+          className="rounded p-1 transition-colors hover:bg-[#F9FAFB]"
+          style={{ color: "var(--color-text-secondary)" }}
+          aria-label="Next month"
+        >
+          <ChevronRight size={14} />
+        </button>
+      </div>
+      <div className="mb-1 grid grid-cols-7 gap-0.5">
+        {WEEKDAY_HEADER.map((d, i) => (
+          <span
+            key={i}
+            className="py-0.5 text-center text-[10px] font-medium"
+            style={{ color: "var(--color-text-muted)" }}
+          >
+            {d}
+          </span>
+        ))}
+      </div>
+      <div className="grid grid-cols-7 gap-0.5">
+        {cells.map((day, i) => {
+          if (day === null) {
+            return <span key={i} />;
+          }
+          const iso = `${viewY}-${pad2(viewM)}-${pad2(day)}`;
+          const isToday = iso === today;
+          const beforeMin = Boolean(minDate) && iso < minDate;
+          const { bg, fg, radius, filled } = getMiniCalendarCellStyle({
+            iso,
+            value,
+            isToday,
+            range,
+            rangeStart,
+            rangeEnd,
+          });
+
+          return (
+            <button
+              key={i}
+              type="button"
+              disabled={beforeMin}
+              onClick={() => onChange(iso)}
+              className="text-center text-[12px] transition-colors hover:bg-[var(--color-primary-tint)] disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"
+              style={{
+                height: 26,
+                borderRadius: radius,
+                fontWeight: filled || isToday ? 600 : 400,
+                background: filled ? bg : undefined,
+                color: fg,
+                border:
+                  isToday && !filled
+                    ? "1px solid color-mix(in srgb, var(--color-primary) 50%, transparent)"
+                    : undefined,
+              }}
+            >
+              {day}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx b/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx
new file mode 100644
index 00000000..039770ac
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/new-wo-wizard.tsx
@@ -0,0 +1,142 @@
+import { Dialog } from "@mui/material";
+
+import { dialogBlurBackdropSlotProps } from "@/components/ui/dialog-blur-backdrop";
+import { DuplicateWoNumberDialog } from "@/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog";
+
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+import { WizardFooter } from "@/app/(protected)/workorders/_components/wizard/wizard-footer";
+import { WizardSidebar } from "@/app/(protected)/workorders/_components/wizard/wizard-sidebar";
+import { WizardStepHeader } from "@/app/(protected)/workorders/_components/wizard/wizard-step-header";
+import { WizardStepLocationService } from "@/app/(protected)/workorders/_components/wizard/wizard-step-location-service";
+import { WizardStepTypeSchedule } from "@/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule";
+import { WizardStepVendorTime } from "@/app/(protected)/workorders/_components/wizard/wizard-step-vendor-time";
+import { useNewWoWizardController } from "@/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-controller";
+
+type NewWoWizardProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  users: WorkOrderUser[];
+  existingRows?: WorkOrderTableRow[];
+  onViewExistingWo?: (row: WorkOrderTableRow) => void;
+};
+
+export function NewWoWizard({
+  open,
+  onOpenChange,
+  users,
+  existingRows = [],
+  onViewExistingWo,
+}: NewWoWizardProps) {
+  const wizard = useNewWoWizardController({ open, onOpenChange, existingRows });
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        onClose={wizard.handleClose}
+        maxWidth={false}
+        slotProps={{
+          ...dialogBlurBackdropSlotProps,
+          paper: {
+            className: "flex flex-col overflow-hidden p-0",
+            style: {
+              borderRadius: 12,
+              width: 768,
+              maxWidth: 768,
+              height: 680,
+              maxHeight: 680,
+              pointerEvents: wizard.isCreating ? "none" : undefined,
+              opacity: wizard.isCreating ? 0.85 : 1,
+            },
+          },
+        }}
+      >
+        <span className="sr-only">Guided setup for creating a new work order</span>
+
+        <div className="flex min-h-0 flex-1" aria-busy={wizard.isCreating || undefined}>
+          <WizardSidebar step={wizard.step} draft={wizard.draft} />
+
+          <div
+            className="min-h-0 flex-1 overflow-y-auto"
+            style={{ padding: 32, background: "var(--color-bg-surface)" }}
+          >
+            <WizardStepHeader step={wizard.step} />
+
+            {wizard.step === 1 && (
+              <WizardStepTypeSchedule
+                draft={wizard.draft}
+                users={users}
+                showErrors={wizard.showErrors}
+                onUpdate={wizard.setField}
+                onPatch={wizard.patchDraft}
+                onDuplicateWoNumber={wizard.handleDuplicateFound}
+              />
+            )}
+
+            {wizard.step === 2 && (
+              <WizardStepLocationService
+                draft={wizard.draft}
+                locations={wizard.locations}
+                locationDetail={wizard.locationDetail}
+                locationDetailLoading={wizard.locationDetailLoading}
+                locationDetailError={wizard.locationDetailError}
+                services={wizard.services.map((service) => ({
+                  id: service.id,
+                  value: service.name,
+                }))}
+                showErrors={wizard.showErrors}
+                svcOpen={wizard.svcOpen}
+                onSvcOpenChange={wizard.setSvcOpen}
+                svcSearch={wizard.svcSearch}
+                onSvcSearchChange={wizard.setSvcSearch}
+                onUpdate={wizard.setField}
+                onPatch={wizard.patchDraft}
+              />
+            )}
+
+            {wizard.step === 3 && (
+              <WizardStepVendorTime
+                draft={wizard.draft}
+                vendors={wizard.vendors}
+                onUpdate={wizard.setField}
+                onPatch={wizard.patchDraft}
+              />
+            )}
+          </div>
+        </div>
+
+        <WizardFooter
+          step={wizard.step}
+          draft={wizard.draft}
+          onCancel={() => {
+            if (!wizard.isCreating) onOpenChange(false);
+          }}
+          onBack={() => {
+            wizard.setShowErrors(false);
+            wizard.setStep((s) => s - 1);
+          }}
+          onContinue={() => {
+            wizard.setShowErrors(false);
+            wizard.setStep((s) => s + 1);
+          }}
+          onAttemptContinue={() => wizard.setShowErrors(true)}
+          onCreate={wizard.handleCreate}
+          isCreating={wizard.isCreating}
+        />
+      </Dialog>
+
+      <DuplicateWoNumberDialog
+        open={wizard.duplicateRow != null}
+        existing={wizard.duplicateRow}
+        onDismiss={() => wizard.setDuplicateRow(null)}
+        onViewExisting={(row) => {
+          wizard.setDuplicateRow(null);
+          onOpenChange(false);
+          onViewExistingWo?.(row);
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-controller.ts b/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-controller.ts
new file mode 100644
index 00000000..17069cc9
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-controller.ts
@@ -0,0 +1,107 @@
+import { useEffect } from "react";
+
+import { guardDialogClose } from "@/lib/dialog-guard";
+
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+
+import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
+import { useLocationSites } from "@/domain/locations/use-cases/use-location-sites";
+
+import { useWorkOrderVendors } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useCreateWorkOrderFromWizard } from "@/domain/work-orders/use-cases/use-create-work-order-from-wizard";
+
+import { useNewWoWizardDraft } from "@/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-draft";
+import { useWizardDuplicateActions } from "@/app/(protected)/workorders/_components/wizard/use-wizard-duplicate-actions";
+import { useWizardPocAutofill } from "@/app/(protected)/workorders/_components/wizard/use-wizard-poc-autofill";
+import { useWizardVendorCompanyNotes } from "@/app/(protected)/workorders/_components/wizard/use-wizard-vendor-company-notes";
+import { useServicesForWorkOrderType } from "@/domain/services/use-cases/use-services-for-work-order-type";
+
+type UseNewWoWizardControllerArgs = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  existingRows: WorkOrderTableRow[];
+};
+
+/** Wires draft state, lookups, POC autofill, and duplicate-WO guards for the create wizard. */
+export function useNewWoWizardController({
+  open,
+  onOpenChange,
+  existingRows,
+}: UseNewWoWizardControllerArgs) {
+  const draftState = useNewWoWizardDraft(open);
+
+  const { data: locations = [] } = useLocationSites();
+  const { data: registryServices = [] } = useServicesForWorkOrderType(draftState.draft.type);
+  const {
+    data: locationDetail,
+    isLoading: locationDetailLoading,
+    isError: locationDetailError,
+  } = useLocationDetail(draftState.draft.locationId || undefined);
+  const { data: vendors = [] } = useWorkOrderVendors(
+    draftState.draft.pm.trim() || undefined,
+    locationDetail?.zipCode,
+  );
+
+  const { notifyLocationChanged } = useWizardPocAutofill(
+    open,
+    draftState.draft.locationId,
+    locationDetail,
+    draftState.setDraft,
+  );
+
+  const { saveCompanyNotes } = useWizardVendorCompanyNotes(
+    open,
+    draftState.draft.vendorId,
+    draftState.setDraft,
+  );
+
+  const patchDraft = (patch: Partial<WorkOrderWizardDraft>) => {
+    draftState.patchDraft(patch);
+    if (patch.locationId !== undefined) {
+      notifyLocationChanged(patch.locationId);
+    }
+  };
+
+  const createMutation = useCreateWorkOrderFromWizard((createdDraft) => {
+    // Close the dialog first: the work-order create's isPending has already dropped, so
+    // holding the dialog open through the notes save would re-enable Create and unlock
+    // pointer events, and a second click would create a second work order. The save runs
+    // independently of the dialog — fetchCurrentBaseline covers a missing baseline and the
+    // note-save failure toast is surfaced from the mutation itself, not the dialog.
+    onOpenChange(false);
+    void saveCompanyNotes(createdDraft);
+  });
+  const { duplicateRow, setDuplicateRow, handleDuplicateFound, handleCreate, isCreating } =
+    useWizardDuplicateActions({
+      open,
+      draft: draftState.draft,
+      existingRows,
+      createMutation,
+    });
+
+  useEffect(() => {
+    if (open) {
+      setDuplicateRow(null);
+    }
+  }, [open, setDuplicateRow]);
+
+  const handleClose = guardDialogClose(isCreating, () => onOpenChange(false));
+
+  return {
+    ...draftState,
+    patchDraft,
+    locations,
+    services: registryServices,
+    locationDetail,
+    locationDetailLoading,
+    locationDetailError,
+    vendors,
+    duplicateRow,
+    setDuplicateRow,
+    handleDuplicateFound,
+    handleCreate,
+    isCreating,
+    handleClose,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-draft.ts b/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-draft.ts
new file mode 100644
index 00000000..c0d45525
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-draft.ts
@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import {
+  EMPTY_WIZARD_DRAFT,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+
+/** Owns the step/draft/service-panel state for the new-work-order wizard, resetting on open. */
+export function useNewWoWizardDraft(open: boolean) {
+  const [step, setStep] = useState(1);
+  const [draft, setDraft] = useState<WorkOrderWizardDraft>({
+    ...EMPTY_WIZARD_DRAFT,
+    status: "Incomplete",
+  });
+  const [svcOpen, setSvcOpen] = useState(false);
+  const [svcSearch, setSvcSearch] = useState("");
+  const [showErrors, setShowErrors] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setStep(1);
+      setDraft({ ...EMPTY_WIZARD_DRAFT, status: "Incomplete" });
+      setSvcOpen(false);
+      setSvcSearch("");
+      setShowErrors(false);
+    }
+  }, [open]);
+
+  const setField = <K extends keyof WorkOrderWizardDraft>(
+    key: K,
+    value: WorkOrderWizardDraft[K],
+  ) => {
+    setDraft((current) => ({ ...current, [key]: value }));
+  };
+
+  const patchDraft = (patch: Partial<WorkOrderWizardDraft>) => {
+    setDraft((current) => ({ ...current, ...patch }));
+  };
+
+  return {
+    step,
+    setStep,
+    draft,
+    setDraft,
+    setField,
+    patchDraft,
+    svcOpen,
+    setSvcOpen,
+    svcSearch,
+    setSvcSearch,
+    showErrors,
+    setShowErrors,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-state.ts b/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-state.ts
new file mode 100644
index 00000000..8f6b1e66
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/use-new-wo-wizard-state.ts
@@ -0,0 +1,140 @@
+import { useEffect, useMemo, useState } from "react";
+import { isWoWizardMockEnabled } from "@/domain/work-orders/mocks/is-wo-wizard-mock-enabled";
+import {
+  getMockWoWizardLocationDetail,
+  MOCK_WO_WIZARD_LOCATIONS,
+  MOCK_WO_WIZARD_SERVICES,
+  MOCK_WO_WIZARD_USERS,
+  MOCK_WO_WIZARD_VENDORS,
+} from "@/domain/work-orders/mocks/wo-wizard-mock-data";
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  EMPTY_WIZARD_DRAFT,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
+import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
+import {
+  useWorkOrderLocations,
+  useWorkOrderVendors,
+} from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useCreateWorkOrderFromWizard } from "@/domain/work-orders/use-cases/use-create-work-order-from-wizard";
+import { useWizardDuplicateActions } from "./use-wizard-duplicate-actions";
+
+type UseNewWoWizardStateArgs = {
+  open: boolean;
+  users: WorkOrderUser[];
+  existingRows: WorkOrderTableRow[];
+  onOpenChange: (open: boolean) => void;
+};
+
+export function useNewWoWizardState({
+  open,
+  users,
+  existingRows,
+  onOpenChange,
+}: UseNewWoWizardStateArgs) {
+  const mockFallback = isWoWizardMockEnabled();
+  const [step, setStep] = useState(1);
+  const [showErrors, setShowErrors] = useState(false);
+  const [draft, setDraft] = useState<WorkOrderWizardDraft>({
+    ...EMPTY_WIZARD_DRAFT,
+    status: "Incomplete",
+  });
+  const [pocAutoFilledFor, setPocAutoFilledFor] = useState("");
+
+  const { data: apiLocations = [] } = useWorkOrderLocations();
+  const { data: apiProblems = [] } = useDropdownOptionsByCategory("Problem");
+  const isMockLocation = draft.locationId.startsWith("mock-");
+  const { data: apiLocationDetail } = useLocationDetail(
+    isMockLocation ? undefined : draft.locationId || undefined,
+  );
+  const mockLocationDetail = isMockLocation
+    ? getMockWoWizardLocationDetail(draft.locationId)
+    : undefined;
+  const locationDetail = mockLocationDetail ?? apiLocationDetail;
+  const { data: apiVendors = [] } = useWorkOrderVendors(
+    undefined,
+    isMockLocation ? undefined : locationDetail?.zipCode,
+  );
+  const createMutation = useCreateWorkOrderFromWizard(() => onOpenChange(false));
+  const { duplicateRow, setDuplicateRow, handleDuplicateFound, handleCreate, isCreating } =
+    useWizardDuplicateActions({
+      open,
+      draft,
+      existingRows,
+      createMutation,
+    });
+
+  const wizardUsers = useMemo(() => {
+    if (users.length > 0) {
+      return users;
+    }
+    return mockFallback ? MOCK_WO_WIZARD_USERS : [];
+  }, [mockFallback, users]);
+  const locations =
+    apiLocations.length > 0 ? apiLocations : mockFallback ? MOCK_WO_WIZARD_LOCATIONS : [];
+  const problems =
+    apiProblems.length > 0 ? apiProblems : mockFallback ? MOCK_WO_WIZARD_SERVICES : [];
+  const vendors = apiVendors.length > 0 ? apiVendors : mockFallback ? MOCK_WO_WIZARD_VENDORS : [];
+
+  useEffect(() => {
+    if (open) {
+      setStep(1);
+      setShowErrors(false);
+      setDraft({ ...EMPTY_WIZARD_DRAFT, status: "Incomplete" });
+      setPocAutoFilledFor("");
+      setDuplicateRow(null);
+    }
+  }, [open, setDuplicateRow]);
+
+  useEffect(() => {
+    if (!draft.locationId || !locationDetail) {
+      return;
+    }
+    if (pocAutoFilledFor === draft.locationId) {
+      return;
+    }
+    setDraft((current) => ({
+      ...current,
+      pocName: locationDetail.contact ?? current.pocName,
+      pocPhone: locationDetail.phone ?? current.pocPhone,
+    }));
+    setPocAutoFilledFor(draft.locationId);
+  }, [draft.locationId, locationDetail, pocAutoFilledFor]);
+
+  const setField = <K extends keyof WorkOrderWizardDraft>(
+    key: K,
+    value: WorkOrderWizardDraft[K],
+  ) => {
+    setDraft((current) => ({ ...current, [key]: value }));
+  };
+
+  const patchDraft = (patch: Partial<WorkOrderWizardDraft>) => {
+    setDraft((current) => ({ ...current, ...patch }));
+    if (patch.locationId !== undefined && patch.locationId !== pocAutoFilledFor) {
+      setPocAutoFilledFor("");
+    }
+  };
+
+  return {
+    step,
+    setStep,
+    showErrors,
+    setShowErrors,
+    draft,
+    duplicateRow,
+    setDuplicateRow,
+    wizardUsers,
+    locations,
+    problems,
+    vendors,
+    locationDetail,
+    setField,
+    patchDraft,
+    handleDuplicateFound,
+    handleCreate,
+    isCreating,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/use-wizard-date-field-state.ts b/src/app/(protected)/workorders/_components/wizard/use-wizard-date-field-state.ts
new file mode 100644
index 00000000..1f89ce5a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/use-wizard-date-field-state.ts
@@ -0,0 +1,94 @@
+import { useEffect, useState } from "react";
+import type { WizardSchedMode } from "@/domain/work-orders/types/work-order-wizard";
+
+type UseWizardDateFieldStateArgs = {
+  open: boolean;
+  value: string;
+  scheduleEnd: string;
+  allowRange: boolean;
+  allowWeekMode?: boolean;
+  targetWeek: string;
+  schedMode?: WizardSchedMode;
+  defaultMode?: "week" | "date";
+};
+
+function resolveInitialMode({
+  allowRange,
+  schedMode,
+  allowWeekMode,
+  value,
+  targetWeek,
+  defaultMode,
+}: Pick<
+  UseWizardDateFieldStateArgs,
+  "allowRange" | "schedMode" | "allowWeekMode" | "value" | "targetWeek" | "defaultMode"
+>): WizardSchedMode {
+  if (allowRange && schedMode === "range") {
+    return "range";
+  }
+  if (allowWeekMode && !value && targetWeek) {
+    return "week";
+  }
+  if (allowWeekMode && defaultMode) {
+    return defaultMode;
+  }
+  return "date";
+}
+
+/** Owns the popover-local mode/range selection state for `WizardDateField`. */
+export function useWizardDateFieldState({
+  open,
+  value,
+  scheduleEnd,
+  allowRange,
+  allowWeekMode,
+  targetWeek,
+  schedMode,
+  defaultMode,
+}: UseWizardDateFieldStateArgs) {
+  const initialMode = resolveInitialMode({
+    allowRange,
+    schedMode,
+    allowWeekMode,
+    value,
+    targetWeek,
+    defaultMode,
+  });
+
+  const [cellMode, setCellMode] = useState<WizardSchedMode>(initialMode);
+  const [rangeStart, setRangeStart] = useState(value || "");
+  const [rangeEnd, setRangeEnd] = useState(scheduleEnd || "");
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    // Keep draft props as source of truth while open so parent clears
+    // (e.g. Clear schedule) cannot leave stale rangeStart/rangeEnd.
+    setRangeStart(value || "");
+    setRangeEnd(scheduleEnd || "");
+  }, [open, value, scheduleEnd]);
+
+  useEffect(() => {
+    if (open) {
+      setCellMode(initialMode);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- reseat mode only when the popover opens
+  }, [open]);
+
+  function handleRangeClick(iso: string) {
+    if (!rangeStart || (rangeStart && rangeEnd)) {
+      setRangeStart(iso);
+      setRangeEnd("");
+      return;
+    }
+    if (iso < rangeStart) {
+      setRangeStart(iso);
+      setRangeEnd(rangeStart);
+    } else {
+      setRangeEnd(iso);
+    }
+  }
+
+  return { cellMode, setCellMode, rangeStart, rangeEnd, handleRangeClick };
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/use-wizard-duplicate-actions.ts b/src/app/(protected)/workorders/_components/wizard/use-wizard-duplicate-actions.ts
new file mode 100644
index 00000000..0f015d2c
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/use-wizard-duplicate-actions.ts
@@ -0,0 +1,100 @@
+import { useEffect, useRef, useState } from "react";
+import { toast } from "react-toastify";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import { findDuplicateWoNumberRow } from "@/domain/work-orders/utils/find-duplicate-wo-number-row";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+
+type UseWizardDuplicateActionsArgs = {
+  open: boolean;
+  draft: WorkOrderWizardDraft;
+  existingRows: WorkOrderTableRow[];
+  createMutation: {
+    mutate: (draft: WorkOrderWizardDraft) => void;
+    isPending: boolean;
+  };
+};
+
+export function useWizardDuplicateActions({
+  open,
+  draft,
+  existingRows,
+  createMutation,
+}: UseWizardDuplicateActionsArgs) {
+  const [duplicateRow, setDuplicateRow] = useState<WorkOrderTableRow | null>(null);
+  const [isCheckingDuplicate, setIsCheckingDuplicate] = useState(false);
+  const openRef = useRef(open);
+  const draftRef = useRef(draft);
+
+  useEffect(() => {
+    openRef.current = open;
+  }, [open]);
+
+  useEffect(() => {
+    draftRef.current = draft;
+  }, [draft]);
+
+  const resolveDuplicate = async (woNumber: string) => {
+    const localDuplicate = findDuplicateWoNumberRow(woNumber, existingRows);
+    if (localDuplicate) {
+      return localDuplicate;
+    }
+
+    // The loaded board rows are only an immediate UX hint; the unfiltered API lookup is authoritative.
+    return workOrdersApi.findByWoNumber(woNumber);
+  };
+
+  const handleDuplicateFound = (woNumber: string) => {
+    void (async () => {
+      try {
+        const duplicate = await resolveDuplicate(woNumber);
+        // Ignore stale lookups after dismiss or after the user edits the WO#.
+        if (!openRef.current || woNumber !== draftRef.current.woNumber) {
+          return;
+        }
+        if (duplicate) {
+          setDuplicateRow(duplicate);
+        }
+      } catch {
+        if (!openRef.current) {
+          return;
+        }
+        toast.error("Unable to verify the work order number. Please try again.");
+      }
+    })();
+  };
+
+  const handleCreate = () => {
+    const woNumberAtSubmit = draft.woNumber;
+    void (async () => {
+      setIsCheckingDuplicate(true);
+      try {
+        const duplicate = await resolveDuplicate(woNumberAtSubmit);
+        // Ignore after dismiss or if the WO# changed while the request was in flight.
+        if (!openRef.current || woNumberAtSubmit !== draftRef.current.woNumber) {
+          return;
+        }
+        if (duplicate) {
+          setDuplicateRow(duplicate);
+          return;
+        }
+        createMutation.mutate(draftRef.current);
+      } catch {
+        if (!openRef.current) {
+          return;
+        }
+        toast.error("Unable to verify the work order number. Please try again.");
+      } finally {
+        setIsCheckingDuplicate(false);
+      }
+    })();
+  };
+
+  return {
+    duplicateRow,
+    setDuplicateRow,
+    handleDuplicateFound,
+    handleCreate,
+    isCreating: createMutation.isPending || isCheckingDuplicate,
+  };
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/use-wizard-poc-autofill.ts b/src/app/(protected)/workorders/_components/wizard/use-wizard-poc-autofill.ts
new file mode 100644
index 00000000..0b515cac
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/use-wizard-poc-autofill.ts
@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import type { Location } from "@/domain/locations/types/location";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+
+type SetDraft = (updater: (current: WorkOrderWizardDraft) => WorkOrderWizardDraft) => void;
+
+/**
+ * Auto-fills POC name/phone from the fetched location, once per selected location.
+ * Never clobbers fields the dispatcher already typed while detail was loading
+ * (prototype: autofill from site records, then edit if outdated).
+ */
+export function useWizardPocAutofill(
+  open: boolean,
+  locationId: string,
+  locationDetail: Location | undefined,
+  setDraft: SetDraft,
+) {
+  const [pocAutoFilledFor, setPocAutoFilledFor] = useState("");
+
+  useEffect(() => {
+    if (open) {
+      setPocAutoFilledFor("");
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!locationId || !locationDetail || pocAutoFilledFor === locationId) {
+      return;
+    }
+    setDraft((current) => ({
+      ...current,
+      pocName: current.pocName.trim()
+        ? current.pocName
+        : (locationDetail.contact ?? current.pocName),
+      pocPhone: current.pocPhone.trim()
+        ? current.pocPhone
+        : (locationDetail.phone ?? current.pocPhone),
+    }));
+    setPocAutoFilledFor(locationId);
+  }, [locationId, locationDetail, pocAutoFilledFor, setDraft]);
+
+  // Always clear the seed guard on a site pick (including re-selecting the
+  // same location). Prototype onPick re-seeds pocName/pocPhone from the site
+  // every time; if we keep the guard keyed by the same id, clearing the fields
+  // leaves them blank because autofill will not re-run.
+  function notifyLocationChanged(_newLocationId: string) {
+    setPocAutoFilledFor("");
+  }
+
+  return { notifyLocationChanged };
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/use-wizard-vendor-company-notes.ts b/src/app/(protected)/workorders/_components/wizard/use-wizard-vendor-company-notes.ts
new file mode 100644
index 00000000..73625b6a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/use-wizard-vendor-company-notes.ts
@@ -0,0 +1,120 @@
+import { useEffect, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import { useVendorCompanyRoster } from "@/domain/vendors/use-cases/use-vendor-company-roster";
+import {
+  NOTES_SAVE_FAILED_MESSAGE,
+  useSaveVendorCompanyNotes,
+} from "@/domain/vendors/use-cases/use-save-vendor-company-notes";
+import { vendorCompanyRosterApi } from "@/domain/vendors/api/vendor-company-roster-api";
+import { queryKeys } from "@/infra/query-key/query-key";
+import {
+  buildCompanyNotesUpdate,
+  type VendorCompanyNotesBaseline,
+} from "@/domain/vendors/utils/build-company-notes-patch";
+
+type SetDraft = (updater: (current: WorkOrderWizardDraft) => WorkOrderWizardDraft) => void;
+
+type VendorNotesBaseline = VendorCompanyNotesBaseline & { vendorId: string };
+
+/**
+ * The wizard's Vendor Notes field is the vendor company's notes (same field as the Vendors
+ * page). Picking a technician pre-fills the company's current notes once per company, so
+ * switching technicians within the same company keeps the dispatcher's edits. Notes typed
+ * for the current selection always win over roster data that arrives late, and a save whose
+ * baseline is missing or belongs to another selection reads the current roster before
+ * building the PATCH.
+ */
+export function useWizardVendorCompanyNotes(open: boolean, vendorId: string, setDraft: SetDraft) {
+  const queryClient = useQueryClient();
+  const { data: roster } = useVendorCompanyRoster(vendorId || undefined);
+  const saveNotes = useSaveVendorCompanyNotes();
+  const [baseline, setBaseline] = useState<VendorNotesBaseline | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      setBaseline(null);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!vendorId) {
+      // Cleared technician: the next pick re-seeds even for the same company.
+      if (baseline) setBaseline(null);
+      return;
+    }
+    if (!roster || roster.companyId === null) {
+      return;
+    }
+    if (
+      baseline &&
+      baseline.vendorId === vendorId &&
+      String(baseline.companyId) === String(roster.companyId)
+    ) {
+      return;
+    }
+    setBaseline({
+      vendorId,
+      companyId: roster.companyId,
+      rowVersion: roster.rowVersion,
+      notes: roster.notes,
+    });
+    setDraft((current) => {
+      if (current.vendorId !== vendorId) {
+        return current;
+      }
+      // Seed only empty content or content still holding the previous company's unedited
+      // notes; anything else is the dispatcher's typing and must never be overwritten.
+      if (current.vendorNotes !== "" && current.vendorNotes !== baseline?.notes) {
+        return current;
+      }
+      return { ...current, vendorNotes: roster.notes };
+    });
+  }, [vendorId, roster, baseline, setDraft]);
+
+  async function fetchCurrentBaseline(vendorId: string): Promise<VendorNotesBaseline | null> {
+    try {
+      const current = await queryClient.fetchQuery({
+        queryKey: queryKeys.vendors.roster("vendorId", vendorId),
+        queryFn: () => vendorCompanyRosterApi.get({ vendorId }),
+      });
+      if (!current || current.companyId === null) {
+        return null;
+      }
+      return {
+        vendorId,
+        companyId: current.companyId,
+        rowVersion: current.rowVersion,
+        notes: current.notes,
+      };
+    } catch {
+      toast.error(NOTES_SAVE_FAILED_MESSAGE);
+      return null;
+    }
+  }
+
+  async function saveCompanyNotes(draft: WorkOrderWizardDraft): Promise<void> {
+    if (!draft.vendorId) {
+      return;
+    }
+    const active =
+      baseline && baseline.vendorId === draft.vendorId
+        ? baseline
+        : await fetchCurrentBaseline(draft.vendorId);
+    if (!active) {
+      return;
+    }
+    const update = buildCompanyNotesUpdate(active, draft.vendorNotes);
+    if (!update) {
+      return;
+    }
+    try {
+      await saveNotes.mutateAsync(update);
+    } catch {
+      // The mutation already surfaces the note-save failure toast.
+    }
+  }
+
+  return { saveCompanyNotes };
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/week-picker.tsx b/src/app/(protected)/workorders/_components/wizard/week-picker.tsx
new file mode 100644
index 00000000..faf128b1
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/week-picker.tsx
@@ -0,0 +1,111 @@
+import { useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  MONTH_NAMES,
+  mondayOf,
+  todayIso,
+  weekRangeLabel,
+  weeksOfMonth,
+} from "@/domain/work-orders/utils/wizard-date-utils";
+
+type WeekPickerProps = {
+  selected: string;
+  onPick: (mondayIso: string) => void;
+  isWeekDisabled?: (mondayIso: string) => boolean;
+};
+
+export function WeekPicker({ selected, onPick, isWeekDisabled }: WeekPickerProps) {
+  const init = /^\d{4}-\d{2}-\d{2}$/.test(selected) ? selected : todayIso();
+  const [iy, im] = init.split("-").map(Number);
+  const [viewY, setViewY] = useState(iy);
+  const [viewM, setViewM] = useState(im);
+
+  const step = (delta: number) => {
+    let m = viewM + delta;
+    let y = viewY;
+    if (m < 1) {
+      m = 12;
+      y -= 1;
+    }
+    if (m > 12) {
+      m = 1;
+      y += 1;
+    }
+    setViewM(m);
+    setViewY(y);
+  };
+
+  const weeks = weeksOfMonth(viewY, viewM);
+  const thisMonday = mondayOf(todayIso());
+
+  return (
+    <div style={{ width: 240 }}>
+      <div className="mb-2 flex items-center justify-between">
+        <button
+          type="button"
+          onClick={() => step(-1)}
+          className="rounded p-1 transition-colors hover:bg-[#F9FAFB]"
+          style={{ color: "var(--color-text-secondary)" }}
+          aria-label="Previous month"
+        >
+          <ChevronLeft size={14} />
+        </button>
+        <span className="text-[12px] font-medium" style={{ color: "var(--color-text-primary)" }}>
+          {MONTH_NAMES[viewM - 1]} {viewY}
+        </span>
+        <button
+          type="button"
+          onClick={() => step(1)}
+          className="rounded p-1 transition-colors hover:bg-[#F9FAFB]"
+          style={{ color: "var(--color-text-secondary)" }}
+          aria-label="Next month"
+        >
+          <ChevronRight size={14} />
+        </button>
+      </div>
+      <div style={{ maxHeight: 200, overflowY: "auto" }} className="flex flex-col gap-1.5">
+        {weeks.map((mon) => {
+          const isSel = Boolean(selected) && selected === mon;
+          const isThis = mon === thisMonday;
+          const isDisabled = Boolean(isWeekDisabled?.(mon));
+          return (
+            <button
+              key={mon}
+              type="button"
+              disabled={isDisabled}
+              onClick={() => onPick(mon)}
+              className="flex items-center transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+              style={{
+                height: 36,
+                borderRadius: 6,
+                fontSize: 13,
+                fontWeight: isSel ? 600 : 400,
+                padding: "0 12px",
+                background: isSel ? "var(--color-primary-tint)" : "transparent",
+                border: `1px solid ${isSel ? "var(--color-primary)" : "var(--color-border)"}`,
+                color: isSel ? "var(--color-primary)" : "var(--foreground)",
+              }}
+            >
+              {weekRangeLabel(mon)}
+              {isThis && (
+                <span
+                  style={{
+                    marginLeft: "auto",
+                    fontFamily: "var(--font-mono)",
+                    fontSize: 9,
+                    fontWeight: 600,
+                    letterSpacing: "0.06em",
+                    textTransform: "uppercase",
+                    color: isSel ? "var(--color-primary)" : "var(--muted-foreground)",
+                  }}
+                >
+                  This week
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-date-field-trigger.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-date-field-trigger.tsx
new file mode 100644
index 00000000..1b7cb1af
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-date-field-trigger.tsx
@@ -0,0 +1,68 @@
+import { CalendarDays, CalendarIcon, CalendarRange, ChevronDown } from "lucide-react";
+import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
+
+type WizardDateFieldTriggerProps = {
+  onAnchor: (element: HTMLElement) => void;
+  open: boolean;
+  label: string;
+  showWeek: boolean;
+  showRange: boolean;
+  hasValue: boolean;
+};
+
+function DateFieldIcon({ showRange, showWeek }: { showRange: boolean; showWeek: boolean }) {
+  const style = { color: "var(--muted-foreground)" };
+  if (showRange) {
+    return <CalendarRange size={16} className="shrink-0" style={style} />;
+  }
+  if (showWeek) {
+    return <CalendarDays size={16} className="shrink-0" style={style} />;
+  }
+  return <CalendarIcon size={16} className="shrink-0" style={style} />;
+}
+
+export function WizardDateFieldTrigger({
+  onAnchor,
+  open,
+  label,
+  showWeek,
+  showRange,
+  hasValue,
+}: WizardDateFieldTriggerProps) {
+  return (
+    <MenuAnchorButton
+      onAnchor={onAnchor}
+      open={open}
+      className="flex w-full items-center gap-2 transition-colors"
+      style={{
+        height: 36,
+        border: "1px solid var(--color-border)",
+        borderRadius: 6,
+        background: "var(--color-bg-surface)",
+        padding: "0 10px",
+        outline: "none",
+      }}
+      onFocus={(e) => {
+        (e.currentTarget as HTMLButtonElement).style.boxShadow = "0 0 0 2px var(--color-primary)";
+      }}
+      onBlur={(e) => {
+        (e.currentTarget as HTMLButtonElement).style.boxShadow = "none";
+      }}
+      aria-haspopup="dialog"
+    >
+      <DateFieldIcon showRange={showRange} showWeek={showWeek} />
+      <span
+        className="flex-1 truncate text-left"
+        style={{
+          fontFamily: "var(--font-sans)",
+          fontSize: 13,
+          color:
+            hasValue || showWeek || showRange ? "var(--foreground)" : "var(--muted-foreground)",
+        }}
+      >
+        {label}
+      </span>
+      <ChevronDown size={13} className="shrink-0" style={{ color: "var(--muted-foreground)" }} />
+    </MenuAnchorButton>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-date-field.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-date-field.tsx
new file mode 100644
index 00000000..55dbaae9
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-date-field.tsx
@@ -0,0 +1,143 @@
+import { Popover } from "@mui/material";
+import { MiniCalendar } from "@/app/(protected)/workorders/_components/wizard/mini-calendar";
+import { WeekPicker } from "@/app/(protected)/workorders/_components/wizard/week-picker";
+import { WizardDateFieldTrigger } from "@/app/(protected)/workorders/_components/wizard/wizard-date-field-trigger";
+import { WizardDateModeTabs } from "@/app/(protected)/workorders/_components/wizard/wizard-date-mode-tabs";
+import { WizardDateRangePanel } from "@/app/(protected)/workorders/_components/wizard/wizard-date-range-panel";
+import { useWizardDateFieldState } from "@/app/(protected)/workorders/_components/wizard/use-wizard-date-field-state";
+import type { WizardSchedMode } from "@/domain/work-orders/types/work-order-wizard";
+import { fmtDate, fmtDateRange, fmtWeekRange } from "@/domain/work-orders/utils/wizard-date-utils";
+import { useMenuAnchor } from "@/hooks/use-menu-anchor";
+
+type WizardDateFieldProps = {
+  value: string;
+  placeholder: string;
+  onChange: (iso: string) => void;
+  allowWeekMode?: boolean;
+  targetWeek?: string;
+  onChangeWeek?: (weekStart: string) => void;
+  scheduleEnd?: string;
+  schedMode?: WizardSchedMode;
+  onChangeRange?: (start: string, end: string) => void;
+  /** Earliest selectable day in the date calendar (SH-356). */
+  minDate?: string;
+};
+
+function fieldLabel(args: {
+  showRange: boolean;
+  showWeek: boolean;
+  value: string;
+  scheduleEnd: string;
+  targetWeek: string;
+  placeholder: string;
+}): string {
+  const { showRange, showWeek, value, scheduleEnd, targetWeek, placeholder } = args;
+  if (showRange) {
+    return fmtDateRange(value, scheduleEnd);
+  }
+  if (showWeek) {
+    return fmtWeekRange(targetWeek);
+  }
+  return value ? fmtDate(value) : placeholder;
+}
+
+export function WizardDateField({
+  value,
+  placeholder,
+  onChange,
+  allowWeekMode,
+  targetWeek = "",
+  onChangeWeek,
+  scheduleEnd = "",
+  schedMode,
+  onChangeRange,
+  minDate,
+}: WizardDateFieldProps) {
+  const { anchorEl, open, setAnchor, close } = useMenuAnchor();
+  const allowRange = Boolean(allowWeekMode && onChangeRange);
+
+  const { cellMode, setCellMode, rangeStart, rangeEnd, handleRangeClick } = useWizardDateFieldState(
+    {
+      open,
+      value,
+      scheduleEnd,
+      allowRange,
+      allowWeekMode,
+      targetWeek,
+      schedMode,
+    },
+  );
+
+  const showWeek = Boolean(allowWeekMode && !value && targetWeek);
+  const showRange = Boolean(allowRange && schedMode === "range" && value && scheduleEnd);
+
+  const modes: WizardSchedMode[] = allowRange
+    ? ["week", "date", "range"]
+    : allowWeekMode
+      ? ["week", "date"]
+      : [];
+
+  return (
+    <>
+      <WizardDateFieldTrigger
+        onAnchor={setAnchor}
+        open={open}
+        label={fieldLabel({ showRange, showWeek, value, scheduleEnd, targetWeek, placeholder })}
+        showWeek={showWeek}
+        showRange={showRange}
+        hasValue={Boolean(value)}
+      />
+
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={close}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
+        slotProps={{
+          paper: {
+            className: "mt-1 rounded-lg border border-border p-3 shadow-md",
+            onClick: (e: React.MouseEvent) => e.stopPropagation(),
+          },
+        }}
+      >
+        <WizardDateModeTabs
+          modes={modes}
+          cellMode={cellMode}
+          allowRange={allowRange}
+          onSelect={setCellMode}
+        />
+
+        {allowWeekMode && cellMode === "week" ? (
+          <WeekPicker
+            selected={!value ? targetWeek : ""}
+            onPick={(mon) => {
+              onChange("");
+              onChangeWeek?.(mon);
+              close();
+            }}
+          />
+        ) : allowRange && cellMode === "range" ? (
+          <WizardDateRangePanel
+            rangeStart={rangeStart}
+            rangeEnd={rangeEnd}
+            onRangeClick={handleRangeClick}
+            onDone={(start, end) => {
+              onChangeRange?.(start, end);
+              close();
+            }}
+          />
+        ) : (
+          <MiniCalendar
+            value={value}
+            minDate={minDate}
+            onChange={(iso) => {
+              onChange(iso);
+              close();
+            }}
+          />
+        )}
+      </Popover>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-date-mode-tabs.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-date-mode-tabs.tsx
new file mode 100644
index 00000000..27d4ce7d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-date-mode-tabs.tsx
@@ -0,0 +1,57 @@
+import type { WizardSchedMode } from "@/domain/work-orders/types/work-order-wizard";
+
+type WizardDateModeTabsProps = {
+  modes: WizardSchedMode[];
+  cellMode: WizardSchedMode;
+  allowRange: boolean;
+  onSelect: (mode: WizardSchedMode) => void;
+};
+
+function modeLabel(mode: WizardSchedMode, allowRange: boolean): string {
+  if (mode === "week") {
+    return "Week";
+  }
+  if (mode === "range") {
+    return "Range";
+  }
+  return allowRange ? "Date" : "Specific date";
+}
+
+export function WizardDateModeTabs({
+  modes,
+  cellMode,
+  allowRange,
+  onSelect,
+}: WizardDateModeTabsProps) {
+  if (modes.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-1.5" style={{ marginBottom: 10 }}>
+      {modes.map((m) => {
+        const activeMode = cellMode === m;
+        return (
+          <button
+            key={m}
+            type="button"
+            onClick={() => onSelect(m)}
+            style={{
+              height: 26,
+              padding: "0 12px",
+              borderRadius: 9999,
+              fontFamily: "var(--font-sans)",
+              fontSize: 11.5,
+              fontWeight: 500,
+              background: activeMode ? "var(--color-primary-tint)" : "var(--color-bg-surface)",
+              border: `1px solid ${activeMode ? "var(--color-primary)" : "var(--color-border)"}`,
+              color: activeMode ? "var(--color-primary)" : "var(--color-text-secondary)",
+            }}
+          >
+            {modeLabel(m, allowRange)}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-date-range-panel.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-date-range-panel.tsx
new file mode 100644
index 00000000..72f9a73d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-date-range-panel.tsx
@@ -0,0 +1,65 @@
+import { MiniCalendar } from "@/app/(protected)/workorders/_components/wizard/mini-calendar";
+import { rangeDayCount } from "@/domain/work-orders/utils/wizard-date-utils";
+
+type WizardDateRangePanelProps = {
+  rangeStart: string;
+  rangeEnd: string;
+  onRangeClick: (iso: string) => void;
+  onDone: (start: string, end: string) => void;
+};
+
+export function WizardDateRangePanel({
+  rangeStart,
+  rangeEnd,
+  onRangeClick,
+  onDone,
+}: WizardDateRangePanelProps) {
+  const canConfirm = Boolean(rangeStart && rangeEnd);
+
+  return (
+    <>
+      <MiniCalendar
+        range
+        value={rangeStart}
+        rangeStart={rangeStart}
+        rangeEnd={rangeEnd}
+        onChange={onRangeClick}
+      />
+      {Boolean(rangeStart) && (
+        <div
+          className="text-center"
+          style={{ marginTop: 4, fontSize: 11.5, color: "var(--color-text-muted)" }}
+        >
+          {(() => {
+            const n = rangeDayCount(rangeStart, rangeEnd || rangeStart);
+            return `${n} ${n === 1 ? "day" : "days"} selected`;
+          })()}
+        </div>
+      )}
+      <button
+        type="button"
+        disabled={!canConfirm}
+        onClick={() => {
+          if (canConfirm) {
+            onDone(rangeStart, rangeEnd);
+          }
+        }}
+        className="w-full transition-opacity"
+        style={{
+          marginTop: 4,
+          height: 32,
+          borderRadius: 6,
+          background: "var(--color-primary)",
+          color: "var(--color-primary-foreground)",
+          fontFamily: "var(--font-sans)",
+          fontSize: 12.5,
+          fontWeight: 500,
+          opacity: canConfirm ? 1 : 0.5,
+          pointerEvents: canConfirm ? "auto" : "none",
+        }}
+      >
+        Done
+      </button>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-due-date-field.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-due-date-field.tsx
new file mode 100644
index 00000000..14f66497
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-due-date-field.tsx
@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { CalendarIcon, ChevronDown } from "lucide-react";
+import { DueDateCalendarDialog } from "@/app/(protected)/workorders/_components/list/table/cells/due-date-calendar-dialog";
+import { WizardDateField } from "@/app/(protected)/workorders/_components/wizard/wizard-date-field";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { fmtDate } from "@/domain/work-orders/utils/wizard-date-utils";
+
+type WizardDueDateFieldProps = {
+  type: WOType | "";
+  value: string;
+  placeholder: string;
+  onChange: (iso: string) => void;
+  /** Schedule On floor: earlier days are not selectable (SH-356). */
+  minDate?: string;
+};
+
+/**
+ * Wizard Due Date editor.
+ * Emergency → dedicated calendar Dialog; other types → WizardDateField popover.
+ */
+export function WizardDueDateField({
+  type,
+  value,
+  placeholder,
+  onChange,
+  minDate,
+}: WizardDueDateFieldProps) {
+  const [open, setOpen] = useState(false);
+
+  if (type !== "Emergency") {
+    return (
+      <WizardDateField
+        value={value}
+        placeholder={placeholder}
+        onChange={onChange}
+        minDate={minDate}
+      />
+    );
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="flex w-full items-center gap-2 transition-colors"
+        style={{
+          height: 36,
+          border: "1px solid var(--color-border)",
+          borderRadius: 6,
+          background: "var(--color-bg-surface)",
+          padding: "0 10px",
+          outline: "none",
+        }}
+        onFocus={(e) => {
+          e.currentTarget.style.boxShadow = "0 0 0 2px var(--color-primary)";
+        }}
+        onBlur={(e) => {
+          e.currentTarget.style.boxShadow = "none";
+        }}
+        aria-haspopup="dialog"
+      >
+        <CalendarIcon size={16} className="shrink-0" style={{ color: "var(--muted-foreground)" }} />
+        <span
+          className="flex-1 truncate text-left"
+          style={{
+            fontFamily: "var(--font-sans)",
+            fontSize: 13,
+            color: value ? "var(--foreground)" : "var(--muted-foreground)",
+          }}
+        >
+          {value ? fmtDate(value) : placeholder}
+        </span>
+        <ChevronDown size={13} className="shrink-0" style={{ color: "var(--muted-foreground)" }} />
+      </button>
+      <DueDateCalendarDialog
+        open={open}
+        onOpenChange={setOpen}
+        value={value}
+        onSave={onChange}
+        minDate={minDate}
+      />
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-field-select-options.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-field-select-options.tsx
new file mode 100644
index 00000000..4dd7381d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-field-select-options.tsx
@@ -0,0 +1,99 @@
+import { Check } from "lucide-react";
+import { Text } from "@/components/ui/text";
+import type { WizardMenuOption } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select-types";
+
+type WizardFieldSelectOptionsProps = {
+  search: boolean;
+  searchPlaceholder: string;
+  query: string;
+  onQueryChange: (q: string) => void;
+  options: WizardMenuOption[];
+  value: string;
+  onPick: (key: string) => void;
+};
+
+export function WizardFieldSelectOptions({
+  search,
+  searchPlaceholder,
+  query,
+  onQueryChange,
+  options,
+  value,
+  onPick,
+}: WizardFieldSelectOptionsProps) {
+  return (
+    <>
+      {search && (
+        <div className="mb-1 px-1 pb-1.5" style={{ borderBottom: "1px solid var(--color-border)" }}>
+          <input
+            autoFocus
+            value={query}
+            onChange={(e) => onQueryChange(e.target.value)}
+            placeholder={searchPlaceholder}
+            className="w-full rounded px-2 py-1 text-[12px] focus:outline-none"
+            style={{
+              border: "1px solid var(--color-border)",
+              color: "var(--color-text-primary)",
+              background: "var(--color-bg-surface)",
+            }}
+          />
+        </div>
+      )}
+      <div style={{ maxHeight: 220, overflowY: "auto" }}>
+        {options.length === 0 ? (
+          <Text
+            as="p"
+            className="px-2 py-2 text-center"
+            style={{ fontSize: 12, color: "var(--color-text-muted)" }}
+          >
+            No matches
+          </Text>
+        ) : (
+          options.map((option) => (
+            <button
+              key={option.key}
+              type="button"
+              disabled={option.disabled}
+              title={option.title}
+              onClick={() => {
+                if (option.disabled) return;
+                onPick(option.key);
+              }}
+              className={
+                option.disabled
+                  ? "flex w-full cursor-not-allowed items-center gap-2 rounded px-2 py-1.5 opacity-50"
+                  : "flex w-full items-center gap-2 rounded px-2 py-1.5 transition-colors hover:bg-[#F9FAFB]"
+              }
+            >
+              {option.left != null && (
+                <span className="flex shrink-0 items-center">{option.left}</span>
+              )}
+              <span className="min-w-0 flex-1 text-left">
+                <span
+                  className="block truncate text-[12px]"
+                  style={{ color: "var(--color-text-primary)" }}
+                >
+                  {option.label}
+                </span>
+                {Boolean(option.description) && (
+                  <span
+                    className="mt-0.5 block truncate text-[11px]"
+                    style={{ color: "var(--color-text-muted)" }}
+                  >
+                    {option.description}
+                  </span>
+                )}
+              </span>
+              {option.right != null && (
+                <span className="flex shrink-0 items-center">{option.right}</span>
+              )}
+              {value === option.key && (
+                <Check size={10} className="shrink-0" style={{ color: "var(--color-primary)" }} />
+              )}
+            </button>
+          ))
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-field-select-types.ts b/src/app/(protected)/workorders/_components/wizard/wizard-field-select-types.ts
new file mode 100644
index 00000000..83c53ae0
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-field-select-types.ts
@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+export interface WizardMenuOption {
+  key: string;
+  label: string;
+  description?: string;
+  left?: ReactNode;
+  right?: ReactNode;
+  disabled?: boolean;
+  title?: string;
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-field-select.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-field-select.tsx
new file mode 100644
index 00000000..ede43f70
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-field-select.tsx
@@ -0,0 +1,139 @@
+import { useState, type ReactNode } from "react";
+import { ChevronDown } from "lucide-react";
+import { Popover } from "@mui/material";
+import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
+import { WizardFieldSelectOptions } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select-options";
+import type { WizardMenuOption } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select-types";
+import { useMenuAnchor } from "@/hooks/use-menu-anchor";
+
+export type { WizardMenuOption } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select-types";
+
+type WizardFieldSelectProps = {
+  value: string;
+  placeholder: string;
+  icon?: ReactNode;
+  options: WizardMenuOption[];
+  onPick: (key: string) => void;
+  search?: boolean;
+  searchPlaceholder?: string;
+  disabled?: boolean;
+  onSearchChange?: (query: string) => void;
+};
+
+function filterOptions(options: WizardMenuOption[], query: string): WizardMenuOption[] {
+  if (!query) {
+    return options;
+  }
+  const needle = query.toLowerCase();
+  return options.filter(
+    (o) =>
+      o.label.toLowerCase().includes(needle) ||
+      o.key.toLowerCase().includes(needle) ||
+      (o.description?.toLowerCase().includes(needle) ?? false),
+  );
+}
+
+export function WizardFieldSelect({
+  value,
+  placeholder,
+  icon,
+  options,
+  onPick,
+  search = true,
+  searchPlaceholder = "Search…",
+  disabled = false,
+  onSearchChange,
+}: WizardFieldSelectProps) {
+  const { anchorEl, open, setAnchor, close } = useMenuAnchor();
+  const [q, setQ] = useState("");
+  const selected = options.find((o) => o.key === value);
+  const filtered = onSearchChange ? options : filterOptions(options, q);
+
+  const handleQueryChange = (next: string) => {
+    setQ(next);
+    onSearchChange?.(next);
+  };
+
+  const handleClose = () => {
+    close();
+    setQ("");
+    onSearchChange?.("");
+  };
+
+  return (
+    <>
+      <MenuAnchorButton
+        disabled={disabled}
+        onAnchor={setAnchor}
+        open={open}
+        className="flex w-full items-center gap-2 transition-colors"
+        style={{
+          height: 36,
+          border: "1px solid var(--color-border)",
+          borderRadius: 6,
+          background: "var(--color-bg-surface)",
+          padding: "0 10px",
+          fontFamily: "var(--font-sans)",
+          fontSize: 13,
+          color: "var(--foreground)",
+          outline: "none",
+        }}
+        onFocus={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.boxShadow = "0 0 0 2px var(--color-primary)";
+        }}
+        onBlur={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.boxShadow = "none";
+        }}
+        aria-haspopup="listbox"
+      >
+        {(selected?.left ?? icon) != null && (
+          <span className="flex shrink-0 items-center">{selected?.left ?? icon}</span>
+        )}
+        {selected ? (
+          <span
+            className="min-w-0 flex-1 truncate text-left"
+            style={{ fontSize: 13, color: "var(--foreground)" }}
+          >
+            {selected.label}
+          </span>
+        ) : (
+          <span
+            className="min-w-0 flex-1 truncate text-left"
+            style={{ fontSize: 13, color: "var(--muted-foreground)" }}
+          >
+            {placeholder}
+          </span>
+        )}
+        <ChevronDown size={13} className="shrink-0" style={{ color: "var(--muted-foreground)" }} />
+      </MenuAnchorButton>
+
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
+        slotProps={{
+          paper: {
+            className: "mt-1 rounded-lg border border-border p-1.5 shadow-md",
+            style: { width: anchorEl?.offsetWidth ?? 280 },
+            onClick: (e: React.MouseEvent) => e.stopPropagation(),
+          },
+        }}
+      >
+        <WizardFieldSelectOptions
+          search={search}
+          searchPlaceholder={searchPlaceholder}
+          query={q}
+          onQueryChange={handleQueryChange}
+          options={filtered}
+          value={value}
+          onPick={(key) => {
+            onPick(key);
+            handleClose();
+          }}
+        />
+      </Popover>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-footer.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-footer.tsx
new file mode 100644
index 00000000..12ea5609
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-footer.tsx
@@ -0,0 +1,134 @@
+import { Check, ChevronLeft, ChevronRight, Lightbulb } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  WIZARD_STEPS,
+  canCreateWorkOrderFromWizard,
+  isWizardStepValid,
+  wizardStep1ContinueHint,
+  wizardStep2ContinueHint,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+
+type WizardFooterProps = {
+  step: number;
+  draft: WorkOrderWizardDraft;
+  onCancel: () => void;
+  onBack: () => void;
+  onContinue: () => void;
+  onCreate: () => void;
+  onAttemptContinue?: () => void;
+  isCreating: boolean;
+};
+
+function stepHint(step: number, draft: WorkOrderWizardDraft): string | null {
+  if (step === 1) {
+    return wizardStep1ContinueHint(draft);
+  }
+  if (step === 2) {
+    return wizardStep2ContinueHint(draft);
+  }
+  return null;
+}
+
+export function WizardFooter({
+  step,
+  draft,
+  onCancel,
+  onBack,
+  onContinue,
+  onCreate,
+  onAttemptContinue,
+  isCreating,
+}: WizardFooterProps) {
+  const stepValid = isWizardStepValid(step, draft);
+  const canCreate = canCreateWorkOrderFromWizard(draft);
+  const hint = stepHint(step, draft);
+
+  return (
+    <div
+      className="flex shrink-0 items-center gap-3"
+      style={{
+        borderTop: "1px solid var(--color-border)",
+        padding: "14px 28px",
+        background: "var(--color-bg-surface)",
+      }}
+    >
+      {step === 1 ? (
+        <Button
+          variant="ghost"
+          onClick={onCancel}
+          sx={{ fontSize: 13, color: "var(--muted-foreground)", minHeight: 36 }}
+        >
+          Cancel
+        </Button>
+      ) : (
+        <Button
+          variant="outline"
+          onClick={onBack}
+          startIcon={<ChevronLeft size={14} />}
+          sx={{ fontSize: 13, borderColor: "var(--color-border)", minHeight: 36 }}
+        >
+          Back
+        </Button>
+      )}
+
+      <div className="flex flex-1 justify-center">
+        {Boolean(hint) && (
+          <span
+            className="inline-flex items-center gap-1.5"
+            style={{ fontSize: 12, color: "var(--muted-foreground)" }}
+          >
+            <Lightbulb size={13} /> {hint}
+          </span>
+        )}
+      </div>
+
+      {step < WIZARD_STEPS.length ? (
+        <Button
+          onClick={() => {
+            if (!stepValid) {
+              onAttemptContinue?.();
+              return;
+            }
+            onContinue();
+          }}
+          endIcon={<ChevronRight size={14} />}
+          sx={{
+            background: "var(--color-primary)",
+            color: "#fff",
+            height: 36,
+            fontSize: 13,
+            fontWeight: 500,
+            ...(!stepValid ? { opacity: 0.7 } : {}),
+          }}
+        >
+          Continue
+        </Button>
+      ) : (
+        <Button
+          disabled={isCreating}
+          loading={isCreating}
+          loadingText="Creating…"
+          onClick={() => {
+            if (!canCreate) {
+              onAttemptContinue?.();
+              return;
+            }
+            onCreate();
+          }}
+          startIcon={!isCreating ? <Check size={14} /> : undefined}
+          sx={{
+            background: "var(--color-primary)",
+            color: "#fff",
+            height: 36,
+            fontSize: 13,
+            fontWeight: 500,
+            ...(!canCreate ? { opacity: 0.7 } : {}),
+          }}
+        >
+          Create work order
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-input-styles.ts b/src/app/(protected)/workorders/_components/wizard/wizard-input-styles.ts
new file mode 100644
index 00000000..708de8d3
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-input-styles.ts
@@ -0,0 +1,9 @@
+export const DLG_INPUT_CLS =
+  "w-full rounded-md px-2.5 py-1.5 focus:outline-none focus:ring-1 focus:ring-primary";
+
+export const DLG_INPUT_STYLE: React.CSSProperties = {
+  fontSize: 13,
+  border: "1px solid var(--color-border)",
+  color: "var(--color-text-primary)",
+  background: "var(--color-bg-surface)",
+};
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-labels.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-labels.tsx
new file mode 100644
index 00000000..0eac0458
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-labels.tsx
@@ -0,0 +1,180 @@
+import type { CSSProperties, ElementType, ReactNode } from "react";
+import { Check } from "lucide-react";
+
+export function StepCircle({ n, done, active }: { n: number; done: boolean; active: boolean }) {
+  const base: React.CSSProperties = {
+    width: 28,
+    height: 28,
+    borderRadius: 9999,
+    fontFamily: "var(--font-sans)",
+    fontSize: 13,
+    fontWeight: 600,
+  };
+
+  if (done) {
+    return (
+      <span
+        className="flex shrink-0 items-center justify-center"
+        style={{ ...base, background: "var(--color-success)", color: "#fff" }}
+      >
+        <Check size={14} />
+      </span>
+    );
+  }
+
+  if (active) {
+    return (
+      <span
+        className="flex shrink-0 items-center justify-center"
+        style={{ ...base, background: "var(--color-primary)", color: "#fff" }}
+      >
+        {n}
+      </span>
+    );
+  }
+
+  return (
+    <span
+      className="flex shrink-0 items-center justify-center"
+      style={{
+        ...base,
+        background: "var(--color-bg-muted)",
+        color: "var(--muted-foreground)",
+        border: "1px solid var(--color-border)",
+      }}
+    >
+      {n}
+    </span>
+  );
+}
+
+const WIZ_LABEL_STYLE: CSSProperties = {
+  fontFamily: "var(--font-mono)",
+  fontSize: 10,
+  fontWeight: 600,
+  letterSpacing: "0.08em",
+  textTransform: "uppercase",
+  color: "var(--muted-foreground)",
+};
+
+function WizOptionalTag() {
+  return (
+    <span
+      className="shrink-0 leading-none"
+      style={{
+        fontSize: 9,
+        fontWeight: 400,
+        letterSpacing: 0,
+        textTransform: "none",
+        color: "var(--color-text-muted)",
+      }}
+    >
+      optional
+    </span>
+  );
+}
+
+export function WizLabel({
+  children,
+  optional,
+  required,
+  leading,
+}: {
+  children: ReactNode;
+  optional?: boolean;
+  required?: boolean;
+  leading?: ReactNode;
+}) {
+  return (
+    <label
+      className="mb-1.5 inline-flex w-full flex-nowrap items-center gap-1.5"
+      style={WIZ_LABEL_STYLE}
+    >
+      {leading != null && <span className="flex shrink-0 items-center">{leading}</span>}
+      <span className="shrink-0">{children}</span>
+      {Boolean(required) && <span style={{ color: "var(--destructive)" }}>*</span>}
+      {Boolean(optional) && <WizOptionalTag />}
+    </label>
+  );
+}
+
+export function WizSubLabel({ children }: { children: ReactNode }) {
+  return (
+    <div
+      style={{
+        fontFamily: "var(--font-sans)",
+        fontSize: 13,
+        fontWeight: 600,
+        color: "var(--foreground)",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function WizLabelRow({
+  children,
+  optional,
+  onClear,
+}: {
+  children: ReactNode;
+  optional?: boolean;
+  onClear?: () => void;
+}) {
+  return (
+    <div className="mb-1.5 flex items-center justify-between gap-2" style={{ minHeight: 16 }}>
+      <span
+        className="inline-flex min-w-0 flex-nowrap items-baseline gap-1.5"
+        style={WIZ_LABEL_STYLE}
+      >
+        <span className="shrink-0">{children}</span>
+        {Boolean(optional) && <WizOptionalTag />}
+      </span>
+      {Boolean(onClear) && (
+        <button
+          type="button"
+          onClick={onClear}
+          className="inline-flex items-center gap-0.5 transition-colors"
+          style={{ fontSize: 12, color: "var(--color-text-muted)" }}
+          onMouseEnter={(e) => {
+            (e.currentTarget as HTMLButtonElement).style.color = "var(--foreground)";
+          }}
+          onMouseLeave={(e) => {
+            (e.currentTarget as HTMLButtonElement).style.color = "var(--color-text-muted)";
+          }}
+        >
+          × Clear
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function Detail({ icon: Icon, text }: { icon: ElementType; text: string }) {
+  return (
+    <div
+      className="flex items-center gap-1.5"
+      style={{ fontSize: 12, color: "var(--color-text-secondary)" }}
+    >
+      <Icon size={12} className="shrink-0" style={{ color: "var(--color-text-muted)" }} />
+      <span className="truncate">{text}</span>
+    </div>
+  );
+}
+
+export function ColorDot({ color }: { color: string }) {
+  return (
+    <span
+      aria-hidden
+      className="inline-flex shrink-0 rounded-full"
+      style={{
+        width: 8,
+        height: 8,
+        minWidth: 8,
+        minHeight: 8,
+        backgroundColor: color,
+      }}
+    />
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-service-notes-fields.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-service-notes-fields.tsx
new file mode 100644
index 00000000..1f0dafc2
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-service-notes-fields.tsx
@@ -0,0 +1,150 @@
+import type { ReactNode } from "react";
+import { Check } from "lucide-react";
+import { getPmTypeIcon } from "@/app/(protected)/workorders/_components/list/table/pm-type-icons";
+import { AvetaCheckbox } from "@/app/(protected)/workorders/_components/list/table/cells/aveta-checkbox";
+import {
+  DLG_INPUT_CLS,
+  DLG_INPUT_STYLE,
+} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
+
+type WizardServiceNotesFieldsProps = {
+  services: { id: string | number; value: string }[];
+  sel: string[];
+  onToggle: (service: string) => void;
+  note: string;
+  setNote: (v: string) => void;
+  search: string;
+  setSearch: (v: string) => void;
+  avetaRequired?: boolean;
+  onAvetaRequiredChange?: (value: boolean) => void;
+};
+
+function SvcSectionLabel({ children }: { children: ReactNode }) {
+  return (
+    <div
+      style={{
+        fontFamily: "var(--font-mono)",
+        fontSize: 10,
+        fontWeight: 600,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+        color: "var(--color-text-muted)",
+        marginBottom: 6,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Multi-select services + notes — mirrors design ServiceNotesFields (wizard inline). */
+export function WizardServiceNotesFields({
+  services,
+  sel,
+  onToggle,
+  note,
+  setNote,
+  search,
+  setSearch,
+  avetaRequired = false,
+  onAvetaRequiredChange,
+}: WizardServiceNotesFieldsProps) {
+  const filtered = search
+    ? services.filter((s) => s.value.toLowerCase().includes(search.toLowerCase()))
+    : services;
+
+  return (
+    <>
+      <div>
+        <SvcSectionLabel>Services</SvcSectionLabel>
+        <input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search services…"
+          className="mb-1.5 w-full rounded px-2 py-1.5 text-[12px] focus:outline-none focus:ring-1"
+          style={{
+            border: "1px solid var(--color-border)",
+            color: "var(--color-text-primary)",
+            background: "var(--color-bg-surface)",
+          }}
+        />
+        <div
+          className="rounded"
+          style={{ maxHeight: 200, overflowY: "auto", border: "1px solid var(--color-border)" }}
+        >
+          {filtered.map((s) => {
+            const checked = sel.includes(s.value);
+            const isPrimary = checked && sel[0] === s.value;
+            const Icon = getPmTypeIcon(s.value);
+            return (
+              <button
+                key={String(s.id)}
+                type="button"
+                onClick={() => onToggle(s.value)}
+                className="flex w-full items-center gap-2 px-2 py-1.5 text-left transition-colors hover:bg-[#F9FAFB]"
+              >
+                <span
+                  className="flex shrink-0 items-center justify-center"
+                  style={{
+                    width: 16,
+                    height: 16,
+                    borderRadius: 4,
+                    border: `1px solid ${checked ? "var(--color-primary)" : "var(--color-border)"}`,
+                    background: checked ? "var(--color-primary)" : "var(--color-bg-surface)",
+                  }}
+                >
+                  {checked && <Check size={11} style={{ color: "#fff" }} />}
+                </span>
+                <Icon size={13} className="shrink-0" style={{ color: "var(--color-text-muted)" }} />
+                <span
+                  className="min-w-0 flex-1 truncate text-[13px]"
+                  style={{ color: "var(--color-text-primary)" }}
+                >
+                  {s.value}
+                </span>
+                {isPrimary && (
+                  <span
+                    style={{
+                      fontFamily: "var(--font-mono)",
+                      fontSize: 10,
+                      fontWeight: 600,
+                      letterSpacing: "0.06em",
+                      textTransform: "uppercase",
+                      color: "var(--color-primary)",
+                      background: "var(--color-primary-tint)",
+                      padding: "1px 6px",
+                      borderRadius: 4,
+                    }}
+                  >
+                    Primary
+                  </span>
+                )}
+              </button>
+            );
+          })}
+          {filtered.length === 0 && (
+            <div className="px-2 py-3 text-[12px]" style={{ color: "var(--color-text-muted)" }}>
+              No services match.
+            </div>
+          )}
+        </div>
+      </div>
+      {onAvetaRequiredChange != null && (
+        <div style={{ marginTop: 16 }}>
+          <AvetaCheckbox checked={avetaRequired} onChange={onAvetaRequiredChange} />
+        </div>
+      )}
+      <div style={{ marginTop: 16 }}>
+        <SvcSectionLabel>Notes / Issue Detail</SvcSectionLabel>
+        <textarea
+          rows={3}
+          value={note}
+          onChange={(e) => setNote(e.target.value)}
+          placeholder="Describe the specific issue, location details, door number, etc."
+          className={`${DLG_INPUT_CLS} resize-none`}
+          style={{ ...DLG_INPUT_STYLE, fontSize: 13, fontFamily: "inherit" }}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-severity-picker.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-severity-picker.tsx
new file mode 100644
index 00000000..cea59ab0
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-severity-picker.tsx
@@ -0,0 +1,31 @@
+import { Text } from "@/components/ui/text";
+import type { WorkOrderSeverity } from "@/domain/work-orders/types/work-order-severity";
+import { SeverityOptionsList } from "@/app/(protected)/workorders/_components/list/table/cells/severity-options-list";
+import { WizLabel } from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
+
+type WizardSeverityPickerProps = {
+  value: WorkOrderSeverity | null;
+  onSelect: (severity: WorkOrderSeverity) => void;
+  showError: boolean;
+};
+
+export function WizardSeverityPicker({ value, onSelect, showError }: WizardSeverityPickerProps) {
+  return (
+    <div>
+      <WizLabel required>Severity (from APM)</WizLabel>
+      <Text
+        as="p"
+        variant="description"
+        sx={{ fontSize: 11, color: "var(--muted-foreground)", margin: "0 0 8px" }}
+      >
+        Transcribe the severity already assigned on the client&apos;s ticket.
+      </Text>
+      <SeverityOptionsList value={value} onSelect={onSelect} />
+      {Boolean(showError && value == null) && (
+        <Text as="p" variant="error" sx={{ fontSize: 11, marginTop: "6px" }}>
+          Severity is required for Emergency and Reactive work orders.
+        </Text>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary-rows.ts b/src/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary-rows.ts
new file mode 100644
index 00000000..e49e267a
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary-rows.ts
@@ -0,0 +1,58 @@
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import {
+  fmtDate,
+  fmtDateRange,
+  fmtWeekRange,
+  formatApptRange,
+} from "@/domain/work-orders/utils/wizard-date-utils";
+
+function scheduleOnLabel(draft: WorkOrderWizardDraft): string {
+  if (draft.schedMode === "range" && draft.scheduledOn && draft.scheduleEnd) {
+    return fmtDateRange(draft.scheduledOn, draft.scheduleEnd);
+  }
+  if (!draft.scheduledOn) {
+    return "—";
+  }
+  if (draft.scheduleWeekOnly) {
+    return fmtWeekRange(draft.targetWeek || draft.scheduledOn);
+  }
+  return fmtDate(draft.scheduledOn);
+}
+
+function pocLabel(draft: WorkOrderWizardDraft): string {
+  if (!draft.pocName) {
+    return "—";
+  }
+  return draft.pocPhone ? `${draft.pocName} · ${draft.pocPhone}` : draft.pocName;
+}
+
+function formatAdditionalPocSummary(draft: WorkOrderWizardDraft): string {
+  const count = draft.additionalContacts.length;
+  if (count === 0) {
+    return "—";
+  }
+  const names = draft.additionalContacts.map((contact) => contact.name.trim()).filter(Boolean);
+  if (names.length > 0) {
+    return names.join(", ");
+  }
+  return `${count} contact${count === 1 ? "" : "s"}`;
+}
+
+/** Builds the label/value rows for the wizard sidebar's live summary card. */
+export function buildWizardSidebarSummaryRows(draft: WorkOrderWizardDraft): [string, string][] {
+  return [
+    ["WO #", draft.woNumber ? `#${draft.woNumber}` : "—"],
+    ["Type", draft.type || "—"],
+    ["Schedule on", scheduleOnLabel(draft)],
+    ["Due date", fmtDate(draft.dueDate) || "—"],
+    ["Assigned to", draft.assigneeName || "—"],
+    ["Site", draft.siteCode || draft.locationName || "—"],
+    ["POC", pocLabel(draft)],
+    ["Additional POCs", formatAdditionalPocSummary(draft)],
+    ["Service", draft.pm || "—"],
+    ["Technician", draft.vendorName || "—"],
+    ["Company", draft.vendorName || "—"],
+    ["Appt time", draft.apptStart ? formatApptRange(draft.apptStart, draft.apptEnd) : "—"],
+    ["Status", draft.status || "Incomplete"],
+  ];
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary.tsx
new file mode 100644
index 00000000..e330f575
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary.tsx
@@ -0,0 +1,82 @@
+import {
+  WIZARD_STATUS_DOTS,
+  type WizardWOStatus,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+import { buildWizardSidebarSummaryRows } from "@/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary-rows";
+import { ColorDot } from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
+
+export function WizardSidebarSummary({ draft }: { draft: WorkOrderWizardDraft }) {
+  const summary = buildWizardSidebarSummaryRows(draft);
+  const statusLabel = draft.status || "Incomplete";
+  const statusValue = statusLabel as WizardWOStatus;
+  const statusDotColor = WIZARD_STATUS_DOTS[statusValue] ?? WIZARD_STATUS_DOTS.Incomplete;
+
+  return (
+    <div style={{ marginTop: "auto", paddingTop: 44 }}>
+      <div
+        style={{
+          fontFamily: "var(--font-mono)",
+          fontSize: 10,
+          fontWeight: 600,
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+          color: "var(--muted-foreground)",
+          marginBottom: 8,
+        }}
+      >
+        This work order
+      </div>
+      {summary.map(([label, val], i) => (
+        <div
+          key={label}
+          className="flex items-center justify-between gap-2"
+          style={{
+            padding: "4px 0",
+            borderBottom: i < summary.length - 1 ? "1px solid var(--color-border)" : "none",
+          }}
+        >
+          <span
+            className="shrink-0"
+            style={{
+              fontFamily: "var(--font-sans)",
+              fontSize: 11,
+              fontWeight: 400,
+              color: "var(--muted-foreground)",
+            }}
+          >
+            {label}
+          </span>
+          {label === "Status" ? (
+            <span className="inline-flex min-w-0 items-center gap-1.5">
+              <ColorDot color={statusDotColor} />
+              <span
+                className="truncate text-right"
+                style={{
+                  fontFamily: "var(--font-sans)",
+                  fontSize: 13,
+                  fontWeight: 500,
+                  color: "var(--foreground)",
+                }}
+              >
+                {statusLabel}
+              </span>
+            </span>
+          ) : (
+            <span
+              className="truncate text-right"
+              style={{
+                fontFamily: "var(--font-sans)",
+                fontSize: 13,
+                fontWeight: 500,
+                color: "var(--foreground)",
+              }}
+            >
+              {val}
+            </span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-sidebar.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-sidebar.tsx
new file mode 100644
index 00000000..599768a5
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-sidebar.tsx
@@ -0,0 +1,113 @@
+import { ClipboardList } from "lucide-react";
+import {
+  WIZARD_STEPS,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+import { StepCircle } from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
+import { WizardSidebarSummary } from "@/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary";
+
+type WizardSidebarProps = {
+  step: number;
+  draft: WorkOrderWizardDraft;
+};
+
+export function WizardSidebar({ step, draft }: WizardSidebarProps) {
+  return (
+    <div
+      className="flex shrink-0 flex-col overflow-y-auto"
+      style={{
+        width: 260,
+        background: "var(--color-bg-muted)",
+        borderRight: "1px solid var(--color-border)",
+        padding: 24,
+      }}
+    >
+      <div className="flex items-center gap-2.5">
+        <span
+          className="flex shrink-0 items-center justify-center"
+          style={{ width: 34, height: 34, borderRadius: 8, background: "var(--color-primary)" }}
+        >
+          <ClipboardList size={18} color="#fff" />
+        </span>
+        <div className="min-w-0 leading-tight">
+          <div
+            style={{
+              fontFamily: "var(--font-mono)",
+              fontSize: 10,
+              fontWeight: 600,
+              letterSpacing: "0.08em",
+              textTransform: "uppercase",
+              color: "var(--muted-foreground)",
+            }}
+          >
+            Operations
+          </div>
+          <div
+            style={{
+              fontFamily: "var(--font-display)",
+              fontWeight: 700,
+              fontSize: 16,
+              color: "var(--foreground)",
+              lineHeight: 1.2,
+              marginTop: 1,
+            }}
+          >
+            New work order
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col" style={{ marginTop: 20 }}>
+        {WIZARD_STEPS.map((s, i) => {
+          const n = i + 1;
+          const done = n < step;
+          const active = n === step;
+          const last = i === WIZARD_STEPS.length - 1;
+          return (
+            <div key={s.title} className="flex gap-2.5">
+              <div className="flex flex-col items-center">
+                <StepCircle n={n} done={done} active={active} />
+                {!last && (
+                  <div
+                    style={{
+                      width: 2,
+                      flex: 1,
+                      minHeight: 16,
+                      marginTop: 2,
+                      background: done ? "var(--color-success)" : "var(--color-border)",
+                    }}
+                  />
+                )}
+              </div>
+              <div style={{ paddingBottom: last ? 0 : 14 }}>
+                <div
+                  style={{
+                    fontFamily: "var(--font-sans)",
+                    fontSize: 13,
+                    fontWeight: active ? 600 : 500,
+                    color: active || done ? "var(--foreground)" : "var(--muted-foreground)",
+                    lineHeight: 1.2,
+                  }}
+                >
+                  {s.title}
+                </div>
+                <div
+                  style={{
+                    fontFamily: "var(--font-sans)",
+                    fontSize: 11,
+                    color: "var(--muted-foreground)",
+                    marginTop: 2,
+                  }}
+                >
+                  {s.nav}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <WizardSidebarSummary draft={draft} />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-step-header.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-step-header.tsx
new file mode 100644
index 00000000..29976864
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-step-header.tsx
@@ -0,0 +1,42 @@
+import { Text } from "@/components/ui/text";
+import { WIZARD_STEPS } from "@/domain/work-orders/types/work-order-wizard";
+
+export function WizardStepHeader({ step }: { step: number }) {
+  return (
+    <div style={{ marginBottom: 24 }}>
+      <div
+        style={{
+          fontFamily: "var(--font-mono)",
+          fontSize: 10,
+          fontWeight: 600,
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+          color: "var(--color-primary)",
+        }}
+      >
+        Step {step} of {WIZARD_STEPS.length}
+      </div>
+      <Text
+        variant="title"
+        sx={{
+          fontWeight: 700,
+          fontSize: 20,
+          color: "var(--foreground)",
+          marginTop: "6px",
+        }}
+      >
+        {WIZARD_STEPS[step - 1].title}
+      </Text>
+      <Text
+        variant="description"
+        sx={{
+          fontSize: 13,
+          color: "var(--muted-foreground)",
+          marginTop: "4px",
+        }}
+      >
+        {WIZARD_STEPS[step - 1].subtitle}
+      </Text>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-step-location-poc-fields.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-step-location-poc-fields.tsx
new file mode 100644
index 00000000..c7916686
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-step-location-poc-fields.tsx
@@ -0,0 +1,32 @@
+import { PocContactFields } from "@/app/(protected)/workorders/_components/poc/poc-contact-fields";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+
+type WizardStepLocationPocFieldsProps = {
+  draft: WorkOrderWizardDraft;
+  showErrors?: boolean;
+  onUpdate: <K extends keyof WorkOrderWizardDraft>(key: K, value: WorkOrderWizardDraft[K]) => void;
+};
+
+export function WizardStepLocationPocFields({
+  draft,
+  showErrors = false,
+  onUpdate,
+}: WizardStepLocationPocFieldsProps) {
+  const pocIncomplete = !draft.pocName.trim() || !draft.pocPhone.trim();
+
+  return (
+    <PocContactFields
+      pocName={draft.pocName}
+      pocPhone={draft.pocPhone}
+      pocNotes={draft.pocNotes}
+      additionalContacts={draft.additionalContacts}
+      onPocNameChange={(value) => onUpdate("pocName", value)}
+      onPocPhoneChange={(value) => onUpdate("pocPhone", value)}
+      onPocNotesChange={(value) => onUpdate("pocNotes", value)}
+      onAdditionalContactsChange={(contacts) => onUpdate("additionalContacts", contacts)}
+      helperText="Auto-filled from records — edit if outdated"
+      showPrimaryErrors={showErrors && pocIncomplete}
+      primaryRequired
+    />
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-step-location-service-select.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-step-location-service-select.tsx
new file mode 100644
index 00000000..8b15610d
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-step-location-service-select.tsx
@@ -0,0 +1,103 @@
+import { Droplets, Plus } from "lucide-react";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import { getPmTypeIcon } from "@/app/(protected)/workorders/_components/list/table/pm-type-icons";
+import { WizardFieldSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select";
+import { WizardServiceNotesFields } from "@/app/(protected)/workorders/_components/wizard/wizard-service-notes-fields";
+import { WizLabel } from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
+
+type ServiceOption = { id: string | number; value: string };
+
+type WizardStepLocationServiceSelectProps = {
+  draft: WorkOrderWizardDraft;
+  services: ServiceOption[];
+  svcOpen: boolean;
+  onSvcOpenChange: (open: boolean) => void;
+  svcSearch: string;
+  onSvcSearchChange: (q: string) => void;
+  onUpdate: <K extends keyof WorkOrderWizardDraft>(key: K, value: WorkOrderWizardDraft[K]) => void;
+  onPatch: (patch: Partial<WorkOrderWizardDraft>) => void;
+};
+
+export function WizardStepLocationServiceSelect({
+  draft,
+  services,
+  svcOpen,
+  onSvcOpenChange,
+  svcSearch,
+  onSvcSearchChange,
+  onUpdate,
+  onPatch,
+}: WizardStepLocationServiceSelectProps) {
+  const clearVendorIfPrimaryChanged = (nextPm: string): Partial<WorkOrderWizardDraft> =>
+    nextPm !== draft.pm ? { vendorId: "", vendorName: "", techPhone: "", vendorNotes: "" } : {};
+
+  const selectSvc = (p: string) => {
+    const selected = services.find((service) => service.value === p);
+    onPatch({
+      pm: p,
+      serviceId: selected?.id ?? null,
+      extraServices: [],
+      ...clearVendorIfPrimaryChanged(p),
+    });
+  };
+
+  return (
+    <div>
+      <WizLabel optional>Service</WizLabel>
+      <WizardFieldSelect
+        value={draft.pm}
+        placeholder="Select service…"
+        icon={
+          <Droplets size={16} className="shrink-0" style={{ color: "var(--muted-foreground)" }} />
+        }
+        searchPlaceholder="Search services…"
+        options={services.map((s) => {
+          const Icon = getPmTypeIcon(s.value);
+          return {
+            key: s.value,
+            label: s.value,
+            left: (
+              <Icon size={16} className="shrink-0" style={{ color: "var(--muted-foreground)" }} />
+            ),
+          };
+        })}
+        onPick={selectSvc}
+      />
+      {!svcOpen ? (
+        <button
+          type="button"
+          onClick={() => onSvcOpenChange(true)}
+          className="transition-colors"
+          style={{
+            fontSize: 12,
+            fontWeight: 500,
+            color: "var(--color-primary)",
+            padding: "6px 0 0",
+            display: "flex",
+            alignItems: "center",
+            gap: 4,
+          }}
+        >
+          <Plus size={12} /> Service &amp; Notes
+        </button>
+      ) : (
+        <div
+          className="mt-2 rounded-lg p-3"
+          style={{ background: "var(--color-bg-muted)", border: "1px solid var(--color-border)" }}
+        >
+          <WizardServiceNotesFields
+            services={services}
+            sel={draft.pm ? [draft.pm] : []}
+            onToggle={selectSvc}
+            note={draft.pmNote}
+            setNote={(v) => onUpdate("pmNote", v)}
+            search={svcSearch}
+            setSearch={onSvcSearchChange}
+            avetaRequired={draft.avetaRequired}
+            onAvetaRequiredChange={(value) => onUpdate("avetaRequired", value)}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-step-location-service.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-step-location-service.tsx
new file mode 100644
index 00000000..2ef9f971
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-step-location-service.tsx
@@ -0,0 +1,77 @@
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+import type { Location } from "@/domain/locations/types/location";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import { WizardStepLocationPocFields } from "@/app/(protected)/workorders/_components/wizard/wizard-step-location-poc-fields";
+import { WizardStepLocationServiceSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-step-location-service-select";
+import { WizardStepLocationSiteDetails } from "@/app/(protected)/workorders/_components/wizard/wizard-step-location-site-details";
+import { WizardStepLocationSiteSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-step-location-site-select";
+
+type ServiceOption = { id: string | number; value: string };
+
+type WizardStepLocationServiceProps = {
+  draft: WorkOrderWizardDraft;
+  locations: LocationOption[];
+  locationDetail: Location | undefined;
+  locationDetailLoading?: boolean;
+  locationDetailError?: boolean;
+  services: ServiceOption[];
+  showErrors?: boolean;
+  svcOpen: boolean;
+  onSvcOpenChange: (open: boolean) => void;
+  svcSearch: string;
+  onSvcSearchChange: (q: string) => void;
+  onUpdate: <K extends keyof WorkOrderWizardDraft>(key: K, value: WorkOrderWizardDraft[K]) => void;
+  onPatch: (patch: Partial<WorkOrderWizardDraft>) => void;
+};
+
+export function WizardStepLocationService({
+  draft,
+  locations,
+  locationDetail,
+  locationDetailLoading,
+  locationDetailError,
+  services,
+  showErrors = false,
+  svcOpen,
+  onSvcOpenChange,
+  svcSearch,
+  onSvcSearchChange,
+  onUpdate,
+  onPatch,
+}: WizardStepLocationServiceProps) {
+  const selectedLoc = locations.find((l) => String(l.id) === draft.locationId);
+
+  return (
+    <div className="space-y-5">
+      <WizardStepLocationSiteSelect
+        locationId={draft.locationId}
+        locations={locations}
+        onPatch={onPatch}
+      />
+
+      {draft.locationId !== "" && (
+        <>
+          <WizardStepLocationSiteDetails
+            selectedLoc={selectedLoc}
+            locationName={draft.locationName}
+            locationDetail={locationDetail}
+            locationDetailLoading={locationDetailLoading}
+            locationDetailError={locationDetailError}
+          />
+          <WizardStepLocationPocFields draft={draft} showErrors={showErrors} onUpdate={onUpdate} />
+        </>
+      )}
+
+      <WizardStepLocationServiceSelect
+        draft={draft}
+        services={services}
+        svcOpen={svcOpen}
+        onSvcOpenChange={onSvcOpenChange}
+        svcSearch={svcSearch}
+        onSvcSearchChange={onSvcSearchChange}
+        onUpdate={onUpdate}
+        onPatch={onPatch}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-step-location-site-details.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-step-location-site-details.tsx
new file mode 100644
index 00000000..71cbfd89
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-step-location-site-details.tsx
@@ -0,0 +1,88 @@
+import { ExternalLink, Mail, MapPin, Phone } from "lucide-react";
+import { Text } from "@/components/ui/text";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+import type { Location } from "@/domain/locations/types/location";
+import { formatLocationAddressPreview } from "@/domain/locations/mappers/location-mapper";
+import { Detail } from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
+
+function buildMapsUrl(location: Location): string {
+  const query = formatLocationAddressPreview(location);
+  return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`;
+}
+
+type WizardStepLocationSiteDetailsProps = {
+  selectedLoc: LocationOption | undefined;
+  locationName: string;
+  locationDetail: Location | undefined;
+  locationDetailLoading?: boolean;
+  locationDetailError?: boolean;
+};
+
+function SiteDetailsSkeleton() {
+  return (
+    <div className="space-y-1.5" aria-busy="true" role="status" aria-label="Loading site details">
+      <span
+        className="block h-3 w-3/4 animate-pulse rounded"
+        style={{ background: "var(--color-bg-muted)", width: "75%", height: 12 }}
+      />
+      <span
+        className="block h-3 w-1/2 animate-pulse rounded"
+        style={{ background: "var(--color-bg-muted)", width: "50%", height: 12 }}
+      />
+    </div>
+  );
+}
+
+export function WizardStepLocationSiteDetails({
+  selectedLoc,
+  locationName,
+  locationDetail,
+  locationDetailLoading,
+  locationDetailError,
+}: WizardStepLocationSiteDetailsProps) {
+  const addressPreview = locationDetail ? formatLocationAddressPreview(locationDetail) : "";
+
+  return (
+    <div
+      className="space-y-1.5 rounded-lg p-3"
+      style={{ background: "var(--color-bg-muted)", border: "1px solid var(--color-border)" }}
+    >
+      {locationDetail ? (
+        <>
+          <Detail icon={MapPin} text={addressPreview || selectedLoc?.name || locationName || "—"} />
+          {Boolean(locationDetail.phone) && (
+            <Detail icon={Phone} text={locationDetail.phone ?? ""} />
+          )}
+          {Boolean(locationDetail.contactEmail) && (
+            <Detail icon={Mail} text={locationDetail.contactEmail ?? ""} />
+          )}
+          {Boolean(addressPreview) && (
+            <a
+              href={buildMapsUrl(locationDetail)}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+              style={{ color: "var(--color-primary)" }}
+            >
+              <ExternalLink size={12} /> Open in Google Maps
+            </a>
+          )}
+        </>
+      ) : (
+        <>
+          <Detail icon={MapPin} text={selectedLoc?.name || locationName || "—"} />
+          {Boolean(locationDetailLoading) && <SiteDetailsSkeleton />}
+          {Boolean(locationDetailError) && (
+            <Text
+              as="p"
+              variant="description"
+              sx={{ fontSize: 12, color: "var(--muted-foreground)" }}
+            >
+              Could not load full site details. City and site code above are still available.
+            </Text>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-step-location-site-select.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-step-location-site-select.tsx
new file mode 100644
index 00000000..583828d9
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-step-location-site-select.tsx
@@ -0,0 +1,61 @@
+import { Info, MapPin } from "lucide-react";
+import { Text } from "@/components/ui/text";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+import { resolveSiteCode } from "@/domain/work-orders/mappers/work-order-board-mapper";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import { WizardFieldSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select";
+import { WizLabel } from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
+
+type WizardStepLocationSiteSelectProps = {
+  locationId: string;
+  locations: LocationOption[];
+  onPatch: (patch: Partial<WorkOrderWizardDraft>) => void;
+};
+
+export function WizardStepLocationSiteSelect({
+  locationId,
+  locations,
+  onPatch,
+}: WizardStepLocationSiteSelectProps) {
+  return (
+    <div>
+      <WizLabel required>Site</WizLabel>
+      <WizardFieldSelect
+        value={locationId}
+        placeholder="Select site…"
+        icon={
+          <MapPin size={16} className="shrink-0" style={{ color: "var(--muted-foreground)" }} />
+        }
+        searchPlaceholder="Search site code or city…"
+        options={locations.map((loc) => ({
+          key: String(loc.id),
+          label: loc.name,
+        }))}
+        onPick={(id) => {
+          const loc = locations.find((l) => String(l.id) === id);
+          // Switching site invalidates the previous POC — clear so autofill can
+          // seed from the new location without clobbering mid-load edits later.
+          onPatch({
+            locationId: id,
+            locationName: loc?.name ?? "",
+            siteCode: loc ? resolveSiteCode(loc) : "",
+            pocName: "",
+            pocPhone: "",
+            pocNotes: "",
+            additionalContacts: [],
+          });
+        }}
+      />
+      {!locationId && (
+        <Text
+          as="p"
+          variant="description"
+          className="mt-1.5 flex items-center gap-1"
+          sx={{ fontSize: 11, color: "var(--muted-foreground)" }}
+        >
+          <Info size={12} className="shrink-0" /> Site is required to continue.
+        </Text>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule.tsx
new file mode 100644
index 00000000..7a655742
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule.tsx
@@ -0,0 +1,361 @@
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+import { Text } from "@/components/ui/text";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import {
+  WO_TYPE_META,
+  WO_TYPES,
+  WIZARD_WO_NUMBER_MAX_LENGTH,
+  isWizardWoNumberValid,
+  type WOType,
+} from "@/domain/work-orders/types/work-order-wizard";
+import {
+  typeNeedsSeverity,
+  type WorkOrderSeverity,
+} from "@/domain/work-orders/types/work-order-severity";
+import { getDispatcherAvatarColor } from "@/domain/work-orders/utils/dispatcher-avatar-color";
+import { withAutoScheduleStatus } from "@/domain/work-orders/utils/wo-lifecycle-transitions";
+import { WizardDateField } from "@/app/(protected)/workorders/_components/wizard/wizard-date-field";
+import { WizardDueDateField } from "@/app/(protected)/workorders/_components/wizard/wizard-due-date-field";
+import { WizardFieldSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select";
+import {
+  DLG_INPUT_CLS,
+  DLG_INPUT_STYLE,
+} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
+import {
+  ColorDot,
+  WizLabel,
+  WizLabelRow,
+} from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
+import { WizardSeverityPicker } from "@/app/(protected)/workorders/_components/wizard/wizard-severity-picker";
+import { CheckCircle2, Clock, Flame, Users, Wrench, Zap } from "lucide-react";
+import type { ElementType } from "react";
+import {
+  clearDueDateBeforeSchedule,
+  resolveDueDateFloor,
+} from "@/domain/work-orders/utils/due-date-floor";
+
+const WO_TYPE_ICONS: Record<WOType, ElementType> = {
+  PM: Wrench,
+  Reactive: Zap,
+  Emergency: Flame,
+  Overdue: Clock,
+};
+
+function nextSeverityForType(
+  currentType: WOType | "",
+  nextType: WOType,
+  currentSeverity: WorkOrderSeverity | null,
+): WorkOrderSeverity | null {
+  if (!typeNeedsSeverity(nextType) || currentType !== nextType) {
+    return null;
+  }
+  return currentSeverity;
+}
+
+function WoTypePicker({
+  selected,
+  onSelect,
+}: {
+  selected: WOType | "";
+  onSelect: (type: WOType) => void;
+}) {
+  return (
+    <div className="auto-rows-fr grid grid-cols-2 gap-3">
+      {WO_TYPES.map((t) => {
+        const isSelected = selected === t;
+        const meta = WO_TYPE_META[t];
+        const Icon = WO_TYPE_ICONS[t];
+        return (
+          <button
+            key={t}
+            type="button"
+            onClick={() => onSelect(t)}
+            className="relative flex items-start gap-2.5 text-left transition-colors"
+            style={{
+              border: isSelected
+                ? "2px solid var(--color-primary)"
+                : "1px solid var(--color-border)",
+              borderRadius: 8,
+              background: isSelected ? "var(--color-primary-tint)" : "var(--color-bg-surface)",
+              padding: isSelected ? "13px 15px" : "14px 16px",
+            }}
+            onMouseEnter={(e) => {
+              if (!isSelected) {
+                const b = e.currentTarget;
+                b.style.borderColor = "color-mix(in srgb, var(--color-primary) 40%, transparent)";
+                b.style.background = "var(--color-bg-muted)";
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (!isSelected) {
+                const b = e.currentTarget;
+                b.style.borderColor = "var(--color-border)";
+                b.style.background = "var(--color-bg-surface)";
+              }
+            }}
+          >
+            <span
+              className="flex shrink-0 items-center justify-center"
+              style={{ width: 30, height: 30, borderRadius: 8, background: meta.bg }}
+            >
+              <Icon size={16} style={{ color: meta.fg }} />
+            </span>
+            <div className="min-w-0">
+              <div
+                style={{
+                  fontFamily: "var(--font-sans)",
+                  fontSize: 13,
+                  fontWeight: 600,
+                  color: "var(--foreground)",
+                }}
+              >
+                {t}
+              </div>
+              <Text
+                as="p"
+                variant="description"
+                sx={{
+                  fontSize: 11,
+                  fontWeight: 400,
+                  color: "var(--muted-foreground)",
+                  marginTop: "2px",
+                  lineHeight: 1.35,
+                }}
+              >
+                {meta.desc}
+              </Text>
+            </div>
+            {isSelected && (
+              <CheckCircle2
+                size={14}
+                className="absolute"
+                style={{ top: 8, right: 8, color: "var(--color-primary)" }}
+              />
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+type WizardTypeScheduleDatesProps = {
+  draft: WorkOrderWizardDraft;
+  onUpdate: <K extends keyof WorkOrderWizardDraft>(key: K, value: WorkOrderWizardDraft[K]) => void;
+  onPatch: (patch: Partial<WorkOrderWizardDraft>) => void;
+};
+
+function WizardTypeScheduleDates({ draft, onUpdate, onPatch }: WizardTypeScheduleDatesProps) {
+  return (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
+      <div>
+        <WizLabelRow
+          optional
+          onClear={
+            hasWizardSchedule(draft)
+              ? () => onPatch(withAutoScheduleStatus(draft, clearSchedulePatch()))
+              : undefined
+          }
+        >
+          Schedule On
+        </WizLabelRow>
+        <WizardDateField
+          value={draft.scheduleWeekOnly ? "" : draft.scheduledOn}
+          targetWeek={draft.scheduleWeekOnly ? draft.targetWeek || draft.scheduledOn : ""}
+          placeholder="Pick a date"
+          allowWeekMode
+          scheduleEnd={draft.scheduleEnd}
+          schedMode={draft.schedMode}
+          onChange={(iso) =>
+            onPatch(
+              withAutoScheduleStatus(draft, {
+                ...clearDueDateBeforeSchedule(draft.dueDate, iso),
+                scheduledOn: iso,
+                scheduleWeekOnly: false,
+                scheduleEnd: "",
+                schedMode: "date",
+                targetWeek: "",
+                isAddOnOverride: false,
+              }),
+            )
+          }
+          onChangeWeek={(w) =>
+            onPatch(
+              withAutoScheduleStatus(draft, {
+                ...clearDueDateBeforeSchedule(draft.dueDate, w),
+                scheduledOn: w,
+                scheduleWeekOnly: Boolean(w),
+                scheduleEnd: "",
+                schedMode: "week",
+                targetWeek: w,
+                isAddOnOverride: false,
+              }),
+            )
+          }
+          onChangeRange={(s, e) =>
+            onPatch(
+              withAutoScheduleStatus(draft, {
+                ...clearDueDateBeforeSchedule(draft.dueDate, s),
+                scheduledOn: s,
+                scheduleEnd: e,
+                schedMode: "range",
+                scheduleWeekOnly: false,
+                targetWeek: "",
+                isAddOnOverride: false,
+              }),
+            )
+          }
+        />
+      </div>
+
+      <div>
+        <WizLabelRow
+          optional
+          onClear={draft.dueDate !== "" ? () => onUpdate("dueDate", "") : undefined}
+        >
+          Due Date
+        </WizLabelRow>
+        <WizardDueDateField
+          type={draft.type}
+          value={draft.dueDate}
+          minDate={resolveDueDateFloor(draft)}
+          placeholder="No due date"
+          onChange={(iso) => onUpdate("dueDate", iso)}
+        />
+      </div>
+    </div>
+  );
+}
+
+type WizardStepTypeScheduleProps = {
+  draft: WorkOrderWizardDraft;
+  users: WorkOrderUser[];
+  showErrors?: boolean;
+  onUpdate: <K extends keyof WorkOrderWizardDraft>(key: K, value: WorkOrderWizardDraft[K]) => void;
+  onPatch: (patch: Partial<WorkOrderWizardDraft>) => void;
+  onDuplicateWoNumber?: (woNumber: string) => void;
+};
+
+function hasWizardSchedule(draft: WorkOrderWizardDraft): boolean {
+  return draft.scheduledOn !== "" || Boolean(draft.scheduleWeekOnly) || Boolean(draft.scheduleEnd);
+}
+
+function clearSchedulePatch(): Partial<WorkOrderWizardDraft> {
+  return {
+    scheduledOn: "",
+    scheduleWeekOnly: false,
+    scheduleEnd: "",
+    schedMode: undefined,
+    targetWeek: "",
+    isAddOnOverride: false,
+  };
+}
+
+export function WizardStepTypeSchedule({
+  draft,
+  users,
+  showErrors = false,
+  onUpdate,
+  onPatch,
+  onDuplicateWoNumber,
+}: WizardStepTypeScheduleProps) {
+  const needsSeverity = typeNeedsSeverity(draft.type);
+  const woNumberError = showErrors && !isWizardWoNumberValid(draft.woNumber);
+  const selectedUser = users.find((u) => String(u.id) === draft.assigneeId);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <WizLabel optional>Type of WO</WizLabel>
+        <WoTypePicker
+          selected={draft.type}
+          onSelect={(t) => {
+            const typeChanged = t !== draft.type;
+            onPatch({
+              type: t,
+              severity: nextSeverityForType(draft.type, t, draft.severity),
+              // A registry service is scoped to its work-order type, so a service picked
+              // under the previous type fails backend ResolveServiceAsync (SH-187/#131).
+              // Clear the service (and its vendor, filtered by the service) on a type change.
+              ...(typeChanged
+                ? {
+                    pm: "",
+                    serviceId: null,
+                    extraServices: [],
+                    vendorId: "",
+                    vendorName: "",
+                    techPhone: "",
+                  }
+                : {}),
+            });
+          }}
+        />
+      </div>
+
+      {Boolean(needsSeverity) && (
+        <WizardSeverityPicker
+          value={draft.severity}
+          showError={showErrors}
+          onSelect={(severity) => onUpdate("severity", severity)}
+        />
+      )}
+
+      <div>
+        <WizLabel optional>WO Number</WizLabel>
+        <input
+          type="text"
+          value={draft.woNumber}
+          onChange={(e) =>
+            onUpdate(
+              "woNumber",
+              e.target.value.replace(/[^a-zA-Z0-9]/g, "").slice(0, WIZARD_WO_NUMBER_MAX_LENGTH),
+            )
+          }
+          onBlur={() => onDuplicateWoNumber?.(draft.woNumber)}
+          placeholder="Leave blank for SH provisional number"
+          maxLength={WIZARD_WO_NUMBER_MAX_LENGTH}
+          className={DLG_INPUT_CLS}
+          style={DLG_INPUT_STYLE}
+        />
+        <Text
+          as="p"
+          variant="error"
+          when={Boolean(woNumberError)}
+          sx={{ fontSize: 11, marginTop: "6px" }}
+        >
+          WO number must be alphanumeric.
+        </Text>
+      </div>
+
+      <div>
+        <WizLabel optional>Assigned To</WizLabel>
+        <WizardFieldSelect
+          value={draft.assigneeId}
+          placeholder="Select dispatcher"
+          icon={
+            selectedUser ? (
+              <ColorDot color={getDispatcherAvatarColor(selectedUser)} />
+            ) : (
+              <Users size={16} className="shrink-0" style={{ color: "var(--muted-foreground)" }} />
+            )
+          }
+          searchPlaceholder="Search dispatcher…"
+          options={users.map((u) => ({
+            key: String(u.id),
+            label: u.name,
+            left: <ColorDot color={getDispatcherAvatarColor(u)} />,
+          }))}
+          onPick={(id) => {
+            const user = users.find((u) => String(u.id) === id);
+            onPatch({
+              assigneeId: id,
+              assigneeName: user?.name ?? "",
+            });
+          }}
+        />
+      </div>
+
+      <WizardTypeScheduleDates draft={draft} onUpdate={onUpdate} onPatch={onPatch} />
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/wizard/wizard-step-vendor-time.tsx b/src/app/(protected)/workorders/_components/wizard/wizard-step-vendor-time.tsx
new file mode 100644
index 00000000..1d052b45
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/wizard/wizard-step-vendor-time.tsx
@@ -0,0 +1,287 @@
+import { Clock, ExternalLink, Mail, User, Wrench } from "lucide-react";
+import { Text } from "@/components/ui/text";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import {
+  TIME_SLOTS,
+  WIZARD_STATUS_DOTS,
+  type WizardWOStatus,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+import { calcDuration, fmt12 } from "@/domain/work-orders/utils/wizard-date-utils";
+import {
+  formatVendorDistance,
+  formatVendorTechnicianLabel,
+} from "@/domain/work-orders/utils/vendor-dropdown-label";
+import {
+  getClosabilityGaps,
+  wizardDraftToClosabilityInput,
+} from "@/domain/work-orders/utils/wo-closability";
+import {
+  CREATION_INLINE_STATUSES,
+  getStatusOptionState,
+  withAutoScheduleStatus,
+} from "@/domain/work-orders/utils/wo-lifecycle-transitions";
+import { WizardFieldSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-field-select";
+import {
+  DLG_INPUT_CLS,
+  DLG_INPUT_STYLE,
+} from "@/app/(protected)/workorders/_components/wizard/wizard-input-styles";
+import {
+  ColorDot,
+  Detail,
+  WizLabel,
+  WizLabelRow,
+  WizSubLabel,
+} from "@/app/(protected)/workorders/_components/wizard/wizard-labels";
+
+type WizardStepVendorTimeProps = {
+  draft: WorkOrderWizardDraft;
+  vendors: VendorDropdownItem[];
+  onUpdate: <K extends keyof WorkOrderWizardDraft>(key: K, value: WorkOrderWizardDraft[K]) => void;
+  onPatch: (patch: Partial<WorkOrderWizardDraft>) => void;
+};
+
+function WizardVendorDetail({
+  vendor,
+  techPhone,
+  vendorNotes,
+  distance,
+  onUpdate,
+}: {
+  vendor: VendorDropdownItem;
+  techPhone: string;
+  vendorNotes: string;
+  distance: string;
+  onUpdate: <K extends keyof WorkOrderWizardDraft>(key: K, value: WorkOrderWizardDraft[K]) => void;
+}) {
+  return (
+    <>
+      <div>
+        <WizSubLabel>Technician phone</WizSubLabel>
+        <input
+          value={techPhone}
+          onChange={(e) => onUpdate("techPhone", e.target.value)}
+          placeholder="(000) 000-0000"
+          className={`${DLG_INPUT_CLS} mt-2`}
+          style={DLG_INPUT_STYLE}
+        />
+      </div>
+      <div>
+        <WizSubLabel>Company</WizSubLabel>
+        <div
+          className="mt-2 space-y-1.5 rounded-lg p-3"
+          style={{
+            background: "var(--color-bg-muted)",
+            border: "1px solid var(--color-border)",
+          }}
+        >
+          <div className="flex items-start justify-between gap-2">
+            <div style={{ fontSize: 13, fontWeight: 500, color: "var(--foreground)" }}>
+              {vendor.companyName || "—"}
+            </div>
+            {Boolean(distance) && (
+              <span className="shrink-0 text-[11px]" style={{ color: "var(--muted-foreground)" }}>
+                {distance}
+              </span>
+            )}
+          </div>
+          {Boolean(vendor.contactName) && <Detail icon={User} text={vendor.contactName} />}
+          {Boolean(vendor.tradeSpecialties) && (
+            <Detail icon={Wrench} text={vendor.tradeSpecialties} />
+          )}
+          {Boolean(vendor.address) && <Detail icon={Mail} text={vendor.address} />}
+          {Boolean(vendor.address) && (
+            <a
+              href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(vendor.address)}`}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1.5 text-[12px] hover:underline"
+              style={{ color: "var(--color-primary)" }}
+            >
+              <ExternalLink size={12} /> Open in Google Maps
+            </a>
+          )}
+        </div>
+      </div>
+      <div>
+        <WizSubLabel>Notes</WizSubLabel>
+        <textarea
+          value={vendorNotes}
+          onChange={(e) => onUpdate("vendorNotes", e.target.value)}
+          placeholder="Contact preferences, availability, etc."
+          rows={2}
+          className={`${DLG_INPUT_CLS} mt-2 resize-none`}
+          style={{ ...DLG_INPUT_STYLE, fontFamily: "inherit" }}
+        />
+      </div>
+    </>
+  );
+}
+
+type WizardApptTimeFieldsProps = Pick<WizardStepVendorTimeProps, "draft" | "onUpdate" | "onPatch">;
+
+function WizardApptTimeFields({ draft, onUpdate, onPatch }: WizardApptTimeFieldsProps) {
+  const duration = calcDuration(draft.apptStart, draft.apptEnd);
+
+  return (
+    <div>
+      <WizLabel optional>Appt Time</WizLabel>
+      <div className="flex items-center gap-2">
+        <WizardFieldSelect
+          value={draft.apptStart}
+          placeholder="Start"
+          icon={
+            <Clock size={16} className="shrink-0" style={{ color: "var(--muted-foreground)" }} />
+          }
+          search={false}
+          options={TIME_SLOTS.map((t) => ({ key: t, label: fmt12(t) }))}
+          onPick={(t) =>
+            onPatch({
+              apptStart: t,
+              apptEnd: draft.apptEnd && draft.apptEnd <= t ? "" : draft.apptEnd,
+            })
+          }
+        />
+        <span className="shrink-0 text-[12px]" style={{ color: "var(--muted-foreground)" }}>
+          to
+        </span>
+        <WizardFieldSelect
+          value={draft.apptEnd}
+          placeholder="End"
+          icon={
+            <Clock size={16} className="shrink-0" style={{ color: "var(--muted-foreground)" }} />
+          }
+          search={false}
+          disabled={!draft.apptStart}
+          options={TIME_SLOTS.filter((t) => !draft.apptStart || t > draft.apptStart).map((t) => ({
+            key: t,
+            label: fmt12(t),
+          }))}
+          onPick={(t) => onUpdate("apptEnd", t)}
+        />
+      </div>
+      {Boolean(draft.apptStart && draft.apptEnd && duration) && (
+        <Text
+          as="p"
+          variant="caption"
+          className="mt-2 flex items-center gap-1.5"
+          sx={{ fontSize: 11.5, color: "var(--muted-foreground)" }}
+        >
+          <Clock size={12} /> Duration {duration}
+        </Text>
+      )}
+    </div>
+  );
+}
+
+function buildWizardStatusOptions(draft: WorkOrderWizardDraft, closabilityGaps: string[]) {
+  return CREATION_INLINE_STATUSES.map((status) => {
+    const option = getStatusOptionState(draft, status, closabilityGaps);
+    return {
+      key: status,
+      label: status,
+      left: <ColorDot color={WIZARD_STATUS_DOTS[status]} />,
+      disabled: option.disabled,
+      title: option.title,
+    };
+  });
+}
+
+export function WizardStepVendorTime({
+  draft,
+  vendors,
+  onUpdate,
+  onPatch,
+}: WizardStepVendorTimeProps) {
+  const selectedVendor = vendors.find((v) => String(v.id) === draft.vendorId);
+  const statusValue = (draft.status || "Incomplete") as WizardWOStatus;
+  const statusDotColor = WIZARD_STATUS_DOTS[statusValue] ?? WIZARD_STATUS_DOTS.Incomplete;
+  const selectedDistance = formatVendorDistance(selectedVendor?.distanceMiles);
+  const closabilityGaps = getClosabilityGaps(wizardDraftToClosabilityInput(draft));
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <WizLabelRow
+          optional
+          onClear={
+            draft.vendorId !== ""
+              ? () => onPatch({ vendorId: "", vendorName: "", techPhone: "", vendorNotes: "" })
+              : undefined
+          }
+        >
+          Technician
+        </WizLabelRow>
+        <WizardFieldSelect
+          value={draft.vendorId}
+          placeholder="Select technician…"
+          icon={
+            selectedVendor ? (
+              <span
+                className="inline-flex shrink-0 items-center justify-center rounded-full"
+                style={{
+                  width: 20,
+                  height: 20,
+                  fontSize: 9,
+                  fontWeight: 600,
+                  background: "var(--color-bg-surface)",
+                  border: "1px solid var(--color-border)",
+                  color: "var(--color-text-secondary)",
+                }}
+              >
+                {(selectedVendor.contactName || selectedVendor.companyName)
+                  .slice(0, 2)
+                  .toUpperCase()}
+              </span>
+            ) : (
+              <Wrench size={16} className="shrink-0" style={{ color: "var(--muted-foreground)" }} />
+            )
+          }
+          searchPlaceholder="Search technician…"
+          options={vendors.map((v) => ({
+            key: String(v.id),
+            label: formatVendorTechnicianLabel(v),
+          }))}
+          onPick={(id) => {
+            const vendor = vendors.find((v) => String(v.id) === id);
+            onPatch({
+              vendorId: id,
+              vendorName: vendor?.companyName ?? "",
+              techPhone: "",
+            });
+          }}
+        />
+      </div>
+
+      {draft.vendorId !== "" && selectedVendor != null && (
+        <WizardVendorDetail
+          vendor={selectedVendor}
+          techPhone={draft.techPhone}
+          vendorNotes={draft.vendorNotes}
+          distance={selectedDistance}
+          onUpdate={onUpdate}
+        />
+      )}
+
+      <WizardApptTimeFields draft={draft} onUpdate={onUpdate} onPatch={onPatch} />
+
+      <div>
+        <WizLabel>Status</WizLabel>
+        <WizardFieldSelect
+          value={statusValue}
+          placeholder="Select status…"
+          search={false}
+          icon={<ColorDot color={statusDotColor} />}
+          options={buildWizardStatusOptions(draft, closabilityGaps)}
+          onPick={(status) => {
+            const option = getStatusOptionState(draft, status as WizardWOStatus, closabilityGaps);
+            if (option.disabled) {
+              return;
+            }
+            onPatch(withAutoScheduleStatus(draft, { status: status as WizardWOStatus }));
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/work-order-activity.tsx b/src/app/(protected)/workorders/_components/work-order-activity.tsx
new file mode 100644
index 00000000..bf070f97
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/work-order-activity.tsx
@@ -0,0 +1,189 @@
+import { useMemo, useState } from "react";
+import { Box, Button, Paper, Stack, Tab, Tabs, TextField, Typography } from "@mui/material";
+import type { WorkOrderAuditEntry, WorkOrderComment } from "@/domain/work-orders/types/work-order";
+import { useAddWorkOrderComment } from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { formatDateTime } from "@/lib/time-utils";
+
+type ActivityTab = "customer" | "internal" | "audit";
+
+function CommentTimeline({ comments }: { comments: WorkOrderComment[] }) {
+  const sorted = useMemo(
+    () =>
+      [...comments].sort(
+        (a, b) => new Date(a.createdDate).getTime() - new Date(b.createdDate).getTime(),
+      ),
+    [comments],
+  );
+
+  if (!sorted.length) {
+    return (
+      <Typography
+        sx={{
+          color: "text.secondary",
+        }}
+      >
+        No comments yet.
+      </Typography>
+    );
+  }
+
+  return (
+    <Stack spacing={2} className="max-h-72 overflow-y-auto">
+      {sorted.map((comment) => (
+        <Box key={String(comment.id)} className="rounded border border-border p-3">
+          <Stack
+            direction="row"
+            className="mb-1"
+            sx={{
+              justifyContent: "space-between",
+            }}
+          >
+            <Typography variant="caption" className="font-semibold">
+              {comment.userName || comment.commenter || "System"}
+            </Typography>
+            <Typography
+              variant="caption"
+              sx={{
+                color: "text.secondary",
+              }}
+            >
+              {comment.createdDate ? formatDateTime(comment.createdDate) : ""}
+            </Typography>
+          </Stack>
+          <Typography variant="body2">{comment.commenttext}</Typography>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
+
+function AuditTimeline({ entries }: { entries: WorkOrderAuditEntry[] }) {
+  const sorted = useMemo(
+    () =>
+      [...entries].sort(
+        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+      ),
+    [entries],
+  );
+
+  if (!sorted.length) {
+    return (
+      <Typography
+        sx={{
+          color: "text.secondary",
+        }}
+      >
+        No changes recorded.
+      </Typography>
+    );
+  }
+
+  return (
+    <Stack spacing={2} className="max-h-72 overflow-y-auto">
+      {sorted.map((entry) => (
+        <Box key={String(entry.id)} className="rounded border border-border p-3">
+          <Stack
+            direction="row"
+            className="mb-1"
+            sx={{
+              justifyContent: "space-between",
+            }}
+          >
+            <Typography variant="caption" className="font-semibold">
+              {entry.userName || "System"}
+            </Typography>
+            <Typography
+              variant="caption"
+              sx={{
+                color: "text.secondary",
+              }}
+            >
+              {entry.createdAt ? formatDateTime(entry.createdAt) : ""}
+            </Typography>
+          </Stack>
+          <Typography variant="body2">
+            <strong>{entry.fieldName}</strong> {entry.oldValue} → {entry.newValue}
+          </Typography>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
+
+interface WorkOrderActivityProps {
+  workOrderId: string;
+  comments: WorkOrderComment[];
+  auditLog: WorkOrderAuditEntry[];
+}
+
+export function WorkOrderActivity({ workOrderId, comments, auditLog }: WorkOrderActivityProps) {
+  const commentMutation = useAddWorkOrderComment(workOrderId);
+  const [activeTab, setActiveTab] = useState<ActivityTab>("customer");
+  const [commentText, setCommentText] = useState("");
+
+  const customerComments = useMemo(
+    () => comments.filter((comment) => comment.commentType === "customer"),
+    [comments],
+  );
+  const internalComments = useMemo(
+    () => comments.filter((comment) => comment.commentType === "internal"),
+    [comments],
+  );
+
+  const handleCommentSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!commentText.trim()) {
+      return;
+    }
+    if (activeTab !== "customer" && activeTab !== "internal") {
+      return;
+    }
+
+    commentMutation.mutate(
+      { text: commentText.trim(), commentType: activeTab },
+      { onSuccess: () => setCommentText("") },
+    );
+  };
+
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        Activity
+      </Typography>
+      <Tabs
+        value={activeTab}
+        onChange={(_event, value: ActivityTab) => setActiveTab(value)}
+        className="mb-3"
+      >
+        <Tab value="customer" label={`Customer (${customerComments.length})`} />
+        <Tab value="internal" label={`Internal (${internalComments.length})`} />
+        <Tab value="audit" label={`Audit Log (${auditLog.length})`} />
+      </Tabs>
+
+      {activeTab === "customer" && <CommentTimeline comments={customerComments} />}
+      {activeTab === "internal" && <CommentTimeline comments={internalComments} />}
+      {activeTab === "audit" && <AuditTimeline entries={auditLog} />}
+
+      {activeTab === "internal" && (
+        <Box component="form" onSubmit={handleCommentSubmit} className="mt-4 flex flex-col gap-2">
+          <TextField
+            multiline
+            rows={2}
+            value={commentText}
+            onChange={(event) => setCommentText(event.target.value)}
+            placeholder="Type a comment..."
+            disabled={commentMutation.isPending}
+          />
+          <Button
+            type="submit"
+            variant="contained"
+            className="self-end"
+            disabled={commentMutation.isPending || !commentText.trim()}
+          >
+            {commentMutation.isPending ? "Sending..." : "Send"}
+          </Button>
+        </Box>
+      )}
+    </Paper>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/work-order-fields.tsx b/src/app/(protected)/workorders/_components/work-order-fields.tsx
new file mode 100644
index 00000000..501d69c2
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/work-order-fields.tsx
@@ -0,0 +1,319 @@
+import { Autocomplete, Box, MenuItem, Stack, TextField } from "@mui/material";
+import { Controller } from "react-hook-form";
+import type { Control, FieldErrors, UseFormRegister } from "react-hook-form";
+import { Text } from "@/components/ui/text";
+import type { DropdownOption } from "@/domain/settings/dropdown-options/types/dropdown-option";
+import type { WorkOrderFormSchemaValues } from "@/domain/work-orders/schemas/work-order-schema";
+import {
+  WORK_ORDER_PRIORITY_OPTIONS,
+  WORK_ORDER_STATUS_OPTIONS,
+  type LocationOption,
+} from "@/domain/work-orders/types/work-order";
+import type { EmployeeOption } from "@/domain/work-orders/types/work-order-common";
+
+function SectionTitle({ children }: { children: string }) {
+  return (
+    <Text variant="label" className="mb-3 font-semibold uppercase tracking-wide">
+      {children}
+    </Text>
+  );
+}
+
+type FormFieldHandlers = {
+  register: UseFormRegister<WorkOrderFormSchemaValues>;
+  control: Control<WorkOrderFormSchemaValues>;
+  errors: FieldErrors<WorkOrderFormSchemaValues>;
+};
+
+type WorkOrderDetailsFieldsProps = FormFieldHandlers & {
+  locationOptions: LocationOption[];
+  isLoadingLocations: boolean;
+};
+
+export function WorkOrderDetailsFields({
+  register,
+  control,
+  errors,
+  locationOptions,
+  isLoadingLocations,
+}: WorkOrderDetailsFieldsProps) {
+  return (
+    <Box>
+      <SectionTitle>Work Order Details</SectionTitle>
+      <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+        <TextField
+          {...register("workOrderNumber")}
+          label="Customer WO"
+          placeholder="Customer work order number"
+          fullWidth
+        />
+        <TextField
+          {...register("title")}
+          label="Title"
+          required
+          error={Boolean(errors.title)}
+          helperText={errors.title?.message}
+          fullWidth
+        />
+      </Stack>
+      <Stack direction={{ xs: "column", md: "row" }} spacing={2} className="mt-4">
+        <Controller
+          name="locationId"
+          control={control}
+          render={({ field }) => (
+            <Autocomplete
+              options={locationOptions}
+              loading={isLoadingLocations}
+              getOptionLabel={(option: LocationOption) => option.name}
+              value={
+                locationOptions.find((location) => String(location.id) === field.value) ?? null
+              }
+              onChange={(_event, option) => field.onChange(option ? String(option.id) : "")}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  label="Location"
+                  required
+                  error={Boolean(errors.locationId)}
+                  helperText={errors.locationId?.message}
+                />
+              )}
+              className="flex-1"
+            />
+          )}
+        />
+        <TextField
+          {...register("source")}
+          label="Source"
+          placeholder="e.g., Amazon APM, Manual"
+          fullWidth
+        />
+      </Stack>
+    </Box>
+  );
+}
+
+type ClassificationFieldsProps = {
+  control: Control<WorkOrderFormSchemaValues>;
+  problems: DropdownOption[];
+  trades: DropdownOption[];
+  subTrades: DropdownOption[];
+  tradeValue: string;
+};
+
+export function ClassificationFields({
+  control,
+  problems,
+  trades,
+  subTrades,
+  tradeValue,
+}: ClassificationFieldsProps) {
+  return (
+    <Box>
+      <SectionTitle>Classification</SectionTitle>
+      <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+        <Controller
+          name="problem"
+          control={control}
+          render={({ field }) => (
+            <TextField {...field} value={field.value ?? ""} label="Problem" select fullWidth>
+              <MenuItem value="">Select Problem</MenuItem>
+              {problems.map((option) => (
+                <MenuItem key={String(option.id)} value={option.value}>
+                  {option.value}
+                </MenuItem>
+              ))}
+            </TextField>
+          )}
+        />
+        <Controller
+          name="trade"
+          control={control}
+          render={({ field }) => (
+            <TextField {...field} value={field.value ?? ""} label="Trade" select fullWidth>
+              <MenuItem value="">Select Trade</MenuItem>
+              {trades.map((option) => (
+                <MenuItem key={String(option.id)} value={option.value}>
+                  {option.value}
+                </MenuItem>
+              ))}
+            </TextField>
+          )}
+        />
+        <Controller
+          name="subTrade"
+          control={control}
+          render={({ field }) => (
+            <TextField
+              {...field}
+              value={field.value ?? ""}
+              label="Sub-Trade"
+              select
+              disabled={!tradeValue}
+              fullWidth
+            >
+              <MenuItem value="">
+                {tradeValue ? "Select Sub-Trade" : "Select a Trade first"}
+              </MenuItem>
+              {subTrades.map((option) => (
+                <MenuItem key={String(option.id)} value={option.value}>
+                  {option.value}
+                </MenuItem>
+              ))}
+            </TextField>
+          )}
+        />
+      </Stack>
+    </Box>
+  );
+}
+
+type ScheduleFieldsProps = FormFieldHandlers & {
+  employees: EmployeeOption[];
+};
+
+export function ScheduleFields({ register, control, errors, employees }: ScheduleFieldsProps) {
+  return (
+    <Box>
+      <SectionTitle>Schedule & Priority</SectionTitle>
+      <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+        <Controller
+          name="priority"
+          control={control}
+          render={({ field }) => (
+            <TextField
+              {...field}
+              value={field.value ?? ""}
+              label="Priority"
+              select
+              required
+              error={Boolean(errors.priority)}
+              helperText={errors.priority?.message}
+              fullWidth
+            >
+              <MenuItem value="">Select Priority</MenuItem>
+              {WORK_ORDER_PRIORITY_OPTIONS.map((priority) => (
+                <MenuItem key={priority} value={priority}>
+                  {priority}
+                </MenuItem>
+              ))}
+            </TextField>
+          )}
+        />
+        <Controller
+          name="status"
+          control={control}
+          render={({ field }) => (
+            <TextField
+              {...field}
+              value={field.value ?? "Open"}
+              label="Status"
+              select
+              required
+              fullWidth
+            >
+              {WORK_ORDER_STATUS_OPTIONS.map((status) => (
+                <MenuItem key={status} value={status}>
+                  {status}
+                </MenuItem>
+              ))}
+            </TextField>
+          )}
+        />
+        <Controller
+          name="assignedTo"
+          control={control}
+          render={({ field }) => (
+            <Autocomplete
+              freeSolo
+              options={employees.map((employee) => employee.name)}
+              value={field.value}
+              onChange={(_event, value) => field.onChange(value ?? "")}
+              onInputChange={(_event, value) => field.onChange(value)}
+              renderInput={(params) => (
+                <TextField {...params} label="Assigned To" placeholder="Assigned to" />
+              )}
+              className="flex-1"
+            />
+          )}
+        />
+      </Stack>
+      <Stack direction={{ xs: "column", sm: "row" }} spacing={2} className="mt-4">
+        <TextField
+          {...register("createdDate")}
+          label="Created"
+          type="date"
+          required
+          error={Boolean(errors.createdDate)}
+          helperText={errors.createdDate?.message}
+          slotProps={{ inputLabel: { shrink: true } }}
+          fullWidth
+        />
+        <TextField
+          {...register("dueDate")}
+          label="Due Date"
+          type="date"
+          slotProps={{ inputLabel: { shrink: true } }}
+          fullWidth
+        />
+        <TextField
+          {...register("scheduledDate")}
+          label="Scheduled"
+          type="date"
+          slotProps={{ inputLabel: { shrink: true } }}
+          fullWidth
+        />
+        <TextField
+          {...register("completedDate")}
+          label="Completed"
+          type="date"
+          slotProps={{ inputLabel: { shrink: true } }}
+          fullWidth
+        />
+      </Stack>
+    </Box>
+  );
+}
+
+export function FinancialFields({
+  register,
+}: {
+  register: UseFormRegister<WorkOrderFormSchemaValues>;
+}) {
+  return (
+    <Box>
+      <SectionTitle>Financial</SectionTitle>
+      <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
+        <TextField
+          {...register("vendorNTE")}
+          label="Vendor NTE"
+          type="number"
+          fullWidth
+          slotProps={{ htmlInput: { step: "0.01", min: 0 } }}
+        />
+        <TextField {...register("po")} label="Customer PO" fullWidth />
+        <TextField {...register("tt")} label="TT" placeholder="Trouble ticket number" fullWidth />
+      </Stack>
+    </Box>
+  );
+}
+
+export function DescriptionFields({
+  register,
+}: {
+  register: UseFormRegister<WorkOrderFormSchemaValues>;
+}) {
+  return (
+    <Box>
+      <SectionTitle>Description</SectionTitle>
+      <TextField
+        {...register("description")}
+        label="Description"
+        multiline
+        rows={8}
+        placeholder="Detailed description of the work to be performed"
+        fullWidth
+      />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/work-order-form.tsx b/src/app/(protected)/workorders/_components/work-order-form.tsx
new file mode 100644
index 00000000..eddb9511
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/work-order-form.tsx
@@ -0,0 +1,395 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useForm, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Link as RouterLink, useNavigate, useParams, useSearchParams } from "react-router";
+import { Box, Breadcrumbs, Button, Link, Paper, Stack } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import { QueryErrorPanel } from "@/components/ui/query-error-panel";
+import { vendorOperationsApi } from "@/domain/vendor-operations/api/vendor-operations-api";
+import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
+import { mapWorkOrderDetailToFormValues } from "@/domain/work-orders/mappers/work-order-mapper";
+import {
+  workOrderFormSchema,
+  type WorkOrderFormSchemaValues,
+} from "@/domain/work-orders/schemas/work-order-schema";
+import { createDefaultWorkOrderFormValues } from "@/domain/work-orders/types/work-order";
+import {
+  useWorkOrderDetail,
+  useWorkOrderEmployeesDropdown,
+  useWorkOrderLocations,
+} from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useSaveWorkOrder } from "@/domain/work-orders/use-cases/use-save-work-order";
+import { toDateTimeLocalInputValue } from "@/lib/time-utils";
+import {
+  ClassificationFields,
+  DescriptionFields,
+  FinancialFields,
+  ScheduleFields,
+  WorkOrderDetailsFields,
+} from "@/app/(protected)/workorders/_components/work-order-fields";
+import { VendorAndTimeSection } from "@/app/(protected)/workorders/_components/vendor-assignment-section";
+import { DetailPageSkeleton } from "@/app/(protected)/workorders/_components/loading/detail-page-skeleton";
+
+type ScheduleBounds = {
+  kind: "valid" | "invalid" | "open";
+  startIso: string | undefined;
+  endIso: string | undefined;
+  error: string | null;
+};
+
+function computeScheduleBounds(startLocal: string, endLocal: string): ScheduleBounds {
+  const hasStart = startLocal.trim() !== "";
+  const hasEnd = endLocal.trim() !== "";
+
+  if (hasStart && hasEnd) {
+    const start = new Date(startLocal);
+    const end = new Date(endLocal);
+    if (
+      !Number.isNaN(start.getTime()) &&
+      !Number.isNaN(end.getTime()) &&
+      end.getTime() > start.getTime()
+    ) {
+      return {
+        kind: "valid",
+        startIso: start.toISOString(),
+        endIso: end.toISOString(),
+        error: null,
+      };
+    }
+    return {
+      kind: "invalid",
+      startIso: undefined,
+      endIso: undefined,
+      error: "Schedule end must be later than schedule start.",
+    };
+  }
+
+  if (hasStart || hasEnd) {
+    return {
+      kind: "invalid",
+      startIso: undefined,
+      endIso: undefined,
+      error: "Provide both a schedule start and end, or leave both blank.",
+    };
+  }
+
+  return { kind: "open", startIso: undefined, endIso: undefined, error: null };
+}
+
+function useVendorSchedule(
+  scheduledStartLocal: string,
+  scheduledEndLocal: string,
+  locationValue: string,
+  tradeValue: string,
+) {
+  const scheduleBounds = useMemo(
+    () => computeScheduleBounds(scheduledStartLocal, scheduledEndLocal),
+    [scheduledStartLocal, scheduledEndLocal],
+  );
+
+  const { data: availableVendors = [], isLoading: isLoadingVendors } = useQuery({
+    queryKey: [
+      "vendor-operations",
+      "availability",
+      scheduleBounds.startIso ?? null,
+      scheduleBounds.endIso ?? null,
+      locationValue,
+      tradeValue,
+    ],
+    queryFn: () =>
+      vendorOperationsApi.availability({
+        start: scheduleBounds.startIso,
+        end: scheduleBounds.endIso,
+        locationId: locationValue || undefined,
+        trade: tradeValue || undefined,
+      }),
+    enabled: scheduleBounds.kind !== "invalid",
+    staleTime: 30_000,
+  });
+
+  const truthfulVendors =
+    scheduleBounds.kind === "valid"
+      ? availableVendors
+      : availableVendors.map((vendor) => ({
+          ...vendor,
+          availabilityStatus: "Unknown" as const,
+          conflicts: [],
+        }));
+
+  return { availableVendors: truthfulVendors, isLoadingVendors, scheduleBounds };
+}
+
+function useWorkOrderFormState() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const isEdit = Boolean(id);
+  const assignVendorRequested = searchParams.get("assignVendor") === "1";
+
+  const {
+    data: detail,
+    isLoading: isLoadingDetail,
+    error: detailError,
+    refetch: refetchDetail,
+  } = useWorkOrderDetail(id);
+  const { data: locations = [], isLoading: isLoadingLocations } = useWorkOrderLocations();
+  const { data: employees = [] } = useWorkOrderEmployeesDropdown();
+  const { data: problems = [] } = useDropdownOptionsByCategory("Problem");
+  const saveMutation = useSaveWorkOrder();
+  const vendorSectionRef = useRef<HTMLDivElement>(null);
+  const [selectedVendorId, setSelectedVendorId] = useState<number | null>(null);
+  const [estimatedArrivalAt, setEstimatedArrivalAt] = useState("");
+  const [etaManualOverride, setEtaManualOverride] = useState(false);
+  const [scheduledStartLocal, setScheduledStartLocal] = useState("");
+  const [scheduledEndLocal, setScheduledEndLocal] = useState("");
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    reset,
+    setValue,
+    formState: { errors },
+  } = useForm<WorkOrderFormSchemaValues>({
+    resolver: zodResolver(workOrderFormSchema),
+    defaultValues: createDefaultWorkOrderFormValues() as WorkOrderFormSchemaValues,
+  });
+
+  const tradeValue = useWatch({ control, name: "trade" });
+  const locationValue = useWatch({ control, name: "locationId" });
+
+  const { availableVendors, isLoadingVendors, scheduleBounds } = useVendorSchedule(
+    scheduledStartLocal,
+    scheduledEndLocal,
+    locationValue,
+    tradeValue,
+  );
+
+  const { data: subTrades = [] } = useDropdownOptionsByCategory("SubTrade", {
+    parent: tradeValue || undefined,
+    enabled: Boolean(tradeValue),
+  });
+  const { data: trades = [] } = useDropdownOptionsByCategory("Trade");
+
+  useEffect(() => {
+    if (isEdit && detail) {
+      reset(mapWorkOrderDetailToFormValues(detail) as WorkOrderFormSchemaValues);
+      const dispatch = detail.dispatches.find((item) => item.status !== "Cancelled");
+      setSelectedVendorId(dispatch?.vendorId ? Number(dispatch.vendorId) : null);
+      setEstimatedArrivalAt(toDateTimeLocalInputValue(dispatch?.estimatedArrivalAt));
+      setEtaManualOverride(Boolean(dispatch?.etaManualOverride));
+    }
+  }, [detail, isEdit, reset]);
+
+  useEffect(() => {
+    if (!tradeValue) {
+      setValue("subTrade", "");
+    }
+  }, [tradeValue, setValue]);
+
+  const isLoading = isEdit && isLoadingDetail;
+
+  useEffect(() => {
+    if (assignVendorRequested && !isLoading) {
+      const node = vendorSectionRef.current;
+      if (node) {
+        node.scrollIntoView({ behavior: "smooth", block: "start" });
+        node.focus();
+      }
+    }
+  }, [assignVendorRequested, isLoading]);
+
+  const onSubmit = (values: WorkOrderFormSchemaValues) => {
+    if (scheduleBounds.kind === "invalid") {
+      return;
+    }
+    saveMutation.mutate({
+      workOrderId: isEdit ? id : undefined,
+      values,
+      vendorAssignment:
+        selectedVendorId == null
+          ? undefined
+          : {
+              vendorId: selectedVendorId,
+              scheduledStart: scheduleBounds.startIso,
+              scheduledEnd: scheduleBounds.endIso,
+              estimatedArrivalAt: estimatedArrivalAt
+                ? new Date(estimatedArrivalAt).toISOString()
+                : undefined,
+              etaManualOverride,
+            },
+    });
+  };
+
+  const handleCancel = () => {
+    navigate(isEdit && id ? `/workorders/${id}` : "/workorders");
+  };
+
+  return {
+    id,
+    isEdit,
+    detail,
+    isLoading,
+    detailError,
+    refetchDetail,
+    isSaving: saveMutation.isPending,
+    register,
+    control,
+    handleSubmit,
+    errors,
+    locationOptions: locations,
+    isLoadingLocations,
+    employees,
+    problems,
+    trades,
+    subTrades,
+    tradeValue,
+    vendorSectionRef,
+    availableVendors,
+    isLoadingVendors,
+    selectedVendorId,
+    setSelectedVendorId,
+    estimatedArrivalAt,
+    setEstimatedArrivalAt,
+    etaManualOverride,
+    setEtaManualOverride,
+    scheduledStartLocal,
+    setScheduledStartLocal,
+    scheduledEndLocal,
+    setScheduledEndLocal,
+    scheduleBoundsError: scheduleBounds.error,
+    isScheduleBoundsInvalid: scheduleBounds.kind === "invalid",
+    onSubmit,
+    handleCancel,
+  };
+}
+
+export default function WorkOrderFormPage() {
+  const {
+    isEdit,
+    id,
+    detail,
+    isLoading,
+    detailError,
+    refetchDetail,
+    isSaving,
+    register,
+    control,
+    handleSubmit,
+    errors,
+    locationOptions,
+    isLoadingLocations,
+    employees,
+    problems,
+    trades,
+    subTrades,
+    tradeValue,
+    vendorSectionRef,
+    availableVendors,
+    isLoadingVendors,
+    selectedVendorId,
+    setSelectedVendorId,
+    estimatedArrivalAt,
+    setEstimatedArrivalAt,
+    etaManualOverride,
+    setEtaManualOverride,
+    scheduledStartLocal,
+    setScheduledStartLocal,
+    scheduledEndLocal,
+    setScheduledEndLocal,
+    scheduleBoundsError,
+    isScheduleBoundsInvalid,
+    onSubmit,
+    handleCancel,
+  } = useWorkOrderFormState();
+
+  if (isLoading) {
+    return <DetailPageSkeleton variant="form" />;
+  }
+
+  if (detailError) {
+    return (
+      <Box className="p-4">
+        <QueryErrorPanel
+          message={detailError instanceof Error ? detailError.message : "Failed to load work order"}
+          onRetry={() => void refetchDetail()}
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <Box className="flex flex-col gap-4 p-4">
+      <Breadcrumbs>
+        <Link component={RouterLink} to="/workorders" underline="hover">
+          Work Orders
+        </Link>
+        <Text as="span">{isEdit ? "Edit" : "Create"}</Text>
+      </Breadcrumbs>
+      <Text variant="title" as="h1">
+        {isEdit ? `Edit Work Order ${detail?.internalWONumber ?? id}` : "Create a Work Order"}
+      </Text>
+      <Paper variant="outlined" className="p-6">
+        <Box component="form" onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-8">
+          <WorkOrderDetailsFields
+            register={register}
+            control={control}
+            errors={errors}
+            locationOptions={locationOptions}
+            isLoadingLocations={isLoadingLocations}
+          />
+
+          <VendorAndTimeSection
+            containerRef={vendorSectionRef}
+            availableVendors={availableVendors}
+            isLoadingVendors={isLoadingVendors}
+            selectedVendorId={selectedVendorId}
+            onSelectVendor={setSelectedVendorId}
+            estimatedArrivalAt={estimatedArrivalAt}
+            onEtaChange={setEstimatedArrivalAt}
+            etaManualOverride={etaManualOverride}
+            onOverrideChange={setEtaManualOverride}
+            scheduledStartLocal={scheduledStartLocal}
+            onScheduledStartChange={setScheduledStartLocal}
+            scheduledEndLocal={scheduledEndLocal}
+            onScheduledEndChange={setScheduledEndLocal}
+            scheduleBoundsError={scheduleBoundsError}
+          />
+
+          <ClassificationFields
+            control={control}
+            problems={problems}
+            trades={trades}
+            subTrades={subTrades}
+            tradeValue={tradeValue}
+          />
+
+          <ScheduleFields
+            register={register}
+            control={control}
+            errors={errors}
+            employees={employees}
+          />
+
+          <FinancialFields register={register} />
+
+          <DescriptionFields register={register} />
+
+          <Stack direction="row" spacing={2} sx={{ justifyContent: "flex-end" }}>
+            <Button variant="outlined" onClick={handleCancel} disabled={isSaving}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              variant="contained"
+              disabled={isSaving || isScheduleBoundsInvalid}
+            >
+              {isSaving ? "Saving..." : isEdit ? "Update" : "Create"}
+            </Button>
+          </Stack>
+        </Box>
+      </Paper>
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/_components/work-order-view-sections.tsx b/src/app/(protected)/workorders/_components/work-order-view-sections.tsx
new file mode 100644
index 00000000..7f038e7c
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/work-order-view-sections.tsx
@@ -0,0 +1,401 @@
+import { useState } from "react";
+import { Link as RouterLink } from "react-router";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Breadcrumbs,
+  Button,
+  Chip,
+  Link,
+  Menu,
+  MenuItem,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import type {
+  WorkOrderDetail,
+  WorkOrderStatus,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import { WORK_ORDER_STATUS_OPTIONS } from "@/domain/work-orders/types/work-order";
+import { formatDateTime, timeSince, waitTimeColor } from "@/lib/time-utils";
+
+const STATUS_COLORS: Record<
+  string,
+  "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning"
+> = {
+  Open: "primary",
+  "In Progress": "info",
+  "On Hold": "warning",
+  Done: "success",
+  Cancelled: "default",
+};
+
+function Field({ label, value }: { label: string; value: string }) {
+  return (
+    <Box>
+      <Typography
+        variant="caption"
+        sx={{
+          color: "text.secondary",
+          display: "block",
+        }}
+      >
+        {label}
+      </Typography>
+      <Typography variant="body2">{value}</Typography>
+    </Box>
+  );
+}
+
+interface WorkOrderHeaderProps {
+  wo: WorkOrderDetail;
+  onSelectStatus: (status: WorkOrderStatus) => void;
+  onDispatch: () => void;
+  onEdit: () => void;
+  onBack: () => void;
+}
+
+export function WorkOrderHeader({
+  wo,
+  onSelectStatus,
+  onDispatch,
+  onEdit,
+  onBack,
+}: WorkOrderHeaderProps) {
+  const [statusAnchor, setStatusAnchor] = useState<HTMLElement | null>(null);
+
+  return (
+    <>
+      <Breadcrumbs>
+        <Link component={RouterLink} to="/workorders" underline="hover">
+          Work Orders
+        </Link>
+        <Typography
+          sx={{
+            color: "text.primary",
+          }}
+        >
+          {wo.internalWONumber}
+        </Typography>
+      </Breadcrumbs>
+      <Stack
+        direction={{ xs: "column", md: "row" }}
+        spacing={2}
+        sx={{
+          justifyContent: "space-between",
+          alignItems: { xs: "stretch", md: "flex-start" },
+        }}
+      >
+        <Stack spacing={1}>
+          <Typography variant="h5" component="h1">
+            {wo.title}
+          </Typography>
+          <Chip
+            label={wo.status}
+            color={STATUS_COLORS[wo.status] ?? "default"}
+            onClick={(event) => setStatusAnchor(event.currentTarget)}
+            className="w-fit cursor-pointer"
+          />
+          <Menu
+            anchorEl={statusAnchor}
+            open={Boolean(statusAnchor)}
+            onClose={() => setStatusAnchor(null)}
+          >
+            {WORK_ORDER_STATUS_OPTIONS.map((status) => (
+              <MenuItem
+                key={status}
+                selected={status === wo.status}
+                onClick={() => {
+                  setStatusAnchor(null);
+                  if (status !== wo.status) {
+                    onSelectStatus(status);
+                  }
+                }}
+              >
+                {status}
+              </MenuItem>
+            ))}
+          </Menu>
+        </Stack>
+
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            flexWrap: "wrap",
+          }}
+        >
+          <Button variant="contained" color="success" onClick={onDispatch}>
+            Dispatch
+          </Button>
+          <Button variant="contained" onClick={onEdit}>
+            Edit
+          </Button>
+          <Button variant="outlined" onClick={onBack}>
+            Back to List
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  );
+}
+
+interface WorkOrderDetailsSectionProps {
+  wo: WorkOrderDetail;
+  users: WorkOrderUser[];
+  onAssign: (payload: { userId: string | number; userName: string }) => void;
+}
+
+export function WorkOrderDetailsSection({ wo, users, onAssign }: WorkOrderDetailsSectionProps) {
+  const [assignAnchor, setAssignAnchor] = useState<HTMLElement | null>(null);
+
+  return (
+    <Paper variant="outlined" className="p-4">
+      <Typography variant="subtitle1" className="mb-3 font-semibold">
+        Details
+      </Typography>
+      <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <Field label="Internal WO" value={wo.internalWONumber} />
+        <Field label="Customer WO" value={wo.workOrderNumber || "—"} />
+        <Field label="Priority" value={wo.priority || "—"} />
+        <Field label="Location" value={wo.location || "—"} />
+        <Box>
+          <Typography
+            variant="caption"
+            sx={{
+              color: "text.secondary",
+              display: "block",
+            }}
+          >
+            Assigned To
+          </Typography>
+          <Button size="small" onClick={(event) => setAssignAnchor(event.currentTarget)}>
+            {wo.assignedTo || "Unassigned"}
+          </Button>
+          <Menu
+            anchorEl={assignAnchor}
+            open={Boolean(assignAnchor)}
+            onClose={() => setAssignAnchor(null)}
+          >
+            <MenuItem
+              onClick={() => {
+                setAssignAnchor(null);
+                onAssign({ userId: "", userName: "" });
+              }}
+            >
+              Unassigned
+            </MenuItem>
+            {users.map((user) => (
+              <MenuItem
+                key={String(user.id)}
+                selected={wo.assignedTo === user.name}
+                onClick={() => {
+                  setAssignAnchor(null);
+                  onAssign({ userId: user.id, userName: user.name });
+                }}
+              >
+                {user.name}
+              </MenuItem>
+            ))}
+          </Menu>
+        </Box>
+        <Field label="Source" value={wo.source || "—"} />
+        <Field label="TT" value={wo.tt || "—"} />
+      </Box>
+    </Paper>
+  );
+}
+
+export function WorkOrderSummaryAccordions({ wo }: { wo: WorkOrderDetail }) {
+  return (
+    <>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography
+            sx={{
+              fontWeight: 600,
+            }}
+          >
+            Classification
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <Field label="Problem" value={wo.problem || "—"} />
+            <Field label="Trade" value={wo.trade || "—"} />
+            <Field label="Sub-Trade" value={wo.subTrade || "—"} />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography
+            sx={{
+              fontWeight: 600,
+            }}
+          >
+            Schedule
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <Field
+              label="Created"
+              value={wo.createdDateFull ? formatDateTime(wo.createdDateFull) : "—"}
+            />
+            <Field label="Due Date" value={wo.dueDate || "—"} />
+            <Field label="Scheduled" value={wo.scheduledDate || "—"} />
+            <Field label="Completed" value={wo.completedDate || "—"} />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography
+            sx={{
+              fontWeight: 600,
+            }}
+          >
+            Financial
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Box className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <Field
+              label="Vendor NTE"
+              value={wo.vendorNTE ? `$${parseFloat(wo.vendorNTE).toFixed(2)}` : "—"}
+            />
+            <Field label="Customer PO" value={wo.po || "—"} />
+            <Field label="Customer NTE" value="Not connected" />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography
+            sx={{
+              fontWeight: 600,
+            }}
+          >
+            Description
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>{wo.description || "No description provided."}</Typography>
+        </AccordionDetails>
+      </Accordion>
+    </>
+  );
+}
+
+interface DispatchAccordionProps {
+  wo: WorkOrderDetail;
+  onEditVendor: (event: React.MouseEvent, vendorId: string | number, vendorName: string) => void;
+  onViewDispatch: (dispatchId: string | number) => void;
+}
+
+export function DispatchAccordion({ wo, onEditVendor, onViewDispatch }: DispatchAccordionProps) {
+  return (
+    <Accordion defaultExpanded={Boolean(wo.dispatches.length)}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography
+          sx={{
+            fontWeight: 600,
+          }}
+        >
+          Dispatches ({wo.dispatches.length})
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        {wo.dispatches.length ? (
+          <TableContainer>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell>Dispatch #</TableCell>
+                  <TableCell>Vendor</TableCell>
+                  <TableCell>NTE</TableCell>
+                  <TableCell>Status</TableCell>
+                  <TableCell>Date</TableCell>
+                  <TableCell>Wait</TableCell>
+                  <TableCell align="right">Actions</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {wo.dispatches.map((dispatch) => {
+                  const waitColor = waitTimeColor(dispatch.dispatchedAt);
+                  return (
+                    <TableRow
+                      key={String(dispatch.id)}
+                      hover
+                      className="cursor-pointer"
+                      onClick={() => onViewDispatch(dispatch.id)}
+                    >
+                      <TableCell>{dispatch.dispatchNumber || dispatch.poNumber}</TableCell>
+                      <TableCell>{dispatch.vendorName}</TableCell>
+                      <TableCell>
+                        {dispatch.nteAmount != null ? `$${dispatch.nteAmount.toFixed(2)}` : "—"}
+                      </TableCell>
+                      <TableCell>{dispatch.status}</TableCell>
+                      <TableCell>
+                        {dispatch.dispatchedAt ? formatDateTime(dispatch.dispatchedAt) : "—"}
+                      </TableCell>
+                      <TableCell>
+                        {dispatch.status === "Sent" ? (
+                          <Typography
+                            variant="caption"
+                            className={
+                              waitColor === "green"
+                                ? "text-green-600"
+                                : waitColor === "yellow"
+                                  ? "text-yellow-600"
+                                  : "text-red-600"
+                            }
+                          >
+                            {timeSince(dispatch.dispatchedAt)}
+                          </Typography>
+                        ) : (
+                          "—"
+                        )}
+                      </TableCell>
+                      <TableCell align="right">
+                        <Button
+                          size="small"
+                          onClick={(event) =>
+                            onEditVendor(event, dispatch.vendorId, dispatch.vendorName)
+                          }
+                          disabled={dispatch.vendorId === ""}
+                        >
+                          Edit vendor
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        ) : (
+          <Typography
+            sx={{
+              color: "text.secondary",
+            }}
+          >
+            No dispatches yet.
+          </Typography>
+        )}
+      </AccordionDetails>
+    </Accordion>
+  );
+}
diff --git a/src/app/(protected)/workorders/_hooks/build-resolved-board-search-params.ts b/src/app/(protected)/workorders/_hooks/build-resolved-board-search-params.ts
new file mode 100644
index 00000000..3bc5bfc6
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/build-resolved-board-search-params.ts
@@ -0,0 +1,72 @@
+import type { WorkOrderAdvancedFilters } from "@/domain/work-orders/types/work-order-advanced-filters";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+} from "@/domain/work-orders/types/work-order-common";
+import type { WorkOrderBoardSearchQueryParams } from "@/domain/work-orders/types/work-order-board";
+import {
+  BOARD_SEARCH_MAX_PAGE_SIZE,
+  toBoardSearchQueryParams,
+} from "@/domain/work-orders/utils/board-query-params";
+import { resolveSiteCode } from "@/domain/work-orders/mappers/work-order-board-mapper";
+
+export type ResolvedBoardSearchParamsInput = {
+  advApplied: WorkOrderAdvancedFilters | null;
+  search: string;
+  page: number;
+  pageSize: number;
+  sortBy: string;
+  sortDir: string;
+  locations: LocationOption[];
+  vendors: VendorDropdownItem[];
+};
+
+function resolveSiteCodes(sites: Set<string>, locations: LocationOption[]): Set<string> {
+  const siteCodes = new Set<string>();
+  for (const siteKey of sites) {
+    const location = locations.find((item) => String(item.id) === siteKey);
+    if (location) {
+      const code = resolveSiteCode({ siteCode: location.siteCode, name: location.name });
+      if (code) {
+        siteCodes.add(code);
+      }
+    } else if (siteKey.trim()) {
+      siteCodes.add(siteKey);
+    }
+  }
+  return siteCodes;
+}
+
+function buildVendorIdsByCompanyName(vendors: VendorDropdownItem[]): Map<string, number> {
+  const vendorIdsByCompanyName = new Map<string, number>();
+  for (const vendor of vendors) {
+    const id = Number(vendor.id);
+    if (Number.isFinite(id) && vendor.companyName) {
+      vendorIdsByCompanyName.set(vendor.companyName, id);
+    }
+  }
+  return vendorIdsByCompanyName;
+}
+
+/** Resolves advanced-filter site keys/vendor names to API-ready board/search query params. */
+export function buildResolvedBoardSearchParams(
+  input: ResolvedBoardSearchParamsInput,
+): WorkOrderBoardSearchQueryParams | null {
+  const { advApplied } = input;
+  if (!advApplied) {
+    return null;
+  }
+
+  const siteCodes = resolveSiteCodes(advApplied.sites, input.locations);
+  const vendorIdsByCompanyName = buildVendorIdsByCompanyName(input.vendors);
+
+  return toBoardSearchQueryParams({
+    filters: { ...advApplied, sites: siteCodes },
+    search: input.search,
+    page: input.page,
+    pageSize: Math.min(input.pageSize || BOARD_SEARCH_MAX_PAGE_SIZE, BOARD_SEARCH_MAX_PAGE_SIZE),
+    sortBy: input.sortBy || "scheduledDate",
+    sortDir: input.sortDir || "asc",
+    vendorIdsByCompanyName,
+  });
+}
diff --git a/src/app/(protected)/workorders/_hooks/create-comp-doc-dialog-actions.ts b/src/app/(protected)/workorders/_hooks/create-comp-doc-dialog-actions.ts
new file mode 100644
index 00000000..4fb049dd
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/create-comp-doc-dialog-actions.ts
@@ -0,0 +1,172 @@
+import type { QueryClient } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { showCompDocDraftSavedToast } from "@/app/(protected)/workorders/_components/comp-doc/comp-doc-draft-toast";
+import { locationsApi } from "@/domain/locations/api/locations-api";
+import type { Location } from "@/domain/locations/types/location";
+import type {
+  CompDocData,
+  CompDocSaveStatus,
+  DocFields,
+  DocState,
+} from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { buildDocHtml, printDoc } from "@/domain/work-orders/utils/completion-doc-html";
+import { fmtDocNow } from "@/domain/work-orders/utils/completion-doc-state";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+type CompDocSite = { street: string; fullAddress: string };
+
+export function buildCompDocAddressLine(site: CompDocSite): string {
+  if (site.street.trim()) return site.street.trim();
+  return site.fullAddress !== "—" ? site.fullAddress : "";
+}
+
+function locationUpdatePayload(location: Location, address: string): Location {
+  return {
+    ...location,
+    address,
+  };
+}
+
+type CreateCompDocDialogActionsParams = {
+  row: WorkOrderTableRow;
+  notes: string;
+  generatedAt: string;
+  editDateCompleted: string;
+  editAddress: string;
+  docState: DocState;
+  docFields: DocFields;
+  site: CompDocSite;
+  locId: string;
+  isMockLocation: boolean;
+  isSiteFrozen: boolean;
+  locationDetail: Location | undefined;
+  queryClient: QueryClient;
+  onSave: (data: CompDocData, status: CompDocSaveStatus) => void | Promise<void>;
+  onDateCompletedChange?: (date: string) => void | Promise<void>;
+  setDocState: (state: DocState) => void;
+  setGeneratedAt: (value: string) => void;
+};
+
+export function createCompDocDialogActions({
+  row,
+  notes,
+  generatedAt,
+  editDateCompleted,
+  editAddress,
+  docState,
+  docFields,
+  site,
+  locId,
+  isMockLocation,
+  isSiteFrozen,
+  locationDetail,
+  queryClient,
+  onSave,
+  onDateCompletedChange,
+  setDocState,
+  setGeneratedAt,
+}: CreateCompDocDialogActionsParams) {
+  async function persist(extra: Partial<CompDocData>, status: CompDocSaveStatus): Promise<void> {
+    await onSave({ notes, generatedAt, ...extra }, status);
+  }
+
+  async function syncCompletedDateIfChanged(): Promise<void> {
+    if (editDateCompleted !== (row.completedDate || "")) {
+      await onDateCompletedChange?.(editDateCompleted);
+    }
+  }
+
+  async function syncAddressIfChanged(): Promise<void> {
+    const next = editAddress.trim();
+    const current = buildCompDocAddressLine(site);
+    if (next === current) return;
+    if (isSiteFrozen || isMockLocation || !locId) return;
+    if (!locationDetail) {
+      throw new Error("Location details are still loading. Try saving again.");
+    }
+
+    await locationsApi.update(locId, locationUpdatePayload(locationDetail, next));
+    void queryClient.invalidateQueries({ queryKey: queryKeys.locations.detail(locId) });
+    void queryClient.invalidateQueries({ queryKey: queryKeys.locations.all });
+    void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+  }
+
+  function refreshAuthoritativeState() {
+    void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+    if (locId && !isMockLocation) {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.locations.detail(locId) });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.locations.all });
+    }
+  }
+
+  async function handleMarkNotRequired() {
+    const previous = docState;
+    setDocState("not-required");
+    try {
+      await persist({}, "NN");
+    } catch (error) {
+      setDocState(previous);
+      refreshAuthoritativeState();
+      toast.error(
+        error instanceof Error ? error.message : "Failed to mark document as not required",
+      );
+    }
+  }
+
+  async function handleUndo() {
+    const previous = docState;
+    setDocState("draft");
+    try {
+      await persist({}, "No");
+    } catch (error) {
+      setDocState(previous);
+      refreshAuthoritativeState();
+      toast.error(error instanceof Error ? error.message : "Failed to undo not-required");
+    }
+  }
+
+  async function handleSaveDraft() {
+    try {
+      await syncCompletedDateIfChanged();
+      await syncAddressIfChanged();
+      await persist({}, "No");
+      showCompDocDraftSavedToast();
+    } catch (error) {
+      refreshAuthoritativeState();
+      toast.error(error instanceof Error ? error.message : "Failed to save draft");
+    }
+  }
+
+  async function handleGenerate() {
+    if (!editDateCompleted.trim()) {
+      toast.error("Date Work Completed is required to generate the document.");
+      return;
+    }
+    const ts = fmtDocNow();
+    try {
+      // Prerequisites first; only mark Generated after completedDate/address persist.
+      await syncCompletedDateIfChanged();
+      await syncAddressIfChanged();
+      await persist({ generatedAt: ts }, "Yes");
+      setGeneratedAt(ts);
+      setDocState("generated");
+    } catch (error) {
+      // Keep Draft UI; refresh so any partially persisted date/address is authoritative.
+      refreshAuthoritativeState();
+      toast.error(error instanceof Error ? error.message : "Failed to generate document");
+    }
+  }
+
+  function handleDownloadPdf() {
+    printDoc(buildDocHtml(row, { notes, generatedAt }, docFields));
+  }
+
+  return {
+    handleMarkNotRequired,
+    handleUndo,
+    handleSaveDraft,
+    handleGenerate,
+    handleDownloadPdf,
+  };
+}
diff --git a/src/app/(protected)/workorders/_hooks/resolve-board-row-order-owner-id.ts b/src/app/(protected)/workorders/_hooks/resolve-board-row-order-owner-id.ts
new file mode 100644
index 00000000..b6b2032f
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/resolve-board-row-order-owner-id.ts
@@ -0,0 +1,6 @@
+import { getAuthUser } from "@/lib/auth/auth-storage";
+
+export function resolveBoardRowOrderOwnerId(): string {
+  const user = getAuthUser();
+  return user?.id == null ? "" : String(user.id);
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-comp-doc-dialog.ts b/src/app/(protected)/workorders/_hooks/use-comp-doc-dialog.ts
new file mode 100644
index 00000000..01025099
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-comp-doc-dialog.ts
@@ -0,0 +1,178 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  buildCompDocAddressLine,
+  createCompDocDialogActions,
+} from "@/app/(protected)/workorders/_hooks/create-comp-doc-dialog-actions";
+import { useLocationDetail } from "@/domain/locations/use-cases/use-location-detail";
+import type {
+  CompDocData,
+  CompDocSaveStatus,
+  DocFields,
+  DocState,
+} from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { getMockWoWizardLocationDetail } from "@/domain/work-orders/mocks/wo-wizard-mock-data";
+import { resolveCompDocSite } from "@/domain/work-orders/utils/completion-doc-site";
+import { DOC_STATE_CFG, docStateOf } from "@/domain/work-orders/utils/completion-doc-state";
+import {
+  effectiveCompany,
+  effectivePoc,
+  effectiveSite,
+} from "@/domain/work-orders/utils/effective-completion-snapshot";
+
+type UseCompDocDialogParams = {
+  row: WorkOrderTableRow;
+  open: boolean;
+  data?: CompDocData;
+  onSave: (data: CompDocData, status: CompDocSaveStatus) => void | Promise<void>;
+  onDateCompletedChange?: (date: string) => void | Promise<void>;
+};
+
+export function useCompDocDialog({
+  row,
+  open,
+  data,
+  onSave,
+  onDateCompletedChange,
+}: UseCompDocDialogParams) {
+  const queryClient = useQueryClient();
+  const locId = String(row.locationId || "");
+  const isMockLocation = locId.startsWith("mock-");
+  const frozenSite = effectiveSite(row);
+  const { data: apiLocationDetail } = useLocationDetail(
+    frozenSite != null || isMockLocation || !locId ? undefined : locId,
+  );
+  const locationDetail = isMockLocation ? getMockWoWizardLocationDetail(locId) : apiLocationDetail;
+  const site = useMemo(() => resolveCompDocSite(row, locationDetail), [row, locationDetail]);
+
+  const [notes, setNotes] = useState("");
+  const [docState, setDocState] = useState<DocState>("draft");
+  const [generatedAt, setGeneratedAt] = useState("");
+  const [editDateCompleted, setEditDateCompleted] = useState("");
+  const [editAddress, setEditAddress] = useState("");
+  const seedKeyRef = useRef<string | null>(null);
+  const addressSeededRef = useRef(false);
+  const addressTouchedRef = useRef(false);
+
+  // Seed once per open/WO — row/detail refetches must not wipe in-progress edits.
+  // Address waits for authoritative locationDetail (when a real location id exists)
+  // and still accepts that first response without overwriting later user edits.
+  useEffect(() => {
+    if (!open) {
+      seedKeyRef.current = null;
+      addressSeededRef.current = false;
+      addressTouchedRef.current = false;
+      return;
+    }
+
+    const key = String(row.id);
+    if (seedKeyRef.current !== key) {
+      seedKeyRef.current = key;
+      addressSeededRef.current = false;
+      addressTouchedRef.current = false;
+      setNotes(data?.notes ?? "");
+      setDocState(docStateOf(row.docStatus));
+      setGeneratedAt(data?.generatedAt ?? "");
+      setEditDateCompleted(row.completedDate || "");
+    }
+
+    if (addressTouchedRef.current || addressSeededRef.current) {
+      return;
+    }
+
+    const awaitingLocation =
+      frozenSite == null && Boolean(locId) && !isMockLocation && !locationDetail;
+    if (awaitingLocation) {
+      return;
+    }
+
+    setEditAddress(buildCompDocAddressLine(resolveCompDocSite(row, locationDetail)));
+    addressSeededRef.current = true;
+  }, [
+    open,
+    row,
+    data?.notes,
+    data?.generatedAt,
+    locationDetail,
+    locId,
+    isMockLocation,
+    frozenSite,
+  ]);
+
+  const handleAddressChange = (value: string) => {
+    addressTouchedRef.current = true;
+    setEditAddress(value);
+  };
+
+  const company = effectiveCompany(row);
+  const amazonRep = effectivePoc(row).contacts[0]?.name || "";
+  const seaRep = company.contactName || "";
+  const cfg = DOC_STATE_CFG[docState];
+  const isNotRequired = docState === "not-required";
+  const isGenerated = docState === "generated";
+
+  const effectiveStreet = editAddress.trim() || site.street;
+  const docFields: DocFields = {
+    street: effectiveStreet,
+    city: site.city,
+    state: site.state,
+    zip: site.zip,
+    dateCompleted: editDateCompleted,
+    amazonRep,
+    seaRep,
+    siteCode: site.code,
+    tech: company.contactName || "",
+    company: company.name || "",
+  };
+
+  const previewSite = useMemo(
+    () => ({
+      ...site,
+      street: effectiveStreet,
+      fullAddress:
+        [effectiveStreet, site.label, site.zip].filter(Boolean).join(", ") ||
+        effectiveStreet ||
+        "—",
+    }),
+    [site, effectiveStreet],
+  );
+
+  const actions = createCompDocDialogActions({
+    row,
+    notes,
+    generatedAt,
+    editDateCompleted,
+    editAddress,
+    docState,
+    docFields,
+    site,
+    locId,
+    isMockLocation,
+    isSiteFrozen: frozenSite != null,
+    locationDetail,
+    queryClient,
+    onSave,
+    onDateCompletedChange,
+    setDocState,
+    setGeneratedAt,
+  });
+
+  return {
+    site: previewSite,
+    notes,
+    setNotes,
+    docState,
+    generatedAt,
+    editAddress,
+    setEditAddress: handleAddressChange,
+    editDateCompleted,
+    setEditDateCompleted,
+    amazonRep,
+    seaRep,
+    cfg,
+    isNotRequired,
+    isGenerated,
+    ...actions,
+  };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-dashboard-drilldown-filters.ts b/src/app/(protected)/workorders/_hooks/use-dashboard-drilldown-filters.ts
new file mode 100644
index 00000000..6f1c4081
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-dashboard-drilldown-filters.ts
@@ -0,0 +1,37 @@
+import { useEffect, useRef, useState } from "react";
+import { useSearchParams } from "react-router";
+import type { WorkOrderAdvancedFilters } from "@/domain/work-orders/types/work-order-advanced-filters";
+import { parseDashboardDrilldownParams } from "@/domain/work-orders/utils/dashboard-drilldown-params";
+
+export function useDashboardDrilldownFilters(
+  onApply: (filters: WorkOrderAdvancedFilters) => void,
+): boolean {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const appliedRef = useRef(false);
+  // Hold onApply in a ref so a caller passing a fresh closure each render does not
+  // re-run the apply effect; it should fire only when the URL search params change.
+  const onApplyRef = useRef(onApply);
+  const [fromDashboard, setFromDashboard] = useState(false);
+
+  useEffect(() => {
+    onApplyRef.current = onApply;
+  }, [onApply]);
+
+  useEffect(() => {
+    if (appliedRef.current) {
+      return;
+    }
+
+    const drilldown = parseDashboardDrilldownParams(searchParams);
+    if (!drilldown) {
+      return;
+    }
+
+    appliedRef.current = true;
+    setFromDashboard(true);
+    onApplyRef.current(drilldown);
+    setSearchParams({}, { replace: true });
+  }, [searchParams, setSearchParams]);
+
+  return fromDashboard;
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-dispatch-create-controller.ts b/src/app/(protected)/workorders/_hooks/use-dispatch-create-controller.ts
new file mode 100644
index 00000000..47464dfe
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-dispatch-create-controller.ts
@@ -0,0 +1,159 @@
+import { useMemo, useState } from "react";
+import { useWorkOrdersList } from "@/domain/work-orders/use-cases/use-work-orders-list";
+import {
+  useTaskListTemplates,
+  useWorkOrderVendors,
+} from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useDispatchToVendor } from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import type { SelectedWorkOrderRef, WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+import { guardDialogClose } from "@/lib/dialog-guard";
+
+export function useDispatchCreateController(
+  workOrder: WorkOrderDetail,
+  onClose: () => void,
+  onDispatched: () => void,
+) {
+  const [selectedVendorId, setSelectedVendorId] = useState<string | number | null>(null);
+  const [nteAmount, setNteAmount] = useState(workOrder.vendorNTE || "");
+  const [scheduledDate, setScheduledDate] = useState("");
+  const [description, setDescription] = useState(workOrder.description || "");
+  const [vendorSearch, setVendorSearch] = useState("");
+  const [selectedTemplateId, setSelectedTemplateId] = useState("");
+  const [customItems, setCustomItems] = useState<string[]>([]);
+  const [newCustomItem, setNewCustomItem] = useState("");
+  const [selectedWOs, setSelectedWOs] = useState<SelectedWorkOrderRef[]>([
+    {
+      id: workOrder.id,
+      number: workOrder.internalWONumber,
+      title: workOrder.title,
+    },
+  ]);
+  const [woSearch, setWoSearch] = useState("");
+
+  const { data: vendors = [], isLoading: isLoadingVendors } = useWorkOrderVendors(
+    workOrder.trade,
+    workOrder.locationZip,
+  );
+  const { data: taskTemplates = [], isLoading: isLoadingTemplates } = useTaskListTemplates();
+  const dispatchMutation = useDispatchToVendor(workOrder.id);
+  const isPending = dispatchMutation.isPending;
+
+  const { data: siteWorkOrdersData } = useWorkOrdersList({
+    search: "",
+    page: 1,
+    pageSize: 500,
+    sortBy: "number",
+    sortDir: "asc",
+    locationId: workOrder.locationId,
+  });
+
+  const siteWorkOrders = useMemo(
+    () =>
+      (siteWorkOrdersData?.items ?? []).filter((item) => String(item.id) !== String(workOrder.id)),
+    [siteWorkOrdersData?.items, workOrder.id],
+  );
+
+  const filteredVendors = useMemo(
+    () =>
+      vendors.filter(
+        (vendor) =>
+          vendor.companyName.toLowerCase().includes(vendorSearch.toLowerCase()) ||
+          vendor.contactName.toLowerCase().includes(vendorSearch.toLowerCase()) ||
+          vendor.tradeSpecialties.toLowerCase().includes(vendorSearch.toLowerCase()),
+      ),
+    [vendors, vendorSearch],
+  );
+
+  const filteredSiteWOs = useMemo(
+    () =>
+      siteWorkOrders
+        .filter((item) => !selectedWOs.some((selected) => String(selected.id) === String(item.id)))
+        .filter(
+          (item) =>
+            !woSearch ||
+            item.woNumber.includes(woSearch) ||
+            item.title.toLowerCase().includes(woSearch.toLowerCase()),
+        )
+        .slice(0, 10),
+    [siteWorkOrders, selectedWOs, woSearch],
+  );
+
+  const addSelectedWO = (item: { id: string | number; woNumber: string; title: string }) => {
+    setSelectedWOs((prev) => [...prev, { id: item.id, number: item.woNumber, title: item.title }]);
+    setWoSearch("");
+  };
+
+  const removeSelectedWO = (id: string | number) => {
+    setSelectedWOs((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const addCustomItem = () => {
+    if (!newCustomItem.trim()) return;
+    setCustomItems((prev) => [...prev, newCustomItem.trim()]);
+    setNewCustomItem("");
+  };
+
+  const removeCustomItem = (index: number) => {
+    setCustomItems((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = () => {
+    if (!selectedVendorId) {
+      return;
+    }
+
+    dispatchMutation.mutate(
+      {
+        workOrderIds: selectedWOs.map((wo) => wo.id),
+        vendorIds: [selectedVendorId],
+        nteAmount: nteAmount ? parseFloat(nteAmount) : null,
+        scheduledDate: scheduledDate || null,
+        description,
+        taskListTemplateId: selectedTemplateId ? parseInt(selectedTemplateId, 10) : null,
+        customChecklistItems: customItems.length > 0 ? customItems : null,
+      },
+      {
+        onSuccess: () => {
+          onDispatched();
+          onClose();
+        },
+      },
+    );
+  };
+
+  return {
+    selectedVendorId,
+    setSelectedVendorId,
+    nteAmount,
+    setNteAmount,
+    scheduledDate,
+    setScheduledDate,
+    description,
+    setDescription,
+    vendorSearch,
+    setVendorSearch,
+    selectedTemplateId,
+    setSelectedTemplateId,
+    customItems,
+    newCustomItem,
+    setNewCustomItem,
+    addCustomItem,
+    removeCustomItem,
+    selectedWOs,
+    addSelectedWO,
+    removeSelectedWO,
+    woSearch,
+    setWoSearch,
+    vendors: filteredVendors,
+    isLoadingVendors,
+    taskTemplates,
+    isLoadingTemplates,
+    siteWorkOrders,
+    filteredSiteWOs,
+    isPending,
+    handleClose: guardDialogClose(isPending, onClose),
+    handleSubmit,
+  };
+}
+
+export type DispatchCreateController = ReturnType<typeof useDispatchCreateController>;
diff --git a/src/app/(protected)/workorders/_hooks/use-dispatch-detail-controller.ts b/src/app/(protected)/workorders/_hooks/use-dispatch-detail-controller.ts
new file mode 100644
index 00000000..ffe860ec
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-dispatch-detail-controller.ts
@@ -0,0 +1,181 @@
+import { useMemo, useState } from "react";
+import type { DispatchDetail } from "@/domain/work-orders/types/work-order";
+import { useDispatchUpliftController } from "@/app/(protected)/workorders/_hooks/use-dispatch-uplift-controller";
+import { useDispatchDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import {
+  useAddChecklistItem,
+  useAddDispatchComment,
+  useAddDispatchSignoff,
+  useUpdateChecklistItem,
+  useUpdateDispatch,
+  useVerifyDispatch,
+} from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { isDispatchLocked } from "@/domain/work-orders/utils/is-dispatch-locked";
+import { useAuthContext } from "@/providers/auth-context";
+import { toDateInputValue } from "@/lib/time-utils";
+import { buildDispatchEditForm } from "@/app/(protected)/workorders/_components/dispatch/dispatch-detail/build-dispatch-edit-form";
+import type { DispatchEditFormState } from "@/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-edit-form";
+
+function buildVerifyState(dispatch?: DispatchDetail) {
+  if (!dispatch) {
+    return { canVerify: false, missing: [] as string[] };
+  }
+
+  const checklistTotal = dispatch.checklistItems.length;
+  const checklistDone = dispatch.checklistItems.filter((item) => item.isCompleted).length;
+  const signoffTypes = new Set(dispatch.signoffs.map((signoff) => signoff.signoffType));
+  const missing: string[] = [];
+
+  if (checklistDone < checklistTotal) {
+    missing.push(`${checklistTotal - checklistDone} checklist item(s)`);
+  }
+  if (!signoffTypes.has("Customer")) {
+    missing.push("Customer sign-off");
+  }
+  if (!signoffTypes.has("Vendor")) {
+    missing.push("Vendor sign-off");
+  }
+
+  return {
+    missing,
+    canVerify: missing.length === 0 && (checklistTotal > 0 || dispatch.signoffs.length >= 2),
+  };
+}
+
+export function useDispatchDetailController(
+  dispatchId: string | number,
+  workOrderId: string | number,
+) {
+  const { user } = useAuthContext();
+  const { data: dispatch, isLoading, isFetching, refetch } = useDispatchDetail(dispatchId);
+  const uplift = useDispatchUpliftController(dispatchId);
+
+  const [editing, setEditing] = useState(false);
+  const [form, setForm] = useState<DispatchEditFormState>({
+    status: "",
+    nteAmount: "",
+    scheduledDate: "",
+    completedDate: "",
+    description: "",
+  });
+  const [newChecklistItem, setNewChecklistItem] = useState("");
+  const [commentText, setCommentText] = useState("");
+  const [sendEmail, setSendEmail] = useState(true);
+  const [sigCaptureType, setSigCaptureType] = useState<string | null>(null);
+
+  const updateDispatchMutation = useUpdateDispatch(dispatchId, workOrderId);
+  const addCommentMutation = useAddDispatchComment(dispatchId);
+  const updateChecklistMutation = useUpdateChecklistItem(dispatchId);
+  const addChecklistMutation = useAddChecklistItem(dispatchId);
+  const addSignoffMutation = useAddDispatchSignoff(dispatchId);
+  const verifyMutation = useVerifyDispatch(dispatchId, workOrderId);
+
+  const userName =
+    (typeof user?.name === "string" ? user.name : undefined) ??
+    (typeof user?.fullname === "string" ? user.fullname : undefined) ??
+    "User";
+
+  const isLocked = dispatch ? isDispatchLocked(dispatch) : false;
+
+  const verifyState = useMemo(() => buildVerifyState(dispatch), [dispatch]);
+
+  const beginEditing = () => {
+    if (dispatch) {
+      setForm(buildDispatchEditForm(dispatch));
+    }
+    setEditing(true);
+  };
+
+  const handleSave = () => {
+    updateDispatchMutation.mutate(
+      {
+        id: dispatchId,
+        status: form.status,
+        nteAmount: form.nteAmount ? parseFloat(form.nteAmount) : null,
+        scheduledDate: form.scheduledDate || null,
+        completedDate: form.completedDate || null,
+        description: form.description,
+      },
+      { onSuccess: () => setEditing(false) },
+    );
+  };
+
+  const handleCancelDispatch = (current: DispatchDetail) => {
+    if (!window.confirm("Are you sure you want to cancel this dispatch?")) {
+      return;
+    }
+
+    updateDispatchMutation.mutate({
+      id: dispatchId,
+      status: "Cancelled",
+      nteAmount: current.nteAmount,
+      scheduledDate: toDateInputValue(current.scheduledDate) || null,
+      completedDate: toDateInputValue(current.completedDate) || null,
+      description: current.description,
+    });
+  };
+
+  const handleComment = (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!commentText.trim()) {
+      return;
+    }
+
+    addCommentMutation.mutate(
+      { text: commentText.trim(), sendEmail },
+      { onSuccess: () => setCommentText("") },
+    );
+  };
+
+  const isMutating =
+    updateDispatchMutation.isPending ||
+    addCommentMutation.isPending ||
+    updateChecklistMutation.isPending ||
+    addChecklistMutation.isPending ||
+    addSignoffMutation.isPending ||
+    verifyMutation.isPending ||
+    uplift.isMutating;
+
+  return {
+    dispatch,
+    isLoading,
+    isFetching,
+    refetch,
+    uplifts: uplift.uplifts,
+    isLoadingUplifts: uplift.isLoadingUplifts,
+    editing,
+    form,
+    setForm,
+    newChecklistItem,
+    setNewChecklistItem,
+    commentText,
+    setCommentText,
+    sendEmail,
+    setSendEmail,
+    sigCaptureType,
+    setSigCaptureType,
+    upliftAction: uplift.upliftAction,
+    setUpliftAction: uplift.setUpliftAction,
+    isLocked,
+    isMutating,
+    userName,
+    verifyState,
+    beginEditing,
+    handleSave,
+    handleCancelDispatch,
+    handleComment,
+    handleUpliftConfirm: uplift.handleUpliftConfirm,
+    setEditing,
+    updateDispatchMutation,
+    updateChecklistMutation,
+    addChecklistMutation,
+    addSignoffMutation,
+    verifyMutation,
+    approveUpliftMutation: uplift.approveUpliftMutation,
+    rejectUpliftMutation: uplift.rejectUpliftMutation,
+    requestChangesUpliftMutation: uplift.requestChangesUpliftMutation,
+    addCommentMutation,
+  };
+}
+
+export type DispatchDetailController = ReturnType<typeof useDispatchDetailController>;
diff --git a/src/app/(protected)/workorders/_hooks/use-dispatch-uplift-controller.ts b/src/app/(protected)/workorders/_hooks/use-dispatch-uplift-controller.ts
new file mode 100644
index 00000000..a2eb617e
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-dispatch-uplift-controller.ts
@@ -0,0 +1,65 @@
+import { useState } from "react";
+import {
+  useApproveUplift,
+  useRejectUplift,
+  useRequestChangesUplift,
+  useUpliftsForDispatch,
+} from "@/domain/uplifts/use-cases/use-uplift-actions";
+import type { UpliftRequest } from "@/domain/uplifts/types/uplift";
+
+type UpliftAction = { type: "approve" | "reject" | "request-changes"; uplift: UpliftRequest };
+
+/**
+ * Owns the uplift decision workflow for a dispatch: the pending uplifts list,
+ * which uplift (if any) the user is currently deciding on, and the mutations
+ * backing that decision.
+ */
+export function useDispatchUpliftController(dispatchId: string | number) {
+  const { data: uplifts = [], isLoading: isLoadingUplifts } = useUpliftsForDispatch(dispatchId);
+  const [upliftAction, setUpliftAction] = useState<UpliftAction | null>(null);
+  const approveUpliftMutation = useApproveUplift(dispatchId);
+  const rejectUpliftMutation = useRejectUplift(dispatchId);
+  const requestChangesUpliftMutation = useRequestChangesUplift(dispatchId);
+
+  const handleUpliftConfirm = (note: string) => {
+    if (!upliftAction) {
+      return;
+    }
+
+    if (upliftAction.type === "approve") {
+      approveUpliftMutation.mutate(
+        { id: upliftAction.uplift.id, note },
+        { onSuccess: () => setUpliftAction(null) },
+      );
+      return;
+    }
+
+    if (upliftAction.type === "reject") {
+      rejectUpliftMutation.mutate(
+        { id: upliftAction.uplift.id, note },
+        { onSuccess: () => setUpliftAction(null) },
+      );
+      return;
+    }
+
+    requestChangesUpliftMutation.mutate(
+      { id: upliftAction.uplift.id, note },
+      { onSuccess: () => setUpliftAction(null) },
+    );
+  };
+
+  return {
+    uplifts,
+    isLoadingUplifts,
+    upliftAction,
+    setUpliftAction,
+    approveUpliftMutation,
+    rejectUpliftMutation,
+    requestChangesUpliftMutation,
+    handleUpliftConfirm,
+    isMutating:
+      approveUpliftMutation.isPending ||
+      rejectUpliftMutation.isPending ||
+      requestChangesUpliftMutation.isPending,
+  };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-media-upload-session.ts b/src/app/(protected)/workorders/_hooks/use-media-upload-session.ts
new file mode 100644
index 00000000..3adf39ad
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-media-upload-session.ts
@@ -0,0 +1,211 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { MediaUploadRequest } from "@/app/(protected)/workorders/_components/media/media-uploader";
+import { boardMediaItemsToMediaFiles } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail";
+import { classifyUpload } from "@/domain/work-orders/utils/work-order-media-utils";
+
+type LocalUpload = MediaFile & { sourceFile?: File; signal?: AbortSignal };
+
+type UploadMutate = (input: {
+  file: File;
+  signal?: AbortSignal;
+  onProgress?: (percent: number) => void;
+}) => Promise<unknown>;
+
+type SessionUploadRequest = {
+  localId: string;
+  file: File;
+  signal: AbortSignal;
+};
+
+function revokeBlobUrl(url: string | undefined) {
+  if (url?.startsWith("blob:")) {
+    URL.revokeObjectURL(url);
+  }
+}
+
+function toLocalUpload(request: SessionUploadRequest): LocalUpload {
+  const classified = classifyUpload(request.file);
+  return {
+    id: request.localId,
+    name: request.file.name,
+    fileType: classified.fileType,
+    url: URL.createObjectURL(request.file),
+    category: classified.category,
+    purpose: null,
+    progress: 0,
+    uploadStatus: "uploading" as const,
+    sourceFile: request.file,
+    signal: request.signal,
+  };
+}
+
+function isSameAttempt(item: LocalUpload, request: SessionUploadRequest) {
+  return item.id === request.localId && item.signal === request.signal;
+}
+
+function upsertUploads(previous: LocalUpload[], entries: LocalUpload[]): LocalUpload[] {
+  const next = [...previous];
+  for (const entry of entries) {
+    const index = next.findIndex((item) => item.id === entry.id);
+    if (index >= 0) {
+      revokeBlobUrl(next[index]?.url);
+      next[index] = entry;
+    } else {
+      next.push(entry);
+    }
+  }
+  return next;
+}
+
+function dropUploads(
+  previous: LocalUpload[],
+  matches: (item: LocalUpload) => boolean,
+): LocalUpload[] {
+  const kept: LocalUpload[] = [];
+  for (const item of previous) {
+    if (matches(item)) {
+      revokeBlobUrl(item.url);
+      continue;
+    }
+    kept.push(item);
+  }
+  return kept;
+}
+
+export function useMediaUploadSession(
+  detail: WorkOrderBoardDetail | undefined,
+  uploadMutateAsync: UploadMutate,
+) {
+  const [localUploads, setLocalUploads] = useState<LocalUpload[]>([]);
+  const controllersRef = useRef(new Map<string, AbortController>());
+  const workOrderId = detail?.info.id;
+  const previousWorkOrderIdRef = useRef(workOrderId);
+
+  // Drop local tiles and abort in-flight uploads when the bound WO changes.
+  // Skip the first bind (undefined → id) so an early upload is not cleared.
+  useEffect(() => {
+    if (previousWorkOrderIdRef.current === workOrderId) return;
+    const hadPrevious = previousWorkOrderIdRef.current != null;
+    previousWorkOrderIdRef.current = workOrderId;
+    if (!hadPrevious) return;
+
+    for (const controller of controllersRef.current.values()) {
+      controller.abort();
+    }
+    controllersRef.current.clear();
+    setLocalUploads((prev) => dropUploads(prev, () => true));
+  }, [workOrderId]);
+
+  const serverUploads = useMemo(
+    () => boardMediaItemsToMediaFiles(detail?.media ?? []),
+    [detail?.media],
+  );
+
+  const uploads = useMemo(() => {
+    const serverIds = new Set(serverUploads.map((item) => item.id));
+    const pendingLocals = localUploads.filter(
+      (item) => item.uploadStatus === "uploading" || item.uploadStatus === "failed",
+    );
+    return [...serverUploads, ...pendingLocals.filter((item) => !serverIds.has(item.id))];
+  }, [serverUploads, localUploads]);
+
+  function clearController(localId: string) {
+    controllersRef.current.delete(localId);
+  }
+
+  function replaceController(localId: string): AbortController {
+    controllersRef.current.get(localId)?.abort();
+    const controller = new AbortController();
+    controllersRef.current.set(localId, controller);
+    return controller;
+  }
+
+  function settleAttempt(request: SessionUploadRequest) {
+    clearController(request.localId);
+    setLocalUploads((prev) => dropUploads(prev, (item) => isSameAttempt(item, request)));
+  }
+
+  function failAttempt(request: SessionUploadRequest, error: Error) {
+    // Keep the controller entry while the attempt is retryable; retry replaces it.
+    setLocalUploads((prev) =>
+      prev.map((item) =>
+        isSameAttempt(item, request)
+          ? {
+              ...item,
+              uploadStatus: "failed",
+              errorMessage: error.message || "Upload failed",
+              progress: undefined,
+            }
+          : item,
+      ),
+    );
+  }
+
+  function startUploads(requests: MediaUploadRequest[]) {
+    const sessionRequests: SessionUploadRequest[] = requests.map((request) => ({
+      localId: request.localId,
+      file: request.file,
+      signal: replaceController(request.localId).signal,
+    }));
+
+    const entries = sessionRequests.map(toLocalUpload);
+    setLocalUploads((prev) => upsertUploads(prev, entries));
+
+    for (const request of sessionRequests) {
+      void uploadMutateAsync({
+        file: request.file,
+        signal: request.signal,
+        onProgress: (percent) => {
+          setLocalUploads((prev) =>
+            prev.map((item) =>
+              isSameAttempt(item, request) ? { ...item, progress: percent } : item,
+            ),
+          );
+        },
+      })
+        .then(() => settleAttempt(request))
+        .catch((error: Error) => {
+          if (error.name === "AbortError") {
+            settleAttempt(request);
+            return;
+          }
+          failAttempt(request, error);
+        });
+    }
+  }
+
+  function retryUpload(localId: string) {
+    const target = localUploads.find((item) => item.id === localId);
+    if (!target?.sourceFile) return;
+    startUploads([
+      {
+        localId,
+        file: target.sourceFile,
+        onProgress: () => undefined,
+      },
+    ]);
+  }
+
+  /** Abort any in-flight attempt for the tile and drop it from the session. */
+  function dropLocal(localId: string) {
+    controllersRef.current.get(localId)?.abort();
+    clearController(localId);
+    setLocalUploads((prev) => dropUploads(prev, (item) => item.id === localId));
+  }
+
+  function cancelUpload(localId: string) {
+    dropLocal(localId);
+  }
+
+  function removeLocal(id: string) {
+    dropLocal(id);
+  }
+
+  function isLocal(id: string) {
+    return localUploads.some((item) => item.id === id);
+  }
+
+  return { uploads, startUploads, retryUpload, cancelUpload, removeLocal, isLocal };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-sync-out-of-range-search-page.ts b/src/app/(protected)/workorders/_hooks/use-sync-out-of-range-search-page.ts
new file mode 100644
index 00000000..27085c3f
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-sync-out-of-range-search-page.ts
@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { nextSearchPageIfOutOfRange } from "@/domain/work-orders/utils/day-pagination";
+
+type UseSyncOutOfRangeSearchPageInput = {
+  enabled: boolean;
+  ready: boolean;
+  page: number;
+  pageSize: number;
+  totalCount: number;
+  setPage: (page: number) => void;
+};
+
+/** Keeps the requested search page inside the last valid page after the result set shrinks. */
+export function useSyncOutOfRangeSearchPage(input: UseSyncOutOfRangeSearchPageInput) {
+  const { enabled, ready, page, pageSize, totalCount, setPage } = input;
+  const nextPage = nextSearchPageIfOutOfRange({ page, pageSize, totalCount });
+
+  useEffect(() => {
+    if (!enabled || !ready || nextPage == null) {
+      return;
+    }
+    setPage(nextPage);
+  }, [enabled, ready, nextPage, setPage]);
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-table-sort.ts b/src/app/(protected)/workorders/_hooks/use-table-sort.ts
new file mode 100644
index 00000000..76bb8970
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-table-sort.ts
@@ -0,0 +1,58 @@
+import { useCallback, useState } from "react";
+import type {
+  SortDirection,
+  WorkOrdersSortableColumn,
+} from "@/domain/work-orders/types/work-order-list";
+
+type TableSortState = {
+  column: WorkOrdersSortableColumn | "";
+  direction: SortDirection;
+};
+
+export function useTableSort(initialColumn: WorkOrdersSortableColumn | "" = "") {
+  const [sortBy, setSortBy] = useState<WorkOrdersSortableColumn | "">(initialColumn);
+  const [sortDir, setSortDir] = useState<SortDirection>("");
+
+  const handleSort = useCallback((column: WorkOrdersSortableColumn | string) => {
+    const col = column as WorkOrdersSortableColumn;
+    setSortBy((currentColumn) => {
+      if (currentColumn !== col) {
+        setSortDir("asc");
+        return col;
+      }
+
+      setSortDir((currentDir) => {
+        if (currentDir === "asc") {
+          return "desc";
+        }
+        if (currentDir === "desc") {
+          setSortBy("");
+          return "";
+        }
+        return "asc";
+      });
+
+      return currentColumn;
+    });
+  }, []);
+
+  const sortIndicator = useCallback(
+    (column: string) => {
+      if (sortBy !== column) {
+        return "";
+      }
+      return sortDir === "desc" ? " ↓" : sortDir === "asc" ? " ↑" : "";
+    },
+    [sortBy, sortDir],
+  );
+
+  const sort: TableSortState = { column: sortBy, direction: sortDir };
+
+  return {
+    sortBy,
+    sortDir,
+    sort,
+    handleSort,
+    sortIndicator,
+  };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-vendor-editor.ts b/src/app/(protected)/workorders/_hooks/use-vendor-editor.ts
new file mode 100644
index 00000000..e9fe22cd
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-vendor-editor.ts
@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import { useUpdateWorkOrderVendor } from "@/domain/work-orders/use-cases/use-work-order-mutations";
+
+export interface VendorEditorState {
+  vendorId: string | number;
+  vendorName: string;
+  contactName: string;
+  phone: string;
+  email: string;
+  notes: string;
+}
+
+export function formatPhoneMask(input: string): string {
+  const digits = input.replace(/\D/g, "").slice(0, 10);
+  if (digits.length <= 3) return digits;
+  if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+}
+
+export function isVendorEditorValid(editor: VendorEditorState): boolean {
+  const phoneValid = editor.phone === "" || /^\(\d{3}\) \d{3}-\d{4}$/.test(editor.phone);
+  const emailValid = editor.email === "" || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(editor.email);
+  return (
+    phoneValid && emailValid && editor.notes.length <= 2000 && editor.contactName.length <= 200
+  );
+}
+
+/**
+ * Owns the "edit assigned vendor" dialog state for a work order: loading the
+ * current vendor contact details, tracking in-flight edits, and saving them
+ * back via `useUpdateWorkOrderVendor`.
+ */
+export function useVendorEditor(workOrderId: string, onSaved: () => void) {
+  const vendorMutation = useUpdateWorkOrderVendor(workOrderId);
+  const [vendorEditor, setVendorEditor] = useState<VendorEditorState | null>(null);
+  const [vendorEditorLoading, setVendorEditorLoading] = useState(false);
+  const [vendorEditorError, setVendorEditorError] = useState("");
+
+  const openVendorEditor = async (vendorId: string | number, vendorName: string) => {
+    setVendorEditorError("");
+    setVendorEditorLoading(true);
+    setVendorEditor({
+      vendorId,
+      vendorName,
+      contactName: "",
+      phone: "",
+      email: "",
+      notes: "",
+    });
+
+    try {
+      const vendor = await vendorsApi.getById(vendorId);
+      setVendorEditor({
+        vendorId,
+        vendorName: vendor.companyName || vendorName,
+        contactName: vendor.contactName,
+        phone: vendor.phone,
+        email: vendor.email,
+        notes: vendor.notes,
+      });
+    } catch (vendorError) {
+      setVendorEditorError(
+        vendorError instanceof Error ? vendorError.message : "Unable to load vendor details",
+      );
+    } finally {
+      setVendorEditorLoading(false);
+    }
+  };
+
+  const closeVendorEditor = () => {
+    if (!vendorMutation.isPending) setVendorEditor(null);
+  };
+
+  const saveVendorEditor = () => {
+    if (!vendorEditor || !isVendorEditorValid(vendorEditor)) return;
+    const numericWorkOrderId = Number(workOrderId);
+    if (!Number.isInteger(numericWorkOrderId) || numericWorkOrderId <= 0) {
+      setVendorEditorError("A valid work order is required");
+      return;
+    }
+
+    vendorMutation.mutate(
+      {
+        vendorId: vendorEditor.vendorId,
+        payload: {
+          workOrderId: numericWorkOrderId,
+          contactName: vendorEditor.contactName.trim(),
+          phone: vendorEditor.phone,
+          email: vendorEditor.email.trim(),
+          notes: vendorEditor.notes.trim(),
+        },
+      },
+      {
+        onSuccess: () => {
+          setVendorEditor(null);
+          onSaved();
+        },
+        onError: (vendorError) => setVendorEditorError(vendorError.message),
+      },
+    );
+  };
+
+  return {
+    vendorEditor,
+    setVendorEditor,
+    vendorEditorLoading,
+    vendorEditorError,
+    vendorMutation,
+    openVendorEditor,
+    closeVendorEditor,
+    saveVendorEditor,
+  };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-work-order-view-controller.ts b/src/app/(protected)/workorders/_hooks/use-work-order-view-controller.ts
new file mode 100644
index 00000000..9053c006
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-work-order-view-controller.ts
@@ -0,0 +1,82 @@
+import { useMemo, useState } from "react";
+import { useWorkOrderDetail } from "@/domain/work-orders/use-cases/use-work-order-detail";
+import {
+  useAddWorkOrderComment,
+  useChangeWorkOrderAssignment,
+  useChangeWorkOrderStatus,
+} from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
+import { useVendorEditor } from "@/app/(protected)/workorders/_hooks/use-vendor-editor";
+
+export type WorkOrderActivityTab = "customer" | "internal" | "audit";
+
+export function useWorkOrderViewController(workOrderId: string) {
+  const { data: wo, isLoading, error, refetch } = useWorkOrderDetail(workOrderId);
+  const { data: users = [] } = useWorkOrderUsers();
+  const statusMutation = useChangeWorkOrderStatus(workOrderId);
+  const assignmentMutation = useChangeWorkOrderAssignment(workOrderId);
+  const commentMutation = useAddWorkOrderComment(workOrderId);
+  const vendorEditor = useVendorEditor(workOrderId, () => void refetch());
+
+  const [activeTab, setActiveTab] = useState<WorkOrderActivityTab>("customer");
+  const [commentText, setCommentText] = useState("");
+  const [dispatchOpen, setDispatchOpen] = useState(false);
+  const [dispatchDetailId, setDispatchDetailId] = useState<string | number | null>(null);
+  const [statusAnchor, setStatusAnchor] = useState<HTMLElement | null>(null);
+  const [assignAnchor, setAssignAnchor] = useState<HTMLElement | null>(null);
+
+  const customerComments = useMemo(
+    () => (wo?.comments ?? []).filter((comment) => comment.commentType === "customer"),
+    [wo?.comments],
+  );
+  const internalComments = useMemo(
+    () => (wo?.comments ?? []).filter((comment) => comment.commentType === "internal"),
+    [wo?.comments],
+  );
+  const auditLog = wo?.auditLog ?? [];
+
+  const handleCommentSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!commentText.trim()) {
+      return;
+    }
+    if (activeTab !== "customer" && activeTab !== "internal") {
+      return;
+    }
+
+    commentMutation.mutate(
+      { text: commentText.trim(), commentType: activeTab },
+      { onSuccess: () => setCommentText("") },
+    );
+  };
+
+  return {
+    wo,
+    isLoading,
+    error,
+    refetch,
+    users,
+    statusMutation,
+    assignmentMutation,
+    commentMutation,
+    vendorEditor,
+    activeTab,
+    setActiveTab,
+    commentText,
+    setCommentText,
+    dispatchOpen,
+    setDispatchOpen,
+    dispatchDetailId,
+    setDispatchDetailId,
+    statusAnchor,
+    setStatusAnchor,
+    assignAnchor,
+    setAssignAnchor,
+    customerComments,
+    internalComments,
+    auditLog,
+    handleCommentSubmit,
+  };
+}
+
+export type WorkOrderViewController = ReturnType<typeof useWorkOrderViewController>;
diff --git a/src/app/(protected)/workorders/_hooks/use-work-order-view-page.ts b/src/app/(protected)/workorders/_hooks/use-work-order-view-page.ts
new file mode 100644
index 00000000..ca371b50
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-work-order-view-page.ts
@@ -0,0 +1,168 @@
+import { useMemo, useState } from "react";
+import type { VendorEditorState } from "@/app/(protected)/workorders/_components/view/work-order-vendor-editor-types";
+import { isVendorEditorValid } from "@/app/(protected)/workorders/_components/view/work-order-vendor-editor-utils";
+import {
+  useWorkOrderBoardDetail,
+  useWorkOrderDetail,
+} from "@/domain/work-orders/use-cases/use-work-order-detail";
+import {
+  useAddWorkOrderComment,
+  useChangeWorkOrderAssignment,
+  useChangeWorkOrderStatus,
+  useUpdateWorkOrderVendor,
+} from "@/domain/work-orders/use-cases/use-work-order-mutations";
+import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import { extractMentionIds } from "@/domain/work-orders/utils/comment-mentions";
+import { enrichDetailClosabilityFromBoard } from "@/domain/work-orders/utils/enrich-detail-closability-from-board";
+import {
+  isWorkOrderCoreLocked,
+  isWorkOrderFullyLocked,
+} from "@/domain/work-orders/utils/work-order-lock";
+
+export function useWorkOrderViewPage(workOrderId: string) {
+  const { data: detail, isLoading, error, refetch } = useWorkOrderDetail(workOrderId);
+  const { data: boardDetail, isSuccess: isBoardDetailSuccess } =
+    useWorkOrderBoardDetail(workOrderId);
+  /** Fail closed until board detail succeeds — legacy GetById lacks type/doc/media. */
+  const isClosabilityReady = isBoardDetailSuccess && boardDetail != null;
+  const { data: users = [] } = useWorkOrderUsers();
+  const statusMutation = useChangeWorkOrderStatus(workOrderId);
+  const assignmentMutation = useChangeWorkOrderAssignment(workOrderId);
+  const commentMutation = useAddWorkOrderComment(workOrderId);
+  const vendorMutation = useUpdateWorkOrderVendor(workOrderId);
+
+  const [dispatchOpen, setDispatchOpen] = useState(false);
+  const [dispatchDetailId, setDispatchDetailId] = useState<string | number | null>(null);
+  const [statusAnchor, setStatusAnchor] = useState<HTMLElement | null>(null);
+  const [assignAnchor, setAssignAnchor] = useState<HTMLElement | null>(null);
+  const [vendorEditor, setVendorEditor] = useState<VendorEditorState | null>(null);
+  const [vendorEditorLoading, setVendorEditorLoading] = useState(false);
+  const [vendorEditorError, setVendorEditorError] = useState("");
+
+  const wo = useMemo(
+    () => (detail ? enrichDetailClosabilityFromBoard(detail, boardDetail) : undefined),
+    [detail, boardDetail],
+  );
+
+  const customerComments = useMemo(
+    () => (wo?.comments ?? []).filter((comment) => comment.commentType === "customer"),
+    [wo?.comments],
+  );
+  const internalComments = useMemo(
+    () => (wo?.comments ?? []).filter((comment) => comment.commentType === "internal"),
+    [wo?.comments],
+  );
+  const auditLog = wo?.auditLog ?? [];
+  const mentionUsers = useMemo(
+    () => users.map((user) => ({ id: user.id, name: user.name })),
+    [users],
+  );
+
+  const submitComment = async (text: string) => {
+    const mentions = extractMentionIds(text);
+    await commentMutation.mutateAsync({
+      text,
+      mentions: mentions.length > 0 ? mentions : undefined,
+      commentType: "internal",
+    });
+  };
+
+  const openVendorEditor = async (
+    event: React.MouseEvent,
+    vendorId: string | number,
+    vendorName: string,
+  ) => {
+    event.stopPropagation();
+    setVendorEditorError("");
+    setVendorEditorLoading(true);
+    setVendorEditor({
+      vendorId,
+      vendorName,
+      contactName: "",
+      phone: "",
+      email: "",
+      notes: "",
+    });
+
+    try {
+      const vendor = await vendorsApi.getById(vendorId);
+      setVendorEditor({
+        vendorId,
+        vendorName: vendor.companyName || vendorName,
+        contactName: vendor.contactName,
+        phone: vendor.phone,
+        email: vendor.email,
+        notes: vendor.notes,
+      });
+    } catch (vendorError) {
+      setVendorEditorError(
+        vendorError instanceof Error ? vendorError.message : "Unable to load vendor details",
+      );
+    } finally {
+      setVendorEditorLoading(false);
+    }
+  };
+
+  const saveVendorEditor = () => {
+    if (isWorkOrderCoreLocked(wo?.status) || isWorkOrderFullyLocked(wo?.status)) return;
+    if (!vendorEditor || !isVendorEditorValid(vendorEditor)) return;
+    const numericWorkOrderId = Number(workOrderId);
+    if (!Number.isInteger(numericWorkOrderId) || numericWorkOrderId <= 0) {
+      setVendorEditorError("A valid work order is required");
+      return;
+    }
+
+    vendorMutation.mutate(
+      {
+        vendorId: vendorEditor.vendorId,
+        payload: {
+          workOrderId: numericWorkOrderId,
+          contactName: vendorEditor.contactName.trim(),
+          phone: vendorEditor.phone,
+          email: vendorEditor.email.trim(),
+          notes: vendorEditor.notes.trim(),
+        },
+      },
+      {
+        onSuccess: () => {
+          setVendorEditor(null);
+          void refetch();
+        },
+        onError: (vendorError) => setVendorEditorError(vendorError.message),
+      },
+    );
+  };
+
+  return {
+    wo,
+    isLoading,
+    isClosabilityReady,
+    error,
+    refetch,
+    users,
+    customerComments,
+    internalComments,
+    auditLog,
+    mentionUsers,
+    submitComment,
+    dispatchOpen,
+    setDispatchOpen,
+    dispatchDetailId,
+    setDispatchDetailId,
+    statusAnchor,
+    setStatusAnchor,
+    assignAnchor,
+    setAssignAnchor,
+    vendorEditor,
+    setVendorEditor,
+    vendorEditorLoading,
+    vendorEditorError,
+    openVendorEditor,
+    saveVendorEditor,
+    statusMutation,
+    assignmentMutation,
+    commentMutation,
+    vendorMutation,
+  };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-work-orders-board-source.ts b/src/app/(protected)/workorders/_hooks/use-work-orders-board-source.ts
new file mode 100644
index 00000000..cbc1da83
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-work-orders-board-source.ts
@@ -0,0 +1,79 @@
+import { useMemo } from "react";
+import type { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
+import { buildResolvedBoardSearchParams } from "@/app/(protected)/workorders/_hooks/build-resolved-board-search-params";
+import {
+  useWorkOrdersBoard,
+  useWorkOrdersBoardSearch,
+} from "@/domain/work-orders/use-cases/use-work-orders-list";
+import {
+  useWorkOrderLocations,
+  useWorkOrderVendors,
+} from "@/domain/work-orders/use-cases/use-work-order-detail";
+import type { WorkOrderBoardListResult } from "@/domain/work-orders/types/work-order-board";
+import type { UseQueryResult } from "@tanstack/react-query";
+
+type FiltersReturn = ReturnType<typeof useWorkOrdersListFilters>;
+
+export type WorkOrdersBoardSource = {
+  advActive: boolean;
+  data: WorkOrderBoardListResult | undefined;
+  isLoading: boolean;
+  isFetching: boolean;
+  error: Error | null;
+  refetch: UseQueryResult<WorkOrderBoardListResult, Error>["refetch"];
+};
+
+/** Picks between the weekly board query and the advanced-filters search query. */
+export function useWorkOrdersBoardSource(filters: FiltersReturn): WorkOrdersBoardSource {
+  const advActive = filters.advApplied !== null;
+  const { data: locations = [] } = useWorkOrderLocations();
+  const { data: vendors = [] } = useWorkOrderVendors();
+
+  const resolvedSearchParams = useMemo(
+    () =>
+      buildResolvedBoardSearchParams({
+        advApplied: filters.advApplied,
+        // Advanced Filters are global by design; the week-scoped keyword box has no effect.
+        search: "",
+        page: filters.page,
+        pageSize: filters.pageSize,
+        sortBy: filters.sortBy,
+        sortDir: filters.sortDir,
+        locations,
+        vendors,
+      }),
+    [
+      filters.advApplied,
+      filters.page,
+      filters.pageSize,
+      filters.sortBy,
+      filters.sortDir,
+      locations,
+      vendors,
+    ],
+  );
+
+  const {
+    data: boardData,
+    isLoading: boardLoading,
+    isFetching: boardFetching,
+    error: boardError,
+    refetch: refetchBoard,
+  } = useWorkOrdersBoard(filters.boardParams, !advActive);
+  const {
+    data: searchData,
+    isLoading: searchLoading,
+    isFetching: searchFetching,
+    error: searchError,
+    refetch: refetchSearch,
+  } = useWorkOrdersBoardSearch(resolvedSearchParams ?? { datePreset: "ThisWeek" }, advActive);
+
+  return {
+    advActive,
+    data: advActive ? searchData : boardData,
+    isLoading: advActive ? searchLoading : boardLoading,
+    isFetching: advActive ? searchFetching : boardFetching,
+    error: advActive ? searchError : boardError,
+    refetch: advActive ? refetchSearch : refetchBoard,
+  };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-work-orders-day-pagination.ts b/src/app/(protected)/workorders/_hooks/use-work-orders-day-pagination.ts
new file mode 100644
index 00000000..241fdf24
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-work-orders-day-pagination.ts
@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+  DEFAULT_DAY_PAGE_SIZE,
+  findItemPageIndex,
+  totalPageCount,
+  type DayPageSize,
+} from "@/domain/work-orders/utils/day-pagination";
+
+type DayPageItem = { id: string | number };
+
+type UseWorkOrdersDayPaginationInput = {
+  weekMonday: string;
+  selectedDayIso: string;
+  advActive: boolean;
+  dayItems: readonly DayPageItem[];
+  onRevealed: (id: string | number) => void;
+};
+
+export function useWorkOrdersDayPagination({
+  weekMonday,
+  selectedDayIso,
+  advActive,
+  dayItems,
+  onRevealed,
+}: UseWorkOrdersDayPaginationInput) {
+  const [pageSize, setPageSizeState] = useState<DayPageSize>(DEFAULT_DAY_PAGE_SIZE);
+  const [page, setPage] = useState(0);
+  const [pendingRevealId, setPendingRevealId] = useState<string | number | null>(null);
+
+  useEffect(() => {
+    setPage(0);
+  }, [weekMonday, selectedDayIso, advActive]);
+
+  useEffect(() => {
+    if (pendingRevealId == null) {
+      return;
+    }
+    const nextPage = findItemPageIndex(dayItems, pendingRevealId, pageSize);
+    if (nextPage == null) {
+      return;
+    }
+    setPage(nextPage);
+    const revealedId = pendingRevealId;
+    setPendingRevealId(null);
+    onRevealed(revealedId);
+  }, [pendingRevealId, dayItems, pageSize, onRevealed]);
+
+  const pageCount = totalPageCount(dayItems.length, pageSize);
+
+  const setPageSize = useCallback((next: DayPageSize) => {
+    setPageSizeState(next);
+    setPage(0);
+  }, []);
+
+  const goToPrevPage = useCallback(() => {
+    setPage((current) => Math.max(0, current - 1));
+  }, []);
+
+  const goToNextPage = useCallback(() => {
+    setPage((current) => Math.min(current + 1, Math.max(0, pageCount - 1)));
+  }, [pageCount]);
+
+  const revealRow = useCallback((id: string | number) => {
+    setPendingRevealId(id);
+  }, []);
+
+  return {
+    pageSize,
+    page,
+    setPageSize,
+    goToPrevPage,
+    goToNextPage,
+    revealRow,
+  };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-work-orders-list-filters.ts b/src/app/(protected)/workorders/_hooks/use-work-orders-list-filters.ts
new file mode 100644
index 00000000..811c9823
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-work-orders-list-filters.ts
@@ -0,0 +1,172 @@
+import { useMemo, useState } from "react";
+import { useDebounce } from "@/hooks/use-debounce";
+import type { WorkOrderAdvancedFilters } from "@/domain/work-orders/types/work-order-advanced-filters";
+import type { WorkOrderBarFilters } from "@/domain/work-orders/types/work-order-list-filters";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import type { WorkOrderBoardQueryParams } from "@/domain/work-orders/types/work-order-board";
+import {
+  clearAdvancedFilterGroup,
+  cloneAdvancedFilters,
+  countAdvancedFilters,
+  getInitialAdvancedFilters,
+} from "@/domain/work-orders/utils/advanced-filters-utils";
+import { toBoardQueryParams } from "@/domain/work-orders/utils/board-query-params";
+import { asDayPageSize, DEFAULT_DAY_PAGE_SIZE } from "@/domain/work-orders/utils/day-pagination";
+import { compactWeekLabel, currentWeekMonday } from "@/domain/work-orders/utils/list-week-utils";
+import {
+  firstWeekday,
+  initialSelectedDay,
+  scheduledDayTab,
+  weekdaysMonFri,
+} from "@/domain/work-orders/utils/week-day-nav-utils";
+
+export function useWorkOrdersListFilters() {
+  const [search, setSearch] = useState("");
+  const [advOpen, setAdvOpen] = useState(false);
+  const [advApplied, setAdvApplied] = useState<WorkOrderAdvancedFilters | null>(null);
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSizeState] = useState(DEFAULT_DAY_PAGE_SIZE);
+  const [sortBy, setSortBy] = useState("");
+  const [sortDir, setSortDir] = useState<"asc" | "desc" | "">("");
+  const [weekMonday, setWeekMondayState] = useState(currentWeekMonday);
+  const [selectedDayIso, setSelectedDayIsoState] = useState(() =>
+    initialSelectedDay(currentWeekMonday()),
+  );
+  const [dispatcherIds, setDispatcherIdsState] = useState<Set<string>>(() => new Set());
+  const [types, setTypesState] = useState<Set<WOType>>(() => new Set());
+
+  const debouncedSearch = useDebounce(search, 300);
+
+  const barFilters = useMemo<WorkOrderBarFilters>(
+    () => ({
+      weekMonday,
+      dispatcherIds,
+      types,
+    }),
+    [weekMonday, dispatcherIds, types],
+  );
+
+  const weekLabel = useMemo(() => compactWeekLabel(weekMonday), [weekMonday]);
+  const weekDays = useMemo(() => weekdaysMonFri(weekMonday), [weekMonday]);
+
+  const boardParams = useMemo<WorkOrderBoardQueryParams>(
+    () => toBoardQueryParams(barFilters, debouncedSearch),
+    [barFilters, debouncedSearch],
+  );
+
+  const activeFilterCount = useMemo(
+    () => (advApplied ? countAdvancedFilters(advApplied) : 0),
+    [advApplied],
+  );
+
+  const setWeekMonday = (value: string) => {
+    setWeekMondayState(value);
+    setSelectedDayIsoState(firstWeekday(value));
+    setPage(0);
+  };
+
+  const setSelectedDayIso = setSelectedDayIsoState;
+
+  const navigateToDay = (dateIso: string) => {
+    const tab = scheduledDayTab(dateIso);
+    setWeekMondayState(tab.weekMonday);
+    setSelectedDayIsoState(tab.selectedDayIso);
+    setPage(0);
+  };
+
+  const setDispatcherIds = (value: Set<string>) => {
+    setDispatcherIdsState(new Set(value));
+    setPage(0);
+  };
+
+  const setTypes = (value: Set<WOType>) => {
+    setTypesState(new Set(value));
+    setPage(0);
+  };
+
+  const handleSearchChange = (value: string) => {
+    setSearch(value);
+    setPage(0);
+  };
+
+  const applyAdvancedFilters = (filters: WorkOrderAdvancedFilters) => {
+    setAdvApplied(cloneAdvancedFilters(filters));
+    setPage(0);
+  };
+
+  const clearAdvancedFilters = () => {
+    setAdvApplied(null);
+    setPage(0);
+  };
+
+  const clearAdvancedFilterChip = (chipKey: string) => {
+    if (!advApplied) return;
+    const next = clearAdvancedFilterGroup(advApplied, chipKey);
+    setAdvApplied(next);
+    setPage(0);
+  };
+
+  const setPageSize = (next: number) => {
+    setPageSizeState(asDayPageSize(next));
+    setPage(0);
+  };
+
+  const handleSort = (column: string) => {
+    if (sortBy === column) {
+      setSortDir((current) => {
+        const next = current === "asc" ? "desc" : current === "desc" ? "" : "asc";
+        if (next === "") {
+          setSortBy("");
+        }
+        return next;
+      });
+      return;
+    }
+
+    setSortBy(column);
+    setSortDir("asc");
+  };
+
+  const sortIndicator = (column: string) => {
+    if (sortBy !== column) {
+      return "";
+    }
+    return sortDir === "desc" ? " ↓" : " ↑";
+  };
+
+  return {
+    search,
+    advOpen,
+    advApplied,
+    advInitial: getInitialAdvancedFilters(advApplied),
+    page,
+    pageSize,
+    sortBy,
+    sortDir,
+    weekMonday,
+    selectedDayIso,
+    weekDays,
+    dispatcherIds,
+    types,
+    barFilters,
+    weekLabel,
+    boardParams,
+    activeFilterCount,
+    handleSearchChange,
+    applyAdvancedFilters,
+    clearAdvancedFilters,
+    clearAdvancedFilterChip,
+    handleSort,
+    sortIndicator,
+    setAdvOpen,
+    setPage,
+    setPageSize,
+    setWeekMonday,
+    setSelectedDayIso,
+    navigateToDay,
+    setDispatcherIds,
+    setTypes,
+    setSortBy,
+    setSortDir,
+  };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-work-orders-list-page.ts b/src/app/(protected)/workorders/_hooks/use-work-orders-list-page.ts
new file mode 100644
index 00000000..182a98e5
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-work-orders-list-page.ts
@@ -0,0 +1,166 @@
+import { useMemo, useState } from "react";
+import { useDropdownOptionsByCategory } from "@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category";
+import type { CompDocData, CompDocSaveStatus } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  useWorkOrderLocations,
+  useWorkOrderVendors,
+} from "@/domain/work-orders/use-cases/use-work-order-detail";
+import { useWorkOrderUsers } from "@/domain/work-orders/use-cases/use-work-orders-list";
+import { useWorkOrderTableMutations } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+import { shouldCompleteAfterCompletionDoc } from "@/domain/work-orders/utils/completion-doc-auto-complete";
+import {
+  patchWorkOrderAsCanceled,
+  patchWorkOrderAsCompleted,
+} from "@/domain/work-orders/utils/work-order-feedback-toasts";
+import { guardDialogClose } from "@/lib/dialog-guard";
+import { useWorkOrdersListFilters } from "./use-work-orders-list-filters";
+import { useWorkOrdersTableData } from "./use-work-orders-table-data";
+
+export function useWorkOrdersListPage() {
+  const [wizardOpen, setWizardOpen] = useState(false);
+  const [slideOverRow, setSlideOverRow] = useState<WorkOrderTableRow | null>(null);
+  const [slideOverEdit, setSlideOverEdit] = useState(false);
+  const [confirmCancel, setConfirmCancel] = useState<WorkOrderTableRow | null>(null);
+  const [confirmComplete, setConfirmComplete] = useState<WorkOrderTableRow | null>(null);
+  const [docRow, setDocRow] = useState<WorkOrderTableRow | null>(null);
+  const [mediaRow, setMediaRow] = useState<WorkOrderTableRow | null>(null);
+  const [upliftsRow, setUpliftsRow] = useState<WorkOrderTableRow | null>(null);
+  const [completionDocs, setCompletionDocs] = useState<Record<string, CompDocData>>({});
+  const filters = useWorkOrdersListFilters();
+  const tableData = useWorkOrdersTableData(filters);
+  const {
+    patchField,
+    patchFieldAsync,
+    isPending: isPatchPending,
+  } = useWorkOrderTableMutations({
+    onPatch: tableData.patchRow,
+    clearPatch: tableData.clearRowPatch,
+    getRow: (id) => tableData.rows.find((row) => String(row.id) === String(id)),
+  });
+
+  const { data: users = [], isLoading: usersLoading } = useWorkOrderUsers();
+  const { data: locations = [] } = useWorkOrderLocations();
+  const { data: vendors = [] } = useWorkOrderVendors();
+  const { data: problemOptions = [] } = useDropdownOptionsByCategory("Problem");
+
+  const pmTypes = useMemo(
+    () => problemOptions.map((option) => option.value).filter(Boolean),
+    [problemOptions],
+  );
+
+  const vendorTechs = useMemo(
+    () => [...new Set(vendors.map((vendor) => vendor.companyName).filter(Boolean))],
+    [vendors],
+  );
+
+  const activeSlideOverRow = useMemo(() => {
+    if (!slideOverRow) return null;
+    return tableData.rows.find((row) => row.id === slideOverRow.id) ?? slideOverRow;
+  }, [slideOverRow, tableData.rows]);
+
+  const activeDocRow = useMemo(() => {
+    if (!docRow) return null;
+    return tableData.rows.find((row) => row.id === docRow.id) ?? docRow;
+  }, [docRow, tableData.rows]);
+
+  const activeMediaRow = useMemo(() => {
+    if (!mediaRow) return null;
+    return tableData.rows.find((row) => row.id === mediaRow.id) ?? mediaRow;
+  }, [mediaRow, tableData.rows]);
+
+  const activeUpliftsRow = useMemo(() => {
+    if (!upliftsRow) return null;
+    return tableData.rows.find((row) => row.id === upliftsRow.id) ?? upliftsRow;
+  }, [upliftsRow, tableData.rows]);
+
+  const handleOpenSlideOver = (row: WorkOrderTableRow, edit = false) => {
+    setSlideOverRow(row);
+    setSlideOverEdit(edit);
+  };
+
+  const handleCloseSlideOver = () => {
+    setSlideOverRow(null);
+    setSlideOverEdit(false);
+    tableData.setSelectedId(null);
+  };
+
+  const handleConfirmCancel = () => {
+    if (!confirmCancel) return;
+    patchWorkOrderAsCanceled(patchField, confirmCancel);
+    setConfirmCancel(null);
+    handleCloseSlideOver();
+  };
+
+  const handleConfirmComplete = () => {
+    if (!confirmComplete) return;
+    patchWorkOrderAsCompleted(patchField, confirmComplete.id);
+    setConfirmComplete(null);
+  };
+
+  const cancelDialogClose = guardDialogClose(isPatchPending, () => setConfirmCancel(null));
+  const completeDialogClose = guardDialogClose(isPatchPending, () => setConfirmComplete(null));
+
+  const saveCompletionDoc = async (
+    row: WorkOrderTableRow,
+    data: CompDocData,
+    status: CompDocSaveStatus,
+  ) => {
+    // Persist PM comments + generatedAt in session state (no dedicated BE field yet)
+    // before patching board docStatus — Save draft / Generate / NN all share this path.
+    const nextData: CompDocData = {
+      notes: data.notes,
+      generatedAt: data.generatedAt,
+    };
+    setCompletionDocs((prev) => ({ ...prev, [String(row.id)]: nextData }));
+    const saved = await patchFieldAsync(row.id, { docStatus: status });
+    if (saved.kind !== "board" || !shouldCompleteAfterCompletionDoc(status, saved.row)) {
+      return;
+    }
+    try {
+      // Generation is the one automatic completion — no confirmation dialog.
+      await patchFieldAsync(row.id, { status: "Completed" }, saved.row);
+    } catch {
+      // The document is saved; the table mutation already surfaced the status error and
+      // refetched, so the WO stays in its prior status for a manual retry.
+    }
+  };
+
+  return {
+    wizardOpen,
+    setWizardOpen,
+    slideOverEdit,
+    confirmCancel,
+    setConfirmCancel,
+    confirmComplete,
+    setConfirmComplete,
+    docRow,
+    setDocRow,
+    mediaRow,
+    setMediaRow,
+    setUpliftsRow,
+    completionDocs,
+    filters,
+    tableData,
+    patchField,
+    patchFieldAsync,
+    isPatchPending,
+    users,
+    usersLoading,
+    locations,
+    vendors,
+    pmTypes,
+    vendorTechs,
+    activeSlideOverRow,
+    activeDocRow,
+    activeMediaRow,
+    activeUpliftsRow,
+    handleOpenSlideOver,
+    handleCloseSlideOver,
+    handleConfirmCancel,
+    handleConfirmComplete,
+    cancelDialogClose,
+    completeDialogClose,
+    saveCompletionDoc,
+  };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-work-orders-table-data.ts b/src/app/(protected)/workorders/_hooks/use-work-orders-table-data.ts
new file mode 100644
index 00000000..0e6c0b98
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-work-orders-table-data.ts
@@ -0,0 +1,139 @@
+import { useMemo } from "react";
+import type { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
+import { resolveBoardRowOrderOwnerId } from "@/app/(protected)/workorders/_hooks/resolve-board-row-order-owner-id";
+import { useSyncOutOfRangeSearchPage } from "@/app/(protected)/workorders/_hooks/use-sync-out-of-range-search-page";
+import { useWorkOrdersBoardSource } from "@/app/(protected)/workorders/_hooks/use-work-orders-board-source";
+import { useWorkOrdersTableDayView } from "@/app/(protected)/workorders/_hooks/use-work-orders-table-day-view";
+import { useWorkOrdersTableLocalState } from "@/app/(protected)/workorders/_hooks/use-work-orders-table-local-state";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { pickBoardPager, type DayPageSize } from "@/domain/work-orders/utils/day-pagination";
+import { filterByBarAndSearch } from "@/domain/work-orders/utils/table-filter-utils";
+
+export type { DragVizState } from "@/app/(protected)/workorders/_hooks/use-work-orders-table-local-state";
+
+type FiltersReturn = ReturnType<typeof useWorkOrdersListFilters>;
+
+const EMPTY_WEEKLY_ITEMS: WorkOrderTableRow[] = [];
+const EMPTY_UNASSIGNED: WorkOrderTableRow[] = [];
+
+export function useWorkOrdersTableData(filters: FiltersReturn) {
+  const { advActive, data, isLoading, isFetching, error, refetch } =
+    useWorkOrdersBoardSource(filters);
+
+  const weeklyItems = data?.items ?? EMPTY_WEEKLY_ITEMS;
+  const ownerId = resolveBoardRowOrderOwnerId();
+
+  const local = useWorkOrdersTableLocalState({
+    items: weeklyItems,
+    weekMonday: filters.weekMonday,
+    advActive,
+    isFetching,
+    ownerId,
+  });
+  const { displayRows, ...localUi } = local;
+
+  // SH-338: the server owns rows/totals for advanced search (incl. Unscheduled).
+  const advResults = useMemo(
+    () => (advActive ? displayRows : EMPTY_WEEKLY_ITEMS),
+    [advActive, displayRows],
+  );
+
+  const filtered = useMemo(() => {
+    if (advActive) {
+      return [];
+    }
+    if (filters.search.trim().length > 0 && filters.search.trim().length < 2) {
+      return filterByBarAndSearch(displayRows, filters.barFilters, filters.search);
+    }
+    return displayRows;
+  }, [displayRows, filters.barFilters, filters.search, advActive]);
+
+  const dayView = useWorkOrdersTableDayView({
+    filters,
+    advActive,
+    filtered,
+    advResults,
+    onRevealed: local.triggerFlash,
+  });
+
+  const selectedRow = useMemo(
+    () => displayRows.find((row) => String(row.id) === String(local.selectedId)) ?? null,
+    [displayRows, local.selectedId],
+  );
+
+  const scopeTotalCount = advActive
+    ? (data?.totalCount ?? advResults.length)
+    : dayView.dayTotalCount;
+  useSyncOutOfRangeSearchPage({
+    enabled: advActive,
+    ready: !isLoading,
+    page: filters.page,
+    pageSize: filters.pageSize,
+    totalCount: scopeTotalCount,
+    setPage: filters.setPage,
+  });
+  const listTotalCount = advActive ? advResults.length : dayView.dayVisibleCount;
+  const pager = pickBoardPager({
+    advActive,
+    isLoading,
+    noSearchResults: dayView.noSearchResults,
+    advResultCount: advResults.length,
+    search: {
+      page: filters.page,
+      pageSize: filters.pageSize,
+      totalCount: scopeTotalCount,
+    },
+    day: {
+      pageSize: dayView.pagination.pageSize,
+      pageIndex: dayView.pagedDay.pageIndex,
+      pageCount: dayView.pagedDay.pageCount,
+      itemCount: dayView.dayTotalCount,
+      footerLabel: dayView.displayGroups[0]?.label ?? "",
+    },
+  });
+
+  return {
+    rows: displayRows,
+    isLoading,
+    isFetching,
+    error,
+    refetch,
+    advActive,
+    advResults,
+    unassigned: EMPTY_UNASSIGNED,
+    unassignedTotalCount: 0,
+    unassignedError: null,
+    unassignedLoading: false,
+    unscheduled: dayView.unscheduled,
+    displayGroups: dayView.displayGroups,
+    searchActive: dayView.searchActive,
+    noSearchResults: dayView.noSearchResults,
+    isEmptyWeek: dayView.isEmptyWeek,
+    todayKey: dayView.todayKey,
+    ...localUi,
+    selectedRow,
+    scopeTotalCount,
+    totalCount: listTotalCount,
+    search: filters.search,
+    showDayPagination: pager.show,
+    dayPageSize: pager.pageSize,
+    dayPageIndex: pager.pageIndex,
+    dayPageCount: pager.pageCount,
+    dayItemCount: pager.itemCount,
+    dayFooterLabel: pager.footerLabel,
+    setDayPageSize: (next: DayPageSize) => {
+      if (advActive) {
+        filters.setPageSize(next);
+        return;
+      }
+      dayView.pagination.setPageSize(next);
+    },
+    goToPrevDayPage: advActive
+      ? () => filters.setPage(Math.max(0, pager.pageIndex - 1))
+      : dayView.pagination.goToPrevPage,
+    goToNextDayPage: advActive
+      ? () => filters.setPage(Math.min(pager.pageIndex + 1, Math.max(0, pager.pageCount - 1)))
+      : dayView.pagination.goToNextPage,
+    revealScheduledRow: dayView.pagination.revealRow,
+  };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-work-orders-table-day-view.ts b/src/app/(protected)/workorders/_hooks/use-work-orders-table-day-view.ts
new file mode 100644
index 00000000..42b3bde9
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-work-orders-table-day-view.ts
@@ -0,0 +1,89 @@
+import { useMemo } from "react";
+import type { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
+import { useWorkOrdersDayPagination } from "@/app/(protected)/workorders/_hooks/use-work-orders-day-pagination";
+import { currentWeekMonday } from "@/domain/work-orders/utils/list-week-utils";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { deriveDayFields } from "@/domain/work-orders/utils/table-day-utils";
+import { todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+import { pageSelectedDayGroups } from "@/domain/work-orders/utils/day-pagination";
+import {
+  buildSelectedDayGroup,
+  isDayScopedSearchEmpty,
+} from "@/domain/work-orders/utils/week-day-nav-utils";
+import { splitScheduledUnscheduled } from "@/domain/work-orders/utils/table-filter-utils";
+
+type FiltersReturn = ReturnType<typeof useWorkOrdersListFilters>;
+
+export type UseWorkOrdersTableDayViewParams = {
+  filters: FiltersReturn;
+  advActive: boolean;
+  filtered: WorkOrderTableRow[];
+  advResults: WorkOrderTableRow[];
+  onRevealed: (id: string | number) => void;
+};
+
+const EMPTY_WEEKLY_ITEMS: WorkOrderTableRow[] = [];
+
+export function useWorkOrdersTableDayView({
+  filters,
+  advActive,
+  filtered,
+  advResults,
+  onRevealed,
+}: UseWorkOrdersTableDayViewParams) {
+  const { scheduled, unscheduled } = useMemo(() => {
+    if (advActive) {
+      return splitScheduledUnscheduled(advResults);
+    }
+    return splitScheduledUnscheduled(filtered);
+  }, [advActive, advResults, filtered]);
+
+  const dayGroups = useMemo(
+    () =>
+      advActive
+        ? []
+        : [buildSelectedDayGroup(filters.weekMonday, filters.selectedDayIso, scheduled)],
+    [advActive, filters.selectedDayIso, filters.weekMonday, scheduled],
+  );
+  const pagination = useWorkOrdersDayPagination({
+    weekMonday: filters.weekMonday,
+    selectedDayIso: filters.selectedDayIso,
+    advActive,
+    dayItems: dayGroups[0]?.items ?? EMPTY_WEEKLY_ITEMS,
+    onRevealed,
+  });
+  const pagedDay = useMemo(
+    () => pageSelectedDayGroups(dayGroups, pagination.page, pagination.pageSize),
+    [dayGroups, pagination.page, pagination.pageSize],
+  );
+
+  const searchActive = filters.search.trim() !== "";
+  const displayGroups = pagedDay.groups;
+  const dayTotalCount = pagedDay.totalCount;
+  const dayVisibleCount = pagedDay.groups[0]?.items.length ?? 0;
+  const noSearchResults =
+    !advActive &&
+    isDayScopedSearchEmpty({
+      searchActive,
+      unassignedCount: 0,
+      dayItemCount: dayTotalCount,
+      unassignedQueueReady: true,
+    });
+  const isEmptyWeek = !advActive && scheduled.length === 0 && !searchActive;
+  const todayKey =
+    filters.weekMonday === currentWeekMonday() ? deriveDayFields(todayIso()).dayGroup : null;
+
+  return {
+    scheduled,
+    unscheduled,
+    displayGroups,
+    searchActive,
+    noSearchResults,
+    isEmptyWeek,
+    todayKey,
+    dayTotalCount,
+    dayVisibleCount,
+    pagination,
+    pagedDay,
+  };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-work-orders-table-local-state.ts b/src/app/(protected)/workorders/_hooks/use-work-orders-table-local-state.ts
new file mode 100644
index 00000000..9b3b853a
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-work-orders-table-local-state.ts
@@ -0,0 +1,195 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "react-toastify";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { applyBoardRowOrderOnScheduleChange } from "@/domain/work-orders/utils/apply-board-row-order-on-schedule-change";
+import { applyCarryOverDisplayDayFields } from "@/domain/work-orders/utils/carry-over-display";
+import { deriveDayFields } from "@/domain/work-orders/utils/table-day-utils";
+import { enrichTableRow } from "@/domain/work-orders/utils/table-filter-utils";
+import { isWorkOrderFullyLocked } from "@/domain/work-orders/utils/work-order-lock";
+import {
+  applyRowOrderByDay,
+  boardRowOrderStorageKey,
+  loadBoardRowOrder,
+  mergeDayOrder,
+  reorderIdsInList,
+  saveBoardRowOrder,
+  type BoardRowOrderByDay,
+} from "@/domain/work-orders/utils/board-row-order-storage";
+import {
+  useWorkOrdersTableUiState,
+  type DragVizState,
+} from "@/app/(protected)/workorders/_hooks/use-work-orders-table-ui-state";
+
+export type { DragVizState };
+
+export type UseWorkOrdersTableLocalStateParams = {
+  items: WorkOrderTableRow[];
+  weekMonday: string;
+  advActive: boolean;
+  isFetching: boolean;
+  ownerId?: string;
+};
+
+function usePrunePatchesOnFetchSettle(
+  isFetching: boolean,
+  setPatches: React.Dispatch<React.SetStateAction<Record<string, Partial<WorkOrderTableRow>>>>,
+) {
+  const wasFetchingRef = useRef(false);
+  useEffect(() => {
+    if (wasFetchingRef.current && !isFetching) {
+      setPatches({});
+    }
+    wasFetchingRef.current = isFetching;
+  }, [isFetching, setPatches]);
+}
+
+/** Owns board local overlays (patches/added rows), row ordering, draft, selection and drag/flash UI state. */
+export function useWorkOrdersTableLocalState({
+  items,
+  weekMonday,
+  advActive,
+  isFetching,
+  ownerId = "",
+}: UseWorkOrdersTableLocalStateParams) {
+  const [patches, setPatches] = useState<Record<string, Partial<WorkOrderTableRow>>>({});
+  const [localRows, setLocalRows] = useState<WorkOrderTableRow[]>([]);
+  const [rowOrderByDay, setRowOrderByDay] = useState<BoardRowOrderByDay>({});
+  const ui = useWorkOrdersTableUiState(weekMonday);
+
+  useEffect(() => {
+    setRowOrderByDay(loadBoardRowOrder(weekMonday, ownerId));
+  }, [ownerId, weekMonday]);
+
+  useEffect(() => {
+    const storageKey = boardRowOrderStorageKey(weekMonday, ownerId);
+    const onStorage = (event: StorageEvent) => {
+      if (event.key !== storageKey) return;
+      setRowOrderByDay(loadBoardRowOrder(weekMonday, ownerId));
+      toast.info("Board order was updated in another session. Refreshed.");
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, [ownerId, weekMonday]);
+
+  const apiRows = useMemo(
+    () => items.map((row) => enrichTableRow({ ...row, ...patches[String(row.id)] })),
+    [items, patches],
+  );
+
+  const displayRows = useMemo(() => {
+    const apiIds = new Set(apiRows.map((r) => String(r.id)));
+    const extra = localRows.filter((r) => !apiIds.has(String(r.id)));
+    const merged = [...apiRows, ...extra.map(enrichTableRow)].map((row) =>
+      applyCarryOverDisplayDayFields(row, weekMonday),
+    );
+    return applyRowOrderByDay(merged, rowOrderByDay);
+  }, [apiRows, localRows, rowOrderByDay, weekMonday]);
+
+  const clearRowPatch = useCallback((id: string | number) => {
+    const key = String(id);
+    setPatches((prev) => {
+      if (!(key in prev)) return prev;
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, []);
+
+  usePrunePatchesOnFetchSettle(isFetching, setPatches);
+
+  const patchRow = useCallback(
+    (id: string | number, patch: Partial<WorkOrderTableRow>) => {
+      const key = String(id);
+      const previousRow =
+        displayRows.find((row) => String(row.id) === key) ??
+        localRows.find((row) => String(row.id) === key);
+      const previousDayGroup = previousRow?.dayGroup;
+
+      setPatches((prev) => {
+        const merged = { ...prev[key], ...patch };
+        if (patch.scheduledOn !== undefined) {
+          const dayFields = deriveDayFields(patch.scheduledOn);
+          merged.dayGroup = dayFields.dayGroup;
+          merged.dayLabel = dayFields.dayLabel;
+        }
+        return { ...prev, [key]: merged };
+      });
+      setLocalRows((prev) =>
+        prev.map((row) => (String(row.id) === key ? enrichTableRow({ ...row, ...patch }) : row)),
+      );
+
+      if (patch.scheduledOn === undefined || advActive) return;
+
+      setRowOrderByDay((prev) =>
+        applyBoardRowOrderOnScheduleChange(prev, {
+          weekMonday,
+          ownerId,
+          id: key,
+          scheduledOn: patch.scheduledOn!,
+          previousDayGroup,
+        }),
+      );
+    },
+    [advActive, displayRows, localRows, ownerId, weekMonday],
+  );
+
+  const reorderRows = useCallback(
+    (dragId: string | number, overId: string | number) => {
+      const dragKey = String(dragId);
+      const overKey = String(overId);
+      const dragRow = displayRows.find((r) => String(r.id) === dragKey);
+      const overRow = displayRows.find((r) => String(r.id) === overKey);
+      if (!dragRow || !overRow || dragRow.dayGroup !== overRow.dayGroup) return;
+      if (isWorkOrderFullyLocked(dragRow.status) || isWorkOrderFullyLocked(overRow.status)) return;
+
+      const dayGroup = dragRow.dayGroup;
+      const dayIds = displayRows
+        .filter((row) => row.dayGroup === dayGroup)
+        .map((row) => String(row.id));
+      const reorderedVisible = reorderIdsInList(dayIds, dragKey, overKey);
+      if (!reorderedVisible) return;
+
+      setRowOrderByDay((prev) => {
+        const next = { ...prev, [dayGroup]: mergeDayOrder(prev[dayGroup], reorderedVisible) };
+        if (!advActive) saveBoardRowOrder(weekMonday, next, ownerId);
+        return next;
+      });
+    },
+    [advActive, displayRows, ownerId, weekMonday],
+  );
+
+  const { triggerFlash } = ui;
+  const addRow = useCallback(
+    (row: WorkOrderTableRow) => {
+      setLocalRows((prev) => [...prev, enrichTableRow(row)]);
+      triggerFlash(row.id);
+    },
+    [triggerFlash],
+  );
+
+  return {
+    displayRows,
+    localRows,
+    patchRow,
+    clearRowPatch,
+    reorderRows,
+    endDrag: ui.endDrag,
+    draftDayKey: ui.draftDayKey,
+    draft: ui.draft,
+    setDraft: ui.setDraft,
+    startDayDraft: ui.startDayDraft,
+    cancelDraft: ui.cancelDraft,
+    unassignedOpen: ui.unassignedOpen,
+    setUnassignedOpen: ui.setUnassignedOpen,
+    unschedOpen: ui.unschedOpen,
+    setUnschedOpen: ui.setUnschedOpen,
+    selectedId: ui.selectedId,
+    setSelectedId: ui.setSelectedId,
+    flashId: ui.flashId,
+    triggerFlash: ui.triggerFlash,
+    dragViz: ui.dragViz,
+    setDragViz: ui.setDragViz,
+    dragState: ui.dragState,
+    addRow,
+  };
+}
diff --git a/src/app/(protected)/workorders/_hooks/use-work-orders-table-ui-state.ts b/src/app/(protected)/workorders/_hooks/use-work-orders-table-ui-state.ts
new file mode 100644
index 00000000..196bfe69
--- /dev/null
+++ b/src/app/(protected)/workorders/_hooks/use-work-orders-table-ui-state.ts
@@ -0,0 +1,103 @@
+import { useCallback, useRef, useState } from "react";
+import {
+  EMPTY_TABLE_DRAFT,
+  UNASSIGNED_DAY_KEY,
+  UNSCHEDULED_DAY_KEY,
+  type WorkOrderTableDraft,
+} from "@/domain/work-orders/types/work-order-table-row";
+
+export type DragVizState = {
+  dragId: string | number | null;
+  overId: string | number | null;
+};
+
+function resolveDraftScheduledOn(key: string, weekMonday: string, scheduledIso?: string): string {
+  if (key === UNSCHEDULED_DAY_KEY || key === UNASSIGNED_DAY_KEY) {
+    return "";
+  }
+  if (scheduledIso && /^\d{4}-\d{2}-\d{2}$/.test(scheduledIso)) {
+    return scheduledIso;
+  }
+
+  const base = new Date(`${weekMonday}T12:00:00`);
+  for (let i = 0; i < 7; i += 1) {
+    const d = new Date(base);
+    d.setDate(base.getDate() + i);
+    const mm = String(d.getMonth() + 1).padStart(2, "0");
+    const dd = String(d.getDate()).padStart(2, "0");
+    if (`${mm}/${dd}` === key) {
+      return `${d.getFullYear()}-${mm}-${dd}`;
+    }
+  }
+  return "";
+}
+
+/** Draft, selection, pinned-section accordions, drag viz and flash scroll helpers. */
+export function useWorkOrdersTableUiState(weekMonday: string) {
+  const [draftDayKey, setDraftDayKey] = useState<string | null>(null);
+  const [draft, setDraft] = useState<WorkOrderTableDraft>(EMPTY_TABLE_DRAFT);
+  const [unassignedOpen, setUnassignedOpen] = useState(true);
+  const [unschedOpen, setUnschedOpen] = useState(true);
+  const [selectedId, setSelectedId] = useState<string | number | null>(null);
+  const [flashId, setFlashId] = useState<string | number | null>(null);
+  const [dragViz, setDragViz] = useState<DragVizState>({ dragId: null, overId: null });
+  const dragState = useRef<DragVizState>({ dragId: null, overId: null });
+
+  const endDrag = useCallback(() => {
+    dragState.current = { dragId: null, overId: null };
+    setDragViz({ dragId: null, overId: null });
+  }, []);
+
+  const startDayDraft = useCallback(
+    (key: string, scheduledIso?: string) => {
+      setDraftDayKey(key);
+      // Unscheduled "+ Add WO" starts with no schedule (SH-109); day groups prefill the day.
+      if (key === UNSCHEDULED_DAY_KEY || key === UNASSIGNED_DAY_KEY) {
+        setDraft({ ...EMPTY_TABLE_DRAFT });
+        return;
+      }
+      const scheduledOn = resolveDraftScheduledOn(key, weekMonday, scheduledIso);
+      setDraft({
+        ...EMPTY_TABLE_DRAFT,
+        scheduledOn,
+        status: scheduledOn ? "Scheduled" : "Incomplete",
+      });
+    },
+    [weekMonday],
+  );
+
+  const cancelDraft = useCallback(() => {
+    setDraftDayKey(null);
+    setDraft(EMPTY_TABLE_DRAFT);
+  }, []);
+
+  const triggerFlash = useCallback((id: string | number) => {
+    setFlashId(id);
+    setTimeout(() => {
+      document
+        .getElementById(`wo-row-${id}`)
+        ?.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 80);
+    setTimeout(() => setFlashId(null), 2500);
+  }, []);
+
+  return {
+    draftDayKey,
+    draft,
+    setDraft,
+    startDayDraft,
+    cancelDraft,
+    unassignedOpen,
+    setUnassignedOpen,
+    unschedOpen,
+    setUnschedOpen,
+    selectedId,
+    setSelectedId,
+    flashId,
+    triggerFlash,
+    dragViz,
+    setDragViz,
+    dragState,
+    endDrag,
+  };
+}
diff --git a/src/app/(protected)/workorders/edit/[id].tsx b/src/app/(protected)/workorders/edit/[id].tsx
new file mode 100644
index 00000000..56354fc4
--- /dev/null
+++ b/src/app/(protected)/workorders/edit/[id].tsx
@@ -0,0 +1 @@
+export { default } from "../_components/work-order-form";
diff --git a/src/app/(protected)/workorders/index.tsx b/src/app/(protected)/workorders/index.tsx
new file mode 100644
index 00000000..23fe3074
--- /dev/null
+++ b/src/app/(protected)/workorders/index.tsx
@@ -0,0 +1,123 @@
+import { Box, Link as MuiLink } from "@mui/material";
+import { Link as RouterLink } from "react-router";
+import { PageHeader } from "@/components/ui/page-header";
+import { QueryErrorPanel } from "@/components/ui/query-error-panel";
+import { WorkOrdersAdvancedFiltersBanner } from "@/app/(protected)/workorders/_components/list/work-orders-advanced-filters-banner";
+import { DispatcherFilter } from "@/app/(protected)/workorders/_components/list/filter-bar/dispatcher-filter";
+import { WorkOrdersFilterBar } from "@/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar";
+import { WorkOrdersListHeader } from "@/app/(protected)/workorders/_components/list/work-orders-list-header";
+import { WorkOrdersListPagePanels } from "@/app/(protected)/workorders/_components/list/work-orders-list-page-panels";
+import { WoTable } from "@/app/(protected)/workorders/_components/list/table/wo-table";
+import { useWorkOrdersListPage } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-page";
+import { useDashboardDrilldownFilters } from "@/app/(protected)/workorders/_hooks/use-dashboard-drilldown-filters";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { hasCompletionDocService } from "@/domain/work-orders/utils/completion-doc-service-gate";
+import { useAuthContext } from "@/providers/auth-context";
+
+function openCompletionDoc(
+  row: WorkOrderTableRow,
+  setDocRow: (row: WorkOrderTableRow | null) => void,
+) {
+  if (!hasCompletionDocService(row.pm)) return;
+  setDocRow(row);
+}
+
+export default function WorkOrdersListPage() {
+  const { user } = useAuthContext();
+  const page = useWorkOrdersListPage();
+  const { filters, tableData } = page;
+  const fromDashboard = useDashboardDrilldownFilters(filters.applyAdvancedFilters);
+
+  return (
+    <Box className="flex h-full flex-col overflow-hidden p-2.5">
+      <PageHeader
+        surface
+        title="Work Orders"
+        belowTitle={
+          <DispatcherFilter
+            selectedIds={filters.dispatcherIds}
+            onChange={filters.setDispatcherIds}
+            users={page.users}
+            usersLoading={page.usersLoading}
+            currentUserId={user?.id}
+            disabled={filters.advApplied != null}
+          />
+        }
+        actions={
+          <WorkOrdersListHeader
+            search={filters.search}
+            weekLabel={filters.weekLabel}
+            onSearchChange={filters.handleSearchChange}
+            onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
+            onNewWorkOrder={() => page.setWizardOpen(true)}
+            activeFilterCount={filters.activeFilterCount}
+            advancedFiltersActive={filters.advApplied != null}
+            isFetching={tableData.isFetching && !tableData.isLoading}
+          />
+        }
+      />
+
+      {fromDashboard && (
+        <MuiLink component={RouterLink} to="/" underline="hover" className="mb-2 self-start">
+          Back to Dashboard
+        </MuiLink>
+      )}
+
+      <WorkOrdersFilterBar
+        weekMonday={filters.weekMonday}
+        onWeekChange={filters.setWeekMonday}
+        selectedDayIso={filters.selectedDayIso}
+        onSelectedDayChange={filters.setSelectedDayIso}
+        types={filters.types}
+        onTypesChange={filters.setTypes}
+        filteredCount={tableData.totalCount}
+        scopeTotalCount={tableData.scopeTotalCount}
+        disabled={filters.advApplied != null}
+      />
+
+      {filters.advApplied != null && (
+        <WorkOrdersAdvancedFiltersBanner
+          applied={filters.advApplied}
+          totalCount={tableData.scopeTotalCount}
+          sites={page.locations}
+          users={page.users}
+          onClearChip={filters.clearAdvancedFilterChip}
+          onClearAll={filters.clearAdvancedFilters}
+        />
+      )}
+
+      {Boolean(tableData.error) && (
+        <QueryErrorPanel
+          className="mb-2 shrink-0"
+          compact
+          message={
+            tableData.error instanceof Error
+              ? tableData.error.message
+              : "Failed to load work orders."
+          }
+          onRetry={() => void tableData.refetch()}
+        />
+      )}
+
+      <WoTable
+        tableData={tableData}
+        users={page.users}
+        sites={page.locations}
+        vendors={page.vendors}
+        pmTypes={page.pmTypes}
+        weekMonday={filters.weekMonday}
+        onNavigateToDay={filters.navigateToDay}
+        onOpenSlideOver={page.handleOpenSlideOver}
+        onRequestComplete={page.setConfirmComplete}
+        onOpenCompDoc={(row) => openCompletionDoc(row, page.setDocRow)}
+        onOpenMedia={page.setMediaRow}
+        onOpenUplifts={page.setUpliftsRow}
+        onClearSearch={() => filters.handleSearchChange("")}
+        onOpenAdvancedFilters={() => filters.setAdvOpen(true)}
+        onPatch={page.patchField}
+      />
+
+      <WorkOrdersListPagePanels page={page} />
+    </Box>
+  );
+}
diff --git a/src/app/(protected)/workorders/new.tsx b/src/app/(protected)/workorders/new.tsx
new file mode 100644
index 00000000..15308687
--- /dev/null
+++ b/src/app/(protected)/workorders/new.tsx
@@ -0,0 +1 @@
+export { default } from "./_components/work-order-form";
diff --git a/src/app/404.tsx b/src/app/404.tsx
new file mode 100644
index 00000000..1270315a
--- /dev/null
+++ b/src/app/404.tsx
@@ -0,0 +1,21 @@
+import { Link } from "react-router";
+import { Box, Button, Typography } from "@mui/material";
+
+export default function NotFoundPage() {
+  return (
+    <Box
+      className="flex min-h-screen flex-col items-center justify-center gap-4 bg-(--color-bg-page) px-4"
+      role="main"
+    >
+      <Typography variant="h4" component="h1" className="font-display text-foreground">
+        Page not found
+      </Typography>
+      <Typography variant="body1" className="text-muted-foreground">
+        The page you are looking for does not exist or has been moved.
+      </Typography>
+      <Button component={Link} to="/" variant="contained">
+        Go to dashboard
+      </Button>
+    </Box>
+  );
+}
diff --git a/src/app/_app.tsx b/src/app/_app.tsx
new file mode 100644
index 00000000..d7bac7a0
--- /dev/null
+++ b/src/app/_app.tsx
@@ -0,0 +1,2 @@
+/** Generouted reserved filename — root shell for all routes. */
+export { default } from "./_components/root-layout";
diff --git a/src/app/_components/root-layout.tsx b/src/app/_components/root-layout.tsx
new file mode 100644
index 00000000..eab85368
--- /dev/null
+++ b/src/app/_components/root-layout.tsx
@@ -0,0 +1,11 @@
+import { Outlet } from "react-router";
+
+import { AuthProvider } from "@/providers/auth-provider";
+
+export default function RootLayout() {
+  return (
+    <AuthProvider>
+      <Outlet />
+    </AuthProvider>
+  );
+}
diff --git a/src/app/slices/authSlice.js b/src/app/slices/authSlice.js
deleted file mode 100644
index 357c87d2..00000000
--- a/src/app/slices/authSlice.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-import { STORAGE_KEY_TOKEN } from '../../constants';
-
-// Helper functions
-const getUserFromStorage = () => {
-  try {
-    const result = window.localStorage.getItem(STORAGE_KEY_TOKEN);
-    return result ? JSON.parse(result) : null;
-  } catch (error) {
-    console.error('Error reading user from storage:', error);
-    return null;
-  }
-};
-
-const isTokenValid = (token) => {
-  if (!token) return false;
-  try {
-    const payload = JSON.parse(atob(token.split('.')[1]));
-    return new Date(payload.exp * 1000) > new Date();
-  } catch (e) {
-    return false;
-  }
-};
-
-const initialState = {
-  user: getUserFromStorage(),
-  isAuthenticated: (() => {
-    const user = getUserFromStorage();
-    return user?.token ? isTokenValid(user.token) : false;
-  })(),
-  loading: false,
-  error: null,
-};
-
-const authSlice = createSlice({
-  name: 'auth',
-  initialState,
-  reducers: {
-    setUser: (state, action) => {
-      state.user = action.payload;
-      state.isAuthenticated = action.payload?.token ? isTokenValid(action.payload.token) : false;
-      state.error = null;
-
-      // Persist to localStorage
-      if (action.payload?.token) {
-        window.localStorage.setItem(STORAGE_KEY_TOKEN, JSON.stringify(action.payload));
-      } else {
-        window.localStorage.removeItem(STORAGE_KEY_TOKEN);
-      }
-    },
-    logout: (state) => {
-      state.user = null;
-      state.isAuthenticated = false;
-      state.error = null;
-      window.localStorage.removeItem(STORAGE_KEY_TOKEN);
-    },
-    setLoading: (state, action) => {
-      state.loading = action.payload;
-    },
-    setError: (state, action) => {
-      state.error = action.payload;
-      state.loading = false;
-    },
-    clearError: (state) => {
-      state.error = null;
-    },
-  },
-});
-
-export const { setUser, logout, setLoading, setError, clearError } = authSlice.actions;
-
-// Selectors
-export const selectUser = (state) => state.auth.user;
-export const selectIsAuthenticated = (state) => state.auth.isAuthenticated;
-export const selectAuthLoading = (state) => state.auth.loading;
-export const selectAuthError = (state) => state.auth.error;
-export const selectToken = (state) => state.auth.user?.token;
-
-export default authSlice.reducer;
diff --git a/src/app/slices/uiSlice.js b/src/app/slices/uiSlice.js
deleted file mode 100644
index 990208e9..00000000
--- a/src/app/slices/uiSlice.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-import { THEME_LIGHT } from '../../constants';
-
-const initialState = {
-  sidebarOpen: true,
-  theme: THEME_LIGHT,
-  notifications: [],
-};
-
-const uiSlice = createSlice({
-  name: 'ui',
-  initialState,
-  reducers: {
-    toggleSidebar: (state) => {
-      state.sidebarOpen = !state.sidebarOpen;
-    },
-    setSidebarOpen: (state, action) => {
-      state.sidebarOpen = action.payload;
-    },
-    setTheme: (state, action) => {
-      state.theme = action.payload;
-    },
-    addNotification: (state, action) => {
-      state.notifications.push({
-        id: Date.now(),
-        ...action.payload,
-      });
-    },
-    removeNotification: (state, action) => {
-      state.notifications = state.notifications.filter(
-        (notification) => notification.id !== action.payload
-      );
-    },
-    clearNotifications: (state) => {
-      state.notifications = [];
-    },
-  },
-});
-
-export const {
-  toggleSidebar,
-  setSidebarOpen,
-  setTheme,
-  addNotification,
-  removeNotification,
-  clearNotifications,
-} = uiSlice.actions;
-
-// Selectors
-export const selectSidebarOpen = (state) => state.ui.sidebarOpen;
-export const selectTheme = (state) => state.ui.theme;
-export const selectNotifications = (state) => state.ui.notifications;
-
-export default uiSlice.reducer;
diff --git a/src/app/store.js b/src/app/store.js
deleted file mode 100644
index 0845ea6d..00000000
--- a/src/app/store.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit';
-import authReducer from './slices/authSlice';
-import uiReducer from './slices/uiSlice';
-
-export const store = configureStore({
-  reducer: {
-    auth: authReducer,
-    ui: uiReducer,
-  },
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware({
-      serializableCheck: {
-        // Ignore these action types
-        ignoredActions: ['auth/setUser'],
-      },
-    }),
-});
-
-export default store;
diff --git a/src/pages/vendor-portal/VendorPortalLayout.js b/src/app/v/[token]/_layout.tsx
similarity index 58%
rename from src/pages/vendor-portal/VendorPortalLayout.js
rename to src/app/v/[token]/_layout.tsx
index ec849c40..cd3bb545 100644
--- a/src/pages/vendor-portal/VendorPortalLayout.js
+++ b/src/app/v/[token]/_layout.tsx
@@ -1,24 +1,27 @@
-import React from "react";
-import { NavLink, Outlet, useLocation, useParams } from "react-router-dom";
-import { VendorPortalProvider, useVendorPortal } from "./VendorPortalContext";
-import "./vendor-portal.css";
+import { NavLink, Outlet, useLocation, useParams } from "react-router";
+import { useVendorPortal } from "@/app/v/_components/vendor-portal-context";
+import { VendorPortalProvider } from "@/app/v/_components/vendor-portal-provider";
+import { Text } from "@/components/ui/text";
+import "@/app/v/_components/vendor-portal.css";
 
-function Header() {
+function VendorPortalHeader() {
   const { vendor, status } = useVendorPortal();
+
   return (
     <div className="vp-header">
       <div className="vp-brand">Sea Haven Industries — Vendor Portal</div>
-      {status === "ready" && vendor?.companyName && (
+      {status === "ready" && vendor != null && Boolean(vendor.companyName) && (
         <div className="vp-vendor-name">{vendor.companyName}</div>
       )}
     </div>
   );
 }
 
-function Nav() {
+function VendorPortalNav() {
   const { token } = useParams();
   const { pathname } = useLocation();
   const onDetail = /\/dispatch\//.test(pathname);
+
   return (
     <nav className="vp-nav">
       <div className="vp-nav-inner">
@@ -39,26 +42,34 @@ function Nav() {
   );
 }
 
-function Body() {
+function VendorPortalBody() {
   const { status, error } = useVendorPortal();
 
   if (status === "loading") {
-    return <div className="vp-container"><div className="vp-card vp-muted">Loading…</div></div>;
+    return (
+      <div className="vp-container">
+        <div className="vp-card vp-muted">Loading…</div>
+      </div>
+    );
   }
+
   if (status === "error") {
     return (
       <div className="vp-container">
-        <div className="vp-error">
-          <h2>Access Denied</h2>
-          <p>{error?.message || "This link is invalid or has expired. Please contact your dispatcher for a new link."}</p>
-        </div>
+        <Text as="section" variant="body" className="vp-error">
+          <Text variant="title">Access Denied</Text>
+          <Text variant="error">
+            {error?.message ||
+              "This link is invalid or has expired. Please contact your dispatcher for a new link."}
+          </Text>
+        </Text>
       </div>
     );
   }
 
   return (
     <>
-      <Nav />
+      <VendorPortalNav />
       <div className="vp-container">
         <Outlet />
       </div>
@@ -70,8 +81,8 @@ export default function VendorPortalLayout() {
   return (
     <VendorPortalProvider>
       <div className="vp-shell">
-        <Header />
-        <Body />
+        <VendorPortalHeader />
+        <VendorPortalBody />
       </div>
     </VendorPortalProvider>
   );
diff --git a/src/app/v/[token]/dashboard.tsx b/src/app/v/[token]/dashboard.tsx
new file mode 100644
index 00000000..65b87bff
--- /dev/null
+++ b/src/app/v/[token]/dashboard.tsx
@@ -0,0 +1,100 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import { useQuery } from "@tanstack/react-query";
+import { useVendorPortal } from "@/app/v/_components/vendor-portal-context";
+import { Text } from "@/components/ui/text";
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+import {
+  formatVendorPortalDateTime,
+  vendorPortalStatusClass,
+} from "@/domain/vendor-portal/lib/status-helpers";
+import {
+  VENDOR_PORTAL_DISPATCH_FILTERS,
+  applyVendorPortalDispatchFilter,
+  getVendorPortalDispatchFilter,
+  type VendorPortalDispatchFilterKey,
+} from "@/domain/vendor-portal/lib/dispatch-filters";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export default function VendorPortalDashboardPage() {
+  const { token } = useVendorPortal();
+  const navigate = useNavigate();
+  const [filter, setFilter] = useState<VendorPortalDispatchFilterKey>("open");
+
+  const {
+    data: dispatches = [],
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: queryKeys.vendorPortal.dispatches(token),
+    queryFn: () => vendorPortalApi.listDispatches(token),
+    enabled: Boolean(token),
+  });
+
+  const activeFilter = getVendorPortalDispatchFilter(filter);
+  const filtered = useMemo(
+    () => applyVendorPortalDispatchFilter(dispatches, activeFilter),
+    [dispatches, activeFilter],
+  );
+
+  return (
+    <>
+      <div className="vp-card">
+        <Text variant="title">Your Work</Text>
+        <div className="vp-muted" style={{ marginBottom: 12 }}>
+          Active dispatches and work orders assigned to your company.
+        </div>
+        <div className="vp-actions" style={{ marginTop: 0 }}>
+          {VENDOR_PORTAL_DISPATCH_FILTERS.map((item) => (
+            <button
+              key={item.key}
+              type="button"
+              className={`vp-btn ${filter === item.key ? "vp-btn-primary" : "vp-btn-ghost"}`}
+              onClick={() => setFilter(item.key)}
+            >
+              {item.label}{" "}
+              <span style={{ opacity: 0.7, fontWeight: 400 }}>
+                ({dispatches.filter(item.match).length})
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {isLoading && <div className="vp-card vp-muted">Loading dispatches…</div>}
+      <Text variant="error" when={Boolean(error)} className="vp-error">
+        {error?.message}
+      </Text>
+
+      {!isLoading && !error && filtered.length === 0 && (
+        <div className="vp-card vp-empty">No dispatches in this view.</div>
+      )}
+
+      <div className="vp-dispatch-list">
+        {filtered.map((dispatch) => (
+          <div
+            key={dispatch.id}
+            className="vp-dispatch-card"
+            onClick={() => navigate(`../dispatch/${dispatch.id}`)}
+          >
+            <div>
+              <div className="vp-dispatch-title">
+                {dispatch.dispatchNumber} — {dispatch.workOrderTitle || "(untitled)"}
+              </div>
+              <div className="vp-dispatch-meta">
+                WO#{dispatch.internalWONumber}
+                {dispatch.locationName ? ` · ${dispatch.locationName}` : ""}
+                {dispatch.locationCity ? `, ${dispatch.locationCity}` : ""}
+                {dispatch.locationState ? `, ${dispatch.locationState}` : ""}
+                {dispatch.scheduledDate
+                  ? ` · Scheduled ${formatVendorPortalDateTime(dispatch.scheduledDate)}`
+                  : ""}
+              </div>
+            </div>
+            <span className={vendorPortalStatusClass(dispatch.status)}>{dispatch.status}</span>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/src/app/v/[token]/dispatch/[id].tsx b/src/app/v/[token]/dispatch/[id].tsx
new file mode 100644
index 00000000..e8337f13
--- /dev/null
+++ b/src/app/v/[token]/dispatch/[id].tsx
@@ -0,0 +1,129 @@
+import { useCallback, useState } from "react";
+import { useParams } from "react-router";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Text } from "@/components/ui/text";
+import { DispatchDetailSections } from "@/app/v/[token]/dispatch/_components/dispatch-detail-sections";
+import { DispatchSummaryCard } from "@/app/v/[token]/dispatch/_components/dispatch-summary-card";
+import { RefuseDispatchDialog } from "@/app/v/[token]/dispatch/_components/refuse-dispatch-dialog";
+import { useVendorPortal } from "@/app/v/_components/vendor-portal-context";
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+import { isVendorPortalLockedStatus } from "@/domain/vendor-portal/lib/status-helpers";
+import type { VendorPortalDispatchDetail } from "@/domain/vendor-portal/types/vendor-portal";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export default function VendorPortalDispatchPage() {
+  const { token } = useVendorPortal();
+  const { id = "" } = useParams();
+  const dispatchId = Number(id);
+  const queryClient = useQueryClient();
+  const [busy, setBusy] = useState(false);
+  const [actionError, setActionError] = useState("");
+  const [refuseOpen, setRefuseOpen] = useState(false);
+
+  const { data, isLoading, error, refetch } = useQuery({
+    queryKey: queryKeys.vendorPortal.dispatch(token, dispatchId),
+    queryFn: () => vendorPortalApi.getDispatch(token, dispatchId),
+    enabled: Boolean(token && dispatchId),
+  });
+
+  const refresh = useCallback(async () => {
+    await refetch();
+    await queryClient.invalidateQueries({ queryKey: queryKeys.vendorPortal.dispatches(token) });
+  }, [refetch, queryClient, token]);
+
+  const pollEvidenceDocument = useCallback(
+    (documentId: number) => vendorPortalApi.getDocumentStatus(token, dispatchId, documentId),
+    [token, dispatchId],
+  );
+
+  const runAction = async (action: () => Promise<void>, confirmMsg?: string) => {
+    if (confirmMsg && !window.confirm(confirmMsg)) return;
+    setActionError("");
+    setBusy(true);
+    try {
+      await action();
+      await refresh();
+    } catch {
+      setActionError("Unable to update this dispatch. Please try again.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const updateLocal = (
+    updater: (current: VendorPortalDispatchDetail) => VendorPortalDispatchDetail,
+  ) => {
+    queryClient.setQueryData(
+      queryKeys.vendorPortal.dispatch(token, dispatchId),
+      (current: unknown) => {
+        if (!current) return current;
+        return updater(current as VendorPortalDispatchDetail);
+      },
+    );
+  };
+
+  const requestCancel = () => {
+    const reason = window.prompt("Reason for cancel request?");
+    if (reason == null) return;
+    void runAction(() => vendorPortalApi.requestCancel(token, dispatchId, reason));
+  };
+
+  if (isLoading && !data) {
+    return (
+      <Text variant="feedback" className="vp-card vp-muted">
+        Loading dispatch…
+      </Text>
+    );
+  }
+
+  if (error && !data) {
+    return <Text variant="error">Unable to load this dispatch. Please try again.</Text>;
+  }
+
+  if (!data) return null;
+
+  const locked = isVendorPortalLockedStatus(data.status);
+
+  return (
+    <>
+      <DispatchSummaryCard
+        token={token}
+        data={data}
+        locked={locked}
+        busy={busy}
+        onAccept={() => void runAction(() => vendorPortalApi.accept(token, dispatchId))}
+        onRefuse={() => setRefuseOpen(true)}
+        onStart={() =>
+          void runAction(() => vendorPortalApi.changeStatus(token, dispatchId, "In Progress"))
+        }
+        onComplete={() =>
+          void runAction(
+            () => vendorPortalApi.changeStatus(token, dispatchId, "Completed"),
+            "Mark this dispatch as completed?",
+          )
+        }
+        onRequestCancel={requestCancel}
+      />
+      <Text variant="error" when={Boolean(actionError)}>
+        {actionError}
+      </Text>
+
+      <DispatchDetailSections
+        token={token}
+        dispatchId={dispatchId}
+        data={data}
+        locked={locked}
+        refresh={refresh}
+        pollEvidenceDocument={pollEvidenceDocument}
+        updateLocal={updateLocal}
+      />
+
+      <RefuseDispatchDialog
+        open={refuseOpen}
+        dispatchId={dispatchId}
+        onClose={() => setRefuseOpen(false)}
+        onRefused={() => setActionError("")}
+      />
+    </>
+  );
+}
diff --git a/src/app/v/[token]/dispatch/_components/checklist-section.tsx b/src/app/v/[token]/dispatch/_components/checklist-section.tsx
new file mode 100644
index 00000000..01ac7520
--- /dev/null
+++ b/src/app/v/[token]/dispatch/_components/checklist-section.tsx
@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { Text } from "@/components/ui/text";
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+import { formatVendorPortalDateTime } from "@/domain/vendor-portal/lib/status-helpers";
+import type { VendorPortalChecklistItem } from "@/domain/vendor-portal/types/vendor-portal";
+
+type ChecklistSectionProps = {
+  token: string;
+  dispatchId: number;
+  items: VendorPortalChecklistItem[];
+  locked: boolean;
+  onItemUpdated: (item: VendorPortalChecklistItem) => void;
+};
+
+export function ChecklistSection({
+  token,
+  dispatchId,
+  items,
+  locked,
+  onItemUpdated,
+}: ChecklistSectionProps) {
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const toggle = async (item: VendorPortalChecklistItem) => {
+    if (locked) return;
+    setErrorMessage("");
+    try {
+      const updated = await vendorPortalApi.updateChecklistItem(
+        token,
+        dispatchId,
+        item.id,
+        !item.isCompleted,
+      );
+      onItemUpdated(updated);
+    } catch {
+      setErrorMessage("Unable to update the checklist. Please try again.");
+    }
+  };
+
+  if (!items.length) {
+    return <Text tone="muted">No checklist items for this dispatch.</Text>;
+  }
+
+  return (
+    <div>
+      <Text variant="error" when={Boolean(errorMessage)}>
+        {errorMessage}
+      </Text>
+      {items.map((item) => (
+        <div key={item.id} className={`vp-checklist-item ${item.isCompleted ? "done" : ""}`}>
+          <input
+            type="checkbox"
+            id={`cl-${item.id}`}
+            checked={item.isCompleted}
+            onChange={() => void toggle(item)}
+            disabled={locked}
+          />
+          <label htmlFor={`cl-${item.id}`} style={{ flex: 1 }}>
+            {item.itemText}
+          </label>
+          {item.isCompleted && Boolean(item.completedAt) && (
+            <span className="vp-muted" style={{ fontSize: 12 }}>
+              {formatVendorPortalDateTime(item.completedAt)}
+            </span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/v/[token]/dispatch/_components/comments-section.tsx b/src/app/v/[token]/dispatch/_components/comments-section.tsx
new file mode 100644
index 00000000..1b2abf4c
--- /dev/null
+++ b/src/app/v/[token]/dispatch/_components/comments-section.tsx
@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { Text } from "@/components/ui/text";
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+import { formatVendorPortalDateTime } from "@/domain/vendor-portal/lib/status-helpers";
+import type { VendorPortalComment } from "@/domain/vendor-portal/types/vendor-portal";
+
+type CommentsSectionProps = {
+  token: string;
+  dispatchId: number;
+  comments: VendorPortalComment[];
+  onAdded: (comment: VendorPortalComment) => void;
+};
+
+export function CommentsSection({ token, dispatchId, comments, onAdded }: CommentsSectionProps) {
+  const [text, setText] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!text.trim()) return;
+    setErrorMessage("");
+    setSubmitting(true);
+    try {
+      const added = await vendorPortalApi.addComment(token, dispatchId, text.trim());
+      onAdded(added);
+      setText("");
+    } catch {
+      setErrorMessage("Unable to post your comment. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <>
+      {comments.length === 0 && <Text tone="muted">No comments yet.</Text>}
+      {comments.map((comment) => (
+        <div key={comment.id} className={`vp-comment ${comment.commentType || ""}`}>
+          <div className="vp-comment-meta">
+            {comment.commenter || "Unknown"} · {formatVendorPortalDateTime(comment.createdDate)}
+          </div>
+          <div>{comment.commenttext}</div>
+        </div>
+      ))}
+      <Text variant="error" when={Boolean(errorMessage)}>
+        {errorMessage}
+      </Text>
+      <form onSubmit={(event) => void submit(event)} style={{ marginTop: 12 }}>
+        <textarea
+          className="vp-textarea"
+          placeholder="Add a comment for the dispatcher…"
+          value={text}
+          onChange={(event) => {
+            setText(event.target.value);
+            setErrorMessage("");
+          }}
+        />
+        <div className="vp-actions">
+          <button
+            type="submit"
+            className="vp-btn vp-btn-primary"
+            disabled={submitting || !text.trim()}
+          >
+            {submitting ? "Posting…" : "Post Comment"}
+          </button>
+        </div>
+      </form>
+    </>
+  );
+}
diff --git a/src/app/v/[token]/dispatch/_components/dispatch-detail-sections.tsx b/src/app/v/[token]/dispatch/_components/dispatch-detail-sections.tsx
new file mode 100644
index 00000000..1cac5391
--- /dev/null
+++ b/src/app/v/[token]/dispatch/_components/dispatch-detail-sections.tsx
@@ -0,0 +1,119 @@
+import { Text } from "@/components/ui/text";
+import { ChecklistSection } from "@/app/v/[token]/dispatch/_components/checklist-section";
+import { CommentsSection } from "@/app/v/[token]/dispatch/_components/comments-section";
+import { SignoffSection } from "@/app/v/[token]/dispatch/_components/signoff-section";
+import { UpliftRequestsSection } from "@/app/v/[token]/dispatch/_components/uplift-requests-section";
+import { VendorPortalDocuments } from "@/app/v/_components/vendor-portal-documents";
+import type {
+  VendorPortalDispatchDetail,
+  VendorPortalDocumentStatus,
+} from "@/domain/vendor-portal/types/vendor-portal";
+
+type DispatchDetailSectionsProps = {
+  token: string;
+  dispatchId: number;
+  data: VendorPortalDispatchDetail;
+  locked: boolean;
+  refresh: () => Promise<void>;
+  pollEvidenceDocument: (documentId: number) => Promise<VendorPortalDocumentStatus | undefined>;
+  updateLocal: (
+    updater: (current: VendorPortalDispatchDetail) => VendorPortalDispatchDetail,
+  ) => void;
+};
+
+export function DispatchDetailSections({
+  token,
+  dispatchId,
+  data,
+  locked,
+  refresh,
+  pollEvidenceDocument,
+  updateLocal,
+}: DispatchDetailSectionsProps) {
+  return (
+    <>
+      <div className="vp-card">
+        <Text variant="heading">Checklist</Text>
+        <ChecklistSection
+          token={token}
+          dispatchId={dispatchId}
+          items={data.checklist ?? []}
+          locked={locked}
+          onItemUpdated={(updated) =>
+            updateLocal((current) => ({
+              ...current,
+              checklist: (current.checklist ?? []).map((item) =>
+                item.id === updated.id ? { ...item, ...updated } : item,
+              ),
+            }))
+          }
+        />
+      </div>
+
+      <div className="vp-card">
+        <Text variant="heading">Completion documents</Text>
+        <VendorPortalDocuments
+          token={token}
+          dispatchId={dispatchId}
+          documents={data.documents ?? []}
+          locked={locked}
+          onChanged={refresh}
+        />
+      </div>
+
+      <div className="vp-card">
+        <Text variant="heading">NTE Uplift Requests</Text>
+        <UpliftRequestsSection
+          token={token}
+          dispatchId={dispatchId}
+          currentNte={data.nteAmount}
+          upliftRequests={data.upliftRequests ?? []}
+          locked={locked}
+          onChanged={refresh}
+          pollDocument={pollEvidenceDocument}
+        />
+      </div>
+
+      <div className="vp-card">
+        <Text variant="heading">Customer Signoff</Text>
+        <SignoffSection
+          token={token}
+          dispatchId={dispatchId}
+          existing={data.signoffs ?? []}
+          signoffType="customer"
+          nameLabel="Customer name"
+          submissionLocked={locked}
+          onAdded={() => void refresh()}
+        />
+      </div>
+
+      <div className="vp-card">
+        <Text variant="heading">Vendor Signoff</Text>
+        <SignoffSection
+          token={token}
+          dispatchId={dispatchId}
+          existing={data.signoffs ?? []}
+          signoffType="vendor"
+          nameLabel="Your name"
+          submissionLocked={locked}
+          onAdded={() => void refresh()}
+        />
+      </div>
+
+      <div className="vp-card">
+        <Text variant="heading">Comments</Text>
+        <CommentsSection
+          token={token}
+          dispatchId={dispatchId}
+          comments={data.comments ?? []}
+          onAdded={(comment) =>
+            updateLocal((current) => ({
+              ...current,
+              comments: [...(current.comments ?? []), comment],
+            }))
+          }
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/app/v/[token]/dispatch/_components/dispatch-snapshot-details.tsx b/src/app/v/[token]/dispatch/_components/dispatch-snapshot-details.tsx
new file mode 100644
index 00000000..4f71d6d8
--- /dev/null
+++ b/src/app/v/[token]/dispatch/_components/dispatch-snapshot-details.tsx
@@ -0,0 +1,166 @@
+import { Text } from "@/components/ui/text";
+import { formatVendorPortalDateTime } from "@/domain/vendor-portal/lib/status-helpers";
+import type { VendorPortalDispatchDetail } from "@/domain/vendor-portal/types/vendor-portal";
+
+type DispatchSnapshotDetailsProps = {
+  data: VendorPortalDispatchDetail;
+  locked: boolean;
+};
+
+function resolveCanonicalService(workOrder: VendorPortalDispatchDetail["workOrder"]): string {
+  if (workOrder?.service) {
+    return workOrder.service;
+  }
+
+  return [workOrder?.trade, workOrder?.subTrade].filter(Boolean).join(" · ");
+}
+
+function DispatchCommercialDetails({ data }: Pick<DispatchSnapshotDetailsProps, "data">) {
+  const service = resolveCanonicalService(data.workOrder);
+
+  return (
+    <div style={{ marginTop: 12 }}>
+      {data.workOrder != null && Boolean(data.workOrder.internalWONumber) && (
+        <div className="vp-row">
+          <strong>WO #</strong>
+          <span>{data.workOrder.internalWONumber}</span>
+        </div>
+      )}
+      {Boolean(service) && (
+        <div className="vp-row">
+          <strong>Service</strong>
+          <span>{service}</span>
+        </div>
+      )}
+      {Boolean(data.poNumber) && (
+        <div className="vp-row">
+          <strong>PO #</strong>
+          <span>{data.poNumber}</span>
+        </div>
+      )}
+      {data.nteAmount != null && (
+        <div className="vp-row">
+          <strong>NTE</strong>
+          <span>${Number(data.nteAmount).toFixed(2)}</span>
+        </div>
+      )}
+      <div className="vp-row">
+        <strong>Invoice</strong>
+        <span>
+          {data.invoiceStatus || "Not Submitted"}
+          {data.invoiceNumber ? ` · ${data.invoiceNumber}` : ""}
+        </span>
+      </div>
+      <div className="vp-row">
+        <strong>Payment</strong>
+        <span>{data.paymentStatus || "Unavailable"}</span>
+      </div>
+      {Boolean(data.scheduledDate) && (
+        <div className="vp-row">
+          <strong>Scheduled</strong>
+          <span>{formatVendorPortalDateTime(data.scheduledDate)}</span>
+        </div>
+      )}
+      {Boolean(data.statusUpdatedAt) && (
+        <div className="vp-row">
+          <strong>Status updated</strong>
+          <span>{formatVendorPortalDateTime(data.statusUpdatedAt)}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DispatchLocationDetails({ data }: Pick<DispatchSnapshotDetailsProps, "data">) {
+  if (data.location == null) {
+    return null;
+  }
+
+  const address = [
+    data.location.address,
+    data.location.city,
+    data.location.state,
+    data.location.zipCode,
+  ]
+    .filter(Boolean)
+    .join(", ");
+
+  return (
+    <>
+      <Text variant="heading" sx={{ marginTop: 2 }}>
+        Location
+      </Text>
+      {Boolean(data.workOrder?.siteCode) && (
+        <div className="vp-row">
+          <strong>Site code</strong>
+          <span>{data.workOrder?.siteCode}</span>
+        </div>
+      )}
+      <div>{data.location.name}</div>
+      <div className="vp-muted">{address}</div>
+    </>
+  );
+}
+
+function DispatcherContactDetails({ data }: Pick<DispatchSnapshotDetailsProps, "data">) {
+  const contact = data.dispatcherContact;
+  if (!contact || (!contact.name && !contact.email && !contact.phone)) {
+    return null;
+  }
+
+  return (
+    <>
+      <Text variant="heading" sx={{ marginTop: 2 }}>
+        Dispatcher
+      </Text>
+      {Boolean(contact.name) && (
+        <div className="vp-row">
+          <strong>Name</strong>
+          <span>{contact.name}</span>
+        </div>
+      )}
+      {Boolean(contact.email) && (
+        <div className="vp-row">
+          <strong>Email</strong>
+          <span>
+            <a href={`mailto:${contact.email}`}>{contact.email}</a>
+          </span>
+        </div>
+      )}
+      {Boolean(contact.phone) && (
+        <div className="vp-row">
+          <strong>Phone</strong>
+          <span>
+            <a href={`tel:${contact.phone}`}>{contact.phone}</a>
+          </span>
+        </div>
+      )}
+    </>
+  );
+}
+
+export function DispatchSnapshotDetails({ data, locked }: DispatchSnapshotDetailsProps) {
+  const description = data.description || data.workOrder?.description;
+
+  return (
+    <>
+      <DispatchCommercialDetails data={data} />
+      <DispatchLocationDetails data={data} />
+      <DispatcherContactDetails data={data} />
+      {locked && (
+        <Text variant="feedback" className="vp-muted" sx={{ marginTop: 2 }}>
+          This dispatch is {data.status.toLowerCase()} and locked to further changes. Comments
+          remain open.
+        </Text>
+      )}
+      {Boolean(description) && (
+        <>
+          <Text variant="heading" sx={{ marginTop: 2 }}>
+            Description
+          </Text>
+          <div>{description}</div>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/src/app/v/[token]/dispatch/_components/dispatch-status-actions.tsx b/src/app/v/[token]/dispatch/_components/dispatch-status-actions.tsx
new file mode 100644
index 00000000..07d93c92
--- /dev/null
+++ b/src/app/v/[token]/dispatch/_components/dispatch-status-actions.tsx
@@ -0,0 +1,66 @@
+type DispatchStatusActionsProps = {
+  status: string;
+  locked: boolean;
+  busy: boolean;
+  onAccept: () => void;
+  onRefuse: () => void;
+  onStart: () => void;
+  onComplete: () => void;
+  onRequestCancel: () => void;
+};
+
+export function DispatchStatusActions({
+  status,
+  locked,
+  busy,
+  onAccept,
+  onRefuse,
+  onStart,
+  onComplete,
+  onRequestCancel,
+}: DispatchStatusActionsProps) {
+  return (
+    <div className="vp-actions">
+      {status === "Sent" && (
+        <>
+          <button
+            type="button"
+            className="vp-btn vp-btn-success"
+            disabled={busy}
+            onClick={onAccept}
+          >
+            Accept Dispatch
+          </button>
+          <button type="button" className="vp-btn vp-btn-warn" disabled={busy} onClick={onRefuse}>
+            Refuse Dispatch
+          </button>
+        </>
+      )}
+      {status === "Acknowledged" && (
+        <button type="button" className="vp-btn vp-btn-primary" disabled={busy} onClick={onStart}>
+          Start Work
+        </button>
+      )}
+      {status === "In Progress" && (
+        <button
+          type="button"
+          className="vp-btn vp-btn-primary"
+          disabled={busy}
+          onClick={onComplete}
+        >
+          Mark Completed
+        </button>
+      )}
+      {!locked && status !== "Sent" && (
+        <button
+          type="button"
+          className="vp-btn vp-btn-warn"
+          disabled={busy}
+          onClick={onRequestCancel}
+        >
+          Request Cancel
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/v/[token]/dispatch/_components/dispatch-summary-card.tsx b/src/app/v/[token]/dispatch/_components/dispatch-summary-card.tsx
new file mode 100644
index 00000000..471a3a97
--- /dev/null
+++ b/src/app/v/[token]/dispatch/_components/dispatch-summary-card.tsx
@@ -0,0 +1,61 @@
+import { Link } from "react-router";
+import { Text } from "@/components/ui/text";
+import { vendorPortalStatusClass } from "@/domain/vendor-portal/lib/status-helpers";
+import type { VendorPortalDispatchDetail } from "@/domain/vendor-portal/types/vendor-portal";
+import { DispatchSnapshotDetails } from "@/app/v/[token]/dispatch/_components/dispatch-snapshot-details";
+import { DispatchStatusActions } from "@/app/v/[token]/dispatch/_components/dispatch-status-actions";
+
+type DispatchSummaryCardProps = {
+  token: string;
+  data: VendorPortalDispatchDetail;
+  locked: boolean;
+  busy: boolean;
+  onAccept: () => void;
+  onRefuse: () => void;
+  onStart: () => void;
+  onComplete: () => void;
+  onRequestCancel: () => void;
+};
+
+export function DispatchSummaryCard({
+  token,
+  data,
+  locked,
+  busy,
+  onAccept,
+  onRefuse,
+  onStart,
+  onComplete,
+  onRequestCancel,
+}: DispatchSummaryCardProps) {
+  return (
+    <>
+      <Link to={`/v/${token}/dashboard`} className="vp-back-link">
+        ← Back to dispatches
+      </Link>
+
+      <div className="vp-card">
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+          <div>
+            <Text variant="title">{data.dispatchNumber}</Text>
+            <div className="vp-muted">{data.workOrder?.workerOrderTitle}</div>
+          </div>
+          <span className={vendorPortalStatusClass(data.status)}>{data.status}</span>
+        </div>
+
+        <DispatchSnapshotDetails data={data} locked={locked} />
+
+        <DispatchStatusActions
+          status={data.status}
+          locked={locked}
+          busy={busy}
+          onAccept={onAccept}
+          onRefuse={onRefuse}
+          onStart={onStart}
+          onComplete={onComplete}
+          onRequestCancel={onRequestCancel}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/src/app/v/[token]/dispatch/_components/refuse-dispatch-dialog.tsx b/src/app/v/[token]/dispatch/_components/refuse-dispatch-dialog.tsx
new file mode 100644
index 00000000..89e053f3
--- /dev/null
+++ b/src/app/v/[token]/dispatch/_components/refuse-dispatch-dialog.tsx
@@ -0,0 +1,141 @@
+import { useEffect } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import { useVendorPortal } from "@/app/v/_components/vendor-portal-context";
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+import {
+  REFUSE_REASON_MAX_LENGTH,
+  refuseDispatchSchema,
+  type RefuseDispatchValues,
+} from "@/domain/vendor-portal/schemas/refuse-dispatch-schema";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { guardDialogClose } from "@/lib/dialog-guard";
+
+type RefuseDispatchDialogProps = {
+  open: boolean;
+  dispatchId: number;
+  onClose: () => void;
+  onRefused: () => void;
+};
+
+export function RefuseDispatchDialog({
+  open,
+  dispatchId,
+  onClose,
+  onRefused,
+}: RefuseDispatchDialogProps) {
+  const { token } = useVendorPortal();
+  const queryClient = useQueryClient();
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors },
+  } = useForm<RefuseDispatchValues>({
+    resolver: zodResolver(refuseDispatchSchema),
+    mode: "onChange",
+    defaultValues: { reason: "" },
+  });
+
+  const reasonValue = useWatch({ control, name: "reason" }) ?? "";
+  const isOverLimit = reasonValue.length > REFUSE_REASON_MAX_LENGTH;
+
+  const refuseMutation = useMutation({
+    mutationFn: (values: RefuseDispatchValues) => {
+      const trimmed = values.reason.trim();
+      return vendorPortalApi.refuse(token, dispatchId, trimmed || undefined);
+    },
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.vendorPortal.dispatch(token, dispatchId),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.vendorPortal.dispatches(token),
+        }),
+      ]);
+      onRefused();
+      onClose();
+    },
+  });
+
+  const { reset: resetMutation } = refuseMutation;
+
+  useEffect(() => {
+    if (!open) {
+      reset({ reason: "" });
+      resetMutation();
+    }
+  }, [open, reset, resetMutation]);
+
+  const submit = handleSubmit((values) => refuseMutation.mutate(values));
+  const errorMessage = refuseMutation.error
+    ? "Unable to refuse this dispatch. Please try again."
+    : "";
+
+  return (
+    <Dialog
+      open={open}
+      onClose={guardDialogClose(refuseMutation.isPending, onClose)}
+      aria-labelledby="refuse-dispatch-title"
+    >
+      <DialogTitle id="refuse-dispatch-title">Refuse dispatch</DialogTitle>
+      <form onSubmit={(event) => void submit(event)}>
+        <DialogContent>
+          <Text variant="body" className="vp-muted" sx={{ marginBottom: 2 }}>
+            Refusing ends your assignment for this dispatch. A reason is optional but helps your
+            dispatcher reassign the work.
+          </Text>
+          <label htmlFor="refuse-reason" className="vp-muted" style={{ fontSize: 13 }}>
+            Reason (optional)
+          </label>
+          <textarea
+            id="refuse-reason"
+            className="vp-textarea"
+            placeholder="Tell the dispatcher why you are refusing…"
+            aria-invalid={Boolean(errors.reason)}
+            aria-describedby={errors.reason ? "refuse-reason-error" : "refuse-reason-counter"}
+            maxLength={REFUSE_REASON_MAX_LENGTH}
+            {...register("reason")}
+            style={{ marginTop: 6 }}
+          />
+          <div
+            id="refuse-reason-counter"
+            className="vp-muted"
+            style={{ fontSize: 12, textAlign: "right" }}
+          >
+            {reasonValue.length}/{REFUSE_REASON_MAX_LENGTH}
+          </div>
+          <Text variant="error" when={isOverLimit} id="refuse-reason-error">
+            {errors.reason?.message ?? "Reason must be 500 characters or fewer."}
+          </Text>
+          <Text variant="error" when={Boolean(errorMessage)}>
+            {errorMessage}
+          </Text>
+        </DialogContent>
+        <DialogActions>
+          <button
+            type="button"
+            className="vp-btn vp-btn-ghost"
+            onClick={onClose}
+            disabled={refuseMutation.isPending}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="vp-btn vp-btn-warn"
+            disabled={refuseMutation.isPending || isOverLimit}
+          >
+            {refuseMutation.isPending ? "Refusing…" : "Refuse dispatch"}
+          </button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  );
+}
diff --git a/src/app/v/[token]/dispatch/_components/signoff-section.tsx b/src/app/v/[token]/dispatch/_components/signoff-section.tsx
new file mode 100644
index 00000000..298e1737
--- /dev/null
+++ b/src/app/v/[token]/dispatch/_components/signoff-section.tsx
@@ -0,0 +1,141 @@
+import { useState } from "react";
+import { Text } from "@/components/ui/text";
+import { SignaturePad } from "@/app/v/_components/signature-pad";
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+import { formatVendorPortalDateTime } from "@/domain/vendor-portal/lib/status-helpers";
+import type { VendorPortalSignoff } from "@/domain/vendor-portal/types/vendor-portal";
+
+type SignoffSectionProps = {
+  token: string;
+  dispatchId: number;
+  existing: VendorPortalSignoff[];
+  signoffType: string;
+  nameLabel: string;
+  submissionLocked?: boolean;
+  onAdded: () => void;
+};
+
+export function SignoffSection({
+  token,
+  dispatchId,
+  existing,
+  signoffType,
+  nameLabel,
+  submissionLocked = false,
+  onAdded,
+}: SignoffSectionProps) {
+  const [name, setName] = useState("");
+  const [method, setMethod] = useState<"drawn" | "typed">("drawn");
+  const [typedSig, setTypedSig] = useState("");
+  const [drawnSig, setDrawnSig] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const existingSignoff = existing.find((signoff) => signoff.signoffType === signoffType);
+
+  if (existingSignoff) {
+    return (
+      <div>
+        <div className="vp-row">
+          <strong>Signed by</strong>
+          <span>{existingSignoff.name}</span>
+        </div>
+        <div className="vp-row">
+          <strong>Method</strong>
+          <span>{existingSignoff.signatureMethod}</span>
+        </div>
+        <div className="vp-row">
+          <strong>Signed at</strong>
+          <span>{formatVendorPortalDateTime(existingSignoff.signedAt)}</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (submissionLocked) {
+    return <Text variant="feedback">Signoff is unavailable for this dispatch.</Text>;
+  }
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    const signature = method === "drawn" ? drawnSig : typedSig;
+    if (!name.trim() || !signature) {
+      setErrorMessage("Name and signature are required.");
+      return;
+    }
+    setErrorMessage("");
+    setSubmitting(true);
+    try {
+      await vendorPortalApi.addSignoff(token, dispatchId, {
+        name: name.trim(),
+        signature,
+        signatureMethod: method,
+        signoffType,
+      });
+      onAdded();
+    } catch {
+      setErrorMessage("Unable to submit the signoff. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={(event) => void submit(event)}>
+      <div className="vp-row">
+        <strong>{nameLabel}</strong>
+        <input
+          className="vp-input"
+          value={name}
+          onChange={(event) => {
+            setName(event.target.value);
+            setErrorMessage("");
+          }}
+        />
+      </div>
+      <div className="vp-row">
+        <strong>Method</strong>
+        <div>
+          <label style={{ marginRight: 12 }}>
+            <input type="radio" checked={method === "drawn"} onChange={() => setMethod("drawn")} />{" "}
+            Drawn
+          </label>
+          <label>
+            <input type="radio" checked={method === "typed"} onChange={() => setMethod("typed")} />{" "}
+            Typed
+          </label>
+        </div>
+      </div>
+      {method === "drawn" ? (
+        <div style={{ marginTop: 8 }}>
+          <SignaturePad
+            onChange={(signature) => {
+              setDrawnSig(signature);
+              setErrorMessage("");
+            }}
+          />
+        </div>
+      ) : (
+        <div className="vp-row">
+          <strong>Signature</strong>
+          <input
+            className="vp-input"
+            value={typedSig}
+            onChange={(event) => {
+              setTypedSig(event.target.value);
+              setErrorMessage("");
+            }}
+          />
+        </div>
+      )}
+      <Text variant="error" when={Boolean(errorMessage)}>
+        {errorMessage}
+      </Text>
+      <div className="vp-actions">
+        <button type="submit" className="vp-btn vp-btn-success" disabled={submitting}>
+          {submitting ? "Signing…" : "Submit Signoff"}
+        </button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/app/v/[token]/dispatch/_components/uplift-request-card.tsx b/src/app/v/[token]/dispatch/_components/uplift-request-card.tsx
new file mode 100644
index 00000000..c9f4845e
--- /dev/null
+++ b/src/app/v/[token]/dispatch/_components/uplift-request-card.tsx
@@ -0,0 +1,136 @@
+import { useState } from "react";
+import { Text } from "@/components/ui/text";
+import { UpliftRequestForm } from "@/app/v/[token]/dispatch/_components/uplift-request-form";
+import type { UpliftFormValues } from "@/domain/vendor-portal/lib/uplift-validation";
+import type { VendorPortalUpliftRequest } from "@/domain/vendor-portal/types/vendor-portal";
+import { formatDateTime } from "@/lib/time-utils";
+
+type UpliftRequestCardProps = {
+  request: VendorPortalUpliftRequest;
+  locked: boolean;
+  canAct: boolean;
+  uploadingPercent: number | undefined;
+  submitting: boolean;
+  errorMessage: string;
+  onWithdraw: (request: VendorPortalUpliftRequest) => void;
+  onRevise: (request: VendorPortalUpliftRequest, values: UpliftFormValues) => void;
+  onCancelRevise: () => void;
+};
+
+const WITHDRAWABLE_STATUSES = new Set(["Pending", "ChangesRequested"]);
+
+function statusClassName(status: string): string {
+  return `vp-uplift-status-${String(status).toLowerCase()}`;
+}
+
+export function UpliftRequestCard({
+  request,
+  locked,
+  canAct,
+  uploadingPercent,
+  submitting,
+  errorMessage,
+  onWithdraw,
+  onRevise,
+  onCancelRevise,
+}: UpliftRequestCardProps) {
+  const [revising, setRevising] = useState(false);
+  const canWithdraw = !locked && canAct && WITHDRAWABLE_STATUSES.has(request.status);
+  const canRevise = !locked && canAct && request.status === "ChangesRequested";
+
+  return (
+    <div className="vp-uplift-row">
+      <div className="vp-row">
+        <strong>Requested</strong>
+        <span>
+          ${Number(request.requestedNTE).toFixed(2)} (was $
+          {Number(request.currentNTE ?? 0).toFixed(2)})
+        </span>
+      </div>
+      <div className="vp-row">
+        <strong>Status</strong>
+        <span>
+          <span className={statusClassName(request.status)}>{request.status}</span>
+        </span>
+      </div>
+      {Boolean(request.expiresAt) && (
+        <div className="vp-row">
+          <strong>Expires</strong>
+          <span>{formatDateTime(request.expiresAt as string)}</span>
+        </div>
+      )}
+      {Boolean(request.vendorReason) && (
+        <div className="vp-row">
+          <strong>Reason</strong>
+          <span>{request.vendorReason}</span>
+        </div>
+      )}
+      {Boolean(request.evidenceFileName) && (
+        <div className="vp-row">
+          <strong>Evidence</strong>
+          <span>
+            {request.evidenceFileName}
+            {request.evidenceContentType ? ` · ${request.evidenceContentType}` : ""}
+          </span>
+        </div>
+      )}
+      {Boolean(request.decisionNote) && (
+        <div className="vp-row">
+          <strong>Decision</strong>
+          <span>
+            {request.decisionNote}
+            {request.decidedByName ? ` — ${request.decidedByName}` : ""}
+          </span>
+        </div>
+      )}
+      {request.notificationStatus === "Error" && Boolean(request.notificationError) && (
+        <div className="vp-row">
+          <strong>Notification</strong>
+          <span className="vp-error-inline">{request.notificationError}</span>
+        </div>
+      )}
+      <Text variant="error" when={Boolean(errorMessage)}>
+        {errorMessage}
+      </Text>
+
+      {revising && canRevise ? (
+        <UpliftRequestForm
+          mode="revise"
+          currentNte={request.currentNTE}
+          initialRequested={String(request.requestedNTE)}
+          initialReason={request.vendorReason ?? ""}
+          hasExistingEvidence={request.evidenceDocumentId != null}
+          submitting={submitting}
+          uploadingPercent={uploadingPercent}
+          errorMessage=""
+          onSubmit={(values) => onRevise(request, values)}
+          onCancel={() => {
+            setRevising(false);
+            onCancelRevise();
+          }}
+        />
+      ) : (
+        <div className="vp-actions">
+          {canWithdraw && (
+            <button
+              type="button"
+              className="vp-btn vp-btn-ghost"
+              onClick={() => onWithdraw(request)}
+            >
+              Withdraw request
+            </button>
+          )}
+          {canRevise && (
+            <button
+              type="button"
+              className="vp-btn vp-btn-primary"
+              onClick={() => setRevising(true)}
+            >
+              Revise
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/v/[token]/dispatch/_components/uplift-request-form.tsx b/src/app/v/[token]/dispatch/_components/uplift-request-form.tsx
new file mode 100644
index 00000000..22ddbffe
--- /dev/null
+++ b/src/app/v/[token]/dispatch/_components/uplift-request-form.tsx
@@ -0,0 +1,148 @@
+import { useState } from "react";
+import { Text } from "@/components/ui/text";
+import { validateVendorDocument } from "@/domain/vendor-portal/lib/document-validation";
+import {
+  isApprovalRequired,
+  validateUpliftAmount,
+  type UpliftFormValues,
+} from "@/domain/vendor-portal/lib/uplift-validation";
+
+type UpliftRequestFormProps = {
+  mode: "create" | "revise";
+  currentNte?: number;
+  initialRequested?: string;
+  initialReason?: string;
+  hasExistingEvidence?: boolean;
+  submitting: boolean;
+  uploadingPercent: number | undefined;
+  errorMessage: string;
+  onSubmit: (values: UpliftFormValues) => void;
+  onCancel?: () => void;
+};
+
+export function UpliftRequestForm({
+  mode,
+  currentNte,
+  initialRequested = "",
+  initialReason = "",
+  hasExistingEvidence = false,
+  submitting,
+  uploadingPercent,
+  errorMessage,
+  onSubmit,
+  onCancel,
+}: UpliftRequestFormProps) {
+  const [requested, setRequested] = useState(initialRequested);
+  const [reason, setReason] = useState(initialReason);
+  const [evidenceFile, setEvidenceFile] = useState<File | undefined>();
+  const [formError, setFormError] = useState("");
+
+  const showApprovalFields = mode === "revise" || isApprovalRequired(requested, currentNte);
+
+  const submit = (event: React.FormEvent) => {
+    event.preventDefault();
+    const amount = Number.parseFloat(requested);
+    const validationError = validateUpliftAmount(requested, currentNte, reason, {
+      file: evidenceFile,
+      hasExisting: hasExistingEvidence,
+      mode,
+    });
+    setFormError(validationError);
+    if (validationError) {
+      return;
+    }
+    onSubmit({ amount, reason: reason.trim(), evidenceFile });
+  };
+
+  const chooseFile = (file?: File) => {
+    const validationMessage = file ? validateVendorDocument(file) : undefined;
+    setFormError(validationMessage ?? "");
+    setEvidenceFile(file);
+  };
+
+  const shownError = errorMessage || formError;
+  const busy = submitting || uploadingPercent !== undefined;
+
+  return (
+    <form
+      onSubmit={(event) => void submit(event)}
+      className="vp-uplift-form"
+      aria-label={mode === "revise" ? "Revise uplift request" : "Request NTE uplift"}
+    >
+      {mode === "create" && (
+        <div className="vp-row">
+          <strong>Current NTE</strong>
+          <span>${Number(currentNte ?? 0).toFixed(2)}</span>
+        </div>
+      )}
+      <div className="vp-row">
+        <strong>
+          <label htmlFor={`uplift-amount-${mode}`}>New total NTE</label>
+        </strong>
+        <input
+          id={`uplift-amount-${mode}`}
+          type="number"
+          step="0.01"
+          min="0"
+          className="vp-input"
+          value={requested}
+          onChange={(event) => {
+            setRequested(event.target.value);
+            setFormError("");
+          }}
+          placeholder="0.00"
+        />
+      </div>
+      {showApprovalFields && (
+        <>
+          <div className="vp-row">
+            <strong>
+              <label htmlFor={`uplift-reason-${mode}`}>Reason</label>
+            </strong>
+            <textarea
+              id={`uplift-reason-${mode}`}
+              className="vp-textarea"
+              value={reason}
+              onChange={(event) => {
+                setReason(event.target.value);
+                setFormError("");
+              }}
+              placeholder="Why is the uplift needed?"
+            />
+          </div>
+          <div className="vp-row">
+            <strong>
+              <label htmlFor={`uplift-evidence-${mode}`}>Evidence (PDF/JPG/PNG)</label>
+            </strong>
+            <input
+              id={`uplift-evidence-${mode}`}
+              type="file"
+              className="vp-input"
+              accept=".pdf,.jpg,.jpeg,.png,application/pdf,image/jpeg,image/png"
+              onChange={(event) => chooseFile(event.target.files?.[0])}
+            />
+          </div>
+        </>
+      )}
+      {uploadingPercent !== undefined && (
+        <div className="vp-row" role="status" aria-live="polite">
+          <strong>Uploading</strong>
+          <span>{uploadingPercent}%</span>
+        </div>
+      )}
+      <Text variant="error" when={Boolean(shownError)}>
+        {shownError}
+      </Text>
+      <div className="vp-actions">
+        <button type="submit" className="vp-btn vp-btn-primary" disabled={busy}>
+          {busy ? "Submitting…" : mode === "revise" ? "Submit revision" : "Request uplift"}
+        </button>
+        {mode === "revise" && (
+          <button type="button" className="vp-btn vp-btn-ghost" onClick={onCancel} disabled={busy}>
+            Cancel
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}
diff --git a/src/app/v/[token]/dispatch/_components/uplift-requests-section.tsx b/src/app/v/[token]/dispatch/_components/uplift-requests-section.tsx
new file mode 100644
index 00000000..9fa98227
--- /dev/null
+++ b/src/app/v/[token]/dispatch/_components/uplift-requests-section.tsx
@@ -0,0 +1,223 @@
+import { useCallback, useState } from "react";
+import { VendorPortalFeedback } from "@/app/v/_components/vendor-portal-feedback";
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+import { createUpliftRequestKey } from "@/domain/vendor-portal/lib/request-key";
+import type {
+  VendorPortalDocumentStatus,
+  VendorPortalUpliftRequest,
+} from "@/domain/vendor-portal/types/vendor-portal";
+import { UpliftRequestForm } from "@/app/v/[token]/dispatch/_components/uplift-request-form";
+import type { UpliftFormValues } from "@/domain/vendor-portal/lib/uplift-validation";
+import { UpliftRequestCard } from "@/app/v/[token]/dispatch/_components/uplift-request-card";
+import {
+  useVendorUpliftEvidence,
+  type EvidenceScanState,
+} from "@/app/v/[token]/dispatch/_components/use-uplift-evidence";
+
+const ACTIVE_STATUSES = new Set(["Pending", "ChangesRequested"]);
+
+type UpliftRequestsSectionProps = {
+  token: string;
+  dispatchId: number;
+  currentNte?: number;
+  upliftRequests: VendorPortalUpliftRequest[];
+  locked: boolean;
+  onChanged: () => Promise<void>;
+  pollDocument: (documentId: number) => Promise<VendorPortalDocumentStatus | undefined>;
+};
+
+type UseVendorUpliftActionsArgs = {
+  token: string;
+  dispatchId: number;
+  currentNte?: number;
+  onChanged: () => Promise<void>;
+  evidence: ReturnType<typeof useVendorUpliftEvidence>;
+};
+
+function scanErrorMessage(scan: EvidenceScanState): string {
+  if (scan === "Rejected") {
+    return "The evidence file was rejected by the security scan.";
+  }
+  return "Security scan timed out. Please try again once the file finishes scanning.";
+}
+
+function useVendorUpliftActions({
+  token,
+  dispatchId,
+  currentNte,
+  onChanged,
+  evidence,
+}: UseVendorUpliftActionsArgs) {
+  const [submitting, setSubmitting] = useState(false);
+  const [formError, setFormError] = useState("");
+  const [infoMessage, setInfoMessage] = useState("");
+  const [requestError, setRequestError] = useState("");
+  const [errorRequestId, setErrorRequestId] = useState<string | number | null>(null);
+
+  const uploadAndScan = useCallback(
+    async (file: File): Promise<{ documentId: number; scan: EvidenceScanState }> => {
+      const document = await evidence.uploadEvidence({ token, dispatchId, file });
+      const scan = await evidence.waitForScan(document.id);
+      evidence.setScanState(scan);
+      return { documentId: document.id, scan };
+    },
+    [evidence, token, dispatchId],
+  );
+
+  const handleCreate = async (values: UpliftFormValues) => {
+    setFormError("");
+    setInfoMessage("");
+    setSubmitting(true);
+    try {
+      const requiresApproval = currentNte == null || values.amount > (currentNte ?? 0);
+      let evidenceDocumentId: number | undefined;
+      if (requiresApproval) {
+        if (!values.evidenceFile) {
+          setFormError(
+            "Attach PDF, JPG, or PNG evidence — approval-required requests need evidence.",
+          );
+          return;
+        }
+        const result = await uploadAndScan(values.evidenceFile);
+        if (result.scan !== "Passed") {
+          setFormError(scanErrorMessage(result.scan));
+          return;
+        }
+        evidenceDocumentId = result.documentId;
+      }
+      const outcome = await vendorPortalApi.requestUplift(token, dispatchId, {
+        requestedNTE: values.amount,
+        reason: values.reason,
+        requestKey: createUpliftRequestKey(),
+        evidenceDocumentId,
+      });
+      evidence.reset();
+      await onChanged();
+      if (outcome.outcome === "NoApprovalRequired") {
+        setInfoMessage("No approval required — the existing NTE already covers this amount.");
+      }
+    } catch {
+      setFormError("Unable to request the NTE uplift. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleWithdraw = async (request: VendorPortalUpliftRequest) => {
+    if (!window.confirm("Withdraw this uplift request?")) return;
+    setErrorRequestId(request.id);
+    setRequestError("");
+    setSubmitting(true);
+    try {
+      await vendorPortalApi.withdrawUplift(token, dispatchId, request.id);
+      await onChanged();
+    } catch {
+      setRequestError("Unable to withdraw the uplift request. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleRevise = async (request: VendorPortalUpliftRequest, values: UpliftFormValues) => {
+    setErrorRequestId(request.id);
+    setRequestError("");
+    setSubmitting(true);
+    try {
+      const requiresApproval =
+        request.currentNTE == null || values.amount > (request.currentNTE ?? 0);
+      let evidenceDocumentId = request.evidenceDocumentId;
+      if (requiresApproval && values.evidenceFile) {
+        const result = await uploadAndScan(values.evidenceFile);
+        if (result.scan !== "Passed") {
+          setRequestError(scanErrorMessage(result.scan));
+          return;
+        }
+        evidenceDocumentId = result.documentId;
+      }
+      await vendorPortalApi.reviseUplift(token, dispatchId, request.id, {
+        requestedNTE: values.amount,
+        reason: values.reason,
+        evidenceDocumentId,
+      });
+      evidence.reset();
+      await onChanged();
+    } catch {
+      setRequestError("Unable to revise the uplift request. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return {
+    submitting,
+    formError,
+    infoMessage,
+    requestError,
+    errorRequestId,
+    handleCreate,
+    handleWithdraw,
+    handleRevise,
+  };
+}
+
+export function UpliftRequestsSection({
+  token,
+  dispatchId,
+  currentNte,
+  upliftRequests,
+  locked,
+  onChanged,
+  pollDocument,
+}: UpliftRequestsSectionProps) {
+  const evidence = useVendorUpliftEvidence({ pollDocument });
+  const {
+    submitting,
+    formError,
+    infoMessage,
+    requestError,
+    errorRequestId,
+    handleCreate,
+    handleWithdraw,
+    handleRevise,
+  } = useVendorUpliftActions({ token, dispatchId, currentNte, onChanged, evidence });
+
+  const activeRequest = upliftRequests.find((request) => ACTIVE_STATUSES.has(request.status));
+  const canShowForm = !locked && !activeRequest;
+
+  return (
+    <>
+      {upliftRequests.length === 0 && !activeRequest && (
+        <VendorPortalFeedback>
+          No uplift requests yet. Use the form below if the work will exceed the current NTE.
+        </VendorPortalFeedback>
+      )}
+      {Boolean(infoMessage) && <VendorPortalFeedback>{infoMessage}</VendorPortalFeedback>}
+
+      {upliftRequests.map((request) => (
+        <UpliftRequestCard
+          key={request.id}
+          request={request}
+          locked={locked}
+          canAct={!locked}
+          uploadingPercent={evidence.uploadingPercent}
+          submitting={submitting}
+          errorMessage={errorRequestId === request.id ? requestError : ""}
+          onWithdraw={(r) => void handleWithdraw(r)}
+          onRevise={(r, values) => void handleRevise(r, values)}
+          onCancelRevise={evidence.reset}
+        />
+      ))}
+
+      {canShowForm && (
+        <UpliftRequestForm
+          mode="create"
+          currentNte={currentNte}
+          submitting={submitting}
+          uploadingPercent={evidence.uploadingPercent}
+          errorMessage={formError}
+          onSubmit={(values) => void handleCreate(values)}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/app/v/[token]/dispatch/_components/use-uplift-evidence.ts b/src/app/v/[token]/dispatch/_components/use-uplift-evidence.ts
new file mode 100644
index 00000000..8ef01931
--- /dev/null
+++ b/src/app/v/[token]/dispatch/_components/use-uplift-evidence.ts
@@ -0,0 +1,72 @@
+import { useCallback, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import {
+  VENDOR_EVIDENCE_PURPOSE,
+  vendorPortalApi,
+} from "@/domain/vendor-portal/api/vendor-portal-api";
+import type { VendorPortalDocumentStatus } from "@/domain/vendor-portal/types/vendor-portal";
+
+const POLL_INTERVAL_MS = 1000;
+const MAX_POLL_ATTEMPTS = 30;
+
+export type EvidenceScanState = "Passed" | "Rejected" | "Timeout";
+
+export type UploadEvidenceArgs = {
+  token: string;
+  dispatchId: number;
+  file: File;
+};
+
+type UseVendorUpliftEvidenceOptions = {
+  pollDocument: (documentId: number) => Promise<VendorPortalDocumentStatus | undefined>;
+};
+
+export function useVendorUpliftEvidence({ pollDocument }: UseVendorUpliftEvidenceOptions) {
+  const [uploadingPercent, setUploadingPercent] = useState<number | undefined>();
+  const [scanState, setScanState] = useState<EvidenceScanState | undefined>();
+
+  const uploadMutation = useMutation({
+    mutationFn: ({ token, dispatchId, file }: UploadEvidenceArgs) =>
+      vendorPortalApi.uploadDocument({
+        token,
+        dispatchId,
+        file,
+        purpose: VENDOR_EVIDENCE_PURPOSE,
+        onProgress: setUploadingPercent,
+      }),
+  });
+
+  const waitForScan = useCallback(
+    async (documentId: number): Promise<EvidenceScanState> => {
+      for (let attempt = 0; attempt < MAX_POLL_ATTEMPTS; attempt += 1) {
+        const document = await pollDocument(documentId);
+        if (document?.scanStatus === "Passed") {
+          return "Passed";
+        }
+        if (document?.scanStatus === "Rejected") {
+          return "Rejected";
+        }
+        await new Promise((resolve) => setTimeout(resolve, POLL_INTERVAL_MS));
+      }
+      return "Timeout";
+    },
+    [pollDocument],
+  );
+
+  const reset = useCallback(() => {
+    setUploadingPercent(undefined);
+    setScanState(undefined);
+    uploadMutation.reset();
+  }, [uploadMutation]);
+
+  return {
+    uploadEvidence: uploadMutation.mutateAsync,
+    uploadError: uploadMutation.error ? "Unable to upload the evidence file." : undefined,
+    uploadingPercent,
+    scanState,
+    setScanState,
+    waitForScan,
+    isUploading: uploadMutation.isPending,
+    reset,
+  };
+}
diff --git a/src/app/v/[token]/index.tsx b/src/app/v/[token]/index.tsx
new file mode 100644
index 00000000..e8f1354b
--- /dev/null
+++ b/src/app/v/[token]/index.tsx
@@ -0,0 +1,5 @@
+import { Navigate } from "react-router";
+
+export default function VendorPortalIndex() {
+  return <Navigate to="dashboard" replace />;
+}
diff --git a/src/app/v/[token]/pos.tsx b/src/app/v/[token]/pos.tsx
new file mode 100644
index 00000000..7e4e8cd2
--- /dev/null
+++ b/src/app/v/[token]/pos.tsx
@@ -0,0 +1,154 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import { useQuery } from "@tanstack/react-query";
+import { useVendorPortal } from "@/app/v/_components/vendor-portal-context";
+import { Text } from "@/components/ui/text";
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+import {
+  formatVendorPortalDateTime,
+  vendorPortalStatusClass,
+} from "@/domain/vendor-portal/lib/status-helpers";
+import {
+  VENDOR_PORTAL_DISPATCH_FILTERS,
+  applyVendorPortalDispatchFilter,
+  getVendorPortalDispatchFilter,
+  type VendorPortalDispatchFilterKey,
+} from "@/domain/vendor-portal/lib/dispatch-filters";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+function formatDate(value?: string) {
+  if (!value) return "—";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "—";
+  return date.toISOString().slice(0, 10);
+}
+
+function formatMoney(value?: number) {
+  if (value == null) return "—";
+  return `$${Number(value).toFixed(2)}`;
+}
+
+export default function VendorPortalPosPage() {
+  const { token } = useVendorPortal();
+  const navigate = useNavigate();
+  const [filter, setFilter] = useState<VendorPortalDispatchFilterKey>("open");
+  const [search, setSearch] = useState("");
+
+  const {
+    data: dispatches = [],
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: queryKeys.vendorPortal.dispatches(token),
+    queryFn: () => vendorPortalApi.listDispatches(token),
+    enabled: Boolean(token),
+  });
+
+  const activeFilter = getVendorPortalDispatchFilter(filter);
+
+  const visible = useMemo(() => {
+    const needle = search.trim().toLowerCase();
+    return applyVendorPortalDispatchFilter(dispatches, activeFilter).filter((dispatch) => {
+      if (!needle) return true;
+      return (
+        (dispatch.poNumber || "").toLowerCase().includes(needle) ||
+        (dispatch.dispatchNumber || "").toLowerCase().includes(needle) ||
+        (dispatch.internalWONumber || "").toLowerCase().includes(needle) ||
+        (dispatch.workOrderTitle || "").toLowerCase().includes(needle) ||
+        (dispatch.locationName || "").toLowerCase().includes(needle)
+      );
+    });
+  }, [dispatches, activeFilter, search]);
+
+  return (
+    <>
+      <div className="vp-card">
+        <Text variant="title">Your Purchase Orders</Text>
+        <div className="vp-muted" style={{ marginBottom: 12 }}>
+          Every PO issued to your company, with current status and dollar value.
+        </div>
+        <div
+          className="vp-actions"
+          style={{ marginTop: 0, gap: 12, alignItems: "center", flexWrap: "wrap" }}
+        >
+          {VENDOR_PORTAL_DISPATCH_FILTERS.map((item) => (
+            <button
+              key={item.key}
+              type="button"
+              className={`vp-btn ${filter === item.key ? "vp-btn-primary" : "vp-btn-ghost"}`}
+              onClick={() => setFilter(item.key)}
+            >
+              {item.label}{" "}
+              <span style={{ opacity: 0.7, fontWeight: 400 }}>
+                ({dispatches.filter(item.match).length})
+              </span>
+            </button>
+          ))}
+          <input
+            className="vp-input"
+            placeholder="Search PO #, WO, location…"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            style={{ marginLeft: "auto", minWidth: 240 }}
+          />
+        </div>
+      </div>
+
+      {isLoading && <div className="vp-card vp-muted">Loading POs…</div>}
+      <Text variant="error" when={Boolean(error)} className="vp-error">
+        {error?.message}
+      </Text>
+
+      {!isLoading && !error && visible.length === 0 && (
+        <div className="vp-card vp-empty">No POs match this view.</div>
+      )}
+
+      {!isLoading && !error && visible.length > 0 && (
+        <div className="vp-card" style={{ padding: 0 }}>
+          <table className="vp-po-table">
+            <thead>
+              <tr>
+                <th>PO #</th>
+                <th>Dispatch #</th>
+                <th>Status</th>
+                <th>NTE</th>
+                <th>Location</th>
+                <th>Dispatched</th>
+                <th>Scheduled</th>
+                <th>Completed</th>
+              </tr>
+            </thead>
+            <tbody>
+              {visible.map((dispatch) => (
+                <tr key={dispatch.id} onClick={() => navigate(`../dispatch/${dispatch.id}`)}>
+                  <td>
+                    <span className="vp-po-number">{dispatch.poNumber || "—"}</span>
+                  </td>
+                  <td className="vp-po-muted-cell">{dispatch.dispatchNumber}</td>
+                  <td>
+                    <span className={vendorPortalStatusClass(dispatch.status)}>
+                      {dispatch.status}
+                    </span>
+                  </td>
+                  <td>{formatMoney(dispatch.nteAmount)}</td>
+                  <td className="vp-po-muted-cell">
+                    {dispatch.locationName || "—"}
+                    {dispatch.locationCity ? ` · ${dispatch.locationCity}` : ""}
+                    {dispatch.locationState ? `, ${dispatch.locationState}` : ""}
+                  </td>
+                  <td className="vp-po-muted-cell">
+                    {dispatch.dispatchedAt
+                      ? formatVendorPortalDateTime(dispatch.dispatchedAt)
+                      : "—"}
+                  </td>
+                  <td className="vp-po-muted-cell">{formatDate(dispatch.scheduledDate)}</td>
+                  <td className="vp-po-muted-cell">{formatDate(dispatch.completedDate)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/pages/vendor-portal/SignaturePad.js b/src/app/v/_components/signature-pad.tsx
similarity index 56%
rename from src/pages/vendor-portal/SignaturePad.js
rename to src/app/v/_components/signature-pad.tsx
index 028f4b01..ec2830d2 100644
--- a/src/pages/vendor-portal/SignaturePad.js
+++ b/src/app/v/_components/signature-pad.tsx
@@ -1,7 +1,11 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
-export default function SignaturePad({ onChange }) {
-  const canvasRef = useRef(null);
+interface SignaturePadProps {
+  onChange?: (value: string) => void;
+}
+
+export function SignaturePad({ onChange }: SignaturePadProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
   const drawingRef = useRef(false);
   const lastRef = useRef({ x: 0, y: 0 });
   const [isEmpty, setIsEmpty] = useState(true);
@@ -9,11 +13,14 @@ export default function SignaturePad({ onChange }) {
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
+
     const ratio = window.devicePixelRatio || 1;
     const rect = canvas.getBoundingClientRect();
     canvas.width = rect.width * ratio;
     canvas.height = rect.height * ratio;
     const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
     ctx.scale(ratio, ratio);
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
@@ -21,48 +28,51 @@ export default function SignaturePad({ onChange }) {
     ctx.lineWidth = 2;
   }, []);
 
-  function pointFromEvent(e) {
-    const canvas = canvasRef.current;
+  const pointFromEvent = (event: React.MouseEvent | React.TouchEvent) => {
+    const canvas = canvasRef.current!;
     const rect = canvas.getBoundingClientRect();
-    const touch = e.touches?.[0];
-    const clientX = touch ? touch.clientX : e.clientX;
-    const clientY = touch ? touch.clientY : e.clientY;
+    const touch = "touches" in event ? event.touches[0] : undefined;
+    const clientX = touch ? touch.clientX : (event as React.MouseEvent).clientX;
+    const clientY = touch ? touch.clientY : (event as React.MouseEvent).clientY;
     return { x: clientX - rect.left, y: clientY - rect.top };
-  }
+  };
 
-  function start(e) {
-    e.preventDefault();
+  const start = (event: React.MouseEvent | React.TouchEvent) => {
+    event.preventDefault();
     drawingRef.current = true;
-    lastRef.current = pointFromEvent(e);
-  }
+    lastRef.current = pointFromEvent(event);
+  };
 
-  function move(e) {
-    if (!drawingRef.current) return;
-    e.preventDefault();
+  const move = (event: React.MouseEvent | React.TouchEvent) => {
+    if (!drawingRef.current || !canvasRef.current) return;
+    event.preventDefault();
     const ctx = canvasRef.current.getContext("2d");
-    const p = pointFromEvent(e);
+    if (!ctx) return;
+    const point = pointFromEvent(event);
     ctx.beginPath();
     ctx.moveTo(lastRef.current.x, lastRef.current.y);
-    ctx.lineTo(p.x, p.y);
+    ctx.lineTo(point.x, point.y);
     ctx.stroke();
-    lastRef.current = p;
+    lastRef.current = point;
     if (isEmpty) setIsEmpty(false);
-  }
+  };
 
-  function end(e) {
-    if (!drawingRef.current) return;
-    e.preventDefault();
+  const end = (event: React.MouseEvent | React.TouchEvent) => {
+    if (!drawingRef.current || !canvasRef.current) return;
+    event.preventDefault();
     drawingRef.current = false;
     onChange?.(canvasRef.current.toDataURL("image/png"));
-  }
+  };
 
-  function clear() {
+  const clear = () => {
     const canvas = canvasRef.current;
+    if (!canvas) return;
     const ctx = canvas.getContext("2d");
+    if (!ctx) return;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     setIsEmpty(true);
     onChange?.("");
-  }
+  };
 
   return (
     <div>
diff --git a/src/app/v/_components/vendor-portal-context.ts b/src/app/v/_components/vendor-portal-context.ts
new file mode 100644
index 00000000..e57a87b2
--- /dev/null
+++ b/src/app/v/_components/vendor-portal-context.ts
@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+import type { VendorPortalSession } from "@/domain/vendor-portal/types/vendor-portal";
+
+export type VendorPortalStatus = "loading" | "ready" | "error";
+
+export interface VendorPortalContextValue {
+  token: string;
+  vendor: VendorPortalSession | null;
+  status: VendorPortalStatus;
+  error: Error | null;
+}
+
+export const VendorPortalContext = createContext<VendorPortalContextValue | null>(null);
+
+export function useVendorPortal(): VendorPortalContextValue {
+  const context = useContext(VendorPortalContext);
+  if (!context) {
+    throw new Error("useVendorPortal must be used within VendorPortalProvider");
+  }
+  return context;
+}
diff --git a/src/app/v/_components/vendor-portal-documents.tsx b/src/app/v/_components/vendor-portal-documents.tsx
new file mode 100644
index 00000000..3055952d
--- /dev/null
+++ b/src/app/v/_components/vendor-portal-documents.tsx
@@ -0,0 +1,162 @@
+import { useRef, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+
+import { VendorPortalFeedback } from "@/app/v/_components/vendor-portal-feedback";
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+import { validateVendorDocument } from "@/domain/vendor-portal/lib/document-validation";
+import type { VendorPortalDocument } from "@/domain/vendor-portal/types/vendor-portal";
+
+type VendorPortalDocumentsProps = {
+  token: string;
+  dispatchId: number;
+  documents: VendorPortalDocument[];
+  locked: boolean;
+  onChanged: () => Promise<void>;
+};
+
+type UploadRequest = {
+  file: File;
+  replacementId?: number;
+};
+
+export function VendorPortalDocuments({
+  token,
+  dispatchId,
+  documents,
+  locked,
+  onChanged,
+}: VendorPortalDocumentsProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [replacementId, setReplacementId] = useState<number>();
+  const [progress, setProgress] = useState<number>();
+  const [validationError, setValidationError] = useState<string>();
+
+  const uploadMutation = useMutation({
+    mutationFn: ({ file, replacementId: requestedReplacementId }: UploadRequest) =>
+      vendorPortalApi.uploadDocument({
+        token,
+        dispatchId,
+        file,
+        replacesDocumentId: requestedReplacementId,
+        onProgress: setProgress,
+      }),
+    onSuccess: onChanged,
+    onSettled: () => {
+      setProgress(undefined);
+      setReplacementId(undefined);
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+    },
+  });
+
+  const chooseFile = (documentId?: number) => {
+    setValidationError(undefined);
+    uploadMutation.reset();
+    setReplacementId(documentId);
+    inputRef.current?.click();
+  };
+
+  const uploadSelectedFile = (file?: File) => {
+    if (!file) {
+      return;
+    }
+
+    const validationMessage = validateVendorDocument(file);
+    if (validationMessage) {
+      setValidationError(validationMessage);
+      return;
+    }
+
+    setValidationError(undefined);
+    setProgress(0);
+    uploadMutation.mutate({ file, replacementId });
+  };
+
+  const uploadError =
+    validationError ??
+    (uploadMutation.error ? "Unable to upload the document. Please try again." : undefined);
+
+  return (
+    <>
+      <input
+        ref={inputRef}
+        type="file"
+        aria-label="Choose completion document"
+        accept=".pdf,.jpg,.jpeg,.png,application/pdf,image/jpeg,image/png"
+        hidden
+        onChange={(event) => uploadSelectedFile(event.target.files?.[0])}
+      />
+
+      {documents.length === 0 && (
+        <VendorPortalFeedback>No completion documents uploaded.</VendorPortalFeedback>
+      )}
+
+      {documents.map((document) => (
+        <article key={document.id} className="vp-uplift-row">
+          <div className="vp-row">
+            <strong>File</strong>
+            <span>
+              {document.originalFileName} · v{document.version}
+            </span>
+          </div>
+          <div className="vp-row">
+            <strong>Security scan</strong>
+            <span>{document.scanStatus}</span>
+          </div>
+          <div className="vp-row">
+            <strong>Review</strong>
+            <span>{document.reviewStatus}</span>
+          </div>
+          {Boolean(document.rejectionReason) && (
+            <VendorPortalFeedback tone="error">{document.rejectionReason}</VendorPortalFeedback>
+          )}
+          <div className="vp-actions">
+            <button
+              type="button"
+              className="vp-btn vp-btn-ghost"
+              disabled={!document.canDownload}
+              onClick={() => void vendorPortalApi.downloadDocument(token, dispatchId, document)}
+            >
+              {document.canDownload ? "Download" : "Quarantined"}
+            </button>
+            {!locked && (
+              <button
+                type="button"
+                className="vp-btn vp-btn-ghost"
+                disabled={uploadMutation.isPending}
+                onClick={() => chooseFile(document.id)}
+              >
+                Replace
+              </button>
+            )}
+          </div>
+        </article>
+      ))}
+
+      {progress !== undefined && (
+        <div role="status" aria-live="polite">
+          <progress max={100} value={progress} style={{ width: "100%" }} />
+          <VendorPortalFeedback>Uploading… {progress}%</VendorPortalFeedback>
+        </div>
+      )}
+
+      {Boolean(uploadError) && (
+        <VendorPortalFeedback tone="error">{uploadError}</VendorPortalFeedback>
+      )}
+
+      {!locked && (
+        <div className="vp-actions">
+          <button
+            type="button"
+            className="vp-btn vp-btn-primary"
+            disabled={uploadMutation.isPending}
+            onClick={() => chooseFile()}
+          >
+            Upload document
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/app/v/_components/vendor-portal-feedback.tsx b/src/app/v/_components/vendor-portal-feedback.tsx
new file mode 100644
index 00000000..3c9afc23
--- /dev/null
+++ b/src/app/v/_components/vendor-portal-feedback.tsx
@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { Text } from "@/components/ui/text";
+
+type VendorPortalFeedbackProps = {
+  children: ReactNode;
+  tone?: "error" | "muted";
+};
+
+export function VendorPortalFeedback({ children, tone = "muted" }: VendorPortalFeedbackProps) {
+  return (
+    <Text
+      variant={tone === "error" ? "error" : "feedback"}
+      tone={tone}
+      className={tone === "error" ? "vp-error" : "vp-muted"}
+    >
+      {children}
+    </Text>
+  );
+}
diff --git a/src/app/v/_components/vendor-portal-provider.tsx b/src/app/v/_components/vendor-portal-provider.tsx
new file mode 100644
index 00000000..036e58dd
--- /dev/null
+++ b/src/app/v/_components/vendor-portal-provider.tsx
@@ -0,0 +1,53 @@
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useParams } from "react-router";
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+import type { VendorPortalSession } from "@/domain/vendor-portal/types/vendor-portal";
+import {
+  VendorPortalContext,
+  type VendorPortalContextValue,
+  type VendorPortalStatus,
+} from "@/app/v/_components/vendor-portal-context";
+
+function VendorPortalSessionLoader({ token, children }: { token: string; children: ReactNode }) {
+  const [vendor, setVendor] = useState<VendorPortalSession | null>(null);
+  const [status, setStatus] = useState<VendorPortalStatus>("loading");
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    vendorPortalApi
+      .session(token)
+      .then((data) => {
+        if (cancelled) return;
+        setVendor(data);
+        setStatus("ready");
+      })
+      .catch((err: Error) => {
+        if (cancelled) return;
+        setError(err);
+        setStatus("error");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [token]);
+
+  const value = useMemo<VendorPortalContextValue>(
+    () => ({ token, vendor, status, error }),
+    [token, vendor, status, error],
+  );
+
+  return <VendorPortalContext.Provider value={value}>{children}</VendorPortalContext.Provider>;
+}
+
+export function VendorPortalProvider({ children }: { children: ReactNode }) {
+  const { token = "" } = useParams();
+
+  return (
+    <VendorPortalSessionLoader key={token} token={token}>
+      {children}
+    </VendorPortalSessionLoader>
+  );
+}
diff --git a/src/app/v/_components/vendor-portal.css b/src/app/v/_components/vendor-portal.css
new file mode 100644
index 00000000..1e57cb16
--- /dev/null
+++ b/src/app/v/_components/vendor-portal.css
@@ -0,0 +1,424 @@
+.vp-shell {
+  min-height: 100vh;
+  background: var(--color-bg-page);
+  font-family: var(--font-sans);
+  color: var(--foreground);
+}
+
+.vp-header {
+  background: var(--color-header-gradient);
+  color: var(--color-header-text);
+  padding: 14px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: var(--color-header-shadow);
+}
+
+.vp-brand {
+  font-family: var(--font-heading);
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+
+.vp-vendor-name {
+  font-size: 13px;
+  color: var(--color-header-text-muted);
+}
+
+.vp-container {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.vp-card {
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  padding: 20px;
+  margin-bottom: 16px;
+  box-shadow: var(--shadow-sm);
+}
+
+.vp-card h2 {
+  margin: 0 0 4px;
+  font-size: 20px;
+}
+
+.vp-card h3 {
+  margin: 0 0 12px;
+  font-size: 16px;
+  color: var(--foreground);
+}
+
+.vp-muted {
+  color: var(--muted-foreground);
+  font-size: 13px;
+}
+
+.vp-row {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  gap: 8px;
+  margin: 6px 0;
+  font-size: 14px;
+}
+
+.vp-row strong {
+  color: var(--color-text-secondary);
+}
+
+.vp-dispatch-list {
+  display: grid;
+  gap: 12px;
+}
+
+.vp-dispatch-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  cursor: pointer;
+  transition:
+    border-color var(--duration-fast) var(--ease-default),
+    box-shadow var(--duration-fast) var(--ease-default);
+}
+
+.vp-dispatch-card:hover {
+  border-color: var(--primary);
+  box-shadow: var(--shadow-md);
+}
+
+.vp-dispatch-title {
+  font-weight: 600;
+  font-size: 15px;
+  margin-bottom: 4px;
+}
+
+.vp-dispatch-meta {
+  font-size: 13px;
+  color: var(--muted-foreground);
+}
+
+.vp-status-pill {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+}
+
+.vp-status-sent {
+  background: var(--status-pending-bg);
+  color: var(--status-pending-text);
+}
+.vp-status-acknowledged {
+  background: var(--status-scheduled-bg);
+  color: var(--status-scheduled-text);
+}
+.vp-status-in-progress {
+  background: var(--status-inprogress-bg);
+  color: var(--status-inprogress-text);
+}
+.vp-status-completed {
+  background: var(--status-completed-bg);
+  color: var(--status-completed-text);
+}
+.vp-status-verified {
+  background: var(--status-onsite-bg);
+  color: var(--status-onsite-text);
+}
+.vp-status-cancelled {
+  background: var(--doc-no-bg);
+  color: var(--doc-no-text);
+}
+.vp-status-refused {
+  background: var(--doc-no-bg);
+  color: var(--doc-no-text);
+}
+
+.vp-btn {
+  display: inline-block;
+  padding: 10px 18px;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: var(--radius-md);
+  border: none;
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--ease-default);
+}
+
+.vp-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.vp-btn-primary {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+.vp-btn-primary:hover:not(:disabled) {
+  background: var(--primary-hover);
+}
+.vp-btn-success {
+  background: var(--success);
+  color: var(--primary-foreground);
+}
+.vp-btn-warn {
+  background: var(--warning);
+  color: var(--primary-foreground);
+}
+.vp-btn-ghost {
+  background: transparent;
+  color: var(--foreground);
+  border: 1px solid var(--border);
+}
+.vp-btn-ghost:hover:not(:disabled) {
+  background: var(--secondary);
+}
+
+.vp-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 12px;
+}
+
+.vp-checklist-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 14px;
+}
+
+.vp-checklist-item:last-child {
+  border-bottom: none;
+}
+
+.vp-checklist-item input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+.vp-checklist-item.done label {
+  text-decoration: line-through;
+  color: var(--muted-foreground);
+}
+
+.vp-comment {
+  padding: 10px 12px;
+  background: var(--input-background);
+  border-left: 3px solid var(--border);
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.vp-comment-meta {
+  font-size: 12px;
+  color: var(--muted-foreground);
+  margin-bottom: 4px;
+}
+
+.vp-textarea,
+.vp-input {
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-family: inherit;
+  box-sizing: border-box;
+  background: var(--input-background);
+}
+
+.vp-textarea {
+  min-height: 80px;
+  resize: vertical;
+}
+
+.vp-error {
+  background: var(--doc-no-bg);
+  color: var(--doc-no-text);
+  padding: 16px;
+  border-radius: var(--radius);
+  text-align: center;
+}
+
+.vp-empty {
+  text-align: center;
+  padding: 40px;
+  color: var(--muted-foreground);
+}
+
+.vp-signature-canvas {
+  border: 1px dashed var(--muted-foreground);
+  border-radius: var(--radius-md);
+  background: var(--background);
+  touch-action: none;
+  display: block;
+  width: 100%;
+  max-width: 500px;
+  height: 180px;
+}
+
+.vp-back-link {
+  color: var(--primary);
+  text-decoration: none;
+  font-size: 14px;
+  display: inline-block;
+  margin-bottom: 12px;
+}
+
+.vp-back-link:hover {
+  text-decoration: underline;
+}
+
+.vp-uplift-row {
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--input-background);
+  margin-bottom: 10px;
+}
+
+.vp-uplift-status-pending {
+  display: inline-block;
+  padding: 3px 9px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  background: var(--status-pending-bg);
+  color: var(--status-pending-text);
+}
+
+.vp-uplift-status-approved {
+  display: inline-block;
+  padding: 3px 9px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  background: var(--status-completed-bg);
+  color: var(--status-completed-text);
+}
+
+.vp-uplift-status-rejected {
+  display: inline-block;
+  padding: 3px 9px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  background: var(--doc-no-bg);
+  color: var(--doc-no-text);
+}
+
+.vp-uplift-status-changesrequested {
+  display: inline-block;
+  padding: 3px 9px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  background: var(--status-scheduled-bg);
+  color: var(--status-scheduled-text);
+}
+
+.vp-uplift-status-withdrawn,
+.vp-uplift-status-expired {
+  display: inline-block;
+  padding: 3px 9px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  background: var(--input-background);
+  color: var(--muted-foreground);
+}
+
+.vp-uplift-form {
+  margin-top: 12px;
+}
+
+.vp-error-inline {
+  color: var(--doc-no-text);
+  font-weight: 600;
+}
+
+.vp-nav {
+  background: var(--background);
+  border-bottom: 1px solid var(--border);
+  padding: 0 24px;
+}
+
+.vp-nav-inner {
+  max-width: 1080px;
+  margin: 0 auto;
+  display: flex;
+  gap: 4px;
+}
+
+.vp-nav-tab {
+  background: none;
+  border: none;
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition:
+    color var(--duration-fast) var(--ease-default),
+    border-color var(--duration-fast) var(--ease-default);
+  text-decoration: none;
+  display: inline-block;
+}
+
+.vp-nav-tab:hover {
+  color: var(--foreground);
+}
+.vp-nav-tab.active {
+  color: var(--foreground);
+  border-bottom-color: var(--primary);
+}
+
+.vp-po-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.vp-po-table th,
+.vp-po-table td {
+  padding: 10px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+}
+
+.vp-po-table th {
+  background: var(--input-background);
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  font-size: 13px;
+}
+
+.vp-po-table tbody tr {
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--ease-default);
+}
+.vp-po-table tbody tr:hover {
+  background: var(--input-background);
+}
+.vp-po-number {
+  font-weight: 600;
+  color: var(--foreground);
+}
+.vp-po-muted-cell {
+  color: var(--muted-foreground);
+  font-size: 13px;
+}
diff --git a/src/components/ActionBar.css b/src/components/ActionBar.css
deleted file mode 100644
index b373120f..00000000
--- a/src/components/ActionBar.css
+++ /dev/null
@@ -1,122 +0,0 @@
-/* Action Bar - Top navigation bar above search controls */
-.actionBar {
-  background-color: #f5f5f5;
-  border-bottom: 1px solid #ddd;
-  padding: 0;
-  margin-bottom: 0;
-  position: relative;
-  z-index: 10;
-}
-
-.actionBarNav {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  gap: 0;
-}
-
-.actionBarNav > li {
-  position: relative;
-  display: inline-block;
-}
-
-.actionBarLink {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 15px;
-  color: #333;
-  text-decoration: none;
-  transition: background-color 0.2s;
-  white-space: nowrap;
-}
-
-.actionBarLink:hover {
-  background-color: #e0e0e0;
-  color: #000;
-  text-decoration: none;
-}
-
-.actionBarLink i {
-  font-size: 14px;
-}
-
-.actionBarText {
-  font-size: 13px;
-}
-
-/* Dropdown */
-.actionBarDropdown {
-  position: relative;
-  z-index: 100;
-}
-
-.actionBarDropdownMenu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1050;
-  display: block;
-  min-width: 180px;
-  padding: 5px 0;
-  margin: 0;
-  list-style: none;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-}
-
-.actionBarDropdownMenu li {
-  display: block;
-}
-
-.actionBarDropdownMenu li a {
-  display: block;
-  padding: 8px 20px;
-  color: #333;
-  text-decoration: none;
-  font-size: 13px;
-  white-space: nowrap;
-}
-
-.actionBarDropdownMenu li a:hover {
-  background-color: #f5f5f5;
-  color: #000;
-}
-
-.actionBarDropdownMenu li.divider {
-  height: 1px;
-  margin: 5px 0;
-  overflow: hidden;
-  background-color: #e5e5e5;
-}
-
-.countLabel {
-  color: #999;
-  font-size: 12px;
-}
-
-.pull-right {
-  float: right;
-  margin-left: 10px;
-}
-
-/* Hide text on small screens */
-@media (max-width: 768px) {
-  .actionBarText {
-    display: none;
-  }
-}
-
-/* Close dropdowns when clicking outside */
-.actionBarDropdown.open .actionBarDropdownMenu {
-  display: block;
-}
-
-.actionBarDropdown:not(.open) .actionBarDropdownMenu {
-  display: none;
-}
-
diff --git a/src/components/ActionBar.js b/src/components/ActionBar.js
deleted file mode 100644
index 92a27d3e..00000000
--- a/src/components/ActionBar.js
+++ /dev/null
@@ -1,164 +0,0 @@
-import React, { useState } from "react";
-import "./ActionBar.css";
-
-export default function ActionBar({
-  moduleName = "Items",
-  moduleIcon = "fa-list",
-  onNew,
-  onBulkEdit,
-  onImportExport,
-  onSearch,
-  selectedCount = 0
-}) {
-  const [workspaceOpen, setWorkspaceOpen] = useState(false);
-  const [moduleOpen, setModuleOpen] = useState(false);
-  const [searchOpen, setSearchOpen] = useState(false);
-  const [selectedWorkspace, setSelectedWorkspace] = useState("All");
-
-  const handleWorkspaceSelect = (workspace) => {
-    setSelectedWorkspace(workspace);
-    setWorkspaceOpen(false);
-  };
-
-  const toggleWorkspace = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setWorkspaceOpen(!workspaceOpen);
-    setModuleOpen(false);
-    setSearchOpen(false);
-  };
-
-  const toggleModule = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setModuleOpen(!moduleOpen);
-    setWorkspaceOpen(false);
-    setSearchOpen(false);
-  };
-
-  const toggleSearch = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setSearchOpen(!searchOpen);
-    setWorkspaceOpen(false);
-    setModuleOpen(false);
-  };
-
-  // Close dropdowns when clicking outside
-  React.useEffect(() => {
-    const handleClickOutside = () => {
-      setWorkspaceOpen(false);
-      setModuleOpen(false);
-      setSearchOpen(false);
-    };
-
-    if (workspaceOpen || moduleOpen || searchOpen) {
-      document.addEventListener("click", handleClickOutside);
-      return () => document.removeEventListener("click", handleClickOutside);
-    }
-  }, [workspaceOpen, moduleOpen, searchOpen]);
-
-  return (
-    <div className="actionBar">
-      <ul className="actionBarNav">
-        {/* Settings/Filter Button */}
-        <li>
-          <a href="#" className="actionBarLink" title="Settings">
-            <i className="fa fa-filter"></i>
-          </a>
-        </li>
-
-        {/* Workspace Selector */}
-        <li className={`actionBarDropdown ${workspaceOpen ? 'open' : ''}`}>
-          <a
-            href="#"
-            className="actionBarLink"
-            onClick={toggleWorkspace}
-            title="Change your workspace"
-          >
-            <i className="fa fa-inbox"></i>
-            <span className="actionBarText">{selectedWorkspace}</span>
-            <i className="fa fa-angle-down"></i>
-          </a>
-          {workspaceOpen && (
-            <ul className="actionBarDropdownMenu">
-              <li><a href="#" onClick={(e) => { e.preventDefault(); handleWorkspaceSelect("All"); }}>All</a></li>
-              <li><a href="#" onClick={(e) => { e.preventDefault(); handleWorkspaceSelect("Everyone else"); }}>Everyone else</a></li>
-              <li><a href="#" onClick={(e) => { e.preventDefault(); handleWorkspaceSelect("Only Me"); }}>Only Me</a></li>
-              <li className="divider"></li>
-              <li><a href="#" onClick={(e) => { e.preventDefault(); handleWorkspaceSelect("Custom"); }}>Specific people...</a></li>
-            </ul>
-          )}
-        </li>
-
-        {/* Module Actions (New, Edit, Import/Export) */}
-        <li className={`actionBarDropdown ${moduleOpen ? 'open' : ''}`}>
-          <a
-            href="#"
-            className="actionBarLink"
-            onClick={toggleModule}
-            title={moduleName}
-          >
-            <i className={`fa ${moduleIcon}`}></i>
-            <span className="actionBarText">{moduleName}</span>
-            <i className="fa fa-angle-down"></i>
-          </a>
-          {moduleOpen && (
-            <ul className="actionBarDropdownMenu">
-              <li>
-                <a href="#" onClick={(e) => { e.preventDefault(); setModuleOpen(false); onNew && onNew(); }}>
-                  New
-                </a>
-              </li>
-              <li>
-                <a href="#" onClick={(e) => { e.preventDefault(); setModuleOpen(false); onBulkEdit && onBulkEdit(); }}>
-                  Edit <span className="countLabel">({selectedCount})</span>
-                </a>
-              </li>
-              <li className="divider"></li>
-              <li>
-                <a href="#" onClick={(e) => { e.preventDefault(); }}>
-                  Import/Export <i className="fa fa-angle-right pull-right"></i>
-                </a>
-              </li>
-            </ul>
-          )}
-        </li>
-
-        {/* Search & Report */}
-        <li className={`actionBarDropdown ${searchOpen ? 'open' : ''}`}>
-          <a
-            href="#"
-            className="actionBarLink"
-            onClick={toggleSearch}
-            title="Search & Report"
-          >
-            <i className="fa fa-search"></i>
-            <span className="actionBarText">Search</span>
-            <i className="fa fa-angle-down"></i>
-          </a>
-          {searchOpen && (
-            <ul className="actionBarDropdownMenu">
-              <li>
-                <a href="#" onClick={(e) => { e.preventDefault(); setSearchOpen(false); onSearch && onSearch('smart'); }}>
-                  Smart Search
-                </a>
-              </li>
-              <li>
-                <a href="#" onClick={(e) => { e.preventDefault(); setSearchOpen(false); onSearch && onSearch('open'); }}>
-                  Open
-                </a>
-              </li>
-              <li>
-                <a href="#" onClick={(e) => { e.preventDefault(); }}>
-                  Recent <i className="fa fa-angle-right pull-right"></i>
-                </a>
-              </li>
-            </ul>
-          )}
-        </li>
-      </ul>
-    </div>
-  );
-}
-
diff --git a/src/components/DeleteModal.js b/src/components/DeleteModal.js
deleted file mode 100644
index 8e141e33..00000000
--- a/src/components/DeleteModal.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import React from "react";
-import { toast } from "react-toastify";
-
-export default function DeleteModal({ 
-  isOpen, 
-  onClose, 
-  onConfirm, 
-  title = "Delete Confirmation",
-  message = "Are you sure you want to delete this item?",
-  loading = false
-}) {
-  if (!isOpen) return null;
-
-  return (
-    <div style={styles.overlay}>
-      <div style={styles.modal}>
-        <div style={styles.header}>
-          <h3 style={styles.title}>{title}</h3>
-          <button
-            onClick={onClose}
-            style={styles.closeBtn}
-            disabled={loading}
-          >
-            ✕
-          </button>
-        </div>
-
-        <div style={styles.body}>
-          <p style={styles.message}>{message}</p>
-        </div>
-
-        <div style={styles.actions}>
-          <button
-            onClick={onClose}
-            style={styles.cancelBtn}
-            disabled={loading}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={onConfirm}
-            style={styles.deleteBtn}
-            disabled={loading}
-          >
-            {loading ? "Deleting..." : "Delete"}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const styles = {
-  overlay: {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1000,
-  },
-  modal: {
-    backgroundColor: "#fff",
-    borderRadius: "8px",
-    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-    maxWidth: "400px",
-    width: "90%",
-    overflow: "hidden",
-  },
-  header: {
-    backgroundColor: "#f8f9fa",
-    padding: "16px 20px",
-    borderBottom: "1px solid #ddd",
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  title: {
-    margin: 0,
-    fontSize: "18px",
-    fontWeight: 600,
-    color: "#333",
-  },
-  closeBtn: {
-    background: "none",
-    border: "none",
-    fontSize: "24px",
-    cursor: "pointer",
-    color: "#666",
-    padding: "0",
-    width: "32px",
-    height: "32px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  body: {
-    padding: "20px",
-  },
-  message: {
-    margin: 0,
-    fontSize: "14px",
-    color: "#666",
-    lineHeight: "1.5",
-  },
-  actions: {
-    display: "flex",
-    gap: "10px",
-    padding: "16px 20px",
-    borderTop: "1px solid #ddd",
-    backgroundColor: "#f8f9fa",
-  },
-  cancelBtn: {
-    flex: 1,
-    padding: "8px 16px",
-    fontSize: "14px",
-    fontWeight: 500,
-    border: "1px solid #ddd",
-    borderRadius: "4px",
-    backgroundColor: "#fff",
-    color: "#333",
-    cursor: "pointer",
-    transition: "all 0.2s",
-  },
-  deleteBtn: {
-    flex: 1,
-    padding: "8px 16px",
-    fontSize: "14px",
-    fontWeight: 500,
-    border: "none",
-    borderRadius: "4px",
-    backgroundColor: "#dc3545",
-    color: "#fff",
-    cursor: "pointer",
-    transition: "all 0.2s",
-  },
-};
diff --git a/src/components/SharedTable.js b/src/components/SharedTable.js
deleted file mode 100644
index 594949f8..00000000
--- a/src/components/SharedTable.js
+++ /dev/null
@@ -1,284 +0,0 @@
-import React, { useState, useCallback, useRef, useEffect } from "react";
-import ReactDOM from "react-dom";
-
-function ColumnConfigPanel({ columns, columnOrder, hiddenColumns, onReorder, onToggle, onClose }) {
-  const btnRef = useRef(null);
-  const panelRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const [menuPos, setMenuPos] = useState({ top: 0, right: 0 });
-  const [dragIdx, setDragIdx] = useState(null);
-
-  useEffect(() => {
-    const handleClick = (e) => {
-      if (btnRef.current?.contains(e.target)) return;
-      if (panelRef.current?.contains(e.target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, []);
-
-  const handleOpen = () => {
-    if (btnRef.current) {
-      const rect = btnRef.current.getBoundingClientRect();
-      setMenuPos({ top: rect.bottom + 4, right: window.innerWidth - rect.right });
-    }
-    setOpen(!open);
-  };
-
-  const handleDragStart = (idx) => setDragIdx(idx);
-  const handleDragOver = (e) => e.preventDefault();
-  const handleDrop = (targetIdx) => {
-    if (dragIdx === null || dragIdx === targetIdx) return;
-    const newOrder = [...columnOrder];
-    const [moved] = newOrder.splice(dragIdx, 1);
-    newOrder.splice(targetIdx, 0, moved);
-    onReorder(newOrder);
-    setDragIdx(null);
-  };
-
-  const ordered = columnOrder.map((key) => columns.find((c) => c.key === key)).filter(Boolean);
-
-  return (
-    <>
-      <button ref={btnRef} className="paginationBtn colConfigBtn" onClick={handleOpen} title="Configure columns">
-        ⚙
-      </button>
-      {open && ReactDOM.createPortal(
-        <div ref={panelRef} className="colConfigPanel" style={{ top: menuPos.top, right: menuPos.right }}>
-          <div className="colConfigTitle">Columns</div>
-          <div className="colConfigList">
-            {ordered.map((col, idx) => (
-              <div
-                key={col.key}
-                className={`colConfigItem ${dragIdx === idx ? "dragging" : ""}`}
-                draggable
-                onDragStart={() => handleDragStart(idx)}
-                onDragOver={handleDragOver}
-                onDrop={() => handleDrop(idx)}
-              >
-                <span className="colConfigDragHandle">⠿</span>
-                <label className="colConfigLabel">
-                  <input
-                    type="checkbox"
-                    checked={!hiddenColumns.includes(col.key)}
-                    onChange={() => onToggle(col.key)}
-                  />
-                  {col.label}
-                </label>
-              </div>
-            ))}
-          </div>
-        </div>,
-        document.body
-      )}
-    </>
-  );
-}
-
-const SharedTable = ({
-  rows = [],
-  columns = [],
-  onEdit,
-  onDelete,
-  page,
-  setPage,
-  pageSize,
-  setPageSize,
-  totalCount,
-  loading,
-  error,
-  sortBy,
-  setSortBy,
-  sortDir,
-  setSortDir
-}) => {
-  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
-  const [colWidths, setColWidths] = useState(null);
-  const [columnOrder, setColumnOrder] = useState(() => columns.map((c) => c.key));
-  const [hiddenColumns, setHiddenColumns] = useState([]);
-  const gridRef = useRef(null);
-
-  useEffect(() => {
-    setColumnOrder((prev) => {
-      const newKeys = columns.map((c) => c.key);
-      const existing = prev.filter((k) => newKeys.includes(k));
-      const added = newKeys.filter((k) => !prev.includes(k));
-      return [...existing, ...added];
-    });
-  }, [columns]);
-
-  const visibleColumns = columnOrder
-    .map((key) => columns.find((c) => c.key === key))
-    .filter((col) => col && !hiddenColumns.includes(col.key));
-
-  const handleToggleColumn = (key) => {
-    setHiddenColumns((prev) =>
-      prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]
-    );
-    setColWidths(null);
-  };
-
-  const snapshotWidths = useCallback(() => {
-    if (!gridRef.current) return null;
-    const headerCells = gridRef.current.querySelectorAll("[data-col]");
-    const widths = {};
-    headerCells.forEach((cell) => {
-      widths[cell.dataset.col] = cell.getBoundingClientRect().width;
-    });
-    return widths;
-  }, []);
-
-  const handleMouseDown = useCallback((e, colKey) => {
-    e.preventDefault();
-    const startX = e.clientX;
-
-    const currentWidths = snapshotWidths();
-    if (!currentWidths) return;
-    setColWidths(currentWidths);
-
-    const colIndex = visibleColumns.findIndex((c) => c.key === colKey);
-    const nextColKey = colIndex < visibleColumns.length - 1 ? visibleColumns[colIndex + 1].key : null;
-    const startWidth = currentWidths[colKey] || 100;
-    const nextStartWidth = nextColKey ? (currentWidths[nextColKey] || 100) : 0;
-
-    const onMove = (moveEvent) => {
-      let diff = moveEvent.clientX - startX;
-      const minCol = 50;
-      if (startWidth + diff < minCol) diff = minCol - startWidth;
-      if (nextColKey && nextStartWidth - diff < minCol) diff = nextStartWidth - minCol;
-      setColWidths((prev) => {
-        const updated = { ...prev, [colKey]: startWidth + diff };
-        if (nextColKey) updated[nextColKey] = nextStartWidth - diff;
-        return updated;
-      });
-    };
-
-    const onUp = () => {
-      document.removeEventListener("mousemove", onMove);
-      document.removeEventListener("mouseup", onUp);
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
-    };
-
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
-    document.addEventListener("mousemove", onMove);
-    document.addEventListener("mouseup", onUp);
-  }, [snapshotWidths, visibleColumns]);
-
-  const handleSort = (key) => {
-    if (!setSortBy || !setSortDir) return;
-    if (sortBy === key) {
-      setSortDir(sortDir === "asc" ? "desc" : "asc");
-    } else {
-      setSortBy(key);
-      setSortDir("asc");
-    }
-    if (setPage) setPage(1);
-  };
-
-  if (loading) return <div className="loading">Loading...</div>;
-  if (error) return <div className="error">{error}</div>;
-
-  const gridTemplate = colWidths
-    ? ["40px", ...visibleColumns.map((col) => `${colWidths[col.key] || 100}px`), "80px"].join(" ")
-    : ["40px", ...visibleColumns.map(() => "1fr"), "80px"].join(" ");
-
-  const paginationBar = (
-    <div className="paginationBar">
-      <div className="paginationPerPage">
-        <span className="paginationLabel">Show</span>
-        <div className="paginationSizeGroup">
-          {[12, 24, 48, 96].map((size) => (
-            <button
-              key={size}
-              className={`paginationSizeBtn ${pageSize === size ? "active" : ""}`}
-              onClick={() => { setPageSize(size); setPage(1); }}
-            >
-              {size}
-            </button>
-          ))}
-        </div>
-        <span className="paginationLabel">per page</span>
-      </div>
-      <div className="paginationNav">
-        <span className="paginationInfo">
-          {Math.min((page - 1) * pageSize + 1, totalCount)}–{Math.min(page * pageSize, totalCount)} of {totalCount}
-        </span>
-        <div className="paginationButtons">
-          <button className="paginationBtn" onClick={() => setPage(1)} disabled={page === 1} title="First">«</button>
-          <button className="paginationBtn" onClick={() => setPage(page - 1)} disabled={page === 1} title="Previous">‹</button>
-          <span className="paginationPage">{page}</span>
-          <button className="paginationBtn" onClick={() => setPage(page + 1)} disabled={page >= totalPages} title="Next">›</button>
-          <button className="paginationBtn" onClick={() => setPage(totalPages)} disabled={page >= totalPages} title="Last">»</button>
-        </div>
-        <ColumnConfigPanel
-          columns={columns}
-          columnOrder={columnOrder}
-          hiddenColumns={hiddenColumns}
-          onReorder={(order) => { setColumnOrder(order); setColWidths(null); }}
-          onToggle={handleToggleColumn}
-        />
-      </div>
-    </div>
-  );
-
-  return (
-    <div className="tableContainer">
-      {paginationBar}
-      <div className="tableResponsive">
-        <div className="gridTable" ref={gridRef} style={{ gridTemplateColumns: gridTemplate }}>
-          <div className="gridCell gridHeader">
-            <input type="checkbox" />
-          </div>
-          {visibleColumns.map((col) => (
-            <div
-              key={col.key}
-              data-col={col.key}
-              className={`gridCell gridHeader gridSortable ${sortBy === col.key ? "sorted" : ""}`}
-              onClick={() => handleSort(col.key)}
-            >
-              {col.label}
-              {sortBy === col.key && <span className="sortArrow">{sortDir === "asc" ? " ▲" : " ▼"}</span>}
-              <span
-                className="colResizeHandle"
-                onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, col.key); }}
-              />
-            </div>
-          ))}
-          <div className="gridCell gridHeader">Actions</div>
-
-          {rows.map((row, idx) => (
-            <React.Fragment key={row.id || idx}>
-              <div className="gridCell gridBody">
-                <input type="checkbox" />
-              </div>
-              {visibleColumns.map((col) => (
-                <div key={col.key} className="gridCell gridBody">
-                  {col.render ? col.render(row[col.key], row) : row[col.key]}
-                </div>
-              ))}
-              <div className="gridCell gridBody">
-                <div className="actionButtons">
-                  {onEdit && (
-                    <button className="btnIcon edit" title="Edit" onClick={() => onEdit(row)}>
-                      ✎
-                    </button>
-                  )}
-                  {onDelete && (
-                    <button className="btnIcon delete" title="Delete" onClick={() => onDelete(row)}>
-                      🗑
-                    </button>
-                  )}
-                </div>
-              </div>
-            </React.Fragment>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SharedTable;
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
deleted file mode 100644
index 0225b93a..00000000
--- a/src/components/Sidebar.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from "react";
-import { NavLink } from "react-router-dom";
-import {
-  FaTachometerAlt,
-  FaCalendarAlt,
-  FaFileAlt,
-  FaUserTie,
-  FaMoneyCheckAlt,
-  FaAddressBook,
-  FaChartBar,
-  FaTools,
-  FaBell,
-  FaClipboardList,
-  FaCubes,
-  FaMapMarkerAlt,
-  FaCog,
-  FaTruck,
-  FaDollarSign,
-  FaFileInvoiceDollar,
-} from "react-icons/fa";
-
-const navGroups = [
-  {
-    title: "Overview",
-    items: [
-      { label: "Dashboard", icon: <FaTachometerAlt />, path: "/" },
-      { label: "Calendar", icon: <FaCalendarAlt />, path: "/calendar" },
-      { label: "Reports", icon: <FaChartBar />, path: "/reports" },
-    ],
-  },
-  {
-    title: "Operations",
-    items: [
-      { label: "Work Orders", icon: <FaTools />, path: "/workorders" },
-      { label: "Uplifts", icon: <FaDollarSign />, path: "/uplifts" },
-      { label: "Follow Ups", icon: <FaBell />, path: "/followups" },
-      { label: "PM Schedules", icon: <FaClipboardList />, path: "/pmschedules" },
-    ],
-  },
-  {
-    title: "Vendors",
-    items: [
-      { label: "Vendors", icon: <FaTruck />, path: "/vendors" },
-      { label: "Vendor POs", icon: <FaFileInvoiceDollar />, path: "/vendor-pos" },
-    ],
-  },
-  {
-    title: "Customers & Sites",
-    items: [
-      { label: "Accounts", icon: <FaMoneyCheckAlt />, path: "/accounts" },
-      { label: "Contacts", icon: <FaAddressBook />, path: "/contacts" },
-      { label: "Locations", icon: <FaMapMarkerAlt />, path: "/locations" },
-      { label: "Assets", icon: <FaCubes />, path: "/assets" },
-    ],
-  },
-  {
-    title: "Internal",
-    items: [
-      { label: "Employees", icon: <FaUserTie />, path: "/employees" },
-      { label: "Documents", icon: <FaFileAlt />, path: "/documents" },
-    ],
-  },
-  {
-    title: "System",
-    items: [
-      { label: "Settings", icon: <FaCog />, path: "/settings/dropdowns" },
-    ],
-  },
-];
-
-export default function Sidebar() {
-  return (
-    <aside className="sidebar">
-      <div className="logoRow">
-        <img
-          src="/logo.png"
-          alt="SeaHaven Industries"
-          className="sidebarLogo"
-        />
-      </div>
-
-      <ul className="navList">
-        {navGroups.map((group, idx) => (
-          <li key={group.title} className="navGroup">
-            <div
-              className={`navGroupTitle ${idx === 0 ? "navGroupTitleFirst" : ""}`}
-            >
-              {group.title}
-            </div>
-            <ul className="navGroupList">
-              {group.items.map(({ label, icon, path }) => (
-                <li key={path}>
-                  <NavLink
-                    to={path}
-                    end={path === "/"}
-                    className={({ isActive }) =>
-                      `navItem ${isActive ? "active" : ""}`
-                    }
-                  >
-                    <span className="glyph">{icon}</span>
-                    <span className="navLabel">{label}</span>
-                  </NavLink>
-                </li>
-              ))}
-            </ul>
-          </li>
-        ))}
-      </ul>
-    </aside>
-  );
-}
diff --git a/src/components/SignatureCapture.css b/src/components/SignatureCapture.css
deleted file mode 100644
index 15f281f2..00000000
--- a/src/components/SignatureCapture.css
+++ /dev/null
@@ -1,125 +0,0 @@
-.sigOverlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.4);
-  z-index: 100000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.sigModal {
-  background: #fff;
-  border-radius: 8px;
-  width: 520px;
-  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
-}
-
-.sigHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 14px 20px;
-  border-bottom: 1px solid #eee;
-}
-
-.sigHeader h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.sigBody {
-  padding: 20px;
-}
-
-.sigModeTabs {
-  display: flex;
-  gap: 0;
-  margin-bottom: 16px;
-  border-bottom: 2px solid #e5e5e5;
-}
-
-.sigNameField {
-  margin-bottom: 12px;
-}
-
-.sigNameField label {
-  display: block;
-  font-size: 12px;
-  font-weight: 600;
-  color: #666;
-  margin-bottom: 4px;
-}
-
-.sigModeTab {
-  padding: 6px 16px;
-  border: none;
-  background: none;
-  font-size: 13px;
-  font-weight: 600;
-  color: #999;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -2px;
-}
-
-.sigModeTab.active {
-  color: #007bff;
-  border-bottom-color: #007bff;
-}
-
-.sigCanvasWrap {
-  position: relative;
-}
-
-.sigCanvas {
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  cursor: crosshair;
-  display: block;
-  width: 100%;
-  touch-action: none;
-}
-
-.sigClearBtn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  padding: 2px 10px;
-  font-size: 11px;
-  border: 1px solid #ddd;
-  background: #fff;
-  border-radius: 3px;
-  cursor: pointer;
-  color: #666;
-}
-
-.sigTypeWrap {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.sigTypeInput {
-  font-size: 16px;
-}
-
-.sigTypePreview {
-  padding: 20px;
-  text-align: center;
-  font-family: "Brush Script MT", "Segoe Script", cursive;
-  font-size: 36px;
-  color: #333;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  background: #fafafa;
-}
-
-.sigFooter {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 14px 20px;
-  border-top: 1px solid #eee;
-}
diff --git a/src/components/SignatureCapture.js b/src/components/SignatureCapture.js
deleted file mode 100644
index dc9e5ac0..00000000
--- a/src/components/SignatureCapture.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import ReactDOM from "react-dom";
-
-export default function SignatureCapture({ onSave, onClose, title }) {
-  const [mode, setMode] = useState("draw");
-  const [typedName, setTypedName] = useState("");
-  const [signerName, setSignerName] = useState("");
-  const canvasRef = useRef(null);
-  const isDrawing = useRef(false);
-
-  useEffect(() => {
-    if (mode === "draw" && canvasRef.current) {
-      const canvas = canvasRef.current;
-      const ctx = canvas.getContext("2d");
-      ctx.fillStyle = "#fff";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.strokeStyle = "#333";
-      ctx.lineWidth = 2;
-      ctx.lineCap = "round";
-    }
-  }, [mode]);
-
-  const getPos = (e) => {
-    const rect = canvasRef.current.getBoundingClientRect();
-    const touch = e.touches ? e.touches[0] : e;
-    return { x: touch.clientX - rect.left, y: touch.clientY - rect.top };
-  };
-
-  const startDraw = (e) => {
-    e.preventDefault();
-    isDrawing.current = true;
-    const ctx = canvasRef.current.getContext("2d");
-    const pos = getPos(e);
-    ctx.beginPath();
-    ctx.moveTo(pos.x, pos.y);
-  };
-
-  const draw = (e) => {
-    e.preventDefault();
-    if (!isDrawing.current) return;
-    const ctx = canvasRef.current.getContext("2d");
-    const pos = getPos(e);
-    ctx.lineTo(pos.x, pos.y);
-    ctx.stroke();
-  };
-
-  const stopDraw = () => { isDrawing.current = false; };
-
-  const clearCanvas = () => {
-    const ctx = canvasRef.current.getContext("2d");
-    ctx.fillStyle = "#fff";
-    ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-  };
-
-  const handleSave = () => {
-    if (!signerName.trim()) return;
-    if (mode === "draw") {
-      const dataUrl = canvasRef.current.toDataURL("image/png");
-      onSave(dataUrl, "drawn", signerName.trim());
-    } else {
-      onSave(typedName, "typed", signerName.trim());
-    }
-  };
-
-  return ReactDOM.createPortal(
-    <div className="sigOverlay" onClick={onClose}>
-      <div className="sigModal" onClick={(e) => e.stopPropagation()}>
-        <div className="sigHeader">
-          <h3>{title || "Capture Signature"}</h3>
-          <button className="woDispatchClose" onClick={onClose}>&times;</button>
-        </div>
-        <div className="sigBody">
-          <div className="sigNameField">
-            <label>Full Name</label>
-            <input
-              className="form-control"
-              value={signerName}
-              onChange={(e) => setSignerName(e.target.value)}
-              placeholder="Enter signer's full name"
-            />
-          </div>
-          <div className="sigModeTabs">
-            <button className={`sigModeTab ${mode === "draw" ? "active" : ""}`} onClick={() => setMode("draw")}>Draw</button>
-            <button className={`sigModeTab ${mode === "type" ? "active" : ""}`} onClick={() => setMode("type")}>Type</button>
-          </div>
-          {mode === "draw" ? (
-            <div className="sigCanvasWrap">
-              <canvas
-                ref={canvasRef}
-                width={460}
-                height={180}
-                className="sigCanvas"
-                onMouseDown={startDraw}
-                onMouseMove={draw}
-                onMouseUp={stopDraw}
-                onMouseLeave={stopDraw}
-                onTouchStart={startDraw}
-                onTouchMove={draw}
-                onTouchEnd={stopDraw}
-              />
-              <button className="sigClearBtn" onClick={clearCanvas}>Clear</button>
-            </div>
-          ) : (
-            <div className="sigTypeWrap">
-              <input
-                className="form-control sigTypeInput"
-                value={typedName}
-                onChange={(e) => setTypedName(e.target.value)}
-                placeholder="Type your name"
-              />
-              {typedName && <div className="sigTypePreview">{typedName}</div>}
-            </div>
-          )}
-        </div>
-        <div className="sigFooter">
-          <button className="btn btn-default" onClick={onClose}>Cancel</button>
-          <button className="btn btn-primary" onClick={handleSave} disabled={!signerName.trim() || (mode === "type" && !typedName.trim())}>Save Signature</button>
-        </div>
-      </div>
-    </div>,
-    document.body
-  );
-}
diff --git a/src/components/Topbar.js b/src/components/Topbar.js
deleted file mode 100644
index 7fa3fbaf..00000000
--- a/src/components/Topbar.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import ReactDOM from "react-dom";
-import { useNavigate } from "react-router-dom";
-import { useAuth } from "../hooks/useAuth";
-
-function NotificationDropdown() {
-  const [open, setOpen] = useState(false);
-  const btnRef = useRef(null);
-  const menuRef = useRef(null);
-  const [menuPos, setMenuPos] = useState({ top: 0, right: 0 });
-
-  useEffect(() => {
-    const handleClick = (e) => {
-      if (btnRef.current?.contains(e.target)) return;
-      if (menuRef.current?.contains(e.target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, []);
-
-  const handleOpen = () => {
-    if (btnRef.current) {
-      const rect = btnRef.current.getBoundingClientRect();
-      setMenuPos({ top: rect.bottom + 8, right: window.innerWidth - rect.right });
-    }
-    setOpen(!open);
-  };
-
-  return (
-    <>
-      <button ref={btnRef} className="topbarIconBtn" title="Notifications" onClick={handleOpen}>
-        <i className="fa fa-bell-o"></i>
-      </button>
-      {open && ReactDOM.createPortal(
-        <div ref={menuRef} className="notifDropdown" style={{ top: menuPos.top, right: menuPos.right }}>
-          <div className="notifHeader">Notifications</div>
-          <div className="notifEmpty">
-            <i className="fa fa-check-circle notifEmptyIcon"></i>
-            <span>No new notifications</span>
-          </div>
-        </div>,
-        document.body
-      )}
-    </>
-  );
-}
-
-function UserDropdown({ currentUser, onLogout, onNavigate }) {
-  const [open, setOpen] = useState(false);
-  const btnRef = useRef(null);
-  const menuRef = useRef(null);
-  const [menuPos, setMenuPos] = useState({ top: 0, right: 0 });
-
-  useEffect(() => {
-    const handleClick = (e) => {
-      if (btnRef.current?.contains(e.target)) return;
-      if (menuRef.current?.contains(e.target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, []);
-
-  const handleOpen = () => {
-    if (btnRef.current) {
-      const rect = btnRef.current.getBoundingClientRect();
-      setMenuPos({ top: rect.bottom + 8, right: window.innerWidth - rect.right });
-    }
-    setOpen(!open);
-  };
-
-  const handleItemClick = (action) => {
-    setOpen(false);
-    action();
-  };
-
-  return (
-    <>
-      <button ref={btnRef} className="topbarIconBtn" onClick={handleOpen} title={currentUser?.name || "User"}>
-        <i className="fa fa-user-o"></i>
-      </button>
-      {open && ReactDOM.createPortal(
-        <div ref={menuRef} className="userDropdown" style={{ top: menuPos.top, right: menuPos.right }}>
-          <div className="userHeader">
-            <i className="fa fa-user-circle"></i>
-            <div className="userInfo">
-              <div className="userName">{currentUser?.name || "User"}</div>
-              <div className="userEmail">{currentUser?.email || ""}</div>
-            </div>
-          </div>
-          <div className="userDivider"></div>
-          <button
-            className="userMenuItem"
-            onClick={() => handleItemClick(() => onNavigate("/settings"))}
-          >
-            <i className="fa fa-cog"></i>
-            <span>Settings</span>
-          </button>
-          <button
-            className="userMenuItem"
-            onClick={() => handleItemClick(onLogout)}
-          >
-            <i className="fa fa-sign-out"></i>
-            <span>Logout</span>
-          </button>
-        </div>,
-        document.body
-      )}
-    </>
-  );
-}
-
-export default function Topbar({ onToggleNav }) {
-  const navigate = useNavigate();
-  const { user, logout: performLogout } = useAuth();
-
-  const handleLogout = () => {
-    performLogout(); // This now uses Redux and automatically navigates
-  };
-
-  return (
-    <header className="topbar">
-      <div className="topLeft">
-        <button
-          className="hamburger"
-          onClick={onToggleNav}
-          aria-label="Toggle navigation"
-          type="button"
-        >
-          ☰
-        </button>
-      </div>
-
-      <div className="topRight">
-        <NotificationDropdown />
-        <div className="topbarDivider" />
-        <UserDropdown currentUser={user} onLogout={handleLogout} onNavigate={navigate} />
-      </div>
-    </header>
-  );
-}
diff --git a/src/components/auth/guest-route.tsx b/src/components/auth/guest-route.tsx
new file mode 100644
index 00000000..a7356c8c
--- /dev/null
+++ b/src/components/auth/guest-route.tsx
@@ -0,0 +1,29 @@
+import { Navigate } from "react-router";
+import { useAuthContext } from "@/providers/auth-context";
+import { Box, CircularProgress } from "@mui/material";
+
+interface GuestRouteProps {
+  children: React.ReactNode;
+}
+
+export function GuestRoute({ children }: GuestRouteProps) {
+  const { isAuthenticated, isLoading } = useAuthContext();
+
+  if (isLoading) {
+    return (
+      <Box
+        className="flex min-h-screen items-center justify-center"
+        role="status"
+        aria-label="Loading"
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+
+  return children;
+}
diff --git a/src/components/auth/protected-route.tsx b/src/components/auth/protected-route.tsx
new file mode 100644
index 00000000..b401622f
--- /dev/null
+++ b/src/components/auth/protected-route.tsx
@@ -0,0 +1,29 @@
+import { Navigate } from "react-router";
+import { Box, CircularProgress } from "@mui/material";
+import { useAuthContext } from "@/providers/auth-context";
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { isAuthenticated, isLoading } = useAuthContext();
+
+  if (isLoading) {
+    return (
+      <Box
+        className="flex min-h-screen items-center justify-center"
+        role="status"
+        aria-label="Loading"
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return children;
+}
diff --git a/src/components/common/address-autocomplete-field.tsx b/src/components/common/address-autocomplete-field.tsx
new file mode 100644
index 00000000..30e344c6
--- /dev/null
+++ b/src/components/common/address-autocomplete-field.tsx
@@ -0,0 +1,88 @@
+import { Autocomplete, TextField } from "@mui/material";
+import {
+  suggestAddresses,
+  type AddressParts,
+  type AddressSuggestion,
+} from "@/lib/address/vendor-address";
+
+type AddressAutocompleteFieldProps = {
+  value: string;
+  onInputChange: (value: string) => void;
+  /** Fired only when a candidate row is chosen, never while typing. */
+  onSelect: (parts: AddressParts) => void;
+  label?: string;
+  placeholder?: string;
+  required?: boolean;
+  error?: boolean;
+  helperText?: string;
+  disabled?: boolean;
+};
+
+/**
+ * Street Address input with mocked City/State completion.
+ *
+ * `freeSolo` is the whole point: typing without picking a row is a valid way to
+ * finish the field. The candidates are a convenience for filling City and State
+ * in one action, not a constraint on what the address may be.
+ *
+ * Shared rather than local to Vendors because Sites needs the identical control
+ * when it is built (SH-273).
+ */
+export function AddressAutocompleteField({
+  value,
+  onInputChange,
+  onSelect,
+  label = "Street Address",
+  placeholder = "Start typing the street address…",
+  required = false,
+  error = false,
+  helperText,
+  disabled = false,
+}: AddressAutocompleteFieldProps) {
+  return (
+    <Autocomplete<AddressSuggestion, false, false, true>
+      freeSolo
+      disabled={disabled}
+      options={suggestAddresses(value)}
+      // The options are already derived from the input; letting MUI filter them
+      // again would drop every row whose label does not literally contain the
+      // typed text.
+      filterOptions={(options) => options}
+      inputValue={value}
+      onInputChange={(_event, next, reason) => {
+        // Genuine typing and the clear control update the street. MUI also
+        // fires this callback with reason "reset" after a selection, carrying
+        // the option's full "<street>, <city>, <state>" label — forwarding
+        // that would overwrite the just-picked street with the label.
+        if (reason !== "input" && reason !== "clear") return;
+        onInputChange(next);
+      }}
+      onChange={(_event, selected) => {
+        if (selected && typeof selected !== "string") {
+          onSelect({ street: selected.street, city: selected.city, state: selected.state });
+          return;
+        }
+
+        if (selected === null) onSelect({ street: "", city: "", state: "" });
+      }}
+      getOptionLabel={(option) => (typeof option === "string" ? option : option.label)}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label={label}
+          placeholder={placeholder}
+          error={error}
+          helperText={helperText}
+          fullWidth
+          // Required is set on the input itself, never via MUI's `required`
+          // prop: this codebase spells the requirement in the label text and
+          // asserts that no generated asterisk renders anywhere.
+          slotProps={{
+            ...params.slotProps,
+            htmlInput: { ...params.slotProps?.htmlInput, required },
+          }}
+        />
+      )}
+    />
+  );
+}
diff --git a/src/components/common/address-map-preview.tsx b/src/components/common/address-map-preview.tsx
new file mode 100644
index 00000000..5d1892ce
--- /dev/null
+++ b/src/components/common/address-map-preview.tsx
@@ -0,0 +1,99 @@
+import { Box } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import {
+  buildAddressQuery,
+  hasCompleteAddress,
+  mapsEmbedUrl,
+  type AddressParts,
+} from "@/lib/address/vendor-address";
+
+type AddressMapPreviewProps = {
+  /** Structured parts, as held by a form or a detail view. */
+  address?: Partial<AddressParts>;
+  /**
+   * An already-composed address line, for callers that hold saved data rather
+   * than live input — the Work Order vendor dialog gets one string from the
+   * vendor dropdown payload. Ignored when `address` is given.
+   */
+  query?: string;
+  height?: number;
+  /**
+   * Render a compact accessible placeholder while the structured address is
+   * incomplete, instead of nothing. Meant for Add/Edit forms, where the empty
+   * state tells the dispatcher which parts the preview is still waiting on.
+   */
+  placeholderWhenIncomplete?: boolean;
+};
+
+const INCOMPLETE_PLACEHOLDER_MESSAGE =
+  "Map preview appears once Street, City, and State are all filled.";
+
+/**
+ * Small inline map for a structured address.
+ *
+ * Uses Google's keyless `output=embed` form deliberately: SH-271 asks for a
+ * preview with no API key, so there is no Maps JavaScript API, no Places
+ * request and no billing account behind this.
+ *
+ * Structured input renders nothing until Street, City and State are all
+ * present — a preview of a half-typed address points somewhere misleading,
+ * which is worse than no map. Add/Edit forms opt into a compact placeholder
+ * for that incomplete state; a pre-composed saved line is map-only and renders
+ * only when non-empty.
+ */
+export function AddressMapPreview({
+  address,
+  query: rawQuery,
+  height = 160,
+  placeholderWhenIncomplete = false,
+}: AddressMapPreviewProps) {
+  // Structured input is held to the completeness rule; a pre-composed line is
+  // saved data and only has to be non-empty.
+  const query = address ? buildAddressQuery(address) : (rawQuery ?? "").trim();
+  const complete = address ? hasCompleteAddress(address) : Boolean(query);
+
+  if (!complete) {
+    if (!(address != null && placeholderWhenIncomplete)) return null;
+    return (
+      <Box
+        role="status"
+        sx={{
+          borderRadius: 1,
+          border: "1px dashed",
+          borderColor: "divider",
+          minHeight: 56,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          px: 1.5,
+          py: 1,
+        }}
+      >
+        <Text variant="caption" tone="muted" sx={{ textAlign: "center" }}>
+          {INCOMPLETE_PLACEHOLDER_MESSAGE}
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        borderRadius: 1,
+        overflow: "hidden",
+        border: 1,
+        borderColor: "divider",
+        lineHeight: 0,
+      }}
+    >
+      <Box
+        component="iframe"
+        title={`Map of ${query}`}
+        src={mapsEmbedUrl({ street: query })}
+        loading="lazy"
+        referrerPolicy="no-referrer-when-downgrade"
+        sx={{ display: "block", width: "100%", height, border: 0 }}
+      />
+    </Box>
+  );
+}
diff --git a/src/components/common/brand-lockup.tsx b/src/components/common/brand-lockup.tsx
new file mode 100644
index 00000000..326d99ff
--- /dev/null
+++ b/src/components/common/brand-lockup.tsx
@@ -0,0 +1,65 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import { SeahavenMark } from "@/components/common/seahaven-mark";
+import { cn } from "@/lib/utils";
+
+type BrandLockupSize = "default" | "compact";
+
+export type BrandMarkProps = ComponentPropsWithoutRef<"div"> & {
+  size?: BrandLockupSize;
+};
+
+export function BrandMark({ size = "default", className, ...props }: BrandMarkProps) {
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-center justify-center bg-linear-to-br from-accent to-primary text-white shadow-(--shadow-brand-mark)",
+        size === "compact" ? "h-[26px] w-[26px] rounded-[7px]" : "h-[30px] w-[30px] rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      <SeahavenMark className={size === "compact" ? "h-4 w-4" : "h-[18px] w-[18px]"} />
+    </div>
+  );
+}
+
+export type BrandWordmarkProps = ComponentPropsWithoutRef<"div"> & {
+  size?: BrandLockupSize;
+};
+
+export function BrandWordmark({ size = "default", className, ...props }: BrandWordmarkProps) {
+  return (
+    <div className={cn("leading-none", className)} {...props}>
+      <div
+        className={cn(
+          "font-display font-extrabold tracking-[0.04em] text-foreground",
+          size === "compact" ? "text-md" : "text-[16px]",
+        )}
+      >
+        SEA HAVEN
+      </div>
+      <div
+        className={cn(
+          "mt-[3px] font-mono font-semibold tracking-[0.16em] text-muted-foreground",
+          size === "compact" ? "text-[7.5px]" : "text-[8px]",
+        )}
+      >
+        OPERATIONS CONSOLE
+      </div>
+    </div>
+  );
+}
+
+export type BrandLockupProps = ComponentPropsWithoutRef<"div"> & {
+  size?: BrandLockupSize;
+};
+
+export function BrandLockup({ className, size = "default", ...props }: BrandLockupProps) {
+  return (
+    <div className={cn("flex items-center justify-center gap-2.5", className)} {...props}>
+      <BrandMark size={size} />
+      <BrandWordmark size={size} />
+    </div>
+  );
+}
diff --git a/src/components/common/calendar/calendar-action-bar.tsx b/src/components/common/calendar/calendar-action-bar.tsx
new file mode 100644
index 00000000..3dfd0a1c
--- /dev/null
+++ b/src/components/common/calendar/calendar-action-bar.tsx
@@ -0,0 +1,140 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import AddIcon from "@mui/icons-material/Add";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import InboxIcon from "@mui/icons-material/Inbox";
+import { Box, Button, ButtonGroup, Menu, MenuItem, Stack, Typography } from "@mui/material";
+
+interface CalendarActionBarProps {
+  title: string;
+  onTodayClick: () => void;
+  onPrevClick: () => void;
+  onNextClick: () => void;
+  onViewChange: (view: string) => void;
+}
+
+export function CalendarActionBar({
+  title,
+  onTodayClick,
+  onPrevClick,
+  onNextClick,
+  onViewChange,
+}: CalendarActionBarProps) {
+  const navigate = useNavigate();
+  const [workspaceAnchor, setWorkspaceAnchor] = useState<HTMLElement | null>(null);
+  const [filterAnchor, setFilterAnchor] = useState<HTMLElement | null>(null);
+  const [workspace, setWorkspace] = useState("All");
+  const [eventType, setEventType] = useState("Events");
+
+  return (
+    <Box className="mb-4 rounded-lg border border-border bg-card p-3">
+      <Stack
+        direction={{ xs: "column", lg: "row" }}
+        spacing={2}
+        sx={{
+          alignItems: { xs: "stretch", lg: "center" },
+          justifyContent: "space-between",
+        }}
+      >
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            flexWrap: "wrap",
+            alignItems: "center",
+          }}
+        >
+          <Button
+            startIcon={<InboxIcon />}
+            onClick={(event) => setWorkspaceAnchor(event.currentTarget)}
+            variant="outlined"
+            size="small"
+          >
+            {workspace}
+          </Button>
+          <Menu
+            anchorEl={workspaceAnchor}
+            open={Boolean(workspaceAnchor)}
+            onClose={() => setWorkspaceAnchor(null)}
+          >
+            {["All", "Everyone else", "Only Me"].map((option) => (
+              <MenuItem
+                key={option}
+                onClick={() => {
+                  setWorkspace(option);
+                  setWorkspaceAnchor(null);
+                }}
+              >
+                {option}
+              </MenuItem>
+            ))}
+          </Menu>
+
+          <Button
+            startIcon={<FilterListIcon />}
+            onClick={(event) => setFilterAnchor(event.currentTarget)}
+            variant="outlined"
+            size="small"
+          >
+            {eventType}
+          </Button>
+          <Menu
+            anchorEl={filterAnchor}
+            open={Boolean(filterAnchor)}
+            onClose={() => setFilterAnchor(null)}
+          >
+            {["Events", "Follow Ups", "Work Orders"].map((option) => (
+              <MenuItem
+                key={option}
+                onClick={() => {
+                  setEventType(option);
+                  setFilterAnchor(null);
+                }}
+              >
+                {option}
+              </MenuItem>
+            ))}
+          </Menu>
+
+          <Button
+            startIcon={<AddIcon />}
+            variant="contained"
+            size="small"
+            onClick={() => navigate("/calendar/new")}
+          >
+            New Event
+          </Button>
+        </Stack>
+
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: "center",
+            flexWrap: "wrap",
+          }}
+        >
+          <Typography variant="h6" className="min-w-[180px]">
+            {title}
+          </Typography>
+          <Button size="small" onClick={onTodayClick}>
+            Today
+          </Button>
+          <Button size="small" onClick={onPrevClick}>
+            <ChevronLeftIcon />
+          </Button>
+          <Button size="small" onClick={onNextClick}>
+            <ChevronRightIcon />
+          </Button>
+          <ButtonGroup size="small" variant="outlined">
+            <Button onClick={() => onViewChange("dayGridMonth")}>Month</Button>
+            <Button onClick={() => onViewChange("timeGridWeek")}>Week</Button>
+            <Button onClick={() => onViewChange("timeGridDay")}>Day</Button>
+          </ButtonGroup>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+}
diff --git a/src/components/common/calendar/calendar-utils.ts b/src/components/common/calendar/calendar-utils.ts
new file mode 100644
index 00000000..13fe5f25
--- /dev/null
+++ b/src/components/common/calendar/calendar-utils.ts
@@ -0,0 +1,151 @@
+import type { CalendarEvent, CalendarEventColor } from "@/domain/calendar/types/calendar-event";
+import type { EventInput } from "@fullcalendar/core";
+
+const COLOR_VAR: Record<CalendarEventColor, string> = {
+  primary: "--primary",
+  success: "--success",
+  info: "--accent",
+  warning: "--warning",
+  danger: "--destructive",
+};
+
+const COLOR_HEX_FALLBACK: Record<CalendarEventColor, string> = {
+  primary: "#1c75bc",
+  success: "#00a79d",
+  info: "#27aae1",
+  warning: "#d97706",
+  danger: "#dc2626",
+};
+
+export function getCalendarColorHex(colorName: string): string {
+  const key = colorName as CalendarEventColor;
+  const cssVar = COLOR_VAR[key] ?? COLOR_VAR.primary;
+
+  if (typeof document !== "undefined") {
+    const value = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
+    if (value) {
+      return value;
+    }
+  }
+
+  return COLOR_HEX_FALLBACK[key] ?? COLOR_HEX_FALLBACK.primary;
+}
+
+export function convertTimeToIso(timeStr: string): string {
+  if (!timeStr) {
+    return "00:00:00";
+  }
+
+  const [time, period] = timeStr.split(" ");
+  const [hoursRaw, minutes] = time.split(":");
+  let hours = Number.parseInt(hoursRaw, 10);
+
+  if (period === "PM" && hours !== 12) {
+    hours += 12;
+  } else if (period === "AM" && hours === 12) {
+    hours = 0;
+  }
+
+  return `${hours.toString().padStart(2, "0")}:${minutes}:00`;
+}
+
+export function mapEventToFullCalendar(event: CalendarEvent): EventInput {
+  const startDateOnly = event.startDate?.split("T")[0] ?? event.startDate?.substring(0, 10);
+  const endDateOnly = event.endDate?.split("T")[0] ?? event.endDate?.substring(0, 10);
+
+  let startValue: string;
+  let endValue: string;
+
+  if (event.allDay) {
+    startValue = startDateOnly;
+    const endDate = new Date(endDateOnly);
+    endDate.setDate(endDate.getDate() + 1);
+    endValue = endDate.toISOString().split("T")[0];
+  } else {
+    startValue = `${startDateOnly}T${convertTimeToIso(event.startTime)}`;
+    endValue = `${endDateOnly}T${convertTimeToIso(event.endTime)}`;
+  }
+
+  const color = getCalendarColorHex(event.eventColor);
+
+  return {
+    id: String(event.id),
+    title: event.title,
+    start: startValue,
+    end: endValue,
+    allDay: event.allDay,
+    backgroundColor: color,
+    borderColor: color,
+    extendedProps: {
+      description: event.description,
+      location: event.location,
+      eventColor: event.eventColor,
+      rawEvent: event,
+    },
+  };
+}
+
+export const CALENDAR_TIME_OPTIONS = [
+  "12:00 AM",
+  "12:30 AM",
+  "01:00 AM",
+  "01:30 AM",
+  "02:00 AM",
+  "02:30 AM",
+  "03:00 AM",
+  "03:30 AM",
+  "04:00 AM",
+  "04:30 AM",
+  "05:00 AM",
+  "05:30 AM",
+  "06:00 AM",
+  "06:30 AM",
+  "07:00 AM",
+  "07:30 AM",
+  "08:00 AM",
+  "08:30 AM",
+  "09:00 AM",
+  "09:30 AM",
+  "10:00 AM",
+  "10:30 AM",
+  "11:00 AM",
+  "11:30 AM",
+  "12:00 PM",
+  "12:30 PM",
+  "01:00 PM",
+  "01:30 PM",
+  "02:00 PM",
+  "02:30 PM",
+  "03:00 PM",
+  "03:30 PM",
+  "04:00 PM",
+  "04:30 PM",
+  "05:00 PM",
+  "05:30 PM",
+  "06:00 PM",
+  "06:30 PM",
+  "07:00 PM",
+  "07:30 PM",
+  "08:00 PM",
+  "08:30 PM",
+  "09:00 PM",
+  "09:30 PM",
+  "10:00 PM",
+  "10:30 PM",
+  "11:00 PM",
+  "11:30 PM",
+] as const;
+
+export const CALENDAR_REMINDER_OPTIONS = [
+  { value: 0, label: "Never" },
+  { value: 5, label: "5 minutes before" },
+  { value: 10, label: "10 minutes before" },
+  { value: 15, label: "15 minutes before" },
+  { value: 30, label: "30 minutes before" },
+  { value: 60, label: "1 hour before" },
+  { value: 120, label: "2 hours before" },
+  { value: 240, label: "4 hours before" },
+  { value: 360, label: "6 hours before" },
+  { value: 720, label: "12 hours before" },
+  { value: 1440, label: "1 day before" },
+] as const;
diff --git a/src/components/common/calendar/event-calendar.tsx b/src/components/common/calendar/event-calendar.tsx
new file mode 100644
index 00000000..0616c81b
--- /dev/null
+++ b/src/components/common/calendar/event-calendar.tsx
@@ -0,0 +1,56 @@
+import { forwardRef } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import type { DatesSetArg, EventClickArg } from "@fullcalendar/core";
+import type { DateClickArg } from "@fullcalendar/interaction";
+import type { EventInput } from "@fullcalendar/core";
+import { Box, CircularProgress } from "@mui/material";
+
+interface EventCalendarProps {
+  events: EventInput[];
+  loading?: boolean;
+  onDatesSet: (info: DatesSetArg) => void;
+  onEventClick: (info: EventClickArg) => void;
+  onDateClick: (info: DateClickArg) => void;
+}
+
+export const EventCalendar = forwardRef<FullCalendar, EventCalendarProps>(function EventCalendar(
+  { events, loading, onDatesSet, onEventClick, onDateClick },
+  ref,
+) {
+  return (
+    <Box className="relative rounded-lg border border-border bg-card p-3">
+      {Boolean(loading) && (
+        <Box className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 bg-white/70">
+          <CircularProgress size={32} />
+        </Box>
+      )}
+
+      <FullCalendar
+        ref={ref}
+        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+        initialView="dayGridMonth"
+        headerToolbar={false}
+        events={events}
+        editable={false}
+        selectable
+        selectMirror
+        dayMaxEvents
+        weekends
+        datesSet={onDatesSet}
+        eventClick={onEventClick}
+        dateClick={onDateClick}
+        height="auto"
+        fixedWeekCount={false}
+        showNonCurrentDates
+        eventTimeFormat={{
+          hour: "2-digit",
+          minute: "2-digit",
+          meridiem: "short",
+        }}
+      />
+    </Box>
+  );
+});
diff --git a/src/components/common/comment-body-with-mentions.tsx b/src/components/common/comment-body-with-mentions.tsx
new file mode 100644
index 00000000..a7566e70
--- /dev/null
+++ b/src/components/common/comment-body-with-mentions.tsx
@@ -0,0 +1,44 @@
+import { useMemo } from "react";
+import { Box } from "@mui/material";
+import { Text } from "@/components/ui/text";
+import {
+  buildCommentBodySegments,
+  type MentionLookup,
+} from "@/domain/work-orders/utils/comment-mentions";
+
+type CommentBodyWithMentionsProps = {
+  text: string;
+  mentions?: string[];
+  users?: MentionLookup[];
+};
+
+export function CommentBodyWithMentions({ text, mentions, users }: CommentBodyWithMentionsProps) {
+  const segments = useMemo(
+    () => buildCommentBodySegments(text, mentions, users),
+    [text, mentions, users],
+  );
+
+  if (segments.length === 0) {
+    return null;
+  }
+
+  return (
+    <Text variant="description" as="span">
+      {segments.map((segment, index) => {
+        if (segment.type === "text") {
+          return <span key={`text-${index}`}>{segment.value}</span>;
+        }
+
+        return (
+          <Box
+            component="span"
+            key={`mention-${segment.userId}-${index}`}
+            className="font-semibold text-primary"
+          >
+            @{segment.label}
+          </Box>
+        );
+      })}
+    </Text>
+  );
+}
diff --git a/src/components/common/comment-mention-composer.tsx b/src/components/common/comment-mention-composer.tsx
new file mode 100644
index 00000000..140753b0
--- /dev/null
+++ b/src/components/common/comment-mention-composer.tsx
@@ -0,0 +1,205 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  Box,
+  ClickAwayListener,
+  List,
+  ListItemButton,
+  Paper,
+  Popper,
+  TextField,
+} from "@mui/material";
+import {
+  filterMentionCandidates,
+  findActiveMentionQuery,
+  insertMentionToken,
+  type MentionLookup,
+} from "@/domain/work-orders/utils/comment-mentions";
+
+type CommentMentionComposerProps = {
+  value: string;
+  onChange: (value: string) => void;
+  candidates: MentionLookup[];
+  placeholder?: string;
+  disabled?: boolean;
+  rows?: number;
+  onSubmit?: () => void;
+};
+
+type MentionCandidateMenuProps = {
+  open: boolean;
+  anchorEl: HTMLElement | null;
+  candidates: MentionLookup[];
+  highlightIndex: number;
+  onSelect: (user: MentionLookup) => void;
+};
+
+function MentionCandidateMenu({
+  open,
+  anchorEl,
+  candidates,
+  highlightIndex,
+  onSelect,
+}: MentionCandidateMenuProps) {
+  return (
+    <Popper open={open} anchorEl={anchorEl} placement="bottom-start" className="z-50">
+      <Paper elevation={4} className="mt-1 max-h-48 overflow-y-auto">
+        <List dense disablePadding>
+          {candidates.map((candidate, index) => (
+            <ListItemButton
+              key={String(candidate.id)}
+              selected={index === highlightIndex}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => onSelect(candidate)}
+            >
+              @{candidate.name}
+            </ListItemButton>
+          ))}
+        </List>
+      </Paper>
+    </Popper>
+  );
+}
+
+export function CommentMentionComposer({
+  value,
+  onChange,
+  candidates,
+  placeholder = "Type a comment...",
+  disabled = false,
+  rows = 2,
+  onSubmit,
+}: CommentMentionComposerProps) {
+  const inputRef = useRef<HTMLTextAreaElement | HTMLInputElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [cursor, setCursor] = useState(0);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [highlightIndex, setHighlightIndex] = useState(0);
+
+  const activeQuery = useMemo(() => findActiveMentionQuery(value, cursor), [value, cursor]);
+
+  const filteredCandidates = useMemo(
+    () => filterMentionCandidates(candidates, activeQuery?.query ?? ""),
+    [activeQuery?.query, candidates],
+  );
+
+  const showMenu = Boolean(menuOpen && activeQuery && filteredCandidates.length > 0);
+
+  useEffect(() => {
+    setHighlightIndex(0);
+  }, [activeQuery?.query, activeQuery?.start]);
+
+  const syncCursor = useCallback((textOverride?: string) => {
+    const element = inputRef.current;
+    if (!element) {
+      return;
+    }
+
+    const text = textOverride ?? element.value;
+    const nextCursor = element.selectionStart ?? text.length;
+    setCursor(nextCursor);
+    setMenuOpen(Boolean(findActiveMentionQuery(text, nextCursor)));
+  }, []);
+
+  const handleChange = (nextValue: string) => {
+    onChange(nextValue);
+    requestAnimationFrame(() => {
+      syncCursor(nextValue);
+    });
+  };
+
+  const applyMention = useCallback(
+    (user: MentionLookup) => {
+      if (!activeQuery) {
+        return;
+      }
+
+      const { nextText, nextCursor } = insertMentionToken(value, activeQuery.start, cursor, user);
+      onChange(nextText);
+      setMenuOpen(false);
+      setHighlightIndex(0);
+
+      requestAnimationFrame(() => {
+        const element = inputRef.current;
+        if (!element) {
+          return;
+        }
+        element.focus();
+        element.setSelectionRange(nextCursor, nextCursor);
+        setCursor(nextCursor);
+      });
+    },
+    [activeQuery, cursor, onChange, value],
+  );
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (showMenu) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setHighlightIndex((current) => (current + 1) % filteredCandidates.length);
+        return;
+      }
+
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setHighlightIndex(
+          (current) => (current - 1 + filteredCandidates.length) % filteredCandidates.length,
+        );
+        return;
+      }
+
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        const selected = filteredCandidates[highlightIndex];
+        if (selected) {
+          applyMention(selected);
+        }
+        return;
+      }
+
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setMenuOpen(false);
+        return;
+      }
+    }
+
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && onSubmit) {
+      event.preventDefault();
+      onSubmit();
+    }
+  };
+
+  return (
+    <ClickAwayListener onClickAway={() => setMenuOpen(false)}>
+      <Box
+        className="relative"
+        ref={(node: HTMLDivElement | null) => {
+          setAnchorEl(node);
+        }}
+      >
+        <TextField
+          inputRef={inputRef}
+          multiline
+          rows={rows}
+          fullWidth
+          value={value}
+          onChange={(event) => handleChange(event.target.value)}
+          onClick={() => syncCursor()}
+          onKeyUp={() => syncCursor()}
+          onSelect={() => syncCursor()}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled}
+        />
+
+        <MentionCandidateMenu
+          open={showMenu}
+          anchorEl={anchorEl}
+          candidates={filteredCandidates}
+          highlightIndex={highlightIndex}
+          onSelect={applyMention}
+        />
+      </Box>
+    </ClickAwayListener>
+  );
+}
diff --git a/src/components/common/comment-timeline-mappers.ts b/src/components/common/comment-timeline-mappers.ts
new file mode 100644
index 00000000..324e1230
--- /dev/null
+++ b/src/components/common/comment-timeline-mappers.ts
@@ -0,0 +1,24 @@
+import type { CommentTimelineItem } from "./comment-timeline";
+
+type CommentSource = {
+  id: string | number;
+  userName?: string;
+  commenter?: string | null;
+  createdDate?: string;
+  commenttext: string;
+  mentions?: string[];
+};
+
+export function mapWorkOrderCommentsToTimeline(comments: CommentSource[]): CommentTimelineItem[] {
+  return comments.map((comment) => ({
+    id: comment.id,
+    author: comment.userName || comment.commenter || "System",
+    createdAt: comment.createdDate,
+    body: comment.commenttext,
+    mentions: comment.mentions,
+  }));
+}
+
+export function mapDispatchCommentsToTimeline(comments: CommentSource[]): CommentTimelineItem[] {
+  return mapWorkOrderCommentsToTimeline(comments);
+}
diff --git a/src/components/common/comment-timeline.tsx b/src/components/common/comment-timeline.tsx
new file mode 100644
index 00000000..4f9c9dea
--- /dev/null
+++ b/src/components/common/comment-timeline.tsx
@@ -0,0 +1,59 @@
+import { useMemo } from "react";
+import { Box, Stack } from "@mui/material";
+import { CommentBodyWithMentions } from "@/components/common/comment-body-with-mentions";
+import { Text } from "@/components/ui/text";
+import type { MentionLookup } from "@/domain/work-orders/utils/comment-mentions";
+import { formatDateTime } from "@/lib/time-utils";
+
+export type CommentTimelineItem = {
+  id: string | number;
+  author: string;
+  createdAt?: string;
+  body: string;
+  mentions?: string[];
+};
+
+type CommentTimelineProps = {
+  items: CommentTimelineItem[];
+  emptyMessage?: string;
+  maxHeightClass?: string;
+  mentionUsers?: MentionLookup[];
+};
+export function CommentTimeline({
+  items,
+  emptyMessage = "No comments yet.",
+  maxHeightClass = "max-h-72",
+  mentionUsers,
+}: CommentTimelineProps) {
+  const sorted = useMemo(
+    () =>
+      [...items].sort((a, b) => {
+        const aTime = a.createdAt ? new Date(a.createdAt).getTime() : 0;
+        const bTime = b.createdAt ? new Date(b.createdAt).getTime() : 0;
+        return aTime - bTime;
+      }),
+    [items],
+  );
+
+  if (!sorted.length) {
+    return <Text tone="muted">{emptyMessage}</Text>;
+  }
+
+  return (
+    <Stack spacing={2} className={`${maxHeightClass} overflow-y-auto`}>
+      {sorted.map((item) => (
+        <Box key={String(item.id)} className="rounded border border-border p-3">
+          <Stack direction="row" className="mb-1" sx={{ justifyContent: "space-between" }}>
+            <Text variant="caption" className="font-semibold">
+              {item.author}
+            </Text>
+            <Text variant="caption" tone="muted">
+              {item.createdAt ? formatDateTime(item.createdAt) : ""}
+            </Text>
+          </Stack>
+          <CommentBodyWithMentions text={item.body} mentions={item.mentions} users={mentionUsers} />
+        </Box>
+      ))}
+    </Stack>
+  );
+}
diff --git a/src/components/common/detail-field.tsx b/src/components/common/detail-field.tsx
new file mode 100644
index 00000000..6ab3a448
--- /dev/null
+++ b/src/components/common/detail-field.tsx
@@ -0,0 +1,36 @@
+import { Box, Typography } from "@mui/material";
+
+type DetailFieldHighlight = "green" | "yellow" | "red";
+
+type DetailFieldProps = {
+  label: string;
+  value: string;
+  className?: string;
+  highlight?: DetailFieldHighlight | "";
+};
+
+export function DetailField({ label, value, className, highlight }: DetailFieldProps) {
+  const colorClass =
+    highlight === "green"
+      ? "text-green-600"
+      : highlight === "yellow"
+        ? "text-yellow-600"
+        : highlight === "red"
+          ? "text-red-600"
+          : undefined;
+
+  return (
+    <Box className={className}>
+      <Typography variant="caption" color="text.secondary" sx={{ display: "block" }}>
+        {label}
+      </Typography>
+      <Typography variant="body2" className={colorClass}>
+        {value}
+      </Typography>
+    </Box>
+  );
+}
+
+export function DetailFieldGrid({ children }: { children: React.ReactNode }) {
+  return <Box className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">{children}</Box>;
+}
diff --git a/src/components/common/seahaven-mark.tsx b/src/components/common/seahaven-mark.tsx
new file mode 100644
index 00000000..ea460057
--- /dev/null
+++ b/src/components/common/seahaven-mark.tsx
@@ -0,0 +1,24 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export function SeahavenMark({ className, ...props }: ComponentPropsWithoutRef<"svg">) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="#ffffff"
+      strokeWidth={2.4}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={cn(className)}
+      {...props}
+    >
+      <path d="M2 12q2.5 2 5 0t5 0 5 0 5 0" />
+      <path d="M2 19q2.5 2 5 0t5 0 5 0 5 0" />
+      <path d="M2 5q2.5 2 5 0t5 0 5 0 5 0" />
+    </svg>
+  );
+}
diff --git a/src/components/common/settings-nav.tsx b/src/components/common/settings-nav.tsx
new file mode 100644
index 00000000..dc94e074
--- /dev/null
+++ b/src/components/common/settings-nav.tsx
@@ -0,0 +1,29 @@
+import { NavLink } from "react-router";
+import { Stack } from "@mui/material";
+
+const SETTINGS_LINKS = [
+  { path: "/settings/dropdowns", label: "Dropdown Options" },
+  { path: "/settings/task-templates", label: "Task Templates" },
+] as const;
+
+export function SettingsNav() {
+  return (
+    <Stack direction="row" className="mb-5 border-b-2 border-border">
+      {SETTINGS_LINKS.map((link) => (
+        <NavLink
+          key={link.path}
+          to={link.path}
+          className={({ isActive }) =>
+            `px-5 py-2 text-sm font-semibold no-underline border-b-2 -mb-0.5 transition-colors ${
+              isActive
+                ? "text-primary border-primary"
+                : "text-muted-foreground border-transparent hover:text-foreground"
+            }`
+          }
+        >
+          {link.label}
+        </NavLink>
+      ))}
+    </Stack>
+  );
+}
diff --git a/src/components/common/signature-capture-fields.tsx b/src/components/common/signature-capture-fields.tsx
new file mode 100644
index 00000000..43e68eb6
--- /dev/null
+++ b/src/components/common/signature-capture-fields.tsx
@@ -0,0 +1,91 @@
+import { Box, Button, Tab, Tabs, TextField, Typography } from "@mui/material";
+import type { RefObject } from "react";
+
+interface SignatureCaptureFieldsProps {
+  isPending: boolean;
+  mode: "draw" | "type";
+  onModeChange: (mode: "draw" | "type") => void;
+  signerName: string;
+  onSignerNameChange: (value: string) => void;
+  typedName: string;
+  onTypedNameChange: (value: string) => void;
+  canvasRef: RefObject<HTMLCanvasElement | null>;
+  startDraw: (event: React.MouseEvent | React.TouchEvent) => void;
+  draw: (event: React.MouseEvent | React.TouchEvent) => void;
+  stopDraw: () => void;
+  clearCanvas: () => void;
+}
+
+export function SignatureCaptureFields({
+  isPending,
+  mode,
+  onModeChange,
+  signerName,
+  onSignerNameChange,
+  typedName,
+  onTypedNameChange,
+  canvasRef,
+  startDraw,
+  draw,
+  stopDraw,
+  clearCanvas,
+}: SignatureCaptureFieldsProps) {
+  return (
+    <>
+      <TextField
+        label="Full Name"
+        value={signerName}
+        onChange={(event) => onSignerNameChange(event.target.value)}
+        placeholder="Enter signer's full name"
+        fullWidth
+        size="small"
+        disabled={isPending}
+      />
+
+      <Tabs value={mode} onChange={(_event, value: "draw" | "type") => onModeChange(value)}>
+        <Tab label="Draw" value="draw" disabled={isPending} />
+        <Tab label="Type" value="type" disabled={isPending} />
+      </Tabs>
+
+      {mode === "draw" ? (
+        <Box className="relative">
+          <canvas
+            ref={canvasRef}
+            width={460}
+            height={180}
+            className="block w-full cursor-crosshair rounded border border-border bg-background"
+            onMouseDown={isPending ? undefined : startDraw}
+            onMouseMove={isPending ? undefined : draw}
+            onMouseUp={isPending ? undefined : stopDraw}
+            onMouseLeave={isPending ? undefined : stopDraw}
+            onTouchStart={isPending ? undefined : startDraw}
+            onTouchMove={isPending ? undefined : draw}
+            onTouchEnd={isPending ? undefined : stopDraw}
+          />
+          <Button size="small" onClick={clearCanvas} className="mt-2" disabled={isPending}>
+            Clear
+          </Button>
+        </Box>
+      ) : (
+        <Box className="flex flex-col gap-2">
+          <TextField
+            value={typedName}
+            onChange={(event) => onTypedNameChange(event.target.value)}
+            placeholder="Type your name"
+            fullWidth
+            size="small"
+            disabled={isPending}
+          />
+          {Boolean(typedName) && (
+            <Typography
+              variant="h5"
+              className="rounded border border-dashed border-border px-4 py-6 text-center italic"
+            >
+              {typedName}
+            </Typography>
+          )}
+        </Box>
+      )}
+    </>
+  );
+}
diff --git a/src/components/common/signature-capture.tsx b/src/components/common/signature-capture.tsx
new file mode 100644
index 00000000..c7360b9d
--- /dev/null
+++ b/src/components/common/signature-capture.tsx
@@ -0,0 +1,97 @@
+import { guardDialogClose } from "@/lib/dialog-guard";
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import CloseIcon from "@mui/icons-material/Close";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+} from "@mui/material";
+import { SignatureCaptureFields } from "@/components/common/signature-capture-fields";
+import { useSignatureCanvas } from "@/components/common/use-signature-canvas";
+
+interface SignatureCaptureProps {
+  title?: string;
+  onClose: () => void;
+  onSave: (signature: string, method: "drawn" | "typed", name: string) => void;
+  isPending?: boolean;
+}
+
+export function SignatureCapture({
+  onClose,
+  onSave,
+  title,
+  isPending = false,
+}: SignatureCaptureProps) {
+  const [mode, setMode] = useState<"draw" | "type">("draw");
+  const [typedName, setTypedName] = useState("");
+  const [signerName, setSignerName] = useState("");
+  const { canvasRef, startDraw, draw, stopDraw, clearCanvas } = useSignatureCanvas(mode);
+
+  const handleSave = () => {
+    if (isPending || !signerName.trim()) {
+      return;
+    }
+
+    if (mode === "draw") {
+      const canvas = canvasRef.current;
+      if (!canvas) {
+        return;
+      }
+      onSave(canvas.toDataURL("image/png"), "drawn", signerName.trim());
+      return;
+    }
+
+    if (!typedName.trim()) {
+      return;
+    }
+
+    onSave(typedName, "typed", signerName.trim());
+  };
+
+  const dialog = (
+    <Dialog open onClose={guardDialogClose(isPending, onClose)} maxWidth="sm" fullWidth>
+      <DialogTitle className="flex items-center justify-between pr-2">
+        {title || "Capture Signature"}
+        <IconButton aria-label="Close" onClick={onClose} size="small" disabled={isPending}>
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </DialogTitle>
+
+      <DialogContent className="flex flex-col gap-4">
+        <SignatureCaptureFields
+          isPending={isPending}
+          mode={mode}
+          onModeChange={setMode}
+          signerName={signerName}
+          onSignerNameChange={setSignerName}
+          typedName={typedName}
+          onTypedNameChange={setTypedName}
+          canvasRef={canvasRef}
+          startDraw={startDraw}
+          draw={draw}
+          stopDraw={stopDraw}
+          clearCanvas={clearCanvas}
+        />
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose} disabled={isPending}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          onClick={handleSave}
+          disabled={isPending || !signerName.trim() || (mode === "type" && !typedName.trim())}
+        >
+          {isPending ? "Saving…" : "Save Signature"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+
+  return createPortal(dialog, document.body);
+}
diff --git a/src/components/common/use-signature-canvas.ts b/src/components/common/use-signature-canvas.ts
new file mode 100644
index 00000000..8d8904c8
--- /dev/null
+++ b/src/components/common/use-signature-canvas.ts
@@ -0,0 +1,85 @@
+import { CSS_VAR_FALLBACKS, getCssVar } from "@/lib/theme/css-vars";
+import { useEffect, useRef } from "react";
+
+export function useSignatureCanvas(mode: "draw" | "type") {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const isDrawing = useRef(false);
+
+  useEffect(() => {
+    if (mode !== "draw" || !canvasRef.current) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    ctx.fillStyle = getCssVar("--background", CSS_VAR_FALLBACKS.background);
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.strokeStyle = getCssVar("--foreground", CSS_VAR_FALLBACKS.foreground);
+    ctx.lineWidth = 2;
+    ctx.lineCap = "round";
+  }, [mode]);
+
+  const getPos = (event: React.MouseEvent | React.TouchEvent) => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return { x: 0, y: 0 };
+    }
+    const rect = canvas.getBoundingClientRect();
+    const touch = "touches" in event ? event.touches[0] : event;
+    if (!touch) {
+      return { x: 0, y: 0 };
+    }
+    return { x: touch.clientX - rect.left, y: touch.clientY - rect.top };
+  };
+
+  const startDraw = (event: React.MouseEvent | React.TouchEvent) => {
+    event.preventDefault();
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    isDrawing.current = true;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    const pos = getPos(event);
+    ctx.beginPath();
+    ctx.moveTo(pos.x, pos.y);
+  };
+
+  const draw = (event: React.MouseEvent | React.TouchEvent) => {
+    event.preventDefault();
+    if (!isDrawing.current || !canvasRef.current) {
+      return;
+    }
+    const ctx = canvasRef.current.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    const pos = getPos(event);
+    ctx.lineTo(pos.x, pos.y);
+    ctx.stroke();
+  };
+
+  const stopDraw = () => {
+    isDrawing.current = false;
+  };
+
+  const clearCanvas = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    ctx.fillStyle = getCssVar("--background", CSS_VAR_FALLBACKS.background);
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  };
+
+  return { canvasRef, startDraw, draw, stopDraw, clearCanvas };
+}
diff --git a/src/components/domain/doc-badge.tsx b/src/components/domain/doc-badge.tsx
new file mode 100644
index 00000000..b9bdfca3
--- /dev/null
+++ b/src/components/domain/doc-badge.tsx
@@ -0,0 +1,53 @@
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import RemoveIcon from "@mui/icons-material/Remove";
+
+export type DocVariant = "yes" | "no" | "nn";
+
+const DOC_TOKENS: Record<DocVariant, { bg: string; text: string }> = {
+  yes: { bg: "var(--doc-yes-bg)", text: "var(--doc-yes-text)" },
+  no: { bg: "var(--doc-no-bg)", text: "var(--doc-no-text)" },
+  nn: { bg: "var(--doc-nn-bg)", text: "var(--doc-nn-text)" },
+};
+
+const DOC_LABELS: Record<DocVariant, string> = {
+  yes: "Yes",
+  no: "No",
+  nn: "N/A",
+};
+
+type DocBadgeProps = {
+  variant: DocVariant;
+  label?: string;
+  showIcon?: boolean;
+};
+
+export function DocBadge({ variant, label, showIcon = true }: DocBadgeProps) {
+  const tokens = DOC_TOKENS[variant];
+
+  const icon =
+    variant === "yes" ? (
+      <CheckIcon sx={{ fontSize: 11 }} />
+    ) : variant === "no" ? (
+      <CloseIcon sx={{ fontSize: 11 }} />
+    ) : (
+      <RemoveIcon sx={{ fontSize: 11 }} />
+    );
+
+  return (
+    <span
+      className="inline-flex items-center gap-1"
+      style={{
+        fontSize: 12,
+        fontWeight: 500,
+        padding: "3px 8px",
+        borderRadius: 4,
+        background: tokens.bg,
+        color: tokens.text,
+      }}
+    >
+      {showIcon && icon}
+      {label ?? DOC_LABELS[variant]}
+    </span>
+  );
+}
diff --git a/src/components/domain/status-badge-utils.ts b/src/components/domain/status-badge-utils.ts
new file mode 100644
index 00000000..9305f6da
--- /dev/null
+++ b/src/components/domain/status-badge-utils.ts
@@ -0,0 +1,31 @@
+import type { StatusVariant } from "./status-badge";
+
+/** Maps API / legacy status strings to Sea Haven status variants. */
+const STATUS_ALIASES: Record<string, StatusVariant> = {
+  open: "incomplete",
+  incomplete: "incomplete",
+  pending: "pending",
+  scheduled: "scheduled",
+  "in route": "inroute",
+  inroute: "inroute",
+  "on site": "onsite",
+  onsite: "onsite",
+  "in progress": "inprogress",
+  inprogress: "inprogress",
+  done: "completed",
+  completed: "completed",
+  complete: "completed",
+  rescheduled: "rescheduled",
+  cancelled: "canceled",
+  canceled: "canceled",
+  "on hold": "pending",
+  "pending quote": "pendingquote",
+  pendingquote: "pendingquote",
+  "past due": "pastdue",
+  pastdue: "pastdue",
+};
+
+export function resolveStatusVariant(status: string): StatusVariant | null {
+  const key = status.trim().toLowerCase();
+  return STATUS_ALIASES[key] ?? null;
+}
diff --git a/src/components/domain/status-badge.tsx b/src/components/domain/status-badge.tsx
new file mode 100644
index 00000000..a9b181e3
--- /dev/null
+++ b/src/components/domain/status-badge.tsx
@@ -0,0 +1,79 @@
+import { resolveStatusVariant } from "./status-badge-utils";
+
+export type StatusVariant =
+  | "incomplete"
+  | "pending"
+  | "scheduled"
+  | "inroute"
+  | "onsite"
+  | "inprogress"
+  | "completed"
+  | "rescheduled"
+  | "canceled"
+  | "pendingquote"
+  | "pastdue";
+
+const STATUS_TOKENS: Record<StatusVariant, { bg: string; text: string }> = {
+  incomplete: { bg: "var(--status-incomplete-bg)", text: "var(--status-incomplete-text)" },
+  pending: { bg: "var(--status-pending-bg)", text: "var(--status-pending-text)" },
+  scheduled: { bg: "var(--status-scheduled-bg)", text: "var(--status-scheduled-text)" },
+  inroute: { bg: "var(--status-inroute-bg)", text: "var(--status-inroute-text)" },
+  onsite: { bg: "var(--status-onsite-bg)", text: "var(--status-onsite-text)" },
+  inprogress: { bg: "var(--status-inprogress-bg)", text: "var(--status-inprogress-text)" },
+  completed: { bg: "var(--status-completed-bg)", text: "var(--status-completed-text)" },
+  rescheduled: { bg: "var(--status-rescheduled-bg)", text: "var(--status-rescheduled-text)" },
+  canceled: { bg: "var(--status-canceled-bg)", text: "var(--status-canceled-text)" },
+  pendingquote: { bg: "var(--status-pendingquote-bg)", text: "var(--status-pendingquote-text)" },
+  pastdue: { bg: "var(--status-pastdue-bg)", text: "var(--status-pastdue-text)" },
+};
+
+const STATUS_LABELS: Record<StatusVariant, string> = {
+  incomplete: "Incomplete",
+  pending: "Pending",
+  scheduled: "Scheduled",
+  inroute: "In Route",
+  onsite: "On Site",
+  inprogress: "In Progress",
+  completed: "Completed",
+  rescheduled: "Rescheduled",
+  canceled: "Canceled",
+  pendingquote: "Pending Quote",
+  pastdue: "Past Due",
+};
+
+type StatusBadgeProps = {
+  status: StatusVariant;
+  label?: string;
+};
+
+export function StatusBadge({ status, label }: StatusBadgeProps) {
+  const tokens = STATUS_TOKENS[status];
+
+  return (
+    <span
+      className="inline-flex h-5 items-center whitespace-nowrap rounded px-2 text-xs font-medium"
+      style={{
+        background: tokens.bg,
+        color: tokens.text,
+      }}
+    >
+      {label ?? STATUS_LABELS[status]}
+    </span>
+  );
+}
+
+type WorkOrderStatusBadgeProps = {
+  status: string;
+};
+
+/** Renders StatusBadge when status maps to catalog; otherwise shows raw label with incomplete styling. */
+export function WorkOrderStatusBadge({ status }: WorkOrderStatusBadgeProps) {
+  const label = status || "Open";
+  const variant = resolveStatusVariant(label);
+
+  if (variant) {
+    return <StatusBadge status={variant} label={label} />;
+  }
+
+  return <StatusBadge status="incomplete" label={label} />;
+}
diff --git a/src/components/domain/type-badge-utils.ts b/src/components/domain/type-badge-utils.ts
new file mode 100644
index 00000000..27ecf85d
--- /dev/null
+++ b/src/components/domain/type-badge-utils.ts
@@ -0,0 +1,23 @@
+import type { TypeVariant } from "./type-badge";
+
+const COMPANY_TYPE_MAP: Record<string, TypeVariant> = {
+  Vendor: "reactive",
+  "In-house": "pm",
+};
+
+const SERVICE_TYPE_MAP: Record<string, TypeVariant> = {
+  "Scrubber Pit": "pm",
+  "Backflow Preventers": "pm",
+  "Tank/Water Heater": "reactive",
+  "Floor Drain Backing Up": "emergency",
+  "HVAC Inspection": "addon",
+  "Parking Lot Lighting": "reactive",
+  "Pumping Systems": "addon",
+  "Door/Hardware": "pm",
+  "Pressure Reducing Valve": "emergency",
+  "Fire Suppression System": "emergency",
+};
+
+export function resolveTypeVariant(type: string): TypeVariant {
+  return COMPANY_TYPE_MAP[type] ?? SERVICE_TYPE_MAP[type] ?? "pm";
+}
diff --git a/src/components/domain/type-badge.tsx b/src/components/domain/type-badge.tsx
new file mode 100644
index 00000000..61430d91
--- /dev/null
+++ b/src/components/domain/type-badge.tsx
@@ -0,0 +1,40 @@
+export type TypeVariant = "pm" | "reactive" | "emergency" | "addon" | "overdue";
+
+const TYPE_TOKENS: Record<TypeVariant, { bg: string; text: string }> = {
+  pm: { bg: "var(--type-pm-bg)", text: "var(--type-pm-text)" },
+  reactive: { bg: "var(--type-reactive-bg)", text: "var(--type-reactive-text)" },
+  emergency: { bg: "var(--type-emergency-bg)", text: "var(--type-emergency-text)" },
+  addon: { bg: "var(--type-addon-bg)", text: "var(--type-addon-text)" },
+  overdue: { bg: "var(--type-overdue-bg)", text: "var(--type-overdue-text)" },
+};
+
+import { resolveTypeVariant } from "./type-badge-utils";
+
+type TypeBadgeProps = {
+  label: string;
+  variant?: TypeVariant;
+  /** Auto-resolve variant from known company or service type labels */
+  type?: string;
+};
+
+export function TypeBadge({ label, variant, type }: TypeBadgeProps) {
+  const resolved = variant ?? (type ? resolveTypeVariant(type) : "pm");
+  const tokens = TYPE_TOKENS[resolved];
+
+  return (
+    <span
+      className="inline-flex items-center whitespace-nowrap"
+      style={{
+        height: 20,
+        padding: "0 8px",
+        borderRadius: 4,
+        fontSize: 12,
+        fontWeight: 500,
+        background: tokens.bg,
+        color: tokens.text,
+      }}
+    >
+      {label}
+    </span>
+  );
+}
diff --git a/src/components/layout/app-sidebar.tsx b/src/components/layout/app-sidebar.tsx
new file mode 100644
index 00000000..84aeb606
--- /dev/null
+++ b/src/components/layout/app-sidebar.tsx
@@ -0,0 +1,226 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router";
+import { Box, Drawer } from "@mui/material";
+
+import { BrandLockup, BrandMark } from "@/components/common/brand-lockup";
+import { getActiveNavPath, getSidebarWidth, navGroups, type NavItemDef } from "@/config/menu";
+
+function getNavItemAppearance(isActive: boolean, isHover: boolean) {
+  if (isActive) {
+    return {
+      itemColor: "var(--primary)",
+      iconColor: "var(--primary)",
+      itemBg: "var(--color-sidebar-item-active-bg)",
+    };
+  }
+
+  if (isHover) {
+    return {
+      itemColor: "var(--primary-hover)",
+      iconColor: "var(--primary-hover)",
+      itemBg: "var(--sidebar-accent)",
+    };
+  }
+
+  return {
+    itemColor: "var(--foreground)",
+    iconColor: "var(--muted-foreground)",
+    itemBg: "transparent",
+  };
+}
+
+type NavItemProps = NavItemDef & {
+  collapsed: boolean;
+  active: boolean;
+  onNavigate?: () => void;
+};
+
+function NavItem({ label, icon: Icon, path, collapsed, active, badge, onNavigate }: NavItemProps) {
+  const [hovered, setHovered] = useState(false);
+  const isHover = hovered && !active;
+  const { itemColor, iconColor, itemBg } = getNavItemAppearance(active, isHover);
+
+  return (
+    <Link
+      to={path}
+      aria-current={active ? "page" : undefined}
+      className="no-underline"
+      title={collapsed ? label : undefined}
+      onClick={onNavigate}
+    >
+      <Box
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        sx={{
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          width: "100%",
+          height: 40,
+          gap: "12px",
+          px: collapsed ? 0 : "12px",
+          justifyContent: collapsed ? "center" : "flex-start",
+          borderRadius: "6px",
+          cursor: "pointer",
+          fontFamily: "var(--font-sans)",
+          fontSize: 14,
+          fontWeight: active ? 600 : 500,
+          color: itemColor,
+          backgroundColor: itemBg,
+          boxShadow: active ? "var(--color-sidebar-item-active-shadow)" : "none",
+          transition: "all var(--duration-fast, 150ms) var(--ease-default, ease)",
+          mb: "4px",
+          textAlign: "left",
+        }}
+      >
+        {active && (
+          <Box
+            component="span"
+            sx={{
+              position: "absolute",
+              left: 0,
+              top: 8,
+              bottom: 8,
+              width: 3,
+              borderRadius: "0 3px 3px 0",
+              backgroundColor: "var(--primary)",
+            }}
+          />
+        )}
+        <Icon size={19} className="shrink-0" style={{ color: iconColor }} />
+        {!collapsed && (
+          <>
+            <Box className="truncate flex-1">{label}</Box>
+            {badge != null && (
+              <Box
+                component="span"
+                className="inline-flex shrink-0 items-center justify-center"
+                sx={{
+                  height: 18,
+                  minWidth: 18,
+                  px: "6px",
+                  borderRadius: "9999px",
+                  backgroundColor: "var(--accent)",
+                  color: "#ffffff",
+                  fontFamily: "var(--font-sans)",
+                  fontSize: 10,
+                  fontWeight: 700,
+                  lineHeight: 1,
+                }}
+              >
+                {badge}
+              </Box>
+            )}
+          </>
+        )}
+      </Box>
+    </Link>
+  );
+}
+
+type AppSidebarProps = {
+  collapsed: boolean;
+  mobile?: boolean;
+  open?: boolean;
+  onClose?: () => void;
+};
+
+export function AppSidebar({ collapsed, mobile = false, open = true, onClose }: AppSidebarProps) {
+  const width = getSidebarWidth(collapsed);
+  const { pathname } = useLocation();
+  const activePath = getActiveNavPath(pathname);
+
+  return (
+    <Drawer
+      variant={mobile ? "temporary" : "permanent"}
+      open={open}
+      onClose={onClose}
+      ModalProps={{ keepMounted: true }}
+      sx={{
+        width: mobile ? 0 : width,
+        flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width,
+          boxSizing: "border-box",
+          backgroundColor: "var(--color-sidebar-bg)",
+          borderRight: "1px solid var(--color-sidebar-border)",
+          borderRadius: 0,
+          transition: "width 200ms var(--ease-default, ease)",
+          overflowX: "hidden",
+        },
+      }}
+    >
+      <Box className="flex h-full flex-col overflow-hidden">
+        <Box
+          className="flex shrink-0 items-center"
+          sx={{
+            height: "var(--spacing-topbar)",
+            gap: "10px",
+            px: collapsed ? 0 : "16px",
+            justifyContent: collapsed ? "center" : "flex-start",
+            backgroundColor: "var(--card)",
+            borderBottom: "1px solid var(--color-sidebar-border)",
+          }}
+        >
+          {collapsed ? <BrandMark size="compact" /> : <BrandLockup size="compact" />}
+        </Box>
+
+        <Box
+          component="nav"
+          id="primary-navigation"
+          aria-label="Primary navigation"
+          className="flex-1 overflow-y-auto overflow-x-hidden"
+          sx={{ py: 1 }}
+        >
+          {navGroups.map((group, groupIndex) => (
+            <Box key={group.title || `group-${groupIndex}`}>
+              {collapsed ? (
+                groupIndex > 0 && (
+                  <Box
+                    sx={{
+                      height: 1,
+                      backgroundColor: "var(--color-sidebar-border)",
+                      mx: "14px",
+                      my: "10px",
+                    }}
+                  />
+                )
+              ) : group.title ? (
+                <Box
+                  component="p"
+                  className="text-nav-group"
+                  sx={{
+                    m: 0,
+                    px: "10px",
+                    pt: "12px",
+                    pb: "6px",
+                  }}
+                >
+                  {group.title}
+                </Box>
+              ) : (
+                <Box sx={{ height: 8 }} />
+              )}
+
+              <Box component="ul" sx={{ listStyle: "none", m: 0, p: "0 8px" }}>
+                {group.items.map(({ label, icon, path, badge }) => (
+                  <Box component="li" key={path} sx={{ listStyle: "none" }}>
+                    <NavItem
+                      label={label}
+                      icon={icon}
+                      path={path}
+                      badge={badge}
+                      collapsed={collapsed}
+                      active={path === activePath}
+                      onNavigate={mobile ? onClose : undefined}
+                    />
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Drawer>
+  );
+}
diff --git a/src/components/layout/app-topbar.tsx b/src/components/layout/app-topbar.tsx
new file mode 100644
index 00000000..b2a5b417
--- /dev/null
+++ b/src/components/layout/app-topbar.tsx
@@ -0,0 +1,231 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import LogoutOutlinedIcon from "@mui/icons-material/LogoutOutlined";
+import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import {
+  AppBar,
+  Box,
+  Divider,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Toolbar,
+  Typography,
+} from "@mui/material";
+import { ChevronDown, Menu as MenuIcon } from "lucide-react";
+
+import { useAuthContext } from "@/providers/auth-context";
+import { getPrimaryUserRole } from "@/lib/auth/user-utils";
+
+type AppTopbarProps = {
+  onToggleNav: () => void;
+};
+
+export function AppTopbar({ onToggleNav }: AppTopbarProps) {
+  const navigate = useNavigate();
+  const { user, logout } = useAuthContext();
+
+  const [userAnchor, setUserAnchor] = useState<null | HTMLElement>(null);
+
+  const handleLogout = () => {
+    setUserAnchor(null);
+    logout();
+  };
+
+  const userInitials = user?.fullname
+    ? user.fullname
+        .split(" ")
+        .map((part) => part[0])
+        .join("")
+        .slice(0, 2)
+        .toUpperCase()
+    : "U";
+
+  const userRole = getPrimaryUserRole(user?.userRoles);
+
+  return (
+    <AppBar
+      position="sticky"
+      elevation={0}
+      square
+      sx={{
+        height: "var(--spacing-topbar)",
+        background: "var(--color-header-gradient)",
+        boxShadow: "none",
+        color: "var(--color-header-text)",
+        borderRadius: 0,
+      }}
+    >
+      <Toolbar
+        disableGutters
+        className="flex items-center"
+        sx={{
+          minHeight: "var(--spacing-topbar) !important",
+          height: "var(--spacing-topbar)",
+          gap: "18px",
+          px: "16px",
+          pr: "22px",
+        }}
+      >
+        <Box
+          component="button"
+          type="button"
+          onClick={onToggleNav}
+          aria-label="Toggle navigation"
+          title="Toggle sidebar"
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            width: 38,
+            height: 38,
+            borderRadius: "6px",
+            border: "none",
+            cursor: "pointer",
+            backgroundColor: "var(--color-header-surface)",
+            color: "var(--color-header-icon)",
+            transition: "background-color var(--duration-fast, 150ms) var(--ease-default, ease)",
+            "&:hover": {
+              backgroundColor: "var(--color-header-surface-hover)",
+            },
+          }}
+        >
+          <MenuIcon size={18} />
+        </Box>
+
+        <Box sx={{ flex: 1 }} />
+
+        <Box
+          component="button"
+          type="button"
+          aria-haspopup="true"
+          aria-expanded={Boolean(userAnchor)}
+          onClick={(event) => setUserAnchor(event.currentTarget)}
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            flexShrink: 0,
+            gap: "10px",
+            py: "5px",
+            pl: "6px",
+            pr: "10px",
+            borderRadius: "9999px",
+            border: "none",
+            cursor: "pointer",
+            backgroundColor: "transparent",
+            color: "var(--color-header-text)",
+            transition: "background-color var(--duration-fast, 150ms) var(--ease-default, ease)",
+            "&:hover": {
+              backgroundColor: "var(--color-header-chip-hover)",
+            },
+          }}
+        >
+          <Box
+            className="flex shrink-0 items-center justify-center"
+            sx={{
+              width: 34,
+              height: 34,
+              borderRadius: "50%",
+              background: "linear-gradient(135deg, var(--accent), var(--primary))",
+              boxShadow: "0 0 0 2px var(--color-header-avatar-ring)",
+              fontFamily: "var(--font-display)",
+              fontSize: 12,
+              fontWeight: 700,
+              color: "#ffffff",
+            }}
+          >
+            {userInitials}
+          </Box>
+          <Box className="text-left leading-tight">
+            <Typography
+              component="p"
+              sx={{
+                fontFamily: "var(--font-sans)",
+                fontSize: 13,
+                fontWeight: 600,
+                color: "#ffffff",
+                lineHeight: 1.25,
+              }}
+            >
+              {user?.fullname || "User"}
+            </Typography>
+            <Typography
+              component="p"
+              sx={{
+                fontSize: 11,
+                color: "var(--color-header-text-muted)",
+                lineHeight: 1.25,
+              }}
+            >
+              {userRole}
+            </Typography>
+          </Box>
+          <ChevronDown
+            size={15}
+            className="shrink-0"
+            style={{ color: "var(--color-header-text-muted)" }}
+          />
+        </Box>
+      </Toolbar>
+
+      <Menu
+        anchorEl={userAnchor}
+        open={Boolean(userAnchor)}
+        onClose={() => setUserAnchor(null)}
+        transformOrigin={{ horizontal: "right", vertical: "top" }}
+        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+        slotProps={{
+          paper: {
+            sx: { width: 260, mt: 1, boxShadow: "var(--shadow-lg)" },
+          },
+        }}
+      >
+        <Box className="flex items-center gap-3 px-4 py-3">
+          <Box
+            className="flex shrink-0 items-center justify-center"
+            sx={{
+              width: 40,
+              height: 40,
+              borderRadius: "50%",
+              background: "linear-gradient(135deg, var(--accent), var(--primary))",
+              fontSize: "0.875rem",
+              fontWeight: 600,
+              color: "#ffffff",
+              border: "2px solid var(--color-header-avatar-ring)",
+            }}
+          >
+            {userInitials}
+          </Box>
+          <Box>
+            <Typography variant="body2" sx={{ fontWeight: 600 }}>
+              {user?.fullname || "User"}
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              {user?.email || ""}
+            </Typography>
+          </Box>
+        </Box>
+        <Divider />
+        <MenuItem
+          onClick={() => {
+            setUserAnchor(null);
+            navigate("/settings/dropdowns");
+          }}
+        >
+          <ListItemIcon>
+            <SettingsOutlinedIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Settings</ListItemText>
+        </MenuItem>
+        <MenuItem onClick={handleLogout} sx={{ color: "error.main" }}>
+          <ListItemIcon>
+            <LogoutOutlinedIcon fontSize="small" color="error" />
+          </ListItemIcon>
+          <ListItemText>Logout</ListItemText>
+        </MenuItem>
+      </Menu>
+    </AppBar>
+  );
+}
diff --git a/src/components/ui/applied-filter-chip.tsx b/src/components/ui/applied-filter-chip.tsx
new file mode 100644
index 00000000..6ae16808
--- /dev/null
+++ b/src/components/ui/applied-filter-chip.tsx
@@ -0,0 +1,51 @@
+import { X } from "lucide-react";
+
+import { CountBadge } from "@/components/ui/count-badge";
+import { cn } from "@/lib/utils";
+
+export type AppliedFilterChipProps = {
+  group: string;
+  value?: string;
+  count?: number;
+  accent?: boolean;
+  onDismiss: () => void;
+  dismissLabel?: string;
+};
+
+export function AppliedFilterChip({
+  group,
+  value,
+  count,
+  accent,
+  onDismiss,
+  dismissLabel = "Remove filter",
+}: AppliedFilterChipProps) {
+  return (
+    <span className="inline-flex h-[26px] items-center gap-1.5 rounded-md border border-border bg-background pr-1 pl-2.5">
+      <span className="text-[10.5px] font-semibold tracking-wide text-muted-foreground uppercase">
+        {group}
+      </span>
+      {count != null ? (
+        <CountBadge count={count} />
+      ) : (
+        <span
+          className={cn(
+            accent
+              ? "rounded-full bg-primary/10 px-2 py-px text-xs font-semibold text-primary"
+              : "text-xs font-semibold text-foreground",
+          )}
+        >
+          {value}
+        </span>
+      )}
+      <button
+        type="button"
+        onClick={onDismiss}
+        aria-label={dismissLabel}
+        className="flex size-[18px] cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted"
+      >
+        <X size={12} />
+      </button>
+    </span>
+  );
+}
diff --git a/src/components/ui/applied-filters-bar.tsx b/src/components/ui/applied-filters-bar.tsx
new file mode 100644
index 00000000..145159a5
--- /dev/null
+++ b/src/components/ui/applied-filters-bar.tsx
@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import { Filter } from "lucide-react";
+
+type AppliedFiltersBarProps = {
+  countLabel: string;
+  children: ReactNode;
+  onClearAll: () => void;
+  clearAllLabel?: string;
+  filteredByLabel?: string;
+};
+
+export function AppliedFiltersBar({
+  countLabel,
+  children,
+  onClearAll,
+  clearAllLabel = "Clear all",
+  filteredByLabel = "· filtered by",
+}: AppliedFiltersBarProps) {
+  return (
+    <div className="-mx-2.5 shrink-0 border-b border-border bg-(--color-bg-surface) px-4 py-2.5">
+      <div className="flex flex-wrap items-center gap-2">
+        <Filter size={15} className="shrink-0 text-muted-foreground" />
+        <span className="text-[13px] font-semibold text-foreground">{countLabel}</span>
+        <span className="text-[13px] text-muted-foreground">{filteredByLabel}</span>
+        {children}
+        <button
+          type="button"
+          onClick={onClearAll}
+          className="cursor-pointer px-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+        >
+          {clearAllLabel}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 00000000..e700985a
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,21 @@
+import type { ChipProps } from "@mui/material";
+import { Chip } from "@mui/material";
+
+import { cn } from "@/lib/utils";
+
+export type BadgeProps = ChipProps;
+
+export function Badge({ className, size = "small", ...props }: BadgeProps) {
+  return (
+    <Chip
+      size={size}
+      {...props}
+      className={cn("font-medium", className)}
+      sx={{
+        borderRadius: "var(--radius-sm)",
+        fontSize: "0.75rem",
+        ...props.sx,
+      }}
+    />
+  );
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 00000000..83c7e12d
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,70 @@
+import type { ButtonProps } from "@mui/material";
+import { Button as MuiButton, CircularProgress } from "@mui/material";
+
+import { cn } from "@/lib/utils";
+
+type ButtonVariant = "default" | "destructive" | "outline" | "ghost" | "link";
+type ButtonSize = "default" | "lg";
+
+export type UiButtonProps = Omit<ButtonProps, "variant" | "color" | "size"> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  loadingText?: string;
+};
+
+const variantMap: Record<
+  ButtonVariant,
+  Pick<ButtonProps, "variant" | "color"> & { className?: string }
+> = {
+  default: { variant: "contained", color: "primary" },
+  destructive: { variant: "contained", color: "error" },
+  outline: { variant: "outlined", color: "primary", className: "border-border" },
+  ghost: { variant: "text", color: "inherit", className: "text-foreground" },
+  link: { variant: "text", color: "primary", className: "underline-offset-4 hover:underline" },
+};
+
+const sizeSx: Record<ButtonSize, ButtonProps["sx"]> = {
+  default: undefined,
+  lg: {
+    height: 42,
+    fontFamily: "var(--font-display)",
+    fontSize: "var(--text-base)",
+    fontWeight: 600,
+  },
+};
+
+export function Button({
+  variant = "default",
+  size = "default",
+  loading = false,
+  loadingText = "Loading…",
+  className,
+  disabled,
+  children,
+  sx,
+  ...props
+}: UiButtonProps) {
+  const mapped = variantMap[variant];
+
+  return (
+    <MuiButton
+      {...mapped}
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
+      aria-disabled={disabled || loading || undefined}
+      sx={[sizeSx[size], ...(Array.isArray(sx) ? sx : sx ? [sx] : [])]}
+      className={cn(mapped.className, className)}
+      {...props}
+    >
+      {loading ? (
+        <>
+          <CircularProgress size={16} color="inherit" sx={{ mr: 1 }} aria-hidden />
+          {loadingText}
+        </>
+      ) : (
+        children
+      )}
+    </MuiButton>
+  );
+}
diff --git a/src/components/ui/checkbox-indicator.tsx b/src/components/ui/checkbox-indicator.tsx
new file mode 100644
index 00000000..625e7678
--- /dev/null
+++ b/src/components/ui/checkbox-indicator.tsx
@@ -0,0 +1,33 @@
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type CheckboxIndicatorSize = "sm" | "md";
+
+const sizeClasses: Record<CheckboxIndicatorSize, { box: string; icon: number }> = {
+  sm: { box: "h-3.5 w-3.5", icon: 9 },
+  md: { box: "size-4", icon: 11 },
+};
+
+export type CheckboxIndicatorProps = {
+  checked: boolean;
+  size?: CheckboxIndicatorSize;
+  className?: string;
+};
+
+export function CheckboxIndicator({ checked, size = "md", className }: CheckboxIndicatorProps) {
+  const { box, icon } = sizeClasses[size];
+
+  return (
+    <span
+      className={cn(
+        "flex shrink-0 items-center justify-center rounded border",
+        box,
+        checked ? "border-primary bg-primary" : "border-border bg-transparent",
+        className,
+      )}
+    >
+      {checked && <Check size={icon} className="text-white" />}
+    </span>
+  );
+}
diff --git a/src/components/ui/checkbox-list-item.tsx b/src/components/ui/checkbox-list-item.tsx
new file mode 100644
index 00000000..71ffbd61
--- /dev/null
+++ b/src/components/ui/checkbox-list-item.tsx
@@ -0,0 +1,38 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { CheckboxIndicator } from "@/components/ui/checkbox-indicator";
+import { cn } from "@/lib/utils";
+
+export type CheckboxListItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  selected: boolean;
+  label: ReactNode;
+  left?: ReactNode;
+};
+
+export function CheckboxListItem({
+  selected,
+  label,
+  left,
+  className,
+  type = "button",
+  disabled,
+  ...props
+}: CheckboxListItemProps) {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={cn(
+        "flex w-full items-center gap-2 rounded-md px-1.5 py-1.5 text-left transition-colors",
+        selected ? "bg-primary/10" : "hover:bg-muted",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxIndicator checked={selected} />
+      {left}
+      <span className="truncate text-[13px] text-foreground">{label}</span>
+    </button>
+  );
+}
diff --git a/src/components/ui/checkbox-menu-item.tsx b/src/components/ui/checkbox-menu-item.tsx
new file mode 100644
index 00000000..473bde76
--- /dev/null
+++ b/src/components/ui/checkbox-menu-item.tsx
@@ -0,0 +1,50 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { CheckboxIndicator } from "@/components/ui/checkbox-indicator";
+import { cn } from "@/lib/utils";
+
+export type CheckboxMenuItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  checked: boolean;
+  label: ReactNode;
+  left?: ReactNode;
+  right?: ReactNode;
+  labelClassName?: string;
+};
+
+export function CheckboxMenuItem({
+  checked,
+  label,
+  left,
+  right,
+  labelClassName,
+  className,
+  type = "button",
+  disabled,
+  ...props
+}: CheckboxMenuItemProps) {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={cn(
+        "flex w-full cursor-pointer items-center gap-2.5 rounded px-2.5 py-1.5 transition-colors hover:bg-[#F9FAFB]",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxIndicator checked={checked} size="sm" />
+      {left}
+      <span
+        className={cn(
+          "text-[12px] text-foreground",
+          (left != null || right != null) && "flex-1 text-left",
+          labelClassName,
+        )}
+      >
+        {label}
+      </span>
+      {right}
+    </button>
+  );
+}
diff --git a/src/components/ui/collapsible-section.tsx b/src/components/ui/collapsible-section.tsx
new file mode 100644
index 00000000..1d18f8f6
--- /dev/null
+++ b/src/components/ui/collapsible-section.tsx
@@ -0,0 +1,52 @@
+import { useState, type ElementType, type ReactNode } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+import { CountBadge } from "@/components/ui/count-badge";
+import { cn } from "@/lib/utils";
+
+export type CollapsibleSectionProps = {
+  icon?: ElementType;
+  label: string;
+  count?: number;
+  defaultOpen?: boolean;
+  children: ReactNode;
+  className?: string;
+};
+
+export function CollapsibleSection({
+  icon: Icon,
+  label,
+  count = 0,
+  defaultOpen = false,
+  children,
+  className,
+}: CollapsibleSectionProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className={cn("border-b border-border", open && "pb-3", className)}>
+      <button
+        type="button"
+        onClick={() => setOpen((current) => !current)}
+        className="flex w-full cursor-pointer items-center justify-between py-3 text-left"
+        aria-expanded={open}
+      >
+        <div className="flex items-center gap-2">
+          {Icon != null && <Icon size={16} className="text-primary" />}
+          <span className="text-[length:var(--text-base)] font-semibold text-foreground">
+            {label}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <CountBadge count={count} />
+          {open ? (
+            <ChevronUp size={16} className="text-muted-foreground" />
+          ) : (
+            <ChevronDown size={16} className="text-muted-foreground" />
+          )}
+        </div>
+      </button>
+      {open && children}
+    </div>
+  );
+}
diff --git a/src/components/ui/count-badge.tsx b/src/components/ui/count-badge.tsx
new file mode 100644
index 00000000..c66140da
--- /dev/null
+++ b/src/components/ui/count-badge.tsx
@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils";
+
+export type CountBadgeProps = {
+  count: number;
+  className?: string;
+};
+
+export function CountBadge({ count, className }: CountBadgeProps) {
+  if (count <= 0) {
+    return null;
+  }
+
+  return (
+    <span
+      className={cn(
+        "inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary px-1.5 text-[10.5px] font-bold text-white",
+        className,
+      )}
+    >
+      {count}
+    </span>
+  );
+}
diff --git a/src/components/ui/date-input.tsx b/src/components/ui/date-input.tsx
new file mode 100644
index 00000000..a62d478e
--- /dev/null
+++ b/src/components/ui/date-input.tsx
@@ -0,0 +1,40 @@
+import type { InputHTMLAttributes } from "react";
+
+import { cn } from "@/lib/utils";
+
+const dateInputClasses =
+  "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-[13px] text-foreground focus:outline-none";
+
+export type DateInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & {
+  onChange?: (value: string) => void;
+};
+
+export function DateInput({ className, onChange, disabled, ...props }: DateInputProps) {
+  return (
+    <input
+      type="date"
+      disabled={disabled}
+      className={cn(dateInputClasses, disabled && "cursor-not-allowed opacity-50", className)}
+      onChange={(event) => onChange?.(event.target.value)}
+      {...props}
+    />
+  );
+}
+
+export type DateFieldProps = DateInputProps & {
+  label: string;
+  fieldClassName?: string;
+};
+
+export function DateField({ label, fieldClassName, id, ...inputProps }: DateFieldProps) {
+  const inputId = id ?? label.toLowerCase().replace(/\s+/g, "-");
+
+  return (
+    <div className={cn("flex-1", fieldClassName)}>
+      <label htmlFor={inputId} className="mb-1 block text-[11px] text-muted-foreground">
+        {label}
+      </label>
+      <DateInput id={inputId} {...inputProps} />
+    </div>
+  );
+}
diff --git a/src/components/ui/dialog-blur-backdrop.ts b/src/components/ui/dialog-blur-backdrop.ts
new file mode 100644
index 00000000..3842d5b1
--- /dev/null
+++ b/src/components/ui/dialog-blur-backdrop.ts
@@ -0,0 +1,12 @@
+import type { SxProps, Theme } from "@mui/material";
+
+/** Light blur overlay — matches design DialogOverlay (bg-black/10 + backdrop-blur). */
+export const DIALOG_BLUR_BACKDROP_SX: SxProps<Theme> = {
+  backgroundColor: "rgba(0, 0, 0, 0.1)",
+  backdropFilter: "blur(4px)",
+  WebkitBackdropFilter: "blur(4px)",
+};
+
+export const dialogBlurBackdropSlotProps = {
+  backdrop: { sx: DIALOG_BLUR_BACKDROP_SX },
+} as const;
diff --git a/src/components/ui/dialog-cancel-button.tsx b/src/components/ui/dialog-cancel-button.tsx
new file mode 100644
index 00000000..cd6a79ec
--- /dev/null
+++ b/src/components/ui/dialog-cancel-button.tsx
@@ -0,0 +1,20 @@
+import { Button, type UiButtonProps } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+/** Same tokens as VendorDialogFooter Cancel (`ghost` + this class). */
+export const VENDOR_DIALOG_CANCEL_CLASS = "min-h-0 px-2 py-1 text-[12px]";
+
+type DialogCancelButtonProps = Omit<UiButtonProps, "variant">;
+
+/** Cancel chrome shared with VendorDialog footer. */
+export function DialogCancelButton({
+  className,
+  children = "Cancel",
+  ...props
+}: DialogCancelButtonProps) {
+  return (
+    <Button variant="ghost" className={cn(VENDOR_DIALOG_CANCEL_CLASS, className)} {...props}>
+      {children}
+    </Button>
+  );
+}
diff --git a/src/components/ui/dot-toggle-pill.tsx b/src/components/ui/dot-toggle-pill.tsx
new file mode 100644
index 00000000..e01f3cad
--- /dev/null
+++ b/src/components/ui/dot-toggle-pill.tsx
@@ -0,0 +1,51 @@
+import type { ButtonHTMLAttributes, CSSProperties } from "react";
+
+import { cn } from "@/lib/utils";
+
+export type DotTogglePillProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  label: string;
+  dotColor: string;
+  selected: boolean;
+  selectedBg?: string;
+  selectedText?: string;
+};
+
+export function DotTogglePill({
+  label,
+  dotColor,
+  selected,
+  selectedBg,
+  selectedText,
+  className,
+  type = "button",
+  disabled,
+  style,
+  ...props
+}: DotTogglePillProps) {
+  const selectedStyle: CSSProperties | undefined =
+    selected && selectedBg ? { background: selectedBg } : undefined;
+
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={cn(
+        "inline-flex h-[26px] cursor-pointer items-center gap-1.5 rounded-full border px-2.5 transition-colors",
+        selected ? "border-primary" : "border-border bg-background",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+      style={{ ...selectedStyle, ...style }}
+      {...props}
+      aria-pressed={selected}
+    >
+      <span className="size-[7px] shrink-0 rounded-full" style={{ background: dotColor }} />
+      <span
+        className={cn("text-xs font-medium", !selected && "text-muted-foreground")}
+        style={selected && selectedText ? { color: selectedText } : undefined}
+      >
+        {label}
+      </span>
+    </button>
+  );
+}
diff --git a/src/components/ui/empty-state.tsx b/src/components/ui/empty-state.tsx
new file mode 100644
index 00000000..5cf52b5f
--- /dev/null
+++ b/src/components/ui/empty-state.tsx
@@ -0,0 +1,40 @@
+import type { ReactElement } from "react";
+import { Box, Typography } from "@mui/material";
+
+import { cn } from "@/lib/utils";
+
+type EmptyStateProps = {
+  icon?: ReactElement;
+  title: string;
+  description?: string;
+  action?: ReactElement;
+  className?: string;
+};
+
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <Box
+      className={cn(
+        "flex flex-col items-center justify-center gap-3 rounded-lg border border-border bg-card px-6 py-12 text-center",
+        className,
+      )}
+    >
+      {Boolean(icon) && <Box className="text-muted-foreground">{icon}</Box>}
+      <Typography variant="subtitle1" className="text-foreground">
+        {title}
+      </Typography>
+      {Boolean(description) && (
+        <Typography
+          variant="body2"
+          className="max-w-sm"
+          sx={{
+            color: "text.secondary",
+          }}
+        >
+          {description}
+        </Typography>
+      )}
+      {Boolean(action) && <Box className="mt-2">{action}</Box>}
+    </Box>
+  );
+}
diff --git a/src/components/ui/filter-popover.tsx b/src/components/ui/filter-popover.tsx
new file mode 100644
index 00000000..2d8d5e8a
--- /dev/null
+++ b/src/components/ui/filter-popover.tsx
@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import { Popover } from "@mui/material";
+
+type FilterPopoverProps = {
+  open: boolean;
+  anchorEl: HTMLElement | null;
+  onClose: () => void;
+  activeCount: number;
+  onClear?: () => void;
+  children: ReactNode;
+};
+
+export function FilterPopover({
+  open,
+  anchorEl,
+  onClose,
+  activeCount,
+  onClear,
+  children,
+}: FilterPopoverProps) {
+  return (
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      transformOrigin={{ vertical: "top", horizontal: "right" }}
+      slotProps={{
+        paper: {
+          className: "mt-0.5 min-w-80 rounded-lg border border-border p-4 shadow-md",
+        },
+      }}
+    >
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <span className="text-xs font-semibold text-foreground">Filters</span>
+          {activeCount > 0 && Boolean(onClear) && (
+            <button
+              type="button"
+              onClick={onClear}
+              className="cursor-pointer text-xs text-primary hover:underline"
+            >
+              Clear filters
+            </button>
+          )}
+        </div>
+        {children}
+      </div>
+    </Popover>
+  );
+}
diff --git a/src/components/ui/form-error-message.tsx b/src/components/ui/form-error-message.tsx
new file mode 100644
index 00000000..b730936f
--- /dev/null
+++ b/src/components/ui/form-error-message.tsx
@@ -0,0 +1,24 @@
+import type { ComponentPropsWithoutRef } from "react";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutlined";
+import { Typography } from "@mui/material";
+
+import { cn } from "@/lib/utils";
+
+export type FormErrorMessageProps = ComponentPropsWithoutRef<"div"> & {
+  message: string;
+};
+
+export function FormErrorMessage({ message, className, ...props }: FormErrorMessageProps) {
+  return (
+    <div className={cn("mt-0.5 flex items-center gap-1.5", className)} {...props}>
+      <ErrorOutlineIcon fontSize="small" color="error" />
+      <Typography
+        variant="caption"
+        color="error"
+        sx={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)" }}
+      >
+        {message}
+      </Typography>
+    </div>
+  );
+}
diff --git a/src/components/ui/form-field.tsx b/src/components/ui/form-field.tsx
new file mode 100644
index 00000000..560795ac
--- /dev/null
+++ b/src/components/ui/form-field.tsx
@@ -0,0 +1,70 @@
+import type { ReactNode } from "react";
+import { FormControl, FormHelperText, FormLabel, type FormControlProps } from "@mui/material";
+
+import { cn } from "@/lib/utils";
+
+type FormFieldAppearance = "default" | "auth";
+
+type FormFieldProps = FormControlProps & {
+  label: string;
+  htmlFor?: string;
+  helperText?: string;
+  error?: boolean;
+  required?: boolean;
+  children: ReactNode;
+  className?: string;
+  appearance?: FormFieldAppearance;
+};
+
+const appearanceClassName: Record<FormFieldAppearance, string> = {
+  default: "gap-1",
+  auth: "gap-1.5 [&_.MuiFormLabel-root]:mb-0 [&_.MuiFormLabel-root]:!font-sans [&_.MuiFormLabel-root]:![font-size:var(--text-base-sm)] [&_.MuiFormLabel-root]:!font-medium [&_.MuiFormLabel-root]:!leading-[1.5] [&_.MuiFormLabel-root]:!normal-case [&_.MuiFormLabel-root]:!text-foreground [&_.MuiFormLabel-root]:!tracking-normal",
+};
+
+const appearanceLabelClassName: Record<FormFieldAppearance, string> = {
+  default: "text-label static mb-1 text-foreground normal-case",
+  auth: "static text-foreground normal-case",
+};
+
+const appearanceLabelSx: Record<FormFieldAppearance, object | undefined> = {
+  default: {
+    fontSize: "0.8125rem",
+    fontWeight: 600,
+    letterSpacing: "normal",
+    textTransform: "none",
+    lineHeight: 1.5,
+  },
+  auth: undefined,
+};
+
+export function FormField({
+  label,
+  htmlFor,
+  helperText,
+  error,
+  required,
+  children,
+  className,
+  appearance = "default",
+  ...props
+}: FormFieldProps) {
+  return (
+    <FormControl
+      error={error}
+      required={required}
+      fullWidth
+      className={cn(appearanceClassName[appearance], className)}
+      {...props}
+    >
+      <FormLabel
+        htmlFor={htmlFor}
+        className={appearanceLabelClassName[appearance]}
+        sx={appearanceLabelSx[appearance]}
+      >
+        {label}
+      </FormLabel>
+      {children}
+      {Boolean(helperText) && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+}
diff --git a/src/components/ui/icon-close-button.tsx b/src/components/ui/icon-close-button.tsx
new file mode 100644
index 00000000..a7874df6
--- /dev/null
+++ b/src/components/ui/icon-close-button.tsx
@@ -0,0 +1,35 @@
+import type { ButtonHTMLAttributes } from "react";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+export type IconCloseButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  iconSize?: number;
+  label?: string;
+};
+
+export function IconCloseButton({
+  iconSize = 17,
+  label = "Close",
+  className,
+  type = "button",
+  disabled,
+  "aria-label": ariaLabel,
+  ...props
+}: IconCloseButtonProps) {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      aria-label={ariaLabel ?? label}
+      className={cn(
+        "flex size-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <X size={iconSize} />
+    </button>
+  );
+}
diff --git a/src/components/ui/loading-region.tsx b/src/components/ui/loading-region.tsx
new file mode 100644
index 00000000..6a6db559
--- /dev/null
+++ b/src/components/ui/loading-region.tsx
@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+type LoadingRegionProps = {
+  busy?: boolean;
+  label?: string;
+  className?: string;
+  children: ReactNode;
+};
+
+/** Accessible wrapper for loading/skeleton regions. */
+export function LoadingRegion({
+  busy = true,
+  label = "Loading",
+  className,
+  children,
+}: LoadingRegionProps) {
+  return (
+    <div
+      className={cn(className)}
+      aria-busy={busy || undefined}
+      role={busy ? "status" : undefined}
+      aria-label={busy ? label : undefined}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/ui/menu-anchor-button.tsx b/src/components/ui/menu-anchor-button.tsx
new file mode 100644
index 00000000..e6270cc1
--- /dev/null
+++ b/src/components/ui/menu-anchor-button.tsx
@@ -0,0 +1,32 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+type MenuAnchorButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "type"> & {
+  onAnchor: (element: HTMLElement) => void;
+  children: ReactNode;
+  open?: boolean;
+};
+
+export function MenuAnchorButton({
+  onAnchor,
+  children,
+  className,
+  open,
+  disabled,
+  ...props
+}: MenuAnchorButtonProps) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={(event) => onAnchor(event.currentTarget)}
+      className={cn("w-fit cursor-pointer", disabled && "cursor-not-allowed opacity-50", className)}
+      aria-haspopup="menu"
+      aria-expanded={open}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/ui/nav-arrow-button.tsx b/src/components/ui/nav-arrow-button.tsx
new file mode 100644
index 00000000..bc35df85
--- /dev/null
+++ b/src/components/ui/nav-arrow-button.tsx
@@ -0,0 +1,32 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export type NavArrowButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  children: ReactNode;
+};
+
+export function NavArrowButton({
+  children,
+  className,
+  disabled,
+  type = "button",
+  ...props
+}: NavArrowButtonProps) {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={cn(
+        "flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-card transition-colors",
+        disabled
+          ? "cursor-not-allowed text-border"
+          : "cursor-pointer text-muted-foreground hover:bg-(--color-bg-muted) hover:text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/ui/nav-pill-button.tsx b/src/components/ui/nav-pill-button.tsx
new file mode 100644
index 00000000..e43b7e94
--- /dev/null
+++ b/src/components/ui/nav-pill-button.tsx
@@ -0,0 +1,34 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export type NavPillButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  active?: boolean;
+  children: ReactNode;
+};
+
+export function NavPillButton({
+  active = false,
+  children,
+  className,
+  disabled,
+  type = "button",
+  ...props
+}: NavPillButtonProps) {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={cn(
+        "flex h-8 shrink-0 cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-md px-[13px] text-[13px] font-semibold transition-colors disabled:cursor-not-allowed disabled:opacity-40",
+        active
+          ? "border border-[#bfe2f5] bg-(--color-primary-tint) text-primary"
+          : "border border-transparent bg-transparent text-muted-foreground hover:bg-(--color-bg-muted)",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/ui/page-header.tsx b/src/components/ui/page-header.tsx
new file mode 100644
index 00000000..699d75c7
--- /dev/null
+++ b/src/components/ui/page-header.tsx
@@ -0,0 +1,86 @@
+import type { ReactElement, ReactNode } from "react";
+import { Stack } from "@mui/material";
+
+import { Text } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+type PageHeaderProps = {
+  eyebrow?: string;
+  title: string;
+  subtitle?: string;
+  belowTitle?: ReactNode;
+  actions?: ReactElement;
+  className?: string;
+  /** White surface bar (list page headers). */
+  surface?: boolean;
+};
+
+export function PageHeader({
+  eyebrow,
+  title,
+  subtitle,
+  belowTitle,
+  actions,
+  className,
+  surface = false,
+}: PageHeaderProps) {
+  return (
+    <Stack
+      direction={{ xs: "column", md: "row" }}
+      className={cn(
+        surface &&
+          "-mx-2.5 -mt-2.5 shrink-0 border-b border-(--color-border) bg-(--color-bg-surface) px-5 py-4",
+        className,
+      )}
+      sx={{
+        alignItems: { xs: "stretch", md: "center" },
+        justifyContent: "space-between",
+        gap: { xs: 2, md: 0 },
+      }}
+    >
+      <Stack spacing={0}>
+        <Text
+          variant="label"
+          when={Boolean(eyebrow)}
+          className="m-0 text-(length:--text-xs) font-bold leading-none tracking-widest text-primary uppercase"
+        >
+          {eyebrow}
+        </Text>
+        <Text
+          variant="display"
+          className={cn(
+            "m-0 font-display mt-1! text-[30px]! font-extrabold leading-[1.1] tracking-[-0.02em] text-foreground",
+            eyebrow && "mt-1",
+          )}
+          sx={{ fontSize: 30, fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}
+        >
+          {title}
+        </Text>
+        <Text
+          variant="description"
+          as="span"
+          tone="muted"
+          when={Boolean(subtitle)}
+          sx={{ mt: 0.75, fontWeight: 500 }}
+        >
+          {subtitle}
+        </Text>
+        {Boolean(belowTitle) && <div className="mt-1">{belowTitle}</div>}
+      </Stack>
+      {Boolean(actions) && (
+        <Stack
+          direction="row"
+          spacing={1}
+          useFlexGap
+          sx={{
+            alignItems: "center",
+            flexWrap: { xs: "wrap", md: "nowrap" },
+            width: { xs: "100%", md: "auto" },
+          }}
+        >
+          {actions}
+        </Stack>
+      )}
+    </Stack>
+  );
+}
diff --git a/src/components/ui/password-field.tsx b/src/components/ui/password-field.tsx
new file mode 100644
index 00000000..8f10fc31
--- /dev/null
+++ b/src/components/ui/password-field.tsx
@@ -0,0 +1,68 @@
+import { useState } from "react";
+import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
+import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
+import { IconButton, InputAdornment } from "@mui/material";
+
+import { TextField, type UiTextFieldProps } from "@/components/ui/text-field";
+
+export type PasswordFieldProps = Omit<UiTextFieldProps, "type"> & {
+  visible?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
+};
+
+const passwordFieldSx = {
+  "& .MuiInputAdornment-positionEnd": {
+    marginRight: "-8px",
+  },
+} as const;
+
+export function PasswordField({
+  visible: visibleProp,
+  onVisibleChange,
+  sx,
+  slotProps,
+  ...props
+}: PasswordFieldProps) {
+  const [internalVisible, setInternalVisible] = useState(false);
+  const isControlled = visibleProp !== undefined;
+  const showPassword = isControlled ? visibleProp : internalVisible;
+
+  const toggleVisibility = () => {
+    const next = !showPassword;
+    if (!isControlled) {
+      setInternalVisible(next);
+    }
+    onVisibleChange?.(next);
+  };
+
+  return (
+    <TextField
+      type={showPassword ? "text" : "password"}
+      sx={[passwordFieldSx, ...(Array.isArray(sx) ? sx : sx ? [sx] : [])]}
+      slotProps={{
+        ...slotProps,
+        input: {
+          ...slotProps?.input,
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                type="button"
+                aria-label={showPassword ? "Hide password" : "Show password"}
+                onClick={toggleVisibility}
+                size="small"
+                className="text-muted-foreground"
+              >
+                {showPassword ? (
+                  <VisibilityOffOutlinedIcon className="h-[16px]! w-[16px]!" />
+                ) : (
+                  <VisibilityOutlinedIcon className="h-[16px]! w-[16px]!" />
+                )}
+              </IconButton>
+            </InputAdornment>
+          ),
+        },
+      }}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/ui/query-error-panel.tsx b/src/components/ui/query-error-panel.tsx
new file mode 100644
index 00000000..8d9740bb
--- /dev/null
+++ b/src/components/ui/query-error-panel.tsx
@@ -0,0 +1,39 @@
+import { Button } from "@/components/ui/button";
+import { Text } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+type QueryErrorPanelProps = {
+  message?: string;
+  onRetry?: () => void;
+  className?: string;
+  compact?: boolean;
+};
+
+export function QueryErrorPanel({
+  message = "Something went wrong. Please try again.",
+  onRetry,
+  className,
+  compact = false,
+}: QueryErrorPanelProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-start gap-2 rounded-lg border border-border bg-background",
+        compact ? "p-3" : "p-4",
+        className,
+      )}
+    >
+      <Text variant="error">{message}</Text>
+      {Boolean(onRetry) && (
+        <Button
+          variant="outline"
+          size="default"
+          onClick={onRetry}
+          sx={{ minHeight: 32, height: 32 }}
+        >
+          Retry
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ui/resource-list-table.tsx b/src/components/ui/resource-list-table.tsx
new file mode 100644
index 00000000..dee4dab4
--- /dev/null
+++ b/src/components/ui/resource-list-table.tsx
@@ -0,0 +1,96 @@
+import type { ReactNode } from "react";
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import { TableEmptyRow, TableLoadingRow } from "@/components/ui/table-state-rows";
+
+export type SortDirection = "asc" | "desc" | "";
+
+export type ResourceListColumn<T> = {
+  id: string;
+  header: ReactNode;
+  render: (row: T) => ReactNode;
+  sortable?: boolean;
+  headerClassName?: string;
+  cellClassName?: string;
+  align?: "left" | "center" | "right";
+};
+
+type ResourceListTableProps<T> = {
+  columns: ResourceListColumn<T>[];
+  rows: T[];
+  rowKey: (row: T) => string;
+  isLoading: boolean;
+  emptyMessage?: string;
+  sort?: { column: string; direction: SortDirection };
+  onSort?: (column: string) => void;
+  size?: "small" | "medium";
+};
+
+function sortIndicator(direction: SortDirection): string {
+  if (direction === "desc") {
+    return " ↓";
+  }
+  if (direction === "asc") {
+    return " ↑";
+  }
+  return "";
+}
+
+export function ResourceListTable<T>({
+  columns,
+  rows,
+  rowKey,
+  isLoading,
+  emptyMessage,
+  sort,
+  onSort,
+  size = "small",
+}: ResourceListTableProps<T>) {
+  const colSpan = columns.length;
+
+  return (
+    <TableContainer component={Paper} variant="outlined">
+      <Table size={size}>
+        <TableHead>
+          <TableRow>
+            {columns.map((column) => (
+              <TableCell
+                key={column.id}
+                align={column.align}
+                className={`font-semibold ${column.sortable ? "cursor-pointer whitespace-nowrap" : ""} ${column.headerClassName ?? ""}`}
+                onClick={column.sortable && onSort ? () => onSort(column.id) : undefined}
+              >
+                {column.header}
+                {column.sortable && sort?.column === column.id ? sortIndicator(sort.direction) : ""}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {isLoading ? (
+            <TableLoadingRow colSpan={colSpan} />
+          ) : rows.length === 0 ? (
+            <TableEmptyRow colSpan={colSpan} message={emptyMessage} />
+          ) : (
+            rows.map((row) => (
+              <TableRow key={rowKey(row)} hover>
+                {columns.map((column) => (
+                  <TableCell key={column.id} align={column.align} className={column.cellClassName}>
+                    {column.render(row)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/src/components/ui/search-input.tsx b/src/components/ui/search-input.tsx
new file mode 100644
index 00000000..b1d6241e
--- /dev/null
+++ b/src/components/ui/search-input.tsx
@@ -0,0 +1,53 @@
+import type { InputHTMLAttributes } from "react";
+import { Search } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type SearchInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "value" | "onChange" | "type"
+> & {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  inputClassName?: string;
+  fullWidth?: boolean;
+  "aria-label"?: string;
+};
+
+export function SearchInput({
+  value,
+  onChange,
+  placeholder = "Search…",
+  className,
+  inputClassName,
+  fullWidth = false,
+  "aria-label": ariaLabel = "Search",
+  ...props
+}: SearchInputProps) {
+  return (
+    <div className={cn("relative shrink-0", className)}>
+      <Search
+        size={13}
+        aria-hidden
+        className="pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-muted-foreground"
+      />
+      <input
+        type="search"
+        value={value}
+        onChange={(event) => onChange(event.currentTarget.value)}
+        placeholder={placeholder}
+        aria-label={ariaLabel}
+        className={cn(
+          "box-border rounded-md border border-border bg-background py-1.5 pl-8 text-foreground focus:outline-none",
+          fullWidth
+            ? "w-full pr-2.5 text-[13px]"
+            : "w-56 pr-7 font-sans text-[12px] placeholder:text-muted-foreground placeholder:opacity-100 hover:border-border-hover focus:border-border",
+          inputClassName,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
diff --git a/src/components/ui/segment-control.tsx b/src/components/ui/segment-control.tsx
new file mode 100644
index 00000000..fbc23757
--- /dev/null
+++ b/src/components/ui/segment-control.tsx
@@ -0,0 +1,49 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export type SegmentGroupProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+};
+
+export function SegmentGroup({ children, className, ...props }: SegmentGroupProps) {
+  return (
+    <div
+      className={cn("flex items-center gap-0.5 rounded-md bg-(--color-bg-muted) p-0.5", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export type SegmentButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  active?: boolean;
+  children: ReactNode;
+};
+
+export function SegmentButton({
+  active = false,
+  children,
+  className,
+  type = "button",
+  disabled,
+  ...props
+}: SegmentButtonProps) {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={cn(
+        "h-7 cursor-pointer whitespace-nowrap rounded-[5px] px-3 text-[13px] font-semibold transition-all disabled:cursor-not-allowed disabled:opacity-50",
+        active
+          ? "bg-card text-primary shadow-[0_1px_2px_rgba(38,34,98,.1)]"
+          : "bg-transparent text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/ui/select-all-action.tsx b/src/components/ui/select-all-action.tsx
new file mode 100644
index 00000000..016b4a16
--- /dev/null
+++ b/src/components/ui/select-all-action.tsx
@@ -0,0 +1,31 @@
+import type { ButtonHTMLAttributes } from "react";
+
+import { cn } from "@/lib/utils";
+
+export type SelectAllActionProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  anySelected: boolean;
+  selectAllLabel?: string;
+  clearAllLabel?: string;
+};
+
+export function SelectAllAction({
+  anySelected,
+  selectAllLabel = "Select all",
+  clearAllLabel = "Clear all",
+  className,
+  type = "button",
+  ...props
+}: SelectAllActionProps) {
+  return (
+    <button
+      type={type}
+      className={cn(
+        "cursor-pointer text-[11px] font-medium text-primary hover:underline",
+        className,
+      )}
+      {...props}
+    >
+      {anySelected ? clearAllLabel : selectAllLabel}
+    </button>
+  );
+}
diff --git a/src/components/ui/side-sheet.tsx b/src/components/ui/side-sheet.tsx
new file mode 100644
index 00000000..e0813a20
--- /dev/null
+++ b/src/components/ui/side-sheet.tsx
@@ -0,0 +1,51 @@
+import type { MouseEvent, ReactNode } from "react";
+import { Drawer } from "@mui/material";
+import { DIALOG_BLUR_BACKDROP_SX } from "@/components/ui/dialog-blur-backdrop";
+import { cn } from "@/lib/utils";
+
+type SideSheetProps = {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  widthClass?: string;
+  /** When true, backdrop click and ESC do not close the sheet. */
+  closeDisabled?: boolean;
+  "aria-label"?: string;
+};
+
+export function SideSheet({
+  open,
+  onClose,
+  children,
+  widthClass = "w-full max-w-sm",
+  closeDisabled = false,
+  "aria-label": ariaLabel = "Side panel",
+}: SideSheetProps) {
+  return (
+    <Drawer
+      anchor="right"
+      open={open}
+      onClose={(_event, reason) => {
+        if (closeDisabled) return;
+        if (reason === "backdropClick" || reason === "escapeKeyDown") {
+          onClose();
+        }
+      }}
+      slotProps={{
+        backdrop: {
+          sx: DIALOG_BLUR_BACKDROP_SX,
+          ...(closeDisabled ? { onClick: (e: MouseEvent) => e.stopPropagation() } : {}),
+        },
+        paper: {
+          className: cn(
+            "flex h-full flex-col gap-0 border-l border-border bg-background p-0 shadow-lg",
+            widthClass,
+          ),
+          "aria-label": ariaLabel,
+        },
+      }}
+    >
+      {children}
+    </Drawer>
+  );
+}
diff --git a/src/components/ui/status-chip-filter.tsx b/src/components/ui/status-chip-filter.tsx
new file mode 100644
index 00000000..04308315
--- /dev/null
+++ b/src/components/ui/status-chip-filter.tsx
@@ -0,0 +1,42 @@
+import { Chip, Stack } from "@mui/material";
+
+type StatusChipFilterProps = {
+  options: readonly string[];
+  value: string;
+  onChange: (status: string) => void;
+  label?: string;
+};
+
+export function StatusChipFilter({
+  options,
+  value,
+  onChange,
+  label = "Status",
+}: StatusChipFilterProps) {
+  return (
+    <div>
+      <span className="mb-1 block text-[11px] font-semibold text-muted-foreground">{label}</span>
+      <Stack direction="row" spacing={0.75} useFlexGap sx={{ flexWrap: "wrap" }}>
+        <Chip
+          label="All"
+          size="small"
+          clickable
+          color={value === "" ? "primary" : "default"}
+          variant={value === "" ? "filled" : "outlined"}
+          onClick={() => onChange("")}
+        />
+        {options.map((status) => (
+          <Chip
+            key={status}
+            label={status}
+            size="small"
+            clickable
+            color={value === status ? "primary" : "default"}
+            variant={value === status ? "filled" : "outlined"}
+            onClick={() => onChange(status)}
+          />
+        ))}
+      </Stack>
+    </div>
+  );
+}
diff --git a/src/components/ui/table-skeleton-rows.tsx b/src/components/ui/table-skeleton-rows.tsx
new file mode 100644
index 00000000..3ae11b7c
--- /dev/null
+++ b/src/components/ui/table-skeleton-rows.tsx
@@ -0,0 +1,29 @@
+import { Skeleton } from "@mui/material";
+
+type TableSkeletonRowsProps = {
+  rows?: number;
+  columns: { key: string; width: number }[];
+  rowHeight?: number;
+};
+
+export function TableSkeletonRows({ rows = 3, columns, rowHeight = 52 }: TableSkeletonRowsProps) {
+  return (
+    <>
+      {Array.from({ length: rows }, (_, rowIndex) => (
+        <tr key={rowIndex} style={{ height: rowHeight }}>
+          {columns.map((col) => (
+            <td key={col.key} style={{ padding: "0 14px", width: col.width, minWidth: col.width }}>
+              <Skeleton
+                variant="rounded"
+                height={14}
+                width="72%"
+                animation="wave"
+                sx={{ bgcolor: "action.hover" }}
+              />
+            </td>
+          ))}
+        </tr>
+      ))}
+    </>
+  );
+}
diff --git a/src/components/ui/table-state-rows.tsx b/src/components/ui/table-state-rows.tsx
new file mode 100644
index 00000000..95becef7
--- /dev/null
+++ b/src/components/ui/table-state-rows.tsx
@@ -0,0 +1,31 @@
+import { CircularProgress, TableCell, TableRow, Typography } from "@mui/material";
+
+type TableLoadingRowProps = {
+  colSpan: number;
+  size?: number;
+};
+
+export function TableLoadingRow({ colSpan, size = 28 }: TableLoadingRowProps) {
+  return (
+    <TableRow>
+      <TableCell colSpan={colSpan} align="center" className="py-10">
+        <CircularProgress size={size} />
+      </TableCell>
+    </TableRow>
+  );
+}
+
+type TableEmptyRowProps = {
+  colSpan: number;
+  message?: string;
+};
+
+export function TableEmptyRow({ colSpan, message = "No items found" }: TableEmptyRowProps) {
+  return (
+    <TableRow>
+      <TableCell colSpan={colSpan} align="center" className="py-10">
+        <Typography color="text.secondary">{message}</Typography>
+      </TableCell>
+    </TableRow>
+  );
+}
diff --git a/src/components/ui/text-field.tsx b/src/components/ui/text-field.tsx
new file mode 100644
index 00000000..f1a8e15c
--- /dev/null
+++ b/src/components/ui/text-field.tsx
@@ -0,0 +1,51 @@
+import type { TextFieldProps } from "@mui/material";
+import { TextField as MuiTextField } from "@mui/material";
+
+import { cn } from "@/lib/utils";
+
+export type UiTextFieldProps = TextFieldProps;
+
+const textFieldSx = {
+  "& .MuiOutlinedInput-root": {
+    height: 40,
+    fontFamily: "var(--font-sans)",
+    fontSize: "var(--text-base)",
+  },
+  "& .MuiInputBase-input": {
+    fontFamily: "var(--font-sans)",
+    fontSize: "var(--text-base)",
+    color: "var(--foreground)",
+    "&::placeholder": {
+      color: "var(--placeholder-foreground)",
+      opacity: 1,
+    },
+    "&::-webkit-input-placeholder": {
+      color: "var(--placeholder-foreground)",
+      opacity: 1,
+    },
+    "&::-moz-placeholder": {
+      color: "var(--placeholder-foreground)",
+      opacity: 1,
+    },
+  },
+} as const;
+
+export function TextField({
+  className,
+  fullWidth = true,
+  hiddenLabel = true,
+  size = "small",
+  sx,
+  ...props
+}: UiTextFieldProps) {
+  return (
+    <MuiTextField
+      fullWidth={fullWidth}
+      hiddenLabel={hiddenLabel}
+      size={size}
+      sx={[textFieldSx, ...(Array.isArray(sx) ? sx : sx ? [sx] : [])]}
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/ui/text.tsx b/src/components/ui/text.tsx
new file mode 100644
index 00000000..f7041792
--- /dev/null
+++ b/src/components/ui/text.tsx
@@ -0,0 +1,104 @@
+import type { ElementType, ReactNode } from "react";
+import {
+  Typography as MuiTypography,
+  type TypographyProps as MuiTypographyProps,
+} from "@mui/material";
+
+type TextVariant =
+  | "display"
+  | "title"
+  | "heading"
+  | "body"
+  | "description"
+  | "label"
+  | "feedback"
+  | "error"
+  | "caption"
+  | "code";
+
+type TextTone = "default" | "muted" | "error" | "success" | "warning";
+type TextFamily = "display" | "body" | "mono";
+
+export type TextProps = Omit<
+  MuiTypographyProps,
+  "children" | "color" | "variant" | "component" | "role" | "aria-live" | "aria-atomic"
+> & {
+  children: ReactNode;
+  as?: ElementType;
+  family?: TextFamily;
+  tone?: TextTone;
+  variant?: TextVariant;
+  when?: boolean;
+};
+
+const variantConfig: Record<
+  TextVariant,
+  { element: ElementType; muiVariant: MuiTypographyProps["variant"]; family: TextFamily }
+> = {
+  display: { element: "h1", muiVariant: "h3", family: "display" },
+  title: { element: "h2", muiVariant: "h5", family: "display" },
+  heading: { element: "h3", muiVariant: "h6", family: "display" },
+  body: { element: "p", muiVariant: "body1", family: "body" },
+  description: { element: "p", muiVariant: "body2", family: "body" },
+  label: { element: "span", muiVariant: "subtitle2", family: "body" },
+  feedback: { element: "p", muiVariant: "body2", family: "body" },
+  error: { element: "p", muiVariant: "body2", family: "body" },
+  caption: { element: "span", muiVariant: "caption", family: "body" },
+  code: { element: "code", muiVariant: "body2", family: "mono" },
+};
+
+const toneColor: Record<TextTone, MuiTypographyProps["color"]> = {
+  default: "text.primary",
+  muted: "text.secondary",
+  error: "error",
+  success: "success.main",
+  warning: "warning.main",
+};
+
+const familyValue: Record<TextFamily, string> = {
+  display: "var(--font-display)",
+  body: "var(--font-sans)",
+  mono: "var(--font-mono)",
+};
+
+export function Text({
+  as,
+  children,
+  family,
+  tone,
+  variant = "body",
+  when = true,
+  sx,
+  ...props
+}: TextProps) {
+  const persistRegion = variant === "feedback";
+
+  if (!when && !persistRegion) {
+    return null;
+  }
+
+  const config = variantConfig[variant];
+  const resolvedTone = tone ?? (variant === "error" ? "error" : "default");
+  let liveProps = {};
+  if (variant === "error") {
+    liveProps = { role: "alert", "aria-live": "assertive" as const, "aria-atomic": true as const };
+  } else if (variant === "feedback") {
+    liveProps = { role: "status", "aria-live": "polite" as const, "aria-atomic": true as const };
+  }
+
+  return (
+    <MuiTypography
+      {...props}
+      component={as ?? config.element}
+      variant={config.muiVariant}
+      color={toneColor[resolvedTone]}
+      sx={[
+        { fontFamily: familyValue[family ?? config.family] },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      {...liveProps}
+    >
+      {when && children}
+    </MuiTypography>
+  );
+}
diff --git a/src/components/ui/toggle-card.tsx b/src/components/ui/toggle-card.tsx
new file mode 100644
index 00000000..d3fb29ef
--- /dev/null
+++ b/src/components/ui/toggle-card.tsx
@@ -0,0 +1,40 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export type ToggleCardProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  selected: boolean;
+  title: ReactNode;
+  description?: ReactNode;
+};
+
+export function ToggleCard({
+  selected,
+  title,
+  description,
+  className,
+  type = "button",
+  disabled,
+  ...props
+}: ToggleCardProps) {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={cn(
+        "cursor-pointer rounded-lg text-left transition-colors",
+        selected
+          ? "border-2 border-primary bg-primary/10 px-[11px] py-[9px]"
+          : "border border-border bg-background px-3 py-2.5 hover:bg-muted",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <div className="text-[13px] font-semibold text-foreground">{title}</div>
+      {description != null && (
+        <div className="mt-0.5 text-[11px] leading-snug text-muted-foreground">{description}</div>
+      )}
+    </button>
+  );
+}
diff --git a/src/components/ui/toggle-pill.tsx b/src/components/ui/toggle-pill.tsx
new file mode 100644
index 00000000..101cb0aa
--- /dev/null
+++ b/src/components/ui/toggle-pill.tsx
@@ -0,0 +1,36 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export type TogglePillProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  selected: boolean;
+  children: ReactNode;
+};
+
+export function TogglePill({
+  selected,
+  children,
+  className,
+  type = "button",
+  disabled,
+  ...props
+}: TogglePillProps) {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={cn(
+        "h-7 cursor-pointer rounded-full border px-3 text-[12.5px] font-medium transition-colors",
+        selected
+          ? "border-primary bg-primary/10 text-primary"
+          : "border-border bg-background text-muted-foreground hover:bg-muted",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+      {...props}
+      aria-pressed={selected}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/ui/toggle-segment.tsx b/src/components/ui/toggle-segment.tsx
new file mode 100644
index 00000000..04c399f2
--- /dev/null
+++ b/src/components/ui/toggle-segment.tsx
@@ -0,0 +1,36 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export type ToggleSegmentProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  selected: boolean;
+  children: ReactNode;
+};
+
+export function ToggleSegment({
+  selected,
+  children,
+  className,
+  type = "button",
+  disabled,
+  ...props
+}: ToggleSegmentProps) {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={cn(
+        "h-8 flex-1 cursor-pointer rounded-md text-[12.5px] font-semibold transition-colors",
+        selected
+          ? "border-2 border-primary bg-primary/10 text-primary"
+          : "border border-border bg-background text-muted-foreground hover:bg-muted",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+      {...props}
+      aria-pressed={selected}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/ui/toolbar-button.tsx b/src/components/ui/toolbar-button.tsx
new file mode 100644
index 00000000..2c4ac157
--- /dev/null
+++ b/src/components/ui/toolbar-button.tsx
@@ -0,0 +1,55 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+type ToolbarButtonVariant = "outline" | "primary";
+
+export type ToolbarButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  variant?: ToolbarButtonVariant;
+  icon?: ReactNode;
+  children: ReactNode;
+  badge?: number;
+};
+
+const baseClasses =
+  "inline-flex h-8 shrink-0 cursor-pointer items-center gap-1.5 rounded-md text-[12px] font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+const variantClasses: Record<ToolbarButtonVariant, string> = {
+  outline:
+    "relative border border-border bg-background px-3 text-foreground transition-colors hover:bg-muted",
+  primary:
+    "justify-center border border-transparent bg-clip-padding px-2.5 bg-primary text-primary-foreground transition-all outline-none select-none hover:bg-primary/80 active:translate-y-px",
+};
+
+export function ToolbarButton({
+  variant = "outline",
+  icon,
+  children,
+  badge,
+  className,
+  disabled,
+  type = "button",
+  ...props
+}: ToolbarButtonProps) {
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={cn(
+        baseClasses,
+        variantClasses[variant],
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      {icon}
+      {children}
+      {badge != null && badge > 0 && (
+        <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold text-white">
+          {badge}
+        </span>
+      )}
+    </button>
+  );
+}
diff --git a/src/config/menu.ts b/src/config/menu.ts
new file mode 100644
index 00000000..c5b6fce4
--- /dev/null
+++ b/src/config/menu.ts
@@ -0,0 +1,80 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  // BarChart2,
+  BriefcaseBusiness,
+  Building2,
+  ClipboardList,
+  FileText,
+  LayoutDashboard,
+  MapPin,
+  Bell,
+  BarChart3,
+  Star,
+  Users,
+} from "lucide-react";
+
+export type NavItemDef = {
+  label: string;
+  icon: LucideIcon;
+  path: string;
+  badge?: number;
+};
+
+export type NavGroup = {
+  title: string;
+  items: NavItemDef[];
+};
+
+export const SIDEBAR_WIDTH = 244;
+
+export const SIDEBAR_COLLAPSED_WIDTH = 76;
+
+export function getSidebarWidth(collapsed: boolean): number {
+  return collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_WIDTH;
+}
+
+export const navGroups: NavGroup[] = [
+  {
+    title: "",
+    items: [
+      { label: "Work Orders", icon: ClipboardList, path: "/workorders", badge: 11 },
+      { label: "Dashboard", icon: LayoutDashboard, path: "/" },
+      { label: "Notifications", icon: Bell, path: "/notifications" },
+      // { label: "Reports", icon: BarChart2, path: "/reports" },
+    ],
+  },
+  {
+    title: "VENDORS",
+    items: [
+      { label: "Vendors", icon: Building2, path: "/vendors" },
+      { label: "Vendor POs", icon: FileText, path: "/vendor-pos" },
+      { label: "Vendor Insights", icon: BarChart3, path: "/vendors/insights" },
+      { label: "Site Preferences", icon: Star, path: "/vendors/preferences" },
+    ],
+  },
+  {
+    title: "CUSTOMERS & SITES",
+    items: [
+      { label: "Accounts", icon: BriefcaseBusiness, path: "/accounts" },
+      { label: "Sites", icon: MapPin, path: "/locations" },
+    ],
+  },
+  {
+    title: "TEAM",
+    items: [{ label: "Team Members", icon: Users, path: "/team-members" }],
+  },
+  // {
+  //   title: "INTERNAL",
+  //   items: [{ label: "Documents", icon: FileText, path: "/documents" }],
+  // },
+];
+
+export function getActiveNavPath(pathname: string): string | undefined {
+  return navGroups
+    .flatMap((group) => group.items)
+    .map((item) => item.path)
+    .filter((path) =>
+      path === "/" ? pathname === path : pathname === path || pathname.startsWith(`${path}/`),
+    )
+    .sort((firstPath, secondPath) => secondPath.length - firstPath.length)[0];
+}
diff --git a/src/config/pm-schedule-capabilities.ts b/src/config/pm-schedule-capabilities.ts
new file mode 100644
index 00000000..653575e3
--- /dev/null
+++ b/src/config/pm-schedule-capabilities.ts
@@ -0,0 +1,20 @@
+/**
+ * PM Schedule API capabilities aligned with production backend (`origin/Dev`).
+ *
+ * Exposed controller endpoints on Dev:
+ * - GET  PMSchedule/GetList
+ * - POST PMSchedule/Save (Id=0 create, Id>0 update)
+ *
+ * Not exposed on Dev (present on `main` after 59385cf):
+ * - GET  PMSchedule/GetById
+ * - POST PMSchedule/Delete
+ *
+ * Flip flags to true only after Dev exposes the matching endpoints.
+ */
+export const pmScheduleCapabilities = {
+  canCreate: true,
+  canEdit: false,
+  canDelete: false,
+} as const;
+
+export type PmScheduleCapabilities = typeof pmScheduleCapabilities;
diff --git a/src/constants/actionTypes.js b/src/constants/actionTypes.js
deleted file mode 100644
index fed9bf21..00000000
--- a/src/constants/actionTypes.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// Redux Action Types
-
-// Auth Actions
-export const AUTH_SET_USER = 'auth/setUser';
-export const AUTH_LOGOUT = 'auth/logout';
-export const AUTH_SET_LOADING = 'auth/setLoading';
-export const AUTH_SET_ERROR = 'auth/setError';
-export const AUTH_CLEAR_ERROR = 'auth/clearError';
-
-// UI Actions
-export const UI_TOGGLE_SIDEBAR = 'ui/toggleSidebar';
-export const UI_SET_SIDEBAR_OPEN = 'ui/setSidebarOpen';
-export const UI_SET_THEME = 'ui/setTheme';
-export const UI_ADD_NOTIFICATION = 'ui/addNotification';
-export const UI_REMOVE_NOTIFICATION = 'ui/removeNotification';
-export const UI_CLEAR_NOTIFICATIONS = 'ui/clearNotifications';
diff --git a/src/constants/index.js b/src/constants/index.js
deleted file mode 100644
index b44ac009..00000000
--- a/src/constants/index.js
+++ /dev/null
@@ -1,87 +0,0 @@
-// Main constants file - exports all constants
-
-// API Constants
-export const ADD = "add";
-export const EDIT = "edit";
-
-export const API_ERROR_MESSAGE = "Sorry, something went wrong. Please try again later.";
-export const API_SUCCESS_MESSAGE = "Your changes have been successfully saved.";
-export const API_DELETE_SUCCESS_MESSAGE = "Item deleted successfully";
-
-export const API_URL = process.env.REACT_APP_API_URL || "/api";
-
-// Cache Times (in milliseconds)
-export const CACHE_TIME_SHORT = 2 * 60 * 1000;      // 2 minutes
-export const CACHE_TIME_MEDIUM = 5 * 60 * 1000;     // 5 minutes
-export const CACHE_TIME_LONG = 10 * 60 * 1000;      // 10 minutes
-export const CACHE_TIME_VERY_LONG = 30 * 60 * 1000; // 30 minutes
-
-// Stale Times (in milliseconds)
-export const STALE_TIME_SHORT = 1 * 60 * 1000;      // 1 minute
-export const STALE_TIME_MEDIUM = 5 * 60 * 1000;     // 5 minutes
-export const STALE_TIME_LONG = 10 * 60 * 1000;      // 10 minutes
-export const STALE_TIME_VERY_LONG = 30 * 60 * 1000; // 30 minutes
-
-// Pagination
-export const DEFAULT_PAGE_SIZE = 12;
-export const DEFAULT_PAGE = 1;
-
-// Debounce Times
-export const DEBOUNCE_SEARCH = 600;  // 600ms for search inputs
-export const DEBOUNCE_RESIZE = 300;  // 300ms for window resize
-export const DEBOUNCE_INPUT = 400;   // 400ms for general inputs
-
-// Local Storage Keys
-export const STORAGE_KEY_TOKEN = 'token';
-export const STORAGE_KEY_THEME = 'theme';
-export const STORAGE_KEY_SIDEBAR = 'sidebarOpen';
-
-// Themes
-export const THEME_LIGHT = 'light';
-export const THEME_DARK = 'dark';
-
-// View Modes
-export const VIEW_MODE_LIST = 'list';
-export const VIEW_MODE_CARD = 'card';
-export const VIEW_MODE_GRID = 'grid';
-
-// Status Types
-export const STATUS_OPEN = 'Open';
-export const STATUS_CLOSED = 'Closed';
-export const STATUS_PENDING = 'Pending';
-export const STATUS_COMPLETED = 'Completed';
-export const STATUS_CANCELLED = 'Cancelled';
-export const STATUS_IN_PROGRESS = 'In Progress';
-
-// Priority Levels
-export const PRIORITY_LOW = 'Low';
-export const PRIORITY_MEDIUM = 'Medium';
-export const PRIORITY_HIGH = 'High';
-export const PRIORITY_URGENT = 'Urgent';
-
-// Form Modes
-export const FORM_MODE_CREATE = 'create';
-export const FORM_MODE_EDIT = 'edit';
-export const FORM_MODE_VIEW = 'view';
-
-// Helper function for form text
-export const form_text_builder = (mode) => {
-  let PRIMARY_TEXT = "";
-  let SECONDARY_TEXT = "";
-  let BUTTON_TEXT = "";
-
-  if (mode === ADD) {
-    PRIMARY_TEXT = "Add an Item";
-    SECONDARY_TEXT = "Add your new item below";
-    BUTTON_TEXT = "Add Item";
-  } else {
-    PRIMARY_TEXT = "Edit an Item";
-    SECONDARY_TEXT = "Edit your item below";
-    BUTTON_TEXT = "Save Item";
-  }
-  return { PRIMARY_TEXT, SECONDARY_TEXT, BUTTON_TEXT };
-};
-
-// Re-export all action types and query keys
-export * from './actionTypes';
-export * from './queryKeys';
diff --git a/src/constants/queryKeys.js b/src/constants/queryKeys.js
deleted file mode 100644
index 9619efb2..00000000
--- a/src/constants/queryKeys.js
+++ /dev/null
@@ -1,82 +0,0 @@
-// React Query Keys - Centralized query key management
-
-// Work Orders
-export const WORK_ORDERS_LIST = 'workOrdersList';
-export const WORK_ORDERS_DETAIL = 'workOrdersDetail';
-export const WORK_ORDERS_BY_LOCATION = 'workOrdersByLocation';
-export const WORK_ORDERS_BY_ACCOUNT = 'workOrdersByAccount';
-
-// PM Schedules
-export const PM_SCHEDULES_LIST = 'pmSchedulesList';
-export const PM_SCHEDULES_DETAIL = 'pmSchedulesDetail';
-export const PM_SCHEDULES_BY_ASSET = 'pmSchedulesByAsset';
-export const PM_SCHEDULES_BY_LOCATION = 'pmSchedulesByLocation';
-
-// Follow Ups
-export const FOLLOW_UPS_LIST = 'followUpsList';
-export const FOLLOW_UPS_DETAIL = 'followUpsDetail';
-export const FOLLOW_UPS_BY_STATUS = 'followUpsByStatus';
-export const FOLLOW_UPS_BY_WORK_ORDER = 'followUpsByWorkOrder';
-
-// Employees
-export const EMPLOYEES_LIST = 'employeesList';
-export const EMPLOYEES_DETAIL = 'employeesDetail';
-export const EMPLOYEES_DROPDOWN = 'employeesDropdown';
-export const EMPLOYEES_BY_DEPARTMENT = 'employeesByDepartment';
-
-// Contacts
-export const CONTACTS_LIST = 'contactsList';
-export const CONTACTS_DETAIL = 'contactsDetail';
-export const CONTACTS_DROPDOWN = 'contactsDropdown';
-export const CONTACTS_BY_LOCATION = 'contactsByLocation';
-export const CONTACTS_BY_ACCOUNT = 'contactsByAccount';
-
-// Locations
-export const LOCATIONS_LIST = 'locationsList';
-export const LOCATIONS_DETAIL = 'locationsDetail';
-export const LOCATIONS_DROPDOWN = 'locationsDropdown';
-export const LOCATIONS_BY_ACCOUNT = 'locationsByAccount';
-
-// Accounts
-export const ACCOUNTS_LIST = 'accountsList';
-export const ACCOUNTS_DETAIL = 'accountsDetail';
-export const ACCOUNTS_DROPDOWN = 'accountsDropdown';
-
-// Assets
-export const ASSETS_LIST = 'assetsList';
-export const ASSETS_DETAIL = 'assetsDetail';
-export const ASSETS_BY_LOCATION = 'assetsByLocation';
-export const ASSETS_BY_ACCOUNT = 'assetsByAccount';
-
-// Vendors
-export const VENDORS_LIST = 'vendorsList';
-export const VENDORS_DETAIL = 'vendorsDetail';
-export const VENDORS_DROPDOWN = 'vendorsDropdown';
-export const VENDORS_BY_TRADE = 'vendorsByTrade';
-
-// Dashboard
-export const DASHBOARD_STATS = 'dashboardStats';
-export const DASHBOARD_RECENT_WORK_ORDERS = 'dashboardRecentWorkOrders';
-export const DASHBOARD_OVERDUE_WORK_ORDERS = 'dashboardOverdueWorkOrders';
-
-// Dropdowns
-export const DROPDOWN_OPTIONS_BY_CATEGORY = 'dropdownOptionsByCategory';
-export const DROPDOWN_PARENTS = 'dropdownParents';
-
-// Dispatches
-export const DISPATCHES_LIST = 'dispatchesList';
-export const DISPATCHES_DETAIL = 'dispatchesDetail';
-export const DISPATCHES_BY_VENDOR = 'dispatchesByVendor';
-
-// Task Templates
-export const TASK_TEMPLATES_LIST = 'taskTemplatesList';
-export const TASK_TEMPLATES_DETAIL = 'taskTemplatesDetail';
-
-// Uplifts
-export const UPLIFTS_LIST = 'upliftsList';
-export const UPLIFTS_BY_DISPATCH = 'upliftsByDispatch';
-
-// Calendar Events
-export const CALENDAR_EVENTS_LIST = 'calendarEventsList';
-export const CALENDAR_EVENTS_DETAIL = 'calendarEventsDetail';
-export const CALENDAR_EVENTS_BY_DATE_RANGE = 'calendarEventsByDateRange';
diff --git a/src/data/areas.ts b/src/data/areas.ts
new file mode 100644
index 00000000..9fbda1b0
--- /dev/null
+++ b/src/data/areas.ts
@@ -0,0 +1,170 @@
+/**
+ * Canonical source of truth for US states and their Seahaven area zone
+ * mapping. Exactly the 50 states — no DC and no territories.
+ * Area is always derived from the state code and never persisted.
+ */
+export const AREA_ZONES = ["East", "Central", "West", "California"] as const;
+
+export type AreaZone = (typeof AREA_ZONES)[number];
+
+export const AREA_ZONE_STATE_CODES = {
+  East: [
+    "CT",
+    "DE",
+    "GA",
+    "MA",
+    "MD",
+    "ME",
+    "NC",
+    "NH",
+    "NJ",
+    "NY",
+    "PA",
+    "RI",
+    "SC",
+    "VA",
+    "VT",
+    "WV",
+  ],
+  Central: [
+    "AL",
+    "AR",
+    "FL",
+    "IA",
+    "IL",
+    "IN",
+    "KS",
+    "KY",
+    "LA",
+    "MI",
+    "MN",
+    "MO",
+    "MS",
+    "ND",
+    "NE",
+    "OH",
+    "OK",
+    "SD",
+    "TN",
+    "WI",
+  ],
+  West: ["AK", "AZ", "CO", "HI", "ID", "MT", "NM", "NV", "OR", "TX", "UT", "WA", "WY"],
+  California: ["CA"],
+} as const satisfies Record<AreaZone, readonly string[]>;
+
+export type StateCode = (typeof AREA_ZONE_STATE_CODES)[AreaZone][number];
+
+/** All 50 state codes in canonical order: East, Central, West, California. */
+export const US_STATE_CODES = [
+  ...AREA_ZONE_STATE_CODES.East,
+  ...AREA_ZONE_STATE_CODES.Central,
+  ...AREA_ZONE_STATE_CODES.West,
+  ...AREA_ZONE_STATE_CODES.California,
+] as [StateCode, ...StateCode[]];
+
+const STATE_NAMES = {
+  AL: "Alabama",
+  AK: "Alaska",
+  AZ: "Arizona",
+  AR: "Arkansas",
+  CA: "California",
+  CO: "Colorado",
+  CT: "Connecticut",
+  DE: "Delaware",
+  FL: "Florida",
+  GA: "Georgia",
+  HI: "Hawaii",
+  ID: "Idaho",
+  IL: "Illinois",
+  IN: "Indiana",
+  IA: "Iowa",
+  KS: "Kansas",
+  KY: "Kentucky",
+  LA: "Louisiana",
+  ME: "Maine",
+  MD: "Maryland",
+  MA: "Massachusetts",
+  MI: "Michigan",
+  MN: "Minnesota",
+  MS: "Mississippi",
+  MO: "Missouri",
+  MT: "Montana",
+  NE: "Nebraska",
+  NV: "Nevada",
+  NH: "New Hampshire",
+  NJ: "New Jersey",
+  NM: "New Mexico",
+  NY: "New York",
+  NC: "North Carolina",
+  ND: "North Dakota",
+  OH: "Ohio",
+  OK: "Oklahoma",
+  OR: "Oregon",
+  PA: "Pennsylvania",
+  RI: "Rhode Island",
+  SC: "South Carolina",
+  SD: "South Dakota",
+  TN: "Tennessee",
+  TX: "Texas",
+  UT: "Utah",
+  VT: "Vermont",
+  VA: "Virginia",
+  WA: "Washington",
+  WV: "West Virginia",
+  WI: "Wisconsin",
+  WY: "Wyoming",
+} as const satisfies Record<StateCode, string>;
+
+export interface StateAreaEntry {
+  code: StateCode;
+  name: string;
+  zone: AreaZone;
+}
+
+/** All 50 states with postal code, full name, and their single area zone. */
+export const STATE_AREA_ENTRIES: readonly StateAreaEntry[] = AREA_ZONES.flatMap((zone) =>
+  AREA_ZONE_STATE_CODES[zone].map((code) => ({ code, name: STATE_NAMES[code], zone })),
+);
+
+const STATE_CODE_SET = new Set<string>(US_STATE_CODES);
+
+const STATE_NAME_TO_CODE = new Map<string, StateCode>(
+  STATE_AREA_ENTRIES.map((entry) => [entry.name.toLowerCase(), entry.code]),
+);
+
+const STATE_ZONE_BY_CODE = Object.fromEntries(
+  STATE_AREA_ENTRIES.map((entry) => [entry.code, entry.zone]),
+) as Record<StateCode, AreaZone>;
+
+/** Autocomplete option label: `Texas (TX)`. */
+export function formatStateOptionLabel(code: StateCode): string {
+  return `${STATE_NAMES[code]} (${code})`;
+}
+
+/**
+ * Normalizes legacy API state values to the canonical two-letter code.
+ * Accepts codes in any case and full state names (any case); otherwise null.
+ */
+export function normalizeStateCode(value: string | null | undefined): StateCode | null {
+  const trimmed = value?.trim() ?? "";
+  if (trimmed === "") {
+    return null;
+  }
+  const upper = trimmed.toUpperCase();
+  if (STATE_CODE_SET.has(upper)) {
+    return upper as StateCode;
+  }
+  return STATE_NAME_TO_CODE.get(trimmed.toLowerCase()) ?? null;
+}
+
+/** Derives the area zone for a state code or legacy full-name value. */
+export function getAreaForState(value: string | null | undefined): AreaZone | null {
+  const code = normalizeStateCode(value);
+  return code === null ? null : STATE_ZONE_BY_CODE[code];
+}
+
+/** Expands selected area zones to their state codes in canonical order. */
+export function expandAreasToStateCodes(areas: readonly AreaZone[]): StateCode[] {
+  const selected = new Set<AreaZone>(areas);
+  return US_STATE_CODES.filter((code) => selected.has(STATE_ZONE_BY_CODE[code]));
+}
diff --git a/src/domain/accounts/api/accounts-api.ts b/src/domain/accounts/api/accounts-api.ts
new file mode 100644
index 00000000..f0d07328
--- /dev/null
+++ b/src/domain/accounts/api/accounts-api.ts
@@ -0,0 +1,95 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiGet, apiPost } from "@/api/api";
+import { handleApiResponse, handlePaginatedResponse } from "@/api/handle-api-response";
+import {
+  mapAccount,
+  mapAccountListItems,
+  mapAccountToBackend,
+} from "@/domain/accounts/mappers/account-mapper";
+import type {
+  Account,
+  AccountsListParams,
+  AccountsListResult,
+} from "@/domain/accounts/types/account";
+
+function buildSearchParams(params: AccountsListParams): Record<string, string | number> {
+  return {
+    search: params.search ?? "",
+    page: params.page ?? 1,
+    pageSize: params.pageSize ?? 12,
+  };
+}
+
+async function findAccountInList(id: string | number): Promise<Account> {
+  const targetId = String(id);
+  let page = 1;
+  const pageSize = 100;
+
+  while (true) {
+    const data = await apiGet<unknown>(API_PATHS.account.getList, {
+      searchParams: { search: "", page, pageSize },
+    });
+    const paginated = handlePaginatedResponse<unknown>(data, { page, pageSize });
+    const match = paginated.items.find((item) => {
+      const record = (typeof item === "object" && item !== null ? item : {}) as Record<
+        string,
+        unknown
+      >;
+      const itemId = record.id ?? record.Id;
+      return String(itemId) === targetId;
+    });
+
+    if (match) {
+      return mapAccount(match);
+    }
+
+    if (paginated.items.length === 0 || page * pageSize >= paginated.totalCount) {
+      throw new Error("Account not found");
+    }
+
+    page += 1;
+  }
+}
+
+export const accountsApi = {
+  getList: async (params: AccountsListParams = {}): Promise<AccountsListResult> => {
+    const searchParams = buildSearchParams(params);
+    const data = await apiGet<unknown>(API_PATHS.account.getList, { searchParams });
+    const paginated = handlePaginatedResponse<unknown>(data, {
+      page: params.page,
+      pageSize: params.pageSize,
+    });
+
+    return {
+      items: mapAccountListItems(paginated.items),
+      totalCount: paginated.totalCount,
+      page: paginated.page,
+      pageSize: paginated.pageSize,
+    };
+  },
+
+  /** Backend has no GetById — resolve from paginated list. */
+  getById: async (id: string | number): Promise<Account> => findAccountInList(id),
+
+  create: async (payload: unknown): Promise<Account> => {
+    const data = await apiPost<unknown>(
+      API_PATHS.account.addAccounts,
+      mapAccountToBackend(payload),
+    );
+    return mapAccount(handleApiResponse(data));
+  },
+
+  update: async (id: string | number, payload: unknown): Promise<Account> => {
+    const data = await apiPost<unknown>(
+      API_PATHS.account.editAccounts,
+      mapAccountToBackend({ ...(payload as object), id }),
+    );
+    return mapAccount(handleApiResponse(data));
+  },
+
+  delete: async (id: string | number): Promise<void> => {
+    await apiGet<unknown>(API_PATHS.account.deleteAccounts, {
+      searchParams: { id },
+    });
+  },
+};
diff --git a/src/domain/accounts/mappers/account-mapper.ts b/src/domain/accounts/mappers/account-mapper.ts
new file mode 100644
index 00000000..4927116a
--- /dev/null
+++ b/src/domain/accounts/mappers/account-mapper.ts
@@ -0,0 +1,91 @@
+import type { Account, AccountListItem } from "@/domain/accounts/types/account";
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+  }
+  return "";
+}
+
+function readId(record: Record<string, unknown>): string | number {
+  const value = record.id ?? record.Id;
+  if (typeof value === "string" || typeof value === "number") {
+    return value;
+  }
+  return "";
+}
+
+export function mapAccountListItem(raw: unknown): AccountListItem {
+  const item = (typeof raw === "object" && raw !== null ? raw : {}) as Record<string, unknown>;
+
+  return {
+    id: readId(item),
+    name: readString(item, "name", "Name", "AccountName"),
+    number: readString(item, "number", "AccountNumber"),
+    industry: readString(item, "industry", "Industry"),
+    website: readString(item, "website", "Website"),
+    primaryContact: readString(item, "primaryContact", "PrimaryContact"),
+    phoneNumber: readString(item, "phoneNumber", "Phone", "PhoneNumber"),
+    owner: readString(item, "owner", "Owner"),
+  };
+}
+
+export function mapAccountListItems(rawItems: unknown[]): AccountListItem[] {
+  return rawItems.map(mapAccountListItem);
+}
+
+export function mapAccount(raw: unknown): Account {
+  const item = (typeof raw === "object" && raw !== null ? raw : {}) as Record<string, unknown>;
+
+  return {
+    id: readId(item) || undefined,
+    AccountName: readString(item, "AccountName", "accountName", "name", "Name") || undefined,
+    AccountNumber: readString(item, "AccountNumber", "accountNumber", "number") || undefined,
+    Industry: readString(item, "Industry", "industry") || undefined,
+    Website: readString(item, "Website", "website") || undefined,
+    Notes: readString(item, "Notes", "notes") || undefined,
+    Address1: readString(item, "Address1", "address1") || undefined,
+    Address2: readString(item, "Address2", "address2") || undefined,
+    City: readString(item, "City", "city") || undefined,
+    State: readString(item, "State", "state") || undefined,
+    Zip: readString(item, "Zip", "zip", "zipCode") || undefined,
+    Country: readString(item, "Country", "country") || undefined,
+    Phone: readString(item, "Phone", "phone", "phoneNumber", "PhoneNumber") || undefined,
+    Email: readString(item, "Email", "email") || undefined,
+  };
+}
+
+export function mapAccountToBackend(account: unknown): Record<string, unknown> {
+  const item = (typeof account === "object" && account !== null ? account : {}) as Record<
+    string,
+    unknown
+  >;
+
+  const payload: Record<string, unknown> = {
+    Name: item.AccountName ?? item.Name ?? "",
+    Website: item.Website ?? "",
+  };
+
+  const phone = item.Phone ?? item.phoneNumber ?? item.PhoneNumber;
+  if (typeof phone === "string" && phone) {
+    payload.Phone = phone;
+  }
+
+  const email = item.Email ?? item.email;
+  if (typeof email === "string" && email) {
+    payload.Email = email;
+  }
+
+  const id = item.id ?? item.Id;
+  if (typeof id === "string" || typeof id === "number") {
+    payload.Id = id;
+  }
+
+  return payload;
+}
diff --git a/src/domain/accounts/schemas/account-schema.ts b/src/domain/accounts/schemas/account-schema.ts
new file mode 100644
index 00000000..4bfb0972
--- /dev/null
+++ b/src/domain/accounts/schemas/account-schema.ts
@@ -0,0 +1,17 @@
+import { z } from "zod";
+
+export const accountSchema = z.object({
+  AccountName: z.string().min(1, "Account Name is required"),
+  AccountNumber: z.string().optional(),
+  Industry: z.string().optional(),
+  Website: z.string().optional(),
+  Notes: z.string().optional(),
+  Address1: z.string().optional(),
+  Address2: z.string().optional(),
+  City: z.string().optional(),
+  State: z.string().optional(),
+  Zip: z.string().optional(),
+  Country: z.string().optional(),
+});
+
+export type AccountFormValues = z.infer<typeof accountSchema>;
diff --git a/src/domain/accounts/types/account.ts b/src/domain/accounts/types/account.ts
new file mode 100644
index 00000000..7d9823b0
--- /dev/null
+++ b/src/domain/accounts/types/account.ts
@@ -0,0 +1,40 @@
+export interface AccountListItem {
+  id: string | number;
+  name: string;
+  number: string;
+  industry: string;
+  website: string;
+  primaryContact: string;
+  phoneNumber: string;
+  owner: string;
+}
+
+export interface Account {
+  id?: string | number;
+  AccountName?: string;
+  AccountNumber?: string;
+  Industry?: string;
+  Website?: string;
+  Notes?: string;
+  Address1?: string;
+  Address2?: string;
+  City?: string;
+  State?: string;
+  Zip?: string;
+  Country?: string;
+  Phone?: string;
+  Email?: string;
+}
+
+export interface AccountsListParams {
+  search?: string;
+  page?: number;
+  pageSize?: number;
+}
+
+export interface AccountsListResult {
+  items: AccountListItem[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+}
diff --git a/src/domain/accounts/use-cases/use-account-detail.ts b/src/domain/accounts/use-cases/use-account-detail.ts
new file mode 100644
index 00000000..16da6e86
--- /dev/null
+++ b/src/domain/accounts/use-cases/use-account-detail.ts
@@ -0,0 +1,13 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { accountsApi } from "@/domain/accounts/api/accounts-api";
+import type { Account } from "@/domain/accounts/types/account";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+export function useAccountDetail(id: string | undefined): UseQueryResult<Account, Error> {
+  return useQuery({
+    queryKey: queryKeys.accounts.detail(id ?? ""),
+    queryFn: () => accountsApi.getById(requireQueryParam(id, "Account id")),
+    enabled: Boolean(id),
+  });
+}
diff --git a/src/domain/accounts/use-cases/use-accounts-list.ts b/src/domain/accounts/use-cases/use-accounts-list.ts
new file mode 100644
index 00000000..9dcb347a
--- /dev/null
+++ b/src/domain/accounts/use-cases/use-accounts-list.ts
@@ -0,0 +1,14 @@
+import { keepPreviousData, useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { accountsApi } from "@/domain/accounts/api/accounts-api";
+import type { AccountsListParams, AccountsListResult } from "@/domain/accounts/types/account";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useAccountsList(
+  params: AccountsListParams,
+): UseQueryResult<AccountsListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.accounts.list(params as Record<string, unknown>),
+    queryFn: () => accountsApi.getList(params),
+    placeholderData: keepPreviousData,
+  });
+}
diff --git a/src/domain/accounts/use-cases/use-create-account.ts b/src/domain/accounts/use-cases/use-create-account.ts
new file mode 100644
index 00000000..72ef4a71
--- /dev/null
+++ b/src/domain/accounts/use-cases/use-create-account.ts
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { accountsApi } from "@/domain/accounts/api/accounts-api";
+import type { AccountFormValues } from "@/domain/accounts/schemas/account-schema";
+import type { Account } from "@/domain/accounts/types/account";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useCreateAccount(): UseMutationResult<Account, Error, AccountFormValues> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (values: AccountFormValues) => accountsApi.create(values),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.accounts.all });
+      toast.success("Account created successfully!");
+      navigate("/accounts");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to create account");
+    },
+  });
+}
diff --git a/src/domain/accounts/use-cases/use-delete-account.ts b/src/domain/accounts/use-cases/use-delete-account.ts
new file mode 100644
index 00000000..ad2913bb
--- /dev/null
+++ b/src/domain/accounts/use-cases/use-delete-account.ts
@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { accountsApi } from "@/domain/accounts/api/accounts-api";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDeleteAccount(): UseMutationResult<void, Error, string | number> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string | number) => accountsApi.delete(id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.accounts.all });
+      toast.success("Account deleted successfully!");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to delete account");
+    },
+  });
+}
diff --git a/src/domain/accounts/use-cases/use-update-account.ts b/src/domain/accounts/use-cases/use-update-account.ts
new file mode 100644
index 00000000..46afad59
--- /dev/null
+++ b/src/domain/accounts/use-cases/use-update-account.ts
@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { accountsApi } from "@/domain/accounts/api/accounts-api";
+import type { AccountFormValues } from "@/domain/accounts/schemas/account-schema";
+import type { Account } from "@/domain/accounts/types/account";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+interface UpdateAccountInput {
+  id: string | number;
+  values: AccountFormValues;
+}
+
+export function useUpdateAccount(): UseMutationResult<Account, Error, UpdateAccountInput> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, values }: UpdateAccountInput) => accountsApi.update(id, values),
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.accounts.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.accounts.detail(variables.id) });
+      toast.success("Account updated successfully!");
+      navigate("/accounts");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update account");
+    },
+  });
+}
diff --git a/src/domain/assets/api/assets-api.ts b/src/domain/assets/api/assets-api.ts
new file mode 100644
index 00000000..b994e3f4
--- /dev/null
+++ b/src/domain/assets/api/assets-api.ts
@@ -0,0 +1,77 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiGet, apiPost } from "@/api/api";
+import { handleApiResponse, handlePaginatedResponse } from "@/api/handle-api-response";
+import {
+  mapAsset,
+  mapAssetListItem,
+  mapAssetToBackend,
+  mapSiteOption,
+} from "@/domain/assets/mappers/asset-mapper";
+import type {
+  Asset,
+  AssetsListParams,
+  AssetsListResult,
+  SiteOption,
+} from "@/domain/assets/types/asset";
+
+export const assetsApi = {
+  getList: async (params: AssetsListParams = {}): Promise<AssetsListResult> => {
+    const data = await apiGet<unknown>(API_PATHS.asset.getList, {
+      searchParams: {
+        search: params.search ?? "",
+        page: params.page ?? 1,
+        pageSize: params.pageSize ?? 12,
+      },
+    });
+
+    const paginated = handlePaginatedResponse<unknown>(data, {
+      page: params.page,
+      pageSize: params.pageSize,
+    });
+
+    const totalPages = Math.max(1, Math.ceil(paginated.totalCount / paginated.pageSize));
+
+    return {
+      items: paginated.items.map(mapAssetListItem),
+      totalCount: paginated.totalCount,
+      page: paginated.page,
+      pageSize: paginated.pageSize,
+      totalPages,
+    };
+  },
+
+  getById: async (id: string | number): Promise<Asset> => {
+    const data = await apiGet<unknown>(API_PATHS.asset.getAssetById, {
+      searchParams: { id },
+    });
+    return mapAsset(handleApiResponse(data));
+  },
+
+  create: async (payload: unknown): Promise<Asset> => {
+    const data = await apiPost<unknown>(
+      API_PATHS.asset.addAsset,
+      mapAssetToBackend(payload as Asset),
+    );
+    return mapAsset(handleApiResponse(data));
+  },
+
+  update: async (id: string | number, payload: unknown): Promise<Asset> => {
+    const data = await apiPost<unknown>(
+      API_PATHS.asset.editAsset,
+      mapAssetToBackend({ ...(payload as Asset), id: Number(id) }),
+    );
+    return mapAsset(handleApiResponse(data));
+  },
+
+  delete: async (id: string | number): Promise<void> => {
+    await apiGet<unknown>(API_PATHS.asset.deleteAsset, { searchParams: { id } });
+  },
+
+  getSiteOptions: async (): Promise<SiteOption[]> => {
+    const data = await apiGet<unknown>(API_PATHS.location.getList, {
+      searchParams: { search: "", page: 1, pageSize: 1000 },
+    });
+    const paginated = handlePaginatedResponse<unknown>(data, { page: 1, pageSize: 1000 });
+    return paginated.items.map(mapSiteOption);
+  },
+};
diff --git a/src/domain/assets/mappers/asset-mapper.ts b/src/domain/assets/mappers/asset-mapper.ts
new file mode 100644
index 00000000..c7cbab38
--- /dev/null
+++ b/src/domain/assets/mappers/asset-mapper.ts
@@ -0,0 +1,86 @@
+import type { Asset, AssetListItem, SiteOption } from "@/domain/assets/types/asset";
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+  }
+  return "";
+}
+
+function readNumber(record: Record<string, unknown>, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number") {
+      return value;
+    }
+  }
+  return null;
+}
+
+function readBoolean(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") {
+      return value;
+    }
+  }
+  return true;
+}
+
+export function mapAssetListItem(raw: unknown): AssetListItem {
+  const record = isRecord(raw) ? raw : {};
+
+  return {
+    id: readNumber(record, "id", "Id") ?? 0,
+    assetCode: readString(record, "assetCode", "AssetCode"),
+    name: readString(record, "name", "Name"),
+    description: readString(record, "description", "Description"),
+    isActive: readBoolean(record, "isActive", "IsActive"),
+    accountName: readString(record, "accountName", "AccountName"),
+    locationName: readString(record, "locationName", "LocationName"),
+  };
+}
+
+export function mapAsset(raw: unknown): Asset {
+  const record = isRecord(raw) ? raw : {};
+  const listItem = mapAssetListItem(raw);
+
+  return {
+    id: listItem.id,
+    assetCode: listItem.assetCode,
+    name: listItem.name,
+    description: listItem.description,
+    accountId: readNumber(record, "accountId", "AccountId"),
+    locationId: readNumber(record, "locationId", "LocationId"),
+    isActive: listItem.isActive,
+  };
+}
+
+export function mapAssetToBackend(asset: Partial<Asset> & { id?: number }) {
+  return {
+    ...(asset.id ? { id: asset.id } : {}),
+    assetCode: asset.assetCode ?? "",
+    name: asset.name ?? "",
+    description: asset.description || null,
+    accountId: asset.accountId ?? null,
+    locationId: asset.locationId ?? null,
+    isActive: asset.isActive ?? true,
+  };
+}
+
+export function mapSiteOption(raw: unknown): SiteOption {
+  const record = isRecord(raw) ? raw : {};
+
+  return {
+    id: readNumber(record, "id", "Id") ?? 0,
+    title: readString(record, "title", "Title"),
+    name: readString(record, "name", "Name"),
+  };
+}
diff --git a/src/domain/assets/schemas/asset-schema.ts b/src/domain/assets/schemas/asset-schema.ts
new file mode 100644
index 00000000..2cba9414
--- /dev/null
+++ b/src/domain/assets/schemas/asset-schema.ts
@@ -0,0 +1,12 @@
+import { z } from "zod";
+
+export const assetSchema = z.object({
+  assetCode: z.string().min(1, "Asset code is required"),
+  name: z.string().min(1, "Name is required"),
+  description: z.string().optional(),
+  accountId: z.number().nullable().optional(),
+  locationId: z.number().nullable().optional(),
+  isActive: z.boolean(),
+});
+
+export type AssetFormValues = z.infer<typeof assetSchema>;
diff --git a/src/domain/assets/types/asset.ts b/src/domain/assets/types/asset.ts
new file mode 100644
index 00000000..ea3d64cc
--- /dev/null
+++ b/src/domain/assets/types/asset.ts
@@ -0,0 +1,39 @@
+export interface AssetListItem {
+  id: number;
+  assetCode: string;
+  name: string;
+  description: string;
+  isActive: boolean;
+  accountName: string;
+  locationName: string;
+}
+
+export interface Asset {
+  id: number;
+  assetCode: string;
+  name: string;
+  description: string;
+  accountId: number | null;
+  locationId: number | null;
+  isActive: boolean;
+}
+
+export interface AssetsListParams {
+  search?: string;
+  page?: number;
+  pageSize?: number;
+}
+
+export interface AssetsListResult {
+  items: AssetListItem[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+}
+
+export interface SiteOption {
+  id: number;
+  title: string;
+  name: string;
+}
diff --git a/src/domain/assets/use-cases/use-asset-detail.ts b/src/domain/assets/use-cases/use-asset-detail.ts
new file mode 100644
index 00000000..e9395059
--- /dev/null
+++ b/src/domain/assets/use-cases/use-asset-detail.ts
@@ -0,0 +1,13 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { assetsApi } from "@/domain/assets/api/assets-api";
+import type { Asset } from "@/domain/assets/types/asset";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+export function useAssetDetail(id?: string): UseQueryResult<Asset, Error> {
+  return useQuery({
+    queryKey: queryKeys.assets.detail(id ?? ""),
+    queryFn: () => assetsApi.getById(requireQueryParam(id, "Asset id")),
+    enabled: Boolean(id),
+  });
+}
diff --git a/src/domain/assets/use-cases/use-asset-form-options.ts b/src/domain/assets/use-cases/use-asset-form-options.ts
new file mode 100644
index 00000000..414ef968
--- /dev/null
+++ b/src/domain/assets/use-cases/use-asset-form-options.ts
@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+import { accountsApi } from "@/domain/accounts/api/accounts-api";
+import type { AccountListItem } from "@/domain/accounts/types/account";
+import { assetsApi } from "@/domain/assets/api/assets-api";
+import type { SiteOption } from "@/domain/assets/types/asset";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export interface AssetFormOptionsResult {
+  accounts: AccountListItem[];
+  sites: SiteOption[];
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export function useAssetFormOptions(): AssetFormOptionsResult {
+  const accountsQuery = useQuery({
+    queryKey: queryKeys.accounts.list({ page: 1, pageSize: 1000 }),
+    queryFn: () => accountsApi.getList({ page: 1, pageSize: 1000 }),
+  });
+
+  const sitesQuery = useQuery({
+    queryKey: queryKeys.assets.sites(),
+    queryFn: () => assetsApi.getSiteOptions(),
+  });
+
+  return {
+    accounts: accountsQuery.data?.items ?? [],
+    sites: sitesQuery.data ?? [],
+    isLoading: accountsQuery.isLoading || sitesQuery.isLoading,
+    error: accountsQuery.error ?? sitesQuery.error,
+  };
+}
diff --git a/src/domain/assets/use-cases/use-assets-list.ts b/src/domain/assets/use-cases/use-assets-list.ts
new file mode 100644
index 00000000..6d8d58aa
--- /dev/null
+++ b/src/domain/assets/use-cases/use-assets-list.ts
@@ -0,0 +1,12 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { assetsApi } from "@/domain/assets/api/assets-api";
+import type { AssetsListParams, AssetsListResult } from "@/domain/assets/types/asset";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useAssetsList(params: AssetsListParams): UseQueryResult<AssetsListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.assets.list(params as Record<string, unknown>),
+    queryFn: () => assetsApi.getList(params),
+    placeholderData: (previous) => previous,
+  });
+}
diff --git a/src/domain/assets/use-cases/use-create-asset.ts b/src/domain/assets/use-cases/use-create-asset.ts
new file mode 100644
index 00000000..2b0295de
--- /dev/null
+++ b/src/domain/assets/use-cases/use-create-asset.ts
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { assetsApi } from "@/domain/assets/api/assets-api";
+import type { AssetFormValues } from "@/domain/assets/schemas/asset-schema";
+import type { Asset } from "@/domain/assets/types/asset";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useCreateAsset(): UseMutationResult<Asset, Error, AssetFormValues> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (values: AssetFormValues) => assetsApi.create(values),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.assets.all });
+      toast.success("Asset created successfully!");
+      navigate("/assets");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to create asset");
+    },
+  });
+}
diff --git a/src/domain/assets/use-cases/use-delete-asset.ts b/src/domain/assets/use-cases/use-delete-asset.ts
new file mode 100644
index 00000000..3eaf6257
--- /dev/null
+++ b/src/domain/assets/use-cases/use-delete-asset.ts
@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { assetsApi } from "@/domain/assets/api/assets-api";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDeleteAsset(): UseMutationResult<void, Error, number> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: number) => assetsApi.delete(id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.assets.all });
+      toast.success("Asset deleted successfully!");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to delete asset");
+    },
+  });
+}
diff --git a/src/domain/assets/use-cases/use-update-asset.ts b/src/domain/assets/use-cases/use-update-asset.ts
new file mode 100644
index 00000000..c3b7f7c0
--- /dev/null
+++ b/src/domain/assets/use-cases/use-update-asset.ts
@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { assetsApi } from "@/domain/assets/api/assets-api";
+import type { AssetFormValues } from "@/domain/assets/schemas/asset-schema";
+import type { Asset } from "@/domain/assets/types/asset";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+interface UpdateAssetInput {
+  id: string;
+  values: AssetFormValues;
+}
+
+export function useUpdateAsset(): UseMutationResult<Asset, Error, UpdateAssetInput> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, values }: UpdateAssetInput) => assetsApi.update(id, values),
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.assets.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.assets.detail(variables.id) });
+      toast.success("Asset updated successfully!");
+      navigate("/assets");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update asset");
+    },
+  });
+}
diff --git a/src/domain/auth/api/auth-api.ts b/src/domain/auth/api/auth-api.ts
new file mode 100644
index 00000000..279baaa7
--- /dev/null
+++ b/src/domain/auth/api/auth-api.ts
@@ -0,0 +1,53 @@
+/**
+ * Auth API contract (JWT):
+ * - POST Authentication/Login — returns token + user fields; persisted in localStorage
+ * - Session restored from stored login payload (no GetCurrentUser)
+ */
+import { API_PATHS } from "@/api/api-paths";
+import { apiPost } from "@/api/api";
+import { handleApiResponse } from "@/api/handle-api-response";
+import { clearAuth, getAuthUser, isSessionValid, setAuthUser } from "@/lib/auth/auth-storage";
+import type {
+  AuthUser,
+  ChangePasswordPayload,
+  LoginCredentials,
+  ResetPasswordPayload,
+} from "@/domain/auth/types/auth-user";
+
+export async function login(credentials: LoginCredentials): Promise<AuthUser> {
+  const response = await apiPost<unknown>(API_PATHS.authentication.login, credentials);
+  const user = handleApiResponse<AuthUser>(response);
+  setAuthUser(user);
+  return getAuthUser() ?? user;
+}
+
+export async function logout(): Promise<void> {
+  clearAuth();
+}
+
+export async function getSession(): Promise<AuthUser | null> {
+  const user = getAuthUser();
+
+  if (!user || !isSessionValid(user)) {
+    clearAuth();
+    return null;
+  }
+
+  return user;
+}
+
+export async function changePassword(data: ChangePasswordPayload): Promise<unknown> {
+  return apiPost(API_PATHS.authentication.changePassword, data);
+}
+
+export async function forgotPassword(email: string): Promise<unknown> {
+  return apiPost(`${API_PATHS.authentication.forgetPassword}?Email=${encodeURIComponent(email)}`);
+}
+
+export async function verifyResetCode(code: string): Promise<unknown> {
+  return apiPost(`${API_PATHS.authentication.verificationCode}?code=${encodeURIComponent(code)}`);
+}
+
+export async function resetPassword(data: ResetPasswordPayload): Promise<unknown> {
+  return apiPost(API_PATHS.authentication.resetPassword, data);
+}
diff --git a/src/domain/auth/schemas/login-schema.ts b/src/domain/auth/schemas/login-schema.ts
new file mode 100644
index 00000000..2e2edc32
--- /dev/null
+++ b/src/domain/auth/schemas/login-schema.ts
@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const loginSchema = z.object({
+  username: z.string().min(1, "Email is required").pipe(z.email("Enter a valid email")),
+  password: z.string().min(1, "Password is required"),
+});
+
+export type LoginFormValues = z.infer<typeof loginSchema>;
diff --git a/src/domain/auth/types/auth-user.ts b/src/domain/auth/types/auth-user.ts
new file mode 100644
index 00000000..6a567b16
--- /dev/null
+++ b/src/domain/auth/types/auth-user.ts
@@ -0,0 +1,30 @@
+export interface AuthUser {
+  token: string;
+  expiration: string;
+  email: string;
+  userRoles: string;
+  phoneNumber: string;
+  fullname: string;
+  id: string | number;
+  name?: string;
+  /** Login payload field. Not trusted for org-wide UI gates; use the JWT claim. */
+  orgScope?: string;
+  accountId?: string | number;
+}
+
+export interface LoginCredentials {
+  username: string;
+  password: string;
+}
+
+export interface ChangePasswordPayload {
+  Currentpassword: string;
+  Newpassword: string;
+  Confirmpassword: string;
+}
+
+export interface ResetPasswordPayload {
+  Email: string;
+  Code: string;
+  Password: string;
+}
diff --git a/src/domain/auth/use-cases/use-change-password.ts b/src/domain/auth/use-cases/use-change-password.ts
new file mode 100644
index 00000000..eec15235
--- /dev/null
+++ b/src/domain/auth/use-cases/use-change-password.ts
@@ -0,0 +1,16 @@
+import { useMutation, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import * as authApi from "@/domain/auth/api/auth-api";
+import type { ChangePasswordPayload } from "@/domain/auth/types/auth-user";
+
+export function useChangePassword(): UseMutationResult<unknown, Error, ChangePasswordPayload> {
+  return useMutation({
+    mutationFn: (data: ChangePasswordPayload) => authApi.changePassword(data),
+    onSuccess: () => {
+      toast.success("Password changed successfully!");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to change password");
+    },
+  });
+}
diff --git a/src/domain/auth/use-cases/use-login.ts b/src/domain/auth/use-cases/use-login.ts
new file mode 100644
index 00000000..55766b90
--- /dev/null
+++ b/src/domain/auth/use-cases/use-login.ts
@@ -0,0 +1,60 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  type UseMutationResult,
+  type UseQueryResult,
+} from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import * as authApi from "@/domain/auth/api/auth-api";
+import type { AuthUser, LoginCredentials } from "@/domain/auth/types/auth-user";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { startQueryBroadcast, stopQueryBroadcast } from "@/lib/query/setup-query-broadcast";
+
+export function useSession(): UseQueryResult<AuthUser | null, Error> {
+  return useQuery({
+    queryKey: queryKeys.auth.session(),
+    queryFn: authApi.getSession,
+    retry: false,
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useLogin(): UseMutationResult<AuthUser, Error, LoginCredentials> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (credentials: LoginCredentials) => authApi.login(credentials),
+    meta: { suppressErrorToast: true },
+    onSuccess: (user) => {
+      stopQueryBroadcast(queryClient);
+      queryClient.setQueryData(queryKeys.auth.session(), user);
+      startQueryBroadcast(queryClient, user.id);
+      toast.success("Login successful!");
+      navigate("/");
+    },
+  });
+}
+
+export function useLogout(): UseMutationResult<void, Error, void> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: authApi.logout,
+    onSuccess: () => {
+      stopQueryBroadcast(queryClient);
+      queryClient.setQueryData(queryKeys.auth.session(), null);
+      toast.info("You have been logged out");
+      navigate("/login");
+    },
+    onError: (error: Error) => {
+      stopQueryBroadcast(queryClient);
+      queryClient.setQueryData(queryKeys.auth.session(), null);
+      toast.error(error.message || "Logout failed");
+      navigate("/login");
+    },
+  });
+}
diff --git a/src/domain/auth/use-cases/use-logout.ts b/src/domain/auth/use-cases/use-logout.ts
new file mode 100644
index 00000000..19a74077
--- /dev/null
+++ b/src/domain/auth/use-cases/use-logout.ts
@@ -0,0 +1 @@
+export { useLogout } from "@/domain/auth/use-cases/use-login";
diff --git a/src/domain/auth/use-cases/use-session.ts b/src/domain/auth/use-cases/use-session.ts
new file mode 100644
index 00000000..981f1e06
--- /dev/null
+++ b/src/domain/auth/use-cases/use-session.ts
@@ -0,0 +1 @@
+export { useSession } from "@/domain/auth/use-cases/use-login";
diff --git a/src/domain/calendar/api/calendar-api.ts b/src/domain/calendar/api/calendar-api.ts
new file mode 100644
index 00000000..2edf9694
--- /dev/null
+++ b/src/domain/calendar/api/calendar-api.ts
@@ -0,0 +1,70 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiDelete, apiGet, apiPost } from "@/api/api";
+import { handleApiResponse, handlePaginatedResponse } from "@/api/handle-api-response";
+import {
+  mapCalendarEvent,
+  mapCalendarEvents,
+  mapCalendarEventToBackend,
+} from "@/domain/calendar/mappers/calendar-event-mapper";
+import type {
+  CalendarEvent,
+  CalendarEventsListParams,
+  CalendarEventsListResult,
+} from "@/domain/calendar/types/calendar-event";
+
+export const calendarApi = {
+  getEventsForCalendar: async (start: Date, end: Date): Promise<CalendarEvent[]> => {
+    const data = await apiGet<unknown>(API_PATHS.calendar.getEventsForCalendar, {
+      searchParams: {
+        start: start.toISOString(),
+        end: end.toISOString(),
+      },
+    });
+    return mapCalendarEvents(handleApiResponse<unknown[]>(data));
+  },
+
+  getList: async (params: CalendarEventsListParams = {}): Promise<CalendarEventsListResult> => {
+    const data = await apiGet<unknown>(API_PATHS.calendar.getEventList, {
+      searchParams: {
+        search: params.search ?? "",
+        page: params.page ?? 1,
+        pageSize: params.pageSize ?? 12,
+      },
+    });
+    const nested = handleApiResponse<unknown>(data);
+    const paginated = handlePaginatedResponse<unknown>(nested, {
+      page: params.page,
+      pageSize: params.pageSize,
+    });
+
+    return {
+      items: paginated.items.map(mapCalendarEvent),
+      totalCount: paginated.totalCount,
+    };
+  },
+
+  getById: async (id: string | number): Promise<CalendarEvent> => {
+    const data = await apiGet<unknown>(`${API_PATHS.calendar.getEventById}/${id}`);
+    return mapCalendarEvent(handleApiResponse(data));
+  },
+
+  create: async (payload: unknown): Promise<CalendarEvent> => {
+    const data = await apiPost<unknown>(
+      API_PATHS.calendar.addEvent,
+      mapCalendarEventToBackend(payload as CalendarEvent),
+    );
+    return mapCalendarEvent(handleApiResponse(data));
+  },
+
+  update: async (id: string | number, payload: unknown): Promise<CalendarEvent> => {
+    const data = await apiPost<unknown>(API_PATHS.calendar.editEvent, {
+      ...mapCalendarEventToBackend(payload as CalendarEvent),
+      Id: Number(id),
+    });
+    return mapCalendarEvent(handleApiResponse(data));
+  },
+
+  delete: async (id: string | number): Promise<void> => {
+    await apiDelete<unknown>(`${API_PATHS.calendar.deleteEvent}/${id}`);
+  },
+};
diff --git a/src/domain/calendar/mappers/calendar-event-mapper.ts b/src/domain/calendar/mappers/calendar-event-mapper.ts
new file mode 100644
index 00000000..788d0b5b
--- /dev/null
+++ b/src/domain/calendar/mappers/calendar-event-mapper.ts
@@ -0,0 +1,88 @@
+import type { CalendarEvent, CalendarEventColor } from "@/domain/calendar/types/calendar-event";
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+  }
+  return "";
+}
+
+function readNumber(record: Record<string, unknown>, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number") {
+      return value;
+    }
+  }
+  return null;
+}
+
+function readBoolean(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") {
+      return value;
+    }
+  }
+  return false;
+}
+
+const COLORS: CalendarEventColor[] = ["primary", "success", "info", "warning", "danger"];
+
+function normalizeColor(value: string): CalendarEventColor {
+  return COLORS.includes(value as CalendarEventColor) ? (value as CalendarEventColor) : "primary";
+}
+
+export function mapCalendarEvent(raw: unknown): CalendarEvent {
+  const record = isRecord(raw) ? raw : {};
+
+  return {
+    id: readNumber(record, "id", "Id") ?? 0,
+    title: readString(record, "title", "Title"),
+    description: readString(record, "description", "Description"),
+    location: readString(record, "location", "Location"),
+    recordId: readNumber(record, "recordID", "RecordID", "recordId", "RecordId"),
+    recordName: readString(record, "recordName", "RecordName"),
+    recordTargetType: readString(record, "recordTargetType", "RecordTargetType"),
+    reminderMinutes: readNumber(record, "reminderMinutes", "ReminderMinutes") ?? 15,
+    eventColor: normalizeColor(readString(record, "eventColor", "EventColor") || "primary"),
+    startDate: readString(record, "startDate", "StartDate"),
+    startTime: readString(record, "startTime", "StartTime"),
+    endDate: readString(record, "endDate", "EndDate"),
+    endTime: readString(record, "endTime", "EndTime"),
+    allDay: readBoolean(record, "allDay", "AllDay"),
+  };
+}
+
+export function mapCalendarEvents(raw: unknown): CalendarEvent[] {
+  if (!Array.isArray(raw)) {
+    return [];
+  }
+  return raw.map(mapCalendarEvent);
+}
+
+export function mapCalendarEventToBackend(event: Partial<CalendarEvent> & { id?: number }) {
+  return {
+    ...(event.id ? { Id: event.id } : {}),
+    Title: event.title ?? "",
+    Description: event.description ?? "",
+    Location: event.location ?? "",
+    RecordID: event.recordId ?? null,
+    RecordName: event.recordName ?? "",
+    RecordTargetType: event.recordTargetType ?? "",
+    ReminderMinutes: event.reminderMinutes ?? 15,
+    EventColor: event.eventColor ?? "primary",
+    StartDate: event.startDate ?? "",
+    StartTime: event.startTime ?? "",
+    EndDate: event.endDate ?? "",
+    EndTime: event.endTime ?? "",
+    AllDay: event.allDay ?? false,
+  };
+}
diff --git a/src/domain/calendar/schemas/calendar-event-schema.ts b/src/domain/calendar/schemas/calendar-event-schema.ts
new file mode 100644
index 00000000..adc6545f
--- /dev/null
+++ b/src/domain/calendar/schemas/calendar-event-schema.ts
@@ -0,0 +1,19 @@
+import { z } from "zod";
+
+export const calendarEventSchema = z.object({
+  title: z.string().min(1, "Title is required").max(100),
+  description: z.string().optional(),
+  location: z.string().max(150).optional(),
+  recordId: z.number().nullable().optional(),
+  recordName: z.string().optional(),
+  recordTargetType: z.string().optional(),
+  reminderMinutes: z.number().int().min(0),
+  eventColor: z.enum(["primary", "success", "info", "warning", "danger"]),
+  startDate: z.string().min(1, "Start date is required"),
+  startTime: z.string().optional(),
+  endDate: z.string().min(1, "End date is required"),
+  endTime: z.string().optional(),
+  allDay: z.boolean(),
+});
+
+export type CalendarEventFormValues = z.infer<typeof calendarEventSchema>;
diff --git a/src/domain/calendar/types/calendar-event.ts b/src/domain/calendar/types/calendar-event.ts
new file mode 100644
index 00000000..8c82456f
--- /dev/null
+++ b/src/domain/calendar/types/calendar-event.ts
@@ -0,0 +1,29 @@
+export type CalendarEventColor = "primary" | "success" | "info" | "warning" | "danger";
+
+export interface CalendarEvent {
+  id: number;
+  title: string;
+  description: string;
+  location: string;
+  recordId: number | null;
+  recordName: string;
+  recordTargetType: string;
+  reminderMinutes: number;
+  eventColor: CalendarEventColor;
+  startDate: string;
+  startTime: string;
+  endDate: string;
+  endTime: string;
+  allDay: boolean;
+}
+
+export interface CalendarEventsListParams {
+  search?: string;
+  page?: number;
+  pageSize?: number;
+}
+
+export interface CalendarEventsListResult {
+  items: CalendarEvent[];
+  totalCount: number;
+}
diff --git a/src/domain/calendar/use-cases/use-calendar-event-detail.ts b/src/domain/calendar/use-cases/use-calendar-event-detail.ts
new file mode 100644
index 00000000..55ed6e9c
--- /dev/null
+++ b/src/domain/calendar/use-cases/use-calendar-event-detail.ts
@@ -0,0 +1,13 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { calendarApi } from "@/domain/calendar/api/calendar-api";
+import type { CalendarEvent } from "@/domain/calendar/types/calendar-event";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+export function useCalendarEventDetail(id?: string): UseQueryResult<CalendarEvent, Error> {
+  return useQuery({
+    queryKey: queryKeys.calendar.detail(id ?? ""),
+    queryFn: () => calendarApi.getById(requireQueryParam(id, "Calendar event id")),
+    enabled: Boolean(id),
+  });
+}
diff --git a/src/domain/calendar/use-cases/use-calendar-events.ts b/src/domain/calendar/use-cases/use-calendar-events.ts
new file mode 100644
index 00000000..a0de7576
--- /dev/null
+++ b/src/domain/calendar/use-cases/use-calendar-events.ts
@@ -0,0 +1,20 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { calendarApi } from "@/domain/calendar/api/calendar-api";
+import type { CalendarEvent } from "@/domain/calendar/types/calendar-event";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useCalendarEvents(
+  start: Date | null,
+  end: Date | null,
+): UseQueryResult<CalendarEvent[], Error> {
+  return useQuery({
+    queryKey: queryKeys.calendar.range(start?.toISOString() ?? "", end?.toISOString() ?? ""),
+    queryFn: () => {
+      if (!start || !end) {
+        return Promise.resolve([]);
+      }
+      return calendarApi.getEventsForCalendar(start, end);
+    },
+    enabled: Boolean(start && end),
+  });
+}
diff --git a/src/domain/calendar/use-cases/use-create-calendar-event.ts b/src/domain/calendar/use-cases/use-create-calendar-event.ts
new file mode 100644
index 00000000..d5ea5fc0
--- /dev/null
+++ b/src/domain/calendar/use-cases/use-create-calendar-event.ts
@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { calendarApi } from "@/domain/calendar/api/calendar-api";
+import type { CalendarEventFormValues } from "@/domain/calendar/schemas/calendar-event-schema";
+import type { CalendarEvent } from "@/domain/calendar/types/calendar-event";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useCreateCalendarEvent(): UseMutationResult<
+  CalendarEvent,
+  Error,
+  CalendarEventFormValues
+> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (values: CalendarEventFormValues) => calendarApi.create(values),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.calendar.all });
+      toast.success("Event created successfully!");
+      navigate("/calendar");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to create event");
+    },
+  });
+}
diff --git a/src/domain/calendar/use-cases/use-delete-calendar-event.ts b/src/domain/calendar/use-cases/use-delete-calendar-event.ts
new file mode 100644
index 00000000..0f05604d
--- /dev/null
+++ b/src/domain/calendar/use-cases/use-delete-calendar-event.ts
@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { calendarApi } from "@/domain/calendar/api/calendar-api";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDeleteCalendarEvent(): UseMutationResult<void, Error, number> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: number) => calendarApi.delete(id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.calendar.all });
+      toast.success("Event deleted successfully!");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to delete event");
+    },
+  });
+}
diff --git a/src/domain/calendar/use-cases/use-update-calendar-event.ts b/src/domain/calendar/use-cases/use-update-calendar-event.ts
new file mode 100644
index 00000000..251fe958
--- /dev/null
+++ b/src/domain/calendar/use-cases/use-update-calendar-event.ts
@@ -0,0 +1,34 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { calendarApi } from "@/domain/calendar/api/calendar-api";
+import type { CalendarEventFormValues } from "@/domain/calendar/schemas/calendar-event-schema";
+import type { CalendarEvent } from "@/domain/calendar/types/calendar-event";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+interface UpdateCalendarEventInput {
+  id: string;
+  values: CalendarEventFormValues;
+}
+
+export function useUpdateCalendarEvent(): UseMutationResult<
+  CalendarEvent,
+  Error,
+  UpdateCalendarEventInput
+> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, values }: UpdateCalendarEventInput) => calendarApi.update(id, values),
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.calendar.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.calendar.detail(variables.id) });
+      toast.success("Event updated successfully!");
+      navigate("/calendar");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update event");
+    },
+  });
+}
diff --git a/src/domain/contacts/api/contacts-api.ts b/src/domain/contacts/api/contacts-api.ts
new file mode 100644
index 00000000..9c191e6e
--- /dev/null
+++ b/src/domain/contacts/api/contacts-api.ts
@@ -0,0 +1,83 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiGet, apiPost } from "@/api/api";
+import { handleApiResponse, handlePaginatedResponse } from "@/api/handle-api-response";
+import {
+  mapContact,
+  mapContactListItems,
+  mapContactToBackend,
+} from "@/domain/contacts/mappers/contact-mapper";
+import type {
+  Contact,
+  ContactsListParams,
+  ContactsListResult,
+} from "@/domain/contacts/types/contact";
+
+function buildListParams(params: ContactsListParams): Record<string, string | number> {
+  return {
+    search: params.search ?? "",
+    page: params.page ?? 1,
+    pageSize: params.pageSize ?? 12,
+  };
+}
+
+export const contactsApi = {
+  getList: async (params: ContactsListParams = {}): Promise<ContactsListResult> => {
+    const data = await apiGet<unknown>(API_PATHS.contact.getList, {
+      searchParams: buildListParams(params),
+    });
+    const paginated = handlePaginatedResponse<unknown>(data, {
+      page: params.page,
+      pageSize: params.pageSize,
+    });
+    return {
+      items: mapContactListItems(paginated.items),
+      totalCount: paginated.totalCount,
+      page: paginated.page,
+      pageSize: paginated.pageSize,
+    };
+  },
+
+  getById: async (id: string | number): Promise<Contact> => {
+    const data = await apiGet<unknown>(API_PATHS.contact.getContacts);
+    const contacts = handleApiResponse<unknown[]>(data);
+    const targetId = String(id);
+    const match = Array.isArray(contacts)
+      ? contacts.find((item) => {
+          const record = (typeof item === "object" && item !== null ? item : {}) as Record<
+            string,
+            unknown
+          >;
+          const itemId = record.id ?? record.Id;
+          return String(itemId) === targetId;
+        })
+      : undefined;
+
+    if (!match) {
+      throw new Error("Contact not found");
+    }
+
+    return mapContact(match);
+  },
+
+  create: async (payload: unknown): Promise<Contact> => {
+    const data = await apiPost<unknown>(
+      API_PATHS.contact.addContacts,
+      mapContactToBackend(payload),
+    );
+    return mapContact(handleApiResponse(data));
+  },
+
+  update: async (id: string | number, payload: unknown): Promise<Contact> => {
+    const data = await apiPost<unknown>(
+      API_PATHS.contact.editContacts,
+      mapContactToBackend({ ...(payload as object), id }),
+    );
+    return mapContact(handleApiResponse(data));
+  },
+
+  delete: async (id: string | number): Promise<void> => {
+    await apiGet<unknown>(API_PATHS.contact.deleteContacts, {
+      searchParams: { id },
+    });
+  },
+};
diff --git a/src/domain/contacts/mappers/contact-mapper.ts b/src/domain/contacts/mappers/contact-mapper.ts
new file mode 100644
index 00000000..48f5a64c
--- /dev/null
+++ b/src/domain/contacts/mappers/contact-mapper.ts
@@ -0,0 +1,95 @@
+import type { Contact, ContactListItem } from "@/domain/contacts/types/contact";
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") return value;
+    if (typeof value === "number") return String(value);
+  }
+  return "";
+}
+
+function readId(record: Record<string, unknown>): string | number {
+  const value = record.id ?? record.Id;
+  if (typeof value === "string" || typeof value === "number") return value;
+  return "";
+}
+
+export function mapContactListItem(raw: unknown): ContactListItem {
+  const item = asRecord(raw);
+  return {
+    id: readId(item),
+    name: readString(item, "name", "Name"),
+    account: readString(item, "account", "Account"),
+    title: readString(item, "title", "Title"),
+    email: readString(item, "email", "Email"),
+    phoneNumber: readString(item, "phoneNumber", "phone", "Phone"),
+    owner: readString(item, "owner", "Owner"),
+  };
+}
+
+export function mapContactListItems(rawItems: unknown[]): ContactListItem[] {
+  return rawItems.map(mapContactListItem);
+}
+
+export function mapContact(raw: unknown): Contact {
+  const item = asRecord(raw);
+  return {
+    id: readId(item) || undefined,
+    firstName: readString(item, "firstName", "FirstName"),
+    middleName: readString(item, "middleName", "MiddleName"),
+    lastName: readString(item, "lastName", "LastName"),
+    title: readString(item, "title", "Title"),
+    contactType: readString(item, "contactType", "ContactType"),
+    gender: readString(item, "gender", "Gender"),
+    dateOfBirth: readString(item, "dateOfBirth", "DateOfBirth").slice(0, 10),
+    territory: readString(item, "territory", "Territory"),
+    owner: readString(item, "owner", "Owner"),
+    privacySetting: readString(item, "privacySetting", "PrivacySetting") || "PublicReadWrite",
+    about: readString(item, "about", "About"),
+    tags: readString(item, "tags", "Tags"),
+    street: readString(item, "street", "Street", "address1", "Address1"),
+    streetLineTwo: readString(item, "streetLineTwo", "StreetLineTwo", "address2", "Address2"),
+    city: readString(item, "city", "City"),
+    zip: readString(item, "zip", "Zip"),
+    country: readString(item, "country", "Country") || "US",
+    state: readString(item, "state", "State"),
+    county: readString(item, "county", "County"),
+    timeZone: readString(item, "timeZone", "TimeZone") || "Eastern Standard Time",
+    smsAddress: readString(item, "smsAddress", "SmsAddress"),
+    website: readString(item, "website", "Website"),
+    facebookUrl: readString(item, "facebookUrl", "FacebookUrl"),
+    linkedInUrl: readString(item, "linkedInUrl", "LinkedInUrl"),
+    twitterUrl: readString(item, "twitterUrl", "TwitterUrl"),
+  };
+}
+
+export function mapContactToBackend(contact: unknown): Record<string, unknown> {
+  const item = asRecord(contact);
+  const payload: Record<string, unknown> = {
+    FirstName: item.firstName ?? item.FirstName ?? "",
+    MiddleName: item.middleName ?? item.MiddleName ?? "",
+    LastName: item.lastName ?? item.LastName ?? "",
+    Title: item.title ?? item.Title ?? "",
+    ContactType: item.contactType ?? item.ContactType ?? "",
+    PhoneNumber: item.phoneNumber ?? item.PhoneNumber ?? item.phone ?? item.Phone ?? "",
+    Email: item.email ?? item.Email ?? "",
+    Address1: item.street ?? item.Address1 ?? "",
+    Address2: item.streetLineTwo ?? item.Address2 ?? "",
+    City: item.city ?? item.City ?? "",
+    State: item.state ?? item.State ?? "",
+    Zip: item.zip ?? item.Zip ?? "",
+    FacebookUrl: item.facebookUrl ?? item.FacebookUrl ?? "",
+    LinkedInUrl: item.linkedInUrl ?? item.LinkedInUrl ?? "",
+    TwitterUrl: item.twitterUrl ?? item.TwitterUrl ?? "",
+  };
+  const id = item.id ?? item.Id;
+  if (typeof id === "string" || typeof id === "number") {
+    payload.Id = id;
+  }
+  return payload;
+}
diff --git a/src/domain/contacts/schemas/contact-schema.ts b/src/domain/contacts/schemas/contact-schema.ts
new file mode 100644
index 00000000..0873f02a
--- /dev/null
+++ b/src/domain/contacts/schemas/contact-schema.ts
@@ -0,0 +1,31 @@
+import { z } from "zod";
+
+export const contactSchema = z.object({
+  firstName: z.string().min(1, "First name is required").max(50),
+  middleName: z.string().max(50).optional(),
+  lastName: z.string().min(1, "Last name is required").max(50),
+  title: z.string().max(50).optional(),
+  contactType: z.string().optional(),
+  gender: z.string().optional(),
+  dateOfBirth: z.string().optional(),
+  territory: z.string().min(1, "Territory is required"),
+  owner: z.string().min(1, "Owner is required"),
+  privacySetting: z.string().optional(),
+  about: z.string().optional(),
+  tags: z.string().optional(),
+  street: z.string().max(250).optional(),
+  streetLineTwo: z.string().max(250).optional(),
+  city: z.string().max(100).optional(),
+  zip: z.string().max(20).optional(),
+  country: z.string().optional(),
+  state: z.string().optional(),
+  county: z.string().optional(),
+  timeZone: z.string().optional(),
+  smsAddress: z.string().optional(),
+  website: z.string().optional(),
+  facebookUrl: z.string().optional(),
+  linkedInUrl: z.string().optional(),
+  twitterUrl: z.string().optional(),
+});
+
+export type ContactFormValues = z.infer<typeof contactSchema>;
diff --git a/src/domain/contacts/types/contact.ts b/src/domain/contacts/types/contact.ts
new file mode 100644
index 00000000..5985c44f
--- /dev/null
+++ b/src/domain/contacts/types/contact.ts
@@ -0,0 +1,51 @@
+export interface ContactListItem {
+  id: string | number;
+  name: string;
+  account: string;
+  title: string;
+  email: string;
+  phoneNumber: string;
+  owner: string;
+}
+
+export interface Contact {
+  id?: string | number;
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  title: string;
+  contactType: string;
+  gender: string;
+  dateOfBirth: string;
+  territory: string;
+  owner: string;
+  privacySetting: string;
+  about: string;
+  tags: string;
+  street: string;
+  streetLineTwo: string;
+  city: string;
+  zip: string;
+  country: string;
+  state: string;
+  county: string;
+  timeZone: string;
+  smsAddress: string;
+  website: string;
+  facebookUrl: string;
+  linkedInUrl: string;
+  twitterUrl: string;
+}
+
+export interface ContactsListParams {
+  search?: string;
+  page?: number;
+  pageSize?: number;
+}
+
+export interface ContactsListResult {
+  items: ContactListItem[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+}
diff --git a/src/domain/contacts/use-cases/use-contact-detail.ts b/src/domain/contacts/use-cases/use-contact-detail.ts
new file mode 100644
index 00000000..cd457c30
--- /dev/null
+++ b/src/domain/contacts/use-cases/use-contact-detail.ts
@@ -0,0 +1,13 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { contactsApi } from "@/domain/contacts/api/contacts-api";
+import type { Contact } from "@/domain/contacts/types/contact";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+export function useContactDetail(id: string | undefined): UseQueryResult<Contact, Error> {
+  return useQuery({
+    queryKey: queryKeys.contacts.detail(id ?? ""),
+    queryFn: () => contactsApi.getById(requireQueryParam(id, "Contact id")),
+    enabled: Boolean(id),
+  });
+}
diff --git a/src/domain/contacts/use-cases/use-contacts-list.ts b/src/domain/contacts/use-cases/use-contacts-list.ts
new file mode 100644
index 00000000..759a8cd7
--- /dev/null
+++ b/src/domain/contacts/use-cases/use-contacts-list.ts
@@ -0,0 +1,14 @@
+import { keepPreviousData, useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { contactsApi } from "@/domain/contacts/api/contacts-api";
+import type { ContactsListParams, ContactsListResult } from "@/domain/contacts/types/contact";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useContactsList(
+  params: ContactsListParams,
+): UseQueryResult<ContactsListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.contacts.list(params as Record<string, unknown>),
+    queryFn: () => contactsApi.getList(params),
+    placeholderData: keepPreviousData,
+  });
+}
diff --git a/src/domain/contacts/use-cases/use-create-contact.ts b/src/domain/contacts/use-cases/use-create-contact.ts
new file mode 100644
index 00000000..3000d9f9
--- /dev/null
+++ b/src/domain/contacts/use-cases/use-create-contact.ts
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { contactsApi } from "@/domain/contacts/api/contacts-api";
+import type { ContactFormValues } from "@/domain/contacts/schemas/contact-schema";
+import type { Contact } from "@/domain/contacts/types/contact";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useCreateContact(): UseMutationResult<Contact, Error, ContactFormValues> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (values: ContactFormValues) => contactsApi.create(values),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.contacts.all });
+      toast.success("Contact created successfully!");
+      navigate("/contacts");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to create contact");
+    },
+  });
+}
diff --git a/src/domain/contacts/use-cases/use-delete-contact.ts b/src/domain/contacts/use-cases/use-delete-contact.ts
new file mode 100644
index 00000000..c1ac93b3
--- /dev/null
+++ b/src/domain/contacts/use-cases/use-delete-contact.ts
@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { contactsApi } from "@/domain/contacts/api/contacts-api";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDeleteContact(): UseMutationResult<void, Error, string | number> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string | number) => contactsApi.delete(id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.contacts.all });
+      toast.success("Contact deleted");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to delete contact");
+    },
+  });
+}
diff --git a/src/domain/contacts/use-cases/use-update-contact.ts b/src/domain/contacts/use-cases/use-update-contact.ts
new file mode 100644
index 00000000..04602c3d
--- /dev/null
+++ b/src/domain/contacts/use-cases/use-update-contact.ts
@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { contactsApi } from "@/domain/contacts/api/contacts-api";
+import type { ContactFormValues } from "@/domain/contacts/schemas/contact-schema";
+import type { Contact } from "@/domain/contacts/types/contact";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+interface UpdateContactInput {
+  id: string | number;
+  values: ContactFormValues;
+}
+
+export function useUpdateContact(): UseMutationResult<Contact, Error, UpdateContactInput> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, values }: UpdateContactInput) => contactsApi.update(id, values),
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.contacts.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.contacts.detail(variables.id) });
+      toast.success("Contact updated successfully!");
+      navigate("/contacts");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update contact");
+    },
+  });
+}
diff --git a/src/domain/dashboard/api/dashboard-api.ts b/src/domain/dashboard/api/dashboard-api.ts
new file mode 100644
index 00000000..5fdd902f
--- /dev/null
+++ b/src/domain/dashboard/api/dashboard-api.ts
@@ -0,0 +1,421 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiGet } from "@/api/api";
+import { handleApiResponse } from "@/api/handle-api-response";
+import type { Options } from "ky";
+import type { DashboardRangeParams } from "@/domain/dashboard/types/dashboard-range";
+import type {
+  DashboardBreakdownRow,
+  DashboardStats,
+  DashboardStatusBucketRow,
+} from "@/domain/dashboard/types/dashboard-stats";
+import type { DispatcherPerformanceRow } from "@/domain/dashboard/types/dashboard-performance";
+import {
+  DISPATCHER_PAGE_SIZE,
+  type DispatcherPage,
+} from "@/domain/dashboard/types/dashboard-dispatcher-page";
+import type { DashboardTrendParams } from "@/domain/dashboard/types/dashboard-trend";
+import type {
+  DashboardTrend,
+  DashboardTrendGranularity,
+} from "@/domain/dashboard/types/dashboard-trend";
+import {
+  UNMAPPED_REGION_LABEL,
+  type RegionWorkOrdersRow,
+} from "@/domain/dashboard/types/dashboard-regions";
+import type { DispatcherWorkloadRow } from "@/domain/dashboard/types/dashboard-workload";
+import type { VendorInsightRow } from "@/domain/dashboard/types/dashboard-vendor-insights";
+import { WO_TYPES } from "@/domain/work-orders/types/work-order-wizard";
+
+function toNumber(value: unknown): number {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+
+  return 0;
+}
+
+function asString(value: unknown): string {
+  if (typeof value === "string") {
+    return value.trim();
+  }
+
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return String(value);
+  }
+
+  return "";
+}
+
+function asRecords(value: unknown): Record<string, unknown>[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+
+  return value.filter(
+    (item): item is Record<string, unknown> =>
+      typeof item === "object" && item !== null && !Array.isArray(item),
+  );
+}
+
+function readField(data: Record<string, unknown>, key: string): unknown {
+  const capitalized = key.charAt(0).toUpperCase() + key.slice(1);
+  const value = data[key] ?? data[capitalized];
+  return value === null ? undefined : value;
+}
+
+function toRecord(value: unknown): Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+}
+
+function readCollection(value: unknown, key: string): Record<string, unknown>[] {
+  const data = toRecord(value);
+  const collection = key ? (readField(data, key) ?? value) : value;
+  return asRecords(collection);
+}
+
+/**
+ * Stats, Regions, Workload, and Performance share `DashboardStatsQueryDTO`
+ * (backend#145): the range dates ride along when present, and `dispatcherId`
+ * scopes the read to a single dispatcher (SH-336's picker — All sends nothing,
+ * My WOs / an individual sends that id). Vendor Insights and Trend take no such
+ * param and stay company-wide (SH-349).
+ */
+function scopedSearchParams(
+  range?: DashboardRangeParams,
+  dispatcherId?: string,
+): Options | undefined {
+  const searchParams: Record<string, string> = {};
+  if (range?.dateFrom && range?.dateTo) {
+    searchParams.dateFrom = range.dateFrom;
+    searchParams.dateTo = range.dateTo;
+  }
+  if (dispatcherId) {
+    searchParams.dispatcherId = dispatcherId;
+  }
+  return Object.keys(searchParams).length > 0 ? { searchParams } : undefined;
+}
+
+/**
+ * Workload and Performance are paged server-side (backend#126/#127): `page` is
+ * 1-based and always sent, the range dates ride along when present, and
+ * `dispatcherId` scopes to a single dispatcher (SH-336).
+ */
+function dispatcherPageSearchParams(
+  range: DashboardRangeParams | undefined,
+  page: number,
+  dispatcherId?: string,
+): Options {
+  const searchParams: Record<string, string | number> = { page };
+  if (range?.dateFrom && range?.dateTo) {
+    searchParams.dateFrom = range.dateFrom;
+    searchParams.dateTo = range.dateTo;
+  }
+  if (dispatcherId) {
+    searchParams.dispatcherId = dispatcherId;
+  }
+  return { searchParams };
+}
+
+/**
+ * Reads the paging envelope the dispatcher endpoints return (`Page`, `PageSize`,
+ * `TotalDispatchers`). Falls back to the requested page, the default page size,
+ * and the item count for the legacy bare-array shape so older responses still
+ * render (with the pager hidden).
+ */
+function readDispatcherPageMeta(
+  raw: unknown,
+  requestedPage: number,
+  itemCount: number,
+): { page: number; pageSize: number; totalDispatchers: number } {
+  const data = toRecord(raw);
+  const pageValue = readField(data, "page");
+  const pageSizeValue = readField(data, "pageSize");
+  const totalValue = readField(data, "totalDispatchers");
+  return {
+    page: pageValue == null ? requestedPage : toNumber(pageValue),
+    pageSize: pageSizeValue == null ? DISPATCHER_PAGE_SIZE : toNumber(pageSizeValue),
+    totalDispatchers: totalValue == null ? itemCount : toNumber(totalValue),
+  };
+}
+
+function trendSearchParams(params?: DashboardTrendParams): Options | undefined {
+  if (
+    !params ||
+    (!params.dateFrom && !params.dateTo && !params.granularity && !params.range && !params.year)
+  ) {
+    return undefined;
+  }
+
+  const searchParams: Record<string, string | number> = {};
+  if (params.dateFrom) searchParams.dateFrom = params.dateFrom;
+  if (params.dateTo) searchParams.dateTo = params.dateTo;
+  if (params.granularity) searchParams.granularity = params.granularity;
+  if (params.range) searchParams.range = params.range;
+  if (params.year) searchParams.year = params.year;
+
+  return { searchParams };
+}
+
+const BREAKDOWN_TYPE_BY_LOWER = new Map<string, string>(
+  WO_TYPES.map((type) => [type.toLowerCase(), type]),
+);
+
+/**
+ * The backend breakdown object (backend#138) serializes its keys with no
+ * JsonPropertyName, so `PM`/`Emergency`/`Reactive`/`Overdue`/`Other` arrive
+ * lowercase. The card uses the row label as both display text and the
+ * `types` drill-down id, and `workOrderTypeDrilldownSearch` only accepts
+ * canonical `WOType` values — so map lowercase type keys back to their
+ * canonical labels. `other` is not a WOType: keep it as a labelled,
+ * non-drillable "Other" row. Unknown values (e.g. lifecycle labels from the
+ * legacy array shape) pass through unchanged.
+ */
+function normalizeBreakdownStatus(raw: string): string {
+  const trimmed = raw.trim();
+  const canonical = BREAKDOWN_TYPE_BY_LOWER.get(trimmed.toLowerCase());
+  if (canonical) return canonical;
+  if (trimmed.toLowerCase() === "other") return "Other";
+  return trimmed;
+}
+
+function mapBreakdownRow(raw: Record<string, unknown>): DashboardBreakdownRow {
+  const status = asString(
+    readField(raw, "status") ?? readField(raw, "name") ?? readField(raw, "label"),
+  );
+  return {
+    status: status ? normalizeBreakdownStatus(status) : UNMAPPED_REGION_LABEL,
+    count: toNumber(readField(raw, "count") ?? readField(raw, "value")),
+  };
+}
+
+function mapBreakdown(value: unknown): DashboardBreakdownRow[] {
+  if (Array.isArray(value)) {
+    return asRecords(value).map(mapBreakdownRow);
+  }
+
+  if (typeof value === "object" && value !== null) {
+    return Object.entries(value as Record<string, unknown>)
+      .map(([status, count]) => ({
+        status: normalizeBreakdownStatus(status),
+        count: toNumber(count),
+      }))
+      .filter((row) => row.status !== "");
+  }
+
+  return [];
+}
+
+function mapDispatcherIdentity(raw: Record<string, unknown>): {
+  dispatcherId: string;
+  dispatcherName: string;
+} {
+  return {
+    dispatcherId: asString(
+      readField(raw, "dispatcherId") ?? readField(raw, "id") ?? readField(raw, "userId"),
+    ),
+    dispatcherName: asString(readField(raw, "dispatcherName") ?? readField(raw, "name")),
+  };
+}
+
+function mapStatusDistribution(value: unknown): DashboardStatusBucketRow[] {
+  return asRecords(value)
+    .map((row) => ({
+      status: asString(
+        readField(row, "status") ?? readField(row, "name") ?? readField(row, "label"),
+      ),
+      count: toNumber(readField(row, "count") ?? readField(row, "value")),
+    }))
+    .filter((row) => row.status !== "");
+}
+
+function mapDashboardStats(raw: unknown): DashboardStats {
+  const data = toRecord(raw);
+  const average = readField(data, "averageResolutionDays");
+
+  return {
+    total: toNumber(readField(data, "total")),
+    open: toNumber(readField(data, "open")),
+    notDispatched: toNumber(readField(data, "notDispatched")),
+    completed: toNumber(readField(data, "completed")),
+    dueCount: toNumber(readField(data, "dueCount")),
+    completedDueCount: toNumber(readField(data, "completedDueCount")),
+    completionRate: toNumber(readField(data, "completionRate")),
+    averageResolutionDays: average == null ? null : toNumber(average),
+    scheduledTomorrow: toNumber(readField(data, "scheduledTomorrow")),
+    pendingUplifts: toNumber(readField(data, "pendingUplifts")),
+    avetaPending: toNumber(readField(data, "avetaPending")),
+    breakdown: mapBreakdown(readField(data, "breakdown") ?? readField(data, "workOrderBreakdown")),
+    statusDistribution: mapStatusDistribution(readField(data, "statusDistribution")),
+  };
+}
+
+function mapDispatcherWorkload(raw: unknown): DispatcherWorkloadRow[] {
+  return readCollection(raw, "items").map((rawRow) => {
+    const identity = mapDispatcherIdentity(rawRow);
+    return {
+      ...identity,
+      openWorkOrders: toNumber(
+        readField(rawRow, "openWorkOrders") ??
+          readField(rawRow, "openCount") ??
+          readField(rawRow, "open"),
+      ),
+      totalWorkOrders: toNumber(
+        readField(rawRow, "totalWorkOrders") ??
+          readField(rawRow, "totalCount") ??
+          readField(rawRow, "scheduledWorkOrders") ??
+          readField(rawRow, "scheduled"),
+      ),
+    };
+  });
+}
+
+function mapDispatcherPerformance(raw: unknown): DispatcherPerformanceRow[] {
+  return readCollection(raw, "items").map((rawRow) => {
+    const identity = mapDispatcherIdentity(rawRow);
+    return {
+      ...identity,
+      completionRate: toNumber(
+        readField(rawRow, "completionRate") ?? readField(rawRow, "onTimeRate"),
+      ),
+      averageResolutionDays:
+        readField(rawRow, "averageResolutionDays") == null
+          ? null
+          : toNumber(readField(rawRow, "averageResolutionDays")),
+      assignedCount: toNumber(readField(rawRow, "assignedCount") ?? readField(rawRow, "assigned")),
+      completedCount: toNumber(
+        readField(rawRow, "completedCount") ?? readField(rawRow, "completed"),
+      ),
+    };
+  });
+}
+
+function mapRegions(raw: unknown): RegionWorkOrdersRow[] {
+  return readCollection(raw, "items").map((rawRow) => {
+    const region =
+      asString(readField(rawRow, "region") ?? readField(rawRow, "name")) || UNMAPPED_REGION_LABEL;
+    return {
+      region,
+      workOrderCount: toNumber(
+        readField(rawRow, "workOrderCount") ??
+          readField(rawRow, "count") ??
+          readField(rawRow, "total"),
+      ),
+    };
+  });
+}
+
+function mapVendorInsights(raw: unknown): VendorInsightRow[] {
+  return readCollection(raw, "items").map((rawRow) => ({
+    vendorId: asString(
+      readField(rawRow, "vendorId") ??
+        readField(rawRow, "vendorCompanyId") ??
+        readField(rawRow, "id"),
+    ),
+    vendorName: asString(
+      readField(rawRow, "vendorName") ??
+        readField(rawRow, "vendorCompanyName") ??
+        readField(rawRow, "companyName") ??
+        readField(rawRow, "name"),
+    ),
+    completionRate: toNumber(readField(rawRow, "completionRate")),
+    rescheduleRate: toNumber(readField(rawRow, "rescheduleRate")),
+    averageResolutionDays:
+      readField(rawRow, "averageResolutionDays") == null
+        ? null
+        : toNumber(readField(rawRow, "averageResolutionDays")),
+    totalJobs: toNumber(readField(rawRow, "totalJobs")),
+  }));
+}
+
+function mapTrendGranularity(value: unknown): DashboardTrendGranularity | null {
+  const granularity = asString(value).toLowerCase();
+  return granularity === "day" || granularity === "week" || granularity === "month"
+    ? granularity
+    : null;
+}
+
+function mapDashboardTrend(raw: unknown): DashboardTrend {
+  const data = toRecord(raw);
+  const buckets = readCollection(data, "buckets");
+  const legacyPoints = readCollection(data, "points");
+  const points = (buckets.length > 0 ? buckets : legacyPoints).map((rawPoint) => ({
+    date: asString(readField(rawPoint, "date")),
+    label: asString(
+      readField(rawPoint, "label") ?? readField(rawPoint, "period") ?? readField(rawPoint, "date"),
+    ),
+    total: toNumber(
+      readField(rawPoint, "total") ?? readField(rawPoint, "count") ?? readField(rawPoint, "value"),
+    ),
+    open: toNumber(readField(rawPoint, "open")),
+    completed: toNumber(readField(rawPoint, "completed")),
+    canceled: toNumber(readField(rawPoint, "canceled")),
+    overdue: toNumber(readField(rawPoint, "overdue")),
+    isCurrent: readField(rawPoint, "isCurrent") === true,
+  }));
+
+  return { granularity: mapTrendGranularity(readField(data, "granularity")), points };
+}
+
+export const dashboardApi = {
+  getStats: async (
+    range?: DashboardRangeParams,
+    dispatcherId?: string,
+  ): Promise<DashboardStats> => {
+    const data = await apiGet<unknown>(
+      API_PATHS.dashboard.stats,
+      scopedSearchParams(range, dispatcherId),
+    );
+    return mapDashboardStats(handleApiResponse<unknown>(data));
+  },
+  getWorkload: async (
+    range?: DashboardRangeParams,
+    page = 1,
+    dispatcherId?: string,
+  ): Promise<DispatcherPage<DispatcherWorkloadRow>> => {
+    const data = await apiGet<unknown>(
+      API_PATHS.dashboard.workload,
+      dispatcherPageSearchParams(range, page, dispatcherId),
+    );
+    const response = handleApiResponse<unknown>(data);
+    const items = mapDispatcherWorkload(response);
+    return { items, ...readDispatcherPageMeta(response, page, items.length) };
+  },
+  getPerformance: async (
+    range?: DashboardRangeParams,
+    page = 1,
+    dispatcherId?: string,
+  ): Promise<DispatcherPage<DispatcherPerformanceRow>> => {
+    const data = await apiGet<unknown>(
+      API_PATHS.dashboard.performance,
+      dispatcherPageSearchParams(range, page, dispatcherId),
+    );
+    const response = handleApiResponse<unknown>(data);
+    const items = mapDispatcherPerformance(response);
+    return { items, ...readDispatcherPageMeta(response, page, items.length) };
+  },
+  getRegions: async (
+    range?: DashboardRangeParams,
+    dispatcherId?: string,
+  ): Promise<RegionWorkOrdersRow[]> => {
+    const data = await apiGet<unknown>(
+      API_PATHS.dashboard.regions,
+      scopedSearchParams(range, dispatcherId),
+    );
+    return mapRegions(handleApiResponse<unknown>(data));
+  },
+  getVendorInsights: async (): Promise<VendorInsightRow[]> => {
+    const data = await apiGet<unknown>(API_PATHS.dashboard.vendorInsights);
+    return mapVendorInsights(handleApiResponse<unknown>(data));
+  },
+  getTrend: async (params?: DashboardTrendParams): Promise<DashboardTrend> => {
+    const data = await apiGet<unknown>(API_PATHS.dashboard.trend, trendSearchParams(params));
+    return mapDashboardTrend(handleApiResponse<unknown>(data));
+  },
+};
diff --git a/src/domain/dashboard/types/dashboard-dispatcher-page.ts b/src/domain/dashboard/types/dashboard-dispatcher-page.ts
new file mode 100644
index 00000000..686b4f63
--- /dev/null
+++ b/src/domain/dashboard/types/dashboard-dispatcher-page.ts
@@ -0,0 +1,10 @@
+/** Backend pages both dispatcher tables at 10 rows (backend#126/#127). */
+export const DISPATCHER_PAGE_SIZE = 10;
+
+/** A single page of dispatcher rows plus the paging metadata the tables need. */
+export interface DispatcherPage<TRow> {
+  items: TRow[];
+  page: number;
+  pageSize: number;
+  totalDispatchers: number;
+}
diff --git a/src/domain/dashboard/types/dashboard-performance.ts b/src/domain/dashboard/types/dashboard-performance.ts
new file mode 100644
index 00000000..03c49371
--- /dev/null
+++ b/src/domain/dashboard/types/dashboard-performance.ts
@@ -0,0 +1,8 @@
+export interface DispatcherPerformanceRow {
+  dispatcherId: string;
+  dispatcherName: string;
+  completionRate: number;
+  averageResolutionDays: number | null;
+  assignedCount: number;
+  completedCount: number;
+}
diff --git a/src/domain/dashboard/types/dashboard-range.ts b/src/domain/dashboard/types/dashboard-range.ts
new file mode 100644
index 00000000..15cfd155
--- /dev/null
+++ b/src/domain/dashboard/types/dashboard-range.ts
@@ -0,0 +1,10 @@
+export const DASHBOARD_RANGES = ["this-week", "last-3-months", "today", "all-time"] as const;
+
+export type DashboardRangeKey = (typeof DASHBOARD_RANGES)[number];
+
+export const DEFAULT_DASHBOARD_RANGE: DashboardRangeKey = "this-week";
+
+export interface DashboardRangeParams {
+  dateFrom?: string;
+  dateTo?: string;
+}
diff --git a/src/domain/dashboard/types/dashboard-regions.ts b/src/domain/dashboard/types/dashboard-regions.ts
new file mode 100644
index 00000000..c5b1cab9
--- /dev/null
+++ b/src/domain/dashboard/types/dashboard-regions.ts
@@ -0,0 +1,6 @@
+export const UNMAPPED_REGION_LABEL = "Unmapped/Other";
+
+export interface RegionWorkOrdersRow {
+  region: string;
+  workOrderCount: number;
+}
diff --git a/src/domain/dashboard/types/dashboard-stats.ts b/src/domain/dashboard/types/dashboard-stats.ts
new file mode 100644
index 00000000..1394a801
--- /dev/null
+++ b/src/domain/dashboard/types/dashboard-stats.ts
@@ -0,0 +1,25 @@
+export interface DashboardBreakdownRow {
+  status: string;
+  count: number;
+}
+
+export interface DashboardStatusBucketRow {
+  status: string;
+  count: number;
+}
+
+export interface DashboardStats {
+  total: number;
+  open: number;
+  notDispatched: number;
+  completed: number;
+  dueCount: number;
+  completedDueCount: number;
+  completionRate: number;
+  averageResolutionDays: number | null;
+  scheduledTomorrow: number;
+  pendingUplifts: number;
+  avetaPending: number;
+  breakdown: DashboardBreakdownRow[];
+  statusDistribution: DashboardStatusBucketRow[];
+}
diff --git a/src/domain/dashboard/types/dashboard-trend.ts b/src/domain/dashboard/types/dashboard-trend.ts
new file mode 100644
index 00000000..d9c8eff5
--- /dev/null
+++ b/src/domain/dashboard/types/dashboard-trend.ts
@@ -0,0 +1,25 @@
+export type DashboardTrendGranularity = "day" | "week" | "month";
+
+export interface DashboardTrendParams {
+  dateFrom?: string;
+  dateTo?: string;
+  granularity?: DashboardTrendGranularity;
+  range?: "3m";
+  year?: number;
+}
+
+export interface DashboardTrendPoint {
+  date: string;
+  label: string;
+  total: number;
+  open: number;
+  completed: number;
+  canceled: number;
+  overdue: number;
+  isCurrent: boolean;
+}
+
+export interface DashboardTrend {
+  granularity: DashboardTrendGranularity | null;
+  points: DashboardTrendPoint[];
+}
diff --git a/src/domain/dashboard/types/dashboard-vendor-insights.ts b/src/domain/dashboard/types/dashboard-vendor-insights.ts
new file mode 100644
index 00000000..b8f1c859
--- /dev/null
+++ b/src/domain/dashboard/types/dashboard-vendor-insights.ts
@@ -0,0 +1,8 @@
+export interface VendorInsightRow {
+  vendorId: string;
+  vendorName: string;
+  completionRate: number;
+  rescheduleRate: number;
+  averageResolutionDays: number | null;
+  totalJobs: number;
+}
diff --git a/src/domain/dashboard/types/dashboard-workload.ts b/src/domain/dashboard/types/dashboard-workload.ts
new file mode 100644
index 00000000..a7a8f806
--- /dev/null
+++ b/src/domain/dashboard/types/dashboard-workload.ts
@@ -0,0 +1,6 @@
+export interface DispatcherWorkloadRow {
+  dispatcherId: string;
+  dispatcherName: string;
+  openWorkOrders: number;
+  totalWorkOrders: number;
+}
diff --git a/src/domain/dashboard/use-cases/use-dashboard-performance.ts b/src/domain/dashboard/use-cases/use-dashboard-performance.ts
new file mode 100644
index 00000000..3e7c4f71
--- /dev/null
+++ b/src/domain/dashboard/use-cases/use-dashboard-performance.ts
@@ -0,0 +1,22 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { dashboardApi } from "@/domain/dashboard/api/dashboard-api";
+import type { DispatcherPage } from "@/domain/dashboard/types/dashboard-dispatcher-page";
+import type { DispatcherPerformanceRow } from "@/domain/dashboard/types/dashboard-performance";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import { dashboardRangeParams } from "@/domain/dashboard/utils/dashboard-range-utils";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDashboardPerformance(
+  range: DashboardRangeKey,
+  page = 1,
+  dispatcherId: string | null = null,
+  enabled = true,
+): UseQueryResult<DispatcherPage<DispatcherPerformanceRow>, Error> {
+  return useQuery({
+    queryKey: queryKeys.dashboard.performance(range, page, dispatcherId),
+    queryFn: () =>
+      dashboardApi.getPerformance(dashboardRangeParams(range), page, dispatcherId ?? undefined),
+    staleTime: 60 * 1000,
+    enabled,
+  });
+}
diff --git a/src/domain/dashboard/use-cases/use-dashboard-regions.ts b/src/domain/dashboard/use-cases/use-dashboard-regions.ts
new file mode 100644
index 00000000..787d7477
--- /dev/null
+++ b/src/domain/dashboard/use-cases/use-dashboard-regions.ts
@@ -0,0 +1,17 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { dashboardApi } from "@/domain/dashboard/api/dashboard-api";
+import type { RegionWorkOrdersRow } from "@/domain/dashboard/types/dashboard-regions";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import { dashboardRangeParams } from "@/domain/dashboard/utils/dashboard-range-utils";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDashboardRegions(
+  range: DashboardRangeKey,
+  dispatcherId: string | null = null,
+): UseQueryResult<RegionWorkOrdersRow[], Error> {
+  return useQuery({
+    queryKey: queryKeys.dashboard.regions(range, dispatcherId),
+    queryFn: () => dashboardApi.getRegions(dashboardRangeParams(range), dispatcherId ?? undefined),
+    staleTime: 60 * 1000,
+  });
+}
diff --git a/src/domain/dashboard/use-cases/use-dashboard-stats.ts b/src/domain/dashboard/use-cases/use-dashboard-stats.ts
new file mode 100644
index 00000000..9266d7ba
--- /dev/null
+++ b/src/domain/dashboard/use-cases/use-dashboard-stats.ts
@@ -0,0 +1,17 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { dashboardApi } from "@/domain/dashboard/api/dashboard-api";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import type { DashboardStats } from "@/domain/dashboard/types/dashboard-stats";
+import { dashboardRangeParams } from "@/domain/dashboard/utils/dashboard-range-utils";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDashboardStats(
+  range: DashboardRangeKey,
+  dispatcherId: string | null = null,
+): UseQueryResult<DashboardStats, Error> {
+  return useQuery({
+    queryKey: queryKeys.dashboard.stats(range, dispatcherId),
+    queryFn: () => dashboardApi.getStats(dashboardRangeParams(range), dispatcherId ?? undefined),
+    staleTime: 60 * 1000,
+  });
+}
diff --git a/src/domain/dashboard/use-cases/use-dashboard-trend.ts b/src/domain/dashboard/use-cases/use-dashboard-trend.ts
new file mode 100644
index 00000000..ca780bb6
--- /dev/null
+++ b/src/domain/dashboard/use-cases/use-dashboard-trend.ts
@@ -0,0 +1,17 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { dashboardApi } from "@/domain/dashboard/api/dashboard-api";
+import type {
+  DashboardTrend,
+  DashboardTrendParams,
+} from "@/domain/dashboard/types/dashboard-trend";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDashboardTrend(
+  params?: DashboardTrendParams,
+): UseQueryResult<DashboardTrend, Error> {
+  return useQuery({
+    queryKey: queryKeys.dashboard.trend(params),
+    queryFn: () => dashboardApi.getTrend(params),
+    staleTime: 60 * 1000,
+  });
+}
diff --git a/src/domain/dashboard/use-cases/use-dashboard-vendor-insights.ts b/src/domain/dashboard/use-cases/use-dashboard-vendor-insights.ts
new file mode 100644
index 00000000..1544dd52
--- /dev/null
+++ b/src/domain/dashboard/use-cases/use-dashboard-vendor-insights.ts
@@ -0,0 +1,12 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { dashboardApi } from "@/domain/dashboard/api/dashboard-api";
+import type { VendorInsightRow } from "@/domain/dashboard/types/dashboard-vendor-insights";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDashboardVendorInsights(): UseQueryResult<VendorInsightRow[], Error> {
+  return useQuery({
+    queryKey: queryKeys.dashboard.vendorInsights(),
+    queryFn: () => dashboardApi.getVendorInsights(),
+    staleTime: 60 * 1000,
+  });
+}
diff --git a/src/domain/dashboard/use-cases/use-dashboard-workload.ts b/src/domain/dashboard/use-cases/use-dashboard-workload.ts
new file mode 100644
index 00000000..5a970598
--- /dev/null
+++ b/src/domain/dashboard/use-cases/use-dashboard-workload.ts
@@ -0,0 +1,22 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { dashboardApi } from "@/domain/dashboard/api/dashboard-api";
+import type { DispatcherPage } from "@/domain/dashboard/types/dashboard-dispatcher-page";
+import type { DispatcherWorkloadRow } from "@/domain/dashboard/types/dashboard-workload";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import { dashboardRangeParams } from "@/domain/dashboard/utils/dashboard-range-utils";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDashboardWorkload(
+  range: DashboardRangeKey,
+  page = 1,
+  dispatcherId: string | null = null,
+  enabled = true,
+): UseQueryResult<DispatcherPage<DispatcherWorkloadRow>, Error> {
+  return useQuery({
+    queryKey: queryKeys.dashboard.workload(range, page, dispatcherId),
+    queryFn: () =>
+      dashboardApi.getWorkload(dashboardRangeParams(range), page, dispatcherId ?? undefined),
+    staleTime: 60 * 1000,
+    enabled,
+  });
+}
diff --git a/src/domain/dashboard/utils/dashboard-range-utils.ts b/src/domain/dashboard/utils/dashboard-range-utils.ts
new file mode 100644
index 00000000..3efc2ca4
--- /dev/null
+++ b/src/domain/dashboard/utils/dashboard-range-utils.ts
@@ -0,0 +1,73 @@
+import { DEFAULT_DASHBOARD_RANGE } from "@/domain/dashboard/types/dashboard-range";
+import type {
+  DashboardRangeKey,
+  DashboardRangeParams,
+} from "@/domain/dashboard/types/dashboard-range";
+
+export const BUSINESS_TIME_ZONE = "America/New_York";
+
+const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+
+export function businessTodayIso(now: Date = new Date()): string {
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone: BUSINESS_TIME_ZONE,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(now);
+}
+
+export function isIsoDate(value: string): boolean {
+  return ISO_DATE_PATTERN.test(value);
+}
+
+export function addDaysIso(isoDate: string, days: number): string {
+  const [year, month, day] = isoDate.split("-").map(Number);
+  const shifted = new Date(Date.UTC(year, month - 1, day + days));
+  return shifted.toISOString().slice(0, 10);
+}
+
+export function mondayOf(isoDate: string): string {
+  const [year, month, day] = isoDate.split("-").map(Number);
+  const weekday = new Date(Date.UTC(year, month - 1, day)).getUTCDay();
+  return addDaysIso(isoDate, -((weekday + 6) % 7));
+}
+
+export function monthStartIso(isoDate: string): string {
+  return `${isoDate.slice(0, 7)}-01`;
+}
+
+export function monthEndIso(isoDate: string): string {
+  const year = Number(isoDate.slice(0, 4));
+  const month = Number(isoDate.slice(5, 7));
+  const lastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
+  return `${isoDate.slice(0, 7)}-${String(lastDay).padStart(2, "0")}`;
+}
+
+function shiftMonthsIso(isoDate: string, months: number): string {
+  const year = Number(isoDate.slice(0, 4));
+  const month = Number(isoDate.slice(5, 7));
+  const shifted = new Date(Date.UTC(year, month - 1 + months, 1));
+  return `${shifted.getUTCFullYear()}-${String(shifted.getUTCMonth() + 1).padStart(2, "0")}-01`;
+}
+
+export function dashboardRangeParams(
+  range: DashboardRangeKey = DEFAULT_DASHBOARD_RANGE,
+  today: string = businessTodayIso(),
+): DashboardRangeParams {
+  switch (range) {
+    case "today":
+      return { dateFrom: today, dateTo: today };
+    case "this-week": {
+      const monday = mondayOf(today);
+      return { dateFrom: monday, dateTo: addDaysIso(monday, 4) };
+    }
+    case "last-3-months":
+      return {
+        dateFrom: monthStartIso(shiftMonthsIso(today, -2)),
+        dateTo: monthEndIso(today),
+      };
+    case "all-time":
+      return {};
+  }
+}
diff --git a/src/domain/dashboard/utils/work-order-drilldown-links.ts b/src/domain/dashboard/utils/work-order-drilldown-links.ts
new file mode 100644
index 00000000..c83d0592
--- /dev/null
+++ b/src/domain/dashboard/utils/work-order-drilldown-links.ts
@@ -0,0 +1,96 @@
+import { ALL_WIZARD_STATUSES } from "@/domain/work-orders/types/work-order-wizard";
+import { WO_TYPES, type WOType } from "@/domain/work-orders/types/work-order-wizard";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import {
+  addDaysIso,
+  businessTodayIso,
+  dashboardRangeParams,
+} from "@/domain/dashboard/utils/dashboard-range-utils";
+
+export const WORK_ORDERS_ROUTE = "/workorders";
+export const UPLIFTS_ROUTE = "/uplifts";
+
+export const OPEN_WIZARD_STATUSES: readonly string[] = ALL_WIZARD_STATUSES.filter(
+  (status) => status !== "Completed",
+);
+
+export function workOrderDrilldownUrl(search: URLSearchParams): string {
+  const query = search.toString();
+  return query ? `${WORK_ORDERS_ROUTE}?${query}` : WORK_ORDERS_ROUTE;
+}
+
+function setDateRange(search: URLSearchParams, range: DashboardRangeKey): void {
+  const params = dashboardRangeParams(range);
+  if (params.dateFrom && params.dateTo) {
+    search.set("dateFrom", params.dateFrom);
+    search.set("dateTo", params.dateTo);
+  }
+}
+
+export function workOrderRangeDrilldownSearch(range: DashboardRangeKey): URLSearchParams {
+  const search = new URLSearchParams();
+  setDateRange(search, range);
+  return search;
+}
+
+export function workOrderStatusDrilldownSearch(
+  status: string,
+  range: DashboardRangeKey,
+): URLSearchParams {
+  const search = workOrderRangeDrilldownSearch(range);
+  search.set("statuses", status);
+  return search;
+}
+
+export function workOrderTypeDrilldownSearch(
+  type: string,
+  range: DashboardRangeKey,
+): URLSearchParams | null {
+  if (!WO_TYPES.includes(type as WOType)) return null;
+  const search = workOrderRangeDrilldownSearch(range);
+  search.set("types", type);
+  return search;
+}
+
+export function workOrderDispatcherDrilldownSearch(
+  dispatcherId: string,
+  range: DashboardRangeKey,
+): URLSearchParams {
+  const search = workOrderRangeDrilldownSearch(range);
+  search.set("dispatchers", dispatcherId);
+  return search;
+}
+
+export function workOrderRegionDrilldownSearch(
+  region: string,
+  range: DashboardRangeKey,
+): URLSearchParams {
+  const search = workOrderRangeDrilldownSearch(range);
+  search.set("regions", region);
+  return search;
+}
+
+export function scheduledTomorrowDrilldownSearch(
+  today: string = businessTodayIso(),
+): URLSearchParams {
+  const tomorrow = addDaysIso(today, 1);
+  const search = new URLSearchParams();
+  search.set("dateFrom", tomorrow);
+  search.set("dateTo", tomorrow);
+  return search;
+}
+
+export function avetaPendingDrilldownSearch(today: string = businessTodayIso()): URLSearchParams {
+  // The Aveta Pending count (backend#138 / SH-294) is: AvetaRequired, scheduled
+  // today or tomorrow, open, and missing its Aveta-category document. The board
+  // has no missing-Aveta-document filter, so the closest reachable set is the
+  // Aveta-required work in the two-day open window. `docs=No` is deliberately
+  // NOT sent: it filters on completion-document status, a different document
+  // from the Aveta clearance one, so it would narrow to the wrong rows.
+  const search = new URLSearchParams();
+  search.set("dateFrom", today);
+  search.set("dateTo", addDaysIso(today, 1));
+  search.set("aveta", "1");
+  search.set("statuses", OPEN_WIZARD_STATUSES.join(","));
+  return search;
+}
diff --git a/src/domain/employees/api/employees-api.ts b/src/domain/employees/api/employees-api.ts
new file mode 100644
index 00000000..2c9dbe12
--- /dev/null
+++ b/src/domain/employees/api/employees-api.ts
@@ -0,0 +1,126 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiGet, apiPost } from "@/api/api";
+import { handleApiResponse, handlePaginatedResponse } from "@/api/handle-api-response";
+import {
+  mapEmployeeListItems,
+  transformEmployee,
+  transformToBackend,
+} from "@/domain/employees/mappers/employee-mapper";
+import type {
+  Employee,
+  EmployeesListParams,
+  EmployeesListResult,
+} from "@/domain/employees/types/employee";
+
+function buildSearchParams(params: EmployeesListParams): Record<string, string | number> {
+  return {
+    search: params.search ?? "",
+    page: params.page ?? 1,
+    pageSize: params.pageSize ?? 12,
+  };
+}
+
+async function findEmployeeInList(id: string | number): Promise<Employee | null> {
+  const targetId = String(id);
+  let page = 1;
+  const pageSize = 100;
+
+  while (true) {
+    const data = await apiGet<unknown>(API_PATHS.employee.getList, {
+      searchParams: { search: "", page, pageSize },
+    });
+    const paginated = handlePaginatedResponse<unknown>(data, { page, pageSize });
+    const match = paginated.items.find((item) => {
+      const record = (typeof item === "object" && item !== null ? item : {}) as Record<
+        string,
+        unknown
+      >;
+      const itemId = record.id ?? record.Id;
+      return String(itemId) === targetId;
+    });
+
+    if (match) {
+      return transformEmployee(match);
+    }
+
+    if (paginated.items.length === 0 || page * pageSize >= paginated.totalCount) {
+      return null;
+    }
+
+    page += 1;
+  }
+}
+
+export const employeesApi = {
+  getList: async (params: EmployeesListParams = {}): Promise<EmployeesListResult> => {
+    const searchParams = buildSearchParams(params);
+    const data = await apiGet<unknown>(API_PATHS.employee.getList, { searchParams });
+    const paginated = handlePaginatedResponse<unknown>(data, {
+      page: params.page,
+      pageSize: params.pageSize,
+    });
+
+    return {
+      items: mapEmployeeListItems(paginated.items),
+      totalCount: paginated.totalCount,
+      page: paginated.page,
+      pageSize: paginated.pageSize,
+    };
+  },
+
+  getById: async (id: string | number): Promise<Employee | null> => {
+    try {
+      const data = await apiGet<unknown>(API_PATHS.employee.getById, {
+        searchParams: { id },
+      });
+      return transformEmployee(handleApiResponse(data));
+    } catch {
+      return findEmployeeInList(id);
+    }
+  },
+
+  create: async (payload: Employee): Promise<Employee | null> => {
+    const data = await apiPost<unknown>(
+      API_PATHS.employee.addEmployees,
+      transformToBackend(payload),
+    );
+    return transformEmployee(handleApiResponse(data));
+  },
+
+  update: async (id: string | number, payload: Employee): Promise<Employee | null> => {
+    const data = await apiPost<unknown>(
+      API_PATHS.employee.editEmployees,
+      transformToBackend({ ...payload, id }),
+    );
+    return transformEmployee(handleApiResponse(data));
+  },
+
+  delete: async (id: string | number): Promise<void> => {
+    await apiGet<unknown>(API_PATHS.employee.deleteEmployees, {
+      searchParams: { id },
+    });
+  },
+
+  getDropdown: async () => {
+    try {
+      return await apiGet<unknown>(API_PATHS.employee.dropdown);
+    } catch {
+      const data = await apiGet<unknown>(API_PATHS.employee.getList, {
+        searchParams: { page: 1, pageSize: 1000 },
+      });
+      const paginated = handlePaginatedResponse<unknown>(data);
+      return paginated.items.map((item) => {
+        const record = (typeof item === "object" && item !== null ? item : {}) as Record<
+          string,
+          unknown
+        >;
+        const firstName = String(record.firstName ?? record.FirstName ?? "");
+        const lastName = String(record.lastName ?? record.LastName ?? "");
+        return {
+          id: record.id ?? record.Id,
+          name: `${firstName} ${lastName}`.trim(),
+        };
+      });
+    }
+  },
+};
diff --git a/src/domain/employees/constants/job-title-options.ts b/src/domain/employees/constants/job-title-options.ts
new file mode 100644
index 00000000..16ac6104
--- /dev/null
+++ b/src/domain/employees/constants/job-title-options.ts
@@ -0,0 +1,31 @@
+export interface JobTitleOption {
+  id: number;
+  label: string;
+}
+
+/**
+ * Static job title options — IDs must match the JobTitles table in the target environment.
+ * No backend lookup endpoint exists yet (frontend-only scope).
+ */
+export const JOB_TITLE_OPTIONS: JobTitleOption[] = [
+  { id: 1, label: "Technician" },
+  { id: 2, label: "Service Associate" },
+  { id: 3, label: "Accountant" },
+  { id: 4, label: "Salesperson" },
+  { id: 5, label: "President" },
+];
+
+export function findJobTitleLabelById(id: number | null | undefined): string {
+  if (id == null) {
+    return "";
+  }
+  return JOB_TITLE_OPTIONS.find((option) => option.id === id)?.label ?? "";
+}
+
+export function findJobTitleIdByLabel(label: string | null | undefined): number | null {
+  if (!label?.trim()) {
+    return null;
+  }
+  const normalized = label.trim().toLowerCase();
+  return JOB_TITLE_OPTIONS.find((option) => option.label.toLowerCase() === normalized)?.id ?? null;
+}
diff --git a/src/domain/employees/lib/resolve-job-title-id.ts b/src/domain/employees/lib/resolve-job-title-id.ts
new file mode 100644
index 00000000..7c91f4d7
--- /dev/null
+++ b/src/domain/employees/lib/resolve-job-title-id.ts
@@ -0,0 +1,24 @@
+import {
+  findJobTitleIdByLabel,
+  findJobTitleLabelById,
+} from "@/domain/employees/constants/job-title-options";
+
+export function resolveJobTitleId(
+  jobTitleId: number | null | undefined,
+  jobTitleLabel: string | null | undefined,
+): number | null {
+  if (typeof jobTitleId === "number" && jobTitleId > 0) {
+    return jobTitleId;
+  }
+  return findJobTitleIdByLabel(jobTitleLabel);
+}
+
+export function resolveJobTitleLabel(
+  jobTitleId: number | null | undefined,
+  jobTitleLabel: string | null | undefined,
+): string {
+  if (jobTitleLabel?.trim()) {
+    return jobTitleLabel;
+  }
+  return findJobTitleLabelById(jobTitleId);
+}
diff --git a/src/domain/employees/mappers/employee-mapper.ts b/src/domain/employees/mappers/employee-mapper.ts
new file mode 100644
index 00000000..900ebc4d
--- /dev/null
+++ b/src/domain/employees/mappers/employee-mapper.ts
@@ -0,0 +1,115 @@
+import type { Employee, EmployeeListItem } from "@/domain/employees/types/employee";
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+  }
+  return "";
+}
+
+function readId(record: Record<string, unknown>): string | number {
+  const value = record.id ?? record.Id;
+  if (typeof value === "string" || typeof value === "number") {
+    return value;
+  }
+  return "";
+}
+
+function readJobTitleId(record: Record<string, unknown>): number | null {
+  const value = record.jobTitleId ?? record.JobTitleId;
+  if (typeof value === "number") {
+    return value;
+  }
+  if (typeof value === "string" && value !== "") {
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? null : parsed;
+  }
+  return null;
+}
+
+export function mapEmployeeListItem(raw: unknown): EmployeeListItem {
+  const item = (typeof raw === "object" && raw !== null ? raw : {}) as Record<string, unknown>;
+  const firstName = readString(item, "firstName", "FirstName");
+  const lastName = readString(item, "lastName", "LastName");
+  const name = readString(item, "name", "Name") || `${firstName} ${lastName}`.trim();
+
+  return {
+    id: readId(item),
+    name,
+    jobTitle: readString(item, "jobTitle", "JobTitle"),
+    email: readString(item, "email", "Email"),
+    phone: readString(item, "phone", "Phone"),
+    department: readString(item, "department", "Department"),
+    status: readString(item, "status", "Status"),
+  };
+}
+
+export function mapEmployeeListItems(rawItems: unknown[]): EmployeeListItem[] {
+  return rawItems.map(mapEmployeeListItem);
+}
+
+export function transformEmployee(employee: unknown): Employee | null {
+  if (!employee || typeof employee !== "object") {
+    return null;
+  }
+
+  const item = employee as Record<string, unknown>;
+  const userName = readString(item, "userName", "UserName", "email", "Email");
+
+  return {
+    id: readId(item) || undefined,
+    firstName: readString(item, "firstName", "FirstName"),
+    middleName: readString(item, "middleName", "MiddleName"),
+    lastName: readString(item, "lastName", "LastName"),
+    email: readString(item, "email", "Email"),
+    phone: readString(item, "phone", "Phone"),
+    jobTitle: readString(item, "jobTitle", "JobTitle"),
+    jobTitleId: readJobTitleId(item),
+    role: readString(item, "role", "Role") || "Technician",
+    status: readString(item, "status", "Status") || "Active",
+    hireDate: readString(item, "hireDate", "HireDate"),
+    dateOfBirth: readString(item, "dateOfBirth", "DateOfBirth"),
+    address: readString(item, "address", "Address"),
+    department: readString(item, "department", "Department") || "Field Service",
+    street: readString(item, "street", "Street"),
+    streetLineTwo: readString(item, "streetLineTwo", "StreetLineTwo"),
+    city: readString(item, "city", "City"),
+    zip: readString(item, "zip", "Zip", "zipCode", "ZipCode"),
+    country: readString(item, "country", "Country") || "US",
+    state: readString(item, "state", "State"),
+    county: readString(item, "county", "County"),
+    timeZone: readString(item, "timeZone", "TimeZone") || "Eastern Standard Time",
+    gender: readString(item, "gender", "Gender"),
+    employeeNumber: readString(item, "employeeNumber", "EmployeeNumber"),
+    regionName: readString(item, "regionName", "RegionName"),
+    userName,
+    confirmUserName: userName,
+    smsAddress: readString(item, "smsAddress", "SmsAddress"),
+    website: readString(item, "website", "Website"),
+    facebookUrl: readString(item, "facebookUrl", "FacebookUrl"),
+    linkedInUrl: readString(item, "linkedInUrl", "LinkedInUrl"),
+    twitterUrl: readString(item, "twitterUrl", "TwitterUrl"),
+  };
+}
+
+export function transformToBackend(employee: Employee): Record<string, unknown> {
+  const payload: Record<string, unknown> = {
+    FirstName: employee.firstName || "",
+    LastName: employee.lastName || "",
+    Email: employee.email || null,
+    Phone: employee.phone || null,
+    JobTitleId: employee.jobTitleId ?? null,
+  };
+
+  if (employee.id !== undefined && employee.id !== "") {
+    payload.Id = Number(employee.id);
+  }
+
+  return payload;
+}
diff --git a/src/domain/employees/schemas/employee-schema.ts b/src/domain/employees/schemas/employee-schema.ts
new file mode 100644
index 00000000..e34875a0
--- /dev/null
+++ b/src/domain/employees/schemas/employee-schema.ts
@@ -0,0 +1,76 @@
+import { z } from "zod";
+
+export const employeeSchema = z
+  .object({
+    firstName: z.string().min(1, "First name is required"),
+    middleName: z.string().optional(),
+    lastName: z.string().min(1, "Last name is required"),
+    email: z.string().optional(),
+    phone: z.string().optional(),
+    jobTitle: z.string().optional(),
+    jobTitleId: z.number().nullable().optional(),
+    role: z.string().min(1, "Role is required"),
+    status: z.string().optional(),
+    hireDate: z.string().optional(),
+    dateOfBirth: z.string().optional(),
+    address: z.string().optional(),
+    department: z.string().optional(),
+    timeZone: z.string().min(1, "Time zone is required"),
+    gender: z.string().optional(),
+    employeeNumber: z.string().optional(),
+    regionName: z.string().optional(),
+    userName: z.string().min(1, "User name is required"),
+    confirmUserName: z.string().min(1, "Confirm user name is required"),
+    street: z.string().optional(),
+    streetLineTwo: z.string().optional(),
+    city: z.string().optional(),
+    zip: z.string().optional(),
+    country: z.string().optional(),
+    state: z.string().optional(),
+    county: z.string().optional(),
+    smsAddress: z.string().optional(),
+    website: z.string().optional(),
+    facebookUrl: z.string().optional(),
+    linkedInUrl: z.string().optional(),
+    twitterUrl: z.string().optional(),
+  })
+  .refine((data) => data.userName === data.confirmUserName, {
+    message: "User names must match",
+    path: ["confirmUserName"],
+  });
+
+export type EmployeeFormValues = z.infer<typeof employeeSchema>;
+
+export const employeeDefaultValues: EmployeeFormValues = {
+  firstName: "",
+  middleName: "",
+  lastName: "",
+  email: "",
+  phone: "",
+  jobTitle: "",
+  jobTitleId: null,
+  role: "Technician",
+  status: "Active",
+  hireDate: "",
+  dateOfBirth: "",
+  address: "",
+  department: "Field Service",
+  timeZone: "Eastern Standard Time",
+  gender: "",
+  employeeNumber: "",
+  regionName: "",
+  userName: "",
+  confirmUserName: "",
+  street: "",
+  streetLineTwo: "",
+  city: "",
+  zip: "",
+  country: "US",
+  state: "",
+  county: "",
+  smsAddress: "",
+  website: "",
+  facebookUrl: "",
+  linkedInUrl: "",
+  twitterUrl: "",
+};
diff --git a/src/domain/employees/types/employee.ts b/src/domain/employees/types/employee.ts
new file mode 100644
index 00000000..c281ebae
--- /dev/null
+++ b/src/domain/employees/types/employee.ts
@@ -0,0 +1,57 @@
+export interface EmployeeListItem {
+  id: string | number;
+  name: string;
+  jobTitle: string;
+  email: string;
+  phone: string;
+  department: string;
+  status: string;
+}
+
+export interface Employee {
+  id?: string | number;
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  jobTitle: string;
+  jobTitleId?: number | null;
+  role: string;
+  status: string;
+  hireDate: string;
+  dateOfBirth: string;
+  address: string;
+  department: string;
+  street: string;
+  streetLineTwo: string;
+  city: string;
+  zip: string;
+  country: string;
+  state: string;
+  county: string;
+  timeZone: string;
+  gender: string;
+  employeeNumber: string;
+  regionName: string;
+  userName: string;
+  confirmUserName: string;
+  smsAddress: string;
+  website: string;
+  facebookUrl: string;
+  linkedInUrl: string;
+  twitterUrl: string;
+}
+
+export interface EmployeesListParams {
+  search?: string;
+  page?: number;
+  pageSize?: number;
+}
+
+export interface EmployeesListResult {
+  items: EmployeeListItem[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+}
diff --git a/src/domain/employees/use-cases/use-create-employee.ts b/src/domain/employees/use-cases/use-create-employee.ts
new file mode 100644
index 00000000..dffa333d
--- /dev/null
+++ b/src/domain/employees/use-cases/use-create-employee.ts
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { employeesApi } from "@/domain/employees/api/employees-api";
+import type { EmployeeFormValues } from "@/domain/employees/schemas/employee-schema";
+import type { Employee } from "@/domain/employees/types/employee";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useCreateEmployee(): UseMutationResult<Employee | null, Error, EmployeeFormValues> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (values: EmployeeFormValues) => employeesApi.create(values as Employee),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.employees.all });
+      toast.success("Employee created successfully!");
+      navigate("/employees");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to create employee");
+    },
+  });
+}
diff --git a/src/domain/employees/use-cases/use-delete-employee.ts b/src/domain/employees/use-cases/use-delete-employee.ts
new file mode 100644
index 00000000..2f777834
--- /dev/null
+++ b/src/domain/employees/use-cases/use-delete-employee.ts
@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { employeesApi } from "@/domain/employees/api/employees-api";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDeleteEmployee(): UseMutationResult<void, Error, string | number> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string | number) => employeesApi.delete(id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.employees.all });
+      toast.success("Employee deleted successfully!");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to delete employee");
+    },
+  });
+}
diff --git a/src/domain/employees/use-cases/use-employee-detail.ts b/src/domain/employees/use-cases/use-employee-detail.ts
new file mode 100644
index 00000000..86ad2704
--- /dev/null
+++ b/src/domain/employees/use-cases/use-employee-detail.ts
@@ -0,0 +1,13 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { employeesApi } from "@/domain/employees/api/employees-api";
+import type { Employee } from "@/domain/employees/types/employee";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+export function useEmployeeDetail(id: string | undefined): UseQueryResult<Employee | null, Error> {
+  return useQuery({
+    queryKey: queryKeys.employees.detail(id ?? ""),
+    queryFn: () => employeesApi.getById(requireQueryParam(id, "Employee id")),
+    enabled: Boolean(id),
+  });
+}
diff --git a/src/domain/employees/use-cases/use-employees-list.ts b/src/domain/employees/use-cases/use-employees-list.ts
new file mode 100644
index 00000000..fad4af2f
--- /dev/null
+++ b/src/domain/employees/use-cases/use-employees-list.ts
@@ -0,0 +1,14 @@
+import { keepPreviousData, useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { employeesApi } from "@/domain/employees/api/employees-api";
+import type { EmployeesListParams, EmployeesListResult } from "@/domain/employees/types/employee";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useEmployeesList(
+  params: EmployeesListParams,
+): UseQueryResult<EmployeesListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.employees.list(params as Record<string, unknown>),
+    queryFn: () => employeesApi.getList(params),
+    placeholderData: keepPreviousData,
+  });
+}
diff --git a/src/domain/employees/use-cases/use-update-employee.ts b/src/domain/employees/use-cases/use-update-employee.ts
new file mode 100644
index 00000000..7199832f
--- /dev/null
+++ b/src/domain/employees/use-cases/use-update-employee.ts
@@ -0,0 +1,35 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { employeesApi } from "@/domain/employees/api/employees-api";
+import type { EmployeeFormValues } from "@/domain/employees/schemas/employee-schema";
+import type { Employee } from "@/domain/employees/types/employee";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+interface UpdateEmployeeInput {
+  id: string | number;
+  values: EmployeeFormValues;
+}
+
+export function useUpdateEmployee(): UseMutationResult<
+  Employee | null,
+  Error,
+  UpdateEmployeeInput
+> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, values }: UpdateEmployeeInput) =>
+      employeesApi.update(id, values as Employee),
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.employees.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.employees.detail(variables.id) });
+      toast.success("Employee updated successfully!");
+      navigate("/employees");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update employee");
+    },
+  });
+}
diff --git a/src/domain/follow-ups/api/follow-ups-api.ts b/src/domain/follow-ups/api/follow-ups-api.ts
new file mode 100644
index 00000000..29f45797
--- /dev/null
+++ b/src/domain/follow-ups/api/follow-ups-api.ts
@@ -0,0 +1,66 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiGet, apiPost } from "@/api/api";
+import { handleApiResponse, handlePaginatedResponse } from "@/api/handle-api-response";
+import {
+  mapFollowUp,
+  mapFollowUpListItems,
+  mapFollowUpToBackend,
+} from "@/domain/follow-ups/mappers/follow-up-mapper";
+import type {
+  FollowUp,
+  FollowUpsListParams,
+  FollowUpsListResult,
+} from "@/domain/follow-ups/types/follow-up";
+
+function buildListParams(params: FollowUpsListParams): Record<string, string | number> {
+  return {
+    search: params.search ?? "",
+    page: params.page ?? 1,
+    pageSize: params.pageSize ?? 12,
+    status: params.status ?? "Open",
+  };
+}
+
+export const followUpsApi = {
+  getList: async (params: FollowUpsListParams = {}): Promise<FollowUpsListResult> => {
+    const data = await apiGet<unknown>(API_PATHS.followUp.getList, {
+      searchParams: buildListParams(params),
+    });
+    const paginated = handlePaginatedResponse<unknown>(data, {
+      page: params.page,
+      pageSize: params.pageSize,
+    });
+    return {
+      items: mapFollowUpListItems(paginated.items),
+      totalCount: paginated.totalCount,
+      page: paginated.page,
+      pageSize: paginated.pageSize,
+    };
+  },
+
+  getById: async (id: string | number): Promise<FollowUp> => {
+    const data = await apiGet<unknown>(API_PATHS.followUp.getById, {
+      searchParams: { id: String(id) },
+    });
+    return mapFollowUp(handleApiResponse(data));
+  },
+
+  create: async (payload: unknown): Promise<FollowUp> => {
+    const data = await apiPost<unknown>(API_PATHS.followUp.create, mapFollowUpToBackend(payload));
+    return mapFollowUp(handleApiResponse(data));
+  },
+
+  update: async (id: string | number, payload: unknown): Promise<FollowUp> => {
+    const data = await apiPost<unknown>(
+      API_PATHS.followUp.update,
+      mapFollowUpToBackend(payload, id),
+    );
+    return mapFollowUp(handleApiResponse(data));
+  },
+
+  delete: async (id: string | number): Promise<void> => {
+    await apiPost<unknown>(API_PATHS.followUp.delete, undefined, {
+      searchParams: { id: String(id) },
+    });
+  },
+};
diff --git a/src/domain/follow-ups/mappers/follow-up-mapper.ts b/src/domain/follow-ups/mappers/follow-up-mapper.ts
new file mode 100644
index 00000000..2855b32b
--- /dev/null
+++ b/src/domain/follow-ups/mappers/follow-up-mapper.ts
@@ -0,0 +1,98 @@
+import type { FollowUp, FollowUpListItem } from "@/domain/follow-ups/types/follow-up";
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") return value;
+    if (typeof value === "number") return String(value);
+  }
+  return "";
+}
+
+function readId(record: Record<string, unknown>): string | number {
+  const value = record.id ?? record.Id;
+  if (typeof value === "string" || typeof value === "number") return value;
+  return "";
+}
+
+function readNullableId(
+  record: Record<string, unknown>,
+  ...keys: string[]
+): string | number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" || typeof value === "number") return value;
+  }
+  return null;
+}
+
+function normalizeTime(value: string): string {
+  if (!value) return "09:00";
+  const match = value.match(/^(\d{2}:\d{2})/);
+  return match ? match[1] : "09:00";
+}
+
+export function mapFollowUpListItem(raw: unknown): FollowUpListItem {
+  const item = asRecord(raw);
+  return {
+    id: readId(item),
+    reason: readString(item, "reason", "Reason"),
+    scheduleDate: readString(item, "scheduleDate", "ScheduleDate"),
+    scheduleStartTime: readString(item, "scheduleStartTime", "ScheduleStartTime"),
+    employeeId: readNullableId(item, "employeeId", "EmployeeId"),
+    workOrderId: readNullableId(item, "workOrderId", "WorkOrderId"),
+    accountId: readNullableId(item, "accountId", "AccountId"),
+    locationId: readNullableId(item, "locationId", "LocationId"),
+    accountName: readString(item, "accountName", "AccountName"),
+    assignedTo: readString(item, "assignedTo", "AssignedTo"),
+    locationName: readString(item, "locationName", "LocationName"),
+    workOrderNumber: readString(item, "workOrderNumber", "WorkOrderNumber"),
+    internalWONumber: readString(item, "internalWONumber", "InternalWONumber"),
+    status: readString(item, "status", "Status"),
+    createdDate: readString(item, "createdDate", "CreatedDate"),
+    createdByName: readString(item, "createdByName", "CreatedByName"),
+  };
+}
+
+export function mapFollowUpListItems(rawItems: unknown[]): FollowUpListItem[] {
+  return rawItems.map(mapFollowUpListItem);
+}
+
+export function mapFollowUp(raw: unknown): FollowUp {
+  const item = asRecord(raw);
+  return {
+    id: readId(item) || undefined,
+    reason: readString(item, "reason", "Reason"),
+    scheduleDate: readString(item, "scheduleDate", "ScheduleDate").slice(0, 10),
+    scheduleStartTime: normalizeTime(readString(item, "scheduleStartTime", "ScheduleStartTime")),
+    employeeId: readNullableId(item, "employeeId", "EmployeeId"),
+    accountId: readNullableId(item, "accountId", "AccountId"),
+    locationId: readNullableId(item, "locationId", "LocationId"),
+    workOrderId: readNullableId(item, "workOrderId", "WorkOrderId"),
+    status: readString(item, "status", "Status") || undefined,
+  };
+}
+
+/** Unified MVC payload — Create and Update share the same shape. */
+export function mapFollowUpToBackend(
+  followUp: unknown,
+  id?: string | number,
+): Record<string, unknown> {
+  const item = asRecord(followUp);
+  const time = normalizeTime(readString(item, "scheduleStartTime", "ScheduleStartTime"));
+
+  return {
+    Id: id ? Number(id) : 0,
+    Reason: item.reason ?? "",
+    ScheduleDate: item.scheduleDate ?? "",
+    ScheduleStartTime: `${time}:00`,
+    EmployeeId: item.employeeId ? Number(item.employeeId) : null,
+    AccountId: item.accountId ? Number(item.accountId) : null,
+    LocationId: item.locationId ? Number(item.locationId) : null,
+    WorkOrderId: item.workOrderId ? Number(item.workOrderId) : null,
+  };
+}
diff --git a/src/domain/follow-ups/schemas/follow-up-schema.ts b/src/domain/follow-ups/schemas/follow-up-schema.ts
new file mode 100644
index 00000000..5b5f2c20
--- /dev/null
+++ b/src/domain/follow-ups/schemas/follow-up-schema.ts
@@ -0,0 +1,15 @@
+import { z } from "zod";
+
+const optionalId = z.union([z.string(), z.number()]).nullable().optional();
+
+export const followUpSchema = z.object({
+  reason: z.string().min(1, "Reason is required"),
+  scheduleDate: z.string().min(1, "Schedule date is required"),
+  scheduleStartTime: z.string().min(1, "Start time is required"),
+  employeeId: optionalId,
+  accountId: optionalId,
+  locationId: optionalId,
+  workOrderId: optionalId,
+});
+
+export type FollowUpFormValues = z.infer<typeof followUpSchema>;
diff --git a/src/domain/follow-ups/types/follow-up.ts b/src/domain/follow-ups/types/follow-up.ts
new file mode 100644
index 00000000..ce0b5fd6
--- /dev/null
+++ b/src/domain/follow-ups/types/follow-up.ts
@@ -0,0 +1,44 @@
+export interface FollowUpListItem {
+  id: string | number;
+  reason: string;
+  scheduleDate: string;
+  scheduleStartTime: string;
+  employeeId: string | number | null;
+  workOrderId: string | number | null;
+  accountId: string | number | null;
+  locationId: string | number | null;
+  accountName: string;
+  assignedTo: string;
+  locationName: string;
+  workOrderNumber: string;
+  internalWONumber: string;
+  status: string;
+  createdDate: string;
+  createdByName: string;
+}
+
+export interface FollowUp {
+  id?: string | number;
+  reason: string;
+  scheduleDate: string;
+  scheduleStartTime: string;
+  employeeId: string | number | null;
+  accountId: string | number | null;
+  locationId: string | number | null;
+  workOrderId: string | number | null;
+  status?: string;
+}
+
+export interface FollowUpsListParams {
+  search?: string;
+  page?: number;
+  pageSize?: number;
+  status?: string;
+}
+
+export interface FollowUpsListResult {
+  items: FollowUpListItem[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+}
diff --git a/src/domain/follow-ups/use-cases/use-create-follow-up.ts b/src/domain/follow-ups/use-cases/use-create-follow-up.ts
new file mode 100644
index 00000000..591dd86d
--- /dev/null
+++ b/src/domain/follow-ups/use-cases/use-create-follow-up.ts
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { followUpsApi } from "@/domain/follow-ups/api/follow-ups-api";
+import type { FollowUpFormValues } from "@/domain/follow-ups/schemas/follow-up-schema";
+import type { FollowUp } from "@/domain/follow-ups/types/follow-up";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useCreateFollowUp(): UseMutationResult<FollowUp, Error, FollowUpFormValues> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (values: FollowUpFormValues) => followUpsApi.create(values),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.followUps.all });
+      toast.success("Follow-up created successfully!");
+      navigate("/followups");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to create follow-up");
+    },
+  });
+}
diff --git a/src/domain/follow-ups/use-cases/use-delete-follow-up.ts b/src/domain/follow-ups/use-cases/use-delete-follow-up.ts
new file mode 100644
index 00000000..ea5f98da
--- /dev/null
+++ b/src/domain/follow-ups/use-cases/use-delete-follow-up.ts
@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { followUpsApi } from "@/domain/follow-ups/api/follow-ups-api";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDeleteFollowUp(): UseMutationResult<void, Error, string | number> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string | number) => followUpsApi.delete(id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.followUps.all });
+      toast.success("Follow-up deleted");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to delete follow-up");
+    },
+  });
+}
diff --git a/src/domain/follow-ups/use-cases/use-follow-up-detail.ts b/src/domain/follow-ups/use-cases/use-follow-up-detail.ts
new file mode 100644
index 00000000..61d1b401
--- /dev/null
+++ b/src/domain/follow-ups/use-cases/use-follow-up-detail.ts
@@ -0,0 +1,13 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { followUpsApi } from "@/domain/follow-ups/api/follow-ups-api";
+import type { FollowUp } from "@/domain/follow-ups/types/follow-up";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+export function useFollowUpDetail(id: string | undefined): UseQueryResult<FollowUp, Error> {
+  return useQuery({
+    queryKey: queryKeys.followUps.detail(id ?? ""),
+    queryFn: () => followUpsApi.getById(requireQueryParam(id, "Follow-up id")),
+    enabled: Boolean(id),
+  });
+}
diff --git a/src/domain/follow-ups/use-cases/use-follow-ups-list.ts b/src/domain/follow-ups/use-cases/use-follow-ups-list.ts
new file mode 100644
index 00000000..fd2f1d54
--- /dev/null
+++ b/src/domain/follow-ups/use-cases/use-follow-ups-list.ts
@@ -0,0 +1,14 @@
+import { keepPreviousData, useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { followUpsApi } from "@/domain/follow-ups/api/follow-ups-api";
+import type { FollowUpsListParams, FollowUpsListResult } from "@/domain/follow-ups/types/follow-up";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useFollowUpsList(
+  params: FollowUpsListParams,
+): UseQueryResult<FollowUpsListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.followUps.list(params as Record<string, unknown>),
+    queryFn: () => followUpsApi.getList(params),
+    placeholderData: keepPreviousData,
+  });
+}
diff --git a/src/domain/follow-ups/use-cases/use-update-follow-up.ts b/src/domain/follow-ups/use-cases/use-update-follow-up.ts
new file mode 100644
index 00000000..c1e53dd5
--- /dev/null
+++ b/src/domain/follow-ups/use-cases/use-update-follow-up.ts
@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { followUpsApi } from "@/domain/follow-ups/api/follow-ups-api";
+import type { FollowUpFormValues } from "@/domain/follow-ups/schemas/follow-up-schema";
+import type { FollowUp } from "@/domain/follow-ups/types/follow-up";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+interface UpdateFollowUpInput {
+  id: string | number;
+  values: FollowUpFormValues;
+}
+
+export function useUpdateFollowUp(): UseMutationResult<FollowUp, Error, UpdateFollowUpInput> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, values }: UpdateFollowUpInput) => followUpsApi.update(id, values),
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.followUps.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.followUps.detail(variables.id) });
+      toast.success("Follow-up updated successfully!");
+      navigate("/followups");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update follow-up");
+    },
+  });
+}
diff --git a/src/domain/locations/api/locations-api.ts b/src/domain/locations/api/locations-api.ts
new file mode 100644
index 00000000..2f9f1376
--- /dev/null
+++ b/src/domain/locations/api/locations-api.ts
@@ -0,0 +1,77 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiDelete, apiGet, apiPost, apiPut } from "@/api/api";
+import { handleApiResponse, handlePaginatedResponse } from "@/api/handle-api-response";
+import {
+  mapLocation,
+  mapLocationListItems,
+  mapLocationSites,
+  mapLocationToBackend,
+} from "@/domain/locations/mappers/location-mapper";
+import type {
+  Location,
+  LocationSite,
+  LocationsListParams,
+  LocationsListResult,
+} from "@/domain/locations/types/location";
+
+function buildSearchParams(params: LocationsListParams): Record<string, string | number> {
+  const searchParams: Record<string, string | number> = {
+    search: params.search ?? "",
+    page: params.page ?? 1,
+    pageSize: params.pageSize ?? 12,
+  };
+
+  if (params.states && params.states.length > 0) {
+    searchParams.states = params.states.join(",");
+  }
+
+  return searchParams;
+}
+
+export const locationsApi = {
+  getList: async (params: LocationsListParams = {}): Promise<LocationsListResult> => {
+    const searchParams = buildSearchParams(params);
+    const data = await apiGet<unknown>(API_PATHS.location.getList, { searchParams });
+    const paginated = handlePaginatedResponse<unknown>(data, {
+      page: params.page,
+      pageSize: params.pageSize,
+    });
+
+    return {
+      items: mapLocationListItems(paginated.items),
+      totalCount: paginated.totalCount,
+      page: paginated.page,
+      pageSize: paginated.pageSize,
+    };
+  },
+
+  getById: async (id: string | number): Promise<Location> => {
+    const data = await apiGet<unknown>(`${API_PATHS.rest.locations}/${id}`);
+    return mapLocation(handleApiResponse(data));
+  },
+
+  getSites: async (search?: string): Promise<LocationSite[]> => {
+    const data = await apiGet<unknown>(API_PATHS.location.sites, {
+      searchParams: search?.trim() ? { search: search.trim() } : undefined,
+    });
+    const items = handleApiResponse<unknown[]>(data);
+    return Array.isArray(items) ? mapLocationSites(items) : [];
+  },
+
+  create: async (payload: unknown): Promise<Location> => {
+    const data = await apiPost<unknown>(API_PATHS.rest.locations, mapLocationToBackend(payload));
+    return mapLocation(handleApiResponse(data));
+  },
+
+  update: async (id: string | number, payload: unknown): Promise<Location> => {
+    const data = await apiPut<unknown>(
+      `${API_PATHS.rest.locations}/${id}`,
+      mapLocationToBackend(payload),
+    );
+    return mapLocation(handleApiResponse(data));
+  },
+
+  delete: async (id: string | number): Promise<void> => {
+    await apiDelete<unknown>(`${API_PATHS.rest.locations}/${id}`);
+  },
+};
diff --git a/src/domain/locations/mappers/location-mapper.ts b/src/domain/locations/mappers/location-mapper.ts
new file mode 100644
index 00000000..6713c559
--- /dev/null
+++ b/src/domain/locations/mappers/location-mapper.ts
@@ -0,0 +1,228 @@
+import type {
+  Location,
+  LocationContact,
+  LocationListItem,
+  LocationSite,
+} from "@/domain/locations/types/location";
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+  }
+  return "";
+}
+
+function readId(record: Record<string, unknown>): string | number {
+  const value = record.id ?? record.Id;
+  if (typeof value === "string" || typeof value === "number") {
+    return value;
+  }
+  return "";
+}
+
+function readOptionalId(record: Record<string, unknown>): string | number {
+  const value = record.accountId ?? record.AccountId;
+  if (typeof value === "string" || typeof value === "number") {
+    return value;
+  }
+  return "";
+}
+
+export function formatLocationSiteLabel(
+  site: Pick<LocationSite, "code" | "city" | "state">,
+): string {
+  const place = [site.city, site.state].filter(Boolean).join(", ");
+  if (site.code && place) {
+    return `${site.code} · ${place}`;
+  }
+  return site.code || place || "";
+}
+
+/** Table cell label: `BK5 . Dallas, TX` (period separator). */
+export function formatSiteTableLabel(params: {
+  code?: string;
+  city?: string;
+  state?: string;
+  fallbackLocation?: string;
+}): string {
+  const code = params.code?.trim() ?? "";
+  const place =
+    [params.city, params.state].filter(Boolean).join(", ") ||
+    (params.fallbackLocation?.trim() ?? "");
+  if (code && place) {
+    return `${code} . ${place}`;
+  }
+  return code || place || "";
+}
+
+export function formatSitePlace(city?: string, state?: string, fallbackLocation = ""): string {
+  return [city, state].filter(Boolean).join(", ") || fallbackLocation.trim() || "";
+}
+
+/** Wizard preview: `3811 Distribution Dr, Dallas, TX 70068` */
+export function formatLocationAddressPreview(
+  location: Pick<Location, "address" | "city" | "state" | "zipCode">,
+): string {
+  const street = location.address?.trim() ?? "";
+  const city = location.city?.trim() ?? "";
+  const stateZip = [location.state?.trim(), location.zipCode?.trim()].filter(Boolean).join(" ");
+  const cityStateZip = [city, stateZip].filter(Boolean).join(", ");
+
+  if (street && cityStateZip) {
+    return `${street}, ${cityStateZip}`;
+  }
+  return street || cityStateZip || "";
+}
+
+export function mapLocationSite(raw: unknown): LocationSite {
+  const item = (typeof raw === "object" && raw !== null ? raw : {}) as Record<string, unknown>;
+
+  return {
+    id: readId(item),
+    code: readString(item, "code", "Code", "siteCode", "SiteCode"),
+    city: readString(item, "city", "City"),
+    state: readString(item, "state", "State"),
+  };
+}
+
+export function mapLocationSites(rawItems: unknown[]): LocationSite[] {
+  return rawItems.map(mapLocationSite);
+}
+
+/** Reads the additive contacts array; returns [] when absent or malformed. */
+export function mapLocationContacts(raw: unknown): LocationContact[] {
+  if (!Array.isArray(raw)) {
+    return [];
+  }
+  return raw.map((entry) => {
+    const item = (typeof entry === "object" && entry !== null ? entry : {}) as Record<
+      string,
+      unknown
+    >;
+    const id = item.id ?? item.Id;
+    return {
+      ...(typeof id === "number" && Number.isInteger(id) && id > 0 ? { id } : {}),
+      name: readString(item, "name", "Name", "contact", "Contact"),
+      phone: readString(item, "phone", "Phone"),
+    };
+  });
+}
+
+export function mapLocationListItem(raw: unknown): LocationListItem {
+  const item = (typeof raw === "object" && raw !== null ? raw : {}) as Record<string, unknown>;
+
+  const contacts = mapLocationContacts(item.contacts ?? item.Contacts);
+  const mainContact = contacts[0];
+
+  return {
+    id: readId(item),
+    name: readString(item, "name", "Name"),
+    address: readString(item, "address", "Address"),
+    city: readString(item, "city", "City"),
+    state: readString(item, "state", "State"),
+    zipCode: readString(item, "zipCode", "ZipCode", "Zip"),
+    phone: mainContact ? mainContact.phone : readString(item, "phone", "Phone"),
+    contact: mainContact
+      ? mainContact.name
+      : readString(item, "contact", "Contact", "contactPerson", "ContactPerson"),
+    contactEmail: readString(item, "contactEmail", "ContactEmail"),
+    status: readString(item, "status", "Status"),
+    accountId: readOptionalId(item),
+    contacts: contacts.length > 0 ? contacts : undefined,
+  };
+}
+
+export function mapLocationListItems(rawItems: unknown[]): LocationListItem[] {
+  return rawItems.map(mapLocationListItem);
+}
+
+export function mapLocation(raw: unknown): Location {
+  const item = (typeof raw === "object" && raw !== null ? raw : {}) as Record<string, unknown>;
+
+  const address =
+    readString(item, "address", "Address") ||
+    [readString(item, "address1", "Address1"), readString(item, "address2", "Address2")]
+      .filter(Boolean)
+      .join(", ") ||
+    undefined;
+
+  const contacts = mapLocationContacts(item.contacts ?? item.Contacts);
+  const mainContact = contacts[0];
+  const legacyPhone = readString(item, "phone", "Phone") || undefined;
+  const legacyContact =
+    readString(item, "contact", "Contact", "contactPerson", "ContactPerson") || undefined;
+
+  return {
+    id: readId(item) || undefined,
+    name: readString(item, "name", "Name") || undefined,
+    address: address || undefined,
+    city: readString(item, "city", "City") || undefined,
+    state: readString(item, "state", "State") || undefined,
+    zipCode: readString(item, "zipCode", "ZipCode", "Zip") || undefined,
+    phone: mainContact ? mainContact.phone : legacyPhone,
+    contact: mainContact ? mainContact.name : legacyContact,
+    contactEmail: readString(item, "contactEmail", "ContactEmail") || undefined,
+    status: readString(item, "status", "Status") || undefined,
+    accountId: readOptionalId(item) || undefined,
+    contacts: contacts.length > 0 ? contacts : undefined,
+  };
+}
+
+/** Request payload contacts: trimmed, in displayed order. */
+export function mapContactsToBackend(raw: unknown): LocationContact[] {
+  if (!Array.isArray(raw)) {
+    return [];
+  }
+  return raw
+    .map((entry) => {
+      const item = (typeof entry === "object" && entry !== null ? entry : {}) as Record<
+        string,
+        unknown
+      >;
+      return {
+        ...(typeof item.id === "number" && Number.isInteger(item.id) && item.id > 0
+          ? { id: item.id }
+          : {}),
+        name: readString(item, "name", "Name", "contact", "Contact").trim(),
+        phone: readString(item, "phone", "Phone").trim(),
+      };
+    })
+    .filter((contact) => contact.name !== "" || contact.phone !== "");
+}
+
+export function mapLocationToBackend(location: unknown): Record<string, unknown> {
+  const item = (typeof location === "object" && location !== null ? location : {}) as Record<
+    string,
+    unknown
+  >;
+
+  const contacts = mapContactsToBackend(item.contacts ?? item.Contacts);
+  const mainContact = contacts[0];
+
+  const payload: Record<string, unknown> = {
+    name: item.name ?? "",
+    address: item.address ?? "",
+    city: item.city ?? "",
+    state: item.state ?? "",
+    zipCode: item.zipCode ?? "",
+    phone: mainContact ? mainContact.phone : (item.phone ?? ""),
+    contact: mainContact ? mainContact.name : (item.contact ?? ""),
+    contactEmail: item.contactEmail ?? "",
+    status: item.status ?? "Active",
+    accountId: item.accountId ?? "",
+    contacts,
+  };
+
+  const id = item.id ?? item.Id;
+  if (typeof id === "string" || typeof id === "number") {
+    payload.id = id;
+  }
+
+  return payload;
+}
diff --git a/src/domain/locations/schemas/location-schema.ts b/src/domain/locations/schemas/location-schema.ts
new file mode 100644
index 00000000..7c9e878c
--- /dev/null
+++ b/src/domain/locations/schemas/location-schema.ts
@@ -0,0 +1,42 @@
+import { z } from "zod";
+import { US_STATE_CODES } from "@/data/areas";
+import { LOCATION_STATUS_OPTIONS } from "@/domain/locations/types/location";
+
+export const locationContactSchema = z.object({
+  id: z.number().int().positive().optional(),
+  name: z
+    .string()
+    .trim()
+    .min(1, "Contact person is required")
+    .max(100, "Contact person cannot exceed 100 characters"),
+  phone: z.string().trim().min(1, "Phone is required").max(20, "Phone cannot exceed 20 characters"),
+});
+
+export const locationSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  accountId: z.string().optional(),
+  address: z.string().min(1, "Address is required"),
+  city: z.string().min(1, "City is required"),
+  state: z
+    .union([z.enum(US_STATE_CODES), z.literal("")])
+    .refine((state): boolean => state !== "", { message: "State is required" }),
+  zipCode: z.string().min(1, "Zip code is required"),
+  contacts: z.array(locationContactSchema).min(1, "At least one contact is required"),
+  contactEmail: z.string().min(1, "Contact email is required").email("Invalid email address"),
+  status: z.enum(LOCATION_STATUS_OPTIONS, { message: "Status is required" }),
+});
+
+export type LocationFormValues = z.infer<typeof locationSchema>;
+export type LocationContactFormValues = z.infer<typeof locationContactSchema>;
+
+export const locationDefaultValues: LocationFormValues = {
+  name: "",
+  accountId: "",
+  address: "",
+  city: "",
+  state: "",
+  zipCode: "",
+  contacts: [{ name: "", phone: "" }],
+  contactEmail: "",
+  status: "Active",
+};
diff --git a/src/domain/locations/types/location.ts b/src/domain/locations/types/location.ts
new file mode 100644
index 00000000..7fa99625
--- /dev/null
+++ b/src/domain/locations/types/location.ts
@@ -0,0 +1,65 @@
+import type { StateCode } from "@/data/areas";
+
+/** Site contact row; the first entry in `contacts` is the Main contact. */
+export interface LocationContact {
+  id?: number;
+  name: string;
+  phone: string;
+}
+
+export interface LocationListItem {
+  id: string | number;
+  name: string;
+  address: string;
+  city: string;
+  state: string;
+  zipCode: string;
+  phone: string;
+  contact: string;
+  contactEmail: string;
+  status: string;
+  accountId: string | number;
+  /** Additive contacts payload; `contact`/`phone` mirror the first entry. */
+  contacts?: LocationContact[];
+}
+
+export interface Location {
+  id?: string | number;
+  name?: string;
+  address?: string;
+  city?: string;
+  state?: string;
+  zipCode?: string;
+  phone?: string;
+  contact?: string;
+  contactEmail?: string;
+  status?: string;
+  accountId?: string | number;
+  /** Additive contacts payload; the first entry is the Main contact. */
+  contacts?: LocationContact[];
+}
+
+/** Site option from GET locations/sites (wizard / board create). */
+export interface LocationSite {
+  id: string | number;
+  code: string;
+  city: string;
+  state: string;
+}
+
+export interface LocationsListParams {
+  search?: string;
+  page?: number;
+  pageSize?: number;
+  /** State codes to filter by (area expansion); omitted from the query when empty. */
+  states?: StateCode[];
+}
+
+export interface LocationsListResult {
+  items: LocationListItem[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+}
+
+export const LOCATION_STATUS_OPTIONS = ["Active", "Inactive", "Closed"] as const;
diff --git a/src/domain/locations/use-cases/use-create-location.ts b/src/domain/locations/use-cases/use-create-location.ts
new file mode 100644
index 00000000..421de42c
--- /dev/null
+++ b/src/domain/locations/use-cases/use-create-location.ts
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { locationsApi } from "@/domain/locations/api/locations-api";
+import type { LocationFormValues } from "@/domain/locations/schemas/location-schema";
+import type { Location } from "@/domain/locations/types/location";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useCreateLocation(): UseMutationResult<Location, Error, LocationFormValues> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (values: LocationFormValues) => locationsApi.create(values),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.locations.all });
+      toast.success("Location created successfully!");
+      navigate("/locations");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to create location");
+    },
+  });
+}
diff --git a/src/domain/locations/use-cases/use-delete-location.ts b/src/domain/locations/use-cases/use-delete-location.ts
new file mode 100644
index 00000000..4e710337
--- /dev/null
+++ b/src/domain/locations/use-cases/use-delete-location.ts
@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { locationsApi } from "@/domain/locations/api/locations-api";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDeleteLocation(): UseMutationResult<void, Error, string | number> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string | number) => locationsApi.delete(id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.locations.all });
+      toast.success("Location deleted successfully!");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to delete location");
+    },
+  });
+}
diff --git a/src/domain/locations/use-cases/use-location-detail.ts b/src/domain/locations/use-cases/use-location-detail.ts
new file mode 100644
index 00000000..2a5bb45d
--- /dev/null
+++ b/src/domain/locations/use-cases/use-location-detail.ts
@@ -0,0 +1,13 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { locationsApi } from "@/domain/locations/api/locations-api";
+import type { Location } from "@/domain/locations/types/location";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+export function useLocationDetail(id: string | undefined): UseQueryResult<Location, Error> {
+  return useQuery({
+    queryKey: queryKeys.locations.detail(id ?? ""),
+    queryFn: () => locationsApi.getById(requireQueryParam(id, "Location id")),
+    enabled: Boolean(id),
+  });
+}
diff --git a/src/domain/locations/use-cases/use-location-sites.ts b/src/domain/locations/use-cases/use-location-sites.ts
new file mode 100644
index 00000000..d729039a
--- /dev/null
+++ b/src/domain/locations/use-cases/use-location-sites.ts
@@ -0,0 +1,23 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { locationsApi } from "@/domain/locations/api/locations-api";
+import { formatLocationSiteLabel } from "@/domain/locations/mappers/location-mapper";
+import type { LocationOption } from "@/domain/work-orders/types/work-order-common";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+/** Sites for WO board wizard (`GET locations/sites`), mapped to LocationOption. */
+export function useLocationSites(search = ""): UseQueryResult<LocationOption[], Error> {
+  return useQuery({
+    queryKey: queryKeys.locations.sites(search),
+    queryFn: async () => {
+      const sites = await locationsApi.getSites(search || undefined);
+      return sites.map((site): LocationOption => ({
+        id: site.id,
+        name: formatLocationSiteLabel(site),
+        siteCode: site.code,
+        city: site.city,
+        state: site.state,
+      }));
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+}
diff --git a/src/domain/locations/use-cases/use-locations-list.ts b/src/domain/locations/use-cases/use-locations-list.ts
new file mode 100644
index 00000000..5bb16060
--- /dev/null
+++ b/src/domain/locations/use-cases/use-locations-list.ts
@@ -0,0 +1,14 @@
+import { keepPreviousData, useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { locationsApi } from "@/domain/locations/api/locations-api";
+import type { LocationsListParams, LocationsListResult } from "@/domain/locations/types/location";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useLocationsList(
+  params: LocationsListParams,
+): UseQueryResult<LocationsListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.locations.list(params as Record<string, unknown>),
+    queryFn: () => locationsApi.getList(params),
+    placeholderData: keepPreviousData,
+  });
+}
diff --git a/src/domain/locations/use-cases/use-update-location.ts b/src/domain/locations/use-cases/use-update-location.ts
new file mode 100644
index 00000000..02e271c6
--- /dev/null
+++ b/src/domain/locations/use-cases/use-update-location.ts
@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { locationsApi } from "@/domain/locations/api/locations-api";
+import type { LocationFormValues } from "@/domain/locations/schemas/location-schema";
+import type { Location } from "@/domain/locations/types/location";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+interface UpdateLocationInput {
+  id: string | number;
+  values: LocationFormValues;
+}
+
+export function useUpdateLocation(): UseMutationResult<Location, Error, UpdateLocationInput> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, values }: UpdateLocationInput) => locationsApi.update(id, values),
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.locations.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.locations.detail(variables.id) });
+      toast.success("Location updated successfully!");
+      navigate("/locations");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update location");
+    },
+  });
+}
diff --git a/src/domain/pm-schedules/api/pm-schedules-api.ts b/src/domain/pm-schedules/api/pm-schedules-api.ts
new file mode 100644
index 00000000..febe37e8
--- /dev/null
+++ b/src/domain/pm-schedules/api/pm-schedules-api.ts
@@ -0,0 +1,69 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiGet, apiPostNoContent } from "@/api/api";
+import { handleApiResponse } from "@/api/handle-api-response";
+import {
+  mapPmSchedule,
+  mapPmScheduleListItem,
+  mapPmScheduleToSavePayload,
+} from "@/domain/pm-schedules/mappers/pm-schedule-mapper";
+import type {
+  PmSchedule,
+  PmSchedulesListParams,
+  PmSchedulesListResult,
+} from "@/domain/pm-schedules/types/pm-schedule";
+
+function filterBySearch(items: ReturnType<typeof mapPmScheduleListItem>[], search: string) {
+  const term = search.trim().toLowerCase();
+  if (!term) {
+    return items;
+  }
+
+  return items.filter((item) =>
+    [item.name, item.frequency, item.asset, item.location].join(" ").toLowerCase().includes(term),
+  );
+}
+
+function paginateClientSide<T>(items: T[], page: number, pageSize: number) {
+  const start = (page - 1) * pageSize;
+  return items.slice(start, start + pageSize);
+}
+
+export const pmSchedulesApi = {
+  /** Backend GetList returns a full array (no server pagination). */
+  getList: async (params: PmSchedulesListParams = {}): Promise<PmSchedulesListResult> => {
+    const page = params.page ?? 1;
+    const pageSize = params.pageSize ?? 12;
+
+    const data = await apiGet<unknown>(API_PATHS.pmSchedule.getList);
+    const rawItems = handleApiResponse<unknown[]>(data);
+    const allItems = Array.isArray(rawItems) ? rawItems.map(mapPmScheduleListItem) : [];
+    const filtered = filterBySearch(allItems, params.search ?? "");
+    const items = paginateClientSide(filtered, page, pageSize);
+
+    return {
+      items,
+      totalCount: filtered.length,
+      page,
+      pageSize,
+    };
+  },
+
+  getById: async (id: string | number): Promise<PmSchedule> => {
+    const data = await apiGet<unknown>(API_PATHS.pmSchedule.getById, {
+      searchParams: { id },
+    });
+    return mapPmSchedule(handleApiResponse(data));
+  },
+
+  /** Create and update both use PMSchedule/Save — Id=0 for create. */
+  save: async (schedule: Partial<PmSchedule> & { id?: number }): Promise<void> => {
+    const payload = mapPmScheduleToSavePayload(schedule);
+    await apiPostNoContent(API_PATHS.pmSchedule.save, payload);
+  },
+
+  delete: async (id: string | number): Promise<void> => {
+    await apiPostNoContent(API_PATHS.pmSchedule.delete, undefined, {
+      searchParams: { id },
+    });
+  },
+};
diff --git a/src/domain/pm-schedules/mappers/pm-schedule-mapper.ts b/src/domain/pm-schedules/mappers/pm-schedule-mapper.ts
new file mode 100644
index 00000000..d77158a1
--- /dev/null
+++ b/src/domain/pm-schedules/mappers/pm-schedule-mapper.ts
@@ -0,0 +1,103 @@
+import type {
+  PmSchedule,
+  PmScheduleListItem,
+  PmScheduleSavePayload,
+} from "@/domain/pm-schedules/types/pm-schedule";
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+    if (value instanceof Date) {
+      return value.toISOString();
+    }
+  }
+  return "";
+}
+
+function readNumber(record: Record<string, unknown>, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number") {
+      return value;
+    }
+    if (typeof value === "string" && value !== "") {
+      const parsed = Number(value);
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
+    }
+  }
+  return null;
+}
+
+function readBoolean(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") {
+      return value;
+    }
+  }
+  return true;
+}
+
+function toDateOnly(value: string): string {
+  if (!value) {
+    return "";
+  }
+  return value.split("T")[0] ?? value;
+}
+
+export function mapPmScheduleListItem(raw: unknown): PmScheduleListItem {
+  const record = isRecord(raw) ? raw : {};
+
+  return {
+    id: readNumber(record, "id", "Id") ?? 0,
+    name: readString(record, "name", "Name"),
+    frequency: readString(record, "frequency", "Frequency"),
+    startDate: toDateOnly(readString(record, "startDate", "StartDate")),
+    isActive: readBoolean(record, "isActive", "IsActive"),
+    asset: readString(record, "asset", "Asset"),
+    location: readString(record, "location", "Location"),
+  };
+}
+
+export function mapPmSchedule(raw: unknown): PmSchedule {
+  const record = isRecord(raw) ? raw : {};
+  const listItem = mapPmScheduleListItem(raw);
+
+  return {
+    id: listItem.id,
+    name: listItem.name,
+    frequency: listItem.frequency || "Quarterly",
+    startDate: listItem.startDate,
+    isActive: listItem.isActive,
+    assetId: readNumber(record, "assetId", "AssetId"),
+    locationId: readNumber(record, "locationId", "LocationId"),
+    asset: listItem.asset,
+    location: listItem.location,
+  };
+}
+
+export function mapPmScheduleToSavePayload(
+  schedule: Partial<PmSchedule> & { id?: number },
+): PmScheduleSavePayload {
+  const startDate = schedule.startDate ?? "";
+  const isoStartDate = startDate.includes("T") ? startDate : `${startDate}T00:00:00`;
+
+  return {
+    Id: schedule.id ?? 0,
+    Name: schedule.name ?? "",
+    Frequency: schedule.frequency ?? "Quarterly",
+    StartDate: isoStartDate,
+    IsActive: schedule.isActive ?? true,
+    AssetId: schedule.assetId ?? null,
+    LocationId: schedule.locationId ?? null,
+  };
+}
diff --git a/src/domain/pm-schedules/schemas/pm-schedule-schema.ts b/src/domain/pm-schedules/schemas/pm-schedule-schema.ts
new file mode 100644
index 00000000..f214881a
--- /dev/null
+++ b/src/domain/pm-schedules/schemas/pm-schedule-schema.ts
@@ -0,0 +1,21 @@
+import { z } from "zod";
+
+export const pmScheduleSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  frequency: z.enum(["Daily", "Weekly", "Monthly", "Quarterly", "Semi-Annual", "Annual"]),
+  startDate: z.string().min(1, "Start date is required"),
+  isActive: z.boolean(),
+  assetId: z.number().nullable(),
+  locationId: z.number().nullable(),
+});
+
+export type PmScheduleFormValues = z.infer<typeof pmScheduleSchema>;
+
+export const pmScheduleDefaultValues: PmScheduleFormValues = {
+  name: "",
+  frequency: "Quarterly",
+  startDate: "",
+  isActive: true,
+  assetId: null,
+  locationId: null,
+};
diff --git a/src/domain/pm-schedules/types/pm-schedule.ts b/src/domain/pm-schedules/types/pm-schedule.ts
new file mode 100644
index 00000000..22af87f9
--- /dev/null
+++ b/src/domain/pm-schedules/types/pm-schedule.ts
@@ -0,0 +1,44 @@
+export interface PmScheduleListItem {
+  id: number;
+  name: string;
+  frequency: string;
+  startDate: string;
+  isActive: boolean;
+  asset: string;
+  location: string;
+}
+
+export interface PmSchedule {
+  id: number;
+  name: string;
+  frequency: string;
+  startDate: string;
+  isActive: boolean;
+  assetId: number | null;
+  locationId: number | null;
+  asset: string;
+  location: string;
+}
+
+export interface PmSchedulesListParams {
+  search?: string;
+  page?: number;
+  pageSize?: number;
+}
+
+export interface PmSchedulesListResult {
+  items: PmScheduleListItem[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+}
+
+export interface PmScheduleSavePayload {
+  Id: number;
+  Name: string;
+  Frequency: string;
+  StartDate: string;
+  IsActive: boolean;
+  AssetId: number | null;
+  LocationId: number | null;
+}
diff --git a/src/domain/pm-schedules/use-cases/use-delete-pm-schedule.ts b/src/domain/pm-schedules/use-cases/use-delete-pm-schedule.ts
new file mode 100644
index 00000000..92a55fdc
--- /dev/null
+++ b/src/domain/pm-schedules/use-cases/use-delete-pm-schedule.ts
@@ -0,0 +1,26 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { pmScheduleCapabilities } from "@/config/pm-schedule-capabilities";
+import { pmSchedulesApi } from "@/domain/pm-schedules/api/pm-schedules-api";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDeletePmSchedule(): UseMutationResult<void, Error, number> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: number) => {
+      if (!pmScheduleCapabilities.canDelete) {
+        return Promise.reject(new Error("PM Schedule delete is not supported by the current API"));
+      }
+
+      return pmSchedulesApi.delete(id);
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.pmSchedules.all });
+      toast.success("PM schedule deleted successfully!");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to delete PM schedule");
+    },
+  });
+}
diff --git a/src/domain/pm-schedules/use-cases/use-pm-schedule-detail.ts b/src/domain/pm-schedules/use-cases/use-pm-schedule-detail.ts
new file mode 100644
index 00000000..c0bfc643
--- /dev/null
+++ b/src/domain/pm-schedules/use-cases/use-pm-schedule-detail.ts
@@ -0,0 +1,14 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { pmScheduleCapabilities } from "@/config/pm-schedule-capabilities";
+import { pmSchedulesApi } from "@/domain/pm-schedules/api/pm-schedules-api";
+import type { PmSchedule } from "@/domain/pm-schedules/types/pm-schedule";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+export function usePmScheduleDetail(id?: string): UseQueryResult<PmSchedule, Error> {
+  return useQuery({
+    queryKey: queryKeys.pmSchedules.detail(id ?? ""),
+    queryFn: () => pmSchedulesApi.getById(requireQueryParam(id, "PM schedule id")),
+    enabled: Boolean(id) && pmScheduleCapabilities.canEdit,
+  });
+}
diff --git a/src/domain/pm-schedules/use-cases/use-pm-schedule-form-options.ts b/src/domain/pm-schedules/use-cases/use-pm-schedule-form-options.ts
new file mode 100644
index 00000000..920b79b1
--- /dev/null
+++ b/src/domain/pm-schedules/use-cases/use-pm-schedule-form-options.ts
@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+import { assetsApi } from "@/domain/assets/api/assets-api";
+import type { AssetListItem } from "@/domain/assets/types/asset";
+import { locationsApi } from "@/domain/locations/api/locations-api";
+import type { LocationListItem } from "@/domain/locations/types/location";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export interface PmScheduleFormOptionsResult {
+  assets: AssetListItem[];
+  locations: LocationListItem[];
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export function usePmScheduleFormOptions(): PmScheduleFormOptionsResult {
+  const assetsQuery = useQuery({
+    queryKey: queryKeys.assets.list({ page: 1, pageSize: 1000 }),
+    queryFn: () => assetsApi.getList({ page: 1, pageSize: 1000 }),
+  });
+
+  const locationsQuery = useQuery({
+    queryKey: queryKeys.locations.list({ page: 1, pageSize: 1000 }),
+    queryFn: () => locationsApi.getList({ page: 1, pageSize: 1000 }),
+  });
+
+  return {
+    assets: assetsQuery.data?.items ?? [],
+    locations: locationsQuery.data?.items ?? [],
+    isLoading: assetsQuery.isLoading || locationsQuery.isLoading,
+    error: assetsQuery.error ?? locationsQuery.error,
+  };
+}
diff --git a/src/domain/pm-schedules/use-cases/use-pm-schedules-list.ts b/src/domain/pm-schedules/use-cases/use-pm-schedules-list.ts
new file mode 100644
index 00000000..f16755d4
--- /dev/null
+++ b/src/domain/pm-schedules/use-cases/use-pm-schedules-list.ts
@@ -0,0 +1,17 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { pmSchedulesApi } from "@/domain/pm-schedules/api/pm-schedules-api";
+import type {
+  PmSchedulesListParams,
+  PmSchedulesListResult,
+} from "@/domain/pm-schedules/types/pm-schedule";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function usePmSchedulesList(
+  params: PmSchedulesListParams,
+): UseQueryResult<PmSchedulesListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.pmSchedules.list(params as Record<string, unknown>),
+    queryFn: () => pmSchedulesApi.getList(params),
+    placeholderData: (previous) => previous,
+  });
+}
diff --git a/src/domain/pm-schedules/use-cases/use-save-pm-schedule.ts b/src/domain/pm-schedules/use-cases/use-save-pm-schedule.ts
new file mode 100644
index 00000000..96cf59f6
--- /dev/null
+++ b/src/domain/pm-schedules/use-cases/use-save-pm-schedule.ts
@@ -0,0 +1,34 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { pmSchedulesApi } from "@/domain/pm-schedules/api/pm-schedules-api";
+import type { PmScheduleFormValues } from "@/domain/pm-schedules/schemas/pm-schedule-schema";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useSavePmSchedule(
+  id?: string,
+): UseMutationResult<void, Error, PmScheduleFormValues> {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (values: PmScheduleFormValues) =>
+      pmSchedulesApi.save({
+        id: id ? Number(id) : 0,
+        name: values.name,
+        frequency: values.frequency,
+        startDate: values.startDate,
+        isActive: values.isActive,
+        assetId: values.assetId,
+        locationId: values.locationId,
+      }),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.pmSchedules.all });
+      toast.success("PM schedule saved successfully!");
+      navigate("/pmschedules");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to save PM schedule");
+    },
+  });
+}
diff --git a/src/domain/services/api/services-api.ts b/src/domain/services/api/services-api.ts
new file mode 100644
index 00000000..58ba217c
--- /dev/null
+++ b/src/domain/services/api/services-api.ts
@@ -0,0 +1,30 @@
+import { apiGet } from "@/api/api";
+import { API_PATHS } from "@/api/api-paths";
+import { handleApiResponse } from "@/api/handle-api-response";
+import { mapServices } from "@/domain/services/mappers/service-mapper";
+import type { Service } from "@/domain/services/types/service";
+import { WORK_ORDER_TYPE_API } from "@/domain/work-orders/types/work-order-board";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+const TYPE_TO_API: Record<Exclude<WOType, "Overdue">, number> = {
+  PM: WORK_ORDER_TYPE_API.PM,
+  Reactive: WORK_ORDER_TYPE_API.Reactive,
+  Emergency: WORK_ORDER_TYPE_API.Emergency,
+};
+
+export const servicesApi = {
+  getActive: async (): Promise<Service[]> => {
+    const data = await apiGet<unknown>(API_PATHS.services.list, {
+      searchParams: { isActive: true },
+    });
+    return mapServices(handleApiResponse(data));
+  },
+
+  getActiveForWorkOrderType: async (workOrderType: WOType): Promise<Service[]> => {
+    if (workOrderType === "Overdue") return [];
+    const data = await apiGet<unknown>(API_PATHS.services.list, {
+      searchParams: { isActive: true, workOrderType: TYPE_TO_API[workOrderType] },
+    });
+    return mapServices(handleApiResponse(data));
+  },
+};
diff --git a/src/domain/services/mappers/service-mapper.ts b/src/domain/services/mappers/service-mapper.ts
new file mode 100644
index 00000000..4b6d6f6e
--- /dev/null
+++ b/src/domain/services/mappers/service-mapper.ts
@@ -0,0 +1,71 @@
+import type { Service } from "@/domain/services/types/service";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readId(item: Record<string, unknown>): string | number {
+  const value = item.id ?? item.Id;
+  return typeof value === "string" || typeof value === "number" ? value : "";
+}
+
+function readString(item: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = item[key];
+    if (typeof value === "string") return value.trim();
+  }
+  return "";
+}
+
+function readBool(item: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = item[key];
+    if (typeof value === "boolean") return value;
+  }
+  return false;
+}
+
+function mapWorkOrderType(value: unknown): WOType | null {
+  if (typeof value === "number") {
+    return value === 2 ? "PM" : value === 3 ? "Emergency" : value === 6 ? "Reactive" : null;
+  }
+  if (typeof value === "string") {
+    const normalized = value.trim().toLowerCase();
+    return normalized === "pm" || normalized === "preventivemaintenance"
+      ? "PM"
+      : normalized === "emergency"
+        ? "Emergency"
+        : normalized === "reactive"
+          ? "Reactive"
+          : null;
+  }
+  return null;
+}
+
+export function mapService(raw: unknown): Service {
+  const item = asRecord(raw);
+  const types = item.supportedWorkOrderTypes ?? item.SupportedWorkOrderTypes;
+  return {
+    id: readId(item),
+    name: readString(item, "name", "Name"),
+    trade: readString(item, "trade", "Trade"),
+    iconKey: readString(item, "iconKey", "IconKey"),
+    requiresCompletionDocument: readBool(
+      item,
+      "requiresCompletionDocument",
+      "RequiresCompletionDocument",
+    ),
+    isActive: readBool(item, "isActive", "IsActive"),
+    supportedWorkOrderTypes: Array.isArray(types)
+      ? types.flatMap((value) => {
+          const mapped = mapWorkOrderType(value);
+          return mapped ? [mapped] : [];
+        })
+      : [],
+  };
+}
+
+export function mapServices(raw: unknown): Service[] {
+  return Array.isArray(raw) ? raw.map(mapService).filter((service) => service.id !== "") : [];
+}
diff --git a/src/domain/services/types/service.ts b/src/domain/services/types/service.ts
new file mode 100644
index 00000000..fa7a87d9
--- /dev/null
+++ b/src/domain/services/types/service.ts
@@ -0,0 +1,11 @@
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+export interface Service {
+  id: string | number;
+  name: string;
+  trade: string;
+  iconKey: string;
+  requiresCompletionDocument: boolean;
+  isActive: boolean;
+  supportedWorkOrderTypes: WOType[];
+}
diff --git a/src/domain/services/use-cases/use-services-for-work-order-type.ts b/src/domain/services/use-cases/use-services-for-work-order-type.ts
new file mode 100644
index 00000000..6dd8d4ac
--- /dev/null
+++ b/src/domain/services/use-cases/use-services-for-work-order-type.ts
@@ -0,0 +1,25 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { servicesApi } from "@/domain/services/api/services-api";
+import type { Service } from "@/domain/services/types/service";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useServicesForWorkOrderType(
+  workOrderType: WOType | "",
+): UseQueryResult<Service[], Error> {
+  const effectiveType = workOrderType || "PM";
+  return useQuery({
+    queryKey: queryKeys.services.byWorkOrderType(effectiveType),
+    queryFn: () => servicesApi.getActiveForWorkOrderType(effectiveType),
+    enabled: effectiveType !== "Overdue",
+    staleTime: 60 * 1000,
+  });
+}
+
+export function useActiveServices(): UseQueryResult<Service[], Error> {
+  return useQuery({
+    queryKey: queryKeys.services.active(),
+    queryFn: () => servicesApi.getActive(),
+    staleTime: 60 * 1000,
+  });
+}
diff --git a/src/domain/settings/dropdown-options/api/dropdown-options-api.ts b/src/domain/settings/dropdown-options/api/dropdown-options-api.ts
new file mode 100644
index 00000000..1dd98bf2
--- /dev/null
+++ b/src/domain/settings/dropdown-options/api/dropdown-options-api.ts
@@ -0,0 +1,55 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiDelete, apiGet, apiPost, apiPut } from "@/api/api";
+import { handleApiResponse } from "@/api/handle-api-response";
+import {
+  mapDropdownOption,
+  mapDropdownOptions,
+} from "@/domain/settings/dropdown-options/mappers/dropdown-option-mapper";
+import type {
+  CreateDropdownOptionInput,
+  DropdownOption,
+  DropdownOptionCategory,
+  UpdateDropdownOptionInput,
+} from "@/domain/settings/dropdown-options/types/dropdown-option";
+
+const REST_RESOURCE = API_PATHS.dropdownOptions.delete;
+
+export const dropdownOptionsApi = {
+  getByCategory: async (
+    category: DropdownOptionCategory,
+    parent?: string,
+  ): Promise<DropdownOption[]> => {
+    const url = `${API_PATHS.dropdownOptions.byCategory}/${encodeURIComponent(category)}`;
+    const searchParams = parent ? { parent } : undefined;
+    const data = await apiGet<unknown>(url, { searchParams });
+    const items = handleApiResponse<unknown[]>(data);
+    return mapDropdownOptions(items);
+  },
+
+  create: async (input: CreateDropdownOptionInput): Promise<DropdownOption> => {
+    const data = await apiPost<unknown>(REST_RESOURCE, {
+      category: input.category,
+      value: input.value,
+      parentValue: input.parentValue ?? null,
+      sortOrder: input.sortOrder ?? 0,
+      isActive: input.isActive ?? true,
+    });
+    return mapDropdownOption(handleApiResponse(data));
+  },
+
+  update: async (input: UpdateDropdownOptionInput): Promise<DropdownOption> => {
+    const data = await apiPut<unknown>(`${REST_RESOURCE}/${input.id}`, {
+      id: input.id,
+      category: input.category,
+      value: input.value,
+      parentValue: input.parentValue,
+      sortOrder: input.sortOrder,
+      isActive: input.isActive,
+    });
+    return mapDropdownOption(handleApiResponse(data));
+  },
+
+  delete: async (id: string | number): Promise<void> => {
+    await apiDelete<unknown>(`${REST_RESOURCE}/${id}`);
+  },
+};
diff --git a/src/domain/settings/dropdown-options/mappers/dropdown-option-mapper.ts b/src/domain/settings/dropdown-options/mappers/dropdown-option-mapper.ts
new file mode 100644
index 00000000..36408a1d
--- /dev/null
+++ b/src/domain/settings/dropdown-options/mappers/dropdown-option-mapper.ts
@@ -0,0 +1,32 @@
+import type {
+  DropdownOption,
+  DropdownOptionCategory,
+} from "@/domain/settings/dropdown-options/types/dropdown-option";
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export function mapDropdownOption(raw: unknown): DropdownOption {
+  const item = isRecord(raw) ? raw : {};
+  const id = item.id ?? item.Id ?? "";
+
+  return {
+    id: typeof id === "string" || typeof id === "number" ? id : "",
+    category: String(item.category ?? item.Category ?? "") as DropdownOptionCategory,
+    value: String(item.value ?? item.Value ?? ""),
+    parentValue:
+      (typeof item.parentValue === "string" ? item.parentValue : null) ??
+      (typeof item.ParentValue === "string" ? item.ParentValue : null),
+    sortOrder: Number(item.sortOrder ?? item.SortOrder ?? 0),
+    isActive: Boolean(item.isActive ?? item.IsActive ?? true),
+  };
+}
+
+export function mapDropdownOptions(raw: unknown): DropdownOption[] {
+  if (!Array.isArray(raw)) {
+    return [];
+  }
+
+  return raw.map(mapDropdownOption);
+}
diff --git a/src/domain/settings/dropdown-options/types/dropdown-option.ts b/src/domain/settings/dropdown-options/types/dropdown-option.ts
new file mode 100644
index 00000000..1d3c3a3a
--- /dev/null
+++ b/src/domain/settings/dropdown-options/types/dropdown-option.ts
@@ -0,0 +1,33 @@
+export const DROPDOWN_OPTION_CATEGORIES = [
+  { key: "Trade", label: "Trades", hasChildren: true },
+  { key: "SubTrade", label: "Sub-Trades", parent: "Trade" as const },
+  { key: "Problem", label: "Problems", hasChildren: false },
+] as const;
+
+export type DropdownOptionCategory = (typeof DROPDOWN_OPTION_CATEGORIES)[number]["key"];
+
+export interface DropdownOption {
+  id: string | number;
+  category: DropdownOptionCategory;
+  value: string;
+  parentValue: string | null;
+  sortOrder: number;
+  isActive: boolean;
+}
+
+export interface CreateDropdownOptionInput {
+  category: DropdownOptionCategory;
+  value: string;
+  parentValue?: string | null;
+  sortOrder?: number;
+  isActive?: boolean;
+}
+
+export interface UpdateDropdownOptionInput {
+  id: string | number;
+  category: DropdownOptionCategory;
+  value: string;
+  parentValue: string | null;
+  sortOrder: number;
+  isActive: boolean;
+}
diff --git a/src/domain/settings/dropdown-options/use-cases/use-create-dropdown-option.ts b/src/domain/settings/dropdown-options/use-cases/use-create-dropdown-option.ts
new file mode 100644
index 00000000..dbb194d0
--- /dev/null
+++ b/src/domain/settings/dropdown-options/use-cases/use-create-dropdown-option.ts
@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { dropdownOptionsApi } from "@/domain/settings/dropdown-options/api/dropdown-options-api";
+import type {
+  CreateDropdownOptionInput,
+  DropdownOption,
+} from "@/domain/settings/dropdown-options/types/dropdown-option";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useCreateDropdownOption(): UseMutationResult<
+  DropdownOption,
+  Error,
+  CreateDropdownOptionInput
+> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (input: CreateDropdownOptionInput) => dropdownOptionsApi.create(input),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.dropdownOptions.all });
+      toast.success("Option added");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to add option");
+    },
+  });
+}
diff --git a/src/domain/settings/dropdown-options/use-cases/use-delete-dropdown-option.ts b/src/domain/settings/dropdown-options/use-cases/use-delete-dropdown-option.ts
new file mode 100644
index 00000000..7b7efa51
--- /dev/null
+++ b/src/domain/settings/dropdown-options/use-cases/use-delete-dropdown-option.ts
@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { dropdownOptionsApi } from "@/domain/settings/dropdown-options/api/dropdown-options-api";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useDeleteDropdownOption(): UseMutationResult<void, Error, string | number> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string | number) => dropdownOptionsApi.delete(id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.dropdownOptions.all });
+      toast.success("Option deleted");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to delete");
+    },
+  });
+}
diff --git a/src/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category.ts b/src/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category.ts
new file mode 100644
index 00000000..b47720a1
--- /dev/null
+++ b/src/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category.ts
@@ -0,0 +1,25 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { dropdownOptionsApi } from "@/domain/settings/dropdown-options/api/dropdown-options-api";
+import type {
+  DropdownOption,
+  DropdownOptionCategory,
+} from "@/domain/settings/dropdown-options/types/dropdown-option";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+interface UseDropdownOptionsByCategoryOptions {
+  parent?: string;
+  enabled?: boolean;
+}
+
+export function useDropdownOptionsByCategory(
+  category: DropdownOptionCategory,
+  options?: UseDropdownOptionsByCategoryOptions,
+): UseQueryResult<DropdownOption[], Error> {
+  const { parent, enabled = true } = options ?? {};
+
+  return useQuery({
+    queryKey: queryKeys.dropdownOptions.byCategory(category, parent),
+    queryFn: () => dropdownOptionsApi.getByCategory(category, parent),
+    enabled,
+  });
+}
diff --git a/src/domain/settings/dropdown-options/use-cases/use-update-dropdown-option.ts b/src/domain/settings/dropdown-options/use-cases/use-update-dropdown-option.ts
new file mode 100644
index 00000000..f7a41e17
--- /dev/null
+++ b/src/domain/settings/dropdown-options/use-cases/use-update-dropdown-option.ts
@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { dropdownOptionsApi } from "@/domain/settings/dropdown-options/api/dropdown-options-api";
+import type {
+  DropdownOption,
+  UpdateDropdownOptionInput,
+} from "@/domain/settings/dropdown-options/types/dropdown-option";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useUpdateDropdownOption(): UseMutationResult<
+  DropdownOption,
+  Error,
+  UpdateDropdownOptionInput
+> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (input: UpdateDropdownOptionInput) => dropdownOptionsApi.update(input),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.dropdownOptions.all });
+      toast.success("Option updated");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update");
+    },
+  });
+}
diff --git a/src/domain/settings/task-templates/api/task-templates-api.ts b/src/domain/settings/task-templates/api/task-templates-api.ts
new file mode 100644
index 00000000..908066b2
--- /dev/null
+++ b/src/domain/settings/task-templates/api/task-templates-api.ts
@@ -0,0 +1,46 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiDelete, apiGet, apiPost, apiPut } from "@/api/api";
+import { handleApiResponse } from "@/api/handle-api-response";
+import {
+  mapTaskTemplate,
+  mapTaskTemplates,
+  mapTaskTemplateToBackend,
+} from "@/domain/settings/task-templates/mappers/task-template-mapper";
+import type {
+  TaskTemplate,
+  TaskTemplateFormValues,
+} from "@/domain/settings/task-templates/types/task-template";
+
+export const taskTemplatesApi = {
+  getAll: async (): Promise<TaskTemplate[]> => {
+    const data = await apiGet<unknown>(API_PATHS.rest.taskListTemplates);
+    const response = handleApiResponse<unknown>(data);
+    const items = Array.isArray(response) ? response : [];
+    return mapTaskTemplates(items);
+  },
+
+  getById: async (id: string | number): Promise<TaskTemplate> => {
+    const data = await apiGet<unknown>(`${API_PATHS.rest.taskListTemplates}/${id}`);
+    return mapTaskTemplate(handleApiResponse(data));
+  },
+
+  create: async (values: TaskTemplateFormValues): Promise<TaskTemplate> => {
+    const data = await apiPost<unknown>(
+      API_PATHS.rest.taskListTemplates,
+      mapTaskTemplateToBackend(values),
+    );
+    return mapTaskTemplate(handleApiResponse(data));
+  },
+
+  update: async (id: string | number, values: TaskTemplateFormValues): Promise<TaskTemplate> => {
+    const data = await apiPut<unknown>(
+      `${API_PATHS.rest.taskListTemplates}/${id}`,
+      mapTaskTemplateToBackend(values),
+    );
+    return mapTaskTemplate(handleApiResponse(data));
+  },
+
+  delete: async (id: string | number): Promise<void> => {
+    await apiDelete<unknown>(`${API_PATHS.rest.taskListTemplates}/${id}`);
+  },
+};
diff --git a/src/domain/settings/task-templates/mappers/task-template-mapper.ts b/src/domain/settings/task-templates/mappers/task-template-mapper.ts
new file mode 100644
index 00000000..035e69f6
--- /dev/null
+++ b/src/domain/settings/task-templates/mappers/task-template-mapper.ts
@@ -0,0 +1,85 @@
+import type {
+  TaskTemplate,
+  TaskTemplateFormValues,
+  TaskTemplateItem,
+} from "@/domain/settings/task-templates/types/task-template";
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") return value;
+    if (typeof value === "number") return String(value);
+  }
+  return "";
+}
+
+function readId(record: Record<string, unknown>): string | number {
+  const value = record.id ?? record.Id;
+  if (typeof value === "string" || typeof value === "number") return value;
+  return "";
+}
+
+function readBool(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") return value;
+  }
+  return true;
+}
+
+function mapItem(raw: unknown, index: number): TaskTemplateItem {
+  const item = asRecord(raw);
+  return {
+    itemText: readString(item, "itemText", "ItemText", "text"),
+    sortOrder:
+      (typeof item.sortOrder === "number" ? item.sortOrder : undefined) ??
+      (typeof item.SortOrder === "number" ? item.SortOrder : undefined) ??
+      index,
+  };
+}
+
+export function mapTaskTemplate(raw: unknown): TaskTemplate {
+  const item = asRecord(raw);
+  const items = (item.items ?? item.Items) as unknown[];
+  return {
+    id: readId(item),
+    name: readString(item, "name", "Name"),
+    description: readString(item, "description", "Description"),
+    isActive: readBool(item, "isActive", "IsActive"),
+    items: Array.isArray(items) ? items.map(mapItem) : [],
+  };
+}
+
+export function mapTaskTemplates(rawItems: unknown[]): TaskTemplate[] {
+  return rawItems.map(mapTaskTemplate);
+}
+
+export function mapTaskTemplateToBackend(
+  values: TaskTemplateFormValues,
+  isActive = true,
+): Record<string, unknown> {
+  return {
+    name: values.name,
+    description: values.description,
+    isActive,
+    items: values.items.map((item) => ({
+      itemText: item.text,
+      sortOrder: item.sortOrder,
+    })),
+  };
+}
+
+export function mapTaskTemplateToFormValues(template: TaskTemplate): TaskTemplateFormValues {
+  return {
+    name: template.name,
+    description: template.description,
+    items: template.items.map((item, index) => ({
+      text: item.itemText,
+      sortOrder: item.sortOrder ?? index,
+    })),
+  };
+}
diff --git a/src/domain/settings/task-templates/schemas/task-template-schema.ts b/src/domain/settings/task-templates/schemas/task-template-schema.ts
new file mode 100644
index 00000000..07d4c344
--- /dev/null
+++ b/src/domain/settings/task-templates/schemas/task-template-schema.ts
@@ -0,0 +1,14 @@
+import { z } from "zod";
+
+const taskTemplateItemSchema = z.object({
+  text: z.string().min(1),
+  sortOrder: z.number(),
+});
+
+export const taskTemplateSchema = z.object({
+  name: z.string().min(1, "Template name is required"),
+  description: z.string().optional().default(""),
+  items: z.array(taskTemplateItemSchema).default([]),
+});
+
+export type TaskTemplateSchemaValues = z.infer<typeof taskTemplateSchema>;
diff --git a/src/domain/settings/task-templates/types/task-template.ts b/src/domain/settings/task-templates/types/task-template.ts
new file mode 100644
index 00000000..6044559f
--- /dev/null
+++ b/src/domain/settings/task-templates/types/task-template.ts
@@ -0,0 +1,23 @@
+export interface TaskTemplateItem {
+  itemText: string;
+  sortOrder: number;
+}
+
+export interface TaskTemplate {
+  id: string | number;
+  name: string;
+  description: string;
+  isActive: boolean;
+  items: TaskTemplateItem[];
+}
+
+export interface TaskTemplateFormItem {
+  text: string;
+  sortOrder: number;
+}
+
+export interface TaskTemplateFormValues {
+  name: string;
+  description: string;
+  items: TaskTemplateFormItem[];
+}
diff --git a/src/domain/settings/task-templates/use-cases/use-task-template-mutations.ts b/src/domain/settings/task-templates/use-cases/use-task-template-mutations.ts
new file mode 100644
index 00000000..6d494d94
--- /dev/null
+++ b/src/domain/settings/task-templates/use-cases/use-task-template-mutations.ts
@@ -0,0 +1,69 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { taskTemplatesApi } from "@/domain/settings/task-templates/api/task-templates-api";
+import type {
+  TaskTemplate,
+  TaskTemplateFormValues,
+} from "@/domain/settings/task-templates/types/task-template";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+interface UpdateTaskTemplateInput {
+  id: string | number;
+  values: TaskTemplateFormValues;
+}
+
+export function useCreateTaskTemplate(): UseMutationResult<
+  TaskTemplate,
+  Error,
+  TaskTemplateFormValues
+> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (values: TaskTemplateFormValues) => taskTemplatesApi.create(values),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.taskTemplates.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.taskTemplates() });
+      toast.success("Template created");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to create template");
+    },
+  });
+}
+
+export function useUpdateTaskTemplate(): UseMutationResult<
+  TaskTemplate,
+  Error,
+  UpdateTaskTemplateInput
+> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, values }: UpdateTaskTemplateInput) => taskTemplatesApi.update(id, values),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.taskTemplates.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.taskTemplates() });
+      toast.success("Template updated");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update template");
+    },
+  });
+}
+
+export function useDeleteTaskTemplate(): UseMutationResult<void, Error, string | number> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string | number) => taskTemplatesApi.delete(id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.taskTemplates.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.taskTemplates() });
+      toast.success("Template deleted");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to delete template");
+    },
+  });
+}
diff --git a/src/domain/settings/task-templates/use-cases/use-task-templates.ts b/src/domain/settings/task-templates/use-cases/use-task-templates.ts
new file mode 100644
index 00000000..33ce491b
--- /dev/null
+++ b/src/domain/settings/task-templates/use-cases/use-task-templates.ts
@@ -0,0 +1,11 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { taskTemplatesApi } from "@/domain/settings/task-templates/api/task-templates-api";
+import type { TaskTemplate } from "@/domain/settings/task-templates/types/task-template";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useTaskTemplates(): UseQueryResult<TaskTemplate[], Error> {
+  return useQuery({
+    queryKey: queryKeys.taskTemplates.all,
+    queryFn: () => taskTemplatesApi.getAll(),
+  });
+}
diff --git a/src/domain/team-members/api/team-members-api.ts b/src/domain/team-members/api/team-members-api.ts
new file mode 100644
index 00000000..0e53e989
--- /dev/null
+++ b/src/domain/team-members/api/team-members-api.ts
@@ -0,0 +1,42 @@
+import { apiGet, apiPost, apiPut } from "@/api/api";
+import { API_PATHS } from "@/api/api-paths";
+import { handleApiResponse } from "@/api/handle-api-response";
+import {
+  mapTeamMemberDetail,
+  mapTeamMemberListItems,
+} from "@/domain/team-members/mappers/team-member-mapper";
+import type {
+  CreateTeamMemberInput,
+  TeamMemberCreated,
+  TeamMemberDetail,
+  TeamMemberListResult,
+  UpdateTeamMemberInput,
+} from "@/domain/team-members/types/team-member";
+
+export const teamMembersApi = {
+  getList: async (): Promise<TeamMemberListResult> => {
+    const data = await apiGet<unknown>(API_PATHS.teamMember.getList);
+    const items = handleApiResponse<unknown[]>(data);
+    return { items: mapTeamMemberListItems(Array.isArray(items) ? items : []) };
+  },
+
+  create: async (input: CreateTeamMemberInput): Promise<TeamMemberCreated> => {
+    const data = await apiPost<unknown>(API_PATHS.teamMember.create, input);
+    return handleApiResponse<TeamMemberCreated>(data);
+  },
+
+  getDetail: async (id: string | number): Promise<TeamMemberDetail> => {
+    const data = await apiGet<unknown>(
+      `${API_PATHS.teamMember.detail}/${encodeURIComponent(String(id))}`,
+    );
+    return mapTeamMemberDetail(handleApiResponse<unknown>(data));
+  },
+
+  update: async (id: string | number, input: UpdateTeamMemberInput): Promise<TeamMemberDetail> => {
+    const data = await apiPut<unknown>(
+      `${API_PATHS.teamMember.detail}/${encodeURIComponent(String(id))}`,
+      input,
+    );
+    return mapTeamMemberDetail(handleApiResponse<unknown>(data));
+  },
+};
diff --git a/src/domain/team-members/mappers/team-member-mapper.ts b/src/domain/team-members/mappers/team-member-mapper.ts
new file mode 100644
index 00000000..d283da28
--- /dev/null
+++ b/src/domain/team-members/mappers/team-member-mapper.ts
@@ -0,0 +1,96 @@
+import type {
+  TeamMemberDetail,
+  TeamMemberListItem,
+  TeamPermissionState,
+  TeamPermissionValue,
+} from "@/domain/team-members/types/team-member";
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") return value;
+    if (typeof value === "number") return String(value);
+  }
+  return "";
+}
+
+function readBoolean(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") return value;
+    if (typeof value === "string") return value.toLowerCase() === "true";
+  }
+  return false;
+}
+
+function readStringArray(record: Record<string, unknown>, ...keys: string[]): string[] {
+  for (const key of keys) {
+    const value = record[key];
+    if (Array.isArray(value))
+      return value.filter((item): item is string => typeof item === "string");
+    if (typeof value === "string" && value.trim()) return [value];
+  }
+  return [];
+}
+
+function readPermissionState(value: unknown): TeamPermissionState {
+  if (value === 1 || value === "Allow") return 1;
+  if (value === 2 || value === "Deny") return 2;
+  return 0;
+}
+
+function readPermissions(record: Record<string, unknown>): TeamPermissionValue[] {
+  const value = record.permissions ?? record.Permissions;
+  if (!Array.isArray(value)) return [];
+
+  return value.flatMap((item) => {
+    if (typeof item !== "object" || item === null) return [];
+    const permission = item as Record<string, unknown>;
+    const permissionKey = readString(permission, "permissionKey", "PermissionKey");
+    if (!permissionKey) return [];
+    return [
+      {
+        permissionKey,
+        overrideState: readPermissionState(permission.overrideState ?? permission.OverrideState),
+        isGranted: readBoolean(permission, "isGranted", "IsGranted"),
+      },
+    ];
+  });
+}
+
+export function mapTeamMemberListItem(raw: unknown): TeamMemberListItem {
+  const record = (typeof raw === "object" && raw !== null ? raw : {}) as Record<string, unknown>;
+  const id = record.id ?? record.Id;
+  const status =
+    readString(record, "status", "Status").toLowerCase() === "inactive" ||
+    readBoolean(record, "isDeleted", "IsDeleted")
+      ? "Inactive"
+      : "Active";
+
+  return {
+    id: typeof id === "string" || typeof id === "number" ? id : "",
+    name: readString(record, "name", "Name"),
+    role: readString(record, "role", "Role", "roleName", "RoleName"),
+    serviceArea: readString(record, "serviceArea", "ServiceArea", "locations", "Locations"),
+    phone: readString(record, "phone", "Phone"),
+    email: readString(record, "email", "Email"),
+    color: readString(record, "color", "Color"),
+    status,
+    isAccountOwner: readBoolean(record, "isAccountOwner", "IsAccountOwner"),
+    pendingRegistration: readBoolean(record, "pendingRegistration", "PendingRegistration"),
+  };
+}
+
+export function mapTeamMemberListItems(rawItems: unknown[]): TeamMemberListItem[] {
+  return rawItems.map(mapTeamMemberListItem);
+}
+
+export function mapTeamMemberDetail(raw: unknown): TeamMemberDetail {
+  const record = (typeof raw === "object" && raw !== null ? raw : {}) as Record<string, unknown>;
+  const listItem = mapTeamMemberListItem(record);
+  return {
+    ...listItem,
+    serviceAreas: readStringArray(record, "serviceAreas", "ServiceAreas"),
+    permissions: readPermissions(record),
+  };
+}
diff --git a/src/domain/team-members/types/team-member.ts b/src/domain/team-members/types/team-member.ts
new file mode 100644
index 00000000..5b2d07c5
--- /dev/null
+++ b/src/domain/team-members/types/team-member.ts
@@ -0,0 +1,63 @@
+export interface TeamMemberListItem {
+  id: string | number;
+  name: string;
+  role: string;
+  serviceArea: string;
+  phone: string;
+  email: string;
+  color: string;
+  status: "Active" | "Inactive";
+  isAccountOwner: boolean;
+  pendingRegistration: boolean;
+}
+
+export type TeamMemberRole = "Dispatcher" | "Scheduler" | "Admin";
+
+export interface CreateTeamMemberInput {
+  name: string;
+  role: TeamMemberRole;
+  color: string;
+  email: string;
+  phone?: string;
+  serviceAreas: string[];
+  permissionOverrides: Record<string, 1 | 2>;
+}
+
+export interface TeamMemberCreated {
+  id: string;
+  name: string;
+  role: TeamMemberRole;
+  color: string;
+  email: string;
+  phone: string;
+  serviceAreas: string[];
+  pendingRegistration: boolean;
+}
+
+export type TeamPermissionState = 0 | 1 | 2;
+
+export interface TeamPermissionValue {
+  permissionKey: string;
+  overrideState: TeamPermissionState;
+  isGranted: boolean;
+}
+
+export interface TeamMemberDetail extends TeamMemberListItem {
+  serviceAreas: string[];
+  permissions: TeamPermissionValue[];
+}
+
+export interface UpdateTeamMemberInput {
+  name: string;
+  role: TeamMemberRole;
+  color: string;
+  email: string;
+  phone?: string;
+  serviceAreas: string[];
+  permissionOverrides: Record<string, TeamPermissionState>;
+  isActive: boolean;
+}
+
+export interface TeamMemberListResult {
+  items: TeamMemberListItem[];
+}
diff --git a/src/domain/team-members/use-cases/use-create-team-member.ts b/src/domain/team-members/use-cases/use-create-team-member.ts
new file mode 100644
index 00000000..bf025222
--- /dev/null
+++ b/src/domain/team-members/use-cases/use-create-team-member.ts
@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { teamMembersApi } from "@/domain/team-members/api/team-members-api";
+import type {
+  CreateTeamMemberInput,
+  TeamMemberCreated,
+} from "@/domain/team-members/types/team-member";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useCreateTeamMember(): UseMutationResult<
+  TeamMemberCreated,
+  Error,
+  CreateTeamMemberInput
+> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: teamMembersApi.create,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.teamMembers.all });
+      toast.success("Team member created with pending registration.");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to create team member");
+    },
+  });
+}
diff --git a/src/domain/team-members/use-cases/use-team-member-detail.ts b/src/domain/team-members/use-cases/use-team-member-detail.ts
new file mode 100644
index 00000000..3622ab5c
--- /dev/null
+++ b/src/domain/team-members/use-cases/use-team-member-detail.ts
@@ -0,0 +1,45 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  type UseMutationResult,
+  type UseQueryResult,
+} from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { teamMembersApi } from "@/domain/team-members/api/team-members-api";
+import type {
+  TeamMemberDetail,
+  UpdateTeamMemberInput,
+} from "@/domain/team-members/types/team-member";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useTeamMemberDetail(
+  id: string | number | null,
+): UseQueryResult<TeamMemberDetail, Error> {
+  return useQuery({
+    queryKey: queryKeys.teamMembers.detail(id ?? ""),
+    queryFn: () => teamMembersApi.getDetail(id as string | number),
+    enabled: id !== null,
+  });
+}
+
+interface UpdateVariables {
+  id: string | number;
+  input: UpdateTeamMemberInput;
+}
+
+export function useUpdateTeamMember(): UseMutationResult<TeamMemberDetail, Error, UpdateVariables> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, input }) => teamMembersApi.update(id, input),
+    onSuccess: (member) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.teamMembers.all });
+      void queryClient.setQueryData(queryKeys.teamMembers.detail(member.id), member);
+      toast.success("Team member updated.");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update team member");
+    },
+  });
+}
diff --git a/src/domain/team-members/use-cases/use-team-members-list.ts b/src/domain/team-members/use-cases/use-team-members-list.ts
new file mode 100644
index 00000000..b22f95e0
--- /dev/null
+++ b/src/domain/team-members/use-cases/use-team-members-list.ts
@@ -0,0 +1,11 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { teamMembersApi } from "@/domain/team-members/api/team-members-api";
+import type { TeamMemberListResult } from "@/domain/team-members/types/team-member";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useTeamMembersList(): UseQueryResult<TeamMemberListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.teamMembers.list(),
+    queryFn: teamMembersApi.getList,
+  });
+}
diff --git a/src/domain/uplifts/api/uplifts-api.ts b/src/domain/uplifts/api/uplifts-api.ts
new file mode 100644
index 00000000..21937764
--- /dev/null
+++ b/src/domain/uplifts/api/uplifts-api.ts
@@ -0,0 +1,133 @@
+import { HTTPError } from "ky";
+import { API_PATHS } from "@/api/api-paths";
+import { apiGet, apiPost, apiRequestRaw } from "@/api/api";
+import { handleApiResponse } from "@/api/handle-api-response";
+import {
+  mapUpliftQueueExposureTotal,
+  mapUpliftQueueItems,
+  mapUpliftRequests,
+} from "@/domain/uplifts/mappers/uplift-mapper";
+import type { UpliftsQueueParams, UpliftsQueueResult } from "@/domain/uplifts/types/uplift";
+import type { UpliftRequest } from "@/domain/uplifts/types/uplift";
+
+function buildQueueParams(params: UpliftsQueueParams): Record<string, string | number> {
+  const searchParams: Record<string, string | number> = {
+    page: params.page ?? 1,
+    pageSize: params.pageSize ?? 25,
+  };
+  if (params.status) searchParams.status = params.status;
+  if (params.tier) searchParams.tier = params.tier;
+  return searchParams;
+}
+
+function evidenceUrl(id: string | number): string {
+  return `${API_PATHS.rest.uplifts}/${id}/evidence`;
+}
+
+function readContentDispositionFilename(response: Response, fallback: string): string {
+  const disposition = response.headers.get("Content-Disposition") ?? "";
+  const match = /filename="?([^";]+)"?/i.exec(disposition);
+  return match ? match[1] : fallback;
+}
+
+function evidenceHttpError(status: number): Error {
+  if (status === 423) {
+    return new Error("Evidence is still being scanned. Try again shortly.");
+  }
+  if (status === 403) {
+    return new Error("You are not authorized to view this evidence.");
+  }
+  return new Error("Unable to download evidence right now.");
+}
+
+export const upliftsApi = {
+  list: async (params: UpliftsQueueParams = {}): Promise<UpliftsQueueResult> => {
+    const data = await apiGet<unknown>(API_PATHS.rest.uplifts, {
+      searchParams: buildQueueParams(params),
+    });
+    const response = handleApiResponse<Record<string, unknown>>(data);
+    const items = Array.isArray(response?.items)
+      ? response.items
+      : Array.isArray((response as { data?: unknown[] })?.data)
+        ? (response as { data: unknown[] }).data
+        : [];
+    const total =
+      (typeof response?.total === "number" ? response.total : undefined) ??
+      (typeof response?.totalCount === "number" ? response.totalCount : undefined) ??
+      items.length;
+
+    return {
+      items: mapUpliftQueueItems(items),
+      totalCount: total,
+      page: params.page ?? 1,
+      pageSize: params.pageSize ?? 25,
+      pendingExposureTotal: mapUpliftQueueExposureTotal(response),
+    };
+  },
+
+  listForDispatch: async (dispatchId: string | number): Promise<UpliftRequest[]> => {
+    const data = await apiGet<unknown>(`${API_PATHS.rest.uplifts}/dispatch/${dispatchId}`);
+    const response = handleApiResponse<unknown>(data);
+    const items = Array.isArray(response)
+      ? response
+      : typeof response === "object" &&
+          response !== null &&
+          Array.isArray((response as { data?: unknown[] }).data)
+        ? (response as { data: unknown[] }).data
+        : [];
+    return mapUpliftRequests(items);
+  },
+
+  approve: async (id: string | number, note?: string): Promise<void> => {
+    await apiPost<unknown>(`${API_PATHS.rest.uplifts}/${id}/approve`, { note });
+  },
+
+  reject: async (id: string | number, note: string): Promise<void> => {
+    await apiPost<unknown>(`${API_PATHS.rest.uplifts}/${id}/reject`, { note });
+  },
+
+  canApprove: async (tier: number): Promise<boolean> => {
+    const data = await apiGet<unknown>(`${API_PATHS.rest.uplifts}/can-approve`, {
+      searchParams: { tier },
+    });
+    const response = handleApiResponse<{ canApprove?: unknown }>(data);
+    return response?.canApprove === true;
+  },
+
+  requestChanges: async (id: string | number, note: string): Promise<void> => {
+    await apiPost<unknown>(`${API_PATHS.rest.uplifts}/${id}/request-changes`, { note });
+  },
+
+  revoke: async (id: string | number, reason: string): Promise<void> => {
+    await apiPost<unknown>(`${API_PATHS.rest.uplifts}/${id}/revoke`, { note: reason });
+  },
+
+  downloadEvidence: async (
+    id: string | number,
+    fallbackFileName = "uplift-evidence",
+  ): Promise<void> => {
+    let response: Response;
+    try {
+      response = await apiRequestRaw(
+        "get",
+        evidenceUrl(id),
+        undefined,
+        "upliftsApi.downloadEvidence",
+      );
+    } catch (error) {
+      if (error instanceof HTTPError) {
+        throw evidenceHttpError(error.response.status);
+      }
+      throw error;
+    }
+
+    const blob = await response.blob();
+    const fileName = readContentDispositionFilename(response, fallbackFileName);
+    const url = URL.createObjectURL(blob);
+    const anchor = window.document.createElement("a");
+    anchor.href = url;
+    anchor.download = fileName;
+    anchor.click();
+    URL.revokeObjectURL(url);
+  },
+};
diff --git a/src/domain/uplifts/mappers/uplift-mapper.ts b/src/domain/uplifts/mappers/uplift-mapper.ts
new file mode 100644
index 00000000..300a6877
--- /dev/null
+++ b/src/domain/uplifts/mappers/uplift-mapper.ts
@@ -0,0 +1,178 @@
+import type { UpliftQueueItem, UpliftRequest } from "@/domain/uplifts/types/uplift";
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") return value;
+    if (typeof value === "number") return String(value);
+  }
+  return "";
+}
+
+function readNumber(record: Record<string, unknown>, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number" && Number.isFinite(value)) return value;
+    if (typeof value === "string" && value.trim() && Number.isFinite(Number(value))) {
+      return Number(value);
+    }
+  }
+  return null;
+}
+
+function readBool(record: Record<string, unknown>, ...keys: string[]): boolean {
+  return keys.some((key) => record[key] === true);
+}
+
+function readOptionalId(
+  record: Record<string, unknown>,
+  ...keys: string[]
+): string | number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" || typeof value === "number") return value;
+  }
+  return null;
+}
+
+function readOptionalBool(record: Record<string, unknown>, ...keys: string[]): boolean | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") return value;
+  }
+  return null;
+}
+
+export function mapUpliftRequest(raw: unknown): UpliftRequest {
+  const item = asRecord(raw);
+  return {
+    id: readOptionalId(item, "id", "Id") ?? "",
+    status: readString(item, "status", "Status"),
+    currentNTE: readNumber(item, "currentNTE", "CurrentNTE"),
+    requestedNTE: readNumber(item, "requestedNTE", "RequestedNTE") ?? 0,
+    delta: readNumber(item, "delta", "Delta") ?? 0,
+    vendorReason: readString(item, "vendorReason", "VendorReason"),
+    requestedAt: readString(item, "requestedAt", "RequestedAt"),
+    requestedByVendorName: readString(
+      item,
+      "requestedByName",
+      "RequestedByName",
+      "requestedByVendorName",
+      "RequestedByVendorName",
+    ),
+    decidedAt: readString(item, "decidedAt", "DecidedAt"),
+    decidedByName: readString(item, "decidedByName", "DecidedByName"),
+    decisionNote: readString(item, "decisionNote", "DecisionNote"),
+    requiredTier: readNumber(item, "requiredTier", "RequiredTier") ?? 1,
+    canDecide: readBool(item, "canDecide", "CanDecide"),
+    expiresAt: readString(item, "expiresAt", "ExpiresAt"),
+    notificationStatus: readString(item, "notificationStatus", "NotificationStatus"),
+    notificationError: readString(item, "notificationError", "NotificationError"),
+    evidenceDocumentId: readOptionalId(item, "evidenceDocumentId", "EvidenceDocumentId"),
+    evidenceFileName: readString(item, "evidenceFileName", "EvidenceFileName"),
+    evidenceContentType: readString(item, "evidenceContentType", "EvidenceContentType"),
+    evidenceSizeBytes: readNumber(item, "evidenceSizeBytes", "EvidenceSizeBytes"),
+  };
+}
+
+export function mapUpliftRequests(rawItems: unknown[]): UpliftRequest[] {
+  return rawItems.map(mapUpliftRequest);
+}
+
+export function mapUpliftQueueItem(raw: unknown): UpliftQueueItem {
+  const base = mapUpliftRequest(raw);
+  const item = asRecord(raw);
+  return {
+    ...base,
+    dispatchNumber: readString(item, "dispatchNumber", "DispatchNumber"),
+    poNumber: readString(item, "poNumber", "PONumber"),
+    vendorCompanyName: readString(item, "vendorCompanyName", "VendorCompanyName"),
+    workOrderId: readOptionalId(item, "workOrderId", "WorkOrderId"),
+    dispatchId: readOptionalId(item, "dispatchId", "DispatchId"),
+    woNumber: readString(item, "woNumber", "WoNumber", "workOrderNumber", "WorkOrderNumber"),
+    site: readString(
+      item,
+      "workOrderSite",
+      "WorkOrderSite",
+      "site",
+      "Site",
+      "siteCode",
+      "SiteCode",
+      "locationName",
+      "LocationName",
+    ),
+    serviceName: readString(
+      item,
+      "workOrderService",
+      "WorkOrderService",
+      "serviceName",
+      "ServiceName",
+      "service",
+      "Service",
+      "trade",
+      "Trade",
+    ),
+    attachmentCount: readNumber(
+      item,
+      "attachmentCount",
+      "AttachmentCount",
+      "attachmentsCount",
+      "AttachmentsCount",
+    ),
+    approvedOnWoAuto: readNumber(
+      item,
+      "workOrderAutoApprovedTotal",
+      "WorkOrderAutoApprovedTotal",
+      "approvedOnWoAuto",
+      "ApprovedOnWoAuto",
+      "autoApprovedTotal",
+      "AutoApprovedTotal",
+    ),
+    approvedOnWoAdmin: readNumber(
+      item,
+      "workOrderAdminApprovedTotal",
+      "WorkOrderAdminApprovedTotal",
+      "approvedOnWoAdmin",
+      "ApprovedOnWoAdmin",
+      "adminApprovedTotal",
+      "AdminApprovedTotal",
+    ),
+    approvedOnWoTotal: readNumber(
+      item,
+      "workOrderApprovedExposureTotal",
+      "WorkOrderApprovedExposureTotal",
+      "approvedOnWoTotal",
+      "ApprovedOnWoTotal",
+      "approvedOnWorkOrderTotal",
+      "ApprovedOnWorkOrderTotal",
+    ),
+    workOrderClosed: readOptionalBool(
+      item,
+      "workOrderClosed",
+      "WorkOrderClosed",
+      "isWorkOrderClosed",
+      "IsWorkOrderClosed",
+    ),
+  };
+}
+
+export function mapUpliftQueueItems(rawItems: unknown[]): UpliftQueueItem[] {
+  return rawItems.map(mapUpliftQueueItem);
+}
+
+export function mapUpliftQueueExposureTotal(raw: unknown): number | null {
+  const record = asRecord(raw);
+  return readNumber(
+    record,
+    "pendingExposureTotal",
+    "PendingExposureTotal",
+    "totalPendingExposure",
+    "TotalPendingExposure",
+    "exposureTotal",
+    "ExposureTotal",
+  );
+}
diff --git a/src/domain/uplifts/types/uplift.ts b/src/domain/uplifts/types/uplift.ts
new file mode 100644
index 00000000..2e46d805
--- /dev/null
+++ b/src/domain/uplifts/types/uplift.ts
@@ -0,0 +1,69 @@
+export const UPLIFT_STATUSES = [
+  "Pending",
+  "Approved",
+  "Rejected",
+  "ChangesRequested",
+  "Withdrawn",
+  "Expired",
+] as const;
+
+export type UpliftStatus = (typeof UPLIFT_STATUSES)[number];
+
+export const UPLIFT_DECISIONABLE_STATUSES = ["Pending"] as const;
+
+export const UPLIFT_NOTIFICATION_STATUSES = ["Pending", "Sent", "Error"] as const;
+export type UpliftNotificationStatus = (typeof UPLIFT_NOTIFICATION_STATUSES)[number];
+
+export interface UpliftRequest {
+  id: string | number;
+  status: string;
+  currentNTE: number | null;
+  requestedNTE: number;
+  delta: number;
+  vendorReason: string;
+  requestedAt: string;
+  requestedByVendorName: string;
+  decidedAt: string;
+  decidedByName: string;
+  decisionNote: string;
+  requiredTier: number;
+  canDecide: boolean;
+  expiresAt: string;
+  notificationStatus: string;
+  notificationError: string;
+  evidenceDocumentId: string | number | null;
+  evidenceFileName: string;
+  evidenceContentType: string;
+  evidenceSizeBytes: number | null;
+}
+
+export interface UpliftQueueItem extends UpliftRequest {
+  dispatchNumber: string;
+  poNumber: string;
+  vendorCompanyName: string;
+  workOrderId: string | number | null;
+  dispatchId: string | number | null;
+  woNumber: string;
+  site: string;
+  serviceName: string;
+  attachmentCount: number | null;
+  approvedOnWoAuto: number | null;
+  approvedOnWoAdmin: number | null;
+  approvedOnWoTotal: number | null;
+  workOrderClosed: boolean | null;
+}
+
+export interface UpliftsQueueParams {
+  status?: string;
+  tier?: string;
+  page?: number;
+  pageSize?: number;
+}
+
+export interface UpliftsQueueResult {
+  items: UpliftQueueItem[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+  pendingExposureTotal: number | null;
+}
diff --git a/src/domain/uplifts/use-cases/use-uplift-actions.ts b/src/domain/uplifts/use-cases/use-uplift-actions.ts
new file mode 100644
index 00000000..1de4d83b
--- /dev/null
+++ b/src/domain/uplifts/use-cases/use-uplift-actions.ts
@@ -0,0 +1,145 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  type UseMutationResult,
+  type UseQueryResult,
+} from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { upliftsApi } from "@/domain/uplifts/api/uplifts-api";
+import type { UpliftRequest } from "@/domain/uplifts/types/uplift";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+export function useUpliftsForDispatch(
+  dispatchId: string | number | undefined,
+): UseQueryResult<UpliftRequest[], Error> {
+  return useQuery({
+    queryKey: queryKeys.uplifts.forDispatch(dispatchId ?? ""),
+    queryFn: () => upliftsApi.listForDispatch(requireQueryParam(dispatchId, "Dispatch id")),
+    enabled: dispatchId !== undefined && dispatchId !== "",
+  });
+}
+
+function invalidateUpliftQueries(
+  queryClient: ReturnType<typeof useQueryClient>,
+  dispatchId?: string | number,
+) {
+  void queryClient.invalidateQueries({ queryKey: queryKeys.uplifts.all });
+  // Queue decisions update the same uplift records rendered by Work Order views.
+  // Invalidate that shared cache even when the queue has no dispatch context.
+  void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+  if (dispatchId !== undefined && dispatchId !== "") {
+    void queryClient.invalidateQueries({ queryKey: queryKeys.uplifts.forDispatch(dispatchId) });
+    void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.dispatch(dispatchId) });
+    void queryClient.invalidateQueries({ queryKey: queryKeys.vendorPos.detail(dispatchId) });
+  }
+}
+
+function invalidateWorkOrderUpliftQueries(queryClient: ReturnType<typeof useQueryClient>) {
+  void queryClient.invalidateQueries({ queryKey: queryKeys.uplifts.all });
+  void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+}
+
+export interface ApproveUpliftInput {
+  id: string | number;
+  note?: string;
+  amount?: number;
+  woNumber?: string;
+}
+
+export interface DecisionUpliftInput {
+  id: string | number;
+  note: string;
+  amount?: number;
+  woNumber?: string;
+}
+
+function decisionAmount(amount: number | undefined): string {
+  if (amount == null || !Number.isFinite(amount)) return "the requested amount";
+  return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(amount);
+}
+
+function decisionWorkOrder(woNumber: string | undefined): string {
+  return woNumber?.trim() || "the work order";
+}
+
+export function useApproveUplift(
+  dispatchId?: string | number,
+): UseMutationResult<void, Error, ApproveUpliftInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, note }: ApproveUpliftInput) => upliftsApi.approve(id, note),
+    onSuccess: (_, variables) => {
+      invalidateUpliftQueries(queryClient, dispatchId);
+      toast.success(
+        `Uplift approved — ${decisionAmount(variables.amount)} on ${decisionWorkOrder(variables.woNumber)}`,
+      );
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to approve uplift");
+    },
+  });
+}
+
+export function useRejectUplift(
+  dispatchId?: string | number,
+): UseMutationResult<void, Error, DecisionUpliftInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, note }: DecisionUpliftInput) => upliftsApi.reject(id, note),
+    onSuccess: (_, variables) => {
+      invalidateUpliftQueries(queryClient, dispatchId);
+      toast.success(
+        `Uplift rejected — ${decisionAmount(variables.amount)} on ${decisionWorkOrder(variables.woNumber)}`,
+      );
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to reject uplift");
+    },
+  });
+}
+
+export function useRequestChangesUplift(
+  dispatchId?: string | number,
+): UseMutationResult<void, Error, DecisionUpliftInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, note }: { id: string | number; note: string }) =>
+      upliftsApi.requestChanges(id, note),
+    onSuccess: () => {
+      invalidateUpliftQueries(queryClient, dispatchId);
+      toast.success("Changes requested");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to request changes");
+    },
+  });
+}
+
+export interface RevokeUpliftInput {
+  upliftId: string | number;
+  reason: string;
+  amount?: number;
+  woNumber?: string;
+}
+
+export function useRevokeUplift(): UseMutationResult<void, Error, RevokeUpliftInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ upliftId, reason }: RevokeUpliftInput) => upliftsApi.revoke(upliftId, reason),
+    onSuccess: (_, variables) => {
+      invalidateWorkOrderUpliftQueries(queryClient);
+      toast.success(
+        `Uplift revoked — ${decisionAmount(variables.amount)} on ${decisionWorkOrder(variables.woNumber)}`,
+      );
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to revoke uplift");
+    },
+  });
+}
diff --git a/src/domain/uplifts/use-cases/use-uplift-approval-controller.ts b/src/domain/uplifts/use-cases/use-uplift-approval-controller.ts
new file mode 100644
index 00000000..f02e7664
--- /dev/null
+++ b/src/domain/uplifts/use-cases/use-uplift-approval-controller.ts
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import type { UpliftQueueItem } from "@/domain/uplifts/types/uplift";
+import {
+  useApproveUplift,
+  useRejectUplift,
+  useRevokeUplift,
+} from "@/domain/uplifts/use-cases/use-uplift-actions";
+
+export function useUpliftApprovalController() {
+  const [detailItem, setDetailItem] = useState<UpliftQueueItem | null>(null);
+  const [rejectTarget, setRejectTarget] = useState<UpliftQueueItem | null>(null);
+  const [revokeTarget, setRevokeTarget] = useState<UpliftQueueItem | null>(null);
+  const approveUplift = useApproveUplift();
+  const rejectUplift = useRejectUplift();
+  const revokeUplift = useRevokeUplift();
+
+  const handleApprove = (row: UpliftQueueItem) => {
+    approveUplift.mutate({ id: row.id, amount: row.delta, woNumber: row.woNumber });
+    setDetailItem(null);
+  };
+
+  const handleRejectRequest = (row: UpliftQueueItem) => {
+    setDetailItem(null);
+    setRejectTarget(row);
+  };
+
+  const handleRevokeRequest = (row: UpliftQueueItem) => {
+    setDetailItem(null);
+    setRevokeTarget(row);
+  };
+
+  const handleRejectConfirm = (reason: string) => {
+    if (!rejectTarget) return;
+    rejectUplift.mutate(
+      {
+        id: rejectTarget.id,
+        note: reason,
+        amount: rejectTarget.delta,
+        woNumber: rejectTarget.woNumber,
+      },
+      { onSuccess: () => setRejectTarget(null) },
+    );
+  };
+
+  const handleRevokeConfirm = (reason: string) => {
+    if (!revokeTarget) return;
+    revokeUplift.mutate(
+      {
+        upliftId: revokeTarget.id,
+        reason,
+        amount: revokeTarget.delta,
+        woNumber: revokeTarget.woNumber,
+      },
+      { onSuccess: () => setRevokeTarget(null) },
+    );
+  };
+
+  return {
+    detailItem,
+    rejectTarget,
+    revokeTarget,
+    approvePending: approveUplift.isPending,
+    rejectPending: rejectUplift.isPending,
+    revokePending: revokeUplift.isPending,
+    handleApprove,
+    handleRejectRequest,
+    handleRevokeRequest,
+    handleRejectConfirm,
+    handleRevokeConfirm,
+    closeDetail: () => setDetailItem(null),
+    closeReject: () => setRejectTarget(null),
+    closeRevoke: () => setRevokeTarget(null),
+    openDetail: setDetailItem,
+  };
+}
diff --git a/src/domain/uplifts/use-cases/use-uplifts-can-approve.ts b/src/domain/uplifts/use-cases/use-uplifts-can-approve.ts
new file mode 100644
index 00000000..1b9dd971
--- /dev/null
+++ b/src/domain/uplifts/use-cases/use-uplifts-can-approve.ts
@@ -0,0 +1,17 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { upliftsApi } from "@/domain/uplifts/api/uplifts-api";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+/**
+ * Backend-authoritative answer to "may the current user decide uplifts at this
+ * tier?" (GET uplifts/can-approve). Combines with the per-row canDecide signal
+ * so decision controls stay disabled for roles the backend would refuse.
+ */
+export function useUpliftsCanApprove(tier: number): UseQueryResult<boolean, Error> {
+  return useQuery({
+    queryKey: queryKeys.uplifts.canApprove(tier),
+    queryFn: () => upliftsApi.canApprove(tier),
+    staleTime: 5 * 60 * 1000,
+    retry: 1,
+  });
+}
diff --git a/src/domain/uplifts/use-cases/use-uplifts-queue.ts b/src/domain/uplifts/use-cases/use-uplifts-queue.ts
new file mode 100644
index 00000000..9ebcf4bd
--- /dev/null
+++ b/src/domain/uplifts/use-cases/use-uplifts-queue.ts
@@ -0,0 +1,14 @@
+import { keepPreviousData, useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { upliftsApi } from "@/domain/uplifts/api/uplifts-api";
+import type { UpliftsQueueParams, UpliftsQueueResult } from "@/domain/uplifts/types/uplift";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useUpliftsQueue(
+  params: UpliftsQueueParams,
+): UseQueryResult<UpliftsQueueResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.uplifts.queue(params as Record<string, unknown>),
+    queryFn: () => upliftsApi.list(params),
+    placeholderData: keepPreviousData,
+  });
+}
diff --git a/src/domain/vendor-operations/api/vendor-operations-api.ts b/src/domain/vendor-operations/api/vendor-operations-api.ts
new file mode 100644
index 00000000..9c982840
--- /dev/null
+++ b/src/domain/vendor-operations/api/vendor-operations-api.ts
@@ -0,0 +1,87 @@
+import { apiGet, apiPut, apiRequestRaw } from "@/api/api";
+import type {
+  SiteVendorPreference,
+  VendorAssignmentResult,
+  VendorAvailability,
+  VendorAssignmentPayload,
+  VendorInsight,
+  VendorNotification,
+} from "@/domain/vendor-operations/types/vendor-operations";
+
+const base = "vendor-operations";
+
+function searchParams(values: Record<string, string | number | undefined>) {
+  return Object.fromEntries(
+    Object.entries(values).filter(
+      (entry): entry is [string, string | number] => entry[1] !== undefined,
+    ),
+  );
+}
+
+type InsightParams = {
+  from?: string;
+  to?: string;
+  locationId?: string | number;
+  trade?: string;
+  vendorId?: string | number;
+};
+
+async function saveDownload(path: string, fileName: string, params: InsightParams): Promise<void> {
+  const response = await apiRequestRaw(
+    "get",
+    `${base}/${path}`,
+    { searchParams: searchParams(params) },
+    "vendorOperationsApi.saveDownload",
+  );
+  const blob = await response.blob();
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = fileName;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+
+export const vendorOperationsApi = {
+  notifications: async (): Promise<VendorNotification[]> => {
+    const response = await apiGet<{ items?: VendorNotification[]; Items?: VendorNotification[] }>(
+      `${base}/notifications`,
+    );
+    return response.items ?? response.Items ?? [];
+  },
+
+  availability: async (params: {
+    start?: string;
+    end?: string;
+    locationId?: string | number;
+    trade?: string;
+  }): Promise<VendorAvailability[]> => {
+    const response = await apiGet<{ data?: VendorAvailability[]; Data?: VendorAvailability[] }>(
+      `${base}/availability`,
+      { searchParams: searchParams(params) },
+    );
+    return response.data ?? response.Data ?? [];
+  },
+
+  insights: async (params: InsightParams): Promise<VendorInsight[]> => {
+    const response = await apiGet<{ data?: VendorInsight[]; Data?: VendorInsight[] }>(
+      `${base}/insights`,
+      { searchParams: searchParams(params) },
+    );
+    return response.data ?? response.Data ?? [];
+  },
+
+  downloadInsights: (format: "csv" | "pdf", params: InsightParams) =>
+    saveDownload(`insights.${format}`, `vendor-insights.${format}`, params),
+
+  sitePreferences: (locationId: string | number) =>
+    apiGet<SiteVendorPreference[]>(`${base}/sites/${locationId}/preferred-vendors`),
+
+  replaceSitePreferences: (
+    locationId: string | number,
+    preferences: Array<{ vendorId: number; trade?: string; sortOrder: number }>,
+  ) => apiPut<SiteVendorPreference[]>(`${base}/sites/${locationId}/preferred-vendors`, preferences),
+
+  assignVendor: (workOrderId: string | number, payload: VendorAssignmentPayload) =>
+    apiPut<VendorAssignmentResult>(`${base}/work-orders/${workOrderId}/assignment`, payload),
+};
diff --git a/src/domain/vendor-operations/types/vendor-operations.ts b/src/domain/vendor-operations/types/vendor-operations.ts
new file mode 100644
index 00000000..246178da
--- /dev/null
+++ b/src/domain/vendor-operations/types/vendor-operations.ts
@@ -0,0 +1,79 @@
+export interface VendorNotificationAction {
+  label: string;
+  href: string;
+}
+
+export interface VendorNotification {
+  id: string;
+  type: "NoVendor" | "VendorConflict";
+  severity: "Medium";
+  group: "No Vendor" | "Vendor Conflict";
+  title: string;
+  workOrderId?: number;
+  workOrderNumber?: string;
+  triggeredAt: string;
+  scheduledAt?: string;
+  action?: VendorNotificationAction;
+  actions?: VendorNotificationAction[];
+  workOrders?: Array<{
+    workOrderId: number;
+    workOrderNumber?: string;
+    start: string;
+    end: string;
+  }>;
+}
+
+export interface VendorAvailability {
+  id: number;
+  companyName: string;
+  contactName?: string;
+  tradeSpecialties?: string;
+  availabilityStatus: "Available" | "Unavailable" | "Unknown";
+  availabilityUpdatedAt?: string;
+  isPreferred: boolean;
+  preferenceRank?: number;
+  conflicts: Array<{
+    workOrderId: number;
+    workOrderNumber?: string;
+    start: string;
+    end: string;
+  }>;
+}
+
+export interface VendorInsight {
+  vendorId: number;
+  vendor: string;
+  completedJobs: number;
+  cancellationRefusalRate: number;
+  onTimeArrivalRate: number;
+  onTimeCompletionRate: number;
+  averageCycleHours?: number;
+}
+
+export interface SiteVendorPreference {
+  id: number;
+  locationId: number;
+  vendorId: number;
+  vendorName: string;
+  trade?: string;
+  sortOrder: number;
+  isStale: boolean;
+}
+
+export interface VendorAssignmentPayload {
+  vendorId: number;
+  scheduledStart?: string;
+  scheduledEnd?: string;
+  estimatedArrivalAt?: string;
+  etaManualOverride: boolean;
+}
+
+export interface VendorAssignmentResult {
+  availabilityStatus: "Available" | "Unavailable" | "Unknown";
+  conflicts: Array<{
+    workOrderId: number;
+    workOrderNumber?: string;
+    start: string;
+    end: string;
+  }>;
+}
diff --git a/src/domain/vendor-portal/api/vendor-portal-api.ts b/src/domain/vendor-portal/api/vendor-portal-api.ts
new file mode 100644
index 00000000..5e16c3e0
--- /dev/null
+++ b/src/domain/vendor-portal/api/vendor-portal-api.ts
@@ -0,0 +1,292 @@
+import { API_PATHS } from "@/api/api-paths";
+import { env } from "@/lib/env";
+import { resolveApiBaseUrl } from "@/lib/resolve-api-prefix-url";
+import { traceHttpOperation } from "@/observability/http-transaction";
+import type {
+  VendorPortalComment,
+  VendorPortalDispatchDetail,
+  VendorPortalDispatchSummary,
+  VendorPortalDocument,
+  VendorPortalDocumentStatus,
+  VendorPortalSession,
+  VendorPortalSignoff,
+  VendorUpliftRequestBody,
+  VendorUpliftRequestOutcome,
+  VendorUpliftReviseBody,
+} from "@/domain/vendor-portal/types/vendor-portal";
+
+function resolveVendorPortalUrl(path: string): string {
+  const base = resolveApiBaseUrl(env.apiUrl);
+  return `${base}/${API_PATHS.vendorPortal.base}${path}`;
+}
+
+export const VENDOR_EVIDENCE_PURPOSE = "UpliftEvidence" as const;
+
+type UploadVendorDocumentOptions = {
+  token: string;
+  dispatchId: string | number;
+  file: File;
+  replacesDocumentId?: number;
+  purpose?: string;
+  onProgress: (percent: number) => void;
+};
+
+function uploadVendorDocument({
+  token,
+  dispatchId,
+  file,
+  replacesDocumentId,
+  purpose,
+  onProgress,
+}: UploadVendorDocumentOptions): Promise<VendorPortalDocument> {
+  return traceHttpOperation(
+    {
+      method: "POST",
+      url: resolveVendorPortalUrl(`/dispatches/${dispatchId}/documents`),
+      entryPoint: "vendorPortalApi.uploadDocument",
+      actorType: "vendor_link",
+    },
+    ({ reportStatus }) =>
+      new Promise<VendorPortalDocument>((resolve, reject) => {
+        const request = new XMLHttpRequest();
+        request.open("POST", resolveVendorPortalUrl(`/dispatches/${dispatchId}/documents`));
+        request.setRequestHeader("X-Vendor-Token", token);
+        request.upload.addEventListener("progress", (event) => {
+          if (event.lengthComputable) onProgress(Math.round((event.loaded / event.total) * 100));
+        });
+        request.addEventListener("load", () => {
+          reportStatus(request.status);
+          const payload = JSON.parse(request.responseText || "{}") as Record<string, unknown>;
+          if (request.status < 200 || request.status >= 300) {
+            reject(
+              new Error(String(payload.message ?? payload.Message ?? `HTTP ${request.status}`)),
+            );
+            return;
+          }
+          resolve((payload.data ?? payload.Data ?? payload) as VendorPortalDocument);
+        });
+        request.addEventListener("error", () => {
+          reportStatus(request.status);
+          reject(new Error("Upload failed"));
+        });
+        const body = new FormData();
+        body.append("file", file);
+        if (replacesDocumentId !== undefined) {
+          body.append("replacesDocumentId", String(replacesDocumentId));
+        }
+        body.append("purpose", purpose ?? "Completion");
+        request.send(body);
+      }),
+  );
+}
+
+async function downloadVendorDocument(
+  token: string,
+  dispatchId: string | number,
+  document: VendorPortalDocument,
+): Promise<void> {
+  await traceHttpOperation(
+    {
+      method: "GET",
+      url: resolveVendorPortalUrl(`/dispatches/${dispatchId}/documents/${document.id}`),
+      entryPoint: "vendorPortalApi.downloadDocument",
+      actorType: "vendor_link",
+    },
+    async ({ reportStatus }) => {
+      const response = await fetch(
+        resolveVendorPortalUrl(`/dispatches/${dispatchId}/documents/${document.id}`),
+        { headers: { "X-Vendor-Token": token } },
+      );
+      reportStatus(response.status);
+      if (!response.ok)
+        throw new Error(
+          response.status === 423 ? "File is still being scanned" : "Download failed",
+        );
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const anchor = window.document.createElement("a");
+      anchor.href = url;
+      anchor.download = document.originalFileName;
+      anchor.click();
+      URL.revokeObjectURL(url);
+    },
+  );
+}
+
+async function vendorPortalCall<T>(
+  token: string,
+  path: string,
+  options?: { method?: string; body?: unknown },
+): Promise<T> {
+  return traceHttpOperation<T>(
+    {
+      method: options?.method ?? "GET",
+      url: resolveVendorPortalUrl(path),
+      entryPoint: "vendorPortalApi.call",
+      actorType: "vendor_link",
+    },
+    async ({ reportStatus }) => {
+      const response = await fetch(resolveVendorPortalUrl(path), {
+        method: options?.method ?? "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Vendor-Token": token,
+        },
+        body: options?.body ? JSON.stringify(options.body) : undefined,
+      });
+      reportStatus(response.status);
+
+      if (response.status === 401) {
+        throw new Error("Invalid or expired token");
+      }
+
+      const payload = (await response.json().catch(() => ({}))) as Record<string, unknown>;
+
+      if (!response.ok) {
+        const message =
+          (typeof payload.message === "string" ? payload.message : undefined) ??
+          (typeof payload.Message === "string" ? payload.Message : undefined) ??
+          `HTTP ${response.status}`;
+        throw new Error(message);
+      }
+
+      return (payload.data ?? payload.Data ?? payload) as T;
+    },
+  );
+}
+
+function isNoApprovalRequired(payload: unknown): boolean {
+  if (typeof payload !== "object" || payload === null) return false;
+  const record = payload as Record<string, unknown>;
+  return (
+    record.outcome === "NoApprovalRequired" ||
+    record.status === "NoApprovalRequired" ||
+    record.noApprovalRequired === true
+  );
+}
+
+function toVendorUpliftOutcome(payload: unknown): VendorUpliftRequestOutcome {
+  if (isNoApprovalRequired(payload)) {
+    return { outcome: "NoApprovalRequired" };
+  }
+  return { outcome: "Created" };
+}
+
+export const vendorPortalApi = {
+  session: (token: string) =>
+    vendorPortalCall<VendorPortalSession>(token, API_PATHS.vendorPortal.session),
+
+  listDispatches: (token: string, status?: string) =>
+    vendorPortalCall<VendorPortalDispatchSummary[]>(
+      token,
+      status
+        ? `${API_PATHS.vendorPortal.dispatches}?status=${encodeURIComponent(status)}`
+        : API_PATHS.vendorPortal.dispatches,
+    ),
+
+  getDispatch: (token: string, id: string | number) =>
+    vendorPortalCall<VendorPortalDispatchDetail>(
+      token,
+      `${API_PATHS.vendorPortal.dispatches}/${id}`,
+    ),
+
+  accept: (token: string, id: string | number) =>
+    vendorPortalCall<void>(token, `${API_PATHS.vendorPortal.dispatches}/${id}/accept`, {
+      method: "POST",
+    }),
+
+  refuse: (token: string, id: string | number, reason?: string) =>
+    vendorPortalCall<{ id: number; status: string; refusedAt?: string }>(
+      token,
+      `${API_PATHS.vendorPortal.dispatches}/${id}/refuse`,
+      {
+        method: "POST",
+        body: reason ? { reason } : {},
+      },
+    ),
+
+  changeStatus: (token: string, id: string | number, status: string) =>
+    vendorPortalCall<void>(token, `${API_PATHS.vendorPortal.dispatches}/${id}/status`, {
+      method: "POST",
+      body: { status },
+    }),
+
+  requestCancel: (token: string, id: string | number, reason: string) =>
+    vendorPortalCall<void>(token, `${API_PATHS.vendorPortal.dispatches}/${id}/request-cancel`, {
+      method: "POST",
+      body: { reason },
+    }),
+
+  updateChecklistItem: (
+    token: string,
+    id: string | number,
+    itemId: string | number,
+    isCompleted: boolean,
+  ) =>
+    vendorPortalCall<VendorPortalDispatchDetail["checklist"][number]>(
+      token,
+      `${API_PATHS.vendorPortal.dispatches}/${id}/checklist/${itemId}`,
+      { method: "POST", body: { isCompleted } },
+    ),
+
+  addSignoff: (
+    token: string,
+    id: string | number,
+    payload: {
+      name: string;
+      signature: string;
+      signatureMethod: string;
+      signoffType: string;
+    },
+  ) =>
+    vendorPortalCall<VendorPortalSignoff>(
+      token,
+      `${API_PATHS.vendorPortal.dispatches}/${id}/signoff`,
+      { method: "POST", body: payload },
+    ),
+
+  addComment: (token: string, id: string | number, commentText: string) =>
+    vendorPortalCall<VendorPortalComment>(
+      token,
+      `${API_PATHS.vendorPortal.dispatches}/${id}/comments`,
+      { method: "POST", body: { commentText } },
+    ),
+
+  requestUplift: (token: string, dispatchId: string | number, payload: VendorUpliftRequestBody) =>
+    vendorPortalCall<VendorUpliftRequestOutcome>(
+      token,
+      `${API_PATHS.vendorPortal.dispatches}/${dispatchId}/uplift-request`,
+      {
+        method: "POST",
+        body: payload,
+      },
+    ).then(toVendorUpliftOutcome),
+
+  withdrawUplift: (token: string, dispatchId: string | number, requestId: string | number) =>
+    vendorPortalCall<void>(
+      token,
+      `${API_PATHS.vendorPortal.dispatches}/${dispatchId}/uplift-request/${requestId}/withdraw`,
+      { method: "POST" },
+    ),
+
+  reviseUplift: (
+    token: string,
+    dispatchId: string | number,
+    requestId: string | number,
+    payload: VendorUpliftReviseBody,
+  ) =>
+    vendorPortalCall<void>(
+      token,
+      `${API_PATHS.vendorPortal.dispatches}/${dispatchId}/uplift-request/${requestId}/revise`,
+      { method: "POST", body: payload },
+    ),
+
+  getDocumentStatus: (token: string, dispatchId: string | number, documentId: string | number) =>
+    vendorPortalCall<VendorPortalDocumentStatus>(
+      token,
+      `${API_PATHS.vendorPortal.dispatches}/${dispatchId}/documents/${documentId}/status`,
+    ),
+
+  uploadDocument: uploadVendorDocument,
+  downloadDocument: downloadVendorDocument,
+};
diff --git a/src/domain/vendor-portal/lib/dispatch-filters.ts b/src/domain/vendor-portal/lib/dispatch-filters.ts
new file mode 100644
index 00000000..c7f31007
--- /dev/null
+++ b/src/domain/vendor-portal/lib/dispatch-filters.ts
@@ -0,0 +1,71 @@
+import type { VendorPortalDispatchSummary } from "@/domain/vendor-portal/types/vendor-portal";
+import {
+  isVendorPortalTerminalStatus,
+  isVendorPortalUpcomingDispatch,
+} from "@/domain/vendor-portal/lib/status-helpers";
+
+export interface VendorPortalDispatchFilter {
+  key: VendorPortalDispatchFilterKey;
+  label: string;
+  match: (dispatch: VendorPortalDispatchSummary) => boolean;
+  sort?: (dispatches: VendorPortalDispatchSummary[]) => VendorPortalDispatchSummary[];
+}
+
+export type VendorPortalDispatchFilterKey =
+  "open" | "upcoming" | "completed" | "refused" | "cancelled" | "all";
+
+const sortUpcomingByScheduledDateAscending = (
+  dispatches: VendorPortalDispatchSummary[],
+): VendorPortalDispatchSummary[] =>
+  [...dispatches].sort((left, right) => {
+    const leftTime = left.scheduledDate ? new Date(left.scheduledDate).getTime() : 0;
+    const rightTime = right.scheduledDate ? new Date(right.scheduledDate).getTime() : 0;
+    return leftTime - rightTime;
+  });
+
+export const VENDOR_PORTAL_DISPATCH_FILTERS: readonly VendorPortalDispatchFilter[] = [
+  {
+    key: "open",
+    label: "Open",
+    match: (dispatch) => !isVendorPortalTerminalStatus(dispatch.status),
+  },
+  {
+    key: "upcoming",
+    label: "Upcoming",
+    match: (dispatch) => isVendorPortalUpcomingDispatch(dispatch),
+    sort: sortUpcomingByScheduledDateAscending,
+  },
+  {
+    key: "completed",
+    label: "Completed",
+    match: (dispatch) => dispatch.status === "Completed" || dispatch.status === "Verified",
+  },
+  {
+    key: "refused",
+    label: "Refused",
+    match: (dispatch) => dispatch.status === "Refused",
+  },
+  {
+    key: "cancelled",
+    label: "Cancelled",
+    match: (dispatch) => dispatch.status === "Cancelled",
+  },
+  { key: "all", label: "All", match: () => true },
+] as const;
+
+export function getVendorPortalDispatchFilter(
+  key: VendorPortalDispatchFilterKey,
+): VendorPortalDispatchFilter {
+  return (
+    VENDOR_PORTAL_DISPATCH_FILTERS.find((filter) => filter.key === key) ??
+    VENDOR_PORTAL_DISPATCH_FILTERS[0]
+  );
+}
+
+export function applyVendorPortalDispatchFilter(
+  dispatches: VendorPortalDispatchSummary[],
+  filter: VendorPortalDispatchFilter,
+): VendorPortalDispatchSummary[] {
+  const matched = dispatches.filter(filter.match);
+  return filter.sort ? filter.sort(matched) : matched;
+}
diff --git a/src/domain/vendor-portal/lib/document-validation.ts b/src/domain/vendor-portal/lib/document-validation.ts
new file mode 100644
index 00000000..3c1f5203
--- /dev/null
+++ b/src/domain/vendor-portal/lib/document-validation.ts
@@ -0,0 +1,12 @@
+const MAX_DOCUMENT_BYTES = 10 * 1024 * 1024;
+const ALLOWED_DOCUMENT_TYPES = new Set(["application/pdf", "image/jpeg", "image/png"]);
+
+export function validateVendorDocument(file: File): string | undefined {
+  if (!ALLOWED_DOCUMENT_TYPES.has(file.type)) {
+    return "Only PDF, JPG, and PNG files are allowed.";
+  }
+
+  if (file.size > MAX_DOCUMENT_BYTES) {
+    return "Files must be 10 MB or smaller.";
+  }
+}
diff --git a/src/domain/vendor-portal/lib/request-key.ts b/src/domain/vendor-portal/lib/request-key.ts
new file mode 100644
index 00000000..91470703
--- /dev/null
+++ b/src/domain/vendor-portal/lib/request-key.ts
@@ -0,0 +1,6 @@
+export function createUpliftRequestKey(): string {
+  if (typeof globalThis.crypto?.randomUUID !== "function") {
+    throw new Error("Secure request identifiers are unavailable in this browser");
+  }
+  return globalThis.crypto.randomUUID();
+}
diff --git a/src/domain/vendor-portal/lib/status-helpers.ts b/src/domain/vendor-portal/lib/status-helpers.ts
new file mode 100644
index 00000000..40637304
--- /dev/null
+++ b/src/domain/vendor-portal/lib/status-helpers.ts
@@ -0,0 +1,57 @@
+export function vendorPortalStatusClass(status: string): string {
+  const map: Record<string, string> = {
+    Sent: "vp-status-sent",
+    Acknowledged: "vp-status-acknowledged",
+    "In Progress": "vp-status-in-progress",
+    Completed: "vp-status-completed",
+    Verified: "vp-status-verified",
+    Cancelled: "vp-status-cancelled",
+    Refused: "vp-status-refused",
+  };
+
+  return `vp-status-pill ${map[status] ?? ""}`;
+}
+
+export function formatVendorPortalDateTime(value?: string): string {
+  if (!value) {
+    return "";
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+
+  return date.toLocaleString();
+}
+
+const TERMINAL_STATUSES = new Set(["Completed", "Verified", "Cancelled", "Refused"]);
+const LOCKED_STATUSES = new Set(["Verified", "Cancelled", "Refused"]);
+
+export function isVendorPortalTerminalStatus(status: string): boolean {
+  return TERMINAL_STATUSES.has(status);
+}
+
+export function isVendorPortalLockedStatus(status: string): boolean {
+  return LOCKED_STATUSES.has(status);
+}
+
+export function isVendorPortalUpcomingDispatch(
+  dispatch: { status: string; scheduledDate?: string },
+  now: Date = new Date(),
+): boolean {
+  if (isVendorPortalTerminalStatus(dispatch.status)) {
+    return false;
+  }
+
+  if (!dispatch.scheduledDate) {
+    return false;
+  }
+
+  const scheduled = new Date(dispatch.scheduledDate);
+  if (Number.isNaN(scheduled.getTime())) {
+    return false;
+  }
+
+  return scheduled.getTime() >= now.getTime();
+}
diff --git a/src/domain/vendor-portal/lib/uplift-validation.ts b/src/domain/vendor-portal/lib/uplift-validation.ts
new file mode 100644
index 00000000..b8fafe04
--- /dev/null
+++ b/src/domain/vendor-portal/lib/uplift-validation.ts
@@ -0,0 +1,54 @@
+export type UpliftFormValues = {
+  amount: number;
+  reason: string;
+  evidenceFile?: File;
+};
+
+export type UpliftMode = "create" | "revise";
+
+export type UpliftValidationOptions = {
+  file?: File;
+  hasExisting?: boolean;
+  mode?: UpliftMode;
+};
+
+export function isApprovalRequired(
+  requested: string,
+  currentNte: number | undefined,
+  mode: UpliftMode = "create",
+): boolean {
+  const amount = Number.parseFloat(requested);
+  if (!Number.isFinite(amount)) {
+    return currentNte == null;
+  }
+  if (mode === "revise") {
+    return true;
+  }
+  return currentNte == null || amount > currentNte;
+}
+
+export function validateUpliftAmount(
+  requested: string,
+  currentNte: number | undefined,
+  reason: string,
+  options: UpliftValidationOptions = {},
+): string {
+  const mode = options.mode ?? "create";
+  const amount = Number.parseFloat(requested);
+  if (!Number.isFinite(amount) || amount <= 0) {
+    return "Enter a valid requested NTE amount.";
+  }
+  if (mode === "revise" && currentNte != null && amount <= currentNte) {
+    return `The revised NTE must be greater than the current NTE ($${currentNte.toFixed(2)}).`;
+  }
+  if (!isApprovalRequired(requested, currentNte, mode)) {
+    return "";
+  }
+  if (!reason.trim()) {
+    return "Please include a reason for the uplift request.";
+  }
+  if (!options.file && !options.hasExisting) {
+    return "Attach PDF, JPG, or PNG evidence — approval-required requests need evidence.";
+  }
+  return "";
+}
diff --git a/src/domain/vendor-portal/schemas/refuse-dispatch-schema.ts b/src/domain/vendor-portal/schemas/refuse-dispatch-schema.ts
new file mode 100644
index 00000000..6e4fc24b
--- /dev/null
+++ b/src/domain/vendor-portal/schemas/refuse-dispatch-schema.ts
@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+export const REFUSE_REASON_MAX_LENGTH = 500;
+
+export const refuseDispatchSchema = z.object({
+  reason: z.string().max(REFUSE_REASON_MAX_LENGTH, "Reason must be 500 characters or fewer."),
+});
+
+export type RefuseDispatchValues = z.infer<typeof refuseDispatchSchema>;
diff --git a/src/domain/vendor-portal/types/vendor-portal.ts b/src/domain/vendor-portal/types/vendor-portal.ts
new file mode 100644
index 00000000..d9853b07
--- /dev/null
+++ b/src/domain/vendor-portal/types/vendor-portal.ts
@@ -0,0 +1,140 @@
+export interface VendorPortalSession {
+  companyName?: string;
+  vendorId?: number;
+}
+
+export interface VendorPortalDispatchSummary {
+  id: number;
+  dispatchNumber: string;
+  workOrderTitle?: string;
+  internalWONumber?: string;
+  locationName?: string;
+  locationCity?: string;
+  locationState?: string;
+  scheduledDate?: string;
+  status: string;
+  poNumber?: string;
+  invoiceNumber?: string;
+  invoiceStatus?: string;
+  paymentStatus?: string;
+  nteAmount?: number;
+  dispatchedAt?: string;
+  completedDate?: string;
+  refusedAt?: string;
+}
+
+export interface VendorPortalDocument {
+  id: number;
+  originalFileName: string;
+  contentType: string;
+  sizeBytes: number;
+  scanStatus: "Pending" | "Passed" | "Rejected";
+  reviewStatus: "Processing" | "Approved" | "Rejected";
+  rejectionReason?: string;
+  version: number;
+  replacesDocumentId?: number;
+  purpose?: string;
+  createdDate?: string;
+  scannedAt?: string;
+  reviewedAt?: string;
+  canDownload: boolean;
+}
+
+export type VendorPortalDocumentStatus = Pick<
+  VendorPortalDocument,
+  "id" | "originalFileName" | "scanStatus" | "reviewStatus" | "purpose"
+>;
+
+export interface VendorPortalChecklistItem {
+  id: number;
+  itemText: string;
+  isCompleted: boolean;
+  completedAt?: string;
+}
+
+export interface VendorPortalComment {
+  id: number;
+  commenter?: string;
+  commenttext?: string;
+  commentType?: string;
+  createdDate?: string;
+}
+
+export interface VendorPortalUpliftRequest {
+  id: number;
+  status: string;
+  requestedNTE: number;
+  currentNTE?: number;
+  vendorReason?: string;
+  requestedAt?: string;
+  decidedAt?: string;
+  decidedByName?: string;
+  decisionNote?: string;
+  requiredTier?: number;
+  expiresAt?: string;
+  notificationStatus?: string;
+  notificationError?: string;
+  evidenceDocumentId?: number;
+  evidenceFileName?: string;
+  evidenceContentType?: string;
+  evidenceSizeBytes?: number;
+}
+
+export type VendorUpliftRequestOutcome =
+  { outcome: "NoApprovalRequired" } | { outcome: "Created"; request?: VendorPortalUpliftRequest };
+
+export interface VendorUpliftRequestBody {
+  requestedNTE: number;
+  reason: string;
+  requestKey: string;
+  evidenceDocumentId?: number;
+}
+
+export interface VendorUpliftReviseBody {
+  requestedNTE: number;
+  reason: string;
+  evidenceDocumentId?: number;
+}
+
+export interface VendorPortalSignoff {
+  signoffType: string;
+  name: string;
+  signatureMethod: string;
+  signedAt?: string;
+}
+
+export interface VendorPortalDispatcherContact {
+  name?: string;
+  email?: string;
+  phone?: string;
+}
+
+export interface VendorPortalDispatchDetail extends VendorPortalDispatchSummary {
+  description?: string;
+  acknowledgedAt?: string;
+  statusUpdatedAt?: string;
+  dispatcherContact?: VendorPortalDispatcherContact;
+  workOrder?: {
+    workerOrderTitle?: string;
+    internalWONumber?: string;
+    priority?: string;
+    trade?: string;
+    subTrade?: string;
+    siteCode?: string;
+    service?: string;
+    problem?: string;
+    description?: string;
+  };
+  location?: {
+    name?: string;
+    address?: string;
+    city?: string;
+    state?: string;
+    zipCode?: string;
+  };
+  checklist: VendorPortalChecklistItem[];
+  comments: VendorPortalComment[];
+  upliftRequests: VendorPortalUpliftRequest[];
+  signoffs: VendorPortalSignoff[];
+  documents: VendorPortalDocument[];
+}
diff --git a/src/domain/vendor-pos/api/vendor-pos-api.ts b/src/domain/vendor-pos/api/vendor-pos-api.ts
new file mode 100644
index 00000000..ef8b1d72
--- /dev/null
+++ b/src/domain/vendor-pos/api/vendor-pos-api.ts
@@ -0,0 +1,57 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiGet } from "@/api/api";
+import { handleApiResponse } from "@/api/handle-api-response";
+import {
+  mapVendorPoDetail,
+  mapVendorPoListItem,
+} from "@/domain/vendor-pos/mappers/vendor-po-mapper";
+import type {
+  VendorPoDetail,
+  VendorPoListParams,
+  VendorPoListResult,
+} from "@/domain/vendor-pos/types/vendor-po";
+
+function buildListParams(params: VendorPoListParams): Record<string, string | number> {
+  const searchParams: Record<string, string | number> = {
+    page: params.page ?? 1,
+    pageSize: params.pageSize ?? 12,
+    sortBy: params.sortBy ?? "dispatchedAt",
+    sortDir: params.sortDir ?? "desc",
+  };
+  if (params.search) searchParams.search = params.search;
+  if (params.status) searchParams.status = params.status;
+  if (params.vendorId) searchParams.vendorId = params.vendorId;
+  if (params.dateFrom) searchParams.dateFrom = params.dateFrom;
+  if (params.dateTo) searchParams.dateTo = params.dateTo;
+  return searchParams;
+}
+
+export const vendorPosApi = {
+  getList: async (params: VendorPoListParams = {}): Promise<VendorPoListResult> => {
+    const data = await apiGet<unknown>(API_PATHS.rest.dispatches, {
+      searchParams: buildListParams(params),
+    });
+    const response = handleApiResponse<Record<string, unknown>>(data);
+    const items = Array.isArray(response?.items)
+      ? response.items
+      : Array.isArray((response as { data?: unknown[] })?.data)
+        ? (response as { data: unknown[] }).data
+        : [];
+    const total =
+      (typeof response?.total === "number" ? response.total : undefined) ??
+      (typeof response?.totalCount === "number" ? response.totalCount : undefined) ??
+      items.length;
+
+    return {
+      items: items.map(mapVendorPoListItem),
+      totalCount: total,
+      page: params.page ?? 1,
+      pageSize: params.pageSize ?? 12,
+    };
+  },
+
+  getById: async (id: string | number): Promise<VendorPoDetail> => {
+    const data = await apiGet<unknown>(`${API_PATHS.rest.dispatches}/${id}`);
+    return mapVendorPoDetail(handleApiResponse(data));
+  },
+};
diff --git a/src/domain/vendor-pos/mappers/vendor-po-mapper.ts b/src/domain/vendor-pos/mappers/vendor-po-mapper.ts
new file mode 100644
index 00000000..7921e935
--- /dev/null
+++ b/src/domain/vendor-pos/mappers/vendor-po-mapper.ts
@@ -0,0 +1,196 @@
+import type {
+  VendorPoAuditEntry,
+  VendorPoChecklistItem,
+  VendorPoComment,
+  VendorPoDetail,
+  VendorPoListItem,
+  VendorPoLocation,
+  VendorPoSignoff,
+  VendorPoVendor,
+  VendorPoWorkOrder,
+} from "@/domain/vendor-pos/types/vendor-po";
+import { mapUpliftRequests } from "@/domain/uplifts/mappers/uplift-mapper";
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") return value;
+    if (typeof value === "number") return String(value);
+  }
+  return "";
+}
+
+function readId(record: Record<string, unknown>): string | number {
+  const value = record.id ?? record.Id;
+  if (typeof value === "string" || typeof value === "number") return value;
+  return "";
+}
+
+function readNumber(record: Record<string, unknown>, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number") return value;
+    if (typeof value === "string" && value !== "") {
+      const parsed = Number(value);
+      if (!Number.isNaN(parsed)) return parsed;
+    }
+  }
+  return null;
+}
+
+function readBool(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") return value;
+  }
+  return false;
+}
+
+export function mapVendorPoListItem(raw: unknown): VendorPoListItem {
+  const item = asRecord(raw);
+  return {
+    id: readId(item),
+    poNumber: readString(item, "poNumber", "PONumber"),
+    dispatchNumber: readString(item, "dispatchNumber", "DispatchNumber"),
+    vendorName: readString(item, "vendorName", "VendorName"),
+    primaryWOInternalNumber: readString(item, "primaryWOInternalNumber", "PrimaryWOInternalNumber"),
+    workOrderCount: readNumber(item, "workOrderCount", "WorkOrderCount") ?? 0,
+    locationName: readString(item, "locationName", "LocationName"),
+    nteAmount: readNumber(item, "nteAmount", "NTEAmount"),
+    status: readString(item, "status", "Status"),
+    pendingUpliftCount: readNumber(item, "pendingUpliftCount", "PendingUpliftCount") ?? 0,
+    dispatchedAt: readString(item, "dispatchedAt", "DispatchedAt"),
+    scheduledDate: readString(item, "scheduledDate", "ScheduledDate"),
+    completedDate: readString(item, "completedDate", "CompletedDate"),
+  };
+}
+
+function mapVendor(raw: unknown): VendorPoVendor | null {
+  if (!raw) return null;
+  const item = asRecord(raw);
+  return {
+    companyName: readString(item, "companyName", "CompanyName"),
+    contactName: readString(item, "contactName", "ContactName"),
+    email: readString(item, "email", "Email"),
+    phone: readString(item, "phone", "Phone"),
+    address: readString(item, "address", "Address"),
+    city: readString(item, "city", "City"),
+    state: readString(item, "state", "State"),
+    zip: readString(item, "zip", "Zip", "zipCode"),
+    tradeSpecialties: readString(item, "tradeSpecialties", "TradeSpecialties"),
+  };
+}
+
+function mapLocation(raw: unknown): VendorPoLocation | null {
+  if (!raw) return null;
+  const item = asRecord(raw);
+  return {
+    name: readString(item, "name", "Name"),
+    address: readString(item, "address", "Address"),
+    city: readString(item, "city", "City"),
+    state: readString(item, "state", "State"),
+    zipCode: readString(item, "zipCode", "ZipCode", "zip"),
+  };
+}
+
+function mapWorkOrder(raw: unknown): VendorPoWorkOrder {
+  const item = asRecord(raw);
+  return {
+    workOrderId: readId(item) || readString(item, "workOrderId", "WorkOrderId"),
+    internalWONumber: readString(item, "internalWONumber", "InternalWONumber"),
+    title: readString(item, "title", "Title"),
+    trade: readString(item, "trade", "Trade"),
+    subTrade: readString(item, "subTrade", "SubTrade"),
+    problem: readString(item, "problem", "Problem"),
+    priority: readString(item, "priority", "Priority"),
+    status: readString(item, "status", "Status"),
+    locationName: readString(item, "locationName", "LocationName"),
+  };
+}
+
+function mapChecklistItem(raw: unknown): VendorPoChecklistItem {
+  const item = asRecord(raw);
+  return {
+    id: readId(item),
+    itemText: readString(item, "itemText", "ItemText"),
+    isCompleted: readBool(item, "isCompleted", "IsCompleted"),
+    completedBy: readString(item, "completedBy", "CompletedBy"),
+    completedAt: readString(item, "completedAt", "CompletedAt"),
+  };
+}
+
+function mapSignoff(raw: unknown): VendorPoSignoff {
+  const item = asRecord(raw);
+  return {
+    id: readId(item),
+    signoffType: readString(item, "signoffType", "SignoffType"),
+    name: readString(item, "name", "Name"),
+    signatureMethod: readString(item, "signatureMethod", "SignatureMethod"),
+    signedAt: readString(item, "signedAt", "SignedAt"),
+    signature: readString(item, "signature", "Signature"),
+  };
+}
+
+function mapComment(raw: unknown): VendorPoComment {
+  const item = asRecord(raw);
+  return {
+    id: readId(item),
+    userName: readString(item, "userName", "UserName"),
+    commenter: readString(item, "commenter", "Commenter"),
+    commentType: readString(item, "commentType", "CommentType"),
+    createdDate: readString(item, "createdDate", "CreatedDate"),
+    commenttext: readString(item, "commenttext", "CommentText", "commentText"),
+  };
+}
+
+function mapAuditEntry(raw: unknown): VendorPoAuditEntry {
+  const item = asRecord(raw);
+  return {
+    id: readId(item),
+    createdAt: readString(item, "createdAt", "CreatedAt"),
+    action: readString(item, "action", "Action"),
+    fieldName: readString(item, "fieldName", "FieldName"),
+    oldValue: readString(item, "oldValue", "OldValue"),
+    newValue: readString(item, "newValue", "NewValue"),
+    userName: readString(item, "userName", "UserName"),
+  };
+}
+
+export function mapVendorPoDetail(raw: unknown): VendorPoDetail {
+  const item = asRecord(raw);
+  const vendor = item.vendor ?? item.Vendor;
+  const location = item.primaryLocation ?? item.PrimaryLocation;
+  const workOrders = (item.workOrders ?? item.WorkOrders) as unknown[];
+  const checklist = (item.checklist ?? item.Checklist) as unknown[];
+  const signoffs = (item.signoffs ?? item.Signoffs) as unknown[];
+  const comments = (item.comments ?? item.Comments) as unknown[];
+  const uplifts = (item.upliftRequests ?? item.UpliftRequests) as unknown[];
+  const auditLog = (item.auditLog ?? item.AuditLog) as unknown[];
+
+  return {
+    id: readId(item),
+    poNumber: readString(item, "poNumber", "PONumber"),
+    dispatchNumber: readString(item, "dispatchNumber", "DispatchNumber"),
+    status: readString(item, "status", "Status"),
+    nteAmount: readNumber(item, "nteAmount", "NTEAmount"),
+    dispatchedAt: readString(item, "dispatchedAt", "DispatchedAt"),
+    acknowledgedAt: readString(item, "acknowledgedAt", "AcknowledgedAt"),
+    scheduledDate: readString(item, "scheduledDate", "ScheduledDate"),
+    completedDate: readString(item, "completedDate", "CompletedDate"),
+    verifiedAt: readString(item, "verifiedAt", "VerifiedAt"),
+    emailSent: readBool(item, "emailSent", "EmailSent"),
+    description: readString(item, "description", "Description"),
+    vendor: mapVendor(vendor),
+    primaryLocation: mapLocation(location),
+    workOrders: Array.isArray(workOrders) ? workOrders.map(mapWorkOrder) : [],
+    checklist: Array.isArray(checklist) ? checklist.map(mapChecklistItem) : [],
+    signoffs: Array.isArray(signoffs) ? signoffs.map(mapSignoff) : [],
+    comments: Array.isArray(comments) ? comments.map(mapComment) : [],
+    upliftRequests: Array.isArray(uplifts) ? mapUpliftRequests(uplifts) : [],
+    auditLog: Array.isArray(auditLog) ? auditLog.map(mapAuditEntry) : [],
+  };
+}
diff --git a/src/domain/vendor-pos/types/vendor-po.ts b/src/domain/vendor-pos/types/vendor-po.ts
new file mode 100644
index 00000000..784366f3
--- /dev/null
+++ b/src/domain/vendor-pos/types/vendor-po.ts
@@ -0,0 +1,127 @@
+import type { UpliftRequest } from "@/domain/uplifts/types/uplift";
+
+export interface VendorPoListItem {
+  id: string | number;
+  poNumber: string;
+  dispatchNumber: string;
+  vendorName: string;
+  primaryWOInternalNumber: string;
+  workOrderCount: number;
+  locationName: string;
+  nteAmount: number | null;
+  status: string;
+  pendingUpliftCount: number;
+  dispatchedAt: string;
+  scheduledDate: string;
+  completedDate: string;
+}
+
+export interface VendorPoListParams {
+  search?: string;
+  page?: number;
+  pageSize?: number;
+  sortBy?: string;
+  sortDir?: string;
+  status?: string;
+  vendorId?: string;
+  dateFrom?: string;
+  dateTo?: string;
+}
+
+export interface VendorPoListResult {
+  items: VendorPoListItem[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+}
+
+export interface VendorPoVendor {
+  companyName: string;
+  contactName: string;
+  email: string;
+  phone: string;
+  address: string;
+  city: string;
+  state: string;
+  zip: string;
+  tradeSpecialties: string;
+}
+
+export interface VendorPoLocation {
+  name: string;
+  address: string;
+  city: string;
+  state: string;
+  zipCode: string;
+}
+
+export interface VendorPoWorkOrder {
+  workOrderId: string | number;
+  internalWONumber: string;
+  title: string;
+  trade: string;
+  subTrade: string;
+  problem: string;
+  priority: string;
+  status: string;
+  locationName: string;
+}
+
+export interface VendorPoChecklistItem {
+  id: string | number;
+  itemText: string;
+  isCompleted: boolean;
+  completedBy: string;
+  completedAt: string;
+}
+
+export interface VendorPoSignoff {
+  id: string | number;
+  signoffType: string;
+  name: string;
+  signatureMethod: string;
+  signedAt: string;
+  signature: string;
+}
+
+export interface VendorPoComment {
+  id: string | number;
+  userName: string;
+  commenter: string;
+  commentType: string;
+  createdDate: string;
+  commenttext: string;
+}
+
+export interface VendorPoAuditEntry {
+  id: string | number;
+  createdAt: string;
+  action: string;
+  fieldName: string;
+  oldValue: string;
+  newValue: string;
+  userName: string;
+}
+
+export interface VendorPoDetail {
+  id: string | number;
+  poNumber: string;
+  dispatchNumber: string;
+  status: string;
+  nteAmount: number | null;
+  dispatchedAt: string;
+  acknowledgedAt: string;
+  scheduledDate: string;
+  completedDate: string;
+  verifiedAt: string;
+  emailSent: boolean;
+  description: string;
+  vendor: VendorPoVendor | null;
+  primaryLocation: VendorPoLocation | null;
+  workOrders: VendorPoWorkOrder[];
+  checklist: VendorPoChecklistItem[];
+  signoffs: VendorPoSignoff[];
+  comments: VendorPoComment[];
+  upliftRequests: UpliftRequest[];
+  auditLog: VendorPoAuditEntry[];
+}
diff --git a/src/domain/vendor-pos/use-cases/use-vendor-po-detail.ts b/src/domain/vendor-pos/use-cases/use-vendor-po-detail.ts
new file mode 100644
index 00000000..d68eca77
--- /dev/null
+++ b/src/domain/vendor-pos/use-cases/use-vendor-po-detail.ts
@@ -0,0 +1,13 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { vendorPosApi } from "@/domain/vendor-pos/api/vendor-pos-api";
+import type { VendorPoDetail } from "@/domain/vendor-pos/types/vendor-po";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+export function useVendorPoDetail(id: string | undefined): UseQueryResult<VendorPoDetail, Error> {
+  return useQuery({
+    queryKey: queryKeys.vendorPos.detail(id ?? ""),
+    queryFn: () => vendorPosApi.getById(requireQueryParam(id, "Vendor PO id")),
+    enabled: Boolean(id),
+  });
+}
diff --git a/src/domain/vendor-pos/use-cases/use-vendor-pos-list.ts b/src/domain/vendor-pos/use-cases/use-vendor-pos-list.ts
new file mode 100644
index 00000000..3cda45d1
--- /dev/null
+++ b/src/domain/vendor-pos/use-cases/use-vendor-pos-list.ts
@@ -0,0 +1,14 @@
+import { keepPreviousData, useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { vendorPosApi } from "@/domain/vendor-pos/api/vendor-pos-api";
+import type { VendorPoListParams, VendorPoListResult } from "@/domain/vendor-pos/types/vendor-po";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useVendorPosList(
+  params: VendorPoListParams,
+): UseQueryResult<VendorPoListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.vendorPos.list(params as Record<string, unknown>),
+    queryFn: () => vendorPosApi.getList(params),
+    placeholderData: keepPreviousData,
+  });
+}
diff --git a/src/domain/vendors/api/vendor-company-roster-api.ts b/src/domain/vendors/api/vendor-company-roster-api.ts
new file mode 100644
index 00000000..4213db2d
--- /dev/null
+++ b/src/domain/vendors/api/vendor-company-roster-api.ts
@@ -0,0 +1,121 @@
+import { isHTTPError } from "ky";
+import { API_PATHS } from "@/api/api-paths";
+import { apiGet, apiPatch, apiPost, apiPut } from "@/api/api";
+import { handleApiResponse } from "@/api/handle-api-response";
+import {
+  mapRosterConflict,
+  mapVendorCompanyRoster,
+  mapVendorRosterAdditivePatchToBackend,
+  mapVendorRosterToBackend,
+} from "@/domain/vendors/mappers/vendor-roster-mapper";
+import { VendorRosterConflictError } from "@/domain/vendors/lib/vendor-roster-conflict";
+import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
+import type { VendorRosterAdditivePatch } from "@/domain/vendors/mappers/vendor-roster-mapper";
+
+const STALE_MESSAGE =
+  "This company was changed by another session. Reload the latest version and try again.";
+const OPEN_WORK_ORDER_MESSAGE =
+  "This company cannot be saved because it still has open work orders.";
+
+async function readConflictBody(error: unknown): Promise<unknown> {
+  if (!isHTTPError(error)) return undefined;
+  if (error.data !== undefined && error.data !== null) return error.data;
+  try {
+    return await error.response.json();
+  } catch {
+    try {
+      const text = await error.response.text();
+      return text ? JSON.parse(text) : undefined;
+    } catch {
+      return undefined;
+    }
+  }
+}
+
+export async function throwRosterConflict(error: unknown): Promise<never> {
+  const status = isHTTPError(error) ? error.response.status : 0;
+  const body = await readConflictBody(error);
+  const message = status === 409 ? STALE_MESSAGE : "Failed to save vendor company";
+  const conflict = mapRosterConflict(body, message);
+  if (conflict.kind === "open-work-orders" && conflict.blockedWorkOrders.length === 0) {
+    conflict.message = OPEN_WORK_ORDER_MESSAGE;
+  }
+  throw new VendorRosterConflictError(conflict, status || 409);
+}
+
+export interface RosterQuery {
+  vendorId?: string | number;
+  companyId?: string | number;
+}
+
+function buildRosterSearchParams(query: RosterQuery): Record<string, string> {
+  const params: Record<string, string> = {};
+  if (query.vendorId !== undefined && query.vendorId !== "") {
+    params.vendorId = String(query.vendorId);
+  }
+  if (query.companyId !== undefined && query.companyId !== "") {
+    params.companyId = String(query.companyId);
+  }
+  return params;
+}
+
+export const vendorCompanyRosterApi = {
+  get: async (query: RosterQuery): Promise<VendorCompanyRoster> => {
+    const data = await apiGet<unknown>(API_PATHS.vendorCompanyRoster.base, {
+      searchParams: buildRosterSearchParams(query),
+    });
+    return mapVendorCompanyRoster(handleApiResponse(data));
+  },
+
+  create: async (payload: unknown): Promise<VendorCompanyRoster> => {
+    try {
+      const data = await apiPost<unknown>(
+        API_PATHS.vendorCompanyRoster.base,
+        mapVendorRosterToBackend(payload),
+      );
+      return mapVendorCompanyRoster(handleApiResponse(data));
+    } catch (error) {
+      if (isHTTPError(error) && error.response.status === 409) {
+        await throwRosterConflict(error);
+      }
+      throw error;
+    }
+  },
+
+  update: async (
+    companyId: string | number,
+    payload: unknown,
+    rowVersion: string,
+  ): Promise<VendorCompanyRoster> => {
+    try {
+      const data = await apiPut<unknown>(
+        API_PATHS.vendorCompanyRoster.byCompany(companyId),
+        mapVendorRosterToBackend({ ...(payload as Record<string, unknown>), rowVersion }),
+      );
+      return mapVendorCompanyRoster(handleApiResponse(data));
+    } catch (error) {
+      if (isHTTPError(error) && error.response.status === 409) {
+        await throwRosterConflict(error);
+      }
+      throw error;
+    }
+  },
+
+  addTechnicians: async (
+    companyId: string | number,
+    patch: VendorRosterAdditivePatch,
+  ): Promise<VendorCompanyRoster> => {
+    try {
+      const data = await apiPatch<unknown>(
+        API_PATHS.vendorCompanyRoster.byCompany(companyId),
+        mapVendorRosterAdditivePatchToBackend(patch),
+      );
+      return mapVendorCompanyRoster(handleApiResponse(data));
+    } catch (error) {
+      if (isHTTPError(error) && error.response.status === 409) {
+        await throwRosterConflict(error);
+      }
+      throw error;
+    }
+  },
+};
diff --git a/src/domain/vendors/api/vendors-api.ts b/src/domain/vendors/api/vendors-api.ts
new file mode 100644
index 00000000..3d925b76
--- /dev/null
+++ b/src/domain/vendors/api/vendors-api.ts
@@ -0,0 +1,150 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiDelete, apiGet, apiPost, apiPut } from "@/api/api";
+import { handleApiResponse, handlePaginatedResponse } from "@/api/handle-api-response";
+import {
+  mapVendor,
+  mapVendorDeactivationImpact,
+  mapVendorFacets,
+  mapVendorListItems,
+  mapVendorPortalToken,
+  mapVendorToBackend,
+  mapVendorUpdateToBackend,
+} from "@/domain/vendors/mappers/vendor-mapper";
+import type {
+  Vendor,
+  VendorDeactivationImpact,
+  VendorFacets,
+  VendorPortalToken,
+  VendorsListParams,
+  VendorsListResult,
+} from "@/domain/vendors/types/vendor";
+
+function pushRepeated(
+  searchParams: Record<string, string | number>,
+  key: string,
+  values: string[] | undefined,
+): void {
+  if (!values || values.length === 0) return;
+  values.forEach((value, index) => {
+    if (!value) return;
+    searchParams[`${key}[${index}]`] = value;
+  });
+}
+
+export interface VendorFacetsParams {
+  isActive?: boolean;
+}
+
+function buildFacetsParams(params?: VendorFacetsParams): Record<string, string> {
+  const searchParams: Record<string, string> = {};
+  if (params?.isActive !== undefined) {
+    searchParams.isActive = String(params.isActive);
+  }
+  return searchParams;
+}
+
+function buildListParams(params: VendorsListParams): Record<string, string | number> {
+  const searchParams: Record<string, string | number> = {
+    search: params.search ?? "",
+    page: params.page ?? 1,
+    pageSize: params.pageSize ?? 12,
+  };
+  if (params.isActive !== undefined) {
+    searchParams.isActive = String(params.isActive);
+  }
+  pushRepeated(searchParams, "companies", params.companies);
+  pushRepeated(searchParams, "trades", params.trades);
+  pushRepeated(searchParams, "locations", params.locations);
+  pushRepeated(searchParams, "jobBuckets", params.jobBuckets);
+  pushRepeated(searchParams, "areas", params.areas);
+  return searchParams;
+}
+
+export const vendorsApi = {
+  getList: async (params: VendorsListParams = {}): Promise<VendorsListResult> => {
+    const data = await apiGet<unknown>(API_PATHS.vendor.getList, {
+      searchParams: buildListParams(params),
+    });
+    const paginated = handlePaginatedResponse<unknown>(data, {
+      page: params.page,
+      pageSize: params.pageSize,
+    });
+    return {
+      items: mapVendorListItems(paginated.items),
+      totalCount: paginated.totalCount,
+      page: paginated.page,
+      pageSize: paginated.pageSize,
+    };
+  },
+
+  // SH-281: grouped company rows come from the dedicated directory endpoint;
+  // Vendor/GetVendorList stays on the legacy technician-level contract.
+  getDirectoryList: async (params: VendorsListParams = {}): Promise<VendorsListResult> => {
+    const data = await apiGet<unknown>(API_PATHS.vendor.getDirectoryList, {
+      searchParams: buildListParams(params),
+    });
+    const paginated = handlePaginatedResponse<unknown>(data, {
+      page: params.page,
+      pageSize: params.pageSize,
+    });
+    return {
+      items: mapVendorListItems(paginated.items),
+      totalCount: paginated.totalCount,
+      page: paginated.page,
+      pageSize: paginated.pageSize,
+    };
+  },
+
+  getFacets: async (params?: VendorFacetsParams): Promise<VendorFacets> => {
+    const data = await apiGet<unknown>(API_PATHS.vendor.facets, {
+      searchParams: buildFacetsParams(params),
+    });
+    return mapVendorFacets(handleApiResponse(data));
+  },
+
+  getById: async (id: string | number): Promise<Vendor> => {
+    const data = await apiGet<unknown>(`${API_PATHS.rest.vendors}/${id}`);
+    return mapVendor(handleApiResponse(data));
+  },
+
+  create: async (payload: unknown): Promise<Vendor> => {
+    const data = await apiPost<unknown>(API_PATHS.rest.vendors, mapVendorToBackend(payload));
+    return mapVendor(handleApiResponse(data));
+  },
+
+  update: async (id: string | number, payload: unknown): Promise<Vendor> => {
+    const data = await apiPut<unknown>(
+      `${API_PATHS.rest.vendors}/${id}`,
+      mapVendorUpdateToBackend(payload),
+    );
+    return mapVendor(handleApiResponse(data));
+  },
+
+  // SH-254: confirmOpenWorkOrders tells the API the caller has been shown the
+  // vendor's open work orders and chose to proceed. Without it the API still blocks.
+  delete: async (id: string | number, confirmOpenWorkOrders = false): Promise<void> => {
+    const suffix = confirmOpenWorkOrders ? "?confirmOpenWorkOrders=true" : "";
+    await apiDelete(`${API_PATHS.rest.vendors}/${id}${suffix}`);
+  },
+
+  getDeactivationImpact: async (id: string | number): Promise<VendorDeactivationImpact> => {
+    const data = await apiGet<unknown>(
+      `${API_PATHS.rest.vendors}/${id}/${API_PATHS.vendor.deactivationImpact}`,
+    );
+    return mapVendorDeactivationImpact(handleApiResponse(data));
+  },
+
+  getPortalToken: async (id: string | number): Promise<VendorPortalToken | null> => {
+    const data = await apiGet<unknown>(`${API_PATHS.rest.vendors}/${id}/portal-token`);
+    return mapVendorPortalToken(handleApiResponse(data));
+  },
+
+  rotatePortalToken: async (id: string | number): Promise<VendorPortalToken | null> => {
+    const data = await apiPost<unknown>(`${API_PATHS.rest.vendors}/${id}/portal-token/rotate`);
+    return mapVendorPortalToken(handleApiResponse(data));
+  },
+
+  revokePortalToken: async (id: string | number): Promise<void> => {
+    await apiPost<unknown>(`${API_PATHS.rest.vendors}/${id}/portal-token/revoke`);
+  },
+};
diff --git a/src/domain/vendors/lib/vendor-roster-conflict.ts b/src/domain/vendors/lib/vendor-roster-conflict.ts
new file mode 100644
index 00000000..5095d7c5
--- /dev/null
+++ b/src/domain/vendors/lib/vendor-roster-conflict.ts
@@ -0,0 +1,17 @@
+import type { VendorRosterConflict } from "@/domain/vendors/types/vendor";
+
+export class VendorRosterConflictError extends Error {
+  readonly status: number;
+  readonly conflict: VendorRosterConflict;
+
+  constructor(conflict: VendorRosterConflict, status = 409) {
+    super(conflict.message);
+    this.name = "VendorRosterConflictError";
+    this.status = status;
+    this.conflict = conflict;
+  }
+}
+
+export function isVendorRosterConflictError(error: unknown): error is VendorRosterConflictError {
+  return error instanceof VendorRosterConflictError;
+}
diff --git a/src/domain/vendors/mappers/vendor-mapper.ts b/src/domain/vendors/mappers/vendor-mapper.ts
new file mode 100644
index 00000000..200fe8c9
--- /dev/null
+++ b/src/domain/vendors/mappers/vendor-mapper.ts
@@ -0,0 +1,377 @@
+import type {
+  Vendor,
+  VendorDeactivationImpact,
+  VendorDirectoryTechnician,
+  VendorFacetArea,
+  VendorFacetCompany,
+  VendorFacetJobBucket,
+  VendorFacetLocation,
+  VendorFacets,
+  VendorListItem,
+  VendorOpenWorkOrderSummary,
+  VendorPortalToken,
+  VendorPreferredContact,
+} from "@/domain/vendors/types/vendor";
+
+const PREFERRED_CONTACT_VALUES = new Set<VendorPreferredContact>(["Phone", "Email", "Text"]);
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") return value;
+    if (typeof value === "number") return String(value);
+  }
+  return "";
+}
+
+function readNumber(record: Record<string, unknown>, ...keys: string[]): number {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number" && Number.isFinite(value)) return value;
+    if (typeof value === "string") {
+      const parsed = Number(value);
+      if (Number.isFinite(parsed)) return parsed;
+    }
+  }
+  return 0;
+}
+
+function readId(record: Record<string, unknown>): string | number | null {
+  const value = record.id ?? record.Id;
+  if (typeof value === "string") return value.trim() === "" ? null : value;
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  return null;
+}
+
+function readCompanyId(record: Record<string, unknown>): string | number | null {
+  const value = record.companyId ?? record.CompanyId;
+  if (typeof value === "string") return value.trim() === "" ? null : value;
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  return null;
+}
+
+function readNumericCompanyId(record: Record<string, unknown>): number | null {
+  const value = readCompanyId(record);
+  if (typeof value === "number") return value;
+  if (typeof value !== "string" || value.trim() === "") return null;
+  const parsed = Number(value);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+}
+
+function readPreferredContact(
+  record: Record<string, unknown>,
+  ...keys: string[]
+): VendorPreferredContact {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      const normalized = value.trim();
+      if (PREFERRED_CONTACT_VALUES.has(normalized as VendorPreferredContact)) {
+        return normalized as VendorPreferredContact;
+      }
+      const lowered = normalized.toLowerCase();
+      if (lowered === "phone" || lowered === "call") return "Phone";
+      if (lowered === "email" || lowered === "e-mail") return "Email";
+      if (lowered === "text" || lowered === "sms") return "Text";
+    }
+  }
+  return "Phone";
+}
+
+function readPreferredContactOptional(
+  record: Record<string, unknown>,
+): VendorPreferredContact | undefined {
+  const raw = record.preferredContact ?? record.PreferredContact;
+  if (typeof raw !== "string" || raw.trim() === "") return undefined;
+  return readPreferredContact(record, "preferredContact", "PreferredContact");
+}
+
+export function toCanonicalPhone(value: unknown): string {
+  const original = String(value ?? "");
+  let digits = original.replace(/\D+/g, "");
+  if (digits.length === 11 && digits.startsWith("1")) {
+    digits = digits.slice(1);
+  }
+  if (digits.length !== 10) return original;
+  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+}
+
+function readBool(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") return value;
+  }
+  return true;
+}
+
+export function mapVendorListItem(raw: unknown): VendorListItem {
+  const item = asRecord(raw);
+  const mapped = {
+    id: readId(item),
+    companyId: readCompanyId(item),
+    companyName: readString(item, "companyName", "CompanyName"),
+    contactName: readString(item, "contactName", "ContactName"),
+    email: readString(item, "email", "Email"),
+    phone: readString(item, "phone", "Phone"),
+    companyPhone: readString(item, "companyPhone", "CompanyPhone"),
+    googleMapsUrl: readString(item, "googleMapsUrl", "GoogleMapsUrl"),
+    notes: readString(item, "notes", "Notes"),
+    totalJobs: readNumber(item, "totalJobs", "TotalJobs"),
+    address: readString(item, "address", "Address"),
+    city: readString(item, "city", "City"),
+    state: readString(item, "state", "State"),
+    tradeSpecialties: readString(item, "tradeSpecialties", "TradeSpecialties"),
+    isActive: readBool(item, "isActive", "IsActive"),
+    preferredContact: readPreferredContact(item, "preferredContact", "PreferredContact"),
+    areaId: readString(item, "areaId", "AreaId"),
+    areaName: readString(item, "areaName", "AreaName"),
+  };
+  const rawTechnicians = item.technicians ?? item.Technicians;
+  const technicians = Array.isArray(rawTechnicians)
+    ? rawTechnicians.map(mapVendorDirectoryTechnician)
+    : mapped.id == null
+      ? []
+      : [
+          {
+            id: mapped.id,
+            contactName: mapped.contactName,
+            email: mapped.email,
+            phone: mapped.phone,
+            preferredContact: mapped.preferredContact,
+            tradeSpecialties: mapped.tradeSpecialties,
+            isActive: mapped.isActive,
+            totalJobs: mapped.totalJobs,
+          },
+        ];
+
+  return { ...mapped, technicians };
+}
+
+function mapVendorDirectoryTechnician(raw: unknown): VendorDirectoryTechnician {
+  const item = asRecord(raw);
+  const id = readId(item);
+  return {
+    id: id ?? "",
+    contactName: readString(item, "contactName", "ContactName"),
+    email: readString(item, "email", "Email"),
+    phone: readString(item, "phone", "Phone"),
+    preferredContact: readPreferredContact(item, "preferredContact", "PreferredContact"),
+    tradeSpecialties: readString(item, "tradeSpecialties", "TradeSpecialties"),
+    isActive: readBool(item, "isActive", "IsActive"),
+    totalJobs: readNumber(item, "totalJobs", "TotalJobs"),
+  };
+}
+
+export function mapVendorListItems(rawItems: unknown[]): VendorListItem[] {
+  return rawItems.map(mapVendorListItem);
+}
+
+export function mapVendor(raw: unknown): Vendor {
+  const item = asRecord(raw);
+  return {
+    id: readId(item) || undefined,
+    companyId: readCompanyId(item),
+    companyName: readString(item, "companyName", "CompanyName"),
+    contactName: readString(item, "contactName", "ContactName"),
+    email: readString(item, "email", "Email"),
+    phone: readString(item, "phone", "Phone"),
+    companyPhone: readString(item, "companyPhone", "CompanyPhone"),
+    googleMapsUrl: readString(item, "googleMapsUrl", "GoogleMapsUrl"),
+    notes: readString(item, "notes", "Notes"),
+    totalJobs: readNumber(item, "totalJobs", "TotalJobs"),
+    address: readString(item, "address", "Address"),
+    city: readString(item, "city", "City"),
+    state: readString(item, "state", "State"),
+    zip: readString(item, "zip", "Zip", "zipCode", "ZipCode"),
+    tradeSpecialties: readString(item, "tradeSpecialties", "TradeSpecialties"),
+    isActive: readBool(item, "isActive", "IsActive"),
+    preferredContact: readPreferredContact(item, "preferredContact", "PreferredContact"),
+  };
+}
+
+export function mapVendorToBackend(vendor: unknown): Record<string, unknown> {
+  const item = asRecord(vendor);
+  const companyName = readString(item, "companyName", "CompanyName");
+  const payload: Record<string, unknown> = {
+    companyId: readNumericCompanyId(item),
+    companyName,
+    contactName: readString(item, "contactName", "ContactName"),
+    email: readString(item, "email", "Email"),
+    phone: toCanonicalPhone(item.phone ?? item.Phone),
+    companyPhone: toCanonicalPhone(item.companyPhone ?? item.CompanyPhone),
+    googleMapsUrl: readString(item, "googleMapsUrl", "GoogleMapsUrl"),
+    notes: readString(item, "notes", "Notes"),
+    address: readString(item, "address", "Address"),
+    city: readString(item, "city", "City"),
+    state: readString(item, "state", "State"),
+    zip: readString(item, "zip", "Zip", "zipCode", "ZipCode"),
+    tradeSpecialties: readString(item, "tradeSpecialties", "TradeSpecialties"),
+    isActive: readBool(item, "isActive", "IsActive"),
+  };
+  const preferredContact = readPreferredContactOptional(item);
+  if (preferredContact) {
+    payload.preferredContact = preferredContact;
+  }
+  const id = item.id ?? item.Id;
+  if (typeof id === "string" || typeof id === "number") {
+    payload.id = id;
+  }
+  return payload;
+}
+
+export function mapVendorUpdateToBackend(vendor: unknown): Record<string, unknown> {
+  const item = asRecord(vendor);
+  const payload: Record<string, unknown> = {};
+  const fieldMappings = [
+    ["companyName", "CompanyName"],
+    ["contactName", "ContactName"],
+    ["email", "Email"],
+    ["googleMapsUrl", "GoogleMapsUrl"],
+    ["notes", "Notes"],
+    ["address", "Address"],
+    ["city", "City"],
+    ["state", "State"],
+    ["zip", "Zip"],
+    ["tradeSpecialties", "TradeSpecialties"],
+    ["isActive", "IsActive"],
+    ["preferredContact", "PreferredContact"],
+  ] as const;
+
+  fieldMappings.forEach(([target, source]) => {
+    if (Object.prototype.hasOwnProperty.call(item, target)) payload[target] = item[target];
+    if (Object.prototype.hasOwnProperty.call(item, source)) payload[target] = item[source];
+  });
+  if (
+    Object.prototype.hasOwnProperty.call(item, "companyId") ||
+    Object.prototype.hasOwnProperty.call(item, "CompanyId")
+  ) {
+    payload.companyId = readNumericCompanyId(item);
+  }
+  if (
+    Object.prototype.hasOwnProperty.call(item, "phone") ||
+    Object.prototype.hasOwnProperty.call(item, "Phone")
+  ) {
+    payload.phone = toCanonicalPhone(item.phone ?? item.Phone);
+  }
+  if (
+    Object.prototype.hasOwnProperty.call(item, "companyPhone") ||
+    Object.prototype.hasOwnProperty.call(item, "CompanyPhone")
+  ) {
+    payload.companyPhone = toCanonicalPhone(item.companyPhone ?? item.CompanyPhone);
+  }
+  return payload;
+}
+
+function mapFacetCompany(raw: unknown): VendorFacetCompany {
+  const item = asRecord(raw);
+  return {
+    companyId: readCompanyId(item),
+    name: readString(item, "name", "Name"),
+    companyPhone: readString(item, "companyPhone", "CompanyPhone"),
+    email: readString(item, "email", "Email"),
+    address: readString(item, "address", "Address"),
+    city: readString(item, "city", "City"),
+    state: readString(item, "state", "State"),
+    zip: readString(item, "zip", "Zip", "zipCode", "ZipCode"),
+    googleMapsUrl: readString(item, "googleMapsUrl", "GoogleMapsUrl"),
+  };
+}
+
+function mapFacetLocation(raw: unknown): VendorFacetLocation {
+  const item = asRecord(raw);
+  const city = readString(item, "city", "City");
+  const state = readString(item, "state", "State");
+  const label = readString(item, "label", "Label");
+  return {
+    city,
+    state,
+    label: label || [city, state].filter(Boolean).join(", "),
+  };
+}
+
+function mapFacetArea(raw: unknown): VendorFacetArea {
+  const item = asRecord(raw);
+  return {
+    id: readString(item, "id", "Id"),
+    name: readString(item, "name", "Name"),
+  };
+}
+
+function mapFacetJobBucket(raw: unknown): VendorFacetJobBucket {
+  const item = asRecord(raw);
+  return {
+    id: readString(item, "id", "Id"),
+    label: readString(item, "label", "Label"),
+  };
+}
+
+export function mapVendorFacets(raw: unknown): VendorFacets {
+  const item = asRecord(raw);
+  const companiesRaw = item.companies ?? item.Companies;
+  const tradesRaw = item.trades ?? item.Trades;
+  const locationsRaw = item.locations ?? item.Locations;
+  const jobBucketsRaw = item.jobBuckets ?? item.JobBuckets;
+  const areasRaw = item.areas ?? item.Areas;
+
+  return {
+    companies: Array.isArray(companiesRaw) ? companiesRaw.map(mapFacetCompany) : [],
+    trades: Array.isArray(tradesRaw)
+      ? tradesRaw
+          .map((entry) => {
+            if (typeof entry === "string") return entry;
+            return readString(asRecord(entry), "name", "Name", "value", "Value", "label", "Label");
+          })
+          .filter(Boolean)
+      : [],
+    areas: Array.isArray(areasRaw)
+      ? areasRaw.map(mapFacetArea).filter((area) => area.id !== "" && area.name !== "")
+      : [],
+    locations: Array.isArray(locationsRaw) ? locationsRaw.map(mapFacetLocation) : [],
+    jobBuckets: Array.isArray(jobBucketsRaw) ? jobBucketsRaw.map(mapFacetJobBucket) : [],
+  };
+}
+
+export function mapVendorPortalToken(raw: unknown): VendorPortalToken | null {
+  const item = asRecord(raw);
+  const portalUrl = readString(item, "portalUrl", "PortalUrl");
+  if (!portalUrl) return null;
+  return {
+    portalUrl,
+    issuedAt: readString(item, "issuedAt", "IssuedAt"),
+    expiresAt: readString(item, "expiresAt", "ExpiresAt"),
+    lastUsedAt: readString(item, "lastUsedAt", "LastUsedAt") || undefined,
+  };
+}
+
+function mapOpenWorkOrder(raw: unknown): VendorOpenWorkOrderSummary {
+  const item = asRecord(raw);
+  const workOrderId = item.workOrderId ?? item.WorkOrderId;
+  const dispatchId = item.dispatchId ?? item.DispatchId;
+  return {
+    workOrderId:
+      typeof workOrderId === "string" || typeof workOrderId === "number" ? workOrderId : "",
+    workOrderNumber: readString(item, "workOrderNumber", "WorkOrderNumber"),
+    workOrderTitle: readString(item, "workOrderTitle", "WorkOrderTitle"),
+    status: readString(item, "status", "Status"),
+    scheduledDate: readString(item, "scheduledDate", "ScheduledDate") || undefined,
+    dispatchId:
+      typeof dispatchId === "string" || typeof dispatchId === "number" ? dispatchId : undefined,
+  };
+}
+
+export function mapVendorDeactivationImpact(raw: unknown): VendorDeactivationImpact {
+  const item = asRecord(raw);
+  const openWorkOrdersRaw = item.openWorkOrders ?? item.OpenWorkOrders;
+  const rawId = item.vendorId ?? item.VendorId ?? item.id ?? item.Id;
+  const vendorId: string | number =
+    typeof rawId === "string" || typeof rawId === "number" ? rawId : "";
+  return {
+    vendorId,
+    canDeactivate: readBool(item, "canDeactivate", "CanDeactivate"),
+    openWorkOrders: Array.isArray(openWorkOrdersRaw) ? openWorkOrdersRaw.map(mapOpenWorkOrder) : [],
+  };
+}
diff --git a/src/domain/vendors/mappers/vendor-roster-mapper.ts b/src/domain/vendors/mappers/vendor-roster-mapper.ts
new file mode 100644
index 00000000..9fd986d0
--- /dev/null
+++ b/src/domain/vendors/mappers/vendor-roster-mapper.ts
@@ -0,0 +1,208 @@
+import type {
+  VendorCompanyRoster,
+  VendorPreferredContact,
+  VendorRosterBlockedWorkOrder,
+  VendorRosterConflict,
+  VendorRosterConflictKind,
+  VendorRosterTechnician,
+} from "@/domain/vendors/types/vendor";
+import { toCanonicalPhone } from "@/domain/vendors/mappers/vendor-mapper";
+
+const PREFERRED_CONTACT_VALUES = new Set<VendorPreferredContact>(["Phone", "Email", "Text"]);
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") return value;
+    if (typeof value === "number") return String(value);
+  }
+  return "";
+}
+
+function readBool(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") return value;
+  }
+  return true;
+}
+
+function readPreferredContact(record: Record<string, unknown>): VendorPreferredContact | undefined {
+  const raw = record.preferredContact ?? record.PreferredContact;
+  if (typeof raw === "string") {
+    const normalized = raw.trim();
+    if (PREFERRED_CONTACT_VALUES.has(normalized as VendorPreferredContact)) {
+      return normalized as VendorPreferredContact;
+    }
+    const lowered = normalized.toLowerCase();
+    if (lowered === "phone" || lowered === "call") return "Phone";
+    if (lowered === "email" || lowered === "e-mail") return "Email";
+    if (lowered === "text" || lowered === "sms") return "Text";
+  }
+  return undefined;
+}
+
+function readId(record: Record<string, unknown>, ...keys: string[]): string | number | undefined {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim() !== "") return value;
+    if (typeof value === "number" && Number.isFinite(value)) return value;
+  }
+  return undefined;
+}
+
+function readCompanyId(record: Record<string, unknown>): string | number | null {
+  const value = readId(record, "companyId", "CompanyId");
+  return value ?? null;
+}
+
+export function mapRosterTechnician(raw: unknown): VendorRosterTechnician {
+  const item = asRecord(raw);
+  return {
+    id: readId(item, "id", "Id"),
+    contactName: readString(item, "contactName", "ContactName"),
+    phone: readString(item, "phone", "Phone"),
+    email: readString(item, "email", "Email"),
+    preferredContact: readPreferredContact(item),
+    tradeSpecialties: readString(item, "tradeSpecialties", "TradeSpecialties"),
+    isActive: readBool(item, "isActive", "IsActive"),
+    totalJobs: Number(item.totalJobs ?? item.TotalJobs ?? 0),
+  };
+}
+
+export function mapRosterTechnicians(raw: unknown): VendorRosterTechnician[] {
+  return Array.isArray(raw) ? raw.map(mapRosterTechnician) : [];
+}
+
+export function mapVendorCompanyRoster(raw: unknown): VendorCompanyRoster {
+  const item = asRecord(raw);
+  return {
+    companyId: readCompanyId(item),
+    rowVersion: readString(item, "rowVersion", "RowVersion"),
+    name: readString(item, "name", "Name", "companyName", "CompanyName"),
+    companyPhone: readString(item, "companyPhone", "CompanyPhone"),
+    email: readString(item, "email", "Email"),
+    address: readString(item, "address", "Address"),
+    city: readString(item, "city", "City"),
+    state: readString(item, "state", "State"),
+    zip: readString(item, "zip", "Zip", "zipCode", "ZipCode"),
+    googleMapsUrl: readString(item, "googleMapsUrl", "GoogleMapsUrl"),
+    notes: readString(item, "notes", "Notes"),
+    areaId: readString(item, "areaId", "AreaId"),
+    areaName: readString(item, "areaName", "AreaName"),
+    technicians: mapRosterTechnicians(item.technicians ?? item.Technicians),
+  };
+}
+
+/** Form Area ids are strings; the API takes a positive integer id or null (Unassigned). */
+export function toBackendAreaId(value: unknown): number | null {
+  const parsed = Number(typeof value === "string" ? value.trim() : value);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+}
+
+export function mapRosterTechnicianToBackend(technician: unknown): Record<string, unknown> {
+  const item = asRecord(technician);
+  const payload: Record<string, unknown> = {
+    contactName: readString(item, "contactName", "ContactName"),
+    phone: toCanonicalPhone(item.phone ?? item.Phone),
+    email: readString(item, "email", "Email"),
+    tradeSpecialties: readString(item, "tradeSpecialties", "TradeSpecialties"),
+    isActive: readBool(item, "isActive", "IsActive"),
+  };
+  const preferredContact = readPreferredContact(item);
+  if (preferredContact) payload.preferredContact = preferredContact;
+  const id = readId(item, "id", "Id");
+  if (id !== undefined) payload.id = id;
+  return payload;
+}
+
+export function mapVendorRosterToBackend(values: unknown): Record<string, unknown> {
+  const item = asRecord(values);
+  const techniciansRaw = item.technicians ?? item.Technicians;
+  const payload: Record<string, unknown> = {
+    name: readString(item, "name", "Name", "companyName", "CompanyName"),
+    companyPhone: toCanonicalPhone(item.companyPhone ?? item.CompanyPhone),
+    email: readString(item, "email", "Email"),
+    address: readString(item, "address", "Address"),
+    city: readString(item, "city", "City"),
+    state: readString(item, "state", "State"),
+    zip: readString(item, "zip", "Zip", "zipCode", "ZipCode"),
+    // The stored Maps URL is deprecated: reads keep it for legacy records, but
+    // roster writes must not carry it back to the backend.
+    notes: readString(item, "notes", "Notes"),
+    technicians: Array.isArray(techniciansRaw)
+      ? techniciansRaw.map(mapRosterTechnicianToBackend)
+      : [],
+  };
+  // The form always round-trips its Area (id or null = Unassigned). Callers
+  // without an Area value omit it, which the API treats as "leave unchanged".
+  if ("areaId" in item || "AreaId" in item) {
+    payload.areaId = toBackendAreaId(item.areaId ?? item.AreaId);
+  }
+  const rowVersion = readString(item, "rowVersion", "RowVersion");
+  if (rowVersion) payload.rowVersion = rowVersion;
+  return payload;
+}
+
+export interface VendorRosterAdditivePatch {
+  rowVersion: string;
+  addTechnicians: unknown[];
+  companyFields?: Record<string, string>;
+}
+
+export function mapVendorRosterAdditivePatchToBackend(
+  patch: VendorRosterAdditivePatch,
+): Record<string, unknown> {
+  const item = asRecord(patch);
+  const payload: Record<string, unknown> = {
+    rowVersion: readString(item, "rowVersion", "RowVersion"),
+    addTechnicians: patch.addTechnicians.map((technician) => {
+      const mapped = mapRosterTechnicianToBackend(technician);
+      delete mapped.id;
+      return mapped;
+    }),
+  };
+  if (patch.companyFields) {
+    // SH-250: match the reconcile write path, which canonicalizes companyPhone.
+    // Copying companyFields verbatim let additive patches send a different phone
+    // shape than PUT for the same user input.
+    const companyFields: Record<string, unknown> = { ...patch.companyFields };
+    if (companyFields.companyPhone !== undefined)
+      companyFields.companyPhone = toCanonicalPhone(companyFields.companyPhone);
+    // An edited Area is sent as an id or an explicit null (Unassigned).
+    if (companyFields.areaId !== undefined)
+      companyFields.areaId = toBackendAreaId(companyFields.areaId);
+    payload.companyFields = companyFields;
+  }
+  return payload;
+}
+
+function mapBlockedWorkOrder(raw: unknown): VendorRosterBlockedWorkOrder {
+  const item = asRecord(raw);
+  return {
+    workOrderId: readId(item, "workOrderId", "WorkOrderId", "id", "Id") ?? "",
+    workOrderNumber: readString(item, "workOrderNumber", "WorkOrderNumber"),
+    workOrderTitle: readString(item, "workOrderTitle", "WorkOrderTitle", "title", "Title"),
+    status: readString(item, "status", "Status"),
+    scheduledDate: readString(item, "scheduledDate", "ScheduledDate") || undefined,
+  };
+}
+
+export function mapRosterConflict(raw: unknown, fallbackMessage: string): VendorRosterConflict {
+  const item = asRecord(raw);
+  const blockedRaw = item.blockedWorkOrders ?? item.BlockedWorkOrders ?? item.openWorkOrders;
+  const blockedWorkOrders = Array.isArray(blockedRaw) ? blockedRaw.map(mapBlockedWorkOrder) : [];
+  const code = readString(item, "code", "Code");
+  const kind: VendorRosterConflictKind =
+    code === "duplicate_vendor_company_name"
+      ? "duplicate"
+      : blockedWorkOrders.length > 0
+        ? "open-work-orders"
+        : "stale";
+  const message = readString(item, "message", "Message") || fallbackMessage;
+  return { kind, message, blockedWorkOrders };
+}
diff --git a/src/domain/vendors/schemas/vendor-roster-schema.ts b/src/domain/vendors/schemas/vendor-roster-schema.ts
new file mode 100644
index 00000000..1f590cbe
--- /dev/null
+++ b/src/domain/vendors/schemas/vendor-roster-schema.ts
@@ -0,0 +1,114 @@
+import { z } from "zod";
+import {
+  VENDOR_PREFERRED_CONTACT_VALUES,
+  type VendorPreferredContact,
+} from "@/domain/vendors/types/vendor";
+
+const preferredContactEnum = z.enum(
+  VENDOR_PREFERRED_CONTACT_VALUES as [VendorPreferredContact, ...VendorPreferredContact[]],
+);
+
+export function isValidNorthAmericanPhone(value: string): boolean {
+  if (value === "") return true;
+  const digits = value.replace(/\D+/g, "");
+  return digits.length === 10 || (digits.length === 11 && digits.startsWith("1"));
+}
+
+const northAmericanPhone = z
+  .string()
+  .refine(isValidNorthAmericanPhone, "Enter a 10-digit phone number");
+
+const optionalEmail = z.union([z.string().email("Invalid email"), z.literal("")]);
+
+export const VENDOR_NOTES_MAX_LENGTH = 500;
+
+export const rosterTechnicianSchema = z.object({
+  id: z.union([z.string(), z.number()]).optional(),
+  contactName: z.string(),
+  phone: northAmericanPhone,
+  email: optionalEmail,
+  preferredContact: preferredContactEnum.optional(),
+  tradeSpecialties: z.string(),
+  isActive: z.boolean(),
+});
+
+export type RosterTechnicianValues = z.infer<typeof rosterTechnicianSchema>;
+
+const baseCompanyFields = {
+  name: z.string().trim().min(1, "Company is required"),
+  // Validation-only identity for the phone-or-email group. It is never
+  // registered as an input and Zod omits it from parsed values when absent,
+  // so it cannot enter the vendor payload.
+  companyContact: z.never().optional(),
+  companyPhone: northAmericanPhone,
+  email: optionalEmail,
+  // SH-271: the single combined Address line became three structured parts,
+  // all required, and the stored Google Maps URL was retired from the form.
+  // `googleMapsUrl` stays on the read models for legacy records but is not a
+  // form value: loading it would validate and re-emit a deprecated field the
+  // user can no longer see or edit.
+  address: z.string().trim().min(1, "Street Address is required"),
+  city: z.string().trim().min(1, "City is required"),
+  state: z.string().trim().min(1, "State is required"),
+  zip: z.string(),
+  notes: z
+    .string()
+    .max(VENDOR_NOTES_MAX_LENGTH, `Notes must be ${VENDOR_NOTES_MAX_LENGTH} characters or fewer`),
+  // Optional stable Area id; "" means Unassigned. Admin-only to change.
+  areaId: z.string(),
+  technicians: z.array(rosterTechnicianSchema),
+};
+
+export const VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE =
+  "Provide a company phone or email (at least one required)";
+
+// The phone-or-email rule spans two optional inputs, so it is reported at a
+// validation-only path instead of being attributed to `companyPhone`, which
+// would mark that input individually invalid.
+export const vendorCompanyRosterSchema = z.object(baseCompanyFields).superRefine((data, ctx) => {
+  const hasPhone = Boolean(data.companyPhone && data.companyPhone.trim());
+  const hasEmail = Boolean(data.email && data.email.trim());
+  if (!hasPhone && !hasEmail) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["companyContact"],
+      message: VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE,
+    });
+  }
+});
+
+export type VendorCompanyRosterFormValues = z.infer<typeof vendorCompanyRosterSchema>;
+
+export const vendorCompanyRosterUpdateSchema = vendorCompanyRosterSchema.and(
+  z.object({
+    companyId: z.union([z.string(), z.number()]).nullable(),
+    rowVersion: z.string().min(1, "Row version is required"),
+  }),
+);
+
+export type VendorCompanyRosterUpdateValues = z.infer<typeof vendorCompanyRosterUpdateSchema>;
+
+// SH-250: the preferred-contact control was removed from the form, so seeding a
+// value here fabricated one on submit. `append` already omits it; the schema
+// keeps it optional, so both paths now agree and the backend receives it only
+// when a real value exists.
+export const emptyRosterTechnician: RosterTechnicianValues = {
+  contactName: "",
+  phone: "",
+  email: "",
+  tradeSpecialties: "",
+  isActive: true,
+};
+
+export const emptyVendorCompanyRosterForm: VendorCompanyRosterFormValues = {
+  name: "",
+  companyPhone: "",
+  email: "",
+  address: "",
+  city: "",
+  state: "",
+  zip: "",
+  notes: "",
+  areaId: "",
+  technicians: [],
+};
diff --git a/src/domain/vendors/schemas/vendor-schema.ts b/src/domain/vendors/schemas/vendor-schema.ts
new file mode 100644
index 00000000..c9bb5180
--- /dev/null
+++ b/src/domain/vendors/schemas/vendor-schema.ts
@@ -0,0 +1,81 @@
+import { z } from "zod";
+import {
+  VENDOR_PREFERRED_CONTACT_VALUES,
+  type VendorPreferredContact,
+} from "@/domain/vendors/types/vendor";
+
+const httpsUrl = z
+  .string()
+  .trim()
+  .refine(
+    (value) => value === "" || /^https:\/\/.+/i.test(value),
+    "Google Maps URL must use HTTPS",
+  );
+
+const northAmericanPhone = z.string().refine((value) => {
+  if (value === "") return true;
+  const digits = value.replace(/\D+/g, "");
+  return digits.length === 10 || (digits.length === 11 && digits.startsWith("1"));
+}, "Enter a 10-digit phone number");
+
+export const vendorSchema = z.object({
+  companyName: z.string().min(1, "Company is required"),
+  contactName: z.string().min(1, "Technician name is required"),
+  email: z.union([z.string().email("Invalid email"), z.literal("")]).optional(),
+  phone: northAmericanPhone.optional(),
+  companyPhone: northAmericanPhone.optional(),
+  googleMapsUrl: httpsUrl.optional(),
+  notes: z.string().optional(),
+  totalJobs: z.number().optional(),
+  address: z.string().optional(),
+  city: z.string().optional(),
+  state: z.string().optional(),
+  zip: z.string().optional(),
+  tradeSpecialties: z.string().optional(),
+  isActive: z.boolean().optional(),
+  companyId: z.union([z.string(), z.number()]).nullable().optional(),
+  preferredContact: z
+    .enum(VENDOR_PREFERRED_CONTACT_VALUES as [VendorPreferredContact, ...VendorPreferredContact[]])
+    .optional(),
+});
+
+export type VendorFormValues = z.infer<typeof vendorSchema>;
+
+export const vendorUpdateSchema = vendorSchema.partial();
+
+export type VendorUpdateValues = z.infer<typeof vendorUpdateSchema>;
+
+const VENDOR_UPDATE_FIELDS = [
+  "companyName",
+  "contactName",
+  "email",
+  "phone",
+  "companyPhone",
+  "googleMapsUrl",
+  "notes",
+  "address",
+  "city",
+  "state",
+  "zip",
+  "tradeSpecialties",
+  "isActive",
+  "companyId",
+  "preferredContact",
+] as const satisfies readonly (keyof VendorFormValues)[];
+
+export function getChangedVendorValues(
+  values: Partial<VendorFormValues>,
+  original: VendorFormValues | null,
+): VendorUpdateValues {
+  if (!original) return {};
+
+  return VENDOR_UPDATE_FIELDS.reduce<VendorUpdateValues>((changed, field) => {
+    if (
+      Object.prototype.hasOwnProperty.call(values, field) &&
+      !Object.is(values[field], original[field])
+    ) {
+      Object.assign(changed, { [field]: values[field] });
+    }
+    return changed;
+  }, {});
+}
diff --git a/src/domain/vendors/types/vendor.ts b/src/domain/vendors/types/vendor.ts
new file mode 100644
index 00000000..878e2336
--- /dev/null
+++ b/src/domain/vendors/types/vendor.ts
@@ -0,0 +1,186 @@
+export type VendorPreferredContact = "Phone" | "Email" | "Text";
+
+export const VENDOR_PREFERRED_CONTACT_VALUES: VendorPreferredContact[] = ["Phone", "Email", "Text"];
+
+export interface VendorDirectoryTechnician {
+  id: string | number;
+  contactName: string;
+  email: string;
+  phone: string;
+  preferredContact: VendorPreferredContact;
+  tradeSpecialties: string;
+  isActive: boolean;
+  totalJobs: number;
+}
+
+export interface VendorListItem {
+  id: string | number | null;
+  companyId: string | number | null;
+  companyName: string;
+  contactName: string;
+  email: string;
+  phone: string;
+  companyPhone: string;
+  googleMapsUrl: string;
+  notes: string;
+  totalJobs: number;
+  address: string;
+  city: string;
+  state: string;
+  tradeSpecialties: string;
+  isActive: boolean;
+  preferredContact: VendorPreferredContact;
+  /** Stable Area id as a string; "" when the company is Unassigned. */
+  areaId: string;
+  /** Area display name; "" when the company is Unassigned. */
+  areaName: string;
+  /** Present on company-grouped directory responses; optional for legacy clients/fixtures. */
+  technicians?: VendorDirectoryTechnician[];
+}
+
+export interface Vendor {
+  id?: string | number;
+  companyId: string | number | null;
+  companyName: string;
+  contactName: string;
+  email: string;
+  phone: string;
+  companyPhone: string;
+  googleMapsUrl: string;
+  notes: string;
+  totalJobs: number;
+  address: string;
+  city: string;
+  state: string;
+  zip: string;
+  tradeSpecialties: string;
+  isActive: boolean;
+  preferredContact: VendorPreferredContact;
+}
+
+export interface VendorsListParams {
+  search?: string;
+  isActive?: boolean;
+  page?: number;
+  pageSize?: number;
+  companies?: string[];
+  trades?: string[];
+  locations?: string[];
+  jobBuckets?: string[];
+  /** Stable Area ids or the "__unassigned__" sentinel. */
+  areas?: string[];
+}
+
+export interface VendorsListResult {
+  items: VendorListItem[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+}
+
+export interface VendorFacetCompany {
+  companyId: string | number | null;
+  name: string;
+  companyPhone: string;
+  email: string;
+  address: string;
+  city: string;
+  state: string;
+  zip: string;
+  googleMapsUrl: string;
+}
+
+export interface VendorFacetLocation {
+  city: string;
+  state: string;
+  label: string;
+}
+
+export interface VendorFacetJobBucket {
+  id: string;
+  label: string;
+}
+
+/** Active Area catalogue option. `id` is the stable areas[n] filter value. */
+export interface VendorFacetArea {
+  id: string;
+  name: string;
+}
+
+/** Wire value that selects companies without an Area. */
+export const VENDOR_AREA_UNASSIGNED = "__unassigned__";
+
+export interface VendorFacets {
+  companies: VendorFacetCompany[];
+  trades: string[];
+  areas: VendorFacetArea[];
+  locations: VendorFacetLocation[];
+  jobBuckets: VendorFacetJobBucket[];
+}
+
+export interface VendorPortalToken {
+  portalUrl: string;
+  issuedAt: string;
+  expiresAt: string;
+  lastUsedAt?: string;
+}
+
+export interface VendorOpenWorkOrderSummary {
+  workOrderId: string | number;
+  workOrderNumber: string;
+  workOrderTitle: string;
+  status: string;
+  scheduledDate?: string;
+  dispatchId?: string | number;
+}
+
+export interface VendorDeactivationImpact {
+  vendorId: string | number;
+  canDeactivate: boolean;
+  openWorkOrders: VendorOpenWorkOrderSummary[];
+}
+
+export interface VendorRosterTechnician {
+  id?: string | number;
+  contactName: string;
+  phone: string;
+  email: string;
+  preferredContact?: VendorPreferredContact;
+  tradeSpecialties: string;
+  isActive: boolean;
+  totalJobs: number;
+}
+
+export interface VendorCompanyRoster {
+  companyId: string | number | null;
+  rowVersion: string;
+  name: string;
+  companyPhone: string;
+  email: string;
+  address: string;
+  city: string;
+  state: string;
+  zip: string;
+  googleMapsUrl: string;
+  notes: string;
+  /** Stable Area id as a string; "" when the company is Unassigned. */
+  areaId: string;
+  areaName: string;
+  technicians: VendorRosterTechnician[];
+}
+
+export interface VendorRosterBlockedWorkOrder {
+  workOrderId: string | number;
+  workOrderNumber: string;
+  workOrderTitle: string;
+  status: string;
+  scheduledDate?: string;
+}
+
+export type VendorRosterConflictKind = "duplicate" | "open-work-orders" | "stale";
+
+export interface VendorRosterConflict {
+  kind: VendorRosterConflictKind;
+  message: string;
+  blockedWorkOrders: VendorRosterBlockedWorkOrder[];
+}
diff --git a/src/domain/vendors/use-cases/use-create-vendor.ts b/src/domain/vendors/use-cases/use-create-vendor.ts
new file mode 100644
index 00000000..fa1c730f
--- /dev/null
+++ b/src/domain/vendors/use-cases/use-create-vendor.ts
@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import type { VendorFormValues } from "@/domain/vendors/schemas/vendor-schema";
+import type { Vendor } from "@/domain/vendors/types/vendor";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useCreateVendor(): UseMutationResult<Vendor, Error, VendorFormValues> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (values: VendorFormValues) => vendorsApi.create(values),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.vendors.all });
+      toast.success("Vendor created");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to create vendor");
+    },
+  });
+}
diff --git a/src/domain/vendors/use-cases/use-delete-vendor.ts b/src/domain/vendors/use-cases/use-delete-vendor.ts
new file mode 100644
index 00000000..17f8ae11
--- /dev/null
+++ b/src/domain/vendors/use-cases/use-delete-vendor.ts
@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export interface DeleteVendorInput {
+  id: string | number;
+  confirmOpenWorkOrders?: boolean;
+}
+
+export function useDeleteVendor(): UseMutationResult<void, Error, DeleteVendorInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, confirmOpenWorkOrders = false }: DeleteVendorInput) =>
+      vendorsApi.delete(id, confirmOpenWorkOrders),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.vendors.all });
+      toast.success("Vendor deactivated");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to deactivate vendor");
+    },
+  });
+}
diff --git a/src/domain/vendors/use-cases/use-save-vendor-company-notes.ts b/src/domain/vendors/use-cases/use-save-vendor-company-notes.ts
new file mode 100644
index 00000000..9e98976b
--- /dev/null
+++ b/src/domain/vendors/use-cases/use-save-vendor-company-notes.ts
@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { vendorCompanyRosterApi } from "@/domain/vendors/api/vendor-company-roster-api";
+import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
+import type { VendorCompanyNotesUpdate } from "@/domain/vendors/utils/build-company-notes-patch";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export const NOTES_SAVE_FAILED_MESSAGE =
+  "Work order created, but the vendor notes could not be saved.";
+
+/** Writes company-level vendor notes and refreshes every vendor view that shows them. */
+export function useSaveVendorCompanyNotes(): UseMutationResult<
+  VendorCompanyRoster,
+  unknown,
+  VendorCompanyNotesUpdate
+> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ companyId, patch }: VendorCompanyNotesUpdate) =>
+      vendorCompanyRosterApi.addTechnicians(companyId, patch),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.vendors.all });
+    },
+    onError: () => {
+      toast.error(NOTES_SAVE_FAILED_MESSAGE);
+    },
+  });
+}
diff --git a/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts b/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
new file mode 100644
index 00000000..89e35054
--- /dev/null
+++ b/src/domain/vendors/use-cases/use-save-vendor-company-roster.ts
@@ -0,0 +1,213 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { vendorCompanyRosterApi } from "@/domain/vendors/api/vendor-company-roster-api";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import { isVendorRosterConflictError } from "@/domain/vendors/lib/vendor-roster-conflict";
+import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
+import type {
+  VendorCompanyRosterFormValues,
+  VendorCompanyRosterUpdateValues,
+} from "@/domain/vendors/schemas/vendor-roster-schema";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export interface SaveVendorCompanyRosterInput {
+  mode: "create" | "update" | "add";
+  values: VendorCompanyRosterFormValues;
+  companyId?: string | number | null;
+  rowVersion?: string;
+  originalRoster?: VendorCompanyRoster;
+  /** Company fields the user actually edited. See buildAdditiveRosterPatch. */
+  editedCompanyFields?: EditedCompanyFields;
+}
+
+export type EditedCompanyFields = Partial<Record<(typeof COMPANY_FIELDS)[number], boolean>>;
+
+export interface SaveVendorCompanyRosterContext {
+  conflict?: unknown;
+}
+
+// `googleMapsUrl` is deliberately absent: it is a deprecated read-only field,
+// so neither the additive companyFields patch nor the status-only diff may
+// ever transmit it.
+const COMPANY_FIELDS = [
+  "name",
+  "companyPhone",
+  "email",
+  "address",
+  "city",
+  "state",
+  "zip",
+  "notes",
+  "areaId",
+] as const;
+
+const TECHNICIAN_FIELDS = [
+  "id",
+  "contactName",
+  "phone",
+  "email",
+  "preferredContact",
+  "tradeSpecialties",
+] as const;
+
+export function getSingleStatusOnlyChange(
+  original: VendorCompanyRoster,
+  values: VendorCompanyRosterFormValues,
+): { id: string | number; isActive: boolean } | null {
+  if (COMPANY_FIELDS.some((field) => original[field] !== values[field])) return null;
+  if (original.technicians.length !== values.technicians.length) return null;
+
+  const changed: Array<{ id: string | number; isActive: boolean }> = [];
+  for (let index = 0; index < original.technicians.length; index += 1) {
+    const before = original.technicians[index];
+    const after = values.technicians[index];
+    if (!before || !after || TECHNICIAN_FIELDS.some((field) => before[field] !== after[field])) {
+      return null;
+    }
+    if (before.isActive !== after.isActive) {
+      if (before.id == null) return null;
+      changed.push({ id: before.id, isActive: after.isActive });
+    }
+  }
+  return changed.length === 1 ? changed[0] : null;
+}
+
+export interface VendorRosterAdditivePatchInput {
+  rowVersion: string;
+  addTechnicians: Array<{
+    contactName: string;
+    phone: string;
+    email: string;
+    preferredContact?: string;
+    tradeSpecialties: string;
+    isActive: boolean;
+  }>;
+  companyFields?: Record<string, string>;
+}
+
+function hasTechnicianContent(technician: {
+  contactName: string;
+  phone: string;
+  email: string;
+  tradeSpecialties: string;
+}): boolean {
+  return Boolean(
+    technician.contactName.trim() ||
+    technician.phone.trim() ||
+    technician.email.trim() ||
+    technician.tradeSpecialties.trim(),
+  );
+}
+
+/**
+ * Builds the additive PATCH body for the Add flow.
+ *
+ * `editedCompanyFields` must carry the fields the user actually touched. A plain
+ * form-vs-roster diff is unsafe here: after a stale-409 the roster is refetched while the form
+ * keeps the values loaded before the conflict, so a field another user changed in that window
+ * would look "different" and be sent back with our stale value, silently reverting their edit.
+ * Only fields the user edited are ever transmitted.
+ */
+export function buildAdditiveRosterPatch(
+  roster: VendorCompanyRoster | null | undefined,
+  values: VendorCompanyRosterFormValues,
+  rowVersion: string,
+  editedCompanyFields: EditedCompanyFields = {},
+): VendorRosterAdditivePatchInput | null {
+  const addTechnicians = values.technicians.filter(
+    (technician) => technician.id == null && hasTechnicianContent(technician),
+  );
+  const companyFields: Record<string, string> = {};
+  if (roster) {
+    for (const field of COMPANY_FIELDS) {
+      if (editedCompanyFields[field] !== true) continue;
+      if (values[field] !== roster[field]) companyFields[field] = values[field];
+    }
+  }
+  if (addTechnicians.length === 0 && Object.keys(companyFields).length === 0) return null;
+  return {
+    rowVersion,
+    addTechnicians,
+    ...(Object.keys(companyFields).length > 0 ? { companyFields } : {}),
+  };
+}
+
+export function useSaveVendorCompanyRoster(): UseMutationResult<
+  VendorCompanyRoster,
+  unknown,
+  SaveVendorCompanyRosterInput,
+  SaveVendorCompanyRosterContext
+> {
+  const queryClient = useQueryClient();
+
+  return useMutation<
+    VendorCompanyRoster,
+    unknown,
+    SaveVendorCompanyRosterInput,
+    SaveVendorCompanyRosterContext
+  >({
+    mutationFn: async ({
+      mode,
+      values,
+      companyId,
+      rowVersion,
+      originalRoster,
+      editedCompanyFields,
+    }: SaveVendorCompanyRosterInput) => {
+      if (mode === "update") {
+        const statusChange = originalRoster
+          ? getSingleStatusOnlyChange(originalRoster, values)
+          : null;
+        if (statusChange) {
+          const baseRoster = originalRoster as VendorCompanyRoster;
+          await vendorsApi.update(statusChange.id, { isActive: statusChange.isActive });
+          return {
+            ...baseRoster,
+            technicians: baseRoster.technicians.map((technician) =>
+              technician.id === statusChange.id
+                ? { ...technician, isActive: statusChange.isActive }
+                : technician,
+            ),
+          };
+        }
+        if (companyId === undefined || companyId === null || companyId === "") {
+          throw new Error("Company id is required to update");
+        }
+        if (!rowVersion) throw new Error("Row version is required to update");
+        return vendorCompanyRosterApi.update(companyId, values, rowVersion);
+      }
+      if (mode === "add") {
+        if (companyId === undefined || companyId === null || companyId === "") {
+          throw new Error("Company id is required to add technicians");
+        }
+        if (!rowVersion) throw new Error("Row version is required to add technicians");
+        const patch = buildAdditiveRosterPatch(
+          originalRoster,
+          values,
+          rowVersion,
+          editedCompanyFields,
+        );
+        if (!patch) throw new Error("Nothing to add to this vendor company");
+        return vendorCompanyRosterApi.addTechnicians(companyId, patch);
+      }
+      return vendorCompanyRosterApi.create(values);
+    },
+    onSuccess: (data, variables) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.vendors.all });
+      if ((variables.mode === "update" || variables.mode === "add") && variables.companyId) {
+        void queryClient.invalidateQueries({
+          queryKey: queryKeys.vendors.roster("companyId", variables.companyId),
+        });
+      }
+      toast.success(
+        variables.mode === "create" ? "Vendor company created" : "Vendor company updated",
+      );
+    },
+    onError: (error) => {
+      if (isVendorRosterConflictError(error)) return;
+      toast.error("Failed to save vendor company. Try again.");
+    },
+  });
+}
+
+export type { VendorCompanyRosterFormValues, VendorCompanyRosterUpdateValues };
diff --git a/src/domain/vendors/use-cases/use-update-vendor.ts b/src/domain/vendors/use-cases/use-update-vendor.ts
new file mode 100644
index 00000000..9567c4b6
--- /dev/null
+++ b/src/domain/vendors/use-cases/use-update-vendor.ts
@@ -0,0 +1,27 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import type { VendorUpdateValues } from "@/domain/vendors/schemas/vendor-schema";
+import type { Vendor } from "@/domain/vendors/types/vendor";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export interface UpdateVendorInput {
+  id: string | number;
+  values: VendorUpdateValues;
+}
+
+export function useUpdateVendor(): UseMutationResult<Vendor, Error, UpdateVendorInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, values }: UpdateVendorInput) => vendorsApi.update(id, values),
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.vendors.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.vendors.detail(variables.id) });
+      toast.success("Vendor updated");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update vendor");
+    },
+  });
+}
diff --git a/src/domain/vendors/use-cases/use-vendor-company-roster.ts b/src/domain/vendors/use-cases/use-vendor-company-roster.ts
new file mode 100644
index 00000000..882e5869
--- /dev/null
+++ b/src/domain/vendors/use-cases/use-vendor-company-roster.ts
@@ -0,0 +1,36 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import {
+  vendorCompanyRosterApi,
+  type RosterQuery,
+} from "@/domain/vendors/api/vendor-company-roster-api";
+import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+function buildQuery(vendorId?: string | number, companyId?: string | number): RosterQuery | null {
+  const hasVendorId = vendorId !== undefined && vendorId !== null && vendorId !== "";
+  const hasCompanyId = companyId !== undefined && companyId !== null && companyId !== "";
+  if (!hasVendorId && !hasCompanyId) return null;
+  return {
+    vendorId: hasVendorId ? vendorId : undefined,
+    companyId: hasCompanyId ? companyId : undefined,
+  };
+}
+
+export function useVendorCompanyRoster(
+  vendorId?: string | number,
+  companyId?: string | number,
+): UseQueryResult<VendorCompanyRoster, Error> {
+  const query = buildQuery(vendorId, companyId);
+  const by = query?.companyId !== undefined ? "companyId" : "vendorId";
+  const id = (query?.companyId ?? query?.vendorId ?? "") as string | number;
+
+  return useQuery({
+    queryKey: queryKeys.vendors.roster(by, id),
+    queryFn: () => {
+      if (!query) throw new Error("Vendor id or company id is required");
+      return vendorCompanyRosterApi.get(query);
+    },
+    enabled: query !== null,
+    staleTime: 0,
+  });
+}
diff --git a/src/domain/vendors/use-cases/use-vendor-deactivation-impact.ts b/src/domain/vendors/use-cases/use-vendor-deactivation-impact.ts
new file mode 100644
index 00000000..7c59c970
--- /dev/null
+++ b/src/domain/vendors/use-cases/use-vendor-deactivation-impact.ts
@@ -0,0 +1,22 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import type { VendorDeactivationImpact } from "@/domain/vendors/types/vendor";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useVendorDeactivationImpact(
+  id: string | number | undefined,
+): UseQueryResult<VendorDeactivationImpact, Error> {
+  return useQuery({
+    queryKey: queryKeys.vendors.deactivationImpact(id ?? ""),
+    queryFn: () => vendorsApi.getDeactivationImpact(requireParam(id)),
+    enabled: id !== undefined && id !== null && id !== "",
+    staleTime: 0,
+  });
+}
+
+function requireParam(id: string | number | undefined): string | number {
+  if (id === undefined || id === null || id === "") {
+    throw new Error("Vendor id is required");
+  }
+  return id;
+}
diff --git a/src/domain/vendors/use-cases/use-vendor-detail.ts b/src/domain/vendors/use-cases/use-vendor-detail.ts
new file mode 100644
index 00000000..1ae770ac
--- /dev/null
+++ b/src/domain/vendors/use-cases/use-vendor-detail.ts
@@ -0,0 +1,13 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import type { Vendor } from "@/domain/vendors/types/vendor";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+export function useVendorDetail(id: string | undefined): UseQueryResult<Vendor, Error> {
+  return useQuery({
+    queryKey: queryKeys.vendors.detail(id ?? ""),
+    queryFn: () => vendorsApi.getById(requireQueryParam(id, "Vendor id")),
+    enabled: Boolean(id),
+  });
+}
diff --git a/src/domain/vendors/use-cases/use-vendor-directory-list.ts b/src/domain/vendors/use-cases/use-vendor-directory-list.ts
new file mode 100644
index 00000000..b610af63
--- /dev/null
+++ b/src/domain/vendors/use-cases/use-vendor-directory-list.ts
@@ -0,0 +1,14 @@
+import { keepPreviousData, useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import type { VendorsListParams, VendorsListResult } from "@/domain/vendors/types/vendor";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useVendorDirectoryList(
+  params: VendorsListParams,
+): UseQueryResult<VendorsListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.vendors.directoryList(params as Record<string, unknown>),
+    queryFn: () => vendorsApi.getDirectoryList(params),
+    placeholderData: keepPreviousData,
+  });
+}
diff --git a/src/domain/vendors/use-cases/use-vendor-facets.ts b/src/domain/vendors/use-cases/use-vendor-facets.ts
new file mode 100644
index 00000000..2aef7d19
--- /dev/null
+++ b/src/domain/vendors/use-cases/use-vendor-facets.ts
@@ -0,0 +1,13 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { vendorsApi, type VendorFacetsParams } from "@/domain/vendors/api/vendors-api";
+import type { VendorFacets } from "@/domain/vendors/types/vendor";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useVendorFacets(isActive?: boolean): UseQueryResult<VendorFacets, Error> {
+  const params: VendorFacetsParams | undefined = isActive !== undefined ? { isActive } : undefined;
+  return useQuery({
+    queryKey: queryKeys.vendors.facets(isActive),
+    queryFn: () => vendorsApi.getFacets(params),
+    staleTime: 60_000,
+  });
+}
diff --git a/src/domain/vendors/use-cases/use-vendor-portal-token.ts b/src/domain/vendors/use-cases/use-vendor-portal-token.ts
new file mode 100644
index 00000000..f27f660d
--- /dev/null
+++ b/src/domain/vendors/use-cases/use-vendor-portal-token.ts
@@ -0,0 +1,74 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  type UseMutationResult,
+  type UseQueryResult,
+} from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import type { VendorPortalToken } from "@/domain/vendors/types/vendor";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+export function useVendorPortalToken(
+  vendorId: string | number | undefined,
+): UseQueryResult<VendorPortalToken | null, Error> {
+  return useQuery({
+    queryKey: queryKeys.vendors.portalToken(vendorId ?? ""),
+    queryFn: () => vendorsApi.getPortalToken(requireQueryParam(vendorId, "Vendor id")),
+    enabled: vendorId !== undefined && vendorId !== "",
+    retry: false,
+  });
+}
+
+export function useRotateVendorPortalToken(
+  vendorId: string | number,
+): UseMutationResult<VendorPortalToken | null, Error, void> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => vendorsApi.rotatePortalToken(vendorId),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.vendors.portalToken(vendorId) });
+      toast.success("Portal token rotated");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Rotate failed");
+    },
+  });
+}
+
+export function useRevokeVendorPortalToken(
+  vendorId: string | number,
+): UseMutationResult<void, Error, void> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => vendorsApi.revokePortalToken(vendorId),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.vendors.portalToken(vendorId) });
+      toast.success("Portal tokens revoked");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Revoke failed");
+    },
+  });
+}
+
+export function useGenerateVendorPortalToken(
+  vendorId: string | number,
+): UseMutationResult<VendorPortalToken | null, Error, void> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => vendorsApi.getPortalToken(vendorId),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.vendors.portalToken(vendorId) });
+      toast.success("Portal link generated");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to generate token");
+    },
+  });
+}
diff --git a/src/domain/vendors/use-cases/use-vendors-list.ts b/src/domain/vendors/use-cases/use-vendors-list.ts
new file mode 100644
index 00000000..bd27c34b
--- /dev/null
+++ b/src/domain/vendors/use-cases/use-vendors-list.ts
@@ -0,0 +1,14 @@
+import { keepPreviousData, useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+import type { VendorsListParams, VendorsListResult } from "@/domain/vendors/types/vendor";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useVendorsList(
+  params: VendorsListParams,
+): UseQueryResult<VendorsListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.vendors.list(params as Record<string, unknown>),
+    queryFn: () => vendorsApi.getList(params),
+    placeholderData: keepPreviousData,
+  });
+}
diff --git a/src/domain/vendors/utils/build-company-notes-patch.ts b/src/domain/vendors/utils/build-company-notes-patch.ts
new file mode 100644
index 00000000..3546a3cc
--- /dev/null
+++ b/src/domain/vendors/utils/build-company-notes-patch.ts
@@ -0,0 +1,35 @@
+import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
+import type { VendorRosterAdditivePatch } from "@/domain/vendors/mappers/vendor-roster-mapper";
+
+export type VendorCompanyNotesBaseline = Pick<
+  VendorCompanyRoster,
+  "companyId" | "rowVersion" | "notes"
+>;
+
+export interface VendorCompanyNotesUpdate {
+  companyId: string | number;
+  patch: VendorRosterAdditivePatch;
+}
+
+/**
+ * Company-level notes edited outside the Vendors page (e.g. the Create WO wizard)
+ * are written through the additive roster PATCH, which only touches the fields sent.
+ * Returns null when nothing changed. Clearing notes is not expressible on that PATCH
+ * (blank company fields mean "unchanged"), so an emptied field is not sent.
+ */
+export function buildCompanyNotesUpdate(
+  baseline: VendorCompanyNotesBaseline | null | undefined,
+  editedNotes: string,
+): VendorCompanyNotesUpdate | null {
+  if (!baseline || baseline.companyId === null || !baseline.rowVersion) {
+    return null;
+  }
+  const notes = editedNotes.trim();
+  if (!notes || notes === baseline.notes.trim()) {
+    return null;
+  }
+  return {
+    companyId: baseline.companyId,
+    patch: { rowVersion: baseline.rowVersion, addTechnicians: [], companyFields: { notes } },
+  };
+}
diff --git a/src/domain/vendors/utils/build-technician-create-payload.ts b/src/domain/vendors/utils/build-technician-create-payload.ts
new file mode 100644
index 00000000..ff905c78
--- /dev/null
+++ b/src/domain/vendors/utils/build-technician-create-payload.ts
@@ -0,0 +1,36 @@
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { VendorFormValues } from "@/domain/vendors/schemas/vendor-schema";
+
+type BuildTechnicianCreatePayloadInput = {
+  companyVendor: Pick<VendorDropdownItem, "companyName" | "email" | "address" | "tradeSpecialties">;
+  contactName: string;
+  phone?: string;
+  companyId?: string | number | null;
+};
+
+/** Builds a vendor create payload for a new technician under an existing company. */
+export function buildTechnicianCreatePayload({
+  companyVendor,
+  contactName,
+  phone = "",
+  companyId = null,
+}: BuildTechnicianCreatePayloadInput): VendorFormValues {
+  return {
+    companyName: companyVendor.companyName,
+    contactName: contactName.trim(),
+    email: companyVendor.email ?? "",
+    phone: phone.trim(),
+    companyPhone: "",
+    googleMapsUrl: "",
+    notes: "",
+    totalJobs: 0,
+    address: companyVendor.address ?? "",
+    city: "",
+    state: "",
+    zip: "",
+    tradeSpecialties: companyVendor.tradeSpecialties ?? "",
+    isActive: true,
+    companyId,
+    preferredContact: "Phone",
+  };
+}
diff --git a/src/domain/vendors/utils/draft-vendor.ts b/src/domain/vendors/utils/draft-vendor.ts
new file mode 100644
index 00000000..c701a525
--- /dev/null
+++ b/src/domain/vendors/utils/draft-vendor.ts
@@ -0,0 +1,21 @@
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { VendorFormValues } from "@/domain/vendors/schemas/vendor-schema";
+
+export const DRAFT_VENDOR_ID_PREFIX = "draft:";
+
+export function isDraftVendorId(id: string | number | null | undefined): boolean {
+  return String(id ?? "").startsWith(DRAFT_VENDOR_ID_PREFIX);
+}
+
+export function createDraftVendorDropdownItem(payload: VendorFormValues): VendorDropdownItem {
+  const email = (payload.email ?? "").trim();
+  return {
+    id: `${DRAFT_VENDOR_ID_PREFIX}${crypto.randomUUID()}`,
+    companyName: payload.companyName,
+    contactName: payload.contactName,
+    tradeSpecialties: payload.tradeSpecialties ?? "",
+    address: payload.address ?? "",
+    distanceMiles: null,
+    email: email || undefined,
+  };
+}
diff --git a/src/domain/vendors/utils/vendor-to-dropdown-item.ts b/src/domain/vendors/utils/vendor-to-dropdown-item.ts
new file mode 100644
index 00000000..7be47134
--- /dev/null
+++ b/src/domain/vendors/utils/vendor-to-dropdown-item.ts
@@ -0,0 +1,15 @@
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import type { Vendor } from "@/domain/vendors/types/vendor";
+
+export function vendorToDropdownItem(vendor: Vendor): VendorDropdownItem {
+  const email = vendor.email.trim();
+  return {
+    id: vendor.id ?? "",
+    companyName: vendor.companyName,
+    contactName: vendor.contactName,
+    tradeSpecialties: vendor.tradeSpecialties,
+    address: vendor.address,
+    distanceMiles: null,
+    email: email || undefined,
+  };
+}
diff --git a/src/domain/work-orders/api/fetch-unassigned-board-rows.ts b/src/domain/work-orders/api/fetch-unassigned-board-rows.ts
new file mode 100644
index 00000000..f8d0dcb8
--- /dev/null
+++ b/src/domain/work-orders/api/fetch-unassigned-board-rows.ts
@@ -0,0 +1,11 @@
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import type { WorkOrderBoardListResult } from "@/domain/work-orders/types/work-order-board";
+import { toUnassignedQueueQueryParams } from "@/domain/work-orders/utils/board-query-params";
+
+/** One GET /board/search page for Dispatcher=Unassigned / Advanced Filters. */
+export async function fetchUnassignedBoardPage(
+  page = 0,
+  pageSize = 50,
+): Promise<WorkOrderBoardListResult> {
+  return workOrdersApi.searchBoard(toUnassignedQueueQueryParams(page, pageSize));
+}
diff --git a/src/domain/work-orders/api/work-order-board-documents-api.ts b/src/domain/work-orders/api/work-order-board-documents-api.ts
new file mode 100644
index 00000000..99c060fd
--- /dev/null
+++ b/src/domain/work-orders/api/work-order-board-documents-api.ts
@@ -0,0 +1,267 @@
+import { API_PATHS } from "@/api/api-paths";
+import { ApiError, mapHttpStatusToMessage } from "@/api/api-error";
+import { apiGet, apiPost, apiRequestRaw } from "@/api/api";
+import { handleApiResponse } from "@/api/handle-api-response";
+import { uploadFormWithProgress } from "@/api/upload-form-with-progress";
+import { traceHttpOperation } from "@/observability/http-transaction";
+import {
+  BoardPatchConflictError,
+  BoardPatchValidationError,
+} from "@/domain/work-orders/errors/board-patch-errors";
+import {
+  buildCompletionDocFormData,
+  buildMediaFormData,
+  mapBoardDetailComment,
+  mapBoardDetailMediaItem,
+  mapCompletion,
+  type UploadableMediaCategory,
+} from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type {
+  WorkOrderBoardCompletion,
+  WorkOrderBoardMediaItem,
+} from "@/domain/work-orders/types/work-order-board-detail";
+import type { WorkOrderComment } from "@/domain/work-orders/types/work-order";
+
+export interface CreateWorkOrderCommentPayload {
+  text: string;
+  mentions?: string[];
+}
+
+async function readResponseJson(response: Response): Promise<unknown> {
+  try {
+    return await response.json();
+  } catch {
+    return undefined;
+  }
+}
+
+function throwDocumentHttpError(status: number, data: unknown): never {
+  const record = typeof data === "object" && data !== null ? (data as Record<string, unknown>) : {};
+
+  if (status === 409) {
+    throw new BoardPatchConflictError(
+      typeof record.message === "string"
+        ? record.message
+        : "The record was modified by another user. Refresh and retry.",
+      null,
+    );
+  }
+
+  if (status === 422) {
+    throw new BoardPatchValidationError(
+      typeof record.code === "string" ? record.code : "ValidationError",
+      typeof record.message === "string" ? record.message : mapHttpStatusToMessage(422, data),
+    );
+  }
+
+  throw new ApiError(mapHttpStatusToMessage(status, data), status);
+}
+
+export const workOrderBoardDocumentsApi = {
+  listComments: async (workOrderId: string | number): Promise<WorkOrderComment[]> => {
+    const data = await apiGet<unknown>(API_PATHS.workOrder.comments(workOrderId));
+    const items = handleApiResponse<unknown[]>(data);
+    return Array.isArray(items) ? items.map(mapBoardDetailComment) : [];
+  },
+
+  createComment: async (
+    workOrderId: string | number,
+    text: string,
+    mentions?: string[],
+  ): Promise<WorkOrderComment> => {
+    const payload: CreateWorkOrderCommentPayload = { text };
+    if (mentions && mentions.length > 0) {
+      payload.mentions = mentions.map(String);
+    }
+
+    const data = await apiPost<unknown>(API_PATHS.workOrder.comments(workOrderId), payload);
+    return mapBoardDetailComment(handleApiResponse(data));
+  },
+
+  updateComment: async (
+    workOrderId: string | number,
+    commentId: string | number,
+    text: string,
+  ): Promise<WorkOrderComment> => {
+    const response = await apiRequestRaw(
+      "patch",
+      API_PATHS.workOrder.commentItem(workOrderId, commentId),
+      { json: { text }, throwHttpErrors: false },
+      "workOrderBoardDocumentsApi.updateComment",
+    );
+    const data = await readResponseJson(response);
+
+    if (response.ok) {
+      if (response.status === 204 || data == null) {
+        return mapBoardDetailComment({ id: commentId, text });
+      }
+      return mapBoardDetailComment(handleApiResponse(data) ?? data);
+    }
+
+    throwDocumentHttpError(response.status, data);
+  },
+
+  /** @deprecated Prefer createComment — modern board endpoint. */
+  addComment: async (
+    workOrderId: string | number,
+    text: string,
+    _commentType?: string,
+  ): Promise<WorkOrderComment> => {
+    return workOrderBoardDocumentsApi.createComment(workOrderId, text);
+  },
+
+  listMedia: async (workOrderId: string | number): Promise<WorkOrderBoardMediaItem[]> => {
+    const data = await apiGet<unknown>(API_PATHS.workOrder.media(workOrderId));
+    const items = handleApiResponse<unknown[]>(data);
+    return Array.isArray(items) ? items.map(mapBoardDetailMediaItem) : [];
+  },
+
+  uploadMedia: async (
+    workOrderId: string | number,
+    file: File,
+    category?: UploadableMediaCategory,
+    options?: { signal?: AbortSignal; onProgress?: (percent: number) => void },
+  ): Promise<WorkOrderBoardMediaItem> => {
+    const formData = buildMediaFormData(file, category);
+    const { ok, status, data } = await traceHttpOperation(
+      {
+        method: "POST",
+        url: API_PATHS.workOrder.media(workOrderId),
+        entryPoint: "workOrderBoardDocumentsApi.uploadMedia",
+      },
+      async ({ reportStatus }) => {
+        const result = await uploadFormWithProgress(
+          API_PATHS.workOrder.media(workOrderId),
+          formData,
+          { signal: options?.signal, onProgress: options?.onProgress },
+        );
+        reportStatus(result.status);
+        return result;
+      },
+    );
+    if (ok) {
+      return mapBoardDetailMediaItem(handleApiResponse(data) ?? data);
+    }
+    throwDocumentHttpError(status, data);
+  },
+
+  updateMediaCategory: async (
+    workOrderId: string | number,
+    mediaId: string | number,
+    category: UploadableMediaCategory,
+    workOrderVersion: string,
+  ): Promise<WorkOrderBoardMediaItem> => {
+    if (!workOrderVersion) {
+      throw new BoardPatchValidationError(
+        "WorkOrderVersionRequired",
+        "workOrderVersion is required to update media category.",
+      );
+    }
+
+    const formData = new FormData();
+    formData.append("category", category);
+    formData.append("workOrderVersion", workOrderVersion);
+    const response = await apiRequestRaw(
+      "patch",
+      API_PATHS.workOrder.mediaItem(workOrderId, mediaId),
+      { body: formData, throwHttpErrors: false },
+      "workOrderBoardDocumentsApi.updateMediaCategory",
+    );
+    const data = await readResponseJson(response);
+    if (response.ok) {
+      return mapBoardDetailMediaItem(handleApiResponse(data) ?? data);
+    }
+    throwDocumentHttpError(response.status, data);
+  },
+
+  deleteMedia: async (
+    workOrderId: string | number,
+    mediaId: string | number,
+    workOrderVersion: string,
+  ): Promise<void> => {
+    if (!workOrderVersion) {
+      throw new BoardPatchValidationError(
+        "WorkOrderVersionRequired",
+        "workOrderVersion is required to delete media.",
+      );
+    }
+
+    const numericId = typeof mediaId === "number" ? mediaId : Number(mediaId);
+    if (!Number.isFinite(numericId) || numericId <= 0) {
+      throw new BoardPatchValidationError(
+        "InvalidMedia",
+        "Legacy media cannot be deleted via this endpoint.",
+      );
+    }
+
+    const response = await apiRequestRaw(
+      "delete",
+      API_PATHS.workOrder.mediaItem(workOrderId, numericId),
+      { searchParams: { workOrderVersion }, throwHttpErrors: false },
+      "workOrderBoardDocumentsApi.deleteMedia",
+    );
+
+    if (response.status === 204) {
+      return;
+    }
+
+    const data = await readResponseJson(response);
+    if (response.ok) {
+      return;
+    }
+    throwDocumentHttpError(response.status, data);
+  },
+
+  getMediaContent: async (
+    workOrderId: string | number,
+    mediaId: string | number,
+  ): Promise<Blob> => {
+    const response = await apiRequestRaw(
+      "get",
+      API_PATHS.workOrder.mediaContent(workOrderId, mediaId),
+      { credentials: "include", throwHttpErrors: false },
+      "workOrderBoardDocumentsApi.getMediaContent",
+    );
+
+    if (response.ok) {
+      return response.blob();
+    }
+
+    if (response.status === 404) {
+      throw new ApiError(mapHttpStatusToMessage(404), 404);
+    }
+
+    const data = await readResponseJson(response);
+    throwDocumentHttpError(response.status, data);
+  },
+
+  uploadCompletionDoc: async (
+    workOrderId: string | number,
+    params: {
+      file: File;
+      workOrderVersion: string;
+      signOffName?: string;
+      signOffSignature?: string;
+    },
+  ): Promise<WorkOrderBoardCompletion> => {
+    if (!params.workOrderVersion) {
+      throw new BoardPatchValidationError(
+        "WorkOrderVersionRequired",
+        "workOrderVersion is required to upload a completion document.",
+      );
+    }
+
+    const formData = buildCompletionDocFormData(params);
+    const response = await apiRequestRaw(
+      "post",
+      API_PATHS.workOrder.completionDoc(workOrderId),
+      { body: formData, throwHttpErrors: false },
+      "workOrderBoardDocumentsApi.uploadCompletionDoc",
+    );
+    const data = await readResponseJson(response);
+    if (response.ok) {
+      return mapCompletion(handleApiResponse(data) ?? data);
+    }
+    throwDocumentHttpError(response.status, data);
+  },
+};
diff --git a/src/domain/work-orders/api/work-order-uplifts-api.ts b/src/domain/work-orders/api/work-order-uplifts-api.ts
new file mode 100644
index 00000000..866ff164
--- /dev/null
+++ b/src/domain/work-orders/api/work-order-uplifts-api.ts
@@ -0,0 +1,61 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiGet, apiPost } from "@/api/api";
+import { handleApiResponse } from "@/api/handle-api-response";
+import {
+  mapWorkOrderUplift,
+  mapWorkOrderUplifts,
+} from "@/domain/work-orders/mappers/work-order-uplift-mapper";
+import type {
+  CreateWorkOrderUpliftInput,
+  WorkOrderUplift,
+} from "@/domain/work-orders/types/work-order-uplift";
+
+function extractUpliftItems(data: unknown): unknown[] {
+  if (Array.isArray(data)) {
+    return data;
+  }
+  const record = typeof data === "object" && data != null ? (data as Record<string, unknown>) : {};
+  const items = record.items ?? record.Items ?? record.uplifts ?? record.Uplifts;
+  return Array.isArray(items) ? items : [];
+}
+
+export const workOrderUpliftsApi = {
+  list: async (workOrderId: string | number): Promise<WorkOrderUplift[]> => {
+    const data = await apiGet<unknown>(API_PATHS.workOrder.uplifts(workOrderId));
+    const unwrapped = handleApiResponse<unknown>(data);
+    return mapWorkOrderUplifts(extractUpliftItems(unwrapped));
+  },
+
+  create: async (
+    workOrderId: string | number,
+    input: CreateWorkOrderUpliftInput,
+  ): Promise<WorkOrderUplift> => {
+    const data = await apiPost<unknown>(API_PATHS.workOrder.uplifts(workOrderId), {
+      amount: input.amount,
+      notes: input.notes,
+    });
+    return mapWorkOrderUplift(handleApiResponse(data));
+  },
+
+  cancel: async (
+    workOrderId: string | number,
+    upliftId: string | number,
+  ): Promise<WorkOrderUplift> => {
+    const data = await apiPost<unknown>(
+      API_PATHS.workOrder.upliftCancel(workOrderId, upliftId),
+      {},
+    );
+    return mapWorkOrderUplift(handleApiResponse(data));
+  },
+
+  revoke: async (
+    workOrderId: string | number,
+    upliftId: string | number,
+    reason?: string,
+  ): Promise<WorkOrderUplift> => {
+    const data = await apiPost<unknown>(API_PATHS.workOrder.upliftRevoke(workOrderId, upliftId), {
+      reason,
+    });
+    return mapWorkOrderUplift(handleApiResponse(data));
+  },
+};
diff --git a/src/domain/work-orders/api/work-orders-api.ts b/src/domain/work-orders/api/work-orders-api.ts
new file mode 100644
index 00000000..fe6068f5
--- /dev/null
+++ b/src/domain/work-orders/api/work-orders-api.ts
@@ -0,0 +1,496 @@
+import { API_PATHS } from "@/api/api-paths";
+import { ApiError, mapHttpStatusToMessage } from "@/api/api-error";
+import { apiDelete, apiGet, apiPost, apiPostForm, apiPut, apiRequestRaw } from "@/api/api";
+import { handleApiResponse, handlePaginatedResponse } from "@/api/handle-api-response";
+import {
+  BoardPatchConflictError,
+  BoardPatchValidationError,
+} from "@/domain/work-orders/errors/board-patch-errors";
+import { workOrderBoardDocumentsApi } from "@/domain/work-orders/api/work-order-board-documents-api";
+import {
+  mapDispatchComment,
+  mapDispatchDetail,
+  mapDispatchSignoff,
+  mapDispatchToVendorPayload,
+  mapEmployeeOptions,
+  mapLocationOptions,
+  mapTaskListTemplates,
+  mapUpdateDispatchPayload,
+  mapVendorDropdownItems,
+  mapWorkOrderDetail,
+  mapWorkOrderFormToCreatePayload,
+  mapWorkOrderFormToUpdateFormData,
+  mapWorkOrderTableRow,
+  mapWorkOrderTableRows,
+} from "@/domain/work-orders/mappers/work-order-mapper";
+import { mapWizardDraftToBoardCreatePayload } from "@/domain/work-orders/mappers/work-order-board-mapper";
+import { mapWorkOrderBoardDetail } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { WorkOrderFormSchemaValues } from "@/domain/work-orders/schemas/work-order-schema";
+import type {
+  DispatchDetail,
+  DispatchToVendorPayload,
+  EmployeeOption,
+  LocationOption,
+  TaskListTemplate,
+  UpdateDispatchPayload,
+  WorkOrderVendorUpdatePayload,
+  VendorDropdownItem,
+  WorkOrderDetail,
+  WorkOrderFormValues,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import type {
+  WorkOrderBoardListResult,
+  WorkOrderBoardPatchPayload,
+  WorkOrderBoardQueryParams,
+  WorkOrderBoardResponseApi,
+  WorkOrderBoardSearchQueryParams,
+} from "@/domain/work-orders/types/work-order-board";
+import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  DISPATCH_LOCATION_WO_PAGE_SIZE,
+  type WorkOrdersListParams,
+  type WorkOrdersListResult,
+} from "@/domain/work-orders/types/work-order-list";
+import { buildBoardSearchParamsRecord } from "@/domain/work-orders/utils/board-query-params";
+
+function buildSearchParams(params: WorkOrdersListParams): Record<string, string | number> {
+  const searchParams: Record<string, string | number> = {
+    search: params.search ?? "",
+    page: params.page ?? 1,
+    pageSize: params.pageSize ?? 12,
+  };
+
+  if (params.sortBy) {
+    searchParams.sortBy = params.sortBy;
+  }
+  if (params.sortDir) {
+    searchParams.sortDir = params.sortDir;
+  }
+  if (params.status) {
+    searchParams.status = params.status;
+  }
+  if (params.assignee) {
+    searchParams.assignee = params.assignee;
+  }
+  if (params.locationId) {
+    searchParams.locationId = params.locationId;
+  }
+  if (params.dateFrom) {
+    searchParams.dateFrom = params.dateFrom;
+  }
+  if (params.dateTo) {
+    searchParams.dateTo = params.dateTo;
+  }
+  if (params.type) {
+    searchParams.type = params.type;
+  }
+  if (params.assigneeIds) {
+    searchParams.assigneeIds = params.assigneeIds;
+  }
+
+  return searchParams;
+}
+
+function toUrlSearchParams(
+  params: Record<string, string | number | boolean | (string | number)[]>,
+): URLSearchParams {
+  const sp = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (Array.isArray(value)) {
+      for (const entry of value) {
+        sp.append(key, String(entry));
+      }
+      continue;
+    }
+    sp.append(key, String(value));
+  }
+  return sp;
+}
+
+function readOptionalString(item: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = item[key];
+    if (typeof value === "string" && value.trim()) {
+      return value.trim();
+    }
+  }
+  return "";
+}
+
+/** GET User serializes `Name` as FirstName + LastName; compose those fields if present. */
+function mapUserDisplayName(item: Record<string, unknown>): string {
+  const firstName = readOptionalString(item, "firstName", "FirstName");
+  const lastName = readOptionalString(item, "lastName", "LastName");
+  const fallback = readOptionalString(item, "name", "Name", "userName", "UserName");
+  if (lastName) {
+    return `${firstName || fallback} ${lastName}`.trim();
+  }
+  return firstName || fallback;
+}
+
+function mapUser(raw: unknown): WorkOrderUser {
+  const item = (typeof raw === "object" && raw !== null ? raw : {}) as Record<string, unknown>;
+  const id = item.id ?? item.Id;
+
+  return {
+    id: typeof id === "string" || typeof id === "number" ? id : "",
+    name: mapUserDisplayName(item),
+  };
+}
+
+export const workOrdersApi = {
+  ...workOrderBoardDocumentsApi,
+
+  getList: async (params: WorkOrdersListParams = {}): Promise<WorkOrdersListResult> => {
+    const searchParams = buildSearchParams(params);
+    const data = await apiGet<unknown>(API_PATHS.workOrder.getList, { searchParams });
+    const paginated = handlePaginatedResponse<unknown>(data, {
+      page: params.page,
+      pageSize: params.pageSize,
+    });
+
+    return {
+      items: mapWorkOrderTableRows(paginated.items),
+      totalCount: paginated.totalCount,
+      page: paginated.page,
+      pageSize: paginated.pageSize,
+    };
+  },
+
+  getBoard: async (params: WorkOrderBoardQueryParams): Promise<WorkOrderBoardListResult> => {
+    const searchParams = toUrlSearchParams(buildBoardSearchParamsRecord(params));
+    const data = await apiGet<unknown>(API_PATHS.workOrder.board, { searchParams });
+    const payload = (
+      typeof data === "object" && data !== null ? data : {}
+    ) as WorkOrderBoardResponseApi;
+
+    const scheduled = mapWorkOrderTableRows(payload.scheduled ?? []);
+    const unscheduled = mapWorkOrderTableRows(payload.unscheduled ?? []);
+    const returnedCount = payload.counts?.returned || scheduled.length;
+    const totalCount = payload.counts?.total || scheduled.length;
+
+    return {
+      items: scheduled,
+      scheduled,
+      unscheduled,
+      totalCount,
+      returnedCount,
+      page: 1,
+      pageSize: scheduled.length,
+      weekStart: payload.weekStart,
+      weekEnd: payload.weekEnd,
+    };
+  },
+
+  searchBoard: async (
+    params: WorkOrderBoardSearchQueryParams,
+  ): Promise<WorkOrderBoardListResult> => {
+    const searchParams = toUrlSearchParams(buildBoardSearchParamsRecord(params));
+    const data = await apiGet<unknown>(API_PATHS.workOrder.boardSearch, { searchParams });
+    const paginated = handlePaginatedResponse<unknown>(data, {
+      page: params.page,
+      pageSize: params.pageSize,
+    });
+    const items = mapWorkOrderTableRows(paginated.items);
+
+    return {
+      items,
+      scheduled: items.filter((row) => !!row.scheduledOn),
+      unscheduled: items.filter((row) => !row.scheduledOn),
+      totalCount: paginated.totalCount,
+      returnedCount: items.length,
+      page: paginated.page,
+      pageSize: paginated.pageSize,
+    };
+  },
+
+  findByWoNumber: async (woNumber: string): Promise<WorkOrderTableRow | undefined> => {
+    const normalized = woNumber.trim();
+    // Search every non-empty WO# — backend advanced search accepts 1-character queries, and
+    // wizard/create allow single-digit numbers (SH-189 must not bypass remote uniqueness).
+    if (!normalized) {
+      return undefined;
+    }
+    // Safety cap — if hit before exhausting results, fail closed (do not treat as unique).
+    const safetyMaxPages = 50;
+
+    // `board/search` is fuzzy and paginated (0-based); exhaust pages for an exact WO#.
+    const pageSize = 100;
+    let page = 0;
+    let scanned = 0;
+    let totalCount = Number.POSITIVE_INFINITY;
+
+    while (scanned < totalCount) {
+      if (page >= safetyMaxPages) {
+        throw new Error(
+          "Unable to verify the work order number: search result set exceeded the safety page limit.",
+        );
+      }
+      const result = await workOrdersApi.searchBoard({
+        search: normalized,
+        page,
+        pageSize,
+      });
+      const exact = result.items.find((row) => row.woNumber === normalized);
+      if (exact) {
+        return exact;
+      }
+      scanned += result.items.length;
+      totalCount = result.totalCount;
+      if (result.items.length === 0) {
+        break;
+      }
+      page += 1;
+    }
+
+    return undefined;
+  },
+
+  getListByLocation: async (
+    locationId: string | number,
+    search = "",
+  ): Promise<WorkOrdersListResult> => {
+    return workOrdersApi.getList({
+      locationId,
+      search,
+      page: 1,
+      pageSize: DISPATCH_LOCATION_WO_PAGE_SIZE,
+      sortBy: "number",
+      sortDir: "asc",
+    });
+  },
+
+  fetchUsers: async (): Promise<WorkOrderUser[]> => {
+    const data = await apiGet<unknown>(API_PATHS.user.list);
+    const users = handleApiResponse<unknown[]>(data);
+    return Array.isArray(users) ? users.map(mapUser) : [];
+  },
+
+  fetchDispatchers: async (): Promise<WorkOrderUser[]> => {
+    try {
+      const data = await apiGet<unknown>(API_PATHS.workOrder.lookupsDispatchers);
+      const users = handleApiResponse<unknown[]>(data);
+      const mapped = Array.isArray(users) ? users.map(mapUser) : [];
+      if (mapped.length > 0) {
+        return mapped;
+      }
+    } catch {
+      // Fall back to User list when lookup is unavailable.
+    }
+
+    return workOrdersApi.fetchUsers();
+  },
+
+  getById: async (id: string | number): Promise<WorkOrderDetail> => {
+    const data = await apiGet<unknown>(API_PATHS.workOrder.getById, {
+      searchParams: { id },
+    });
+    return mapWorkOrderDetail(handleApiResponse(data));
+  },
+
+  getBoardDetail: async (id: string | number): Promise<WorkOrderBoardDetail> => {
+    const data = await apiGet<unknown>(API_PATHS.workOrder.boardDetail(id));
+    return mapWorkOrderBoardDetail(handleApiResponse(data));
+  },
+
+  create: async (
+    values: WorkOrderFormSchemaValues | WorkOrderFormValues,
+  ): Promise<WorkOrderDetail> => {
+    const payload = mapWorkOrderFormToCreatePayload(values);
+    const data = await apiPost<unknown>(API_PATHS.workOrder.addWorkorder, payload);
+    return mapWorkOrderDetail(handleApiResponse(data));
+  },
+
+  createFromBoard: async (draft: WorkOrderWizardDraft): Promise<WorkOrderDetail> => {
+    const payload = mapWizardDraftToBoardCreatePayload(draft);
+    const data = await apiPost<unknown>(API_PATHS.workOrder.boardCreate, payload);
+    return mapWorkOrderDetail(handleApiResponse(data));
+  },
+
+  patchBoardField: async (
+    id: string | number,
+    payload: WorkOrderBoardPatchPayload,
+  ): Promise<WorkOrderTableRow> => {
+    const response = await apiRequestRaw(
+      "patch",
+      API_PATHS.workOrder.boardPatch(id),
+      { json: payload, throwHttpErrors: false },
+      "workOrdersApi.patchBoardField",
+    );
+
+    let data: unknown;
+    try {
+      data = await response.json();
+    } catch {
+      data = undefined;
+    }
+
+    if (response.ok) {
+      return mapWorkOrderTableRow(data);
+    }
+
+    const record =
+      typeof data === "object" && data !== null ? (data as Record<string, unknown>) : {};
+
+    if (response.status === 409) {
+      const currentStateRaw = record.currentState ?? record.CurrentState;
+      const currentState = currentStateRaw != null ? mapWorkOrderTableRow(currentStateRaw) : null;
+      throw new BoardPatchConflictError(
+        typeof record.message === "string"
+          ? record.message
+          : "The record was modified by another user. Refresh and retry.",
+        currentState,
+      );
+    }
+
+    if (response.status === 422) {
+      throw new BoardPatchValidationError(
+        typeof record.code === "string" ? record.code : "ValidationError",
+        typeof record.message === "string" ? record.message : mapHttpStatusToMessage(422, data),
+      );
+    }
+
+    throw new ApiError(mapHttpStatusToMessage(response.status, data), response.status);
+  },
+
+  update: async (
+    id: string | number,
+    values: WorkOrderFormSchemaValues | WorkOrderFormValues,
+  ): Promise<void> => {
+    const formData = mapWorkOrderFormToUpdateFormData(id, values);
+    await apiPostForm<{ message?: string; status?: string }>(
+      API_PATHS.workOrder.editWorkorder,
+      formData,
+    );
+  },
+
+  delete: async (id: string | number): Promise<void> => {
+    await apiDelete(API_PATHS.workOrder.deleteWorkorder, {
+      json: { Id: Number(id) },
+    });
+  },
+
+  changeStatus: async (id: string | number, status: string): Promise<void> => {
+    await apiPost<unknown>(API_PATHS.workOrder.changeStatus, undefined, {
+      searchParams: { id, status },
+    });
+  },
+
+  changeAssignment: async (id: string | number, assignTo: string | number): Promise<void> => {
+    await apiPost<unknown>(API_PATHS.workOrder.changeAssignment, undefined, {
+      searchParams: { id, assignTo: assignTo || "" },
+    });
+  },
+
+  fetchLocations: async (): Promise<LocationOption[]> => {
+    const data = await apiGet<unknown>(API_PATHS.contact.getLocations);
+    const items = handleApiResponse<unknown[]>(data);
+    return Array.isArray(items) ? mapLocationOptions(items) : [];
+  },
+
+  fetchEmployeesDropdown: async (): Promise<EmployeeOption[]> => {
+    const data = await apiGet<unknown>(API_PATHS.employee.dropdown);
+    const items = handleApiResponse<unknown[]>(data);
+    return Array.isArray(items) ? mapEmployeeOptions(items) : [];
+  },
+
+  fetchVendorsDropdown: async (trade?: string, siteZip?: string): Promise<VendorDropdownItem[]> => {
+    const searchParams: Record<string, string> = {};
+    if (trade) {
+      searchParams.trade = trade;
+    }
+    if (siteZip) {
+      searchParams.siteZip = siteZip;
+    }
+
+    const data = await apiGet<unknown>(API_PATHS.vendor.dropdown, {
+      searchParams: Object.keys(searchParams).length > 0 ? searchParams : undefined,
+    });
+    const items = handleApiResponse<unknown[]>(data);
+    return Array.isArray(items) ? mapVendorDropdownItems(items) : [];
+  },
+
+  fetchTaskTemplates: async (): Promise<TaskListTemplate[]> => {
+    const data = await apiGet<unknown>(API_PATHS.taskListTemplate.list);
+    const items = handleApiResponse<unknown[]>(data);
+    return Array.isArray(items) ? mapTaskListTemplates(items) : [];
+  },
+
+  dispatchToVendor: async (payload: DispatchToVendorPayload): Promise<void> => {
+    await apiPost<unknown>(
+      API_PATHS.workOrder.dispatchToVendor,
+      mapDispatchToVendorPayload(payload),
+    );
+  },
+
+  getDispatchById: async (id: string | number): Promise<DispatchDetail> => {
+    const data = await apiGet<unknown>(`${API_PATHS.workOrder.getDispatch}/${id}`);
+    return mapDispatchDetail(handleApiResponse(data));
+  },
+
+  updateDispatch: async (payload: UpdateDispatchPayload): Promise<void> => {
+    await apiPost<unknown>(API_PATHS.workOrder.updateDispatch, mapUpdateDispatchPayload(payload));
+  },
+
+  updateVendorFromWorkOrder: async (
+    vendorId: string | number,
+    payload: WorkOrderVendorUpdatePayload,
+  ): Promise<void> => {
+    await apiPut<unknown>(`${API_PATHS.rest.vendors}/${vendorId}/work-order-update`, payload);
+  },
+
+  addDispatchComment: async (
+    dispatchId: string | number,
+    text: string,
+    sendEmail = true,
+  ): Promise<DispatchDetail["comments"][number]> => {
+    const data = await apiPost<unknown>(API_PATHS.workOrder.addDispatchComment, {
+      DispatchId: dispatchId,
+      Text: text,
+      SendEmail: sendEmail,
+    });
+    return mapDispatchComment(handleApiResponse(data));
+  },
+
+  updateChecklistItem: async (
+    id: string | number,
+    isCompleted: boolean,
+    completedBy: string,
+  ): Promise<void> => {
+    await apiPost<unknown>(API_PATHS.workOrder.updateChecklistItem, {
+      Id: id,
+      IsCompleted: isCompleted,
+      CompletedBy: completedBy,
+    });
+  },
+
+  addChecklistItem: async (dispatchId: string | number, itemText: string): Promise<void> => {
+    await apiPost<unknown>(API_PATHS.workOrder.addChecklistItem, {
+      DispatchId: dispatchId,
+      ItemText: itemText,
+    });
+  },
+
+  addDispatchSignoff: async (
+    dispatchId: string | number,
+    options: { signoffType: string; name: string; signature: string; signatureMethod: string },
+  ): Promise<DispatchDetail["signoffs"][number]> => {
+    const data = await apiPost<unknown>(API_PATHS.workOrder.addDispatchSignoff, {
+      DispatchId: dispatchId,
+      SignoffType: options.signoffType,
+      Name: options.name,
+      Signature: options.signature,
+      SignatureMethod: options.signatureMethod,
+    });
+    return mapDispatchSignoff(handleApiResponse(data));
+  },
+
+  verifyDispatch: async (dispatchId: string | number): Promise<void> => {
+    await apiPost<unknown>(API_PATHS.workOrder.verifyDispatch, undefined, {
+      searchParams: { dispatchId },
+    });
+  },
+};
diff --git a/src/domain/work-orders/constants/wo-table-header-tooltips.ts b/src/domain/work-orders/constants/wo-table-header-tooltips.ts
new file mode 100644
index 00000000..24ff23be
--- /dev/null
+++ b/src/domain/work-orders/constants/wo-table-header-tooltips.ts
@@ -0,0 +1,17 @@
+/**
+ * Help copy for date-column headers on the work orders board table.
+ * Keyed by the `WO_TABLE_COLS` column key; only columns with copy here show a
+ * header help icon. `appt` (Appt Time) is an intentional open point — do not
+ * add it without a business-rule decision.
+ */
+export const WO_TABLE_HEADER_TOOLTIPS = {
+  sched: "The date the work is planned to happen. Setting it moves the work order to Scheduled.",
+  due: "The deadline for the work — when it must be completed by.",
+  completed: "The date the vendor actually finished the work. Required to complete the work order.",
+} as const;
+
+export function getWoTableHeaderTooltip(colKey: string): string | undefined {
+  return colKey in WO_TABLE_HEADER_TOOLTIPS
+    ? WO_TABLE_HEADER_TOOLTIPS[colKey as keyof typeof WO_TABLE_HEADER_TOOLTIPS]
+    : undefined;
+}
diff --git a/src/domain/work-orders/errors/board-create-errors.ts b/src/domain/work-orders/errors/board-create-errors.ts
new file mode 100644
index 00000000..60437ef2
--- /dev/null
+++ b/src/domain/work-orders/errors/board-create-errors.ts
@@ -0,0 +1,45 @@
+import { isHTTPError, isNetworkError, isTimeoutError } from "ky";
+import { mapHttpStatusToMessage } from "@/api/api-error";
+import {
+  DISPATCH_REQUIRED_MESSAGE,
+  DUPLICATE_WO_NUMBER_MESSAGE,
+} from "@/domain/work-orders/errors/board-patch-errors";
+
+export const BOARD_CREATE_FAILED_MESSAGE = "Unable to create the work order. Please try again.";
+
+/** Statuses whose mapped copy is fixed product text, never the response body. */
+const FIXED_COPY_STATUSES = new Set([401, 403, 404, 500]);
+
+function readErrorCode(data: unknown): string | undefined {
+  if (typeof data !== "object" || data === null) {
+    return undefined;
+  }
+  const record = data as Record<string, unknown>;
+  const code = record.code ?? record.Code;
+  return typeof code === "string" ? code : undefined;
+}
+
+/**
+ * why: board create returns backend validation text ("siteCode is required.",
+ * "vendorId is required when setting appointment fields.") that must never reach the
+ * screen. Unknown failures fall back to generic copy, not to `error.message`.
+ */
+export function boardCreateErrorMessage(error: unknown): string {
+  if (isHTTPError(error)) {
+    const code = readErrorCode(error.data);
+    if (code === "DispatchRequired") {
+      return DISPATCH_REQUIRED_MESSAGE;
+    }
+    if (code === "DuplicateWoNumber") {
+      return DUPLICATE_WO_NUMBER_MESSAGE;
+    }
+    const status = error.response.status;
+    return FIXED_COPY_STATUSES.has(status)
+      ? mapHttpStatusToMessage(status)
+      : BOARD_CREATE_FAILED_MESSAGE;
+  }
+  if (isNetworkError(error) || isTimeoutError(error)) {
+    return error.message;
+  }
+  return BOARD_CREATE_FAILED_MESSAGE;
+}
diff --git a/src/domain/work-orders/errors/board-patch-errors.ts b/src/domain/work-orders/errors/board-patch-errors.ts
new file mode 100644
index 00000000..98481f87
--- /dev/null
+++ b/src/domain/work-orders/errors/board-patch-errors.ts
@@ -0,0 +1,89 @@
+import { isNetworkError, isTimeoutError } from "ky";
+import { ApiError, mapHttpStatusToMessage } from "@/api/api-error";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+export class BoardPatchConflictError extends Error {
+  readonly status = 409;
+  readonly currentState: WorkOrderTableRow | null;
+
+  constructor(message: string, currentState: WorkOrderTableRow | null) {
+    super(message);
+    this.name = "BoardPatchConflictError";
+    this.currentState = currentState;
+  }
+}
+
+export class BoardPatchValidationError extends Error {
+  readonly status = 422;
+  readonly code: string;
+
+  constructor(code: string, message: string) {
+    super(message);
+    this.name = "BoardPatchValidationError";
+    this.code = code;
+  }
+}
+
+export const DISPATCH_REQUIRED_MESSAGE = "Select a vendor company before saving.";
+
+export const BOARD_PATCH_FAILED_MESSAGE = "Unable to save the work order. Please try again.";
+
+export const NO_PERSISTABLE_FIELDS_MESSAGE =
+  "These changes cannot be saved on the board. Refresh and edit a supported field.";
+
+export const DUPLICATE_WO_NUMBER_MESSAGE =
+  "This work order number is already assigned to another work order.";
+
+const KNOWN_VALIDATION_COPY: ReadonlyMap<string, string> = new Map([
+  ["DispatchRequired", DISPATCH_REQUIRED_MESSAGE],
+  ["NoPersistableFields", NO_PERSISTABLE_FIELDS_MESSAGE],
+  // why: editing a WO number to one that already exists returns 422 DuplicateWoNumber;
+  // show the same product copy as create, not the generic save-failed fallback.
+  ["DuplicateWoNumber", DUPLICATE_WO_NUMBER_MESSAGE],
+]);
+
+/**
+ * why: board PATCH validation text ("vendorId is required…", object ids, backend codes)
+ * must never reach the screen. Unknown codes fall back to generic copy, not `error.message`.
+ */
+export function boardPatchValidationMessage(error: BoardPatchValidationError): string {
+  return KNOWN_VALIDATION_COPY.get(error.code) ?? BOARD_PATCH_FAILED_MESSAGE;
+}
+
+export const BOARD_PATCH_CONFLICT_MESSAGE =
+  "This work order was changed by someone else. Refresh to see the latest before saving again.";
+
+export const PARTIAL_SAVE_PREFIX = "Some changes were saved, but the rest were not.";
+
+/** Statuses whose mapped copy is fixed product text, never the response body. */
+const FIXED_COPY_STATUSES = new Set([401, 403, 404, 500]);
+
+/** why: any board edit failure toast must use product copy, never backend text or field keys. */
+export function boardPatchErrorMessage(error: unknown): string {
+  if (error instanceof BoardPatchConflictError) {
+    return BOARD_PATCH_CONFLICT_MESSAGE;
+  }
+  if (error instanceof BoardPatchValidationError) {
+    return boardPatchValidationMessage(error);
+  }
+  if (error instanceof ApiError && FIXED_COPY_STATUSES.has(error.status)) {
+    return mapHttpStatusToMessage(error.status);
+  }
+  if (isNetworkError(error) || isTimeoutError(error)) {
+    return error.message;
+  }
+  return BOARD_PATCH_FAILED_MESSAGE;
+}
+
+/** Thrown when a multi-field board edit fails after some fields already persisted. */
+export class BoardPatchPartialSaveError extends Error {
+  readonly partialRow: WorkOrderTableRow;
+  readonly failure: unknown;
+
+  constructor(partialRow: WorkOrderTableRow, failure: unknown) {
+    super(`${PARTIAL_SAVE_PREFIX} ${boardPatchErrorMessage(failure)}`);
+    this.name = "BoardPatchPartialSaveError";
+    this.partialRow = partialRow;
+    this.failure = failure;
+  }
+}
diff --git a/src/domain/work-orders/flag-colors.ts b/src/domain/work-orders/flag-colors.ts
new file mode 100644
index 00000000..fe616bd8
--- /dev/null
+++ b/src/domain/work-orders/flag-colors.ts
@@ -0,0 +1,33 @@
+/** Fixed board flag palette — must match BE `WorkOrderFlagColors`. */
+export const FLAG_COLORS: { name: string; value: string }[] = [
+  { name: "Red", value: "#EF4444" },
+  { name: "Orange", value: "#F97316" },
+  { name: "Amber", value: "#F59E0B" },
+  { name: "Yellow", value: "#EAB308" },
+  { name: "Green", value: "#22C55E" },
+  { name: "Teal", value: "#14B8A6" },
+  { name: "Blue", value: "#3B82F6" },
+  { name: "Purple", value: "#8B5CF6" },
+];
+
+export const FLAG_COLOR_VALUES = FLAG_COLORS.map((c) => c.value);
+
+export function flagColorName(value: string | null | undefined): string | null {
+  if (!value) {
+    return null;
+  }
+  const normalized = value.toLowerCase();
+  return FLAG_COLORS.find((color) => color.value.toLowerCase() === normalized)?.name ?? null;
+}
+
+/** Accessible trigger name — never color-only. */
+export function flagTriggerAccessibleName(color: string | null | undefined): string {
+  const name = flagColorName(color);
+  if (name) {
+    return `${name} flag`;
+  }
+  if (color) {
+    return "Flagged";
+  }
+  return "Add flag";
+}
diff --git a/src/domain/work-orders/mappers/additional-contacts-mapper.ts b/src/domain/work-orders/mappers/additional-contacts-mapper.ts
new file mode 100644
index 00000000..82ab5b17
--- /dev/null
+++ b/src/domain/work-orders/mappers/additional-contacts-mapper.ts
@@ -0,0 +1,102 @@
+import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+  }
+  return "";
+}
+
+function mapContactItem(raw: unknown): WorkOrderAdditionalContact | null {
+  const item = asRecord(raw);
+  const name = readString(item, "name", "Name");
+  const phone = readString(item, "phone", "Phone");
+  const notes = readString(item, "notes", "Notes");
+
+  if (!name.trim() && !phone.trim()) {
+    return null;
+  }
+
+  const contact: WorkOrderAdditionalContact = {
+    name,
+    phone,
+  };
+
+  if (notes.trim()) {
+    contact.notes = notes;
+  }
+
+  return contact;
+}
+
+/** Reads additional POCs from board/detail payloads; missing field yields []. */
+export function readAdditionalContacts(
+  record: Record<string, unknown>,
+): WorkOrderAdditionalContact[] {
+  for (const key of ["additionalContacts", "AdditionalContacts"]) {
+    const value = record[key];
+    if (!Array.isArray(value)) {
+      continue;
+    }
+
+    return value
+      .map(mapContactItem)
+      .filter((contact): contact is WorkOrderAdditionalContact => contact !== null);
+  }
+
+  return [];
+}
+
+/** True when exactly one of name/phone is filled (not persistable). */
+export function isIncompleteAdditionalContact(contact: WorkOrderAdditionalContact): boolean {
+  const hasName = Boolean(contact.name.trim());
+  const hasPhone = Boolean(contact.phone.trim());
+  return hasName !== hasPhone;
+}
+
+/** Drops empty and incomplete rows; returns undefined when nothing to persist. */
+export function normalizeAdditionalContacts(
+  contacts: WorkOrderAdditionalContact[],
+): WorkOrderAdditionalContact[] | undefined {
+  const out: WorkOrderAdditionalContact[] = [];
+
+  for (const raw of contacts) {
+    const name = raw.name.trim();
+    const phone = raw.phone.trim();
+    const notes = raw.notes?.trim();
+
+    if (!name && !phone) {
+      continue;
+    }
+
+    if (!name || !phone) {
+      continue;
+    }
+
+    const contact: WorkOrderAdditionalContact = { name, phone };
+
+    if (notes) {
+      contact.notes = notes;
+    }
+
+    out.push(contact);
+  }
+
+  return out.length > 0 ? out : undefined;
+}
+
+export function serializeAdditionalContactsForPatch(
+  contacts: WorkOrderAdditionalContact[],
+): string {
+  return JSON.stringify(normalizeAdditionalContacts(contacts) ?? []);
+}
diff --git a/src/domain/work-orders/mappers/assign-wizard-schedule-fields.ts b/src/domain/work-orders/mappers/assign-wizard-schedule-fields.ts
new file mode 100644
index 00000000..3c4cd207
--- /dev/null
+++ b/src/domain/work-orders/mappers/assign-wizard-schedule-fields.ts
@@ -0,0 +1,31 @@
+import type { WorkOrderBoardCreatePayload } from "@/domain/work-orders/types/work-order-board";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import { mondayOf } from "@/domain/work-orders/utils/wizard-date-utils";
+
+/**
+ * Mutates `payload` with `dueDate` and schedule fields.
+ * Range mode lands on the board using the range start as `scheduledDate`
+ * (prototype `hasScheduleDate`: a range start qualifies as scheduled).
+ */
+export function assignWizardScheduleFields(
+  payload: WorkOrderBoardCreatePayload,
+  draft: WorkOrderWizardDraft,
+): void {
+  if (draft.dueDate) {
+    payload.dueDate = draft.dueDate;
+  }
+
+  const isRange = draft.schedMode === "range";
+
+  if (!isRange && draft.scheduleWeekOnly) {
+    const week = draft.targetWeek?.trim() || (draft.scheduledOn ? mondayOf(draft.scheduledOn) : "");
+
+    // Only emit week-mode flags when a concrete week exists (SH-109: undated create).
+    if (week) {
+      payload.scheduleWeekOnly = true;
+      payload.targetWeek = week;
+    }
+  } else if (draft.scheduledOn && (isRange || !draft.scheduleWeekOnly)) {
+    payload.scheduledDate = draft.scheduledOn;
+  }
+}
diff --git a/src/domain/work-orders/mappers/assign-wizard-service-poc-fields.ts b/src/domain/work-orders/mappers/assign-wizard-service-poc-fields.ts
new file mode 100644
index 00000000..e45381e7
--- /dev/null
+++ b/src/domain/work-orders/mappers/assign-wizard-service-poc-fields.ts
@@ -0,0 +1,74 @@
+import type { WorkOrderBoardCreatePayload } from "@/domain/work-orders/types/work-order-board";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import { normalizeAdditionalContacts } from "@/domain/work-orders/mappers/additional-contacts-mapper";
+
+function trimOrUndefined(value: string | undefined): string | undefined {
+  const trimmed = value?.trim();
+
+  return trimmed ? trimmed : undefined;
+}
+
+/** Mutates `payload` with primary service, service notes, POC, tech phone, and vendor notes. */
+export function assignWizardServicePocFields(
+  payload: WorkOrderBoardCreatePayload,
+  draft: WorkOrderWizardDraft,
+): void {
+  const primaryService = trimOrUndefined(draft.pm);
+
+  if (primaryService) {
+    payload.primaryService = primaryService;
+  }
+
+  if (draft.serviceId != null) {
+    payload.serviceId = draft.serviceId;
+  }
+
+  const serviceNotes = trimOrUndefined(draft.pmNote);
+
+  if (serviceNotes) {
+    payload.serviceNotes = serviceNotes;
+  }
+
+  const pocName = trimOrUndefined(draft.pocName);
+
+  if (pocName) {
+    payload.pocName = pocName;
+  }
+
+  const pocPhone = trimOrUndefined(draft.pocPhone);
+
+  if (pocPhone) {
+    payload.pocPhone = pocPhone;
+  }
+
+  const pocNotes = trimOrUndefined(draft.pocNotes);
+
+  if (pocNotes) {
+    payload.pocNotes = pocNotes;
+  }
+
+  const additionalContacts = normalizeAdditionalContacts(draft.additionalContacts);
+  if (additionalContacts) {
+    payload.additionalContacts = additionalContacts;
+  }
+
+  const techPhone = trimOrUndefined(draft.techPhone);
+
+  if (techPhone) {
+    payload.techPhone = techPhone;
+  }
+
+  const vendorNotes = trimOrUndefined(draft.vendorNotes);
+
+  if (vendorNotes) {
+    payload.vendorNotes = vendorNotes;
+  }
+
+  if (draft.severity != null) {
+    payload.severity = draft.severity;
+  }
+
+  if (draft.avetaRequired) {
+    payload.avetaRequired = true;
+  }
+}
diff --git a/src/domain/work-orders/mappers/assign-wizard-vendor-appt-fields.ts b/src/domain/work-orders/mappers/assign-wizard-vendor-appt-fields.ts
new file mode 100644
index 00000000..43179ba9
--- /dev/null
+++ b/src/domain/work-orders/mappers/assign-wizard-vendor-appt-fields.ts
@@ -0,0 +1,32 @@
+import type { WorkOrderBoardCreatePayload } from "@/domain/work-orders/types/work-order-board";
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+import { formatApptTimeValue } from "@/domain/work-orders/utils/wizard-date-utils";
+
+/**
+ * Mutates `payload` with `vendorId` and, when applicable, single-day appt date/time.
+ * Board create rejects appointment fields without vendorId (`DispatchRequired`).
+ */
+export function assignWizardVendorApptFields(
+  payload: WorkOrderBoardCreatePayload,
+  draft: WorkOrderWizardDraft,
+): void {
+  const vendorId = draft.vendorId.trim() ? Number(draft.vendorId) : NaN;
+  const hasVendor = Number.isFinite(vendorId);
+
+  if (hasVendor) {
+    payload.vendorId = vendorId;
+  }
+
+  const apptTime = formatApptTimeValue(draft.apptStart, draft.apptEnd);
+  const isRange = draft.schedMode === "range";
+
+  if (hasVendor && (draft.scheduledOn || apptTime) && !draft.scheduleWeekOnly && !isRange) {
+    if (draft.scheduledOn) {
+      payload.apptDate = draft.scheduledOn;
+    }
+
+    if (apptTime) {
+      payload.apptTime = apptTime;
+    }
+  }
+}
diff --git a/src/domain/work-orders/mappers/doc-status-mapper.ts b/src/domain/work-orders/mappers/doc-status-mapper.ts
new file mode 100644
index 00000000..90c9c016
--- /dev/null
+++ b/src/domain/work-orders/mappers/doc-status-mapper.ts
@@ -0,0 +1,28 @@
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+
+/** UI uses `NN`; board/API enum uses `NotNeeded` (also numeric 3). */
+export function mapDocStatusToApi(value: string): string {
+  if (value === "NN") {
+    return "NotNeeded";
+  }
+  return value;
+}
+
+export function readDocStatusFromRecord(record: Record<string, unknown>): CompletionDocStatus {
+  const rawValue =
+    record.docStatus ?? record.DocStatus ?? record.completionDoc ?? record.CompletionDoc;
+  if (typeof rawValue === "number") {
+    if (rawValue === 1) return "Yes";
+    if (rawValue === 2) return "No";
+    if (rawValue === 3) return "NN";
+  }
+  if (typeof rawValue === "string") {
+    if (rawValue === "Yes" || rawValue === "No" || rawValue === "NN") {
+      return rawValue;
+    }
+    if (rawValue === "NotNeeded") {
+      return "NN";
+    }
+  }
+  return "";
+}
diff --git a/src/domain/work-orders/mappers/expand-scalar-board-ops.ts b/src/domain/work-orders/mappers/expand-scalar-board-ops.ts
new file mode 100644
index 00000000..7266fbec
--- /dev/null
+++ b/src/domain/work-orders/mappers/expand-scalar-board-ops.ts
@@ -0,0 +1,64 @@
+import type { WorkOrderBoardEditableField } from "@/domain/work-orders/types/work-order-board";
+import type { WorkOrderTablePatch } from "@/domain/work-orders/types/work-order-table-row";
+import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
+import { serializeAdditionalContactsForPatch } from "@/domain/work-orders/mappers/additional-contacts-mapper";
+import { mapDocStatusToApi } from "@/domain/work-orders/mappers/doc-status-mapper";
+
+export type BoardFieldOp = {
+  field: WorkOrderBoardEditableField;
+  value: string;
+};
+
+export { mapDocStatusToApi };
+
+type ScalarBoardOpRule = {
+  key: keyof WorkOrderTablePatch;
+  field: WorkOrderBoardEditableField;
+  toValue: (value: unknown) => string;
+};
+
+/** One row per scalar patch field, in emission order. */
+const SCALAR_BOARD_OP_RULES: ScalarBoardOpRule[] = [
+  { key: "woNumber", field: "woNumber", toValue: (value) => value as string },
+  // Severity before type so Emergency/Reactive never land without required severity.
+  {
+    key: "severity",
+    field: "severity",
+    toValue: (value) => (value == null ? "" : String(value)),
+  },
+  { key: "type", field: "workOrderType", toValue: (value) => value as string },
+  { key: "site", field: "siteCode", toValue: (value) => value as string },
+  { key: "status", field: "lifecycleStatus", toValue: (value) => value as string },
+  { key: "dispatcherId", field: "assignTo", toValue: (value) => value as string },
+  { key: "dueDate", field: "dueDate", toValue: (value) => value as string },
+  { key: "vendorId", field: "vendorId", toValue: (value) => String(value) },
+  { key: "apptTime", field: "apptTime", toValue: (value) => value as string },
+  { key: "docStatus", field: "docStatus", toValue: (value) => mapDocStatusToApi(value as string) },
+  { key: "completedDate", field: "completedDate", toValue: (value) => value as string },
+  { key: "pm", field: "pm", toValue: (value) => value as string },
+  { key: "extraServices", field: "extraServices", toValue: (value) => JSON.stringify(value) },
+  { key: "serviceNotes", field: "serviceNotes", toValue: (value) => value as string },
+  {
+    key: "avetaRequired",
+    field: "avetaRequired",
+    toValue: (value) => (value ? "true" : "false"),
+  },
+  { key: "flagColor", field: "flagColor", toValue: (value) => (value as string | null) ?? "" },
+  {
+    key: "additionalContacts",
+    field: "additionalContacts",
+    toValue: (value) => serializeAdditionalContactsForPatch(value as WorkOrderAdditionalContact[]),
+  },
+];
+
+export function expandScalarBoardOps(patch: WorkOrderTablePatch): BoardFieldOp[] {
+  const ops: BoardFieldOp[] = [];
+
+  for (const rule of SCALAR_BOARD_OP_RULES) {
+    const value = patch[rule.key];
+    if (value === undefined) continue;
+    ops.push({ field: rule.field, value: rule.toValue(value) });
+  }
+
+  return ops;
+}
diff --git a/src/domain/work-orders/mappers/expand-schedule-board-ops.ts b/src/domain/work-orders/mappers/expand-schedule-board-ops.ts
new file mode 100644
index 00000000..22bd28a6
--- /dev/null
+++ b/src/domain/work-orders/mappers/expand-schedule-board-ops.ts
@@ -0,0 +1,42 @@
+import type { BoardFieldOp } from "@/domain/work-orders/mappers/expand-scalar-board-ops";
+import type { WorkOrderTablePatch } from "@/domain/work-orders/types/work-order-table-row";
+
+function hasScheduleRelatedPatch(patch: WorkOrderTablePatch): boolean {
+  return (
+    patch.scheduledOn !== undefined ||
+    patch.targetWeek !== undefined ||
+    patch.scheduleWeekOnly !== undefined
+  );
+}
+
+/** Schedule/week-only ops in the stable order the board API expects. */
+export function expandScheduleBoardOps(patch: WorkOrderTablePatch): BoardFieldOp[] {
+  if (!hasScheduleRelatedPatch(patch)) {
+    return [];
+  }
+
+  const ops: BoardFieldOp[] = [];
+
+  if (patch.scheduleWeekOnly === true) {
+    ops.push({ field: "scheduleWeekOnly", value: "true" });
+    if (patch.targetWeek !== undefined) {
+      ops.push({ field: "targetWeek", value: patch.targetWeek });
+    }
+    if (patch.scheduledOn !== undefined) {
+      ops.push({ field: "scheduledDate", value: patch.scheduledOn });
+    }
+    return ops;
+  }
+
+  if (patch.scheduleWeekOnly === false) {
+    ops.push({ field: "scheduleWeekOnly", value: "false" });
+  }
+  if (patch.scheduledOn !== undefined) {
+    ops.push({ field: "scheduledDate", value: patch.scheduledOn });
+  }
+  if (patch.targetWeek !== undefined) {
+    ops.push({ field: "targetWeek", value: patch.targetWeek });
+  }
+
+  return ops;
+}
diff --git a/src/domain/work-orders/mappers/wizard-draft-mapper.ts b/src/domain/work-orders/mappers/wizard-draft-mapper.ts
new file mode 100644
index 00000000..d2692d46
--- /dev/null
+++ b/src/domain/work-orders/mappers/wizard-draft-mapper.ts
@@ -0,0 +1,124 @@
+import type { WorkOrderFormValues } from "@/domain/work-orders/types/work-order-detail";
+import {
+  effectiveWizardType,
+  type WOType,
+  type WizardWOStatus,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+import type { WorkOrderStatus } from "@/domain/work-orders/types/work-order-common";
+import { formatApptRange, todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+
+const WIZARD_TO_API_STATUS: Record<WizardWOStatus, WorkOrderStatus> = {
+  Incomplete: "Open",
+  Pending: "Open",
+  Scheduled: "Open",
+  "En Route": "In Progress",
+  "On Site": "In Progress",
+  "In Progress": "In Progress",
+  Completed: "Done",
+  Rescheduled: "On Hold",
+  "Pending Quote": "On Hold",
+};
+
+const API_TO_WIZARD_STATUS: Partial<Record<WorkOrderStatus, WizardWOStatus>> = {
+  Open: "Incomplete",
+  "In Progress": "In Progress",
+  "On Hold": "Pending",
+  Done: "Completed",
+};
+
+const TYPE_TO_PRIORITY: Record<WOType, string> = {
+  Emergency: "Sev 1",
+  Reactive: "Sev 2",
+  Overdue: "Sev 2",
+  PM: "Sev 3",
+};
+
+export function mapWizardStatusToApi(status: WizardWOStatus | ""): WorkOrderStatus {
+  if (!status) {
+    return "Open";
+  }
+  return WIZARD_TO_API_STATUS[status] ?? "Open";
+}
+
+export function mapApiStatusToWizard(status: string): WizardWOStatus | "" {
+  if (!status) {
+    return "";
+  }
+  if (API_TO_WIZARD_STATUS[status as WorkOrderStatus]) {
+    return API_TO_WIZARD_STATUS[status as WorkOrderStatus]!;
+  }
+  const wizardStatuses = Object.keys(WIZARD_TO_API_STATUS) as WizardWOStatus[];
+  if (wizardStatuses.includes(status as WizardWOStatus)) {
+    return status as WizardWOStatus;
+  }
+  if (status === "Canceled" || status === "Cancelled") {
+    return "Canceled" as WizardWOStatus;
+  }
+  return "Incomplete";
+}
+
+export function mapTypeToPriority(type: WOType | ""): string {
+  if (!type) {
+    return "Sev 3";
+  }
+  return TYPE_TO_PRIORITY[type];
+}
+
+function buildTitle(draft: WorkOrderWizardDraft): string {
+  const typeLabel = effectiveWizardType(draft.type);
+  if (draft.woNumber) {
+    return `${typeLabel} — #${draft.woNumber}`;
+  }
+  if (draft.locationName) {
+    return `${typeLabel} — ${draft.locationName}`;
+  }
+  return typeLabel;
+}
+
+function buildDescription(draft: WorkOrderWizardDraft): string {
+  const parts: string[] = [];
+
+  if (draft.pocNotes) {
+    parts.push(`POC notes: ${draft.pocNotes}`);
+  }
+  if (draft.pocName || draft.pocPhone) {
+    parts.push(`POC: ${[draft.pocName, draft.pocPhone].filter(Boolean).join(" · ")}`);
+  }
+  if (draft.apptStart) {
+    parts.push(`Appt: ${formatApptRange(draft.apptStart, draft.apptEnd)}`);
+  }
+  if (draft.vendorNotes) {
+    parts.push(`Vendor notes: ${draft.vendorNotes}`);
+  }
+  if (draft.vendorName) {
+    parts.push(`Vendor: ${draft.vendorName}`);
+  }
+
+  return parts.join("\n");
+}
+
+export function mapWizardDraftToFormValues(draft: WorkOrderWizardDraft): WorkOrderFormValues {
+  return {
+    internalWONumber: "",
+    workOrderNumber: draft.woNumber,
+    title: buildTitle(draft),
+    locationId: draft.locationId,
+    priority: mapTypeToPriority(effectiveWizardType(draft.type)),
+    status: mapWizardStatusToApi(draft.status),
+    createdDate: todayIso(),
+    dueDate: draft.dueDate,
+    scheduledDate: draft.scheduleWeekOnly ? "" : draft.scheduledOn,
+    completedDate: "",
+    docStatus: "",
+    assignedTo: draft.assigneeName,
+    description: buildDescription(draft),
+    po: "",
+    tt: "",
+    problem: draft.pm,
+    trade: "",
+    subTrade: "",
+    vendorNTE: "",
+    source: effectiveWizardType(draft.type),
+  };
+}
diff --git a/src/domain/work-orders/mappers/work-order-board-detail-mapper.ts b/src/domain/work-orders/mappers/work-order-board-detail-mapper.ts
new file mode 100644
index 00000000..54b333ed
--- /dev/null
+++ b/src/domain/work-orders/mappers/work-order-board-detail-mapper.ts
@@ -0,0 +1,309 @@
+import { DOC_STATUS_API } from "@/domain/work-orders/types/work-order-board";
+import type {
+  BoardMediaCategory,
+  WorkOrderBoardCompletion,
+  WorkOrderBoardDetail,
+  WorkOrderBoardMediaItem,
+} from "@/domain/work-orders/types/work-order-board-detail";
+import { BOARD_MEDIA_CATEGORY_API } from "@/domain/work-orders/types/work-order-board-detail";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+import type {
+  WorkOrderAuditEntry,
+  WorkOrderComment,
+} from "@/domain/work-orders/types/work-order-detail";
+import { mapWorkOrderTableRow } from "@/domain/work-orders/mappers/work-order-mapper";
+import { toDisplayFileName } from "@/domain/work-orders/utils/display-file-name";
+import type {
+  FileCategory,
+  MediaCategory,
+  MediaFile,
+} from "@/domain/work-orders/types/work-order-media";
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+    if (typeof value === "number" || typeof value === "boolean") {
+      return String(value);
+    }
+  }
+  return "";
+}
+
+function readNumber(record: Record<string, unknown>, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number" && Number.isFinite(value)) {
+      return value;
+    }
+    if (typeof value === "string" && value.trim() !== "") {
+      const parsed = Number(value);
+      if (Number.isFinite(parsed)) {
+        return parsed;
+      }
+    }
+  }
+  return null;
+}
+
+function readBoolean(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") {
+      return value;
+    }
+  }
+  return false;
+}
+
+function readStringArray(record: Record<string, unknown>, ...keys: string[]): string[] {
+  for (const key of keys) {
+    const value = record[key];
+    if (!Array.isArray(value)) {
+      continue;
+    }
+
+    const mapped = value
+      .map((entry) => {
+        if (typeof entry === "string") {
+          return entry;
+        }
+        if (typeof entry === "number" || typeof entry === "boolean") {
+          return String(entry);
+        }
+        return "";
+      })
+      .filter(Boolean);
+
+    if (mapped.length > 0) {
+      return mapped;
+    }
+  }
+
+  return [];
+}
+
+function mapDocStatus(raw: unknown): CompletionDocStatus {
+  const numeric = typeof raw === "number" ? raw : Number(raw);
+  if (numeric === DOC_STATUS_API.Yes) return "Yes";
+  if (numeric === DOC_STATUS_API.No) return "No";
+  if (numeric === DOC_STATUS_API.NotNeeded) return "NN";
+  if (raw === "Yes" || raw === "No" || raw === "NN") return raw;
+  if (raw === "NotNeeded") return "NN";
+  return "";
+}
+
+function mapMediaCategory(raw: unknown): BoardMediaCategory {
+  if (raw === "Aveta" || raw === "aveta") return "Aveta";
+  const numeric = typeof raw === "number" ? raw : Number(raw);
+  if (numeric === BOARD_MEDIA_CATEGORY_API.Before) return "Before";
+  if (numeric === BOARD_MEDIA_CATEGORY_API.After) return "After";
+  if (numeric === BOARD_MEDIA_CATEGORY_API.Extra) return "Extra";
+  if (numeric === BOARD_MEDIA_CATEGORY_API.Completion) return "Completion";
+  if (numeric === BOARD_MEDIA_CATEGORY_API.Aveta) return "Aveta";
+  return "Extra";
+}
+
+export function mapBoardDetailComment(raw: unknown): WorkOrderComment {
+  const item = asRecord(raw);
+  const id = readNumber(item, "id");
+  const authorId = readString(item, "authorId", "AuthorId") || null;
+  return {
+    id: id ?? (readString(item, "id") || `comment-${readString(item, "time")}`),
+    createdDate: readString(item, "time", "createdDate", "CreatedDate"),
+    commenttext: readString(item, "text", "commenttext", "Commenttext"),
+    commentType: readString(item, "commentType", "CommentType") || "internal",
+    userName: readString(item, "userName", "UserName", "authorName", "AuthorName"),
+    authorId,
+    commenter: readString(item, "commenter", "Commenter") || null,
+    recordType: readString(item, "recordType", "RecordType") || null,
+    mentions: readStringArray(item, "mentions", "Mentions"),
+  };
+}
+
+export function mapBoardDetailAuditEntry(raw: unknown, index: number): WorkOrderAuditEntry {
+  const item = asRecord(raw);
+  const time = readString(item, "time", "createdAt", "CreatedAt");
+  const typeRaw = readString(item, "type", "Type").toLowerCase();
+  const type: "manual" | "system" = typeRaw === "system" ? "system" : "manual";
+  const dispatcherId = readString(item, "dispatcherId", "DispatcherId");
+  const userName = readString(item, "userName", "UserName");
+
+  return {
+    id: `${time || "audit"}-${index}`,
+    fieldName: readString(item, "fieldName", "FieldName"),
+    oldValue: readString(item, "oldValue", "OldValue"),
+    newValue: readString(item, "newValue", "NewValue"),
+    action: readString(item, "action", "Action"),
+    createdAt: time,
+    userName: type === "system" ? "System" : userName,
+    type,
+    dispatcherId: dispatcherId || undefined,
+  };
+}
+
+export type UploadableMediaCategory = "Before" | "After" | "Extra" | "Aveta";
+
+export function buildMediaFormData(file: File, category?: UploadableMediaCategory): FormData {
+  const form = new FormData();
+  if (category) {
+    form.append("category", category);
+  }
+  form.append("file", file);
+  return form;
+}
+
+export function buildCompletionDocFormData(params: {
+  file: File;
+  workOrderVersion: string;
+  signOffName?: string;
+  signOffSignature?: string;
+}): FormData {
+  const form = new FormData();
+  form.append("file", params.file);
+  form.append("workOrderVersion", params.workOrderVersion);
+  if (params.signOffName) {
+    form.append("signOffName", params.signOffName);
+  }
+  if (params.signOffSignature) {
+    form.append("signOffSignature", params.signOffSignature);
+  }
+  return form;
+}
+
+export function mapCompletion(raw: unknown): WorkOrderBoardCompletion {
+  const item = asRecord(raw);
+  const templateRaw = item.template ?? item.Template;
+  const templateRecord = templateRaw != null ? asRecord(templateRaw) : null;
+  const signoffsRaw = item.dispatchSignoffs ?? item.DispatchSignoffs;
+  const signoffs = Array.isArray(signoffsRaw)
+    ? signoffsRaw.map((entry) => {
+        const s = asRecord(entry);
+        return {
+          dispatchId: readNumber(s, "dispatchId", "DispatchId"),
+          signoffType: readString(s, "signoffType", "SignoffType"),
+          name: readString(s, "name", "Name"),
+          signedAt: readString(s, "signedAt", "SignedAt"),
+        };
+      })
+    : [];
+
+  return {
+    docStatus: mapDocStatus(item.docStatus ?? item.DocStatus),
+    template: templateRecord
+      ? {
+          id: readNumber(templateRecord, "id", "Id") ?? 0,
+          name: readString(templateRecord, "name", "Name"),
+          serviceKey: readString(templateRecord, "serviceKey", "ServiceKey"),
+          workOrderType: readNumber(templateRecord, "workOrderType", "WorkOrderType"),
+          templateUrl: readString(templateRecord, "templateUrl", "TemplateUrl"),
+          isActive: readBoolean(templateRecord, "isActive", "IsActive"),
+        }
+      : null,
+    signOffName: readString(item, "signOffName", "SignOffName"),
+    signOffAttachment: readString(item, "signOffAttachment", "SignOffAttachment"),
+    signOffSignature: readString(item, "signOffSignature", "SignOffSignature"),
+    dispatchSignoffs: signoffs,
+  };
+}
+
+export function mapBoardDetailMediaItem(raw: unknown): WorkOrderBoardMediaItem {
+  const item = asRecord(raw);
+  const id = readNumber(item, "id");
+  const isLegacyFlag = readBoolean(item, "isLegacy", "IsLegacy");
+  return {
+    id: String(id ?? (readString(item, "id") || cryptoRandomId())),
+    category: mapMediaCategory(item.category ?? item.Category),
+    url: readString(item, "url", "Url"),
+    fileName: toDisplayFileName(readString(item, "fileName", "FileName") || "file"),
+    uploadedAt: readString(item, "uploadedAt", "UploadedAt"),
+    isLegacy: isLegacyFlag || (id != null && id <= 0),
+  };
+}
+
+function cryptoRandomId(): string {
+  return `media-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+function classifyFileName(fileName: string, url: string): FileCategory {
+  const name = `${fileName} ${url}`.toLowerCase();
+  if (/\.(jpe?g|png|gif|webp|bmp)(\?|$)/i.test(name) || name.includes("image/")) {
+    return "image";
+  }
+  if (/\.(mp4|mov|webm|m4v)(\?|$)/i.test(name) || name.includes("video/")) {
+    return "video";
+  }
+  if (/\.pdf(\?|$)/i.test(name)) {
+    return "pdf";
+  }
+  if (/\.(docx?|xlsx?|pptx?)(\?|$)/i.test(name)) {
+    return "doc";
+  }
+  return "other";
+}
+
+function boardCategoryToMediaCategory(category: BoardMediaCategory): MediaCategory {
+  if (category === "Aveta") return "Aveta";
+  if (category === "Extra") return "Other";
+  if (category === "Completion") return "Report";
+  return "Photo";
+}
+
+/** Adapt board detail media items for existing MediaUploader / Extras UI. */
+export function boardMediaItemsToMediaFiles(items: WorkOrderBoardMediaItem[]): MediaFile[] {
+  return items.map((item) => ({
+    id: item.id,
+    name: item.fileName,
+    fileType: classifyFileName(item.fileName, item.url),
+    url: item.url,
+    category: boardCategoryToMediaCategory(item.category),
+    purpose: item.category,
+    isLegacy: item.isLegacy || Number(item.id) <= 0,
+    uploadStatus: "done" as const,
+  }));
+}
+
+/**
+ * `GET workorders/{id}/detail` info serializes the board row's `MediaCount` as 0 — the detail
+ * DTO inherits the field but the service never sets it — so trusting it verbatim would leave the
+ * slide-over closability gate reporting "At least 1 photo" even after an upload. Take the larger
+ * of the reported count and the stored (non-legacy) attachments: a positive API count still wins,
+ * but a spurious (or omitted) 0 can no longer mask media that are actually present.
+ */
+function resolveDetailMediaCount(infoRaw: unknown, media: WorkOrderBoardMediaItem[]): number {
+  const record = asRecord(infoRaw);
+  const explicit = record.mediaCount ?? record.MediaCount;
+  const nonLegacyCount = media.filter((item) => !item.isLegacy).length;
+  return Math.max(typeof explicit === "number" ? explicit : 0, nonLegacyCount);
+}
+
+export function mapWorkOrderBoardDetail(raw: unknown): WorkOrderBoardDetail {
+  const root = asRecord(raw);
+  const infoRaw = root.info ?? root.Info ?? root;
+  const commentsRaw = root.comments ?? root.Comments;
+  const auditRaw = root.audit ?? root.Audit;
+  const mediaRaw = root.media ?? root.Media;
+  const completionRaw = root.completion ?? root.Completion;
+
+  const comments = Array.isArray(commentsRaw) ? commentsRaw.map(mapBoardDetailComment) : [];
+  const audit = Array.isArray(auditRaw)
+    ? auditRaw.map((entry, index) => mapBoardDetailAuditEntry(entry, index))
+    : [];
+  const media = Array.isArray(mediaRaw) ? mediaRaw.map(mapBoardDetailMediaItem) : [];
+
+  const info = mapWorkOrderTableRow(infoRaw);
+
+  return {
+    info: { ...info, mediaCount: resolveDetailMediaCount(infoRaw, media) },
+    completion: mapCompletion(completionRaw ?? {}),
+    comments,
+    audit,
+    media,
+  };
+}
diff --git a/src/domain/work-orders/mappers/work-order-board-mapper.ts b/src/domain/work-orders/mappers/work-order-board-mapper.ts
new file mode 100644
index 00000000..af00a55d
--- /dev/null
+++ b/src/domain/work-orders/mappers/work-order-board-mapper.ts
@@ -0,0 +1,145 @@
+import type {
+  WorkOrderBoardCreatePayload,
+  WorkOrderTypeApi,
+} from "@/domain/work-orders/types/work-order-board";
+
+import {
+  LIFECYCLE_STATUS_API,
+  WORK_ORDER_TYPE_API,
+} from "@/domain/work-orders/types/work-order-board";
+
+import type {
+  WizardWOStatus,
+  WOType,
+  WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+
+import { fmtDateRange } from "@/domain/work-orders/utils/wizard-date-utils";
+
+import { assignWizardScheduleFields } from "@/domain/work-orders/mappers/assign-wizard-schedule-fields";
+import { assignWizardVendorApptFields } from "@/domain/work-orders/mappers/assign-wizard-vendor-appt-fields";
+import { assignWizardServicePocFields } from "@/domain/work-orders/mappers/assign-wizard-service-poc-fields";
+import { resolveIsAddOnForCreate } from "@/domain/work-orders/utils/wo-addon-cutoff";
+
+const WO_TYPE_TO_API: Record<WOType, WorkOrderTypeApi> = {
+  PM: WORK_ORDER_TYPE_API.PM,
+
+  Emergency: WORK_ORDER_TYPE_API.Emergency,
+
+  Reactive: WORK_ORDER_TYPE_API.Reactive,
+
+  Overdue: WORK_ORDER_TYPE_API.Other,
+};
+
+/** Leading token of a location label, e.g. `BK5` from `BK5 · Dallas` or `CHI-1042` from `CHI-1042 — Chicago`. */
+
+export function parseSiteCodeFromLocationName(name: string): string {
+  const trimmed = name.trim();
+
+  if (!trimmed) {
+    return "";
+  }
+
+  const match = trimmed.match(/^([A-Za-z0-9-]+)/);
+
+  return match?.[1] ?? "";
+}
+
+export function resolveSiteCode(option: {
+  siteCode?: string;
+
+  name?: string;
+}): string {
+  if (option.siteCode?.trim()) {
+    return option.siteCode.trim();
+  }
+
+  return parseSiteCodeFromLocationName(option.name ?? "");
+}
+
+export function mapWizardTypeToApi(type: WOType | ""): WorkOrderTypeApi | null {
+  if (!type) {
+    return null;
+  }
+
+  return WO_TYPE_TO_API[type];
+}
+
+/**
+
+ * Legacy/general description only.
+
+ * Service notes, extras, POC, and vendor notes are sent as structured fields.
+
+ */
+
+export function buildBoardDescription(draft: WorkOrderWizardDraft): string {
+  const parts: string[] = [];
+
+  if (draft.schedMode === "range" && draft.scheduledOn && draft.scheduleEnd) {
+    parts.push(`Schedule range: ${fmtDateRange(draft.scheduledOn, draft.scheduleEnd)}`);
+  }
+
+  return parts.join("\n");
+}
+
+export function mapWizardDraftToBoardCreatePayload(
+  draft: WorkOrderWizardDraft,
+): WorkOrderBoardCreatePayload {
+  const workOrderType = mapWizardTypeToApi(draft.type || "PM");
+
+  const siteCode = draft.siteCode.trim() || resolveSiteCode({ name: draft.locationName });
+
+  if (workOrderType === null) {
+    throw new Error("Work order type is required");
+  }
+
+  if (!siteCode) {
+    throw new Error("Site code is required");
+  }
+
+  const payload: WorkOrderBoardCreatePayload = {
+    workOrderType,
+
+    siteCode,
+
+    // Range start persists as scheduledDate (prototype hasScheduleDate). Use it for
+    // the create-time Add-On cutoff hint; week mode uses targetWeek / Monday.
+    isAddOn: resolveIsAddOnForCreate({
+      scheduledOn: draft.scheduleWeekOnly
+        ? draft.targetWeek?.trim() || draft.scheduledOn
+        : draft.scheduledOn,
+      manualOverride: draft.isAddOnOverride,
+    }),
+  };
+
+  if (draft.status) {
+    payload.lifecycleStatus = LIFECYCLE_STATUS_API[draft.status as WizardWOStatus];
+  }
+
+  if (draft.woNumber.trim()) {
+    payload.woNumber = draft.woNumber.trim();
+  }
+
+  if (draft.assigneeId.trim()) {
+    payload.assignTo = draft.assigneeId.trim();
+  }
+
+  assignWizardScheduleFields(payload, draft);
+  assignWizardVendorApptFields(payload, draft);
+  assignWizardServicePocFields(payload, draft);
+
+  const description = buildBoardDescription(draft);
+
+  if (description) {
+    payload.description = description;
+  }
+
+  const locationId = draft.locationId.trim() ? Number(draft.locationId) : NaN;
+
+  if (Number.isFinite(locationId)) {
+    payload.locationId = locationId;
+  }
+
+  return payload;
+}
diff --git a/src/domain/work-orders/mappers/work-order-board-patch-mapper.ts b/src/domain/work-orders/mappers/work-order-board-patch-mapper.ts
new file mode 100644
index 00000000..66338697
--- /dev/null
+++ b/src/domain/work-orders/mappers/work-order-board-patch-mapper.ts
@@ -0,0 +1,96 @@
+import type {
+  WorkOrderBoardEditableField,
+  WorkOrderBoardPatchPayload,
+} from "@/domain/work-orders/types/work-order-board";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import {
+  expandScalarBoardOps,
+  mapDocStatusToApi,
+  type BoardFieldOp,
+} from "@/domain/work-orders/mappers/expand-scalar-board-ops";
+import { expandScheduleBoardOps } from "@/domain/work-orders/mappers/expand-schedule-board-ops";
+
+export type { BoardFieldOp };
+export { mapDocStatusToApi };
+
+const DISPATCH_FIELDS = new Set<WorkOrderBoardEditableField>(["vendorId", "apptDate", "apptTime"]);
+
+const LOCAL_ONLY_KEYS = new Set<keyof WorkOrderTablePatch>([
+  "mediaCount",
+  "dayGroup",
+  "dayLabel",
+  "dispatcherName",
+  "company",
+  "tech",
+  "techPhone",
+  "location",
+  "locationId",
+  "pocName",
+  "pocPhone",
+  "pocNotes",
+  "title",
+  "priority",
+  "apptStart",
+  "apptEnd",
+  "rescheduleCount",
+  "carriedOver",
+  "isPastDue",
+  "originalWeek",
+  "originalDate",
+  /** Optimistic overlay only — backend owns isAddOn after schedule ops (SH-184). */
+  "isAddOn",
+  "primaryDispatchStatus",
+  /** Client-only Schedule On range overlay — API persists range start as scheduledDate. */
+  "scheduleEnd",
+  "schedMode",
+]);
+
+export function isLocalOnlyTablePatch(patch: WorkOrderTablePatch): boolean {
+  const keys = Object.keys(patch) as (keyof WorkOrderTablePatch)[];
+  return keys.length > 0 && keys.every((key) => LOCAL_ONLY_KEYS.has(key));
+}
+
+/**
+ * Expands a UI table patch into ordered board field ops (one PATCH each).
+ * Schedule/week-only fields are emitted first in a stable order.
+ */
+export function expandTablePatchToBoardFieldOps(patch: WorkOrderTablePatch): BoardFieldOp[] {
+  if (isLocalOnlyTablePatch(patch)) {
+    return [];
+  }
+
+  return [...expandScheduleBoardOps(patch), ...expandScalarBoardOps(patch)];
+}
+
+export function isDispatchBoardField(field: WorkOrderBoardEditableField): boolean {
+  return DISPATCH_FIELDS.has(field);
+}
+
+export function buildBoardPatchPayload(
+  op: BoardFieldOp,
+  row: Pick<WorkOrderTableRow, "rowVersion" | "dispatchRowVersion" | "primaryDispatchId">,
+): WorkOrderBoardPatchPayload {
+  if (!row.rowVersion) {
+    throw new Error("workOrderVersion is required for board patch");
+  }
+
+  const payload: WorkOrderBoardPatchPayload = {
+    field: op.field,
+    value: op.value,
+    workOrderVersion: row.rowVersion,
+  };
+
+  if (isDispatchBoardField(op.field)) {
+    if (row.dispatchRowVersion) {
+      payload.dispatchVersion = row.dispatchRowVersion;
+    }
+    if (row.primaryDispatchId != null && row.primaryDispatchId > 0) {
+      payload.primaryDispatchId = row.primaryDispatchId;
+    }
+  }
+
+  return payload;
+}
diff --git a/src/domain/work-orders/mappers/work-order-dispatch-mapper.ts b/src/domain/work-orders/mappers/work-order-dispatch-mapper.ts
new file mode 100644
index 00000000..2b2eff05
--- /dev/null
+++ b/src/domain/work-orders/mappers/work-order-dispatch-mapper.ts
@@ -0,0 +1,169 @@
+import type {
+  DispatchChecklistItem,
+  DispatchComment,
+  DispatchDetail,
+  DispatchSignoff,
+  DispatchToVendorPayload,
+  DispatchWorkOrderRef,
+  UpdateDispatchPayload,
+} from "@/domain/work-orders/types/work-order";
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readId(record: Record<string, unknown>): string | number {
+  const value = record.id ?? record.Id;
+  if (typeof value === "string" || typeof value === "number") {
+    return value;
+  }
+  return "";
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+  }
+  return "";
+}
+
+function readNumber(record: Record<string, unknown>, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number") {
+      return value;
+    }
+    if (typeof value === "string" && value !== "") {
+      const parsed = Number(value);
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
+    }
+  }
+  return null;
+}
+
+function readBool(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") {
+      return value;
+    }
+  }
+  return false;
+}
+
+export function mapDispatchChecklistItem(raw: unknown): DispatchChecklistItem {
+  const item = asRecord(raw);
+
+  return {
+    id: readId(item),
+    itemText: readString(item, "itemText", "ItemText"),
+    isCompleted: readBool(item, "isCompleted", "IsCompleted"),
+    completedBy: readString(item, "completedBy", "CompletedBy") || null,
+    completedAt: readString(item, "completedAt", "CompletedAt") || null,
+  };
+}
+
+export function mapDispatchSignoff(raw: unknown): DispatchSignoff {
+  const item = asRecord(raw);
+
+  return {
+    id: readId(item),
+    signoffType: readString(item, "signoffType", "SignoffType"),
+    name: readString(item, "name", "Name"),
+    signature: readString(item, "signature", "Signature"),
+    signatureMethod: readString(item, "signatureMethod", "SignatureMethod"),
+    signedAt: readString(item, "signedAt", "SignedAt"),
+  };
+}
+
+export function mapDispatchComment(raw: unknown): DispatchComment {
+  const item = asRecord(raw);
+
+  return {
+    id: readId(item),
+    createdDate: readString(item, "createdDate", "CreatedDate"),
+    commenttext: readString(item, "commenttext", "Commenttext", "text", "Text"),
+    userName: readString(item, "userName", "UserName"),
+    commenter: readString(item, "commenter", "Commenter") || null,
+  };
+}
+
+export function mapDispatchWorkOrderRef(raw: unknown): DispatchWorkOrderRef {
+  const item = asRecord(raw);
+
+  return {
+    id: readId(item),
+    woNumber: readString(item, "woNumber", "WoNumber", "WONumber", "number", "Number"),
+  };
+}
+
+export function mapDispatchDetail(raw: unknown): DispatchDetail {
+  const item = asRecord(raw);
+  const checklistItems = item.checklistItems ?? item.ChecklistItems;
+  const signoffs = item.signoffs ?? item.Signoffs;
+  const comments = item.comments ?? item.Comments;
+  const workOrders = item.workOrders ?? item.WorkOrders;
+
+  return {
+    id: readId(item),
+    dispatchNumber: readString(item, "dispatchNumber", "DispatchNumber"),
+    poNumber: readString(item, "poNumber", "PoNumber", "PONumber"),
+    vendorName: readString(item, "vendorName", "VendorName"),
+    vendorEmail: readString(item, "vendorEmail", "VendorEmail"),
+    woNumber: readString(item, "woNumber", "WoNumber"),
+    status: readString(item, "status", "Status"),
+    nteAmount: readNumber(item, "nteAmount", "NTEAmount"),
+    scheduledDate: readString(item, "scheduledDate", "ScheduledDate"),
+    estimatedArrivalAt: readString(item, "estimatedArrivalAt", "EstimatedArrivalAt"),
+    etaManualOverride: readBool(item, "etaManualOverride", "EtaManualOverride"),
+    completedDate: readString(item, "completedDate", "CompletedDate"),
+    description: readString(item, "description", "Description"),
+    dispatchedAt: readString(item, "dispatchedAt", "DispatchedAt"),
+    acknowledgedAt: readString(item, "acknowledgedAt", "AcknowledgedAt"),
+    verifiedAt: readString(item, "verifiedAt", "VerifiedAt"),
+    verifiedBy: readString(item, "verifiedBy", "VerifiedBy"),
+    checklistItems: Array.isArray(checklistItems)
+      ? checklistItems.map(mapDispatchChecklistItem)
+      : [],
+    signoffs: Array.isArray(signoffs) ? signoffs.map(mapDispatchSignoff) : [],
+    comments: Array.isArray(comments) ? comments.map(mapDispatchComment) : [],
+    workOrders: Array.isArray(workOrders) ? workOrders.map(mapDispatchWorkOrderRef) : [],
+  };
+}
+
+export function mapDispatchToVendorPayload(
+  payload: DispatchToVendorPayload,
+): Record<string, unknown> {
+  return {
+    WorkOrderIds: payload.workOrderIds,
+    VendorIds: payload.vendorIds,
+    NTEAmount: payload.nteAmount,
+    ScheduledDate: payload.scheduledDate,
+    EstimatedArrivalAt: payload.estimatedArrivalAt,
+    EtaManualOverride: payload.etaManualOverride ?? false,
+    Description: payload.description,
+    TaskListTemplateId: payload.taskListTemplateId,
+    CustomChecklistItems: payload.customChecklistItems,
+  };
+}
+
+export function mapUpdateDispatchPayload(payload: UpdateDispatchPayload): Record<string, unknown> {
+  return {
+    Id: payload.id,
+    Status: payload.status,
+    NTEAmount: payload.nteAmount,
+    ScheduledDate: payload.scheduledDate,
+    EstimatedArrivalAt: payload.estimatedArrivalAt,
+    EtaManualOverride: payload.etaManualOverride ?? false,
+    CompletedDate: payload.completedDate,
+    Description: payload.description,
+  };
+}
diff --git a/src/domain/work-orders/mappers/work-order-mapper.ts b/src/domain/work-orders/mappers/work-order-mapper.ts
new file mode 100644
index 00000000..303b03fa
--- /dev/null
+++ b/src/domain/work-orders/mappers/work-order-mapper.ts
@@ -0,0 +1,476 @@
+import { parseSiteCodeFromLocationName } from "@/domain/work-orders/mappers/work-order-board-mapper";
+import {
+  readDetailDocStatus,
+  readDetailMediaCount,
+  readDetailWoType,
+} from "@/domain/work-orders/utils/read-detail-closability-fields";
+import type {
+  EmployeeOption,
+  LocationOption,
+  TaskListTemplate,
+  WorkOrderAuditEntry,
+  WorkOrderComment,
+  WorkOrderDetail,
+  WorkOrderDispatchSummary,
+  WorkOrderFormValues,
+  WorkOrderListItem,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderStatus } from "@/domain/work-orders/types/work-order-common";
+import { WORK_ORDER_STATUS_OPTIONS } from "@/domain/work-orders/types/work-order-common";
+import { toDateInputValue } from "@/lib/time-utils";
+
+export { mapDocStatusToApi } from "@/domain/work-orders/mappers/doc-status-mapper";
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function toWorkOrderStatus(value: string): WorkOrderStatus {
+  if (WORK_ORDER_STATUS_OPTIONS.includes(value as WorkOrderStatus)) {
+    return value as WorkOrderStatus;
+  }
+  const fromEditEnum: Record<string, WorkOrderStatus> = {
+    Open: "Open",
+    InProgress: "In Progress",
+    OnHold: "On Hold",
+    Completed: "Done",
+    Cancelled: "Cancelled",
+    Canceled: "Cancelled",
+  };
+  return fromEditEnum[value] ?? "Open";
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+  }
+  return "";
+}
+
+function readId(record: Record<string, unknown>): string | number {
+  const value = record.id ?? record.Id;
+  if (typeof value === "string" || typeof value === "number") {
+    return value;
+  }
+  return "";
+}
+
+function readNumber(record: Record<string, unknown>, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number") {
+      return value;
+    }
+    if (typeof value === "string" && value !== "") {
+      const parsed = Number(value);
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
+    }
+  }
+  return null;
+}
+
+function readIdList(raw: unknown): number[] | undefined {
+  if (!Array.isArray(raw)) {
+    return undefined;
+  }
+
+  const ids: number[] = [];
+  for (const entry of raw) {
+    if (typeof entry === "number" && !Number.isNaN(entry)) {
+      ids.push(entry);
+      continue;
+    }
+    if (typeof entry === "string" && entry !== "") {
+      const parsed = Number(entry);
+      if (!Number.isNaN(parsed)) {
+        ids.push(parsed);
+      }
+      continue;
+    }
+    if (typeof entry === "object" && entry !== null) {
+      const id = readNumber(
+        asRecord(entry),
+        "id",
+        "Id",
+        "contactId",
+        "ContactId",
+        "categoryId",
+        "CategoryId",
+      );
+      if (id != null) {
+        ids.push(id);
+      }
+    }
+  }
+
+  return ids;
+}
+
+function readOptionalIdList(
+  record: Record<string, unknown>,
+  ...keys: string[]
+): number[] | undefined {
+  for (const key of keys) {
+    if (!(key in record)) {
+      continue;
+    }
+    const list = readIdList(record[key]);
+    if (list !== undefined) {
+      return list;
+    }
+  }
+  return undefined;
+}
+
+const FORM_STATUS_TO_EDIT_ENUM: Record<string, string> = {
+  Open: "Open",
+  "In Progress": "InProgress",
+  InProgress: "InProgress",
+  "On Hold": "OnHold",
+  OnHold: "OnHold",
+  Done: "Completed",
+  Completed: "Completed",
+  Cancelled: "Cancelled",
+  Canceled: "Cancelled",
+};
+
+const FORM_PRIORITY_TO_EDIT_ENUM: Record<string, string> = {
+  "Sev 1": "Critical",
+  "Sev 2": "High",
+  "Sev 3": "Medium",
+  "Sev 4": "Low",
+  "Sev 5": "Low",
+  Low: "Low",
+  Medium: "Medium",
+  High: "High",
+  Critical: "Critical",
+};
+
+export function mapFormStatusToEditEnum(status: string): string {
+  return FORM_STATUS_TO_EDIT_ENUM[status] ?? status;
+}
+
+export function mapFormPriorityToEditEnum(priority: string): string {
+  return FORM_PRIORITY_TO_EDIT_ENUM[priority] ?? priority;
+}
+
+function appendIfPresent(
+  formData: FormData,
+  key: string,
+  value: string | number | null | undefined,
+): void {
+  if (value === null || value === undefined) {
+    return;
+  }
+  const asString = String(value).trim();
+  if (asString === "") {
+    return;
+  }
+  formData.append(key, asString);
+}
+
+function appendIdList(formData: FormData, key: string, ids: number[] | undefined): void {
+  if (ids === undefined) {
+    return;
+  }
+  for (const id of ids) {
+    formData.append(key, String(id));
+  }
+}
+
+function readBool(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") {
+      return value;
+    }
+  }
+  return false;
+}
+
+export function mapWorkOrderListItem(raw: unknown): WorkOrderListItem {
+  const item = asRecord(raw);
+
+  return {
+    id: readId(item),
+    number: readString(item, "internalWONumber", "number", "workOrderNumber"),
+    title: readString(item, "title", "Title"),
+    location: readString(item, "location", "Location", "locationName", "LocationName"),
+    priority: readString(item, "priority", "Priority"),
+    status: readString(item, "status", "Status"),
+    createdDate: readString(item, "createdDate", "CreatedDate"),
+    dueDate: readString(item, "dueDate", "DueDate"),
+    assignedTo: readString(item, "assignedTo", "AssignedTo", "employeeName", "EmployeeName"),
+    lastUpdated: readString(item, "lastUpdated", "LastUpdated"),
+  };
+}
+
+export function mapWorkOrderListItems(rawItems: unknown[]): WorkOrderListItem[] {
+  return rawItems.map(mapWorkOrderListItem);
+}
+
+export { mapWorkOrderTableRow, mapWorkOrderTableRows } from "./work-order-table-row-mapper";
+
+export function mapWorkOrderComment(raw: unknown): WorkOrderComment {
+  const item = asRecord(raw);
+  const authorId = readString(item, "authorId", "AuthorId") || null;
+  const mentionsRaw = item.mentions ?? item.Mentions;
+  const mentions = Array.isArray(mentionsRaw)
+    ? mentionsRaw
+        .map((entry) => (typeof entry === "string" ? entry : String(entry)))
+        .filter(Boolean)
+    : undefined;
+
+  return {
+    id: readId(item),
+    createdDate: readString(item, "createdDate", "CreatedDate"),
+    commenttext: readString(item, "commenttext", "Commenttext", "text", "Text"),
+    commentType: readString(item, "commentType", "CommentType"),
+    userName: readString(item, "userName", "UserName", "authorName", "AuthorName"),
+    authorId,
+    commenter: readString(item, "commenter", "Commenter") || null,
+    recordType: readString(item, "recordType", "RecordType") || null,
+    mentions,
+  };
+}
+
+export function mapWorkOrderAuditEntry(raw: unknown): WorkOrderAuditEntry {
+  const item = asRecord(raw);
+  const typeRaw = readString(item, "type", "Type").toLowerCase();
+  const type =
+    typeRaw === "system"
+      ? ("system" as const)
+      : typeRaw === "manual"
+        ? ("manual" as const)
+        : undefined;
+
+  return {
+    id: readId(item),
+    fieldName: readString(item, "fieldName", "FieldName"),
+    oldValue: readString(item, "oldValue", "OldValue"),
+    newValue: readString(item, "newValue", "NewValue"),
+    action: readString(item, "action", "Action"),
+    createdAt: readString(item, "createdAt", "CreatedAt", "time", "Time"),
+    userName: readString(item, "userName", "UserName"),
+    type,
+    dispatcherId: readString(item, "dispatcherId", "DispatcherId") || undefined,
+  };
+}
+
+export function mapWorkOrderDispatchSummary(raw: unknown): WorkOrderDispatchSummary {
+  const item = asRecord(raw);
+
+  return {
+    id: readId(item),
+    vendorId: readId({ id: item.vendorId ?? item.VendorId }),
+    dispatchNumber: readString(item, "dispatchNumber", "DispatchNumber"),
+    poNumber: readString(item, "poNumber", "PoNumber", "PONumber"),
+    vendorName: readString(item, "vendorName", "VendorName"),
+    vendorEmail: readString(item, "vendorEmail", "VendorEmail"),
+    nteAmount: readNumber(item, "nteAmount", "NTEAmount"),
+    status: readString(item, "status", "Status"),
+    dispatchedAt: readString(item, "dispatchedAt", "DispatchedAt"),
+    estimatedArrivalAt: readString(item, "estimatedArrivalAt", "EstimatedArrivalAt"),
+    etaManualOverride: readBool(item, "etaManualOverride", "EtaManualOverride"),
+  };
+}
+
+export function mapWorkOrderDetail(raw: unknown): WorkOrderDetail {
+  const wo = asRecord(raw);
+  const locationId = wo.locationId ?? wo.LocationId;
+  const contactIds = readOptionalIdList(wo, "contactIds", "ContactIds", "contacts", "Contacts");
+  const categoryIds = readOptionalIdList(
+    wo,
+    "categoryIds",
+    "CategoryIds",
+    "categories",
+    "Categories",
+  );
+
+  return {
+    id: readId(wo),
+    internalWONumber: readString(wo, "internalWONumber", "InternalWONumber"),
+    workOrderNumber: readString(wo, "workerOrderNumber", "workOrderNumber", "WorkerOrderNumber"),
+    title: readString(wo, "title", "workerOrderTitle", "WorkerOrderTitle"),
+    location: readString(wo, "location", "Location"),
+    locationId: locationId != null ? String(locationId) : "",
+    locationZip: readString(wo, "locationZip", "LocationZip"),
+    assignedTo: readString(wo, "assignee", "assignedTo", "Assignee", "AssignedTo"),
+    dueDate: toDateInputValue(readString(wo, "dueDate", "DueDate")),
+    createdDate: toDateInputValue(readString(wo, "createdDate", "CreatedDate")),
+    createdDateFull: readString(wo, "createdDate", "CreatedDate"),
+    description: readString(wo, "description", "Description"),
+    priority: readString(wo, "priority", "Priority"),
+    status: readString(wo, "status", "Status") || "Open",
+    po: readString(wo, "po", "PO"),
+    tt: readString(wo, "tt", "TT"),
+    problem: readString(wo, "problem", "Problem"),
+    trade: readString(wo, "trade", "Trade"),
+    subTrade: readString(wo, "subTrade", "SubTrade"),
+    vendorNTE: wo.vendorNTE != null ? String(wo.vendorNTE) : "",
+    scheduledDate: toDateInputValue(readString(wo, "scheduledDate", "ScheduledDate")),
+    completedDate: toDateInputValue(readString(wo, "completedDate", "CompletedDate")),
+    source: readString(wo, "source", "Source"),
+    type: readDetailWoType(wo),
+    docStatus: readDetailDocStatus(wo),
+    mediaCount: readDetailMediaCount(wo),
+    ...(contactIds !== undefined ? { contactIds } : {}),
+    ...(categoryIds !== undefined ? { categoryIds } : {}),
+    comments: Array.isArray(wo.comments)
+      ? wo.comments.map(mapWorkOrderComment)
+      : Array.isArray(wo.Comments)
+        ? wo.Comments.map(mapWorkOrderComment)
+        : [],
+    auditLog: Array.isArray(wo.auditLog)
+      ? wo.auditLog.map(mapWorkOrderAuditEntry)
+      : Array.isArray(wo.AuditLog)
+        ? wo.AuditLog.map(mapWorkOrderAuditEntry)
+        : [],
+    dispatches: Array.isArray(wo.dispatches)
+      ? wo.dispatches.map(mapWorkOrderDispatchSummary)
+      : Array.isArray(wo.Dispatches)
+        ? wo.Dispatches.map(mapWorkOrderDispatchSummary)
+        : [],
+  };
+}
+
+export function mapWorkOrderDetailToFormValues(detail: WorkOrderDetail): WorkOrderFormValues {
+  return {
+    internalWONumber: detail.internalWONumber,
+    workOrderNumber: detail.workOrderNumber,
+    title: detail.title,
+    locationId: detail.locationId,
+    priority: detail.priority,
+    status: toWorkOrderStatus(detail.status),
+    createdDate: detail.createdDate,
+    dueDate: detail.dueDate,
+    scheduledDate: detail.scheduledDate,
+    completedDate: detail.completedDate,
+    docStatus: detail.docStatus,
+    assignedTo: detail.assignedTo,
+    description: detail.description,
+    po: detail.po,
+    tt: detail.tt,
+    problem: detail.problem,
+    trade: detail.trade,
+    subTrade: detail.subTrade,
+    vendorNTE: detail.vendorNTE,
+    source: detail.source,
+    ...(detail.contactIds !== undefined ? { contactIds: detail.contactIds } : {}),
+    ...(detail.categoryIds !== undefined ? { categoryIds: detail.categoryIds } : {}),
+  };
+}
+
+export function mapWorkOrderFormToCreatePayload(
+  values: WorkOrderFormValues,
+): Record<string, unknown> {
+  return {
+    WorkerOrderNumber: values.workOrderNumber,
+    WorkerOrderTitle: values.title,
+    LocationId: values.locationId ? parseInt(values.locationId, 10) : null,
+    Priority: values.priority || null,
+    Status: values.status,
+    CreatedDate: values.createdDate || null,
+    DueDate: values.dueDate || null,
+    ScheduledDate: values.scheduledDate || null,
+    CompletedDate: values.completedDate || null,
+    AssignTo: values.assignedTo || null,
+    Description: values.description,
+    PO: values.po || null,
+    TT: values.tt || null,
+    Problem: values.problem || null,
+    Trade: values.trade || null,
+    SubTrade: values.subTrade || null,
+    VendorNTE: values.vendorNTE ? parseFloat(values.vendorNTE) : null,
+    Source: values.source || null,
+  };
+}
+
+export function mapWorkOrderFormToUpdateFormData(
+  id: string | number,
+  values: WorkOrderFormValues,
+): FormData {
+  const formData = new FormData();
+  formData.append("Id", String(id));
+
+  appendIfPresent(formData, "WorkerOrderTitle", values.title);
+  appendIfPresent(formData, "Description", values.description);
+  appendIfPresent(formData, "Status", mapFormStatusToEditEnum(values.status));
+  appendIfPresent(formData, "Priority", mapFormPriorityToEditEnum(values.priority));
+  const locationId = values.locationId ? parseInt(values.locationId, 10) : NaN;
+  appendIfPresent(formData, "LocationId", Number.isNaN(locationId) ? undefined : locationId);
+  appendIfPresent(formData, "AssignTo", values.assignedTo);
+  appendIfPresent(formData, "DueDate", values.dueDate);
+  appendIfPresent(formData, "CompletedDate", values.completedDate);
+  appendIdList(formData, "ContactIds", values.contactIds);
+  appendIdList(formData, "CategoryIds", values.categoryIds);
+
+  return formData;
+}
+
+export function mapLocationOption(raw: unknown): LocationOption {
+  const item = asRecord(raw);
+  const name = readString(item, "name", "Name", "locationName", "LocationName");
+  const siteCode =
+    readString(item, "siteCode", "SiteCode", "code", "Code") || parseSiteCodeFromLocationName(name);
+
+  return {
+    id: readId(item),
+    name,
+    ...(siteCode ? { siteCode } : {}),
+  };
+}
+
+export function mapLocationOptions(rawItems: unknown[]): LocationOption[] {
+  return rawItems.map(mapLocationOption);
+}
+
+export function mapEmployeeOption(raw: unknown): EmployeeOption {
+  const item = asRecord(raw);
+
+  return {
+    id: readId(item),
+    name:
+      readString(item, "name", "Name", "fullName", "FullName", "employeeName", "EmployeeName") ||
+      readString(item, "userName", "UserName"),
+  };
+}
+
+export function mapEmployeeOptions(rawItems: unknown[]): EmployeeOption[] {
+  return rawItems.map(mapEmployeeOption);
+}
+
+export { mapVendorDropdownItem, mapVendorDropdownItems } from "./work-order-vendor-mapper";
+
+export function mapTaskListTemplate(raw: unknown): TaskListTemplate {
+  const item = asRecord(raw);
+  const items = item.items ?? item.Items;
+
+  return {
+    id: readId(item),
+    name: readString(item, "name", "Name"),
+    items: Array.isArray(items) ? items : [],
+  };
+}
+
+export function mapTaskListTemplates(rawItems: unknown[]): TaskListTemplate[] {
+  return rawItems.map(mapTaskListTemplate);
+}
+
+export {
+  mapDispatchChecklistItem,
+  mapDispatchComment,
+  mapDispatchDetail,
+  mapDispatchSignoff,
+  mapDispatchToVendorPayload,
+  mapDispatchWorkOrderRef,
+  mapUpdateDispatchPayload,
+} from "./work-order-dispatch-mapper";
diff --git a/src/domain/work-orders/mappers/work-order-table-row-mapper.ts b/src/domain/work-orders/mappers/work-order-table-row-mapper.ts
new file mode 100644
index 00000000..2f019989
--- /dev/null
+++ b/src/domain/work-orders/mappers/work-order-table-row-mapper.ts
@@ -0,0 +1,449 @@
+import { readAdditionalContacts } from "@/domain/work-orders/mappers/additional-contacts-mapper";
+import { mapApiStatusToWizard } from "@/domain/work-orders/mappers/wizard-draft-mapper";
+import { mapUpliftSummary } from "@/domain/work-orders/mappers/work-order-uplift-mapper";
+import {
+  DOC_STATUS_API,
+  LIFECYCLE_STATUS_API_TO_FE,
+  WORK_ORDER_TYPE_API,
+  WORK_ORDER_TYPE_API_TO_FE,
+} from "@/domain/work-orders/types/work-order-board";
+import type {
+  CompletionDocStatus,
+  WorkOrderFrozenCompany,
+  WorkOrderFrozenPoc,
+  WorkOrderFrozenSite,
+  WorkOrderTableRow,
+  WorkOrderUpliftSummary,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { parseWorkOrderSeverity } from "@/domain/work-orders/types/work-order-severity";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { deriveDayFields } from "@/domain/work-orders/utils/table-day-utils";
+import { formatApptRange } from "@/domain/work-orders/utils/wizard-date-utils";
+import { toDateInputValue } from "@/lib/time-utils";
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readId(record: Record<string, unknown>): string | number {
+  const value = record.id ?? record.Id;
+  if (typeof value === "string" || typeof value === "number") {
+    return value;
+  }
+  return "";
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+  }
+  return "";
+}
+
+function readNumber(record: Record<string, unknown>, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number") {
+      return value;
+    }
+    if (typeof value === "string" && value !== "") {
+      const parsed = Number(value);
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
+    }
+  }
+  return null;
+}
+
+function readBool(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") {
+      return value;
+    }
+  }
+  return false;
+}
+
+function readStringArray(record: Record<string, unknown>, ...keys: string[]): string[] {
+  for (const key of keys) {
+    const value = record[key];
+    if (Array.isArray(value)) {
+      return value
+        .filter((item): item is string => typeof item === "string")
+        .map((item) => item.trim())
+        .filter(Boolean);
+    }
+    if (typeof value === "string" && value.trim()) {
+      try {
+        const parsed: unknown = JSON.parse(value);
+        if (Array.isArray(parsed)) {
+          return parsed
+            .filter((item): item is string => typeof item === "string")
+            .map((item) => item.trim())
+            .filter(Boolean);
+        }
+      } catch {
+        // ignore invalid JSON
+      }
+    }
+  }
+  return [];
+}
+
+function readRowVersion(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" && value.length > 0) {
+      return value;
+    }
+  }
+  return "";
+}
+
+const WO_TYPES_SET = new Set(["PM", "Reactive", "Emergency", "Overdue"]);
+
+function isLegacyAddOnType(record: Record<string, unknown>): boolean {
+  const numeric =
+    readNumber(record, "workOrderType", "WorkOrderType") ?? readNumber(record, "type", "Type");
+  if (numeric === WORK_ORDER_TYPE_API.AddOn) {
+    return true;
+  }
+  const raw = readString(
+    record,
+    "workOrderType",
+    "WorkOrderType",
+    "type",
+    "Type",
+    "woType",
+    "WoType",
+    "source",
+    "Source",
+  );
+  return raw === "AddOn" || raw === "Add-On";
+}
+
+function readIsAddOn(record: Record<string, unknown>): boolean {
+  for (const key of ["isAddOn", "IsAddOn"] as const) {
+    if (!(key in record)) continue;
+    const value = record[key];
+    // Explicit boolean is authoritative; null/undefined fall through to legacy.
+    if (typeof value === "boolean") {
+      return value;
+    }
+    if (value == null) {
+      break;
+    }
+    return Boolean(value);
+  }
+  return isLegacyAddOnType(record);
+}
+
+function readWoType(record: Record<string, unknown>): WOType | "" {
+  const numeric =
+    readNumber(record, "workOrderType", "WorkOrderType") ?? readNumber(record, "type", "Type");
+  if (numeric === WORK_ORDER_TYPE_API.AddOn) {
+    return "";
+  }
+  if (numeric != null && WORK_ORDER_TYPE_API_TO_FE[numeric]) {
+    return WORK_ORDER_TYPE_API_TO_FE[numeric] as WOType;
+  }
+
+  const raw = readString(
+    record,
+    "workOrderType",
+    "WorkOrderType",
+    "type",
+    "Type",
+    "woType",
+    "WoType",
+    "source",
+    "Source",
+  );
+  if (raw === "AddOn" || raw === "Add-On") {
+    return "";
+  }
+  if (WO_TYPES_SET.has(raw)) {
+    return raw as WOType;
+  }
+  return "";
+}
+
+function readDocStatus(record: Record<string, unknown>): CompletionDocStatus {
+  const numeric = readNumber(record, "docStatus", "DocStatus");
+  if (numeric === DOC_STATUS_API.Yes) return "Yes";
+  if (numeric === DOC_STATUS_API.No) return "No";
+  if (numeric === DOC_STATUS_API.NotNeeded) return "NN";
+
+  const raw = readString(record, "docStatus", "DocStatus", "completionDoc", "CompletionDoc");
+  if (raw === "Yes" || raw === "No" || raw === "NN") {
+    return raw;
+  }
+  if (raw === "NotNeeded") {
+    return "NN";
+  }
+  return "";
+}
+
+function readBoardStatus(record: Record<string, unknown>): ReturnType<typeof mapApiStatusToWizard> {
+  const label = readString(record, "lifecycleStatusLabel", "LifecycleStatusLabel");
+  if (label) {
+    return mapApiStatusToWizard(label);
+  }
+
+  const lifecycle = readNumber(record, "lifecycleStatus", "LifecycleStatus");
+  if (lifecycle != null && LIFECYCLE_STATUS_API_TO_FE[lifecycle]) {
+    return mapApiStatusToWizard(LIFECYCLE_STATUS_API_TO_FE[lifecycle]);
+  }
+
+  const legacy = readString(record, "legacyStatus", "LegacyStatus", "status", "Status");
+  return mapApiStatusToWizard(legacy);
+}
+
+function readFlagColor(record: Record<string, unknown>): string | null {
+  for (const key of ["flagColor", "FlagColor"]) {
+    const value = record[key];
+    if (value == null) {
+      continue;
+    }
+    if (typeof value === "string") {
+      const trimmed = value.trim();
+      return trimmed || null;
+    }
+  }
+  return null;
+}
+
+function readUpliftSummary(item: Record<string, unknown>): WorkOrderUpliftSummary | undefined {
+  const nested = asRecord(item.upliftSummary ?? item.UpliftSummary);
+  const hasNested = Object.keys(nested).length > 0;
+  const source = hasNested ? nested : item;
+
+  // Board/search/detail contract (SH-188): pendingUpliftCount is authoritative when present.
+  const boardCount = readNumber(item, "pendingUpliftCount", "PendingUpliftCount");
+  const nestedCount = readNumber(source, "pendingCount", "PendingCount");
+  const pendingCount = nestedCount ?? boardCount ?? 0;
+  const hasUplift =
+    readBool(source, "hasUplift", "HasUplift") ||
+    readBool(item, "hasUplift", "HasUplift") ||
+    pendingCount > 0;
+
+  // No nested summary and no board count → omit (legacy payloads without the contract field).
+  if (!hasNested && boardCount == null && !hasUplift) {
+    return undefined;
+  }
+
+  const summary: WorkOrderUpliftSummary = {
+    hasUplift: hasUplift || pendingCount > 0,
+    pendingCount,
+  };
+  const primaryStatus =
+    readString(nested, "primaryStatus", "PrimaryStatus") ||
+    readString(item, "primaryStatus", "PrimaryStatus");
+  if (primaryStatus) {
+    summary.primaryStatus = primaryStatus;
+  }
+  return summary;
+}
+
+function readHasPendingUplift(
+  item: Record<string, unknown>,
+  upliftSummary: WorkOrderUpliftSummary | undefined,
+): boolean | undefined {
+  if ("hasPendingUplift" in item || "HasPendingUplift" in item) {
+    return Boolean(item.hasPendingUplift ?? item.HasPendingUplift);
+  }
+  const boardCount = readNumber(item, "pendingUpliftCount", "PendingUpliftCount");
+  if (boardCount != null) {
+    return boardCount > 0;
+  }
+  if (upliftSummary != null) {
+    return upliftSummary.pendingCount > 0;
+  }
+  return undefined;
+}
+
+function readPrimaryDispatchStatus(item: Record<string, unknown>): string {
+  return readString(item, "primaryDispatchStatus", "PrimaryDispatchStatus");
+}
+
+function readFrozenSite(item: Record<string, unknown>): WorkOrderFrozenSite | undefined {
+  const source = asRecord(item.frozenSite ?? item.FrozenSite);
+  if (Object.keys(source).length === 0) return undefined;
+  return {
+    code: readString(source, "code", "Code"),
+    label: readString(source, "label", "Label"),
+    address: readString(source, "address", "Address"),
+    city: readString(source, "city", "City"),
+    state: readString(source, "state", "State"),
+    zip: readString(source, "zip", "Zip"),
+    phone: readString(source, "phone", "Phone"),
+    email: readString(source, "email", "Email"),
+    maps: readString(source, "maps", "Maps"),
+  };
+}
+
+function readFrozenCompany(item: Record<string, unknown>): WorkOrderFrozenCompany | undefined {
+  const source = asRecord(item.frozenCompany ?? item.FrozenCompany);
+  if (Object.keys(source).length === 0) return undefined;
+  return {
+    name: readString(source, "name", "Name"),
+    contactName: readString(source, "contactName", "ContactName"),
+    address: readString(source, "address", "Address"),
+    city: readString(source, "city", "City"),
+    state: readString(source, "state", "State"),
+    zip: readString(source, "zip", "Zip"),
+    phone: readString(source, "phone", "Phone"),
+    email: readString(source, "email", "Email"),
+    maps: readString(source, "maps", "Maps"),
+  };
+}
+
+function readFrozenPoc(item: Record<string, unknown>): WorkOrderFrozenPoc | undefined {
+  const source = asRecord(item.frozenPoc ?? item.FrozenPoc);
+  if (Object.keys(source).length === 0) return undefined;
+  const rawContacts = source.contacts ?? source.Contacts;
+  const contacts = Array.isArray(rawContacts)
+    ? rawContacts.map(asRecord).map((contact) => ({
+        name: readString(contact, "name", "Name"),
+        phone: readString(contact, "phone", "Phone"),
+        notes: readString(contact, "notes", "Notes"),
+      }))
+    : [];
+  return {
+    contacts,
+    notes: readString(source, "notes", "Notes"),
+  };
+}
+
+export function mapWorkOrderTableRow(raw: unknown): WorkOrderTableRow {
+  const item = asRecord(raw);
+  const scheduledOn = toDateInputValue(
+    readString(item, "scheduledOn", "scheduledDate", "ScheduledDate", "ScheduledOn"),
+  );
+  // FE day groups use MM/DD keys (week skeleton); ignore BE weekday labels like "monday".
+  const { dayGroup, dayLabel } = deriveDayFields(scheduledOn);
+  const woNumber = readString(
+    item,
+    "woNumber",
+    "internalWONumber",
+    "InternalWONumber",
+    "number",
+    "workOrderNumber",
+    "WorkerOrderNumber",
+  );
+  const site = readString(
+    item,
+    "siteCode",
+    "SiteCode",
+    "site",
+    "Site",
+    "locationCode",
+    "LocationCode",
+  );
+  const location = readString(item, "location", "Location", "locationName", "LocationName");
+  const dispatcherId = readString(
+    item,
+    "dispatcherId",
+    "DispatcherId",
+    "assigneeId",
+    "AssigneeId",
+    "employeeId",
+    "EmployeeId",
+  );
+  const dispatcherName = readString(
+    item,
+    "dispatcherName",
+    "DispatcherName",
+    "assignedTo",
+    "AssignedTo",
+    "employeeName",
+    "EmployeeName",
+    "assignee",
+    "Assignee",
+  );
+  const apptStart = readString(item, "apptStart", "ApptStart", "appointmentStart");
+  const apptEnd = readString(item, "apptEnd", "ApptEnd", "appointmentEnd");
+  const apptTime =
+    readString(item, "apptTime", "ApptTime") ||
+    (apptStart ? formatApptRange(apptStart, apptEnd) : "");
+  const locationIdRaw = item.locationId ?? item.LocationId;
+  const vendorIdNum = readNumber(item, "vendorId", "VendorId");
+  const primaryDispatchId = readNumber(item, "primaryDispatchId", "PrimaryDispatchId");
+  const boardUpliftSummary = readUpliftSummary(item);
+  const hasPendingUplift = readHasPendingUplift(item, boardUpliftSummary);
+  const upliftSummary = boardUpliftSummary == null ? undefined : mapUpliftSummary(item);
+
+  const row: WorkOrderTableRow = {
+    id: readId(item),
+    woNumber,
+    site: site || location.slice(0, 8),
+    type: readWoType(item),
+    severity: parseWorkOrderSeverity(item.severity ?? item.Severity),
+    dispatcherId,
+    dispatcherName,
+    scheduledOn,
+    completedDate: toDateInputValue(
+      readString(item, "completedDate", "CompletedDate", "completedOn", "CompletedOn"),
+    ),
+    targetWeek: toDateInputValue(readString(item, "targetWeek", "TargetWeek")),
+    dayGroup,
+    dayLabel,
+    location,
+    locationId:
+      typeof locationIdRaw === "string" || typeof locationIdRaw === "number" ? locationIdRaw : "",
+    pm: readString(item, "pm", "PM", "problem", "Problem", "service", "Service", "trade", "Trade"),
+    serviceId: readNumber(item, "serviceId", "ServiceId"),
+    serviceNotes: readString(item, "serviceNotes", "ServiceNotes", "pmNote", "PmNote"),
+    extraServices: readStringArray(item, "extraServices", "ExtraServices"),
+    vendorId: vendorIdNum != null ? String(vendorIdNum) : "",
+    company: readString(item, "company", "Company", "vendorName", "VendorName"),
+    primaryDispatchStatus: readPrimaryDispatchStatus(item),
+    tech: readString(item, "techName", "TechName", "tech", "Tech", "technician", "Technician"),
+    techPhone: readString(item, "techPhone", "TechPhone"),
+    apptStart,
+    apptEnd,
+    apptTime,
+    status: readBoardStatus(item),
+    docStatus: readDocStatus(item),
+    pocName: readString(item, "pocName", "PocName", "POCName"),
+    pocPhone: readString(item, "pocPhone", "PocPhone", "POCPhone"),
+    pocNotes: readString(item, "pocNotes", "PocNotes", "POCNotes"),
+    additionalContacts: readAdditionalContacts(item),
+    frozenSite: readFrozenSite(item),
+    frozenCompany: readFrozenCompany(item),
+    frozenPoc: readFrozenPoc(item),
+    dueDate: toDateInputValue(readString(item, "dueDate", "DueDate")),
+    rescheduleCount: readNumber(item, "rescheduleCount", "RescheduleCount") ?? 0,
+    carriedOver: readNumber(item, "carriedOver", "CarriedOver") ?? 0,
+    isAddOn: readIsAddOn(item),
+    avetaRequired: readBool(item, "avetaRequired", "AvetaRequired"),
+    hasAvetaDocument: readBool(item, "hasAvetaDocument", "HasAvetaDocument"),
+    originalWeek: readString(item, "originalWeek", "OriginalWeek"),
+    originalDate: toDateInputValue(readString(item, "originalDate", "OriginalDate")),
+    isPastDue: readBool(item, "isPastDue", "IsPastDue"),
+    scheduleWeekOnly: readBool(item, "scheduleWeekOnly", "ScheduleWeekOnly"),
+    mediaCount: readNumber(item, "mediaCount", "MediaCount") ?? 0,
+    title: readString(item, "title", "Title", "workerOrderTitle", "WorkerOrderTitle"),
+    priority: readString(item, "priority", "Priority"),
+    primaryDispatchId,
+    rowVersion: readRowVersion(item, "rowVersion", "RowVersion"),
+    dispatchRowVersion: readRowVersion(item, "dispatchRowVersion", "DispatchRowVersion"),
+    flagColor: readFlagColor(item),
+    upliftSummary,
+    hasPendingUplift,
+  };
+
+  return row;
+}
+
+export function mapWorkOrderTableRows(rawItems: unknown[]): WorkOrderTableRow[] {
+  return rawItems.map(mapWorkOrderTableRow);
+}
diff --git a/src/domain/work-orders/mappers/work-order-uplift-mapper.ts b/src/domain/work-orders/mappers/work-order-uplift-mapper.ts
new file mode 100644
index 00000000..ec712467
--- /dev/null
+++ b/src/domain/work-orders/mappers/work-order-uplift-mapper.ts
@@ -0,0 +1,158 @@
+import type {
+  UpliftSummary,
+  WorkOrderUplift,
+  WorkOrderUpliftStatus,
+} from "@/domain/work-orders/types/work-order-uplift";
+import { WORK_ORDER_UPLIFT_STATUSES } from "@/domain/work-orders/types/work-order-uplift";
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+  }
+  return "";
+}
+
+function readNumber(record: Record<string, unknown>, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number") {
+      return value;
+    }
+    if (typeof value === "string" && value !== "") {
+      const parsed = Number(value);
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
+    }
+  }
+  return null;
+}
+
+function readBool(record: Record<string, unknown>, ...keys: string[]): boolean {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "boolean") {
+      return value;
+    }
+  }
+  return false;
+}
+
+function readId(record: Record<string, unknown>): string | number {
+  const value = record.id ?? record.Id;
+  if (typeof value === "string" || typeof value === "number") {
+    return value;
+  }
+  return "";
+}
+
+function readOptionalId(
+  record: Record<string, unknown>,
+  ...keys: string[]
+): string | number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" || typeof value === "number") {
+      return value;
+    }
+  }
+  return null;
+}
+
+const STATUS_SET = new Set<string>(WORK_ORDER_UPLIFT_STATUSES);
+
+function normalizeUpliftStatus(raw: string): WorkOrderUpliftStatus {
+  const normalized = raw.trim().toLowerCase().replace(/\s+/g, "_");
+  if (STATUS_SET.has(normalized)) {
+    return normalized as WorkOrderUpliftStatus;
+  }
+  if (normalized === "canceled") {
+    return "cancelled";
+  }
+  if (normalized === "autoapproved") {
+    return "auto_approved";
+  }
+  return "pending";
+}
+
+export function mapUpliftSummary(raw: unknown): UpliftSummary {
+  const item = asRecord(raw);
+  const nested = asRecord(item.upliftSummary ?? item.UpliftSummary);
+  const hasNested = Object.keys(nested).length > 0;
+  const source = hasNested ? nested : item;
+
+  const pendingCount =
+    readNumber(source, "pendingCount", "PendingCount") ??
+    readNumber(item, "pendingUpliftCount", "PendingUpliftCount") ??
+    0;
+  const hasUplift =
+    readBool(source, "hasUplift", "HasUplift") ||
+    readBool(item, "hasUplift", "HasUplift") ||
+    pendingCount > 0;
+
+  // Never treat the work-order lifecycle status/Status as uplift primaryStatus.
+  const primaryStatusRaw = hasNested
+    ? readString(source, "primaryStatus", "PrimaryStatus", "status", "Status")
+    : readString(item, "primaryStatus", "PrimaryStatus");
+  const amount = hasNested
+    ? readNumber(source, "amount", "Amount")
+    : readNumber(item, "amount", "Amount");
+
+  const summary: UpliftSummary = {
+    hasUplift,
+    pendingCount,
+  };
+
+  if (primaryStatusRaw) {
+    summary.primaryStatus = normalizeUpliftStatus(primaryStatusRaw);
+  }
+  if (amount != null) {
+    summary.amount = amount;
+  }
+
+  return summary;
+}
+
+export function mapWorkOrderUplift(raw: unknown): WorkOrderUplift {
+  const item = asRecord(raw);
+  const statusRaw = readString(item, "status", "Status");
+
+  return {
+    id: readId(item),
+    status: statusRaw ? normalizeUpliftStatus(statusRaw) : "pending",
+    amount: readNumber(item, "amount", "Amount", "requestedNTE", "RequestedNTE") ?? 0,
+    notes: readString(item, "notes", "Notes", "vendorReason", "VendorReason"),
+    requestedAt: readString(item, "requestedAt", "RequestedAt"),
+    requestedById: readOptionalId(
+      item,
+      "requestedById",
+      "RequestedById",
+      "requesterId",
+      "RequesterId",
+    ),
+    requestedByName: readString(
+      item,
+      "requestedByName",
+      "RequestedByName",
+      "requestedByVendorName",
+      "RequestedByVendorName",
+    ),
+    decidedAt: readString(item, "decidedAt", "DecidedAt"),
+    decidedByName: readString(item, "decidedByName", "DecidedByName"),
+    decisionNote: readString(item, "decisionNote", "DecisionNote"),
+  };
+}
+
+export function mapWorkOrderUplifts(rawItems: unknown[]): WorkOrderUplift[] {
+  return rawItems.map(mapWorkOrderUplift);
+}
diff --git a/src/domain/work-orders/mappers/work-order-vendor-mapper.ts b/src/domain/work-orders/mappers/work-order-vendor-mapper.ts
new file mode 100644
index 00000000..667309aa
--- /dev/null
+++ b/src/domain/work-orders/mappers/work-order-vendor-mapper.ts
@@ -0,0 +1,61 @@
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readId(record: Record<string, unknown>): string | number {
+  const value = record.id ?? record.Id;
+  if (typeof value === "string" || typeof value === "number") {
+    return value;
+  }
+  return "";
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+  }
+  return "";
+}
+
+function readNumber(record: Record<string, unknown>, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number") {
+      return value;
+    }
+    if (typeof value === "string" && value !== "") {
+      const parsed = Number(value);
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
+    }
+  }
+  return null;
+}
+
+export function mapVendorDropdownItem(raw: unknown): VendorDropdownItem {
+  const item = asRecord(raw);
+  const email = readString(item, "email", "Email");
+
+  return {
+    id: readId(item),
+    companyName: readString(item, "companyName", "CompanyName"),
+    contactName: readString(item, "contactName", "ContactName"),
+    tradeSpecialties: readString(item, "tradeSpecialties", "TradeSpecialties"),
+    address: readString(item, "address", "Address"),
+    distanceMiles: readNumber(item, "distanceMiles", "DistanceMiles"),
+    email: email || undefined,
+  };
+}
+
+export function mapVendorDropdownItems(rawItems: unknown[]): VendorDropdownItem[] {
+  return rawItems.map(mapVendorDropdownItem);
+}
diff --git a/src/domain/work-orders/mocks/is-wo-wizard-mock-enabled.ts b/src/domain/work-orders/mocks/is-wo-wizard-mock-enabled.ts
new file mode 100644
index 00000000..c7cd240b
--- /dev/null
+++ b/src/domain/work-orders/mocks/is-wo-wizard-mock-enabled.ts
@@ -0,0 +1,9 @@
+import { env } from "@/lib/env";
+
+export function isWoWizardMockEnabled(): boolean {
+  return env.isDev;
+}
+
+export function shouldUseMockWoWizardCreate(locationId: string): boolean {
+  return env.isDev && locationId.startsWith("mock-");
+}
diff --git a/src/domain/work-orders/mocks/wo-wizard-mock-data.ts b/src/domain/work-orders/mocks/wo-wizard-mock-data.ts
new file mode 100644
index 00000000..da2e8063
--- /dev/null
+++ b/src/domain/work-orders/mocks/wo-wizard-mock-data.ts
@@ -0,0 +1,164 @@
+import type { Location } from "@/domain/locations/types/location";
+import type { DropdownOption } from "@/domain/settings/dropdown-options/types/dropdown-option";
+import type {
+  LocationOption,
+  VendorDropdownItem,
+  WorkOrderDetail,
+  WorkOrderFormValues,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+
+export const MOCK_WO_WIZARD_USERS: WorkOrderUser[] = [
+  { id: "mock-user-1", name: "Alex Rivera" },
+  { id: "mock-user-2", name: "Jordan Kim" },
+  { id: "mock-user-3", name: "Sam Patel" },
+];
+
+export const MOCK_WO_WIZARD_LOCATIONS: LocationOption[] = [
+  { id: "mock-loc-1", name: "CHI-1042 — Chicago Loop" },
+  { id: "mock-loc-2", name: "IND-2208 — Indianapolis North" },
+  { id: "mock-loc-3", name: "MIL-3315 — Milwaukee West" },
+];
+
+const MOCK_LOCATION_DETAILS: Record<string, Location> = {
+  "mock-loc-1": {
+    id: "mock-loc-1",
+    name: "CHI-1042 — Chicago Loop",
+    address: "233 S Wacker Dr",
+    city: "Chicago",
+    state: "IL",
+    zipCode: "60606",
+    phone: "(312) 555-0142",
+    contact: "Maria Gonzalez",
+    contactEmail: "maria.gonzalez@example.com",
+    status: "Active",
+  },
+  "mock-loc-2": {
+    id: "mock-loc-2",
+    name: "IND-2208 — Indianapolis North",
+    address: "8702 Keystone Crossing",
+    city: "Indianapolis",
+    state: "IN",
+    zipCode: "46240",
+    phone: "(317) 555-2208",
+    contact: "Chris Bennett",
+    contactEmail: "chris.bennett@example.com",
+    status: "Active",
+  },
+  "mock-loc-3": {
+    id: "mock-loc-3",
+    name: "MIL-3315 — Milwaukee West",
+    address: "411 E Wisconsin Ave",
+    city: "Milwaukee",
+    state: "WI",
+    zipCode: "53202",
+    phone: "(414) 555-3315",
+    contact: "Taylor Brooks",
+    contactEmail: "taylor.brooks@example.com",
+    status: "Active",
+  },
+};
+
+export const MOCK_WO_WIZARD_SERVICES: DropdownOption[] = [
+  {
+    id: "mock-svc-1",
+    category: "Problem",
+    value: "HVAC — Quarterly PM",
+    parentValue: null,
+    sortOrder: 1,
+    isActive: true,
+  },
+  {
+    id: "mock-svc-2",
+    category: "Problem",
+    value: "Plumbing — Leak repair",
+    parentValue: null,
+    sortOrder: 2,
+    isActive: true,
+  },
+  {
+    id: "mock-svc-3",
+    category: "Problem",
+    value: "Electrical — Panel inspection",
+    parentValue: null,
+    sortOrder: 3,
+    isActive: true,
+  },
+  {
+    id: "mock-svc-4",
+    category: "Problem",
+    value: "Roof — Membrane patch",
+    parentValue: null,
+    sortOrder: 4,
+    isActive: true,
+  },
+];
+
+export const MOCK_WO_WIZARD_VENDORS: VendorDropdownItem[] = [
+  {
+    id: "mock-vendor-1",
+    companyName: "Midwest HVAC Co.",
+    contactName: "Casey Ortega",
+    tradeSpecialties: "HVAC",
+    address: "1200 Industrial Pkwy, Chicago, IL 60632",
+    distanceMiles: 4.2,
+  },
+  {
+    id: "mock-vendor-2",
+    companyName: "Great Lakes Plumbing",
+    contactName: "Riley Quinn",
+    tradeSpecialties: "Plumbing",
+    address: "455 Water St, Milwaukee, WI 53202",
+    distanceMiles: 8.7,
+  },
+  {
+    id: "mock-vendor-3",
+    companyName: "SparkLine Electric",
+    contactName: "Morgan Lee",
+    tradeSpecialties: "Electrical",
+    address: "88 Volt Ave, Indianapolis, IN 46225",
+    distanceMiles: 12.1,
+  },
+];
+
+export function getMockWoWizardLocationDetail(locationId: string): Location | undefined {
+  return MOCK_LOCATION_DETAILS[locationId];
+}
+
+export function buildMockWorkOrderDetail(values: WorkOrderFormValues): WorkOrderDetail {
+  const id = `mock-wo-${Date.now()}`;
+  const now = new Date().toISOString();
+
+  return {
+    id,
+    internalWONumber: values.internalWONumber || id,
+    workOrderNumber: values.workOrderNumber || "MOCK-0001",
+    title: values.title || "Mock Work Order",
+    location:
+      MOCK_WO_WIZARD_LOCATIONS.find((l) => String(l.id) === values.locationId)?.name ?? "Mock Site",
+    locationId: values.locationId,
+    locationZip: getMockWoWizardLocationDetail(values.locationId)?.zipCode ?? "",
+    assignedTo: values.assignedTo,
+    dueDate: values.dueDate,
+    createdDate: values.createdDate,
+    createdDateFull: now,
+    description: values.description,
+    priority: values.priority,
+    status: values.status,
+    po: values.po,
+    tt: values.tt,
+    problem: values.problem,
+    trade: values.trade,
+    subTrade: values.subTrade,
+    vendorNTE: values.vendorNTE,
+    scheduledDate: values.scheduledDate,
+    completedDate: values.completedDate,
+    source: values.source,
+    type: "",
+    docStatus: values.docStatus ?? "",
+    mediaCount: 0,
+    comments: [],
+    auditLog: [],
+    dispatches: [],
+  };
+}
diff --git a/src/domain/work-orders/schemas/work-order-schema.ts b/src/domain/work-orders/schemas/work-order-schema.ts
new file mode 100644
index 00000000..f965eddd
--- /dev/null
+++ b/src/domain/work-orders/schemas/work-order-schema.ts
@@ -0,0 +1,38 @@
+import { z } from "zod";
+import {
+  WORK_ORDER_PRIORITY_OPTIONS,
+  WORK_ORDER_STATUS_OPTIONS,
+} from "@/domain/work-orders/types/work-order";
+
+export const workOrderFormSchema = z.object({
+  internalWONumber: z.string(),
+  workOrderNumber: z.string(),
+  title: z.string().min(1, "Title is required"),
+  locationId: z.string().min(1, "Location is required"),
+  priority: z
+    .string()
+    .min(1, "Priority is required")
+    .refine(
+      (value) =>
+        WORK_ORDER_PRIORITY_OPTIONS.includes(value as (typeof WORK_ORDER_PRIORITY_OPTIONS)[number]),
+      "Priority is required",
+    ),
+  status: z.enum(WORK_ORDER_STATUS_OPTIONS),
+  createdDate: z.string().min(1, "Created date is required"),
+  dueDate: z.string(),
+  scheduledDate: z.string(),
+  completedDate: z.string(),
+  assignedTo: z.string(),
+  description: z.string(),
+  po: z.string(),
+  tt: z.string(),
+  problem: z.string(),
+  trade: z.string(),
+  subTrade: z.string(),
+  vendorNTE: z.string(),
+  source: z.string(),
+  contactIds: z.array(z.number()).optional(),
+  categoryIds: z.array(z.number()).optional(),
+});
+
+export type WorkOrderFormSchemaValues = z.infer<typeof workOrderFormSchema>;
diff --git a/src/domain/work-orders/types/completion-doc.ts b/src/domain/work-orders/types/completion-doc.ts
new file mode 100644
index 00000000..e68685a4
--- /dev/null
+++ b/src/domain/work-orders/types/completion-doc.ts
@@ -0,0 +1,48 @@
+import type { ElementType } from "react";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+
+export interface CompDocData {
+  notes: string;
+  generatedAt?: string;
+}
+
+export interface DocFields {
+  street: string;
+  city: string;
+  state: string;
+  zip: string;
+  dateCompleted: string;
+  amazonRep: string;
+  seaRep: string;
+  siteCode: string;
+  tech: string;
+  company: string;
+}
+
+export type DocState = "draft" | "generated" | "not-required";
+
+export interface CompletionDocStateConfig {
+  pillLabel: string;
+  pillBg: string;
+  pillText: string;
+  cardBg: string;
+  cardBorder: string;
+  cardIconBg: string;
+  iconColor: string;
+  cardTitle: string;
+  icon: ElementType;
+}
+
+export interface CompDocSiteInfo {
+  code: string;
+  street: string;
+  city: string;
+  state: string;
+  zip: string;
+  label: string;
+  fullAddress: string;
+  tech: string;
+  company: string;
+}
+
+export type CompDocSaveStatus = Exclude<CompletionDocStatus, "">;
diff --git a/src/domain/work-orders/types/dispatch.ts b/src/domain/work-orders/types/dispatch.ts
new file mode 100644
index 00000000..9054fc01
--- /dev/null
+++ b/src/domain/work-orders/types/dispatch.ts
@@ -0,0 +1,98 @@
+export interface WorkOrderDispatchSummary {
+  id: string | number;
+  vendorId: string | number;
+  dispatchNumber: string;
+  poNumber: string;
+  vendorName: string;
+  vendorEmail: string;
+  nteAmount: number | null;
+  status: string;
+  dispatchedAt: string;
+  estimatedArrivalAt: string;
+  etaManualOverride: boolean;
+}
+
+export interface WorkOrderVendorUpdatePayload {
+  workOrderId: number;
+  contactName?: string;
+  phone?: string;
+  email?: string;
+  notes?: string;
+}
+
+export interface DispatchChecklistItem {
+  id: string | number;
+  itemText: string;
+  isCompleted: boolean;
+  completedBy: string | null;
+  completedAt: string | null;
+}
+
+export interface DispatchSignoff {
+  id: string | number;
+  signoffType: string;
+  name: string;
+  signature: string;
+  signatureMethod: string;
+  signedAt: string;
+}
+
+export interface DispatchComment {
+  id: string | number;
+  createdDate: string;
+  commenttext: string;
+  userName: string;
+  commenter: string | null;
+}
+
+export interface DispatchWorkOrderRef {
+  id: string | number;
+  woNumber: string;
+}
+
+export interface DispatchDetail {
+  id: string | number;
+  dispatchNumber: string;
+  poNumber: string;
+  vendorName: string;
+  vendorEmail: string;
+  woNumber: string;
+  status: string;
+  nteAmount: number | null;
+  scheduledDate: string;
+  estimatedArrivalAt: string;
+  etaManualOverride: boolean;
+  completedDate: string;
+  description: string;
+  dispatchedAt: string;
+  acknowledgedAt: string;
+  verifiedAt: string;
+  verifiedBy: string;
+  checklistItems: DispatchChecklistItem[];
+  signoffs: DispatchSignoff[];
+  comments: DispatchComment[];
+  workOrders: DispatchWorkOrderRef[];
+}
+
+export interface DispatchToVendorPayload {
+  workOrderIds: (string | number)[];
+  vendorIds: (string | number)[];
+  nteAmount: number | null;
+  scheduledDate: string | null;
+  estimatedArrivalAt?: string | null;
+  etaManualOverride?: boolean;
+  description: string;
+  taskListTemplateId: number | null;
+  customChecklistItems: string[] | null;
+}
+
+export interface UpdateDispatchPayload {
+  id: string | number;
+  status: string;
+  nteAmount: number | null;
+  scheduledDate: string | null;
+  estimatedArrivalAt?: string | null;
+  etaManualOverride?: boolean;
+  completedDate: string | null;
+  description: string;
+}
diff --git a/src/domain/work-orders/types/work-order-additional-contact.ts b/src/domain/work-orders/types/work-order-additional-contact.ts
new file mode 100644
index 00000000..dd5d7abf
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-additional-contact.ts
@@ -0,0 +1,11 @@
+export interface WorkOrderAdditionalContact {
+  name: string;
+  phone: string;
+  notes?: string;
+}
+
+export const EMPTY_ADDITIONAL_CONTACT: WorkOrderAdditionalContact = {
+  name: "",
+  phone: "",
+  notes: "",
+};
diff --git a/src/domain/work-orders/types/work-order-advanced-filters.ts b/src/domain/work-orders/types/work-order-advanced-filters.ts
new file mode 100644
index 00000000..c187aee8
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-advanced-filters.ts
@@ -0,0 +1,107 @@
+import { ASSIGNEE_FILTER_UNASSIGNED } from "./work-order-list";
+import type { WorkOrderSeverity } from "./work-order-severity";
+import type { UpliftFilterStatus } from "./work-order-uplift-filter";
+import {
+  ALL_WIZARD_STATUSES,
+  WO_TYPE_META,
+  WO_TYPES,
+  type WizardWOStatus,
+  type WOType,
+} from "./work-order-wizard";
+
+export { ASSIGNEE_FILTER_UNASSIGNED };
+
+export type DateRangeKey =
+  | "this-week"
+  | "last-week"
+  | "this-month"
+  | "last-3-months"
+  | "next-week"
+  | "next-month"
+  | "custom";
+
+export type CompletionDocFilter = "No" | "Yes" | "NN";
+
+export interface WorkOrderAdvancedFilters {
+  dateRange: DateRangeKey;
+  customFrom: string;
+  customTo: string;
+  /** invariant: independent of DateRangeKey; never sent as datePreset=Unscheduled. */
+  unscheduledOnly: boolean;
+  sites: Set<string>;
+  types: Set<WOType>;
+  severities: Set<WorkOrderSeverity>;
+  dispatchers: Set<string>;
+  regions: Set<string>;
+  statuses: Set<WizardWOStatus>;
+  rescheduled: boolean;
+  carriedOver: boolean;
+  addOn: boolean;
+  avetaOnly: boolean;
+  pmTypes: Set<string>;
+  vendorTechs: Set<string>;
+  docs: Set<CompletionDocFilter>;
+  flagColors: Set<string>;
+  internalOnly: boolean;
+  hasUplift: boolean;
+  upliftStatuses: Set<UpliftFilterStatus>;
+}
+
+export const EMPTY_ADVANCED_FILTERS: WorkOrderAdvancedFilters = {
+  dateRange: "this-week",
+  customFrom: "",
+  customTo: "",
+  unscheduledOnly: false,
+  sites: new Set(),
+  types: new Set(),
+  severities: new Set(),
+  dispatchers: new Set(),
+  regions: new Set(),
+  statuses: new Set(),
+  rescheduled: false,
+  carriedOver: false,
+  addOn: false,
+  avetaOnly: false,
+  pmTypes: new Set(),
+  vendorTechs: new Set(),
+  docs: new Set(),
+  flagColors: new Set(),
+  internalOnly: false,
+  hasUplift: false,
+  upliftStatuses: new Set(),
+};
+
+export const DATE_RANGE_OPTIONS: { key: DateRangeKey; label: string }[] = [
+  { key: "this-week", label: "This week" },
+  { key: "last-week", label: "Last week" },
+  { key: "this-month", label: "This month" },
+  { key: "last-3-months", label: "Last 3 months" },
+  { key: "next-week", label: "Next week" },
+  { key: "next-month", label: "Next month" },
+  { key: "custom", label: "Custom" },
+];
+
+export const DOC_FILTER_LABELS: Record<CompletionDocFilter, string> = {
+  No: "Pending",
+  Yes: "Uploaded",
+  NN: "N/N",
+};
+
+export const COMPLETION_DOC_OPTIONS: CompletionDocFilter[] = ["No", "Yes", "NN"];
+
+export const WO_TYPE_DESCRIPTIONS: Record<WOType, string> = Object.fromEntries(
+  WO_TYPES.map((type) => [type, WO_TYPE_META[type].desc]),
+) as Record<WOType, string>;
+
+export { ALL_WIZARD_STATUSES, WO_TYPES };
+
+export type AdvancedFilterSetKey =
+  | "sites"
+  | "types"
+  | "dispatchers"
+  | "regions"
+  | "statuses"
+  | "pmTypes"
+  | "vendorTechs"
+  | "docs"
+  | "flagColors";
diff --git a/src/domain/work-orders/types/work-order-board-detail.ts b/src/domain/work-orders/types/work-order-board-detail.ts
new file mode 100644
index 00000000..06cf70e3
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-board-detail.ts
@@ -0,0 +1,176 @@
+import type { WorkOrderAuditEntry, WorkOrderComment } from "./work-order-detail";
+import type { WorkOrderAdditionalContact } from "./work-order-additional-contact";
+import type { CompletionDocStatus, WorkOrderTableRow } from "./work-order-table-row";
+
+/** API media.category: 1=Before, 2=After, 3=Extra, 4=Completion, 5=Aveta */
+export const BOARD_MEDIA_CATEGORY_API = {
+  Before: 1,
+  After: 2,
+  Extra: 3,
+  Completion: 4,
+  Aveta: 5,
+} as const;
+
+export type BoardMediaCategoryApi =
+  (typeof BOARD_MEDIA_CATEGORY_API)[keyof typeof BOARD_MEDIA_CATEGORY_API];
+
+export type BoardMediaCategory = "Before" | "After" | "Extra" | "Completion" | "Aveta";
+
+export interface WorkOrderBoardDetailInfoApi {
+  id: number;
+  woNumber?: string | null;
+  rescheduleCount?: number;
+  carriedOver?: number;
+  workOrderType?: number | null;
+  isPastDue?: boolean;
+  siteCode?: string | null;
+  locationName?: string | null;
+  pocName?: string | null;
+  pocPhone?: string | null;
+  pocNotes?: string | null;
+  additionalContacts?: WorkOrderAdditionalContact[] | null;
+  lifecycleStatus?: number | null;
+  lifecycleStatusLabel?: string | null;
+  legacyStatus?: string | null;
+  dispatcherId?: string | null;
+  dispatcherName?: string | null;
+  initials?: string | null;
+  color?: string | null;
+  dueDate?: string | null;
+  scheduledDate?: string | null;
+  targetWeek?: string | null;
+  scheduleWeekOnly?: boolean | null;
+  dayGroup?: string | null;
+  vendorId?: number | null;
+  vendorName?: string | null;
+  primaryDispatchStatus?: string | null;
+  techName?: string | null;
+  techPhone?: string | null;
+  apptDate?: string | null;
+  apptTime?: string | null;
+  pm?: string | null;
+  serviceNotes?: string | null;
+  extraServices?: string[] | null;
+  /** Per-WO Aveta compliance flag (Service & Notes). */
+  avetaRequired?: boolean | null;
+  /** True when an Extra Docs file is categorized Aveta. */
+  hasAvetaDocument?: boolean | null;
+  docStatus?: number | null;
+  flagColor?: string | null;
+  primaryDispatchId?: number | null;
+  rowVersion?: string | null;
+  dispatchRowVersion?: string | null;
+  description?: string | null;
+  trade?: string | null;
+  problem?: string | null;
+  subTrade?: string | null;
+  originalWeek?: string | null;
+  originalDate?: string | null;
+  completedDate?: string | null;
+  vendorNotes?: string | null;
+}
+
+export interface WorkOrderBoardCompletionTemplateApi {
+  id: number;
+  name?: string | null;
+  serviceKey?: string | null;
+  workOrderType?: number | null;
+  templateUrl?: string | null;
+  isActive?: boolean | null;
+}
+
+export interface WorkOrderBoardDispatchSignoffApi {
+  dispatchId?: number | null;
+  signoffType?: string | null;
+  name?: string | null;
+  signedAt?: string | null;
+}
+
+export interface WorkOrderBoardCompletionApi {
+  docStatus?: number | null;
+  template?: WorkOrderBoardCompletionTemplateApi | null;
+  signOffName?: string | null;
+  signOffAttachment?: string | null;
+  signOffSignature?: string | null;
+  dispatchSignoffs?: WorkOrderBoardDispatchSignoffApi[] | null;
+}
+
+export interface WorkOrderBoardDetailCommentApi {
+  id?: number | null;
+  authorId?: string | null;
+  authorName?: string | null;
+  text?: string | null;
+  time?: string | null;
+  documents?: unknown;
+  mentions?: string[] | null;
+}
+
+export interface WorkOrderBoardDetailAuditApi {
+  type?: string | null;
+  dispatcherId?: string | null;
+  action?: string | null;
+  fieldName?: string | null;
+  oldValue?: string | null;
+  newValue?: string | null;
+  time?: string | null;
+  dispatchId?: number | null;
+}
+
+export interface WorkOrderBoardDetailMediaApi {
+  id?: number | null;
+  category?: number | null;
+  url?: string | null;
+  fileName?: string | null;
+  uploadedAt?: string | null;
+  isLegacy?: boolean | null;
+}
+
+export interface WorkOrderBoardDetailApi {
+  info: WorkOrderBoardDetailInfoApi;
+  completion?: WorkOrderBoardCompletionApi | null;
+  comments?: WorkOrderBoardDetailCommentApi[] | null;
+  audit?: WorkOrderBoardDetailAuditApi[] | null;
+  media?: WorkOrderBoardDetailMediaApi[] | null;
+}
+
+export interface WorkOrderBoardCompletionTemplate {
+  id: number;
+  name: string;
+  serviceKey: string;
+  workOrderType: number | null;
+  templateUrl: string;
+  isActive: boolean;
+}
+
+export interface WorkOrderBoardDispatchSignoff {
+  dispatchId: number | null;
+  signoffType: string;
+  name: string;
+  signedAt: string;
+}
+
+export interface WorkOrderBoardCompletion {
+  docStatus: CompletionDocStatus;
+  template: WorkOrderBoardCompletionTemplate | null;
+  signOffName: string;
+  signOffAttachment: string;
+  signOffSignature: string;
+  dispatchSignoffs: WorkOrderBoardDispatchSignoff[];
+}
+
+export interface WorkOrderBoardMediaItem {
+  id: string;
+  category: BoardMediaCategory;
+  url: string;
+  fileName: string;
+  uploadedAt: string;
+  isLegacy: boolean;
+}
+
+export interface WorkOrderBoardDetail {
+  info: WorkOrderTableRow;
+  completion: WorkOrderBoardCompletion;
+  comments: WorkOrderComment[];
+  audit: WorkOrderAuditEntry[];
+  media: WorkOrderBoardMediaItem[];
+}
diff --git a/src/domain/work-orders/types/work-order-board-patch.ts b/src/domain/work-orders/types/work-order-board-patch.ts
new file mode 100644
index 00000000..29f0edd2
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-board-patch.ts
@@ -0,0 +1,8 @@
+/** Payload for PATCH /workorders/{id}/board (one field per request). */
+export interface WorkOrderBoardPatchPayload {
+  field: string;
+  value?: string | null;
+  workOrderVersion: string;
+  dispatchVersion?: string | null;
+  primaryDispatchId?: number | null;
+}
diff --git a/src/domain/work-orders/types/work-order-board.ts b/src/domain/work-orders/types/work-order-board.ts
new file mode 100644
index 00000000..ef12e1ba
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-board.ts
@@ -0,0 +1,330 @@
+import type { DateRangeKey } from "./work-order-advanced-filters";
+import type { WorkOrderAdditionalContact } from "./work-order-additional-contact";
+import type {
+  WorkOrderFrozenCompany,
+  WorkOrderFrozenPoc,
+  WorkOrderFrozenSite,
+  WorkOrderTableRow,
+} from "./work-order-table-row";
+import type { WizardWOStatus, WOType } from "./work-order-wizard";
+
+/** Numeric WorkOrderType enum as expected by POST /workorders/board (no string enums). */
+export const WORK_ORDER_TYPE_API = {
+  PO: 1,
+  PM: 2,
+  Emergency: 3,
+  Project: 4,
+  Inspection: 5,
+  Reactive: 6,
+  AddOn: 7,
+  Other: 99,
+} as const;
+
+export type WorkOrderTypeApi = (typeof WORK_ORDER_TYPE_API)[keyof typeof WORK_ORDER_TYPE_API];
+
+/** Numeric DocStatus enum. */
+export const DOC_STATUS_API = {
+  Yes: 1,
+  No: 2,
+  NotNeeded: 3,
+} as const;
+
+export type DocStatusApi = (typeof DOC_STATUS_API)[keyof typeof DOC_STATUS_API];
+
+/** Numeric LifecycleStatus enum aligned with SHOC board. */
+export const LIFECYCLE_STATUS_API = {
+  Incomplete: 1,
+  Pending: 2,
+  Scheduled: 3,
+  "En Route": 4,
+  "On Site": 5,
+  "In Progress": 6,
+  Completed: 7,
+  Rescheduled: 8,
+  Canceled: 9,
+  "Pending Quote": 10,
+} as const;
+
+export type LifecycleStatusApi = (typeof LIFECYCLE_STATUS_API)[keyof typeof LIFECYCLE_STATUS_API];
+
+/** Non-terminal lifecycle statuses for the global Unassigned queue (SH-165). */
+export const NON_TERMINAL_LIFECYCLE_STATUSES: LifecycleStatusApi[] = [
+  LIFECYCLE_STATUS_API.Incomplete,
+  LIFECYCLE_STATUS_API.Pending,
+  LIFECYCLE_STATUS_API.Scheduled,
+  LIFECYCLE_STATUS_API["En Route"],
+  LIFECYCLE_STATUS_API["On Site"],
+  LIFECYCLE_STATUS_API["In Progress"],
+  LIFECYCLE_STATUS_API.Rescheduled,
+  LIFECYCLE_STATUS_API["Pending Quote"],
+];
+
+/** Maps API type enums to selectable FE types. Legacy AddOn(7) is not a type. */
+export const WORK_ORDER_TYPE_API_TO_FE: Record<number, WOType | ""> = {
+  [WORK_ORDER_TYPE_API.PM]: "PM",
+  [WORK_ORDER_TYPE_API.Reactive]: "Reactive",
+  [WORK_ORDER_TYPE_API.Emergency]: "Emergency",
+};
+
+export const LIFECYCLE_STATUS_API_TO_FE: Record<number, WizardWOStatus | "Canceled"> = {
+  [LIFECYCLE_STATUS_API.Incomplete]: "Incomplete",
+  [LIFECYCLE_STATUS_API.Pending]: "Pending",
+  [LIFECYCLE_STATUS_API.Scheduled]: "Scheduled",
+  [LIFECYCLE_STATUS_API["En Route"]]: "En Route",
+  [LIFECYCLE_STATUS_API["On Site"]]: "On Site",
+  [LIFECYCLE_STATUS_API["In Progress"]]: "In Progress",
+  [LIFECYCLE_STATUS_API.Completed]: "Completed",
+  [LIFECYCLE_STATUS_API.Rescheduled]: "Rescheduled",
+  [LIFECYCLE_STATUS_API.Canceled]: "Canceled",
+  [LIFECYCLE_STATUS_API["Pending Quote"]]: "Pending Quote",
+};
+
+export interface WorkOrderBoardCreatePayload {
+  workOrderType: WorkOrderTypeApi;
+  siteCode: string;
+  /** Lifecycle status selected in the wizard; numeric board enum. */
+  lifecycleStatus?: LifecycleStatusApi;
+  woNumber?: string;
+  assignTo?: string;
+  dueDate?: string;
+  scheduledDate?: string;
+  targetWeek?: string;
+  scheduleWeekOnly?: boolean;
+  /**
+   * Create-time Add-On hint only. Backend recalculates on schedule change/clear
+   * and owns audit (SH-184); FE must consume returned `isAddOn` afterward.
+   */
+  isAddOn?: boolean;
+  vendorId?: number;
+  apptDate?: string;
+  apptTime?: string;
+  docStatus?: DocStatusApi;
+  /** Legacy/general text only — do not embed POC/vendor/service notes here. */
+  description?: string;
+  /** @deprecated Prefer `primaryService`. Kept for temporary API compat. */
+  trade?: string;
+  /** Primary service label; persisted as board `pm`. */
+  primaryService?: string;
+  /** Registry service identity; the backend validates active/type-compatible selections. */
+  serviceId?: string | number;
+  /** Services beyond primary; order preserved. */
+  extraServices?: string[];
+  /** Issue detail from Service & Notes (`pmNote` in draft). */
+  serviceNotes?: string;
+  /** Per-WO Aveta compliance flag from Service & Notes. */
+  avetaRequired?: boolean;
+  locationId?: number;
+  pocContactId?: number;
+  pocName?: string;
+  pocPhone?: string;
+  pocNotes?: string;
+  additionalContacts?: WorkOrderAdditionalContact[];
+  techPhone?: string;
+  vendorNotes?: string;
+  /** Severity 1–5 for Emergency/Reactive. */
+  severity?: number;
+}
+
+/** Payload for PATCH /workorders/{id}/board (one field per request). */
+export interface WorkOrderBoardPatchPayload {
+  field: string;
+  value?: string | null;
+  workOrderVersion: string;
+  dispatchVersion?: string | null;
+  primaryDispatchId?: number | null;
+}
+
+export type WorkOrderBoardEditableField =
+  | "woNumber"
+  | "workOrderType"
+  | "siteCode"
+  | "lifecycleStatus"
+  | "assignTo"
+  | "dueDate"
+  | "scheduledDate"
+  | "targetWeek"
+  | "scheduleWeekOnly"
+  | "vendorId"
+  | "apptDate"
+  | "apptTime"
+  | "docStatus"
+  | "completedDate"
+  | "pm"
+  | "serviceNotes"
+  | "avetaRequired"
+  | "extraServices"
+  | "flagColor"
+  | "additionalContacts"
+  | "severity";
+
+/** Espelha WorkOrderBoardRowDto (JSON camelCase). */
+export interface WorkOrderBoardRowApi {
+  id: number;
+  woNumber?: string | null;
+  rescheduleCount?: number;
+  carriedOver?: number;
+  /** Backend-authoritative Add-On indicator (SH-184; recalculated on schedule). */
+  isAddOn?: boolean | null;
+  /** Per-WO Aveta compliance flag (Service & Notes). */
+  avetaRequired?: boolean | null;
+  /** True when an Extra Docs file is categorized Aveta. */
+  hasAvetaDocument?: boolean | null;
+  /** Original schedule snapshot for Reschedule hover history. */
+  originalDate?: string | null;
+  originalWeek?: string | null;
+  workOrderType?: number | null;
+  serviceId?: number | null;
+  isPastDue?: boolean;
+  siteCode?: string | null;
+  locationName?: string | null;
+  pocName?: string | null;
+  pocPhone?: string | null;
+  pocNotes?: string | null;
+  additionalContacts?: WorkOrderAdditionalContact[] | null;
+  frozenSite?: WorkOrderFrozenSite | null;
+  frozenCompany?: WorkOrderFrozenCompany | null;
+  frozenPoc?: WorkOrderFrozenPoc | null;
+  lifecycleStatus?: number | null;
+  lifecycleStatusLabel?: string | null;
+  legacyStatus?: string | null;
+  dispatcherId?: string | null;
+  dispatcherName?: string | null;
+  initials?: string | null;
+  /** Dispatcher avatar color — not the WO flag. */
+  color?: string | null;
+  /** Board flag color (#RRGGBB) or null when cleared. */
+  flagColor?: string | null;
+  /** Severity 1–5 for Emergency/Reactive. */
+  severity?: number | null;
+  dueDate?: string | null;
+  scheduledDate?: string | null;
+  /** ISO date when work was completed; optional on list rows until BE confirms. */
+  completedDate?: string | null;
+  targetWeek?: string | null;
+  scheduleWeekOnly?: boolean | null;
+  dayGroup?: string | null;
+  vendorId?: number | null;
+  vendorName?: string | null;
+  primaryDispatchStatus?: string | null;
+  techName?: string | null;
+  techPhone?: string | null;
+  apptDate?: string | null;
+  apptTime?: string | null;
+  pm?: string | null;
+  serviceNotes?: string | null;
+  extraServices?: string[] | null;
+  docStatus?: number | null;
+  primaryDispatchId?: number | null;
+  rowVersion?: string | null;
+  dispatchRowVersion?: string | null;
+  /**
+   * Authoritative pending-uplift count across all dispatches for this WO (SH-188 / BE board contract).
+   * Drives the Completed closability gate.
+   */
+  pendingUpliftCount?: number;
+}
+
+export interface WorkOrderBoardCountsApi {
+  returned: number;
+  total: number;
+}
+
+/** Response de GET /board */
+export interface WorkOrderBoardResponseApi {
+  weekStart: string;
+  weekEnd: string;
+  counts: WorkOrderBoardCountsApi;
+  unscheduled: WorkOrderBoardRowApi[];
+  scheduled: WorkOrderBoardRowApi[];
+}
+
+/** Response de GET /board/search — PagedResult<T> */
+export interface PagedResultApi<T> {
+  items: T[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+  totalPages?: number;
+  hasPrevious?: boolean;
+  hasNext?: boolean;
+}
+
+export type WorkOrderBoardSearchResponseApi = PagedResultApi<WorkOrderBoardRowApi>;
+
+export type BoardDatePresetApi =
+  "ThisWeek" | "LastWeek" | "ThisMonth" | "Last3Months" | "NextWeek" | "NextMonth" | "Custom";
+
+export const DATE_RANGE_TO_PRESET: Record<DateRangeKey, BoardDatePresetApi> = {
+  "this-week": "ThisWeek",
+  "last-week": "LastWeek",
+  "this-month": "ThisMonth",
+  "last-3-months": "Last3Months",
+  "next-week": "NextWeek",
+  "next-month": "NextMonth",
+  custom: "Custom",
+};
+
+/** BE board uses `__unassigned__`; legacy list used `__unassigned`. */
+export const BOARD_DISPATCHER_UNASSIGNED = "__unassigned__";
+
+export interface WorkOrderBoardQueryParams {
+  weekStart: string;
+  weekEnd?: string;
+  dispatchers?: string[];
+  myWorkOrders?: boolean;
+  types?: number[];
+  /** Past-due filter; independent of WorkOrderType (Other remains types=99). */
+  overdue?: boolean;
+  search?: string;
+}
+
+export interface WorkOrderBoardSearchQueryParams {
+  page?: number;
+  pageSize?: number;
+  search?: string;
+  datePreset?: BoardDatePresetApi;
+  dateFrom?: string;
+  dateTo?: string;
+  sites?: string[];
+  types?: number[];
+  /** Past-due filter; independent of WorkOrderType (Other remains types=99). */
+  overdue?: boolean;
+  dispatchers?: string[];
+  /** SH-348: region names (East/Central/West/California/Unmapped/Other). */
+  regions?: string[];
+  statuses?: number[];
+  pmTypes?: string[];
+  vendorIds?: number[];
+  docStatuses?: number[];
+  severities?: number[];
+  rescheduled?: boolean;
+  carriedOver?: boolean;
+  addOn?: boolean;
+  /** Only WOs flagged `avetaRequired`. */
+  avetaOnly?: boolean;
+  flagColors?: string[];
+  internalOnly?: boolean;
+  /**
+   * SH-338: server-side Unscheduled facet. `true` makes the server ignore the
+   * date range only; every other facet still applies. Absent/false keeps the
+   * legacy wire behavior.
+   */
+  unscheduledOnly?: boolean;
+  hasUplift?: boolean;
+  upliftStatuses?: string[];
+  myWorkOrders?: boolean;
+  sortBy?: "scheduledDate" | "woNumber" | "dueDate" | string;
+  sortDir?: "asc" | "desc" | string;
+}
+
+export interface WorkOrderBoardListResult {
+  items: WorkOrderTableRow[];
+  scheduled: WorkOrderTableRow[];
+  unscheduled: WorkOrderTableRow[];
+  totalCount: number;
+  returnedCount: number;
+  page: number;
+  pageSize: number;
+  weekStart?: string;
+  weekEnd?: string;
+}
diff --git a/src/domain/work-orders/types/work-order-common.ts b/src/domain/work-orders/types/work-order-common.ts
new file mode 100644
index 00000000..82267cb7
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-common.ts
@@ -0,0 +1,54 @@
+export const WORK_ORDER_STATUS_OPTIONS = [
+  "Open",
+  "In Progress",
+  "On Hold",
+  "Done",
+  "Cancelled",
+] as const;
+
+export const WORK_ORDER_PRIORITY_OPTIONS = ["Sev 1", "Sev 2", "Sev 3", "Sev 4", "Sev 5"] as const;
+
+export const DISPATCH_STATUS_OPTIONS = [
+  "Sent",
+  "Acknowledged",
+  "In Progress",
+  "Completed",
+  "Verified",
+  "Cancelled",
+] as const;
+
+export type WorkOrderStatus = (typeof WORK_ORDER_STATUS_OPTIONS)[number];
+export type WorkOrderPriority = (typeof WORK_ORDER_PRIORITY_OPTIONS)[number];
+export type DispatchStatus = (typeof DISPATCH_STATUS_OPTIONS)[number];
+
+export type WorkOrderCommentType = "customer" | "internal";
+
+export interface LocationOption {
+  id: string | number;
+  name: string;
+  siteCode?: string;
+  city?: string;
+  state?: string;
+}
+
+export interface EmployeeOption {
+  id: string | number;
+  name: string;
+}
+
+export interface VendorDropdownItem {
+  id: string | number;
+  companyName: string;
+  contactName: string;
+  tradeSpecialties: string;
+  address: string;
+  distanceMiles: number | null;
+  /** Present when the dropdown/API provides a contact email; never synthesized client-side. */
+  email?: string;
+}
+
+export interface TaskListTemplate {
+  id: string | number;
+  name: string;
+  items: { id?: string | number; itemText?: string }[];
+}
diff --git a/src/domain/work-orders/types/work-order-detail.ts b/src/domain/work-orders/types/work-order-detail.ts
new file mode 100644
index 00000000..8ca7bd01
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-detail.ts
@@ -0,0 +1,123 @@
+import type { WorkOrderCommentType, WorkOrderPriority, WorkOrderStatus } from "./work-order-common";
+import type { WorkOrderDispatchSummary } from "./dispatch";
+import type { CompletionDocStatus } from "./work-order-table-row";
+import type { WOType } from "./work-order-wizard";
+
+export interface WorkOrderComment {
+  id: string | number;
+  createdDate: string;
+  commenttext: string;
+  commentType: WorkOrderCommentType | string;
+  userName: string;
+  /** Author user id from board comments API — used for ownership checks. */
+  authorId?: string | null;
+  commenter: string | null;
+  recordType: string | null;
+  /** Mentioned user ids when returned by board comments API. */
+  mentions?: string[];
+}
+
+export interface WorkOrderAuditEntry {
+  id: string | number;
+  fieldName: string;
+  oldValue: string;
+  newValue: string;
+  action: string;
+  createdAt: string;
+  userName: string;
+  /** Board detail audit shape: system vs manual (matches design WOSlideOver). */
+  type?: "manual" | "system";
+  dispatcherId?: string;
+}
+
+export interface WorkOrderDetail {
+  id: string | number;
+  internalWONumber: string;
+  workOrderNumber: string;
+  title: string;
+  location: string;
+  locationId: string;
+  locationZip: string;
+  assignedTo: string;
+  dueDate: string;
+  createdDate: string;
+  createdDateFull: string;
+  description: string;
+  priority: WorkOrderPriority | string;
+  status: WorkOrderStatus | string;
+  po: string;
+  tt: string;
+  problem: string;
+  trade: string;
+  subTrade: string;
+  vendorNTE: string;
+  scheduledDate: string;
+  completedDate: string;
+  source: string;
+  /** Authoritative WO type (not integration `source`). Empty when unknown. */
+  type: WOType | "";
+  /** Completion document status (API DocStatus); used for PM/Overdue closability and board PATCH. */
+  docStatus: CompletionDocStatus;
+  /** Photo/media count for Emergency/Reactive closability gates. */
+  mediaCount: number;
+  /** Present when GetById returns contacts; used to re-send on edit so backend does not wipe. */
+  contactIds?: number[];
+  /** Present when GetById returns categories; used to re-send on edit so backend does not wipe. */
+  categoryIds?: number[];
+  comments: WorkOrderComment[];
+  auditLog: WorkOrderAuditEntry[];
+  dispatches: WorkOrderDispatchSummary[];
+}
+
+export interface WorkOrderFormValues {
+  internalWONumber: string;
+  workOrderNumber: string;
+  title: string;
+  locationId: string;
+  priority: string;
+  status: WorkOrderStatus;
+  createdDate: string;
+  dueDate: string;
+  scheduledDate: string;
+  completedDate: string;
+  /** Optional: absent from the wizard's zod-validated shape, present once loaded from the server. */
+  docStatus?: CompletionDocStatus;
+  assignedTo: string;
+  description: string;
+  po: string;
+  tt: string;
+  problem: string;
+  trade: string;
+  subTrade: string;
+  vendorNTE: string;
+  source: string;
+  /** When set (from detail), re-sent on edit to avoid wiping contacts. */
+  contactIds?: number[];
+  /** When set (from detail), re-sent on edit to avoid wiping categories. */
+  categoryIds?: number[];
+}
+
+export function createDefaultWorkOrderFormValues(): WorkOrderFormValues {
+  return {
+    internalWONumber: "",
+    workOrderNumber: "",
+    title: "",
+    locationId: "",
+    priority: "",
+    status: "Open",
+    createdDate: new Date().toISOString().split("T")[0] ?? "",
+    dueDate: "",
+    scheduledDate: "",
+    completedDate: "",
+    docStatus: "",
+    assignedTo: "",
+    description: "",
+    po: "",
+    tt: "",
+    problem: "",
+    trade: "",
+    subTrade: "",
+    vendorNTE: "",
+    source: "",
+  };
+}
diff --git a/src/domain/work-orders/types/work-order-list-filters.ts b/src/domain/work-orders/types/work-order-list-filters.ts
new file mode 100644
index 00000000..b20db35d
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-list-filters.ts
@@ -0,0 +1,7 @@
+import type { WOType } from "./work-order-wizard";
+
+export interface WorkOrderBarFilters {
+  weekMonday: string;
+  dispatcherIds: Set<string>;
+  types: Set<WOType>;
+}
diff --git a/src/domain/work-orders/types/work-order-list.ts b/src/domain/work-orders/types/work-order-list.ts
new file mode 100644
index 00000000..29c8ee6d
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-list.ts
@@ -0,0 +1,61 @@
+import type { WorkOrderPriority, WorkOrderStatus } from "./work-order-common";
+import type { WorkOrderTableRow } from "./work-order-table-row";
+
+export type SortDirection = "asc" | "desc" | "";
+
+export type WorkOrdersSortableColumn = "number" | "title";
+
+export const ASSIGNEE_FILTER_UNASSIGNED = "__unassigned" as const;
+
+export interface WorkOrderListItem {
+  id: string | number;
+  number: string;
+  title: string;
+  location: string;
+  priority: WorkOrderPriority | string;
+  status: WorkOrderStatus | string;
+  createdDate: string;
+  dueDate: string;
+  assignedTo: string;
+  lastUpdated: string;
+}
+
+export interface WorkOrdersListParams {
+  search?: string;
+  page?: number;
+  pageSize?: number;
+  sortBy?: WorkOrdersSortableColumn | string;
+  sortDir?: SortDirection;
+  status?: string;
+  assignee?: string;
+  locationId?: string | number;
+  /** Phase 2: filter bar week range (Monday ISO). */
+  dateFrom?: string;
+  /** Phase 2: filter bar week range (Friday ISO). */
+  dateTo?: string;
+  /** Phase 2: filter bar WO type. */
+  type?: string;
+  /** Phase 2: filter bar dispatcher ids (format TBD by API contract). */
+  assigneeIds?: string;
+}
+
+export interface WorkOrderUser {
+  id: string | number;
+  name: string;
+}
+
+export interface WorkOrdersListResult {
+  items: WorkOrderTableRow[];
+  totalCount: number;
+  page: number;
+  pageSize: number;
+}
+
+export interface SelectedWorkOrderRef {
+  id: string | number;
+  number: string;
+  title: string;
+}
+
+/** Max page size when loading WOs at a location for dispatch multi-select. */
+export const DISPATCH_LOCATION_WO_PAGE_SIZE = 50;
diff --git a/src/domain/work-orders/types/work-order-media.ts b/src/domain/work-orders/types/work-order-media.ts
new file mode 100644
index 00000000..58c1f1f5
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-media.ts
@@ -0,0 +1,33 @@
+export type FileCategory = "image" | "video" | "pdf" | "doc" | "other";
+
+export type MediaCategory =
+  "Photo" | "Video" | "Receipt" | "Quote" | "Invoice" | "Report" | "Aveta" | "Other";
+
+export interface MediaFile {
+  id: string;
+  name: string;
+  fileType: FileCategory;
+  url: string;
+  category: MediaCategory;
+  /** Board purpose label (Before/After/Extra/Completion/Aveta). Null/undefined = needs categorization. */
+  purpose?: "Before" | "After" | "Extra" | "Completion" | "Aveta" | null;
+  /** True when media is a legacy Before/After/Completion column (not deletable). */
+  isLegacy?: boolean;
+  /** 0–100 while uploading; undefined when idle/complete. */
+  progress?: number;
+  uploadStatus?: "uploading" | "failed" | "done";
+  errorMessage?: string;
+}
+
+export const MEDIA_CATEGORIES: MediaCategory[] = [
+  "Photo",
+  "Video",
+  "Receipt",
+  "Quote",
+  "Invoice",
+  "Report",
+  "Aveta",
+  "Other",
+];
+
+export const EMPTY_MEDIA: MediaFile[] = [];
diff --git a/src/domain/work-orders/types/work-order-severity.ts b/src/domain/work-orders/types/work-order-severity.ts
new file mode 100644
index 00000000..94c3963e
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-severity.ts
@@ -0,0 +1,75 @@
+export type WorkOrderSeverity = 1 | 2 | 3 | 4 | 5;
+
+export const WORK_ORDER_SEVERITIES: readonly WorkOrderSeverity[] = [1, 2, 3, 4, 5];
+
+/** Types that require an APM severity transcription. */
+export const SEVERITY_TYPES = ["Emergency", "Reactive"] as const;
+
+export type SeverityWoType = (typeof SEVERITY_TYPES)[number];
+
+export type SeverityToken = "critical" | "warning" | "safe";
+
+export const SEVERITY_LEVELS: Record<
+  WorkOrderSeverity,
+  {
+    label: string;
+    description: string;
+    deadline: string;
+    afterHours: string;
+    token: SeverityToken;
+  }
+> = {
+  1: {
+    label: "SEV 1",
+    description: "Business Critical Function Down",
+    deadline: "Accept: 15 min · Respond: 2 hrs",
+    afterHours: "Yes",
+    token: "critical",
+  },
+  2: {
+    label: "SEV 2",
+    description: "Business Critical Function Impaired",
+    deadline: "Accept: 30 min · Respond: 4 hrs",
+    afterHours: "Yes",
+    token: "critical",
+  },
+  3: {
+    label: "SEV 3",
+    description: "Group Productivity Impaired",
+    deadline: "Accept: 2 hrs · Respond: 8 hrs (next day if after hours)",
+    afterHours: "Approval required",
+    token: "warning",
+  },
+  4: {
+    label: "SEV 4",
+    description: "Individual Productivity Impaired",
+    deadline: "Accept: 12 hrs · Respond: 24 hrs (next day)",
+    afterHours: "No",
+    token: "safe",
+  },
+  5: {
+    label: "SEV 5",
+    description: "Productivity not immediately affected",
+    deadline: "Accept: 12 hrs · Respond: 72 hrs",
+    afterHours: "No",
+    token: "safe",
+  },
+};
+
+export const SEVERITY_TOKEN_COLOR: Record<SeverityToken, string> = {
+  critical: "var(--sla-critical, #DC2626)",
+  warning: "var(--sla-warning, #D97706)",
+  safe: "var(--sla-safe, #16A34A)",
+};
+
+export function typeNeedsSeverity(type: string): boolean {
+  return (SEVERITY_TYPES as readonly string[]).includes(type);
+}
+
+export function parseWorkOrderSeverity(value: unknown): WorkOrderSeverity | null {
+  const n = typeof value === "number" ? value : typeof value === "string" ? Number(value) : NaN;
+  if (n === 1 || n === 2 || n === 3 || n === 4 || n === 5) {
+    return n;
+  }
+  return null;
+}
diff --git a/src/domain/work-orders/types/work-order-table-row.ts b/src/domain/work-orders/types/work-order-table-row.ts
new file mode 100644
index 00000000..179f6c95
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-table-row.ts
@@ -0,0 +1,195 @@
+import type { WorkOrderAdditionalContact } from "./work-order-additional-contact";
+import type { WizardSchedMode, WizardWOStatus, WOType } from "./work-order-wizard";
+import type { WorkOrderSeverity } from "./work-order-severity";
+import type { UpliftSummary } from "./work-order-uplift";
+
+export type CompletionDocStatus = "Yes" | "No" | "NN" | "";
+
+export const WORK_ORDERS_TABLE_PAGE_SIZE = 100;
+
+export type WorkOrderUpliftSummary = {
+  hasUplift: boolean;
+  pendingCount: number;
+  primaryStatus?: string;
+};
+
+export type WorkOrderFrozenSite = {
+  code?: string;
+  label?: string;
+  address?: string;
+  city?: string;
+  state?: string;
+  zip?: string;
+  phone?: string;
+  email?: string;
+  maps?: string;
+};
+
+export type WorkOrderFrozenCompany = {
+  name?: string;
+  contactName?: string;
+  address?: string;
+  city?: string;
+  state?: string;
+  zip?: string;
+  phone?: string;
+  email?: string;
+  maps?: string;
+};
+
+export type WorkOrderFrozenPoc = {
+  contacts: { name?: string; phone?: string; notes?: string }[];
+  notes?: string;
+};
+
+export interface WorkOrderTableRow {
+  id: string | number;
+  woNumber: string;
+  site: string;
+  type: WOType | "";
+  /** Severity 1–5 for Emergency/Reactive; null otherwise. */
+  severity: WorkOrderSeverity | null;
+  dispatcherId: string;
+  dispatcherName: string;
+  scheduledOn: string;
+  /** Work completed date (API CompletedDate); used by closability / COMPLETED DATE column. */
+  completedDate: string;
+  targetWeek: string;
+  dayGroup: string;
+  dayLabel: string;
+  location: string;
+  locationId: string | number;
+  pm: string;
+  serviceId?: string | number | null;
+  /** Issue detail from Service & Notes. */
+  serviceNotes: string;
+  /** Additional services beyond primary `pm`. */
+  extraServices: string[];
+  vendorId: string;
+  company: string;
+  primaryDispatchStatus?: string;
+  tech: string;
+  techPhone: string;
+  apptStart: string;
+  apptEnd: string;
+  apptTime: string;
+  status: WizardWOStatus | "Canceled" | "";
+  docStatus: CompletionDocStatus;
+  pocName: string;
+  pocPhone: string;
+  pocNotes: string;
+  additionalContacts: WorkOrderAdditionalContact[];
+  frozenSite?: WorkOrderFrozenSite;
+  frozenCompany?: WorkOrderFrozenCompany;
+  frozenPoc?: WorkOrderFrozenPoc;
+  dueDate: string;
+  rescheduleCount: number;
+  carriedOver: number;
+  /**
+   * Add-On indicator (not a WO type). Backend-authoritative (SH-184):
+   * recalculated on schedule week moves / clear; FE only reflects API value.
+   */
+  isAddOn: boolean;
+  /** Per-WO Aveta compliance flag from Service & Notes (not a site attribute). */
+  avetaRequired?: boolean;
+  /** True when an Extra Docs file is categorized Aveta. */
+  hasAvetaDocument?: boolean;
+  originalWeek: string;
+  originalDate: string;
+  isPastDue: boolean;
+  scheduleWeekOnly: boolean;
+  /** Optimistic range end; API persists only `scheduledOn` (range start). */
+  scheduleEnd?: string;
+  /** Last Schedule On mode used in this session. */
+  schedMode?: WizardSchedMode;
+  mediaCount: number;
+  title: string;
+  priority: string;
+  primaryDispatchId: number | null;
+  rowVersion: string;
+  dispatchRowVersion: string;
+  /** Board flag color (#RRGGBB). Null/empty = no flag. Distinct from dispatcher avatar `color`. */
+  flagColor: string | null;
+  upliftSummary?: UpliftSummary | null;
+  hasPendingUplift?: boolean;
+}
+
+export interface WorkOrderTableDraft {
+  site: string;
+  woNumber: string;
+  type: WOType | "";
+  severity: WorkOrderSeverity | null;
+  dispatcherId: string;
+  scheduledOn: string;
+  schedNotes: string;
+  dueDate: string;
+  location: string;
+  locationId: string | number;
+  pm: string;
+  serviceNotes: string;
+  extraServices: string[];
+  avetaRequired?: boolean;
+  vendorId: string;
+  company: string;
+  tech: string;
+  techPhone: string;
+  apptStart: string;
+  apptEnd: string;
+  status: WizardWOStatus | "";
+  pocName: string;
+  pocPhone: string;
+  pocNotes: string;
+  additionalContacts: WorkOrderAdditionalContact[];
+  scheduleWeekOnly: boolean;
+  targetWeek: string;
+  scheduleEnd?: string;
+  schedMode?: WizardSchedMode;
+  /** Manual Add-On override when schedule is empty at inline create. */
+  isAddOnOverride: boolean;
+}
+
+export const EMPTY_TABLE_DRAFT: WorkOrderTableDraft = {
+  site: "",
+  woNumber: "",
+  type: "",
+  severity: null,
+  dispatcherId: "",
+  scheduledOn: "",
+  schedNotes: "",
+  dueDate: "",
+  location: "",
+  locationId: "",
+  pm: "",
+  serviceNotes: "",
+  extraServices: [],
+  avetaRequired: false,
+  vendorId: "",
+  company: "",
+  tech: "",
+  techPhone: "",
+  apptStart: "",
+  apptEnd: "",
+  status: "Incomplete",
+  pocName: "",
+  pocPhone: "",
+  pocNotes: "",
+  additionalContacts: [],
+  scheduleWeekOnly: false,
+  targetWeek: "",
+  scheduleEnd: "",
+  schedMode: undefined,
+  isAddOnOverride: false,
+};
+
+export type WorkOrderDayGroup = {
+  key: string;
+  label: string;
+  date: string;
+  items: WorkOrderTableRow[];
+  totalCount?: number;
+};
+
+export type WorkOrderTablePatch = Partial<WorkOrderTableRow>;
+
+export const UNSCHEDULED_DAY_KEY = "__unscheduled__" as const;
+export const UNASSIGNED_DAY_KEY = "__unassigned__" as const;
diff --git a/src/domain/work-orders/types/work-order-uplift-filter.ts b/src/domain/work-orders/types/work-order-uplift-filter.ts
new file mode 100644
index 00000000..a26ca0d1
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-uplift-filter.ts
@@ -0,0 +1,16 @@
+/** Uplift statuses exposed in advanced search (excludes cancelled/revoked). */
+export type UpliftFilterStatus = "pending" | "approved" | "auto_approved" | "rejected";
+
+export const UPLIFT_FILTER_STATUSES: UpliftFilterStatus[] = [
+  "pending",
+  "approved",
+  "auto_approved",
+  "rejected",
+];
+
+export const UPLIFT_FILTER_LABELS: Record<UpliftFilterStatus, string> = {
+  pending: "Pending",
+  approved: "Approved",
+  auto_approved: "Auto-approved",
+  rejected: "Rejected",
+};
diff --git a/src/domain/work-orders/types/work-order-uplift.ts b/src/domain/work-orders/types/work-order-uplift.ts
new file mode 100644
index 00000000..aaed9c16
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-uplift.ts
@@ -0,0 +1,41 @@
+export const WORK_ORDER_UPLIFT_STATUSES = [
+  "pending",
+  "approved",
+  "auto_approved",
+  "rejected",
+  "cancelled",
+  "revoked",
+] as const;
+
+export type WorkOrderUpliftStatus = (typeof WORK_ORDER_UPLIFT_STATUSES)[number];
+
+export interface UpliftSummary {
+  hasUplift: boolean;
+  pendingCount: number;
+  primaryStatus?: WorkOrderUpliftStatus;
+  amount?: number;
+}
+
+export interface WorkOrderUplift {
+  id: string | number;
+  status: WorkOrderUpliftStatus;
+  amount: number;
+  notes: string;
+  requestedAt: string;
+  requestedById: string | number | null;
+  requestedByName: string;
+  decidedAt: string;
+  decidedByName: string;
+  decisionNote: string;
+}
+
+export interface CreateWorkOrderUpliftInput {
+  amount: number;
+  notes: string;
+  attachments?: File[];
+}
+
+export const EMPTY_UPLIFT_SUMMARY: UpliftSummary = {
+  hasUplift: false,
+  pendingCount: 0,
+};
diff --git a/src/domain/work-orders/types/work-order-wizard.ts b/src/domain/work-orders/types/work-order-wizard.ts
new file mode 100644
index 00000000..ca1e94ad
--- /dev/null
+++ b/src/domain/work-orders/types/work-order-wizard.ts
@@ -0,0 +1,239 @@
+import type { WorkOrderAdditionalContact } from "./work-order-additional-contact";
+import { typeNeedsSeverity, type WorkOrderSeverity } from "./work-order-severity";
+
+export type { WorkOrderSeverity } from "./work-order-severity";
+
+/** Selectable business types — Add-On is an indicator (`isAddOn`), not a type. */
+export const WO_TYPES = ["PM", "Reactive", "Emergency", "Overdue"] as const;
+
+export type WOType = (typeof WO_TYPES)[number];
+
+export const ALL_WIZARD_STATUSES = [
+  "Incomplete",
+  "Pending",
+  "Scheduled",
+  "En Route",
+  "On Site",
+  "In Progress",
+  "Completed",
+  "Rescheduled",
+  "Pending Quote",
+] as const;
+
+export type WizardWOStatus = (typeof ALL_WIZARD_STATUSES)[number];
+
+export type WizardSchedMode = "date" | "week" | "range";
+
+export interface WorkOrderWizardDraft {
+  locationId: string;
+  locationName: string;
+  siteCode: string;
+  woNumber: string;
+  type: WOType | "";
+  /** Severity 1–5 for Emergency/Reactive; null otherwise. */
+  severity: WorkOrderSeverity | null;
+  assigneeId: string;
+  assigneeName: string;
+  scheduledOn: string;
+  dueDate: string;
+  pm: string;
+  /** Registry service selected for this work order; null keeps the optional field empty. */
+  serviceId: string | number | null;
+  /** Extra services beyond primary `pm` (Service & Notes). */
+  extraServices: string[];
+  /** Free-text note attached to the service (Service & Notes). */
+  pmNote: string;
+  /** Per-WO Aveta compliance flag from Service & Notes. */
+  avetaRequired: boolean;
+  vendorId: string;
+  vendorName: string;
+  techPhone: string;
+  vendorNotes: string;
+  apptStart: string;
+  apptEnd: string;
+  status: WizardWOStatus | "";
+  pocName: string;
+  pocPhone: string;
+  pocNotes: string;
+  /** Secondary POCs beyond primary pocName/pocPhone/pocNotes. */
+  additionalContacts: WorkOrderAdditionalContact[];
+  scheduleWeekOnly: boolean;
+  /** Monday ISO when week-only; preferred over deriving from scheduledOn (inline create). */
+  targetWeek?: string;
+  /** End date when Schedule On is a range (ISO; start = scheduledOn). */
+  scheduleEnd?: string;
+  /** Last Schedule On mode used. */
+  schedMode?: WizardSchedMode;
+  /**
+   * Manual Add-On override when `scheduledOn` is empty at create.
+   * Ignored when a cutoff preview can be computed from schedule.
+   * Create hint only — backend remains authoritative after schedule patches (SH-184).
+   */
+  isAddOnOverride?: boolean;
+}
+
+export const EMPTY_WIZARD_DRAFT: WorkOrderWizardDraft = {
+  locationId: "",
+  locationName: "",
+  siteCode: "",
+  woNumber: "",
+  type: "",
+  severity: null,
+  assigneeId: "",
+  assigneeName: "",
+  scheduledOn: "",
+  dueDate: "",
+  pm: "",
+  serviceId: null,
+  extraServices: [],
+  pmNote: "",
+  avetaRequired: false,
+  vendorId: "",
+  vendorName: "",
+  techPhone: "",
+  vendorNotes: "",
+  apptStart: "",
+  apptEnd: "",
+  status: "Incomplete",
+  pocName: "",
+  pocPhone: "",
+  pocNotes: "",
+  additionalContacts: [],
+  scheduleWeekOnly: false,
+  targetWeek: "",
+  scheduleEnd: "",
+  schedMode: undefined,
+  isAddOnOverride: false,
+};
+
+export const WIZARD_WO_NUMBER_MAX_LENGTH = 20;
+
+/** Blank is valid (backend generates an SH provisional number). Otherwise alphanumeric, max 20. */
+export function isWizardWoNumberValid(woNumber: string): boolean {
+  const trimmed = woNumber.trim();
+  if (!trimmed) {
+    return true;
+  }
+  return trimmed.length <= WIZARD_WO_NUMBER_MAX_LENGTH && /^[a-z0-9]+$/i.test(trimmed);
+}
+
+/** Type is optional at creation; empty draft type defaults to PM. */
+export function effectiveWizardType(type: WOType | ""): WOType {
+  return type || "PM";
+}
+
+export function wizardNeedsSeverity(draft: WorkOrderWizardDraft): boolean {
+  return typeNeedsSeverity(draft.type);
+}
+
+export const WIZARD_STEPS: { title: string; nav: string; subtitle: string }[] = [
+  {
+    title: "Type & schedule",
+    nav: "What and when",
+    subtitle: "Set the work-order type and when it should happen.",
+  },
+  {
+    title: "Location & service",
+    nav: "Where and what work",
+    subtitle: "Pick the site and the service to be performed.",
+  },
+  {
+    title: "Vendor & time",
+    nav: "Who and the window",
+    subtitle: "Assign a vendor crew and the appointment window.",
+  },
+];
+
+export const WO_TYPE_META: Record<WOType, { desc: string; bg: string; fg: string }> = {
+  PM: {
+    desc: "Scheduled preventive maintenance",
+    bg: "var(--type-pm-bg)",
+    fg: "var(--type-pm-text)",
+  },
+  Reactive: {
+    desc: "Tenant-reported repair",
+    bg: "var(--type-reactive-bg)",
+    fg: "var(--type-reactive-text)",
+  },
+  Emergency: {
+    desc: "Urgent same-day dispatch",
+    bg: "var(--type-emergency-bg)",
+    fg: "var(--type-emergency-text)",
+  },
+  Overdue: {
+    desc: "No client response — due date passed",
+    bg: "var(--type-overdue-bg)",
+    fg: "var(--type-overdue-text)",
+  },
+};
+
+export const WIZARD_STATUS_DOTS: Record<WizardWOStatus, string> = {
+  Incomplete: "#9CA3AF",
+  Pending: "#D97706",
+  Scheduled: "#3B82F6",
+  "En Route": "#0EA5E9",
+  "On Site": "#10B981",
+  "In Progress": "#2563EB",
+  Completed: "#16A34A",
+  Rescheduled: "#F59E0B",
+  "Pending Quote": "#9333EA",
+};
+
+export const TIME_SLOTS: string[] = (() => {
+  const out: string[] = [];
+  for (let m = 5 * 60; m <= 22 * 60; m += 30) {
+    const h = Math.floor(m / 60);
+    const mm = m % 60;
+    out.push(`${String(h).padStart(2, "0")}:${String(mm).padStart(2, "0")}`);
+  }
+  return out;
+})();
+
+export function canContinueWizardStep1(draft: WorkOrderWizardDraft): boolean {
+  if (!isWizardWoNumberValid(draft.woNumber)) {
+    return false;
+  }
+  if (wizardNeedsSeverity(draft) && draft.severity == null) {
+    return false;
+  }
+  return true;
+}
+
+export function wizardStep1ContinueHint(draft: WorkOrderWizardDraft): string | null {
+  if (canContinueWizardStep1(draft)) {
+    return null;
+  }
+  if (!isWizardWoNumberValid(draft.woNumber)) {
+    return "WO number must be alphanumeric";
+  }
+  return "Select severity to continue";
+}
+
+export function canContinueWizardStep2(draft: WorkOrderWizardDraft): boolean {
+  const hasSite = Boolean(draft.locationId && (draft.siteCode.trim() || draft.locationName.trim()));
+  return Boolean(hasSite && draft.pocName.trim() && draft.pocPhone.trim());
+}
+
+export function wizardStep2ContinueHint(draft: WorkOrderWizardDraft): string | null {
+  if (canContinueWizardStep2(draft)) {
+    return null;
+  }
+  if (!draft.locationId) {
+    return "Pick a site to continue";
+  }
+  return "Enter POC name and phone to continue";
+}
+
+export function canCreateWorkOrderFromWizard(draft: WorkOrderWizardDraft): boolean {
+  return canContinueWizardStep1(draft) && canContinueWizardStep2(draft);
+}
+
+export function isWizardStepValid(step: number, draft: WorkOrderWizardDraft): boolean {
+  if (step === 1) {
+    return canContinueWizardStep1(draft);
+  }
+  if (step === 2) {
+    return canContinueWizardStep2(draft);
+  }
+  return true;
+}
diff --git a/src/domain/work-orders/types/work-order.ts b/src/domain/work-orders/types/work-order.ts
new file mode 100644
index 00000000..265344da
--- /dev/null
+++ b/src/domain/work-orders/types/work-order.ts
@@ -0,0 +1,63 @@
+export type {
+  DispatchChecklistItem,
+  DispatchComment,
+  DispatchDetail,
+  DispatchSignoff,
+  DispatchToVendorPayload,
+  DispatchWorkOrderRef,
+  UpdateDispatchPayload,
+  WorkOrderDispatchSummary,
+  WorkOrderVendorUpdatePayload,
+} from "./dispatch";
+
+export type {
+  DispatchStatus,
+  EmployeeOption,
+  LocationOption,
+  TaskListTemplate,
+  VendorDropdownItem,
+  WorkOrderCommentType,
+  WorkOrderPriority,
+  WorkOrderStatus,
+} from "./work-order-common";
+
+export {
+  DISPATCH_STATUS_OPTIONS,
+  WORK_ORDER_PRIORITY_OPTIONS,
+  WORK_ORDER_STATUS_OPTIONS,
+} from "./work-order-common";
+
+export type {
+  WorkOrderAuditEntry,
+  WorkOrderComment,
+  WorkOrderDetail,
+  WorkOrderFormValues,
+} from "./work-order-detail";
+
+export { createDefaultWorkOrderFormValues } from "./work-order-detail";
+
+export type {
+  SelectedWorkOrderRef,
+  SortDirection,
+  WorkOrderListItem,
+  WorkOrdersListParams,
+  WorkOrdersListResult,
+  WorkOrderUser,
+  WorkOrdersSortableColumn,
+} from "./work-order-list";
+
+export { ASSIGNEE_FILTER_UNASSIGNED, DISPATCH_LOCATION_WO_PAGE_SIZE } from "./work-order-list";
+
+export type {
+  CompletionDocStatus,
+  WorkOrderDayGroup,
+  WorkOrderTableDraft,
+  WorkOrderTableRow,
+} from "./work-order-table-row";
+
+export {
+  EMPTY_TABLE_DRAFT,
+  UNASSIGNED_DAY_KEY,
+  UNSCHEDULED_DAY_KEY,
+  WORK_ORDERS_TABLE_PAGE_SIZE,
+} from "./work-order-table-row";
diff --git a/src/domain/work-orders/use-cases/fetch-work-order-employees.ts b/src/domain/work-orders/use-cases/fetch-work-order-employees.ts
new file mode 100644
index 00000000..56746004
--- /dev/null
+++ b/src/domain/work-orders/use-cases/fetch-work-order-employees.ts
@@ -0,0 +1,35 @@
+import { API_PATHS } from "@/api/api-paths";
+import { apiGet } from "@/api/api";
+import { handleApiResponse, handlePaginatedResponse } from "@/api/handle-api-response";
+import { mapEmployeeOptions } from "@/domain/work-orders/mappers/work-order-mapper";
+import type { EmployeeOption } from "@/domain/work-orders/types/work-order";
+
+async function fetchEmployeesFromList(): Promise<EmployeeOption[]> {
+  const data = await apiGet<unknown>(API_PATHS.employee.getList, {
+    searchParams: { page: 1, pageSize: 1000 },
+  });
+  const paginated = handlePaginatedResponse<unknown>(data);
+  const items = paginated.items.map((item) => {
+    const record = (typeof item === "object" && item !== null ? item : {}) as Record<
+      string,
+      unknown
+    >;
+    const firstName = String(record.firstName ?? record.FirstName ?? "");
+    const lastName = String(record.lastName ?? record.LastName ?? "");
+    return {
+      id: record.id ?? record.Id,
+      name: `${firstName} ${lastName}`.trim(),
+    };
+  });
+  return mapEmployeeOptions(items);
+}
+
+export async function fetchWorkOrderEmployees(): Promise<EmployeeOption[]> {
+  try {
+    const data = await apiGet<unknown>(API_PATHS.employee.dropdown);
+    const items = handleApiResponse<unknown[]>(data);
+    return Array.isArray(items) ? mapEmployeeOptions(items) : [];
+  } catch {
+    return fetchEmployeesFromList();
+  }
+}
diff --git a/src/domain/work-orders/use-cases/use-create-work-order-from-wizard.ts b/src/domain/work-orders/use-cases/use-create-work-order-from-wizard.ts
new file mode 100644
index 00000000..5e4ad7c9
--- /dev/null
+++ b/src/domain/work-orders/use-cases/use-create-work-order-from-wizard.ts
@@ -0,0 +1,35 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+
+import { toast } from "react-toastify";
+
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+
+import { boardCreateErrorMessage } from "@/domain/work-orders/errors/board-create-errors";
+
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order";
+
+import type { WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useCreateWorkOrderFromWizard(
+  onSuccess?: (draft: WorkOrderWizardDraft) => void,
+): UseMutationResult<WorkOrderDetail, Error, WorkOrderWizardDraft> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (draft: WorkOrderWizardDraft) => workOrdersApi.createFromBoard(draft),
+
+    onSuccess: (_created, draft) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+
+      toast.success("Work Order created successfully!");
+
+      onSuccess?.(draft);
+    },
+
+    onError: (error: Error) => {
+      toast.error(boardCreateErrorMessage(error));
+    },
+  });
+}
diff --git a/src/domain/work-orders/use-cases/use-save-work-order.ts b/src/domain/work-orders/use-cases/use-save-work-order.ts
new file mode 100644
index 00000000..db9ed6da
--- /dev/null
+++ b/src/domain/work-orders/use-cases/use-save-work-order.ts
@@ -0,0 +1,83 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+
+import { vendorOperationsApi } from "@/domain/vendor-operations/api/vendor-operations-api";
+import type {
+  VendorAssignmentPayload,
+  VendorAssignmentResult,
+} from "@/domain/vendor-operations/types/vendor-operations";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import type { WorkOrderFormSchemaValues } from "@/domain/work-orders/schemas/work-order-schema";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+type SaveWorkOrderInput = {
+  workOrderId?: string | number;
+  values: WorkOrderFormSchemaValues;
+  vendorAssignment?: VendorAssignmentPayload;
+};
+
+type SaveWorkOrderResult = {
+  workOrderId: string | number;
+  assignment?: VendorAssignmentResult;
+};
+
+class PartialWorkOrderSaveError extends Error {
+  constructor(public readonly workOrderId: string | number) {
+    super("Work order saved, but the vendor assignment could not be completed.");
+    this.name = "PartialWorkOrderSaveError";
+  }
+}
+
+export function useSaveWorkOrder() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      workOrderId,
+      values,
+      vendorAssignment,
+    }: SaveWorkOrderInput): Promise<SaveWorkOrderResult> => {
+      const savedWorkOrderId = workOrderId
+        ? await workOrdersApi.update(workOrderId, values).then(() => workOrderId)
+        : await workOrdersApi.create(values).then((created) => created.id);
+
+      let assignment: VendorAssignmentResult | undefined;
+      if (vendorAssignment) {
+        try {
+          assignment = await vendorOperationsApi.assignVendor(savedWorkOrderId, vendorAssignment);
+        } catch {
+          throw new PartialWorkOrderSaveError(savedWorkOrderId);
+        }
+      }
+
+      return { workOrderId: savedWorkOrderId, assignment };
+    },
+    onSuccess: ({ workOrderId, assignment }) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+      void queryClient.invalidateQueries({
+        queryKey: queryKeys.workOrders.detail(workOrderId),
+      });
+      toast.success("Work order saved successfully");
+      if (assignment?.conflicts.length) {
+        const count = assignment.conflicts.length;
+        toast.warning(`Vendor assigned with ${count} scheduling conflict${count > 1 ? "s" : ""}.`);
+      }
+      navigate(`/workorders/${workOrderId}`);
+    },
+    onError: (error) => {
+      if (error instanceof PartialWorkOrderSaveError) {
+        void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+        void queryClient.invalidateQueries({
+          queryKey: queryKeys.workOrders.detail(error.workOrderId),
+        });
+        toast.error(error.message);
+        navigate(`/workorders/${error.workOrderId}`);
+        return;
+      }
+
+      toast.error("Unable to save the work order. Please try again.");
+    },
+  });
+}
diff --git a/src/domain/work-orders/use-cases/use-work-order-detail.ts b/src/domain/work-orders/use-cases/use-work-order-detail.ts
new file mode 100644
index 00000000..fc28b8fd
--- /dev/null
+++ b/src/domain/work-orders/use-cases/use-work-order-detail.ts
@@ -0,0 +1,96 @@
+import { keepPreviousData, useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import { fetchWorkOrderEmployees } from "@/domain/work-orders/use-cases/fetch-work-order-employees";
+import type {
+  DispatchDetail,
+  EmployeeOption,
+  LocationOption,
+  TaskListTemplate,
+  VendorDropdownItem,
+  WorkOrderDetail,
+} from "@/domain/work-orders/types/work-order";
+import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+export function useWorkOrderDetail(
+  id: string | number | undefined,
+): UseQueryResult<WorkOrderDetail, Error> {
+  return useQuery({
+    queryKey: queryKeys.workOrders.detail(id ?? ""),
+    queryFn: () => workOrdersApi.getById(requireQueryParam(id, "Work order id")),
+    enabled: id !== undefined && id !== "",
+    placeholderData: keepPreviousData,
+  });
+}
+
+export function useWorkOrderBoardDetail(
+  id: string | number | undefined,
+  enabled = true,
+  meta?: { suppressErrorToast?: boolean },
+): UseQueryResult<WorkOrderBoardDetail, Error> {
+  return useQuery({
+    queryKey: queryKeys.workOrders.boardDetail(id ?? ""),
+    queryFn: () => workOrdersApi.getBoardDetail(requireQueryParam(id, "Work order id")),
+    enabled: enabled && id !== undefined && id !== "",
+    meta,
+    // Do not keepPreviousData — placeholder detail from another WO leaks into the slide-over.
+  });
+}
+
+export function useWorkOrderMedia(
+  id: string | number | undefined,
+  enabled = true,
+): UseQueryResult<WorkOrderBoardDetail["media"], Error> {
+  return useQuery({
+    queryKey: queryKeys.workOrders.boardMedia(id ?? ""),
+    queryFn: () => workOrdersApi.listMedia(requireQueryParam(id, "Work order id")),
+    enabled: enabled && id !== undefined && id !== "",
+  });
+}
+
+export function useWorkOrderLocations(): UseQueryResult<LocationOption[], Error> {
+  return useQuery({
+    queryKey: queryKeys.locations.dropdown(),
+    queryFn: () => workOrdersApi.fetchLocations(),
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useWorkOrderEmployeesDropdown(): UseQueryResult<EmployeeOption[], Error> {
+  return useQuery({
+    queryKey: [...queryKeys.employees.all, "dropdown"] as const,
+    queryFn: () => fetchWorkOrderEmployees(),
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useWorkOrderVendors(
+  trade?: string,
+  siteZip?: string,
+): UseQueryResult<VendorDropdownItem[], Error> {
+  return useQuery({
+    queryKey: queryKeys.vendors.dropdown(trade, siteZip),
+    queryFn: () => workOrdersApi.fetchVendorsDropdown(trade, siteZip),
+    staleTime: 60 * 1000,
+  });
+}
+
+export function useTaskListTemplates(): UseQueryResult<TaskListTemplate[], Error> {
+  return useQuery({
+    queryKey: queryKeys.workOrders.taskTemplates(),
+    queryFn: () => workOrdersApi.fetchTaskTemplates(),
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useDispatchDetail(
+  dispatchId: string | number | undefined,
+): UseQueryResult<DispatchDetail, Error> {
+  return useQuery({
+    queryKey: queryKeys.workOrders.dispatch(dispatchId ?? ""),
+    queryFn: () => workOrdersApi.getDispatchById(requireQueryParam(dispatchId, "Dispatch id")),
+    enabled: dispatchId !== undefined && dispatchId !== "",
+    placeholderData: keepPreviousData,
+  });
+}
diff --git a/src/domain/work-orders/use-cases/use-work-order-mutations.ts b/src/domain/work-orders/use-cases/use-work-order-mutations.ts
new file mode 100644
index 00000000..156cdbde
--- /dev/null
+++ b/src/domain/work-orders/use-cases/use-work-order-mutations.ts
@@ -0,0 +1,442 @@
+import { useMutation, useQueryClient, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import { BoardPatchConflictError } from "@/domain/work-orders/errors/board-patch-errors";
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { WorkOrderFormSchemaValues } from "@/domain/work-orders/schemas/work-order-schema";
+import type {
+  DispatchComment,
+  DispatchSignoff,
+  DispatchToVendorPayload,
+  UpdateDispatchPayload,
+  WorkOrderComment,
+  WorkOrderDetail,
+  WorkOrderFormValues,
+  WorkOrderVendorUpdatePayload,
+} from "@/domain/work-orders/types/work-order";
+import type {
+  WorkOrderBoardCompletion,
+  WorkOrderBoardMediaItem,
+} from "@/domain/work-orders/types/work-order-board-detail";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+function invalidateWorkOrders(queryClient: ReturnType<typeof useQueryClient>) {
+  void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+}
+
+function invalidateBoardDetail(
+  queryClient: ReturnType<typeof useQueryClient>,
+  workOrderId: string | number,
+) {
+  void queryClient.invalidateQueries({
+    queryKey: queryKeys.workOrders.boardDetail(workOrderId),
+  });
+  void queryClient.invalidateQueries({
+    queryKey: queryKeys.workOrders.boardMedia(workOrderId),
+  });
+  void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.detail(workOrderId) });
+}
+
+export interface AddWorkOrderCommentInput {
+  text: string;
+  mentions?: string[];
+  commentType?: "customer" | "internal";
+}
+
+export interface UpdateWorkOrderCommentInput {
+  commentId: string | number;
+  text: string;
+}
+
+export interface UploadWorkOrderMediaInput {
+  file: File;
+  category?: UploadableMediaCategory;
+  signal?: AbortSignal;
+  onProgress?: (percent: number) => void;
+}
+
+export interface UpdateWorkOrderMediaCategoryInput {
+  mediaId: string | number;
+  category: UploadableMediaCategory;
+  workOrderVersion: string;
+}
+
+export interface DeleteWorkOrderMediaInput {
+  mediaId: string | number;
+  workOrderVersion: string;
+}
+
+export interface UploadCompletionDocInput {
+  file: File;
+  workOrderVersion: string;
+  signOffName?: string;
+  signOffSignature?: string;
+}
+
+export interface AddDispatchCommentInput {
+  text: string;
+  sendEmail: boolean;
+}
+
+export interface UpdateChecklistItemInput {
+  itemId: string | number;
+  isCompleted: boolean;
+  completedBy: string;
+}
+
+export interface AddDispatchSignoffInput {
+  signoffType: string;
+  name: string;
+  signature: string;
+  signatureMethod: string;
+}
+
+export interface ChangeWorkOrderAssignmentInput {
+  userId: string | number;
+  userName: string;
+}
+
+export interface UpdateWorkOrderVendorInput {
+  vendorId: string | number;
+  payload: WorkOrderVendorUpdatePayload;
+}
+
+export function useCreateWorkOrder(): UseMutationResult<
+  WorkOrderDetail,
+  Error,
+  WorkOrderFormSchemaValues | WorkOrderFormValues
+> {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+
+  return useMutation({
+    mutationFn: (values: WorkOrderFormSchemaValues | WorkOrderFormValues) =>
+      workOrdersApi.create(values),
+    onSuccess: (data) => {
+      invalidateWorkOrders(queryClient);
+      toast.success("Work Order created successfully!");
+      navigate(`/workorders/${data.id}`);
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to create work order");
+    },
+  });
+}
+
+export function useUpdateWorkOrder(
+  id: string | number,
+): UseMutationResult<void, Error, WorkOrderFormSchemaValues | WorkOrderFormValues> {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+
+  return useMutation({
+    mutationFn: (values: WorkOrderFormSchemaValues | WorkOrderFormValues) =>
+      workOrdersApi.update(id, values),
+    onSuccess: () => {
+      invalidateWorkOrders(queryClient);
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.detail(id) });
+      toast.success("Work Order updated successfully!");
+      navigate(`/workorders/${id}`);
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update work order");
+    },
+  });
+}
+
+export function useUpdateWorkOrderVendor(
+  workOrderId: string | number,
+): UseMutationResult<void, Error, UpdateWorkOrderVendorInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ vendorId, payload }) =>
+      workOrdersApi.updateVendorFromWorkOrder(vendorId, payload),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.detail(workOrderId) });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.vendors.all });
+      toast.success("Vendor contact updated");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update vendor contact");
+    },
+  });
+}
+
+export function useAddWorkOrderComment(
+  workOrderId: string | number,
+): UseMutationResult<WorkOrderComment, Error, AddWorkOrderCommentInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ text, mentions }: AddWorkOrderCommentInput) =>
+      workOrdersApi.createComment(workOrderId, text, mentions),
+    onSuccess: () => {
+      invalidateBoardDetail(queryClient, workOrderId);
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to add comment");
+    },
+  });
+}
+
+export function useUpdateWorkOrderComment(
+  workOrderId: string | number,
+): UseMutationResult<WorkOrderComment, Error, UpdateWorkOrderCommentInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ commentId, text }: UpdateWorkOrderCommentInput) =>
+      workOrdersApi.updateComment(workOrderId, commentId, text),
+    onSuccess: () => {
+      invalidateBoardDetail(queryClient, workOrderId);
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update comment");
+    },
+  });
+}
+
+export function useUploadWorkOrderMedia(
+  workOrderId: string | number,
+): UseMutationResult<WorkOrderBoardMediaItem, Error, UploadWorkOrderMediaInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ file, category, signal, onProgress }: UploadWorkOrderMediaInput) =>
+      workOrdersApi.uploadMedia(workOrderId, file, category, { signal, onProgress }),
+    onSuccess: () => {
+      invalidateBoardDetail(queryClient, workOrderId);
+      invalidateWorkOrders(queryClient);
+      toast.success("File uploaded — assign a category");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to upload file");
+    },
+  });
+}
+
+export function useUpdateWorkOrderMediaCategory(
+  workOrderId: string | number,
+): UseMutationResult<WorkOrderBoardMediaItem, Error, UpdateWorkOrderMediaCategoryInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ mediaId, category, workOrderVersion }: UpdateWorkOrderMediaCategoryInput) =>
+      workOrdersApi.updateMediaCategory(workOrderId, mediaId, category, workOrderVersion),
+    onSuccess: () => {
+      invalidateBoardDetail(queryClient, workOrderId);
+      invalidateWorkOrders(queryClient);
+      toast.success("Category saved");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update category");
+    },
+  });
+}
+
+export function useDeleteWorkOrderMedia(
+  workOrderId: string | number,
+): UseMutationResult<void, Error, DeleteWorkOrderMediaInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ mediaId, workOrderVersion }: DeleteWorkOrderMediaInput) =>
+      workOrdersApi.deleteMedia(workOrderId, mediaId, workOrderVersion),
+    onSuccess: () => {
+      invalidateBoardDetail(queryClient, workOrderId);
+      invalidateWorkOrders(queryClient);
+      toast.success("File removed");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to remove file");
+    },
+  });
+}
+
+export function useUploadCompletionDoc(
+  workOrderId: string | number,
+): UseMutationResult<WorkOrderBoardCompletion, Error, UploadCompletionDocInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (params: UploadCompletionDocInput) =>
+      workOrdersApi.uploadCompletionDoc(workOrderId, params),
+    onSuccess: () => {
+      invalidateBoardDetail(queryClient, workOrderId);
+      invalidateWorkOrders(queryClient);
+      toast.success("Completion document uploaded");
+    },
+    onError: (error: Error) => {
+      if (error instanceof BoardPatchConflictError) {
+        invalidateBoardDetail(queryClient, workOrderId);
+        toast.error("Document is out of date. Refresh and try again.");
+        return;
+      }
+      toast.error(error.message || "Failed to upload completion document");
+    },
+  });
+}
+
+export function useChangeWorkOrderStatus(
+  workOrderId: string | number,
+): UseMutationResult<void, Error, string> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (status: string) => workOrdersApi.changeStatus(workOrderId, status),
+    onSuccess: (_data, status) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.detail(workOrderId) });
+      invalidateWorkOrders(queryClient);
+      toast.success(`Status changed to ${status}`);
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update status");
+    },
+  });
+}
+
+export function useChangeWorkOrderAssignment(
+  workOrderId: string | number,
+): UseMutationResult<string, Error, ChangeWorkOrderAssignmentInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ userId, userName }: ChangeWorkOrderAssignmentInput) =>
+      workOrdersApi.changeAssignment(workOrderId, userId).then(() => userName),
+    onSuccess: (userName) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.detail(workOrderId) });
+      invalidateWorkOrders(queryClient);
+      toast.success(`Assigned to ${userName || "Unassigned"}`);
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update assignment");
+    },
+  });
+}
+
+export function useDispatchToVendor(
+  workOrderId: string | number,
+): UseMutationResult<void, Error, DispatchToVendorPayload> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: workOrdersApi.dispatchToVendor,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.detail(workOrderId) });
+      invalidateWorkOrders(queryClient);
+      toast.success("Dispatched successfully");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to dispatch");
+    },
+  });
+}
+
+export function useUpdateDispatch(
+  dispatchId: string | number,
+  workOrderId: string | number,
+): UseMutationResult<void, Error, UpdateDispatchPayload> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: workOrdersApi.updateDispatch,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.dispatch(dispatchId) });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.detail(workOrderId) });
+      toast.success("Dispatch updated");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update dispatch");
+    },
+  });
+}
+
+export function useAddDispatchComment(
+  dispatchId: string | number,
+): UseMutationResult<DispatchComment, Error, AddDispatchCommentInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ text, sendEmail }: AddDispatchCommentInput) =>
+      workOrdersApi.addDispatchComment(dispatchId, text, sendEmail),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.dispatch(dispatchId) });
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to send message");
+    },
+  });
+}
+
+export function useUpdateChecklistItem(
+  dispatchId: string | number,
+): UseMutationResult<void, Error, UpdateChecklistItemInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ itemId, isCompleted, completedBy }: UpdateChecklistItemInput) =>
+      workOrdersApi.updateChecklistItem(itemId, isCompleted, completedBy),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.dispatch(dispatchId) });
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to update checklist item");
+    },
+  });
+}
+
+export function useAddChecklistItem(
+  dispatchId: string | number,
+): UseMutationResult<void, Error, string> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (itemText: string) => workOrdersApi.addChecklistItem(dispatchId, itemText),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.dispatch(dispatchId) });
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to add checklist item");
+    },
+  });
+}
+
+export function useAddDispatchSignoff(
+  dispatchId: string | number,
+): UseMutationResult<DispatchSignoff, Error, AddDispatchSignoffInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (input: AddDispatchSignoffInput) =>
+      workOrdersApi.addDispatchSignoff(dispatchId, input),
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.dispatch(dispatchId) });
+      toast.success(`${variables.signoffType} sign-off collected`);
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to save sign-off");
+    },
+  });
+}
+
+export function useVerifyDispatch(
+  dispatchId: string | number,
+  workOrderId: string | number,
+): UseMutationResult<void, Error, void> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => workOrdersApi.verifyDispatch(dispatchId),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.dispatch(dispatchId) });
+      void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.detail(workOrderId) });
+      toast.success("Dispatch verified");
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Failed to verify");
+    },
+  });
+}
diff --git a/src/domain/work-orders/use-cases/use-work-order-table-mutations.ts b/src/domain/work-orders/use-cases/use-work-order-table-mutations.ts
new file mode 100644
index 00000000..c0fbbe65
--- /dev/null
+++ b/src/domain/work-orders/use-cases/use-work-order-table-mutations.ts
@@ -0,0 +1,256 @@
+import { useMemo } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import {
+  boardPatchErrorMessage,
+  BoardPatchConflictError,
+  BoardPatchPartialSaveError,
+  BoardPatchValidationError,
+  NO_PERSISTABLE_FIELDS_MESSAGE,
+} from "@/domain/work-orders/errors/board-patch-errors";
+import { mapApiStatusToWizard } from "@/domain/work-orders/mappers/wizard-draft-mapper";
+import {
+  buildBoardPatchPayload,
+  expandTablePatchToBoardFieldOps,
+  isLocalOnlyTablePatch,
+} from "@/domain/work-orders/mappers/work-order-board-patch-mapper";
+import { mapWorkOrderTableRow } from "@/domain/work-orders/mappers/work-order-mapper";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { deriveDayFields } from "@/domain/work-orders/utils/table-day-utils";
+import { enrichTableRow } from "@/domain/work-orders/utils/table-filter-utils";
+import {
+  maybeAutoSchedulePatch,
+  mergeAutoSchedulePatch,
+} from "@/domain/work-orders/utils/wo-lifecycle-transitions";
+import { createWorkOrderPatchQueue } from "@/domain/work-orders/utils/work-order-patch-queue";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export { maybeAutoSchedulePatch };
+
+export type { WorkOrderTablePatch };
+
+export type WorkOrderTablePatchOptions = {
+  onSuccess?: () => void;
+  onError?: (error: Error) => void;
+};
+
+export type WorkOrderTablePatchFn = (
+  id: string | number,
+  patch: WorkOrderTablePatch,
+  options?: WorkOrderTablePatchOptions,
+) => void;
+
+export type WorkOrderTablePatchHandlers = {
+  onPatch: (id: string | number, patch: WorkOrderTablePatch) => void;
+  clearPatch: (id: string | number) => void;
+  getRow?: (id: string | number) => WorkOrderTableRow | undefined;
+};
+
+type PatchResult =
+  { kind: "local"; patch: WorkOrderTablePatch } | { kind: "board"; row: WorkOrderTableRow };
+
+async function applyBoardFieldOps(
+  id: string | number,
+  patch: WorkOrderTablePatch,
+  getRow: ((id: string | number) => WorkOrderTableRow | undefined) | undefined,
+): Promise<WorkOrderTableRow> {
+  const ops = expandTablePatchToBoardFieldOps(patch);
+  if (ops.length === 0) {
+    throw new BoardPatchValidationError("NoPersistableFields", NO_PERSISTABLE_FIELDS_MESSAGE);
+  }
+
+  const current = getRow?.(id);
+  if (!current?.rowVersion) {
+    throw new Error("Missing work order version for board patch. Refresh and retry.");
+  }
+
+  let latest = current;
+  let completedOps = 0;
+  for (const op of ops) {
+    try {
+      latest = await workOrdersApi.patchBoardField(id, buildBoardPatchPayload(op, latest));
+      completedOps += 1;
+    } catch (error) {
+      if (completedOps > 0) {
+        throw new BoardPatchPartialSaveError(latest, error);
+      }
+      throw error;
+    }
+  }
+
+  return latest;
+}
+
+/** Board fields (including completedDate) use PATCH …/board — never legacy EditWorkorder. */
+export async function runWorkOrderTablePatch(
+  id: string | number,
+  patch: WorkOrderTablePatch,
+  getRow: ((id: string | number) => WorkOrderTableRow | undefined) | undefined,
+): Promise<PatchResult> {
+  if (isLocalOnlyTablePatch(patch)) {
+    return { kind: "local", patch };
+  }
+
+  const boardRow = await applyBoardFieldOps(id, patch, getRow);
+  return { kind: "board", row: boardRow };
+}
+
+export function useWorkOrderTableMutations(
+  onPatchOrHandlers:
+    ((id: string | number, patch: WorkOrderTablePatch) => void) | WorkOrderTablePatchHandlers,
+  getRowArg?: (id: string | number) => WorkOrderTableRow | undefined,
+) {
+  const handlers: WorkOrderTablePatchHandlers =
+    typeof onPatchOrHandlers === "function"
+      ? {
+          onPatch: onPatchOrHandlers,
+          clearPatch: () => undefined,
+          getRow: getRowArg,
+        }
+      : onPatchOrHandlers;
+
+  const { onPatch, clearPatch, getRow } = handlers;
+  const queryClient = useQueryClient();
+  const enqueuePatch = useMemo(() => createWorkOrderPatchQueue(), []);
+
+  const invalidate = () => {
+    void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+  };
+
+  const patchMutation = useMutation({
+    meta: { suppressErrorToast: true },
+    mutationFn: ({
+      id,
+      persistPatch,
+      baseRow,
+    }: {
+      id: string | number;
+      patch: WorkOrderTablePatch;
+      persistPatch: WorkOrderTablePatch;
+      /** Server row from a just-settled patch; its rowVersion is fresher than the table snapshot. */
+      baseRow?: WorkOrderTableRow;
+    }) =>
+      enqueuePatch(id, () =>
+        runWorkOrderTablePatch(id, persistPatch, baseRow ? () => baseRow : getRow),
+      ),
+    onMutate: async ({ id, persistPatch }) => {
+      onPatch(id, persistPatch);
+    },
+    onSuccess: (result, { id }) => {
+      if (result.kind === "board") {
+        onPatch(id, result.row);
+      }
+      invalidate();
+    },
+    onError: (error: Error, { id }) => {
+      if (error instanceof BoardPatchPartialSaveError) {
+        onPatch(id, error.partialRow);
+        toast.error(error.message);
+        invalidate();
+        return;
+      }
+
+      if (error instanceof BoardPatchConflictError && error.currentState) {
+        onPatch(id, error.currentState);
+        toast.error(boardPatchErrorMessage(error));
+      } else {
+        clearPatch(id);
+        toast.error(boardPatchErrorMessage(error));
+      }
+      invalidate();
+    },
+  });
+
+  const resolvePatch = (id: string | number, patch: WorkOrderTablePatch) =>
+    mergeAutoSchedulePatch(getRow?.(id), patch);
+
+  const patchField: WorkOrderTablePatchFn = (id, patch, options) => {
+    const persistPatch = resolvePatch(id, patch);
+    void patchMutation.mutateAsync({ id, patch, persistPatch }).then(
+      () => options?.onSuccess?.(),
+      (error: Error) => options?.onError?.(error),
+    );
+  };
+
+  const patchFieldAsync = (
+    id: string | number,
+    patch: WorkOrderTablePatch,
+    baseRow?: WorkOrderTableRow,
+  ) => {
+    const persistPatch = baseRow ? mergeAutoSchedulePatch(baseRow, patch) : resolvePatch(id, patch);
+    return patchMutation.mutateAsync({ id, patch, persistPatch, baseRow });
+  };
+
+  return {
+    patchField,
+    patchFieldAsync,
+    isPending: patchMutation.isPending,
+  };
+}
+
+export function tableRowFromDetail(detail: Awaited<ReturnType<typeof workOrdersApi.getById>>) {
+  return enrichTableRow(
+    mapWorkOrderTableRow({
+      ...detail,
+      status: mapApiStatusToWizard(detail.status),
+      scheduledOn: detail.scheduledDate,
+      woNumber: detail.internalWONumber || detail.workOrderNumber,
+      dispatcherName: detail.assignedTo,
+      pm: detail.problem,
+      type: detail.source,
+    }),
+  );
+}
+
+/**
+ * Build a schedule table patch. Clearing the schedule optimistically clears
+ * `isAddOn`; day/week moves leave `isAddOn` for the board PATCH response.
+ */
+export function applySchedulePatch(
+  scheduledOn: string,
+  scheduleWeekOnly: boolean,
+): WorkOrderTablePatch {
+  if (scheduleWeekOnly) {
+    return {
+      scheduledOn: "",
+      targetWeek: scheduledOn,
+      scheduleWeekOnly: true,
+      scheduleEnd: "",
+      schedMode: "week",
+      ...deriveDayFields(""),
+    };
+  }
+  const trimmed = scheduledOn.trim();
+  if (!trimmed) {
+    return {
+      scheduledOn: "",
+      scheduleWeekOnly: false,
+      targetWeek: "",
+      scheduleEnd: "",
+      schedMode: undefined,
+      isAddOn: false,
+      ...deriveDayFields(""),
+    };
+  }
+  return {
+    scheduledOn: trimmed,
+    scheduleWeekOnly: false,
+    targetWeek: "",
+    scheduleEnd: "",
+    schedMode: "date",
+    ...deriveDayFields(trimmed),
+  };
+}
+
+/** Range lands on the first day; end/mode stay optimistic (no board API field). */
+export function applyScheduleRangePatch(start: string, end: string): WorkOrderTablePatch {
+  return {
+    ...applySchedulePatch(start, false),
+    scheduleEnd: end,
+    schedMode: "range",
+  };
+}
diff --git a/src/domain/work-orders/use-cases/use-work-order-uplifts.ts b/src/domain/work-orders/use-cases/use-work-order-uplifts.ts
new file mode 100644
index 00000000..3a94e733
--- /dev/null
+++ b/src/domain/work-orders/use-cases/use-work-order-uplifts.ts
@@ -0,0 +1,89 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  type UseMutationResult,
+  type UseQueryResult,
+} from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import { workOrderUpliftsApi } from "@/domain/work-orders/api/work-order-uplifts-api";
+import type {
+  CreateWorkOrderUpliftInput,
+  WorkOrderUplift,
+} from "@/domain/work-orders/types/work-order-uplift";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { requireQueryParam } from "@/lib/query/require-query-param";
+
+function invalidateUpliftQueries(
+  queryClient: ReturnType<typeof useQueryClient>,
+  workOrderId: string | number,
+): void {
+  void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.uplifts(workOrderId) });
+  void queryClient.invalidateQueries({ queryKey: queryKeys.workOrders.all });
+}
+
+export function useWorkOrderUplifts(
+  workOrderId: string | number | null | undefined,
+  meta?: { suppressErrorToast?: boolean },
+): UseQueryResult<WorkOrderUplift[], Error> {
+  return useQuery({
+    queryKey: queryKeys.workOrders.uplifts(workOrderId ?? ""),
+    queryFn: () =>
+      workOrderUpliftsApi.list(requireQueryParam(workOrderId ?? undefined, "Work order id")),
+    enabled: workOrderId != null && workOrderId !== "",
+    meta,
+  });
+}
+
+export function useCreateWorkOrderUplift(
+  workOrderId: string | number,
+): UseMutationResult<WorkOrderUplift, Error, CreateWorkOrderUpliftInput> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (input: CreateWorkOrderUpliftInput) =>
+      workOrderUpliftsApi.create(workOrderId, input),
+    onSuccess: () => {
+      invalidateUpliftQueries(queryClient, workOrderId);
+      toast.success("Uplift request created");
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to create uplift");
+    },
+  });
+}
+
+export function useCancelWorkOrderUplift(
+  workOrderId: string | number,
+): UseMutationResult<WorkOrderUplift, Error, string | number> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (upliftId: string | number) => workOrderUpliftsApi.cancel(workOrderId, upliftId),
+    onSuccess: () => {
+      invalidateUpliftQueries(queryClient, workOrderId);
+      toast.success("Uplift cancelled");
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to cancel uplift");
+    },
+  });
+}
+
+export function useRevokeWorkOrderUplift(
+  workOrderId: string | number,
+): UseMutationResult<WorkOrderUplift, Error, { upliftId: string | number; reason?: string }> {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ upliftId, reason }: { upliftId: string | number; reason?: string }) =>
+      workOrderUpliftsApi.revoke(workOrderId, upliftId, reason),
+    onSuccess: () => {
+      invalidateUpliftQueries(queryClient, workOrderId);
+      toast.success("Uplift revoked");
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to revoke uplift");
+    },
+  });
+}
diff --git a/src/domain/work-orders/use-cases/use-work-orders-list.ts b/src/domain/work-orders/use-cases/use-work-orders-list.ts
new file mode 100644
index 00000000..b05f3a8e
--- /dev/null
+++ b/src/domain/work-orders/use-cases/use-work-orders-list.ts
@@ -0,0 +1,77 @@
+import { keepPreviousData, useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import type {
+  WorkOrdersListParams,
+  WorkOrdersListResult,
+  WorkOrderUser,
+} from "@/domain/work-orders/types/work-order";
+import type {
+  WorkOrderBoardListResult,
+  WorkOrderBoardQueryParams,
+  WorkOrderBoardSearchQueryParams,
+} from "@/domain/work-orders/types/work-order-board";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+export function useWorkOrdersList(
+  params: WorkOrdersListParams,
+): UseQueryResult<WorkOrdersListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.workOrders.list(params),
+    queryFn: () => workOrdersApi.getList(params),
+    placeholderData: keepPreviousData,
+  });
+}
+
+export function useWorkOrdersBoard(
+  params: WorkOrderBoardQueryParams,
+  enabled = true,
+): UseQueryResult<WorkOrderBoardListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.workOrders.board(params),
+    queryFn: () => workOrdersApi.getBoard(params),
+    enabled,
+    placeholderData: keepPreviousData,
+  });
+}
+
+export function useWorkOrdersBoardSearch(
+  params: WorkOrderBoardSearchQueryParams,
+  enabled = true,
+): UseQueryResult<WorkOrderBoardListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.workOrders.boardSearch(params),
+    queryFn: () => workOrdersApi.searchBoard(params),
+    enabled,
+    placeholderData: keepPreviousData,
+  });
+}
+
+export function useWorkOrderUsers(): UseQueryResult<WorkOrderUser[], Error> {
+  return useQuery({
+    queryKey: queryKeys.workOrders.dispatchers(),
+    queryFn: () => workOrdersApi.fetchDispatchers(),
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+/** Full user directory for audit actor names (Schedulers are not on the dispatcher lookup). */
+export function useWorkOrderDirectory(): UseQueryResult<WorkOrderUser[], Error> {
+  return useQuery({
+    queryKey: queryKeys.workOrders.directory(),
+    queryFn: () => workOrdersApi.fetchUsers(),
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useWorkOrdersByLocation(
+  locationId: string | number | undefined,
+  search = "",
+  enabled = true,
+): UseQueryResult<WorkOrdersListResult, Error> {
+  return useQuery({
+    queryKey: queryKeys.workOrders.byLocation(locationId ?? "", search),
+    queryFn: () => workOrdersApi.getListByLocation(locationId!, search),
+    enabled: enabled && locationId !== undefined && locationId !== "",
+    staleTime: 30 * 1000,
+  });
+}
diff --git a/src/domain/work-orders/utils/advanced-filter-chip-builders.ts b/src/domain/work-orders/utils/advanced-filter-chip-builders.ts
new file mode 100644
index 00000000..edc707a0
--- /dev/null
+++ b/src/domain/work-orders/utils/advanced-filter-chip-builders.ts
@@ -0,0 +1,308 @@
+import { FLAG_COLORS } from "@/domain/work-orders/flag-colors";
+import {
+  ASSIGNEE_FILTER_UNASSIGNED,
+  DATE_RANGE_OPTIONS,
+  DOC_FILTER_LABELS,
+  type CompletionDocFilter,
+  type WorkOrderAdvancedFilters,
+} from "@/domain/work-orders/types/work-order-advanced-filters";
+import {
+  SEVERITY_LEVELS,
+  type WorkOrderSeverity,
+} from "@/domain/work-orders/types/work-order-severity";
+import {
+  UPLIFT_FILTER_LABELS,
+  type UpliftFilterStatus,
+} from "@/domain/work-orders/types/work-order-uplift-filter";
+import { MONTH_NAMES } from "@/domain/work-orders/utils/wizard-date-utils";
+
+export interface AdvancedFilterChip {
+  key: string;
+  group: string;
+  value?: string;
+  count?: number;
+  accent?: boolean;
+  clear: (filters: WorkOrderAdvancedFilters) => WorkOrderAdvancedFilters;
+}
+
+type ChipBuilderContext = {
+  siteNameOf: (id: string) => string;
+  dispatcherNameOf: (id: string) => string;
+};
+
+type SetChipInput = {
+  chips: AdvancedFilterChip[];
+  key: string;
+  group: string;
+  set: Set<string>;
+  nameOf: (value: string) => string;
+  clear: (filters: WorkOrderAdvancedFilters) => WorkOrderAdvancedFilters;
+};
+
+function pushSetChip(input: SetChipInput): void {
+  const { chips, key, group, set, nameOf, clear } = input;
+  if (!set.size) return;
+  if (set.size <= 2) {
+    chips.push({ key, group, value: [...set].map(nameOf).join(", "), clear });
+    return;
+  }
+  chips.push({ key, group, count: set.size, clear });
+}
+
+function fmtChipDate(iso: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) return "";
+  const [, m, d] = iso.split("-").map(Number);
+  return `${MONTH_NAMES[m - 1].slice(0, 3)} ${d}`;
+}
+
+function severityLabel(level: WorkOrderSeverity): string {
+  return SEVERITY_LEVELS[level].label;
+}
+
+export function appendDateChip(chips: AdvancedFilterChip[], filters: WorkOrderAdvancedFilters) {
+  if (filters.dateRange !== "this-week") {
+    const value =
+      filters.dateRange === "custom"
+        ? `${fmtChipDate(filters.customFrom) || "Any"} – ${fmtChipDate(filters.customTo) || "Any"}`
+        : (DATE_RANGE_OPTIONS.find((o) => o.key === filters.dateRange)?.label ?? "Custom");
+    chips.push({
+      key: "date",
+      group: "Date",
+      value,
+      clear: (current) => ({
+        ...current,
+        dateRange: "this-week",
+        customFrom: "",
+        customTo: "",
+      }),
+    });
+  }
+  if (!filters.unscheduledOnly) return;
+  chips.push({
+    key: "unscheduled",
+    group: "Date",
+    value: "Unscheduled",
+    clear: (current) => ({ ...current, unscheduledOnly: false }),
+  });
+}
+
+export function appendSetChips(
+  chips: AdvancedFilterChip[],
+  filters: WorkOrderAdvancedFilters,
+  ctx: ChipBuilderContext,
+) {
+  pushSetChip({
+    chips,
+    key: "sites",
+    group: "Site",
+    set: filters.sites,
+    nameOf: ctx.siteNameOf,
+    clear: (current) => ({ ...current, sites: new Set() }),
+  });
+
+  pushSetChip({
+    chips,
+    key: "types",
+    group: "Type of WO",
+    set: filters.types as Set<string>,
+    nameOf: (v) => v,
+    clear: (current) => ({ ...current, types: new Set() }),
+  });
+
+  pushSetChip({
+    chips,
+    key: "regions",
+    group: "Region",
+    set: filters.regions,
+    nameOf: (v) => v,
+    clear: (current) => ({ ...current, regions: new Set() }),
+  });
+}
+
+export function appendSeverityChip(chips: AdvancedFilterChip[], filters: WorkOrderAdvancedFilters) {
+  if (!filters.severities?.size) return;
+  const clearSeverity = (current: WorkOrderAdvancedFilters) => ({
+    ...current,
+    severities: new Set<WorkOrderSeverity>(),
+  });
+  if (filters.severities.size <= 2) {
+    chips.push({
+      key: "severity",
+      group: "Severity",
+      value: [...filters.severities].map(severityLabel).join(", "),
+      clear: clearSeverity,
+    });
+    return;
+  }
+  chips.push({
+    key: "severity",
+    group: "Severity",
+    count: filters.severities.size,
+    clear: clearSeverity,
+  });
+}
+
+export function appendDispatcherChips(
+  chips: AdvancedFilterChip[],
+  filters: WorkOrderAdvancedFilters,
+  ctx: ChipBuilderContext,
+) {
+  const realDispatchers = new Set(
+    [...filters.dispatchers].filter((id) => id !== ASSIGNEE_FILTER_UNASSIGNED),
+  );
+  pushSetChip({
+    chips,
+    key: "disp",
+    group: "Assigned to",
+    set: realDispatchers,
+    nameOf: ctx.dispatcherNameOf,
+    clear: (current) => ({
+      ...current,
+      dispatchers: new Set(
+        [...current.dispatchers].filter((id) => id === ASSIGNEE_FILTER_UNASSIGNED),
+      ),
+    }),
+  });
+
+  if (filters.dispatchers.has(ASSIGNEE_FILTER_UNASSIGNED)) {
+    chips.push({
+      key: "disp-unassigned",
+      group: "Assigned to",
+      value: "Unassigned",
+      accent: true,
+      clear: (current) => {
+        const next = new Set(current.dispatchers);
+        next.delete(ASSIGNEE_FILTER_UNASSIGNED);
+        return { ...current, dispatchers: next };
+      },
+    });
+  }
+}
+
+export function appendStatusPmVendorDocChips(
+  chips: AdvancedFilterChip[],
+  filters: WorkOrderAdvancedFilters,
+) {
+  pushSetChip({
+    chips,
+    key: "status",
+    group: "Status",
+    set: filters.statuses as Set<string>,
+    nameOf: (v) => v,
+    clear: (current) => ({ ...current, statuses: new Set() }),
+  });
+
+  pushSetChip({
+    chips,
+    key: "pm",
+    group: "Service",
+    set: filters.pmTypes,
+    nameOf: (v) => v,
+    clear: (current) => ({ ...current, pmTypes: new Set() }),
+  });
+
+  pushSetChip({
+    chips,
+    key: "vendor",
+    group: "Vendor / tech",
+    set: filters.vendorTechs,
+    nameOf: (v) => v,
+    clear: (current) => ({ ...current, vendorTechs: new Set() }),
+  });
+
+  pushSetChip({
+    chips,
+    key: "doc",
+    group: "Comp doc",
+    set: filters.docs as Set<string>,
+    nameOf: (v) => DOC_FILTER_LABELS[v as CompletionDocFilter] ?? v,
+    clear: (current) => ({ ...current, docs: new Set() }),
+  });
+}
+
+export function appendIndicatorChips(
+  chips: AdvancedFilterChip[],
+  filters: WorkOrderAdvancedFilters,
+) {
+  if (filters.rescheduled) {
+    chips.push({
+      key: "rescheduled",
+      group: "Indicator",
+      value: "Rescheduled",
+      clear: (current) => ({ ...current, rescheduled: false }),
+    });
+  }
+  if (filters.carriedOver) {
+    chips.push({
+      key: "carriedover",
+      group: "Indicator",
+      value: "Carried Over",
+      clear: (current) => ({ ...current, carriedOver: false }),
+    });
+  }
+  if (filters.addOn) {
+    chips.push({
+      key: "addon",
+      group: "Indicator",
+      value: "Add-On",
+      clear: (current) => ({ ...current, addOn: false }),
+    });
+  }
+  if (filters.avetaOnly) {
+    chips.push({
+      key: "aveta",
+      group: "Aveta",
+      value: "Required",
+      clear: (current) => ({ ...current, avetaOnly: false }),
+    });
+  }
+}
+
+export function appendFlagAndInternalChips(
+  chips: AdvancedFilterChip[],
+  filters: WorkOrderAdvancedFilters,
+) {
+  pushSetChip({
+    chips,
+    key: "flags",
+    group: "Flag",
+    set: filters.flagColors,
+    nameOf: (v) => FLAG_COLORS.find((c) => c.value === v)?.name ?? v,
+    clear: (current) => ({ ...current, flagColors: new Set() }),
+  });
+
+  if (filters.internalOnly) {
+    chips.push({
+      key: "internal",
+      group: "WO#",
+      value: "Internal (SH)",
+      clear: (current) => ({ ...current, internalOnly: false }),
+    });
+  }
+}
+
+export function appendUpliftChip(chips: AdvancedFilterChip[], filters: WorkOrderAdvancedFilters) {
+  if (!filters.hasUplift) return;
+  const clearUplift = (current: WorkOrderAdvancedFilters) => ({
+    ...current,
+    hasUplift: false,
+    upliftStatuses: new Set<UpliftFilterStatus>(),
+  });
+  if (filters.upliftStatuses.size) {
+    pushSetChip({
+      chips,
+      key: "uplift",
+      group: "Uplift",
+      set: filters.upliftStatuses as Set<string>,
+      nameOf: (v) => UPLIFT_FILTER_LABELS[v as UpliftFilterStatus] ?? v,
+      clear: clearUplift,
+    });
+    return;
+  }
+  chips.push({
+    key: "uplift",
+    group: "Uplift",
+    value: "Has uplift",
+    clear: clearUplift,
+  });
+}
diff --git a/src/domain/work-orders/utils/advanced-filter-predicates.ts b/src/domain/work-orders/utils/advanced-filter-predicates.ts
new file mode 100644
index 00000000..5217261b
--- /dev/null
+++ b/src/domain/work-orders/utils/advanced-filter-predicates.ts
@@ -0,0 +1,80 @@
+import type { WorkOrderAdvancedFilters } from "@/domain/work-orders/types/work-order-advanced-filters";
+import { ASSIGNEE_FILTER_UNASSIGNED } from "@/domain/work-orders/types/work-order-list";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { dateRangeFor } from "@/domain/work-orders/utils/advanced-filters-utils";
+
+type AdvancedFilterPredicate = (
+  row: WorkOrderTableRow,
+  filters: WorkOrderAdvancedFilters,
+) => boolean;
+
+const matchesDateRange: AdvancedFilterPredicate = (row, filters) => {
+  if (filters.unscheduledOnly) {
+    return !row.scheduledOn;
+  }
+  const [from, to] = dateRangeFor(filters);
+  return !row.scheduledOn || (row.scheduledOn >= from && row.scheduledOn <= to);
+};
+
+const matchesSite: AdvancedFilterPredicate = (row, filters) =>
+  !filters.sites.size || filters.sites.has(row.site);
+
+const matchesType: AdvancedFilterPredicate = (row, filters) => {
+  if (!filters.types.size) return true;
+  const overdueMatch = filters.types.has("Overdue") && row.isPastDue;
+  const typeMatch = filters.types.has(row.type as never);
+  return overdueMatch || typeMatch;
+};
+
+const matchesDispatcher: AdvancedFilterPredicate = (row, filters) => {
+  if (!filters.dispatchers.size) return true;
+  const unassignedMatch = filters.dispatchers.has(ASSIGNEE_FILTER_UNASSIGNED) && !row.dispatcherId;
+  const idMatch = !!row.dispatcherId && filters.dispatchers.has(row.dispatcherId);
+  return unassignedMatch || idMatch;
+};
+
+const matchesStatus: AdvancedFilterPredicate = (row, filters) =>
+  !filters.statuses.size || (!!row.status && filters.statuses.has(row.status as never));
+
+const matchesPmType: AdvancedFilterPredicate = (row, filters) =>
+  !filters.pmTypes.size || filters.pmTypes.has(row.pm);
+
+const matchesVendorTech: AdvancedFilterPredicate = (row, filters) =>
+  !filters.vendorTechs.size ||
+  filters.vendorTechs.has(row.tech) ||
+  filters.vendorTechs.has(row.company);
+
+const matchesDoc: AdvancedFilterPredicate = (row, filters) =>
+  !filters.docs.size || filters.docs.has(row.docStatus as never);
+
+const matchesRescheduled: AdvancedFilterPredicate = (row, filters) =>
+  !filters.rescheduled || row.rescheduleCount >= 2;
+
+const matchesCarriedOver: AdvancedFilterPredicate = (row, filters) =>
+  !filters.carriedOver || row.carriedOver >= 2;
+
+const matchesAvetaOnly: AdvancedFilterPredicate = (row, filters) =>
+  !filters.avetaOnly || row.avetaRequired === true;
+
+const matchesInternalOnly: AdvancedFilterPredicate = (row, filters) =>
+  !filters.internalOnly || row.woNumber.toUpperCase().startsWith("SH");
+
+const matchesFlagColors: AdvancedFilterPredicate = (row, filters) =>
+  !filters.flagColors.size || (!!row.flagColor && filters.flagColors.has(row.flagColor));
+
+/** One predicate per filter dimension; a row matches when every predicate is true. */
+export const ADVANCED_FILTER_PREDICATES: AdvancedFilterPredicate[] = [
+  matchesDateRange,
+  matchesSite,
+  matchesType,
+  matchesDispatcher,
+  matchesStatus,
+  matchesPmType,
+  matchesVendorTech,
+  matchesDoc,
+  matchesRescheduled,
+  matchesCarriedOver,
+  matchesAvetaOnly,
+  matchesInternalOnly,
+  matchesFlagColors,
+];
diff --git a/src/domain/work-orders/utils/advanced-filters-utils.ts b/src/domain/work-orders/utils/advanced-filters-utils.ts
new file mode 100644
index 00000000..3f8f5ce5
--- /dev/null
+++ b/src/domain/work-orders/utils/advanced-filters-utils.ts
@@ -0,0 +1,149 @@
+import {
+  EMPTY_ADVANCED_FILTERS,
+  type DateRangeKey,
+  type WorkOrderAdvancedFilters,
+} from "@/domain/work-orders/types/work-order-advanced-filters";
+import {
+  appendDateChip,
+  appendDispatcherChips,
+  appendFlagAndInternalChips,
+  appendIndicatorChips,
+  appendSetChips,
+  appendSeverityChip,
+  appendStatusPmVendorDocChips,
+  appendUpliftChip,
+  type AdvancedFilterChip,
+} from "@/domain/work-orders/utils/advanced-filter-chip-builders";
+import { addDaysIso, mondayOf, pad2, todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+
+export type { AdvancedFilterChip } from "@/domain/work-orders/utils/advanced-filter-chip-builders";
+
+function cloneFilters(filters: WorkOrderAdvancedFilters): WorkOrderAdvancedFilters {
+  return {
+    ...EMPTY_ADVANCED_FILTERS,
+    ...filters,
+    sites: new Set(filters.sites),
+    types: new Set(filters.types),
+    severities: new Set(filters.severities ?? []),
+    dispatchers: new Set(filters.dispatchers),
+    regions: new Set(filters.regions ?? []),
+    statuses: new Set(filters.statuses),
+    pmTypes: new Set(filters.pmTypes),
+    vendorTechs: new Set(filters.vendorTechs),
+    docs: new Set(filters.docs),
+    flagColors: new Set(filters.flagColors ?? []),
+    upliftStatuses: new Set(filters.upliftStatuses ?? []),
+    unscheduledOnly: Boolean(filters.unscheduledOnly),
+  };
+}
+
+const ADVANCED_FILTER_ACTIVE_SIGNALS = (filters: WorkOrderAdvancedFilters): boolean[] => [
+  filters.dateRange !== "this-week",
+  Boolean(filters.sites?.size),
+  Boolean(filters.types?.size),
+  Boolean(filters.severities?.size),
+  Boolean(filters.dispatchers?.size),
+  Boolean(filters.regions?.size),
+  Boolean(filters.statuses?.size),
+  filters.rescheduled,
+  filters.carriedOver,
+  filters.addOn,
+  filters.avetaOnly,
+  Boolean(filters.pmTypes?.size),
+  Boolean(filters.vendorTechs?.size),
+  Boolean(filters.docs?.size),
+  Boolean(filters.flagColors?.size),
+  filters.internalOnly,
+  filters.hasUplift,
+  filters.unscheduledOnly,
+];
+
+export function countAdvancedFilters(filters: WorkOrderAdvancedFilters): number {
+  return ADVANCED_FILTER_ACTIVE_SIGNALS(filters).filter(Boolean).length;
+}
+
+function monthStart(y: number, m: number): string {
+  return `${y}-${pad2(m + 1)}-01`;
+}
+
+function monthEnd(y: number, m: number): string {
+  return `${y}-${pad2(m + 1)}-${pad2(new Date(y, m + 1, 0).getDate())}`;
+}
+
+export function dateRangeFor(filters: WorkOrderAdvancedFilters): [string, string] {
+  const today = todayIso();
+  const ty = Number(today.slice(0, 4));
+  const tm = Number(today.slice(5, 7)) - 1;
+  const thisWeekMonday = mondayOf(today);
+  const lastWeekMonday = addDaysIso(thisWeekMonday, -7);
+
+  switch (filters.dateRange) {
+    case "this-week":
+      return [thisWeekMonday, addDaysIso(thisWeekMonday, 4)];
+    case "last-week":
+      return [lastWeekMonday, addDaysIso(lastWeekMonday, 4)];
+    case "this-month":
+      return [monthStart(ty, tm), monthEnd(ty, tm)];
+    case "last-3-months": {
+      const d = new Date(ty, tm - 2, 1);
+      return [monthStart(d.getFullYear(), d.getMonth()), monthEnd(ty, tm)];
+    }
+    case "next-week":
+      return [today, addDaysIso(today, 7)];
+    case "next-month":
+      return [today, addDaysIso(today, 30)];
+    case "custom":
+      return [filters.customFrom || "0000-01-01", filters.customTo || "9999-12-31"];
+  }
+}
+
+export function buildAdvancedFilterChips(
+  filters: WorkOrderAdvancedFilters,
+  options?: {
+    siteNameOf?: (id: string) => string;
+    dispatcherNameOf?: (id: string) => string;
+  },
+): AdvancedFilterChip[] {
+  const chips: AdvancedFilterChip[] = [];
+  const ctx = {
+    siteNameOf: options?.siteNameOf ?? ((v: string) => v),
+    dispatcherNameOf: options?.dispatcherNameOf ?? ((v: string) => v),
+  };
+
+  appendDateChip(chips, filters);
+  appendSetChips(chips, filters, ctx);
+  appendSeverityChip(chips, filters);
+  appendDispatcherChips(chips, filters, ctx);
+  appendStatusPmVendorDocChips(chips, filters);
+  appendIndicatorChips(chips, filters);
+  appendFlagAndInternalChips(chips, filters);
+  appendUpliftChip(chips, filters);
+
+  return chips;
+}
+
+export function clearAdvancedFilterGroup(
+  filters: WorkOrderAdvancedFilters,
+  chipKey: string,
+): WorkOrderAdvancedFilters | null {
+  const chips = buildAdvancedFilterChips(filters);
+  const chip = chips.find((c) => c.key === chipKey);
+  if (!chip) return filters;
+  const next = chip.clear(cloneFilters(filters));
+  return countAdvancedFilters(next) > 0 ? next : null;
+}
+
+export function getInitialAdvancedFilters(
+  applied: WorkOrderAdvancedFilters | null,
+): WorkOrderAdvancedFilters {
+  if (!applied) return cloneFilters(EMPTY_ADVANCED_FILTERS);
+  return cloneFilters(applied);
+}
+
+export function cloneAdvancedFilters(filters: WorkOrderAdvancedFilters): WorkOrderAdvancedFilters {
+  return cloneFilters(filters);
+}
+
+export function isDefaultDateRange(dateRange: DateRangeKey): boolean {
+  return dateRange === "this-week";
+}
diff --git a/src/domain/work-orders/utils/apply-board-row-order-on-schedule-change.ts b/src/domain/work-orders/utils/apply-board-row-order-on-schedule-change.ts
new file mode 100644
index 00000000..7d467bb8
--- /dev/null
+++ b/src/domain/work-orders/utils/apply-board-row-order-on-schedule-change.ts
@@ -0,0 +1,46 @@
+import type { BoardRowOrderByDay } from "@/domain/work-orders/utils/board-row-order-storage";
+import {
+  moveIdToDayOrder,
+  removeIdFromRowOrder,
+  saveBoardRowOrder,
+  transferIdToDestinationWeekOrder,
+} from "@/domain/work-orders/utils/board-row-order-storage";
+import { deriveDayFields } from "@/domain/work-orders/utils/table-day-utils";
+import { mondayOf } from "@/domain/work-orders/utils/wizard-date-utils";
+
+export type ApplyBoardRowOrderOnScheduleChangeInput = {
+  weekMonday: string;
+  ownerId: string;
+  id: string;
+  scheduledOn: string;
+  previousDayGroup?: string;
+};
+
+export function applyBoardRowOrderOnScheduleChange(
+  orderByDay: BoardRowOrderByDay,
+  input: ApplyBoardRowOrderOnScheduleChangeInput,
+): BoardRowOrderByDay {
+  const { weekMonday, ownerId, id, scheduledOn, previousDayGroup } = input;
+  const nextDayGroup = deriveDayFields(scheduledOn).dayGroup;
+  if (!previousDayGroup || previousDayGroup === nextDayGroup) {
+    return orderByDay;
+  }
+
+  const destinationWeekMonday = mondayOf(scheduledOn.slice(0, 10));
+  if (destinationWeekMonday !== weekMonday) {
+    transferIdToDestinationWeekOrder({
+      sourceWeekMonday: weekMonday,
+      destinationWeekMonday,
+      ownerId,
+      id,
+      nextDayGroup,
+    });
+    return removeIdFromRowOrder(orderByDay, id);
+  }
+
+  const next = moveIdToDayOrder(orderByDay, id, nextDayGroup);
+  if (next !== orderByDay) {
+    saveBoardRowOrder(weekMonday, next, ownerId);
+  }
+  return next;
+}
diff --git a/src/domain/work-orders/utils/appt-time-selection.ts b/src/domain/work-orders/utils/appt-time-selection.ts
new file mode 100644
index 00000000..3ed8c19b
--- /dev/null
+++ b/src/domain/work-orders/utils/appt-time-selection.ts
@@ -0,0 +1,33 @@
+import {
+  calcDuration,
+  formatApptTimeValue,
+  parseApptTime,
+} from "@/domain/work-orders/utils/wizard-date-utils";
+
+export function apptTimePopoverHint(start: string, end: string): string {
+  if (start && end) {
+    const duration = calcDuration(start, end);
+    return duration ? `Duration: ${duration}` : "—";
+  }
+  if (start) {
+    return "Pick end (optional)";
+  }
+  return "Pick a start time";
+}
+
+export function commitApptTimeSelection(
+  start: string,
+  end: string,
+  apptTime: string,
+  onSave: (value: string) => void,
+): void {
+  if (start) {
+    onSave(formatApptTimeValue(start, end));
+    return;
+  }
+  const parsed = parseApptTime(apptTime);
+  const isRawUnparsed = Boolean(apptTime.trim()) && !parsed.start;
+  if (!isRawUnparsed) {
+    onSave("");
+  }
+}
diff --git a/src/domain/work-orders/utils/board-audit-action-rules.ts b/src/domain/work-orders/utils/board-audit-action-rules.ts
new file mode 100644
index 00000000..e522356f
--- /dev/null
+++ b/src/domain/work-orders/utils/board-audit-action-rules.ts
@@ -0,0 +1,200 @@
+import { SEVERITY_LEVELS } from "@/domain/work-orders/types/work-order-severity";
+import type { WorkOrderAuditEntry } from "@/domain/work-orders/types/work-order-detail";
+
+export type AuditActionSource = Pick<
+  WorkOrderAuditEntry,
+  "action" | "fieldName" | "oldValue" | "newValue"
+>;
+
+export type FormattedAuditValue = {
+  text: string;
+  /** Per-item quotes already applied; omit outer quotes in sentence templates. */
+  isQuotedList: boolean;
+};
+
+export function wrapAuditValue(value: FormattedAuditValue): string {
+  if (!value.text) return value.text;
+  return value.isQuotedList ? value.text : `"${value.text}"`;
+}
+
+export type AuditActionRuleContext = {
+  entry: AuditActionSource;
+  fieldKey: string;
+  actionKey: string;
+  oldValue: FormattedAuditValue;
+  newValue: FormattedAuditValue;
+};
+
+export type AuditActionRule = (ctx: AuditActionRuleContext) => string | null;
+
+function formatSeverityAuditLabel(raw: string): string {
+  const n = Number(raw.trim());
+  if (n === 1 || n === 2 || n === 3 || n === 4 || n === 5) {
+    return SEVERITY_LEVELS[n].label;
+  }
+  const sevMatch = raw.trim().match(/^sev\s*([1-5])$/i);
+  if (sevMatch) {
+    return `SEV ${sevMatch[1]}`;
+  }
+  return raw;
+}
+
+const CLEARED_AUDIT_VALUE: FormattedAuditValue = { text: "—", isQuotedList: false };
+
+/** `from X to Y` whenever the previous value is known; a cleared value reads as "—". */
+function formatFieldChangeSentence(
+  label: string,
+  oldValue: FormattedAuditValue,
+  newValue: FormattedAuditValue,
+): string | null {
+  if (!oldValue.text && !newValue.text) return null;
+  const next = wrapAuditValue(newValue.text ? newValue : CLEARED_AUDIT_VALUE);
+  if (oldValue.text) {
+    return `Changed ${label} from ${wrapAuditValue(oldValue)} to ${next}`;
+  }
+  return `Changed ${label} to ${next}`;
+}
+
+function tryTypeRule({
+  fieldKey,
+  actionKey,
+  oldValue,
+  newValue,
+}: AuditActionRuleContext): string | null {
+  const matches =
+    fieldKey === "type" ||
+    fieldKey === "workordertype" ||
+    fieldKey === "wotype" ||
+    actionKey === "typechanged" ||
+    actionKey.includes("workordertype");
+  if (!matches) return null;
+
+  return formatFieldChangeSentence("Type", oldValue, newValue);
+}
+
+function severityValue(value: FormattedAuditValue): FormattedAuditValue {
+  return value.text ? { text: formatSeverityAuditLabel(value.text), isQuotedList: false } : value;
+}
+
+function trySeverityRule({
+  fieldKey,
+  actionKey,
+  oldValue,
+  newValue,
+}: AuditActionRuleContext): string | null {
+  const matches = fieldKey.includes("severity") || actionKey.includes("severity");
+  if (!matches) return null;
+
+  return formatFieldChangeSentence("Severity", severityValue(oldValue), severityValue(newValue));
+}
+
+function tryStatusRule({
+  fieldKey,
+  actionKey,
+  oldValue,
+  newValue,
+}: AuditActionRuleContext): string | null {
+  const matches =
+    fieldKey.includes("status") || fieldKey === "lifecyclestatus" || actionKey.includes("status");
+  if (!matches || !newValue.text) return null;
+
+  if (oldValue.text) {
+    return `Changed status from ${wrapAuditValue(oldValue)} to ${wrapAuditValue(newValue)}`;
+  }
+  return `Changed status to ${wrapAuditValue(newValue)}`;
+}
+
+function tryApptRule({
+  fieldKey,
+  actionKey,
+  oldValue,
+  newValue,
+}: AuditActionRuleContext): string | null {
+  const matches =
+    fieldKey.includes("appt") || fieldKey.includes("appointment") || actionKey.includes("appt");
+  if (!matches) return null;
+
+  if (oldValue.text && newValue.text) {
+    return `Changed appt time from ${wrapAuditValue(oldValue)} to ${wrapAuditValue(newValue)}`;
+  }
+  if (newValue.text) return `Changed appt time to ${wrapAuditValue(newValue)}`;
+
+  return null;
+}
+
+function tryScheduleRule({ fieldKey, actionKey, newValue }: AuditActionRuleContext): string | null {
+  const matches =
+    fieldKey.includes("scheduled") ||
+    fieldKey === "schedule" ||
+    fieldKey.includes("scheduledate") ||
+    fieldKey.includes("duedate") ||
+    actionKey === "rescheduled" ||
+    actionKey.includes("reschedule");
+  if (!matches) return null;
+
+  if (newValue.text) return `Changed schedule to ${wrapAuditValue(newValue)}`;
+
+  return "Rescheduled work order";
+}
+
+function tryCarriedOverRule({ fieldKey, actionKey, entry }: AuditActionRuleContext): string | null {
+  const matches =
+    fieldKey.includes("carriedover") ||
+    actionKey === "weekrolled" ||
+    actionKey.includes("carryover");
+  if (!matches) return null;
+
+  const increment = Number(entry.newValue?.trim() ?? "");
+  if (Number.isFinite(increment) && increment > 0) {
+    return `Carried over to the next week (increment #${increment})`;
+  }
+
+  return "Carried over to the next week";
+}
+
+function tryPastDueRule({ fieldKey, actionKey }: AuditActionRuleContext): string | null {
+  const matches =
+    fieldKey.includes("pastdue") || actionKey.includes("pastdue") || actionKey === "markedpastdue";
+  if (!matches) return null;
+
+  return "WO marked as Past Due. Schedule On has passed without completion.";
+}
+
+function tryCreatedRule({ fieldKey, actionKey }: AuditActionRuleContext): string | null {
+  const matches =
+    fieldKey === "created" || actionKey === "workordercreated" || actionKey === "created";
+  if (!matches) return null;
+
+  return "Work order created in the system.";
+}
+
+function tryAssignedToRule({
+  fieldKey,
+  actionKey,
+  newValue,
+}: AuditActionRuleContext): string | null {
+  const matches =
+    fieldKey === "assignto" ||
+    fieldKey === "assignedto" ||
+    fieldKey === "assigneeid" ||
+    fieldKey === "dispatcherid" ||
+    actionKey === "assignmentchanged" ||
+    actionKey.includes("changeassignment");
+  if (!matches) return null;
+
+  const value = newValue.text ? wrapAuditValue(newValue) : '"—"';
+  return `Changed Assigned To to ${value}`;
+}
+
+/** Applied in order; the first non-null result wins. */
+export const BOARD_AUDIT_ACTION_RULES: AuditActionRule[] = [
+  tryStatusRule,
+  tryTypeRule,
+  trySeverityRule,
+  tryApptRule,
+  tryScheduleRule,
+  tryCarriedOverRule,
+  tryPastDueRule,
+  tryAssignedToRule,
+  tryCreatedRule,
+];
diff --git a/src/domain/work-orders/utils/board-query-params.ts b/src/domain/work-orders/utils/board-query-params.ts
new file mode 100644
index 00000000..c10519b8
--- /dev/null
+++ b/src/domain/work-orders/utils/board-query-params.ts
@@ -0,0 +1,271 @@
+import { ASSIGNEE_FILTER_UNASSIGNED } from "@/domain/work-orders/types/work-order-list";
+import {
+  EMPTY_ADVANCED_FILTERS,
+  type WorkOrderAdvancedFilters,
+} from "@/domain/work-orders/types/work-order-advanced-filters";
+import type { WorkOrderBarFilters } from "@/domain/work-orders/types/work-order-list-filters";
+import {
+  BOARD_DISPATCHER_UNASSIGNED,
+  DATE_RANGE_TO_PRESET,
+  DOC_STATUS_API,
+  LIFECYCLE_STATUS_API,
+  NON_TERMINAL_LIFECYCLE_STATUSES,
+  type WorkOrderBoardQueryParams,
+  type WorkOrderBoardSearchQueryParams,
+} from "@/domain/work-orders/types/work-order-board";
+import { mapWizardTypeToApi } from "@/domain/work-orders/mappers/work-order-board-mapper";
+import { weekRange } from "@/domain/work-orders/utils/list-week-utils";
+import type { CompletionDocFilter } from "@/domain/work-orders/types/work-order-advanced-filters";
+import type { WizardWOStatus, WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+export const BOARD_SEARCH_MAX_PAGE_SIZE = 200;
+
+/** Wide Custom window so applied advanced search is not pinned to ThisWeek. */
+export const ADVANCED_SEARCH_ALL_WEEKS_FROM = "2000-01-01";
+export const ADVANCED_SEARCH_ALL_WEEKS_TO = "2099-12-31";
+
+/**
+ * Wide Custom window for SH-165. GET /board/search defaults omitted
+ * `datePreset` to ThisWeek (`WorkOrderSearchDateRangeResolver`), which would
+ * hide scheduled-unassigned WOs outside the current week.
+ */
+export const UNASSIGNED_QUEUE_DATE_FROM = "1970-01-01";
+export const UNASSIGNED_QUEUE_DATE_TO = "2099-12-31";
+
+function toBoardDispatcherId(id: string): string {
+  if (id === ASSIGNEE_FILTER_UNASSIGNED || id === BOARD_DISPATCHER_UNASSIGNED) {
+    return BOARD_DISPATCHER_UNASSIGNED;
+  }
+  return id;
+}
+
+function mapDispatchers(ids: Iterable<string>): string[] | undefined {
+  const list = [...ids].map(toBoardDispatcherId);
+  return list.length > 0 ? list : undefined;
+}
+
+/** Maps UI type filters to API `types` + separate `overdue` flag. Overdue is never sent as types=99. */
+function mapWoTypeFilters(types: Iterable<WOType | string>): {
+  types?: number[];
+  overdue?: boolean;
+} {
+  const list: number[] = [];
+  let overdue = false;
+  for (const type of types) {
+    if (type === "All") {
+      continue;
+    }
+    if (type === "Overdue") {
+      overdue = true;
+      continue;
+    }
+    const api = mapWizardTypeToApi(type as WOType);
+    if (api != null) {
+      list.push(api);
+    }
+  }
+  return {
+    types: list.length > 0 ? list : undefined,
+    overdue: overdue || undefined,
+  };
+}
+
+function mapStatuses(statuses: Iterable<WizardWOStatus | string>): number[] | undefined {
+  const list: number[] = [];
+  for (const status of statuses) {
+    const value = LIFECYCLE_STATUS_API[status as WizardWOStatus];
+    if (typeof value === "number") {
+      list.push(value);
+    } else if (status === "Canceled" || status === "Cancelled") {
+      list.push(LIFECYCLE_STATUS_API.Canceled);
+    }
+  }
+  return list.length > 0 ? list : undefined;
+}
+
+function mapDocStatuses(docs: Iterable<CompletionDocFilter>): number[] | undefined {
+  const list: number[] = [];
+  for (const doc of docs) {
+    if (doc === "Yes") list.push(DOC_STATUS_API.Yes);
+    else if (doc === "No") list.push(DOC_STATUS_API.No);
+    else if (doc === "NN") list.push(DOC_STATUS_API.NotNeeded);
+  }
+  return list.length > 0 ? list : undefined;
+}
+
+function resolveVendorIds(
+  vendorTechs: Iterable<string>,
+  vendorIdsByCompanyName?: Map<string, number>,
+): number[] | undefined {
+  if (!vendorIdsByCompanyName) return undefined;
+  const vendorIds: number[] = [];
+  for (const name of vendorTechs) {
+    const id = vendorIdsByCompanyName.get(name);
+    if (typeof id === "number") {
+      vendorIds.push(id);
+    }
+  }
+  return vendorIds.length > 0 ? vendorIds : undefined;
+}
+
+function mapSearchFacetParams(
+  filters: WorkOrderAdvancedFilters,
+): Pick<
+  WorkOrderBoardSearchQueryParams,
+  | "severities"
+  | "rescheduled"
+  | "carriedOver"
+  | "addOn"
+  | "avetaOnly"
+  | "flagColors"
+  | "internalOnly"
+  | "hasUplift"
+  | "upliftStatuses"
+> {
+  return {
+    severities: filters.severities?.size ? [...filters.severities] : undefined,
+    rescheduled: filters.rescheduled || undefined,
+    carriedOver: filters.carriedOver || undefined,
+    addOn: filters.addOn || undefined,
+    avetaOnly: filters.avetaOnly || undefined,
+    flagColors: filters.flagColors?.size ? [...filters.flagColors] : undefined,
+    internalOnly: filters.internalOnly || undefined,
+    hasUplift: filters.hasUplift || undefined,
+    upliftStatuses:
+      filters.hasUplift && filters.upliftStatuses?.size ? [...filters.upliftStatuses] : undefined,
+  };
+}
+
+/** Build GET /board query from weekly filter bar. */
+export function toBoardQueryParams(
+  bar: WorkOrderBarFilters,
+  search: string,
+): WorkOrderBoardQueryParams {
+  const [, weekTo] = weekRange(bar.weekMonday);
+  const typeFilters = bar.types.size > 0 ? mapWoTypeFilters(bar.types) : {};
+
+  return {
+    weekStart: bar.weekMonday,
+    weekEnd: weekTo,
+    dispatchers: mapDispatchers(bar.dispatcherIds),
+    types: typeFilters.types,
+    overdue: typeFilters.overdue,
+    search: search.trim().length >= 2 ? search.trim() : undefined,
+  };
+}
+
+function resolveAdvancedSearchDate(filters: WorkOrderAdvancedFilters): {
+  datePreset?: WorkOrderBoardSearchQueryParams["datePreset"];
+  dateFrom?: string;
+  dateTo?: string;
+} {
+  // SH-338: server-side unscheduledOnly owns the date-range exemption; the
+  // client must not fake a Custom window and sends no date params.
+  if (filters.unscheduledOnly) {
+    return {};
+  }
+  if (filters.dateRange === EMPTY_ADVANCED_FILTERS.dateRange) {
+    return {
+      datePreset: "Custom",
+      dateFrom: ADVANCED_SEARCH_ALL_WEEKS_FROM,
+      dateTo: ADVANCED_SEARCH_ALL_WEEKS_TO,
+    };
+  }
+
+  const datePreset = DATE_RANGE_TO_PRESET[filters.dateRange];
+  if (datePreset === "Custom") {
+    return {
+      datePreset,
+      dateFrom: filters.customFrom || undefined,
+      dateTo: filters.customTo || undefined,
+    };
+  }
+
+  return { datePreset };
+}
+
+/** Build GET /board/search query from advanced filters (+ optional bar/search). */
+export function toBoardSearchQueryParams(input: {
+  filters: WorkOrderAdvancedFilters;
+  search?: string;
+  page?: number;
+  pageSize?: number;
+  sortBy?: string;
+  sortDir?: string;
+  /** Optional company-name → vendorId resolution. */
+  vendorIdsByCompanyName?: Map<string, number>;
+}): WorkOrderBoardSearchQueryParams {
+  const { filters } = input;
+  const date = resolveAdvancedSearchDate(filters);
+  const pageSize = Math.min(
+    input.pageSize ?? BOARD_SEARCH_MAX_PAGE_SIZE,
+    BOARD_SEARCH_MAX_PAGE_SIZE,
+  );
+
+  const typeFilters = mapWoTypeFilters(filters.types);
+  const trimmedSearch = input.search?.trim();
+  const search = trimmedSearch && trimmedSearch.length >= 2 ? trimmedSearch : undefined;
+
+  return {
+    page: input.page ?? 0,
+    pageSize,
+    search,
+    datePreset: date.datePreset,
+    dateFrom: date.dateFrom,
+    dateTo: date.dateTo,
+    sites: filters.sites.size > 0 ? [...filters.sites] : undefined,
+    types: typeFilters.types,
+    overdue: typeFilters.overdue,
+    dispatchers: mapDispatchers(filters.dispatchers),
+    regions: filters.regions.size > 0 ? [...filters.regions] : undefined,
+    statuses: mapStatuses(filters.statuses),
+    pmTypes: filters.pmTypes.size > 0 ? [...filters.pmTypes] : undefined,
+    vendorIds: resolveVendorIds(filters.vendorTechs, input.vendorIdsByCompanyName),
+    docStatuses: mapDocStatuses(filters.docs),
+    unscheduledOnly: filters.unscheduledOnly || undefined,
+    ...mapSearchFacetParams(filters),
+    sortBy: input.sortBy || "scheduledDate",
+    sortDir: input.sortDir === "desc" ? "desc" : "asc",
+  };
+}
+
+/** ky/URLSearchParams-friendly object; arrays become repeated keys. */
+export function buildBoardSearchParamsRecord(
+  params: WorkOrderBoardQueryParams | WorkOrderBoardSearchQueryParams,
+): Record<string, string | number | boolean | (string | number)[]> {
+  const out: Record<string, string | number | boolean | (string | number)[]> = {};
+
+  for (const [key, value] of Object.entries(params)) {
+    if (value === undefined || value === null || value === "") {
+      continue;
+    }
+    if (Array.isArray(value)) {
+      if (value.length === 0) continue;
+      out[key] = value;
+      continue;
+    }
+    out[key] = value as string | number | boolean;
+  }
+
+  return out;
+}
+
+export function woTypeFilterIsOverdue(type: string): boolean {
+  return type === "Overdue";
+}
+
+/** Week-independent GET /board/search params for the pinned Unassigned queue. */
+export function toUnassignedQueueQueryParams(
+  page = 0,
+  pageSize = BOARD_SEARCH_MAX_PAGE_SIZE,
+): WorkOrderBoardSearchQueryParams {
+  return {
+    page,
+    pageSize: Math.min(pageSize || BOARD_SEARCH_MAX_PAGE_SIZE, BOARD_SEARCH_MAX_PAGE_SIZE),
+    dispatchers: [BOARD_DISPATCHER_UNASSIGNED],
+    statuses: [...NON_TERMINAL_LIFECYCLE_STATUSES],
+    datePreset: "Custom",
+    dateFrom: UNASSIGNED_QUEUE_DATE_FROM,
+    dateTo: UNASSIGNED_QUEUE_DATE_TO,
+  };
+}
diff --git a/src/domain/work-orders/utils/board-row-order-storage.ts b/src/domain/work-orders/utils/board-row-order-storage.ts
new file mode 100644
index 00000000..18b7230c
--- /dev/null
+++ b/src/domain/work-orders/utils/board-row-order-storage.ts
@@ -0,0 +1,248 @@
+export type BoardRowOrderByDay = Record<string, string[]>;
+
+const STORAGE_PREFIX = "shoc:wo-board-row-order:v1:";
+
+export function boardRowOrderStorageKey(weekMonday: string, ownerId = ""): string {
+  const owner = ownerId.trim() || "local";
+  return `${STORAGE_PREFIX}${owner}:${weekMonday}`;
+}
+
+export function legacyBoardRowOrderStorageKey(weekMonday: string): string {
+  return `${STORAGE_PREFIX}${weekMonday}`;
+}
+
+function isStringArray(value: unknown): value is string[] {
+  return Array.isArray(value) && value.every((item) => typeof item === "string");
+}
+
+function isBoardRowOrderByDay(value: unknown): value is BoardRowOrderByDay {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) {
+    return false;
+  }
+  return Object.values(value).every(isStringArray);
+}
+
+function readStoredOrder(key: string): BoardRowOrderByDay {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) {
+      return {};
+    }
+    const parsed: unknown = JSON.parse(raw);
+    return isBoardRowOrderByDay(parsed) ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+export function loadBoardRowOrder(weekMonday: string, ownerId = ""): BoardRowOrderByDay {
+  if (typeof window === "undefined" || !weekMonday) {
+    return {};
+  }
+
+  const scoped = readStoredOrder(boardRowOrderStorageKey(weekMonday, ownerId));
+  if (Object.keys(scoped).length) {
+    return scoped;
+  }
+  return readStoredOrder(legacyBoardRowOrderStorageKey(weekMonday));
+}
+
+export function saveBoardRowOrder(
+  weekMonday: string,
+  orderByDay: BoardRowOrderByDay,
+  ownerId = "",
+): void {
+  if (typeof window === "undefined" || !weekMonday) {
+    return;
+  }
+
+  try {
+    localStorage.setItem(boardRowOrderStorageKey(weekMonday, ownerId), JSON.stringify(orderByDay));
+  } catch {
+    // Quota exceeded or storage blocked — keep in-memory order only.
+  }
+}
+
+/** Reorder `items` so known ids follow `orderedIds`; unknown ids stay at the end (stable). */
+export function applyDayRowOrder<T extends { id: string | number }>(
+  items: T[],
+  orderedIds: string[] | undefined,
+): T[] {
+  if (!orderedIds?.length || items.length <= 1) {
+    return items;
+  }
+
+  const orderMap = new Map(orderedIds.map((id, idx) => [id, idx]));
+  return [...items].sort((a, b) => {
+    const ai = orderMap.get(String(a.id));
+    const bi = orderMap.get(String(b.id));
+    if (ai === undefined && bi === undefined) {
+      return 0;
+    }
+    if (ai === undefined) {
+      return 1;
+    }
+    if (bi === undefined) {
+      return -1;
+    }
+    return ai - bi;
+  });
+}
+
+/** Apply saved per-day orders across a flat row list (preserves relative order across days). */
+export function applyRowOrderByDay<T extends { id: string | number; dayGroup: string }>(
+  items: T[],
+  orderByDay: BoardRowOrderByDay,
+): T[] {
+  if (!items.length || !Object.keys(orderByDay).length) {
+    return items;
+  }
+
+  const byDay = new Map<string, T[]>();
+  for (const item of items) {
+    const group = byDay.get(item.dayGroup);
+    if (group) {
+      group.push(item);
+    } else {
+      byDay.set(item.dayGroup, [item]);
+    }
+  }
+
+  const orderedByDay = new Map<string, T[]>();
+  for (const [dayGroup, dayItems] of byDay) {
+    orderedByDay.set(dayGroup, applyDayRowOrder(dayItems, orderByDay[dayGroup]));
+  }
+
+  const nextIndex = new Map<string, number>();
+  return items.map((item) => {
+    const dayItems = orderedByDay.get(item.dayGroup)!;
+    const idx = nextIndex.get(item.dayGroup) ?? 0;
+    nextIndex.set(item.dayGroup, idx + 1);
+    return dayItems[idx]!;
+  });
+}
+
+/** Same-day neighbor for keyboard reorder; null at list ends or if the row is missing. */
+export function neighborIdForReorder<T extends { id: string | number; dayGroup: string }>(
+  rows: T[],
+  row: T,
+  delta: -1 | 1,
+  isReorderTarget: (item: T) => boolean = () => true,
+): string | number | null {
+  const dayRows = rows.filter((item) => item.dayGroup === row.dayGroup);
+  const index = dayRows.findIndex((item) => String(item.id) === String(row.id));
+  if (index < 0) {
+    return null;
+  }
+  for (let cursor = index + delta; cursor >= 0 && cursor < dayRows.length; cursor += delta) {
+    const candidate = dayRows[cursor];
+    if (candidate && isReorderTarget(candidate)) {
+      return candidate.id;
+    }
+  }
+  return null;
+}
+
+export function reorderIdsInList(ids: string[], dragId: string, overId: string): string[] | null {
+  const dragIdx = ids.indexOf(dragId);
+  const overIdx = ids.indexOf(overId);
+  if (dragIdx < 0 || overIdx < 0 || dragIdx === overIdx) {
+    return null;
+  }
+  const next = [...ids];
+  next.splice(dragIdx, 1);
+  next.splice(overIdx, 0, dragId);
+  return next;
+}
+
+/** Remove an id from every day bucket (used when a row changes dayGroup). */
+export function removeIdFromRowOrder(
+  orderByDay: BoardRowOrderByDay,
+  id: string,
+): BoardRowOrderByDay {
+  let changed = false;
+  const next: BoardRowOrderByDay = {};
+  for (const [dayGroup, ids] of Object.entries(orderByDay)) {
+    if (!ids.includes(id)) {
+      next[dayGroup] = ids;
+      continue;
+    }
+    changed = true;
+    const filtered = ids.filter((item) => item !== id);
+    if (filtered.length) {
+      next[dayGroup] = filtered;
+    }
+  }
+  return changed ? next : orderByDay;
+}
+
+/** Drop the id from every day, then append it to the destination day. */
+export type TransferIdToDestinationWeekOrderInput = {
+  sourceWeekMonday: string;
+  destinationWeekMonday: string;
+  ownerId: string;
+  id: string;
+  nextDayGroup: string;
+};
+
+/** Persist a moved row under the destination week when schedule crosses week boundaries. */
+export function transferIdToDestinationWeekOrder({
+  sourceWeekMonday,
+  destinationWeekMonday,
+  ownerId,
+  id,
+  nextDayGroup,
+}: TransferIdToDestinationWeekOrderInput): void {
+  if (!sourceWeekMonday || !destinationWeekMonday || !nextDayGroup) {
+    return;
+  }
+  if (sourceWeekMonday === destinationWeekMonday) {
+    return;
+  }
+
+  const sourceOrder = loadBoardRowOrder(sourceWeekMonday, ownerId);
+  const sourceWithoutId = removeIdFromRowOrder(sourceOrder, id);
+  if (sourceWithoutId !== sourceOrder) {
+    saveBoardRowOrder(sourceWeekMonday, sourceWithoutId, ownerId);
+  }
+
+  const destinationOrder = loadBoardRowOrder(destinationWeekMonday, ownerId);
+  saveBoardRowOrder(
+    destinationWeekMonday,
+    moveIdToDayOrder(destinationOrder, id, nextDayGroup),
+    ownerId,
+  );
+}
+
+export function moveIdToDayOrder(
+  orderByDay: BoardRowOrderByDay,
+  id: string,
+  nextDayGroup: string,
+): BoardRowOrderByDay {
+  if (!nextDayGroup) {
+    return removeIdFromRowOrder(orderByDay, id);
+  }
+  const without = removeIdFromRowOrder(orderByDay, id);
+  const dest = without[nextDayGroup] ?? [];
+  if (dest.includes(id)) {
+    return without;
+  }
+  return { ...without, [nextDayGroup]: [...dest, id] };
+}
+
+/**
+ * Merge a visible day's new order into stored order: visible ids take the new sequence,
+ * ids that were stored but not currently visible stay after the visible block (preserving
+ * their prior relative order).
+ */
+export function mergeDayOrder(
+  previousDayIds: string[] | undefined,
+  visibleOrderedIds: string[],
+): string[] {
+  if (!previousDayIds?.length) {
+    return visibleOrderedIds;
+  }
+  const visibleSet = new Set(visibleOrderedIds);
+  const hidden = previousDayIds.filter((id) => !visibleSet.has(id));
+  return [...visibleOrderedIds, ...hidden];
+}
diff --git a/src/domain/work-orders/utils/carry-over-display.ts b/src/domain/work-orders/utils/carry-over-display.ts
new file mode 100644
index 00000000..dd92b2d3
--- /dev/null
+++ b/src/domain/work-orders/utils/carry-over-display.ts
@@ -0,0 +1,109 @@
+import { compactWeekLabel } from "@/domain/work-orders/utils/list-week-utils";
+import { formatRescheduleCountLabel } from "@/domain/work-orders/utils/reschedule-indicator";
+import { deriveDayFields } from "@/domain/work-orders/utils/table-day-utils";
+import { addDaysIso, mondayOf } from "@/domain/work-orders/utils/wizard-date-utils";
+
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+const WEEKDAY_COUNT = 7;
+const FRIDAY_OFFSET = 4;
+
+export type CarryOverRow = {
+  scheduledOn: string;
+  status?: string;
+  carriedOver?: number;
+};
+
+export function isTerminalCarryOverStatus(status?: string): boolean {
+  return status === "Completed" || status === "Canceled";
+}
+
+export function shouldShowCarriedOverPill(count: number, status?: string): boolean {
+  return count >= 2 && !isTerminalCarryOverStatus(status);
+}
+
+export function toIsoDate(value?: string): string {
+  if (!value) {
+    return "";
+  }
+  const iso = value.slice(0, 10);
+  return ISO_DATE.test(iso) ? iso : "";
+}
+
+export function resolveCarryOverSourceWeek(input: {
+  originalWeek?: string;
+  originalDate?: string;
+  scheduledOn?: string;
+}): string {
+  const originalWeek = toIsoDate(input.originalWeek);
+  if (originalWeek) {
+    return mondayOf(originalWeek);
+  }
+  const originalDate = toIsoDate(input.originalDate);
+  if (originalDate) {
+    return mondayOf(originalDate);
+  }
+  const scheduledOn = toIsoDate(input.scheduledOn);
+  return scheduledOn ? mondayOf(scheduledOn) : "";
+}
+
+export function formatCarriedOverHover(count: number, sourceWeekIso?: string): string {
+  const times = formatRescheduleCountLabel(count);
+  const base = `Carried over ${times} — this WO was not completed and moved to the next period`;
+  const sourceLabel = sourceWeekIso ? compactWeekLabel(sourceWeekIso) : "";
+  if (!sourceLabel) {
+    return base;
+  }
+  return `${base}. Source week: ${sourceLabel}.`;
+}
+
+/** Non-terminal WOs scheduled before the viewed week are display carry-overs. */
+export function isCarryOverDisplayRow(row: CarryOverRow, weekMonday: string): boolean {
+  if (isTerminalCarryOverStatus(row.status)) {
+    return false;
+  }
+  const scheduled = toIsoDate(row.scheduledOn);
+  return Boolean(scheduled) && scheduled < weekMonday;
+}
+
+export function mapCarryOverDisplayDay(scheduledOn: string, weekMonday: string): string {
+  const scheduled = toIsoDate(scheduledOn);
+  if (!scheduled || !ISO_DATE.test(weekMonday)) {
+    return "";
+  }
+  const sourceMonday = mondayOf(scheduled);
+  const offsetMs =
+    new Date(`${scheduled}T12:00:00`).getTime() - new Date(`${sourceMonday}T12:00:00`).getTime();
+  const offset = Math.round(offsetMs / 86_400_000);
+  if (offset < 0 || offset >= WEEKDAY_COUNT) {
+    return weekMonday;
+  }
+  if (offset > FRIDAY_OFFSET) {
+    return weekMonday;
+  }
+  return addDaysIso(weekMonday, offset);
+}
+
+export function rowMatchesCarryOverDay(
+  row: CarryOverRow,
+  selectedDayIso: string,
+  weekMonday: string,
+): boolean {
+  if (!isCarryOverDisplayRow(row, weekMonday)) {
+    return false;
+  }
+  return mapCarryOverDisplayDay(row.scheduledOn, weekMonday) === selectedDayIso;
+}
+
+/** Aligns UI day keys with the mapped weekday so reorder stays on the displayed tab. */
+export function applyCarryOverDisplayDayFields<
+  T extends CarryOverRow & { dayGroup: string; dayLabel: string },
+>(row: T, weekMonday: string): T {
+  if (!isCarryOverDisplayRow(row, weekMonday)) {
+    return row;
+  }
+  const displayDay = mapCarryOverDisplayDay(row.scheduledOn, weekMonday);
+  if (!displayDay) {
+    return row;
+  }
+  return { ...row, ...deriveDayFields(displayDay) };
+}
diff --git a/src/domain/work-orders/utils/comment-mentions.ts b/src/domain/work-orders/utils/comment-mentions.ts
new file mode 100644
index 00000000..b3542bcd
--- /dev/null
+++ b/src/domain/work-orders/utils/comment-mentions.ts
@@ -0,0 +1,188 @@
+/** Encoded mention token stored in comment text: `@[userId:Display Name]`. */
+export const MENTION_TOKEN_PATTERN = /@\[([^:\]]+):([^\]]+)\]/g;
+
+export type CommentBodySegment =
+  { type: "text"; value: string } | { type: "mention"; userId: string; label: string };
+
+export type MentionLookup = {
+  id: string | number;
+  name: string;
+};
+
+export function encodeMentionToken(userId: string | number, userName: string): string {
+  const trimmedName = userName.trim();
+  return `@[${String(userId)}:${trimmedName}]`;
+}
+
+export function extractMentionIds(text: string): string[] {
+  const ids: string[] = [];
+  const pattern = new RegExp(MENTION_TOKEN_PATTERN.source, "g");
+
+  for (const match of text.matchAll(pattern)) {
+    const userId = match[1];
+    if (userId && !ids.includes(userId)) {
+      ids.push(userId);
+    }
+  }
+
+  return ids;
+}
+
+export function toDisplayText(text: string): string {
+  return text.replace(MENTION_TOKEN_PATTERN, (_full, _userId: string, userName: string) => {
+    return `@${userName}`;
+  });
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function pushTextSegment(segments: CommentBodySegment[], value: string): void {
+  if (!value) {
+    return;
+  }
+
+  const last = segments.length > 0 ? segments[segments.length - 1] : undefined;
+  if (last?.type === "text") {
+    last.value += value;
+    return;
+  }
+
+  segments.push({ type: "text", value });
+}
+
+function resolveMentionNames(
+  mentionIds: string[] | undefined,
+  users: MentionLookup[] | undefined,
+): Map<string, string> {
+  const byId = new Map<string, string>();
+  const usersById = new Map((users ?? []).map((user) => [String(user.id), user.name] as const));
+
+  // Only ids that were actually mentioned — never seed the full dispatcher roster.
+  for (const mentionId of mentionIds ?? []) {
+    const id = String(mentionId);
+    byId.set(id, usersById.get(id) ?? id);
+  }
+
+  return byId;
+}
+
+function appendPlainMentionMatches(
+  segments: CommentBodySegment[],
+  plainText: string,
+  mentionNames: string[],
+): void {
+  if (!plainText || mentionNames.length === 0) {
+    pushTextSegment(segments, plainText);
+    return;
+  }
+
+  const sortedNames = [...mentionNames].sort((a, b) => b.length - a.length);
+  const namePattern = sortedNames.map((name) => escapeRegExp(name)).join("|");
+  // Require a non-word boundary after the name so "@Ann" does not match inside "@Annual".
+  const mentionRegex = new RegExp(`@(${namePattern})(?![\\w])`, "g");
+
+  let cursor = 0;
+  for (const match of plainText.matchAll(mentionRegex)) {
+    const index = match.index ?? 0;
+    pushTextSegment(segments, plainText.slice(cursor, index));
+
+    const label = match[1] ?? "";
+    segments.push({ type: "mention", userId: label, label });
+    cursor = index + match[0].length;
+  }
+
+  pushTextSegment(segments, plainText.slice(cursor));
+}
+
+export function buildCommentBodySegments(
+  text: string,
+  mentionIds?: string[],
+  users?: MentionLookup[],
+): CommentBodySegment[] {
+  if (!text) {
+    return [];
+  }
+
+  const segments: CommentBodySegment[] = [];
+  const encodedPattern = new RegExp(MENTION_TOKEN_PATTERN.source, "g");
+  const mentionNameById = resolveMentionNames(mentionIds, users);
+  const encodedLabels: string[] = [];
+  for (const match of text.matchAll(new RegExp(MENTION_TOKEN_PATTERN.source, "g"))) {
+    const label = match[2]?.trim();
+    if (label) encodedLabels.push(label);
+  }
+  const mentionNames = [...new Set([...mentionNameById.values(), ...encodedLabels])].filter(
+    Boolean,
+  );
+  let cursor = 0;
+
+  for (const match of text.matchAll(encodedPattern)) {
+    const index = match.index ?? 0;
+    const plainBetween = text.slice(cursor, index);
+    appendPlainMentionMatches(segments, plainBetween, mentionNames);
+
+    const userId = match[1] ?? "";
+    const label = match[2] ?? userId;
+    segments.push({ type: "mention", userId, label });
+    cursor = index + match[0].length;
+  }
+
+  const trailingPlain = text.slice(cursor);
+  appendPlainMentionMatches(segments, trailingPlain, mentionNames);
+
+  return segments.length > 0 ? segments : [{ type: "text", value: text }];
+}
+
+export type ActiveMentionQuery = {
+  start: number;
+  query: string;
+};
+
+export function findActiveMentionQuery(text: string, cursor: number): ActiveMentionQuery | null {
+  const beforeCursor = text.slice(0, cursor);
+  const atIndex = beforeCursor.lastIndexOf("@");
+
+  if (atIndex < 0) {
+    return null;
+  }
+
+  const prefix = beforeCursor.slice(0, atIndex);
+  const lastPrefixChar = prefix.length > 0 ? prefix[prefix.length - 1] : "";
+  if (prefix.length > 0 && !/\s/.test(lastPrefixChar)) {
+    return null;
+  }
+
+  const query = beforeCursor.slice(atIndex + 1);
+  if (/[\n\r\t[\]]/.test(query)) {
+    return null;
+  }
+
+  return { start: atIndex, query };
+}
+
+export function filterMentionCandidates(
+  candidates: MentionLookup[],
+  query: string,
+): MentionLookup[] {
+  const normalized = query.trim().toLowerCase();
+  const filtered = normalized
+    ? candidates.filter((candidate) => candidate.name.toLowerCase().includes(normalized))
+    : candidates;
+
+  return filtered.slice(0, 8);
+}
+
+export function insertMentionToken(
+  text: string,
+  queryStart: number,
+  cursor: number,
+  user: MentionLookup,
+): { nextText: string; nextCursor: number } {
+  const token = `${encodeMentionToken(user.id, user.name)} `;
+  const nextText = `${text.slice(0, queryStart)}${token}${text.slice(cursor)}`;
+  const nextCursor = queryStart + token.length;
+
+  return { nextText, nextCursor };
+}
diff --git a/src/domain/work-orders/utils/comment-ownership.ts b/src/domain/work-orders/utils/comment-ownership.ts
new file mode 100644
index 00000000..fe5d9870
--- /dev/null
+++ b/src/domain/work-orders/utils/comment-ownership.ts
@@ -0,0 +1,11 @@
+import type { WorkOrderComment } from "@/domain/work-orders/types/work-order-detail";
+
+export function isOwnWorkOrderComment(
+  comment: WorkOrderComment,
+  currentUserId: string | number | null | undefined,
+): boolean {
+  if (currentUserId == null || currentUserId === "") return false;
+  const authorId = comment.authorId;
+  if (authorId == null || authorId === "") return false;
+  return String(authorId) === String(currentUserId);
+}
diff --git a/src/domain/work-orders/utils/completion-doc-auto-complete.ts b/src/domain/work-orders/utils/completion-doc-auto-complete.ts
new file mode 100644
index 00000000..e27f0318
--- /dev/null
+++ b/src/domain/work-orders/utils/completion-doc-auto-complete.ts
@@ -0,0 +1,25 @@
+import type { CompDocSaveStatus } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  getClosabilityGaps,
+  tableRowToClosabilityInput,
+} from "@/domain/work-orders/utils/wo-closability";
+
+/**
+ * Completion is manual with confirmation, except that generating the completion document
+ * completes the WO — but only when the closability gate passes on the persisted row.
+ * Not-required (NN) and drafts never complete; Past Due rows must be
+ * rescheduled before any status change, so they are left for the dispatcher.
+ */
+export function shouldCompleteAfterCompletionDoc(
+  status: CompDocSaveStatus,
+  row: WorkOrderTableRow,
+): boolean {
+  if (status !== "Yes" || row.docStatus !== "Yes") {
+    return false;
+  }
+  if (row.status === "Completed" || row.status === "Canceled" || row.isPastDue) {
+    return false;
+  }
+  return getClosabilityGaps(tableRowToClosabilityInput(row)).length === 0;
+}
diff --git a/src/domain/work-orders/utils/completion-doc-html.ts b/src/domain/work-orders/utils/completion-doc-html.ts
new file mode 100644
index 00000000..a1114090
--- /dev/null
+++ b/src/domain/work-orders/utils/completion-doc-html.ts
@@ -0,0 +1,119 @@
+import type { CompDocData, DocFields } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { procedureFor, SAFETY_BULLETS } from "@/domain/work-orders/utils/completion-doc-procedures";
+import { serviceTitle } from "@/domain/work-orders/utils/completion-doc-service-title";
+
+export const SEAHAVEN_HEADER = {
+  name: "Seahaven Industries, Inc.",
+  address: "710 Koehler Avenue, Ronkonkoma, NY 11779",
+  phone: "(631) 776-5102",
+  fax: "(631) 677-3934",
+  email: "work-orders@seahavenind.com",
+};
+
+function esc(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+export function buildDocHtml(
+  row: Pick<WorkOrderTableRow, "woNumber" | "site" | "pm" | "tech" | "company">,
+  data: CompDocData,
+  fields: DocFields,
+): string {
+  const cityStateZip =
+    [fields.city, fields.state].filter(Boolean).join(", ") + (fields.zip ? ` ${fields.zip}` : "");
+  const proc = procedureFor(row.pm);
+  const completedBlock = `<h3 style="margin:16px 0 4px;">Completion Details:</h3>
+    <p style="margin:2px 0;"><b>Date Work Completed:</b> ${esc(fields.dateCompleted || "—")}</p>
+    <p style="margin:2px 0;"><b>Amazon Representative:</b> ${esc(fields.amazonRep || "—")}</p>
+    <p style="margin:2px 0;"><b>Seahaven Representative:</b> ${esc(fields.seaRep || "—")}</p>`;
+  const procHtml = proc.steps
+    .map((st) => {
+      const sub = st.sub
+        ? `<ol type="a" style="margin:4px 0 0 0;padding-left:22px;">${st.sub.map((x) => `<li style="margin:2px 0;">${esc(x)}</li>`).join("")}</ol>`
+        : "";
+      return `<li style="margin:6px 0;">${esc(st.text)}${sub}</li>`;
+    })
+    .join("");
+  const safety = SAFETY_BULLETS.map((b) => `<li style="margin:4px 0;">${esc(b)}</li>`).join("");
+  const notesBlock = data.notes
+    ? `<h3 style="margin:16px 0 4px;">PM Comments:</h3><p style="margin:0;">${esc(data.notes)}</p>`
+    : "";
+
+  return `<!doctype html><html><head><meta charset="utf-8"><title>WO ${esc(row.woNumber)} — Completion</title>
+<style>
+  @page { margin: 28px; }
+  * { box-sizing: border-box; }
+  body { font-family: 'DM Sans', system-ui, sans-serif; color: #161E38; font-size: 13px; line-height: 1.5; margin: 0; }
+  .band-top { height: 14px; background: linear-gradient(100deg,#27AAE1,#1C75BC); }
+  .band-bottom { height: 26px; margin-top: 28px; background: linear-gradient(100deg,#1C75BC,#27AAE1); clip-path: polygon(0 40%,100% 0,100% 100%,0 100%); }
+  .wrap { padding: 0 36px; }
+  .head { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 0 12px; }
+  .brand { font-weight: 800; font-size: 22px; letter-spacing: .04em; color: #1C75BC; }
+  .brand small { display:block; font-size: 9px; letter-spacing: .22em; color: #58595B; font-weight:600; }
+  .co { text-align: right; font-size: 12px; color: #161E38; }
+  .co b { color:#161E38; }
+  .rule { height: 3px; background: linear-gradient(90deg,#27AAE1,#1C75BC); border-radius: 2px; }
+  h1 { font-size: 14px; letter-spacing: .04em; margin: 18px 0 4px; }
+  .wo { color: #1C75BC; font-weight: 700; }
+  .muted { color: #58595B; }
+  ol { padding-left: 22px; }
+</style></head>
+<body>
+  <div class="band-top"></div>
+  <div class="wrap">
+    <div class="head">
+      <div class="brand">SEAHAVEN<small>INDUSTRIES</small></div>
+      <div class="co">
+        <div><b>${esc(SEAHAVEN_HEADER.name)}</b></div>
+        <div>${esc(SEAHAVEN_HEADER.address)}</div>
+        <div>${esc(SEAHAVEN_HEADER.phone)}</div>
+        <div>${esc(SEAHAVEN_HEADER.fax)}</div>
+        <div>${esc(SEAHAVEN_HEADER.email)}</div>
+      </div>
+    </div>
+    <div class="rule"></div>
+    <h1>${esc(serviceTitle(row).toUpperCase())}</h1>
+    <p style="margin:2px 0;" class="wo">WO# ${esc(row.woNumber)}</p>
+    <p style="margin:14px 0 0;">Site ID — ${esc(fields.siteCode)}</p>
+    <p style="margin:2px 0;">Amazon.com Services LLC ${esc(fields.siteCode)}</p>
+    <p style="margin:2px 0;" class="muted">${esc(fields.street)},</p>
+    <p style="margin:2px 0;" class="muted">${esc(cityStateZip)}</p>
+    <p style="margin:14px 0 4px;"><b>Vendor / Technician:</b> ${esc(fields.tech || "—")}${fields.company ? ` &middot; ${esc(fields.company)}` : ""}</p>
+    <ul style="padding-left:20px;">${safety}</ul>
+    ${completedBlock}
+    <h3 style="margin:16px 0 4px;">${esc(proc.heading)}:</h3>
+    <p style="margin:0 0 8px;">${esc(proc.intro)}</p>
+    <ol>${procHtml}</ol>
+    ${notesBlock}
+  </div>
+  <div class="band-bottom"></div>
+</body></html>`;
+}
+
+export function printDoc(html: string): void {
+  const iframe = document.createElement("iframe");
+  iframe.style.position = "fixed";
+  iframe.style.right = "0";
+  iframe.style.bottom = "0";
+  iframe.style.width = "0";
+  iframe.style.height = "0";
+  iframe.style.border = "0";
+  document.body.appendChild(iframe);
+  const idoc = iframe.contentWindow?.document;
+  if (!idoc) {
+    document.body.removeChild(iframe);
+    return;
+  }
+  idoc.open();
+  idoc.write(html);
+  idoc.close();
+  const win = iframe.contentWindow!;
+  setTimeout(() => {
+    win.focus();
+    win.print();
+    setTimeout(() => {
+      if (iframe.parentNode) document.body.removeChild(iframe);
+    }, 1200);
+  }, 300);
+}
diff --git a/src/domain/work-orders/utils/completion-doc-procedures.ts b/src/domain/work-orders/utils/completion-doc-procedures.ts
new file mode 100644
index 00000000..67f4ef0a
--- /dev/null
+++ b/src/domain/work-orders/utils/completion-doc-procedures.ts
@@ -0,0 +1,99 @@
+export interface ProcStep {
+  text: string;
+  sub?: string[];
+}
+
+export interface Procedure {
+  heading: string;
+  intro: string;
+  steps: ProcStep[];
+}
+
+export const SAFETY_BULLETS = [
+  "Use required PPE (gloves, goggles, hearing protection, arc flash equip. if needed).",
+  "Always follow OSHA, LOTO, FTHA, NFPA, and Amazon Policies before placing hands on equipment.",
+  'If any other issues are found not part of this PM\'s tasks please create a new "Work from PM" work order to make the correction.',
+];
+
+const BACKFLOW_PROCEDURE: Procedure = {
+  heading: "Backflow Procedure",
+  intro:
+    "Each backflow should be tested and if it passes inspection, the documentation must be submitted to the local municipality (i.e., city or county). No backflow PM is sufficient without at least testing the backflow.",
+  steps: [
+    {
+      text: "Contact base building coordinator/site POC, schedule backflow testing",
+    },
+    { text: "Inform Facility Manager of scheduled test date" },
+    {
+      text: "Meet with base building coordinator/site POC upon arrival at site, confirming backflows will now be tested",
+    },
+    {
+      text: "Visually inspect backflows and take photos of units",
+      sub: [
+        "Document backflow location in facility",
+        'Document size and type of backflow (i.e., 1" RPZ backflow)',
+      ],
+    },
+    {
+      text: "Perform backflow test",
+      sub: [
+        "If backflow test fails, disassemble backflow as needed and determine reason for failure",
+        "Make repairs to backflow",
+        "Retest backflow and ensure appropriate pressure",
+      ],
+    },
+    {
+      text: "File backflow test and certification paperwork with site POC and local municipality",
+    },
+    {
+      text: 'If any failed backflow cannot be repaired immediately, notify the site POC and schedule tentative follow-up date for return, ensure a new PO for the follow up work. Issue a new "Work from PM" work order.',
+      sub: [
+        "Ensure equipment is functioning appropriately and safely before returning to operations",
+        "Ensure equipment and work area is clean prior to leaving the work site",
+        "If any deficiencies are discovered and unable to repair immediately, schedule follow up date with vendor and issue a new PO for the follow-up work. Issue a new \"work from PM' work order.",
+        "Provide adequate lead time for parts/scheduling",
+      ],
+    },
+  ],
+};
+
+const GENERIC_PROCEDURE: Procedure = {
+  heading: "Service Procedure",
+  intro:
+    "Perform the scheduled preventive maintenance per the manufacturer specification and Amazon site requirements. Document all findings and submit the completion paperwork to the site POC.",
+  steps: [
+    {
+      text: "Contact base building coordinator/site POC and schedule the service visit",
+    },
+    { text: "Inform Facility Manager of the scheduled date" },
+    {
+      text: "Visually inspect the equipment and take photos of units",
+      sub: [
+        "Document equipment location in facility",
+        "Document make, model and condition of the asset",
+      ],
+    },
+    {
+      text: "Perform the required preventive maintenance tasks for this asset",
+      sub: [
+        "If a deficiency is found, determine the corrective action and parts required",
+        "Make repairs where possible and re-test to confirm normal operation",
+      ],
+    },
+    {
+      text: "Ensure equipment is functioning appropriately and the work area is clean prior to leaving the site",
+    },
+    {
+      text: "File the completion paperwork with the site POC and Seahaven",
+      sub: [
+        'If any deficiencies are discovered and unable to repair immediately, schedule a follow-up date with vendor and issue a new PO. Issue a new "Work from PM" work order.',
+      ],
+    },
+  ],
+};
+
+export function procedureFor(pm: string): Procedure {
+  return pm === "Backflow Preventers" || pm === "Domestic Backflow"
+    ? BACKFLOW_PROCEDURE
+    : GENERIC_PROCEDURE;
+}
diff --git a/src/domain/work-orders/utils/completion-doc-service-gate.ts b/src/domain/work-orders/utils/completion-doc-service-gate.ts
new file mode 100644
index 00000000..a92c0baf
--- /dev/null
+++ b/src/domain/work-orders/utils/completion-doc-service-gate.ts
@@ -0,0 +1,4 @@
+/** CompDoc is gated on a selected primary service (`pm`). */
+export function hasCompletionDocService(pm: string | null | undefined): boolean {
+  return Boolean(pm?.trim());
+}
diff --git a/src/domain/work-orders/utils/completion-doc-service-title.ts b/src/domain/work-orders/utils/completion-doc-service-title.ts
new file mode 100644
index 00000000..decf73f9
--- /dev/null
+++ b/src/domain/work-orders/utils/completion-doc-service-title.ts
@@ -0,0 +1,28 @@
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const SERVICE_PHRASE: Record<string, string> = {
+  "Scrubber Pit": "Scrubber Pit Augering",
+  "Backflow Preventers": "Backflow Preventer Testing",
+  "Domestic Backflow": "Domestic Backflow Testing",
+  "Tank / Water Heater": "Tank / Water Heater Inspection",
+  "Pressure Reducing Valve": "Pressure Reducing Valve Service",
+  "Pumping Systems": "Pumping System Maintenance",
+  "HVAC Inspection": "HVAC Inspection",
+  Electrical: "Electrical Inspection",
+  Plumbing: "Plumbing Service",
+  "Door / Hardware": "Door / Hardware Service",
+  "Floor Drain Backing Up": "Floor Drain Augering",
+  "Parking Lot Lighting": "Parking Lot Lighting Service",
+  "Mens Restroom Camera Line": "Restroom Camera Line Service",
+  "Assess Window Leaks": "Window Leak Assessment",
+};
+
+/**
+ * Title derived only from the selected service (`pm`).
+ * Never fabricates maintenance-cycle metadata from the work-order number.
+ */
+export function serviceTitle(row: Pick<WorkOrderTableRow, "pm">): string {
+  const service = row.pm.trim();
+  const phrase = SERVICE_PHRASE[service] ?? service;
+  return `Amer-Building ${phrase}`;
+}
diff --git a/src/domain/work-orders/utils/completion-doc-site.ts b/src/domain/work-orders/utils/completion-doc-site.ts
new file mode 100644
index 00000000..1546fdcc
--- /dev/null
+++ b/src/domain/work-orders/utils/completion-doc-site.ts
@@ -0,0 +1,87 @@
+import type { Location } from "@/domain/locations/types/location";
+import type { CompDocSiteInfo } from "@/domain/work-orders/types/completion-doc";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  effectiveCompany,
+  effectiveSite,
+} from "@/domain/work-orders/utils/effective-completion-snapshot";
+
+type CompDocAddress = Pick<
+  CompDocSiteInfo,
+  "street" | "city" | "state" | "zip" | "label" | "fullAddress"
+>;
+
+type CompDocIdentityRow = Pick<WorkOrderTableRow, "site" | "location" | "status" | "frozenSite"> &
+  Partial<Pick<WorkOrderTableRow, "company" | "tech" | "techPhone" | "frozenCompany">>;
+
+function buildLabel(city?: string, state?: string): string {
+  return [city, state].filter(Boolean).join(", ");
+}
+
+function toCompDocAddress(
+  street: string,
+  city: string,
+  state: string,
+  zip: string,
+): CompDocAddress {
+  const label = buildLabel(city, state);
+  const fullAddress = [street, label, zip].filter(Boolean).join(", ") || "—";
+  return { street, city, state, zip, label, fullAddress };
+}
+
+function withCompDocIdentity(address: CompDocAddress, row: CompDocIdentityRow): CompDocSiteInfo {
+  const frozen = effectiveSite(row);
+  const company = effectiveCompany({
+    status: row.status,
+    company: row.company ?? "",
+    tech: row.tech ?? "",
+    techPhone: row.techPhone ?? "",
+    frozenCompany: row.frozenCompany,
+  });
+  return {
+    ...address,
+    code: frozen?.code ?? row.site,
+    tech: company.contactName ?? "",
+    company: company.name ?? "",
+  };
+}
+
+function resolveLiveLocationSite(location: Location): CompDocAddress {
+  return toCompDocAddress(
+    location.address ?? "",
+    location.city ?? "",
+    location.state ?? "",
+    location.zipCode ?? "",
+  );
+}
+
+function resolveRowLocationSite(row: Pick<WorkOrderTableRow, "location">): CompDocAddress {
+  const locationParts = row.location.split(",").map((part) => part.trim());
+  const city = locationParts[0] ?? "";
+  const state = locationParts[1] ?? "";
+  const label = buildLabel(city, state);
+  const street = row.location && !label ? row.location : "";
+  return toCompDocAddress(street, city, state, "");
+}
+
+export function resolveCompDocSite(
+  row: CompDocIdentityRow,
+  location?: Location | null,
+): CompDocSiteInfo {
+  const frozen = effectiveSite(row);
+  if (frozen != null) {
+    return withCompDocIdentity(
+      toCompDocAddress(
+        frozen.address ?? "",
+        frozen.city ?? "",
+        frozen.state ?? "",
+        frozen.zip ?? "",
+      ),
+      row,
+    );
+  }
+  if (location?.address || location?.city) {
+    return withCompDocIdentity(resolveLiveLocationSite(location), row);
+  }
+  return withCompDocIdentity(resolveRowLocationSite(row), row);
+}
diff --git a/src/domain/work-orders/utils/completion-doc-state.ts b/src/domain/work-orders/utils/completion-doc-state.ts
new file mode 100644
index 00000000..6ec4a534
--- /dev/null
+++ b/src/domain/work-orders/utils/completion-doc-state.ts
@@ -0,0 +1,80 @@
+import { CheckCircle2, FileText, XCircle } from "lucide-react";
+import type { CompletionDocStateConfig, DocState } from "@/domain/work-orders/types/completion-doc";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+
+const MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+function pad2(n: number): string {
+  return String(n).padStart(2, "0");
+}
+
+export function docStateOf(status: CompletionDocStatus): DocState {
+  return status === "Yes" ? "generated" : status === "NN" ? "not-required" : "draft";
+}
+
+export function fmtDocNow(): string {
+  const d = new Date();
+  let h = d.getHours();
+  const ap = h >= 12 ? "PM" : "AM";
+  h = h % 12 || 12;
+  return `${MONTH_NAMES[d.getMonth()].slice(0, 3)} ${d.getDate()}, ${d.getFullYear()} · ${h}:${pad2(d.getMinutes())} ${ap}`;
+}
+
+export const DOC_STATE_CFG: Record<DocState, CompletionDocStateConfig> = {
+  draft: {
+    pillLabel: "Draft — not generated",
+    pillBg: "var(--color-bg-muted)",
+    pillText: "var(--muted-foreground)",
+    cardBg: "var(--color-bg-muted)",
+    cardBorder: "var(--color-border)",
+    cardIconBg: "var(--color-bg-surface)",
+    iconColor: "var(--muted-foreground)",
+    cardTitle: "Draft — not generated",
+    icon: FileText,
+  },
+  generated: {
+    pillLabel: "Generated",
+    pillBg: "var(--doc-yes-bg)",
+    pillText: "var(--color-success)",
+    cardBg: "var(--doc-yes-bg)",
+    cardBorder: "#bbf7d0",
+    cardIconBg: "var(--color-bg-surface)",
+    iconColor: "var(--color-success)",
+    cardTitle: "Generated",
+    icon: CheckCircle2,
+  },
+  "not-required": {
+    pillLabel: "Not required",
+    pillBg: "var(--indicator-co-1-bg)",
+    pillText: "var(--warning)",
+    cardBg: "var(--indicator-co-1-bg)",
+    cardBorder: "#fde68a",
+    cardIconBg: "var(--color-bg-surface)",
+    iconColor: "var(--warning)",
+    cardTitle: "Not required",
+    icon: XCircle,
+  },
+};
+
+export function docStatusCardDescription(state: DocState, generatedAt: string): string {
+  if (state === "draft") {
+    return "This document hasn't been generated yet. Add any extra details, then generate it — or mark it as not required.";
+  }
+  if (state === "generated") {
+    return `Ready to download or share. Generated ${generatedAt}.`;
+  }
+  return "No document is required for this work order. You can undo this anytime.";
+}
diff --git a/src/domain/work-orders/utils/dashboard-drilldown-params.ts b/src/domain/work-orders/utils/dashboard-drilldown-params.ts
new file mode 100644
index 00000000..bb868e51
--- /dev/null
+++ b/src/domain/work-orders/utils/dashboard-drilldown-params.ts
@@ -0,0 +1,123 @@
+import type { CompletionDocFilter } from "@/domain/work-orders/types/work-order-advanced-filters";
+import type { WorkOrderAdvancedFilters } from "@/domain/work-orders/types/work-order-advanced-filters";
+import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
+import { ALL_WIZARD_STATUSES, WO_TYPES } from "@/domain/work-orders/types/work-order-wizard";
+import type { WizardWOStatus, WOType } from "@/domain/work-orders/types/work-order-wizard";
+import type { UpliftFilterStatus } from "@/domain/work-orders/types/work-order-uplift-filter";
+import { cloneAdvancedFilters } from "@/domain/work-orders/utils/advanced-filters-utils";
+
+const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+
+const COMPLETION_DOC_FILTERS: CompletionDocFilter[] = ["No", "Yes", "NN"];
+
+// SH-348: the board region filter (backend#146) accepts these region names.
+const BOARD_REGION_NAMES = ["East", "Central", "West", "California", "Unmapped/Other"];
+
+const UPLIFT_FILTER_VALUES: UpliftFilterStatus[] = [
+  "pending",
+  "approved",
+  "auto_approved",
+  "rejected",
+];
+
+function parseList(raw: string | null): string[] {
+  if (!raw) {
+    return [];
+  }
+
+  return raw
+    .split(",")
+    .map((item) => item.trim())
+    .filter((item) => item !== "");
+}
+
+function parseStatuses(raw: string | null): WizardWOStatus[] {
+  const valid = new Set<string>(ALL_WIZARD_STATUSES);
+  return [...new Set(parseList(raw))].filter((status): status is WizardWOStatus =>
+    valid.has(status),
+  );
+}
+
+function parseTypes(raw: string | null): WOType[] {
+  const valid = new Set<string>(WO_TYPES);
+  return [...new Set(parseList(raw))].filter((type): type is WOType => valid.has(type));
+}
+
+function parseCompletionDocs(raw: string | null): CompletionDocFilter[] {
+  const valid = new Set<string>(COMPLETION_DOC_FILTERS);
+  return [...new Set(parseList(raw))].filter((doc): doc is CompletionDocFilter => valid.has(doc));
+}
+
+function parseRegions(raw: string | null): string[] {
+  const valid = new Set<string>(BOARD_REGION_NAMES);
+  return [...new Set(parseList(raw))].filter((region) => valid.has(region));
+}
+
+function parseUpliftStatuses(raw: string | null): UpliftFilterStatus[] {
+  const valid = new Set<string>(UPLIFT_FILTER_VALUES);
+  return [...new Set(parseList(raw))].filter((value): value is UpliftFilterStatus =>
+    valid.has(value),
+  );
+}
+
+export function parseDashboardDrilldownParams(
+  params: URLSearchParams,
+): WorkOrderAdvancedFilters | null {
+  const dateFrom = (params.get("dateFrom") ?? "").trim();
+  const dateTo = (params.get("dateTo") ?? "").trim();
+  const hasDateRange = ISO_DATE_PATTERN.test(dateFrom) && ISO_DATE_PATTERN.test(dateTo);
+  const avetaOnly = params.get("aveta") === "1";
+  const docs = parseCompletionDocs(params.get("docs"));
+  const statuses = parseStatuses(params.get("statuses"));
+  const types = parseTypes(params.get("types"));
+  const dispatchers = parseList(params.get("dispatchers"));
+  const regions = parseRegions(params.get("regions"));
+  const upliftStatuses = parseUpliftStatuses(params.get("upliftStatuses"));
+  const hasUplift = params.get("hasUplift") === "1";
+
+  const hasAny = [
+    hasDateRange,
+    avetaOnly,
+    docs.length,
+    statuses.length,
+    types.length,
+    dispatchers.length,
+    regions.length,
+    upliftStatuses.length,
+    hasUplift,
+  ].some(Boolean);
+
+  if (!hasAny) {
+    return null;
+  }
+
+  const filters = cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS);
+
+  if (hasDateRange) {
+    filters.dateRange = "custom";
+    filters.customFrom = dateFrom;
+    filters.customTo = dateTo;
+  }
+  filters.avetaOnly = avetaOnly;
+  filters.hasUplift = hasUplift || upliftStatuses.length > 0;
+  if (docs.length > 0) {
+    filters.docs = new Set(docs);
+  }
+  if (statuses.length > 0) {
+    filters.statuses = new Set(statuses);
+  }
+  if (types.length > 0) {
+    filters.types = new Set(types);
+  }
+  if (dispatchers.length > 0) {
+    filters.dispatchers = new Set(dispatchers);
+  }
+  if (regions.length > 0) {
+    filters.regions = new Set(regions);
+  }
+  if (upliftStatuses.length > 0) {
+    filters.upliftStatuses = new Set(upliftStatuses);
+  }
+
+  return filters;
+}
diff --git a/src/domain/work-orders/utils/day-pagination.ts b/src/domain/work-orders/utils/day-pagination.ts
new file mode 100644
index 00000000..322ed1da
--- /dev/null
+++ b/src/domain/work-orders/utils/day-pagination.ts
@@ -0,0 +1,172 @@
+import type { WorkOrderDayGroup } from "@/domain/work-orders/types/work-order-table-row";
+
+export const DAY_PAGE_SIZE_OPTIONS = [25, 50, 100, 200] as const;
+export const DEFAULT_DAY_PAGE_SIZE = 50;
+
+export type DayPageSize = (typeof DAY_PAGE_SIZE_OPTIONS)[number];
+
+export type PaginatedSlice<T> = {
+  visible: T[];
+  pageCount: number;
+  pageIndex: number;
+};
+
+export function pageIndexForItem(itemIndex: number, pageSize: number): number {
+  if (itemIndex < 0) {
+    return 0;
+  }
+  const size = pageSize > 0 ? pageSize : DEFAULT_DAY_PAGE_SIZE;
+  return Math.floor(itemIndex / size);
+}
+
+export function findItemPageIndex<T extends { id: string | number }>(
+  items: readonly T[],
+  id: string | number,
+  pageSize: number,
+): number | null {
+  const index = items.findIndex((item) => String(item.id) === String(id));
+  if (index < 0) {
+    return null;
+  }
+  return pageIndexForItem(index, pageSize);
+}
+
+export function totalPageCount(totalCount: number, pageSize: number): number {
+  const size = pageSize > 0 ? pageSize : DEFAULT_DAY_PAGE_SIZE;
+  return Math.max(1, Math.ceil(Math.max(0, totalCount) / size) || 1);
+}
+
+export function asDayPageSize(value: number): DayPageSize {
+  return (DAY_PAGE_SIZE_OPTIONS as readonly number[]).includes(value)
+    ? (value as DayPageSize)
+    : DEFAULT_DAY_PAGE_SIZE;
+}
+
+export function paginateItems<T>(
+  items: readonly T[],
+  pageIndex: number,
+  pageSize: number,
+): PaginatedSlice<T> {
+  const size = pageSize > 0 ? pageSize : DEFAULT_DAY_PAGE_SIZE;
+  const pageCount = totalPageCount(items.length, size);
+  const page = Math.min(Math.max(0, pageIndex), pageCount - 1);
+  const start = page * size;
+  return {
+    visible: items.slice(start, start + size),
+    pageCount,
+    pageIndex: page,
+  };
+}
+
+export const SEARCH_PAGER_FOOTER_LABEL = "Results";
+
+export function shouldShowDayPagination(input: {
+  flatListMode: boolean;
+  isLoading: boolean;
+  noSearchResults: boolean;
+}): boolean {
+  return !input.flatListMode && !input.isLoading && !input.noSearchResults;
+}
+
+export function shouldShowSearchPagination(input: {
+  isLoading: boolean;
+  hasResults: boolean;
+}): boolean {
+  return !input.isLoading && input.hasResults;
+}
+
+export function resolveSearchPager(input: { page: number; pageSize: number; totalCount: number }): {
+  pageSize: DayPageSize;
+  pageIndex: number;
+  pageCount: number;
+  itemCount: number;
+} {
+  const pageSize = asDayPageSize(input.pageSize);
+  const pageCount = totalPageCount(input.totalCount, pageSize);
+  return {
+    pageSize,
+    pageIndex: Math.min(Math.max(0, input.page), pageCount - 1),
+    pageCount,
+    itemCount: input.totalCount,
+  };
+}
+
+export function nextSearchPageIfOutOfRange(input: {
+  page: number;
+  pageSize: number;
+  totalCount: number;
+}): number | null {
+  if (input.totalCount <= 0) {
+    return null;
+  }
+  const pageCount = totalPageCount(input.totalCount, asDayPageSize(input.pageSize));
+  if (input.page < pageCount) {
+    return null;
+  }
+  return pageCount - 1;
+}
+
+export function pickBoardPager(input: {
+  advActive: boolean;
+  isLoading: boolean;
+  noSearchResults: boolean;
+  advResultCount: number;
+  search: { page: number; pageSize: number; totalCount: number };
+  day: {
+    pageSize: DayPageSize;
+    pageIndex: number;
+    pageCount: number;
+    itemCount: number;
+    footerLabel: string;
+  };
+}): {
+  show: boolean;
+  pageSize: DayPageSize;
+  pageIndex: number;
+  pageCount: number;
+  itemCount: number;
+  footerLabel: string;
+} {
+  if (input.advActive) {
+    return {
+      show: shouldShowSearchPagination({
+        isLoading: input.isLoading,
+        hasResults: input.search.totalCount > 0,
+      }),
+      ...resolveSearchPager(input.search),
+      footerLabel: SEARCH_PAGER_FOOTER_LABEL,
+    };
+  }
+  return {
+    show: shouldShowDayPagination({
+      flatListMode: false,
+      isLoading: input.isLoading,
+      noSearchResults: input.noSearchResults,
+    }),
+    ...input.day,
+  };
+}
+
+export function formatDayPaginationSummary(dayLabel: string, itemCount: number): string {
+  const label = dayLabel.trim().toUpperCase();
+  const noun = itemCount === 1 ? "item" : "items";
+  return `${label} · ${itemCount} ${noun}`;
+}
+
+export function pageSelectedDayGroups(
+  dayGroups: WorkOrderDayGroup[],
+  pageIndex: number,
+  pageSize: number,
+): { groups: WorkOrderDayGroup[]; pageIndex: number; pageCount: number; totalCount: number } {
+  const group = dayGroups[0];
+  if (!group) {
+    return { groups: dayGroups, pageIndex: 0, pageCount: 1, totalCount: 0 };
+  }
+  const slice = paginateItems(group.items, pageIndex, pageSize);
+  return {
+    groups: [{ ...group, items: slice.visible, totalCount: group.items.length }],
+    pageIndex: slice.pageIndex,
+    pageCount: slice.pageCount,
+    totalCount: group.items.length,
+  };
+}
diff --git a/src/domain/work-orders/utils/dispatcher-avatar-color.ts b/src/domain/work-orders/utils/dispatcher-avatar-color.ts
new file mode 100644
index 00000000..57dc6e98
--- /dev/null
+++ b/src/domain/work-orders/utils/dispatcher-avatar-color.ts
@@ -0,0 +1,35 @@
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+
+const AVATAR_COLORS = [
+  "#F59E0B",
+  "#0D9488",
+  "#6366F1",
+  "#F43F5E",
+  "#7C3AED",
+  "#0EA5E9",
+  "#16A34A",
+  "#EA580C",
+];
+
+function paletteColorFromKey(key: string): string {
+  let hash = 0;
+  for (let i = 0; i < key.length; i += 1) {
+    hash = key.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+
+export function getDispatcherAvatarColor(user: WorkOrderUser): string {
+  return paletteColorFromKey(String(user.id || user.name));
+}
+
+export function getAvatarColorFromName(name: string): string {
+  return paletteColorFromKey(name.trim() || "?");
+}
+
+export function getInitialsFromName(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase();
+  return `${parts[0]![0] ?? ""}${parts[1]![0] ?? ""}`.toUpperCase();
+}
diff --git a/src/domain/work-orders/utils/display-file-name.ts b/src/domain/work-orders/utils/display-file-name.ts
new file mode 100644
index 00000000..65659c24
--- /dev/null
+++ b/src/domain/work-orders/utils/display-file-name.ts
@@ -0,0 +1,10 @@
+/**
+ * why: uploads are stored as `{guid}_{original name}`, so the raw storage name shown in media
+ * tiles reads as an id. The original name (and its extension) survive after the prefix.
+ */
+const STORED_NAME_PREFIX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}_/i;
+
+export function toDisplayFileName(fileName: string): string {
+  const withoutPrefix = fileName.replace(STORED_NAME_PREFIX, "").trim();
+  return withoutPrefix || fileName;
+}
diff --git a/src/domain/work-orders/utils/due-date-floor.ts b/src/domain/work-orders/utils/due-date-floor.ts
new file mode 100644
index 00000000..95f8eb54
--- /dev/null
+++ b/src/domain/work-orders/utils/due-date-floor.ts
@@ -0,0 +1,27 @@
+/**
+ * SH-356: a Due Date can never be earlier than Schedule On.
+ *
+ * The floor is the concrete Schedule On day, the start of a date range, or — for a
+ * week-only schedule (SH-110) — the first day of the target week.
+ */
+export function resolveDueDateFloor(schedule: {
+  scheduledOn?: string | null;
+  targetWeek?: string | null;
+}): string {
+  return schedule.scheduledOn?.trim() || schedule.targetWeek?.trim() || "";
+}
+
+export function isDueDateBeforeFloor(dueDate: string | null | undefined, floor: string): boolean {
+  return Boolean(dueDate && floor && dueDate < floor);
+}
+
+/**
+ * Patch fragment for a Schedule On change: clears an existing Due Date that the new
+ * schedule would leave in the past. Never bumps it to a guessed value.
+ */
+export function clearDueDateBeforeSchedule(
+  dueDate: string | null | undefined,
+  nextFloor: string,
+): { dueDate?: string } {
+  return isDueDateBeforeFloor(dueDate, nextFloor) ? { dueDate: "" } : {};
+}
diff --git a/src/domain/work-orders/utils/effective-completion-snapshot.ts b/src/domain/work-orders/utils/effective-completion-snapshot.ts
new file mode 100644
index 00000000..b552b39c
--- /dev/null
+++ b/src/domain/work-orders/utils/effective-completion-snapshot.ts
@@ -0,0 +1,68 @@
+import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
+import type {
+  WorkOrderFrozenCompany,
+  WorkOrderFrozenPoc,
+  WorkOrderFrozenSite,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+
+type SiteSnapshotRow = Pick<WorkOrderTableRow, "status" | "frozenSite">;
+type CompanySnapshotRow = Pick<
+  WorkOrderTableRow,
+  "status" | "company" | "tech" | "techPhone" | "frozenCompany"
+>;
+type PocSnapshotRow = Pick<
+  WorkOrderTableRow,
+  "status" | "pocName" | "pocPhone" | "pocNotes" | "frozenPoc"
+> & {
+  additionalContacts?: WorkOrderTableRow["additionalContacts"];
+};
+
+export function effectiveSite(row: SiteSnapshotRow): WorkOrderFrozenSite | undefined {
+  if (row.status === "Completed" && row.frozenSite != null) return row.frozenSite;
+  return undefined;
+}
+
+export function effectiveSitePlace(row: SiteSnapshotRow): {
+  city: string;
+  state: string;
+} | null {
+  const frozen = effectiveSite(row);
+  if (frozen == null) return null;
+  return { city: frozen.city ?? "", state: frozen.state ?? "" };
+}
+
+export function effectiveCompany(row: CompanySnapshotRow): WorkOrderFrozenCompany {
+  if (row.status === "Completed" && row.frozenCompany != null) return row.frozenCompany;
+  return {
+    name: row.company,
+    contactName: row.tech,
+    phone: row.techPhone,
+  };
+}
+
+export function effectivePoc(row: PocSnapshotRow): WorkOrderFrozenPoc {
+  if (row.status === "Completed" && row.frozenPoc != null) return row.frozenPoc;
+  return {
+    contacts: [
+      { name: row.pocName, phone: row.pocPhone },
+      ...(row.additionalContacts ?? []).map((contact) => ({
+        name: contact.name,
+        phone: contact.phone,
+        notes: contact.notes,
+      })),
+    ],
+    notes: row.pocNotes,
+  };
+}
+
+export function effectiveAdditionalContacts(row: PocSnapshotRow): WorkOrderAdditionalContact[] {
+  if (row.status === "Completed" && row.frozenPoc != null) {
+    return row.frozenPoc.contacts.slice(1).map((contact) => ({
+      name: contact.name ?? "",
+      phone: contact.phone ?? "",
+      notes: contact.notes ?? "",
+    }));
+  }
+  return row.additionalContacts ?? [];
+}
diff --git a/src/domain/work-orders/utils/enrich-detail-closability-from-board.ts b/src/domain/work-orders/utils/enrich-detail-closability-from-board.ts
new file mode 100644
index 00000000..f86caa0c
--- /dev/null
+++ b/src/domain/work-orders/utils/enrich-detail-closability-from-board.ts
@@ -0,0 +1,22 @@
+import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+
+/**
+ * Overlay authoritative closability fields from board detail onto a legacy GetById detail.
+ * Board `info.type`, `completion.docStatus`, and `media.length` are the SH-114 sources.
+ */
+export function enrichDetailClosabilityFromBoard(
+  detail: WorkOrderDetail,
+  board: WorkOrderBoardDetail | undefined,
+): WorkOrderDetail {
+  if (!board) {
+    return detail;
+  }
+
+  return {
+    ...detail,
+    type: board.info.type,
+    docStatus: board.completion.docStatus,
+    mediaCount: board.media.length,
+  };
+}
diff --git a/src/domain/work-orders/utils/extra-docs-aveta.ts b/src/domain/work-orders/utils/extra-docs-aveta.ts
new file mode 100644
index 00000000..d8fff131
--- /dev/null
+++ b/src/domain/work-orders/utils/extra-docs-aveta.ts
@@ -0,0 +1,23 @@
+import type { MediaCategory, MediaFile } from "@/domain/work-orders/types/work-order-media";
+
+/**
+ * Extra Docs Aveta is an explicit API media category (value 5).
+ * Upload stays Extra; only an explicit Aveta category counts as attached.
+ */
+export function resolveExtraDocCategory(file: MediaFile): MediaCategory {
+  if (file.purpose === "Aveta" || file.category === "Aveta") {
+    return "Aveta";
+  }
+  return file.category;
+}
+
+export function hasExplicitAvetaFile(files: MediaFile[]): boolean {
+  return files.some((item) => resolveExtraDocCategory(item) === "Aveta");
+}
+
+export function isAvetaDocumentAttached(
+  hasAvetaDocument: boolean | undefined,
+  files: MediaFile[] = [],
+): boolean {
+  return Boolean(hasAvetaDocument) || hasExplicitAvetaFile(files);
+}
diff --git a/src/domain/work-orders/utils/find-duplicate-wo-number-row.ts b/src/domain/work-orders/utils/find-duplicate-wo-number-row.ts
new file mode 100644
index 00000000..0b4a0d52
--- /dev/null
+++ b/src/domain/work-orders/utils/find-duplicate-wo-number-row.ts
@@ -0,0 +1,16 @@
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+export function findDuplicateWoNumberRow(
+  woNumber: string,
+  rows: WorkOrderTableRow[],
+  excludeId?: string | number,
+): WorkOrderTableRow | undefined {
+  const normalized = woNumber.trim();
+  if (normalized === "") {
+    return undefined;
+  }
+
+  return rows.find(
+    (row) => row.woNumber === normalized && String(row.id) !== String(excludeId ?? ""),
+  );
+}
diff --git a/src/domain/work-orders/utils/format-audit-timestamp.ts b/src/domain/work-orders/utils/format-audit-timestamp.ts
new file mode 100644
index 00000000..4d987df4
--- /dev/null
+++ b/src/domain/work-orders/utils/format-audit-timestamp.ts
@@ -0,0 +1,24 @@
+const AUDIT_DATE_PATTERN = /\b\d{1,2}\/\d{1,2}(\/\d{2,4})?\b/;
+
+/**
+ * Every entry, manual or system, shows a complete timestamp — `09/15/2026 · 7:42 PM`.
+ * Pre-formatted API strings are kept only when they already carry a calendar date.
+ */
+export function formatAuditTimestamp(value: string): string {
+  if (!value) return "";
+  if (AUDIT_DATE_PATTERN.test(value) && /\b(AM|PM)\b/i.test(value)) return value;
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+
+  const datePart = date.toLocaleDateString("en-US", {
+    month: "2-digit",
+    day: "2-digit",
+    year: "numeric",
+  });
+  const timePart = date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  return `${datePart} · ${timePart}`;
+}
diff --git a/src/domain/work-orders/utils/format-board-audit-action.ts b/src/domain/work-orders/utils/format-board-audit-action.ts
new file mode 100644
index 00000000..e29cbcbd
--- /dev/null
+++ b/src/domain/work-orders/utils/format-board-audit-action.ts
@@ -0,0 +1,136 @@
+import {
+  BOARD_AUDIT_ACTION_RULES,
+  wrapAuditValue,
+  type AuditActionSource,
+  type FormattedAuditValue,
+} from "@/domain/work-orders/utils/board-audit-action-rules";
+
+function looksLikeHumanSentence(action: string): boolean {
+  return /\s/.test(action);
+}
+
+function humanizeFieldLabel(fieldName: string): string {
+  const spaced = fieldName
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/[_-]+/g, " ")
+    .trim()
+    .toLowerCase();
+  return spaced || "field";
+}
+
+function normalizeKey(value: string): string {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[\s_-]+/g, "");
+}
+
+/** JSON array strings → `"a", "b", "c"` instead of `["a","b","c"]`. */
+function formatJsonArrayDisplayValue(raw: string): string | null {
+  const trimmed = raw.trim();
+  if (!trimmed.startsWith("[") || !trimmed.endsWith("]")) return null;
+
+  try {
+    const parsed: unknown = JSON.parse(trimmed);
+    if (!Array.isArray(parsed)) return null;
+
+    const items = parsed
+      .map((item) => String(item ?? "").trim())
+      .filter(Boolean)
+      .map((item) => `"${item}"`);
+
+    return items.join(", ");
+  } catch {
+    return null;
+  }
+}
+
+/** Parse ISO / date-only / pipe-separated API values → unique mm/dd/yyyy. */
+function formatAuditDisplayValue(raw: string): FormattedAuditValue {
+  const trimmed = raw.trim();
+  if (!trimmed) return { text: trimmed, isQuotedList: false };
+
+  const jsonArray = formatJsonArrayDisplayValue(trimmed);
+  if (jsonArray !== null) return { text: jsonArray, isQuotedList: true };
+
+  const parts = trimmed
+    .split("|")
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+  const dates: string[] = [];
+  for (const part of parts) {
+    const isoMatch = part.match(/^(\d{4})-(\d{2})-(\d{2})(?:T|$)/);
+    if (isoMatch) {
+      const [, year, month, day] = isoMatch;
+      dates.push(`${month}/${day}/${year}`);
+      continue;
+    }
+    const date = new Date(part);
+    if (!Number.isNaN(date.getTime()) && /\d{4}/.test(part)) {
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      const year = String(date.getFullYear());
+      dates.push(`${month}/${day}/${year}`);
+      continue;
+    }
+    return { text: trimmed, isQuotedList: false };
+  }
+
+  const unique = [...new Set(dates)];
+  if (unique.length === 0) return { text: trimmed, isQuotedList: false };
+  if (unique.length === 1) return { text: unique[0]!, isQuotedList: false };
+  return { text: unique.join(" – "), isQuotedList: false };
+}
+
+/**
+ * Builds a design-style audit sentence (the part after `Name · `),
+ * e.g. `Changed status to "Incomplete"`, from board API fields.
+ */
+export function formatBoardAuditAction(entry: AuditActionSource): string {
+  const action = entry.action?.trim() ?? "";
+  const fieldName = entry.fieldName?.trim() ?? "";
+  const oldValue = formatAuditDisplayValue(entry.oldValue?.trim() ?? "");
+  const newValue = formatAuditDisplayValue(entry.newValue?.trim() ?? "");
+
+  if (action && looksLikeHumanSentence(action)) {
+    return action;
+  }
+
+  const fieldKey = normalizeKey(fieldName);
+  const actionKey = normalizeKey(action);
+
+  const ruleContext = { entry, fieldKey, actionKey, oldValue, newValue };
+  for (const rule of BOARD_AUDIT_ACTION_RULES) {
+    const result = rule(ruleContext);
+    if (result !== null) return result;
+  }
+
+  return formatGenericAuditFallback({ action, fieldName, oldValue, newValue });
+}
+
+function formatGenericAuditFallback(args: {
+  action: string;
+  fieldName: string;
+  oldValue: FormattedAuditValue;
+  newValue: FormattedAuditValue;
+}): string {
+  const { action, fieldName, oldValue, newValue } = args;
+  if (!action && !fieldName && !oldValue.text && !newValue.text) {
+    return "Work order created in the system.";
+  }
+
+  const label = humanizeFieldLabel(fieldName || action || "field");
+  if (oldValue.text && newValue.text) {
+    return `Changed ${label} from ${wrapAuditValue(oldValue)} to ${wrapAuditValue(newValue)}`;
+  }
+  if (newValue.text) {
+    return `Changed ${label} to ${wrapAuditValue(newValue)}`;
+  }
+  if (oldValue.text) {
+    return `Changed ${label} from ${wrapAuditValue(oldValue)} to "—"`;
+  }
+  // Never surface a raw audit enum such as "FieldChanged" as the sentence.
+  if (fieldName && action) return `Updated ${label}`;
+  return "Updated work order";
+}
diff --git a/src/domain/work-orders/utils/get-inline-create-missing.ts b/src/domain/work-orders/utils/get-inline-create-missing.ts
new file mode 100644
index 00000000..a732e656
--- /dev/null
+++ b/src/domain/work-orders/utils/get-inline-create-missing.ts
@@ -0,0 +1,62 @@
+/** Required fields for board inline create (Schedule On is optional — SH-109). */
+export type InlineCreateReqField = "site" | "woNumber" | "pocName" | "pocPhone";
+
+export const INLINE_CREATE_REQ_LABELS: Record<InlineCreateReqField, string> = {
+  site: "Site",
+  woNumber: "WO #",
+  pocName: "POC name",
+  pocPhone: "POC phone",
+};
+
+export type InlineCreateDraftFields = {
+  site?: string;
+  locationId?: string | number;
+  woNumber?: string;
+  pocName?: string;
+  pocPhone?: string;
+};
+
+export function getInlineCreateMissing(d: InlineCreateDraftFields): InlineCreateReqField[] {
+  const miss: InlineCreateReqField[] = [];
+  const hasSite = Boolean(d.site?.trim()) || Boolean(String(d.locationId ?? "").trim());
+  if (!hasSite) {
+    miss.push("site");
+  }
+  if (!d.woNumber?.trim()) {
+    miss.push("woNumber");
+  }
+  if (!d.pocName?.trim()) {
+    miss.push("pocName");
+  }
+  if (!d.pocPhone?.trim()) {
+    miss.push("pocPhone");
+  }
+  return miss;
+}
+
+/** Tooltip for Save: "Missing: Site, WO #" or "Save" when ready. */
+export function inlineCreateSaveHint(miss: InlineCreateReqField[]): string {
+  if (miss.length === 0) {
+    return "Save";
+  }
+  return `Missing: ${miss.map((m) => INLINE_CREATE_REQ_LABELS[m]).join(", ")}`;
+}
+
+export function inlineCreateSiteError(miss: InlineCreateReqField[]): string {
+  if (miss.includes("site")) {
+    return "Site is required";
+  }
+  return "Contact name and phone are required";
+}
+
+/** Concrete calendar day/range — week-only does not count (design hasScheduleDate). */
+export function draftHasScheduleDate(d: {
+  scheduledOn?: string;
+  scheduleWeekOnly?: boolean;
+  schedMode?: string;
+}): boolean {
+  if (d.scheduleWeekOnly || d.schedMode === "week") {
+    return false;
+  }
+  return Boolean(d.scheduledOn?.trim());
+}
diff --git a/src/domain/work-orders/utils/is-dispatch-locked.ts b/src/domain/work-orders/utils/is-dispatch-locked.ts
new file mode 100644
index 00000000..41d3d82e
--- /dev/null
+++ b/src/domain/work-orders/utils/is-dispatch-locked.ts
@@ -0,0 +1,10 @@
+export function isDispatchLocked(dispatch: {
+  verifiedAt?: string | null;
+  status: string;
+}): boolean {
+  return (
+    Boolean(dispatch.verifiedAt) ||
+    dispatch.status === "Cancelled" ||
+    dispatch.status === "Verified"
+  );
+}
diff --git a/src/domain/work-orders/utils/list-week-utils.ts b/src/domain/work-orders/utils/list-week-utils.ts
new file mode 100644
index 00000000..221ad4bd
--- /dev/null
+++ b/src/domain/work-orders/utils/list-week-utils.ts
@@ -0,0 +1,68 @@
+import { addDaysIso, mondayOf, todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+
+export interface WorkWeek {
+  mondayIso: string;
+  label: string;
+  live: boolean;
+}
+
+export function currentWeekMonday(): string {
+  return mondayOf(todayIso());
+}
+
+export function weekRange(mondayIso: string): [string, string] {
+  return [mondayIso, addDaysIso(mondayIso, 4)];
+}
+
+export function compactWeekLabel(mondayIso: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(mondayIso)) {
+    return "";
+  }
+  const fridayIso = addDaysIso(mondayIso, 4);
+  const [, sm, sd] = mondayIso.split("-").map(Number);
+  const [, em, ed] = fridayIso.split("-").map(Number);
+  return `${sm}/${sd}–${em}/${ed}`;
+}
+
+export function isLiveWeek(mondayIso: string): boolean {
+  return mondayIso === currentWeekMonday();
+}
+
+export function isFutureWeek(mondayIso: string): boolean {
+  return mondayIso > currentWeekMonday();
+}
+
+export function nextWeekMonday(): string {
+  return addDaysIso(currentWeekMonday(), 7);
+}
+
+function toWorkWeek(mondayIso: string): WorkWeek {
+  return {
+    mondayIso,
+    label: compactWeekLabel(mondayIso),
+    live: isLiveWeek(mondayIso),
+  };
+}
+
+export function buildWeekWindow(anchorMonday: string, before = 4, after = 4): WorkWeek[] {
+  const weeks: WorkWeek[] = [];
+  const liveMonday = currentWeekMonday();
+  const upcomingMonday = nextWeekMonday();
+
+  for (let i = -before; i <= after; i += 1) {
+    const mondayIso = addDaysIso(anchorMonday, i * 7);
+    if (isFutureWeek(mondayIso) && mondayIso !== upcomingMonday) {
+      continue;
+    }
+    weeks.push(toWorkWeek(mondayIso));
+  }
+
+  for (const requiredMonday of [liveMonday, upcomingMonday]) {
+    if (!weeks.some((week) => week.mondayIso === requiredMonday)) {
+      weeks.push(toWorkWeek(requiredMonday));
+    }
+  }
+
+  weeks.sort((a, b) => a.mondayIso.localeCompare(b.mondayIso));
+  return weeks;
+}
diff --git a/src/domain/work-orders/utils/merge-work-order-users.ts b/src/domain/work-orders/utils/merge-work-order-users.ts
new file mode 100644
index 00000000..dea344fb
--- /dev/null
+++ b/src/domain/work-orders/utils/merge-work-order-users.ts
@@ -0,0 +1,18 @@
+import type { WorkOrderUser } from "@/domain/work-orders/types/work-order";
+
+/** Primary list wins on id collision (dispatcher lookup before directory). */
+export function mergeWorkOrderUsers(
+  primary: WorkOrderUser[],
+  extra: WorkOrderUser[],
+): WorkOrderUser[] {
+  const byId = new Map<string, WorkOrderUser>();
+  for (const user of primary) {
+    const key = String(user.id);
+    if (key) byId.set(key, user);
+  }
+  for (const user of extra) {
+    const key = String(user.id);
+    if (key && !byId.has(key)) byId.set(key, user);
+  }
+  return [...byId.values()];
+}
diff --git a/src/domain/work-orders/utils/partition-slide-over-media.ts b/src/domain/work-orders/utils/partition-slide-over-media.ts
new file mode 100644
index 00000000..7092c696
--- /dev/null
+++ b/src/domain/work-orders/utils/partition-slide-over-media.ts
@@ -0,0 +1,54 @@
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+
+const COMPLETION_PURPOSES = new Set(["Before", "After", "Completion"]);
+
+export type MediaSurfaceOwnership = {
+  completionOwnedIds: ReadonlySet<string>;
+  extraOwnedIds: ReadonlySet<string>;
+};
+
+const EMPTY_OWNERSHIP: MediaSurfaceOwnership = {
+  completionOwnedIds: new Set(),
+  extraOwnedIds: new Set(),
+};
+
+/** Only Reactive and Emergency work orders render a media gallery on the Completion tab. */
+export function hasCompletionMediaGallery(type: string | null | undefined): boolean {
+  return type === "Emergency" || type === "Reactive";
+}
+
+function isPhotoOrVideo(item: MediaFile): boolean {
+  return item.fileType === "image" || item.fileType === "video";
+}
+
+function isInFlight(item: MediaFile): boolean {
+  return item.uploadStatus === "uploading" || item.uploadStatus === "failed";
+}
+
+/** Extra photo/video from Completion Doc POST (no category) until Extra is chosen. */
+export function isCompletionSurfaceMedia(
+  item: MediaFile,
+  ownership: MediaSurfaceOwnership = EMPTY_OWNERSHIP,
+  completionHasGallery = true,
+): boolean {
+  if (isInFlight(item)) return true;
+  if (COMPLETION_PURPOSES.has(item.purpose ?? "")) return true;
+  if (!completionHasGallery && item.purpose === "Extra") return false;
+  if (ownership.completionOwnedIds.has(item.id)) return true;
+  if (ownership.extraOwnedIds.has(item.id)) return false;
+  return item.purpose === "Extra" && isPhotoOrVideo(item);
+}
+
+/** Without a Completion gallery, every Extra item (including photos/videos) belongs to Extras. */
+export function isExtrasSurfaceMedia(
+  item: MediaFile,
+  ownership: MediaSurfaceOwnership = EMPTY_OWNERSHIP,
+  completionHasGallery = true,
+): boolean {
+  if (item.purpose === "Aveta") return true;
+  if (item.purpose !== "Extra") return false;
+  if (!completionHasGallery) return true;
+  if (ownership.completionOwnedIds.has(item.id)) return false;
+  if (ownership.extraOwnedIds.has(item.id)) return true;
+  return !isPhotoOrVideo(item);
+}
diff --git a/src/domain/work-orders/utils/read-detail-closability-fields.ts b/src/domain/work-orders/utils/read-detail-closability-fields.ts
new file mode 100644
index 00000000..99d2d686
--- /dev/null
+++ b/src/domain/work-orders/utils/read-detail-closability-fields.ts
@@ -0,0 +1,100 @@
+import {
+  DOC_STATUS_API,
+  WORK_ORDER_TYPE_API_TO_FE,
+} from "@/domain/work-orders/types/work-order-board";
+import type { CompletionDocStatus } from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+
+// SH-126/SH-184: Add-On is a backend-authoritative indicator (`isAddOn`), not a
+// selectable business type, so it is no longer part of the WOType union.
+const DETAIL_WO_TYPES = new Set(["PM", "Reactive", "Emergency", "Overdue"]);
+
+function asRecord(raw: unknown): Record<string, unknown> {
+  return typeof raw === "object" && raw !== null ? (raw as Record<string, unknown>) : {};
+}
+
+function readString(record: Record<string, unknown>, ...keys: string[]): string {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string") {
+      return value;
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+  }
+  return "";
+}
+
+function readNumber(record: Record<string, unknown>, ...keys: string[]): number | null {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "number") {
+      return value;
+    }
+    if (typeof value === "string" && value !== "") {
+      const parsed = Number(value);
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
+    }
+  }
+  return null;
+}
+
+/** Authoritative WO type only — never falls back to integration `source`. */
+export function readDetailWoType(record: Record<string, unknown>): WOType | "" {
+  const numeric =
+    readNumber(record, "workOrderType", "WorkOrderType") ?? readNumber(record, "type", "Type");
+  if (numeric != null && WORK_ORDER_TYPE_API_TO_FE[numeric]) {
+    return WORK_ORDER_TYPE_API_TO_FE[numeric] as WOType;
+  }
+
+  const raw = readString(
+    record,
+    "workOrderType",
+    "WorkOrderType",
+    "type",
+    "Type",
+    "woType",
+    "WoType",
+  );
+  if (DETAIL_WO_TYPES.has(raw)) {
+    return raw as WOType;
+  }
+  return "";
+}
+
+export function readDetailDocStatus(record: Record<string, unknown>): CompletionDocStatus {
+  const numeric = readNumber(record, "docStatus", "DocStatus");
+  if (numeric === DOC_STATUS_API.Yes) return "Yes";
+  if (numeric === DOC_STATUS_API.No) return "No";
+  if (numeric === DOC_STATUS_API.NotNeeded) return "NN";
+
+  const nestedCompletion = asRecord(record.completion ?? record.Completion);
+  const nestedNumeric = readNumber(nestedCompletion, "docStatus", "DocStatus");
+  if (nestedNumeric === DOC_STATUS_API.Yes) return "Yes";
+  if (nestedNumeric === DOC_STATUS_API.No) return "No";
+  if (nestedNumeric === DOC_STATUS_API.NotNeeded) return "NN";
+
+  const raw = readString(record, "docStatus", "DocStatus", "completionDoc", "CompletionDoc");
+  if (raw === "Yes" || raw === "No" || raw === "NN") {
+    return raw;
+  }
+  if (raw === "NotNeeded") {
+    return "NN";
+  }
+  return "";
+}
+
+export function readDetailMediaCount(record: Record<string, unknown>): number {
+  const explicit = readNumber(record, "mediaCount", "MediaCount");
+  if (explicit != null) {
+    return explicit;
+  }
+  const media = record.media ?? record.Media;
+  if (Array.isArray(media)) {
+    return media.length;
+  }
+  return 0;
+}
diff --git a/src/domain/work-orders/utils/reschedule-indicator.ts b/src/domain/work-orders/utils/reschedule-indicator.ts
new file mode 100644
index 00000000..26bee35e
--- /dev/null
+++ b/src/domain/work-orders/utils/reschedule-indicator.ts
@@ -0,0 +1,16 @@
+import { fmtDate } from "@/domain/work-orders/utils/wizard-date-utils";
+
+export function formatRescheduleCountLabel(count: number): string {
+  return count === 1 ? "1 time" : `${count} times`;
+}
+
+/** Hover copy for the Reschedule pill (count ≥ 2). Uses originalDate when the API sends it. */
+export function formatRescheduleHover(count: number, originalDate?: string): string {
+  const times = formatRescheduleCountLabel(count);
+  const base = `Rescheduled ${times} — this WO has had its date changed ${times}.`;
+  const formatted = originalDate ? fmtDate(originalDate) : "";
+  if (!formatted) {
+    return base;
+  }
+  return `${base} Original date: ${formatted}.`;
+}
diff --git a/src/domain/work-orders/utils/resolve-slide-over-aveta-required.ts b/src/domain/work-orders/utils/resolve-slide-over-aveta-required.ts
new file mode 100644
index 00000000..7d4b3daf
--- /dev/null
+++ b/src/domain/work-orders/utils/resolve-slide-over-aveta-required.ts
@@ -0,0 +1,8 @@
+/** Extras overlay follows the unsaved Info draft while editing. */
+export function resolveSlideOverAvetaRequired(
+  editing: boolean,
+  persisted: boolean | undefined,
+  draft: boolean | undefined,
+): boolean {
+  return Boolean(editing ? draft : persisted);
+}
diff --git a/src/domain/work-orders/utils/run-sequential-uploads.ts b/src/domain/work-orders/utils/run-sequential-uploads.ts
new file mode 100644
index 00000000..e641a944
--- /dev/null
+++ b/src/domain/work-orders/utils/run-sequential-uploads.ts
@@ -0,0 +1,24 @@
+/**
+ * Runs file uploads one-by-one while holding an aggregate pending flag true
+ * until every file has settled (success or failure). Avoids relying on a single
+ * TanStack Mutation `isPending`, which can flip false when a later small file
+ * finishes before an earlier large one.
+ */
+export async function runSequentialUploads<TFile>(
+  files: readonly TFile[],
+  upload: (file: TFile) => Promise<unknown>,
+  setPending: (pending: boolean) => void,
+): Promise<void> {
+  if (files.length === 0) {
+    return;
+  }
+
+  setPending(true);
+  try {
+    for (const file of files) {
+      await upload(file);
+    }
+  } finally {
+    setPending(false);
+  }
+}
diff --git a/src/domain/work-orders/utils/service-notes-ui.ts b/src/domain/work-orders/utils/service-notes-ui.ts
new file mode 100644
index 00000000..4128ff46
--- /dev/null
+++ b/src/domain/work-orders/utils/service-notes-ui.ts
@@ -0,0 +1,19 @@
+/** Design: cell shows Service & Notes layout when note, extras, or Aveta exist. */
+export function hasServiceNotesDetails(
+  serviceNotes?: string | null,
+  extraServices?: string[] | null,
+  avetaRequired?: boolean | null,
+): boolean {
+  return (
+    Boolean(serviceNotes?.trim()) || (extraServices?.length ?? 0) > 0 || Boolean(avetaRequired)
+  );
+}
+
+/** Truncate note for the board cell subtitle (~30 chars, design). */
+export function truncateServiceNotesPreview(note: string, max = 30): string {
+  const trimmed = note.trim();
+  if (trimmed.length <= max) {
+    return trimmed;
+  }
+  return `${trimmed.slice(0, max)}…`;
+}
diff --git a/src/domain/work-orders/utils/severity-escalation.ts b/src/domain/work-orders/utils/severity-escalation.ts
new file mode 100644
index 00000000..6bf4f243
--- /dev/null
+++ b/src/domain/work-orders/utils/severity-escalation.ts
@@ -0,0 +1,20 @@
+import {
+  SEVERITY_LEVELS,
+  type WorkOrderSeverity,
+} from "@/domain/work-orders/types/work-order-severity";
+
+function isCriticalSeverity(severity: WorkOrderSeverity | null | undefined): severity is 1 | 2 {
+  return severity === 1 || severity === 2;
+}
+
+/** AAP: toast only when severity newly enters SEV 1/2 — not on re-save of the same value. */
+export function shouldAnnounceSeverityEscalation(
+  previous: WorkOrderSeverity | null | undefined,
+  next: WorkOrderSeverity | null | undefined,
+): next is 1 | 2 {
+  return isCriticalSeverity(next) && !isCriticalSeverity(previous);
+}
+
+export function formatSeverityEscalationToast(woNumber: string, severity: 1 | 2): string {
+  return `WO #${woNumber} escalated to ${SEVERITY_LEVELS[severity].label}.`;
+}
diff --git a/src/domain/work-orders/utils/should-notify-cross-week.ts b/src/domain/work-orders/utils/should-notify-cross-week.ts
new file mode 100644
index 00000000..9a2cd00c
--- /dev/null
+++ b/src/domain/work-orders/utils/should-notify-cross-week.ts
@@ -0,0 +1,9 @@
+import { mondayOf } from "@/domain/work-orders/utils/wizard-date-utils";
+
+/** True when the new scheduled date falls outside the week currently being viewed. */
+export function shouldNotifyCrossWeek(dateIso: string, activeWeekMonday: string): boolean {
+  if (!dateIso || !activeWeekMonday) {
+    return false;
+  }
+  return mondayOf(dateIso) !== activeWeekMonday;
+}
diff --git a/src/domain/work-orders/utils/slide-over-draft.ts b/src/domain/work-orders/utils/slide-over-draft.ts
new file mode 100644
index 00000000..926e1027
--- /dev/null
+++ b/src/domain/work-orders/utils/slide-over-draft.ts
@@ -0,0 +1,108 @@
+import type { WorkOrderAdditionalContact } from "@/domain/work-orders/types/work-order-additional-contact";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+
+/**
+ * Fields compared for dirty state and included in Save patch.
+ * Only keys that map to board PATCH (or required companions like dispatcherName).
+ * Primary POC scalars and tech phone are not board-editable — exclude so Save cannot no-op.
+ * additionalContacts is board-editable (SH-218 PATCH field).
+ */
+export const SLIDE_OVER_EDIT_KEYS = [
+  "woNumber",
+  "site",
+  "type",
+  "dispatcherId",
+  "dispatcherName",
+  "scheduledOn",
+  "targetWeek",
+  "scheduleWeekOnly",
+  "scheduleEnd",
+  "schedMode",
+  "dueDate",
+  "completedDate",
+  "apptTime",
+  "pm",
+  "serviceNotes",
+  "extraServices",
+  "avetaRequired",
+  "additionalContacts",
+  "vendorId",
+  // company/tech are display companions; board persists vendor via vendorId only
+  "status",
+] as const satisfies ReadonlyArray<keyof WorkOrderTableRow>;
+
+type EditKey = (typeof SLIDE_OVER_EDIT_KEYS)[number];
+
+function sameExtraServices(a: string[] | undefined, b: string[] | undefined): boolean {
+  const left = a ?? [];
+  const right = b ?? [];
+  if (left.length !== right.length) return false;
+  return left.every((value, index) => value === right[index]);
+}
+
+function sameAdditionalContacts(
+  a: WorkOrderAdditionalContact[] | undefined,
+  b: WorkOrderAdditionalContact[] | undefined,
+): boolean {
+  const left = a ?? [];
+  const right = b ?? [];
+  if (left.length !== right.length) return false;
+  return left.every((contact, index) => {
+    const other = right[index];
+    return (
+      contact.name === other.name &&
+      contact.phone === other.phone &&
+      (contact.notes ?? "") === (other.notes ?? "")
+    );
+  });
+}
+
+export function isSlideOverDraftDirty(
+  draft: WorkOrderTableRow,
+  baseline: WorkOrderTableRow,
+): boolean {
+  for (const key of SLIDE_OVER_EDIT_KEYS) {
+    if (key === "extraServices") {
+      if (!sameExtraServices(draft.extraServices, baseline.extraServices)) return true;
+      continue;
+    }
+    if (key === "additionalContacts") {
+      if (!sameAdditionalContacts(draft.additionalContacts, baseline.additionalContacts)) {
+        return true;
+      }
+      continue;
+    }
+    if (draft[key] !== baseline[key]) return true;
+  }
+  return false;
+}
+
+export function buildSlideOverPatch(
+  draft: WorkOrderTableRow,
+  baseline: WorkOrderTableRow,
+): WorkOrderTablePatch {
+  const patch: WorkOrderTablePatch = {};
+
+  for (const key of SLIDE_OVER_EDIT_KEYS) {
+    if (key === "extraServices") {
+      if (!sameExtraServices(draft.extraServices, baseline.extraServices)) {
+        patch.extraServices = draft.extraServices;
+      }
+      continue;
+    }
+    if (key === "additionalContacts") {
+      if (!sameAdditionalContacts(draft.additionalContacts, baseline.additionalContacts)) {
+        patch.additionalContacts = draft.additionalContacts;
+      }
+      continue;
+    }
+    if (draft[key] !== baseline[key]) {
+      (patch as Record<EditKey, WorkOrderTableRow[EditKey]>)[key] = draft[key];
+    }
+  }
+
+  return patch;
+}
diff --git a/src/domain/work-orders/utils/table-day-utils.ts b/src/domain/work-orders/utils/table-day-utils.ts
new file mode 100644
index 00000000..49dc123b
--- /dev/null
+++ b/src/domain/work-orders/utils/table-day-utils.ts
@@ -0,0 +1,46 @@
+import { addDaysIso, pad2 } from "@/domain/work-orders/utils/wizard-date-utils";
+
+export const WEEKDAY_LABELS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"] as const;
+
+export function deriveDayFields(rawDate: string): {
+  dayGroup: string;
+  dayLabel: string;
+} {
+  const dayGroup = rawDate ? rawDate.replace(/^\d{4}-(\d{2})-(\d{2})$/, "$1/$2") : "";
+  const dayLabel = rawDate
+    ? (() => {
+        const d = new Date(`${rawDate}T12:00:00`);
+        return `${WEEKDAY_LABELS[d.getDay()]} · ${dayGroup}`;
+      })()
+    : "";
+  return { dayGroup, dayLabel };
+}
+
+export function buildWeekSkeleton(weekMonday: string): {
+  key: string;
+  label: string;
+  date: string;
+  items: never[];
+}[] {
+  const base = new Date(`${weekMonday}T12:00:00`);
+  return Array.from({ length: 5 }, (_, i) => {
+    const d = new Date(base);
+    d.setDate(base.getDate() + i);
+    const key = `${pad2(d.getMonth() + 1)}/${pad2(d.getDate())}`;
+    const iso = `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+    return {
+      key,
+      label: `${WEEKDAY_LABELS[d.getDay()]} · ${key}`,
+      date: iso,
+      items: [],
+    };
+  });
+}
+
+export function isDateInWeek(iso: string, weekMonday: string): boolean {
+  if (!iso || !/^\d{4}-\d{2}-\d{2}$/.test(iso)) {
+    return false;
+  }
+  const friday = addDaysIso(weekMonday, 4);
+  return iso >= weekMonday && iso <= friday;
+}
diff --git a/src/domain/work-orders/utils/table-filter-utils.ts b/src/domain/work-orders/utils/table-filter-utils.ts
new file mode 100644
index 00000000..3d8eb132
--- /dev/null
+++ b/src/domain/work-orders/utils/table-filter-utils.ts
@@ -0,0 +1,224 @@
+import type { WorkOrderAdvancedFilters } from "@/domain/work-orders/types/work-order-advanced-filters";
+import { ASSIGNEE_FILTER_UNASSIGNED } from "@/domain/work-orders/types/work-order-list";
+import type { WorkOrderBarFilters } from "@/domain/work-orders/types/work-order-list-filters";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import type {
+  WorkOrderDayGroup,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { ADVANCED_FILTER_PREDICATES } from "@/domain/work-orders/utils/advanced-filter-predicates";
+import { isCarryOverDisplayRow } from "@/domain/work-orders/utils/carry-over-display";
+import { isDateInWeek } from "@/domain/work-orders/utils/table-day-utils";
+import { weekRange } from "@/domain/work-orders/utils/list-week-utils";
+import { todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+
+const TERMINAL_STATUSES = new Set(["Completed", "Canceled", "Done", "Cancelled"]);
+
+export function computeIsPastDue(row: WorkOrderTableRow): boolean {
+  if (!row.scheduledOn || TERMINAL_STATUSES.has(row.status)) {
+    return false;
+  }
+  // scheduledOn is a calendar date, so compare it to the user's local calendar
+  // day. A UTC "today" rolls over hours early west of UTC and flags work
+  // scheduled for today as Past Due every evening.
+  return row.scheduledOn.slice(0, 10) < todayIso();
+}
+
+export function enrichTableRow(row: WorkOrderTableRow): WorkOrderTableRow {
+  return {
+    ...row,
+    // Recompute from Schedule On (SH-185). Avoid sticky `apiTrue || compute`
+    // so a future Schedule On clears Past Due immediately.
+    isPastDue: computeIsPastDue(row),
+  };
+}
+
+export function matchesAdvancedFilters(
+  row: WorkOrderTableRow,
+  filters: WorkOrderAdvancedFilters,
+): boolean {
+  return ADVANCED_FILTER_PREDICATES.every((predicate) => predicate(row, filters));
+}
+
+function rowMatchesSearch(row: WorkOrderTableRow, query: string): boolean {
+  const q = query.trim().toLowerCase();
+  if (!q) {
+    return true;
+  }
+  const haystack = [
+    row.site,
+    row.location,
+    row.woNumber,
+    row.type,
+    row.dispatcherName,
+    row.scheduledOn,
+    row.dueDate,
+    row.pm,
+    row.company,
+    row.tech,
+    row.status,
+    row.title,
+  ]
+    .join(" ")
+    .toLowerCase();
+  return haystack.includes(q);
+}
+
+function rowMatchesBarTypes(row: WorkOrderTableRow, types: Set<WOType>): boolean {
+  if (types.size === 0) {
+    return true;
+  }
+  const overdueMatch = types.has("Overdue") && row.isPastDue;
+  const typeMatch = types.has(row.type as WOType);
+  return overdueMatch || typeMatch;
+}
+
+export function filterByBarAndSearch(
+  rows: WorkOrderTableRow[],
+  bar: WorkOrderBarFilters,
+  search: string,
+): WorkOrderTableRow[] {
+  const [weekFrom, weekTo] = weekRange(bar.weekMonday);
+
+  return rows.filter((row) => {
+    if (!rowMatchesSearch(row, search)) {
+      return false;
+    }
+
+    if (!rowMatchesBarTypes(row, bar.types)) {
+      return false;
+    }
+
+    if (bar.dispatcherIds.size > 0) {
+      const unassignedMatch =
+        bar.dispatcherIds.has(ASSIGNEE_FILTER_UNASSIGNED) && !row.dispatcherId;
+      const idMatch = !!row.dispatcherId && bar.dispatcherIds.has(String(row.dispatcherId));
+      if (!unassignedMatch && !idMatch) {
+        return false;
+      }
+    }
+
+    if (row.scheduledOn) {
+      if (row.scheduledOn < weekFrom || row.scheduledOn > weekTo) {
+        return isCarryOverDisplayRow(row, bar.weekMonday);
+      }
+    } else if (row.targetWeek) {
+      if (!isDateInWeek(row.targetWeek, bar.weekMonday)) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+}
+
+export function isUnassignedBoardRow(row: WorkOrderTableRow): boolean {
+  if (TERMINAL_STATUSES.has(row.status)) {
+    return false;
+  }
+  return !row.dispatcherId;
+}
+
+export function partitionBoardRows(rows: WorkOrderTableRow[]): {
+  unassigned: WorkOrderTableRow[];
+  unscheduled: WorkOrderTableRow[];
+  scheduled: WorkOrderTableRow[];
+} {
+  const unassigned: WorkOrderTableRow[] = [];
+  const remaining: WorkOrderTableRow[] = [];
+
+  for (const row of rows) {
+    if (isUnassignedBoardRow(row)) {
+      unassigned.push(row);
+    } else {
+      remaining.push(row);
+    }
+  }
+
+  const { scheduled, unscheduled } = splitScheduledUnscheduled(remaining);
+  return { unassigned, unscheduled, scheduled };
+}
+
+export function rowIdSet(rows: WorkOrderTableRow[]): Set<string> {
+  return new Set(rows.map((row) => String(row.id)));
+}
+
+/** Weekly board rows win on id overlap so PATCH state stays authoritative. */
+export function mergeWeeklyAndUnassignedQueue(
+  weekly: WorkOrderTableRow[],
+  queue: WorkOrderTableRow[],
+): WorkOrderTableRow[] {
+  if (queue.length === 0) {
+    return weekly;
+  }
+  const seen = rowIdSet(weekly);
+  const extras = queue.filter((row) => !seen.has(String(row.id)));
+  return extras.length === 0 ? weekly : [...weekly, ...extras];
+}
+
+type ComposeBoardSectionsInput = {
+  displayRows: WorkOrderTableRow[];
+  weekRows: WorkOrderTableRow[];
+  weeklyIds: ReadonlySet<string>;
+  queueIds: ReadonlySet<string>;
+};
+
+/**
+ * Pin is every non-terminal unassigned row (including out-of-week).
+ * Day/Unscheduled groups stay week-scoped and never repeat pin ids.
+ */
+export function composeBoardSections(input: ComposeBoardSectionsInput): {
+  unassigned: WorkOrderTableRow[];
+  unscheduled: WorkOrderTableRow[];
+  scheduled: WorkOrderTableRow[];
+} {
+  const unassigned = input.displayRows.filter(isUnassignedBoardRow);
+  const pinIds = rowIdSet(unassigned);
+  const weekAssigned = input.weekRows.filter((row) => {
+    const id = String(row.id);
+    if (pinIds.has(id) || isUnassignedBoardRow(row)) {
+      return false;
+    }
+    return input.weeklyIds.has(id) || !input.queueIds.has(id);
+  });
+  return { unassigned, ...splitScheduledUnscheduled(weekAssigned) };
+}
+
+export function splitScheduledUnscheduled(rows: WorkOrderTableRow[]): {
+  scheduled: WorkOrderTableRow[];
+  unscheduled: WorkOrderTableRow[];
+} {
+  const scheduled: WorkOrderTableRow[] = [];
+  const unscheduled: WorkOrderTableRow[] = [];
+
+  for (const row of rows) {
+    if (!row.scheduledOn) {
+      unscheduled.push(row);
+    } else {
+      scheduled.push(row);
+    }
+  }
+
+  return { scheduled, unscheduled };
+}
+
+export function buildDayGroups(scheduled: WorkOrderTableRow[]): WorkOrderDayGroup[] {
+  const groups: WorkOrderDayGroup[] = [];
+
+  for (const row of scheduled) {
+    const existing = groups.find((group) => group.key === row.dayGroup);
+    if (existing) {
+      existing.items.push(row);
+    } else {
+      groups.push({
+        key: row.dayGroup,
+        label: row.dayLabel,
+        date: row.scheduledOn,
+        items: [row],
+      });
+    }
+  }
+
+  groups.sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));
+  return groups;
+}
diff --git a/src/domain/work-orders/utils/uplift-display-utils.ts b/src/domain/work-orders/utils/uplift-display-utils.ts
new file mode 100644
index 00000000..26dd14c2
--- /dev/null
+++ b/src/domain/work-orders/utils/uplift-display-utils.ts
@@ -0,0 +1,130 @@
+import type {
+  WorkOrderUplift,
+  UpliftSummary,
+  WorkOrderUpliftStatus,
+} from "@/domain/work-orders/types/work-order-uplift";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+export function formatUpliftMoney(value: number | null | undefined): string {
+  if (value == null || Number.isNaN(value)) {
+    return "—";
+  }
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+const STATUS_LABELS: Record<WorkOrderUpliftStatus, string> = {
+  pending: "Pending",
+  approved: "Approved",
+  auto_approved: "Auto",
+  rejected: "Rejected",
+  cancelled: "Cancelled",
+  revoked: "Revoked",
+};
+
+export function formatUpliftStatusLabel(status: WorkOrderUpliftStatus): string {
+  return STATUS_LABELS[status];
+}
+
+export function getUpliftCellLabel(summary: UpliftSummary): string | null {
+  if (!summary.hasUplift && summary.pendingCount <= 0) {
+    return null;
+  }
+  if (summary.pendingCount > 0) {
+    return summary.pendingCount === 1 ? "1 Pending" : `${summary.pendingCount} Pending`;
+  }
+  if (summary.primaryStatus) {
+    const label = formatUpliftStatusLabel(summary.primaryStatus);
+    if (summary.amount != null) {
+      return `${label} ${formatUpliftMoney(summary.amount)}`;
+    }
+    return label;
+  }
+  if (summary.hasUplift) {
+    return "Uplift";
+  }
+  return null;
+}
+
+export function getUpliftStatusPillStyle(status: WorkOrderUpliftStatus): {
+  background: string;
+  color: string;
+} {
+  switch (status) {
+    case "pending":
+      return { background: "var(--status-pending-bg)", color: "var(--status-pending-text)" };
+    case "approved":
+      return { background: "var(--status-success-bg, #DCFCE7)", color: "var(--color-success)" };
+    case "auto_approved":
+      return { background: "var(--color-primary-tint)", color: "var(--color-primary)" };
+    case "rejected":
+      return { background: "#FEE2E2", color: "#B91C1C" };
+    case "cancelled":
+    case "revoked":
+      return { background: "var(--color-bg-muted)", color: "var(--color-text-muted)" };
+    default:
+      return { background: "var(--color-bg-muted)", color: "var(--color-text-muted)" };
+  }
+}
+
+export function isWorkOrderUpliftsReadOnly(status: WorkOrderTableRow["status"]): boolean {
+  return status === "Completed" || status === "Canceled";
+}
+
+export function canOpenUpliftsDialog(
+  summary: UpliftSummary,
+  status: WorkOrderTableRow["status"],
+): boolean {
+  if (summary.hasUplift || summary.pendingCount > 0) {
+    return true;
+  }
+  return !isWorkOrderUpliftsReadOnly(status);
+}
+
+export function canRevokeWorkOrderUplift(
+  uplift: Pick<WorkOrderUplift, "status" | "requestedById">,
+  currentUserId: string | number | null | undefined,
+): boolean {
+  if (uplift.status !== "auto_approved") {
+    // SH-214/SH-212: admin-approved revoke lives on Uplift Approvals, not the WO dialog.
+    return false;
+  }
+  return (
+    currentUserId != null &&
+    currentUserId !== "" &&
+    uplift.requestedById != null &&
+    String(uplift.requestedById) === String(currentUserId)
+  );
+}
+
+export function upliftRevokeRequiresReason(status: WorkOrderUpliftStatus): boolean {
+  return status === "approved";
+}
+
+export const UPLIFT_STANDARD_ALLOWANCE_USD = 500;
+export const UPLIFT_EMERGENCY_ALLOWANCE_USD = 5000;
+
+export function getUpliftAllowanceCap(workOrderType: string): number {
+  return workOrderType === "Emergency"
+    ? UPLIFT_EMERGENCY_ALLOWANCE_USD
+    : UPLIFT_STANDARD_ALLOWANCE_USD;
+}
+
+export function hasOpenWorkOrderUplift(
+  uplifts: ReadonlyArray<Pick<WorkOrderUplift, "status">>,
+): boolean {
+  return uplifts.some((uplift) => uplift.status === "pending");
+}
+
+export function getRemainingUpliftAllowance(
+  workOrderType: string,
+  uplifts: ReadonlyArray<Pick<WorkOrderUplift, "status" | "amount">>,
+): number {
+  const consumed = uplifts
+    .filter((uplift) => uplift.status === "auto_approved")
+    .reduce((sum, uplift) => sum + uplift.amount, 0);
+  return Math.max(0, getUpliftAllowanceCap(workOrderType) - consumed);
+}
diff --git a/src/domain/work-orders/utils/vendor-assignment-patch.ts b/src/domain/work-orders/utils/vendor-assignment-patch.ts
new file mode 100644
index 00000000..0f39e146
--- /dev/null
+++ b/src/domain/work-orders/utils/vendor-assignment-patch.ts
@@ -0,0 +1,23 @@
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+export type VendorAssignmentFields = {
+  vendorId: string;
+  company: string;
+  tech: string;
+  techPhone: string;
+};
+
+export type VendorTablePatch = Pick<
+  WorkOrderTableRow,
+  "vendorId" | "company" | "tech" | "techPhone" | "primaryDispatchStatus"
+>;
+
+export function toVendorTablePatch(fields: VendorAssignmentFields): VendorTablePatch {
+  return {
+    vendorId: fields.vendorId,
+    company: fields.company,
+    tech: fields.tech,
+    techPhone: fields.techPhone,
+    primaryDispatchStatus: "",
+  };
+}
diff --git a/src/domain/work-orders/utils/vendor-dropdown-label.ts b/src/domain/work-orders/utils/vendor-dropdown-label.ts
new file mode 100644
index 00000000..9c82e847
--- /dev/null
+++ b/src/domain/work-orders/utils/vendor-dropdown-label.ts
@@ -0,0 +1,22 @@
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order-common";
+
+export function formatVendorDistance(miles: number | null | undefined): string {
+  if (miles == null || Number.isNaN(miles)) {
+    return "";
+  }
+
+  const rounded = Number.isInteger(miles) ? String(miles) : miles.toFixed(1);
+  return `${rounded} mi`;
+}
+
+/** Dropdown label: `contactName · companyName` (matches technician select UI). */
+export function formatVendorTechnicianLabel(vendor: VendorDropdownItem): string {
+  const contact = vendor.contactName.trim();
+  const company = vendor.companyName.trim();
+
+  if (contact && company && contact !== company) {
+    return `${contact} · ${company}`;
+  }
+
+  return contact || company;
+}
diff --git a/src/domain/work-orders/utils/week-day-nav-utils.ts b/src/domain/work-orders/utils/week-day-nav-utils.ts
new file mode 100644
index 00000000..f2b10778
--- /dev/null
+++ b/src/domain/work-orders/utils/week-day-nav-utils.ts
@@ -0,0 +1,96 @@
+import type {
+  WorkOrderDayGroup,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { rowMatchesCarryOverDay } from "@/domain/work-orders/utils/carry-over-display";
+import { isLiveWeek } from "@/domain/work-orders/utils/list-week-utils";
+import { isDateInWeek } from "@/domain/work-orders/utils/table-day-utils";
+import { addDaysIso, mondayOf, todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+
+const DAY_TAB_WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] as const;
+
+export function weekdaysMonFri(weekMonday: string): string[] {
+  return Array.from({ length: 5 }, (_, index) => addDaysIso(weekMonday, index));
+}
+
+export function firstWeekday(weekMonday: string): string {
+  return weekMonday;
+}
+
+/** Maps a scheduled date onto the Mon–Fri tab that can show it (weekends fall back to Monday). */
+export function scheduledDayTab(dateIso: string): { weekMonday: string; selectedDayIso: string } {
+  const day = dateIso.slice(0, 10);
+  const weekMonday = mondayOf(day);
+  const days = weekdaysMonFri(weekMonday);
+  return {
+    weekMonday,
+    selectedDayIso: days.includes(day) ? day : firstWeekday(weekMonday),
+  };
+}
+
+export function isUnassignedQueueReady(
+  unassignedLoading: boolean,
+  unassignedError: Error | null,
+): boolean {
+  return !unassignedLoading && unassignedError == null;
+}
+
+export function isDayScopedSearchEmpty(args: {
+  searchActive: boolean;
+  unassignedCount: number;
+  dayItemCount: number;
+  unassignedQueueReady: boolean;
+}): boolean {
+  return (
+    args.searchActive &&
+    args.unassignedQueueReady &&
+    args.unassignedCount === 0 &&
+    args.dayItemCount === 0
+  );
+}
+
+export function initialSelectedDay(weekMonday: string, today = todayIso()): string {
+  if (isLiveWeek(weekMonday) && isDateInWeek(today, weekMonday)) {
+    return today;
+  }
+  return firstWeekday(weekMonday);
+}
+
+export function formatDayTabLabel(iso: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) {
+    return "";
+  }
+  const day = new Date(`${iso}T12:00:00`);
+  const [, month, date] = iso.split("-");
+  return `${DAY_TAB_WEEKDAYS[day.getDay()]} · ${month}/${date}`;
+}
+
+export function rowMatchesSelectedDay(
+  row: Pick<WorkOrderTableRow, "scheduledOn" | "status" | "carriedOver">,
+  selectedDayIso: string,
+  weekMonday?: string,
+): boolean {
+  if (Boolean(row.scheduledOn) && row.scheduledOn.slice(0, 10) === selectedDayIso) {
+    return true;
+  }
+  if (!weekMonday) {
+    return false;
+  }
+  return rowMatchesCarryOverDay(row, selectedDayIso, weekMonday);
+}
+
+export function buildSelectedDayGroup(
+  weekMonday: string,
+  selectedDayIso: string,
+  scheduled: WorkOrderTableRow[],
+): WorkOrderDayGroup {
+  const days = weekdaysMonFri(weekMonday);
+  const date = days.includes(selectedDayIso) ? selectedDayIso : firstWeekday(weekMonday);
+  const [, month, day] = date.split("-");
+  return {
+    key: `${month}/${day}`,
+    label: formatDayTabLabel(date),
+    date,
+    items: scheduled.filter((row) => rowMatchesSelectedDay(row, date, weekMonday)),
+  };
+}
diff --git a/src/domain/work-orders/utils/wizard-date-utils.ts b/src/domain/work-orders/utils/wizard-date-utils.ts
new file mode 100644
index 00000000..48a5ddfd
--- /dev/null
+++ b/src/domain/work-orders/utils/wizard-date-utils.ts
@@ -0,0 +1,176 @@
+export const MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+export function pad2(n: number): string {
+  return String(n).padStart(2, "0");
+}
+
+export function todayIso(): string {
+  const d = new Date();
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+}
+
+export function fmtDate(iso: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) {
+    return "";
+  }
+  const [y, m, d] = iso.split("-").map(Number);
+  return `${MONTH_NAMES[m - 1].slice(0, 3)} ${d}, ${y}`;
+}
+
+export function addDaysIso(iso: string, days: number): string {
+  const d = new Date(`${iso}T12:00:00`);
+  d.setDate(d.getDate() + days);
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+}
+
+export function mondayOf(iso: string): string {
+  const d = new Date(`${iso}T12:00:00`);
+  const dow = d.getDay();
+  d.setDate(d.getDate() + (dow === 0 ? -6 : 1 - dow));
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+}
+
+export function weeksOfMonth(y: number, m: number): string[] {
+  const firstIso = `${y}-${pad2(m)}-01`;
+  const lastIso = `${y}-${pad2(m)}-${pad2(new Date(y, m, 0).getDate())}`;
+  const out: string[] = [];
+  for (let mon = mondayOf(firstIso); mon <= lastIso; mon = addDaysIso(mon, 7)) {
+    if (addDaysIso(mon, 4) >= firstIso) {
+      out.push(mon);
+    }
+  }
+  return out;
+}
+
+export function weekRangeLabel(mondayIso: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(mondayIso)) {
+    return "";
+  }
+  const fri = addDaysIso(mondayIso, 4);
+  const [, sm, sd] = mondayIso.split("-").map(Number);
+  const [, em, ed] = fri.split("-").map(Number);
+  return `${MONTH_NAMES[sm - 1].slice(0, 3)} ${sd} – ${MONTH_NAMES[em - 1].slice(0, 3)} ${ed}`;
+}
+
+export function fmtWeekRange(startIso: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(startIso)) {
+    return fmtDate(startIso);
+  }
+  return weekRangeLabel(startIso);
+}
+
+/** Short date for ranges: "Jun 8". */
+export function fmtShortDate(iso: string): string {
+  if (!iso || !/^\d{4}-\d{2}-\d{2}$/.test(iso)) {
+    return "—";
+  }
+  const [, m, d] = iso.split("-").map(Number);
+  return `${MONTH_NAMES[m - 1].slice(0, 3)} ${d}`;
+}
+
+/** "Jun 8 – Jun 12" for a Schedule On range. */
+export function fmtDateRange(start: string, end: string): string {
+  return `${fmtShortDate(start)} – ${fmtShortDate(end)}`;
+}
+
+/** Inclusive day count between two ISO dates (order-independent). */
+export function rangeDayCount(a: string, b: string): number {
+  const d1 = new Date(`${a}T12:00:00`).getTime();
+  const d2 = new Date(`${b}T12:00:00`).getTime();
+  return Math.abs(Math.round((d2 - d1) / 86400000)) + 1;
+}
+
+export function fmt12(t: string): string {
+  const [h, m] = t.split(":").map(Number);
+  const ampm = h < 12 ? "AM" : "PM";
+  const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
+  return `${h12}:${String(m).padStart(2, "0")} ${ampm}`;
+}
+
+export function calcDuration(s: string, e: string): string {
+  const [sh, sm] = s.split(":").map(Number);
+  const [eh, em] = e.split(":").map(Number);
+  const mins = eh * 60 + em - (sh * 60 + sm);
+  if (mins <= 0) {
+    return "";
+  }
+  const h = Math.floor(mins / 60);
+  const m = mins % 60;
+  if (h && m) {
+    return `${h}h ${m}m`;
+  }
+  if (h) {
+    return `${h}h`;
+  }
+  return `${m}m`;
+}
+
+export function formatApptRange(start: string, end: string): string {
+  if (!start) {
+    return "—";
+  }
+  return end ? `${fmt12(start)} – ${fmt12(end)}` : fmt12(start);
+}
+
+export const TIME_SLOTS: string[] = (() => {
+  const out: string[] = [];
+  for (let m = 5 * 60; m <= 22 * 60; m += 30) {
+    const h = Math.floor(m / 60);
+    const mm = m % 60;
+    out.push(`${String(h).padStart(2, "0")}:${String(mm).padStart(2, "0")}`);
+  }
+  return out;
+})();
+
+export function parseApptTime(appt: string): { start: string; end: string } {
+  const m = appt.match(/(\d{1,2}):(\d{2})\s*[–-]\s*(\d{1,2}):(\d{2})/);
+  if (m) {
+    return {
+      start: `${m[1].padStart(2, "0")}:${m[2]}`,
+      end: `${m[3].padStart(2, "0")}:${m[4]}`,
+    };
+  }
+  const single = appt.match(/(\d{1,2}):(\d{2})\s*(AM|PM)/i);
+  if (single) {
+    let h = Number(single[1]) % 12;
+    if (/pm/i.test(single[3])) {
+      h += 12;
+    }
+    return { start: `${pad2(h)}:${single[2]}`, end: "" };
+  }
+  const startOnly = appt.trim().match(/^(\d{1,2}):(\d{2})$/);
+  if (startOnly) {
+    return {
+      start: `${startOnly[1].padStart(2, "0")}:${startOnly[2]}`,
+      end: "",
+    };
+  }
+  return { start: "", end: "" };
+}
+
+export function formatApptTimeValue(start: string, end: string): string {
+  if (!start) {
+    return "";
+  }
+  return end ? `${start} – ${end}` : start;
+}
+
+export function fmtWeekOf(mondayIso: string): string {
+  if (!mondayIso) {
+    return "";
+  }
+  return `Week of ${weekRangeLabel(mondayIso)}`;
+}
diff --git a/src/domain/work-orders/utils/wo-addon-cutoff.ts b/src/domain/work-orders/utils/wo-addon-cutoff.ts
new file mode 100644
index 00000000..e159407a
--- /dev/null
+++ b/src/domain/work-orders/utils/wo-addon-cutoff.ts
@@ -0,0 +1,66 @@
+import { addDaysIso, mondayOf } from "@/domain/work-orders/utils/wizard-date-utils";
+
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+
+/**
+ * Saturday of the week prior to the scheduledOn week (ISO date only).
+ * Cutoff instant is end of that day (23:59:59 local).
+ *
+ * SH-184: backend recalculates `isAddOn` whenever scheduling moves across weeks
+ * or is cleared, and owns audit. This helper is only a create-time FE hint.
+ */
+export function getAddonCutoffIso(scheduledOn: string): string | null {
+  const trimmed = scheduledOn.trim();
+  if (!ISO_DATE.test(trimmed)) {
+    return null;
+  }
+  return addDaysIso(mondayOf(trimmed), -2);
+}
+
+/**
+ * Preview whether Add-On would apply for a create-time schedule + createdAt.
+ * Returns null when scheduledOn is missing — callers may use a manual override.
+ *
+ * Not a freeze: after create (and on every schedule patch/clear) the backend is
+ * authoritative; FE must consume the returned `isAddOn` (SH-184).
+ */
+export function previewIsAddOnFromCutoff(input: {
+  createdAt: Date | string | number;
+  scheduledOn: string;
+}): boolean | null {
+  const cutoffIso = getAddonCutoffIso(input.scheduledOn);
+  if (!cutoffIso) {
+    return null;
+  }
+
+  const createdAt = input.createdAt instanceof Date ? input.createdAt : new Date(input.createdAt);
+  if (Number.isNaN(createdAt.getTime())) {
+    return null;
+  }
+
+  const cutoff = new Date(`${cutoffIso}T23:59:59`);
+  return createdAt.getTime() > cutoff.getTime();
+}
+
+/** @deprecated Prefer `previewIsAddOnFromCutoff` — name implied a freeze (SH-126). */
+export const computeIsAddOnAtCreation = previewIsAddOnFromCutoff;
+
+/**
+ * Resolve create-payload `isAddOn` hint: cutoff preview when scheduled, else
+ * manual override. Backend may recalculate immediately and on later schedule
+ * patches/clears; FE must not treat this value as frozen (SH-184).
+ */
+export function resolveIsAddOnForCreate(input: {
+  createdAt?: Date | string | number;
+  scheduledOn: string;
+  manualOverride?: boolean;
+}): boolean {
+  const computed = previewIsAddOnFromCutoff({
+    createdAt: input.createdAt ?? new Date(),
+    scheduledOn: input.scheduledOn,
+  });
+  if (computed !== null) {
+    return computed;
+  }
+  return Boolean(input.manualOverride);
+}
diff --git a/src/domain/work-orders/utils/wo-closability.ts b/src/domain/work-orders/utils/wo-closability.ts
new file mode 100644
index 00000000..841f68d2
--- /dev/null
+++ b/src/domain/work-orders/utils/wo-closability.ts
@@ -0,0 +1,218 @@
+import type { WorkOrderDispatchSummary } from "@/domain/work-orders/types/dispatch";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import type {
+  CompletionDocStatus,
+  WorkOrderTableRow,
+  WorkOrderUpliftSummary,
+} from "@/domain/work-orders/types/work-order-table-row";
+import type { WOType, WorkOrderWizardDraft } from "@/domain/work-orders/types/work-order-wizard";
+
+/** Fields required to evaluate whether a WO may be marked Completed. */
+export type WoClosabilityInput = {
+  dispatcherId: string;
+  dispatcherName: string;
+  /** Company / vendor assignment — required for Completed. */
+  company: string;
+  /** Board vendor id; assignment is valid with vendorId even when company label is empty. */
+  vendorId: string;
+  /** Technician is optional for closability; modeled separately from company. */
+  tech: string;
+  /** Work completed date (API CompletedDate). Empty until set. */
+  completedDate: string;
+  woNumber: string;
+  pm: string;
+  docStatus: CompletionDocStatus;
+  mediaCount: number;
+  type: WOType | "";
+  upliftSummary?: WorkOrderUpliftSummary | null;
+  hasPendingUplift?: boolean;
+};
+
+export const PENDING_UPLIFT_GAP = "Pending uplift approval";
+
+/** SH-188 tooltip when Completed is blocked solely by a pending uplift. */
+export const UPLIFT_PENDING_COMPLETED_TITLE =
+  "This work order has an uplift pending approval and cannot be completed.";
+
+/** Real (non-placeholder) WO number — non-empty and not an SH-prefixed draft id. */
+export function isRealWoNumber(woNumber: string): boolean {
+  const trimmed = woNumber.trim();
+  if (!trimmed) {
+    return false;
+  }
+  return !/^SH/i.test(trimmed);
+}
+
+/** Legacy detail menus use "Done"; board/wizard lifecycle uses "Completed". */
+export function isCompletionStatusLabel(status: string): boolean {
+  return status === "Done" || status === "Completed";
+}
+
+export function hasPendingUplift(
+  row: Pick<WoClosabilityInput, "upliftSummary" | "hasPendingUplift">,
+): boolean {
+  if (row.hasPendingUplift === true) {
+    return true;
+  }
+  return (row.upliftSummary?.pendingCount ?? 0) > 0;
+}
+
+function hasDispatcher(row: Pick<WoClosabilityInput, "dispatcherId" | "dispatcherName">): boolean {
+  return Boolean(row.dispatcherId.trim() || row.dispatcherName.trim());
+}
+
+function hasAssignedCompany(row: Pick<WoClosabilityInput, "company" | "vendorId">): boolean {
+  return Boolean((row.company ?? "").trim() || (row.vendorId ?? "").trim());
+}
+
+function hasService(pm: string): boolean {
+  return Boolean(pm.trim());
+}
+
+function hasCompletionDocument(docStatus: CompletionDocStatus): boolean {
+  return docStatus === "Yes" || docStatus === "NN";
+}
+
+/**
+ * Gaps that block Completed, in design hierarchy:
+ * fields → uplift pending → completion document / photos.
+ * (Scheduled-date gate is a separate design P1 — not in this module yet.)
+ */
+export function getClosabilityGaps(row: WoClosabilityInput): string[] {
+  const gaps: string[] = [];
+
+  if (!hasDispatcher(row)) {
+    gaps.push("Dispatcher");
+  }
+  if (!hasAssignedCompany(row)) {
+    gaps.push("Company");
+  }
+  if (!row.completedDate.trim()) {
+    gaps.push("Completed Date");
+  }
+  if (!isRealWoNumber(row.woNumber)) {
+    gaps.push("WO number");
+  }
+  if (!hasService(row.pm)) {
+    gaps.push("Service");
+  }
+
+  // Authoritative pending uplift (board pendingUpliftCount / hasPendingUplift) blocks completion.
+  // Missing uplift fields mean no pending evidence until the board contract supplies the count.
+  if (hasPendingUplift(row)) {
+    gaps.push(PENDING_UPLIFT_GAP);
+  }
+
+  if (row.type === "PM" || row.type === "Overdue") {
+    if (!hasCompletionDocument(row.docStatus)) {
+      gaps.push("Completion document");
+    }
+  }
+
+  if (row.type === "Emergency" || row.type === "Reactive") {
+    if (row.mediaCount < 1) {
+      gaps.push("At least 1 photo");
+    }
+  }
+
+  return gaps;
+}
+
+export function formatClosabilityMissingTitle(gaps: string[]): string {
+  if (gaps.includes(PENDING_UPLIFT_GAP)) {
+    return UPLIFT_PENDING_COMPLETED_TITLE;
+  }
+  return `Missing: ${gaps.join(", ")}`;
+}
+
+export type CompDocGateResult = { allowed: true } | { allowed: false; reason: string };
+
+/**
+ * Gate for completion-document generation. CompDocDialog (not yet on `dev`) should call this
+ * before opening generate flow and surface `reason` when blocked.
+ *
+ * Intentionally omits the "Completion document" closability gap — generate is how that gap is filled.
+ */
+export function canGenerateCompDoc(row: WoClosabilityInput): CompDocGateResult {
+  const gaps = getClosabilityGaps(row).filter((gap) => gap !== "Completion document");
+  if (gaps.length > 0) {
+    return { allowed: false, reason: formatClosabilityMissingTitle(gaps) };
+  }
+  return { allowed: true };
+}
+
+/** Map create-wizard draft onto the shared closability contract. */
+export function wizardDraftToClosabilityInput(draft: WorkOrderWizardDraft): WoClosabilityInput {
+  return {
+    dispatcherId: draft.assigneeId,
+    dispatcherName: draft.assigneeName,
+    company: draft.vendorName,
+    vendorId: draft.vendorId ?? "",
+    tech: "",
+    completedDate: "",
+    woNumber: draft.woNumber,
+    pm: draft.pm,
+    docStatus: "",
+    mediaCount: 0,
+    type: draft.type,
+  };
+}
+
+const INACTIVE_DISPATCH_STATUSES = new Set(["cancelled", "canceled", "refused"]);
+
+export function isInactiveDispatchStatus(status: string | undefined): boolean {
+  return INACTIVE_DISPATCH_STATUSES.has((status ?? "").trim().toLowerCase());
+}
+
+export function tableRowToClosabilityInput(wo: WorkOrderTableRow): WoClosabilityInput {
+  const inactive = isInactiveDispatchStatus(wo.primaryDispatchStatus);
+  return {
+    dispatcherId: wo.dispatcherId,
+    dispatcherName: wo.dispatcherName,
+    company: inactive ? "" : wo.company,
+    vendorId: inactive ? "" : (wo.vendorId ?? ""),
+    tech: wo.tech,
+    completedDate: wo.completedDate ?? "",
+    woNumber: wo.woNumber,
+    pm: wo.pm,
+    docStatus: wo.docStatus,
+    mediaCount: wo.mediaCount,
+    type: wo.type,
+    upliftSummary: wo.upliftSummary,
+    hasPendingUplift: wo.hasPendingUplift,
+  };
+}
+
+function currentAssignedDispatch(
+  dispatches: WorkOrderDispatchSummary[],
+): WorkOrderDispatchSummary | undefined {
+  return dispatches.find((dispatch) => {
+    if (isInactiveDispatchStatus(dispatch.status)) {
+      return false;
+    }
+    const vendorId = String(dispatch.vendorId ?? "").trim();
+    return Boolean((dispatch.vendorName ?? "").trim() || vendorId);
+  });
+}
+
+/**
+ * Map standalone detail DTO onto closability. Uses authoritative `type` / `docStatus` /
+ * `mediaCount` (enriched from board detail on the view route). Never treats `source`
+ * as WorkOrderType. `problem` is the same service field the board maps into `pm`.
+ */
+export function detailToClosabilityInput(wo: WorkOrderDetail): WoClosabilityInput {
+  const assigned = currentAssignedDispatch(wo.dispatches);
+  return {
+    dispatcherId: "",
+    dispatcherName: wo.assignedTo,
+    company: assigned?.vendorName ?? "",
+    vendorId: assigned ? String(assigned.vendorId ?? "").trim() : "",
+    tech: "",
+    completedDate: wo.completedDate,
+    woNumber: wo.workOrderNumber || wo.internalWONumber,
+    pm: wo.problem,
+    docStatus: wo.docStatus,
+    mediaCount: wo.mediaCount,
+    type: wo.type,
+  };
+}
diff --git a/src/domain/work-orders/utils/wo-lifecycle-transitions.ts b/src/domain/work-orders/utils/wo-lifecycle-transitions.ts
new file mode 100644
index 00000000..f0184ef9
--- /dev/null
+++ b/src/domain/work-orders/utils/wo-lifecycle-transitions.ts
@@ -0,0 +1,208 @@
+import {
+  ALL_WIZARD_STATUSES,
+  type WizardWOStatus,
+} from "@/domain/work-orders/types/work-order-wizard";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import {
+  PENDING_UPLIFT_GAP,
+  UPLIFT_PENDING_COMPLETED_TITLE,
+} from "@/domain/work-orders/utils/wo-closability";
+
+/**
+ * Lifecycle states the server derives (Incomplete from create, Scheduled from Schedule On).
+ * Past Due is an overlay, not a status. None of these may be picked manually on an existing WO.
+ */
+export const AUTOMATIC_LIFECYCLE_STATUSES: readonly WizardWOStatus[] = ["Incomplete", "Scheduled"];
+
+/** Manually selectable statuses for an existing WO — Canceled is kebab-only. */
+export const BOARD_INLINE_STATUSES: readonly WizardWOStatus[] = ALL_WIZARD_STATUSES.filter(
+  (status) => !AUTOMATIC_LIFECYCLE_STATUSES.includes(status),
+);
+
+/** Inline options for an existing WO never repeat its current status. */
+export function getInlineStatusTransitions(currentStatus: string): WizardWOStatus[] {
+  return BOARD_INLINE_STATUSES.filter((status) => status !== currentStatus);
+}
+
+/** AAP `CREATION_STATUSES` — wizard Step 3 and inline create. */
+export const CREATION_INLINE_STATUSES: readonly WizardWOStatus[] = [
+  "Incomplete",
+  "Pending",
+  "Scheduled",
+];
+
+export const SCHEDULED_NEEDS_DATE_MSG =
+  "Set a Schedule On date before marking this work order as Scheduled.";
+
+export const PAST_DUE_BADGE_TOOLTIP =
+  "This WO missed its service window. Reschedule to unlock status updates.";
+
+export const PAST_DUE_POPOVER_BODY =
+  "This work order is past due. A new date must be scheduled before the status can be updated.";
+
+export const PAST_DUE_RESCHEDULE_CTA = "Reschedule →";
+
+export const COMPLETED_DOC_BLOCK_MSG =
+  "Generate or mark the completion document as not required before completing this work order";
+
+export const COMPLETED_MEDIA_BLOCK_MSG =
+  "Upload at least one completion photo before completing this work order.";
+
+const COMPLETE_ACTION = "completing this work order";
+
+const EMPTY_FIELD_TOKENS = new Set(["", "-", "—", "N/A", "n/a"]);
+
+const PRE_SCHEDULE_STATUSES = new Set<string>(["Incomplete", "Pending", ""]);
+
+const FIELD_GAP_TO_AAP_LABEL: [string, string][] = [
+  ["Dispatcher", "Assigned To"],
+  ["Company", "Vendor"],
+  ["Completed Date", "Completed Date"],
+  ["Service", "Service"],
+];
+
+export type ScheduleDateInput = {
+  scheduledOn?: string;
+  scheduleWeekOnly?: boolean;
+  schedMode?: string;
+};
+
+export type StatusOptionState = {
+  disabled: boolean;
+  title?: string;
+};
+
+export function isLifecycleFieldEmpty(value?: string): boolean {
+  if (value == null) {
+    return true;
+  }
+  const trimmed = value.trim();
+  return EMPTY_FIELD_TOKENS.has(trimmed);
+}
+
+/** AAP `hasScheduleDate`: concrete day/range only — week-only does not count. */
+export function hasConcreteScheduleDate(row: ScheduleDateInput): boolean {
+  if (row.scheduleWeekOnly === true || row.schedMode === "week") {
+    return false;
+  }
+  return !isLifecycleFieldEmpty(row.scheduledOn);
+}
+
+export function isPreScheduleStatus(status: string): boolean {
+  return PRE_SCHEDULE_STATUSES.has(status);
+}
+
+export function formatAapCompletedBlockTitle(gaps: string[]): string | undefined {
+  if (gaps.length === 0) {
+    return undefined;
+  }
+
+  const fields = FIELD_GAP_TO_AAP_LABEL.filter(([gap]) => gaps.includes(gap)).map(
+    ([, label]) => label,
+  );
+
+  if (fields.length === 1 && fields[0] === "Service") {
+    return `Select a service before ${COMPLETE_ACTION}.`;
+  }
+  if (fields.length > 0) {
+    return `Fill in ${fields.join(", ")} before ${COMPLETE_ACTION}.`;
+  }
+  if (gaps.includes("WO number")) {
+    return `Assign a real APM number (not SH) before ${COMPLETE_ACTION}.`;
+  }
+  if (gaps.includes(PENDING_UPLIFT_GAP)) {
+    return UPLIFT_PENDING_COMPLETED_TITLE;
+  }
+  if (gaps.includes("Completion document")) {
+    return COMPLETED_DOC_BLOCK_MSG;
+  }
+  if (gaps.includes("At least 1 photo")) {
+    return COMPLETED_MEDIA_BLOCK_MSG;
+  }
+  return undefined;
+}
+
+export function getStatusOptionState(
+  row: ScheduleDateInput,
+  status: WizardWOStatus,
+  closabilityGaps: string[],
+): StatusOptionState {
+  if (status === "Scheduled" && !hasConcreteScheduleDate(row)) {
+    return { disabled: true, title: SCHEDULED_NEEDS_DATE_MSG };
+  }
+  if (status === "Completed") {
+    const title = formatAapCompletedBlockTitle(closabilityGaps);
+    if (title) {
+      return { disabled: true, title };
+    }
+  }
+  return { disabled: false };
+}
+
+/** AAP `maybeAutoSchedule` — no dispatcher requirement. */
+export function maybeAutoSchedulePatch(
+  row: ScheduleDateInput & { status?: string },
+): WorkOrderTablePatch {
+  const hasDate = hasConcreteScheduleDate(row);
+  if (hasDate && isPreScheduleStatus(row.status ?? "")) {
+    return { status: "Scheduled" };
+  }
+  if (!hasDate && row.status === "Scheduled") {
+    return { status: "Pending" };
+  }
+  return {};
+}
+
+function patchTouchesScheduleOrStatus(patch: WorkOrderTablePatch): boolean {
+  return (
+    patch.status !== undefined ||
+    patch.scheduledOn !== undefined ||
+    patch.scheduleWeekOnly !== undefined ||
+    patch.targetWeek !== undefined
+  );
+}
+
+export function mergeAutoSchedulePatch(
+  row: WorkOrderTableRow | undefined,
+  patch: WorkOrderTablePatch,
+): WorkOrderTablePatch {
+  if (!row || !patchTouchesScheduleOrStatus(patch)) {
+    return patch;
+  }
+  const merged = {
+    status: patch.status ?? row.status,
+    scheduledOn: patch.scheduledOn !== undefined ? patch.scheduledOn : row.scheduledOn,
+    scheduleWeekOnly:
+      patch.scheduleWeekOnly !== undefined ? patch.scheduleWeekOnly : row.scheduleWeekOnly,
+  };
+  return { ...patch, ...maybeAutoSchedulePatch(merged) };
+}
+
+/** Apply schedule fields and the AAP auto-status for that next schedule. */
+export function withAutoScheduleStatus<T extends ScheduleDateInput & { status?: string }>(
+  current: T,
+  schedulePatch: Partial<T> & ScheduleDateInput,
+): Partial<T> {
+  const next = {
+    status: schedulePatch.status ?? current.status ?? "",
+    scheduledOn:
+      schedulePatch.scheduledOn !== undefined ? schedulePatch.scheduledOn : current.scheduledOn,
+    scheduleWeekOnly:
+      schedulePatch.scheduleWeekOnly !== undefined
+        ? schedulePatch.scheduleWeekOnly
+        : current.scheduleWeekOnly,
+  };
+  return { ...schedulePatch, ...maybeAutoSchedulePatch(next) };
+}
+
+/** AAP create: apply maybeAutoSchedule to the draft before POST. */
+export function resolveCreationStatus(row: ScheduleDateInput & { status: string }): WizardWOStatus {
+  const autoStatus = maybeAutoSchedulePatch(row).status;
+  if (autoStatus === "Scheduled" || autoStatus === "Pending") {
+    return autoStatus;
+  }
+  return (row.status || "Incomplete") as WizardWOStatus;
+}
diff --git a/src/domain/work-orders/utils/wo-number-input.ts b/src/domain/work-orders/utils/wo-number-input.ts
new file mode 100644
index 00000000..7f3ae624
--- /dev/null
+++ b/src/domain/work-orders/utils/wo-number-input.ts
@@ -0,0 +1,33 @@
+import { isRealWoNumber } from "@/domain/work-orders/utils/wo-closability";
+
+/** Board WO numbers are an 11-digit APM number or an SH placeholder of at most 11 characters. */
+export const BOARD_WO_NUMBER_MAX_LENGTH = 11;
+
+export const WO_NUMBER_FORMAT_MESSAGE =
+  "Work order number must be 11 digits or an SH number (e.g. SH00001)";
+
+export const WO_NUMBER_DOWNGRADE_MESSAGE =
+  "Cannot replace an APM work order number with an internal number";
+
+export function sanitizeBoardWoNumberInput(raw: string): string {
+  return raw
+    .replace(/[^a-zA-Z0-9]/g, "")
+    .toUpperCase()
+    .slice(0, BOARD_WO_NUMBER_MAX_LENGTH);
+}
+
+export function isProvisionalWoNumber(woNumber: string): boolean {
+  return /^SH/i.test(woNumber.trim());
+}
+
+export function isValidBoardWoNumber(woNumber: string): boolean {
+  return /^\d{11}$/.test(woNumber) || /^SH\d{1,9}$/i.test(woNumber);
+}
+
+/**
+ * Only an already-saved real APM number is protected from being replaced by an
+ * SH placeholder. A brand-new WO has no saved number, so the rule never applies there.
+ */
+export function isWoNumberDowngrade(savedWoNumber: string, nextWoNumber: string): boolean {
+  return isRealWoNumber(savedWoNumber) && isProvisionalWoNumber(nextWoNumber);
+}
diff --git a/src/domain/work-orders/utils/work-order-feedback-toasts.ts b/src/domain/work-orders/utils/work-order-feedback-toasts.ts
new file mode 100644
index 00000000..152688f5
--- /dev/null
+++ b/src/domain/work-orders/utils/work-order-feedback-toasts.ts
@@ -0,0 +1,91 @@
+import { toast } from "react-toastify";
+import type { WorkOrderTablePatch } from "@/domain/work-orders/types/work-order-table-row";
+import type { VendorAssignmentFields } from "@/domain/work-orders/utils/vendor-assignment-patch";
+import { toVendorTablePatch } from "@/domain/work-orders/utils/vendor-assignment-patch";
+
+type PersistPatchFn = (
+  id: string | number,
+  patch: WorkOrderTablePatch,
+  options?: {
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+  },
+) => void;
+
+export function workOrderCanceledMessage(woNumber: string) {
+  return `Work order #${woNumber} canceled.`;
+}
+
+export function vendorAssignedMessage() {
+  return "Vendor assigned";
+}
+
+export function workOrderSavedMessage() {
+  return "Work order saved successfully";
+}
+
+export function notifyWorkOrderCanceled(woNumber: string) {
+  toast.warning(workOrderCanceledMessage(woNumber));
+}
+
+export function notifyVendorAssigned() {
+  toast.success(vendorAssignedMessage());
+}
+
+export function notifyWorkOrderSaved() {
+  toast.success(workOrderSavedMessage());
+}
+
+function isAssignedVendorId(vendorId: unknown): boolean {
+  return vendorId != null && String(vendorId).trim() !== "";
+}
+
+export function isVendorAssignmentPatch(patch: WorkOrderTablePatch): boolean {
+  return (
+    Object.prototype.hasOwnProperty.call(patch, "vendorId") && isAssignedVendorId(patch.vendorId)
+  );
+}
+
+export function notifySlideOverSaveSuccess(patch: WorkOrderTablePatch) {
+  if (isVendorAssignmentPatch(patch)) {
+    notifyVendorAssigned();
+    return;
+  }
+  notifyWorkOrderSaved();
+}
+
+export function patchWorkOrderAsCanceled(
+  patchField: PersistPatchFn,
+  row: { id: string | number; woNumber: string },
+) {
+  patchField(
+    row.id,
+    { status: "Canceled" },
+    {
+      onSuccess: () => notifyWorkOrderCanceled(row.woNumber),
+    },
+  );
+}
+
+export function patchWorkOrderAsCompleted(patchField: PersistPatchFn, id: string | number) {
+  patchField(id, { status: "Completed" });
+}
+
+export function applyVendorTableSave(
+  onPatch: PersistPatchFn,
+  id: string | number,
+  fields: VendorAssignmentFields,
+) {
+  onPatch(id, toVendorTablePatch(fields), {
+    onSuccess: isAssignedVendorId(fields.vendorId) ? notifyVendorAssigned : notifyWorkOrderSaved,
+  });
+}
+
+export function applyAssignedToTableSave(
+  onPatch: PersistPatchFn,
+  id: string | number,
+  dispatcherId: string,
+  dispatcherName: string,
+) {
+  onPatch(id, { dispatcherId, dispatcherName }, { onSuccess: notifyWorkOrderSaved });
+}
diff --git a/src/domain/work-orders/utils/work-order-lock.ts b/src/domain/work-orders/utils/work-order-lock.ts
new file mode 100644
index 00000000..19af3d42
--- /dev/null
+++ b/src/domain/work-orders/utils/work-order-lock.ts
@@ -0,0 +1,52 @@
+export function isWorkOrderCanceled(status: string | null | undefined): boolean {
+  return status === "Canceled" || status === "Cancelled";
+}
+
+export function isWorkOrderCompleted(status: string | null | undefined): boolean {
+  return status === "Completed" || status === "Done";
+}
+
+export function isWorkOrderCoreLocked(status: string | null | undefined): boolean {
+  return isWorkOrderCompleted(status);
+}
+
+export function isWorkOrderFullyLocked(status: string | null | undefined): boolean {
+  return isWorkOrderCanceled(status);
+}
+
+export function canMutateWorkOrderFlag(status: string | null | undefined): boolean {
+  return !isWorkOrderFullyLocked(status);
+}
+
+export function canMutateWorkOrderComments(status: string | null | undefined): boolean {
+  return !isWorkOrderFullyLocked(status);
+}
+
+export function canMutateWorkOrderExtraDocs(status: string | null | undefined): boolean {
+  return !isWorkOrderFullyLocked(status);
+}
+
+const COMPLETED_BOARD_PATCH_KEYS = new Set(["flagColor"]);
+
+/**
+ * Board PATCH policy for Completed: only `flagColor`. Comments and Extra Docs use
+ * dedicated endpoints (`canMutateWorkOrderComments` / `canMutateWorkOrderExtraDocs`).
+ */
+export function canApplyWorkOrderTablePatch(
+  status: string | null | undefined,
+  patch: Record<string, unknown>,
+): boolean {
+  if (isWorkOrderFullyLocked(status)) {
+    return false;
+  }
+  if (!isWorkOrderCoreLocked(status)) {
+    return true;
+  }
+  const keys = Object.keys(patch);
+  return keys.length > 0 && keys.every((key) => COMPLETED_BOARD_PATCH_KEYS.has(key));
+}
+
+/** Completion document / completion-media surface — not Extra Docs or comments. */
+export function isWorkOrderCompletionSurfaceReadOnly(status: string | null | undefined): boolean {
+  return isWorkOrderFullyLocked(status) || isWorkOrderCoreLocked(status);
+}
diff --git a/src/domain/work-orders/utils/work-order-media-limits.ts b/src/domain/work-orders/utils/work-order-media-limits.ts
new file mode 100644
index 00000000..5d566ccd
--- /dev/null
+++ b/src/domain/work-orders/utils/work-order-media-limits.ts
@@ -0,0 +1,76 @@
+import { isWorkOrderCompletionSurfaceReadOnly } from "@/domain/work-orders/utils/work-order-lock";
+
+/** Backend RequestSizeLimit for media and completion-doc uploads. */
+export const MAX_WORK_ORDER_MEDIA_BYTES = 50_000_000;
+
+const MEDIA_MIME_TYPES = new Set([
+  "image/jpeg",
+  "image/jpg",
+  "image/png",
+  "video/mp4",
+  "video/quicktime",
+]);
+
+const MEDIA_EXTENSIONS = new Set([".jpg", ".jpeg", ".png", ".mp4", ".mov"]);
+
+const EXTRA_DOC_MIME_TYPES = new Set([
+  ...MEDIA_MIME_TYPES,
+  "application/pdf",
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+]);
+
+const EXTRA_DOC_EXTENSIONS = new Set([...MEDIA_EXTENSIONS, ".pdf", ".doc", ".docx"]);
+
+function fileExtension(file: File): string {
+  const name = file.name.toLowerCase();
+  const dot = name.lastIndexOf(".");
+  return dot >= 0 ? name.slice(dot) : "";
+}
+
+function isTypeAllowed(file: File, mimes: Set<string>, extensions: Set<string>): boolean {
+  const mimeOk = Boolean(file.type) && mimes.has(file.type.toLowerCase());
+  const extOk = extensions.has(fileExtension(file));
+  return mimeOk || extOk;
+}
+
+export function isWorkOrderFileTooLarge(
+  file: File,
+  maxBytes = MAX_WORK_ORDER_MEDIA_BYTES,
+): boolean {
+  return file.size > maxBytes;
+}
+
+export function isWorkOrderMediaTypeAllowed(file: File): boolean {
+  return isTypeAllowed(file, MEDIA_MIME_TYPES, MEDIA_EXTENSIONS);
+}
+
+export function isWorkOrderExtraDocTypeAllowed(file: File): boolean {
+  return isTypeAllowed(file, EXTRA_DOC_MIME_TYPES, EXTRA_DOC_EXTENSIONS);
+}
+
+export function workOrderMediaAcceptAttribute(): string {
+  return "image/jpeg,image/jpg,image/png,video/mp4,video/quicktime,.jpg,.jpeg,.png,.mp4,.mov";
+}
+
+export function workOrderExtraDocsAcceptAttribute(): string {
+  return `${workOrderMediaAcceptAttribute()},.pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document`;
+}
+
+export function formatMediaSizeLimit(maxBytes = MAX_WORK_ORDER_MEDIA_BYTES): string {
+  return `${Math.round(maxBytes / 1_000_000)} MB`;
+}
+
+/** Completion-doc / completion-media lock: Canceled or Completed. Extra Docs use canMutateWorkOrderExtraDocs. */
+export function isWorkOrderDocumentsReadOnly(status: string | null | undefined): boolean {
+  return isWorkOrderCompletionSurfaceReadOnly(status);
+}
+
+export function canDeleteWorkOrderMedia(media: {
+  id: string | number;
+  isLegacy?: boolean;
+}): boolean {
+  if (media.isLegacy) return false;
+  const numericId = typeof media.id === "number" ? media.id : Number(media.id);
+  return Number.isFinite(numericId) && numericId > 0;
+}
diff --git a/src/domain/work-orders/utils/work-order-media-utils.ts b/src/domain/work-orders/utils/work-order-media-utils.ts
new file mode 100644
index 00000000..4deee9a0
--- /dev/null
+++ b/src/domain/work-orders/utils/work-order-media-utils.ts
@@ -0,0 +1,31 @@
+import type {
+  FileCategory,
+  MediaCategory,
+  MediaFile,
+} from "@/domain/work-orders/types/work-order-media";
+
+let mediaIdCounter = 0;
+
+export function classifyUpload(f: File): {
+  fileType: FileCategory;
+  category: MediaCategory;
+} {
+  const t = f.type;
+  if (t.startsWith("image/")) return { fileType: "image", category: "Photo" };
+  if (t.startsWith("video/")) return { fileType: "video", category: "Video" };
+  if (t === "application/pdf" || /\.pdf$/i.test(f.name)) {
+    return { fileType: "pdf", category: "Report" };
+  }
+  return { fileType: "other", category: "Other" };
+}
+
+export function makeMediaFile(f: File): MediaFile {
+  const { fileType, category } = classifyUpload(f);
+  return {
+    id: `m-${Date.now()}-${mediaIdCounter++}`,
+    name: f.name,
+    fileType,
+    url: URL.createObjectURL(f),
+    category,
+  };
+}
diff --git a/src/domain/work-orders/utils/work-order-patch-queue.ts b/src/domain/work-orders/utils/work-order-patch-queue.ts
new file mode 100644
index 00000000..caf2e217
--- /dev/null
+++ b/src/domain/work-orders/utils/work-order-patch-queue.ts
@@ -0,0 +1,20 @@
+/**
+ * Serializes async work per work-order id so concurrent patches (e.g. a completion-doc
+ * status save firing alongside a completed-date save) never race two overlapping
+ * get-then-update round trips against the same record. Each call for a given id waits
+ * for the previous one to settle before starting its own fetch-and-update cycle.
+ */
+export function createWorkOrderPatchQueue() {
+  const chains = new Map<string, Promise<unknown>>();
+
+  return function enqueue<T>(id: string | number, run: () => Promise<T>): Promise<T> {
+    const key = String(id);
+    const previous = chains.get(key) ?? Promise.resolve();
+    const settled = previous.catch(() => undefined).then(run);
+    chains.set(
+      key,
+      settled.catch(() => undefined),
+    );
+    return settled;
+  };
+}
diff --git a/src/hooks/api/useEmployees.js b/src/hooks/api/useEmployees.js
deleted file mode 100644
index 86f8942a..00000000
--- a/src/hooks/api/useEmployees.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { employeesApi } from '../../lib/api/services';
-import { toast } from 'react-toastify';
-import {
-  EMPLOYEES_LIST,
-  EMPLOYEES_DETAIL,
-  EMPLOYEES_DROPDOWN,
-  API_ERROR_MESSAGE,
-  STALE_TIME_LONG
-} from '../../constants';
-
-export function useEmployees(params = {}) {
-  return useQuery({
-    queryKey: [EMPLOYEES_LIST, params],
-    queryFn: () => employeesApi.getList(params),
-    keepPreviousData: true,
-  });
-}
-
-export function useEmployee(id, options = {}) {
-  return useQuery({
-    queryKey: [EMPLOYEES_DETAIL, id],
-    queryFn: () => employeesApi.getById(id),
-    enabled: !!id,
-    ...options,
-  });
-}
-
-export function useEmployeesDropdown() {
-  return useQuery({
-    queryKey: [EMPLOYEES_DROPDOWN],
-    queryFn: () => employeesApi.getDropdown(),
-    staleTime: STALE_TIME_LONG,
-  });
-}
-
-export function useCreateEmployee() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (data) => employeesApi.create(data),
-    onSuccess: () => {
-      queryClient.invalidateQueries([EMPLOYEES_LIST]);
-      queryClient.invalidateQueries([EMPLOYEES_DROPDOWN]);
-      toast.success('Employee created successfully!');
-    },
-    onError: (error) => {
-      toast.error(error.message || API_ERROR_MESSAGE);
-    },
-  });
-}
-
-export function useUpdateEmployee() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (data) => employeesApi.update(data),
-    onSuccess: () => {
-      queryClient.invalidateQueries([EMPLOYEES_LIST]);
-      queryClient.invalidateQueries([EMPLOYEES_DETAIL]);
-      queryClient.invalidateQueries([EMPLOYEES_DROPDOWN]);
-      toast.success('Employee updated successfully!');
-    },
-    onError: (error) => {
-      toast.error(error.message || API_ERROR_MESSAGE);
-    },
-  });
-}
-
-export function useDeleteEmployee() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (id) => employeesApi.delete(id),
-    onSuccess: () => {
-      queryClient.invalidateQueries([EMPLOYEES_LIST]);
-      queryClient.invalidateQueries([EMPLOYEES_DETAIL]);
-      queryClient.invalidateQueries([EMPLOYEES_DROPDOWN]);
-      toast.success('Employee deleted successfully!');
-    },
-    onError: (error) => {
-      toast.error(error.message || API_ERROR_MESSAGE);
-    },
-  });
-}
diff --git a/src/hooks/api/usePMSchedules.js b/src/hooks/api/usePMSchedules.js
deleted file mode 100644
index 98423bdc..00000000
--- a/src/hooks/api/usePMSchedules.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { pmSchedulesApi } from '../../lib/api/services';
-import { toast } from 'react-toastify';
-import {
-  PM_SCHEDULES_LIST,
-  PM_SCHEDULES_DETAIL,
-  API_SUCCESS_MESSAGE,
-  API_ERROR_MESSAGE,
-} from '../../constants';
-
-/**
- * Hook to fetch PM schedules list
- */
-export function usePMSchedules(params = {}) {
-  return useQuery({
-    queryKey: [PM_SCHEDULES_LIST, params],
-    queryFn: () => pmSchedulesApi.getList(params),
-    keepPreviousData: true,
-  });
-}
-
-/**
- * Hook to fetch a single PM schedule by ID
- */
-export function usePMSchedule(id, options = {}) {
-  return useQuery({
-    queryKey: [PM_SCHEDULES_DETAIL, id],
-    queryFn: () => pmSchedulesApi.getById(id),
-    enabled: !!id,
-    ...options,
-  });
-}
-
-/**
- * Hook to save (create/update) a PM schedule
- */
-export function useSavePMSchedule() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (data) => pmSchedulesApi.save(data),
-    onSuccess: () => {
-      queryClient.invalidateQueries([PM_SCHEDULES_LIST]);
-      queryClient.invalidateQueries([PM_SCHEDULES_DETAIL]);
-      toast.success('PM schedule saved successfully!');
-    },
-    onError: (error) => {
-      toast.error(error.message || API_ERROR_MESSAGE);
-    },
-  });
-}
-
-/**
- * Hook to delete a PM schedule
- */
-export function useDeletePMSchedule() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (id) => pmSchedulesApi.delete(id),
-    onSuccess: () => {
-      queryClient.invalidateQueries([PM_SCHEDULES_LIST]);
-      toast.success('PM schedule deleted successfully!');
-    },
-    onError: (error) => {
-      toast.error(error.message || API_ERROR_MESSAGE);
-    },
-  });
-}
diff --git a/src/hooks/api/useWorkOrders.js b/src/hooks/api/useWorkOrders.js
deleted file mode 100644
index 49f3d8b0..00000000
--- a/src/hooks/api/useWorkOrders.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { workOrdersApi } from '../../lib/api/services';
-import { toast } from 'react-toastify';
-import {
-  WORK_ORDERS_LIST,
-  WORK_ORDERS_DETAIL,
-  API_SUCCESS_MESSAGE,
-  API_ERROR_MESSAGE
-} from '../../constants';
-
-/**
- * Hook to fetch work orders list with pagination and filters
- */
-export function useWorkOrders(params = {}) {
-  return useQuery({
-    queryKey: [WORK_ORDERS_LIST, params],
-    queryFn: () => workOrdersApi.getList(params),
-    keepPreviousData: true,
-  });
-}
-
-/**
- * Hook to fetch a single work order by ID
- */
-export function useWorkOrder(id, options = {}) {
-  return useQuery({
-    queryKey: [WORK_ORDERS_DETAIL, id],
-    queryFn: () => workOrdersApi.getById(id),
-    enabled: !!id,
-    ...options,
-  });
-}
-
-/**
- * Hook to create a new work order
- */
-export function useCreateWorkOrder() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (data) => workOrdersApi.create(data),
-    onSuccess: () => {
-      queryClient.invalidateQueries([WORK_ORDERS_LIST]);
-      queryClient.invalidateQueries([WORK_ORDERS_DETAIL]);
-      toast.success('Work order created successfully!');
-    },
-    onError: (error) => {
-      toast.error(error.message || API_ERROR_MESSAGE);
-    },
-  });
-}
-
-/**
- * Hook to update a work order
- */
-export function useUpdateWorkOrder() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (data) => workOrdersApi.update(data),
-    onSuccess: (data, variables) => {
-      queryClient.invalidateQueries([WORK_ORDERS_LIST]);
-      if (variables.id) {
-        queryClient.invalidateQueries([WORK_ORDERS_DETAIL, variables.id]);
-      }
-      toast.success('Work order updated successfully!');
-    },
-    onError: (error) => {
-      toast.error(error.message || API_ERROR_MESSAGE);
-    },
-  });
-}
-
-/**
- * Hook to delete a work order
- */
-export function useDeleteWorkOrder() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (id) => workOrdersApi.delete(id),
-    onSuccess: () => {
-      queryClient.invalidateQueries([WORK_ORDERS_LIST]);
-      queryClient.invalidateQueries([WORK_ORDERS_DETAIL]);
-      toast.success('Work order deleted successfully!');
-    },
-    onError: (error) => {
-      toast.error(error.message || API_ERROR_MESSAGE);
-    },
-  });
-}
diff --git a/src/hooks/use-debounce.ts b/src/hooks/use-debounce.ts
new file mode 100644
index 00000000..307e70e9
--- /dev/null
+++ b/src/hooks/use-debounce.ts
@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delayMs = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => setDebouncedValue(value), delayMs);
+    return () => window.clearTimeout(timer);
+  }, [value, delayMs]);
+
+  return debouncedValue;
+}
diff --git a/src/hooks/use-menu-anchor.ts b/src/hooks/use-menu-anchor.ts
new file mode 100644
index 00000000..c4f06816
--- /dev/null
+++ b/src/hooks/use-menu-anchor.ts
@@ -0,0 +1,11 @@
+import { useCallback, useState } from "react";
+
+export function useMenuAnchor() {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const open = Boolean(anchorEl);
+  const setAnchor = useCallback((element: HTMLElement) => setAnchorEl(element), []);
+  const close = useCallback(() => setAnchorEl(null), []);
+
+  return { anchorEl, open, setAnchor, close };
+}
diff --git a/src/hooks/useAuth.js b/src/hooks/useAuth.js
deleted file mode 100644
index 26a6a35e..00000000
--- a/src/hooks/useAuth.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useSelector, useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
-import { useMutation } from '@tanstack/react-query';
-import {
-  selectUser,
-  selectIsAuthenticated,
-  selectAuthLoading,
-  selectAuthError,
-  selectToken,
-  setUser,
-  logout as logoutAction,
-  setLoading,
-  setError,
-} from '../app/slices/authSlice';
-import { authApi } from '../lib/api/services';
-import { toast } from 'react-toastify';
-
-/**
- * Custom hook for authentication
- * Provides auth state and methods
- */
-export function useAuth() {
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  
-  const user = useSelector(selectUser);
-  const isAuthenticated = useSelector(selectIsAuthenticated);
-  const loading = useSelector(selectAuthLoading);
-  const error = useSelector(selectAuthError);
-  const token = useSelector(selectToken);
-  
-  const loginMutation = useMutation({
-    mutationFn: (credentials) => authApi.login(credentials),
-    onMutate: () => {
-      dispatch(setLoading(true));
-    },
-    onSuccess: (data) => {
-      dispatch(setUser(data));
-      toast.success('Login successful!');
-      navigate('/');
-    },
-    onError: (error) => {
-      dispatch(setError(error.message || 'Login failed'));
-      toast.error(error.message || 'Login failed');
-    },
-  });
-  
-  const logout = () => {
-    dispatch(logoutAction());
-    toast.info('You have been logged out');
-    navigate('/login');
-  };
-  
-  const changePasswordMutation = useMutation({
-    mutationFn: (data) => authApi.changePassword(data),
-    onSuccess: () => {
-      toast.success('Password changed successfully!');
-    },
-    onError: (error) => {
-      toast.error(error.message || 'Failed to change password');
-    },
-  });
-  
-  return {
-    user,
-    isAuthenticated,
-    loading: loading || loginMutation.isLoading,
-    error,
-    token,
-    login: loginMutation.mutate,
-    logout,
-    changePassword: changePasswordMutation.mutate,
-    isChangingPassword: changePasswordMutation.isLoading,
-  };
-}
diff --git a/src/hooks/useDebounce.js b/src/hooks/useDebounce.js
deleted file mode 100644
index 72b2f037..00000000
--- a/src/hooks/useDebounce.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useState, useEffect } from 'react';
-
-/**
- * Debounce a value
- * @param {*} value - The value to debounce
- * @param {number} delay - Delay in milliseconds
- */
-export function useDebounce(value, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-  
-  return debouncedValue;
-}
diff --git a/src/hooks/useModal.js b/src/hooks/useModal.js
deleted file mode 100644
index fe916a8b..00000000
--- a/src/hooks/useModal.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useState, useCallback } from 'react';
-
-/**
- * Reusable hook for modal state management
- */
-export function useModal(initialState = false) {
-  const [isOpen, setIsOpen] = useState(initialState);
-  const [data, setData] = useState(null);
-  
-  const open = useCallback((modalData = null) => {
-    setData(modalData);
-    setIsOpen(true);
-  }, []);
-  
-  const close = useCallback(() => {
-    setIsOpen(false);
-    // Delay clearing data to allow for exit animations
-    setTimeout(() => setData(null), 300);
-  }, []);
-  
-  const toggle = useCallback(() => {
-    setIsOpen((prev) => !prev);
-  }, []);
-  
-  return {
-    isOpen,
-    data,
-    open,
-    close,
-    toggle,
-    setData,
-  };
-}
diff --git a/src/hooks/usePaginatedList.js b/src/hooks/usePaginatedList.js
deleted file mode 100644
index 0ac4f18f..00000000
--- a/src/hooks/usePaginatedList.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-
-export default function usePaginatedList(fetchFn, extraParams = {}) {
-  const [rows, setRows] = useState([]);
-  const [search, setSearch] = useState("");
-  const [debouncedSearch, setDebouncedSearch] = useState("");
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
-  const [totalCount, setTotalCount] = useState(0);
-  const [loading, setLoading] = useState(true);
-  const [err, setErr] = useState("");
-  const [sortBy, setSortBy] = useState("lastUpdated");
-  const [sortDir, setSortDir] = useState("desc");
-  const debounceRef = useRef(null);
-
-  const extraKey = JSON.stringify(extraParams);
-
-  useEffect(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => {
-      setDebouncedSearch(search);
-      setPage(1);
-    }, 600);
-    return () => clearTimeout(debounceRef.current);
-  }, [search]);
-
-  const reload = useCallback(() => {
-    setLoading(true);
-    setErr("");
-    fetchFn({ search: debouncedSearch, page, pageSize, sortBy, sortDir, ...extraParams })
-      .then(({ rows, totalCount }) => {
-        setRows(rows);
-        setTotalCount(totalCount);
-      })
-      .catch((e) => setErr(e.message || "Failed to load"))
-      .finally(() => setLoading(false));
-  }, [fetchFn, debouncedSearch, page, pageSize, sortBy, sortDir, extraKey]);
-
-  useEffect(() => { reload(); }, [reload]);
-
-  return useMemo(() => ({
-    rows, search, setSearch, page, setPage, pageSize, setPageSize,
-    totalCount, loading, err, reload, sortBy, setSortBy, sortDir, setSortDir
-  }), [rows, search, page, pageSize, totalCount, loading, err, reload, sortBy, sortDir]);
-}
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 945f4f27..00000000
--- a/src/index.css
+++ /dev/null
@@ -1,569 +0,0 @@
-/* =========================================================
-   ROOT + RESET
-   ========================================================= */
-:root {
-  --sidebar-w: 220px;
-  --sidebar-collapsed-w: 56px;
-  --topbar-h: 64px;
-
-  --blue-main: #0c4f6f;
-  --blue-dark: #083a52;
-  --border: #d9dde0;
-  --bg: #f4f6f7;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html, body, #root {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  background: var(--bg);
-  color: #333;
-}
-
-/* =========================================================
-   APP LAYOUT
-   ========================================================= */
-.app {
-  display: flex;
-  min-height: 100vh;
-  width: 100%;
-}
-
-/* =========================================================
-   SIDEBAR
-   ========================================================= */
-.sidebar {
-  width: var(--sidebar-w);
-  height: 100vh;
-  background: #fbfbfb;
-  border-right: 1px solid var(--border);
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  transition: width .25s ease;
-}
-
-/* Collapsed width */
-.app.nav-collapsed .sidebar {
-  width: var(--sidebar-collapsed-w);
-}
-/* Sidebar logo */
-.sidebarLogo {
-  max-width: 140px;
-  height: auto;
-  display: block;
-}
-
-/* Center logo when collapsed */
-.app.nav-collapsed .sidebarLogo {
-  max-width: 32px;
-  margin: 0 auto;
-}
-
-/* =========================================================
-   LOGO
-   ========================================================= */
-.logoRow {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 28px;
-}
-
-.logoMark {
-  font-size: 26px;
-  font-weight: bold;
-  color: #e74c3c;
-}
-
-.logoText {
-  font-size: 17px;
-  line-height: 1.2;
-}
-
-.logoText span {
-  font-size: 13px;
-  color: #666;
-}
-
-/* =========================================================
-   NAVIGATION
-   ========================================================= */
-.navTitle {
-  font-size: 12px;
-  font-weight: bold;
-  letter-spacing: 1.5px;
-  color: #888;
-  margin-bottom: 14px;
-}
-
-.navGroup {
-  list-style: none;
-}
-
-.navGroupList {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.navGroupTitle {
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 1.2px;
-  text-transform: uppercase;
-  color: #9aa0a6;
-  margin-top: 18px;
-  margin-bottom: 6px;
-  padding: 0 14px;
-}
-
-.navGroupTitleFirst {
-  margin-top: 0;
-}
-
-.navList {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  flex-grow: 1;
-}
-
-/* Reset anchor defaults */
-.navList a,
-.navList a:visited,
-.navList a:hover,
-.navList a:active {
-  text-decoration: none;
-  color: #333;
-}
-
-/* Nav item */
-.navItem {
-  display: flex;
-  align-items: center;
-  padding: 10px 14px;
-  border-radius: 6px;
-  margin-bottom: 6px;
-  font-weight: normal;
-  transition: background-color .15s ease;
-}
-
-/* Hover */
-.navItem:hover {
-  background: #eef2f4;
-}
-
-/* Active (expanded only) */
-.navItem.active {
-  background: #e6f1f7;
-  font-weight: 600;
-  border-left: 3px solid #0b80b5;
-}
-
-/* Icon */
-.glyph {
-  font-size: 18px;
-  width: 22px;
-  display: inline-flex;
-  justify-content: center;
-  margin-right: 12px;
-  color: #8c949a;
-}
-
-/* Label */
-.navLabel {
-  white-space: nowrap;
-}
-
-/* =========================================================
-   COLLAPSED SIDEBAR (LEGACY BEHAVIOR)
-   ========================================================= */
-
-/* Hide text only */
-.app.nav-collapsed .navLabel,
-.app.nav-collapsed .logoText,
-.app.nav-collapsed .navTitle,
-.app.nav-collapsed .navGroupTitle {
-  display: none;
-}
-
-.app.nav-collapsed .navGroup + .navGroup {
-  border-top: 1px solid #e5e7eb;
-  margin-top: 8px;
-  padding-top: 8px;
-}
-
-/* Center icons */
-.app.nav-collapsed .navItem {
-  justify-content: center;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.app.nav-collapsed .glyph {
-  margin-right: 0;
-}
-
-/* 🔥 REMOVE ACTIVE STYLING WHEN COLLAPSED (CRITICAL FIX) */
-.app.nav-collapsed .navItem.active {
-  background: transparent;
-  border-left: none;
-  font-weight: normal;
-}
-
-/* Hover only (legacy) */
-.app.nav-collapsed .navItem:hover {
-  background: #eef2f4;
-}
-
-/* =========================================================
-   MAIN AREA (NEVER MOVES)
-   ========================================================= */
-.mainArea {
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* =========================================================
-   TOPBAR
-   ========================================================= */
-.topbar {
-  height: var(--topbar-h);
-  background: linear-gradient(var(--blue-main), var(--blue-dark));
-  border-bottom: 1px solid #062c3e;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-  color: #fff;
-}
-
-.topLeft {
-  display: flex;
-  align-items: center;
-}
-
-.hamburger {
-  background: none;
-  border: none;
-  color: #fff;
-  font-size: 18px;
-  cursor: pointer;
-  margin-right: 12px;
-}
-
-.topRight {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.topbarIconBtn {
-  background: none;
-  border: none;
-  color: rgba(255,255,255,0.7);
-  font-size: 16px;
-  cursor: pointer;
-  padding: 6px 8px;
-  border-radius: 4px;
-}
-
-.topbarIconBtn:hover {
-  color: #fff;
-  background: rgba(255,255,255,0.1);
-}
-
-.topbarLogout {
-  color: rgba(255,255,255,0.5);
-}
-
-.topbarLogout:hover {
-  color: #ff6b6b;
-  background: rgba(255,100,100,0.1);
-}
-
-.notifDropdown {
-  position: fixed;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
-  z-index: 99999;
-  width: 300px;
-  overflow: hidden;
-}
-
-.notifHeader {
-  padding: 12px 16px;
-  font-size: 14px;
-  font-weight: 600;
-  color: #333;
-  border-bottom: 1px solid #eee;
-}
-
-.notifEmpty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 30px 16px;
-  color: #999;
-  font-size: 13px;
-}
-
-.notifEmptyIcon {
-  font-size: 24px;
-  color: #ccc;
-}
-
-.topbarUserBtn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 4px;
-}
-
-.topbarUserBtn:hover {
-  background: rgba(255,255,255,0.1);
-}
-
-.topbarUserCaret {
-  color: rgba(255,255,255,0.5);
-  font-size: 12px;
-  margin-left: 2px;
-}
-
-.userDropdown {
-  position: fixed;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
-  z-index: 99999;
-  width: 260px;
-  overflow: hidden;
-}
-
-.userDropdownHeader {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px;
-}
-
-.userDropdownAvatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: #1fa8de;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 14px;
-  color: #fff;
-  flex-shrink: 0;
-}
-
-.userDropdownName {
-  font-size: 14px;
-  font-weight: 600;
-  color: #333;
-}
-
-.userDropdownEmail {
-  font-size: 12px;
-  color: #999;
-}
-
-.userDropdownDivider {
-  height: 1px;
-  background: #eee;
-}
-
-.userDropdownItem {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 10px 16px;
-  border: none;
-  background: #fff;
-  font-size: 13px;
-  color: #333;
-  cursor: pointer;
-  text-align: left;
-}
-
-.userDropdownItem:hover {
-  background: #f5f5f5;
-}
-
-.userDropdownItem i {
-  width: 16px;
-  text-align: center;
-  color: #999;
-}
-
-.userDropdownLogout {
-  color: #dc3545;
-}
-
-.userDropdownLogout:hover {
-  background: #fff5f5;
-}
-
-.userDropdownLogout i {
-  color: #dc3545;
-}
-
-.topbarDivider {
-  width: 1px;
-  height: 24px;
-  background: rgba(255,255,255,0.15);
-  margin: 0 4px;
-}
-
-.topbarUser {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: #1fa8de;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 12px;
-  color: #fff;
-  flex-shrink: 0;
-}
-
-.topbarUserInfo {
-  display: flex;
-  flex-direction: column;
-  line-height: 1.2;
-}
-
-.topbarUserName {
-  font-size: 13px;
-  font-weight: 600;
-  color: #fff;
-}
-
-.topbarUserRole {
-  font-size: 11px;
-  color: rgba(255,255,255,0.5);
-}
-
-/* =========================================================
-   CONTENT
-   ========================================================= */
-.contentWrapper {
-  padding: 10px;
-}
-
-/* =========================================================
-   TABLE (CONTACTS / EMPLOYEES)
-   ========================================================= */
-.contactTable {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.contactTable thead th {
-  padding: 10px 12px;
-  background: linear-gradient(#a9bdca, #8fa6b4);
-  color: #fff;
-  font-weight: 600;
-  border-bottom: 1px solid #7d96a6;
-}
-
-.contactTable tbody td {
-  padding: 10px 12px;
-  border-bottom: 1px solid #eee;
-}
-
-.contactTable tbody tr:nth-child(odd) {
-  background: #fff;
-}
-
-.contactTable tbody tr:nth-child(even) {
-  background: #fbfbfb;
-}
-
-.controlsTop {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-}
-
-.leftControls {
-  display: flex;
-  align-items: center;
-}
-
-.filter {
-  display: flex;
-  align-items: center;
-}
-
-.filter select {
-  height: 34px;
-  border: 1px solid #ccc;
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  padding: 6px 8px;
-  background: #fff;
-}
-
-.filter input {
-  height: 34px;
-  width: 260px;
-  border: 1px solid #ccc;
-  border-left: none;
-  border-right: none;
-  padding: 6px 10px;
-}
-
-.searchBtn {
-  height: 34px;
-  padding: 0 14px;
-  border: 1px solid #0073aa;
-  background-color: #0073aa;
-  color: #fff;
-  border-radius: 0 4px 4px 0;
-  cursor: pointer;
-}
-
-.searchBtn:hover {
-  background-color: #005f8d;
-}
-
-.rightControls {
-  display: flex;
-  align-items: center;
-}
diff --git a/src/index.html b/src/index.html
deleted file mode 100644
index 98499e9e..00000000
--- a/src/index.html
+++ /dev/null
@@ -1 +0,0 @@
-<div id="root"></div>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index be44fd46..00000000
--- a/src/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router";
-import { Provider } from 'react-redux';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { store } from './app/store';
-import { queryClient } from './lib/queryClient';
-import App from "./App";
-import "./index.css";
-import "./site.css";
-
-const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(
-  <Provider store={store}>
-    <QueryClientProvider client={queryClient}>
-      <App />
-      {process.env.NODE_ENV === 'development' && <ReactQueryDevtools initialIsOpen={false} />}
-    </QueryClientProvider>
-  </Provider>
-);
diff --git a/src/infra/query-key/query-key.ts b/src/infra/query-key/query-key.ts
new file mode 100644
index 00000000..d5234338
--- /dev/null
+++ b/src/infra/query-key/query-key.ts
@@ -0,0 +1,157 @@
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import type { DashboardTrendParams } from "@/domain/dashboard/types/dashboard-trend";
+import type { WorkOrdersListParams } from "@/domain/work-orders/types/work-order-list";
+import type {
+  WorkOrderBoardQueryParams,
+  WorkOrderBoardSearchQueryParams,
+} from "@/domain/work-orders/types/work-order-board";
+
+export const queryKeys = {
+  auth: {
+    all: ["auth"] as const,
+    session: () => [...queryKeys.auth.all, "session"] as const,
+  },
+  workOrders: {
+    all: ["workOrders"] as const,
+    list: (params?: WorkOrdersListParams) =>
+      [...queryKeys.workOrders.all, "list", params ?? {}] as const,
+    board: (params?: WorkOrderBoardQueryParams) =>
+      [...queryKeys.workOrders.all, "board", params ?? {}] as const,
+    boardSearch: (params?: WorkOrderBoardSearchQueryParams) =>
+      [...queryKeys.workOrders.all, "boardSearch", params ?? {}] as const,
+    byLocation: (locationId: string | number, search = "") =>
+      [...queryKeys.workOrders.all, "byLocation", locationId, search] as const,
+    detail: (id: string | number) => [...queryKeys.workOrders.all, "detail", id] as const,
+    boardDetail: (id: string | number) => [...queryKeys.workOrders.all, "boardDetail", id] as const,
+    boardMedia: (id: string | number) => [...queryKeys.workOrders.all, "boardMedia", id] as const,
+    dispatch: (id: string | number) => [...queryKeys.workOrders.all, "dispatch", id] as const,
+    taskTemplates: () => [...queryKeys.workOrders.all, "taskTemplates"] as const,
+    dispatchers: () => [...queryKeys.workOrders.all, "dispatchers"] as const,
+    directory: () => [...queryKeys.workOrders.all, "directory"] as const,
+    uplifts: (workOrderId: string | number) =>
+      [...queryKeys.workOrders.all, "uplifts", workOrderId] as const,
+  },
+  pmSchedules: {
+    all: ["pmSchedules"] as const,
+    list: (params?: Record<string, unknown>) =>
+      [...queryKeys.pmSchedules.all, "list", params ?? {}] as const,
+    detail: (id: string | number) => [...queryKeys.pmSchedules.all, "detail", id] as const,
+  },
+  accounts: {
+    all: ["accounts"] as const,
+    list: (params?: Record<string, unknown>) =>
+      [...queryKeys.accounts.all, "list", params ?? {}] as const,
+    detail: (id: string | number) => [...queryKeys.accounts.all, "detail", id] as const,
+  },
+  employees: {
+    all: ["employees"] as const,
+    list: (params?: Record<string, unknown>) =>
+      [...queryKeys.employees.all, "list", params ?? {}] as const,
+    detail: (id: string | number) => [...queryKeys.employees.all, "detail", id] as const,
+  },
+  teamMembers: {
+    all: ["teamMembers"] as const,
+    list: () => [...queryKeys.teamMembers.all, "list"] as const,
+    detail: (id: string | number) => [...queryKeys.teamMembers.all, "detail", id] as const,
+  },
+  dashboard: {
+    all: ["dashboard"] as const,
+    stats: (range: DashboardRangeKey, dispatcherId: string | null = null) =>
+      [...queryKeys.dashboard.all, "stats", range, dispatcherId] as const,
+    workload: (range: DashboardRangeKey, page = 1, dispatcherId: string | null = null) =>
+      [...queryKeys.dashboard.all, "workload", range, page, dispatcherId] as const,
+    performance: (range: DashboardRangeKey, page = 1, dispatcherId: string | null = null) =>
+      [...queryKeys.dashboard.all, "performance", range, page, dispatcherId] as const,
+    regions: (range: DashboardRangeKey, dispatcherId: string | null = null) =>
+      [...queryKeys.dashboard.all, "regions", range, dispatcherId] as const,
+    vendorInsights: () => [...queryKeys.dashboard.all, "vendorInsights"] as const,
+    trend: (params?: DashboardTrendParams) =>
+      [...queryKeys.dashboard.all, "trend", params ?? {}] as const,
+  },
+  dropdownOptions: {
+    all: ["dropdownOptions"] as const,
+    byCategory: (category: string, parent?: string) =>
+      [...queryKeys.dropdownOptions.all, "byCategory", category, parent ?? ""] as const,
+  },
+  services: {
+    all: ["services"] as const,
+    active: () => [...queryKeys.services.all, "active"] as const,
+    byWorkOrderType: (workOrderType: string) =>
+      [...queryKeys.services.all, "byWorkOrderType", workOrderType] as const,
+  },
+  locations: {
+    all: ["locations"] as const,
+    list: (params?: Record<string, unknown>) =>
+      [...queryKeys.locations.all, "list", params ?? {}] as const,
+    detail: (id: string | number) => [...queryKeys.locations.all, "detail", id] as const,
+    dropdown: () => [...queryKeys.locations.all, "dropdown"] as const,
+    sites: (search = "") => [...queryKeys.locations.all, "sites", search] as const,
+  },
+  vendors: {
+    all: ["vendors"] as const,
+    list: (params?: Record<string, unknown>) =>
+      [...queryKeys.vendors.all, "list", params ?? {}] as const,
+    directoryList: (params?: Record<string, unknown>) =>
+      [...queryKeys.vendors.all, "directoryList", params ?? {}] as const,
+    detail: (id: string | number) => [...queryKeys.vendors.all, "detail", id] as const,
+    facets: (isActive?: boolean) => [...queryKeys.vendors.all, "facets", isActive ?? null] as const,
+    dropdown: (trade?: string, siteZip?: string) =>
+      [...queryKeys.vendors.all, "dropdown", trade ?? "", siteZip ?? ""] as const,
+    portalToken: (vendorId: string | number) =>
+      [...queryKeys.vendors.all, "portalToken", vendorId] as const,
+    deactivationImpact: (vendorId: string | number) =>
+      [...queryKeys.vendors.all, "deactivationImpact", vendorId] as const,
+    roster: (by: "vendorId" | "companyId", id: string | number) =>
+      [...queryKeys.vendors.all, "roster", by, id] as const,
+  },
+  calendar: {
+    all: ["calendar"] as const,
+    range: (start: string, end: string) =>
+      [...queryKeys.calendar.all, "range", start, end] as const,
+    detail: (id: string | number) => [...queryKeys.calendar.all, "detail", id] as const,
+  },
+  uplifts: {
+    all: ["uplifts"] as const,
+    queue: (params?: Record<string, unknown>) =>
+      [...queryKeys.uplifts.all, "queue", params ?? {}] as const,
+    forDispatch: (dispatchId: string | number) =>
+      [...queryKeys.uplifts.all, "dispatch", dispatchId] as const,
+    evidence: (id: string | number) => [...queryKeys.uplifts.all, "evidence", id] as const,
+    canApprove: (tier: number) => [...queryKeys.uplifts.all, "can-approve", tier] as const,
+  },
+  vendorPos: {
+    all: ["vendorPos"] as const,
+    list: (params?: Record<string, unknown>) =>
+      [...queryKeys.vendorPos.all, "list", params ?? {}] as const,
+    detail: (id: string | number) => [...queryKeys.vendorPos.all, "detail", id] as const,
+  },
+  followUps: {
+    all: ["followUps"] as const,
+    list: (params?: Record<string, unknown>) =>
+      [...queryKeys.followUps.all, "list", params ?? {}] as const,
+    detail: (id: string | number) => [...queryKeys.followUps.all, "detail", id] as const,
+  },
+  contacts: {
+    all: ["contacts"] as const,
+    list: (params?: Record<string, unknown>) =>
+      [...queryKeys.contacts.all, "list", params ?? {}] as const,
+    detail: (id: string | number) => [...queryKeys.contacts.all, "detail", id] as const,
+  },
+  taskTemplates: {
+    all: ["taskTemplates"] as const,
+  },
+  assets: {
+    all: ["assets"] as const,
+    list: (params?: Record<string, unknown>) =>
+      [...queryKeys.assets.all, "list", params ?? {}] as const,
+    detail: (id: string | number) => [...queryKeys.assets.all, "detail", id] as const,
+    sites: () => [...queryKeys.assets.all, "sites"] as const,
+  },
+  vendorPortal: {
+    all: ["vendorPortal"] as const,
+    session: (token: string) => [...queryKeys.vendorPortal.all, "session", token] as const,
+    dispatches: (token: string) => [...queryKeys.vendorPortal.all, "dispatches", token] as const,
+    dispatch: (token: string, id: string | number) =>
+      [...queryKeys.vendorPortal.all, "dispatch", token, id] as const,
+  },
+} as const;
diff --git a/src/lib/address/vendor-address.ts b/src/lib/address/vendor-address.ts
new file mode 100644
index 00000000..f98dbcbd
--- /dev/null
+++ b/src/lib/address/vendor-address.ts
@@ -0,0 +1,135 @@
+/**
+ * Structured address helpers shared by Vendors and, when it is built, Sites.
+ *
+ * The suggestion list is deliberately MOCKED — SH-271 asks for a real-feeling
+ * autocomplete with no Google Places call and no API key. The algorithm,
+ * candidate pool and copy are ported from the approved prototype so dev and
+ * design agree on what a dispatcher sees.
+ */
+
+export type AddressParts = {
+  street: string;
+  city: string;
+  state: string;
+};
+
+export type AddressSuggestion = AddressParts & {
+  /** What the option row reads as: "<typed street>, <city>, <state>". */
+  label: string;
+};
+
+/** Minimum characters before any suggestion appears. */
+export const ADDRESS_SUGGESTION_MIN_LENGTH = 3;
+
+/** How many candidates the field offers at most. */
+export const ADDRESS_SUGGESTION_LIMIT = 4;
+
+/**
+ * Candidate cities, ported verbatim from the prototype.
+ *
+ * These are plausible distribution-centre metros rather than a geocoder: the
+ * point is that a dispatcher sees a short, stable list to pick from, not that
+ * the address is real.
+ */
+const SUGGESTION_CITIES: ReadonlyArray<Omit<AddressParts, "street">> = [
+  { city: "Dallas", state: "TX" },
+  { city: "Indianapolis", state: "IN" },
+  { city: "Memphis", state: "TN" },
+  { city: "St. Louis", state: "MO" },
+  { city: "Orlando", state: "FL" },
+  { city: "Austin", state: "TX" },
+  { city: "Huntsville", state: "AL" },
+  { city: "Rockford", state: "IL" },
+  { city: "Columbus", state: "OH" },
+  { city: "Tampa", state: "FL" },
+  { city: "Cleveland", state: "OH" },
+  { city: "Atlanta", state: "GA" },
+  { city: "Chicago", state: "IL" },
+  { city: "Phoenix", state: "AZ" },
+  { city: "Portland", state: "OR" },
+  { city: "Jersey City", state: "NJ" },
+  { city: "Denver", state: "CO" },
+  { city: "Miami", state: "FL" },
+];
+
+/**
+ * Deterministic index from a seed string.
+ *
+ * Deterministic on purpose: the same typed text must offer the same candidates
+ * every keystroke and every render, or the list reshuffles under the pointer
+ * while someone is trying to click a row.
+ */
+function seededIndex(seed: string, size: number): number {
+  let hash = 0;
+  for (let index = 0; index < seed.length; index += 1) {
+    hash = (hash * 31 + seed.charCodeAt(index)) >>> 0;
+  }
+  return hash % size;
+}
+
+/**
+ * Up to four candidates for what the dispatcher has typed so far.
+ *
+ * The typed text is always kept as the street; only City and State are
+ * proposed. Selecting a candidate fills all three, and typing without selecting
+ * leaves plain free text — the field never locks the user out of their own
+ * input.
+ */
+export function suggestAddresses(input: string): AddressSuggestion[] {
+  const street = input.trim();
+  if (street.length < ADDRESS_SUGGESTION_MIN_LENGTH) return [];
+
+  const seen = new Set<string>();
+  const suggestions: AddressSuggestion[] = [];
+  for (
+    let attempt = 0;
+    suggestions.length < ADDRESS_SUGGESTION_LIMIT && attempt < SUGGESTION_CITIES.length;
+    attempt += 1
+  ) {
+    const candidate =
+      SUGGESTION_CITIES[seededIndex(`${street}#${attempt}`, SUGGESTION_CITIES.length)];
+    if (!candidate) continue;
+    const key = `${candidate.city},${candidate.state}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    suggestions.push({
+      label: `${street}, ${candidate.city}, ${candidate.state}`,
+      street,
+      city: candidate.city,
+      state: candidate.state,
+    });
+  }
+  return suggestions;
+}
+
+/** The single-line form Google is asked about. Empty when there is nothing to ask. */
+export function buildAddressQuery(parts: Partial<AddressParts>): string {
+  return [parts.street, parts.city, parts.state]
+    .map((part) => part?.trim() ?? "")
+    .filter(Boolean)
+    .join(" ");
+}
+
+/** Link target for the clickable Street Address. Empty string when unmappable. */
+export function mapsSearchUrl(parts: Partial<AddressParts>): string {
+  const query = buildAddressQuery(parts);
+  return query
+    ? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`
+    : "";
+}
+
+/**
+ * Embed URL for the inline preview.
+ *
+ * `output=embed` is the keyless form: it renders in an iframe with no API key,
+ * no billing account and no Places request, which is what SH-271 requires.
+ */
+export function mapsEmbedUrl(parts: Partial<AddressParts>): string {
+  const query = buildAddressQuery(parts);
+  return query ? `https://www.google.com/maps?q=${encodeURIComponent(query)}&output=embed` : "";
+}
+
+/** A preview is only meaningful once all three parts are present. */
+export function hasCompleteAddress(parts: Partial<AddressParts>): boolean {
+  return Boolean(parts.street?.trim() && parts.city?.trim() && parts.state?.trim());
+}
diff --git a/src/lib/api/client.js b/src/lib/api/client.js
deleted file mode 100644
index 68bd5f55..00000000
--- a/src/lib/api/client.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import axios from 'axios';
-import { API_URL } from '../../constants';
-
-// Create axios instance
-const apiClient = axios.create({
-  baseURL: API_URL,
-  headers: {
-    'Content-Type': 'application/json',
-    'Accept': 'application/json',
-  },
-});
-
-// Request interceptor - Add auth token
-apiClient.interceptors.request.use(
-  (config) => {
-    const tokenData = window.localStorage.getItem('token');
-    if (tokenData) {
-      try {
-        const user = JSON.parse(tokenData);
-        if (user?.token) {
-          config.headers.Authorization = `Bearer ${user.token}`;
-        }
-      } catch (error) {
-        console.error('Error parsing token:', error);
-      }
-    }
-    return config;
-  },
-  (error) => {
-    return Promise.reject(error);
-  }
-);
-
-// Response interceptor - Handle errors globally
-apiClient.interceptors.response.use(
-  (response) => {
-    // Handle different response structures from the API
-    // Some endpoints return { data: [...] }, some return plain arrays
-    return response;
-  },
-  (error) => {
-    if (error.response) {
-      // The request was made and the server responded with a status code
-      // that falls out of the range of 2xx
-      const { status, data } = error.response;
-
-      if (status === 401) {
-        // Unauthorized - redirect to login
-        window.localStorage.removeItem('token');
-        window.location.href = '/login';
-        return Promise.reject(new Error('You are not authorized to access this page.'));
-      }
-
-      if (status === 403) {
-        return Promise.reject(new Error('You do not have permission to perform this action.'));
-      }
-
-      if (status === 404) {
-        return Promise.reject(new Error('The requested resource was not found.'));
-      }
-
-      if (status === 500) {
-        return Promise.reject(new Error('A server error occurred. Please try again later.'));
-      }
-
-      // Extract error message from response
-      const message = data?.message || data?.Message || data?.error || 'An error occurred';
-      return Promise.reject(new Error(message));
-    } else if (error.request) {
-      // The request was made but no response was received
-      return Promise.reject(new Error('No response from server. Please check your connection.'));
-    } else {
-      // Something happened in setting up the request that triggered an Error
-      return Promise.reject(error);
-    }
-  }
-);
-
-export default apiClient;
diff --git a/src/lib/api/services.js b/src/lib/api/services.js
deleted file mode 100644
index 12097781..00000000
--- a/src/lib/api/services.js
+++ /dev/null
@@ -1,268 +0,0 @@
-import apiClient from './client';
-
-/**
- * Generic API service factory
- * Creates CRUD operations for any entity
- */
-const createApiService = (endpoint) => ({
-  getAll: (params) => apiClient.get(endpoint, { params }).then((res) => res.data),
-  
-  getById: (id) => apiClient.get(`${endpoint}/${id}`).then((res) => res.data),
-  
-  create: (data) => apiClient.post(endpoint, data).then((res) => res.data),
-  
-  update: (id, data) => apiClient.put(`${endpoint}/${id}`, data).then((res) => res.data),
-  
-  delete: (id) => apiClient.delete(`${endpoint}/${id}`).then((res) => res.data),
-});
-
-// Work Orders API
-export const workOrdersApi = {
-  getList: (params) =>
-    apiClient
-      .get('/WorkOrder/GetWorkOrderList', { params })
-      .then((res) => {
-        const data = res.data?.data || res.data?.Data || res.data || [];
-        return {
-          items: Array.isArray(data) ? data : [],
-          totalCount: res.data?.totalCount || res.data?.TotalCount || data.length,
-          page: res.data?.pageNumber || res.data?.PageNumber || params?.page || 1,
-          pageSize: res.data?.pageSize || res.data?.PageSize || params?.pageSize || 12,
-        };
-      }),
-  
-  getById: (id) => apiClient.get(`/WorkOrder/GetById?id=${id}`).then((res) => res.data),
-  
-  create: (data) => apiClient.post('/WorkOrder/Create', data).then((res) => res.data),
-  
-  update: (data) => apiClient.post('/WorkOrder/Update', data).then((res) => res.data),
-  
-  delete: (id) => apiClient.get(`/WorkOrder/DeleteWorkOrder?id=${id}`).then((res) => res.data),
-};
-
-// PM Schedules API
-export const pmSchedulesApi = {
-  getList: (params) =>
-    apiClient
-      .get('/PMSchedule/GetList', { params })
-      .then((res) => {
-        // Handle both array responses and paginated responses
-        const data = res.data;
-        const items = Array.isArray(data) ? data : data?.value || data?.data || data?.Data || [];
-        
-        return {
-          items,
-          totalCount: data?.Count || data?.totalCount || items.length,
-          page: params?.page || 1,
-          pageSize: params?.pageSize || 12,
-        };
-      }),
-  
-  getById: (id) => apiClient.get(`/PMSchedule/GetById?id=${id}`).then((res) => res.data),
-  
-  save: (data) => apiClient.post('/PMSchedule/Save', data).then((res) => res.data),
-  
-  delete: (id) => apiClient.post(`/PMSchedule/Delete?id=${id}`).then((res) => res.data),
-};
-
-// Follow Ups API
-export const followUpsApi = {
-  getList: (params) =>
-    apiClient
-      .get('/FollowUp/GetFollowUpList', { params })
-      .then((res) => {
-        const data = res.data?.data || res.data?.Data || res.data || [];
-        return {
-          items: Array.isArray(data) ? data : [],
-          totalCount: res.data?.totalCount || res.data?.TotalCount || data.length,
-        };
-      }),
-  
-  getById: (id) => apiClient.get(`/FollowUp/GetById?id=${id}`).then((res) => res.data),
-  
-  create: (data) => apiClient.post('/FollowUp/Create', data).then((res) => res.data),
-  
-  update: (data) => apiClient.post('/FollowUp/Update', data).then((res) => res.data),
-  
-  delete: (id) => apiClient.post(`/FollowUp/Delete?id=${id}`).then((res) => res.data),
-  
-  complete: (id) => apiClient.post(`/FollowUp/Complete?id=${id}`).then((res) => res.data),
-  
-  cancel: (id) => apiClient.post(`/FollowUp/Cancel?id=${id}`).then((res) => res.data),
-};
-
-// Employees API
-export const employeesApi = {
-  getList: (params) =>
-    apiClient
-      .get('/Employee/GetEmployeeList', { params })
-      .then((res) => {
-        const data = res.data?.data || res.data?.Data || res.data || [];
-        return {
-          items: Array.isArray(data) ? data : [],
-          totalCount: res.data?.totalCount || res.data?.TotalCount || data.length,
-        };
-      }),
-  
-  getById: (id) => apiClient.get(`/Employee/GetById?id=${id}`).then((res) => res.data),
-  
-  create: (data) => apiClient.post('/Employee/Create', data).then((res) => res.data),
-  
-  update: (data) => apiClient.post('/Employee/Update', data).then((res) => res.data),
-  
-  delete: (id) => apiClient.post(`/Employee/Delete?id=${id}`).then((res) => res.data),
-  
-  getDropdown: () => apiClient.get('/Employee/Dropdown').then((res) => res.data),
-};
-
-// Contacts API
-export const contactsApi = {
-  getList: (params) =>
-    apiClient
-      .get('/Contact/GetContactList', { params })
-      .then((res) => {
-        const data = res.data?.data || res.data?.Data || res.data || [];
-        return {
-          items: Array.isArray(data) ? data : [],
-          totalCount: res.data?.totalCount || res.data?.TotalCount || data.length,
-        };
-      }),
-  
-  getById: (id) => apiClient.get(`/Contact/GetById?id=${id}`).then((res) => res.data),
-  
-  create: (data) => apiClient.post('/Contact/Create', data).then((res) => res.data),
-  
-  update: (data) => apiClient.post('/Contact/Update', data).then((res) => res.data),
-  
-  delete: (id) => apiClient.post(`/Contact/Delete?id=${id}`).then((res) => res.data),
-  
-  getDropdown: (locationId) =>
-    apiClient.get(`/Contact/Dropdown?locationId=${locationId}`).then((res) => res.data),
-};
-
-// Locations API
-export const locationsApi = {
-  getList: (params) =>
-    apiClient.get('/Location/GetLocationList', { params }).then((res) => {
-      const data = res.data?.data || res.data?.Data || res.data || [];
-      return {
-        items: Array.isArray(data) ? data : [],
-        totalCount: res.data?.totalCount || res.data?.TotalCount || data.length,
-      };
-    }),
-
-  getById: (id) => apiClient.get(`/Location/GetById?id=${id}`).then((res) => res.data),
-
-  create: (data) => apiClient.post('/Location/Create', data).then((res) => res.data),
-
-  update: (data) => apiClient.post('/Location/Update', data).then((res) => res.data),
-
-  delete: (id) => apiClient.post(`/Location/Delete?id=${id}`).then((res) => res.data),
-
-  getDropdown: (accountId) =>
-    apiClient.get(`/Location/Dropdown?accountId=${accountId || ''}`).then((res) => res.data),
-};
-
-// Accounts API
-export const accountsApi = {
-  getList: (params) =>
-    apiClient.get('/Account/GetAccountList', { params }).then((res) => {
-      const data = res.data?.data || res.data?.Data || res.data || [];
-      return {
-        items: Array.isArray(data) ? data : [],
-        totalCount: res.data?.totalCount || res.data?.TotalCount || data.length,
-      };
-    }),
-
-  getById: (id) => apiClient.get(`/Account/GetById?id=${id}`).then((res) => res.data),
-
-  create: (data) => apiClient.post('/Account/Create', data).then((res) => res.data),
-
-  update: (data) => apiClient.post('/Account/Update', data).then((res) => res.data),
-
-  delete: (id) => apiClient.post(`/Account/Delete?id=${id}`).then((res) => res.data),
-
-  getDropdown: () => apiClient.get('/Account/Dropdown').then((res) => res.data),
-};
-
-// Assets API
-export const assetsApi = {
-  getList: (params) =>
-    apiClient.get('/Asset/GetAssetList', { params }).then((res) => {
-      const data = res.data?.data || res.data?.Data || res.data || [];
-      return {
-        items: Array.isArray(data) ? data : [],
-        totalCount: res.data?.totalCount || res.data?.TotalCount || data.length,
-      };
-    }),
-
-  getById: (id) => apiClient.get(`/Asset/GetById?id=${id}`).then((res) => res.data),
-
-  create: (data) => apiClient.post('/Asset/Create', data).then((res) => res.data),
-
-  update: (data) => apiClient.post('/Asset/Update', data).then((res) => res.data),
-
-  delete: (id) => apiClient.post(`/Asset/Delete?id=${id}`).then((res) => res.data),
-};
-
-// Vendors API
-export const vendorsApi = {
-  getList: (params) =>
-    apiClient.get('/Vendor/GetVendorList', { params }).then((res) => {
-      const data = res.data?.data || res.data?.Data || res.data || [];
-      return {
-        items: Array.isArray(data) ? data : [],
-        totalCount: res.data?.totalCount || res.data?.TotalCount || data.length,
-      };
-    }),
-
-  getById: (id) => apiClient.get(`/Vendor/GetById?id=${id}`).then((res) => res.data),
-
-  create: (data) => apiClient.post('/Vendor/Create', data).then((res) => res.data),
-
-  update: (data) => apiClient.post('/Vendor/Update', data).then((res) => res.data),
-
-  delete: (id) => apiClient.post(`/Vendor/Delete?id=${id}`).then((res) => res.data),
-
-  getDropdown: (params) =>
-    apiClient.get('/Vendor/Dropdown', { params }).then((res) => res.data),
-};
-
-// Dashboard API
-export const dashboardApi = {
-  getStats: () => apiClient.get('/Dashboard/Stats').then((res) => res.data),
-};
-
-// Dropdown Options API
-export const dropdownApi = {
-  getByCategory: (category, parent) => {
-    const params = parent ? { parent } : {};
-    return apiClient
-      .get(`/DropdownOptions/ByCategory/${encodeURIComponent(category)}`, { params })
-      .then((res) => res.data);
-  },
-
-  create: (data) => apiClient.post('/DropdownOptions/Create', data).then((res) => res.data),
-
-  update: (data) => apiClient.post('/DropdownOptions/Update', data).then((res) => res.data),
-
-  delete: (id) => apiClient.delete(`/DropdownOptions/${id}`).then((res) => res.data),
-};
-
-// Authentication API
-export const authApi = {
-  login: (credentials) =>
-    apiClient.post('/Authentication/Login', credentials).then((res) => res.data),
-
-  changePassword: (data) =>
-    apiClient.post('/Authentication/ChangePassword', data).then((res) => res.data),
-
-  forgotPassword: (email) =>
-    apiClient.post(`/Authentication/ForgetPassword?Email=${encodeURIComponent(email)}`).then((res) => res.data),
-
-  verifyResetCode: (code) =>
-    apiClient.post(`/Authentication/VerificationCode?code=${encodeURIComponent(code)}`).then((res) => res.data),
-
-  resetPassword: (data) =>
-    apiClient.post('/Authentication/ResetPassword', data).then((res) => res.data),
-};
diff --git a/src/lib/auth/auth-storage.ts b/src/lib/auth/auth-storage.ts
new file mode 100644
index 00000000..efb5d6fc
--- /dev/null
+++ b/src/lib/auth/auth-storage.ts
@@ -0,0 +1,68 @@
+import type { AuthUser } from "@/domain/auth/types/auth-user";
+
+const AUTH_STORAGE_KEY = "auth";
+
+function parseExpiration(expiration: string): number | null {
+  const asNumber = Number(expiration);
+  if (!Number.isNaN(asNumber) && asNumber > 0) {
+    return asNumber > 1e12 ? asNumber : asNumber * 1000;
+  }
+
+  const parsed = Date.parse(expiration);
+  return Number.isNaN(parsed) ? null : parsed;
+}
+
+export function setAuthUser(user: AuthUser): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(user));
+}
+
+export function getAuthUser(): AuthUser | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  const raw = localStorage.getItem(AUTH_STORAGE_KEY);
+  if (!raw) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(raw) as AuthUser;
+  } catch {
+    return null;
+  }
+}
+
+export function getAccessToken(): string | null {
+  const user = getAuthUser();
+  if (!user?.token || typeof user.token !== "string") {
+    return null;
+  }
+
+  return `Bearer ${user.token}`;
+}
+
+export function clearAuth(): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  localStorage.removeItem(AUTH_STORAGE_KEY);
+}
+
+export function isSessionValid(user: AuthUser | null): boolean {
+  if (!user?.token || !user.expiration) {
+    return false;
+  }
+
+  const expiresAt = parseExpiration(user.expiration);
+  if (expiresAt === null) {
+    return false;
+  }
+
+  return Date.now() < expiresAt;
+}
diff --git a/src/lib/auth/expire-session.ts b/src/lib/auth/expire-session.ts
new file mode 100644
index 00000000..0c7c8900
--- /dev/null
+++ b/src/lib/auth/expire-session.ts
@@ -0,0 +1,12 @@
+import { clearAuth } from "@/lib/auth/auth-storage";
+import queryClient from "@/lib/query/query-client";
+import { stopQueryBroadcast } from "@/lib/query/setup-query-broadcast";
+
+export function expireSessionAndRedirectToLogin(): void {
+  clearAuth();
+  stopQueryBroadcast(queryClient);
+
+  if (typeof window !== "undefined" && window.location.pathname !== "/login") {
+    window.location.replace("/login");
+  }
+}
diff --git a/src/lib/auth/user-utils.ts b/src/lib/auth/user-utils.ts
new file mode 100644
index 00000000..1fcd3f4d
--- /dev/null
+++ b/src/lib/auth/user-utils.ts
@@ -0,0 +1,31 @@
+export function getPrimaryUserRole(
+  userRoles: string | null | undefined,
+  fallback = "User",
+): string {
+  return userRoles?.split(",")[0]?.trim() || fallback;
+}
+
+export function isAdminUser(userRoles: string | null | undefined): boolean {
+  if (!userRoles) {
+    return false;
+  }
+  return userRoles
+    .split(",")
+    .map((role) => role.trim().toLowerCase())
+    .includes("admin");
+}
+
+/**
+ * SH-336's `viewAllDispatchersOnDashboard` permission. The codebase has no
+ * permission model, so it is derived from role: Admin and Scheduler may pick any
+ * dispatcher (or the whole company) on the Dashboard; a Dispatcher may not and
+ * is locked to their own work orders. Unknown roles default to the restrictive
+ * (Dispatcher) behaviour so no one accidentally gains a company-wide view.
+ */
+export function canViewAllDispatchersOnDashboard(userRoles: string | null | undefined): boolean {
+  if (!userRoles) {
+    return false;
+  }
+  const roles = userRoles.split(",").map((role) => role.trim().toLowerCase());
+  return roles.includes("admin") || roles.includes("scheduler");
+}
diff --git a/src/lib/dialog-guard.ts b/src/lib/dialog-guard.ts
new file mode 100644
index 00000000..c193be62
--- /dev/null
+++ b/src/lib/dialog-guard.ts
@@ -0,0 +1,10 @@
+/**
+ * Returns `undefined` as the dialog close handler while a mutation is pending,
+ * preventing backdrop click / ESC from dismissing the dialog.
+ */
+export function guardDialogClose(
+  isPending: boolean,
+  onClose: () => void,
+): (() => void) | undefined {
+  return isPending ? undefined : onClose;
+}
diff --git a/src/lib/env.ts b/src/lib/env.ts
new file mode 100644
index 00000000..51b5d14a
--- /dev/null
+++ b/src/lib/env.ts
@@ -0,0 +1,4 @@
+export const env = {
+  apiUrl: import.meta.env.VITE_API_URL?.trim() || "/api",
+  isDev: import.meta.env.DEV,
+} as const;
diff --git a/src/lib/format/na-phone.ts b/src/lib/format/na-phone.ts
new file mode 100644
index 00000000..9bcc08b8
--- /dev/null
+++ b/src/lib/format/na-phone.ts
@@ -0,0 +1,7 @@
+export function formatNorthAmericanPhone(input: string): string {
+  const digits = (input ?? "").replace(/\D+/g, "").slice(0, 10);
+  if (digits.length === 0) return "";
+  if (digits.length < 4) return `(${digits}`;
+  if (digits.length < 7) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+}
diff --git a/src/lib/query/query-client.ts b/src/lib/query/query-client.ts
new file mode 100644
index 00000000..6c321caf
--- /dev/null
+++ b/src/lib/query/query-client.ts
@@ -0,0 +1,39 @@
+import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+
+export function createAppQueryClient(): QueryClient {
+  return new QueryClient({
+    queryCache: new QueryCache({
+      onError: (error, query) => {
+        if (query.meta?.suppressErrorToast) return;
+
+        console.error("Query error:", error);
+        const message =
+          error instanceof Error ? error.message : "An error occurred while fetching data";
+        toast.error(message);
+      },
+    }),
+    mutationCache: new MutationCache({
+      onError: (error, _variables, _context, mutation) => {
+        if (mutation.options.meta?.suppressErrorToast) return;
+
+        console.error("Mutation error:", error);
+        const message =
+          error instanceof Error ? error.message : "An error occurred while updating data";
+        toast.error(message);
+      },
+    }),
+    defaultOptions: {
+      queries: {
+        staleTime: 5 * 60 * 1000,
+        gcTime: 10 * 60 * 1000,
+        retry: 1,
+        refetchOnWindowFocus: false,
+      },
+    },
+  });
+}
+
+export const queryClient = createAppQueryClient();
+
+export default queryClient;
diff --git a/src/lib/query/require-query-param.ts b/src/lib/query/require-query-param.ts
new file mode 100644
index 00000000..a75dee83
--- /dev/null
+++ b/src/lib/query/require-query-param.ts
@@ -0,0 +1,10 @@
+export function requireQueryParam(
+  value: string | number | undefined,
+  name: string,
+): string | number {
+  if (value === undefined || value === "") {
+    throw new Error(`${name} is required`);
+  }
+
+  return value;
+}
diff --git a/src/lib/query/setup-query-broadcast.ts b/src/lib/query/setup-query-broadcast.ts
new file mode 100644
index 00000000..abc05bfa
--- /dev/null
+++ b/src/lib/query/setup-query-broadcast.ts
@@ -0,0 +1,60 @@
+import { broadcastQueryClient } from "@tanstack/query-broadcast-client-experimental";
+import type { QueryClient } from "@tanstack/react-query";
+
+/** Prefix for same-origin BroadcastChannel names (suffixed with authenticated user id). */
+export const QUERY_BROADCAST_CHANNEL_PREFIX = "seahaven-admin-query";
+
+let unsubscribe: (() => void) | null = null;
+let activeUserId: string | number | null = null;
+
+/** Builds the account-scoped channel name for cross-tab QueryClient sync. */
+export function queryBroadcastChannelForUser(userId: string | number): string {
+  return `${QUERY_BROADCAST_CHANNEL_PREFIX}:${String(userId)}`;
+}
+
+function disposeBroadcast(): void {
+  unsubscribe?.();
+  unsubscribe = null;
+  activeUserId = null;
+}
+
+function canUseBroadcast(): boolean {
+  return typeof window !== "undefined" && import.meta.env.MODE !== "test";
+}
+
+/**
+ * Starts (or switches) account-scoped QueryClient broadcast.
+ * Disposes any prior subscription; clears the cache when the authenticated user changes.
+ * No-op for the BroadcastChannel outside the browser and during Vitest runs.
+ */
+export function startQueryBroadcast(queryClient: QueryClient, userId: string | number): void {
+  if (activeUserId === userId) {
+    return;
+  }
+
+  const previousUserId = activeUserId;
+  disposeBroadcast();
+
+  if (previousUserId != null && previousUserId !== userId) {
+    queryClient.clear();
+  }
+
+  activeUserId = userId;
+
+  if (!canUseBroadcast()) {
+    return;
+  }
+
+  unsubscribe = broadcastQueryClient({
+    queryClient,
+    broadcastChannel: queryBroadcastChannelForUser(userId),
+  });
+}
+
+/**
+ * Tears down the broadcaster and clears the entire QueryClient cache (logout / 401).
+ */
+export function stopQueryBroadcast(queryClient: QueryClient): void {
+  disposeBroadcast();
+  queryClient.clear();
+}
diff --git a/src/lib/queryClient.js b/src/lib/queryClient.js
deleted file mode 100644
index ec1a63c6..00000000
--- a/src/lib/queryClient.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { QueryClient } from '@tanstack/react-query';
-import { toast } from 'react-toastify';
-
-export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 5 * 60 * 1000, // 5 minutes
-      cacheTime: 10 * 60 * 1000, // 10 minutes
-      retry: 1,
-      refetchOnWindowFocus: false,
-      onError: (error) => {
-        console.error('Query error:', error);
-        toast.error(error.message || 'An error occurred while fetching data');
-      },
-    },
-    mutations: {
-      onError: (error) => {
-        console.error('Mutation error:', error);
-        toast.error(error.message || 'An error occurred while updating data');
-      },
-    },
-  },
-});
-
-export default queryClient;
diff --git a/src/lib/resolve-api-prefix-url.ts b/src/lib/resolve-api-prefix-url.ts
new file mode 100644
index 00000000..a1e400ac
--- /dev/null
+++ b/src/lib/resolve-api-prefix-url.ts
@@ -0,0 +1,35 @@
+const DEFAULT_ORIGIN = "http://localhost:3000";
+
+function getDefaultOrigin(): string {
+  if (typeof window !== "undefined" && window.location?.origin) {
+    return window.location.origin;
+  }
+
+  return DEFAULT_ORIGIN;
+}
+
+/**
+ * Resolves VITE_API_URL to a Ky-compatible prefix (always ends with /).
+ *
+ * Contract:
+ * - Relative paths (e.g. `/api`) are joined with the app origin.
+ * - Absolute URLs are used as-is; they must already include `/api` for production.
+ * - API_PATHS do not include `/api` — only this prefix supplies it.
+ */
+export function resolveApiPrefixUrl(url: string, origin = getDefaultOrigin()): string {
+  const trimmed = url.trim() || "/api";
+
+  if (trimmed.startsWith("http")) {
+    return trimmed.endsWith("/") ? trimmed : `${trimmed}/`;
+  }
+
+  const path = trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
+  const pathWithSlash = path.endsWith("/") ? path : `${path}/`;
+
+  return `${origin}${pathWithSlash}`;
+}
+
+/** API base without trailing slash (for fetch URLs outside Ky). */
+export function resolveApiBaseUrl(url: string, origin = getDefaultOrigin()): string {
+  return resolveApiPrefixUrl(url, origin).replace(/\/$/, "");
+}
diff --git a/src/lib/theme/css-vars.ts b/src/lib/theme/css-vars.ts
new file mode 100644
index 00000000..89dfdf96
--- /dev/null
+++ b/src/lib/theme/css-vars.ts
@@ -0,0 +1,32 @@
+/** Read a CSS custom property from :root (browser only). */
+export function getCssVar(name: string, fallback = ""): string {
+  if (typeof document === "undefined") {
+    return fallback;
+  }
+
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
+
+/** Static fallbacks for SSR / theme creation before paint. */
+export const CSS_VAR_FALLBACKS = {
+  primary: "#1c75bc",
+  primaryHover: "#155a92",
+  primaryForeground: "#ffffff",
+  destructive: "#dc2626",
+  success: "#00a79d",
+  warning: "#d97706",
+  background: "#ffffff",
+  foreground: "#262262",
+  border: "#dfe3ea",
+  muted: "#e6e7e8",
+  mutedForeground: "#58595b",
+  inputBackground: "#f9fafb",
+  ring: "#1c75bc",
+  bgPage: "#f9fafb",
+  radius: "8",
+  headerStart: "#1b1f52",
+  headerMid: "#1c4f8f",
+  headerEnd: "#1c75bc",
+  headerText: "#ffffff",
+} as const;
diff --git a/src/lib/theme/mui-theme.ts b/src/lib/theme/mui-theme.ts
new file mode 100644
index 00000000..e55f12ff
--- /dev/null
+++ b/src/lib/theme/mui-theme.ts
@@ -0,0 +1,322 @@
+import { createTheme, type ThemeOptions } from "@mui/material/styles";
+
+import { CSS_VAR_FALLBACKS, getCssVar } from "@/lib/theme/css-vars";
+
+declare module "@mui/material/styles" {
+  interface Palette {
+    header: Palette["primary"];
+  }
+  interface PaletteOptions {
+    header?: PaletteOptions["primary"];
+  }
+}
+
+function v(name: string, fallback: string): string {
+  return getCssVar(name, fallback);
+}
+
+const primary = v("--primary", CSS_VAR_FALLBACKS.primary);
+const primaryHover = v("--primary-hover", CSS_VAR_FALLBACKS.primaryHover);
+const primaryForeground = v("--primary-foreground", CSS_VAR_FALLBACKS.primaryForeground);
+const destructive = v("--destructive", CSS_VAR_FALLBACKS.destructive);
+const success = v("--success", CSS_VAR_FALLBACKS.success);
+const warning = v("--warning", CSS_VAR_FALLBACKS.warning);
+const background = v("--background", CSS_VAR_FALLBACKS.background);
+const foreground = v("--foreground", CSS_VAR_FALLBACKS.foreground);
+const border = v("--border", CSS_VAR_FALLBACKS.border);
+const muted = v("--muted", CSS_VAR_FALLBACKS.muted);
+const mutedForeground = v("--muted-foreground", CSS_VAR_FALLBACKS.mutedForeground);
+const inputBackground = v("--input-background", CSS_VAR_FALLBACKS.inputBackground);
+const ring = v("--ring", CSS_VAR_FALLBACKS.ring);
+const bgPage = v("--color-bg-page", CSS_VAR_FALLBACKS.bgPage);
+const radius = Number.parseInt(v("--radius", CSS_VAR_FALLBACKS.radius).replace("px", ""), 10) || 8;
+const headerEnd = v("--color-header-bg-end", CSS_VAR_FALLBACKS.headerEnd);
+const headerText = v("--color-header-text", CSS_VAR_FALLBACKS.headerText);
+
+const fontDisplay = '"Montserrat", ui-sans-serif, system-ui, sans-serif';
+const fontSans = '"DM Sans", ui-sans-serif, system-ui, sans-serif';
+
+const shadowSm = v(
+  "--shadow-sm",
+  "0 1px 3px rgba(22, 30, 56, .06), 0 1px 2px rgba(22, 30, 56, .04)",
+);
+const shadowMd = v(
+  "--shadow-md",
+  "0 4px 6px -1px rgba(22, 30, 56, .08), 0 2px 4px -2px rgba(22, 30, 56, .06)",
+);
+const shadowLg = v(
+  "--shadow-lg",
+  "0 10px 15px -3px rgba(22, 30, 56, .1), 0 4px 6px -4px rgba(22, 30, 56, .08)",
+);
+
+const themeOptions: ThemeOptions = {
+  typography: {
+    fontFamily: fontSans,
+    fontSize: 14,
+    fontWeightLight: 300,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 600,
+    h1: { fontFamily: fontDisplay, fontWeight: 800, fontSize: "1.75rem", lineHeight: 1.25 },
+    h2: { fontFamily: fontDisplay, fontWeight: 700, fontSize: "1.375rem", lineHeight: 1.25 },
+    h3: { fontFamily: fontDisplay, fontWeight: 600, fontSize: "1.125rem", lineHeight: 1.25 },
+    h4: { fontFamily: fontDisplay, fontWeight: 600, fontSize: "1rem", lineHeight: 1.25 },
+    h5: { fontFamily: fontDisplay, fontWeight: 600, fontSize: "0.875rem", lineHeight: 1.25 },
+    h6: { fontFamily: fontDisplay, fontWeight: 600, fontSize: "0.8125rem", lineHeight: 1.25 },
+    subtitle1: { fontWeight: 600, fontSize: "1rem" },
+    subtitle2: { fontWeight: 500, fontSize: "0.875rem", color: mutedForeground },
+    body1: { fontSize: "0.875rem", lineHeight: 1.5 },
+    body2: { fontSize: "0.8125rem", lineHeight: 1.5, color: mutedForeground },
+    caption: { fontSize: "0.75rem", lineHeight: 1.5, color: mutedForeground },
+    overline: {
+      fontSize: "0.6875rem",
+      fontWeight: 600,
+      letterSpacing: "0.08em",
+      textTransform: "uppercase",
+      color: mutedForeground,
+    },
+  },
+  shape: {
+    borderRadius: radius,
+  },
+  shadows: [
+    "none",
+    shadowSm,
+    shadowSm,
+    shadowMd,
+    shadowMd,
+    shadowMd,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+    shadowLg,
+  ],
+  palette: {
+    mode: "light",
+    primary: {
+      main: primary,
+      dark: primaryHover,
+      contrastText: primaryForeground,
+    },
+    secondary: {
+      main: muted,
+      contrastText: foreground,
+    },
+    error: {
+      main: destructive,
+      contrastText: "#ffffff",
+    },
+    success: {
+      main: success,
+      contrastText: "#ffffff",
+    },
+    warning: {
+      main: warning,
+      contrastText: "#ffffff",
+    },
+    background: {
+      default: bgPage,
+      paper: background,
+    },
+    text: {
+      primary: foreground,
+      secondary: mutedForeground,
+    },
+    divider: border,
+    header: {
+      main: headerEnd,
+      contrastText: headerText,
+    },
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          fontSize: 14,
+          backgroundColor: bgPage,
+          color: foreground,
+        },
+      },
+    },
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true,
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: v("--radius-md", "6px"),
+          textTransform: "none",
+          fontWeight: 600,
+          fontSize: "0.875rem",
+          transition: `background-color var(--duration-fast, 150ms) var(--ease-default, ease), box-shadow var(--duration-fast, 150ms) var(--ease-default, ease)`,
+          "&:focus-visible": {
+            outline: `2px solid ${ring}`,
+            outlineOffset: 2,
+          },
+          variants: [
+            {
+              props: { variant: "contained", color: "primary" },
+              style: {
+                "&:hover": {
+                  backgroundColor: primaryHover,
+                },
+              },
+            },
+          ],
+        },
+        outlined: {
+          borderColor: border,
+          "&:hover": {
+            borderColor: v("--border-hover", border),
+            backgroundColor: v("--secondary", "#f1f4f9"),
+          },
+        },
+      },
+    },
+    MuiTextField: {
+      defaultProps: {
+        size: "small",
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          backgroundColor: inputBackground,
+          borderRadius: v("--radius-md", "6px"),
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: border,
+          },
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: v("--border-hover", border),
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: ring,
+            borderWidth: 2,
+          },
+          "&.Mui-focused": {
+            boxShadow: `0 0 0 3px color-mix(in srgb, ${ring} 25%, transparent)`,
+          },
+        },
+        input: {
+          fontSize: "0.875rem",
+          padding: "8.5px 13px",
+          "&.MuiInputBase-inputAdornedEnd": {
+            paddingRight: 40,
+          },
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          fontSize: "0.875rem",
+          borderColor: border,
+          padding: "10px 16px",
+        },
+        head: {
+          fontWeight: 600,
+          backgroundColor: v("--color-bg-muted", "#f1f4f9"),
+          color: foreground,
+        },
+      },
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          "&:last-child td": {
+            borderBottom: 0,
+          },
+        },
+      },
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: v("--radius-sm", "4px"),
+          fontWeight: 500,
+          fontSize: "0.75rem",
+        },
+        outlined: {
+          borderColor: border,
+        },
+      },
+    },
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0,
+      },
+      styleOverrides: {
+        root: {
+          backgroundImage: "none",
+          borderRadius: radius,
+        },
+        outlined: {
+          borderColor: border,
+        },
+      },
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: v("--radius-xl", "12px"),
+          boxShadow: shadowLg,
+        },
+      },
+    },
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          borderRadius: v("--radius-md", "6px"),
+          fontSize: "0.875rem",
+          variants: [
+            {
+              props: { variant: "standard", severity: "success" },
+              style: {
+                backgroundColor: v("--status-completed-bg", "#f0fdf4"),
+                color: v("--status-completed-text", "#166534"),
+              },
+            },
+            {
+              props: { variant: "standard", severity: "error" },
+              style: {
+                backgroundColor: v("--doc-no-bg", "#fff1f2"),
+                color: v("--doc-no-text", "#be123c"),
+              },
+            },
+            {
+              props: { variant: "standard", severity: "warning" },
+              style: {
+                backgroundColor: v("--status-pending-bg", "#fff7ed"),
+                color: v("--status-pending-text", "#92400e"),
+              },
+            },
+            {
+              props: { variant: "standard", severity: "info" },
+              style: {
+                backgroundColor: v("--color-primary-tint", "#e6f4fb"),
+                color: v("--sidebar-accent-foreground", "#155a92"),
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+export const muiTheme = createTheme(themeOptions);
diff --git a/src/lib/time-utils.ts b/src/lib/time-utils.ts
new file mode 100644
index 00000000..743a3868
--- /dev/null
+++ b/src/lib/time-utils.ts
@@ -0,0 +1,145 @@
+export function timeSince(dateString: string): string {
+  if (!dateString) {
+    return "";
+  }
+
+  const d = new Date(dateString.endsWith("Z") ? dateString : `${dateString}Z`);
+  if (Number.isNaN(d.getTime())) {
+    return "";
+  }
+
+  const diffMs = Date.now() - d.getTime();
+  const mins = Math.floor(diffMs / 60000);
+
+  if (mins < 1) {
+    return "just now";
+  }
+  if (mins < 60) {
+    return `${mins}m ago`;
+  }
+
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
+
+  const days = Math.floor(hours / 24);
+  if (days < 7) {
+    return `${days}d ago`;
+  }
+
+  return `${Math.floor(days / 7)}w ago`;
+}
+
+export function timeBetween(startStr: string, endStr: string): string {
+  if (!startStr || !endStr) {
+    return "";
+  }
+
+  const start = new Date(startStr.endsWith("Z") ? startStr : `${startStr}Z`);
+  const end = new Date(endStr.endsWith("Z") ? endStr : `${endStr}Z`);
+
+  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
+    return "";
+  }
+
+  const diffMs = end.getTime() - start.getTime();
+  const mins = Math.floor(diffMs / 60000);
+
+  if (mins < 60) {
+    return `${mins}m`;
+  }
+
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) {
+    return `${hours}h`;
+  }
+
+  return `${Math.floor(hours / 24)}d`;
+}
+
+export function waitTimeColor(dateString: string): "green" | "yellow" | "red" | "" {
+  if (!dateString) {
+    return "";
+  }
+
+  const d = new Date(dateString.endsWith("Z") ? dateString : `${dateString}Z`);
+  const hours = (Date.now() - d.getTime()) / 3600000;
+
+  if (hours < 4) {
+    return "green";
+  }
+  if (hours < 24) {
+    return "yellow";
+  }
+
+  return "red";
+}
+
+export function formatDateTime(value: string): string {
+  if (!value) {
+    return "";
+  }
+
+  const normalized = value.endsWith("Z") ? value : `${value}Z`;
+  const date = new Date(normalized);
+
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  const datePart = date.toLocaleDateString("en-CA");
+  const timePart = date.toLocaleTimeString(undefined, {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+  const tz = date.toLocaleTimeString(undefined, { timeZoneName: "short" }).split(" ").pop();
+
+  return `${datePart} ${timePart} ${tz ?? ""}`.trim();
+}
+
+export function getWaitTimeTextClass(color: "green" | "yellow" | "red" | ""): string | undefined {
+  if (color === "green") {
+    return "text-green-600";
+  }
+  if (color === "yellow") {
+    return "text-yellow-600";
+  }
+  if (color === "red") {
+    return "text-red-600";
+  }
+  return undefined;
+}
+
+export function toDateInputValue(value: string | null | undefined): string {
+  if (!value) {
+    return "";
+  }
+  return value.split("T")[0] ?? value;
+}
+
+export function toDateTimeLocalInputValue(value: string | null | undefined): string {
+  if (!value) {
+    return "";
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+
+  const pad = (part: number) => String(part).padStart(2, "0");
+
+  return [
+    date.getFullYear(),
+    "-",
+    pad(date.getMonth() + 1),
+    "-",
+    pad(date.getDate()),
+    "T",
+    pad(date.getHours()),
+    ":",
+    pad(date.getMinutes()),
+  ].join("");
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 00000000..a5ef1935
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 00000000..4e683029
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,27 @@
+import * as Sentry from "@sentry/react";
+
+import "@/observability/sentry";
+
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { AppRoot } from "@/app-root";
+import { AppProviders } from "@/providers/AppProviders";
+import "@/styles/globals.css";
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+  throw new Error("Root element #root not found");
+}
+
+ReactDOM.createRoot(rootElement, {
+  onCaughtError: Sentry.reactErrorHandler(),
+  onRecoverableError: Sentry.reactErrorHandler(),
+  onUncaughtError: Sentry.reactErrorHandler(),
+}).render(
+  <React.StrictMode>
+    <AppProviders>
+      <AppRoot />
+    </AppProviders>
+  </React.StrictMode>,
+);
diff --git a/src/observability/http-transaction.ts b/src/observability/http-transaction.ts
new file mode 100644
index 00000000..c6b224ab
--- /dev/null
+++ b/src/observability/http-transaction.ts
@@ -0,0 +1,111 @@
+import { setHttpStatus, spanToJSON, startSpan, type Span } from "@sentry/react";
+import { isHTTPError } from "ky";
+
+const INTEGER_SEGMENT = /^\d+$/;
+const UUID_SEGMENT = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const HEX_SEGMENT = /^[0-9a-f]+$/i;
+const TOKEN_SEGMENT = /^[0-9a-z._~-]+$/i;
+const OPAQUE_HEX_MIN_LENGTH = 8;
+const OPAQUE_TOKEN_MIN_LENGTH = 16;
+
+function isIdentifierSegment(segment: string): boolean {
+  if (segment.length === 0) {
+    return false;
+  }
+  if (INTEGER_SEGMENT.test(segment)) {
+    return true;
+  }
+  if (UUID_SEGMENT.test(segment)) {
+    return true;
+  }
+  if (segment.length >= OPAQUE_HEX_MIN_LENGTH && HEX_SEGMENT.test(segment)) {
+    return true;
+  }
+  return (
+    segment.length >= OPAQUE_TOKEN_MIN_LENGTH &&
+    TOKEN_SEGMENT.test(segment) &&
+    /\d/.test(segment) &&
+    /[a-z]/i.test(segment)
+  );
+}
+
+export function normalizeHttpRoute(input: string): string {
+  let path: string;
+  try {
+    path = new URL(input).pathname;
+  } catch {
+    path = input.split("#")[0] ?? input;
+    path = path.split("?")[0] ?? path;
+  }
+
+  return path
+    .split("/")
+    .map((segment) => (isIdentifierSegment(segment) ? ":id" : segment))
+    .join("/");
+}
+
+export type HttpTraceOptions = {
+  method: string;
+  url: string;
+  entryPoint: string;
+  actorType?: string;
+};
+
+export type HttpTraceContext = {
+  reportStatus: (status: number) => void;
+};
+
+export async function traceHttpOperation<T>(
+  options: HttpTraceOptions,
+  callback: (context: HttpTraceContext) => Promise<T>,
+): Promise<T> {
+  const route = normalizeHttpRoute(options.url);
+
+  return startSpan(
+    {
+      name: `${options.method.toUpperCase()} ${route}`,
+      op: "http.client",
+      kind: 2,
+      forceTransaction: true,
+      attributes: {
+        "http.request.method": options.method.toUpperCase(),
+        "http.route": route,
+        "code.function": options.entryPoint,
+        "operation.type": "http.client",
+        ...(options.actorType ? { "actor.type": options.actorType } : {}),
+      },
+    },
+    async (span: Span) => {
+      const spanJson = spanToJSON(span);
+      if (spanJson.trace_id) {
+        span.setAttribute("trace_id", spanJson.trace_id);
+      }
+      if (spanJson.span_id) {
+        span.setAttribute("span_id", spanJson.span_id);
+        span.setAttribute("transaction_id", spanJson.span_id);
+      }
+
+      let statusReported = false;
+      const reportStatus = (status: number): void => {
+        if (statusReported) {
+          return;
+        }
+        statusReported = true;
+        setHttpStatus(span, status);
+      };
+
+      try {
+        const result = await callback({ reportStatus });
+        if (!statusReported && result instanceof Response) {
+          reportStatus(result.status);
+        }
+        return result;
+      } catch (error) {
+        if (!statusReported) {
+          reportStatus(isHTTPError(error) ? error.response.status : 500);
+        }
+        throw error;
+      }
+    },
+  );
+}
diff --git a/src/observability/sentry-scrubber.ts b/src/observability/sentry-scrubber.ts
new file mode 100644
index 00000000..558dce9f
--- /dev/null
+++ b/src/observability/sentry-scrubber.ts
@@ -0,0 +1,151 @@
+import type { Breadcrumb, ErrorEvent, SpanJSON, TransactionEvent } from "@sentry/core";
+
+import { normalizeHttpRoute } from "@/observability/http-transaction";
+
+function sanitizeUrl(value: string): string {
+  try {
+    const parsed = new URL(value, window.location.origin);
+    return `${parsed.origin}${normalizeHttpRoute(parsed.pathname)}`;
+  } catch {
+    return normalizeHttpRoute(value);
+  }
+}
+
+function keepOpaqueUserId(event: ErrorEvent | TransactionEvent): void {
+  event.user = event.user?.id == null ? undefined : { id: String(event.user.id) };
+}
+
+function scrubRequest(event: ErrorEvent | TransactionEvent): void {
+  if (!event.request) {
+    return;
+  }
+
+  event.request = {
+    method: event.request.method,
+    url: typeof event.request.url === "string" ? sanitizeUrl(event.request.url) : undefined,
+  };
+}
+
+const SAFE_SPAN_DATA_KEYS = new Set([
+  "actor.type",
+  "code.function",
+  "db.operation.name",
+  "db.system",
+  "http.method",
+  "http.request.method",
+  "http.response.status_code",
+  "http.route",
+  "http.status_code",
+  "operation.type",
+  "sentry.op",
+  "sentry.origin",
+  "server.address",
+]);
+
+function safeSpanData(data: SpanJSON["data"] | undefined): SpanJSON["data"] {
+  return Object.fromEntries(
+    Object.entries(data ?? {}).filter(
+      ([key, value]) =>
+        SAFE_SPAN_DATA_KEYS.has(key) && ["string", "number", "boolean"].includes(typeof value),
+    ),
+  );
+}
+
+function valueAsString(value: unknown): string | undefined {
+  return typeof value === "string" && value.length > 0 ? value : undefined;
+}
+
+function sanitizeHttpDescription(description: string | undefined): string | undefined {
+  if (!description) {
+    return undefined;
+  }
+
+  const match = /^(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS)\s+(.+)$/i.exec(description);
+  return match ? `${match[1]!.toUpperCase()} ${sanitizeUrl(match[2]!)}` : undefined;
+}
+
+function scrubTransactionSpans(event: TransactionEvent): void {
+  event.spans = event.spans?.map((span) => ({
+    ...span,
+    data: safeSpanData(span.data),
+    description: span.op?.includes("http") ? sanitizeHttpDescription(span.description) : undefined,
+  }));
+
+  const trace = event.contexts?.trace;
+  if (trace?.data) {
+    trace.data = safeSpanData(trace.data);
+  }
+}
+
+function setStringTag(
+  tags: NonNullable<TransactionEvent["tags"]>,
+  key: string,
+  value: unknown,
+): void {
+  const stringValue = valueAsString(value);
+  if (stringValue) {
+    tags[key] = stringValue;
+  }
+}
+
+function transactionFunction(event: ErrorEvent | TransactionEvent): string | undefined {
+  const traceFunction = valueAsString(event.contexts?.trace?.data?.["code.function"]);
+  return traceFunction ?? (event.type === "transaction" ? event.transaction : undefined);
+}
+
+function actorType(event: ErrorEvent | TransactionEvent): string {
+  return (
+    valueAsString(event.tags?.["actor.type"]) ??
+    valueAsString(event.contexts?.trace?.data?.["actor.type"]) ??
+    (event.user?.id == null ? "anonymous" : "authenticated")
+  );
+}
+
+function attachTraceIdentifiers(event: ErrorEvent | TransactionEvent): void {
+  const trace = event.contexts?.trace;
+  const tags = { ...event.tags };
+
+  setStringTag(tags, "trace_id", trace?.trace_id);
+  setStringTag(tags, "transaction_id", trace?.span_id);
+  setStringTag(tags, "operation.type", valueAsString(trace?.data?.["operation.type"]) ?? trace?.op);
+  setStringTag(tags, "code.function", transactionFunction(event));
+  tags["actor.type"] = actorType(event);
+  event.tags = tags;
+}
+
+export function scrubErrorEvent(event: ErrorEvent): ErrorEvent {
+  keepOpaqueUserId(event);
+  scrubRequest(event);
+  attachTraceIdentifiers(event);
+  return event;
+}
+
+export function scrubTransactionEvent(event: TransactionEvent): TransactionEvent {
+  keepOpaqueUserId(event);
+  scrubRequest(event);
+  attachTraceIdentifiers(event);
+  scrubTransactionSpans(event);
+  return event;
+}
+
+export function scrubBreadcrumb(breadcrumb: Breadcrumb): Breadcrumb {
+  const safe: Breadcrumb = {
+    timestamp: breadcrumb.timestamp,
+    type: breadcrumb.type,
+    category: breadcrumb.category,
+    level: breadcrumb.level,
+  };
+
+  if (breadcrumb.category === "fetch" || breadcrumb.category === "xhr") {
+    const method = breadcrumb.data?.method;
+    const statusCode = breadcrumb.data?.status_code;
+    const url = breadcrumb.data?.url;
+    safe.data = {
+      ...(typeof method === "string" ? { method } : {}),
+      ...(typeof statusCode === "number" ? { status_code: statusCode } : {}),
+      ...(typeof url === "string" ? { url: sanitizeUrl(url) } : {}),
+    };
+  }
+
+  return safe;
+}
diff --git a/src/observability/sentry.ts b/src/observability/sentry.ts
new file mode 100644
index 00000000..23cdbfcb
--- /dev/null
+++ b/src/observability/sentry.ts
@@ -0,0 +1,46 @@
+import * as Sentry from "@sentry/react";
+import { useEffect } from "react";
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from "react-router";
+
+import { env } from "@/lib/env";
+import {
+  scrubBreadcrumb,
+  scrubErrorEvent,
+  scrubTransactionEvent,
+} from "@/observability/sentry-scrubber";
+
+const sentryDsn = import.meta.env.VITE_SENTRY_DSN?.trim() || undefined;
+const sentryEnvironment = import.meta.env.VITE_SENTRY_ENVIRONMENT?.trim() || import.meta.env.MODE;
+const apiBaseUrl = new URL(env.apiUrl, window.location.origin).toString();
+
+Sentry.init({
+  dsn: sentryDsn,
+  environment: sentryEnvironment,
+  release: __SENTRY_RELEASE__,
+  initialScope: {
+    tags: {
+      service: "shoc-frontend",
+      "app.commit": __APP_COMMIT_SHA__,
+    },
+  },
+  integrations: [
+    Sentry.reactRouterBrowserTracingIntegration({
+      useEffect,
+      useLocation,
+      useNavigationType,
+      createRoutesFromChildren,
+      matchRoutes,
+    }),
+  ],
+  sendDefaultPii: false,
+  beforeSend: scrubErrorEvent,
+  beforeSendTransaction: scrubTransactionEvent,
+  beforeBreadcrumb: scrubBreadcrumb,
+  tracesSampleRate: 1.0,
+  tracePropagationTargets: [window.location.origin, apiBaseUrl],
+});
diff --git a/src/pages/Dashboard.css b/src/pages/Dashboard.css
deleted file mode 100644
index aeb19af4..00000000
--- a/src/pages/Dashboard.css
+++ /dev/null
@@ -1,122 +0,0 @@
-/* Dashboard Styles */
-.dashboardPage {
-  padding: 20px;
-}
-
-.pageTitle {
-  font-size: 24px;
-  font-weight: 600;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-.kpiContainer {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 15px;
-  margin-bottom: 30px;
-}
-
-.kpiCard {
-  padding: 20px;
-  border-radius: 4px;
-  color: white;
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  min-height: 100px;
-  cursor: pointer;
-  transition: filter 0.15s;
-}
-
-.kpiCard:hover {
-  filter: brightness(0.9);
-}
-
-.bg-success { background-color: #28a745; }
-.bg-primary { background-color: #007bff; }
-.bg-info { background-color: #17a2b8; }
-.bg-warning { background-color: #ffc107; color: #333; }
-.bg-danger { background-color: #dc3545; }
-
-.kpiIcon {
-  font-size: 32px;
-  min-width: 50px;
-}
-
-.kpiContent h5 {
-  margin: 0 0 10px 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.kpiContent p {
-  margin: 0;
-  font-size: 14px;
-  opacity: 0.9;
-}
-
-.kpiStat {
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.card {
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 0;
-  margin-bottom: 20px;
-}
-
-.mt-4 { margin-top: 30px; }
-
-.cardHeader {
-  padding: 20px;
-  border-bottom: 1px solid #ddd;
-}
-
-.cardHeader h3 {
-  margin: 0 0 5px 0;
-  font-size: 18px;
-  color: #333;
-}
-
-.cardHeader p {
-  margin: 0;
-  font-size: 13px;
-  color: #666;
-}
-
-.tableWrapper {
-  padding: 20px;
-}
-
-.dashTable {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-}
-
-.dashTable th {
-  background: #f5f5f5;
-  border: 1px solid #ddd;
-  padding: 12px;
-  text-align: left;
-  font-weight: 600;
-  color: #333;
-}
-
-.dashTable td {
-  border: 1px solid #ddd;
-  padding: 10px 12px;
-  color: #333;
-}
-
-.dashTable tbody tr:hover {
-  background: #f9f9f9;
-}
-
-.text-right {
-  text-align: right;
-}
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
deleted file mode 100644
index 1cd26e0e..00000000
--- a/src/pages/Dashboard.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { get } from "../apiUtil";
-import { API_URL } from "../constants";
-import "./Dashboard.css";
-
-const Dashboard = () => {
-  const navigate = useNavigate();
-  const [stats, setStats] = useState(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    get(`${API_URL}/Dashboard/Stats`)
-      .then((data) => setStats(data))
-      .catch(() => {})
-      .finally(() => setLoading(false));
-  }, []);
-
-  const kpis = [
-    {
-      title: "Create a Work Order",
-      icon: "fa-plus",
-      color: "success",
-      desc: "Report a problem you need fixed",
-      onClick: () => navigate("/workorders/new"),
-    },
-    {
-      title: "Open Work Orders",
-      icon: "fa-folder-open",
-      color: "primary",
-      stat: loading ? "..." : stats?.open ?? 0,
-      onClick: () => navigate("/workorders"),
-    },
-    {
-      title: "Not Dispatched",
-      icon: "fa-clock-o",
-      color: "info",
-      stat: loading ? "..." : stats?.notDispatched ?? 0,
-      onClick: () => navigate("/workorders"),
-    },
-    {
-      title: "Completed Orders",
-      icon: "fa-check-circle",
-      color: "warning",
-      stat: loading ? "..." : stats?.completed ?? 0,
-      onClick: () => navigate("/workorders"),
-    },
-  ];
-
-  return (
-    <section className="dashboardPage">
-      <div className="pageTitle">Dashboard</div>
-
-      <div className="kpiContainer">
-        {kpis.map((kpi, idx) => (
-          <div key={idx} className={`kpiCard bg-${kpi.color}`} onClick={kpi.onClick}>
-            <div className="kpiIcon">
-              <i className={`fa ${kpi.icon}`}></i>
-            </div>
-            <div className="kpiContent">
-              <h5>{kpi.title}</h5>
-              {kpi.stat !== undefined && <div className="kpiStat">{kpi.stat?.toLocaleString?.() ?? kpi.stat}</div>}
-              {kpi.desc && <p>{kpi.desc}</p>}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="card mt-4">
-        <div className="cardHeader">
-          <h3>Priority Analysis</h3>
-          <p>Age of open Work Orders by Priority</p>
-        </div>
-        <div className="tableWrapper">
-          <table className="dashTable">
-            <thead>
-              <tr>
-                <th>Priority</th>
-                <th className="text-right">Total</th>
-                <th className="text-right">0-14 Days</th>
-                <th className="text-right">15-29 Days</th>
-                <th className="text-right">30-59 Days</th>
-                <th className="text-right">60+ Days</th>
-              </tr>
-            </thead>
-            <tbody>
-              {[5, 4, 3, 2, 1].map((p) => (
-                <tr key={p}>
-                  <td>{p}</td>
-                  <td className="text-right">—</td>
-                  <td className="text-right">—</td>
-                  <td className="text-right">—</td>
-                  <td className="text-right">—</td>
-                  <td className="text-right">—</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      <div className="card mt-4">
-        <div className="cardHeader">
-          <h3>Invoice Analysis</h3>
-        </div>
-        <div className="tableWrapper">
-          <table className="dashTable">
-            <thead>
-              <tr>
-                <th>Status</th>
-                <th className="text-right">Count</th>
-                <th className="text-right">Amount</th>
-              </tr>
-            </thead>
-            <tbody>
-              {["Draft", "Challenged", "Pending Approval", "Approved", "Paid"].map((s) => (
-                <tr key={s}>
-                  <td>{s}</td>
-                  <td className="text-right">0</td>
-                  <td className="text-right">$0.00</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Dashboard;
diff --git a/src/pages/PmSchedule/api.js b/src/pages/PmSchedule/api.js
deleted file mode 100644
index 7113b361..00000000
--- a/src/pages/PmSchedule/api.js
+++ /dev/null
@@ -1,67 +0,0 @@
-// Mock PM schedules data
-const mockPMSchedules = [
-  {
-    id: 1,
-    asset: "HVAC-001",
-    assetName: "Building A HVAC System",
-    frequency: "Quarterly",
-    lastServiceDate: "2024-01-15",
-    nextServiceDate: "2024-04-15",
-    status: "Active",
-    assignedTo: "John Anderson",
-    notes: "Quarterly maintenance check",
-  },
-  {
-    id: 2,
-    asset: "ELEC-002",
-    assetName: "Main Electrical Panel",
-    frequency: "Annual",
-    lastServiceDate: "2023-12-01",
-    nextServiceDate: "2024-12-01",
-    status: "Active",
-    assignedTo: "Sarah Martinez",
-    notes: "Annual electrical inspection",
-  },
-  {
-    id: 3,
-    asset: "PLUMB-001",
-    assetName: "Building B Plumbing System",
-    frequency: "Semi-Annual",
-    lastServiceDate: "2024-01-10",
-    nextServiceDate: "2024-07-10",
-    status: "Active",
-    assignedTo: "Mike Johnson",
-    notes: "Bi-annual plumbing inspection",
-  },
-];
-
-export const getPMSchedules = async () => {
-  await new Promise(resolve => setTimeout(resolve, 300));
-  return [...mockPMSchedules];
-};
-
-export const getPMScheduleById = async (id) => {
-  await new Promise(resolve => setTimeout(resolve, 200));
-  return mockPMSchedules.find(p => p.id === parseInt(id));
-};
-
-export const addPMSchedule = async (pmSchedule) => {
-  await new Promise(resolve => setTimeout(resolve, 500));
-  const newPMSchedule = { id: mockPMSchedules.length + 1, ...pmSchedule };
-  mockPMSchedules.push(newPMSchedule);
-  return newPMSchedule;
-};
-
-export const editPMSchedule = async (pmSchedule) => {
-  await new Promise(resolve => setTimeout(resolve, 500));
-  const idx = mockPMSchedules.findIndex(p => p.id === pmSchedule.id);
-  if (idx >= 0) mockPMSchedules[idx] = pmSchedule;
-  return pmSchedule;
-};
-
-export const deletePMSchedule = async (id) => {
-  await new Promise(resolve => setTimeout(resolve, 500));
-  const idx = mockPMSchedules.findIndex(p => p.id === id);
-  if (idx >= 0) mockPMSchedules.splice(idx, 1);
-  return true;
-};
diff --git a/src/pages/PmSchedule/edit/api.js b/src/pages/PmSchedule/edit/api.js
deleted file mode 100644
index 7da1e39c..00000000
--- a/src/pages/PmSchedule/edit/api.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { post } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const editEmployee = async (payload) => {
-  return post(`${API_URL}/Employee/UpdateEmployee`, payload);
-};
diff --git a/src/pages/PmSchedule/form/PmScheduleFormPage.css b/src/pages/PmSchedule/form/PmScheduleFormPage.css
deleted file mode 100644
index 36081949..00000000
--- a/src/pages/PmSchedule/form/PmScheduleFormPage.css
+++ /dev/null
@@ -1,289 +0,0 @@
-/* PM Schedule Form Page - Matching Employee Form Style */
-.pmScheduleFormPage {
-  background: #f5f5f5;
-  min-height: 100vh;
-  padding: 0;
-}
-
-.panel {
-  margin-bottom: 20px;
-  background-color: #fff;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-
-.panel-default {
-  border-color: #ddd;
-}
-
-.panel-connected {
-  border-radius: 0;
-  border: none;
-  box-shadow: none;
-}
-
-.panel-body {
-  padding: 15px;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  padding: 8px 15px;
-  margin-bottom: 20px;
-  list-style: none;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-}
-
-.breadcrumb-alt {
-  background-color: white;
-  border-bottom: 1px solid #e5e5e5;
-  padding: 10px 20px;
-  margin: 0 0 20px 0;
-  border-radius: 0;
-}
-
-.breadcrumb > li {
-  display: inline-block;
-}
-
-.breadcrumb > li + li:before {
-  content: ">\00a0";
-  padding: 0 5px;
-  color: #ccc;
-}
-
-.breadcrumb > li a {
-  color: #0088cc;
-  text-decoration: none;
-}
-
-.breadcrumb > li a:hover {
-  text-decoration: underline;
-}
-
-.breadcrumb > .active {
-  color: #00a0d1;
-  font-weight: bold;
-  cursor: default;
-}
-
-/* Container */
-.container {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-/* Form Header */
-.header {
-  margin-bottom: 15px;
-}
-
-.heading {
-  margin: 0 0 10px 0;
-  font-weight: 300;
-  line-height: 1.1;
-  color: #333;
-}
-
-.heading.thin {
-  font-weight: 300;
-  font-size: 24px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.heading.text-uppercase {
-  text-transform: uppercase;
-  font-size: 14px;
-  margin-bottom: 15px;
-}
-
-.text-primary {
-  color: #0088cc;
-}
-
-.fa-stack {
-  position: relative;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  line-height: 2em;
-  vertical-align: middle;
-}
-
-.fa-stack-1x,
-.fa-stack-2x {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-
-.fa-stack-2x {
-  font-size: 2em;
-}
-
-.fa-stack-1x {
-  font-size: 1em;
-  line-height: inherit;
-}
-
-.fa-inverse {
-  color: #fff;
-}
-
-/* Form Groups */
-.form-group {
-  margin-bottom: 15px;
-  position: relative;
-}
-
-/* Row and Columns */
-.row {
-  margin-right: -15px;
-  margin-left: -15px;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.row::after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-[class*="col-"] {
-  position: relative;
-  min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
-}
-
-.col-sm-4 {
-  width: 33.33333333%;
-}
-
-.col-sm-6 {
-  width: 50%;
-}
-
-@media (min-width: 992px) {
-  .col-md-4 {
-    width: 33.33333333%;
-  }
-}
-
-/* Labels */
-label {
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: 5px;
-  font-weight: 600;
-  font-size: 13px;
-  color: #333;
-}
-
-.required-field::after {
-  content: " *";
-  color: #d9534f;
-}
-
-/* Form Controls */
-.form-control {
-  display: block;
-  width: 100%;
-  height: 34px;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 1.42857143;
-  color: #555;
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  box-sizing: border-box;
-}
-
-.form-control:focus {
-  border-color: #66afe9;
-  outline: 0;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-}
-
-select.form-control {
-  height: 34px;
-  padding: 6px 12px;
-}
-
-textarea.form-control {
-  height: auto;
-  min-height: 100px;
-}
-
-/* Form Actions */
-.form-actions {
-  padding: 19px 20px 20px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border-top: 1px solid #e5e5e5;
-  text-align: right;
-}
-
-/* Buttons */
-.btn {
-  display: inline-block;
-  padding: 6px 12px;
-  margin-bottom: 0;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.42857143;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  user-select: none;
-}
-
-.btn-default {
-  color: #333;
-  background-color: #fff;
-  border-color: #ccc;
-}
-
-.btn-default:hover {
-  background-color: #e6e6e6;
-  border-color: #adadad;
-}
-
-.btn-primary {
-  color: #fff;
-  background-color: #0088cc;
-  border-color: #0088cc;
-}
-
-.btn-primary:hover {
-  background-color: #006699;
-  border-color: #005580;
-}
-
-.btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.65;
-}
-
-/* Responsive */
-@media (max-width: 767px) {
-  [class*="col-sm-"] {
-    width: 100%;
-  }
-}
-
diff --git a/src/pages/PmSchedule/form/PmScheduleFormPage.js b/src/pages/PmSchedule/form/PmScheduleFormPage.js
deleted file mode 100644
index d3be7e51..00000000
--- a/src/pages/PmSchedule/form/PmScheduleFormPage.js
+++ /dev/null
@@ -1,303 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import { getPMScheduleById, addPMSchedule, editPMSchedule } from "../api";
-import "./PmScheduleFormPage.css";
-
-export default function PmScheduleFormPage() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const isEdit = !!id;
-
-  const [formData, setFormData] = useState({
-    asset: "",
-    assetName: "",
-    frequency: "Quarterly",
-    lastServiceDate: "",
-    nextServiceDate: "",
-    status: "Active",
-    assignedTo: "",
-    notes: "",
-  });
-
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (isEdit && id) {
-      const loadPMSchedule = async () => {
-        try {
-          const pm = await getPMScheduleById(id);
-          if (pm) {
-            setFormData(prev => {
-              const merged = { ...prev };
-              for (const key of Object.keys(merged)) {
-                if (pm[key] != null) merged[key] = pm[key];
-              }
-              return merged;
-            });
-          }
-        } catch (err) {
-          console.error("Failed to load PM schedule", err);
-          toast.error("Failed to load PM schedule");
-        }
-      };
-      loadPMSchedule();
-    }
-  }, [id, isEdit]);
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
-
-  const handleSave = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-
-    try {
-      if (isEdit) {
-        await editPMSchedule(formData);
-        toast.success("PM Schedule updated successfully!");
-      } else {
-        await addPMSchedule(formData);
-        toast.success("PM Schedule created successfully!");
-      }
-      navigate("/pmschedules");
-    } catch (err) {
-      console.error(err);
-      toast.error("Failed to save PM Schedule");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCancel = () => {
-    navigate("/pmschedules");
-  };
-
-  return (
-    <div className="pmScheduleFormPage">
-      <div className="panel panel-default panel-connected">
-        <div className="panel-body">
-          <ol className="breadcrumb breadcrumb-alt">
-            <li>
-              <a href="#" onClick={(e) => { e.preventDefault(); navigate("/pmschedules"); }}>
-                PM Schedules
-              </a>
-            </li>
-            <li className="active">{isEdit ? "Edit" : "Create"}</li>
-          </ol>
-
-          <div className="container">
-            <form onSubmit={handleSave}>
-              {/* Page Header */}
-              <div className="form-group">
-                <div className="header">
-                  <h3 className="heading thin">
-                    <span className="fa-stack" style={{ fontSize: "0.9em" }}>
-                      <i className="fa fa-square fa-stack-2x text-primary"></i>
-                      <i className={`fa fa-${isEdit ? "edit" : "plus"} fa-stack-1x fa-inverse`}></i>
-                    </span>
-                    <span>{isEdit ? "Edit a PM Schedule" : "Create a PM Schedule"}</span>
-                  </h3>
-                </div>
-              </div>
-
-              {/* Asset Information Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Asset Information</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="asset">Asset ID</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="asset"
-                        name="asset"
-                        value={formData.asset}
-                        onChange={handleChange}
-                        placeholder="e.g., HVAC-001"
-                        required
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="assetName">Asset Name</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="assetName"
-                        name="assetName"
-                        value={formData.assetName}
-                        onChange={handleChange}
-                        placeholder="Asset description"
-                        required
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Schedule Information Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Schedule Information</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="frequency">Frequency</label>
-                      <select
-                        className="form-control"
-                        id="frequency"
-                        name="frequency"
-                        value={formData.frequency}
-                        onChange={handleChange}
-                        required
-                      >
-                        <option value="Daily">Daily</option>
-                        <option value="Weekly">Weekly</option>
-                        <option value="Monthly">Monthly</option>
-                        <option value="Quarterly">Quarterly</option>
-                        <option value="Semi-Annual">Semi-Annual</option>
-                        <option value="Annual">Annual</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="lastServiceDate">Last Service Date</label>
-                      <input
-                        className="form-control"
-                        type="date"
-                        id="lastServiceDate"
-                        name="lastServiceDate"
-                        value={formData.lastServiceDate}
-                        onChange={handleChange}
-                        required
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="nextServiceDate">Next Service Date</label>
-                      <input
-                        className="form-control"
-                        type="date"
-                        id="nextServiceDate"
-                        name="nextServiceDate"
-                        value={formData.nextServiceDate}
-                        onChange={handleChange}
-                        required
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Assignment Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Assignment</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="assignedTo">Assigned To</label>
-                      <select
-                        className="form-control"
-                        id="assignedTo"
-                        name="assignedTo"
-                        value={formData.assignedTo}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select Employee</option>
-                        <option value="John Anderson">John Anderson</option>
-                        <option value="Sarah Martinez">Sarah Martinez</option>
-                        <option value="Mike Johnson">Mike Johnson</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="status">Status</label>
-                      <select
-                        className="form-control"
-                        id="status"
-                        name="status"
-                        value={formData.status}
-                        onChange={handleChange}
-                        required
-                      >
-                        <option value="Active">Active</option>
-                        <option value="Inactive">Inactive</option>
-                        <option value="Suspended">Suspended</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Notes Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Notes</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-12">
-                    <div className="form-group">
-                      <label htmlFor="notes">Notes</label>
-                      <textarea
-                        className="form-control"
-                        id="notes"
-                        name="notes"
-                        value={formData.notes}
-                        onChange={handleChange}
-                        rows="4"
-                        placeholder="PM schedule notes"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Form Actions */}
-              <div className="form-actions">
-                <button
-                  type="button"
-                  className="btn btn-default"
-                  onClick={handleCancel}
-                  disabled={loading}
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="btn btn-primary"
-                  disabled={loading}
-                >
-                  {loading ? "Saving..." : isEdit ? "Update" : "Create"}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/PmSchedule/list/Delete.js b/src/pages/PmSchedule/list/Delete.js
deleted file mode 100644
index 394ae1a9..00000000
--- a/src/pages/PmSchedule/list/Delete.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { deleteContact } from "./api";
-
-export default function DeleteModal({ open, item, onClose, onSuccess }) {
-  if(!open) return null;
-  const handleDelete=()=>{ deleteContact(item.id).then(()=>onSuccess()); };
-  return (
-    <div className="modalRoot">
-      <div className="modalScrim" onClick={onClose}/>
-      <div className="modalCard">
-        <div className="modalHeader"><div className="modalTitle">Delete Item?</div><button onClick={onClose}>✕</button></div>
-        <div className="modalBody">
-          <div>Are you sure you want to delete this contact?</div>
-          <div className="modalActions">
-            <button onClick={onClose}>Cancel</button>
-            <button onClick={handleDelete}>Delete</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/PmSchedule/list/Form.js b/src/pages/PmSchedule/list/Form.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/pages/PmSchedule/list/List.js b/src/pages/PmSchedule/list/List.js
deleted file mode 100644
index 1f9c0f08..00000000
--- a/src/pages/PmSchedule/list/List.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import { usePMSchedules, useDeletePMSchedule } from "../../../hooks/api/usePMSchedules";
-import { useDebounce } from "../../../hooks/useDebounce";
-import { useModal } from "../../../hooks/useModal";
-import { DEBOUNCE_SEARCH, DEFAULT_PAGE_SIZE, VIEW_MODE_LIST } from "../../../constants";
-import Table from "./Table";
-import DeleteModal from "../../../components/DeleteModal";
-import ActionBar from "../../../components/ActionBar";
-import "./styles.css";
-
-export default function PmScheduleListPage() {
-  const navigate = useNavigate();
-
-  // State management
-  const [search, setSearch] = useState("");
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
-  const [viewMode, setViewMode] = useState(VIEW_MODE_LIST);
-
-  // Debounce search to avoid excessive API calls
-  const debouncedSearch = useDebounce(search, DEBOUNCE_SEARCH);
-
-  // React Query hook - handles loading, caching, refetching automatically
-  const { data, isLoading, error, refetch } = usePMSchedules({
-    search: debouncedSearch,
-    page,
-    pageSize,
-  });
-
-  // Delete mutation - handles success/error toasts automatically
-  const deleteMutation = useDeletePMSchedule();
-
-  // Modal state management using custom hook
-  const deleteModal = useModal();
-
-  // Extract data with safe defaults
-  const rows = data?.items || [];
-  const totalCount = data?.totalCount || 0;
-  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
-
-  // Event handlers
-  const handleDeleteClick = (item) => {
-    deleteModal.open(item);
-  };
-
-  const handleDeleteConfirm = async () => {
-    await deleteMutation.mutateAsync(deleteModal.data.id);
-    deleteModal.close();
-    refetch();
-  };
-
-  return (
-    <>
-      <ActionBar
-        moduleName="PM Schedules"
-        moduleIcon="fa-calendar-check-o"
-        onNew={() => navigate("/pmschedules/new")}
-        onBulkEdit={() => console.log("Bulk edit")}
-        selectedCount={0}
-      />
-
-      <section className="listPage">
-        <div className="breadcrumb">
-          <span className="breadcrumbItem active">PM Schedules</span>
-        </div>
-
-        <div className="searchSection">
-          <div className="searchHeader">
-            <h3 className="searchHeading">
-              <span className="fa-stack iconStack">
-                <i className="fa fa-square fa-stack-2x text-primary"></i>
-                <i className="fa fa-calendar-check-o fa-stack-1x fa-inverse"></i>
-              </span>
-              <span>Search for PM Schedules</span>
-            </h3>
-            <span className="searchSubheading">Use the settings menu to adjust how to filter the list, and which columns to display.</span>
-          </div>
-
-          <div className="searchControls">
-            <div className="searchLeft">
-              <div className="searchInputGroup">
-                <select className="searchDropdown" defaultValue="Asset">
-                  <option>Asset</option>
-                  <option>Frequency</option>
-                  <option>Status</option>
-                </select>
-                <input
-                  className="searchInput"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Enter search criteria here..."
-                />
-                <button className="searchButton">Search!</button>
-              </div>
-              <div className="viewToggle">
-                <button
-                  className={`viewBtn ${viewMode === "list" ? "active" : ""}`}
-                  title="List view"
-                  onClick={() => setViewMode("list")}
-                >
-                  <i className="fa fa-navicon"></i>
-                </button>
-                <button
-                  className={`viewBtn ${viewMode === "card" ? "active" : ""}`}
-                  title="Card view"
-                  onClick={() => setViewMode("card")}
-                >
-                  <i className="fa fa-th-large"></i>
-                </button>
-              </div>
-            </div>
-
-            <div className="searchRight">
-              <div className="paginationTop">
-                <button
-                  className="pageBtn"
-                  disabled={page === 1}
-                  onClick={() => setPage(page - 1)}
-                >
-                  «
-                </button>
-                <span className="pageNumber">{page}</span>
-                <button
-                  className="pageBtn"
-                  disabled={page >= totalPages}
-                  onClick={() => setPage(page + 1)}
-                >
-                  »
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <Table
-          loading={isLoading}
-          error={error?.message}
-          rows={rows}
-          onEdit={(item) => navigate(`/pmschedules/edit/${item.id}`)}
-          onDelete={handleDeleteClick}
-          page={page}
-          setPage={setPage}
-          pageSize={pageSize}
-          setPageSize={setPageSize}
-          totalCount={totalCount}
-          totalPages={totalPages}
-        />
-
-        <DeleteModal
-          isOpen={deleteModal.isOpen}
-          onClose={deleteModal.close}
-          onConfirm={handleDeleteConfirm}
-          title="Delete PM Schedule"
-          message={`Are you sure you want to delete "${deleteModal.data?.name}"? This action cannot be undone.`}
-          loading={deleteMutation.isLoading}
-        />
-      </section>
-    </>
-  );
-}
diff --git a/src/pages/PmSchedule/list/Table.js b/src/pages/PmSchedule/list/Table.js
deleted file mode 100644
index a98782f6..00000000
--- a/src/pages/PmSchedule/list/Table.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import SharedTable from "../../../components/SharedTable";
-
-export default function Table({ loading, error, rows, onEdit, onDelete, page, setPage, pageSize, setPageSize, totalCount, totalPages }) {
-  const columns = [
-    { key: "asset", label: "Asset", render: (val, row) => <strong><a href="#" onClick={(e) => { e.preventDefault(); onEdit && onEdit(row); }}>{val}</a></strong> },
-    { key: "frequency", label: "Frequency" },
-    { key: "lastDate", label: "Last Date" },
-    { key: "nextDate", label: "Next Date" },
-    { key: "status", label: "Status" },
-    { key: "assignedTo", label: "Assigned To" },
-  ];
-
-  return (
-    <SharedTable rows={rows} columns={columns} onEdit={onEdit} onDelete={onDelete} page={page} setPage={setPage} pageSize={pageSize} setPageSize={setPageSize} totalCount={totalCount} loading={loading} error={error} />
-  );
-}
diff --git a/src/pages/PmSchedule/list/api.js b/src/pages/PmSchedule/list/api.js
deleted file mode 100644
index 996b317a..00000000
--- a/src/pages/PmSchedule/list/api.js
+++ /dev/null
@@ -1,38 +0,0 @@
-// pages/pmschedules/list/api.js
-import { get } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const fetchPmSchedulesPaged = async ({
-  search = "",
-  page = 1,
-  pageSize = 12,
-}) => {
-  const res = await get(
-    `${API_URL}/PMSchedule/GetList?search=${encodeURIComponent(search)}&page=${page}&pageSize=${pageSize}`
-  );
-
-  // API returns array directly or {value: [...], Count: n}
-  const dataArray = Array.isArray(res) ? res : (res?.value || res?.data || res?.Data || []);
-
-  const rows = dataArray.map(x => ({
-    id: x.id ?? x.Id,
-    name: x.name ?? x.Name ?? "",
-    asset: x.asset ?? x.Asset ?? x.assetName ?? x.AssetName ?? "",
-    frequency: x.frequency ?? x.Frequency ?? "",
-    startDate: x.startDate ?? x.StartDate ?? "",
-    lastDate: x.lastDate ?? x.LastDate ?? "",
-    nextDate: x.nextDate ?? x.NextDate ?? "",
-    status: x.isActive ? "Active" : "Inactive",
-    assignedTo: x.assignedTo ?? x.AssignedTo ?? "",
-  }));
-
-  const totalCount = res?.Count ?? res?.count ?? res?.totalCount ?? res?.TotalCount ?? rows.length;
-
-  return {
-    rows,
-    page: res?.pageNumber ?? res?.PageNumber ?? page,
-    pageSize: res?.pageSize ?? res?.PageSize ?? pageSize,
-    totalCount: totalCount,
-    totalPages: Math.max(1, Math.ceil(totalCount / pageSize)),
-  };
-};
diff --git a/src/pages/PmSchedule/list/styles.css b/src/pages/PmSchedule/list/styles.css
deleted file mode 100644
index f561a2f8..00000000
--- a/src/pages/PmSchedule/list/styles.css
+++ /dev/null
@@ -1,231 +0,0 @@
-/* Modal styles for PM Schedules module */
-.modalRoot{position:fixed;inset:0;z-index:1000;}
-.modalScrim{position:absolute;inset:0;background:rgba(0,0,0,.3);}
-.modalCard{position:relative;margin:10% auto;padding:20px;background:#fff;width:400px;}
-
-/* Override listPage padding for this module */
-.listPage {
-  padding: 0 !important;
-  background: white !important;
-  min-height: auto !important;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  background: white;
-  padding: 10px 20px;
-  margin: 0;
-  border-bottom: 1px solid #e5e5e5;
-  font-size: 13px;
-}
-
-.breadcrumbItem {
-  color: #333;
-}
-
-.breadcrumbItem.active {
-  cursor: default;
-  font-weight: bold;
-  color: #00a0d1;
-}
-
-/* Search Section Styles */
-.searchSection {
-  background: white;
-  padding: 20px;
-  margin-bottom: 0;
-  border-bottom: 1px solid #e5e5e5;
-  position: relative;
-  z-index: 1;
-}
-
-.searchHeader {
-  margin-bottom: 20px;
-}
-
-.searchHeading {
-  font-size: 24px;
-  font-weight: 300;
-  margin: 0 0 8px 0;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.iconStack {
-  font-size: 0.9em;
-}
-
-.text-primary {
-  color: #0088cc;
-}
-
-.fa-inverse {
-  color: white;
-}
-
-.searchSubheading {
-  color: #666;
-  font-size: 14px;
-  display: block;
-  margin-left: 45px;
-}
-
-.searchControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 20px;
-}
-
-.searchLeft {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  flex: 1;
-}
-
-.searchInputGroup {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  flex: 1;
-  max-width: 600px;
-}
-
-.searchDropdown {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  background: white;
-  font-size: 14px;
-  min-width: 120px;
-}
-
-.searchInput {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-left: none;
-  border-right: 1px solid #ccc;
-  flex: 1;
-  font-size: 14px;
-  outline: none;
-}
-
-.searchInput:focus {
-  border-color: #66afe9;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-}
-
-.searchButton {
-  height: 38px;
-  padding: 6px 20px;
-  background: #0088cc;
-  color: white;
-  border: 1px solid #0088cc;
-  border-radius: 0 4px 4px 0;
-  font-size: 14px;
-  cursor: pointer;
-  white-space: nowrap;
-  margin-left: 20px;
-}
-
-.searchButton:hover {
-  background: #0077b3;
-  border-color: #0077b3;
-}
-
-.viewToggle {
-  display: flex;
-  border: 1px solid #0088cc;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.viewBtn {
-  width: 40px;
-  height: 38px;
-  background: white;
-  border: none;
-  border-right: 1px solid #0088cc;
-  color: #0088cc;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.viewBtn:last-child {
-  border-right: none;
-}
-
-.viewBtn.active {
-  background: #0088cc;
-  color: white;
-}
-
-.viewBtn:hover:not(.active) {
-  background: #e6f2f8;
-}
-
-.searchRight {
-  display: flex;
-  align-items: center;
-}
-
-.paginationTop {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 0;
-}
-
-.pageBtn {
-  width: 35px;
-  height: 36px;
-  background: white;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  color: #0088cc;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pageBtn:hover:not(:disabled) {
-  background: #e6f2f8;
-}
-
-.pageBtn:disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-
-.pageNumber {
-  min-width: 35px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #0088cc;
-  color: white;
-  font-size: 14px;
-  border-left: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-}
-
-/* Table wrapper */
-.tableContainer {
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 0;
-  margin: 0;
-}
diff --git a/src/pages/PmSchedule/new/api.js b/src/pages/PmSchedule/new/api.js
deleted file mode 100644
index 81505470..00000000
--- a/src/pages/PmSchedule/new/api.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { get, post } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const getPmScheduleById = (id) =>
-  get(`${API_URL}/PmSchedule/GetById?id=${id}`);
-
-export const addPmSchedule = (payload) =>
-  post(`${API_URL}/PmSchedule/Create`, payload);
-
-export const editPmSchedule = (payload) =>
-  post(`${API_URL}/PmSchedule/Edit`, payload);
diff --git a/src/pages/accounts/api.js b/src/pages/accounts/api.js
deleted file mode 100644
index 1598926c..00000000
--- a/src/pages/accounts/api.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { accountApi } from "../../services/api";
-
-export const getAccounts = async (params = {}) => {
-  try {
-    const response = await accountApi.getAll(params);
-    const accounts = response.data || response;
-    return Array.isArray(accounts) ? accounts : [];
-  } catch (error) {
-    console.error("Error fetching accounts:", error);
-    throw error;
-  }
-};
-
-export const getAccountById = async (id) => {
-  try {
-    return await accountApi.getById(id);
-  } catch (error) {
-    console.error("Error fetching account:", error);
-    throw error;
-  }
-};
-
-export const addAccount = async (account) => {
-  try {
-    return await accountApi.create(account);
-  } catch (error) {
-    console.error("Error creating account:", error);
-    throw error;
-  }
-};
-
-export const editAccount = async (account) => {
-  try {
-    return await accountApi.update(account.id, account);
-  } catch (error) {
-    console.error("Error updating account:", error);
-    throw error;
-  }
-};
-
-export const deleteAccount = async (id) => {
-  try {
-    await accountApi.delete(id);
-    return true;
-  } catch (error) {
-    console.error("Error deleting account:", error);
-    throw error;
-  }
-};
diff --git a/src/pages/accounts/edit/api.js b/src/pages/accounts/edit/api.js
deleted file mode 100644
index 7e5ce3d2..00000000
--- a/src/pages/accounts/edit/api.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { post } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const editAccount = (data) =>
-  post(`${API_URL}/Account/EditAccount`, data);
diff --git a/src/pages/accounts/form/AccountFormPage.js b/src/pages/accounts/form/AccountFormPage.js
deleted file mode 100644
index aa1b9b45..00000000
--- a/src/pages/accounts/form/AccountFormPage.js
+++ /dev/null
@@ -1,239 +0,0 @@
-// src/pages/accounts/form/AccountFormPage.js
-import React, { useState, useEffect } from "react";
-import { useNavigate, useParams } from "react-router";
-import { toast } from "react-toastify";
-import "../../../styles/FormPage.css";
-import { getAccountById, addAccount, editAccount } from "../api";
-
-const AccountFormPage = () => {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const isEdit = !!id;
-
-  const [loading, setLoading] = useState(false);
-  const [account, setAccount] = useState({});
-
-  useEffect(() => {
-    if (isEdit && id) {
-      const loadAccount = async () => {
-        try {
-          const data = await getAccountById(id);
-          if (data) {
-            setAccount(data);
-          }
-        } catch (err) {
-          console.error("Failed to load account", err);
-          toast.error("Failed to load account");
-        }
-      };
-      loadAccount();
-    }
-  }, [id, isEdit]);
-
-  const handleChange = (e) => {
-    const { name, value, type, checked } = e.target;
-    setAccount((prev) => ({
-      ...prev,
-      [name]: type === "checkbox" ? checked : value,
-    }));
-  };
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-
-    if (!account.AccountName) {
-      toast.error("Account Name is required.");
-      return;
-    }
-
-    try {
-      setLoading(true);
-
-      const payload = { ...account };
-
-      if (isEdit) {
-        await editAccount(payload);
-        toast.success("Account updated successfully!");
-      } else {
-        await addAccount(payload);
-        toast.success("Account created successfully!");
-      }
-
-      navigate("/accounts");
-    } catch (err) {
-      console.error(err);
-      toast.error("Something went wrong while saving the account.");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="contactFormWrapper">
-      <div className="formCard">
-        <div className="formHeader">
-          <h2>{isEdit ? "Edit Account" : "Create an Account"}</h2>
-        </div>
-
-        <form className="contactForm" onSubmit={handleSubmit} noValidate>
-          
-          {/* GENERAL DETAILS */}
-          <section className="section">
-            <h5 className="sectionTitle">General Details</h5>
-
-            <div className="contactFormBody">
-              <div className="formGroup">
-                <label className="formLabel">
-                  Account Name <span className="required">*</span>
-                </label>
-                <input
-                  name="AccountName"
-                  className="formControl"
-                  placeholder="Enter account name"
-                  value={account.AccountName || ""}
-                  onChange={handleChange}
-                />
-              </div>
-
-              <div className="formGroup">
-                <label className="formLabel">Account Number</label>
-                <input
-                  name="AccountNumber"
-                  className="formControl"
-                  placeholder="Enter account number"
-                  value={account.AccountNumber || ""}
-                  onChange={handleChange}
-                />
-              </div>
-
-              <div className="formGroup">
-                <label className="formLabel">Industry</label>
-                <input
-                  name="Industry"
-                  className="formControl"
-                  placeholder="Enter industry"
-                  value={account.Industry || ""}
-                  onChange={handleChange}
-                />
-              </div>
-
-              <div className="formGroup">
-                <label className="formLabel">Website</label>
-                <input
-                  name="Website"
-                  className="formControl"
-                  placeholder="https://example.com"
-                  value={account.Website || ""}
-                  onChange={handleChange}
-                />
-              </div>
-
-              <div className="formGroup fullWidth">
-                <label className="formLabel">Notes</label>
-                <input
-                  name="Notes"
-                  className="formControl"
-                  placeholder="Enter account notes or description"
-                  value={account.Notes || ""}
-                  onChange={handleChange}
-                />
-              </div>
-            </div>
-          </section>
-
-          <hr />
-
-          {/* ADDRESS */}
-          <section className="section">
-            <h5 className="sectionTitle">Address</h5>
-
-            <div className="contactFormBody">
-              <div className="formGroup">
-                <label className="formLabel">Address 1</label>
-                <input
-                  name="Address1"
-                  className="formControl"
-                  placeholder="Enter street address"
-                  value={account.Address1 || ""}
-                  onChange={handleChange}
-                />
-              </div>
-
-              <div className="formGroup">
-                <label className="formLabel">Address 2</label>
-                <input
-                  name="Address2"
-                  className="formControl"
-                  placeholder="Suite/Apt/Unit"
-                  value={account.Address2 || ""}
-                  onChange={handleChange}
-                />
-              </div>
-
-              <div className="formGroup">
-                <label className="formLabel">City</label>
-                <input
-                  name="City"
-                  className="formControl"
-                  placeholder="Enter city"
-                  value={account.City || ""}
-                  onChange={handleChange}
-                />
-              </div>
-
-              <div className="formGroup">
-                <label className="formLabel">State / Province</label>
-                <input
-                  name="State"
-                  className="formControl"
-                  placeholder="State"
-                  value={account.State || ""}
-                  onChange={handleChange}
-                />
-              </div>
-
-              <div className="formGroup">
-                <label className="formLabel">Zip/Postal Code</label>
-                <input
-                  name="Zip"
-                  className="formControl"
-                  placeholder="Zip code"
-                  value={account.Zip || ""}
-                  onChange={handleChange}
-                />
-              </div>
-
-              <div className="formGroup">
-                <label className="formLabel">Country</label>
-                <select
-                  name="Country"
-                  className="formControl"
-                  value={account.Country || "US"}
-                  onChange={handleChange}
-                >
-                  <option value="">Select Country</option>
-                  <option value="US">United States</option>
-                </select>
-              </div>
-            </div>
-          </section>
-
-          <hr />
-
-          {/* SUBMIT */}
-          <div className="formActions">
-            <div className="formNote">
-              All fields marked with <span className="required">*</span> are required.
-            </div>
-            <button className="btnPrimary" type="submit" disabled={loading}>
-              {loading ? "Saving..." : isEdit ? "Update Account" : "Create Account"}
-            </button>
-          </div>
-
-        </form>
-      </div>
-    </div>
-  );
-};
-
-export default AccountFormPage;
diff --git a/src/pages/accounts/list/Delete.js b/src/pages/accounts/list/Delete.js
deleted file mode 100644
index 394ae1a9..00000000
--- a/src/pages/accounts/list/Delete.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { deleteContact } from "./api";
-
-export default function DeleteModal({ open, item, onClose, onSuccess }) {
-  if(!open) return null;
-  const handleDelete=()=>{ deleteContact(item.id).then(()=>onSuccess()); };
-  return (
-    <div className="modalRoot">
-      <div className="modalScrim" onClick={onClose}/>
-      <div className="modalCard">
-        <div className="modalHeader"><div className="modalTitle">Delete Item?</div><button onClick={onClose}>✕</button></div>
-        <div className="modalBody">
-          <div>Are you sure you want to delete this contact?</div>
-          <div className="modalActions">
-            <button onClick={onClose}>Cancel</button>
-            <button onClick={handleDelete}>Delete</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/accounts/list/Form.js b/src/pages/accounts/list/Form.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/pages/accounts/list/List.js b/src/pages/accounts/list/List.js
deleted file mode 100644
index 3fa973ba..00000000
--- a/src/pages/accounts/list/List.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import usePaginatedList from "../../../hooks/usePaginatedList";
-import { fetchAccountsPaged } from "./api";
-import Table from "./Table";
-import DeleteModal from "../../../components/DeleteModal";
-import ActionBar from "../../../components/ActionBar";
-import { deleteAccount } from "../api";
-import "./styles.css";
-
-export default function AccountList() {
-  const navigate = useNavigate();
-  const { rows, search, setSearch, page, setPage, pageSize, setPageSize, totalCount, loading, err, reload } = usePaginatedList(fetchAccountsPaged);
-  const [deleteModal, setDeleteModal] = useState({ isOpen: false, item: null, loading: false });
-  const [viewMode, setViewMode] = useState("list");
-  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
-
-  const handleDeleteClick = (item) => {
-    setDeleteModal({ isOpen: true, item, loading: false });
-  };
-
-  const handleDeleteConfirm = async () => {
-    setDeleteModal(prev => ({ ...prev, loading: true }));
-    try {
-      await deleteAccount(deleteModal.item.id);
-      toast.success(`Account deleted successfully!`);
-      setDeleteModal({ isOpen: false, item: null, loading: false });
-      reload();
-    } catch (err) {
-      console.error(err);
-      toast.error("Failed to delete account");
-      setDeleteModal(prev => ({ ...prev, loading: false }));
-    }
-  };
-
-  return (
-    <>
-      <ActionBar
-        moduleName="Accounts"
-        moduleIcon="fa-building"
-        onNew={() => navigate("/accounts/new")}
-        onBulkEdit={() => console.log("Bulk edit")}
-        selectedCount={0}
-      />
-
-      <section className="listPage">
-        <div className="breadcrumb">
-          <span className="breadcrumbItem active">Accounts</span>
-        </div>
-
-        <div className="searchSection">
-          <div className="searchHeader">
-            <h3 className="searchHeading">
-              <span className="fa-stack iconStack">
-                <i className="fa fa-square fa-stack-2x text-primary"></i>
-                <i className="fa fa-building fa-stack-1x fa-inverse"></i>
-              </span>
-              <span>Search for Accounts</span>
-            </h3>
-            <span className="searchSubheading">Use the settings menu to adjust how to filter the list, and which columns to display.</span>
-          </div>
-
-          <div className="searchControls">
-            <div className="searchLeft">
-              <div className="searchInputGroup">
-                <select className="searchDropdown" defaultValue="Name">
-                  <option>Name</option>
-                  <option>Account Owner</option>
-                  <option>Email</option>
-                  <option>Phone</option>
-                </select>
-                <input
-                  className="searchInput"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Enter search criteria here..."
-                />
-                <button className="searchButton">Search!</button>
-              </div>
-              <div className="viewToggle">
-                <button
-                  className={`viewBtn ${viewMode === "list" ? "active" : ""}`}
-                  title="List view"
-                  onClick={() => setViewMode("list")}
-                >
-                  <i className="fa fa-navicon"></i>
-                </button>
-                <button
-                  className={`viewBtn ${viewMode === "card" ? "active" : ""}`}
-                  title="Card view"
-                  onClick={() => setViewMode("card")}
-                >
-                  <i className="fa fa-th-large"></i>
-                </button>
-              </div>
-            </div>
-
-            <div className="searchRight">
-              <div className="paginationTop">
-                <button
-                  className="pageBtn"
-                  disabled={page === 1}
-                  onClick={() => setPage(page - 1)}
-                >
-                  «
-                </button>
-                <span className="pageNumber">{page}</span>
-                <button
-                  className="pageBtn"
-                  disabled={page >= totalPages}
-                  onClick={() => setPage(page + 1)}
-                >
-                  »
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <Table loading={loading} error={err} rows={rows}
-          onEdit={(item) => navigate(`/accounts/edit/${item.id}`)}
-          onDelete={handleDeleteClick}
-          page={page} setPage={setPage} pageSize={pageSize} setPageSize={setPageSize}
-          totalCount={totalCount} totalPages={totalPages} />
-
-        <DeleteModal
-          isOpen={deleteModal.isOpen}
-          onClose={() => setDeleteModal({ isOpen: false, item: null, loading: false })}
-          onConfirm={handleDeleteConfirm}
-          title="Delete Account"
-          message={`Are you sure you want to delete "${deleteModal.item?.name}"? This action cannot be undone.`}
-          loading={deleteModal.loading}
-        />
-      </section>
-    </>
-  );
-}
diff --git a/src/pages/accounts/list/Table.js b/src/pages/accounts/list/Table.js
deleted file mode 100644
index 987d4f54..00000000
--- a/src/pages/accounts/list/Table.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import SharedTable from "../../../components/SharedTable";
-
-export default function Table({ loading, error, rows, onEdit, onDelete,
-  page, setPage, pageSize, setPageSize, totalCount, totalPages }) {
-  
-  const columns = [
-    { key: "name", label: "Name", render: (val, row) => <strong><a href="#" onClick={(e) => { e.preventDefault(); onEdit && onEdit(row); }}>{val}</a></strong> },
-    { key: "email", label: "Email" },
-    { key: "phone", label: "Phone" },
-    { key: "owner", label: "Owner" },
-    { key: "status", label: "Status" },
-  ];
-
-  return (
-    <SharedTable
-      rows={rows}
-      columns={columns}
-      onEdit={onEdit}
-      onDelete={onDelete}
-      page={page}
-      setPage={setPage}
-      pageSize={pageSize}
-      setPageSize={setPageSize}
-      totalCount={totalCount}
-      loading={loading}
-      error={error}
-    />
-  );
-}
diff --git a/src/pages/accounts/list/api.js b/src/pages/accounts/list/api.js
deleted file mode 100644
index b5be4008..00000000
--- a/src/pages/accounts/list/api.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { get } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const fetchAccountsPaged = async ({ search = "", page = 1, pageSize = 12 }) => {
-  const res = await get(`${API_URL}/Account/GetAccountList?search=${encodeURIComponent(search)}&page=${page}&pageSize=${pageSize}`);
-  const rows = (res?.data || res?.Data || []).map(x => ({
-    id: x.id ?? x.Id,
-    name: x.name ?? x.Name ?? x.AccountName ?? "",
-    number: x.number ?? x.AccountNumber ?? "",
-    industry: x.industry ?? x.Industry ?? "",
-    website: x.website ?? x.Website ?? "",
-    primaryContact: x.primaryContact ?? x.PrimaryContact ?? "",
-    phoneNumber: x.phoneNumber ?? x.Phone ?? x.PhoneNumber ?? "",
-    owner: x.owner ?? x.Owner ?? "",
-  }));
-  return {
-    rows,
-    page: res?.pageNumber ?? 1,
-    pageSize: res?.pageSize ?? pageSize,
-    totalCount: res?.totalCount ?? rows.length,
-    totalPages: res?.totalPages ?? 1,
-  };
-};
-
-export const deleteAccount = (id) =>
-  get(`${API_URL}/Account/DeleteAccount?id=${id}`);
diff --git a/src/pages/accounts/list/styles.css b/src/pages/accounts/list/styles.css
deleted file mode 100644
index 9a850ae8..00000000
--- a/src/pages/accounts/list/styles.css
+++ /dev/null
@@ -1,231 +0,0 @@
-/* Modal styles for Accounts module */
-.modalRoot{position:fixed;inset:0;z-index:1000;}
-.modalScrim{position:absolute;inset:0;background:rgba(0,0,0,.3);}
-.modalCard{position:relative;margin:10% auto;padding:20px;background:#fff;width:400px;}
-
-/* Override listPage padding for this module */
-.listPage {
-  padding: 0 !important;
-  background: white !important;
-  min-height: auto !important;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  background: white;
-  padding: 10px 20px;
-  margin: 0;
-  border-bottom: 1px solid #e5e5e5;
-  font-size: 13px;
-}
-
-.breadcrumbItem {
-  color: #333;
-}
-
-.breadcrumbItem.active {
-  cursor: default;
-  font-weight: bold;
-  color: #00a0d1;
-}
-
-/* Search Section Styles */
-.searchSection {
-  background: white;
-  padding: 20px;
-  margin-bottom: 0;
-  border-bottom: 1px solid #e5e5e5;
-  position: relative;
-  z-index: 1;
-}
-
-.searchHeader {
-  margin-bottom: 20px;
-}
-
-.searchHeading {
-  font-size: 24px;
-  font-weight: 300;
-  margin: 0 0 8px 0;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.iconStack {
-  font-size: 0.9em;
-}
-
-.text-primary {
-  color: #0088cc;
-}
-
-.fa-inverse {
-  color: white;
-}
-
-.searchSubheading {
-  color: #666;
-  font-size: 14px;
-  display: block;
-  margin-left: 45px;
-}
-
-.searchControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 20px;
-}
-
-.searchLeft {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  flex: 1;
-}
-
-.searchInputGroup {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  flex: 1;
-  max-width: 600px;
-}
-
-.searchDropdown {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  background: white;
-  font-size: 14px;
-  min-width: 120px;
-}
-
-.searchInput {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-left: none;
-  border-right: 1px solid #ccc;
-  flex: 1;
-  font-size: 14px;
-  outline: none;
-}
-
-.searchInput:focus {
-  border-color: #66afe9;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-}
-
-.searchButton {
-  height: 38px;
-  padding: 6px 20px;
-  background: #0088cc;
-  color: white;
-  border: 1px solid #0088cc;
-  border-radius: 0 4px 4px 0;
-  font-size: 14px;
-  cursor: pointer;
-  white-space: nowrap;
-  margin-left: 20px;
-}
-
-.searchButton:hover {
-  background: #0077b3;
-  border-color: #0077b3;
-}
-
-.viewToggle {
-  display: flex;
-  border: 1px solid #0088cc;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.viewBtn {
-  width: 40px;
-  height: 38px;
-  background: white;
-  border: none;
-  border-right: 1px solid #0088cc;
-  color: #0088cc;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.viewBtn:last-child {
-  border-right: none;
-}
-
-.viewBtn.active {
-  background: #0088cc;
-  color: white;
-}
-
-.viewBtn:hover:not(.active) {
-  background: #e6f2f8;
-}
-
-.searchRight {
-  display: flex;
-  align-items: center;
-}
-
-.paginationTop {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 0;
-}
-
-.pageBtn {
-  width: 35px;
-  height: 36px;
-  background: white;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  color: #0088cc;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pageBtn:hover:not(:disabled) {
-  background: #e6f2f8;
-}
-
-.pageBtn:disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-
-.pageNumber {
-  min-width: 35px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #0088cc;
-  color: white;
-  font-size: 14px;
-  border-left: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-}
-
-/* Table wrapper */
-.tableContainer {
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 0;
-  margin: 0;
-}
diff --git a/src/pages/accounts/new/api.js b/src/pages/accounts/new/api.js
deleted file mode 100644
index 80a4ade5..00000000
--- a/src/pages/accounts/new/api.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { post } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const addAccount = (data) =>
-  post(`${API_URL}/Account/AddAccount`, data);
diff --git a/src/pages/assets/form/AssetFormPage.js b/src/pages/assets/form/AssetFormPage.js
deleted file mode 100644
index 9a8498f8..00000000
--- a/src/pages/assets/form/AssetFormPage.js
+++ /dev/null
@@ -1,290 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import {
-  Box,
-  Button,
-  TextField,
-  Typography,
-  Paper,
-  Grid,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  FormControlLabel,
-  Switch,
-  CircularProgress,
-  Alert,
-} from "@mui/material";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import SaveIcon from "@mui/icons-material/Save";
-import { get, post } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-const AssetFormPage = () => {
-  const navigate = useNavigate();
-  const { id } = useParams();
-  const isEdit = Boolean(id);
-
-  const [formData, setFormData] = useState({
-    assetCode: "",
-    name: "",
-    description: "",
-    accountId: "",
-    locationId: "",
-    isActive: true,
-  });
-
-  const [accounts, setAccounts] = useState([]);
-  const [locations, setLocations] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [loadingData, setLoadingData] = useState(false);
-
-  // Load accounts and locations for dropdowns
-  useEffect(() => {
-    const loadDropdownData = async () => {
-      try {
-        // Fetch accounts
-        const accountsRes = await get(`${API_URL}/Account/GetAccountList?pageSize=1000`);
-        const accountsData = accountsRes?.data || accountsRes?.Data || [];
-        setAccounts(accountsData);
-
-        // Fetch locations - using full API path
-        const locationsRes = await get(`/Common/GetSitesName`);
-        // Handle both array response and wrapped response
-        const locationsData = Array.isArray(locationsRes) ? locationsRes : (locationsRes?.data || locationsRes?.Data || []);
-        setLocations(locationsData);
-      } catch (err) {
-        console.error("Failed to load dropdown data:", err);
-        setError("Failed to load dropdown options");
-      }
-    };
-
-    loadDropdownData();
-  }, []);
-
-  // Load asset data if editing
-  useEffect(() => {
-    if (isEdit && id) {
-      const loadAsset = async () => {
-        setLoadingData(true);
-        try {
-          const asset = await get(`${API_URL}/Asset/GetAssetById?id=${id}`);
-          if (asset) {
-            // Handle both camelCase and PascalCase from backend
-            setFormData({
-              assetCode: asset.assetCode || asset.AssetCode || "",
-              name: asset.name || asset.Name || "",
-              description: asset.description || asset.Description || "",
-              accountId: asset.accountId || asset.AccountId || "",
-              locationId: asset.locationId || asset.LocationId || "",
-              isActive: asset.isActive ?? asset.IsActive ?? true,
-            });
-          }
-        } catch (err) {
-          console.error("Failed to load asset:", err);
-          setError("Failed to load asset data");
-        } finally {
-          setLoadingData(false);
-        }
-      };
-
-      loadAsset();
-    }
-  }, [isEdit, id]);
-
-  const handleChange = (e) => {
-    const { name, value, checked } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: name === "isActive" ? checked : value,
-    }));
-  };
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-    setError(null);
-
-    try {
-      const endpoint = isEdit ? "EditAsset" : "AddAsset";
-
-      // Prepare payload with proper data types
-      const payload = {
-        assetCode: formData.assetCode,
-        name: formData.name,
-        description: formData.description || null,
-        accountId: formData.accountId ? parseInt(formData.accountId) : null,
-        locationId: formData.locationId ? parseInt(formData.locationId) : null,
-        isActive: formData.isActive,
-      };
-
-      // Add id for edit
-      if (isEdit) {
-        payload.id = parseInt(id);
-      }
-
-      await post(`${API_URL}/Asset/${endpoint}`, payload);
-      navigate("/assets");
-    } catch (err) {
-      console.error("Failed to save asset:", err);
-      setError(err.message || "Failed to save asset");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (loadingData) {
-    return (
-      <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
-        <CircularProgress />
-      </Box>
-    );
-  }
-
-  return (
-    <Box sx={{ p: 3 }}>
-      <Button
-        startIcon={<ArrowBackIcon />}
-        onClick={() => navigate("/assets")}
-        sx={{ mb: 2 }}
-      >
-        Back to Assets
-      </Button>
-
-      <Paper sx={{ p: 3 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
-          {isEdit ? "Edit Asset" : "Create New Asset"}
-        </Typography>
-
-        {error && (
-          <Alert severity="error" sx={{ mb: 2 }}>
-            {error}
-          </Alert>
-        )}
-
-        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 3 }}>
-          <Grid container spacing={3}>
-            <Grid item xs={12} md={6}>
-              <TextField
-                fullWidth
-                required
-                label="Asset Code"
-                name="assetCode"
-                value={formData.assetCode}
-                onChange={handleChange}
-                placeholder="Enter asset code"
-              />
-            </Grid>
-
-            <Grid item xs={12} md={6}>
-              <TextField
-                fullWidth
-                required
-                label="Name"
-                name="name"
-                value={formData.name}
-                onChange={handleChange}
-                placeholder="Enter asset name"
-              />
-            </Grid>
-
-            <Grid item xs={12}>
-              <TextField
-                fullWidth
-                multiline
-                rows={3}
-                label="Description"
-                name="description"
-                value={formData.description}
-                onChange={handleChange}
-                placeholder="Enter asset description"
-              />
-            </Grid>
-
-            <Grid item xs={12} md={6}>
-              <FormControl fullWidth>
-                <InputLabel>Account</InputLabel>
-                <Select
-                  name="accountId"
-                  value={formData.accountId}
-                  onChange={handleChange}
-                  label="Account"
-                >
-                  <MenuItem value="">
-                    <em>None</em>
-                  </MenuItem>
-                  {accounts.map((account) => (
-                    <MenuItem key={account.id} value={account.id}>
-                      {account.name}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-            </Grid>
-
-            <Grid item xs={12} md={6}>
-              <FormControl fullWidth>
-                <InputLabel>Location</InputLabel>
-                <Select
-                  name="locationId"
-                  value={formData.locationId}
-                  onChange={handleChange}
-                  label="Location"
-                >
-                  <MenuItem value="">
-                    <em>None</em>
-                  </MenuItem>
-                  {locations.map((location) => (
-                    <MenuItem key={location.id} value={location.id}>
-                      {location.title} - {location.name}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-            </Grid>
-
-            <Grid item xs={12}>
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={formData.isActive}
-                    onChange={handleChange}
-                    name="isActive"
-                    color="primary"
-                  />
-                }
-                label="Active"
-              />
-            </Grid>
-
-            <Grid item xs={12}>
-              <Box sx={{ display: "flex", gap: 2, justifyContent: "flex-end" }}>
-                <Button
-                  variant="outlined"
-                  onClick={() => navigate("/assets")}
-                  disabled={loading}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  type="submit"
-                  variant="contained"
-                  color="primary"
-                  startIcon={<SaveIcon />}
-                  disabled={loading}
-                >
-                  {loading ? "Saving..." : isEdit ? "Update Asset" : "Create Asset"}
-                </Button>
-              </Box>
-            </Grid>
-          </Grid>
-        </Box>
-      </Paper>
-    </Box>
-  );
-};
-
-export default AssetFormPage;
-
diff --git a/src/pages/assets/list/Delete.js b/src/pages/assets/list/Delete.js
deleted file mode 100644
index 9e4da221..00000000
--- a/src/pages/assets/list/Delete.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Button,
-  Typography,
-} from "@mui/material";
-
-const DeleteDialog = ({ open, onClose, onConfirm, itemName }) => {
-  return (
-    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
-      <DialogTitle>Confirm Delete</DialogTitle>
-      <DialogContent>
-        <Typography>
-          Are you sure you want to delete the asset <strong>{itemName}</strong>?
-        </Typography>
-        <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
-          This action cannot be undone.
-        </Typography>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={onClose} color="inherit">
-          Cancel
-        </Button>
-        <Button onClick={onConfirm} color="error" variant="contained">
-          Delete
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default DeleteDialog;
-
diff --git a/src/pages/assets/list/List.js b/src/pages/assets/list/List.js
deleted file mode 100644
index 145794c3..00000000
--- a/src/pages/assets/list/List.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import {
-  Box,
-  Button,
-  TextField,
-  Typography,
-  CircularProgress,
-  Alert,
-  Pagination,
-  InputAdornment,
-} from "@mui/material";
-import AddIcon from "@mui/icons-material/Add";
-import SearchIcon from "@mui/icons-material/Search";
-import AssetsTable from "./Table";
-import DeleteDialog from "./Delete";
-import { useItems } from "./useItems";
-import { deleteAsset } from "./api";
-
-const AssetsList = () => {
-  const navigate = useNavigate();
-  const {
-    items,
-    loading,
-    error,
-    page,
-    totalPages,
-    search,
-    handleSearch,
-    handlePageChange,
-    reload,
-  } = useItems();
-
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [itemToDelete, setItemToDelete] = useState(null);
-  const [searchInput, setSearchInput] = useState(search);
-
-  const handleDeleteClick = (id) => {
-    const item = items.find((i) => i.id === id);
-    setItemToDelete(item);
-    setDeleteDialogOpen(true);
-  };
-
-  const handleDeleteConfirm = async () => {
-    if (!itemToDelete) return;
-
-    try {
-      await deleteAsset(itemToDelete.id);
-      setDeleteDialogOpen(false);
-      setItemToDelete(null);
-      reload();
-    } catch (err) {
-      console.error("Failed to delete asset:", err);
-      alert("Failed to delete asset. Please try again.");
-    }
-  };
-
-  const handleSearchSubmit = (e) => {
-    e.preventDefault();
-    handleSearch(searchInput);
-  };
-
-  return (
-    <Box sx={{ p: 3 }}>
-      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 3 }}>
-        <Typography variant="h4" component="h1">
-          Assets
-        </Typography>
-        <Button
-          variant="contained"
-          color="primary"
-          startIcon={<AddIcon />}
-          onClick={() => navigate("/assets/new")}
-        >
-          New Asset
-        </Button>
-      </Box>
-
-      <Box component="form" onSubmit={handleSearchSubmit} sx={{ mb: 3 }}>
-        <TextField
-          fullWidth
-          placeholder="Search assets by name, code, or description..."
-          value={searchInput}
-          onChange={(e) => setSearchInput(e.target.value)}
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <SearchIcon />
-              </InputAdornment>
-            ),
-          }}
-        />
-      </Box>
-
-      {error && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {error}
-        </Alert>
-      )}
-
-      {loading ? (
-        <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
-          <CircularProgress />
-        </Box>
-      ) : (
-        <>
-          <AssetsTable items={items} onDelete={handleDeleteClick} />
-
-          {totalPages > 1 && (
-            <Box sx={{ display: "flex", justifyContent: "center", mt: 3 }}>
-              <Pagination
-                count={totalPages}
-                page={page}
-                onChange={(e, value) => handlePageChange(value)}
-                color="primary"
-              />
-            </Box>
-          )}
-        </>
-      )}
-
-      <DeleteDialog
-        open={deleteDialogOpen}
-        onClose={() => setDeleteDialogOpen(false)}
-        onConfirm={handleDeleteConfirm}
-        itemName={itemToDelete?.name || ""}
-      />
-    </Box>
-  );
-};
-
-export default AssetsList;
-
diff --git a/src/pages/assets/list/Table.js b/src/pages/assets/list/Table.js
deleted file mode 100644
index fb88ab05..00000000
--- a/src/pages/assets/list/Table.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Paper,
-  IconButton,
-  Chip,
-} from "@mui/material";
-import EditIcon from "@mui/icons-material/Edit";
-import DeleteIcon from "@mui/icons-material/Delete";
-
-const AssetsTable = ({ items, onDelete }) => {
-  const navigate = useNavigate();
-
-  const handleEdit = (id) => {
-    navigate(`/assets/edit/${id}`);
-  };
-
-  return (
-    <TableContainer component={Paper}>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell><strong>Asset Code</strong></TableCell>
-            <TableCell><strong>Name</strong></TableCell>
-            <TableCell><strong>Description</strong></TableCell>
-            <TableCell><strong>Account</strong></TableCell>
-            <TableCell><strong>Location</strong></TableCell>
-            <TableCell><strong>Status</strong></TableCell>
-            <TableCell align="right"><strong>Actions</strong></TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {items.length === 0 ? (
-            <TableRow>
-              <TableCell colSpan={7} align="center">
-                No assets found
-              </TableCell>
-            </TableRow>
-          ) : (
-            items.map((item) => (
-              <TableRow key={item.id} hover>
-                <TableCell>{item.assetCode}</TableCell>
-                <TableCell>{item.name}</TableCell>
-                <TableCell>{item.description || "-"}</TableCell>
-                <TableCell>{item.accountName || "-"}</TableCell>
-                <TableCell>{item.locationName || "-"}</TableCell>
-                <TableCell>
-                  <Chip
-                    label={item.isActive ? "Active" : "Inactive"}
-                    color={item.isActive ? "success" : "default"}
-                    size="small"
-                  />
-                </TableCell>
-                <TableCell align="right">
-                  <IconButton
-                    color="primary"
-                    size="small"
-                    onClick={() => handleEdit(item.id)}
-                    title="Edit"
-                  >
-                    <EditIcon />
-                  </IconButton>
-                  <IconButton
-                    color="error"
-                    size="small"
-                    onClick={() => onDelete(item.id)}
-                    title="Delete"
-                  >
-                    <DeleteIcon />
-                  </IconButton>
-                </TableCell>
-              </TableRow>
-            ))
-          )}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-};
-
-export default AssetsTable;
-
diff --git a/src/pages/assets/list/api.js b/src/pages/assets/list/api.js
deleted file mode 100644
index 38d200d3..00000000
--- a/src/pages/assets/list/api.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { get, post } from "../../../apiUtil";
-import { API_URL } from '../../../constants';
-
-
-export const fetchAssetsPaged = async ({ search = "", page = 1, pageSize = 12 }) => {
-  const res = await get(`${API_URL}/Asset/GetAssetList?search=${encodeURIComponent(search)}&page=${page}&pageSize=${pageSize}`);
-  const rows = (res?.data || res?.Data || []).map(x => ({
-    id: x.id || x.Id,
-    assetCode: x.assetCode || x.AssetCode || "",
-    name: x.name || x.Name || "",
-    description: x.description || x.Description || "",
-    isActive: x.isActive ?? x.IsActive ?? true,
-    accountName: x.accountName || x.AccountName || "",
-    locationName: x.locationName || x.LocationName || "",
-  }));
-  return {
-    rows,
-    page: res?.pageNumber || res?.PageNumber || 1,
-    pageSize: res?.pageSize || res?.PageSize || pageSize,
-    totalCount: res?.totalCount || res?.TotalCount || rows.length,
-    totalPages: res?.totalPages || res?.TotalPages || 1,
-  };
-};
-
-
-export const deleteAsset = (id) =>
-  get(`${API_URL}/Asset/DeleteAsset?id=${id}`);
-
diff --git a/src/pages/assets/list/useItems.js b/src/pages/assets/list/useItems.js
deleted file mode 100644
index dbfe01cf..00000000
--- a/src/pages/assets/list/useItems.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import { fetchAssetsPaged } from "./api";
-
-export const useItems = () => {
-  const [items, setItems] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
-  const [totalCount, setTotalCount] = useState(0);
-  const [totalPages, setTotalPages] = useState(1);
-  const [search, setSearch] = useState("");
-
-  const loadItems = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const data = await fetchAssetsPaged({ search, page, pageSize });
-      setItems(data.rows);
-      setTotalCount(data.totalCount);
-      setTotalPages(data.totalPages);
-    } catch (err) {
-      setError(err.message || "Failed to load assets");
-      setItems([]);
-    } finally {
-      setLoading(false);
-    }
-  }, [search, page, pageSize]);
-
-  useEffect(() => {
-    loadItems();
-  }, [loadItems]);
-
-  const handleSearch = (newSearch) => {
-    setSearch(newSearch);
-    setPage(1);
-  };
-
-  const handlePageChange = (newPage) => {
-    setPage(newPage);
-  };
-
-  const handlePageSizeChange = (newPageSize) => {
-    setPageSize(newPageSize);
-    setPage(1);
-  };
-
-  return {
-    items,
-    loading,
-    error,
-    page,
-    pageSize,
-    totalCount,
-    totalPages,
-    search,
-    handleSearch,
-    handlePageChange,
-    handlePageSizeChange,
-    reload: loadItems,
-  };
-};
-
diff --git a/src/pages/auth/LoginPage.css b/src/pages/auth/LoginPage.css
deleted file mode 100644
index e20ac8da..00000000
--- a/src/pages/auth/LoginPage.css
+++ /dev/null
@@ -1,190 +0,0 @@
-/* Login Page Styles - Matching Legacy Officetrax Design */
-
-.loginPage {
-  min-height: 100vh;
-  /* background-image set via inline style in JSX */
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-color: #333;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  padding: 0;
-  margin: 0;
-}
-
-.login-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  margin-top: 7%;
-  padding: 0 15px;
-}
-
-.login-container {
-  width: 100%;
-  max-width: 400px;
-}
-
-.login-panel {
-  background-color: white;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-  border-radius: 0;
-  overflow: hidden;
-}
-
-.login-branding {
-  height: 140px;
-  background-color: #FFFFFF;
-  margin: 0;
-  border-bottom: solid 1px #b8b5b5;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* background-image set via inline style in JSX */
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: auto 80%;
-  padding: 20px;
-}
-
-.login-header {
-  background-color: #003A5D;
-  border-bottom: solid 1px #b8b5b5;
-  height: 40px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.login-header h5 {
-  margin: 0;
-  padding: 0;
-  color: white;
-  font-size: 14px;
-  font-weight: bold;
-  line-height: 1;
-  text-align: center;
-}
-
-.login-body {
-  background-color: white;
-  padding: 30px 30px 20px;
-}
-
-.login-form .form-group {
-  margin-bottom: 30px;
-}
-
-.login-form .form-group:last-of-type {
-  margin-bottom: 0;
-}
-
-.login-form .form-control {
-  width: 100%;
-  height: 40px;
-  font-size: 14px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 6px 12px;
-  box-sizing: border-box;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-
-.login-form .form-control:focus {
-  border-color: #66afe9;
-  outline: 0;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
-}
-
-.login-form .form-control::placeholder {
-  color: #999;
-}
-
-.button-content {
-  margin-top: 30px;
-  text-align: center;
-}
-
-.login-button {
-  background: #003A5D;
-  color: white;
-  width: 250px;
-  height: 40px;
-  font-size: 14px;
-  font-weight: normal;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  display: inline-block;
-}
-
-.login-button:hover {
-  background: #00527d;
-}
-
-.login-button:disabled {
-  background: #6c757d;
-  cursor: not-allowed;
-  opacity: 0.65;
-}
-
-.forgot-password {
-  text-align: center;
-  margin-top: 15px;
-  margin-bottom: 0;
-}
-
-.forgot-password a {
-  color: black;
-  font-weight: bold;
-  text-decoration: none;
-  font-size: 13px;
-}
-
-.forgot-password a:hover {
-  text-decoration: underline;
-}
-
-.error-message {
-  color: #dc3545;
-  font-size: 13px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  text-align: center;
-}
-
-.login-footer {
-  text-align: center;
-  margin-top: 20px;
-  padding: 0 15px;
-}
-
-.login-footer a {
-  color: white;
-  text-decoration: none;
-  margin: 0 3px;
-  font-size: 13px;
-}
-
-.login-footer a:hover {
-  text-decoration: underline;
-}
-
-.copyright {
-  text-align: center;
-  color: white;
-  font-size: 12px;
-  margin-top: 15px;
-  padding-bottom: 20px;
-}
-
-.copyright em {
-  font-style: italic;
-}
-
diff --git a/src/pages/auth/LoginPage.js b/src/pages/auth/LoginPage.js
deleted file mode 100644
index 4f7496e9..00000000
--- a/src/pages/auth/LoginPage.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useAuth } from "../../hooks/useAuth";
-import styles from "./LoginPage.module.css";
-
-export default function LoginPage() {
-  const navigate = useNavigate();
-  const { login: performLogin, loading, error: authError } = useAuth();
-
-  const [formData, setFormData] = useState({
-    username: "",
-    password: "",
-  });
-  const [error, setError] = useState("");
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-    setError(""); // Clear error when user types
-  };
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError("");
-
-    try {
-      // Use Redux auth hook - automatically handles success/error and navigation
-      performLogin(formData);
-    } catch (err) {
-      console.error("Login error:", err);
-      setError("You have entered an invalid username or password");
-    }
-  };
-
-  return (
-    <div
-      className={styles.page}
-      style={{
-        backgroundImage: `url(${process.env.PUBLIC_URL}/BrandingImage.png)`
-      }}
-    >
-      <div className={styles.wrapper}>
-        <div className={styles.container}>
-          <div className={styles.panel}>
-            {/* Logo Area */}
-            <div
-              className={styles.branding}
-              style={{
-                backgroundImage: `url(${process.env.PUBLIC_URL}/logo.png)`
-              }}
-            ></div>
-
-            {/* Header */}
-            <div className={styles.header}>
-              <h5>User Login</h5>
-            </div>
-
-            {/* Login Form */}
-            <div className={styles.body}>
-              <form onSubmit={handleSubmit} className={styles.form} autoComplete="off">
-                <div className={styles.formGroup}>
-                  <input
-                    type="email"
-                    className={styles.formControl}
-                    id="username"
-                    name="username"
-                    placeholder="Username"
-                    value={formData.username}
-                    onChange={handleChange}
-                    required
-                    autoComplete="off"
-                  />
-                </div>
-
-                <div className={styles.formGroup}>
-                  <input
-                    type="password"
-                    className={styles.formControl}
-                    id="password"
-                    name="password"
-                    placeholder="Password"
-                    value={formData.password}
-                    onChange={handleChange}
-                    required
-                    autoComplete="new-password"
-                  />
-                </div>
-
-                {(error || authError) && <div className={styles.errorMessage}>{error || authError}</div>}
-
-                <div className={styles.buttonContent}>
-                  <button
-                    type="submit"
-                    className={styles.button}
-                    disabled={loading}
-                  >
-                    {loading ? "Logging in..." : "Log in"}
-                  </button>
-                </div>
-              </form>
-
-              <p className={styles.forgotPassword}>
-                <a href="/forgot-password">Forgot your password?</a>
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Footer Links */}
-        <p className={styles.footer}>
-          <a href="https://www.officetrax.com" target="_blank" rel="noopener noreferrer">
-            www.officetrax.com
-          </a>
-          {" · "}
-          <a href="https://www.officetrax.com/Legal/TermsOfService" target="_blank" rel="noopener noreferrer">
-            Terms of Service
-          </a>
-          {" · "}
-          <a href="https://www.officetrax.com/Legal/PrivacyPolicy" target="_blank" rel="noopener noreferrer">
-            Privacy Policy
-          </a>
-        </p>
-      </div>
-
-      {/* Copyright */}
-      <p className={styles.copyright}>
-        ©2026 <em>Core 7 Technologies Inc.</em> All rights reserved.
-      </p>
-    </div>
-  );
-}
-
diff --git a/src/pages/auth/LoginPage.module.css b/src/pages/auth/LoginPage.module.css
deleted file mode 100644
index dc60251d..00000000
--- a/src/pages/auth/LoginPage.module.css
+++ /dev/null
@@ -1,188 +0,0 @@
-/* Login Page Styles - Matching Legacy Officetrax Design */
-/* CSS Module - All classes are automatically scoped */
-
-.page {
-  min-height: 100vh;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-color: #333;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  padding: 0;
-  margin: 0;
-}
-
-.wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  margin-top: 7%;
-  padding: 0 15px;
-}
-
-.container {
-  width: 100%;
-  max-width: 400px;
-}
-
-.panel {
-  background-color: white;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-  border-radius: 0;
-  overflow: hidden;
-}
-
-.branding {
-  height: 140px;
-  background-color: #FFFFFF;
-  margin: 0;
-  border-bottom: solid 1px #b8b5b5;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: auto 80%;
-  padding: 20px;
-}
-
-.header {
-  background-color: #003A5D;
-  border-bottom: solid 1px #b8b5b5;
-  height: 40px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.header h5 {
-  margin: 0;
-  padding: 0;
-  color: white;
-  font-size: 14px;
-  font-weight: bold;
-  line-height: 1;
-  text-align: center;
-}
-
-.body {
-  background-color: white;
-  padding: 30px 30px 20px;
-}
-
-.form .formGroup {
-  margin-bottom: 30px;
-}
-
-.form .formGroup:last-of-type {
-  margin-bottom: 0;
-}
-
-.formControl {
-  width: 100%;
-  height: 40px;
-  font-size: 14px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 6px 12px;
-  box-sizing: border-box;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-
-.formControl:focus {
-  border-color: #66afe9;
-  outline: 0;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
-}
-
-.formControl::placeholder {
-  color: #999;
-}
-
-.buttonContent {
-  margin-top: 30px;
-  text-align: center;
-}
-
-.button {
-  background: #003A5D;
-  color: white;
-  width: 250px;
-  height: 40px;
-  font-size: 14px;
-  font-weight: normal;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  display: inline-block;
-}
-
-.button:hover {
-  background: #00527d;
-}
-
-.button:disabled {
-  background: #6c757d;
-  cursor: not-allowed;
-  opacity: 0.65;
-}
-
-.forgotPassword {
-  text-align: center;
-  margin-top: 15px;
-  margin-bottom: 0;
-}
-
-.forgotPassword a {
-  color: black;
-  font-weight: bold;
-  text-decoration: none;
-  font-size: 13px;
-}
-
-.forgotPassword a:hover {
-  text-decoration: underline;
-}
-
-.errorMessage {
-  color: #dc3545;
-  font-size: 13px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  text-align: center;
-}
-
-.footer {
-  text-align: center;
-  margin-top: 20px;
-  padding: 0 15px;
-}
-
-.footer a {
-  color: white;
-  text-decoration: none;
-  margin: 0 3px;
-  font-size: 13px;
-}
-
-.footer a:hover {
-  text-decoration: underline;
-}
-
-.copyright {
-  text-align: center;
-  color: white;
-  font-size: 12px;
-  margin-top: 15px;
-  padding-bottom: 20px;
-}
-
-.copyright em {
-  font-style: italic;
-}
diff --git a/src/pages/calendar/api.js b/src/pages/calendar/api.js
deleted file mode 100644
index 15f741a1..00000000
--- a/src/pages/calendar/api.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import { get, post } from "../../apiUtil";
-import { getAccessToken } from "../../tokenUtility";
-import { API_URL } from "../../constants";
-
-// Fetch events for calendar view (with date range)
-export async function fetchEventsForCalendar(start, end) {
-  const params = new URLSearchParams();
-  if (start) params.append("start", start.toISOString());
-  if (end) params.append("end", end.toISOString());
-  
-  const response = await get(`${API_URL}/Calendar/GetEventsForCalendar?${params.toString()}`);
-  return response?.data || response?.Data || [];
-}
-
-// Fetch events with pagination
-export async function fetchEventsPaged({ search = "", page = 1, pageSize = 12 }) {
-  const params = new URLSearchParams();
-  if (search) params.append("search", search);
-  params.append("page", page.toString());
-  params.append("pageSize", pageSize.toString());
-
-  const response = await get(`${API_URL}/Calendar/GetEventList?${params.toString()}`);
-
-  const data = response?.data || response?.Data || {};
-  return {
-    rows: data.rows || [],
-    totalCount: data.totalCount || 0,
-  };
-}
-
-// Get single event by ID
-export async function getEventById(id) {
-  const response = await get(`${API_URL}/Calendar/GetEventById/${id}`);
-  const event = response?.data || response?.Data;
-  
-  // Handle both camelCase and PascalCase
-  if (event) {
-    return {
-      id: event.id || event.Id,
-      title: event.title || event.Title || "",
-      description: event.description || event.Description || "",
-      location: event.location || event.Location || "",
-      recordID: event.recordID || event.RecordID || null,
-      recordName: event.recordName || event.RecordName || "",
-      recordTargetType: event.recordTargetType || event.RecordTargetType || "",
-      reminderMinutes: event.reminderMinutes || event.ReminderMinutes || 15,
-      eventColor: event.eventColor || event.EventColor || "primary",
-      startDate: event.startDate || event.StartDate || "",
-      startTime: event.startTime || event.StartTime || "",
-      endDate: event.endDate || event.EndDate || "",
-      endTime: event.endTime || event.EndTime || "",
-      allDay: event.allDay || event.AllDay || false,
-    };
-  }
-  return null;
-}
-
-// Create new event
-export async function addEvent(eventData) {
-  const response = await post(`${API_URL}/Calendar/AddEvent`, {
-    Title: eventData.title,
-    Description: eventData.description,
-    Location: eventData.location,
-    RecordID: eventData.recordID,
-    RecordName: eventData.recordName,
-    RecordTargetType: eventData.recordTargetType,
-    ReminderMinutes: eventData.reminderMinutes,
-    EventColor: eventData.eventColor,
-    StartDate: eventData.startDate,
-    StartTime: eventData.startTime,
-    EndDate: eventData.endDate,
-    EndTime: eventData.endTime,
-    AllDay: eventData.allDay,
-  });
-  return response;
-}
-
-// Update existing event
-export async function editEvent(eventData) {
-  const response = await post(`${API_URL}/Calendar/EditEvent`, {
-    Id: eventData.id,
-    Title: eventData.title,
-    Description: eventData.description,
-    Location: eventData.location,
-    RecordID: eventData.recordID,
-    RecordName: eventData.recordName,
-    RecordTargetType: eventData.recordTargetType,
-    ReminderMinutes: eventData.reminderMinutes,
-    EventColor: eventData.eventColor,
-    StartDate: eventData.startDate,
-    StartTime: eventData.startTime,
-    EndDate: eventData.endDate,
-    EndTime: eventData.endTime,
-    AllDay: eventData.allDay,
-  });
-  return response;
-}
-
-// Delete event
-export async function deleteEvent(id) {
-  const response = await fetch(`${API_URL}/Calendar/DeleteEvent/${id}`, {
-    method: "DELETE",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: getAccessToken(),
-    },
-  });
-
-  if (!response.ok) {
-    throw new Error("Failed to delete event");
-  }
-
-  return response.json();
-}
-
diff --git a/src/pages/calendar/components/CalendarActionBar.css b/src/pages/calendar/components/CalendarActionBar.css
deleted file mode 100644
index 18b39add..00000000
--- a/src/pages/calendar/components/CalendarActionBar.css
+++ /dev/null
@@ -1,142 +0,0 @@
-.calendarActionBar {
-  background: #f5f5f5;
-  border-bottom: 1px solid #ddd;
-  padding: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: stretch;
-  flex-wrap: wrap;
-  margin-bottom: 0;
-}
-
-.calActionBarNav {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  align-items: stretch;
-}
-
-.calActionBarNavRight {
-  margin-left: auto;
-}
-
-.calActionBarNav li {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.calActionBarLink {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 15px;
-  color: #333;
-  text-decoration: none;
-  font-size: 14px;
-  transition: background-color 0.2s;
-  white-space: nowrap;
-  border: none;
-  background: transparent;
-}
-
-.calActionBarLink:hover {
-  background-color: #e8e8e8;
-  color: #333;
-}
-
-.calActionBarLink i {
-  font-size: 13px;
-  color: #666;
-}
-
-.calActionBarText {
-  font-weight: 400;
-}
-
-/* Dropdown Styles */
-.calActionBarDropdown {
-  position: relative;
-}
-
-.calActionBarDropdown.open .calActionBarLink {
-  background-color: #e0e0e0;
-}
-
-.calActionBarDropdownMenu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  min-width: 180px;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 0 0 4px 4px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  list-style: none;
-  margin: 0;
-  padding: 5px 0;
-}
-
-.calActionBarDropdownMenu li {
-  border: none;
-  display: block;
-}
-
-.calActionBarDropdownMenu li a {
-  display: block;
-  padding: 8px 16px;
-  color: #333;
-  text-decoration: none;
-  font-size: 14px;
-  transition: background-color 0.2s;
-}
-
-.calActionBarDropdownMenu li a:hover {
-  background-color: #f5f5f5;
-  color: #333;
-}
-
-.calActionBarDropdownMenu li.divider {
-  height: 1px;
-  background-color: #e5e5e5;
-  margin: 5px 0;
-  padding: 0;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .calendarActionBar {
-    flex-direction: column;
-  }
-
-  .calActionBarNav {
-    flex-wrap: wrap;
-  }
-
-  .calActionBarNavRight {
-    margin-left: 0;
-  }
-
-  .calActionBarLink {
-    padding: 10px 12px;
-    font-size: 13px;
-  }
-
-  .calActionBarText {
-    display: none;
-  }
-
-  .calActionBarLink i {
-    margin-right: 0;
-  }
-}
-
-@media (min-width: 769px) {
-  /* Show text on larger screens */
-  .calActionBarText {
-    display: inline;
-  }
-}
-
diff --git a/src/pages/calendar/components/CalendarActionBar.js b/src/pages/calendar/components/CalendarActionBar.js
deleted file mode 100644
index 26e1469c..00000000
--- a/src/pages/calendar/components/CalendarActionBar.js
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import "./CalendarActionBar.css";
-
-export default function CalendarActionBar({
-  onWorkspaceChange,
-  onEventTypeChange,
-  onTodayClick,
-  onPrevClick,
-  onNextClick,
-  onViewChange,
-}) {
-  const navigate = useNavigate();
-  const [workspaceOpen, setWorkspaceOpen] = useState(false);
-  const [eventTypeOpen, setEventTypeOpen] = useState(false);
-  const [selectedWorkspace, setSelectedWorkspace] = useState("All");
-  const [selectedEventType, setSelectedEventType] = useState("Events");
-
-  const toggleWorkspace = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setWorkspaceOpen(!workspaceOpen);
-    setEventTypeOpen(false);
-  };
-
-  const toggleEventType = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setEventTypeOpen(!eventTypeOpen);
-    setWorkspaceOpen(false);
-  };
-
-  const handleWorkspaceSelect = (workspace, type) => {
-    setSelectedWorkspace(workspace);
-    setWorkspaceOpen(false);
-    onWorkspaceChange && onWorkspaceChange(type);
-  };
-
-  const handleEventTypeSelect = (eventType, filter) => {
-    setSelectedEventType(eventType);
-    setEventTypeOpen(false);
-    onEventTypeChange && onEventTypeChange(filter);
-  };
-
-  // Close dropdowns when clicking outside
-  useEffect(() => {
-    const handleClickOutside = () => {
-      setWorkspaceOpen(false);
-      setEventTypeOpen(false);
-    };
-
-    if (workspaceOpen || eventTypeOpen) {
-      document.addEventListener("click", handleClickOutside);
-      return () => document.removeEventListener("click", handleClickOutside);
-    }
-  }, [workspaceOpen, eventTypeOpen]);
-
-  return (
-    <div className="calendarActionBar">
-      <ul className="calActionBarNav">
-        {/* Workspace Selector */}
-        <li className={`calActionBarDropdown ${workspaceOpen ? "open" : ""}`}>
-          <a
-            href="#"
-            className="calActionBarLink"
-            onClick={toggleWorkspace}
-            title="Change your workspace"
-          >
-            <i className="fa fa-inbox"></i>
-            <span className="calActionBarText">{selectedWorkspace}</span>
-            <i className="fa fa-angle-down"></i>
-          </a>
-          {workspaceOpen && (
-            <ul className="calActionBarDropdownMenu">
-              <li>
-                <a href="#" onClick={(e) => { e.preventDefault(); handleWorkspaceSelect("All", "All"); }}>
-                  All
-                </a>
-              </li>
-              <li>
-                <a href="#" onClick={(e) => { e.preventDefault(); handleWorkspaceSelect("Everyone else", "EveryoneElse"); }}>
-                  Everyone else
-                </a>
-              </li>
-              <li>
-                <a href="#" onClick={(e) => { e.preventDefault(); handleWorkspaceSelect("Only Me", "OnlyMe"); }}>
-                  Only Me
-                </a>
-              </li>
-              <li className="divider"></li>
-              <li>
-                <a href="#" onClick={(e) => { e.preventDefault(); handleWorkspaceSelect("Custom", "Custom"); }}>
-                  Specific people...
-                </a>
-              </li>
-            </ul>
-          )}
-        </li>
-
-        {/* Event Type Filter */}
-        <li className={`calActionBarDropdown ${eventTypeOpen ? "open" : ""}`}>
-          <a
-            href="#"
-            className="calActionBarLink"
-            onClick={toggleEventType}
-            title="Filter events"
-          >
-            <i className="fa fa-filter"></i>
-            <span className="calActionBarText">{selectedEventType}</span>
-            <i className="fa fa-angle-down"></i>
-          </a>
-          {eventTypeOpen && (
-            <ul className="calActionBarDropdownMenu">
-              <li>
-                <a href="#" onClick={(e) => { e.preventDefault(); handleEventTypeSelect("Events", "EventsOnly"); }}>
-                  Events
-                </a>
-              </li>
-              <li>
-                <a href="#" onClick={(e) => { e.preventDefault(); handleEventTypeSelect("Follow Ups", "FollowUpsOnly"); }}>
-                  Follow Ups
-                </a>
-              </li>
-              <li>
-                <a href="#" onClick={(e) => { e.preventDefault(); handleEventTypeSelect("Work Orders", "WorkOrdersOnly"); }}>
-                  Work Orders
-                </a>
-              </li>
-            </ul>
-          )}
-        </li>
-
-        {/* New Event Button */}
-        <li>
-          <a
-            href="#"
-            className="calActionBarLink"
-            onClick={(e) => {
-              e.preventDefault();
-              navigate("/calendar/new");
-            }}
-          >
-            <i className="fa fa-plus"></i>
-            <span className="calActionBarText">New Event</span>
-          </a>
-        </li>
-      </ul>
-
-      {/* Right Side Navigation */}
-      <ul className="calActionBarNav calActionBarNavRight">
-        <li>
-          <a href="#" className="calActionBarLink" onClick={(e) => { e.preventDefault(); onTodayClick && onTodayClick(); }}>
-            Today
-          </a>
-        </li>
-        <li>
-          <a href="#" className="calActionBarLink" onClick={(e) => { e.preventDefault(); onPrevClick && onPrevClick(); }}>
-            <i className="fa fa-angle-double-left"></i>
-          </a>
-        </li>
-        <li>
-          <a href="#" className="calActionBarLink" onClick={(e) => { e.preventDefault(); onNextClick && onNextClick(); }}>
-            <i className="fa fa-angle-double-right"></i>
-          </a>
-        </li>
-        <li>
-          <a href="#" className="calActionBarLink" onClick={(e) => { e.preventDefault(); onViewChange && onViewChange("dayGridMonth"); }}>
-            Month
-          </a>
-        </li>
-        <li>
-          <a href="#" className="calActionBarLink" onClick={(e) => { e.preventDefault(); onViewChange && onViewChange("timeGridWeek"); }}>
-            Week
-          </a>
-        </li>
-        <li>
-          <a href="#" className="calActionBarLink" onClick={(e) => { e.preventDefault(); onViewChange && onViewChange("timeGridDay"); }}>
-            Day
-          </a>
-        </li>
-      </ul>
-    </div>
-  );
-}
-
diff --git a/src/pages/calendar/form/EventFormPage.css b/src/pages/calendar/form/EventFormPage.css
deleted file mode 100644
index 2f5e43d9..00000000
--- a/src/pages/calendar/form/EventFormPage.css
+++ /dev/null
@@ -1,344 +0,0 @@
-.eventFormPage {
-  padding: 0;
-  background-color: #f5f5f5;
-  min-height: 100vh;
-}
-
-.eventFormPage .container {
-  max-width: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-.eventFormPage .panel {
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px;
-  border: 1px solid #ddd;
-}
-
-.eventFormPage .panel-body {
-  padding: 20px;
-}
-
-.eventFormPage .breadcrumb {
-  background: transparent;
-  padding: 0;
-  margin-bottom: 20px;
-}
-
-.eventFormPage .breadcrumb li {
-  display: inline;
-  font-size: 14px;
-}
-
-.eventFormPage .breadcrumb li + li:before {
-  content: "/ ";
-  padding: 0 8px;
-  color: #ccc;
-}
-
-.eventFormPage .breadcrumb a {
-  color: #337ab7;
-  text-decoration: none;
-}
-
-.eventFormPage .breadcrumb .active {
-  color: #666;
-}
-
-.eventFormPage .heading {
-  margin: 0 0 20px 0;
-  color: #333;
-}
-
-.eventFormPage .form-group {
-  margin-bottom: 20px;
-  position: relative;
-}
-
-.eventFormPage .form-control {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 14px;
-  height: auto;
-  min-height: 42px;
-}
-
-.eventFormPage select.form-control {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 10px center;
-  padding-right: 30px;
-}
-
-.eventFormPage .form-control:focus {
-  outline: none;
-  border-color: #66afe9;
-  box-shadow: 0 0 5px rgba(102, 175, 233, 0.5);
-}
-
-.eventFormPage textarea.form-control {
-  resize: vertical;
-  min-height: 80px;
-}
-
-.eventFormPage label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: 500;
-  color: #333;
-  font-size: 14px;
-}
-
-.eventFormPage .required-field::after {
-  content: " *";
-  color: #d9534f;
-}
-
-.eventFormPage .input-counter {
-  position: absolute;
-  right: 10px;
-  top: 0;
-  font-size: 12px;
-  color: #999;
-}
-
-.eventFormPage .row {
-  display: flex;
-  margin: 0 -10px;
-  flex-wrap: wrap;
-  align-items: flex-start;
-}
-
-.eventFormPage .col-sm-5,
-.eventFormPage .col-sm-6,
-.eventFormPage .col-sm-2,
-.eventFormPage .col-md-4,
-.eventFormPage .col-md-6 {
-  padding: 0 10px;
-  margin-bottom: 15px;
-}
-
-.eventFormPage .col-sm-5 {
-  flex: 0 0 40%;
-  max-width: 40%;
-}
-
-.eventFormPage .col-sm-6 {
-  flex: 0 0 50%;
-  max-width: 50%;
-}
-
-.eventFormPage .col-sm-2 {
-  flex: 0 0 10%;
-  max-width: 10%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-top: 10px;
-}
-
-.eventFormPage .col-sm-2 h5 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: normal;
-  color: #666;
-}
-
-.eventFormPage .col-md-6 {
-  flex: 0 0 50%;
-  max-width: 50%;
-}
-
-.eventFormPage hr {
-  border: 0;
-  border-top: 1px solid #eee;
-  margin: 30px 0;
-}
-
-.eventFormPage .btn {
-  padding: 10px 24px;
-  border: none;
-  border-radius: 4px;
-  font-size: 16px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.eventFormPage .btn-success {
-  background-color: #5cb85c;
-  color: white;
-}
-
-.eventFormPage .btn-success:hover:not(:disabled) {
-  background-color: #449d44;
-}
-
-.eventFormPage .btn-default {
-  background-color: #f5f5f5;
-  color: #333;
-  border: 1px solid #ccc;
-}
-
-.eventFormPage .btn-default:hover:not(:disabled) {
-  background-color: #e6e6e6;
-}
-
-.eventFormPage .btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.eventFormPage .text-right {
-  text-align: right;
-}
-
-.eventFormPage .text-uppercase {
-  text-transform: uppercase;
-}
-
-.eventFormPage .text-pad-right {
-  margin-right: 15px;
-}
-
-.eventFormPage .text-sm {
-  font-size: 12px;
-  color: #666;
-}
-
-
-
-
-/* Color Picker Styles */
-.eventFormPage .theme-picker {
-  margin-top: 10px;
-}
-
-.eventFormPage .theme-colors {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  gap: 10px;
-}
-
-.eventFormPage .theme-colors li {
-  margin: 0;
-}
-
-.eventFormPage .theme-colors a {
-  display: block;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 3px solid transparent;
-  transition: all 0.2s;
-  cursor: pointer;
-}
-
-.eventFormPage .theme-colors li.active a {
-  border-color: #333;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-}
-
-.eventFormPage .theme-colors a.primary {
-  background-color: #337ab7;
-}
-
-.eventFormPage .theme-colors a.success {
-  background-color: #5cb85c;
-}
-
-.eventFormPage .theme-colors a.info {
-  background-color: #5bc0de;
-}
-
-.eventFormPage .theme-colors a.warning {
-  background-color: #f0ad4e;
-}
-
-.eventFormPage .theme-colors a.danger {
-  background-color: #d9534f;
-}
-
-/* Checkbox Styles */
-.eventFormPage .checkbox.stylized {
-  margin-top: 15px;
-}
-
-.eventFormPage .checkbox.stylized label {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  font-weight: normal;
-}
-
-.eventFormPage .checkbox.stylized input[type="checkbox"] {
-  margin-right: 8px;
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-}
-
-/* Panel Placeholder for Related Record */
-.eventFormPage .panel-placeholder {
-  border: 2px dashed #ddd;
-  border-radius: 4px;
-  padding: 20px;
-  background-color: #fafafa;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.eventFormPage .panel-placeholder:hover {
-  border-color: #337ab7;
-  background-color: #f0f7ff;
-}
-
-.eventFormPage .panel-placeholder .panel-body {
-  padding: 0;
-}
-
-.eventFormPage .panel-placeholder p {
-  margin: 0;
-}
-
-.eventFormPage .text-muted {
-  color: #999;
-}
-
-.eventFormPage .text-primary {
-  color: #337ab7;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .eventFormPage .col-sm-5,
-  .eventFormPage .col-sm-6,
-  .eventFormPage .col-sm-2,
-  .eventFormPage .col-md-4,
-  .eventFormPage .col-md-6 {
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-
-  .eventFormPage .col-sm-2 {
-    justify-content: flex-start;
-    padding-top: 0;
-  }
-
-  .eventFormPage .col-sm-2 h5 {
-    margin: 10px 0;
-  }
-
-  .eventFormPage .panel-body {
-    padding: 15px;
-  }
-}
diff --git a/src/pages/calendar/form/EventFormPage.js b/src/pages/calendar/form/EventFormPage.js
deleted file mode 100644
index a7aa5341..00000000
--- a/src/pages/calendar/form/EventFormPage.js
+++ /dev/null
@@ -1,456 +0,0 @@
-import { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
-import { getEventById, addEvent, editEvent } from "../api";
-import "./EventFormPage.css";
-
-export default function EventFormPage() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const isEdit = !!id;
-
-  const [formData, setFormData] = useState({
-    title: "",
-    description: "",
-    location: "",
-    recordID: null,
-    recordName: "",
-    recordTargetType: "",
-    reminderMinutes: 15,
-    eventColor: "primary",
-    startDate: new Date().toISOString().split("T")[0],
-    startTime: "08:00 AM",
-    endDate: new Date().toISOString().split("T")[0],
-    endTime: "08:30 AM",
-    allDay: false,
-  });
-
-  const [loading, setLoading] = useState(false);
-  const [titleCounter, setTitleCounter] = useState(100);
-  const [locationCounter, setLocationCounter] = useState(150);
-
-  // Time options for dropdowns (30-minute intervals)
-  const timeOptions = [
-    "12:00 AM", "12:30 AM", "01:00 AM", "01:30 AM", "02:00 AM", "02:30 AM",
-    "03:00 AM", "03:30 AM", "04:00 AM", "04:30 AM", "05:00 AM", "05:30 AM",
-    "06:00 AM", "06:30 AM", "07:00 AM", "07:30 AM", "08:00 AM", "08:30 AM",
-    "09:00 AM", "09:30 AM", "10:00 AM", "10:30 AM", "11:00 AM", "11:30 AM",
-    "12:00 PM", "12:30 PM", "01:00 PM", "01:30 PM", "02:00 PM", "02:30 PM",
-    "03:00 PM", "03:30 PM", "04:00 PM", "04:30 PM", "05:00 PM", "05:30 PM",
-    "06:00 PM", "06:30 PM", "07:00 PM", "07:30 PM", "08:00 PM", "08:30 PM",
-    "09:00 PM", "09:30 PM", "10:00 PM", "10:30 PM", "11:00 PM", "11:30 PM",
-  ];
-
-  // Reminder options
-  const reminderOptions = [
-    { value: 0, label: "Never" },
-    { value: 5, label: "5 minutes before" },
-    { value: 10, label: "10 minutes before" },
-    { value: 15, label: "15 minutes before" },
-    { value: 30, label: "30 minutes before" },
-    { value: 60, label: "1 hour before" },
-    { value: 120, label: "2 hours before" },
-    { value: 240, label: "4 hours before" },
-    { value: 360, label: "6 hours before" },
-    { value: 720, label: "12 hours before" },
-    { value: 1440, label: "1 day before" },
-  ];
-
-  // Load event data if editing
-  useEffect(() => {
-    if (isEdit && id) {
-      const loadEvent = async () => {
-        try {
-          const event = await getEventById(id);
-          if (event) {
-            setFormData(prev => {
-              const merged = { ...prev };
-              for (const key of Object.keys(merged)) {
-                if (event[key] != null) merged[key] = event[key];
-              }
-              return merged;
-            });
-            setTitleCounter(100 - (event.title?.length || 0));
-            setLocationCounter(150 - (event.location?.length || 0));
-          }
-        } catch (err) {
-          console.error("Failed to load event", err);
-          toast.error("Failed to load event");
-        }
-      };
-      loadEvent();
-    }
-  }, [id, isEdit]);
-
-  const handleChange = (e) => {
-    const { name, value, type, checked } = e.target;
-    const newValue = type === "checkbox" ? checked : value;
-
-    setFormData((prev) => ({
-      ...prev,
-      [name]: newValue,
-    }));
-
-    // Update character counters
-    if (name === "title") {
-      setTitleCounter(100 - value.length);
-    } else if (name === "location") {
-      setLocationCounter(150 - value.length);
-    }
-  };
-
-  const handleColorSelect = (color) => {
-    setFormData((prev) => ({
-      ...prev,
-      eventColor: color,
-    }));
-  };
-
-  const handleSave = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-
-    try {
-      if (isEdit) {
-        await editEvent({ ...formData, id: parseInt(id) });
-        toast.success("Event updated successfully!");
-      } else {
-        await addEvent(formData);
-        toast.success("Event created successfully!");
-      }
-      navigate("/calendar");
-    } catch (err) {
-      console.error(err);
-      toast.error("Failed to save event");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCancel = () => {
-    navigate("/calendar");
-  };
-
-  return (
-    <div className="eventFormPage">
-      <div className="container">
-        <div className="panel panel-default panel-connected">
-          <div className="panel-body">
-            <ol className="breadcrumb breadcrumb-alt">
-              <li>
-                <a href="/calendar">Calendar</a>
-              </li>
-              <li className="active">{isEdit ? "Edit" : "Create"}</li>
-            </ol>
-
-            <form onSubmit={handleSave}>
-              <div className="form-group">
-                <div className="header">
-                  <h3 className="heading thin">
-                    <span className="fa-stack" style={{ fontSize: "0.9em" }}>
-                      <i className="fa fa-square fa-stack-2x text-primary"></i>
-                      <i className={`fa fa-${isEdit ? "edit" : "plus"} fa-stack-1x fa-inverse`}></i>
-                    </span>
-                    <span>{isEdit ? "Edit Event" : "Create an Event"}</span>
-                  </h3>
-                </div>
-              </div>
-
-              {/* General Details */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>General Details</strong>
-                  </h5>
-                </div>
-
-                <div className="row">
-                  <div className="col-sm-5 col-md-6">
-                    <div className="form-group">
-                      <span className="input-counter">{titleCounter}</span>
-                      <label className="required-field" htmlFor="title">
-                        Title
-                      </label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="title"
-                        name="title"
-                        value={formData.title}
-                        onChange={handleChange}
-                        placeholder="Enter Event title"
-                        maxLength={100}
-                        required
-                      />
-                    </div>
-                  </div>
-
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="recordName">Related to...</label>
-                      <div className="panel-placeholder text-center">
-                        <div className="panel-body">
-                          <p>
-                            <strong>
-                              {formData.recordName ? (
-                                <span className="text-primary">{formData.recordName}</span>
-                              ) : (
-                                <span className="text-muted">Click here to search records</span>
-                              )}
-                            </strong>
-                          </p>
-                        </div>
-                      </div>
-                      <input
-                        type="hidden"
-                        name="recordID"
-                        value={formData.recordID || ""}
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <div className="form-group">
-                  <label htmlFor="description">Description</label>
-                  <textarea
-                    className="form-control"
-                    id="description"
-                    name="description"
-                    value={formData.description}
-                    onChange={handleChange}
-                    placeholder="Enter details about the Event"
-                    rows={3}
-                  />
-                </div>
-
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <span className="input-counter">{locationCounter}</span>
-                      <label htmlFor="location">Location</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="location"
-                        name="location"
-                        value={formData.location}
-                        onChange={handleChange}
-                        placeholder="Enter location"
-                        maxLength={150}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="reminderMinutes">Remind Attendees</label>
-                      <select
-                        className="form-control"
-                        id="reminderMinutes"
-                        name="reminderMinutes"
-                        value={formData.reminderMinutes}
-                        onChange={handleChange}
-                        required
-                      >
-                        {reminderOptions.map((option) => (
-                          <option key={option.value} value={option.value}>
-                            {option.label}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="form-group">
-                  <label htmlFor="eventColor">Select a Calendar Color</label>
-                  <div className="theme-picker">
-                    <ul className="theme-colors">
-                      <li className={formData.eventColor === "primary" ? "active" : ""}>
-                        <a
-                          href="#"
-                          className="primary"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            handleColorSelect("primary");
-                          }}
-                        ></a>
-                      </li>
-                      <li className={formData.eventColor === "success" ? "active" : ""}>
-                        <a
-                          href="#"
-                          className="success"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            handleColorSelect("success");
-                          }}
-                        ></a>
-                      </li>
-                      <li className={formData.eventColor === "info" ? "active" : ""}>
-                        <a
-                          href="#"
-                          className="info"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            handleColorSelect("info");
-                          }}
-                        ></a>
-                      </li>
-                      <li className={formData.eventColor === "warning" ? "active" : ""}>
-                        <a
-                          href="#"
-                          className="warning"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            handleColorSelect("warning");
-                          }}
-                        ></a>
-                      </li>
-                      <li className={formData.eventColor === "danger" ? "active" : ""}>
-                        <a
-                          href="#"
-                          className="danger"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            handleColorSelect("danger");
-                          }}
-                        ></a>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-
-              <hr />
-
-              {/* Schedule */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Schedule</strong>
-                  </h5>
-                </div>
-
-                <div className="row">
-                  <div className="col-sm-5" style={{ display: formData.allDay ? "none" : "block" }}>
-                    <div className="form-group">
-                      <input
-                        className="form-control"
-                        type="date"
-                        id="startDate"
-                        name="startDate"
-                        value={formData.startDate}
-                        onChange={handleChange}
-                        required
-                      />
-                    </div>
-                  </div>
-
-                  <div className="col-sm-5" style={{ display: formData.allDay ? "none" : "block" }}>
-                    <div className="form-group">
-                      <select
-                        className="form-control"
-                        id="startTime"
-                        name="startTime"
-                        value={formData.startTime}
-                        onChange={handleChange}
-                        required={!formData.allDay}
-                      >
-                        {timeOptions.map((time) => (
-                          <option key={time} value={time}>
-                            {time}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                  </div>
-
-                  <div className="col-sm-2" style={{ display: formData.allDay ? "none" : "block" }}>
-                    <h5>to</h5>
-                  </div>
-                </div>
-
-                <div className="row">
-                  <div className="col-sm-5" style={{ display: formData.allDay ? "none" : "block" }}>
-                    <div className="form-group">
-                      <input
-                        className="form-control"
-                        type="date"
-                        id="endDate"
-                        name="endDate"
-                        value={formData.endDate}
-                        onChange={handleChange}
-                        required
-                      />
-                    </div>
-                  </div>
-
-                  <div className="col-sm-5" style={{ display: formData.allDay ? "none" : "block" }}>
-                    <div className="form-group">
-                      <select
-                        className="form-control"
-                        id="endTime"
-                        name="endTime"
-                        value={formData.endTime}
-                        onChange={handleChange}
-                        required={!formData.allDay}
-                      >
-                        {timeOptions.map((time) => (
-                          <option key={time} value={time}>
-                            {time}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="checkbox stylized">
-                  <label>
-                    <input
-                      className="check-box"
-                      type="checkbox"
-                      id="allDay"
-                      name="allDay"
-                      checked={formData.allDay}
-                      onChange={handleChange}
-                    />
-                    <span className="helper"></span>
-                    <span>All day Event</span>
-                  </label>
-                </div>
-              </div>
-
-              <hr />
-
-              {/* Action Buttons */}
-              <div className="form-group text-right">
-                <span className="text-pad-right text-sm">
-                  All fields marked with a <span className="required-field"></span> are required.
-                </span>
-                <button
-                  type="button"
-                  className="btn btn-lg btn-default"
-                  onClick={handleCancel}
-                  disabled={loading}
-                  style={{ marginRight: "10px" }}
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="btn btn-lg btn-success"
-                  disabled={loading}
-                >
-                  {loading ? "Saving..." : isEdit ? "Update" : "Create"}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-
diff --git a/src/pages/calendar/list/CalendarPage.css b/src/pages/calendar/list/CalendarPage.css
deleted file mode 100644
index 8f6a17e1..00000000
--- a/src/pages/calendar/list/CalendarPage.css
+++ /dev/null
@@ -1,178 +0,0 @@
-.calendarPage {
-  padding: 20px;
-  background-color: #f5f5f5;
-  min-height: calc(100vh - 60px);
-}
-
-.calendarPage .breadcrumb {
-  font-size: 14px;
-  margin-bottom: 20px;
-  color: #666;
-}
-
-.calendarPage .breadcrumbItem {
-  color: #333;
-  font-weight: 500;
-}
-
-/* Calendar Container */
-.calendarContainer {
-  background: white;
-  padding: 20px;
-  border-radius: 4px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  position: relative;
-}
-
-.calendarLoading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 100;
-  text-align: center;
-  color: #999;
-}
-
-.calendarLoading i {
-  margin-bottom: 10px;
-}
-
-.calendarLoading p {
-  margin: 0;
-  font-size: 14px;
-}
-
-/* Calendar Title */
-.calendarTitle {
-  text-align: center;
-  margin-bottom: 20px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.calendarTitle h2 {
-  margin: 0;
-  font-size: 24px;
-  font-weight: 500;
-  color: #666;
-}
-
-/* FullCalendar Customization */
-.calendarPage .fc {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-}
-
-/* Calendar cells */
-.calendarPage .fc-daygrid-day {
-  border-color: #ddd;
-}
-
-.calendarPage .fc-scrollgrid {
-  border-color: #ddd;
-}
-
-.calendarPage .fc-theme-standard td,
-.calendarPage .fc-theme-standard th {
-  border-color: #ddd;
-}
-
-.calendarPage .fc-toolbar-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #333;
-}
-
-.calendarPage .fc-button {
-  background: #337ab7;
-  border-color: #337ab7;
-  text-transform: capitalize;
-}
-
-.calendarPage .fc-button:hover {
-  background: #286090;
-  border-color: #286090;
-}
-
-.calendarPage .fc-button-active {
-  background: #204d74 !important;
-  border-color: #204d74 !important;
-}
-
-.calendarPage .fc-button:focus {
-  box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.2);
-}
-
-.calendarPage .fc-daygrid-event {
-  cursor: pointer;
-  margin: 1px 2px;
-  padding: 2px 4px;
-  border-radius: 3px;
-}
-
-.calendarPage .fc-daygrid-event:hover {
-  opacity: 0.85;
-}
-
-.calendarPage .fc-event-title {
-  font-weight: 500;
-}
-
-.calendarPage .fc-daygrid-day-number {
-  padding: 8px;
-  font-size: 14px;
-  color: #333;
-}
-
-.calendarPage .fc-col-header-cell-cushion {
-  padding: 10px;
-  font-weight: 600;
-  color: #666;
-}
-
-/* Today's date - Pinkish/Beige highlight like legacy */
-.calendarPage .fc-daygrid-day.fc-day-today {
-  background-color: #fffbf0 !important;
-}
-
-.calendarPage .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
-  background-color: #fff8dc;
-  color: #333;
-  font-weight: 600;
-}
-
-/* Dates from other months - Gray background like legacy */
-.calendarPage .fc-day-other {
-  background-color: #f0f0f0 !important;
-}
-
-.calendarPage .fc-day-other .fc-daygrid-day-number {
-  color: #bbb !important;
-}
-
-/* Hide events on dates from other months */
-.calendarPage .fc-day-other .fc-daygrid-event-harness {
-  display: none !important;
-}
-
-
-/* Responsive Styles */
-@media (max-width: 768px) {
-  .calendarPage {
-    padding: 10px;
-  }
-
-  .calendarContainer {
-    padding: 10px;
-  }
-
-  .calendarTitle h2 {
-    font-size: 18px;
-  }
-
-  .calendarPage .fc-daygrid-day-number {
-    font-size: 12px;
-    padding: 4px;
-  }
-}
-
diff --git a/src/pages/calendar/list/CalendarPage.js b/src/pages/calendar/list/CalendarPage.js
deleted file mode 100644
index 97e4475e..00000000
--- a/src/pages/calendar/list/CalendarPage.js
+++ /dev/null
@@ -1,250 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import { useNavigate } from "react-router-dom";
-import { toast } from "react-toastify";
-import FullCalendar from "@fullcalendar/react";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import timeGridPlugin from "@fullcalendar/timegrid";
-import interactionPlugin from "@fullcalendar/interaction";
-import { fetchEventsForCalendar, deleteEvent } from "../api";
-import DeleteModal from "../../../components/DeleteModal";
-import CalendarActionBar from "../components/CalendarActionBar";
-import "./CalendarPage.css";
-
-export default function CalendarPage() {
-  const navigate = useNavigate();
-  const calendarRef = useRef(null);
-
-  const [events, setEvents] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [eventTypeFilter, setEventTypeFilter] = useState("Events");
-  const [workspaceFilter, setWorkspaceFilter] = useState("All");
-  const [currentTitle, setCurrentTitle] = useState("March 2026");
-  const [deleteModal, setDeleteModal] = useState({
-    isOpen: false,
-    item: null,
-    loading: false,
-  });
-
-  // Load events for the current calendar view
-  const loadEvents = async (start, end) => {
-    setLoading(true);
-    try {
-      const data = await fetchEventsForCalendar(start, end);
-
-      // Convert to FullCalendar format
-      const formattedEvents = data.map((event) => {
-        // Extract date part only (YYYY-MM-DD) from datetime string
-        const startDateOnly = event.startDate?.split('T')[0] || event.startDate?.substring(0, 10);
-        const endDateOnly = event.endDate?.split('T')[0] || event.endDate?.substring(0, 10);
-
-        let startValue, endValue;
-
-        if (event.allDay) {
-          // For all-day events, FullCalendar uses exclusive end dates
-          // So if event is on April 5th, end should be April 6th
-          startValue = startDateOnly;
-          const endDate = new Date(endDateOnly);
-          endDate.setDate(endDate.getDate() + 1); // Add 1 day for exclusive end
-          endValue = endDate.toISOString().split('T')[0];
-        } else {
-          // For timed events, combine date and time
-          startValue = `${startDateOnly}T${convertTimeToISO(event.startTime)}`;
-          endValue = `${endDateOnly}T${convertTimeToISO(event.endTime)}`;
-        }
-
-        return {
-          id: event.id,
-          title: event.title,
-          start: startValue,
-          end: endValue,
-          allDay: event.allDay,
-          backgroundColor: getColorHex(event.eventColor),
-          borderColor: getColorHex(event.eventColor),
-          extendedProps: {
-            description: event.description,
-            location: event.location,
-            eventColor: event.eventColor,
-            rawEvent: event,
-          },
-        };
-      });
-
-      setEvents(formattedEvents);
-    } catch (err) {
-      console.error("Failed to load events", err);
-      toast.error("Failed to load events");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // Convert "08:00 AM" to "08:00:00"
-  const convertTimeToISO = (timeStr) => {
-    if (!timeStr) return "00:00:00";
-    const [time, period] = timeStr.split(" ");
-    let [hours, minutes] = time.split(":");
-    hours = parseInt(hours);
-
-    if (period === "PM" && hours !== 12) {
-      hours += 12;
-    } else if (period === "AM" && hours === 12) {
-      hours = 0;
-    }
-
-    return `${hours.toString().padStart(2, "0")}:${minutes}:00`;
-  };
-
-  // Get color hex from color name
-  const getColorHex = (colorName) => {
-    const colors = {
-      primary: "#337ab7",
-      success: "#5cb85c",
-      info: "#5bc0de",
-      warning: "#f0ad4e",
-      danger: "#d9534f",
-    };
-    return colors[colorName] || colors.primary;
-  };
-
-  // Initial load
-  useEffect(() => {
-    const calendarApi = calendarRef.current?.getApi();
-    if (calendarApi) {
-      const start = calendarApi.view.activeStart;
-      const end = calendarApi.view.activeEnd;
-      loadEvents(start, end);
-    }
-  }, [eventTypeFilter, workspaceFilter]);
-
-  // Handle date range change (when user navigates to different month/week)
-  const handleDatesSet = (dateInfo) => {
-    loadEvents(dateInfo.start, dateInfo.end);
-
-    // Update title
-    const calendarApi = calendarRef.current?.getApi();
-    if (calendarApi) {
-      setCurrentTitle(calendarApi.view.title);
-    }
-  };
-
-  // Handle event click
-  const handleEventClick = (clickInfo) => {
-    const eventId = clickInfo.event.id;
-    navigate(`/calendar/edit/${eventId}`);
-  };
-
-  // Handle date click (create new event)
-  const handleDateClick = (dateInfo) => {
-    // Navigate to create event with pre-filled date
-    navigate(`/calendar/new?date=${dateInfo.dateStr}`);
-  };
-
-  // Handle delete
-  const handleDeleteConfirm = async () => {
-    setDeleteModal((prev) => ({ ...prev, loading: true }));
-    try {
-      await deleteEvent(deleteModal.item.id);
-      toast.success("Event deleted successfully!");
-      setDeleteModal({ isOpen: false, item: null, loading: false });
-
-      // Reload events
-      const calendarApi = calendarRef.current?.getApi();
-      if (calendarApi) {
-        const start = calendarApi.view.activeStart;
-        const end = calendarApi.view.activeEnd;
-        loadEvents(start, end);
-      }
-    } catch (err) {
-      console.error(err);
-      toast.error("Failed to delete event");
-      setDeleteModal((prev) => ({ ...prev, loading: false }));
-    }
-  };
-
-  // Navigate to today
-  const handleToday = () => {
-    const calendarApi = calendarRef.current?.getApi();
-    if (calendarApi) {
-      calendarApi.today();
-    }
-  };
-
-  // Change view
-  const handleChangeView = (viewType) => {
-    const calendarApi = calendarRef.current?.getApi();
-    if (calendarApi) {
-      calendarApi.changeView(viewType);
-    }
-  };
-
-
-  return (
-    <>
-      <CalendarActionBar
-        onWorkspaceChange={(type) => setWorkspaceFilter(type)}
-        onEventTypeChange={(filter) => setEventTypeFilter(filter)}
-        onTodayClick={handleToday}
-        onPrevClick={() => {
-          const calendarApi = calendarRef.current?.getApi();
-          if (calendarApi) calendarApi.prev();
-        }}
-        onNextClick={() => {
-          const calendarApi = calendarRef.current?.getApi();
-          if (calendarApi) calendarApi.next();
-        }}
-        onViewChange={handleChangeView}
-      />
-
-      <section className="calendarPage">
-        {/* Calendar Container */}
-        <div className="calendarContainer">
-          {loading && (
-            <div className="calendarLoading">
-              <i className="fa fa-spinner fa-spin fa-2x"></i>
-              <p>Loading events...</p>
-            </div>
-          )}
-
-          {/* Custom Title Display */}
-          <div className="calendarTitle">
-            <h2>{currentTitle}</h2>
-          </div>
-
-          <FullCalendar
-            ref={calendarRef}
-            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
-            initialView="dayGridMonth"
-            headerToolbar={false}
-            events={events}
-            editable={false}
-            selectable={true}
-            selectMirror={true}
-            dayMaxEvents={true}
-            weekends={true}
-            datesSet={handleDatesSet}
-            eventClick={handleEventClick}
-            dateClick={handleDateClick}
-            height="auto"
-            fixedWeekCount={false}
-            showNonCurrentDates={true}
-            eventTimeFormat={{
-              hour: "2-digit",
-              minute: "2-digit",
-              meridiem: "short",
-            }}
-          />
-        </div>
-
-        <DeleteModal
-          isOpen={deleteModal.isOpen}
-          onClose={() => setDeleteModal({ isOpen: false, item: null, loading: false })}
-          onConfirm={handleDeleteConfirm}
-          title="Delete Event"
-          message={`Are you sure you want to delete "${deleteModal.item?.title}"? This action cannot be undone.`}
-          loading={deleteModal.loading}
-        />
-      </section>
-    </>
-  );
-}
-
diff --git a/src/pages/calendar/list/Table.js b/src/pages/calendar/list/Table.js
deleted file mode 100644
index 84ec4c2d..00000000
--- a/src/pages/calendar/list/Table.js
+++ /dev/null
@@ -1,163 +0,0 @@
-export default function Table({
-  loading,
-  error,
-  rows,
-  onEdit,
-  onDelete,
-  page,
-  setPage,
-  pageSize,
-  setPageSize,
-  totalCount,
-  totalPages,
-}) {
-  if (loading) {
-    return (
-      <div className="tableContainer">
-        <div className="loadingState">
-          <i className="fa fa-spinner fa-spin fa-3x"></i>
-          <p>Loading events...</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="tableContainer">
-        <div className="errorState">
-          <i className="fa fa-exclamation-triangle fa-3x"></i>
-          <p>{error}</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (rows.length === 0) {
-    return (
-      <div className="tableContainer">
-        <div className="emptyState">
-          <i className="fa fa-calendar fa-3x"></i>
-          <p>No events found</p>
-          <small>Create your first event to get started</small>
-        </div>
-      </div>
-    );
-  }
-
-  const formatDate = (dateString) => {
-    if (!dateString) return "";
-    const date = new Date(dateString);
-    return date.toLocaleDateString("en-US", {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    });
-  };
-
-  const getColorBadgeClass = (color) => {
-    return `colorBadge badge-${color || "primary"}`;
-  };
-
-  return (
-    <div className="tableContainer">
-      <table className="dataTable">
-        <thead>
-          <tr>
-            <th>Title</th>
-            <th>Start Date</th>
-            <th>End Date</th>
-            <th>Location</th>
-            <th>Color</th>
-            <th>All Day</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((row) => (
-            <tr key={row.id}>
-              <td>
-                <strong>{row.title}</strong>
-                {row.description && (
-                  <div className="description">{row.description.substring(0, 100)}</div>
-                )}
-              </td>
-              <td>
-                {formatDate(row.startDate)}
-                {row.startTime && <div className="timeText">{row.startTime}</div>}
-              </td>
-              <td>
-                {formatDate(row.endDate)}
-                {row.endTime && <div className="timeText">{row.endTime}</div>}
-              </td>
-              <td>{row.location || "-"}</td>
-              <td>
-                <span className={getColorBadgeClass(row.eventColor)}>
-                  {row.eventColor || "primary"}
-                </span>
-              </td>
-              <td>{row.allDay ? "Yes" : "No"}</td>
-              <td>
-                <div className="actionButtons">
-                  <button
-                    className="actionBtn editBtn"
-                    onClick={() => onEdit(row)}
-                    title="Edit"
-                  >
-                    <i className="fa fa-edit"></i>
-                  </button>
-                  <button
-                    className="actionBtn deleteBtn"
-                    onClick={() => onDelete(row)}
-                    title="Delete"
-                  >
-                    <i className="fa fa-trash"></i>
-                  </button>
-                </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      <div className="pagination">
-        <div className="paginationInfo">
-          Showing {(page - 1) * pageSize + 1} to {Math.min(page * pageSize, totalCount)} of{" "}
-          {totalCount} events
-        </div>
-
-        <div className="paginationControls">
-          <label htmlFor="pageSize">Rows per page:</label>
-          <select
-            id="pageSize"
-            value={pageSize}
-            onChange={(e) => {
-              setPageSize(Number(e.target.value));
-              setPage(1);
-            }}
-          >
-            <option value={12}>12</option>
-            <option value={24}>24</option>
-            <option value={50}>50</option>
-            <option value={100}>100</option>
-          </select>
-
-          <button className="pageBtn" disabled={page === 1} onClick={() => setPage(page - 1)}>
-            Previous
-          </button>
-          <span className="pageInfo">
-            Page {page} of {totalPages}
-          </span>
-          <button
-            className="pageBtn"
-            disabled={page >= totalPages}
-            onClick={() => setPage(page + 1)}
-          >
-            Next
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
diff --git a/src/pages/calendar/list/useEvents.js b/src/pages/calendar/list/useEvents.js
deleted file mode 100644
index a2668855..00000000
--- a/src/pages/calendar/list/useEvents.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useState, useEffect, useCallback, useMemo } from "react";
-import { fetchEventsPaged } from "../api";
-
-const useEvents = () => {
-  const [rows, setRows] = useState([]);
-  const [search, setSearch] = useState("");
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
-  const [totalCount, setTotalCount] = useState(0);
-  const [loading, setLoading] = useState(true);
-  const [err, setErr] = useState("");
-
-  const reload = useCallback(() => {
-    setLoading(true);
-    setErr("");
-    fetchEventsPaged({ search, page, pageSize })
-      .then(({ rows, totalCount }) => {
-        setRows(rows);
-        setTotalCount(totalCount);
-      })
-      .catch((e) => setErr(e.message || "Failed to load"))
-      .finally(() => setLoading(false));
-  }, [search, page, pageSize]);
-
-  useEffect(() => {
-    reload();
-  }, [reload]);
-
-  return useMemo(
-    () => ({
-      rows,
-      search,
-      setSearch,
-      page,
-      setPage,
-      pageSize,
-      setPageSize,
-      totalCount,
-      loading,
-      err,
-      reload,
-    }),
-    [rows, search, page, pageSize, totalCount, loading, err, reload]
-  );
-};
-
-export default useEvents;
-
diff --git a/src/pages/contacts/edit/api.js b/src/pages/contacts/edit/api.js
deleted file mode 100644
index e71d8822..00000000
--- a/src/pages/contacts/edit/api.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import {post } from "../../../apiUtil";
-import { API_URL } from '../../../constants';
-
-export const editContact = (item) => post(`${API_URL}/Contact/EditContacts`, item)
\ No newline at end of file
diff --git a/src/pages/contacts/form/ContactFormPage.js b/src/pages/contacts/form/ContactFormPage.js
deleted file mode 100644
index 35dffe11..00000000
--- a/src/pages/contacts/form/ContactFormPage.js
+++ /dev/null
@@ -1,673 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import "../../../styles/FormPage.css";
-
-const ContactFormPage = () => {
-  const navigate = useNavigate();
-  const { id } = useParams();
-  const isEdit = Boolean(id);
-
-  const [formData, setFormData] = useState({
-    firstName: "",
-    middleName: "",
-    lastName: "",
-    title: "",
-    contactType: "",
-    gender: "",
-    dateOfBirth: "",
-    territory: "",
-    owner: "",
-    privacySetting: "PublicReadWrite",
-    about: "",
-    tags: "",
-    street: "",
-    streetLineTwo: "",
-    city: "",
-    zip: "",
-    country: "US",
-    state: "",
-    county: "",
-    timeZone: "Eastern Standard Time",
-    smsAddress: "",
-    website: "",
-    facebookUrl: "",
-    linkedInUrl: "",
-    twitterUrl: "",
-  });
-
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (isEdit) {
-      // TODO: Fetch contact data by ID
-      // For now, using mock data
-      setFormData({
-        firstName: "John",
-        middleName: "A",
-        lastName: "Doe",
-        title: "Manager",
-        contactType: "",
-        gender: "",
-        dateOfBirth: "",
-        territory: "",
-        owner: "",
-        privacySetting: "PublicReadWrite",
-        about: "",
-        tags: "",
-        street: "",
-        streetLineTwo: "",
-        city: "",
-        zip: "",
-        country: "US",
-        state: "",
-        county: "",
-        timeZone: "Eastern Standard Time",
-        smsAddress: "",
-        website: "",
-        facebookUrl: "",
-        linkedInUrl: "",
-        twitterUrl: "",
-      });
-    }
-  }, [isEdit, id]);
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
-
-  const handleSave = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-
-    try {
-      // TODO: Implement actual save logic
-      console.log("Saving contact:", formData);
-      setTimeout(() => {
-        setLoading(false);
-        navigate("/contacts");
-      }, 1000);
-    } catch (error) {
-      console.error("Error saving contact:", error);
-      setLoading(false);
-    }
-  };
-
-  // eslint-disable-next-line no-unused-vars
-  const handleCancel = () => {
-    navigate("/contacts");
-  };
-
-  return (
-    <div className="formPage">
-      <div className="panel panel-default panel-connected">
-        <div className="panel-body">
-          <ol className="breadcrumb breadcrumb-alt">
-            <li>
-              <a
-                href="#"
-                onClick={(e) => {
-                  e.preventDefault();
-                  navigate("/contacts");
-                }}
-              >
-                Contacts
-              </a>
-            </li>
-            <li className="active">{isEdit ? "Edit" : "Create"}</li>
-          </ol>
-
-          <div className="container">
-            <form onSubmit={handleSave}>
-              {/* Page Header */}
-              <div className="form-group">
-                <div className="header">
-                  <h3 className="heading thin">
-                    <span className="fa-stack" style={{ fontSize: "0.9em" }}>
-                      <i className="fa fa-square fa-stack-2x text-primary"></i>
-                      <i
-                        className={`fa fa-${
-                          isEdit ? "edit" : "plus"
-                        } fa-stack-1x fa-inverse`}
-                      ></i>
-                    </span>
-                    <span>
-                      {isEdit ? "Edit a Contact" : "Create a Contact"}
-                    </span>
-                  </h3>
-                </div>
-              </div>
-
-              {/* General Details Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>General Details</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-5">
-                    <div className="form-group">
-                      <span className="input-counter">50</span>
-                      <label className="required-field" htmlFor="firstName">
-                        First Name
-                      </label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="firstName"
-                        name="firstName"
-                        value={formData.firstName}
-                        onChange={handleChange}
-                        placeholder="Enter first name"
-                        required
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-2">
-                    <div className="form-group">
-                      <span className="input-counter">50</span>
-                      <label htmlFor="middleName">Middle Name</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="middleName"
-                        name="middleName"
-                        value={formData.middleName}
-                        onChange={handleChange}
-                        placeholder="Enter middle name"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-5">
-                    <div className="form-group">
-                      <span className="input-counter">50</span>
-                      <label className="required-field" htmlFor="lastName">
-                        Last Name
-                      </label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="lastName"
-                        name="lastName"
-                        value={formData.lastName}
-                        onChange={handleChange}
-                        placeholder="Enter last name"
-                        required
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <span className="input-counter">50</span>
-                      <label htmlFor="title">Title</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="title"
-                        name="title"
-                        value={formData.title}
-                        onChange={handleChange}
-                        placeholder="Enter a title"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="contactType">Contact Type</label>
-                      <select
-                        className="form-control"
-                        id="contactType"
-                        name="contactType"
-                        value={formData.contactType}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select a Contact Type</option>
-                        <option value="Corporate">Corporate</option>
-                        <option value="Store Mgr">Store Mgr</option>
-                        <option value="Facilities">Facilities</option>
-                        <option value="Area Leader">Area Leader</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="gender">Gender</label>
-                      <select
-                        className="form-control"
-                        id="gender"
-                        name="gender"
-                        value={formData.gender}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select a gender</option>
-                        <option value="Male">Male</option>
-                        <option value="Female">Female</option>
-                        <option value="Not specified">Not specified</option>
-                        <option value="Other">Other</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="dateOfBirth">Date of Birth</label>
-                      <input
-                        className="form-control"
-                        type="date"
-                        id="dateOfBirth"
-                        name="dateOfBirth"
-                        value={formData.dateOfBirth}
-                        onChange={handleChange}
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="territory">
-                        Territory
-                      </label>
-                      <select
-                        className="form-control"
-                        id="territory"
-                        name="territory"
-                        value={formData.territory}
-                        onChange={handleChange}
-                        required
-                      >
-                        <option value="">Select a Territory</option>
-                        <option value="-1">No Territory</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="owner">
-                        Owner
-                      </label>
-                      <select
-                        className="form-control"
-                        id="owner"
-                        name="owner"
-                        value={formData.owner}
-                        onChange={handleChange}
-                        required
-                      >
-                        <option value="">Select an Owner</option>
-                        <option value="1">Employee 1</option>
-                        <option value="2">Employee 2</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="privacySetting">
-                        Privacy Setting
-                      </label>
-                      <select
-                        className="form-control"
-                        id="privacySetting"
-                        name="privacySetting"
-                        value={formData.privacySetting}
-                        onChange={handleChange}
-                        required
-                      >
-                        <option value="PublicReadWrite">Public read/write</option>
-                        <option value="PublicReadOnly">Public read only</option>
-                        <option value="Private">Private</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <div className="form-group">
-                  <label htmlFor="about">About</label>
-                  <input
-                    className="form-control"
-                    type="text"
-                    id="about"
-                    name="about"
-                    value={formData.about}
-                    onChange={handleChange}
-                    placeholder="Enter details about the contact"
-                  />
-                </div>
-                <div className="form-group">
-                  <label htmlFor="tags">Tags</label>
-                  <input
-                    className="form-control"
-                    type="text"
-                    id="tags"
-                    name="tags"
-                    value={formData.tags}
-                    onChange={handleChange}
-                  />
-                  <span className="form-control-label">
-                    Press <code>Enter</code> after each tag to complete it.
-                  </span>
-                </div>
-              </div>
-
-              <hr />
-
-              {/* Address Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Address</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <span className="input-counter">250</span>
-                      <label htmlFor="street">Address 1</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="street"
-                        name="street"
-                        value={formData.street || ""}
-                        onChange={handleChange}
-                        placeholder="Enter street address or P.O. box"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <span className="input-counter">250</span>
-                      <label htmlFor="streetLineTwo">Address 2</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="streetLineTwo"
-                        name="streetLineTwo"
-                        value={formData.streetLineTwo || ""}
-                        onChange={handleChange}
-                        placeholder="Enter apt/unit/suite number (ex. Unit 1)"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <span className="input-counter">100</span>
-                      <label htmlFor="city">City</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="city"
-                        name="city"
-                        value={formData.city || ""}
-                        onChange={handleChange}
-                        placeholder="Enter city name"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <span className="input-counter">20</span>
-                      <label htmlFor="zip">Zip/Postal Code</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="zip"
-                        name="zip"
-                        value={formData.zip || ""}
-                        onChange={handleChange}
-                        placeholder="Enter code"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="country">Country</label>
-                      <select
-                        className="form-control"
-                        id="country"
-                        name="country"
-                        value={formData.country || "US"}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select a Country</option>
-                        <option value="US">United States</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="state">State / Province</label>
-                      <select
-                        className="form-control"
-                        id="state"
-                        name="state"
-                        value={formData.state || ""}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select a State/Province</option>
-                        <option value="AL">Alabama</option>
-                        <option value="AK">Alaska</option>
-                        <option value="AZ">Arizona</option>
-                        <option value="CA">California</option>
-                        <option value="FL">Florida</option>
-                        <option value="NY">New York</option>
-                        <option value="TX">Texas</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="county">County</label>
-                      <select
-                        className="form-control"
-                        id="county"
-                        name="county"
-                        value={formData.county || ""}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select a County</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <hr />
-
-              {/* Phone & Email Communication Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Phone &amp; Email Communication</strong>
-                  </h5>
-                </div>
-                <div className="form-group">
-                  <label>Phone Number</label>
-                  <p className="text-muted text-sm">
-                    Add phone numbers for this contact
-                  </p>
-                </div>
-                <div className="form-group">
-                  <label>Email Addresses</label>
-                  <p className="text-muted text-sm">
-                    Add email addresses for this contact
-                  </p>
-                </div>
-              </div>
-
-              <hr />
-
-              {/* Additional Details Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Additional Details</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="timeZone">Time Zone</label>
-                      <select
-                        className="form-control"
-                        id="timeZone"
-                        name="timeZone"
-                        value={formData.timeZone}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select a time zone</option>
-                        <option value="Eastern Standard Time">
-                          (UTC-05:00) Eastern Time (US &amp; Canada)
-                        </option>
-                        <option value="Central Standard Time">
-                          (UTC-06:00) Central Time (US &amp; Canada)
-                        </option>
-                        <option value="Mountain Standard Time">
-                          (UTC-07:00) Mountain Time (US &amp; Canada)
-                        </option>
-                        <option value="Pacific Standard Time">
-                          (UTC-08:00) Pacific Time (US &amp; Canada)
-                        </option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="smsAddress">SMS Address</label>
-                      <div className="input-group">
-                        <input
-                          className="form-control"
-                          type="email"
-                          id="smsAddress"
-                          name="smsAddress"
-                          value={formData.smsAddress || ""}
-                          onChange={handleChange}
-                          placeholder="13625550100@providerdomain.com"
-                        />
-                        <span className="input-group-btn">
-                          <button
-                            type="button"
-                            title="Test SMS Text Message"
-                            className="btn btn-primary"
-                          >
-                            <i className="fa fa-comment"></i>
-                          </button>
-                        </span>
-                      </div>
-                      <span className="form-control-label">
-                        Do not include brackets or dashes for the number.
-                      </span>
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <span className="input-counter">2048</span>
-                      <label htmlFor="website">Website</label>
-                      <input
-                        className="form-control"
-                        type="url"
-                        id="website"
-                        name="website"
-                        value={formData.website || ""}
-                        onChange={handleChange}
-                        placeholder="http://"
-                      />
-                      <span className="form-control-label">
-                        Make sure to include the protocol (http://)
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <hr />
-
-              {/* Social Media Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Social Media</strong>
-                  </h5>
-                </div>
-                <p className="text-muted text-sm">
-                  Enter the full URL of the Social Media profile you wish to
-                  link.
-                </p>
-                <div className="row">
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="facebookUrl">Facebook</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="facebookUrl"
-                        name="facebookUrl"
-                        value={formData.facebookUrl || ""}
-                        onChange={handleChange}
-                        placeholder="Enter Facebook URL"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="linkedInUrl">LinkedIn</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="linkedInUrl"
-                        name="linkedInUrl"
-                        value={formData.linkedInUrl || ""}
-                        onChange={handleChange}
-                        placeholder="Enter LinkedIn URL"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="twitterUrl">Twitter</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="twitterUrl"
-                        name="twitterUrl"
-                        value={formData.twitterUrl || ""}
-                        onChange={handleChange}
-                        placeholder="Enter Twitter URL"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <hr />
-
-              {/* Action Buttons */}
-              <div className="form-group text-right">
-                <span className="text-pad-right text-sm">
-                  All fields marked with a <span className="required-field"></span> are
-                  required.
-                </span>
-                <button
-                  type="submit"
-                  className="btn btn-lg btn-success"
-                  disabled={loading}
-                >
-                  {loading ? "Saving..." : isEdit ? "Update" : "Create"}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ContactFormPage;
-
diff --git a/src/pages/contacts/list/Delete.js b/src/pages/contacts/list/Delete.js
deleted file mode 100644
index 394ae1a9..00000000
--- a/src/pages/contacts/list/Delete.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { deleteContact } from "./api";
-
-export default function DeleteModal({ open, item, onClose, onSuccess }) {
-  if(!open) return null;
-  const handleDelete=()=>{ deleteContact(item.id).then(()=>onSuccess()); };
-  return (
-    <div className="modalRoot">
-      <div className="modalScrim" onClick={onClose}/>
-      <div className="modalCard">
-        <div className="modalHeader"><div className="modalTitle">Delete Item?</div><button onClick={onClose}>✕</button></div>
-        <div className="modalBody">
-          <div>Are you sure you want to delete this contact?</div>
-          <div className="modalActions">
-            <button onClick={onClose}>Cancel</button>
-            <button onClick={handleDelete}>Delete</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/contacts/list/Form.js b/src/pages/contacts/list/Form.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/pages/contacts/list/List.js b/src/pages/contacts/list/List.js
deleted file mode 100644
index e087c962..00000000
--- a/src/pages/contacts/list/List.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import usePaginatedList from "../../../hooks/usePaginatedList";
-import { fetchContactsPaged } from "./api";
-import Table from "./Table";
-import ActionBar from "../../../components/ActionBar";
-import "./styles.css";
-
-export default function ContactsList() {
-  const navigate = useNavigate();
-  const { rows, search, setSearch, page, setPage, pageSize, setPageSize,
-    totalCount, loading, err } = usePaginatedList(fetchContactsPaged);
-
-  const [viewMode, setViewMode] = useState("list");
-  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
-
-  return (
-    <>
-      <ActionBar
-        moduleName="Contacts"
-        moduleIcon="fa-address-card"
-        onNew={() => navigate("/contacts/new")}
-        onBulkEdit={() => console.log("Bulk edit")}
-        selectedCount={0}
-      />
-
-      <section className="listPage">
-        <div className="breadcrumb">
-          <span className="breadcrumbItem active">Contacts</span>
-        </div>
-
-        <div className="searchSection">
-          <div className="searchHeader">
-            <h3 className="searchHeading">
-              <span className="fa-stack iconStack">
-                <i className="fa fa-square fa-stack-2x text-primary"></i>
-                <i className="fa fa-address-card fa-stack-1x fa-inverse"></i>
-              </span>
-              <span>Search for Contacts</span>
-            </h3>
-            <span className="searchSubheading">Use the settings menu to adjust how to filter the list, and which columns to display.</span>
-          </div>
-
-          <div className="searchControls">
-            <div className="searchLeft">
-              <div className="searchInputGroup">
-                <select className="searchDropdown" defaultValue="Name">
-                  <option>Name</option>
-                  <option>Account</option>
-                  <option>Owner</option>
-                  <option>Email</option>
-                  <option>Phone</option>
-                  <option>Title</option>
-                </select>
-                <input
-                  className="searchInput"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Enter search criteria here..."
-                />
-                <button className="searchButton">Search!</button>
-              </div>
-              <div className="viewToggle">
-                <button
-                  className={`viewBtn ${viewMode === "list" ? "active" : ""}`}
-                  title="List view"
-                  onClick={() => setViewMode("list")}
-                >
-                  <i className="fa fa-navicon"></i>
-                </button>
-                <button
-                  className={`viewBtn ${viewMode === "card" ? "active" : ""}`}
-                  title="Card view"
-                  onClick={() => setViewMode("card")}
-                >
-                  <i className="fa fa-th-large"></i>
-                </button>
-              </div>
-            </div>
-
-            <div className="searchRight">
-              <div className="paginationTop">
-                <button
-                  className="pageBtn"
-                  disabled={page === 1}
-                  onClick={() => setPage(page - 1)}
-                >
-                  «
-                </button>
-                <span className="pageNumber">{page}</span>
-                <button
-                  className="pageBtn"
-                  disabled={page >= totalPages}
-                  onClick={() => setPage(page + 1)}
-                >
-                  »
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <Table loading={loading} error={err} rows={rows}
-          onEdit={(item) => navigate(`/contacts/edit/${item.id}`)}
-          onDelete={(item) => console.log("Delete", item)}
-          page={page} setPage={setPage}
-          pageSize={pageSize} setPageSize={setPageSize}
-          totalCount={totalCount} totalPages={totalPages} />
-      </section>
-    </>
-  );
-}
diff --git a/src/pages/contacts/list/Table.js b/src/pages/contacts/list/Table.js
deleted file mode 100644
index 9c48c523..00000000
--- a/src/pages/contacts/list/Table.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import SharedTable from "../../../components/SharedTable";
-
-export default function Table({ loading, error, rows, onEdit, onDelete,
-  page, setPage, pageSize, setPageSize, totalCount, totalPages }) {
-
-  const columns = [
-    { key: "name", label: "Name", render: (val, row) => <strong><a href="#" onClick={(e) => { e.preventDefault(); onEdit && onEdit(row); }}>{val}</a></strong> },
-    { key: "account", label: "Account" },
-    { key: "title", label: "Title" },
-    { key: "email", label: "Email" },
-    { key: "phoneNumber", label: "Phone" },
-    { key: "owner", label: "Owner" },
-  ];
-
-  return (
-    <SharedTable
-      rows={rows}
-      columns={columns}
-      onEdit={onEdit}
-      onDelete={onDelete}
-      page={page}
-      setPage={setPage}
-      pageSize={pageSize}
-      setPageSize={setPageSize}
-      totalCount={totalCount}
-      loading={loading}
-      error={error}
-    />
-  );
-}
diff --git a/src/pages/contacts/list/api.js b/src/pages/contacts/list/api.js
deleted file mode 100644
index 726de4d9..00000000
--- a/src/pages/contacts/list/api.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { get, post } from "../../../apiUtil";
-import { API_URL } from '../../../constants';
-
-
-export const fetchContactsPaged = async ({ search = "", page = 1, pageSize = 12 }) => {
-  const res = await get(`${API_URL}/Contact/GetContactList?search=${encodeURIComponent(search)}&page=${page}&pageSize=${pageSize}`);
-  const rows = (res?.data || res?.Data || []).map(x => ({
-    id: x.id,
-    name: x.name,
-    account: x.account ?? "",
-    title: x.title ?? "",
-    email: x.email ?? "",
-    phoneNumber: x.phone ?? "",
-    owner: x.owner ?? "",
-  }));
-  return {
-    rows,
-    page: res?.pageNumber ?? 1,
-    pageSize: res?.pageSize ?? pageSize,
-    totalCount: res?.totalCount ?? rows.length,
-    totalPages: res?.totalPages ?? 1,
-  };
-};
-
-
-export const deleteContact = (id) =>
-  get(`/api/Contact/DeleteContacts?id=${id}`);
diff --git a/src/pages/contacts/list/styles.css b/src/pages/contacts/list/styles.css
deleted file mode 100644
index aa78320a..00000000
--- a/src/pages/contacts/list/styles.css
+++ /dev/null
@@ -1,231 +0,0 @@
-/* Modal styles for Contacts module */
-.modalRoot{position:fixed;inset:0;z-index:1000;}
-.modalScrim{position:absolute;inset:0;background:rgba(0,0,0,.3);}
-.modalCard{position:relative;margin:10% auto;padding:20px;background:#fff;width:400px;}
-
-/* Override listPage padding for this module */
-.listPage {
-  padding: 0 !important;
-  background: white !important;
-  min-height: auto !important;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  background: white;
-  padding: 10px 20px;
-  margin: 0;
-  border-bottom: 1px solid #e5e5e5;
-  font-size: 13px;
-}
-
-.breadcrumbItem {
-  color: #333;
-}
-
-.breadcrumbItem.active {
-  cursor: default;
-  font-weight: bold;
-  color: #00a0d1;
-}
-
-/* Search Section Styles */
-.searchSection {
-  background: white;
-  padding: 20px;
-  margin-bottom: 0;
-  border-bottom: 1px solid #e5e5e5;
-  position: relative;
-  z-index: 1;
-}
-
-.searchHeader {
-  margin-bottom: 20px;
-}
-
-.searchHeading {
-  font-size: 24px;
-  font-weight: 300;
-  margin: 0 0 8px 0;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.iconStack {
-  font-size: 0.9em;
-}
-
-.text-primary {
-  color: #0088cc;
-}
-
-.fa-inverse {
-  color: white;
-}
-
-.searchSubheading {
-  color: #666;
-  font-size: 14px;
-  display: block;
-  margin-left: 45px;
-}
-
-.searchControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 20px;
-}
-
-.searchLeft {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  flex: 1;
-}
-
-.searchInputGroup {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  flex: 1;
-  max-width: 600px;
-}
-
-.searchDropdown {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  background: white;
-  font-size: 14px;
-  min-width: 120px;
-}
-
-.searchInput {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-left: none;
-  border-right: 1px solid #ccc;
-  flex: 1;
-  font-size: 14px;
-  outline: none;
-}
-
-.searchInput:focus {
-  border-color: #66afe9;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-}
-
-.searchButton {
-  height: 38px;
-  padding: 6px 20px;
-  background: #0088cc;
-  color: white;
-  border: 1px solid #0088cc;
-  border-radius: 0 4px 4px 0;
-  font-size: 14px;
-  cursor: pointer;
-  white-space: nowrap;
-  margin-left: 20px;
-}
-
-.searchButton:hover {
-  background: #0077b3;
-  border-color: #0077b3;
-}
-
-.viewToggle {
-  display: flex;
-  border: 1px solid #0088cc;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.viewBtn {
-  width: 40px;
-  height: 38px;
-  background: white;
-  border: none;
-  border-right: 1px solid #0088cc;
-  color: #0088cc;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.viewBtn:last-child {
-  border-right: none;
-}
-
-.viewBtn.active {
-  background: #0088cc;
-  color: white;
-}
-
-.viewBtn:hover:not(.active) {
-  background: #e6f2f8;
-}
-
-.searchRight {
-  display: flex;
-  align-items: center;
-}
-
-.paginationTop {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 0;
-}
-
-.pageBtn {
-  width: 35px;
-  height: 36px;
-  background: white;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  color: #0088cc;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pageBtn:hover:not(:disabled) {
-  background: #e6f2f8;
-}
-
-.pageBtn:disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-
-.pageNumber {
-  min-width: 35px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #0088cc;
-  color: white;
-  font-size: 14px;
-  border-left: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-}
-
-/* Table wrapper */
-.tableContainer {
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 0;
-  margin: 0;
-}
diff --git a/src/pages/contacts/new/api.js b/src/pages/contacts/new/api.js
deleted file mode 100644
index dd9639f8..00000000
--- a/src/pages/contacts/new/api.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import {post } from "../../../apiUtil";
-import { API_URL } from '../../../constants';
-
-export const addContact = (item) => post(`${API_URL}/Contact/AddContacts`, item);
\ No newline at end of file
diff --git a/src/pages/dashboard/Dashboard.css b/src/pages/dashboard/Dashboard.css
deleted file mode 100644
index 18845d08..00000000
--- a/src/pages/dashboard/Dashboard.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/* Dashboard Styles */
-
-.dashboard-container {
-  padding: 20px;
-}
-
-.kpi-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
-  margin-bottom: 30px;
-}
-
-.kpi-card {
-  background: white;
-  border-radius: 8px;
-  padding: 20px;
-  text-align: center;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.kpi-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}
-
-.kpi-label {
-  font-size: 12px;
-  color: #666;
-  margin-bottom: 8px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.kpi-value {
-  font-size: 32px;
-  font-weight: bold;
-  color: #003a5d;
-}
-
-.analytics-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-}
-
-.analysis-card {
-  background: white;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.analysis-card h3 {
-  margin: 0 0 20px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-@media (max-width: 768px) {
-  .analytics-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .kpi-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
diff --git a/src/pages/dashboard/Dashboard.js b/src/pages/dashboard/Dashboard.js
deleted file mode 100644
index 80d16d53..00000000
--- a/src/pages/dashboard/Dashboard.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { getDashboardKPIs, getPriorityAnalysis, getInvoiceAnalysis } from "./api";
-import "./Dashboard.css";
-
-export default function Dashboard() {
-  const [kpis, setKpis] = useState(null);
-  const [priorityData, setPriorityData] = useState([]);
-  const [invoiceData, setInvoiceData] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const loadDashboard = async () => {
-      try {
-        const [kpiRes, priorityRes, invoiceRes] = await Promise.all([
-          getDashboardKPIs(),
-          getPriorityAnalysis(),
-          getInvoiceAnalysis(),
-        ]);
-        setKpis(kpiRes);
-        setPriorityData(priorityRes);
-        setInvoiceData(invoiceRes);
-      } catch (err) {
-        console.error("Failed to load dashboard", err);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadDashboard();
-  }, []);
-
-  if (loading) return <div className="loading">Loading dashboard...</div>;
-
-  return (
-    <section className="listPage">
-      <div className="pageTitle">Dashboard</div>
-
-      {/* KPI Cards */}
-      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: "20px", marginBottom: "30px" }}>
-        <div className="card" style={{ padding: "20px", textAlign: "center" }}>
-          <div style={{ fontSize: "12px", color: "#666", marginBottom: "8px" }}>Total Accounts</div>
-          <div style={{ fontSize: "32px", fontWeight: "bold", color: "#003A5D" }}>{kpis?.totalAccounts}</div>
-        </div>
-        <div className="card" style={{ padding: "20px", textAlign: "center" }}>
-          <div style={{ fontSize: "12px", color: "#666", marginBottom: "8px" }}>Active Work Orders</div>
-          <div style={{ fontSize: "32px", fontWeight: "bold", color: "#007bff" }}>{kpis?.activeWorkOrders}</div>
-        </div>
-        <div className="card" style={{ padding: "20px", textAlign: "center" }}>
-          <div style={{ fontSize: "12px", color: "#666", marginBottom: "8px" }}>Completed Orders</div>
-          <div style={{ fontSize: "32px", fontWeight: "bold", color: "#28a745" }}>{kpis?.completedOrders}</div>
-        </div>
-        <div className="card" style={{ padding: "20px", textAlign: "center" }}>
-          <div style={{ fontSize: "12px", color: "#666", marginBottom: "8px" }}>Pending Follow-ups</div>
-          <div style={{ fontSize: "32px", fontWeight: "bold", color: "#ffc107" }}>{kpis?.pendingFollowUps}</div>
-        </div>
-      </div>
-
-      {/* Analytics Tables */}
-      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px" }}>
-        {/* Priority Analysis */}
-        <div className="card" style={{ padding: "20px" }}>
-          <h3 style={{ margin: "0 0 20px 0", fontSize: "16px", fontWeight: 600 }}>Priority Analysis</h3>
-          <table className="dataTable" style={{ width: "100%" }}>
-            <thead>
-              <tr>
-                <th>Priority</th>
-                <th>Count</th>
-                <th>%</th>
-              </tr>
-            </thead>
-            <tbody>
-              {priorityData.map((row, idx) => (
-                <tr key={idx}>
-                  <td>
-                    <span style={{
-                      padding: "4px 12px",
-                      borderRadius: "12px",
-                      fontSize: "12px",
-                      fontWeight: 500,
-                      backgroundColor: row.priority === "Urgent" ? "#dc3545" : row.priority === "High" ? "#ff9800" : row.priority === "Medium" ? "#2196f3" : "#4caf50",
-                      color: "#fff"
-                    }}>
-                      {row.priority}
-                    </span>
-                  </td>
-                  <td style={{ fontWeight: 600 }}>{row.count}</td>
-                  <td>{row.percentage}%</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-
-        {/* Invoice Analysis */}
-        <div className="card" style={{ padding: "20px" }}>
-          <h3 style={{ margin: "0 0 20px 0", fontSize: "16px", fontWeight: 600 }}>Invoice Analysis</h3>
-          <table className="dataTable" style={{ width: "100%" }}>
-            <thead>
-              <tr>
-                <th>Status</th>
-                <th>Amount</th>
-                <th>Count</th>
-              </tr>
-            </thead>
-            <tbody>
-              {invoiceData.map((row, idx) => (
-                <tr key={idx}>
-                  <td>
-                    <span style={{
-                      padding: "4px 12px",
-                      borderRadius: "12px",
-                      fontSize: "12px",
-                      fontWeight: 500,
-                      backgroundColor: row.status === "Paid" ? "#4caf50" : row.status === "Pending" ? "#2196f3" : "#dc3545",
-                      color: "#fff"
-                    }}>
-                      {row.status}
-                    </span>
-                  </td>
-                  <td style={{ fontWeight: 600 }}>${row.amount.toLocaleString()}</td>
-                  <td>{row.count}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/src/pages/dashboard/api.js b/src/pages/dashboard/api.js
deleted file mode 100644
index 10aa4a3a..00000000
--- a/src/pages/dashboard/api.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// Mock dashboard data
-export const getDashboardKPIs = async () => {
-  await new Promise(resolve => setTimeout(resolve, 300));
-  return {
-    totalAccounts: 24,
-    activeWorkOrders: 12,
-    completedOrders: 89,
-    pendingFollowUps: 7,
-  };
-};
-
-export const getPriorityAnalysis = async () => {
-  await new Promise(resolve => setTimeout(resolve, 300));
-  return [
-    { priority: "Urgent", count: 3, percentage: 15 },
-    { priority: "High", count: 5, percentage: 25 },
-    { priority: "Medium", count: 8, percentage: 40 },
-    { priority: "Low", count: 4, percentage: 20 },
-  ];
-};
-
-export const getInvoiceAnalysis = async () => {
-  await new Promise(resolve => setTimeout(resolve, 300));
-  return [
-    { status: "Paid", amount: 15000, count: 8 },
-    { status: "Pending", amount: 8500, count: 5 },
-    { status: "Overdue", amount: 3200, count: 2 },
-  ];
-};
diff --git a/src/pages/employees/api.js b/src/pages/employees/api.js
deleted file mode 100644
index d2e944cb..00000000
--- a/src/pages/employees/api.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import { employeeApi } from "../../services/api";
-
-// Transform backend data to frontend format
-const transformEmployee = (employee) => {
-  if (!employee) return null;
-
-  return {
-    id: employee.id,
-    name: `${employee.firstName || ""} ${employee.lastName || ""}`.trim(),
-    email: employee.email || "",
-    phone: employee.phone || "",
-    jobTitle: employee.jobTitle || "",
-    role: employee.role || "",
-    status: employee.status || "",
-    hireDate: employee.hireDate || "",
-    address: employee.address || "",
-    department: employee.department || "",
-    // Include all other fields for form editing
-    firstName: employee.firstName || "",
-    middleName: employee.middleName || "",
-    lastName: employee.lastName || "",
-    dateOfBirth: employee.dateOfBirth || "",
-    street: employee.street || "",
-    streetLineTwo: employee.streetLineTwo || "",
-    city: employee.city || "",
-    state: employee.state || "",
-    zipCode: employee.zipCode || "",
-    country: employee.country || "US",
-    county: employee.county || "",
-    timeZone: employee.timeZone || "Eastern Standard Time",
-    gender: employee.gender || "",
-    employeeNumber: employee.employeeNumber || "",
-    regionName: employee.regionName || "",
-    userName: employee.userName || "",
-    smsAddress: employee.smsAddress || "",
-    website: employee.website || "",
-    facebookUrl: employee.facebookUrl || "",
-    linkedInUrl: employee.linkedInUrl || "",
-    twitterUrl: employee.twitterUrl || "",
-  };
-};
-
-// Transform frontend data to backend format
-const transformToBackend = (employee) => {
-  return {
-    id: employee.id,
-    firstName: employee.firstName || "",
-    middleName: employee.middleName || null,
-    lastName: employee.lastName || "",
-    email: employee.email || "",
-    phone: employee.phone || "",
-    jobTitle: employee.jobTitle || "",
-    role: employee.role || "Technician",
-    status: employee.status || "Active",
-    hireDate: employee.hireDate || null,
-    dateOfBirth: employee.dateOfBirth || null,
-    address: employee.address || "",
-    street: employee.street || "",
-    streetLineTwo: employee.streetLineTwo || null,
-    city: employee.city || "",
-    state: employee.state || "",
-    zipCode: employee.zipCode || "",
-    country: employee.country || "US",
-    county: employee.county || null,
-    department: employee.department || "Field Service",
-    timeZone: employee.timeZone || "Eastern Standard Time",
-    gender: employee.gender || null,
-    employeeNumber: employee.employeeNumber || null,
-    regionName: employee.regionName || null,
-    userName: employee.userName || employee.email || "",
-    smsAddress: employee.smsAddress || null,
-    website: employee.website || null,
-    facebookUrl: employee.facebookUrl || null,
-    linkedInUrl: employee.linkedInUrl || null,
-    twitterUrl: employee.twitterUrl || null,
-  };
-};
-
-export const getEmployees = async (params = {}) => {
-  try {
-    const response = await employeeApi.getAll(params);
-    // Handle both paginated and non-paginated responses
-    const employees = response.data || response;
-    return Array.isArray(employees) ? employees.map(transformEmployee) : [];
-  } catch (error) {
-    console.error("Error fetching employees:", error);
-    throw error;
-  }
-};
-
-export const getEmployeeById = async (id) => {
-  try {
-    const employee = await employeeApi.getById(id);
-    return transformEmployee(employee);
-  } catch (error) {
-    console.error("Error fetching employee:", error);
-    throw error;
-  }
-};
-
-export const addEmployee = async (employee) => {
-  try {
-    const backendData = transformToBackend(employee);
-    const created = await employeeApi.create(backendData);
-    return transformEmployee(created);
-  } catch (error) {
-    console.error("Error creating employee:", error);
-    throw error;
-  }
-};
-
-export const editEmployee = async (employee) => {
-  try {
-    const backendData = transformToBackend(employee);
-    const updated = await employeeApi.update(employee.id, backendData);
-    return transformEmployee(updated);
-  } catch (error) {
-    console.error("Error updating employee:", error);
-    throw error;
-  }
-};
-
-export const deleteEmployee = async (id) => {
-  try {
-    await employeeApi.delete(id);
-    return true;
-  } catch (error) {
-    console.error("Error deleting employee:", error);
-    throw error;
-  }
-};
diff --git a/src/pages/employees/edit/api.js b/src/pages/employees/edit/api.js
deleted file mode 100644
index 7da1e39c..00000000
--- a/src/pages/employees/edit/api.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { post } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const editEmployee = async (payload) => {
-  return post(`${API_URL}/Employee/UpdateEmployee`, payload);
-};
diff --git a/src/pages/employees/form/ContactFormPage.css b/src/pages/employees/form/ContactFormPage.css
deleted file mode 100644
index 790e2fc1..00000000
--- a/src/pages/employees/form/ContactFormPage.css
+++ /dev/null
@@ -1,180 +0,0 @@
-/* Wrapper & card */
-.contactFormWrapper {
-  display: flex;
-  justify-content: center;
-  padding: 25px 20px;
-  background: #f5f6fa;
-  min-height: 100vh;
-  font-family: "Roboto", "Open Sans", Arial, sans-serif;
-}
-
-.formCard {
-  background: #fff;
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-  width: 100%;
-  max-width: 1100px;
-  padding: 20px 22px 26px;
-  border: 1px solid #e6e9ee;
-}
-
-/* Header */
-.formHeader {
-  padding-bottom: 10px;
-  border-bottom: 1px solid #e9ecef;
-  margin-bottom: 16px;
-}
-.formHeader h2 {
-  margin: 0;
-  color: #1f3b4d;
-  font-size: 20px;
-  font-weight: 600;
-}
-
-/* Section titles */
-.sectionTitle {
-  margin: 0 0 12px;
-  color: #2b2f3b;
-  font-size: 13px;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  font-weight: 700;
-}
-
-/* Account widget (assignment) */
-.account-widget {
-  display: flex;
-  gap: 14px;
-  align-items: center;
-  padding: 12px;
-  border-radius: 4px;
-  background: #fbfcfd;
-  border: 1px dashed #d6e6ef;
-  color: #0a4b6b;
-}
-.account-icon {
-  width: 48px;
-  height: 48px;
-  background: #e9f4fb;
-  color: #0077a8;
-  border-radius: 4px;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  font-size:20px;
-}
-.account-info .account-title {
-  font-weight:700;
-}
-.account-info .account-action {
-  color: #0b63a7;
-  font-weight:700;
-  margin-top:4px;
-}
-.account-sub {
-  color:#667085;
-  font-size:12px;
-  margin-top:4px;
-}
-
-/* Form layout */
-.contactFormBody {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 12px 18px;
-  align-items: start;
-  margin-bottom: 6px;
-}
-
-/* Form groups */
-.formGroup {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 8px;
-}
-.formGroup.fullWidth {
-  grid-column: 1 / -1;
-}
-
-/* Labels and controls */
-.formLabel {
-  font-size: 13px;
-  font-weight: 600;
-  color: #253244;
-  margin-bottom: 6px;
-}
-.required { color: #d93025; margin-left: 4px; }
-
-.formControl {
-  display: block;
-  width: 100%;
-  height: 36px;
-  padding: 6px 10px;
-  font-size: 13px;
-  color: #1f2937;
-  background: #fff;
-  border: 1px solid #d6dbe4;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-.formControl:focus {
-  outline: none;
-  border-color: #0b78b0;
-  box-shadow: 0 0 0 4px rgba(11,120,176,0.08);
-}
-
-/* Hints / muted */
-.muted {
-  color: #6b7280;
-  font-size: 13px;
-  margin-bottom: 8px;
-}
-.formHint {
-  font-size: 12px;
-  color: #6b7280;
-  margin-top: 6px;
-}
-
-/* Form actions */
-.formActions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-top: 1px solid #e9eef3;
-  padding-top: 14px;
-  margin-top: 14px;
-}
-.formNote {
-  color: #555;
-  font-size: 13px;
-}
-.btnPrimary {
-  background-color: #198754;
-  border: 1px solid #198754;
-  color: #fff;
-  padding: 10px 18px;
-  font-size: 14px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.btnPrimary:disabled {
-  background-color: #c9c9c9;
-  border-color: #c9c9c9;
-  cursor: not-allowed;
-}
-
-/* Responsive adjustments */
-@media (max-width: 992px) {
-  .contactFormBody {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 640px) {
-  .contactFormBody {
-    grid-template-columns: 1fr;
-  }
-  .formCard {
-    padding: 16px;
-  }
-}
\ No newline at end of file
diff --git a/src/pages/employees/form/EmployeeFormPage.css b/src/pages/employees/form/EmployeeFormPage.css
deleted file mode 100644
index 7338b9d2..00000000
--- a/src/pages/employees/form/EmployeeFormPage.css
+++ /dev/null
@@ -1,418 +0,0 @@
-/* Employee Form Page */
-.employeeFormPage {
-  background: #f5f5f5;
-  min-height: 100vh;
-  padding: 0;
-}
-
-.panel {
-  margin-bottom: 20px;
-  background-color: #fff;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-
-.panel-default {
-  border-color: #ddd;
-}
-
-.panel-connected {
-  border-radius: 0;
-  border: none;
-  box-shadow: none;
-}
-
-.panel-body {
-  padding: 15px;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  padding: 8px 15px;
-  margin-bottom: 20px;
-  list-style: none;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-}
-
-.breadcrumb-alt {
-  background-color: white;
-  border-bottom: 1px solid #e5e5e5;
-  padding: 10px 20px;
-  margin: 0 0 20px 0;
-  border-radius: 0;
-}
-
-.breadcrumb > li {
-  display: inline-block;
-}
-
-.breadcrumb > li + li:before {
-  content: ">\00a0";
-  padding: 0 5px;
-  color: #ccc;
-}
-
-.breadcrumb > li a {
-  color: #0088cc;
-  text-decoration: none;
-}
-
-.breadcrumb > li a:hover {
-  text-decoration: underline;
-}
-
-.breadcrumb > .active {
-  color: #00a0d1;
-  font-weight: bold;
-  cursor: default;
-}
-
-/* Container */
-.container {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-/* Form Header */
-.header {
-  margin-bottom: 15px;
-}
-
-.heading {
-  margin: 0 0 10px 0;
-  font-weight: 300;
-  line-height: 1.1;
-  color: #333;
-}
-
-.heading.thin {
-  font-weight: 300;
-  font-size: 24px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.heading.text-uppercase {
-  text-transform: uppercase;
-  font-size: 14px;
-  margin-bottom: 15px;
-}
-
-.text-primary {
-  color: #0088cc;
-}
-
-.fa-stack {
-  position: relative;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  line-height: 2em;
-  vertical-align: middle;
-}
-
-.fa-stack-1x,
-.fa-stack-2x {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-
-.fa-stack-2x {
-  font-size: 2em;
-}
-
-.fa-stack-1x {
-  font-size: 1em;
-  line-height: inherit;
-}
-
-.fa-inverse {
-  color: #fff;
-}
-
-/* Form Groups */
-.form-group {
-  margin-bottom: 15px;
-  position: relative;
-}
-
-/* Row and Columns */
-.row {
-  margin-right: -15px;
-  margin-left: -15px;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.row::after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-[class*="col-"] {
-  position: relative;
-  min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
-}
-
-.col-sm-2 {
-  width: 16.66666667%;
-}
-
-.col-sm-4 {
-  width: 33.33333333%;
-}
-
-.col-sm-5 {
-  width: 41.66666667%;
-}
-
-.col-sm-6 {
-  width: 50%;
-}
-
-@media (min-width: 992px) {
-  .col-md-4 {
-    width: 33.33333333%;
-  }
-}
-
-/* Labels */
-label {
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: 5px;
-  font-weight: 600;
-  font-size: 13px;
-  color: #333;
-}
-
-.required-field::after {
-  content: " *";
-  color: #d9534f;
-}
-
-/* Input Counter */
-.input-counter {
-  position: absolute;
-  top: 0;
-  right: 15px;
-  font-size: 11px;
-  color: #999;
-  z-index: 10;
-}
-
-/* Form Controls */
-.form-control {
-  display: block;
-  width: 100%;
-  height: 34px;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 1.42857143;
-  color: #555;
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  box-sizing: border-box;
-}
-
-.form-control:focus {
-  border-color: #66afe9;
-  outline: 0;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-}
-
-select.form-control {
-  height: 34px;
-  padding: 6px 12px;
-}
-
-/* Form Actions */
-.form-actions {
-  padding: 19px 20px 20px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border-top: 1px solid #e5e5e5;
-  text-align: right;
-}
-
-/* Buttons */
-.btn {
-  display: inline-block;
-  padding: 6px 12px;
-  margin-bottom: 0;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.42857143;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  user-select: none;
-}
-
-.btn:focus,
-.btn:active:focus {
-  outline: thin dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-
-.btn:hover,
-.btn:focus {
-  color: #333;
-  text-decoration: none;
-}
-
-.btn-default {
-  color: #333;
-  background-color: #fff;
-  border-color: #ccc;
-}
-
-.btn-default:hover,
-.btn-default:focus {
-  color: #333;
-  background-color: #e6e6e6;
-  border-color: #adadad;
-}
-
-.btn-primary {
-  color: #fff;
-  background-color: #0088cc;
-  border-color: #0088cc;
-}
-
-.btn-primary:hover,
-.btn-primary:focus {
-  color: #fff;
-  background-color: #006699;
-  border-color: #005580;
-}
-
-.btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.65;
-  box-shadow: none;
-}
-
-/* Sub-heading */
-.sub-heading {
-  color: #666;
-  font-size: 13px;
-  margin-top: 5px;
-  margin-bottom: 10px;
-}
-
-/* Input Group */
-.input-group {
-  position: relative;
-  display: table;
-  border-collapse: separate;
-  width: 100%;
-}
-
-.input-group .form-control {
-  position: relative;
-  z-index: 2;
-  float: left;
-  width: 100%;
-  margin-bottom: 0;
-  display: table-cell;
-}
-
-.input-group-btn {
-  position: relative;
-  font-size: 0;
-  white-space: nowrap;
-  width: 1%;
-  vertical-align: middle;
-  display: table-cell;
-}
-
-.input-group-btn > .btn {
-  position: relative;
-  border-radius: 0 4px 4px 0;
-}
-
-.input-group .form-control:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-/* Form Control Label */
-.form-control-label {
-  display: block;
-  margin-top: 5px;
-  font-size: 12px;
-  color: #666;
-}
-
-/* Text Utilities */
-.text-muted {
-  color: #777;
-}
-
-.text-sm {
-  font-size: 13px;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-pad-right {
-  padding-right: 10px;
-}
-
-/* Button Success */
-.btn-success {
-  color: #fff;
-  background-color: #5cb85c;
-  border-color: #4cae4c;
-}
-
-.btn-success:hover,
-.btn-success:focus {
-  color: #fff;
-  background-color: #449d44;
-  border-color: #398439;
-}
-
-.btn-lg {
-  padding: 10px 16px;
-  font-size: 18px;
-  line-height: 1.33;
-  border-radius: 6px;
-}
-
-/* HR */
-hr {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border: 0;
-  border-top: 1px solid #e5e5e5;
-}
-
-/* Responsive */
-@media (max-width: 767px) {
-  [class*="col-sm-"] {
-    width: 100%;
-  }
-}
-
diff --git a/src/pages/employees/form/EmployeeFormPage.js b/src/pages/employees/form/EmployeeFormPage.js
deleted file mode 100644
index a4fdb6f0..00000000
--- a/src/pages/employees/form/EmployeeFormPage.js
+++ /dev/null
@@ -1,682 +0,0 @@
-import { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import { getEmployeeById, addEmployee, editEmployee } from "../api";
-import "./EmployeeFormPage.css";
-
-export default function EmployeeFormPage() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const isEdit = !!id;
-
-  const [formData, setFormData] = useState({
-    firstName: "",
-    middleName: "",
-    lastName: "",
-    email: "",
-    phone: "",
-    jobTitle: "",
-    role: "Technician",
-    status: "Active",
-    hireDate: "",
-    dateOfBirth: "",
-    address: "",
-    department: "Field Service",
-    timeZone: "Eastern Standard Time",
-    gender: "",
-    employeeNumber: "",
-    regionName: "",
-    userName: "",
-    confirmUserName: "",
-    street: "",
-    streetLineTwo: "",
-    city: "",
-    zip: "",
-    country: "US",
-    state: "",
-    county: "",
-    smsAddress: "",
-    website: "",
-    facebookUrl: "",
-    linkedInUrl: "",
-    twitterUrl: "",
-  });
-
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (isEdit && id) {
-      const loadEmployee = async () => {
-        try {
-          const employee = await getEmployeeById(id);
-          if (employee) {
-            setFormData(prev => {
-              const merged = { ...prev };
-              for (const key of Object.keys(merged)) {
-                if (employee[key] != null) merged[key] = employee[key];
-              }
-              return merged;
-            });
-          }
-        } catch (err) {
-          console.error("Failed to load employee", err);
-          toast.error("Failed to load employee");
-        }
-      };
-      loadEmployee();
-    }
-  }, [id, isEdit]);
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
-
-  const handleSave = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-
-    try {
-      if (isEdit) {
-        await editEmployee(formData);
-        toast.success("Employee updated successfully!");
-      } else {
-        await addEmployee(formData);
-        toast.success("Employee created successfully!");
-      }
-      navigate("/employees");
-    } catch (err) {
-      console.error(err);
-      toast.error("Failed to save employee");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCancel = () => {
-    navigate("/employees");
-  };
-
-  return (
-    <div className="employeeFormPage">
-      <div className="panel panel-default panel-connected">
-        <div className="panel-body">
-          <ol className="breadcrumb breadcrumb-alt">
-            <li>
-              <a href="#" onClick={(e) => { e.preventDefault(); navigate("/employees"); }}>
-                Employees
-              </a>
-            </li>
-            <li className="active">{isEdit ? "Edit" : "Create"}</li>
-          </ol>
-
-          <div className="container">
-            <form onSubmit={handleSave}>
-              {/* Page Header */}
-              <div className="form-group">
-                <div className="header">
-                  <h3 className="heading thin">
-                    <span className="fa-stack" style={{ fontSize: "0.9em" }}>
-                      <i className="fa fa-square fa-stack-2x text-primary"></i>
-                      <i className={`fa fa-${isEdit ? "edit" : "plus"} fa-stack-1x fa-inverse`}></i>
-                    </span>
-                    <span>{isEdit ? "Edit an Employee" : "Create an Employee"}</span>
-                  </h3>
-                </div>
-              </div>
-
-              {/* General Details Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>General Details</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-5">
-                    <div className="form-group">
-                      <span className="input-counter">46</span>
-                      <label className="required-field" htmlFor="firstName">First Name</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="firstName"
-                        name="firstName"
-                        value={formData.firstName}
-                        onChange={handleChange}
-                        placeholder="Enter first name"
-                        required
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-2">
-                    <div className="form-group">
-                      <span className="input-counter">50</span>
-                      <label htmlFor="middleName">Middle Name</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="middleName"
-                        name="middleName"
-                        value={formData.middleName}
-                        onChange={handleChange}
-                        placeholder="Enter middle name"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-5">
-                    <div className="form-group">
-                      <span className="input-counter">44</span>
-                      <label className="required-field" htmlFor="lastName">Last Name</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="lastName"
-                        name="lastName"
-                        value={formData.lastName}
-                        onChange={handleChange}
-                        placeholder="Enter last name"
-                        required
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <div className="row">
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="department">Department</label>
-                      <select
-                        className="form-control"
-                        id="department"
-                        name="department"
-                        value={formData.department}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select a Department</option>
-                        <option value="Administration">Administration</option>
-                        <option value="Sales">Sales</option>
-                        <option value="Service">Service</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="timeZone">Time Zone</label>
-                      <select
-                        className="form-control"
-                        id="timeZone"
-                        name="timeZone"
-                        value={formData.timeZone}
-                        onChange={handleChange}
-                        required
-                      >
-                        <option value="">Select a time zone</option>
-                        <option value="Eastern Standard Time">(UTC-05:00) Eastern Time (US & Canada)</option>
-                        <option value="Central Standard Time">(UTC-06:00) Central Time (US & Canada)</option>
-                        <option value="Mountain Standard Time">(UTC-07:00) Mountain Time (US & Canada)</option>
-                        <option value="Pacific Standard Time">(UTC-08:00) Pacific Time (US & Canada)</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="gender">Gender</label>
-                      <select
-                        className="form-control"
-                        id="gender"
-                        name="gender"
-                        value={formData.gender}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select a gender</option>
-                        <option value="Male">Male</option>
-                        <option value="Female">Female</option>
-                        <option value="Not specified">Not specified</option>
-                        <option value="Other">Other</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="row">
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="dateOfBirth">Date of Birth</label>
-                      <input
-                        className="form-control"
-                        type="date"
-                        id="dateOfBirth"
-                        name="dateOfBirth"
-                        value={formData.dateOfBirth}
-                        onChange={handleChange}
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="jobTitle">Job Title</label>
-                      <select
-                        className="form-control"
-                        id="jobTitle"
-                        name="jobTitle"
-                        value={formData.jobTitle}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select a Job Title</option>
-                        <option value="Technician">Technician</option>
-                        <option value="Service Associate">Service Associate</option>
-                        <option value="Accountant">Accountant</option>
-                        <option value="Salesperson">Salesperson</option>
-                        <option value="President">President</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <span className="input-counter">50</span>
-                      <label htmlFor="employeeNumber">Employee #</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="employeeNumber"
-                        name="employeeNumber"
-                        value={formData.employeeNumber}
-                        onChange={handleChange}
-                        placeholder="Enter Employee number"
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <div className="row">
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="hireDate">Hire Date</label>
-                      <input
-                        className="form-control"
-                        type="date"
-                        id="hireDate"
-                        name="hireDate"
-                        value={formData.hireDate}
-                        onChange={handleChange}
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="regionName">Region Name</label>
-                      <select
-                        className="form-control"
-                        id="regionName"
-                        name="regionName"
-                        value={formData.regionName}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select a Region Name</option>
-                        <option value="Region 1">Region 1</option>
-                        <option value="Region 2">Region 2</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <hr />
-
-              {/* Login & Role Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Login &amp; Role</strong>
-                  </h5>
-                  <p className="sub-heading">
-                    {isEdit
-                      ? "If the Username is changed, the Employee's account will have to be confirmed again before they can log in. A confirmation email will automatically be sent."
-                      : "A confirmation email will be sent to activate the Employee's account, as well as a temporary password. The Employee's account must be activated before they will be able to log in."}
-                  </p>
-                </div>
-                <div className="row">
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="role">Role</label>
-                      <select
-                        className="form-control"
-                        id="role"
-                        name="role"
-                        value={formData.role}
-                        onChange={handleChange}
-                        required
-                      >
-                        <option value="">Select a role</option>
-                        <option value="Admin">Admin</option>
-                        <option value="Administrator User">Administrator User</option>
-                        <option value="Dispatcher">Dispatcher</option>
-                        <option value="Editor User">Editor User</option>
-                        <option value="Employee">Employee</option>
-                        <option value="Read Only User">Read Only User</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="userName">User Name</label>
-                      <input
-                        className="form-control"
-                        type="email"
-                        id="userName"
-                        name="userName"
-                        value={formData.userName || formData.email}
-                        onChange={handleChange}
-                        placeholder="address@email.com"
-                        required
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="confirmUserName">Confirm User Name</label>
-                      <div className="input-group">
-                        <input
-                          className="form-control"
-                          type="email"
-                          id="confirmUserName"
-                          name="confirmUserName"
-                          value={formData.confirmUserName || formData.email}
-                          onChange={handleChange}
-                          placeholder="address@email.com"
-                          required
-                        />
-                        <span className="input-group-btn">
-                          <button type="button" title="Send Test Email" className="btn btn-primary">
-                            <i className="fa fa-envelope"></i>
-                          </button>
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <hr />
-
-              {/* Address Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Address</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <span className="input-counter">250</span>
-                      <label htmlFor="street">Address 1</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="street"
-                        name="street"
-                        value={formData.street || ""}
-                        onChange={handleChange}
-                        placeholder="Enter street address or P.O. box"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <span className="input-counter">250</span>
-                      <label htmlFor="streetLineTwo">Address 2</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="streetLineTwo"
-                        name="streetLineTwo"
-                        value={formData.streetLineTwo || ""}
-                        onChange={handleChange}
-                        placeholder="Enter apt/unit/suite number (ex. Unit 1)"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <span className="input-counter">100</span>
-                      <label htmlFor="city">City</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="city"
-                        name="city"
-                        value={formData.city || ""}
-                        onChange={handleChange}
-                        placeholder="Enter city name"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <span className="input-counter">20</span>
-                      <label htmlFor="zip">Zip/Postal Code</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="zip"
-                        name="zip"
-                        value={formData.zip || ""}
-                        onChange={handleChange}
-                        placeholder="Enter code"
-                      />
-                    </div>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="country">Country</label>
-                      <select
-                        className="form-control"
-                        id="country"
-                        name="country"
-                        value={formData.country || "US"}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select a Country</option>
-                        <option value="US">United States</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="state">State / Province</label>
-                      <select
-                        className="form-control"
-                        id="state"
-                        name="state"
-                        value={formData.state || ""}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select a State/Province</option>
-                        <option value="AL">Alabama</option>
-                        <option value="AK">Alaska</option>
-                        <option value="AZ">Arizona</option>
-                        <option value="CA">California</option>
-                        <option value="FL">Florida</option>
-                        <option value="NY">New York</option>
-                        <option value="TX">Texas</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="county">County</label>
-                      <select
-                        className="form-control"
-                        id="county"
-                        name="county"
-                        value={formData.county || ""}
-                        onChange={handleChange}
-                      >
-                        <option value="">Select a County</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <hr />
-
-              {/* Phone & Email Communication Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Phone &amp; Email Communication</strong>
-                  </h5>
-                </div>
-                <div className="form-group">
-                  <label>Phone Number</label>
-                  <p className="text-muted text-sm">Add phone numbers for this employee</p>
-                </div>
-                <div className="form-group">
-                  <label>Email Addresses</label>
-                  <p className="text-muted text-sm">Add email addresses for this employee</p>
-                </div>
-              </div>
-
-              <hr />
-
-              {/* Additional Details Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Additional Details</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="smsAddress">SMS Address</label>
-                      <div className="input-group">
-                        <input
-                          className="form-control"
-                          type="email"
-                          id="smsAddress"
-                          name="smsAddress"
-                          value={formData.smsAddress || ""}
-                          onChange={handleChange}
-                          placeholder="13625550100@providerdomain.com"
-                        />
-                        <span className="input-group-btn">
-                          <button type="button" title="Test SMS Text Message" className="btn btn-primary">
-                            <i className="fa fa-comment"></i>
-                          </button>
-                        </span>
-                      </div>
-                      <span className="form-control-label">
-                        Do not include brackets or dashes for the number. Contact your cell provider or visit their support website to find your email to SMS address.
-                      </span>
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <span className="input-counter">2048</span>
-                      <label htmlFor="website">Website</label>
-                      <input
-                        className="form-control"
-                        type="url"
-                        id="website"
-                        name="website"
-                        value={formData.website || ""}
-                        onChange={handleChange}
-                        placeholder="http://"
-                      />
-                      <span className="form-control-label">Make sure to include the protocol (http://)</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <hr />
-
-              {/* Social Media Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Social Media</strong>
-                  </h5>
-                </div>
-                <p className="text-muted text-sm">
-                  Enter the full URL of the Social Media profile you wish to link.
-                </p>
-                <div className="row">
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="facebookUrl">Facebook</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="facebookUrl"
-                        name="facebookUrl"
-                        value={formData.facebookUrl || ""}
-                        onChange={handleChange}
-                        placeholder="Enter Facebook URL"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="linkedInUrl">LinkedIn</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="linkedInUrl"
-                        name="linkedInUrl"
-                        value={formData.linkedInUrl || ""}
-                        onChange={handleChange}
-                        placeholder="Enter LinkedIn URL"
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6 col-md-4">
-                    <div className="form-group">
-                      <label htmlFor="twitterUrl">Twitter</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="twitterUrl"
-                        name="twitterUrl"
-                        value={formData.twitterUrl || ""}
-                        onChange={handleChange}
-                        placeholder="Enter Twitter URL"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <hr />
-
-              {/* Action Buttons */}
-              <div className="form-group text-right">
-                <span className="text-pad-right text-sm">
-                  All fields marked with a <span className="required-field"></span> are required.
-                </span>
-                <button
-                  type="submit"
-                  className="btn btn-lg btn-success"
-                  disabled={loading}
-                >
-                  {loading ? "Saving..." : isEdit ? "Update" : "Create"}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/employees/list/Delete.js b/src/pages/employees/list/Delete.js
deleted file mode 100644
index 394ae1a9..00000000
--- a/src/pages/employees/list/Delete.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { deleteContact } from "./api";
-
-export default function DeleteModal({ open, item, onClose, onSuccess }) {
-  if(!open) return null;
-  const handleDelete=()=>{ deleteContact(item.id).then(()=>onSuccess()); };
-  return (
-    <div className="modalRoot">
-      <div className="modalScrim" onClick={onClose}/>
-      <div className="modalCard">
-        <div className="modalHeader"><div className="modalTitle">Delete Item?</div><button onClick={onClose}>✕</button></div>
-        <div className="modalBody">
-          <div>Are you sure you want to delete this contact?</div>
-          <div className="modalActions">
-            <button onClick={onClose}>Cancel</button>
-            <button onClick={handleDelete}>Delete</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/employees/list/Form.js b/src/pages/employees/list/Form.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/pages/employees/list/List.js b/src/pages/employees/list/List.js
deleted file mode 100644
index a94484d5..00000000
--- a/src/pages/employees/list/List.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import usePaginatedList from "../../../hooks/usePaginatedList";
-import { fetchEmployeesPaged } from "./api";
-import Table from "./Table";
-import DeleteModal from "../../../components/DeleteModal";
-import ActionBar from "../../../components/ActionBar";
-import { deleteEmployee } from "../api";
-import "./styles.css";
-
-export default function EmployeeList() {
-  const navigate = useNavigate();
-  const { rows, search, setSearch, page, setPage, pageSize, setPageSize, totalCount, loading, err, reload } = usePaginatedList(fetchEmployeesPaged);
-  const [deleteModal, setDeleteModal] = useState({ isOpen: false, item: null, loading: false });
-  const [viewMode, setViewMode] = useState("list"); // "list" or "card"
-  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
-
-  const handleDeleteClick = (item) => {
-    setDeleteModal({ isOpen: true, item, loading: false });
-  };
-
-  const handleDeleteConfirm = async () => {
-    setDeleteModal(prev => ({ ...prev, loading: true }));
-    try {
-      await deleteEmployee(deleteModal.item.id);
-      toast.success(`Employee deleted successfully!`);
-      setDeleteModal({ isOpen: false, item: null, loading: false });
-      reload();
-    } catch (err) {
-      console.error(err);
-      toast.error("Failed to delete employee");
-      setDeleteModal(prev => ({ ...prev, loading: false }));
-    }
-  };
-
-  return (
-    <>
-      <ActionBar
-        moduleName="Employees"
-        moduleIcon="fa-user"
-        onNew={() => navigate("/employees/new")}
-        onBulkEdit={() => console.log("Bulk edit")}
-        selectedCount={0}
-      />
-
-      <section className="listPage">
-        <div className="breadcrumb">
-          <span className="breadcrumbItem active">Employees</span>
-        </div>
-
-        <div className="searchSection">
-          <div className="searchHeader">
-            <h3 className="searchHeading">
-              <span className="fa-stack iconStack">
-                <i className="fa fa-square fa-stack-2x text-primary"></i>
-                <i className="fa fa-user fa-stack-1x fa-inverse"></i>
-              </span>
-              <span>Search for Employees</span>
-            </h3>
-            <span className="searchSubheading">Use the settings menu to adjust how to filter the list, and which columns to display.</span>
-          </div>
-
-          <div className="searchControls">
-            <div className="searchLeft">
-              <div className="searchInputGroup">
-                <select className="searchDropdown" defaultValue="Name">
-                  <option>Name</option>
-                  <option>Email</option>
-                  <option>Phone</option>
-                  <option>Role</option>
-                </select>
-                <input
-                  className="searchInput"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Enter search criteria here..."
-                />
-                <button className="searchButton">Search!</button>
-              </div>
-              <div className="viewToggle">
-                <button
-                  className={`viewBtn ${viewMode === "list" ? "active" : ""}`}
-                  title="List view"
-                  onClick={() => setViewMode("list")}
-                >
-                  <i className="fa fa-navicon"></i>
-                </button>
-                <button
-                  className={`viewBtn ${viewMode === "card" ? "active" : ""}`}
-                  title="Card view"
-                  onClick={() => setViewMode("card")}
-                >
-                  <i className="fa fa-th-large"></i>
-                </button>
-              </div>
-            </div>
-
-            <div className="searchRight">
-              <div className="paginationTop">
-                <button
-                  className="pageBtn"
-                  disabled={page === 1}
-                  onClick={() => setPage(page - 1)}
-                >
-                  «
-                </button>
-                <span className="pageNumber">{page}</span>
-                <button
-                  className="pageBtn"
-                  disabled={page >= totalPages}
-                  onClick={() => setPage(page + 1)}
-                >
-                  »
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <Table loading={loading} error={err} rows={rows}
-          onEdit={(item) => navigate(`/employees/edit/${item.id}`)}
-          onDelete={handleDeleteClick}
-          page={page} setPage={setPage} pageSize={pageSize} setPageSize={setPageSize}
-          totalCount={totalCount} totalPages={totalPages} />
-
-        <DeleteModal
-          isOpen={deleteModal.isOpen}
-          onClose={() => setDeleteModal({ isOpen: false, item: null, loading: false })}
-          onConfirm={handleDeleteConfirm}
-          title="Delete Employee"
-          message={`Are you sure you want to delete "${deleteModal.item?.name}"? This action cannot be undone.`}
-          loading={deleteModal.loading}
-        />
-      </section>
-    </>
-  );
-}
diff --git a/src/pages/employees/list/Table.js b/src/pages/employees/list/Table.js
deleted file mode 100644
index d7b71248..00000000
--- a/src/pages/employees/list/Table.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import SharedTable from "../../../components/SharedTable";
-
-export default function Table({ loading, error, rows, onEdit, onDelete,
-  page, setPage, pageSize, setPageSize, totalCount, totalPages }) {
-  
-  const columns = [
-    { key: "name", label: "Name", render: (val, row) => <strong><a href="#" onClick={(e) => { e.preventDefault(); onEdit && onEdit(row); }}>{val}</a></strong> },
-    { key: "jobTitle", label: "Job Title" },
-    { key: "role", label: "Role" },
-    { key: "email", label: "Email" },
-    { key: "phone", label: "Phone" },
-    { key: "status", label: "Status" },
-    { key: "lastLogin", label: "Last Login" },
-  ];
-
-  return (
-    <SharedTable
-      rows={rows}
-      columns={columns}
-      onEdit={onEdit}
-      onDelete={onDelete}
-      page={page}
-      setPage={setPage}
-      pageSize={pageSize}
-      setPageSize={setPageSize}
-      totalCount={totalCount}
-      loading={loading}
-      error={error}
-    />
-  );
-}
diff --git a/src/pages/employees/list/api.js b/src/pages/employees/list/api.js
deleted file mode 100644
index 05a2df17..00000000
--- a/src/pages/employees/list/api.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { get } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const fetchEmployeesPaged = async ({ search = "", page = 1, pageSize = 12 }) => {
-  const res = await get(`${API_URL}/Employee/GetEmployeeList?search=${encodeURIComponent(search)}&page=${page}&pageSize=${pageSize}`);
-  const rows = (res?.data || res?.Data || []).map(x => ({
-    id: x.id,
-    name: `${x.firstName ?? ""} ${x.lastName ?? ""}`.trim(),
-    jobTitle: x.jobTitle ?? "",
-    email: x.email ?? "",
-    phone: x.phone ?? "",
-    department: x.department ?? "",
-    status: x.status ?? "",
-  }));
-  return {
-    rows,
-    page: res?.pageNumber ?? 1,
-    pageSize: res?.pageSize ?? pageSize,
-    totalCount: res?.totalCount ?? rows.length,
-    totalPages: res?.totalPages ?? 1,
-  };
-};
-
-export const deleteEmployee = (id) =>
-  get(`${API_URL}/Employee/DeleteEmployee?id=${id}`);
diff --git a/src/pages/employees/list/styles.css b/src/pages/employees/list/styles.css
deleted file mode 100644
index ac854bf0..00000000
--- a/src/pages/employees/list/styles.css
+++ /dev/null
@@ -1,231 +0,0 @@
-/* Modal styles for Employees module */
-.modalRoot{position:fixed;inset:0;z-index:1000;}
-.modalScrim{position:absolute;inset:0;background:rgba(0,0,0,.3);}
-.modalCard{position:relative;margin:10% auto;padding:20px;background:#fff;width:400px;}
-
-/* Override listPage padding for this module */
-.listPage {
-  padding: 0 !important;
-  background: white !important;
-  min-height: auto !important;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  background: white;
-  padding: 10px 20px;
-  margin: 0;
-  border-bottom: 1px solid #e5e5e5;
-  font-size: 13px;
-}
-
-.breadcrumbItem {
-  color: #333;
-}
-
-.breadcrumbItem.active {
-  cursor: default;
-  font-weight: bold;
-  color: #00a0d1;
-}
-
-/* Search Section Styles */
-.searchSection {
-  background: white;
-  padding: 20px;
-  margin-bottom: 0;
-  border-bottom: 1px solid #e5e5e5;
-  position: relative;
-  z-index: 1;
-}
-
-.searchHeader {
-  margin-bottom: 20px;
-}
-
-.searchHeading {
-  font-size: 24px;
-  font-weight: 300;
-  margin: 0 0 8px 0;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.iconStack {
-  font-size: 0.9em;
-}
-
-.text-primary {
-  color: #0088cc;
-}
-
-.fa-inverse {
-  color: white;
-}
-
-.searchSubheading {
-  color: #666;
-  font-size: 14px;
-  display: block;
-  margin-left: 45px;
-}
-
-.searchControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 20px;
-}
-
-.searchLeft {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  flex: 1;
-}
-
-.searchInputGroup {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  flex: 1;
-  max-width: 600px;
-}
-
-.searchDropdown {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  background: white;
-  font-size: 14px;
-  min-width: 120px;
-}
-
-.searchInput {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-left: none;
-  border-right: 1px solid #ccc;
-  flex: 1;
-  font-size: 14px;
-  outline: none;
-}
-
-.searchInput:focus {
-  border-color: #66afe9;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-}
-
-.searchButton {
-  height: 38px;
-  padding: 6px 20px;
-  background: #0088cc;
-  color: white;
-  border: 1px solid #0088cc;
-  border-radius: 0 4px 4px 0;
-  font-size: 14px;
-  cursor: pointer;
-  white-space: nowrap;
-  margin-left: 20px;
-}
-
-.searchButton:hover {
-  background: #0077b3;
-  border-color: #0077b3;
-}
-
-.viewToggle {
-  display: flex;
-  border: 1px solid #0088cc;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.viewBtn {
-  width: 40px;
-  height: 38px;
-  background: white;
-  border: none;
-  border-right: 1px solid #0088cc;
-  color: #0088cc;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.viewBtn:last-child {
-  border-right: none;
-}
-
-.viewBtn.active {
-  background: #0088cc;
-  color: white;
-}
-
-.viewBtn:hover:not(.active) {
-  background: #e6f2f8;
-}
-
-.searchRight {
-  display: flex;
-  align-items: center;
-}
-
-.paginationTop {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 0;
-}
-
-.pageBtn {
-  width: 35px;
-  height: 36px;
-  background: white;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  color: #0088cc;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pageBtn:hover:not(:disabled) {
-  background: #e6f2f8;
-}
-
-.pageBtn:disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-
-.pageNumber {
-  min-width: 35px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #0088cc;
-  color: white;
-  font-size: 14px;
-  border-left: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-}
-
-/* Table wrapper */
-.tableContainer {
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 0;
-  margin: 0;
-}
diff --git a/src/pages/employees/new/api.js b/src/pages/employees/new/api.js
deleted file mode 100644
index 5f3c6ca2..00000000
--- a/src/pages/employees/new/api.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { post } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const addEmployee = async (payload) => {
-  return post(`${API_URL}/Employee/CreateEmployee`, payload);
-};
diff --git a/src/pages/followup/api.js b/src/pages/followup/api.js
deleted file mode 100644
index 5bc7c488..00000000
--- a/src/pages/followup/api.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { get, post } from "../../apiUtil";
-import { API_URL } from "../../constants";
-
-export const getFollowUpById = id =>
-  get(`${API_URL}/FollowUp/GetById?id=${id}`);
-
-export const addFollowUp = payload =>
-  post(`${API_URL}/FollowUp/Create`, payload);
-
-export const editFollowUp = payload =>
-  post(`${API_URL}/FollowUp/Update`, payload);
-
-export const deleteFollowUp = id =>
-  post(`${API_URL}/FollowUp/Delete?id=${id}`);
-
-export const completeFollowUp = id =>
-  post(`${API_URL}/FollowUp/Complete?id=${id}`);
-
-export const cancelFollowUp = id =>
-  post(`${API_URL}/FollowUp/Cancel?id=${id}`);
diff --git a/src/pages/followup/edit/api.js b/src/pages/followup/edit/api.js
deleted file mode 100644
index 7da1e39c..00000000
--- a/src/pages/followup/edit/api.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { post } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const editEmployee = async (payload) => {
-  return post(`${API_URL}/Employee/UpdateEmployee`, payload);
-};
diff --git a/src/pages/followup/form/FollowUpFormPage.css b/src/pages/followup/form/FollowUpFormPage.css
deleted file mode 100644
index bc823fa6..00000000
--- a/src/pages/followup/form/FollowUpFormPage.css
+++ /dev/null
@@ -1,289 +0,0 @@
-/* Follow-up Form Page - Matching Employee Form Style */
-.followUpFormPage {
-  background: #f5f5f5;
-  min-height: 100vh;
-  padding: 0;
-}
-
-.panel {
-  margin-bottom: 20px;
-  background-color: #fff;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-
-.panel-default {
-  border-color: #ddd;
-}
-
-.panel-connected {
-  border-radius: 0;
-  border: none;
-  box-shadow: none;
-}
-
-.panel-body {
-  padding: 15px;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  padding: 8px 15px;
-  margin-bottom: 20px;
-  list-style: none;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-}
-
-.breadcrumb-alt {
-  background-color: white;
-  border-bottom: 1px solid #e5e5e5;
-  padding: 10px 20px;
-  margin: 0 0 20px 0;
-  border-radius: 0;
-}
-
-.breadcrumb > li {
-  display: inline-block;
-}
-
-.breadcrumb > li + li:before {
-  content: ">\00a0";
-  padding: 0 5px;
-  color: #ccc;
-}
-
-.breadcrumb > li a {
-  color: #0088cc;
-  text-decoration: none;
-}
-
-.breadcrumb > li a:hover {
-  text-decoration: underline;
-}
-
-.breadcrumb > .active {
-  color: #00a0d1;
-  font-weight: bold;
-  cursor: default;
-}
-
-/* Container */
-.container {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-/* Form Header */
-.header {
-  margin-bottom: 15px;
-}
-
-.heading {
-  margin: 0 0 10px 0;
-  font-weight: 300;
-  line-height: 1.1;
-  color: #333;
-}
-
-.heading.thin {
-  font-weight: 300;
-  font-size: 24px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.heading.text-uppercase {
-  text-transform: uppercase;
-  font-size: 14px;
-  margin-bottom: 15px;
-}
-
-.text-primary {
-  color: #0088cc;
-}
-
-.fa-stack {
-  position: relative;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  line-height: 2em;
-  vertical-align: middle;
-}
-
-.fa-stack-1x,
-.fa-stack-2x {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-
-.fa-stack-2x {
-  font-size: 2em;
-}
-
-.fa-stack-1x {
-  font-size: 1em;
-  line-height: inherit;
-}
-
-.fa-inverse {
-  color: #fff;
-}
-
-/* Form Groups */
-.form-group {
-  margin-bottom: 15px;
-  position: relative;
-}
-
-/* Row and Columns */
-.row {
-  margin-right: -15px;
-  margin-left: -15px;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.row::after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-[class*="col-"] {
-  position: relative;
-  min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
-}
-
-.col-sm-4 {
-  width: 33.33333333%;
-}
-
-.col-sm-6 {
-  width: 50%;
-}
-
-@media (min-width: 992px) {
-  .col-md-4 {
-    width: 33.33333333%;
-  }
-}
-
-/* Labels */
-label {
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: 5px;
-  font-weight: 600;
-  font-size: 13px;
-  color: #333;
-}
-
-.required-field::after {
-  content: " *";
-  color: #d9534f;
-}
-
-/* Form Controls */
-.form-control {
-  display: block;
-  width: 100%;
-  height: 34px;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 1.42857143;
-  color: #555;
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  box-sizing: border-box;
-}
-
-.form-control:focus {
-  border-color: #66afe9;
-  outline: 0;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-}
-
-select.form-control {
-  height: 34px;
-  padding: 6px 12px;
-}
-
-textarea.form-control {
-  height: auto;
-  min-height: 100px;
-}
-
-/* Form Actions */
-.form-actions {
-  padding: 19px 20px 20px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border-top: 1px solid #e5e5e5;
-  text-align: right;
-}
-
-/* Buttons */
-.btn {
-  display: inline-block;
-  padding: 6px 12px;
-  margin-bottom: 0;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.42857143;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  user-select: none;
-}
-
-.btn-default {
-  color: #333;
-  background-color: #fff;
-  border-color: #ccc;
-}
-
-.btn-default:hover {
-  background-color: #e6e6e6;
-  border-color: #adadad;
-}
-
-.btn-primary {
-  color: #fff;
-  background-color: #0088cc;
-  border-color: #0088cc;
-}
-
-.btn-primary:hover {
-  background-color: #006699;
-  border-color: #005580;
-}
-
-.btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.65;
-}
-
-/* Responsive */
-@media (max-width: 767px) {
-  [class*="col-sm-"] {
-    width: 100%;
-  }
-}
-
diff --git a/src/pages/followup/form/FollowUpFormPage.js b/src/pages/followup/form/FollowUpFormPage.js
deleted file mode 100644
index 6bbb2810..00000000
--- a/src/pages/followup/form/FollowUpFormPage.js
+++ /dev/null
@@ -1,343 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import { getFollowUpById, addFollowUp, editFollowUp } from "../api";
-import { get } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-import "./FollowUpFormPage.css";
-
-function normalizeId(v) {
-  if (v === "" || v === null || v === undefined) return null;
-  const n = parseInt(v, 10);
-  return Number.isNaN(n) ? null : n;
-}
-
-function toTimeString(t) {
-  if (!t) return "09:00";
-  const m = String(t).match(/^(\d{2}:\d{2})/);
-  return m ? m[1] : "09:00";
-}
-
-export default function FollowUpFormPage() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const isEdit = !!id;
-
-  const [formData, setFormData] = useState({
-    reason: "",
-    scheduleDate: "",
-    scheduleStartTime: "09:00",
-    employeeId: "",
-    accountId: "",
-    locationId: "",
-    workOrderId: "",
-  });
-
-  const [loading, setLoading] = useState(false);
-  const [employees, setEmployees] = useState([]);
-  const [accounts, setAccounts] = useState([]);
-  const [locations, setLocations] = useState([]);
-
-  useEffect(() => {
-    get(`${API_URL}/Employee/GetEmployeeList?pageSize=500`)
-      .then((res) => {
-        const rows = res?.data || res?.Data || [];
-        setEmployees(
-          rows.map((e) => ({
-            id: e.id ?? e.Id,
-            name: `${e.firstName ?? e.FirstName ?? ""} ${e.lastName ?? e.LastName ?? ""}`.trim(),
-          }))
-        );
-      })
-      .catch(() => {});
-
-    get(`${API_URL}/Account/GetAccountList?pageSize=500`)
-      .then((res) => {
-        const rows = res?.data || res?.Data || [];
-        setAccounts(
-          rows.map((a) => ({
-            id: a.id ?? a.Id,
-            name: a.name ?? a.Name ?? "",
-          }))
-        );
-      })
-      .catch(() => {});
-
-    get(`${API_URL}/Contact/GetLocations`)
-      .then((data) => {
-        const rows = Array.isArray(data) ? data : [];
-        setLocations(
-          rows.map((l) => ({
-            id: l.id ?? l.Id,
-            name: l.name ?? l.Name ?? "",
-          }))
-        );
-      })
-      .catch(() => {});
-  }, []);
-
-  useEffect(() => {
-    if (!isEdit || !id) return;
-    getFollowUpById(id)
-      .then((data) => {
-        if (!data) return;
-        setFormData({
-          reason: data.reason ?? data.Reason ?? "",
-          scheduleDate: (data.scheduleDate ?? data.ScheduleDate ?? "").slice(0, 10),
-          scheduleStartTime: toTimeString(data.scheduleStartTime ?? data.ScheduleStartTime),
-          employeeId: data.employeeId ?? data.EmployeeId ?? "",
-          accountId: data.accountId ?? data.AccountId ?? "",
-          locationId: data.locationId ?? data.LocationId ?? "",
-          workOrderId: data.workOrderId ?? data.WorkOrderId ?? "",
-        });
-      })
-      .catch((err) => {
-        console.error("Failed to load follow up", err);
-        toast.error("Failed to load follow up");
-      });
-  }, [id, isEdit]);
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-  };
-
-  const handleSave = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-
-    const payload = {
-      Id: isEdit ? parseInt(id, 10) : 0,
-      Reason: formData.reason,
-      ScheduleDate: formData.scheduleDate,
-      ScheduleStartTime: `${toTimeString(formData.scheduleStartTime)}:00`,
-      EmployeeId: normalizeId(formData.employeeId),
-      AccountId: normalizeId(formData.accountId),
-      LocationId: normalizeId(formData.locationId),
-      WorkOrderId: normalizeId(formData.workOrderId),
-    };
-
-    try {
-      if (isEdit) {
-        await editFollowUp(payload);
-        toast.success("Follow-up updated successfully!");
-      } else {
-        await addFollowUp(payload);
-        toast.success("Follow-up created successfully!");
-      }
-      navigate("/followups");
-    } catch (err) {
-      console.error(err);
-      toast.error("Failed to save follow-up");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCancel = () => {
-    navigate("/followups");
-  };
-
-  return (
-    <div className="followUpFormPage">
-      <div className="panel panel-default panel-connected">
-        <div className="panel-body">
-          <ol className="breadcrumb breadcrumb-alt">
-            <li>
-              <a
-                href="#"
-                onClick={(e) => {
-                  e.preventDefault();
-                  navigate("/followups");
-                }}
-              >
-                Follow-ups
-              </a>
-            </li>
-            <li className="active">{isEdit ? "Edit" : "Create"}</li>
-          </ol>
-
-          <div className="container">
-            <form onSubmit={handleSave}>
-              <div className="form-group">
-                <div className="header">
-                  <h3 className="heading thin">
-                    <span className="fa-stack" style={{ fontSize: "0.9em" }}>
-                      <i className="fa fa-square fa-stack-2x text-primary"></i>
-                      <i
-                        className={`fa fa-${isEdit ? "edit" : "plus"} fa-stack-1x fa-inverse`}
-                      ></i>
-                    </span>
-                    <span>{isEdit ? "Edit a Follow-up" : "Create a Follow-up"}</span>
-                  </h3>
-                </div>
-              </div>
-
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Follow-up Details</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="reason">
-                        Reason
-                      </label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="reason"
-                        name="reason"
-                        value={formData.reason}
-                        onChange={handleChange}
-                        placeholder="What is this follow-up for?"
-                        required
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="employeeId">
-                        Assigned To
-                      </label>
-                      <select
-                        className="form-control"
-                        id="employeeId"
-                        name="employeeId"
-                        value={formData.employeeId}
-                        onChange={handleChange}
-                        required
-                      >
-                        <option value="">Select Employee</option>
-                        {employees.map((e) => (
-                          <option key={e.id} value={e.id}>
-                            {e.name || `Employee #${e.id}`}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="scheduleDate">
-                        Scheduled Date
-                      </label>
-                      <input
-                        className="form-control"
-                        type="date"
-                        id="scheduleDate"
-                        name="scheduleDate"
-                        value={formData.scheduleDate}
-                        onChange={handleChange}
-                        required
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="scheduleStartTime">
-                        Start Time
-                      </label>
-                      <input
-                        className="form-control"
-                        type="time"
-                        id="scheduleStartTime"
-                        name="scheduleStartTime"
-                        value={formData.scheduleStartTime}
-                        onChange={handleChange}
-                        required
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Related (optional)</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="accountId">Account</label>
-                      <select
-                        className="form-control"
-                        id="accountId"
-                        name="accountId"
-                        value={formData.accountId}
-                        onChange={handleChange}
-                      >
-                        <option value="">None</option>
-                        {accounts.map((a) => (
-                          <option key={a.id} value={a.id}>
-                            {a.name || `Account #${a.id}`}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="locationId">Location</label>
-                      <select
-                        className="form-control"
-                        id="locationId"
-                        name="locationId"
-                        value={formData.locationId}
-                        onChange={handleChange}
-                      >
-                        <option value="">None</option>
-                        {locations.map((l) => (
-                          <option key={l.id} value={l.id}>
-                            {l.name || `Location #${l.id}`}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="workOrderId">Work Order ID</label>
-                      <input
-                        className="form-control"
-                        type="number"
-                        id="workOrderId"
-                        name="workOrderId"
-                        value={formData.workOrderId}
-                        onChange={handleChange}
-                        placeholder="Numeric WO ID (optional)"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="form-actions">
-                <button
-                  type="button"
-                  className="btn btn-default"
-                  onClick={handleCancel}
-                  disabled={loading}
-                >
-                  Cancel
-                </button>
-                <button type="submit" className="btn btn-primary" disabled={loading}>
-                  {loading ? "Saving..." : isEdit ? "Update" : "Create"}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/followup/list/Delete.js b/src/pages/followup/list/Delete.js
deleted file mode 100644
index 394ae1a9..00000000
--- a/src/pages/followup/list/Delete.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { deleteContact } from "./api";
-
-export default function DeleteModal({ open, item, onClose, onSuccess }) {
-  if(!open) return null;
-  const handleDelete=()=>{ deleteContact(item.id).then(()=>onSuccess()); };
-  return (
-    <div className="modalRoot">
-      <div className="modalScrim" onClick={onClose}/>
-      <div className="modalCard">
-        <div className="modalHeader"><div className="modalTitle">Delete Item?</div><button onClick={onClose}>✕</button></div>
-        <div className="modalBody">
-          <div>Are you sure you want to delete this contact?</div>
-          <div className="modalActions">
-            <button onClick={onClose}>Cancel</button>
-            <button onClick={handleDelete}>Delete</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/followup/list/Form.js b/src/pages/followup/list/Form.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/pages/followup/list/List.js b/src/pages/followup/list/List.js
deleted file mode 100644
index 92ae7b08..00000000
--- a/src/pages/followup/list/List.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import { useMemo, useState } from "react";
-import { useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import usePaginatedList from "../../../hooks/usePaginatedList";
-import { fetchFollowUpsPaged } from "./api";
-import Table from "./Table";
-import DeleteModal from "../../../components/DeleteModal";
-import { deleteFollowUp } from "../api";
-import "./styles.css";
-
-const STATUSES = ["Open", "Completed", "Cancelled"];
-
-export default function FollowUpList() {
-  const navigate = useNavigate();
-  const [statusFilter, setStatusFilter] = useState("Open");
-  const extraParams = useMemo(() => ({ status: statusFilter }), [statusFilter]);
-  const {
-    rows,
-    search,
-    setSearch,
-    page,
-    setPage,
-    pageSize,
-    setPageSize,
-    totalCount,
-    loading,
-    err,
-    reload,
-  } = usePaginatedList(fetchFollowUpsPaged, extraParams);
-  const [deleteModal, setDeleteModal] = useState({ isOpen: false, item: null, loading: false });
-  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
-
-  const handleDeleteClick = (item) => {
-    setDeleteModal({ isOpen: true, item, loading: false });
-  };
-
-  const handleDeleteConfirm = async () => {
-    setDeleteModal((prev) => ({ ...prev, loading: true }));
-    try {
-      await deleteFollowUp(deleteModal.item.id);
-      toast.success("Follow-up deleted successfully!");
-      setDeleteModal({ isOpen: false, item: null, loading: false });
-      reload();
-    } catch (err) {
-      console.error(err);
-      toast.error("Failed to delete follow-up");
-      setDeleteModal((prev) => ({ ...prev, loading: false }));
-    }
-  };
-
-  return (
-    <section className="listPage">
-      <div className="fuListToolbar">
-        <div className="fuListToolbarLeft">
-          <h2 className="fuListTitle">Follow Ups</h2>
-          <span className="fuListCount">{totalCount} total</span>
-        </div>
-        <div className="fuListToolbarRight">
-          <input
-            className="fuSearchInput"
-            value={search}
-            onChange={(e) => { setSearch(e.target.value); setPage(1); }}
-            placeholder="Search by reason, account, or assignee..."
-          />
-          <button className="fuNewBtn" onClick={() => navigate("/followups/new")}>
-            + New Follow Up
-          </button>
-        </div>
-      </div>
-
-      <div className="fuFilterBar">
-        {STATUSES.map((s) => (
-          <button
-            key={s}
-            className={`fuFilterChip ${statusFilter === s ? "active" : ""}`}
-            onClick={() => { setStatusFilter(s); setPage(1); }}
-          >
-            {s}
-          </button>
-        ))}
-      </div>
-
-      <Table
-        loading={loading}
-        error={err}
-        rows={rows}
-        onEdit={(item) => navigate(`/followups/edit/${item.id}`)}
-        onDelete={handleDeleteClick}
-        page={page}
-        setPage={setPage}
-        pageSize={pageSize}
-        setPageSize={setPageSize}
-        totalCount={totalCount}
-        totalPages={totalPages}
-      />
-
-      <DeleteModal
-        isOpen={deleteModal.isOpen}
-        onClose={() => setDeleteModal({ isOpen: false, item: null, loading: false })}
-        onConfirm={handleDeleteConfirm}
-        title="Delete Follow-up"
-        message={`Are you sure you want to delete this follow-up: "${deleteModal.item?.reason || ""}"? This action cannot be undone.`}
-        loading={deleteModal.loading}
-      />
-    </section>
-  );
-}
diff --git a/src/pages/followup/list/Table.js b/src/pages/followup/list/Table.js
deleted file mode 100644
index 72a9586d..00000000
--- a/src/pages/followup/list/Table.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from "react";
-import SharedTable from "../../../components/SharedTable";
-
-function formatScheduled(date, time) {
-  if (!date) return "";
-  const d = new Date(date);
-  if (isNaN(d)) return "";
-  const dateStr = d.toISOString().slice(0, 10);
-  if (!time) return dateStr;
-  const m = String(time).match(/^(\d{2}:\d{2})/);
-  return m ? `${dateStr} ${m[1]}` : dateStr;
-}
-
-export default function Table({
-  loading,
-  error,
-  rows,
-  onEdit,
-  onDelete,
-  page,
-  setPage,
-  pageSize,
-  setPageSize,
-  totalCount,
-  totalPages,
-}) {
-  const columns = [
-    {
-      key: "reason",
-      label: "Reason",
-      render: (val, row) => (
-        <strong>
-          <a
-            href="#"
-            onClick={(e) => {
-              e.preventDefault();
-              onEdit && onEdit(row);
-            }}
-          >
-            {val || "(no reason)"}
-          </a>
-        </strong>
-      ),
-    },
-    { key: "assignedTo", label: "Assigned To" },
-    {
-      key: "scheduleDate",
-      label: "Scheduled",
-      render: (_, row) => formatScheduled(row.scheduleDate, row.scheduleStartTime),
-    },
-    { key: "accountName", label: "Account" },
-    { key: "locationName", label: "Location" },
-    {
-      key: "workOrderNumber",
-      label: "Work Order",
-      render: (val, row) => val || row.internalWONumber || "",
-    },
-    { key: "createdByName", label: "Created By" },
-    { key: "status", label: "Status" },
-  ];
-
-  return (
-    <SharedTable
-      rows={rows}
-      columns={columns}
-      onEdit={onEdit}
-      onDelete={onDelete}
-      page={page}
-      setPage={setPage}
-      pageSize={pageSize}
-      setPageSize={setPageSize}
-      totalCount={totalCount}
-      loading={loading}
-      error={error}
-    />
-  );
-}
diff --git a/src/pages/followup/list/api.js b/src/pages/followup/list/api.js
deleted file mode 100644
index 8d55ba5b..00000000
--- a/src/pages/followup/list/api.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { get } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const fetchFollowUpsPaged = async ({
-  search = "",
-  page = 1,
-  pageSize = 12,
-  status = "Open"
-}) => {
-  const res = await get(
-    `${API_URL}/FollowUp/GetFollowUpList?search=${encodeURIComponent(
-      search
-    )}&page=${page}&pageSize=${pageSize}&status=${encodeURIComponent(status)}`
-  );
-
-  const rows = (res?.data || res?.Data || []).map(x => ({
-    id: x.id ?? x.Id,
-    reason: x.reason ?? x.Reason ?? "",
-    scheduleDate: x.scheduleDate ?? x.ScheduleDate ?? "",
-    scheduleStartTime: x.scheduleStartTime ?? x.ScheduleStartTime ?? "",
-    employeeId: x.employeeId ?? x.EmployeeId ?? null,
-    workOrderId: x.workOrderId ?? x.WorkOrderId ?? null,
-    accountId: x.accountId ?? x.AccountId ?? null,
-    locationId: x.locationId ?? x.LocationId ?? null,
-    accountName: x.accountName ?? x.AccountName ?? "",
-    assignedTo: x.assignedTo ?? x.AssignedTo ?? "",
-    locationName: x.locationName ?? x.LocationName ?? "",
-    workOrderNumber: x.workOrderNumber ?? x.WorkOrderNumber ?? "",
-    internalWONumber: x.internalWONumber ?? x.InternalWONumber ?? "",
-    status: x.status ?? x.Status ?? "",
-    createdDate: x.createdDate ?? x.CreatedDate ?? "",
-    createdByName: x.createdByName ?? x.CreatedByName ?? ""
-  }));
-
-  return {
-    rows,
-    page: res?.pageNumber ?? res?.PageNumber ?? 1,
-    pageSize: res?.pageSize ?? res?.PageSize ?? pageSize,
-    totalCount: res?.totalCount ?? res?.TotalCount ?? rows.length,
-    totalPages: res?.totalPages ?? res?.TotalPages ?? 1
-  };
-};
diff --git a/src/pages/followup/list/styles.css b/src/pages/followup/list/styles.css
deleted file mode 100644
index 731008cd..00000000
--- a/src/pages/followup/list/styles.css
+++ /dev/null
@@ -1,353 +0,0 @@
-/* Modal styles for Follow-ups module */
-.modalRoot{position:fixed;inset:0;z-index:1000;}
-.modalScrim{position:absolute;inset:0;background:rgba(0,0,0,.3);}
-.modalCard{position:relative;margin:10% auto;padding:20px;background:#fff;width:400px;}
-
-/* Override listPage padding for this module */
-.listPage {
-  padding: 0 !important;
-  background: white !important;
-  min-height: auto !important;
-}
-
-/* Toolbar header (mirrors work orders list look) */
-.fuListToolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.fuListToolbarLeft {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-}
-
-.fuListTitle {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-  color: #333;
-}
-
-.fuListCount {
-  font-size: 13px;
-  color: #999;
-}
-
-.fuListToolbarRight {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.fuSearchInput {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 14px;
-  outline: none;
-  width: 260px;
-  box-sizing: border-box;
-}
-
-.fuSearchInput:focus {
-  border-color: #66afe9;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-}
-
-.fuNewBtn {
-  padding: 8px 16px;
-  background: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.fuNewBtn:hover {
-  background: #0069d9;
-}
-
-.fuFilterBar {
-  display: flex;
-  gap: 6px;
-  padding: 10px 20px;
-  border-bottom: 1px solid #e5e5e5;
-  background: #fafafa;
-}
-
-.fuFilterChip {
-  padding: 5px 14px;
-  border: 1px solid #ddd;
-  border-radius: 16px;
-  background: #fff;
-  font-size: 12px;
-  color: #666;
-  cursor: pointer;
-}
-
-.fuFilterChip:hover {
-  border-color: #007bff;
-  color: #007bff;
-}
-
-.fuFilterChip.active {
-  background: #007bff;
-  color: #fff;
-  border-color: #007bff;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  background: white;
-  padding: 10px 20px;
-  margin: 0;
-  border-bottom: 1px solid #e5e5e5;
-  font-size: 13px;
-}
-
-.breadcrumbItem {
-  color: #333;
-}
-
-.breadcrumbItem.active {
-  cursor: default;
-  font-weight: bold;
-  color: #00a0d1;
-}
-
-/* Search Section Styles */
-.searchSection {
-  background: white;
-  padding: 20px;
-  margin-bottom: 0;
-  border-bottom: 1px solid #e5e5e5;
-  position: relative;
-  z-index: 1;
-}
-
-.searchHeader {
-  margin-bottom: 20px;
-}
-
-.searchHeading {
-  font-size: 24px;
-  font-weight: 300;
-  margin: 0 0 8px 0;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.iconStack {
-  font-size: 0.9em;
-}
-
-.text-primary {
-  color: #0088cc;
-}
-
-.fa-inverse {
-  color: white;
-}
-
-.searchSubheading {
-  color: #666;
-  font-size: 14px;
-  display: block;
-  margin-left: 45px;
-}
-
-.followUpStatusTabs {
-  display: flex;
-  gap: 4px;
-  margin-bottom: 16px;
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.followUpStatusTab {
-  padding: 8px 18px;
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  color: #666;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: color .15s ease, border-color .15s ease;
-}
-
-.followUpStatusTab:hover {
-  color: #0088cc;
-}
-
-.followUpStatusTab.active {
-  color: #0088cc;
-  border-bottom-color: #0088cc;
-}
-
-.searchControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 20px;
-}
-
-.searchLeft {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  flex: 1;
-}
-
-.searchInputGroup {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  flex: 1;
-  max-width: 600px;
-}
-
-.searchDropdown {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  background: white;
-  font-size: 14px;
-  min-width: 120px;
-}
-
-.searchInput {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-left: none;
-  border-right: 1px solid #ccc;
-  flex: 1;
-  font-size: 14px;
-  outline: none;
-}
-
-.searchInput:focus {
-  border-color: #66afe9;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-}
-
-.searchButton {
-  height: 38px;
-  padding: 6px 20px;
-  background: #0088cc;
-  color: white;
-  border: 1px solid #0088cc;
-  border-radius: 0 4px 4px 0;
-  font-size: 14px;
-  cursor: pointer;
-  white-space: nowrap;
-  margin-left: 20px;
-}
-
-.searchButton:hover {
-  background: #0077b3;
-  border-color: #0077b3;
-}
-
-.viewToggle {
-  display: flex;
-  border: 1px solid #0088cc;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.viewBtn {
-  width: 40px;
-  height: 38px;
-  background: white;
-  border: none;
-  border-right: 1px solid #0088cc;
-  color: #0088cc;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.viewBtn:last-child {
-  border-right: none;
-}
-
-.viewBtn.active {
-  background: #0088cc;
-  color: white;
-}
-
-.viewBtn:hover:not(.active) {
-  background: #e6f2f8;
-}
-
-.searchRight {
-  display: flex;
-  align-items: center;
-}
-
-.paginationTop {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 0;
-}
-
-.pageBtn {
-  width: 35px;
-  height: 36px;
-  background: white;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  color: #0088cc;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pageBtn:hover:not(:disabled) {
-  background: #e6f2f8;
-}
-
-.pageBtn:disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-
-.pageNumber {
-  min-width: 35px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #0088cc;
-  color: white;
-  font-size: 14px;
-  border-left: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-}
-
-/* Table wrapper */
-.tableContainer {
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 0;
-  margin: 0;
-}
diff --git a/src/pages/followup/new/api.js b/src/pages/followup/new/api.js
deleted file mode 100644
index 016f17b3..00000000
--- a/src/pages/followup/new/api.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { get, post } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const fetchFollowUpsPaged = async ({
-  search = "",
-  page = 1,
-  pageSize = 12,
-  completed = false,
-}) => {
-  const res = await get(
-    `${API_URL}/FollowUp/GetFollowUpList?search=${encodeURIComponent(
-      search
-    )}&page=${page}&pageSize=${pageSize}&completed=${completed}`
-  );
-
-  const rows = (res?.Data || []).map((x) => ({
-    id: x.Id,
-    reason: x.Reason,
-    scheduleDate: x.ScheduleDate,
-    account: x.Account,
-    assignedTo: x.AssignedTo,
-    locationName: x.LocationName,
-    workOrderNumber: x.WorkOrderNumber,
-    status: x.Status,
-  }));
-
-  return {
-    rows,
-    page: res.PageNumber,
-    pageSize: res.PageSize,
-    totalCount: res.TotalCount,
-    totalPages: res.TotalPages,
-  };
-};
-
-export const getFollowUpById = (id) =>
-  get(`${API_URL}/FollowUp/GetById?id=${id}`);
-
-export const saveFollowUp = (payload) =>
-  post(`${API_URL}/FollowUp/Save`, payload);
-
-export const deleteFollowUp = (id) =>
-  get(`${API_URL}/FollowUp/Delete?id=${id}`);
diff --git a/src/pages/locations/api.js b/src/pages/locations/api.js
deleted file mode 100644
index 49fbeac4..00000000
--- a/src/pages/locations/api.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { locationApi } from "../../services/api";
-
-export const getLocations = async (params = {}) => {
-  try {
-    const response = await locationApi.getAll(params);
-    const locations = response.data || response;
-    return Array.isArray(locations) ? locations : [];
-  } catch (error) {
-    console.error("Error fetching locations:", error);
-    throw error;
-  }
-};
-
-export const getLocationById = async (id) => {
-  try {
-    return await locationApi.getById(id);
-  } catch (error) {
-    console.error("Error fetching location:", error);
-    throw error;
-  }
-};
-
-export const addLocation = async (location) => {
-  try {
-    return await locationApi.create(location);
-  } catch (error) {
-    console.error("Error creating location:", error);
-    throw error;
-  }
-};
-
-export const editLocation = async (location) => {
-  try {
-    return await locationApi.update(location.id, location);
-  } catch (error) {
-    console.error("Error updating location:", error);
-    throw error;
-  }
-};
-
-export const deleteLocation = async (id) => {
-  try {
-    await locationApi.delete(id);
-    return true;
-  } catch (error) {
-    console.error("Error deleting location:", error);
-    throw error;
-  }
-};
diff --git a/src/pages/locations/form/LocationFormPage.css b/src/pages/locations/form/LocationFormPage.css
deleted file mode 100644
index 67e3a13f..00000000
--- a/src/pages/locations/form/LocationFormPage.css
+++ /dev/null
@@ -1,289 +0,0 @@
-/* Location Form Page - Matching Employee Form Style */
-.locationFormPage {
-  background: #f5f5f5;
-  min-height: 100vh;
-  padding: 0;
-}
-
-.panel {
-  margin-bottom: 20px;
-  background-color: #fff;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-
-.panel-default {
-  border-color: #ddd;
-}
-
-.panel-connected {
-  border-radius: 0;
-  border: none;
-  box-shadow: none;
-}
-
-.panel-body {
-  padding: 15px;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  padding: 8px 15px;
-  margin-bottom: 20px;
-  list-style: none;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-}
-
-.breadcrumb-alt {
-  background-color: white;
-  border-bottom: 1px solid #e5e5e5;
-  padding: 10px 20px;
-  margin: 0 0 20px 0;
-  border-radius: 0;
-}
-
-.breadcrumb > li {
-  display: inline-block;
-}
-
-.breadcrumb > li + li:before {
-  content: ">\00a0";
-  padding: 0 5px;
-  color: #ccc;
-}
-
-.breadcrumb > li a {
-  color: #0088cc;
-  text-decoration: none;
-}
-
-.breadcrumb > li a:hover {
-  text-decoration: underline;
-}
-
-.breadcrumb > .active {
-  color: #00a0d1;
-  font-weight: bold;
-  cursor: default;
-}
-
-/* Container */
-.container {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-/* Form Header */
-.header {
-  margin-bottom: 15px;
-}
-
-.heading {
-  margin: 0 0 10px 0;
-  font-weight: 300;
-  line-height: 1.1;
-  color: #333;
-}
-
-.heading.thin {
-  font-weight: 300;
-  font-size: 24px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.heading.text-uppercase {
-  text-transform: uppercase;
-  font-size: 14px;
-  margin-bottom: 15px;
-}
-
-.text-primary {
-  color: #0088cc;
-}
-
-.fa-stack {
-  position: relative;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  line-height: 2em;
-  vertical-align: middle;
-}
-
-.fa-stack-1x,
-.fa-stack-2x {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-
-.fa-stack-2x {
-  font-size: 2em;
-}
-
-.fa-stack-1x {
-  font-size: 1em;
-  line-height: inherit;
-}
-
-.fa-inverse {
-  color: #fff;
-}
-
-/* Form Groups */
-.form-group {
-  margin-bottom: 15px;
-  position: relative;
-}
-
-/* Row and Columns */
-.row {
-  margin-right: -15px;
-  margin-left: -15px;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.row::after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-[class*="col-"] {
-  position: relative;
-  min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
-}
-
-.col-sm-4 {
-  width: 33.33333333%;
-}
-
-.col-sm-6 {
-  width: 50%;
-}
-
-@media (min-width: 992px) {
-  .col-md-4 {
-    width: 33.33333333%;
-  }
-}
-
-/* Labels */
-label {
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: 5px;
-  font-weight: 600;
-  font-size: 13px;
-  color: #333;
-}
-
-.required-field::after {
-  content: " *";
-  color: #d9534f;
-}
-
-/* Form Controls */
-.form-control {
-  display: block;
-  width: 100%;
-  height: 34px;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 1.42857143;
-  color: #555;
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  box-sizing: border-box;
-}
-
-.form-control:focus {
-  border-color: #66afe9;
-  outline: 0;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-}
-
-select.form-control {
-  height: 34px;
-  padding: 6px 12px;
-}
-
-textarea.form-control {
-  height: auto;
-  min-height: 100px;
-}
-
-/* Form Actions */
-.form-actions {
-  padding: 19px 20px 20px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border-top: 1px solid #e5e5e5;
-  text-align: right;
-}
-
-/* Buttons */
-.btn {
-  display: inline-block;
-  padding: 6px 12px;
-  margin-bottom: 0;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.42857143;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  user-select: none;
-}
-
-.btn-default {
-  color: #333;
-  background-color: #fff;
-  border-color: #ccc;
-}
-
-.btn-default:hover {
-  background-color: #e6e6e6;
-  border-color: #adadad;
-}
-
-.btn-primary {
-  color: #fff;
-  background-color: #0088cc;
-  border-color: #0088cc;
-}
-
-.btn-primary:hover {
-  background-color: #006699;
-  border-color: #005580;
-}
-
-.btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.65;
-}
-
-/* Responsive */
-@media (max-width: 767px) {
-  [class*="col-sm-"] {
-    width: 100%;
-  }
-}
-
diff --git a/src/pages/locations/form/LocationFormPage.js b/src/pages/locations/form/LocationFormPage.js
deleted file mode 100644
index d3ba3b1a..00000000
--- a/src/pages/locations/form/LocationFormPage.js
+++ /dev/null
@@ -1,321 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import { getLocationById, addLocation, editLocation } from "../api";
-import "./LocationFormPage.css";
-
-export default function LocationFormPage() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const isEdit = !!id;
-
-  const [formData, setFormData] = useState({
-    name: "",
-    address: "",
-    city: "",
-    state: "IL",
-    zipCode: "",
-    phone: "",
-    contact: "",
-    contactEmail: "",
-    status: "Active",
-    accountId: "",
-  });
-
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (isEdit && id) {
-      const loadLocation = async () => {
-        try {
-          const location = await getLocationById(id);
-          if (location) {
-            setFormData(prev => {
-              const merged = { ...prev };
-              for (const key of Object.keys(merged)) {
-                if (location[key] != null) merged[key] = location[key];
-              }
-              return merged;
-            });
-          }
-        } catch (err) {
-          console.error("Failed to load location", err);
-          toast.error("Failed to load location");
-        }
-      };
-      loadLocation();
-    }
-  }, [id, isEdit]);
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
-
-  const handleSave = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-
-    try {
-      if (isEdit) {
-        await editLocation(formData);
-        toast.success("Location updated successfully!");
-      } else {
-        await addLocation(formData);
-        toast.success("Location created successfully!");
-      }
-      navigate("/locations");
-    } catch (err) {
-      console.error(err);
-      toast.error("Failed to save location");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCancel = () => {
-    navigate("/locations");
-  };
-
-  return (
-    <div className="locationFormPage">
-      <div className="panel panel-default panel-connected">
-        <div className="panel-body">
-          <ol className="breadcrumb breadcrumb-alt">
-            <li>
-              <a href="#" onClick={(e) => { e.preventDefault(); navigate("/locations"); }}>
-                Locations
-              </a>
-            </li>
-            <li className="active">{isEdit ? "Edit" : "Create"}</li>
-          </ol>
-
-          <div className="container">
-            <form onSubmit={handleSave}>
-              {/* Page Header */}
-              <div className="form-group">
-                <div className="header">
-                  <h3 className="heading thin">
-                    <span className="fa-stack" style={{ fontSize: "0.9em" }}>
-                      <i className="fa fa-square fa-stack-2x text-primary"></i>
-                      <i className={`fa fa-${isEdit ? "edit" : "plus"} fa-stack-1x fa-inverse`}></i>
-                    </span>
-                    <span>{isEdit ? "Edit a Location" : "Create a Location"}</span>
-                  </h3>
-                </div>
-              </div>
-
-              {/* Location Information Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Location Information</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="name">Name</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="name"
-                        name="name"
-                        value={formData.name}
-                        onChange={handleChange}
-                        placeholder="Location name"
-                        required
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="accountId">Account</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="accountId"
-                        name="accountId"
-                        value={formData.accountId}
-                        onChange={handleChange}
-                        placeholder="Account ID or name"
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <div className="row">
-                  <div className="col-sm-12">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="address">Address</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="address"
-                        name="address"
-                        value={formData.address}
-                        onChange={handleChange}
-                        placeholder="Street address"
-                        required
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <div className="row">
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="city">City</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="city"
-                        name="city"
-                        value={formData.city}
-                        onChange={handleChange}
-                        placeholder="City"
-                        required
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="state">State</label>
-                      <select
-                        className="form-control"
-                        id="state"
-                        name="state"
-                        value={formData.state}
-                        onChange={handleChange}
-                        required
-                      >
-                        <option value="IL">Illinois</option>
-                        <option value="IN">Indiana</option>
-                        <option value="MI">Michigan</option>
-                        <option value="OH">Ohio</option>
-                        <option value="WI">Wisconsin</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="zipCode">Zip Code</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="zipCode"
-                        name="zipCode"
-                        value={formData.zipCode}
-                        onChange={handleChange}
-                        placeholder="12345"
-                        required
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Contact Information Section */}
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase">
-                    <strong>Contact Information</strong>
-                  </h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="phone">Phone</label>
-                      <input
-                        className="form-control"
-                        type="tel"
-                        id="phone"
-                        name="phone"
-                        value={formData.phone}
-                        onChange={handleChange}
-                        placeholder="(555) 000-0000"
-                        required
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="contact">Contact Person</label>
-                      <input
-                        className="form-control"
-                        type="text"
-                        id="contact"
-                        name="contact"
-                        value={formData.contact}
-                        onChange={handleChange}
-                        placeholder="Full name"
-                        required
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="contactEmail">Contact Email</label>
-                      <input
-                        className="form-control"
-                        type="email"
-                        id="contactEmail"
-                        name="contactEmail"
-                        value={formData.contactEmail}
-                        onChange={handleChange}
-                        placeholder="email@company.com"
-                        required
-                      />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="status">Status</label>
-                      <select
-                        className="form-control"
-                        id="status"
-                        name="status"
-                        value={formData.status}
-                        onChange={handleChange}
-                        required
-                      >
-                        <option value="Active">Active</option>
-                        <option value="Inactive">Inactive</option>
-                        <option value="Closed">Closed</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Form Actions */}
-              <div className="form-actions">
-                <button
-                  type="button"
-                  className="btn btn-default"
-                  onClick={handleCancel}
-                  disabled={loading}
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="btn btn-primary"
-                  disabled={loading}
-                >
-                  {loading ? "Saving..." : isEdit ? "Update" : "Create"}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/locations/list/List.js b/src/pages/locations/list/List.js
deleted file mode 100644
index d4872b48..00000000
--- a/src/pages/locations/list/List.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import usePaginatedList from "../../../hooks/usePaginatedList";
-import { fetchLocationsPaged } from "./api";
-import Table from "./Table";
-import DeleteModal from "../../../components/DeleteModal";
-import ActionBar from "../../../components/ActionBar";
-import { deleteLocation } from "../api";
-import "./styles.css";
-
-export default function LocationsList() {
-  const navigate = useNavigate();
-
-  const {
-    rows,
-    search,
-    setSearch,
-    page,
-    setPage,
-    pageSize,
-    setPageSize,
-    totalCount,
-    loading,
-    err,
-    reload
-  } = usePaginatedList(fetchLocationsPaged);
-
-  const [viewMode, setViewMode] = useState("list");
-  const [delState, setDelState] = useState({ open: false, item: null, loading: false });
-
-  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
-
-  const handleDeleteConfirm = async () => {
-    setDelState(prev => ({ ...prev, loading: true }));
-    try {
-      await deleteLocation(delState.item.id);
-      toast.success("Location deleted successfully!");
-      setDelState({ open: false, item: null, loading: false });
-      reload();
-    } catch (err) {
-      console.error(err);
-      toast.error("Failed to delete location");
-      setDelState(prev => ({ ...prev, loading: false }));
-    }
-  };
-
-  return (
-    <>
-      <ActionBar
-        moduleName="Locations"
-        moduleIcon="fa-map-marker"
-        onNew={() => navigate("/locations/new")}
-        onBulkEdit={() => console.log("Bulk edit")}
-        selectedCount={0}
-      />
-
-      <section className="listPage">
-        <div className="breadcrumb">
-          <span className="breadcrumbItem active">Locations</span>
-        </div>
-
-        <div className="searchSection">
-          <div className="searchHeader">
-            <h3 className="searchHeading">
-              <span className="fa-stack iconStack">
-                <i className="fa fa-square fa-stack-2x text-primary"></i>
-                <i className="fa fa-map-marker fa-stack-1x fa-inverse"></i>
-              </span>
-              <span>Search for Locations</span>
-            </h3>
-            <span className="searchSubheading">Use the settings menu to adjust how to filter the list, and which columns to display.</span>
-          </div>
-
-          <div className="searchControls">
-            <div className="searchLeft">
-              <div className="searchInputGroup">
-                <select className="searchDropdown" defaultValue="Name">
-                  <option>Name</option>
-                  <option>City</option>
-                  <option>State</option>
-                  <option>Phone</option>
-                </select>
-                <input
-                  className="searchInput"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Enter search criteria here..."
-                />
-                <button className="searchButton">Search!</button>
-              </div>
-              <div className="viewToggle">
-                <button
-                  className={`viewBtn ${viewMode === "list" ? "active" : ""}`}
-                  title="List view"
-                  onClick={() => setViewMode("list")}
-                >
-                  <i className="fa fa-navicon"></i>
-                </button>
-                <button
-                  className={`viewBtn ${viewMode === "card" ? "active" : ""}`}
-                  title="Card view"
-                  onClick={() => setViewMode("card")}
-                >
-                  <i className="fa fa-th-large"></i>
-                </button>
-              </div>
-            </div>
-
-            <div className="searchRight">
-              <div className="paginationTop">
-                <button
-                  className="pageBtn"
-                  disabled={page === 1}
-                  onClick={() => setPage(page - 1)}
-                >
-                  «
-                </button>
-                <span className="pageNumber">{page}</span>
-                <button
-                  className="pageBtn"
-                  disabled={page >= totalPages}
-                  onClick={() => setPage(page + 1)}
-                >
-                  »
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <Table
-          loading={loading}
-          error={err}
-          rows={rows}
-          onEdit={(item) => navigate(`/locations/edit/${item.id}`)}
-          onDelete={(item) => setDelState({ open: true, item, loading: false })}
-          page={page}
-          setPage={setPage}
-          pageSize={pageSize}
-          setPageSize={setPageSize}
-          totalCount={totalCount}
-          totalPages={totalPages}
-        />
-
-        <DeleteModal
-          isOpen={delState.open}
-          onClose={() => setDelState({ open: false, item: null, loading: false })}
-          onConfirm={handleDeleteConfirm}
-          title="Delete Location"
-          message={`Are you sure you want to delete "${delState.item?.name}"?`}
-          loading={delState.loading}
-        />
-      </section>
-    </>
-  );
-}
diff --git a/src/pages/locations/list/Table.js b/src/pages/locations/list/Table.js
deleted file mode 100644
index 82646d50..00000000
--- a/src/pages/locations/list/Table.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import SharedTable from "../../../components/SharedTable";
-
-export default function Table({ loading, error, rows, onEdit, onDelete, page, setPage, pageSize, setPageSize, totalCount, totalPages }) {
-  const columns = [
-    { key: "name", label: "Location Name", render: (val, row) => <strong><a href="#" onClick={(e) => { e.preventDefault(); onEdit && onEdit(row); }}>{val}</a></strong> },
-    { key: "address", label: "Address" },
-    { key: "city", label: "City" },
-    { key: "state", label: "State" },
-    { key: "phone", label: "Phone" },
-    { key: "contactPerson", label: "Contact" },
-    { key: "status", label: "Status" },
-  ];
-
-  return (
-    <SharedTable rows={rows} columns={columns} onEdit={onEdit} onDelete={onDelete} page={page} setPage={setPage} pageSize={pageSize} setPageSize={setPageSize} totalCount={totalCount} loading={loading} error={error} />
-  );
-}
diff --git a/src/pages/locations/list/api.js b/src/pages/locations/list/api.js
deleted file mode 100644
index ec2befb3..00000000
--- a/src/pages/locations/list/api.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { get } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const fetchLocationsPaged = async ({ search = "", page = 1, pageSize = 12 }) => {
-  const res = await get(`${API_URL}/Location/GetLocationList?search=${encodeURIComponent(search)}&page=${page}&pageSize=${pageSize}`);
-  const rows = (res?.data || res?.Data || []).map(x => ({
-    id: x.id ?? x.Id,
-    name: x.name ?? x.Name ?? "",
-    address: x.address ?? x.Address ?? "",
-    city: x.city ?? x.City ?? "",
-    state: x.state ?? x.State ?? "",
-    zipCode: x.zipCode ?? x.ZipCode ?? x.Zip ?? "",
-    phone: x.phone ?? x.Phone ?? "",
-    contact: x.contact ?? x.Contact ?? "",
-    contactEmail: x.contactEmail ?? x.ContactEmail ?? "",
-    status: x.status ?? x.Status ?? "",
-    accountId: x.accountId ?? x.AccountId ?? "",
-  }));
-  return {
-    rows,
-    page: res?.pageNumber ?? 1,
-    pageSize: res?.pageSize ?? pageSize,
-    totalCount: res?.totalCount ?? rows.length,
-    totalPages: res?.totalPages ?? 1,
-  };
-};
-
-export const deleteLocation = (id) =>
-  get(`${API_URL}/Location/DeleteLocation?id=${id}`);
-
diff --git a/src/pages/locations/list/styles.css b/src/pages/locations/list/styles.css
deleted file mode 100644
index 8b17a23c..00000000
--- a/src/pages/locations/list/styles.css
+++ /dev/null
@@ -1,231 +0,0 @@
-/* Modal styles for Locations module */
-.modalRoot{position:fixed;inset:0;z-index:1000;}
-.modalScrim{position:absolute;inset:0;background:rgba(0,0,0,.3);}
-.modalCard{position:relative;margin:10% auto;padding:20px;background:#fff;width:400px;}
-
-/* Override listPage padding for this module */
-.listPage {
-  padding: 0 !important;
-  background: white !important;
-  min-height: auto !important;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  background: white;
-  padding: 10px 20px;
-  margin: 0;
-  border-bottom: 1px solid #e5e5e5;
-  font-size: 13px;
-}
-
-.breadcrumbItem {
-  color: #333;
-}
-
-.breadcrumbItem.active {
-  cursor: default;
-  font-weight: bold;
-  color: #00a0d1;
-}
-
-/* Search Section Styles */
-.searchSection {
-  background: white;
-  padding: 20px;
-  margin-bottom: 0;
-  border-bottom: 1px solid #e5e5e5;
-  position: relative;
-  z-index: 1;
-}
-
-.searchHeader {
-  margin-bottom: 20px;
-}
-
-.searchHeading {
-  font-size: 24px;
-  font-weight: 300;
-  margin: 0 0 8px 0;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.iconStack {
-  font-size: 0.9em;
-}
-
-.text-primary {
-  color: #0088cc;
-}
-
-.fa-inverse {
-  color: white;
-}
-
-.searchSubheading {
-  color: #666;
-  font-size: 14px;
-  display: block;
-  margin-left: 45px;
-}
-
-.searchControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 20px;
-}
-
-.searchLeft {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  flex: 1;
-}
-
-.searchInputGroup {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  flex: 1;
-  max-width: 600px;
-}
-
-.searchDropdown {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  background: white;
-  font-size: 14px;
-  min-width: 120px;
-}
-
-.searchInput {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-left: none;
-  border-right: 1px solid #ccc;
-  flex: 1;
-  font-size: 14px;
-  outline: none;
-}
-
-.searchInput:focus {
-  border-color: #66afe9;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-}
-
-.searchButton {
-  height: 38px;
-  padding: 6px 20px;
-  background: #0088cc;
-  color: white;
-  border: 1px solid #0088cc;
-  border-radius: 0 4px 4px 0;
-  font-size: 14px;
-  cursor: pointer;
-  white-space: nowrap;
-  margin-left: 20px;
-}
-
-.searchButton:hover {
-  background: #0077b3;
-  border-color: #0077b3;
-}
-
-.viewToggle {
-  display: flex;
-  border: 1px solid #0088cc;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.viewBtn {
-  width: 40px;
-  height: 38px;
-  background: white;
-  border: none;
-  border-right: 1px solid #0088cc;
-  color: #0088cc;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.viewBtn:last-child {
-  border-right: none;
-}
-
-.viewBtn.active {
-  background: #0088cc;
-  color: white;
-}
-
-.viewBtn:hover:not(.active) {
-  background: #e6f2f8;
-}
-
-.searchRight {
-  display: flex;
-  align-items: center;
-}
-
-.paginationTop {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 0;
-}
-
-.pageBtn {
-  width: 35px;
-  height: 36px;
-  background: white;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  color: #0088cc;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pageBtn:hover:not(:disabled) {
-  background: #e6f2f8;
-}
-
-.pageBtn:disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-
-.pageNumber {
-  min-width: 35px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #0088cc;
-  color: white;
-  font-size: 14px;
-  border-left: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-}
-
-/* Table wrapper */
-.tableContainer {
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 0;
-  margin: 0;
-}
diff --git a/src/pages/settings/DropdownOptionsPage.css b/src/pages/settings/DropdownOptionsPage.css
deleted file mode 100644
index 0b7e420a..00000000
--- a/src/pages/settings/DropdownOptionsPage.css
+++ /dev/null
@@ -1,182 +0,0 @@
-.dropdownSettingsPage {
-  padding: 20px;
-}
-
-.dropdownSettingsHeader {
-  margin-bottom: 24px;
-}
-
-.dropdownSettingsHeader h2 {
-  margin: 0 0 4px 0;
-  font-size: 20px;
-  font-weight: 600;
-  color: #333;
-}
-
-.dropdownSettingsHeader p {
-  margin: 0;
-  font-size: 13px;
-  color: #999;
-}
-
-.dropdownSettingsLayout {
-  display: flex;
-  gap: 0;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  overflow: hidden;
-  min-height: 400px;
-}
-
-.dropdownSettingsSidebar {
-  width: 180px;
-  background: #f8f9fa;
-  border-right: 1px solid #ddd;
-  flex-shrink: 0;
-}
-
-.dropdownSettingsTab {
-  display: block;
-  width: 100%;
-  padding: 12px 16px;
-  border: none;
-  background: none;
-  text-align: left;
-  font-size: 13px;
-  font-weight: 500;
-  color: #666;
-  cursor: pointer;
-  border-bottom: 1px solid #eee;
-}
-
-.dropdownSettingsTab:hover {
-  background: #eee;
-}
-
-.dropdownSettingsTab.active {
-  background: #fff;
-  color: #007bff;
-  font-weight: 600;
-  border-right: 2px solid #007bff;
-}
-
-.dropdownSettingsContent {
-  flex: 1;
-  padding: 16px;
-}
-
-.dropdownSettingsAddRow {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.dropdownSettingsInput {
-  flex: 1;
-  height: 36px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 13px;
-}
-
-.dropdownSettingsSelect {
-  height: 36px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 13px;
-  min-width: 140px;
-}
-
-.dropdownSettingsAddBtn {
-  height: 36px;
-  padding: 6px 16px;
-  background: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.dropdownSettingsAddBtn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.dropdownSettingsAddBtn:hover:not(:disabled) {
-  background: #0069d9;
-}
-
-.dropdownSettingsList {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.dropdownSettingsItem {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 12px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-  font-size: 13px;
-}
-
-.dropdownSettingsItem:hover {
-  background: #f9f9f9;
-}
-
-.dropdownSettingsItemValue {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.dropdownSettingsParentTag {
-  font-size: 11px;
-  padding: 2px 8px;
-  background: #e9ecef;
-  border-radius: 10px;
-  color: #666;
-}
-
-.dropdownSettingsItemActions {
-  display: flex;
-  gap: 4px;
-}
-
-.dropdownSettingsBtn {
-  padding: 4px 10px;
-  border: none;
-  border-radius: 3px;
-  font-size: 12px;
-  cursor: pointer;
-  background: #f0f0f0;
-  color: #333;
-}
-
-.dropdownSettingsBtn.edit:hover { background: #e0e0e0; }
-.dropdownSettingsBtn.save { background: #28a745; color: #fff; }
-.dropdownSettingsBtn.cancel { background: #6c757d; color: #fff; }
-.dropdownSettingsBtn.delete { color: #dc3545; }
-.dropdownSettingsBtn.delete:hover { background: #fff5f5; }
-
-.dropdownSettingsEditInput {
-  flex: 1;
-  height: 30px;
-  padding: 4px 8px;
-  border: 1px solid #007bff;
-  border-radius: 3px;
-  font-size: 13px;
-}
-
-.dropdownSettingsLoading,
-.dropdownSettingsEmpty {
-  padding: 40px;
-  text-align: center;
-  color: #999;
-  font-size: 13px;
-}
diff --git a/src/pages/settings/DropdownOptionsPage.js b/src/pages/settings/DropdownOptionsPage.js
deleted file mode 100644
index 219e7eee..00000000
--- a/src/pages/settings/DropdownOptionsPage.js
+++ /dev/null
@@ -1,195 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { get, post, put, deleteItem } from "../../apiUtil";
-import { API_URL } from "../../constants";
-import { toast } from "react-toastify";
-import SettingsNav from "./SettingsNav";
-import "../settings/TaskTemplatesPage.css";
-import "./DropdownOptionsPage.css";
-
-const CATEGORIES = [
-  { key: "Trade", label: "Trades", hasChildren: true },
-  { key: "SubTrade", label: "Sub-Trades", parent: "Trade" },
-  { key: "Problem", label: "Problems", hasChildren: false },
-];
-
-export default function DropdownOptionsPage() {
-  const [activeCategory, setActiveCategory] = useState("Trade");
-  const [options, setOptions] = useState([]);
-  const [parentOptions, setParentOptions] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [newValue, setNewValue] = useState("");
-  const [newParent, setNewParent] = useState("");
-  const [editingId, setEditingId] = useState(null);
-  const [editValue, setEditValue] = useState("");
-
-  const categoryConfig = CATEGORIES.find((c) => c.key === activeCategory);
-
-  const loadOptions = async () => {
-    setLoading(true);
-    try {
-      const data = await get(`${API_URL}/DropdownOptions/ByCategory/${activeCategory}`);
-      setOptions(data || []);
-    } catch {
-      toast.error("Failed to load options");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const loadParents = async () => {
-    if (categoryConfig?.parent) {
-      const data = await get(`${API_URL}/DropdownOptions/ByCategory/${categoryConfig.parent}`);
-      setParentOptions(data || []);
-    }
-  };
-
-  useEffect(() => {
-    loadOptions();
-    loadParents();
-    setNewValue("");
-    setNewParent("");
-    setEditingId(null);
-  }, [activeCategory]);
-
-  const handleAdd = async () => {
-    if (!newValue.trim()) return;
-    try {
-      const body = {
-        category: activeCategory,
-        value: newValue.trim(),
-        parentValue: categoryConfig?.parent ? newParent || null : null,
-        sortOrder: options.length,
-        isActive: true,
-      };
-      await post(`${API_URL}/DropdownOptions`, body);
-      setNewValue("");
-      setNewParent("");
-      loadOptions();
-      toast.success("Option added");
-    } catch (err) {
-      toast.error("Failed to add option");
-    }
-  };
-
-  const handleDelete = async (id) => {
-    try {
-      await deleteItem(`${API_URL}/DropdownOptions/${id}`);
-      loadOptions();
-      toast.success("Option deleted");
-    } catch {
-      toast.error("Failed to delete");
-    }
-  };
-
-  const handleEditSave = async (item) => {
-    try {
-      await put(`${API_URL}/DropdownOptions/${item.id}`, {
-        ...item,
-        value: editValue.trim(),
-      });
-      setEditingId(null);
-      loadOptions();
-      toast.success("Option updated");
-    } catch {
-      toast.error("Failed to update");
-    }
-  };
-
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      handleAdd();
-    }
-  };
-
-  return (
-    <section className="dropdownSettingsPage">
-      <SettingsNav />
-      <div className="dropdownSettingsHeader">
-        <h2>Dropdown Options</h2>
-        <p>Manage configurable dropdown values for work orders</p>
-      </div>
-
-      <div className="dropdownSettingsLayout">
-        <div className="dropdownSettingsSidebar">
-          {CATEGORIES.map((cat) => (
-            <button
-              key={cat.key}
-              className={`dropdownSettingsTab ${activeCategory === cat.key ? "active" : ""}`}
-              onClick={() => setActiveCategory(cat.key)}
-            >
-              {cat.label}
-            </button>
-          ))}
-        </div>
-
-        <div className="dropdownSettingsContent">
-          <div className="dropdownSettingsAddRow">
-            {categoryConfig?.parent && (
-              <select
-                className="dropdownSettingsSelect"
-                value={newParent}
-                onChange={(e) => setNewParent(e.target.value)}
-              >
-                <option value="">Parent: All</option>
-                {parentOptions.map((p) => (
-                  <option key={p.id} value={p.value}>{p.value}</option>
-                ))}
-              </select>
-            )}
-            <input
-              className="dropdownSettingsInput"
-              value={newValue}
-              onChange={(e) => setNewValue(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder={`Add new ${categoryConfig?.label?.slice(0, -1) || "option"}...`}
-            />
-            <button className="dropdownSettingsAddBtn" onClick={handleAdd} disabled={!newValue.trim()}>
-              Add
-            </button>
-          </div>
-
-          {loading ? (
-            <div className="dropdownSettingsLoading">Loading...</div>
-          ) : options.length === 0 ? (
-            <div className="dropdownSettingsEmpty">No options configured yet</div>
-          ) : (
-            <div className="dropdownSettingsList">
-              {options.map((item) => (
-                <div key={item.id} className="dropdownSettingsItem">
-                  {editingId === item.id ? (
-                    <input
-                      className="dropdownSettingsEditInput"
-                      value={editValue}
-                      onChange={(e) => setEditValue(e.target.value)}
-                      onKeyDown={(e) => { if (e.key === "Enter") handleEditSave(item); if (e.key === "Escape") setEditingId(null); }}
-                      autoFocus
-                    />
-                  ) : (
-                    <div className="dropdownSettingsItemValue">
-                      <span>{item.value}</span>
-                      {item.parentValue && <span className="dropdownSettingsParentTag">{item.parentValue}</span>}
-                    </div>
-                  )}
-                  <div className="dropdownSettingsItemActions">
-                    {editingId === item.id ? (
-                      <>
-                        <button className="dropdownSettingsBtn save" onClick={() => handleEditSave(item)}>Save</button>
-                        <button className="dropdownSettingsBtn cancel" onClick={() => setEditingId(null)}>Cancel</button>
-                      </>
-                    ) : (
-                      <>
-                        <button className="dropdownSettingsBtn edit" onClick={() => { setEditingId(item.id); setEditValue(item.value); }}>Edit</button>
-                        <button className="dropdownSettingsBtn delete" onClick={() => handleDelete(item.id)}>Delete</button>
-                      </>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/src/pages/settings/SettingsNav.js b/src/pages/settings/SettingsNav.js
deleted file mode 100644
index 4df76995..00000000
--- a/src/pages/settings/SettingsNav.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import { NavLink } from "react-router-dom";
-
-const links = [
-  { path: "/settings/dropdowns", label: "Dropdown Options" },
-  { path: "/settings/task-templates", label: "Task Templates" },
-];
-
-export default function SettingsNav() {
-  return (
-    <div className="settingsNav">
-      {links.map((link) => (
-        <NavLink
-          key={link.path}
-          to={link.path}
-          className={({ isActive }) => `settingsNavLink ${isActive ? "active" : ""}`}
-        >
-          {link.label}
-        </NavLink>
-      ))}
-    </div>
-  );
-}
diff --git a/src/pages/settings/TaskTemplatesPage.css b/src/pages/settings/TaskTemplatesPage.css
deleted file mode 100644
index c0d9b465..00000000
--- a/src/pages/settings/TaskTemplatesPage.css
+++ /dev/null
@@ -1,263 +0,0 @@
-.settingsNav {
-  display: flex;
-  gap: 0;
-  margin-bottom: 20px;
-  border-bottom: 2px solid #e5e5e5;
-}
-
-.settingsNavLink {
-  padding: 8px 20px;
-  font-size: 13px;
-  font-weight: 600;
-  color: #999;
-  text-decoration: none;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -2px;
-}
-
-.settingsNavLink:hover {
-  color: #333;
-}
-
-.settingsNavLink.active {
-  color: #007bff;
-  border-bottom-color: #007bff;
-}
-
-.taskTemplatesPage {
-  padding: 20px;
-}
-
-.taskTemplatesHeader {
-  margin-bottom: 24px;
-}
-
-.taskTemplatesHeader h2 {
-  margin: 0 0 4px 0;
-  font-size: 20px;
-  font-weight: 600;
-  color: #333;
-}
-
-.taskTemplatesHeader p {
-  margin: 0;
-  font-size: 13px;
-  color: #999;
-}
-
-.taskTemplatesLayout {
-  display: flex;
-  gap: 0;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  overflow: hidden;
-  min-height: 500px;
-}
-
-.taskTemplatesSidebar {
-  width: 240px;
-  background: #f8f9fa;
-  border-right: 1px solid #ddd;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.taskTemplatesNewBtn {
-  display: block;
-  width: 100%;
-  padding: 12px 16px;
-  border: none;
-  background: #007bff;
-  color: #fff;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  text-align: left;
-}
-
-.taskTemplatesNewBtn:hover {
-  background: #0069d9;
-}
-
-.taskTemplatesSidebarItem {
-  padding: 10px 16px;
-  cursor: pointer;
-  border-bottom: 1px solid #eee;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.taskTemplatesSidebarItem:hover {
-  background: #eee;
-}
-
-.taskTemplatesSidebarItem.active {
-  background: #fff;
-  border-right: 2px solid #007bff;
-}
-
-.taskTemplatesSidebarName {
-  font-size: 13px;
-  font-weight: 500;
-  color: #333;
-}
-
-.taskTemplatesSidebarCount {
-  font-size: 11px;
-  color: #999;
-}
-
-.taskTemplatesContent {
-  flex: 1;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-}
-
-.taskTemplatesEmpty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  color: #999;
-  font-size: 14px;
-}
-
-.taskTemplatesLoading {
-  padding: 20px;
-  text-align: center;
-  color: #999;
-  font-size: 13px;
-}
-
-.taskTemplatesForm {
-  flex: 1;
-}
-
-.taskTemplatesFormRow {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.taskTemplatesFormField {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.taskTemplatesFormField label {
-  font-size: 12px;
-  font-weight: 600;
-  color: #666;
-  text-transform: uppercase;
-}
-
-.taskTemplatesItemsHeader {
-  margin-bottom: 8px;
-}
-
-.taskTemplatesItemsHeader h4 {
-  margin: 0;
-  font-size: 13px;
-  font-weight: 600;
-  color: #333;
-}
-
-.taskTemplatesItemList {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-bottom: 12px;
-}
-
-.taskTemplatesItem {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 12px;
-  background: #f8f9fa;
-  border: 1px solid #eee;
-  border-radius: 4px;
-}
-
-.taskTemplatesItemNum {
-  font-size: 12px;
-  font-weight: 600;
-  color: #999;
-  min-width: 20px;
-}
-
-.taskTemplatesItemText {
-  flex: 1;
-  font-size: 13px;
-  color: #333;
-}
-
-.taskTemplatesItemActions {
-  display: flex;
-  gap: 2px;
-}
-
-.taskTemplatesItemBtn {
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: none;
-  color: #999;
-  cursor: pointer;
-  font-size: 12px;
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.taskTemplatesItemBtn:hover:not(:disabled) {
-  background: #e0e0e0;
-  color: #333;
-}
-
-.taskTemplatesItemBtn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.taskTemplatesItemBtn.delete {
-  font-size: 16px;
-}
-
-.taskTemplatesItemBtn.delete:hover {
-  color: #dc3545;
-  background: #fff5f5;
-}
-
-.taskTemplatesAddItem {
-  display: flex;
-  gap: 8px;
-}
-
-.taskTemplatesAddItem .form-control {
-  flex: 1;
-}
-
-.taskTemplatesActions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-top: 16px;
-  border-top: 1px solid #eee;
-  margin-top: 16px;
-}
-
-.taskTemplatesDeleteBtn {
-  margin-right: auto;
-  color: #dc3545;
-}
-
-.taskTemplatesDeleteBtn:hover {
-  background: #fff5f5;
-}
diff --git a/src/pages/settings/TaskTemplatesPage.js b/src/pages/settings/TaskTemplatesPage.js
deleted file mode 100644
index db36e45a..00000000
--- a/src/pages/settings/TaskTemplatesPage.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { taskTemplateApi } from "../../services/api";
-import { toast } from "react-toastify";
-import SettingsNav from "./SettingsNav";
-import "./TaskTemplatesPage.css";
-
-export default function TaskTemplatesPage() {
-  const [templates, setTemplates] = useState([]);
-  const [selectedId, setSelectedId] = useState(null);
-  const [form, setForm] = useState({ name: "", description: "", items: [] });
-  const [newItemText, setNewItemText] = useState("");
-  const [saving, setSaving] = useState(false);
-  const [loading, setLoading] = useState(true);
-
-  const loadTemplates = async () => {
-    try {
-      const data = await taskTemplateApi.getAll();
-      setTemplates(Array.isArray(data) ? data : []);
-    } catch {
-      toast.error("Failed to load templates");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => { loadTemplates(); }, []);
-
-  const handleSelect = (template) => {
-    setSelectedId(template.id);
-    setForm({
-      name: template.name || "",
-      description: template.description || "",
-      items: (template.items || []).map((i, idx) => ({ text: i.itemText, sortOrder: i.sortOrder ?? idx })),
-    });
-    setNewItemText("");
-  };
-
-  const handleNew = () => {
-    setSelectedId("new");
-    setForm({ name: "", description: "", items: [] });
-    setNewItemText("");
-  };
-
-  const handleAddItem = () => {
-    if (!newItemText.trim()) return;
-    setForm((f) => ({
-      ...f,
-      items: [...f.items, { text: newItemText.trim(), sortOrder: f.items.length }],
-    }));
-    setNewItemText("");
-  };
-
-  const handleRemoveItem = (idx) => {
-    setForm((f) => ({
-      ...f,
-      items: f.items.filter((_, i) => i !== idx).map((item, i) => ({ ...item, sortOrder: i })),
-    }));
-  };
-
-  const handleMoveItem = (idx, dir) => {
-    setForm((f) => {
-      const items = [...f.items];
-      const target = idx + dir;
-      if (target < 0 || target >= items.length) return f;
-      [items[idx], items[target]] = [items[target], items[idx]];
-      return { ...f, items: items.map((item, i) => ({ ...item, sortOrder: i })) };
-    });
-  };
-
-  const handleSave = async () => {
-    if (!form.name.trim()) { toast.error("Template name is required"); return; }
-    setSaving(true);
-    try {
-      const payload = {
-        name: form.name,
-        description: form.description,
-        isActive: true,
-        items: form.items.map((i) => ({ itemText: i.text, sortOrder: i.sortOrder })),
-      };
-      if (selectedId === "new") {
-        const result = await taskTemplateApi.create(payload);
-        setSelectedId(result.id);
-        toast.success("Template created");
-      } else {
-        await taskTemplateApi.update(selectedId, payload);
-        toast.success("Template updated");
-      }
-      loadTemplates();
-    } catch {
-      toast.error("Failed to save template");
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleDelete = async () => {
-    if (!selectedId || selectedId === "new") return;
-    try {
-      await taskTemplateApi.delete(selectedId);
-      setSelectedId(null);
-      setForm({ name: "", description: "", items: [] });
-      loadTemplates();
-      toast.success("Template deleted");
-    } catch {
-      toast.error("Failed to delete template");
-    }
-  };
-
-  return (
-    <section className="taskTemplatesPage">
-      <SettingsNav />
-      <div className="taskTemplatesHeader">
-        <h2>Task List Templates</h2>
-        <p>Create reusable checklists for work order dispatches</p>
-      </div>
-
-      <div className="taskTemplatesLayout">
-        <div className="taskTemplatesSidebar">
-          <button className="taskTemplatesNewBtn" onClick={handleNew}>+ New Template</button>
-          {loading ? <div className="taskTemplatesLoading">Loading...</div> : templates.map((t) => (
-            <div
-              key={t.id}
-              className={`taskTemplatesSidebarItem ${selectedId === t.id ? "active" : ""}`}
-              onClick={() => handleSelect(t)}
-            >
-              <span className="taskTemplatesSidebarName">{t.name}</span>
-              <span className="taskTemplatesSidebarCount">{t.items?.length || 0} items</span>
-            </div>
-          ))}
-        </div>
-
-        <div className="taskTemplatesContent">
-          {!selectedId ? (
-            <div className="taskTemplatesEmpty">Select a template or create a new one</div>
-          ) : (
-            <>
-              <div className="taskTemplatesForm">
-                <div className="taskTemplatesFormRow">
-                  <div className="taskTemplatesFormField">
-                    <label>Template Name</label>
-                    <input
-                      className="form-control"
-                      value={form.name}
-                      onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
-                      placeholder="e.g., HVAC Inspection"
-                    />
-                  </div>
-                  <div className="taskTemplatesFormField">
-                    <label>Description</label>
-                    <input
-                      className="form-control"
-                      value={form.description}
-                      onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
-                      placeholder="Optional description"
-                    />
-                  </div>
-                </div>
-
-                <div className="taskTemplatesItemsHeader">
-                  <h4>Checklist Items ({form.items.length})</h4>
-                </div>
-
-                <div className="taskTemplatesItemList">
-                  {form.items.map((item, idx) => (
-                    <div key={idx} className="taskTemplatesItem">
-                      <span className="taskTemplatesItemNum">{idx + 1}</span>
-                      <span className="taskTemplatesItemText">{item.text}</span>
-                      <div className="taskTemplatesItemActions">
-                        <button className="taskTemplatesItemBtn" onClick={() => handleMoveItem(idx, -1)} disabled={idx === 0}>▲</button>
-                        <button className="taskTemplatesItemBtn" onClick={() => handleMoveItem(idx, 1)} disabled={idx === form.items.length - 1}>▼</button>
-                        <button className="taskTemplatesItemBtn delete" onClick={() => handleRemoveItem(idx)}>×</button>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-
-                <div className="taskTemplatesAddItem">
-                  <input
-                    className="form-control"
-                    value={newItemText}
-                    onChange={(e) => setNewItemText(e.target.value)}
-                    onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); handleAddItem(); } }}
-                    placeholder="Add checklist item..."
-                  />
-                  <button className="btn btn-default" onClick={handleAddItem} disabled={!newItemText.trim()}>Add</button>
-                </div>
-              </div>
-
-              <div className="taskTemplatesActions">
-                {selectedId !== "new" && (
-                  <button className="btn btn-default taskTemplatesDeleteBtn" onClick={handleDelete}>Delete</button>
-                )}
-                <button className="btn btn-primary" onClick={handleSave} disabled={saving}>
-                  {saving ? "Saving..." : selectedId === "new" ? "Create Template" : "Save Changes"}
-                </button>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/src/pages/uplifts/UpliftQueuePage.css b/src/pages/uplifts/UpliftQueuePage.css
deleted file mode 100644
index 350047a8..00000000
--- a/src/pages/uplifts/UpliftQueuePage.css
+++ /dev/null
@@ -1,135 +0,0 @@
-.upliftQueuePage {
-  padding: 24px;
-}
-
-.upliftQueueHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.upliftQueueHeader h2 {
-  margin: 0;
-  font-size: 22px;
-  color: #1f2937;
-}
-
-.upliftQueueFilters {
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  font-size: 14px;
-  color: #374151;
-}
-
-.upliftQueueFilters label {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-
-.upliftQueueFilters select {
-  padding: 6px 10px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  font-size: 14px;
-  background: #fff;
-}
-
-.upliftQueueCount {
-  color: #6b7280;
-  font-size: 13px;
-}
-
-.upliftQueueLoading,
-.upliftQueueEmpty {
-  padding: 40px;
-  text-align: center;
-  color: #6b7280;
-  background: #fff;
-  border: 1px solid #e4e7eb;
-  border-radius: 8px;
-}
-
-.upliftQueueTable {
-  width: 100%;
-  border-collapse: collapse;
-  background: #fff;
-  border: 1px solid #e4e7eb;
-  border-radius: 8px;
-  overflow: hidden;
-  font-size: 14px;
-}
-
-.upliftQueueTable th,
-.upliftQueueTable td {
-  padding: 10px 12px;
-  text-align: left;
-  border-bottom: 1px solid #f1f3f5;
-}
-
-.upliftQueueTable th {
-  background: #f9fafb;
-  font-weight: 600;
-  color: #374151;
-  font-size: 13px;
-}
-
-.upliftQueueTable tr:last-child td {
-  border-bottom: none;
-}
-
-.upliftStatusPill {
-  display: inline-block;
-  padding: 3px 9px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.upliftStatusPill-pending { background: #fef3c7; color: #92400e; }
-.upliftStatusPill-approved { background: #d1fae5; color: #065f46; }
-.upliftStatusPill-denied { background: #fee2e2; color: #991b1b; }
-.upliftStatusPill-cancelled { background: #e5e7eb; color: #4b5563; }
-
-.upliftTier {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.upliftTier-1 { background: #e0e7ff; color: #3730a3; }
-.upliftTier-2 { background: #fef3c7; color: #92400e; }
-
-.upliftActions {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.upliftQueuePager {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  justify-content: center;
-  margin-top: 16px;
-  font-size: 14px;
-}
-
-.upliftQueuePager button {
-  padding: 6px 14px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  background: #fff;
-  cursor: pointer;
-}
-
-.upliftQueuePager button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
diff --git a/src/pages/uplifts/UpliftQueuePage.js b/src/pages/uplifts/UpliftQueuePage.js
deleted file mode 100644
index ebd7bc9d..00000000
--- a/src/pages/uplifts/UpliftQueuePage.js
+++ /dev/null
@@ -1,182 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import { upliftApi } from "../../services/api";
-import "./UpliftQueuePage.css";
-
-function formatDateTime(value) {
-  if (!value) return "";
-  const d = new Date(value);
-  if (isNaN(d)) return "";
-  const pad = (n) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
-}
-
-const STATUS_OPTIONS = ["Pending", "Approved", "Denied", "Cancelled"];
-
-export default function UpliftQueuePage() {
-  const navigate = useNavigate();
-  const [status, setStatus] = useState("Pending");
-  const [tier, setTier] = useState("");
-  const [items, setItems] = useState([]);
-  const [total, setTotal] = useState(0);
-  const [page, setPage] = useState(1);
-  const [pageSize] = useState(25);
-  const [loading, setLoading] = useState(false);
-
-  const load = useCallback(async () => {
-    setLoading(true);
-    try {
-      const params = { status, page, pageSize };
-      if (tier) params.tier = tier;
-      const res = await upliftApi.list(params);
-      const data = res?.data ?? res;
-      setItems(data?.items || []);
-      setTotal(data?.total || 0);
-    } catch (err) {
-      toast.error(err.message || "Failed to load uplift queue");
-    } finally {
-      setLoading(false);
-    }
-  }, [status, tier, page, pageSize]);
-
-  useEffect(() => { load(); }, [load]);
-
-  async function approve(req) {
-    const note = window.prompt("Optional approval note:", "") || "";
-    if (!window.confirm(`Approve uplift to $${Number(req.requestedNTE).toFixed(2)}?`)) return;
-    try {
-      await upliftApi.approve(req.id, note);
-      toast.success("Uplift approved — NTE updated");
-      load();
-    } catch (err) {
-      toast.error(err.message || "Failed to approve");
-    }
-  }
-
-  async function deny(req) {
-    const note = window.prompt("Denial reason (required):", "");
-    if (!note || !note.trim()) {
-      toast.error("A reason is required when denying.");
-      return;
-    }
-    try {
-      await upliftApi.deny(req.id, note.trim());
-      toast.success("Uplift denied");
-      load();
-    } catch (err) {
-      toast.error(err.message || "Failed to deny");
-    }
-  }
-
-  const totalPages = Math.max(1, Math.ceil(total / pageSize));
-
-  return (
-    <section className="upliftQueuePage">
-      <div className="upliftQueueHeader">
-        <h2>Uplift Queue</h2>
-        <div className="upliftQueueFilters">
-          <label>
-            Status:
-            <select value={status} onChange={(e) => { setStatus(e.target.value); setPage(1); }}>
-              {STATUS_OPTIONS.map((s) => <option key={s} value={s}>{s}</option>)}
-              <option value="">All</option>
-            </select>
-          </label>
-          <label>
-            Tier:
-            <select value={tier} onChange={(e) => { setTier(e.target.value); setPage(1); }}>
-              <option value="">All</option>
-              <option value="1">Tier 1</option>
-              <option value="2">Tier 2</option>
-            </select>
-          </label>
-          <span className="upliftQueueCount">{total} total</span>
-        </div>
-      </div>
-
-      {loading ? (
-        <div className="upliftQueueLoading">Loading…</div>
-      ) : items.length === 0 ? (
-        <div className="upliftQueueEmpty">No uplift requests match these filters.</div>
-      ) : (
-        <table className="upliftQueueTable">
-          <thead>
-            <tr>
-              <th>Dispatch</th>
-              <th>PO</th>
-              <th>Vendor</th>
-              <th>Current NTE</th>
-              <th>Requested</th>
-              <th>Delta</th>
-              <th>Tier</th>
-              <th>Status</th>
-              <th>Requested At</th>
-              <th>Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {items.map((r) => (
-              <tr key={r.id}>
-                <td>{r.dispatchNumber}</td>
-                <td>{r.poNumber}</td>
-                <td>{r.vendorCompanyName}</td>
-                <td>${Number(r.currentNTE ?? 0).toFixed(2)}</td>
-                <td>${Number(r.requestedNTE).toFixed(2)}</td>
-                <td>${Number(r.delta).toFixed(2)}</td>
-                <td>
-                  <span className={`upliftTier upliftTier-${r.requiredTier}`}>
-                    Tier {r.requiredTier}
-                  </span>
-                </td>
-                <td>
-                  <span className={`upliftStatusPill upliftStatusPill-${String(r.status).toLowerCase()}`}>
-                    {r.status}
-                  </span>
-                </td>
-                <td>{r.requestedAt ? formatDateTime(r.requestedAt) : ""}</td>
-                <td>
-                  <div className="upliftActions">
-                    {r.workOrderId && (
-                      <button className="btn btn-default" onClick={() => navigate(`/workorders/${r.workOrderId}`)}>
-                        View
-                      </button>
-                    )}
-                    {r.status === "Pending" && (
-                      <>
-                        <button
-                          className="btn btn-success"
-                          disabled={!r.canDecide}
-                          title={!r.canDecide ? `Requires Tier ${r.requiredTier} role` : ""}
-                          onClick={() => approve(r)}
-                        >
-                          Approve
-                        </button>
-                        <button
-                          className="btn btn-danger"
-                          disabled={!r.canDecide}
-                          title={!r.canDecide ? `Requires Tier ${r.requiredTier} role` : ""}
-                          onClick={() => deny(r)}
-                        >
-                          Deny
-                        </button>
-                      </>
-                    )}
-                  </div>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-
-      {totalPages > 1 && (
-        <div className="upliftQueuePager">
-          <button disabled={page <= 1} onClick={() => setPage(page - 1)}>← Prev</button>
-          <span>Page {page} of {totalPages}</span>
-          <button disabled={page >= totalPages} onClick={() => setPage(page + 1)}>Next →</button>
-        </div>
-      )}
-    </section>
-  );
-}
diff --git a/src/pages/user/api.js b/src/pages/user/api.js
deleted file mode 100644
index 8bea6d37..00000000
--- a/src/pages/user/api.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { post } from '../../apiUtil';
-import { API_URL } from '../../constants';
-
-export const login = (item) => post(`${API_URL}/Authentication/login`, item);
-
diff --git a/src/pages/vendor-portal/DashboardPage.js b/src/pages/vendor-portal/DashboardPage.js
deleted file mode 100644
index 780d89de..00000000
--- a/src/pages/vendor-portal/DashboardPage.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useVendorPortal } from "./VendorPortalContext";
-import { vendorPortalApi } from "./api";
-import { statusClass, formatDateTime } from "./statusHelpers";
-
-const FILTERS = [
-  { key: "open", label: "Open", match: (d) => d.status !== "Completed" && d.status !== "Verified" && d.status !== "Cancelled" },
-  { key: "completed", label: "Completed", match: (d) => d.status === "Completed" || d.status === "Verified" },
-  { key: "cancelled", label: "Cancelled", match: (d) => d.status === "Cancelled" },
-  { key: "all", label: "All", match: () => true },
-];
-
-export default function DashboardPage() {
-  const { token } = useVendorPortal();
-  const navigate = useNavigate();
-  const [dispatches, setDispatches] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [err, setErr] = useState(null);
-  const [filter, setFilter] = useState("open");
-
-  useEffect(() => {
-    setLoading(true);
-    vendorPortalApi
-      .listDispatches(token)
-      .then((data) => setDispatches(Array.isArray(data) ? data : []))
-      .catch((e) => setErr(e.message))
-      .finally(() => setLoading(false));
-  }, [token]);
-
-  const activeFilter = FILTERS.find((f) => f.key === filter) ?? FILTERS[0];
-  const filtered = dispatches.filter(activeFilter.match);
-
-  return (
-    <>
-      <div className="vp-card">
-        <h2>Your Work</h2>
-        <div className="vp-muted" style={{ marginBottom: 12 }}>
-          Active dispatches and work orders assigned to your company.
-        </div>
-        <div className="vp-actions" style={{ marginTop: 0 }}>
-          {FILTERS.map((f) => (
-            <button
-              key={f.key}
-              className={`vp-btn ${filter === f.key ? "vp-btn-primary" : "vp-btn-ghost"}`}
-              onClick={() => setFilter(f.key)}
-            >
-              {f.label}
-              {" "}
-              <span style={{ opacity: 0.7, fontWeight: 400 }}>
-                ({dispatches.filter(f.match).length})
-              </span>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {loading && <div className="vp-card vp-muted">Loading dispatches…</div>}
-      {err && <div className="vp-error">{err}</div>}
-
-      {!loading && !err && filtered.length === 0 && (
-        <div className="vp-card vp-empty">No dispatches in this view.</div>
-      )}
-
-      <div className="vp-dispatch-list">
-        {filtered.map((d) => (
-          <div
-            key={d.id}
-            className="vp-dispatch-card"
-            onClick={() => navigate(`../dispatch/${d.id}`)}
-          >
-            <div>
-              <div className="vp-dispatch-title">
-                {d.dispatchNumber} — {d.workOrderTitle || "(untitled)"}
-              </div>
-              <div className="vp-dispatch-meta">
-                WO#{d.internalWONumber}
-                {d.locationName ? ` · ${d.locationName}` : ""}
-                {d.locationCity ? `, ${d.locationCity}` : ""}
-                {d.locationState ? `, ${d.locationState}` : ""}
-                {d.scheduledDate ? ` · Scheduled ${formatDateTime(d.scheduledDate)}` : ""}
-              </div>
-            </div>
-            <span className={statusClass(d.status)}>{d.status}</span>
-          </div>
-        ))}
-      </div>
-    </>
-  );
-}
diff --git a/src/pages/vendor-portal/DispatchDetailPage.js b/src/pages/vendor-portal/DispatchDetailPage.js
deleted file mode 100644
index 6b1125a0..00000000
--- a/src/pages/vendor-portal/DispatchDetailPage.js
+++ /dev/null
@@ -1,488 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { Link, useParams } from "react-router-dom";
-import { useVendorPortal } from "./VendorPortalContext";
-import { vendorPortalApi } from "./api";
-import { statusClass, formatDateTime } from "./statusHelpers";
-import SignaturePad from "./SignaturePad";
-
-function ChecklistSection({ token, dispatchId, items, locked, onItemUpdated }) {
-  async function toggle(item) {
-    if (locked) return;
-    try {
-      const updated = await vendorPortalApi.updateChecklistItem(token, dispatchId, item.id, !item.isCompleted);
-      onItemUpdated(updated);
-    } catch (e) {
-      alert(e.message);
-    }
-  }
-
-  if (!items?.length) {
-    return <div className="vp-muted">No checklist items for this dispatch.</div>;
-  }
-
-  return (
-    <div>
-      {items.map((item) => (
-        <div key={item.id} className={`vp-checklist-item ${item.isCompleted ? "done" : ""}`}>
-          <input
-            type="checkbox"
-            id={`cl-${item.id}`}
-            checked={!!item.isCompleted}
-            onChange={() => toggle(item)}
-            disabled={locked}
-          />
-          <label htmlFor={`cl-${item.id}`} style={{ flex: 1 }}>{item.itemText}</label>
-          {item.isCompleted && item.completedAt && (
-            <span className="vp-muted" style={{ fontSize: 12 }}>{formatDateTime(item.completedAt)}</span>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function CommentsSection({ token, dispatchId, comments, onAdded }) {
-  const [text, setText] = useState("");
-  const [submitting, setSubmitting] = useState(false);
-
-  async function submit(e) {
-    e.preventDefault();
-    if (!text.trim()) return;
-    setSubmitting(true);
-    try {
-      const added = await vendorPortalApi.addComment(token, dispatchId, text.trim());
-      onAdded(added);
-      setText("");
-    } catch (err) {
-      alert(err.message);
-    } finally {
-      setSubmitting(false);
-    }
-  }
-
-  return (
-    <>
-      {comments.length === 0 && <div className="vp-muted">No comments yet.</div>}
-      {comments.map((c) => (
-        <div key={c.id} className={`vp-comment ${c.commentType || ""}`}>
-          <div className="vp-comment-meta">
-            {c.commenter || "Unknown"} · {formatDateTime(c.createdDate)}
-          </div>
-          <div>{c.commenttext}</div>
-        </div>
-      ))}
-      <form onSubmit={submit} style={{ marginTop: 12 }}>
-        <textarea
-          className="vp-textarea"
-          placeholder="Add a comment for the dispatcher…"
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-        />
-        <div className="vp-actions">
-          <button type="submit" className="vp-btn vp-btn-primary" disabled={submitting || !text.trim()}>
-            {submitting ? "Posting…" : "Post Comment"}
-          </button>
-        </div>
-      </form>
-    </>
-  );
-}
-
-function UpliftRequestsSection({ token, dispatchId, currentNTE, upliftRequests, locked, onChanged }) {
-  const [requested, setRequested] = useState("");
-  const [reason, setReason] = useState("");
-  const [submitting, setSubmitting] = useState(false);
-
-  const requests = upliftRequests || [];
-  const pending = requests.find((r) => r.status === "Pending");
-
-  async function submit(e) {
-    e.preventDefault();
-    const amt = parseFloat(requested);
-    if (!Number.isFinite(amt) || amt <= 0) {
-      alert("Enter a valid requested NTE amount.");
-      return;
-    }
-    if (currentNTE != null && amt <= Number(currentNTE)) {
-      alert(`Requested NTE must be greater than the current NTE ($${Number(currentNTE).toFixed(2)}).`);
-      return;
-    }
-    if (!reason.trim()) {
-      alert("Please include a reason for the uplift request.");
-      return;
-    }
-    setSubmitting(true);
-    try {
-      await vendorPortalApi.requestUplift(token, dispatchId, { requestedNTE: amt, reason: reason.trim() });
-      setRequested("");
-      setReason("");
-      await onChanged();
-    } catch (err) {
-      alert(err.message);
-    } finally {
-      setSubmitting(false);
-    }
-  }
-
-  async function cancel(requestId) {
-    if (!window.confirm("Cancel this uplift request?")) return;
-    try {
-      await vendorPortalApi.cancelUplift(token, dispatchId, requestId);
-      await onChanged();
-    } catch (err) {
-      alert(err.message);
-    }
-  }
-
-  return (
-    <>
-      {requests.length === 0 && !pending && (
-        <div className="vp-muted" style={{ marginBottom: 12 }}>
-          No uplift requests yet. Use the form below if the work will exceed the current NTE.
-        </div>
-      )}
-
-      {requests.map((r) => (
-        <div key={r.id} className="vp-uplift-row">
-          <div className="vp-row">
-            <strong>Requested</strong>
-            <span>${Number(r.requestedNTE).toFixed(2)} (was ${Number(r.currentNTE ?? 0).toFixed(2)})</span>
-          </div>
-          <div className="vp-row">
-            <strong>Status</strong>
-            <span>
-              <span className={`vp-uplift-status-${String(r.status).toLowerCase()}`}>{r.status}</span>
-              {r.requiredTier === 2 && r.status === "Pending" && (
-                <span className="vp-muted" style={{ marginLeft: 8 }}>· Manager approval required</span>
-              )}
-            </span>
-          </div>
-          {r.vendorReason && (
-            <div className="vp-row"><strong>Reason</strong><span>{r.vendorReason}</span></div>
-          )}
-          <div className="vp-row">
-            <strong>Requested</strong>
-            <span>{formatDateTime(r.requestedAt)}</span>
-          </div>
-          {r.decidedAt && (
-            <div className="vp-row">
-              <strong>Decided</strong>
-              <span>
-                {formatDateTime(r.decidedAt)}
-                {r.decidedByName ? ` by ${r.decidedByName}` : ""}
-              </span>
-            </div>
-          )}
-          {r.decisionNote && (
-            <div className="vp-row"><strong>Note</strong><span>{r.decisionNote}</span></div>
-          )}
-          {r.status === "Pending" && (
-            <div className="vp-actions">
-              <button type="button" className="vp-btn vp-btn-ghost" onClick={() => cancel(r.id)}>
-                Cancel Request
-              </button>
-            </div>
-          )}
-        </div>
-      ))}
-
-      {!locked && !pending && (
-        <form onSubmit={submit} style={{ marginTop: 12 }}>
-          <div className="vp-row">
-            <strong>Current NTE</strong>
-            <span>${Number(currentNTE ?? 0).toFixed(2)}</span>
-          </div>
-          <div className="vp-row">
-            <strong>New total NTE</strong>
-            <input
-              type="number"
-              step="0.01"
-              min="0"
-              className="vp-input"
-              value={requested}
-              onChange={(e) => setRequested(e.target.value)}
-              placeholder="0.00"
-            />
-          </div>
-          <div className="vp-row">
-            <strong>Reason</strong>
-            <textarea
-              className="vp-textarea"
-              value={reason}
-              onChange={(e) => setReason(e.target.value)}
-              placeholder="Why is the uplift needed?"
-            />
-          </div>
-          <div className="vp-actions">
-            <button type="submit" className="vp-btn vp-btn-primary" disabled={submitting}>
-              {submitting ? "Submitting…" : "Request Uplift"}
-            </button>
-          </div>
-        </form>
-      )}
-    </>
-  );
-}
-
-function SignoffSection({ token, dispatchId, existing, signoffType, nameLabel, onAdded }) {
-  const [name, setName] = useState("");
-  const [method, setMethod] = useState("drawn");
-  const [typedSig, setTypedSig] = useState("");
-  const [drawnSig, setDrawnSig] = useState("");
-  const [submitting, setSubmitting] = useState(false);
-
-  const existingSignoff = existing?.find((s) => s.signoffType === signoffType);
-  if (existingSignoff) {
-    return (
-      <div>
-        <div className="vp-row"><strong>Signed by</strong><span>{existingSignoff.name}</span></div>
-        <div className="vp-row"><strong>Method</strong><span>{existingSignoff.signatureMethod}</span></div>
-        <div className="vp-row"><strong>Signed at</strong><span>{formatDateTime(existingSignoff.signedAt)}</span></div>
-      </div>
-    );
-  }
-
-  async function submit(e) {
-    e.preventDefault();
-    const signature = method === "drawn" ? drawnSig : typedSig;
-    if (!name.trim() || !signature) {
-      alert("Name and signature are required");
-      return;
-    }
-    setSubmitting(true);
-    try {
-      const added = await vendorPortalApi.addSignoff(token, dispatchId, {
-        name: name.trim(),
-        signature,
-        signatureMethod: method,
-        signoffType,
-      });
-      onAdded(added);
-    } catch (err) {
-      alert(err.message);
-    } finally {
-      setSubmitting(false);
-    }
-  }
-
-  return (
-    <form onSubmit={submit}>
-      <div className="vp-row">
-        <strong>{nameLabel}</strong>
-        <input className="vp-input" value={name} onChange={(e) => setName(e.target.value)} />
-      </div>
-      <div className="vp-row">
-        <strong>Method</strong>
-        <div>
-          <label style={{ marginRight: 12 }}>
-            <input type="radio" checked={method === "drawn"} onChange={() => setMethod("drawn")} /> Drawn
-          </label>
-          <label>
-            <input type="radio" checked={method === "typed"} onChange={() => setMethod("typed")} /> Typed
-          </label>
-        </div>
-      </div>
-      {method === "drawn" ? (
-        <div style={{ marginTop: 8 }}>
-          <SignaturePad onChange={setDrawnSig} />
-        </div>
-      ) : (
-        <div className="vp-row">
-          <strong>Signature</strong>
-          <input className="vp-input" value={typedSig} onChange={(e) => setTypedSig(e.target.value)} />
-        </div>
-      )}
-      <div className="vp-actions">
-        <button type="submit" className="vp-btn vp-btn-success" disabled={submitting}>
-          {submitting ? "Signing…" : "Submit Signoff"}
-        </button>
-      </div>
-    </form>
-  );
-}
-
-export default function DispatchDetailPage() {
-  const { token } = useVendorPortal();
-  const { id } = useParams();
-  const dispatchId = Number(id);
-  const [data, setData] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [err, setErr] = useState(null);
-  const [busy, setBusy] = useState(false);
-
-  const refresh = useCallback(async () => {
-    setLoading(true);
-    try {
-      const d = await vendorPortalApi.getDispatch(token, dispatchId);
-      setData(d);
-    } catch (e) {
-      setErr(e.message);
-    } finally {
-      setLoading(false);
-    }
-  }, [token, dispatchId]);
-
-  useEffect(() => { refresh(); }, [refresh]);
-
-  async function runAction(fn, confirmMsg) {
-    if (confirmMsg && !window.confirm(confirmMsg)) return;
-    setBusy(true);
-    try {
-      await fn();
-      await refresh();
-    } catch (e) {
-      alert(e.message);
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  if (loading && !data) return <div className="vp-card vp-muted">Loading dispatch…</div>;
-  if (err && !data) return <div className="vp-error">{err}</div>;
-  if (!data) return null;
-
-  const locked = data.status === "Verified" || data.status === "Cancelled";
-
-  return (
-    <>
-      <Link to={`/v/${token}/dashboard`} className="vp-back-link">← Back to dispatches</Link>
-
-      <div className="vp-card">
-        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
-          <div>
-            <h2>{data.dispatchNumber}</h2>
-            <div className="vp-muted">{data.workOrder?.workerOrderTitle}</div>
-          </div>
-          <span className={statusClass(data.status)}>{data.status}</span>
-        </div>
-
-        <div style={{ marginTop: 12 }}>
-          {data.workOrder?.internalWONumber && <div className="vp-row"><strong>WO #</strong><span>{data.workOrder.internalWONumber}</span></div>}
-          {data.poNumber && <div className="vp-row"><strong>PO #</strong><span>{data.poNumber}</span></div>}
-          {data.nteAmount != null && <div className="vp-row"><strong>NTE</strong><span>${Number(data.nteAmount).toFixed(2)}</span></div>}
-          {data.workOrder?.priority && <div className="vp-row"><strong>Priority</strong><span>{data.workOrder.priority}</span></div>}
-          {data.workOrder?.trade && <div className="vp-row"><strong>Trade</strong><span>{data.workOrder.trade}{data.workOrder.subTrade ? ` / ${data.workOrder.subTrade}` : ""}</span></div>}
-          {data.workOrder?.problem && <div className="vp-row"><strong>Problem</strong><span>{data.workOrder.problem}</span></div>}
-          {data.scheduledDate && <div className="vp-row"><strong>Scheduled</strong><span>{formatDateTime(data.scheduledDate)}</span></div>}
-          {data.acknowledgedAt && <div className="vp-row"><strong>Acknowledged</strong><span>{formatDateTime(data.acknowledgedAt)}</span></div>}
-          {data.completedDate && <div className="vp-row"><strong>Completed</strong><span>{formatDateTime(data.completedDate)}</span></div>}
-        </div>
-
-        {data.location && (
-          <>
-            <h3 style={{ marginTop: 16 }}>Location</h3>
-            <div>{data.location.name}</div>
-            <div className="vp-muted">
-              {[data.location.address, data.location.city, data.location.state, data.location.zipCode].filter(Boolean).join(", ")}
-            </div>
-          </>
-        )}
-
-        {(data.description || data.workOrder?.description) && (
-          <>
-            <h3 style={{ marginTop: 16 }}>Description</h3>
-            <div>{data.description || data.workOrder?.description}</div>
-          </>
-        )}
-
-        <div className="vp-actions">
-          {data.status === "Sent" && (
-            <button className="vp-btn vp-btn-success" disabled={busy}
-              onClick={() => runAction(() => vendorPortalApi.accept(token, dispatchId))}>
-              Accept Dispatch
-            </button>
-          )}
-          {data.status === "Acknowledged" && (
-            <button className="vp-btn vp-btn-primary" disabled={busy}
-              onClick={() => runAction(() => vendorPortalApi.changeStatus(token, dispatchId, "In Progress"))}>
-              Start Work
-            </button>
-          )}
-          {data.status === "In Progress" && (
-            <button className="vp-btn vp-btn-primary" disabled={busy}
-              onClick={() => runAction(() => vendorPortalApi.changeStatus(token, dispatchId, "Completed"),
-                "Mark this dispatch as completed?")}>
-              Mark Completed
-            </button>
-          )}
-          {!locked && data.status !== "Sent" && (
-            <button className="vp-btn vp-btn-warn" disabled={busy}
-              onClick={() => {
-                const reason = window.prompt("Reason for cancel request?");
-                if (reason == null) return;
-                runAction(() => vendorPortalApi.requestCancel(token, dispatchId, reason));
-              }}>
-              Request Cancel
-            </button>
-          )}
-        </div>
-      </div>
-
-      <div className="vp-card">
-        <h3>Checklist</h3>
-        <ChecklistSection
-          token={token}
-          dispatchId={dispatchId}
-          items={data.checklist}
-          locked={locked}
-          onItemUpdated={(updated) => setData((d) => ({
-            ...d,
-            checklist: d.checklist.map((it) => it.id === updated.id ? { ...it, ...updated } : it),
-          }))}
-        />
-      </div>
-
-      <div className="vp-card">
-        <h3>NTE Uplift Requests</h3>
-        <div className="vp-muted" style={{ marginBottom: 8 }}>
-          Need more than the current NTE? Submit a request and the dispatcher will review.
-        </div>
-        <UpliftRequestsSection
-          token={token}
-          dispatchId={dispatchId}
-          currentNTE={data.nteAmount}
-          upliftRequests={data.upliftRequests || []}
-          locked={locked}
-          onChanged={refresh}
-        />
-      </div>
-
-      <div className="vp-card">
-        <h3>Customer Signoff</h3>
-        <div className="vp-muted" style={{ marginBottom: 8 }}>
-          Have the on-site customer representative sign to acknowledge completion.
-        </div>
-        <SignoffSection
-          token={token}
-          dispatchId={dispatchId}
-          existing={data.signoffs}
-          signoffType="customer"
-          nameLabel="Customer name"
-          onAdded={() => refresh()}
-        />
-      </div>
-
-      <div className="vp-card">
-        <h3>Vendor Signoff</h3>
-        <SignoffSection
-          token={token}
-          dispatchId={dispatchId}
-          existing={data.signoffs}
-          signoffType="vendor"
-          nameLabel="Your name"
-          onAdded={() => refresh()}
-        />
-      </div>
-
-      <div className="vp-card">
-        <h3>Comments</h3>
-        <CommentsSection
-          token={token}
-          dispatchId={dispatchId}
-          comments={data.comments || []}
-          onAdded={(c) => setData((d) => ({ ...d, comments: [...(d.comments || []), c] }))}
-        />
-      </div>
-    </>
-  );
-}
diff --git a/src/pages/vendor-portal/PosPage.js b/src/pages/vendor-portal/PosPage.js
deleted file mode 100644
index 47aa6501..00000000
--- a/src/pages/vendor-portal/PosPage.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useVendorPortal } from "./VendorPortalContext";
-import { vendorPortalApi } from "./api";
-import { statusClass, formatDateTime } from "./statusHelpers";
-
-const FILTERS = [
-  { key: "open", label: "Open", match: (d) => d.status !== "Completed" && d.status !== "Verified" && d.status !== "Cancelled" },
-  { key: "completed", label: "Completed", match: (d) => d.status === "Completed" || d.status === "Verified" },
-  { key: "cancelled", label: "Cancelled", match: (d) => d.status === "Cancelled" },
-  { key: "all", label: "All", match: () => true },
-];
-
-function fmtDate(value) {
-  if (!value) return "—";
-  const d = new Date(value);
-  if (isNaN(d)) return "—";
-  const pad = (n) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-}
-
-function fmtMoney(value) {
-  if (value == null) return "—";
-  const n = Number(value);
-  if (isNaN(n)) return "—";
-  return `$${n.toFixed(2)}`;
-}
-
-export default function PosPage() {
-  const { token } = useVendorPortal();
-  const navigate = useNavigate();
-  const [dispatches, setDispatches] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [err, setErr] = useState(null);
-  const [filter, setFilter] = useState("open");
-  const [search, setSearch] = useState("");
-
-  useEffect(() => {
-    setLoading(true);
-    vendorPortalApi
-      .listDispatches(token)
-      .then((data) => setDispatches(Array.isArray(data) ? data : []))
-      .catch((e) => setErr(e.message))
-      .finally(() => setLoading(false));
-  }, [token]);
-
-  const activeFilter = FILTERS.find((f) => f.key === filter) ?? FILTERS[0];
-
-  const visible = useMemo(() => {
-    const needle = search.trim().toLowerCase();
-    return dispatches.filter((d) => {
-      if (!activeFilter.match(d)) return false;
-      if (!needle) return true;
-      return (
-        (d.poNumber || "").toLowerCase().includes(needle) ||
-        (d.dispatchNumber || "").toLowerCase().includes(needle) ||
-        (d.internalWONumber || "").toLowerCase().includes(needle) ||
-        (d.workOrderTitle || "").toLowerCase().includes(needle) ||
-        (d.locationName || "").toLowerCase().includes(needle)
-      );
-    });
-  }, [dispatches, activeFilter, search]);
-
-  return (
-    <>
-      <div className="vp-card">
-        <h2>Your Purchase Orders</h2>
-        <div className="vp-muted" style={{ marginBottom: 12 }}>
-          Every PO issued to your company, with current status and dollar value.
-        </div>
-        <div className="vp-actions" style={{ marginTop: 0, gap: 12, alignItems: "center", flexWrap: "wrap" }}>
-          {FILTERS.map((f) => (
-            <button
-              key={f.key}
-              className={`vp-btn ${filter === f.key ? "vp-btn-primary" : "vp-btn-ghost"}`}
-              onClick={() => setFilter(f.key)}
-            >
-              {f.label}
-              {" "}
-              <span style={{ opacity: 0.7, fontWeight: 400 }}>
-                ({dispatches.filter(f.match).length})
-              </span>
-            </button>
-          ))}
-          <input
-            className="vp-input"
-            placeholder="Search PO #, WO, location…"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            style={{ marginLeft: "auto", minWidth: 240 }}
-          />
-        </div>
-      </div>
-
-      {loading && <div className="vp-card vp-muted">Loading POs…</div>}
-      {err && <div className="vp-error">{err}</div>}
-
-      {!loading && !err && visible.length === 0 && (
-        <div className="vp-card vp-empty">No POs match this view.</div>
-      )}
-
-      {!loading && !err && visible.length > 0 && (
-        <div className="vp-card" style={{ padding: 0 }}>
-          <table className="vp-po-table">
-            <thead>
-              <tr>
-                <th>PO #</th>
-                <th>Dispatch #</th>
-                <th>Status</th>
-                <th>NTE</th>
-                <th>Location</th>
-                <th>Dispatched</th>
-                <th>Scheduled</th>
-                <th>Completed</th>
-              </tr>
-            </thead>
-            <tbody>
-              {visible.map((d) => (
-                <tr key={d.id} onClick={() => navigate(`../dispatch/${d.id}`)}>
-                  <td>
-                    <span className="vp-po-number">{d.poNumber || "—"}</span>
-                  </td>
-                  <td className="vp-po-muted-cell">{d.dispatchNumber}</td>
-                  <td>
-                    <span className={statusClass(d.status)}>{d.status}</span>
-                  </td>
-                  <td>{fmtMoney(d.nteAmount)}</td>
-                  <td className="vp-po-muted-cell">
-                    {d.locationName || "—"}
-                    {d.locationCity ? ` · ${d.locationCity}` : ""}
-                    {d.locationState ? `, ${d.locationState}` : ""}
-                  </td>
-                  <td className="vp-po-muted-cell">{d.dispatchedAt ? formatDateTime(d.dispatchedAt) : "—"}</td>
-                  <td className="vp-po-muted-cell">{fmtDate(d.scheduledDate)}</td>
-                  <td className="vp-po-muted-cell">{fmtDate(d.completedDate)}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </>
-  );
-}
diff --git a/src/pages/vendor-portal/VendorPortalContext.js b/src/pages/vendor-portal/VendorPortalContext.js
deleted file mode 100644
index 1c03f1d9..00000000
--- a/src/pages/vendor-portal/VendorPortalContext.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { createContext, useContext, useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-import { vendorPortalApi } from "./api";
-
-const VendorPortalContext = createContext(null);
-
-export function useVendorPortal() {
-  const ctx = useContext(VendorPortalContext);
-  if (!ctx) throw new Error("useVendorPortal used outside provider");
-  return ctx;
-}
-
-export function VendorPortalProvider({ children }) {
-  const { token } = useParams();
-  const [vendor, setVendor] = useState(null);
-  const [status, setStatus] = useState("loading");
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    setStatus("loading");
-    vendorPortalApi
-      .session(token)
-      .then((data) => {
-        if (cancelled) return;
-        setVendor(data);
-        setStatus("ready");
-      })
-      .catch((err) => {
-        if (cancelled) return;
-        setError(err);
-        setStatus("error");
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [token]);
-
-  const value = { token, vendor, status, error };
-  return <VendorPortalContext.Provider value={value}>{children}</VendorPortalContext.Provider>;
-}
diff --git a/src/pages/vendor-portal/api.js b/src/pages/vendor-portal/api.js
deleted file mode 100644
index d67fff1c..00000000
--- a/src/pages/vendor-portal/api.js
+++ /dev/null
@@ -1,41 +0,0 @@
-const PREFIX = "/api/vendor-portal";
-
-async function call(token, path, { method = "GET", body } = {}) {
-  const res = await fetch(`${PREFIX}${path}`, {
-    method,
-    headers: {
-      "Content-Type": "application/json",
-      "X-Vendor-Token": token,
-    },
-    body: body ? JSON.stringify(body) : undefined,
-  });
-  if (res.status === 401) {
-    const err = new Error("Invalid or expired token");
-    err.status = 401;
-    throw err;
-  }
-  const payload = await res.json().catch(() => ({}));
-  if (!res.ok) {
-    const err = new Error(payload?.message || payload?.Message || `HTTP ${res.status}`);
-    err.status = res.status;
-    throw err;
-  }
-  return payload?.data ?? payload?.Data ?? payload;
-}
-
-export const vendorPortalApi = {
-  session: (token) => call(token, "/session"),
-  listDispatches: (token, status) => call(token, status ? `/dispatches?status=${encodeURIComponent(status)}` : "/dispatches"),
-  getDispatch: (token, id) => call(token, `/dispatches/${id}`),
-  accept: (token, id) => call(token, `/dispatches/${id}/accept`, { method: "POST" }),
-  changeStatus: (token, id, status) => call(token, `/dispatches/${id}/status`, { method: "POST", body: { status } }),
-  requestCancel: (token, id, reason) => call(token, `/dispatches/${id}/request-cancel`, { method: "POST", body: { reason } }),
-  updateChecklistItem: (token, id, itemId, isCompleted) =>
-    call(token, `/dispatches/${id}/checklist/${itemId}`, { method: "POST", body: { isCompleted } }),
-  addSignoff: (token, id, payload) => call(token, `/dispatches/${id}/signoff`, { method: "POST", body: payload }),
-  addComment: (token, id, commentText) => call(token, `/dispatches/${id}/comments`, { method: "POST", body: { commentText } }),
-  requestUplift: (token, id, payload) =>
-    call(token, `/dispatches/${id}/uplift-request`, { method: "POST", body: payload }),
-  cancelUplift: (token, id, requestId) =>
-    call(token, `/dispatches/${id}/uplift-request/${requestId}/cancel`, { method: "POST" }),
-};
diff --git a/src/pages/vendor-portal/statusHelpers.js b/src/pages/vendor-portal/statusHelpers.js
deleted file mode 100644
index 496a0704..00000000
--- a/src/pages/vendor-portal/statusHelpers.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export function statusClass(status) {
-  const map = {
-    Sent: "vp-status-sent",
-    Acknowledged: "vp-status-acknowledged",
-    "In Progress": "vp-status-in-progress",
-    Completed: "vp-status-completed",
-    Verified: "vp-status-verified",
-    Cancelled: "vp-status-cancelled",
-  };
-  return `vp-status-pill ${map[status] || ""}`;
-}
-
-export function formatDateTime(d) {
-  if (!d) return "";
-  const date = new Date(d);
-  if (isNaN(date.getTime())) return "";
-  return date.toLocaleString();
-}
diff --git a/src/pages/vendor-portal/vendor-portal.css b/src/pages/vendor-portal/vendor-portal.css
deleted file mode 100644
index 6238d97a..00000000
--- a/src/pages/vendor-portal/vendor-portal.css
+++ /dev/null
@@ -1,375 +0,0 @@
-.vp-shell {
-  min-height: 100vh;
-  background: #f5f6f8;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  color: #222;
-}
-
-.vp-header {
-  background: #1f2d3d;
-  color: #fff;
-  padding: 14px 24px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.vp-brand {
-  font-size: 18px;
-  font-weight: 600;
-  letter-spacing: 0.3px;
-}
-
-.vp-vendor-name {
-  font-size: 13px;
-  opacity: 0.85;
-}
-
-.vp-container {
-  max-width: 1080px;
-  margin: 0 auto;
-  padding: 24px;
-}
-
-.vp-card {
-  background: #fff;
-  border: 1px solid #e4e7eb;
-  border-radius: 10px;
-  padding: 20px;
-  margin-bottom: 16px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-}
-
-.vp-card h2 {
-  margin: 0 0 4px;
-  font-size: 20px;
-}
-
-.vp-card h3 {
-  margin: 0 0 12px;
-  font-size: 16px;
-  color: #1f2d3d;
-}
-
-.vp-muted {
-  color: #6b7280;
-  font-size: 13px;
-}
-
-.vp-row {
-  display: grid;
-  grid-template-columns: 140px 1fr;
-  gap: 8px;
-  margin: 6px 0;
-  font-size: 14px;
-}
-
-.vp-row strong {
-  color: #374151;
-}
-
-.vp-dispatch-list {
-  display: grid;
-  gap: 12px;
-}
-
-.vp-dispatch-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  background: #fff;
-  border: 1px solid #e4e7eb;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: border-color 0.15s, box-shadow 0.15s;
-}
-
-.vp-dispatch-card:hover {
-  border-color: #3b82f6;
-  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.12);
-}
-
-.vp-dispatch-title {
-  font-weight: 600;
-  font-size: 15px;
-  margin-bottom: 4px;
-}
-
-.vp-dispatch-meta {
-  font-size: 13px;
-  color: #6b7280;
-}
-
-.vp-status-pill {
-  display: inline-block;
-  padding: 4px 10px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.2px;
-}
-
-.vp-status-sent { background: #fef3c7; color: #92400e; }
-.vp-status-acknowledged { background: #dbeafe; color: #1e40af; }
-.vp-status-in-progress { background: #e0e7ff; color: #3730a3; }
-.vp-status-completed { background: #d1fae5; color: #065f46; }
-.vp-status-verified { background: #cffafe; color: #155e75; }
-.vp-status-cancelled { background: #fee2e2; color: #991b1b; }
-
-.vp-btn {
-  display: inline-block;
-  padding: 10px 18px;
-  font-size: 14px;
-  font-weight: 600;
-  border-radius: 6px;
-  border: none;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.vp-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.vp-btn-primary { background: #2563eb; color: #fff; }
-.vp-btn-primary:hover:not(:disabled) { background: #1d4ed8; }
-.vp-btn-success { background: #10b981; color: #fff; }
-.vp-btn-success:hover:not(:disabled) { background: #059669; }
-.vp-btn-warn { background: #f59e0b; color: #fff; }
-.vp-btn-warn:hover:not(:disabled) { background: #d97706; }
-.vp-btn-danger { background: #ef4444; color: #fff; }
-.vp-btn-danger:hover:not(:disabled) { background: #dc2626; }
-.vp-btn-ghost { background: transparent; color: #374151; border: 1px solid #d1d5db; }
-.vp-btn-ghost:hover:not(:disabled) { background: #f3f4f6; }
-
-.vp-actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  margin-top: 12px;
-}
-
-.vp-checklist-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 0;
-  border-bottom: 1px solid #f1f3f5;
-  font-size: 14px;
-}
-
-.vp-checklist-item:last-child { border-bottom: none; }
-
-.vp-checklist-item input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-}
-
-.vp-checklist-item.done label { text-decoration: line-through; color: #9ca3af; }
-
-.vp-comment {
-  padding: 10px 12px;
-  background: #f9fafb;
-  border-left: 3px solid #d1d5db;
-  margin-bottom: 8px;
-  font-size: 14px;
-}
-
-.vp-comment.vendor { border-left-color: #10b981; }
-.vp-comment.dispatcher { border-left-color: #3b82f6; }
-.vp-comment.customer { border-left-color: #8b5cf6; }
-.vp-comment.internal { border-left-color: #f59e0b; }
-
-.vp-comment-meta {
-  font-size: 12px;
-  color: #6b7280;
-  margin-bottom: 4px;
-}
-
-.vp-textarea, .vp-input {
-  width: 100%;
-  padding: 10px 12px;
-  font-size: 14px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  font-family: inherit;
-  box-sizing: border-box;
-}
-
-.vp-textarea { min-height: 80px; resize: vertical; }
-
-.vp-error {
-  background: #fee2e2;
-  color: #991b1b;
-  padding: 16px;
-  border-radius: 8px;
-  text-align: center;
-}
-
-.vp-empty {
-  text-align: center;
-  padding: 40px;
-  color: #6b7280;
-}
-
-.vp-signature-canvas {
-  border: 1px dashed #9ca3af;
-  border-radius: 6px;
-  background: #fff;
-  touch-action: none;
-  display: block;
-  width: 100%;
-  max-width: 500px;
-  height: 180px;
-}
-
-.vp-back-link {
-  color: #2563eb;
-  text-decoration: none;
-  font-size: 14px;
-  display: inline-block;
-  margin-bottom: 12px;
-}
-
-.vp-back-link:hover { text-decoration: underline; }
-
-.vp-uplift-row {
-  padding: 12px;
-  border: 1px solid #e4e7eb;
-  border-radius: 8px;
-  background: #fafbfc;
-  margin-bottom: 10px;
-}
-
-.vp-uplift-status-pending {
-  display: inline-block;
-  padding: 3px 9px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  background: #fef3c7;
-  color: #92400e;
-}
-
-.vp-uplift-status-approved {
-  display: inline-block;
-  padding: 3px 9px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  background: #d1fae5;
-  color: #065f46;
-}
-
-.vp-uplift-status-denied {
-  display: inline-block;
-  padding: 3px 9px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.vp-uplift-status-cancelled {
-  display: inline-block;
-  padding: 3px 9px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  background: #e5e7eb;
-  color: #4b5563;
-}
-
-.vp-nav {
-  background: #fff;
-  border-bottom: 1px solid #e4e7eb;
-  padding: 0 24px;
-}
-
-.vp-nav-inner {
-  max-width: 1080px;
-  margin: 0 auto;
-  display: flex;
-  gap: 4px;
-}
-
-.vp-nav-tab {
-  background: none;
-  border: none;
-  padding: 12px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #6b7280;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  transition: color 120ms, border-color 120ms;
-  text-decoration: none;
-  display: inline-block;
-}
-
-.vp-nav-tab:hover {
-  color: #1f2d3d;
-}
-
-.vp-nav-tab.active {
-  color: #1f2d3d;
-  border-bottom-color: #2563eb;
-}
-
-.vp-po-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-}
-
-.vp-po-table th,
-.vp-po-table td {
-  padding: 10px 12px;
-  text-align: left;
-  border-bottom: 1px solid #f1f3f5;
-}
-
-.vp-po-table th {
-  background: #f9fafb;
-  font-weight: 600;
-  color: #374151;
-  font-size: 13px;
-}
-
-.vp-po-table tbody tr {
-  cursor: pointer;
-  transition: background 120ms;
-}
-
-.vp-po-table tbody tr:hover {
-  background: #f9fafb;
-}
-
-.vp-po-table tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.vp-po-number {
-  font-weight: 600;
-  color: #1f2d3d;
-}
-
-.vp-po-muted-cell {
-  color: #6b7280;
-  font-size: 13px;
-}
-
-.vp-po-uplift-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  background: #fef3c7;
-  color: #92400e;
-  margin-left: 6px;
-}
diff --git a/src/pages/vendor-pos/list/List.js b/src/pages/vendor-pos/list/List.js
deleted file mode 100644
index 3998d92d..00000000
--- a/src/pages/vendor-pos/list/List.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useNavigate } from "react-router";
-import usePaginatedList from "../../../hooks/usePaginatedList";
-import { fetchDispatchesPaged } from "./api";
-import { vendorApi } from "../../../services/api";
-import Table from "./Table";
-import "./styles.css";
-
-const STATUS_OPTIONS = ["", "Sent", "Acknowledged", "In Progress", "Completed", "Verified", "Cancelled"];
-
-export default function VendorPoList() {
-  const navigate = useNavigate();
-  const [status, setStatus] = useState("");
-  const [vendorId, setVendorId] = useState("");
-  const [dateFrom, setDateFrom] = useState("");
-  const [dateTo, setDateTo] = useState("");
-  const [vendors, setVendors] = useState([]);
-
-  const extraParams = { status, vendorId, dateFrom, dateTo };
-
-  const {
-    rows, search, setSearch, page, setPage, pageSize, setPageSize,
-    totalCount, loading, err,
-  } = usePaginatedList(fetchDispatchesPaged, extraParams);
-
-  useEffect(() => {
-    vendorApi.getAll({ page: 1, pageSize: 500 })
-      .then((res) => {
-        const data = res?.data ?? res?.Data ?? res;
-        const items = data?.items || data || [];
-        setVendors(
-          items.map((v) => ({
-            id: v.id ?? v.Id,
-            companyName: v.companyName ?? v.CompanyName ?? "",
-          })).filter((v) => v.companyName)
-        );
-      })
-      .catch(() => setVendors([]));
-  }, []);
-
-  const clearFilters = () => {
-    setStatus("");
-    setVendorId("");
-    setDateFrom("");
-    setDateTo("");
-    setPage(1);
-  };
-
-  return (
-    <section className="vendorPoListPage">
-      <div className="vendorPoListToolbar">
-        <div className="vendorPoListToolbarLeft">
-          <h2 className="vendorPoListTitle">Vendor POs</h2>
-          <span className="vendorPoListCount">{totalCount} total</span>
-        </div>
-        <div className="vendorPoListToolbarRight">
-          <input
-            className="vendorPoSearchInput"
-            value={search}
-            onChange={(e) => { setSearch(e.target.value); setPage(1); }}
-            placeholder="Search by PO #, Dispatch #, vendor, WO #, location..."
-          />
-        </div>
-      </div>
-
-      <div className="vendorPoListFilters">
-        <label>
-          Status:
-          <select value={status} onChange={(e) => { setStatus(e.target.value); setPage(1); }}>
-            {STATUS_OPTIONS.map((s) => (
-              <option key={s || "all"} value={s}>{s || "All"}</option>
-            ))}
-          </select>
-        </label>
-        <label>
-          Vendor:
-          <select value={vendorId} onChange={(e) => { setVendorId(e.target.value); setPage(1); }}>
-            <option value="">All</option>
-            {vendors.map((v) => (
-              <option key={v.id} value={v.id}>{v.companyName}</option>
-            ))}
-          </select>
-        </label>
-        <label>
-          From:
-          <input type="date" value={dateFrom} onChange={(e) => { setDateFrom(e.target.value); setPage(1); }} />
-        </label>
-        <label>
-          To:
-          <input type="date" value={dateTo} onChange={(e) => { setDateTo(e.target.value); setPage(1); }} />
-        </label>
-        <button type="button" className="vendorPoListFiltersClear" onClick={clearFilters}>
-          Clear filters
-        </button>
-      </div>
-
-      <Table
-        loading={loading}
-        error={err}
-        rows={rows}
-        onView={(item) => navigate(`/vendor-pos/${item.id}`)}
-        page={page}
-        setPage={setPage}
-        pageSize={pageSize}
-        setPageSize={setPageSize}
-        totalCount={totalCount}
-      />
-    </section>
-  );
-}
diff --git a/src/pages/vendor-pos/list/Table.js b/src/pages/vendor-pos/list/Table.js
deleted file mode 100644
index 39438c2d..00000000
--- a/src/pages/vendor-pos/list/Table.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from "react";
-import SharedTable from "../../../components/SharedTable";
-
-function fmtDate(value) {
-  if (!value) return "";
-  const d = new Date(value);
-  if (isNaN(d)) return "";
-  const pad = (n) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-}
-
-function fmtMoney(value) {
-  if (value == null) return "";
-  const n = Number(value);
-  if (isNaN(n)) return "";
-  return `$${n.toFixed(2)}`;
-}
-
-export default function Table({ loading, error, rows, onView, page, setPage, pageSize, setPageSize, totalCount }) {
-  const columns = [
-    {
-      key: "poNumber",
-      label: "PO #",
-      render: (val, row) => (
-        <strong>
-          <a href="#" onClick={(e) => { e.preventDefault(); onView && onView(row); }}>
-            {val || "—"}
-          </a>
-        </strong>
-      ),
-    },
-    { key: "dispatchNumber", label: "Dispatch #" },
-    { key: "vendorName", label: "Vendor" },
-    { key: "primaryWOInternalNumber", label: "WO #" },
-    {
-      key: "workOrderCount",
-      label: "WOs",
-      render: (val) => (val == null ? "" : String(val)),
-    },
-    { key: "locationName", label: "Location" },
-    {
-      key: "nteAmount",
-      label: "NTE",
-      render: (val) => fmtMoney(val),
-    },
-    {
-      key: "status",
-      label: "Status",
-      render: (val) => (
-        <span className={`vendorPoStatusPill vendorPoStatusPill-${String(val || "").toLowerCase().replace(/\s+/g, "-")}`}>
-          {val || "—"}
-        </span>
-      ),
-    },
-    {
-      key: "pendingUpliftCount",
-      label: "Uplifts",
-      render: (val) => (val > 0 ? <span className="vendorPoUpliftBadge">{val} pending</span> : ""),
-    },
-    {
-      key: "dispatchedAt",
-      label: "Dispatched",
-      render: (val) => fmtDate(val),
-    },
-    {
-      key: "scheduledDate",
-      label: "Scheduled",
-      render: (val) => fmtDate(val),
-    },
-    {
-      key: "completedDate",
-      label: "Completed",
-      render: (val) => fmtDate(val),
-    },
-  ];
-
-  return (
-    <SharedTable
-      rows={rows}
-      columns={columns}
-      onEdit={onView}
-      page={page}
-      setPage={setPage}
-      pageSize={pageSize}
-      setPageSize={setPageSize}
-      totalCount={totalCount}
-      loading={loading}
-      error={error}
-    />
-  );
-}
diff --git a/src/pages/vendor-pos/list/api.js b/src/pages/vendor-pos/list/api.js
deleted file mode 100644
index 066c21eb..00000000
--- a/src/pages/vendor-pos/list/api.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { dispatchApi } from "../../../services/api";
-
-export const fetchDispatchesPaged = async ({
-  search = "",
-  page = 1,
-  pageSize = 12,
-  sortBy = "dispatchedAt",
-  sortDir = "desc",
-  status = "",
-  vendorId = "",
-  dateFrom = "",
-  dateTo = "",
-}) => {
-  const params = { page, pageSize, sortBy, sortDir };
-  if (search) params.search = search;
-  if (status) params.status = status;
-  if (vendorId) params.vendorId = vendorId;
-  if (dateFrom) params.dateFrom = dateFrom;
-  if (dateTo) params.dateTo = dateTo;
-
-  const res = await dispatchApi.list(params);
-  const data = res?.data ?? res?.Data ?? res;
-  const items = data?.items || [];
-  return {
-    rows: items,
-    page: data?.page ?? page,
-    pageSize: data?.pageSize ?? pageSize,
-    totalCount: data?.total ?? items.length,
-    totalPages: Math.max(1, Math.ceil((data?.total ?? items.length) / pageSize)),
-  };
-};
diff --git a/src/pages/vendor-pos/list/styles.css b/src/pages/vendor-pos/list/styles.css
deleted file mode 100644
index f8d2cc33..00000000
--- a/src/pages/vendor-pos/list/styles.css
+++ /dev/null
@@ -1,111 +0,0 @@
-.vendorPoListPage {
-  padding: 24px;
-}
-
-.vendorPoListToolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.vendorPoListToolbarLeft {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-}
-
-.vendorPoListTitle {
-  margin: 0;
-  font-size: 22px;
-  color: #1f2937;
-}
-
-.vendorPoListCount {
-  color: #6b7280;
-  font-size: 13px;
-}
-
-.vendorPoListToolbarRight {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.vendorPoSearchInput {
-  padding: 7px 12px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  font-size: 14px;
-  min-width: 240px;
-  background: #fff;
-}
-
-.vendorPoListFilters {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-bottom: 12px;
-  padding: 10px 12px;
-  background: #f9fafb;
-  border: 1px solid #e4e7eb;
-  border-radius: 8px;
-  font-size: 13px;
-  color: #374151;
-}
-
-.vendorPoListFilters label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.vendorPoListFilters select,
-.vendorPoListFilters input[type="date"] {
-  padding: 5px 8px;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  font-size: 13px;
-  background: #fff;
-}
-
-.vendorPoListFiltersClear {
-  border: 1px solid #d1d5db;
-  background: #fff;
-  border-radius: 6px;
-  padding: 5px 10px;
-  cursor: pointer;
-  font-size: 12px;
-  color: #374151;
-}
-
-.vendorPoStatusPill {
-  display: inline-block;
-  padding: 3px 9px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  background: #e5e7eb;
-  color: #4b5563;
-}
-
-.vendorPoStatusPill-sent { background: #dbeafe; color: #1e40af; }
-.vendorPoStatusPill-acknowledged { background: #e0e7ff; color: #3730a3; }
-.vendorPoStatusPill-in-progress { background: #fef3c7; color: #92400e; }
-.vendorPoStatusPill-completed { background: #d1fae5; color: #065f46; }
-.vendorPoStatusPill-verified { background: #bbf7d0; color: #14532d; }
-.vendorPoStatusPill-cancelled { background: #fee2e2; color: #991b1b; }
-
-.vendorPoUpliftBadge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  background: #fef3c7;
-  color: #92400e;
-}
diff --git a/src/pages/vendor-pos/view/VendorPoViewPage.css b/src/pages/vendor-pos/view/VendorPoViewPage.css
deleted file mode 100644
index 8c43cdc8..00000000
--- a/src/pages/vendor-pos/view/VendorPoViewPage.css
+++ /dev/null
@@ -1,297 +0,0 @@
-.vendorPoPage {
-  padding: 24px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.vendorPoTopBar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-.vendorPoTopBar .vendorPoBack {
-  background: none;
-  border: none;
-  color: #2563eb;
-  cursor: pointer;
-  font-size: 14px;
-  padding: 0;
-}
-
-.vendorPoTopActions {
-  display: flex;
-  gap: 8px;
-}
-
-.vendorPoPrintBtn {
-  background: #fff;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  padding: 6px 14px;
-  cursor: pointer;
-  font-size: 14px;
-  color: #374151;
-}
-
-.vendorPoPrintBtn:hover { background: #f9fafb; }
-
-.vendorPoHeader {
-  background: #fff;
-  border: 1px solid #e4e7eb;
-  border-radius: 8px;
-  padding: 20px 24px;
-  margin-bottom: 16px;
-}
-
-.vendorPoHeader h1 {
-  margin: 0 0 4px 0;
-  font-size: 24px;
-  color: #111827;
-}
-
-.vendorPoHeaderSub {
-  color: #6b7280;
-  font-size: 14px;
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.vendorPoStatusPill {
-  display: inline-block;
-  padding: 3px 10px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-  background: #e5e7eb;
-  color: #4b5563;
-}
-
-.vendorPoStatusPill-sent { background: #dbeafe; color: #1e40af; }
-.vendorPoStatusPill-acknowledged { background: #e0e7ff; color: #3730a3; }
-.vendorPoStatusPill-in-progress { background: #fef3c7; color: #92400e; }
-.vendorPoStatusPill-completed { background: #d1fae5; color: #065f46; }
-.vendorPoStatusPill-verified { background: #bbf7d0; color: #14532d; }
-.vendorPoStatusPill-cancelled { background: #fee2e2; color: #991b1b; }
-
-.vendorPoCard {
-  background: #fff;
-  border: 1px solid #e4e7eb;
-  border-radius: 8px;
-  padding: 16px 20px;
-  margin-bottom: 16px;
-}
-
-.vendorPoCard h3 {
-  margin: 0 0 12px 0;
-  font-size: 16px;
-  color: #1f2937;
-  border-bottom: 1px solid #f1f3f5;
-  padding-bottom: 8px;
-}
-
-.vendorPoInfoGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 12px 24px;
-  font-size: 14px;
-}
-
-.vendorPoInfoItem {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.vendorPoInfoLabel {
-  font-size: 12px;
-  color: #6b7280;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-}
-
-.vendorPoInfoValue {
-  font-size: 14px;
-  color: #1f2937;
-  font-weight: 500;
-}
-
-.vendorPoTable {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-}
-
-.vendorPoTable th,
-.vendorPoTable td {
-  padding: 8px 10px;
-  text-align: left;
-  border-bottom: 1px solid #f1f3f5;
-}
-
-.vendorPoTable th {
-  background: #f9fafb;
-  font-weight: 600;
-  color: #374151;
-  font-size: 13px;
-}
-
-.vendorPoTable tr:last-child td {
-  border-bottom: none;
-}
-
-.vendorPoTable a {
-  color: #2563eb;
-  text-decoration: none;
-}
-.vendorPoTable a:hover { text-decoration: underline; }
-
-.vendorPoChecklistItem {
-  display: flex;
-  gap: 8px;
-  padding: 6px 0;
-  border-bottom: 1px solid #f1f3f5;
-  font-size: 14px;
-}
-.vendorPoChecklistItem:last-child { border-bottom: none; }
-.vendorPoChecklistItem.done { color: #6b7280; text-decoration: line-through; }
-
-.vendorPoSignoffGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 16px;
-}
-
-.vendorPoSignoff {
-  border: 1px solid #e4e7eb;
-  border-radius: 6px;
-  padding: 12px;
-  background: #fafbfc;
-}
-
-.vendorPoSignoff h4 {
-  margin: 0 0 8px 0;
-  font-size: 13px;
-  text-transform: uppercase;
-  color: #374151;
-  letter-spacing: 0.03em;
-}
-
-.vendorPoSignature {
-  margin-top: 8px;
-  max-width: 100%;
-  max-height: 120px;
-  border: 1px solid #e4e7eb;
-  background: #fff;
-  padding: 4px;
-}
-
-.vendorPoTypedSignature {
-  font-family: "Dancing Script", "Great Vibes", cursive;
-  font-size: 28px;
-  color: #1f2937;
-  padding: 8px 0;
-}
-
-.vendorPoComment {
-  padding: 8px 0;
-  border-bottom: 1px solid #f1f3f5;
-  font-size: 14px;
-}
-.vendorPoComment:last-child { border-bottom: none; }
-.vendorPoComment-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 4px;
-  font-size: 12px;
-  color: #6b7280;
-}
-.vendorPoComment-author {
-  font-weight: 600;
-  color: #374151;
-}
-.vendorPoComment-body {
-  white-space: pre-wrap;
-  color: #1f2937;
-}
-
-.vendorPoUpliftRow {
-  padding: 10px 12px;
-  border: 1px solid #e4e7eb;
-  border-radius: 6px;
-  margin-bottom: 8px;
-  background: #fafbfc;
-  font-size: 14px;
-}
-.vendorPoUpliftRow-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-.vendorPoUpliftAmount {
-  font-weight: 600;
-  color: #1f2937;
-}
-.vendorPoUpliftStatus {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-}
-.vendorPoUpliftStatus-pending { background: #fef3c7; color: #92400e; }
-.vendorPoUpliftStatus-approved { background: #d1fae5; color: #065f46; }
-.vendorPoUpliftStatus-denied { background: #fee2e2; color: #991b1b; }
-.vendorPoUpliftStatus-cancelled { background: #e5e7eb; color: #4b5563; }
-
-.vendorPoEmpty {
-  color: #6b7280;
-  font-style: italic;
-  padding: 6px 0;
-  font-size: 14px;
-}
-
-.vendorPoAuditTable td:first-child {
-  color: #6b7280;
-  white-space: nowrap;
-  font-size: 13px;
-}
-
-@media print {
-  body {
-    background: #fff !important;
-  }
-  .sidebar,
-  .topbar,
-  .vendorPoBack,
-  .vendorPoPrintBtn,
-  .vendorPoTopActions {
-    display: none !important;
-  }
-  .app.nav-collapsed .mainArea,
-  .app .mainArea {
-    margin-left: 0 !important;
-  }
-  .vendorPoPage {
-    max-width: 100% !important;
-    padding: 0 !important;
-  }
-  .vendorPoCard,
-  .vendorPoHeader {
-    break-inside: avoid;
-    box-shadow: none !important;
-    border: 1px solid #ccc !important;
-  }
-  .vendorPoPage a {
-    color: #000 !important;
-    text-decoration: none !important;
-  }
-}
diff --git a/src/pages/vendor-pos/view/VendorPoViewPage.js b/src/pages/vendor-pos/view/VendorPoViewPage.js
deleted file mode 100644
index aca89dcc..00000000
--- a/src/pages/vendor-pos/view/VendorPoViewPage.js
+++ /dev/null
@@ -1,363 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router";
-import { toast } from "react-toastify";
-import { dispatchApi, upliftApi } from "../../../services/api";
-import "./VendorPoViewPage.css";
-
-function fmtDate(value) {
-  if (!value) return "";
-  const d = new Date(value);
-  if (isNaN(d)) return "";
-  const pad = (n) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-}
-
-function fmtDateTime(value) {
-  if (!value) return "";
-  const d = new Date(value);
-  if (isNaN(d)) return "";
-  const pad = (n) => String(n).padStart(2, "0");
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
-}
-
-function fmtMoney(value) {
-  if (value == null) return "—";
-  const n = Number(value);
-  if (isNaN(n)) return "—";
-  return `$${n.toFixed(2)}`;
-}
-
-function Info({ label, children }) {
-  return (
-    <div className="vendorPoInfoItem">
-      <span className="vendorPoInfoLabel">{label}</span>
-      <span className="vendorPoInfoValue">{children == null || children === "" ? "—" : children}</span>
-    </div>
-  );
-}
-
-export default function VendorPoViewPage() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const [dispatch, setDispatch] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [err, setErr] = useState("");
-
-  const load = useCallback(async () => {
-    setLoading(true);
-    setErr("");
-    try {
-      const res = await dispatchApi.getById(id);
-      const data = res?.data ?? res?.Data ?? res;
-      setDispatch(data);
-    } catch (e) {
-      setErr(e.message || "Failed to load");
-    } finally {
-      setLoading(false);
-    }
-  }, [id]);
-
-  useEffect(() => { load(); }, [load]);
-
-  const handleApproveUplift = async (u) => {
-    const note = window.prompt("Optional approval note:", "") || "";
-    if (!window.confirm(`Approve uplift to ${fmtMoney(u.requestedNTE)}?`)) return;
-    try {
-      await upliftApi.approve(u.id, note);
-      toast.success("Uplift approved — NTE updated");
-      load();
-    } catch (e) {
-      toast.error(e.message || "Failed to approve");
-    }
-  };
-
-  const handleDenyUplift = async (u) => {
-    const note = window.prompt("Denial reason (required):", "");
-    if (!note || !note.trim()) {
-      toast.error("A reason is required when denying.");
-      return;
-    }
-    try {
-      await upliftApi.deny(u.id, note.trim());
-      toast.success("Uplift denied");
-      load();
-    } catch (e) {
-      toast.error(e.message || "Failed to deny");
-    }
-  };
-
-  if (loading) return <div className="vendorPoPage"><div className="vendorPoCard">Loading…</div></div>;
-  if (err) return <div className="vendorPoPage"><div className="vendorPoCard" style={{ color: "#991b1b" }}>{err}</div></div>;
-  if (!dispatch) return <div className="vendorPoPage"><div className="vendorPoCard">Not found</div></div>;
-
-  const vendor = dispatch.vendor || dispatch.Vendor;
-  const primaryLocation = dispatch.primaryLocation || dispatch.PrimaryLocation;
-  const workOrders = dispatch.workOrders || dispatch.WorkOrders || [];
-  const checklist = dispatch.checklist || dispatch.Checklist || [];
-  const signoffs = dispatch.signoffs || dispatch.Signoffs || [];
-  const comments = dispatch.comments || dispatch.Comments || [];
-  const upliftRequests = dispatch.upliftRequests || dispatch.UpliftRequests || [];
-  const auditLog = dispatch.auditLog || dispatch.AuditLog || [];
-
-  const statusClass = String(dispatch.status || dispatch.Status || "").toLowerCase().replace(/\s+/g, "-");
-
-  return (
-    <section className="vendorPoPage">
-      <div className="vendorPoTopBar">
-        <button className="vendorPoBack" onClick={() => navigate(-1)}>← Back</button>
-        <div className="vendorPoTopActions">
-          <button className="vendorPoPrintBtn" onClick={() => window.print()}>Print</button>
-        </div>
-      </div>
-
-      <div className="vendorPoHeader">
-        <h1>{dispatch.poNumber || dispatch.PONumber || "(no PO #)"}</h1>
-        <div className="vendorPoHeaderSub">
-          <span>Dispatch {dispatch.dispatchNumber || dispatch.DispatchNumber || "—"}</span>
-          <span className={`vendorPoStatusPill vendorPoStatusPill-${statusClass}`}>{dispatch.status || dispatch.Status || "—"}</span>
-          {vendor?.companyName && <span>· {vendor.companyName}</span>}
-          {(dispatch.nteAmount ?? dispatch.NTEAmount) != null && (
-            <span>· NTE {fmtMoney(dispatch.nteAmount ?? dispatch.NTEAmount)}</span>
-          )}
-        </div>
-      </div>
-
-      <div className="vendorPoCard">
-        <h3>Vendor</h3>
-        {vendor ? (
-          <div className="vendorPoInfoGrid">
-            <Info label="Company">{vendor.companyName}</Info>
-            <Info label="Contact">{vendor.contactName}</Info>
-            <Info label="Email">{vendor.email}</Info>
-            <Info label="Phone">{vendor.phone}</Info>
-            <Info label="Address">
-              {[vendor.address, vendor.city, vendor.state, vendor.zip].filter(Boolean).join(", ")}
-            </Info>
-            <Info label="Trades">{vendor.tradeSpecialties}</Info>
-          </div>
-        ) : (
-          <div className="vendorPoEmpty">No vendor attached.</div>
-        )}
-      </div>
-
-      <div className="vendorPoCard">
-        <h3>PO Details</h3>
-        <div className="vendorPoInfoGrid">
-          <Info label="PO #">{dispatch.poNumber || dispatch.PONumber}</Info>
-          <Info label="Dispatch #">{dispatch.dispatchNumber || dispatch.DispatchNumber}</Info>
-          <Info label="Status">{dispatch.status || dispatch.Status}</Info>
-          <Info label="NTE">{fmtMoney(dispatch.nteAmount ?? dispatch.NTEAmount)}</Info>
-          <Info label="Dispatched">{fmtDateTime(dispatch.dispatchedAt ?? dispatch.DispatchedAt)}</Info>
-          <Info label="Acknowledged">{fmtDateTime(dispatch.acknowledgedAt ?? dispatch.AcknowledgedAt)}</Info>
-          <Info label="Scheduled">{fmtDate(dispatch.scheduledDate ?? dispatch.ScheduledDate)}</Info>
-          <Info label="Completed">{fmtDate(dispatch.completedDate ?? dispatch.CompletedDate)}</Info>
-          <Info label="Verified">{fmtDateTime(dispatch.verifiedAt ?? dispatch.VerifiedAt)}</Info>
-          <Info label="Email sent">{(dispatch.emailSent ?? dispatch.EmailSent) ? "Yes" : "No"}</Info>
-        </div>
-        {(dispatch.description || dispatch.Description) && (
-          <div style={{ marginTop: 12 }}>
-            <div className="vendorPoInfoLabel">Description</div>
-            <div style={{ whiteSpace: "pre-wrap", marginTop: 4 }}>{dispatch.description || dispatch.Description}</div>
-          </div>
-        )}
-      </div>
-
-      {primaryLocation && (
-        <div className="vendorPoCard">
-          <h3>Site</h3>
-          <div className="vendorPoInfoGrid">
-            <Info label="Location">{primaryLocation.name}</Info>
-            <Info label="Address">
-              {[primaryLocation.address, primaryLocation.city, primaryLocation.state, primaryLocation.zipCode].filter(Boolean).join(", ")}
-            </Info>
-          </div>
-        </div>
-      )}
-
-      <div className="vendorPoCard">
-        <h3>Linked Work Orders ({workOrders.length})</h3>
-        {workOrders.length === 0 ? (
-          <div className="vendorPoEmpty">No work orders linked.</div>
-        ) : (
-          <table className="vendorPoTable">
-            <thead>
-              <tr>
-                <th>WO #</th>
-                <th>Title</th>
-                <th>Trade</th>
-                <th>Sub-Trade</th>
-                <th>Problem</th>
-                <th>Priority</th>
-                <th>Status</th>
-                <th>Location</th>
-              </tr>
-            </thead>
-            <tbody>
-              {workOrders.map((wo) => (
-                <tr key={wo.workOrderId}>
-                  <td>
-                    <a href={`/workorders/${wo.workOrderId}`} onClick={(e) => { e.preventDefault(); navigate(`/workorders/${wo.workOrderId}`); }}>
-                      {wo.internalWONumber || wo.workOrderId}
-                    </a>
-                  </td>
-                  <td>{wo.title}</td>
-                  <td>{wo.trade}</td>
-                  <td>{wo.subTrade}</td>
-                  <td>{wo.problem}</td>
-                  <td>{wo.priority}</td>
-                  <td>{wo.status}</td>
-                  <td>{wo.locationName}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        )}
-      </div>
-
-      <div className="vendorPoCard">
-        <h3>NTE Uplift History ({upliftRequests.length})</h3>
-        {upliftRequests.length === 0 ? (
-          <div className="vendorPoEmpty">No uplift requests on this PO.</div>
-        ) : (
-          upliftRequests.map((u) => {
-            const statusKey = String(u.status || "").toLowerCase();
-            return (
-              <div key={u.id} className="vendorPoUpliftRow">
-                <div className="vendorPoUpliftRow-header">
-                  <div className="vendorPoUpliftAmount">
-                    {fmtMoney(u.currentNTE)} → {fmtMoney(u.requestedNTE)}
-                    {" "}
-                    <small style={{ color: "#6b7280", fontWeight: "normal" }}>
-                      (Δ {fmtMoney(u.delta ?? (Number(u.requestedNTE) - Number(u.currentNTE || 0)))}, Tier {u.requiredTier})
-                    </small>
-                  </div>
-                  <span className={`vendorPoUpliftStatus vendorPoUpliftStatus-${statusKey}`}>{u.status}</span>
-                </div>
-                {u.vendorReason && (
-                  <div style={{ marginTop: 6, fontSize: 13, color: "#374151" }}>
-                    <strong>Reason:</strong> {u.vendorReason}
-                  </div>
-                )}
-                <div style={{ marginTop: 4, fontSize: 12, color: "#6b7280" }}>
-                  Requested {fmtDateTime(u.requestedAt)}
-                  {u.requestedByVendorName ? ` by ${u.requestedByVendorName}` : ""}
-                  {u.decidedAt && (
-                    <> · Decided {fmtDateTime(u.decidedAt)}{u.decidedByName ? ` by ${u.decidedByName}` : ""}</>
-                  )}
-                </div>
-                {u.decisionNote && (
-                  <div style={{ marginTop: 4, fontSize: 13, color: "#374151" }}>
-                    <strong>Note:</strong> {u.decisionNote}
-                  </div>
-                )}
-                {u.status === "Pending" && (
-                  <div style={{ marginTop: 8, display: "flex", gap: 8 }}>
-                    <button className="btn btn-success" onClick={() => handleApproveUplift(u)}>Approve</button>
-                    <button className="btn btn-danger" onClick={() => handleDenyUplift(u)}>Deny</button>
-                  </div>
-                )}
-              </div>
-            );
-          })
-        )}
-      </div>
-
-      <div className="vendorPoCard">
-        <h3>Checklist ({checklist.length})</h3>
-        {checklist.length === 0 ? (
-          <div className="vendorPoEmpty">No checklist items.</div>
-        ) : (
-          <div>
-            {checklist.map((item) => (
-              <div key={item.id} className={`vendorPoChecklistItem ${item.isCompleted ? "done" : ""}`}>
-                <span>{item.isCompleted ? "☑" : "☐"}</span>
-                <span style={{ flex: 1 }}>{item.itemText}</span>
-                {item.isCompleted && item.completedBy && (
-                  <span style={{ fontSize: 12, color: "#6b7280" }}>
-                    {item.completedBy} · {fmtDateTime(item.completedAt)}
-                  </span>
-                )}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <div className="vendorPoCard">
-        <h3>Signoffs ({signoffs.length})</h3>
-        {signoffs.length === 0 ? (
-          <div className="vendorPoEmpty">No signoffs captured.</div>
-        ) : (
-          <div className="vendorPoSignoffGrid">
-            {signoffs.map((s) => (
-              <div key={s.id} className="vendorPoSignoff">
-                <h4>{s.signoffType} Signoff</h4>
-                <div><strong>{s.name}</strong></div>
-                <div style={{ fontSize: 12, color: "#6b7280" }}>
-                  {s.signatureMethod} · {fmtDateTime(s.signedAt)}
-                </div>
-                {s.signatureMethod === "drawn" && s.signature ? (
-                  <img className="vendorPoSignature" src={s.signature} alt={`${s.signoffType} signature`} />
-                ) : s.signature ? (
-                  <div className="vendorPoTypedSignature">{s.signature}</div>
-                ) : null}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <div className="vendorPoCard">
-        <h3>Comments ({comments.length})</h3>
-        {comments.length === 0 ? (
-          <div className="vendorPoEmpty">No comments on this PO.</div>
-        ) : (
-          comments.map((c) => (
-            <div key={c.id} className="vendorPoComment">
-              <div className="vendorPoComment-header">
-                <span className="vendorPoComment-author">
-                  {c.userName || c.commenter || "—"}
-                  {c.commentType ? ` · ${c.commentType}` : ""}
-                </span>
-                <span>{fmtDateTime(c.createdDate)}</span>
-              </div>
-              <div className="vendorPoComment-body">{c.commenttext}</div>
-            </div>
-          ))
-        )}
-      </div>
-
-      <div className="vendorPoCard">
-        <h3>Audit Log ({auditLog.length})</h3>
-        {auditLog.length === 0 ? (
-          <div className="vendorPoEmpty">No audit entries.</div>
-        ) : (
-          <table className="vendorPoTable vendorPoAuditTable">
-            <thead>
-              <tr>
-                <th>When</th>
-                <th>Action</th>
-                <th>Field</th>
-                <th>Old → New</th>
-                <th>By</th>
-              </tr>
-            </thead>
-            <tbody>
-              {auditLog.map((a) => (
-                <tr key={a.id}>
-                  <td>{fmtDateTime(a.createdAt)}</td>
-                  <td>{a.action}</td>
-                  <td>{a.fieldName}</td>
-                  <td>
-                    {a.oldValue || "—"} → {a.newValue || "—"}
-                  </td>
-                  <td>{a.userName}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        )}
-      </div>
-    </section>
-  );
-}
diff --git a/src/pages/vendors/form/VendorFormPage.css b/src/pages/vendors/form/VendorFormPage.css
deleted file mode 100644
index 7349d14b..00000000
--- a/src/pages/vendors/form/VendorFormPage.css
+++ /dev/null
@@ -1,81 +0,0 @@
-.vendorTradeGrid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 4px 0;
-}
-
-.vendorTradeChip {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  border: 1px solid #ddd;
-  border-radius: 20px;
-  font-size: 13px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.vendorTradeChip:hover {
-  border-color: #007bff;
-}
-
-.vendorTradeChip input:checked + span {
-  color: #007bff;
-  font-weight: 600;
-}
-
-.vendorActiveLabel {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  cursor: pointer;
-}
-
-.vendorPortalPanel {
-  border: 1px solid #e4e7eb;
-  background: #f8fafc;
-  border-radius: 6px;
-  padding: 14px 16px;
-  font-size: 13px;
-}
-
-.vendorPortalPanel-label {
-  font-weight: 600;
-  color: #374151;
-  margin-bottom: 4px;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.vendorPortalPanel-url {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 6px 0 10px;
-}
-
-.vendorPortalPanel-url input {
-  flex: 1;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
-  padding: 6px 8px;
-  border: 1px solid #d1d5db;
-  border-radius: 4px;
-  background: #fff;
-}
-
-.vendorPortalPanel-meta {
-  color: #6b7280;
-  font-size: 12px;
-  margin-bottom: 10px;
-}
-
-.vendorPortalPanel-actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
diff --git a/src/pages/vendors/form/VendorFormPage.js b/src/pages/vendors/form/VendorFormPage.js
deleted file mode 100644
index 7cfb8040..00000000
--- a/src/pages/vendors/form/VendorFormPage.js
+++ /dev/null
@@ -1,239 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import { vendorApi } from "../../../services/api";
-import { fetchDropdownOptions } from "../../workorders/api";
-import VendorPortalTokenPanel from "./VendorPortalTokenPanel";
-import "../../../styles/FormPage.css";
-import "./VendorFormPage.css";
-
-export default function VendorFormPage() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const isEdit = !!id;
-
-  const [formData, setFormData] = useState({
-    companyName: "",
-    contactName: "",
-    email: "",
-    phone: "",
-    address: "",
-    city: "",
-    state: "",
-    zip: "",
-    tradeSpecialties: "",
-    isActive: true,
-  });
-
-  const [loading, setLoading] = useState(false);
-  const [trades, setTrades] = useState([]);
-  const [selectedTrades, setSelectedTrades] = useState([]);
-
-  useEffect(() => {
-    fetchDropdownOptions("Trade").then(setTrades).catch(() => {});
-  }, []);
-
-  useEffect(() => {
-    if (isEdit && id) {
-      const load = async () => {
-        try {
-          const vendor = await vendorApi.getById(id);
-          if (vendor) {
-            setFormData(prev => {
-              const merged = { ...prev };
-              for (const key of Object.keys(merged)) {
-                if (vendor[key] != null) merged[key] = vendor[key];
-              }
-              return merged;
-            });
-            if (vendor.tradeSpecialties) {
-              setSelectedTrades(vendor.tradeSpecialties.split(",").map(t => t.trim()).filter(Boolean));
-            }
-          }
-        } catch {
-          toast.error("Failed to load vendor");
-        }
-      };
-      load();
-    }
-  }, [id, isEdit]);
-
-  const handleChange = (e) => {
-    const { name, value, type, checked } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: type === "checkbox" ? checked : value,
-    }));
-  };
-
-  const handleTradeToggle = (tradeValue) => {
-    setSelectedTrades(prev => {
-      const updated = prev.includes(tradeValue)
-        ? prev.filter(t => t !== tradeValue)
-        : [...prev, tradeValue];
-      setFormData(f => ({ ...f, tradeSpecialties: updated.join(", ") }));
-      return updated;
-    });
-  };
-
-  const handleSave = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-    try {
-      if (isEdit) {
-        await vendorApi.update(id, formData);
-        toast.success("Vendor updated");
-      } else {
-        await vendorApi.create(formData);
-        toast.success("Vendor created");
-      }
-      navigate("/vendors");
-    } catch {
-      toast.error("Failed to save vendor");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="formPage">
-      <div className="panel panel-default panel-connected">
-        <div className="panel-body">
-          <ol className="breadcrumb breadcrumb-alt">
-            <li>
-              <a href="#" onClick={(e) => { e.preventDefault(); navigate("/vendors"); }}>Vendors</a>
-            </li>
-            <li className="active">{isEdit ? "Edit" : "Create"}</li>
-          </ol>
-
-          <div className="container">
-            <form onSubmit={handleSave}>
-              <div className="form-group">
-                <div className="header">
-                  <h3 className="heading thin">
-                    <span className="fa-stack" style={{ fontSize: "0.9em" }}>
-                      <i className="fa fa-square fa-stack-2x text-primary"></i>
-                      <i className={`fa fa-${isEdit ? "edit" : "plus"} fa-stack-1x fa-inverse`}></i>
-                    </span>
-                    <span>{isEdit ? "Edit Vendor" : "Create a Vendor"}</span>
-                  </h3>
-                </div>
-              </div>
-
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase"><strong>General Details</strong></h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="companyName">Company Name</label>
-                      <input className="form-control" type="text" id="companyName" name="companyName" value={formData.companyName} onChange={handleChange} required />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="contactName">Contact Name</label>
-                      <input className="form-control" type="text" id="contactName" name="contactName" value={formData.contactName} onChange={handleChange} />
-                    </div>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="email">Email</label>
-                      <input className="form-control" type="email" id="email" name="email" value={formData.email} onChange={handleChange} required />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="phone">Phone</label>
-                      <input className="form-control" type="tel" id="phone" name="phone" value={formData.phone} onChange={handleChange} />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase"><strong>Address</strong></h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-12">
-                    <div className="form-group">
-                      <label htmlFor="address">Address</label>
-                      <input className="form-control" type="text" id="address" name="address" value={formData.address} onChange={handleChange} />
-                    </div>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="city">City</label>
-                      <input className="form-control" type="text" id="city" name="city" value={formData.city} onChange={handleChange} />
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="state">State</label>
-                      <input className="form-control" type="text" id="state" name="state" value={formData.state} onChange={handleChange} placeholder="e.g., IL" />
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="zip">Zip</label>
-                      <input className="form-control" type="text" id="zip" name="zip" value={formData.zip} onChange={handleChange} />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase"><strong>Trade Specialties</strong></h5>
-                </div>
-                <div className="vendorTradeGrid">
-                  {trades.map((t) => (
-                    <label key={t.id} className="vendorTradeChip">
-                      <input
-                        type="checkbox"
-                        checked={selectedTrades.includes(t.value)}
-                        onChange={() => handleTradeToggle(t.value)}
-                      />
-                      <span>{t.value}</span>
-                    </label>
-                  ))}
-                </div>
-              </div>
-
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase"><strong>Status</strong></h5>
-                </div>
-                <label className="vendorActiveLabel">
-                  <input type="checkbox" name="isActive" checked={formData.isActive} onChange={handleChange} />
-                  <span>Active</span>
-                </label>
-              </div>
-
-              {isEdit && (
-                <div className="form-group">
-                  <VendorPortalTokenPanel vendorId={id} />
-                </div>
-              )}
-
-              <div className="form-actions">
-                <button type="button" className="btn btn-default" onClick={() => navigate("/vendors")} disabled={loading}>
-                  Cancel
-                </button>
-                <button type="submit" className="btn btn-primary" disabled={loading}>
-                  {loading ? "Saving..." : isEdit ? "Update" : "Create"}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/vendors/form/VendorPortalTokenPanel.js b/src/pages/vendors/form/VendorPortalTokenPanel.js
deleted file mode 100644
index 48a7a6f9..00000000
--- a/src/pages/vendors/form/VendorPortalTokenPanel.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { toast } from "react-toastify";
-import { vendorApi } from "../../../services/api";
-
-export default function VendorPortalTokenPanel({ vendorId }) {
-  const [tokenInfo, setTokenInfo] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [busy, setBusy] = useState(false);
-
-  useEffect(() => {
-    if (!vendorId) return;
-    setLoading(true);
-    vendorApi.getPortalToken(vendorId)
-      .then(setTokenInfo)
-      .catch(() => toast.error("Failed to load portal token"))
-      .finally(() => setLoading(false));
-  }, [vendorId]);
-
-  async function copyUrl() {
-    if (!tokenInfo?.portalUrl) return;
-    try {
-      await navigator.clipboard.writeText(tokenInfo.portalUrl);
-      toast.success("Portal URL copied");
-    } catch {
-      toast.error("Copy failed");
-    }
-  }
-
-  async function rotate() {
-    if (!window.confirm("Rotate the portal token? The previous link will stop working immediately.")) return;
-    setBusy(true);
-    try {
-      const updated = await vendorApi.rotatePortalToken(vendorId);
-      setTokenInfo(updated);
-      toast.success("Portal token rotated");
-    } catch {
-      toast.error("Rotate failed");
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  async function revoke() {
-    if (!window.confirm("Revoke all active portal tokens? The vendor will lose access until a new link is generated.")) return;
-    setBusy(true);
-    try {
-      await vendorApi.revokePortalToken(vendorId);
-      setTokenInfo(null);
-      toast.success("Portal tokens revoked");
-    } catch {
-      toast.error("Revoke failed");
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  async function regenerate() {
-    setBusy(true);
-    try {
-      const fresh = await vendorApi.getPortalToken(vendorId);
-      setTokenInfo(fresh);
-    } catch {
-      toast.error("Failed to generate token");
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  if (loading) return <div className="vendorPortalPanel vendorPortalPanel-meta">Loading portal link…</div>;
-
-  if (!tokenInfo) {
-    return (
-      <div className="vendorPortalPanel">
-        <div className="vendorPortalPanel-label">Vendor Portal</div>
-        <div className="vendorPortalPanel-meta">No active portal link. Generate one so this vendor can access the portal.</div>
-        <div className="vendorPortalPanel-actions">
-          <button type="button" className="btn btn-primary" onClick={regenerate} disabled={busy}>
-            Generate Link
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="vendorPortalPanel">
-      <div className="vendorPortalPanel-label">Vendor Portal</div>
-      <div className="vendorPortalPanel-url">
-        <input type="text" readOnly value={tokenInfo.portalUrl} onFocus={(e) => e.target.select()} />
-        <button type="button" className="btn btn-default" onClick={copyUrl}>Copy</button>
-      </div>
-      <div className="vendorPortalPanel-meta">
-        Issued {new Date(tokenInfo.issuedAt).toLocaleDateString()}
-        {" · "}Expires {new Date(tokenInfo.expiresAt).toLocaleDateString()}
-        {tokenInfo.lastUsedAt ? ` · Last used ${new Date(tokenInfo.lastUsedAt).toLocaleString()}` : " · Never used"}
-      </div>
-      <div className="vendorPortalPanel-actions">
-        <button type="button" className="btn btn-warning" onClick={rotate} disabled={busy}>Rotate</button>
-        <button type="button" className="btn btn-danger" onClick={revoke} disabled={busy}>Revoke</button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/vendors/list/List.js b/src/pages/vendors/list/List.js
deleted file mode 100644
index 7f05aa6a..00000000
--- a/src/pages/vendors/list/List.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import usePaginatedList from "../../../hooks/usePaginatedList";
-import { fetchVendorsPaged, deleteVendor } from "./api";
-import Table from "./Table";
-import DeleteModal from "../../../components/DeleteModal";
-import "./styles.css";
-
-export default function VendorsList() {
-  const navigate = useNavigate();
-  const {
-    rows, search, setSearch, page, setPage, pageSize, setPageSize,
-    totalCount, loading, err, reload
-  } = usePaginatedList(fetchVendorsPaged);
-
-  const [deleteModal, setDeleteModal] = useState({ isOpen: false, item: null, loading: false });
-
-  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
-
-  const handleDeleteClick = (item) => {
-    setDeleteModal({ isOpen: true, item, loading: false });
-  };
-
-  const handleDeleteConfirm = async () => {
-    setDeleteModal((prev) => ({ ...prev, loading: true }));
-    try {
-      await deleteVendor(deleteModal.item.id);
-      toast.success("Vendor deleted");
-      setDeleteModal({ isOpen: false, item: null, loading: false });
-      reload();
-    } catch {
-      toast.error("Failed to delete vendor");
-      setDeleteModal((prev) => ({ ...prev, loading: false }));
-    }
-  };
-
-  return (
-    <section className="listPage">
-      <div className="vendorListToolbar">
-        <div className="vendorListToolbarLeft">
-          <h2 className="vendorListTitle">Vendors</h2>
-          <span className="vendorListCount">{totalCount} total</span>
-        </div>
-        <div className="vendorListToolbarRight">
-          <input
-            className="vendorSearchInput"
-            value={search}
-            onChange={(e) => { setSearch(e.target.value); setPage(1); }}
-            placeholder="Search vendors..."
-          />
-          <button className="vendorNewBtn" onClick={() => navigate("/vendors/new")}>
-            + New Vendor
-          </button>
-        </div>
-      </div>
-
-      <Table
-        loading={loading}
-        error={err}
-        rows={rows}
-        onEdit={(item) => navigate(`/vendors/edit/${item.id}`)}
-        onDelete={handleDeleteClick}
-        page={page}
-        setPage={setPage}
-        pageSize={pageSize}
-        setPageSize={setPageSize}
-        totalCount={totalCount}
-        totalPages={totalPages}
-      />
-
-      <DeleteModal
-        isOpen={deleteModal.isOpen}
-        onClose={() => setDeleteModal({ isOpen: false, item: null, loading: false })}
-        onConfirm={handleDeleteConfirm}
-        title="Delete Vendor"
-        message={`Are you sure you want to delete "${deleteModal.item?.companyName}"?`}
-        loading={deleteModal.loading}
-      />
-    </section>
-  );
-}
diff --git a/src/pages/vendors/list/Table.js b/src/pages/vendors/list/Table.js
deleted file mode 100644
index a11f885c..00000000
--- a/src/pages/vendors/list/Table.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import SharedTable from "../../../components/SharedTable";
-
-export default function Table({ loading, error, rows, onEdit, onDelete, page, setPage, pageSize, setPageSize, totalCount }) {
-  const columns = [
-    { key: "companyName", label: "Company", render: (val, row) => <strong><a href="#" onClick={(e) => { e.preventDefault(); onEdit && onEdit(row); }}>{val}</a></strong> },
-    { key: "contactName", label: "Contact" },
-    { key: "email", label: "Email" },
-    { key: "phone", label: "Phone" },
-    { key: "tradeSpecialties", label: "Trades" },
-    { key: "isActive", label: "Active", render: (val) => val ? "Yes" : "No" },
-  ];
-
-  return (
-    <SharedTable rows={rows} columns={columns} onEdit={onEdit} onDelete={onDelete} page={page} setPage={setPage} pageSize={pageSize} setPageSize={setPageSize} totalCount={totalCount} loading={loading} error={error} />
-  );
-}
diff --git a/src/pages/vendors/list/api.js b/src/pages/vendors/list/api.js
deleted file mode 100644
index da6104aa..00000000
--- a/src/pages/vendors/list/api.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { get } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const fetchVendorsPaged = async ({ search = "", page = 1, pageSize = 12 }) => {
-  const res = await get(`${API_URL}/Vendor/GetVendorList?search=${encodeURIComponent(search)}&page=${page}&pageSize=${pageSize}`);
-  const rows = (res?.data || res?.Data || []).map(x => ({
-    id: x.id ?? x.Id,
-    companyName: x.companyName ?? x.CompanyName ?? "",
-    contactName: x.contactName ?? x.ContactName ?? "",
-    email: x.email ?? x.Email ?? "",
-    phone: x.phone ?? x.Phone ?? "",
-    tradeSpecialties: x.tradeSpecialties ?? x.TradeSpecialties ?? "",
-    isActive: x.isActive ?? x.IsActive ?? true,
-  }));
-  return {
-    rows,
-    page: res?.pageNumber ?? 1,
-    pageSize: res?.pageSize ?? pageSize,
-    totalCount: res?.totalCount ?? rows.length,
-    totalPages: res?.totalPages ?? 1,
-  };
-};
-
-export const deleteVendor = (id) =>
-  get(`${API_URL}/Vendor/DeleteVendor?id=${id}`);
diff --git a/src/pages/vendors/list/styles.css b/src/pages/vendors/list/styles.css
deleted file mode 100644
index 093788a1..00000000
--- a/src/pages/vendors/list/styles.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.vendorListToolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.vendorListToolbarLeft {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-}
-
-.vendorListTitle {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-  color: #333;
-}
-
-.vendorListCount {
-  font-size: 13px;
-  color: #999;
-}
-
-.vendorListToolbarRight {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.vendorSearchInput {
-  width: 260px;
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 14px;
-  outline: none;
-  box-sizing: border-box;
-}
-
-.vendorSearchInput:focus {
-  border-color: #66afe9;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-}
-
-.vendorNewBtn {
-  padding: 8px 16px;
-  background: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.vendorNewBtn:hover {
-  background: #0069d9;
-}
diff --git a/src/pages/workorders/api.js b/src/pages/workorders/api.js
deleted file mode 100644
index c0c92e23..00000000
--- a/src/pages/workorders/api.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import { workOrderApi } from "../../services/api";
-import { post } from "../../apiUtil";
-import { API_URL } from "../../constants";
-
-export const getWorkOrders = async (params = {}) => {
-  try {
-    const response = await workOrderApi.getAll(params);
-    const workOrders = response.data || response;
-    return Array.isArray(workOrders) ? workOrders : [];
-  } catch (error) {
-    console.error("Error fetching work orders:", error);
-    throw error;
-  }
-};
-
-export const getWorkOrderById = async (id) => {
-  try {
-    const wo = await workOrderApi.getById(id);
-    return {
-      id: wo.id,
-      internalWONumber: wo.internalWONumber ?? "",
-      workOrderNumber: wo.workerOrderNumber ?? wo.workOrderNumber ?? "",
-      title: wo.title ?? wo.workerOrderTitle ?? "",
-      location: wo.location ?? "",
-      locationId: wo.locationId != null ? String(wo.locationId) : "",
-      locationZip: wo.locationZip ?? "",
-      assignedTo: wo.assignee ?? wo.assignedTo ?? "",
-      dueDate: wo.dueDate ? wo.dueDate.split("T")[0] : "",
-      createdDate: wo.createdDate ? wo.createdDate.split("T")[0] : "",
-      createdDateFull: wo.createdDate ?? "",
-      description: wo.description ?? "",
-      priority: wo.priority ?? "",
-      status: wo.status ?? "Open",
-      po: wo.po ?? "",
-      tt: wo.tt ?? "",
-      problem: wo.problem ?? "",
-      trade: wo.trade ?? "",
-      subTrade: wo.subTrade ?? "",
-      vendorNTE: wo.vendorNTE != null ? String(wo.vendorNTE) : "",
-      scheduledDate: wo.scheduledDate ? wo.scheduledDate.split("T")[0] : "",
-      completedDate: wo.completedDate ? wo.completedDate.split("T")[0] : "",
-      source: wo.source ?? "",
-      comments: wo.comments ?? [],
-      auditLog: wo.auditLog ?? [],
-      dispatches: wo.dispatches ?? [],
-    };
-  } catch (error) {
-    console.error("Error fetching work order:", error);
-    throw error;
-  }
-};
-
-export const addWorkOrder = async (workOrder) => {
-  try {
-    return await workOrderApi.create(workOrder);
-  } catch (error) {
-    console.error("Error creating work order:", error);
-    throw error;
-  }
-};
-
-export const editWorkOrder = async (workOrder) => {
-  try {
-    return await workOrderApi.update(workOrder.id, {
-      Id: workOrder.id,
-      WorkerOrderNumber: workOrder.workOrderNumber,
-      WorkerOrderTitle: workOrder.title,
-      Description: workOrder.description,
-      PO: workOrder.po,
-      TT: workOrder.tt,
-      AssignTo: workOrder.assignedTo || null,
-      DueDate: workOrder.dueDate || null,
-      Priority: workOrder.priority || null,
-      Status: workOrder.status,
-      LocationId: workOrder.locationId ? parseInt(workOrder.locationId) : null,
-      Problem: workOrder.problem || null,
-      Trade: workOrder.trade || null,
-      SubTrade: workOrder.subTrade || null,
-      VendorNTE: workOrder.vendorNTE ? parseFloat(workOrder.vendorNTE) : null,
-      ScheduledDate: workOrder.scheduledDate || null,
-      CompletedDate: workOrder.completedDate || null,
-      Source: workOrder.source || null,
-    });
-  } catch (error) {
-    console.error("Error updating work order:", error);
-    throw error;
-  }
-};
-
-export const addComment = async (workOrderId, text, commentType = "internal") => {
-  return post(`${API_URL}/WorkOrder/AddCommentJson`, {
-    WorkorderId: workOrderId,
-    Text: text,
-    CommentType: commentType,
-  });
-};
-
-export const changeWorkOrderAssignment = async (id, assignTo) => {
-  return post(`${API_URL}/WorkOrder/ChangeAssignment?id=${id}&assignTo=${encodeURIComponent(assignTo || "")}`);
-};
-
-export const fetchUsers = async () => {
-  const { get: apiGet } = await import("../../apiUtil");
-  const data = await apiGet(`${API_URL}/User`);
-  return (data || []).map((u) => ({ id: u.id ?? u.Id, name: u.name ?? u.Name ?? u.userName ?? "" }));
-};
-
-export const fetchDropdownOptions = async (category, parent) => {
-  const { get: apiGet } = await import("../../apiUtil");
-  let url = `${API_URL}/DropdownOptions/ByCategory/${encodeURIComponent(category)}`;
-  if (parent) url += `?parent=${encodeURIComponent(parent)}`;
-  return (await apiGet(url)) || [];
-};
-
-export const fetchVendorsDropdown = async (trade, siteZip) => {
-  const { get: apiGet } = await import("../../apiUtil");
-  const params = new URLSearchParams();
-  if (trade) params.append("trade", trade);
-  if (siteZip) params.append("siteZip", siteZip);
-  const qs = params.toString();
-  return (await apiGet(`${API_URL}/Vendor/Dropdown${qs ? `?${qs}` : ""}`)) || [];
-};
-
-export const fetchTaskTemplates = async () => {
-  const { get: apiGet } = await import("../../apiUtil");
-  return (await apiGet(`${API_URL}/TaskListTemplate`)) || [];
-};
-
-export const updateChecklistItem = async (id, isCompleted, completedBy) => {
-  return post(`${API_URL}/WorkOrder/UpdateChecklistItem`, { Id: id, IsCompleted: isCompleted, CompletedBy: completedBy });
-};
-
-export const addChecklistItem = async (dispatchId, itemText, workOrderId) => {
-  return post(`${API_URL}/WorkOrder/AddChecklistItem`, { DispatchId: dispatchId, ItemText: itemText, WorkOrderId: workOrderId });
-};
-
-export const verifyDispatch = async (dispatchId) => {
-  return post(`${API_URL}/WorkOrder/VerifyDispatch?dispatchId=${dispatchId}`);
-};
-
-export const addDispatchSignoff = async (dispatchId, signoffType, name, signature, signatureMethod) => {
-  return post(`${API_URL}/WorkOrder/AddDispatchSignoff`, {
-    DispatchId: dispatchId,
-    SignoffType: signoffType,
-    Name: name,
-    Signature: signature,
-    SignatureMethod: signatureMethod,
-  });
-};
-
-export const getDispatchById = async (id) => {
-  const { get: apiGet } = await import("../../apiUtil");
-  return apiGet(`${API_URL}/WorkOrder/GetDispatch/${id}`);
-};
-
-export const updateDispatch = async (payload) => {
-  return post(`${API_URL}/WorkOrder/UpdateDispatch`, payload);
-};
-
-export const addDispatchComment = async (dispatchId, text, sendEmail = true) => {
-  return post(`${API_URL}/WorkOrder/AddDispatchComment`, {
-    DispatchId: dispatchId,
-    Text: text,
-    SendEmail: sendEmail,
-  });
-};
-
-export const dispatchToVendor = async (payload) => {
-  return post(`${API_URL}/WorkOrder/DispatchToVendor`, payload);
-};
-
-export const changeWorkOrderStatus = async (id, status) => {
-  return post(`${API_URL}/WorkOrder/ChangeStatus?id=${id}&status=${encodeURIComponent(status)}`);
-};
-
-export const deleteWorkOrder = async (id) => {
-  try {
-    await workOrderApi.delete(id);
-    return true;
-  } catch (error) {
-    console.error("Error deleting work order:", error);
-    throw error;
-  }
-};
diff --git a/src/pages/workorders/form/WorkOrderFormPage.css b/src/pages/workorders/form/WorkOrderFormPage.css
deleted file mode 100644
index 46a9c999..00000000
--- a/src/pages/workorders/form/WorkOrderFormPage.css
+++ /dev/null
@@ -1,297 +0,0 @@
-/* Work Order Form Page - Matching Employee Form Style */
-.workOrderFormPage {
-  background: #f5f5f5;
-  min-height: 100vh;
-  padding: 0;
-}
-
-.panel {
-  margin-bottom: 20px;
-  background-color: #fff;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-
-.panel-default {
-  border-color: #ddd;
-}
-
-.panel-connected {
-  border-radius: 0;
-  border: none;
-  box-shadow: none;
-}
-
-.panel-body {
-  padding: 15px;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  padding: 8px 15px;
-  margin-bottom: 20px;
-  list-style: none;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-}
-
-.breadcrumb-alt {
-  background-color: white;
-  border-bottom: 1px solid #e5e5e5;
-  padding: 10px 20px;
-  margin: 0 0 20px 0;
-  border-radius: 0;
-}
-
-.breadcrumb > li {
-  display: inline-block;
-}
-
-.breadcrumb > li + li:before {
-  content: ">\00a0";
-  padding: 0 5px;
-  color: #ccc;
-}
-
-.breadcrumb > li a {
-  color: #0088cc;
-  text-decoration: none;
-}
-
-.breadcrumb > li a:hover {
-  text-decoration: underline;
-}
-
-.breadcrumb > .active {
-  color: #00a0d1;
-  font-weight: bold;
-  cursor: default;
-}
-
-/* Container */
-.container {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-/* Form Header */
-.header {
-  margin-bottom: 15px;
-}
-
-.heading {
-  margin: 0 0 10px 0;
-  font-weight: 300;
-  line-height: 1.1;
-  color: #333;
-}
-
-.heading.thin {
-  font-weight: 300;
-  font-size: 24px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.heading.text-uppercase {
-  text-transform: uppercase;
-  font-size: 14px;
-  margin-bottom: 15px;
-}
-
-.text-primary {
-  color: #0088cc;
-}
-
-.fa-stack {
-  position: relative;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  line-height: 2em;
-  vertical-align: middle;
-}
-
-.fa-stack-1x,
-.fa-stack-2x {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-
-.fa-stack-2x {
-  font-size: 2em;
-}
-
-.fa-stack-1x {
-  font-size: 1em;
-  line-height: inherit;
-}
-
-.fa-inverse {
-  color: #fff;
-}
-
-/* Form Groups */
-.form-group {
-  margin-bottom: 15px;
-  position: relative;
-}
-
-/* Row and Columns */
-.row {
-  margin-right: -15px;
-  margin-left: -15px;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.row::after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-[class*="col-"] {
-  position: relative;
-  min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
-}
-
-.col-sm-3 {
-  width: 25%;
-}
-
-.col-sm-4 {
-  width: 33.33333333%;
-}
-
-.col-sm-6 {
-  width: 50%;
-}
-
-.col-sm-12 {
-  width: 100%;
-}
-
-@media (min-width: 992px) {
-  .col-md-4 {
-    width: 33.33333333%;
-  }
-}
-
-/* Labels */
-label {
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: 5px;
-  font-weight: 600;
-  font-size: 13px;
-  color: #333;
-}
-
-.required-field::after {
-  content: " *";
-  color: #d9534f;
-}
-
-/* Form Controls */
-.form-control {
-  display: block;
-  width: 100%;
-  height: 34px;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 1.42857143;
-  color: #555;
-  background-color: #fff;
-  background-image: none;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  box-sizing: border-box;
-}
-
-.form-control:focus {
-  border-color: #66afe9;
-  outline: 0;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-}
-
-select.form-control {
-  height: 34px;
-  padding: 6px 12px;
-}
-
-textarea.form-control {
-  height: auto;
-  min-height: 100px;
-}
-
-/* Form Actions */
-.form-actions {
-  padding: 19px 20px 20px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border-top: 1px solid #e5e5e5;
-  text-align: right;
-}
-
-/* Buttons */
-.btn {
-  display: inline-block;
-  padding: 6px 12px;
-  margin-bottom: 0;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.42857143;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  user-select: none;
-}
-
-.btn-default {
-  color: #333;
-  background-color: #fff;
-  border-color: #ccc;
-}
-
-.btn-default:hover {
-  background-color: #e6e6e6;
-  border-color: #adadad;
-}
-
-.btn-primary {
-  color: #fff;
-  background-color: #0088cc;
-  border-color: #0088cc;
-}
-
-.btn-primary:hover {
-  background-color: #006699;
-  border-color: #005580;
-}
-
-.btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.65;
-}
-
-/* Responsive */
-@media (max-width: 767px) {
-  [class*="col-sm-"] {
-    width: 100%;
-  }
-}
-
diff --git a/src/pages/workorders/form/WorkOrderFormPage.js b/src/pages/workorders/form/WorkOrderFormPage.js
deleted file mode 100644
index 2991703d..00000000
--- a/src/pages/workorders/form/WorkOrderFormPage.js
+++ /dev/null
@@ -1,341 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import { getWorkOrderById, addWorkOrder, editWorkOrder, fetchDropdownOptions } from "../api";
-import { get } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-import "./WorkOrderFormPage.css";
-
-export default function WorkOrderFormPage() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const isEdit = !!id;
-
-  const [formData, setFormData] = useState({
-    internalWONumber: "",
-    workOrderNumber: "",
-    title: "",
-    locationId: "",
-    priority: "",
-    status: "Open",
-    createdDate: new Date().toISOString().split("T")[0],
-    dueDate: "",
-    scheduledDate: "",
-    completedDate: "",
-    assignedTo: "",
-    description: "",
-    po: "",
-    tt: "",
-    problem: "",
-    trade: "",
-    subTrade: "",
-    vendorNTE: "",
-    source: "",
-  });
-
-  const [loading, setLoading] = useState(false);
-  const [locations, setLocations] = useState([]);
-  const [problems, setProblems] = useState([]);
-  const [trades, setTrades] = useState([]);
-  const [subTrades, setSubTrades] = useState([]);
-
-  useEffect(() => {
-    get(`${API_URL}/Contact/GetLocations`)
-      .then((data) => setLocations(data || []))
-      .catch(() => {});
-    fetchDropdownOptions("Problem").then(setProblems).catch(() => {});
-    fetchDropdownOptions("Trade").then(setTrades).catch(() => {});
-  }, []);
-
-  useEffect(() => {
-    if (formData.trade) {
-      fetchDropdownOptions("SubTrade", formData.trade).then(setSubTrades).catch(() => {});
-    } else {
-      setSubTrades([]);
-    }
-  }, [formData.trade]);
-
-  useEffect(() => {
-    if (isEdit && id) {
-      const loadWorkOrder = async () => {
-        try {
-          const wo = await getWorkOrderById(id);
-          if (wo) {
-            setFormData(prev => {
-              const merged = { ...prev };
-              for (const key of Object.keys(merged)) {
-                if (wo[key] != null) merged[key] = wo[key];
-              }
-              return merged;
-            });
-          }
-        } catch (err) {
-          console.error("Failed to load work order", err);
-          toast.error("Failed to load work order");
-        }
-      };
-      loadWorkOrder();
-    }
-  }, [id, isEdit]);
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData(prev => {
-      const updated = { ...prev, [name]: value };
-      if (name === "trade") updated.subTrade = "";
-      return updated;
-    });
-  };
-
-  const handleSave = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-
-    try {
-      if (isEdit) {
-        await editWorkOrder({ ...formData, id });
-        toast.success("Work Order updated successfully!");
-      } else {
-        await addWorkOrder(formData);
-        toast.success("Work Order created successfully!");
-      }
-      navigate(isEdit ? `/workorders/${id}` : "/workorders");
-    } catch (err) {
-      console.error(err);
-      toast.error("Failed to save work order");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCancel = () => {
-    navigate(isEdit ? `/workorders/${id}` : "/workorders");
-  };
-
-  return (
-    <div className="workOrderFormPage">
-      <div className="panel panel-default panel-connected">
-        <div className="panel-body">
-          <ol className="breadcrumb breadcrumb-alt">
-            <li>
-              <a href="#" onClick={(e) => { e.preventDefault(); navigate("/workorders"); }}>
-                Work Orders
-              </a>
-            </li>
-            <li className="active">{isEdit ? "Edit" : "Create"}</li>
-          </ol>
-
-          <div className="container">
-            <form onSubmit={handleSave}>
-              <div className="form-group">
-                <div className="header">
-                  <h3 className="heading thin">
-                    <span className="fa-stack" style={{ fontSize: "0.9em" }}>
-                      <i className="fa fa-square fa-stack-2x text-primary"></i>
-                      <i className={`fa fa-${isEdit ? "edit" : "plus"} fa-stack-1x fa-inverse`}></i>
-                    </span>
-                    <span>{isEdit ? `Edit Work Order ${formData.internalWONumber}` : "Create a Work Order"}</span>
-                  </h3>
-                </div>
-              </div>
-
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase"><strong>Work Order Details</strong></h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="workOrderNumber">Customer WO</label>
-                      <input className="form-control" type="text" id="workOrderNumber" name="workOrderNumber" value={formData.workOrderNumber} onChange={handleChange} placeholder="Customer work order number" />
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="title">Title</label>
-                      <input className="form-control" type="text" id="title" name="title" value={formData.title} onChange={handleChange} placeholder="Work order title" required />
-                    </div>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="locationId">Location</label>
-                      <select className="form-control" id="locationId" name="locationId" value={formData.locationId} onChange={handleChange} required>
-                        <option value="">Select Location</option>
-                        {locations.map((loc) => (
-                          <option key={loc.id} value={loc.id}>{loc.name}</option>
-                        ))}
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-6">
-                    <div className="form-group">
-                      <label htmlFor="source">Source</label>
-                      <input className="form-control" type="text" id="source" name="source" value={formData.source} onChange={handleChange} placeholder="e.g., Amazon APM, Manual" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase"><strong>Classification</strong></h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="problem">Problem</label>
-                      <select className="form-control" id="problem" name="problem" value={formData.problem} onChange={handleChange}>
-                        <option value="">Select Problem</option>
-                        {problems.map((p) => (
-                          <option key={p.id} value={p.value}>{p.value}</option>
-                        ))}
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="trade">Trade</label>
-                      <select className="form-control" id="trade" name="trade" value={formData.trade} onChange={handleChange}>
-                        <option value="">Select Trade</option>
-                        {trades.map((t) => (
-                          <option key={t.id} value={t.value}>{t.value}</option>
-                        ))}
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="subTrade">Sub-Trade</label>
-                      <select className="form-control" id="subTrade" name="subTrade" value={formData.subTrade} onChange={handleChange} disabled={!formData.trade}>
-                        <option value="">{formData.trade ? "Select Sub-Trade" : "Select a Trade first"}</option>
-                        {subTrades.map((s) => (
-                          <option key={s.id} value={s.value}>{s.value}</option>
-                        ))}
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase"><strong>Schedule & Priority</strong></h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="priority">Priority</label>
-                      <select className="form-control" id="priority" name="priority" value={formData.priority} onChange={handleChange} required>
-                        <option value="">Select Priority</option>
-                        <option value="Sev 1">Sev 1</option>
-                        <option value="Sev 2">Sev 2</option>
-                        <option value="Sev 3">Sev 3</option>
-                        <option value="Sev 4">Sev 4</option>
-                        <option value="Sev 5">Sev 5</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="status">Status</label>
-                      <select className="form-control" id="status" name="status" value={formData.status} onChange={handleChange} required>
-                        <option value="Open">Open</option>
-                        <option value="In Progress">In Progress</option>
-                        <option value="On Hold">On Hold</option>
-                        <option value="Completed">Completed</option>
-                        <option value="Cancelled">Cancelled</option>
-                      </select>
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="assignedTo">Assigned To</label>
-                      <input className="form-control" type="text" id="assignedTo" name="assignedTo" value={formData.assignedTo} onChange={handleChange} placeholder="Assigned to" />
-                    </div>
-                  </div>
-                </div>
-                <div className="row">
-                  <div className="col-sm-3">
-                    <div className="form-group">
-                      <label className="required-field" htmlFor="createdDate">Created</label>
-                      <input className="form-control" type="date" id="createdDate" name="createdDate" value={formData.createdDate} onChange={handleChange} required />
-                    </div>
-                  </div>
-                  <div className="col-sm-3">
-                    <div className="form-group">
-                      <label htmlFor="dueDate">Due Date</label>
-                      <input className="form-control" type="date" id="dueDate" name="dueDate" value={formData.dueDate} onChange={handleChange} />
-                    </div>
-                  </div>
-                  <div className="col-sm-3">
-                    <div className="form-group">
-                      <label htmlFor="scheduledDate">Scheduled</label>
-                      <input className="form-control" type="date" id="scheduledDate" name="scheduledDate" value={formData.scheduledDate} onChange={handleChange} />
-                    </div>
-                  </div>
-                  <div className="col-sm-3">
-                    <div className="form-group">
-                      <label htmlFor="completedDate">Completed</label>
-                      <input className="form-control" type="date" id="completedDate" name="completedDate" value={formData.completedDate} onChange={handleChange} />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase"><strong>Financial</strong></h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="vendorNTE">Vendor NTE</label>
-                      <input className="form-control" type="number" id="vendorNTE" name="vendorNTE" value={formData.vendorNTE} onChange={handleChange} placeholder="0.00" step="0.01" min="0" />
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="po">Customer PO</label>
-                      <input className="form-control" type="text" id="po" name="po" value={formData.po} onChange={handleChange} placeholder="Purchase order number" />
-                    </div>
-                  </div>
-                  <div className="col-sm-4">
-                    <div className="form-group">
-                      <label htmlFor="tt">TT</label>
-                      <input className="form-control" type="text" id="tt" name="tt" value={formData.tt} onChange={handleChange} placeholder="Trouble ticket number" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="form-group">
-                <div className="header">
-                  <h5 className="heading text-uppercase"><strong>Description</strong></h5>
-                </div>
-                <div className="row">
-                  <div className="col-sm-12">
-                    <div className="form-group">
-                      <label htmlFor="description">Description</label>
-                      <textarea className="form-control" id="description" name="description" value={formData.description} onChange={handleChange} rows="10" style={{ resize: "none" }} placeholder="Detailed description of the work to be performed" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="form-actions">
-                <button type="button" className="btn btn-default" onClick={handleCancel} disabled={loading}>
-                  Cancel
-                </button>
-                <button type="submit" className="btn btn-primary" disabled={loading}>
-                  {loading ? "Saving..." : isEdit ? "Update" : "Create"}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/workorders/form/WorkOrderFormPage.js.backup b/src/pages/workorders/form/WorkOrderFormPage.js.backup
deleted file mode 100644
index a4d85d97..00000000
--- a/src/pages/workorders/form/WorkOrderFormPage.js.backup
+++ /dev/null
@@ -1,262 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import { getWorkOrderById, addWorkOrder, editWorkOrder } from "../api";
-
-export default function WorkOrderFormPage() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const isEdit = !!id;
-
-  const [formData, setFormData] = useState({
-    workOrderNumber: "",
-    title: "",
-    location: "",
-    priority: "Medium",
-    status: "Open",
-    createdDate: new Date().toISOString().split("T")[0],
-    dueDate: "",
-    assignedTo: "",
-    description: "",
-    estimatedHours: 1,
-  });
-
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (isEdit && id) {
-      const loadWorkOrder = async () => {
-        try {
-          const wo = await getWorkOrderById(id);
-          if (wo) {
-            setFormData(wo);
-          }
-        } catch (err) {
-          console.error("Failed to load work order", err);
-          toast.error("Failed to load work order");
-        }
-      };
-      loadWorkOrder();
-    }
-  }, [id, isEdit]);
-
-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
-
-  const handleSave = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-
-    try {
-      if (isEdit) {
-        await editWorkOrder(formData);
-        toast.success("Work Order updated successfully!");
-      } else {
-        await addWorkOrder(formData);
-        toast.success("Work Order created successfully!");
-      }
-      navigate("/workorders");
-    } catch (err) {
-      console.error(err);
-      toast.error("Failed to save work order");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCancel = () => {
-    navigate("/workorders");
-  };
-
-  return (
-    <section className="formPage">
-      <div className="pageTitle">
-        {isEdit ? "Edit Work Order" : "Create Work Order"}
-      </div>
-
-      <form onSubmit={handleSave} className="formWrapper">
-        <div className="card formCard">
-          <div className="formBody">
-            {/* BASIC INFO SECTION */}
-            <div className="formSection">
-              <div className="sectionTitle">Work Order Details</div>
-              <div className="formRow">
-                <div className="formGroup">
-                  <label>Work Order Number *</label>
-                  <input
-                    type="text"
-                    name="workOrderNumber"
-                    value={formData.workOrderNumber}
-                    onChange={handleChange}
-                    required
-                    placeholder="e.g., WO-001"
-                  />
-                </div>
-                <div className="formGroup">
-                  <label>Title *</label>
-                  <input
-                    type="text"
-                    name="title"
-                    value={formData.title}
-                    onChange={handleChange}
-                    required
-                    placeholder="Work order title"
-                  />
-                </div>
-              </div>
-
-              <div className="formRow">
-                <div className="formGroup">
-                  <label>Location *</label>
-                  <select
-                    name="location"
-                    value={formData.location}
-                    onChange={handleChange}
-                    required
-                  >
-                    <option value="">Select Location</option>
-                    <option value="Springfield Office">Springfield Office</option>
-                    <option value="Chicago Distribution Center">Chicago Distribution Center</option>
-                    <option value="Indianapolis Warehouse">Indianapolis Warehouse</option>
-                  </select>
-                </div>
-                <div className="formGroup">
-                  <label>Assigned To</label>
-                  <select
-                    name="assignedTo"
-                    value={formData.assignedTo}
-                    onChange={handleChange}
-                  >
-                    <option value="">Select Employee</option>
-                    <option value="John Anderson">John Anderson</option>
-                    <option value="Sarah Martinez">Sarah Martinez</option>
-                    <option value="Mike Johnson">Mike Johnson</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-
-            {/* DATES & PRIORITY SECTION */}
-            <div className="formSection">
-              <div className="sectionTitle">Schedule & Priority</div>
-              <div className="formRow">
-                <div className="formGroup">
-                  <label>Created Date *</label>
-                  <input
-                    type="date"
-                    name="createdDate"
-                    value={formData.createdDate}
-                    onChange={handleChange}
-                    required
-                  />
-                </div>
-                <div className="formGroup">
-                  <label>Due Date *</label>
-                  <input
-                    type="date"
-                    name="dueDate"
-                    value={formData.dueDate}
-                    onChange={handleChange}
-                    required
-                  />
-                </div>
-                <div className="formGroup">
-                  <label>Estimated Hours *</label>
-                  <input
-                    type="number"
-                    name="estimatedHours"
-                    value={formData.estimatedHours}
-                    onChange={handleChange}
-                    required
-                    min="0.5"
-                    step="0.5"
-                  />
-                </div>
-              </div>
-
-              <div className="formRow">
-                <div className="formGroup">
-                  <label>Priority *</label>
-                  <select
-                    name="priority"
-                    value={formData.priority}
-                    onChange={handleChange}
-                    required
-                  >
-                    <option value="Low">Low</option>
-                    <option value="Medium">Medium</option>
-                    <option value="High">High</option>
-                    <option value="Urgent">Urgent</option>
-                  </select>
-                </div>
-                <div className="formGroup">
-                  <label>Status *</label>
-                  <select
-                    name="status"
-                    value={formData.status}
-                    onChange={handleChange}
-                    required
-                  >
-                    <option value="Open">Open</option>
-                    <option value="In Progress">In Progress</option>
-                    <option value="On Hold">On Hold</option>
-                    <option value="Completed">Completed</option>
-                    <option value="Cancelled">Cancelled</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-
-            {/* DESCRIPTION SECTION */}
-            <div className="formSection">
-              <div className="sectionTitle">Description</div>
-              <div className="formRow">
-                <div className="formGroup fullWidth">
-                  <label>Description</label>
-                  <textarea
-                    name="description"
-                    value={formData.description}
-                    onChange={handleChange}
-                    placeholder="Detailed description of the work to be performed"
-                    rows="5"
-                    style={{
-                      width: "100%",
-                      padding: "10px",
-                      borderRadius: "4px",
-                      border: "1px solid #ddd",
-                      fontFamily: "inherit",
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* ACTION BUTTONS */}
-          <div className="formActions">
-            <button
-              type="button"
-              className="btnSecondary"
-              onClick={handleCancel}
-              disabled={loading}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="btnPrimary"
-              disabled={loading}
-            >
-              {loading ? "Saving..." : isEdit ? "Update" : "Create"}
-            </button>
-          </div>
-        </div>
-      </form>
-    </section>
-  );
-}
diff --git a/src/pages/workorders/list/List.js b/src/pages/workorders/list/List.js
deleted file mode 100644
index f3ed313a..00000000
--- a/src/pages/workorders/list/List.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import { useState, useEffect } from "react";
-import { useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import usePaginatedList from "../../../hooks/usePaginatedList";
-import { fetchWorkOrdersPaged } from "./api";
-import { fetchUsers } from "../api";
-import Table from "./Table";
-import DeleteModal from "../../../components/DeleteModal";
-import "./styles.css";
-
-export default function WorkOrdersList() {
-  const navigate = useNavigate();
-  const [statusFilter, setStatusFilter] = useState("");
-  const [assigneeFilter, setAssigneeFilter] = useState("");
-
-  const {
-    rows, search, setSearch, page, setPage, pageSize, setPageSize,
-    totalCount, loading, err, sortBy, setSortBy, sortDir, setSortDir
-  } = usePaginatedList(fetchWorkOrdersPaged, { status: statusFilter, assignee: assigneeFilter });
-
-  const [deleteModal, setDeleteModal] = useState({
-    isOpen: false,
-    item: null,
-    loading: false
-  });
-
-  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
-
-  const handleDeleteClick = (item) => {
-    setDeleteModal({ isOpen: true, item, loading: false });
-  };
-
-  const handleDeleteConfirm = async () => {
-    setDeleteModal((prev) => ({ ...prev, loading: true }));
-    try {
-      await new Promise((resolve) => setTimeout(resolve, 500));
-      toast.success("Work Order deleted successfully!");
-      setDeleteModal({ isOpen: false, item: null, loading: false });
-    } catch {
-      toast.error("Failed to delete work order");
-      setDeleteModal((prev) => ({ ...prev, loading: false }));
-    }
-  };
-
-  const [users, setUsers] = useState([]);
-  const statuses = ["Open", "In Progress", "On Hold", "Done", "Cancelled"];
-
-  useEffect(() => {
-    fetchUsers().then(setUsers).catch(() => {});
-  }, []);
-
-  return (
-    <>
-      <section className="listPage">
-        <div className="woListToolbar">
-          <div className="woListToolbarLeft">
-            <h2 className="woListTitle">Work Orders</h2>
-            <span className="woListCount">{totalCount} total</span>
-          </div>
-          <div className="woListToolbarRight">
-            <input
-              className="woSearchInput"
-              value={search}
-              onChange={(e) => { setSearch(e.target.value); setPage(1); }}
-              placeholder="Search..."
-            />
-            <button className="woNewBtn" onClick={() => navigate("/workorders/new")}>
-              + New Work Order
-            </button>
-          </div>
-        </div>
-
-        <div className="woFilterBar">
-          <button
-            className={`woFilterChip ${statusFilter === "" ? "active" : ""}`}
-            onClick={() => setStatusFilter("")}
-          >
-            All
-          </button>
-          {statuses.map((s) => (
-            <button
-              key={s}
-              className={`woFilterChip ${statusFilter === s ? "active" : ""}`}
-              onClick={() => setStatusFilter(statusFilter === s ? "" : s)}
-            >
-              {s}
-            </button>
-          ))}
-          <span className="woFilterDivider" />
-          <select
-            className="woFilterSelect"
-            value={assigneeFilter}
-            onChange={(e) => setAssigneeFilter(e.target.value)}
-          >
-            <option value="">All Assignees</option>
-            <option value="__unassigned">Unassigned</option>
-            {users.map((u) => (
-              <option key={u.id} value={u.name}>{u.name}</option>
-            ))}
-          </select>
-        </div>
-
-        <Table
-          loading={loading}
-          error={err}
-          rows={rows}
-          onEdit={(item) => navigate(`/workorders/${item.id}`)}
-          onDelete={handleDeleteClick}
-          page={page}
-          setPage={setPage}
-          pageSize={pageSize}
-          setPageSize={setPageSize}
-          totalCount={totalCount}
-          totalPages={totalPages}
-          sortBy={sortBy}
-          setSortBy={setSortBy}
-          sortDir={sortDir}
-          setSortDir={setSortDir}
-        />
-
-        <DeleteModal
-          isOpen={deleteModal.isOpen}
-          onClose={() =>
-            setDeleteModal({ isOpen: false, item: null, loading: false })
-          }
-          onConfirm={handleDeleteConfirm}
-          title="Delete Work Order"
-          message={`Are you sure you want to delete "${deleteModal.item?.title}"? This action cannot be undone.`}
-          loading={deleteModal.loading}
-        />
-      </section>
-    </>
-  );
-}
diff --git a/src/pages/workorders/list/Table.js b/src/pages/workorders/list/Table.js
deleted file mode 100644
index 4e840c57..00000000
--- a/src/pages/workorders/list/Table.js
+++ /dev/null
@@ -1,199 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import ReactDOM from "react-dom";
-import SharedTable from "../../../components/SharedTable";
-import { fetchUsers, changeWorkOrderAssignment, changeWorkOrderStatus } from "../api";
-import { toast } from "react-toastify";
-
-const STATUS_OPTIONS = ["Open", "In Progress", "On Hold", "Done", "Cancelled"];
-
-function StatusDropdown({ value, rowId, onUpdate }) {
-  const [open, setOpen] = useState(false);
-  const btnRef = useRef(null);
-  const menuRef = useRef(null);
-  const [menuPos, setMenuPos] = useState({ top: 0, left: 0 });
-  const statusClass = (value || "").toLowerCase().replace(/\s+/g, "-");
-
-  useEffect(() => {
-    const handleClick = (e) => {
-      if (btnRef.current?.contains(e.target)) return;
-      if (menuRef.current?.contains(e.target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, []);
-
-  const handleOpen = () => {
-    if (btnRef.current) {
-      const rect = btnRef.current.getBoundingClientRect();
-      setMenuPos({ top: rect.bottom + 4, left: rect.left });
-    }
-    setOpen(!open);
-  };
-
-  const handleSelect = async (newStatus) => {
-    if (newStatus === value) { setOpen(false); return; }
-    setOpen(false);
-    try {
-      await changeWorkOrderStatus(rowId, newStatus);
-      onUpdate(rowId, newStatus);
-      toast.success(`Status changed to ${newStatus}`);
-    } catch (err) {
-      toast.error("Failed to update status");
-    }
-  };
-
-  return (
-    <>
-      <button ref={btnRef} className={`woStatusBadge ${statusClass} woStatusClickable`} onClick={handleOpen} style={{ border: "none" }}>
-        {value || "Open"} <span className="woStatusCaret">&#9662;</span>
-      </button>
-      {open && ReactDOM.createPortal(
-        <div ref={menuRef} className="assignDropdownMenu" style={{ top: menuPos.top, left: menuPos.left }}>
-          {STATUS_OPTIONS.map((s) => (
-            <button
-              key={s}
-              className={`assignDropdownOption ${s === value ? "active" : ""}`}
-              onClick={() => handleSelect(s)}
-            >
-              <span className={`woStatusDot ${s.toLowerCase().replace(/\s+/g, "-")}`} style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%", marginRight: 8 }} />
-              {s}
-            </button>
-          ))}
-        </div>,
-        document.body
-      )}
-    </>
-  );
-}
-
-function AssignDropdown({ value, rowId, onUpdate }) {
-  const [open, setOpen] = useState(false);
-  const [users, setUsers] = useState([]);
-  const [loaded, setLoaded] = useState(false);
-  const btnRef = useRef(null);
-  const menuRef = useRef(null);
-  const [menuPos, setMenuPos] = useState({ top: 0, left: 0 });
-
-  useEffect(() => {
-    const handleClick = (e) => {
-      if (btnRef.current?.contains(e.target)) return;
-      if (menuRef.current?.contains(e.target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, []);
-
-  const handleOpen = async () => {
-    if (!loaded) {
-      try {
-        const data = await fetchUsers();
-        setUsers(data);
-        setLoaded(true);
-      } catch (err) {
-        toast.error("Failed to load users");
-        return;
-      }
-    }
-    if (btnRef.current) {
-      const rect = btnRef.current.getBoundingClientRect();
-      setMenuPos({ top: rect.bottom + 4, left: rect.left });
-    }
-    setOpen(!open);
-  };
-
-  const handleSelect = async (userId, userName) => {
-    setOpen(false);
-    try {
-      await changeWorkOrderAssignment(rowId, userId);
-      onUpdate(rowId, userName);
-      toast.success(`Assigned to ${userName || "Unassigned"}`);
-    } catch (err) {
-      toast.error("Failed to update assignment");
-    }
-  };
-
-  return (
-    <>
-      <button ref={btnRef} className="assignDropdownBtn" onClick={handleOpen}>
-        {value || "Unassigned"} <span className="woStatusCaret">&#9662;</span>
-      </button>
-      {open && ReactDOM.createPortal(
-        <div ref={menuRef} className="assignDropdownMenu" style={{ top: menuPos.top, left: menuPos.left }}>
-          <button
-            className={`assignDropdownOption ${!value ? "active" : ""}`}
-            onClick={() => handleSelect("", "")}
-          >
-            Unassigned
-          </button>
-          {users.map((u) => (
-            <button
-              key={u.id}
-              className={`assignDropdownOption ${value === u.name ? "active" : ""}`}
-              onClick={() => handleSelect(u.id, u.name)}
-            >
-              {u.name}
-            </button>
-          ))}
-        </div>,
-        document.body
-      )}
-    </>
-  );
-}
-
-export default function Table({ loading, error, rows, onEdit, onDelete, page, setPage, pageSize, setPageSize, totalCount, totalPages, onRowUpdate, sortBy, setSortBy, sortDir, setSortDir }) {
-  const [localRows, setLocalRows] = useState(rows);
-
-  useEffect(() => {
-    setLocalRows(rows);
-  }, [rows]);
-
-  const handleAssignUpdate = (rowId, newName) => {
-    setLocalRows((prev) =>
-      prev.map((r) => r.id === rowId ? { ...r, assignedTo: newName, employeeName: newName } : r)
-    );
-  };
-
-  const handleStatusUpdate = (rowId, newStatus) => {
-    setLocalRows((prev) =>
-      prev.map((r) => r.id === rowId ? { ...r, status: newStatus } : r)
-    );
-  };
-
-  const columns = [
-    { key: "number", label: "WO #", render: (val, row) => <strong><a href="#" onClick={(e) => { e.preventDefault(); onEdit && onEdit(row); }}>{val}</a></strong> },
-    { key: "title", label: "Title" },
-    { key: "location", label: "Location" },
-    { key: "priority", label: "Priority" },
-    { key: "status", label: "Status", render: (val, row) => (
-      <StatusDropdown value={val} rowId={row.id} onUpdate={handleStatusUpdate} />
-    )},
-    { key: "createdDate", label: "Created", render: (val) => {
-      if (!val) return "";
-      const d = new Date(val.endsWith("Z") ? val : val + "Z");
-      if (isNaN(d)) return val;
-      const date = d.toLocaleDateString("en-CA");
-      const time = d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", hour12: false });
-      const tz = d.toLocaleTimeString(undefined, { timeZoneName: "short" }).split(" ").pop();
-      return `${date} ${time} ${tz}`;
-    }},
-    { key: "assignedTo", label: "Assigned To", render: (val, row) => (
-      <AssignDropdown value={val || row.employeeName} rowId={row.id} onUpdate={handleAssignUpdate} />
-    )},
-    { key: "lastUpdated", label: "Last Updated", render: (val) => {
-      if (!val) return "—";
-      const d = new Date(val.endsWith("Z") ? val : val + "Z");
-      if (isNaN(d)) return val;
-      const date = d.toLocaleDateString("en-CA");
-      const time = d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", hour12: false });
-      const tz = d.toLocaleTimeString(undefined, { timeZoneName: "short" }).split(" ").pop();
-      return `${date} ${time} ${tz}`;
-    }},
-  ];
-
-  return (
-    <SharedTable rows={localRows} columns={columns} onEdit={onEdit} onDelete={onDelete} page={page} setPage={setPage} pageSize={pageSize} setPageSize={setPageSize} totalCount={totalCount} loading={loading} error={error} sortBy={sortBy} setSortBy={setSortBy} sortDir={sortDir} setSortDir={setSortDir} />
-  );
-}
diff --git a/src/pages/workorders/list/api.js b/src/pages/workorders/list/api.js
deleted file mode 100644
index f6fc23ff..00000000
--- a/src/pages/workorders/list/api.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { get } from "../../../apiUtil";
-import { API_URL } from "../../../constants";
-
-export const fetchWorkOrdersPaged = async ({ search = "", page = 1, pageSize = 12, sortBy = "", sortDir = "", status = "", assignee = "" }) => {
-  const params = new URLSearchParams({ search, page, pageSize });
-  if (sortBy) params.append("sortBy", sortBy);
-  if (sortDir) params.append("sortDir", sortDir);
-  if (status) params.append("status", status);
-  if (assignee) params.append("assignee", assignee);
-  const res = await get(`${API_URL}/WorkOrder/GetWorkOrderList?${params.toString()}`);
-  const rows = (res?.data || res?.Data || []).map(x => ({
-    id: x.id ?? x.Id,
-    number: x.internalWONumber ?? x.number ?? x.workOrderNumber ?? "",
-    title: x.title ?? x.Title ?? "",
-    location: x.location ?? x.Location ?? x.locationName ?? x.LocationName ?? "",
-    priority: x.priority ?? x.Priority ?? "",
-    status: x.status ?? x.Status ?? "",
-    createdDate: x.createdDate ?? x.CreatedDate ?? "",
-    dueDate: x.dueDate ?? x.DueDate ?? "",
-    assignedTo: x.assignedTo ?? x.AssignedTo ?? x.employeeName ?? x.EmployeeName ?? "",
-    lastUpdated: x.lastUpdated ?? x.LastUpdated ?? "",
-  }));
-  return {
-    rows,
-    page: res?.pageNumber ?? 1,
-    pageSize: res?.pageSize ?? pageSize,
-    totalCount: res?.totalCount ?? rows.length,
-    totalPages: res?.totalPages ?? 1,
-  };
-};
-
-export const deleteWorkOrder = (id) =>
-  get(`${API_URL}/WorkOrder/DeleteWorkOrder?id=${id}`);
-
diff --git a/src/pages/workorders/list/styles.css b/src/pages/workorders/list/styles.css
deleted file mode 100644
index e08af143..00000000
--- a/src/pages/workorders/list/styles.css
+++ /dev/null
@@ -1,450 +0,0 @@
-/* Modal styles for Work Orders module */
-.modalRoot {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-}
-
-.modalScrim {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.3);
-}
-
-.modalCard {
-  position: relative;
-  margin: 10% auto;
-  padding: 20px;
-  background: #fff;
-  width: 400px;
-}
-
-/* Override listPage padding for this module */
-.listPage {
-  padding: 0 !important;
-  background: white !important;
-  min-height: auto !important;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  background: white;
-  padding: 10px 20px;
-  margin: 0;
-  border-bottom: 1px solid #e5e5e5;
-  font-size: 13px;
-}
-
-.breadcrumbItem {
-  color: #333;
-}
-
-.breadcrumbItem.active {
-  cursor: default;
-  font-weight: bold;
-  color: #00a0d1;
-}
-
-/* Search Section Styles */
-.searchSection {
-  background: white;
-  padding: 20px;
-  margin-bottom: 0;
-  border-bottom: 1px solid #e5e5e5;
-  position: relative;
-  z-index: 1;
-}
-
-.searchHeader {
-  margin-bottom: 20px;
-}
-
-.searchHeading {
-  font-size: 24px;
-  font-weight: 300;
-  margin: 0 0 8px 0;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.iconStack {
-  font-size: 0.9em;
-}
-
-.text-primary {
-  color: #0088cc;
-}
-
-.fa-inverse {
-  color: white;
-}
-
-.searchSubheading {
-  color: #666;
-  font-size: 14px;
-  display: block;
-  margin-left: 45px;
-}
-
-.searchControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 20px;
-}
-
-.searchLeft {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  flex: 1;
-}
-
-.searchInputGroup {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  flex: 1;
-  max-width: 600px;
-}
-
-.searchDropdown {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  background: white;
-  font-size: 14px;
-  min-width: 120px;
-}
-
-.searchInput {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  flex: 1;
-  font-size: 14px;
-  outline: none;
-}
-
-.searchInput:focus {
-  border-color: #66afe9;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-}
-
-.woSearchInput {
-  height: 38px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 14px;
-  outline: none;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.woSearchInput:focus {
-  border-color: #66afe9;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-}
-
-.searchButton {
-  height: 38px;
-  padding: 6px 20px;
-  background: #0088cc;
-  color: white;
-  border: 1px solid #0088cc;
-  border-radius: 0 4px 4px 0;
-  font-size: 14px;
-  cursor: pointer;
-  white-space: nowrap;
-  margin-left: 20px;
-}
-
-.searchButton:hover {
-  background: #0077b3;
-  border-color: #0077b3;
-}
-
-.viewToggle {
-  display: flex;
-  border: 1px solid #0088cc;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.viewBtn {
-  width: 40px;
-  height: 38px;
-  background: white;
-  border: none;
-  border-right: 1px solid #0088cc;
-  color: #0088cc;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.viewBtn:last-child {
-  border-right: none;
-}
-
-.viewBtn.active {
-  background: #0088cc;
-  color: white;
-}
-
-.viewBtn:hover:not(.active) {
-  background: #e6f2f8;
-}
-
-.searchRight {
-  display: flex;
-  align-items: center;
-}
-
-.paginationTop {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 0;
-}
-
-.pageBtn {
-  width: 35px;
-  height: 36px;
-  background: white;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  color: #0088cc;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pageBtn:hover:not(:disabled) {
-  background: #e6f2f8;
-}
-
-.pageBtn:disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-
-.pageNumber {
-  min-width: 35px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #0088cc;
-  color: white;
-  font-size: 14px;
-  border-left: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-}
-
-.assignDropdownBtn {
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 2px 8px;
-  font-size: 13px;
-  color: #333;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.assignDropdownBtn:hover {
-  border-color: #ccc;
-  background: #f5f5f5;
-}
-
-.assignDropdownMenu {
-  position: fixed;
-  background: #fff;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
-  z-index: 99999;
-  min-width: 180px;
-  max-height: 250px;
-  overflow-y: auto;
-  padding: 4px 0;
-}
-
-.assignDropdownOption {
-  display: block;
-  width: 100%;
-  padding: 8px 14px;
-  border: none;
-  background: #fff;
-  font-size: 13px;
-  color: #333;
-  cursor: pointer;
-  text-align: left;
-}
-
-.assignDropdownOption:hover {
-  background: #f0f0f0;
-}
-
-.assignDropdownOption.active {
-  font-weight: 600;
-  background: #e6f0ff;
-}
-
-.woStatusDot.open { background: #007bff; }
-.woStatusDot.in-progress { background: #ffc107; }
-.woStatusDot.on-hold { background: #fd7e14; }
-.woStatusDot.done { background: #28a745; }
-.woStatusDot.cancelled { background: #dc3545; }
-
-.woStatusBadge {
-  display: inline-block;
-  padding: 4px 12px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 500;
-  color: #fff;
-  background: #6c757d;
-}
-
-.woStatusBadge.open { background: #007bff; }
-.woStatusBadge.in-progress { background: #ffc107; color: #333; }
-.woStatusBadge.on-hold { background: #fd7e14; }
-.woStatusBadge.done { background: #28a745; }
-.woStatusBadge.cancelled { background: #dc3545; }
-
-.woStatusClickable {
-  cursor: pointer;
-}
-
-.woStatusClickable:hover {
-  filter: brightness(0.9);
-}
-
-.woStatusCaret {
-  font-size: 10px;
-  margin-left: 4px;
-}
-
-.woListToolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.woListToolbarLeft {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-}
-
-.woListTitle {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-  color: #333;
-}
-
-.woListCount {
-  font-size: 13px;
-  color: #999;
-}
-
-.woListToolbarRight {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.woListToolbarRight .woSearchInput {
-  width: 260px;
-}
-
-.woNewBtn {
-  padding: 8px 16px;
-  background: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.woNewBtn:hover {
-  background: #0069d9;
-}
-
-.woFilterBar {
-  display: flex;
-  gap: 6px;
-  padding: 10px 20px;
-  border-bottom: 1px solid #e5e5e5;
-  background: #fafafa;
-}
-
-.woFilterChip {
-  padding: 5px 14px;
-  border: 1px solid #ddd;
-  border-radius: 16px;
-  background: #fff;
-  font-size: 12px;
-  color: #666;
-  cursor: pointer;
-}
-
-.woFilterChip:hover {
-  border-color: #007bff;
-  color: #007bff;
-}
-
-.woFilterChip.active {
-  background: #007bff;
-  color: #fff;
-  border-color: #007bff;
-}
-
-.woFilterDivider {
-  width: 1px;
-  height: 20px;
-  background: #ddd;
-  margin: 0 4px;
-}
-
-.woFilterSelect {
-  height: 28px;
-  padding: 0 10px;
-  border: 1px solid #ddd;
-  border-radius: 16px;
-  font-size: 12px;
-  color: #666;
-  background: #fff;
-  cursor: pointer;
-  outline: none;
-}
-
-.woFilterSelect:focus {
-  border-color: #007bff;
-}
-
-/* Table wrapper */
-.tableContainer {
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 0;
-  margin: 0;
-}
diff --git a/src/pages/workorders/view/WorkOrderViewPage.css b/src/pages/workorders/view/WorkOrderViewPage.css
deleted file mode 100644
index 6940db92..00000000
--- a/src/pages/workorders/view/WorkOrderViewPage.css
+++ /dev/null
@@ -1,1122 +0,0 @@
-.woViewPage {
-  padding: 0;
-}
-
-.woViewHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 0 20px 20px;
-  border-bottom: 1px solid #e5e5e5;
-  margin-bottom: 20px;
-}
-
-.woViewTitle h2 {
-  margin: 0 0 8px 0;
-  font-size: 22px;
-  font-weight: 600;
-  color: #333;
-}
-
-.woStatusBadge {
-  display: inline-block;
-  padding: 4px 12px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 500;
-  color: #fff;
-  background: #6c757d;
-}
-
-.woStatusBadge.open { background: #007bff; }
-.woStatusBadge.in-progress { background: #ffc107; color: #333; }
-.woStatusBadge.on-hold { background: #fd7e14; }
-.woStatusBadge.done, .woStatusBadge.completed { background: #28a745; }
-.woStatusBadge.cancelled { background: #dc3545; }
-
-.woStatusClickable {
-  cursor: pointer;
-  user-select: none;
-  border: none;
-}
-
-.woStatusClickable:hover {
-  filter: brightness(0.9);
-}
-
-.woStatusCaret {
-  font-size: 10px;
-  margin-left: 4px;
-}
-
-.woStatusMenu {
-  position: fixed;
-  background: #fff;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
-  z-index: 99999;
-  min-width: 170px;
-  padding: 4px 0;
-}
-
-.woStatusOption {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px 14px;
-  border: none;
-  background: #ffffff;
-  font-size: 13px;
-  color: #333;
-  cursor: pointer;
-  text-align: left;
-}
-
-.woStatusOption:hover {
-  background: #f0f0f0;
-}
-
-.woStatusOption.active {
-  font-weight: 600;
-  background: #e6f0ff;
-}
-
-.woStatusDot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.woStatusDot.open { background: #007bff; }
-.woStatusDot.in-progress { background: #ffc107; }
-.woStatusDot.on-hold { background: #fd7e14; }
-.woStatusDot.done { background: #28a745; }
-.woStatusDot.cancelled { background: #dc3545; }
-
-.woViewActions {
-  display: flex;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.woViewGrid {
-  padding: 0 20px;
-}
-
-.woViewSection {
-  margin-bottom: 24px;
-}
-
-.woViewSection h4 {
-  font-size: 14px;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: #666;
-  margin: 0 0 12px 0;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #eee;
-}
-
-.woAssignBtn {
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 2px 8px;
-  font-size: 14px;
-  color: #333;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.woAssignBtn:hover {
-  border-color: #ccc;
-  background: #f5f5f5;
-}
-
-.woAssignMenu {
-  position: fixed;
-  background: #fff;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
-  z-index: 99999;
-  min-width: 180px;
-  max-height: 250px;
-  overflow-y: auto;
-  padding: 4px 0;
-}
-
-.woAssignOption {
-  display: block;
-  width: 100%;
-  padding: 8px 14px;
-  border: none;
-  background: #fff;
-  font-size: 13px;
-  color: #333;
-  cursor: pointer;
-  text-align: left;
-}
-
-.woAssignOption:hover {
-  background: #f0f0f0;
-}
-
-.woAssignOption.active {
-  font-weight: 600;
-  background: #e6f0ff;
-}
-
-.woSectionToggle {
-  cursor: pointer;
-  user-select: none;
-}
-
-.woSectionToggle:hover {
-  color: #007bff;
-}
-
-.woSectionArrow {
-  display: inline-block;
-  margin-right: 6px;
-  transition: transform 0.15s;
-  font-size: 12px;
-}
-
-.woSectionArrow.open {
-  transform: rotate(90deg);
-}
-
-.woFieldGrid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
-
-.woField {
-  display: flex;
-  flex-direction: column;
-}
-
-.woFieldLabel {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: #999;
-  margin-bottom: 2px;
-}
-
-.woFieldValue {
-  font-size: 14px;
-  color: #333;
-}
-
-.woDescription {
-  font-size: 14px;
-  color: #333;
-  line-height: 1.6;
-  margin: 0;
-  white-space: pre-wrap;
-}
-
-.woFieldPlaceholder {
-  color: #ccc;
-  font-style: italic;
-}
-
-.woTimeline {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.woTimelineItem {
-  padding: 12px;
-  background: #f8f9fa;
-  border-radius: 6px;
-  border-left: 3px solid #007bff;
-}
-
-.woTimelineHeader {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 6px;
-}
-
-.woTimelineAuthor {
-  font-weight: 600;
-  font-size: 13px;
-  color: #333;
-}
-
-.woTimelineDate {
-  font-size: 12px;
-  color: #999;
-}
-
-.woTimelineBody {
-  font-size: 13px;
-  color: #555;
-  line-height: 1.5;
-}
-
-.woTabContainer {
-  display: flex;
-  flex-direction: column;
-  height: 400px;
-  border: 1px solid #e5e5e5;
-  border-radius: 0 0 6px 6px;
-}
-
-.woTabScroll {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.woCommentTabs {
-  display: flex;
-  gap: 0;
-  border-bottom: 2px solid #e5e5e5;
-}
-
-.woCommentTab {
-  padding: 8px 20px;
-  border: none;
-  background: none;
-  font-size: 13px;
-  font-weight: 600;
-  color: #999;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -2px;
-}
-
-.woCommentTab:hover {
-  color: #333;
-}
-
-.woCommentTab.active {
-  color: #007bff;
-  border-bottom-color: #007bff;
-}
-
-.woNoComments {
-  font-size: 13px;
-  color: #999;
-  padding: 20px 0;
-  text-align: center;
-}
-
-.woAuditItem {
-  border-left-color: #6c757d;
-}
-
-.woAuditField {
-  font-weight: 600;
-  color: #333;
-  margin-right: 8px;
-}
-
-.woAuditOld {
-  color: #dc3545;
-  text-decoration: line-through;
-  margin-right: 4px;
-}
-
-.woAuditArrow {
-  color: #999;
-  margin: 0 4px;
-}
-
-.woAuditNew {
-  color: #28a745;
-  font-weight: 500;
-}
-
-.woCommentInput {
-  display: flex;
-  gap: 8px;
-  padding: 12px 16px;
-  border-top: 1px solid #e5e5e5;
-  background: #f8f9fa;
-  flex-shrink: 0;
-}
-
-.woCommentTextarea {
-  flex: 1;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 8px 12px;
-  font-size: 13px;
-  font-family: inherit;
-  resize: none;
-  line-height: 1.4;
-}
-
-.woCommentTextarea:focus {
-  outline: none;
-  border-color: #007bff;
-}
-
-.woCommentSend {
-  align-self: flex-end;
-  padding: 8px 16px;
-  font-size: 13px;
-}
-
-.btn-success {
-  background: #28a745;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  padding: 8px 16px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-}
-
-.btn-success:hover {
-  background: #218838;
-}
-
-.woDispatchOverlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.4);
-  z-index: 99999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.woDispatchModal {
-  background: #fff;
-  border-radius: 8px;
-  width: 560px;
-  max-height: 80vh;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
-}
-
-.woDispatchHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #eee;
-}
-
-.woDispatchHeader h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.woDispatchClose {
-  background: none;
-  border: none;
-  font-size: 22px;
-  color: #999;
-  cursor: pointer;
-}
-
-.woDispatchBody {
-  padding: 20px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.woDispatchField {
-  margin-bottom: 16px;
-}
-
-.woDispatchField label {
-  display: block;
-  font-size: 13px;
-  font-weight: 600;
-  margin-bottom: 6px;
-  color: #333;
-}
-
-.woDispatchSearch {
-  width: 100%;
-  height: 36px;
-  padding: 6px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 13px;
-  margin-bottom: 8px;
-  box-sizing: border-box;
-}
-
-.woDispatchSearch:focus {
-  border-color: #66afe9;
-  outline: none;
-}
-
-.woDispatchSelected {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 8px;
-}
-
-.woDispatchSelectedChip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 10px;
-  background: #e6f0ff;
-  border-radius: 12px;
-  font-size: 12px;
-  color: #007bff;
-}
-
-.woDispatchSelectedChip button {
-  background: none;
-  border: none;
-  color: #007bff;
-  cursor: pointer;
-  font-size: 14px;
-  padding: 0;
-  line-height: 1;
-}
-
-.woDispatchFieldRow {
-  display: flex;
-  gap: 12px;
-}
-
-.woDispatchFieldHalf {
-  flex: 1;
-}
-
-.woDispatchVendorList {
-  max-height: 200px;
-  overflow-y: auto;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-.woDispatchVendorItem {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  cursor: pointer;
-  border-bottom: 1px solid #f0f0f0;
-  flex-wrap: nowrap;
-}
-
-.woDispatchVendorItem:last-child {
-  border-bottom: none;
-}
-
-.woDispatchVendorItem:hover {
-  background: #f8f9fa;
-}
-
-.woDispatchVendorItem.selected {
-  background: #e6f0ff;
-}
-
-.woDispatchVendorItem input[type="radio"] {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-}
-
-.woDispatchVendorInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  min-width: 0;
-  flex: 1;
-}
-
-.woDispatchVendorName {
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.woDispatchVendorTrades {
-  font-size: 11px;
-  color: #007bff;
-}
-
-.woDispatchVendorAddr {
-  font-size: 11px;
-  color: #999;
-}
-
-.woDispatchVendorDistBadge {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-shrink: 0;
-  min-width: 60px;
-  padding: 4px 8px;
-  background: #f0f7ff;
-  border-radius: 6px;
-}
-
-.woDispatchDistNum {
-  font-size: 16px;
-  font-weight: 700;
-  color: #007bff;
-  line-height: 1.1;
-}
-
-.woDispatchDistLabel {
-  font-size: 10px;
-  color: #999;
-  text-transform: uppercase;
-}
-
-.woDispatchLoading {
-  padding: 20px;
-  text-align: center;
-  color: #999;
-  font-size: 13px;
-}
-
-.woDispatchFooter {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 16px 20px;
-  border-top: 1px solid #eee;
-}
-
-.woDispatchTable {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-.woDispatchTable th {
-  text-align: left;
-  padding: 8px 12px;
-  font-weight: 600;
-  color: #666;
-  border-bottom: 1px solid #ddd;
-  font-size: 11px;
-  text-transform: uppercase;
-}
-
-.woDispatchTable td {
-  padding: 8px 12px;
-  border-bottom: 1px solid #eee;
-}
-
-.woDispatchStatus {
-  display: inline-block;
-  padding: 2px 10px;
-  border-radius: 10px;
-  font-size: 11px;
-  font-weight: 500;
-  color: #fff;
-  background: #6c757d;
-}
-
-.woDispatchStatus.sent { background: #007bff; }
-.woDispatchStatus.acknowledged { background: #ffc107; color: #333; }
-.woDispatchStatus.completed { background: #28a745; }
-.woDispatchStatus.cancelled { background: #dc3545; }
-.woDispatchStatus.verified { background: #155724; }
-
-.dispatchClickRow {
-  cursor: pointer;
-}
-
-.dispatchClickRow:hover {
-  background: #f0f7ff;
-}
-
-.dispatchDetailModal {
-  background: #fff;
-  border-radius: 8px;
-  width: 800px;
-  height: 90vh;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
-}
-
-.dispatchDetailModal .woDispatchHeader {
-  padding: 14px 20px;
-}
-
-.dispatchDetailModal .woDispatchHeader h3 {
-  font-size: 15px;
-}
-
-.dispatchDetailSub {
-  font-size: 12px;
-  color: #999;
-  display: block;
-  margin-top: 2px;
-}
-
-.dispatchDetailBody {
-  overflow-y: auto;
-  flex: 1;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.dispatchDetailSection {
-  padding: 16px 20px;
-  border-bottom: 1px solid #eee;
-}
-
-.dispatchDetailSection:last-child {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  border-bottom: none;
-  overflow: hidden;
-}
-
-.dispatchDetailSection h4 {
-  margin: 0 0 12px 0;
-  font-size: 13px;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: #666;
-}
-
-.dispatchDetailGrid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 10px;
-}
-
-.dispatchDetailField {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.dispatchDetailField label {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: #999;
-  margin-bottom: 0;
-}
-
-.dispatchDetailField span {
-  font-size: 13px;
-  color: #333;
-}
-
-.dispatchDetailField .woDispatchStatus {
-  font-size: 11px;
-  width: fit-content;
-}
-
-.dispatchDetailFieldFull {
-  grid-column: 1 / -1;
-}
-
-.dispatchDetailActions {
-  grid-column: 1 / -1;
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  padding-top: 4px;
-}
-
-.dispatchWaiting {
-  font-weight: 500;
-  font-size: 13px;
-}
-
-.dispatchWait-green { color: #28a745; }
-.dispatchWait-yellow { color: #ffc107; }
-.dispatchWait-red { color: #dc3545; }
-
-.dispatchWaitDot {
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.dispatchWOChips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.dispatchWOChip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  background: #e9ecef;
-  border-radius: 4px;
-  font-size: 12px;
-  color: #333;
-}
-
-.dispatchWOChip button {
-  background: none;
-  border: none;
-  color: #999;
-  cursor: pointer;
-  font-size: 14px;
-  padding: 0;
-  line-height: 1;
-}
-
-.dispatchWOChip button:hover {
-  color: #dc3545;
-}
-
-.dispatchWODropdown {
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  max-height: 160px;
-  overflow-y: auto;
-  margin-top: 4px;
-}
-
-.dispatchWOOption {
-  padding: 8px 12px;
-  font-size: 12px;
-  cursor: pointer;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.dispatchWOOption:hover {
-  background: #f0f7ff;
-}
-
-.dispatchWOOption:last-child {
-  border-bottom: none;
-}
-
-.dispatchChecklistAdd {
-  margin-top: 8px;
-}
-
-.dispatchChecklistAdd .form-control {
-  font-size: 13px;
-}
-
-.dispatchCustomItems {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-top: 6px;
-}
-
-.dispatchCustomItem {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 8px;
-  background: #f8f9fa;
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-.dispatchCustomItem button {
-  background: none;
-  border: none;
-  color: #999;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.dispatchCustomItem button:hover {
-  color: #dc3545;
-}
-
-.dispatchCancelBtn {
-  padding: 6px 14px;
-  background: #fff;
-  color: #dc3545;
-  border: 1px solid #dc3545;
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  margin-right: auto;
-}
-
-.dispatchCancelBtn:hover {
-  background: #dc3545;
-  color: #fff;
-}
-
-.dispatchVerifiedBanner {
-  padding: 12px 20px;
-  background: #d4edda;
-  color: #155724;
-  font-size: 13px;
-  font-weight: 600;
-  text-align: center;
-  border-top: 1px solid #c3e6cb;
-  flex-shrink: 0;
-}
-
-.dispatchVerifyFooter {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 20px;
-  border-top: 1px solid #eee;
-  background: #fafafa;
-  flex-shrink: 0;
-}
-
-.dispatchVerifyMissing {
-  font-size: 12px;
-  color: #999;
-  flex: 1;
-}
-
-.dispatchSignoffs {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.dispatchSignoffSlot {
-  flex: 1;
-  border: 1px solid #eee;
-  border-radius: 6px;
-  padding: 12px;
-  text-align: center;
-}
-
-.dispatchSignoffSlot.signed {
-  border-color: #28a745;
-  background: #f0fff4;
-}
-
-.dispatchSignoffLabel {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: #999;
-  margin-bottom: 8px;
-}
-
-.dispatchSignoffDone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-}
-
-.dispatchSignoffImg {
-  max-width: 160px;
-  max-height: 60px;
-  border: 1px solid #eee;
-  border-radius: 4px;
-}
-
-.dispatchSignoffTyped {
-  font-family: "Brush Script MT", "Segoe Script", cursive;
-  font-size: 24px;
-  color: #333;
-}
-
-.dispatchSignoffMeta {
-  font-size: 11px;
-  color: #28a745;
-}
-
-.dispatchSignoffBtn {
-  font-size: 12px;
-}
-
-.dispatchSignoffBadge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px;
-  background: #28a745;
-  color: #fff;
-  border-radius: 6px;
-  font-size: 13px;
-  font-weight: 600;
-  min-width: 100px;
-}
-
-.dispatchChecklist {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-bottom: 16px;
-}
-
-.dispatchChecklistItem {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 8px;
-  border-radius: 4px;
-  font-size: 13px;
-}
-
-.dispatchChecklistItem:hover {
-  background: #f8f9fa;
-}
-
-.dispatchChecklistItem.completed .dispatchChecklistText {
-  text-decoration: line-through;
-  color: #999;
-}
-
-.dispatchChecklistText {
-  flex: 1;
-  color: #333;
-}
-
-.dispatchChecklistDone {
-  font-size: 11px;
-  color: #28a745;
-}
-
-.dispatchChecklistItem input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  cursor: pointer;
-}
-
-.dispatchThreadContainer {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 200px;
-  border: 1px solid #e5e5e5;
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.dispatchThreadScroll {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px;
-}
-
-.woTimelineInbound {
-  border-left-color: #28a745;
-}
-
-.dispatchThreadInput {
-  border-top: 1px solid #e5e5e5;
-  padding: 10px 12px;
-  background: #f8f9fa;
-}
-
-.dispatchThreadInput .woCommentTextarea {
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.dispatchThreadControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 6px;
-}
-
-.dispatchEmailToggle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: #666;
-  cursor: pointer;
-}
-
-.loading {
-  padding: 40px;
-  text-align: center;
-  color: #999;
-}
-
-.dispatchUpliftPanel {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-bottom: 12px;
-}
-
-.dispatchUpliftRow {
-  padding: 12px;
-  border: 1px solid #e4e7eb;
-  border-radius: 8px;
-  background: #fafbfc;
-}
-
-.dispatchUpliftHeader {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-  margin-bottom: 6px;
-}
-
-.dispatchUpliftAmount {
-  font-weight: 600;
-  color: #1f2937;
-}
-
-.dispatchUpliftDelta {
-  color: #059669;
-  font-weight: 500;
-}
-
-.dispatchUpliftTier {
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  background: #fef3c7;
-  color: #92400e;
-  font-weight: 600;
-}
-
-.dispatchUpliftPill {
-  display: inline-block;
-  padding: 3px 9px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.dispatchUpliftPill-pending { background: #fef3c7; color: #92400e; }
-.dispatchUpliftPill-approved { background: #d1fae5; color: #065f46; }
-.dispatchUpliftPill-denied { background: #fee2e2; color: #991b1b; }
-.dispatchUpliftPill-cancelled { background: #e5e7eb; color: #4b5563; }
-
-.dispatchUpliftReason {
-  font-size: 13px;
-  color: #374151;
-  margin-top: 4px;
-}
-
-.dispatchUpliftMeta {
-  font-size: 12px;
-  color: #6b7280;
-  margin-top: 2px;
-}
-
-.dispatchUpliftActions {
-  display: flex;
-  gap: 8px;
-  margin-top: 10px;
-}
diff --git a/src/pages/workorders/view/WorkOrderViewPage.js b/src/pages/workorders/view/WorkOrderViewPage.js
deleted file mode 100644
index 332bff69..00000000
--- a/src/pages/workorders/view/WorkOrderViewPage.js
+++ /dev/null
@@ -1,1264 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import ReactDOM from "react-dom";
-import { useParams, useNavigate } from "react-router";
-import { toast } from "react-toastify";
-import { getWorkOrderById, addComment, changeWorkOrderStatus, fetchUsers, changeWorkOrderAssignment, fetchVendorsDropdown, dispatchToVendor, getDispatchById, updateDispatch, addDispatchComment, fetchTaskTemplates, updateChecklistItem, addChecklistItem, addDispatchSignoff, verifyDispatch } from "../api";
-import { upliftApi } from "../../../services/api";
-import { getCurrentUser } from "../../../services/authService";
-import { timeSince, timeBetween, waitTimeColor } from "../../../utils/timeSince";
-import SignatureCapture from "../../../components/SignatureCapture";
-import "../../../components/SignatureCapture.css";
-import "./WorkOrderViewPage.css";
-
-function AssignDropdown({ value, onAssign }) {
-  const [open, setOpen] = useState(false);
-  const [users, setUsers] = useState([]);
-  const [loaded, setLoaded] = useState(false);
-  const btnRef = useRef(null);
-  const menuRef = useRef(null);
-  const [menuPos, setMenuPos] = useState({ top: 0, left: 0 });
-
-  useEffect(() => {
-    const handleClick = (e) => {
-      if (btnRef.current?.contains(e.target)) return;
-      if (menuRef.current?.contains(e.target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, []);
-
-  const handleOpen = async () => {
-    if (!loaded) {
-      try {
-        const data = await fetchUsers();
-        setUsers(data);
-        setLoaded(true);
-      } catch { return; }
-    }
-    if (btnRef.current) {
-      const rect = btnRef.current.getBoundingClientRect();
-      setMenuPos({ top: rect.bottom + 4, left: rect.left });
-    }
-    setOpen(!open);
-  };
-
-  const handleSelect = async (userId, userName) => {
-    setOpen(false);
-    onAssign(userId, userName);
-  };
-
-  return (
-    <>
-      <button ref={btnRef} className="woAssignBtn" onClick={handleOpen}>
-        {value || "Unassigned"} <span className="woStatusCaret">&#9662;</span>
-      </button>
-      {open && ReactDOM.createPortal(
-        <div ref={menuRef} className="woAssignMenu" style={{ top: menuPos.top, left: menuPos.left }}>
-          <button className={`woAssignOption ${!value ? "active" : ""}`} onClick={() => handleSelect("", "")}>
-            Unassigned
-          </button>
-          {users.map((u) => (
-            <button key={u.id} className={`woAssignOption ${value === u.name ? "active" : ""}`} onClick={() => handleSelect(u.id, u.name)}>
-              {u.name}
-            </button>
-          ))}
-        </div>,
-        document.body
-      )}
-    </>
-  );
-}
-
-function CollapsibleSection({ title, defaultOpen = false, children }) {
-  const [open, setOpen] = useState(defaultOpen);
-  return (
-    <div className="woViewSection">
-      <h4 className="woSectionToggle" onClick={() => setOpen(!open)}>
-        <span className={`woSectionArrow ${open ? "open" : ""}`}>&#9656;</span>
-        {title}
-      </h4>
-      {open && children}
-    </div>
-  );
-}
-
-function formatDateTime(value) {
-  const d = new Date(value.endsWith("Z") ? value : value + "Z");
-  if (isNaN(d)) return value;
-  const date = d.toLocaleDateString("en-CA");
-  const time = d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", hour12: false });
-  const tz = d.toLocaleTimeString(undefined, { timeZoneName: "short" }).split(" ").pop();
-  return `${date} ${time} ${tz}`;
-}
-
-function CommentTimeline({ comments }) {
-  const bottomRef = useRef(null);
-  const sorted = [...(comments || [])].sort((a, b) =>
-    new Date(a.createdDate) - new Date(b.createdDate)
-  );
-
-  useEffect(() => {
-    bottomRef.current?.scrollIntoView();
-  }, [sorted.length]);
-
-  if (!sorted.length) {
-    return <div className="woTabScroll"><p className="woNoComments">No comments yet.</p></div>;
-  }
-
-  return (
-    <div className="woTabScroll">
-      <div className="woTimeline">
-        {sorted.map((c) => (
-          <div key={c.id} className="woTimelineItem">
-            <div className="woTimelineHeader">
-              <span className="woTimelineAuthor">{c.userName || c.commenter || "System"}</span>
-              <span className="woTimelineDate">
-                {c.createdDate ? formatDateTime(c.createdDate) : ""}
-              </span>
-            </div>
-            <div className="woTimelineBody">{c.commenttext}</div>
-          </div>
-        ))}
-        <div ref={bottomRef} />
-      </div>
-    </div>
-  );
-}
-
-function AuditTimeline({ entries }) {
-  const bottomRef = useRef(null);
-  const sorted = [...(entries || [])].sort((a, b) =>
-    new Date(a.createdAt) - new Date(b.createdAt)
-  );
-
-  useEffect(() => {
-    bottomRef.current?.scrollIntoView();
-  }, [sorted.length]);
-
-  if (!sorted.length) {
-    return <div className="woTabScroll"><p className="woNoComments">No changes recorded.</p></div>;
-  }
-
-  return (
-    <div className="woTabScroll">
-      <div className="woTimeline">
-        {sorted.map((e) => (
-          <div key={e.id} className="woTimelineItem woAuditItem">
-            <div className="woTimelineHeader">
-              <span className="woTimelineAuthor">{e.userName || "System"}</span>
-              <span className="woTimelineDate">
-                {e.createdAt ? formatDateTime(e.createdAt) : ""}
-              </span>
-            </div>
-            <div className="woTimelineBody">
-              <span className="woAuditField">{e.fieldName}</span>
-              {e.oldValue && <span className="woAuditOld">{e.oldValue}</span>}
-              <span className="woAuditArrow">→</span>
-              <span className="woAuditNew">{e.newValue}</span>
-            </div>
-          </div>
-        ))}
-        <div ref={bottomRef} />
-      </div>
-    </div>
-  );
-}
-
-const DISPATCH_STATUSES = ["Sent", "Acknowledged", "In Progress", "Completed", "Verified", "Cancelled"];
-
-function DispatchDetailModal({ dispatchId, onClose, onUpdated }) {
-  const [dispatch, setDispatch] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [editing, setEditing] = useState(false);
-  const [newChecklistItem, setNewChecklistItem] = useState("");
-  const [form, setForm] = useState({});
-  const [saving, setSaving] = useState(false);
-  const [commentText, setCommentText] = useState("");
-  const [sendEmail, setSendEmail] = useState(true);
-  const [sendingComment, setSendingComment] = useState(false);
-  const [sigCapture, setSigCapture] = useState(null);
-  const [uplifts, setUplifts] = useState([]);
-  const bottomRef = useRef(null);
-
-  const loadUplifts = async () => {
-    try {
-      const res = await upliftApi.listForDispatch(dispatchId);
-      setUplifts(res?.data ?? res ?? []);
-    } catch {
-      setUplifts([]);
-    }
-  };
-
-  const loadDispatch = async () => {
-    try {
-      const data = await getDispatchById(dispatchId);
-      setDispatch(data);
-      setForm({
-        status: data.status || "",
-        nteAmount: data.nteAmount != null ? String(data.nteAmount) : "",
-        scheduledDate: data.scheduledDate ? data.scheduledDate.split("T")[0] : "",
-        completedDate: data.completedDate ? data.completedDate.split("T")[0] : "",
-        description: data.description || "",
-      });
-      await loadUplifts();
-    } catch {
-      toast.error("Failed to load dispatch");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleApproveUplift = async (req) => {
-    const note = window.prompt("Optional approval note:", "") || "";
-    if (!window.confirm(`Approve uplift to $${Number(req.requestedNTE).toFixed(2)}?`)) return;
-    try {
-      await upliftApi.approve(req.id, note);
-      toast.success("Uplift approved — NTE updated");
-      await loadDispatch();
-      onUpdated();
-    } catch (err) {
-      toast.error(err.message || "Failed to approve uplift");
-    }
-  };
-
-  const handleDenyUplift = async (req) => {
-    const note = window.prompt("Denial reason (required):", "");
-    if (!note || !note.trim()) {
-      toast.error("A reason is required when denying.");
-      return;
-    }
-    try {
-      await upliftApi.deny(req.id, note.trim());
-      toast.success("Uplift denied");
-      await loadDispatch();
-      onUpdated();
-    } catch (err) {
-      toast.error(err.message || "Failed to deny uplift");
-    }
-  };
-
-  useEffect(() => { loadDispatch(); }, [dispatchId]);
-  useEffect(() => { bottomRef.current?.scrollIntoView(); }, [dispatch?.comments?.length]);
-
-  const handleSave = async () => {
-    setSaving(true);
-    try {
-      await updateDispatch({
-        Id: dispatchId,
-        Status: form.status,
-        NTEAmount: form.nteAmount ? parseFloat(form.nteAmount) : null,
-        ScheduledDate: form.scheduledDate || null,
-        CompletedDate: form.completedDate || null,
-        Description: form.description,
-      });
-      toast.success("Dispatch updated");
-      setEditing(false);
-      loadDispatch();
-      onUpdated();
-    } catch {
-      toast.error("Failed to update dispatch");
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const handleComment = async (e) => {
-    e.preventDefault();
-    if (!commentText.trim()) return;
-    setSendingComment(true);
-    try {
-      const newComment = await addDispatchComment(dispatchId, commentText.trim(), sendEmail);
-      setCommentText("");
-      setDispatch((prev) => ({
-        ...prev,
-        comments: [...(prev.comments || []), newComment],
-      }));
-    } catch {
-      toast.error("Failed to send message");
-    } finally {
-      setSendingComment(false);
-    }
-  };
-
-  if (loading) {
-    return ReactDOM.createPortal(
-      <div className="woDispatchOverlay"><div className="woDispatchModal"><div className="woDispatchLoading">Loading...</div></div></div>,
-      document.body
-    );
-  }
-
-  if (!dispatch) return null;
-
-  return ReactDOM.createPortal(
-    <div className="woDispatchOverlay" onClick={onClose}>
-      <div className="dispatchDetailModal" onClick={(e) => e.stopPropagation()}>
-        <div className="woDispatchHeader">
-          <div>
-            <h3>{dispatch.dispatchNumber || dispatch.poNumber} · {dispatch.vendorName}</h3>
-            <span className="dispatchDetailSub">
-              PO: {dispatch.poNumber} · {dispatch.workOrders?.length > 0 ? `${dispatch.workOrders.length} WO(s): ${dispatch.workOrders.map(w => w.woNumber).join(", ")}` : `WO: ${dispatch.woNumber}`} · {dispatch.vendorEmail}
-            </span>
-          </div>
-          <button className="woDispatchClose" onClick={onClose}>&times;</button>
-        </div>
-
-        <div className="dispatchDetailBody">
-          <div className="dispatchDetailSection">
-            <div className="dispatchDetailGrid">
-              {editing ? (
-                <>
-                  <div className="dispatchDetailField">
-                    <label>Status</label>
-                    <select className="form-control" value={form.status} onChange={(e) => setForm(f => ({ ...f, status: e.target.value }))}>
-                      {DISPATCH_STATUSES.map((s) => <option key={s} value={s}>{s}</option>)}
-                    </select>
-                  </div>
-                  <div className="dispatchDetailField">
-                    <label>NTE Amount</label>
-                    <input className="form-control" type="number" value={form.nteAmount} onChange={(e) => setForm(f => ({ ...f, nteAmount: e.target.value }))} step="0.01" />
-                  </div>
-                  <div className="dispatchDetailField">
-                    <label>Scheduled Date</label>
-                    <input className="form-control" type="date" value={form.scheduledDate} onChange={(e) => setForm(f => ({ ...f, scheduledDate: e.target.value }))} />
-                  </div>
-                  <div className="dispatchDetailField">
-                    <label>Completed Date</label>
-                    <input className="form-control" type="date" value={form.completedDate} onChange={(e) => setForm(f => ({ ...f, completedDate: e.target.value }))} />
-                  </div>
-                  <div className="dispatchDetailField dispatchDetailFieldFull">
-                    <label>Description</label>
-                    <textarea className="form-control" value={form.description} onChange={(e) => setForm(f => ({ ...f, description: e.target.value }))} rows="3" style={{ resize: "none" }} />
-                  </div>
-                  <div className="dispatchDetailActions">
-                    <button className="btn btn-primary" onClick={handleSave} disabled={saving}>{saving ? "Saving..." : "Save"}</button>
-                    <button className="btn btn-default" onClick={() => setEditing(false)}>Cancel</button>
-                  </div>
-                </>
-              ) : (
-                <>
-                  <div className="dispatchDetailField">
-                    <label>Status</label>
-                    <span className={`woDispatchStatus ${(dispatch.status || "").toLowerCase()}`}>{dispatch.status}</span>
-                  </div>
-                  <div className="dispatchDetailField">
-                    <label>NTE</label>
-                    <span>{dispatch.nteAmount != null ? `$${parseFloat(dispatch.nteAmount).toFixed(2)}` : "—"}</span>
-                  </div>
-                  <div className="dispatchDetailField">
-                    <label>Scheduled</label>
-                    <span>{dispatch.scheduledDate ? dispatch.scheduledDate.split("T")[0] : "—"}</span>
-                  </div>
-                  <div className="dispatchDetailField">
-                    <label>Completed</label>
-                    <span>{dispatch.completedDate ? dispatch.completedDate.split("T")[0] : "—"}</span>
-                  </div>
-                  <div className="dispatchDetailField">
-                    <label>Dispatched</label>
-                    <span>{dispatch.dispatchedAt ? formatDateTime(dispatch.dispatchedAt) : "—"}</span>
-                  </div>
-                  <div className="dispatchDetailField">
-                    <label>Accepted</label>
-                    {dispatch.acknowledgedAt ? (
-                      <span style={{ color: "#28a745" }}>{formatDateTime(dispatch.acknowledgedAt)} (after {timeBetween(dispatch.dispatchedAt, dispatch.acknowledgedAt)})</span>
-                    ) : dispatch.status === "Sent" ? (
-                      <span className={`dispatchWaiting dispatchWait-${waitTimeColor(dispatch.dispatchedAt)}`}>Awaiting acceptance · {timeSince(dispatch.dispatchedAt)}</span>
-                    ) : (
-                      <span>—</span>
-                    )}
-                  </div>
-                  <div className="dispatchDetailField">
-                    <label>Vendor Email</label>
-                    <span>{dispatch.vendorEmail}</span>
-                  </div>
-                  {dispatch.description && (
-                    <div className="dispatchDetailField dispatchDetailFieldFull">
-                      <label>Description</label>
-                      <span>{dispatch.description}</span>
-                    </div>
-                  )}
-                  <div className="dispatchDetailActions">
-                    {!dispatch.verifiedAt && dispatch.status !== "Cancelled" && (
-                      <button className="dispatchCancelBtn" onClick={async () => {
-                        if (!window.confirm("Are you sure you want to cancel this dispatch?")) return;
-                        try {
-                          await updateDispatch({ Id: dispatchId, Status: "Cancelled", NTEAmount: dispatch.nteAmount, ScheduledDate: dispatch.scheduledDate, CompletedDate: dispatch.completedDate, Description: dispatch.description });
-                          toast.success("Dispatch cancelled");
-                          loadDispatch();
-                          onUpdated();
-                        } catch { toast.error("Failed to cancel"); }
-                      }}>Cancel Dispatch</button>
-                    )}
-                    {!dispatch.verifiedAt && dispatch.status !== "Cancelled" && <button className="btn btn-primary" onClick={() => setEditing(true)}>Edit</button>}
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-
-          <div className="dispatchDetailSection">
-            {((dispatch.checklistItems && dispatch.checklistItems.length > 0) || !dispatch.verifiedAt) && (
-              <>
-                <h4>Checklist ({(dispatch.checklistItems || []).filter(i => i.isCompleted).length}/{(dispatch.checklistItems || []).length})</h4>
-                <div className="dispatchChecklist">
-                  {(dispatch.checklistItems || []).map((item) => (
-                    <div key={item.id} className={`dispatchChecklistItem ${item.isCompleted ? "completed" : ""}`}>
-                      <input
-                        type="checkbox"
-                        checked={item.isCompleted}
-                        disabled={!!dispatch.verifiedAt}
-                        onChange={async () => {
-                          const currentUser = getCurrentUser();
-                          const userName = currentUser?.fullname || "User";
-                          await updateChecklistItem(item.id, !item.isCompleted, userName);
-                          setDispatch((prev) => ({
-                            ...prev,
-                            checklistItems: prev.checklistItems.map((ci) =>
-                              ci.id === item.id ? { ...ci, isCompleted: !ci.isCompleted, completedBy: !ci.isCompleted ? userName : null, completedAt: !ci.isCompleted ? new Date().toISOString() : null } : ci
-                            ),
-                          }));
-                        }}
-                      />
-                      <span className="dispatchChecklistText">{item.itemText}</span>
-                      {item.isCompleted && (
-                        <span className="dispatchChecklistDone">
-                          {item.completedBy}{item.completedAt ? ` · ${formatDateTime(item.completedAt)}` : ""}
-                        </span>
-                      )}
-                    </div>
-                  ))}
-                </div>
-                {!dispatch.verifiedAt && (
-                  <div className="dispatchChecklistAdd">
-                    <input
-                      className="form-control"
-                      value={newChecklistItem}
-                      onChange={(e) => setNewChecklistItem(e.target.value)}
-                      onKeyDown={async (e) => {
-                        if (e.key === "Enter" && newChecklistItem.trim()) {
-                          e.preventDefault();
-                          const result = await addChecklistItem(dispatchId, newChecklistItem.trim());
-                          setDispatch((prev) => ({
-                            ...prev,
-                            checklistItems: [...(prev.checklistItems || []), { ...result, isCompleted: false }],
-                          }));
-                          setNewChecklistItem("");
-                        }
-                      }}
-                      placeholder="Add checklist item..."
-                    />
-                  </div>
-                )}
-              </>
-            )}
-            <h4>Sign-offs</h4>
-            <div className="dispatchSignoffs">
-              {["Customer", "Vendor"].map((type) => {
-                const signoff = (dispatch.signoffs || []).find((s) => s.signoffType === type);
-                return (
-                  <div key={type} className={`dispatchSignoffSlot ${signoff ? "signed" : ""}`}>
-                    <div className="dispatchSignoffLabel">{type}</div>
-                    {signoff ? (
-                      <div className="dispatchSignoffDone">
-                        {signoff.signatureMethod === "drawn" && signoff.signature && (
-                          <img src={signoff.signature} alt="Signature" className="dispatchSignoffImg" />
-                        )}
-                        {signoff.signatureMethod === "typed" && (
-                          <span className="dispatchSignoffTyped">{signoff.signature}</span>
-                        )}
-                        <span className="dispatchSignoffMeta">{signoff.name} · {signoff.signedAt ? formatDateTime(signoff.signedAt) : ""}</span>
-                      </div>
-                    ) : (
-                      <button className="btn btn-default dispatchSignoffBtn" onClick={() => setSigCapture(type)} disabled={!!dispatch.verifiedAt}>
-                        {dispatch.verifiedAt ? "Not signed" : "Collect Signature"}
-                      </button>
-                    )}
-                  </div>
-                );
-              })}
-              {(dispatch.signoffs || []).length >= 2 && <div className="dispatchSignoffBadge">All Signed ✓</div>}
-            </div>
-
-            {sigCapture && (
-              <SignatureCapture
-                title={`${sigCapture} Sign-off`}
-                onClose={() => setSigCapture(null)}
-                onSave={async (signature, method, name) => {
-                  try {
-                    const result = await addDispatchSignoff(dispatchId, sigCapture, name, signature, method);
-                    setDispatch((prev) => ({
-                      ...prev,
-                      signoffs: [...(prev.signoffs || []), { ...result, signature, signatureMethod: method }],
-                    }));
-                    setSigCapture(null);
-                    toast.success(`${sigCapture} sign-off collected`);
-                  } catch {
-                    toast.error("Failed to save sign-off");
-                  }
-                }}
-              />
-            )}
-
-            <h4>NTE Uplift Requests</h4>
-            <div className="dispatchUpliftPanel">
-              {uplifts.length === 0 && <p className="woNoComments">No uplift requests.</p>}
-              {uplifts.map((u) => {
-                const locked = dispatch.status === "Verified" || dispatch.status === "Cancelled";
-                const canDecide = u.canDecide && u.status === "Pending" && !locked;
-                return (
-                  <div key={u.id} className={`dispatchUpliftRow dispatchUpliftStatus-${String(u.status).toLowerCase()}`}>
-                    <div className="dispatchUpliftHeader">
-                      <span className={`dispatchUpliftPill dispatchUpliftPill-${String(u.status).toLowerCase()}`}>{u.status}</span>
-                      {u.requiredTier === 2 && <span className="dispatchUpliftTier">Tier 2 · Manager approval</span>}
-                      <span className="dispatchUpliftAmount">
-                        ${Number(u.currentNTE ?? 0).toFixed(2)} → ${Number(u.requestedNTE).toFixed(2)}
-                        <span className="dispatchUpliftDelta"> (+${Number(u.delta).toFixed(2)})</span>
-                      </span>
-                    </div>
-                    {u.vendorReason && <div className="dispatchUpliftReason"><strong>Reason:</strong> {u.vendorReason}</div>}
-                    <div className="dispatchUpliftMeta">
-                      Requested {u.requestedAt ? formatDateTime(u.requestedAt) : ""}
-                      {u.requestedByVendorName ? ` by ${u.requestedByVendorName}` : ""}
-                    </div>
-                    {u.decidedAt && (
-                      <div className="dispatchUpliftMeta">
-                        Decided {formatDateTime(u.decidedAt)}
-                        {u.decidedByName ? ` by ${u.decidedByName}` : ""}
-                      </div>
-                    )}
-                    {u.decisionNote && <div className="dispatchUpliftReason"><strong>Note:</strong> {u.decisionNote}</div>}
-                    {u.status === "Pending" && (
-                      <div className="dispatchUpliftActions">
-                        <button
-                          className="btn btn-success"
-                          disabled={!canDecide}
-                          title={!u.canDecide ? `Requires Tier ${u.requiredTier} role` : ""}
-                          onClick={() => handleApproveUplift(u)}
-                        >
-                          Approve
-                        </button>
-                        <button
-                          className="btn btn-danger"
-                          disabled={!canDecide}
-                          title={!u.canDecide ? `Requires Tier ${u.requiredTier} role` : ""}
-                          onClick={() => handleDenyUplift(u)}
-                        >
-                          Deny
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-
-            <h4>Vendor Communication</h4>
-            <div className="dispatchThreadContainer">
-              <div className="dispatchThreadScroll">
-                {(!dispatch.comments || dispatch.comments.length === 0) ? (
-                  <p className="woNoComments">No messages yet.</p>
-                ) : (
-                  <div className="woTimeline">
-                    {dispatch.comments.map((c) => (
-                      <div key={c.id} className={`woTimelineItem ${c.commenter ? "woTimelineInbound" : ""}`}>
-                        <div className="woTimelineHeader">
-                          <span className="woTimelineAuthor">{c.userName || c.commenter || "System"}</span>
-                          <span className="woTimelineDate">{c.createdDate ? formatDateTime(c.createdDate) : ""}</span>
-                        </div>
-                        <div className="woTimelineBody">{c.commenttext}</div>
-                      </div>
-                    ))}
-                    <div ref={bottomRef} />
-                  </div>
-                )}
-              </div>
-              <form className="dispatchThreadInput" onSubmit={handleComment}>
-                <textarea
-                  className="woCommentTextarea"
-                  value={commentText}
-                  onChange={(e) => setCommentText(e.target.value)}
-                  onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleComment(e); } }}
-                  placeholder="Message vendor..."
-                  rows={2}
-                  disabled={sendingComment}
-                />
-                <div className="dispatchThreadControls">
-                  <label className="dispatchEmailToggle">
-                    <input type="checkbox" checked={sendEmail} onChange={(e) => setSendEmail(e.target.checked)} />
-                    Send email
-                  </label>
-                  <button className="btn btn-primary woCommentSend" type="submit" disabled={sendingComment || !commentText.trim()}>
-                    {sendingComment ? "Sending..." : "Send"}
-                  </button>
-                </div>
-              </form>
-            </div>
-          </div>
-
-          {dispatch.verifiedAt ? (
-            <div className="dispatchVerifiedBanner">
-              ✓ Verified by {dispatch.verifiedBy} on {formatDateTime(dispatch.verifiedAt)}
-            </div>
-          ) : (
-            <div className="dispatchVerifyFooter">
-              {(() => {
-                const checklistTotal = (dispatch.checklistItems || []).length;
-                const checklistDone = (dispatch.checklistItems || []).filter(i => i.isCompleted).length;
-                const signoffCount = (dispatch.signoffs || []).length;
-                const missing = [];
-                if (checklistTotal > 0 && checklistDone < checklistTotal) missing.push(`${checklistTotal - checklistDone} checklist item(s)`);
-                if (signoffCount < 2) {
-                  const types = (dispatch.signoffs || []).map(s => s.signoffType);
-                  if (!types.includes("Customer")) missing.push("Customer sign-off");
-                  if (!types.includes("Vendor")) missing.push("Vendor sign-off");
-                }
-                const canVerify = missing.length === 0 && (checklistTotal > 0 || signoffCount >= 2);
-                return (
-                  <>
-                    {missing.length > 0 && <span className="dispatchVerifyMissing">Missing: {missing.join(", ")}</span>}
-                    <button
-                      className="btn btn-success"
-                      disabled={!canVerify}
-                      onClick={async () => {
-                        try {
-                          const result = await verifyDispatch(dispatchId);
-                          toast.success("Dispatch verified");
-                          loadDispatch();
-                          onUpdated();
-                        } catch (err) {
-                          toast.error(err.message || "Failed to verify");
-                        }
-                      }}
-                    >
-                      Verify &amp; Close
-                    </button>
-                  </>
-                );
-              })()}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>,
-    document.body
-  );
-}
-
-function DispatchModal({ wo, onClose, onDispatched }) {
-  const [vendors, setVendors] = useState([]);
-  const [selectedId, setSelectedId] = useState(null);
-  const [nteAmount, setNteAmount] = useState(wo.vendorNTE || "");
-  const [scheduledDate, setScheduledDate] = useState("");
-  const [description, setDescription] = useState(wo.description || "");
-  const [vendorSearch, setVendorSearch] = useState("");
-  const [sending, setSending] = useState(false);
-  const [taskTemplates, setTaskTemplates] = useState([]);
-  const [selectedTemplateId, setSelectedTemplateId] = useState("");
-  const [customItems, setCustomItems] = useState([]);
-  const [newCustomItem, setNewCustomItem] = useState("");
-  const [loaded, setLoaded] = useState(false);
-  const [selectedWOs, setSelectedWOs] = useState([{ id: wo.id, number: wo.internalWONumber, title: wo.title }]);
-  const [siteWOs, setSiteWOs] = useState([]);
-  const [woSearch, setWoSearch] = useState("");
-
-  useEffect(() => {
-    fetchVendorsDropdown(wo.trade, wo.locationZip).then((data) => {
-      setVendors(data);
-      setLoaded(true);
-    }).catch(() => setLoaded(true));
-    fetchTaskTemplates().then(setTaskTemplates).catch(() => {});
-    if (wo.locationId) {
-      const { get: apiGet } = require("../../../apiUtil");
-      const { API_URL } = require("../../../constants");
-      apiGet(`${API_URL}/WorkOrder/GetWorkOrderList?search=&page=1&pageSize=500&sortBy=number&sortDir=asc&locationId=${wo.locationId}`).then((res) => {
-        setSiteWOs((res?.data || []).filter(w => w.id !== wo.id));
-      }).catch(() => {});
-    }
-  }, [wo.trade]);
-
-  const selectVendor = (id) => {
-    setSelectedId(prev => prev === id ? null : id);
-  };
-
-  const filteredVendors = vendors.filter((v) =>
-    (v.companyName || "").toLowerCase().includes(vendorSearch.toLowerCase()) ||
-    (v.tradeSpecialties || "").toLowerCase().includes(vendorSearch.toLowerCase())
-  );
-
-  const handleSubmit = async () => {
-    if (!selectedId) { toast.error("Select a vendor"); return; }
-    setSending(true);
-    try {
-      await dispatchToVendor({
-        WorkOrderIds: selectedWOs.map(w => w.id),
-        VendorIds: [selectedId],
-        NTEAmount: nteAmount ? parseFloat(nteAmount) : null,
-        ScheduledDate: scheduledDate || null,
-        Description: description,
-        TaskListTemplateId: selectedTemplateId ? parseInt(selectedTemplateId) : null,
-        CustomChecklistItems: customItems.length > 0 ? customItems : null,
-      });
-      toast.success("Dispatched successfully");
-      onDispatched();
-      onClose();
-    } catch {
-      toast.error("Failed to dispatch");
-    } finally {
-      setSending(false);
-    }
-  };
-
-  return ReactDOM.createPortal(
-    <div className="woDispatchOverlay" onClick={onClose}>
-      <div className="woDispatchModal" onClick={(e) => e.stopPropagation()}>
-        <div className="woDispatchHeader">
-          <h3>Dispatch {selectedWOs.length > 1 ? `${selectedWOs.length} Work Orders` : `Work Order ${wo.internalWONumber}`}</h3>
-          <button className="woDispatchClose" onClick={onClose}>&times;</button>
-        </div>
-        <div className="woDispatchBody">
-          <div className="woDispatchField">
-            <label>Work Orders ({selectedWOs.length})</label>
-            <div className="dispatchWOChips">
-              {selectedWOs.map((w) => (
-                <span key={w.id} className="dispatchWOChip">
-                  {w.number} — {w.title}
-                  {w.id !== wo.id && <button onClick={() => setSelectedWOs(prev => prev.filter(p => p.id !== w.id))}>&times;</button>}
-                </span>
-              ))}
-            </div>
-            {siteWOs.length > 0 && (
-              <>
-                <input
-                  className="woDispatchSearch"
-                  value={woSearch}
-                  onChange={(e) => setWoSearch(e.target.value)}
-                  placeholder="Search to filter..."
-                  style={{ marginTop: 8 }}
-                />
-                <div className="dispatchWODropdown">
-                  {siteWOs
-                    .filter(w => !selectedWOs.find(s => s.id === w.id))
-                    .filter(w => !woSearch || (w.number || "").includes(woSearch) || (w.title || "").toLowerCase().includes(woSearch.toLowerCase()))
-                    .slice(0, 10)
-                    .map(w => (
-                      <div key={w.id} className="dispatchWOOption" onClick={() => {
-                        setSelectedWOs(prev => [...prev, { id: w.id, number: w.number, title: w.title }]);
-                        setWoSearch("");
-                      }}>
-                        <strong>{w.number}</strong> — {w.title}
-                      </div>
-                    ))
-                  }
-                  {siteWOs.filter(w => !selectedWOs.find(s => s.id === w.id)).length === 0 && (
-                    <div className="dispatchWOOption" style={{ color: "#999", cursor: "default" }}>All work orders at this site are selected</div>
-                  )}
-                </div>
-              </>
-            )}
-          </div>
-          <div className="woDispatchField">
-            <label>Select Vendors</label>
-            <input
-              className="woDispatchSearch"
-              type="text"
-              value={vendorSearch}
-              onChange={(e) => setVendorSearch(e.target.value)}
-              placeholder="Search vendors..."
-            />
-            {!loaded ? <div className="woDispatchLoading">Loading vendors...</div> : filteredVendors.length === 0 ? <div className="woDispatchLoading">No vendors found</div> : (
-              <div className="woDispatchVendorList">
-                {filteredVendors.map((v) => (
-                  <div key={v.id} className={`woDispatchVendorItem ${selectedId === v.id ? "selected" : ""}`} onClick={() => selectVendor(v.id)}>
-                    <input type="radio" name="vendorSelect" checked={selectedId === v.id} readOnly />
-                    <div className="woDispatchVendorInfo">
-                      <span className="woDispatchVendorName">{v.companyName}</span>
-                      {v.tradeSpecialties && <span className="woDispatchVendorTrades">{v.tradeSpecialties}</span>}
-                      {v.address && <span className="woDispatchVendorAddr">{v.address}</span>}
-                    </div>
-                    {v.distanceMiles != null && (
-                      <div className="woDispatchVendorDistBadge">
-                        <span className="woDispatchDistNum">{v.distanceMiles}</span>
-                        <span className="woDispatchDistLabel">miles</span>
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-            {selectedId && (
-              <div className="woDispatchSelected">
-                <span className="woDispatchSelectedChip">
-                  {vendors.find((x) => x.id === selectedId)?.companyName}
-                  <button onClick={() => setSelectedId(null)}>&times;</button>
-                </span>
-              </div>
-            )}
-          </div>
-          <div className="woDispatchFieldRow">
-            <div className="woDispatchField woDispatchFieldHalf">
-              <label>NTE Amount</label>
-              <input type="number" className="form-control" value={nteAmount} onChange={(e) => setNteAmount(e.target.value)} placeholder="0.00" step="0.01" min="0" />
-            </div>
-            <div className="woDispatchField woDispatchFieldHalf">
-              <label>Vendor Scheduled Date</label>
-              <input type="date" className="form-control" value={scheduledDate} onChange={(e) => setScheduledDate(e.target.value)} />
-            </div>
-          </div>
-          <div className="woDispatchField">
-            <label>Task List Template</label>
-            <select className="form-control" value={selectedTemplateId} onChange={(e) => setSelectedTemplateId(e.target.value)}>
-              <option value="">No checklist template</option>
-              {taskTemplates.map((t) => (
-                <option key={t.id} value={t.id}>{t.name} ({t.items?.length || 0} items)</option>
-              ))}
-            </select>
-            {customItems.length > 0 && (
-              <div className="dispatchCustomItems">
-                {customItems.map((item, idx) => (
-                  <div key={idx} className="dispatchCustomItem">
-                    <span>{item}</span>
-                    <button onClick={() => setCustomItems(prev => prev.filter((_, i) => i !== idx))}>&times;</button>
-                  </div>
-                ))}
-              </div>
-            )}
-            <div className="dispatchChecklistAdd" style={{ marginTop: 6 }}>
-              <input
-                className="form-control"
-                value={newCustomItem}
-                onChange={(e) => setNewCustomItem(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" && newCustomItem.trim()) {
-                    e.preventDefault();
-                    setCustomItems(prev => [...prev, newCustomItem.trim()]);
-                    setNewCustomItem("");
-                  }
-                }}
-                placeholder="Add custom checklist item..."
-              />
-            </div>
-          </div>
-          <div className="woDispatchField">
-            <label>Description</label>
-            <textarea className="form-control" value={description} onChange={(e) => setDescription(e.target.value)} rows="4" style={{ resize: "none" }} />
-          </div>
-        </div>
-        <div className="woDispatchFooter">
-          <button className="btn btn-default" onClick={onClose} disabled={sending}>Cancel</button>
-          <button className="btn btn-primary" onClick={handleSubmit} disabled={sending || !selectedId}>
-            {sending ? "Dispatching..." : "Dispatch"}
-          </button>
-        </div>
-      </div>
-    </div>,
-    document.body
-  );
-}
-
-function CommentInput({ workOrderId, commentType, onCommentAdded }) {
-  const [text, setText] = useState("");
-  const [sending, setSending] = useState(false);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!text.trim()) return;
-    setSending(true);
-    try {
-      const newComment = await addComment(workOrderId, text.trim(), commentType);
-      setText("");
-      if (onCommentAdded) onCommentAdded(newComment);
-    } catch (err) {
-      toast.error("Failed to add comment");
-    } finally {
-      setSending(false);
-    }
-  };
-
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit(e);
-    }
-  };
-
-  return (
-    <form className="woCommentInput" onSubmit={handleSubmit}>
-      <textarea
-        className="woCommentTextarea"
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder="Type a comment... (Enter to send, Shift+Enter for new line)"
-        rows={2}
-        disabled={sending}
-      />
-      <button className="btn btn-primary woCommentSend" type="submit" disabled={sending || !text.trim()}>
-        {sending ? "Sending..." : "Send"}
-      </button>
-    </form>
-  );
-}
-
-const STATUS_OPTIONS = ["Open", "In Progress", "On Hold", "Done", "Cancelled"];
-
-function StatusDropdown({ status, onStatusChange }) {
-  const [open, setOpen] = useState(false);
-  const btnRef = useRef(null);
-  const menuRef = useRef(null);
-  const [menuPos, setMenuPos] = useState({ top: 0, left: 0 });
-  const statusClass = (status || "").toLowerCase().replace(/\s+/g, "-");
-
-  useEffect(() => {
-    const handleClick = (e) => {
-      if (btnRef.current?.contains(e.target)) return;
-      if (menuRef.current?.contains(e.target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, []);
-
-  const handleOpen = () => {
-    if (btnRef.current) {
-      const rect = btnRef.current.getBoundingClientRect();
-      setMenuPos({ top: rect.bottom + 4, left: rect.left });
-    }
-    setOpen(!open);
-  };
-
-  return (
-    <>
-      <button
-        ref={btnRef}
-        className={`woStatusBadge ${statusClass} woStatusClickable`}
-        onClick={handleOpen}
-      >
-        {status} <span className="woStatusCaret">&#9662;</span>
-      </button>
-      {open && ReactDOM.createPortal(
-        <div
-          ref={menuRef}
-          className="woStatusMenu"
-          style={{ top: menuPos.top, left: menuPos.left }}
-        >
-          {STATUS_OPTIONS.map((s) => (
-            <button
-              key={s}
-              className={`woStatusOption ${s === status ? "active" : ""}`}
-              onClick={() => { onStatusChange(s); setOpen(false); }}
-            >
-              <span className={`woStatusDot ${s.toLowerCase().replace(/\s+/g, "-")}`} />
-              {s}
-            </button>
-          ))}
-        </div>,
-        document.body
-      )}
-    </>
-  );
-}
-
-export default function WorkOrderViewPage() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const [wo, setWo] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [activeTab, setActiveTab] = useState("customer");
-  const [statusUpdating, setStatusUpdating] = useState(false);
-  const [dispatchOpen, setDispatchOpen] = useState(false);
-  const [dispatchDetailId, setDispatchDetailId] = useState(null);
-
-  const handleStatusChange = async (newStatus) => {
-    if (newStatus === wo?.status) return;
-    setStatusUpdating(true);
-    try {
-      await changeWorkOrderStatus(id, newStatus);
-      const oldStatus = wo.status;
-      setWo((prev) => ({
-        ...prev,
-        status: newStatus,
-        auditLog: [
-          {
-            id: Date.now(),
-            fieldName: "Status",
-            oldValue: oldStatus,
-            newValue: newStatus,
-            action: "status_change",
-            createdAt: new Date().toISOString(),
-            userName: "You",
-          },
-          ...(prev.auditLog || []),
-        ],
-      }));
-      toast.success(`Status changed to ${newStatus}`);
-    } catch (err) {
-      toast.error("Failed to update status");
-    } finally {
-      setStatusUpdating(false);
-    }
-  };
-
-  useEffect(() => {
-    const load = async () => {
-      try {
-        const data = await getWorkOrderById(id);
-        setWo(data);
-      } catch (err) {
-        toast.error("Failed to load work order");
-      } finally {
-        setLoading(false);
-      }
-    };
-    load();
-  }, [id]);
-
-  const handleCommentAdded = (newComment) => {
-    setWo((prev) => ({
-      ...prev,
-      comments: [
-        ...prev.comments,
-        {
-          id: newComment.id,
-          createdDate: newComment.createdDate,
-          commenttext: newComment.commenttext,
-          commentType: newComment.commentType,
-          userName: newComment.userName,
-          commenter: null,
-          recordType: null,
-        },
-      ],
-    }));
-  };
-
-  if (loading) return <div className="woViewPage"><div className="loading">Loading...</div></div>;
-  if (!wo) return <div className="woViewPage"><div className="loading">Work order not found.</div></div>;
-
-  const allComments = wo.comments || [];
-  const customerComments = allComments.filter((c) => c.commentType === "customer");
-  const internalComments = allComments.filter((c) => c.commentType === "internal");
-  const auditLog = wo.auditLog || [];
-
-  const tabs = [
-    { key: "customer", label: "Customer", count: customerComments.length },
-    { key: "internal", label: "Internal", count: internalComments.length },
-    { key: "audit", label: "Audit Log", count: auditLog.length },
-  ];
-
-  const showInput = activeTab === "internal";
-
-  return (
-    <div className="woViewPage">
-      <div className="panel panel-default panel-connected">
-        <div className="panel-body">
-          <ol className="breadcrumb breadcrumb-alt">
-            <li>
-              <a href="#" onClick={(e) => { e.preventDefault(); navigate("/workorders"); }}>
-                Work Orders
-              </a>
-            </li>
-            <li className="active">{wo.internalWONumber}</li>
-          </ol>
-
-          <div className="woViewHeader">
-            <div className="woViewTitle">
-              <h2>{wo.title}</h2>
-              <StatusDropdown status={wo.status} onStatusChange={handleStatusChange} />
-            </div>
-            <div className="woViewActions">
-              <button className="btn btn-success" onClick={() => setDispatchOpen(true)}>
-                Dispatch
-              </button>
-              <button className="btn btn-primary" onClick={() => navigate(`/workorders/edit/${id}`)}>
-                Edit
-              </button>
-              <button className="btn btn-default" onClick={() => navigate("/workorders")}>
-                Back to List
-              </button>
-            </div>
-          </div>
-
-          <div className="woViewGrid">
-            <div className="woViewSection">
-              <h4>Details</h4>
-              <div className="woFieldGrid">
-                <div className="woField">
-                  <span className="woFieldLabel">Internal WO</span>
-                  <span className="woFieldValue">{wo.internalWONumber}</span>
-                </div>
-                <div className="woField">
-                  <span className="woFieldLabel">Customer WO</span>
-                  <span className="woFieldValue">{wo.workOrderNumber || "—"}</span>
-                </div>
-                <div className="woField">
-                  <span className="woFieldLabel">Priority</span>
-                  <span className="woFieldValue">{wo.priority || "—"}</span>
-                </div>
-                <div className="woField">
-                  <span className="woFieldLabel">Location</span>
-                  <span className="woFieldValue">{wo.location || "—"}</span>
-                </div>
-                <div className="woField">
-                  <span className="woFieldLabel">Assigned To</span>
-                  <span className="woFieldValue">
-                    <AssignDropdown
-                      value={wo.assignedTo}
-                      onAssign={async (userId, userName) => {
-                        try {
-                          await changeWorkOrderAssignment(wo.id, userId);
-                          setWo((prev) => ({ ...prev, assignedTo: userName }));
-                          toast.success(`Assigned to ${userName || "Unassigned"}`);
-                        } catch { toast.error("Failed to update assignment"); }
-                      }}
-                    />
-                  </span>
-                </div>
-                <div className="woField">
-                  <span className="woFieldLabel">Source</span>
-                  <span className="woFieldValue">{wo.source || "—"}</span>
-                </div>
-                <div className="woField">
-                  <span className="woFieldLabel">TT</span>
-                  <span className="woFieldValue">{wo.tt || "—"}</span>
-                </div>
-              </div>
-            </div>
-
-            <CollapsibleSection title="Classification">
-              <div className="woFieldGrid">
-                <div className="woField">
-                  <span className="woFieldLabel">Problem</span>
-                  <span className="woFieldValue">{wo.problem || "—"}</span>
-                </div>
-                <div className="woField">
-                  <span className="woFieldLabel">Trade</span>
-                  <span className="woFieldValue">{wo.trade || "—"}</span>
-                </div>
-                <div className="woField">
-                  <span className="woFieldLabel">Sub-Trade</span>
-                  <span className="woFieldValue">{wo.subTrade || "—"}</span>
-                </div>
-              </div>
-            </CollapsibleSection>
-
-            <CollapsibleSection title="Schedule">
-              <div className="woFieldGrid">
-                <div className="woField">
-                  <span className="woFieldLabel">Created</span>
-                  <span className="woFieldValue">
-                    {wo.createdDateFull ? formatDateTime(wo.createdDateFull) : "—"}
-                  </span>
-                </div>
-                <div className="woField">
-                  <span className="woFieldLabel">Due Date</span>
-                  <span className="woFieldValue">{wo.dueDate || "—"}</span>
-                </div>
-                <div className="woField">
-                  <span className="woFieldLabel">Scheduled</span>
-                  <span className="woFieldValue">{wo.scheduledDate || "—"}</span>
-                </div>
-                <div className="woField">
-                  <span className="woFieldLabel">Completed</span>
-                  <span className="woFieldValue">{wo.completedDate || "—"}</span>
-                </div>
-              </div>
-            </CollapsibleSection>
-
-            <CollapsibleSection title="Financial">
-              <div className="woFieldGrid">
-                <div className="woField">
-                  <span className="woFieldLabel">Vendor NTE</span>
-                  <span className="woFieldValue">{wo.vendorNTE ? `$${parseFloat(wo.vendorNTE).toFixed(2)}` : "—"}</span>
-                </div>
-                <div className="woField">
-                  <span className="woFieldLabel">Customer PO</span>
-                  <span className="woFieldValue">{wo.po || "—"}</span>
-                </div>
-                <div className="woField">
-                  <span className="woFieldLabel">Customer NTE</span>
-                  <span className="woFieldValue woFieldPlaceholder">Not connected</span>
-                </div>
-              </div>
-            </CollapsibleSection>
-
-            <CollapsibleSection title={`Dispatches (${(wo.dispatches || []).length})`}>
-              {wo.dispatches?.length ? (
-                <table className="woDispatchTable">
-                  <thead>
-                    <tr><th>Dispatch #</th><th>Vendor</th><th>NTE</th><th>Status</th><th>Date</th><th>Wait</th></tr>
-                  </thead>
-                  <tbody>
-                    {wo.dispatches.map(d => (
-                      <tr key={d.id} className="dispatchClickRow" onClick={() => setDispatchDetailId(d.id)}>
-                        <td>{d.dispatchNumber || d.poNumber}</td>
-                        <td>{d.vendorName}</td>
-                        <td>{d.nteAmount != null ? `$${parseFloat(d.nteAmount).toFixed(2)}` : "—"}</td>
-                        <td><span className={`woDispatchStatus ${(d.status || "").toLowerCase()}`}>{d.status}</span></td>
-                        <td>{d.dispatchedAt ? formatDateTime(d.dispatchedAt) : "—"}</td>
-                        <td>{d.status === "Sent" ? <span className={`dispatchWaitDot dispatchWait-${waitTimeColor(d.dispatchedAt)}`}>{timeSince(d.dispatchedAt)}</span> : "—"}</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              ) : (
-                <p className="woNoComments">No dispatches yet.</p>
-              )}
-            </CollapsibleSection>
-
-            <CollapsibleSection title="Description">
-              <p className="woDescription">{wo.description || "No description provided."}</p>
-            </CollapsibleSection>
-
-            <div className="woViewSection">
-              <h4>Activity</h4>
-              <div className="woCommentTabs">
-                {tabs.map((tab) => (
-                  <button
-                    key={tab.key}
-                    className={`woCommentTab ${activeTab === tab.key ? "active" : ""}`}
-                    onClick={() => setActiveTab(tab.key)}
-                  >
-                    {tab.label} ({tab.count})
-                  </button>
-                ))}
-              </div>
-              <div className="woTabContainer">
-                {activeTab === "customer" && <CommentTimeline comments={customerComments} />}
-                {activeTab === "internal" && <CommentTimeline comments={internalComments} />}
-                {activeTab === "audit" && <AuditTimeline entries={auditLog} />}
-                {showInput && (
-                  <CommentInput
-                    workOrderId={parseInt(id)}
-                    commentType={activeTab}
-                    onCommentAdded={handleCommentAdded}
-                  />
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {dispatchOpen && (
-        <DispatchModal
-          wo={wo}
-          onClose={() => setDispatchOpen(false)}
-          onDispatched={async () => {
-            const data = await getWorkOrderById(id);
-            setWo(data);
-          }}
-        />
-      )}
-
-      {dispatchDetailId && (
-        <DispatchDetailModal
-          dispatchId={dispatchDetailId}
-          onClose={() => setDispatchDetailId(null)}
-          onUpdated={async () => {
-            const data = await getWorkOrderById(id);
-            setWo(data);
-          }}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/src/providers/AppProviders.tsx b/src/providers/AppProviders.tsx
new file mode 100644
index 00000000..af480bcb
--- /dev/null
+++ b/src/providers/AppProviders.tsx
@@ -0,0 +1,20 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { queryClient } from "@/lib/query/query-client";
+import { muiTheme } from "@/lib/theme/mui-theme";
+
+export function AppProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={muiTheme}>
+        <CssBaseline />
+        {children}
+        <ToastContainer />
+        {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+}
diff --git a/src/providers/auth-context.ts b/src/providers/auth-context.ts
new file mode 100644
index 00000000..f8907727
--- /dev/null
+++ b/src/providers/auth-context.ts
@@ -0,0 +1,30 @@
+import { createContext, useContext } from "react";
+import type {
+  AuthUser,
+  ChangePasswordPayload,
+  LoginCredentials,
+} from "@/domain/auth/types/auth-user";
+
+export interface AuthContextValue {
+  user: AuthUser | null | undefined;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: Error | null;
+  login: (credentials: LoginCredentials) => void;
+  logout: () => void;
+  changePassword: (data: ChangePasswordPayload) => void;
+  isLoggingIn: boolean;
+  isLoggingOut: boolean;
+  isChangingPassword: boolean;
+  loginError: Error | null;
+}
+
+export const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function useAuthContext(): AuthContextValue {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuthContext must be used within AuthProvider");
+  }
+  return context;
+}
diff --git a/src/providers/auth-provider.tsx b/src/providers/auth-provider.tsx
new file mode 100644
index 00000000..3b8b086a
--- /dev/null
+++ b/src/providers/auth-provider.tsx
@@ -0,0 +1,54 @@
+import { useEffect, useMemo, type ReactNode } from "react";
+import * as Sentry from "@sentry/react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useChangePassword } from "@/domain/auth/use-cases/use-change-password";
+import { useLogin, useLogout, useSession } from "@/domain/auth/use-cases/use-login";
+import { startQueryBroadcast } from "@/lib/query/setup-query-broadcast";
+import { AuthContext, type AuthContextValue } from "@/providers/auth-context";
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const queryClient = useQueryClient();
+  const sessionQuery = useSession();
+  const loginMutation = useLogin();
+  const logoutMutation = useLogout();
+  const changePasswordMutation = useChangePassword();
+
+  const userId = sessionQuery.data?.id;
+
+  useEffect(() => {
+    Sentry.setUser(userId == null ? null : { id: String(userId) });
+  }, [userId]);
+
+  useEffect(() => {
+    if (userId == null) {
+      return;
+    }
+    startQueryBroadcast(queryClient, userId);
+  }, [queryClient, userId]);
+
+  const value = useMemo<AuthContextValue>(
+    () => ({
+      user: sessionQuery.data,
+      isAuthenticated: Boolean(sessionQuery.data),
+      isLoading: sessionQuery.isLoading,
+      error: sessionQuery.error,
+      login: (credentials) => loginMutation.mutate(credentials),
+      logout: () => logoutMutation.mutate(),
+      changePassword: (data) => changePasswordMutation.mutate(data),
+      isLoggingIn: loginMutation.isPending,
+      isLoggingOut: logoutMutation.isPending,
+      isChangingPassword: changePasswordMutation.isPending,
+      loginError: loginMutation.error,
+    }),
+    [
+      sessionQuery.data,
+      sessionQuery.isLoading,
+      sessionQuery.error,
+      loginMutation,
+      logoutMutation,
+      changePasswordMutation,
+    ],
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
deleted file mode 100644
index 5253d3ad..00000000
--- a/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
diff --git a/src/routing/app-shell.tsx b/src/routing/app-shell.tsx
new file mode 100644
index 00000000..4aab96e0
--- /dev/null
+++ b/src/routing/app-shell.tsx
@@ -0,0 +1,52 @@
+import { ComponentType, Suspense } from "react";
+import { Outlet, useLocation } from "react-router";
+import type { RouteObject } from "react-router";
+
+import type { RouteModule } from "@/routing/route-module";
+
+export function createAppShellRoute(
+  appLayout: RouteModule | undefined,
+  modalRoutes: Record<string, ComponentType>,
+): Pick<RouteObject, "Component" | "ErrorBoundary" | "loader"> {
+  const AppLayout = appLayout?.default ?? Outlet;
+
+  function Modals() {
+    const modalPath = useLocation().state?.modal as string | undefined;
+    const Modal = modalPath ? modalRoutes[modalPath] : undefined;
+
+    if (!Modal) {
+      return null;
+    }
+
+    return <Modal />;
+  }
+
+  function Layout() {
+    return (
+      <>
+        <AppLayout />
+        <Modals />
+      </>
+    );
+  }
+
+  function AppShell() {
+    const Pending = appLayout?.Pending;
+
+    if (Pending) {
+      return (
+        <Suspense fallback={<Pending />}>
+          <Layout />
+        </Suspense>
+      );
+    }
+
+    return <Layout />;
+  }
+
+  return {
+    Component: appLayout?.default ? AppShell : Layout,
+    ErrorBoundary: appLayout?.Catch,
+    loader: appLayout?.Loader,
+  };
+}
diff --git a/src/routing/build-route-tree.ts b/src/routing/build-route-tree.ts
new file mode 100644
index 00000000..25e1b492
--- /dev/null
+++ b/src/routing/build-route-tree.ts
@@ -0,0 +1,27 @@
+import { Fragment, type ComponentType } from "react";
+import type { RouteObject } from "react-router";
+import {
+  generateModalRoutes,
+  generatePreservedRoutes,
+  generateRegularRoutes,
+} from "@generouted/react-router/core";
+
+import { MODALS, PRESERVED, ROUTES } from "@/routing/glob-imports";
+import { remapAppToPages } from "@/routing/remap-routes";
+import { createLazyRoute, type RouteModule } from "@/routing/route-module";
+import { createAppShellRoute } from "@/routing/app-shell";
+
+const preservedRoutes = generatePreservedRoutes(remapAppToPages(PRESERVED));
+const modalRoutes = generateModalRoutes(remapAppToPages(MODALS)) as Record<string, ComponentType>;
+
+const regularRoutes = generateRegularRoutes(remapAppToPages(ROUTES), (moduleLoader, key) =>
+  createLazyRoute(moduleLoader as () => Promise<RouteModule>, key),
+);
+
+const appLayout = preservedRoutes?.["_app"] as RouteModule | undefined;
+const notFound = preservedRoutes?.["404"] as RouteModule | undefined;
+
+const appShell = createAppShellRoute(appLayout, modalRoutes);
+const fallback: RouteObject = { path: "*", Component: notFound?.default ?? Fragment };
+
+export const routes: RouteObject[] = [{ ...appShell, children: [...regularRoutes, fallback] }];
diff --git a/src/routing/constants.ts b/src/routing/constants.ts
new file mode 100644
index 00000000..1c9022bc
--- /dev/null
+++ b/src/routing/constants.ts
@@ -0,0 +1,8 @@
+/** Vite glob root for file-based routes (must match import.meta.glob literals in glob-imports.ts). */
+export const ROUTES_ROOT = "/src/app";
+
+/**
+ * Generouted core derives URL paths assuming this prefix.
+ * See remap-routes.ts — we scan `/src/app/` but remap keys to `/src/pages/` at runtime.
+ */
+export const GENEROUTED_ROOT = "/src/pages";
diff --git a/src/routing/glob-imports.ts b/src/routing/glob-imports.ts
new file mode 100644
index 00000000..e2f9c4a1
--- /dev/null
+++ b/src/routing/glob-imports.ts
@@ -0,0 +1,13 @@
+import type { RouteModule } from "@/routing/route-module";
+
+/** Paths must stay literal — Vite analyzes import.meta.glob at build time. */
+const PRESERVED = import.meta.glob<RouteModule>("/src/app/{_app,404}.{jsx,tsx}", { eager: true });
+const MODALS = import.meta.glob<RouteModule>("/src/app/**/[+]*.{jsx,tsx}", { eager: true });
+const ROUTES = import.meta.glob<RouteModule>([
+  "/src/app/**/[A-Za-z0-9[-]*.{jsx,tsx}",
+  "/src/app/**/_layout.{jsx,tsx}",
+  "!/src/app/404.{jsx,tsx}",
+  "!/src/app/**/_*/**",
+]);
+
+export { MODALS, PRESERVED, ROUTES };
diff --git a/src/routing/index.ts b/src/routing/index.ts
new file mode 100644
index 00000000..f3cd9f4d
--- /dev/null
+++ b/src/routing/index.ts
@@ -0,0 +1,2 @@
+export { Routes } from "@/routing/router";
+export { routes } from "@/routing/build-route-tree";
diff --git a/src/routing/remap-routes.ts b/src/routing/remap-routes.ts
new file mode 100644
index 00000000..11d9c032
--- /dev/null
+++ b/src/routing/remap-routes.ts
@@ -0,0 +1,17 @@
+import { GENEROUTED_ROOT, ROUTES_ROOT } from "@/routing/constants";
+
+/**
+ * Generouted's `generateRegularRoutes` / `generatePreservedRoutes` strip `/src/pages/`
+ * when building URL segments. Our views live under `/src/app/` (architecture convention),
+ * so we remap glob keys before passing them to the core.
+ *
+ * Ref: https://github.com/oedotme/generouted/tree/main/examples/react-router-custom-path
+ */
+export function remapAppToPages<T>(files: Record<string, T>): Record<string, T> {
+  return Object.fromEntries(
+    Object.entries(files).map(([key, value]) => [
+      key.replace(`${ROUTES_ROOT}/`, `${GENEROUTED_ROOT}/`),
+      value,
+    ]),
+  );
+}
diff --git a/src/routing/route-module.tsx b/src/routing/route-module.tsx
new file mode 100644
index 00000000..479c8515
--- /dev/null
+++ b/src/routing/route-module.tsx
@@ -0,0 +1,45 @@
+import { ComponentType, Fragment, Suspense } from "react";
+import type { RouteObject } from "react-router";
+
+export type RouteModule = {
+  default?: ComponentType;
+  Pending?: ComponentType;
+  Catch?: ComponentType;
+  Loader?: RouteObject["loader"];
+  Action?: RouteObject["action"];
+};
+
+type ModuleLoader = () => Promise<RouteModule>;
+
+export function createLazyRoute(
+  moduleLoader: ModuleLoader,
+  key: string,
+): Pick<RouteObject, "index" | "lazy"> {
+  const index =
+    /index\.(jsx|tsx)$/.test(key) && !key.includes("pages/index") ? { index: true as const } : {};
+
+  return {
+    ...index,
+    lazy: async () => {
+      const loaded = await moduleLoader();
+      const PageComponent = loaded?.default ?? Fragment;
+      const Pending = loaded?.Pending;
+
+      const Page = () =>
+        Pending ? (
+          <Suspense fallback={<Pending />}>
+            <PageComponent />
+          </Suspense>
+        ) : (
+          <PageComponent />
+        );
+
+      return {
+        Component: Page,
+        ErrorBoundary: loaded?.Catch,
+        loader: loaded?.Loader,
+        action: loaded?.Action,
+      };
+    },
+  };
+}
diff --git a/src/routing/router.tsx b/src/routing/router.tsx
new file mode 100644
index 00000000..5fd7bf58
--- /dev/null
+++ b/src/routing/router.tsx
@@ -0,0 +1,12 @@
+import * as Sentry from "@sentry/react";
+import { createBrowserRouter as createBrowserRouterBase } from "react-router";
+import { RouterProvider } from "react-router/dom";
+
+import { routes } from "@/routing/build-route-tree";
+
+const createBrowserRouter = Sentry.wrapCreateBrowserRouter(createBrowserRouterBase);
+const router = createBrowserRouter(routes);
+
+export function Routes() {
+  return <RouterProvider router={router} />;
+}
diff --git a/src/services/api.js b/src/services/api.js
deleted file mode 100644
index 4e4f3f58..00000000
--- a/src/services/api.js
+++ /dev/null
@@ -1,168 +0,0 @@
-// API Base Configuration
-import { getAccessToken } from "../tokenUtility";
-
-const API_BASE_URL = process.env.REACT_APP_API_URL || '';
-const API_PREFIX = '/api';
-
-// HTTP Methods Helper
-class ApiService {
-  constructor(baseURL = API_BASE_URL, prefix = API_PREFIX) {
-    this.baseURL = baseURL;
-    this.prefix = prefix;
-  }
-
-  async request(endpoint, options = {}) {
-    const url = `${this.baseURL}${this.prefix}${endpoint}`;
-    const config = {
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': getAccessToken(),
-        ...options.headers,
-      },
-      ...options,
-    };
-
-    try {
-      const response = await fetch(url, config);
-      
-      if (!response.ok) {
-        const error = await response.json().catch(() => ({}));
-        throw new Error(error.message || `HTTP Error: ${response.status}`);
-      }
-
-      // Handle 204 No Content
-      if (response.status === 204) {
-        return null;
-      }
-
-      return await response.json();
-    } catch (error) {
-      console.error('API Request Error:', error);
-      throw error;
-    }
-  }
-
-  async get(endpoint, params = {}) {
-    const queryString = new URLSearchParams(params).toString();
-    const url = queryString ? `${endpoint}?${queryString}` : endpoint;
-    return this.request(url, { method: 'GET' });
-  }
-
-  async post(endpoint, data) {
-    return this.request(endpoint, {
-      method: 'POST',
-      body: JSON.stringify(data),
-    });
-  }
-
-  async put(endpoint, data) {
-    return this.request(endpoint, {
-      method: 'PUT',
-      body: JSON.stringify(data),
-    });
-  }
-
-  async delete(endpoint) {
-    return this.request(endpoint, { method: 'DELETE' });
-  }
-}
-
-// Create singleton instance
-const api = new ApiService();
-
-// Employee API
-export const employeeApi = {
-  getAll: (params) => api.get('/employees', params),
-  getById: (id) => api.get(`/employees/${id}`),
-  create: (data) => api.post('/employees', data),
-  update: (id, data) => api.put(`/employees/${id}`, data),
-  delete: (id) => api.delete(`/employees/${id}`),
-};
-
-// Contact API
-export const contactApi = {
-  getAll: (params) => api.get('/contacts', params),
-  getById: (id) => api.get(`/contacts/${id}`),
-  create: (data) => api.post('/contacts', data),
-  update: (id, data) => api.put(`/contacts/${id}`, data),
-  delete: (id) => api.delete(`/contacts/${id}`),
-};
-
-// Account API
-export const accountApi = {
-  getAll: (params) => api.get('/accounts', params),
-  getById: (id) => api.get(`/accounts/${id}`),
-  create: (data) => api.post('/accounts', data),
-  update: (id, data) => api.put(`/accounts/${id}`, data),
-  delete: (id) => api.delete(`/accounts/${id}`),
-};
-
-// Location API
-export const locationApi = {
-  getAll: (params) => api.get('/locations', params),
-  getById: (id) => api.get(`/locations/${id}`),
-  create: (data) => api.post('/locations', data),
-  update: (id, data) => api.put(`/locations/${id}`, data),
-  delete: (id) => api.delete(`/locations/${id}`),
-};
-
-// Work Order API
-export const workOrderApi = {
-  getAll: (params) => api.get('/workorders', params),
-  getById: (id) => api.get(`/workorders/${id}`),
-  create: (data) => api.post('/workorders', data),
-  update: (id, data) => api.put(`/workorders/${id}`, data),
-  delete: (id) => api.delete(`/workorders/${id}`),
-};
-
-// PM Schedule API
-export const pmScheduleApi = {
-  getAll: (params) => api.get('/pmschedules', params),
-  getById: (id) => api.get(`/pmschedules/${id}`),
-  create: (data) => api.post('/pmschedules', data),
-  update: (id, data) => api.put(`/pmschedules/${id}`, data),
-  delete: (id) => api.delete(`/pmschedules/${id}`),
-};
-
-// Follow-up API
-export const followupApi = {
-  getAll: (params) => api.get('/followups', params),
-  getById: (id) => api.get(`/followups/${id}`),
-  create: (data) => api.post('/followups', data),
-  update: (id, data) => api.put(`/followups/${id}`, data),
-  delete: (id) => api.delete(`/followups/${id}`),
-};
-
-export const vendorApi = {
-  getAll: (params) => api.get('/vendors', params),
-  getById: (id) => api.get(`/vendors/${id}`),
-  create: (data) => api.post('/vendors', data),
-  update: (id, data) => api.put(`/vendors/${id}`, data),
-  delete: (id) => api.delete(`/vendors/${id}`),
-  getPortalToken: (id) => api.get(`/vendors/${id}/portal-token`),
-  rotatePortalToken: (id) => api.post(`/vendors/${id}/portal-token/rotate`),
-  revokePortalToken: (id) => api.post(`/vendors/${id}/portal-token/revoke`),
-};
-
-export const taskTemplateApi = {
-  getAll: () => api.get('/tasklisttemplates'),
-  getById: (id) => api.get(`/tasklisttemplates/${id}`),
-  create: (data) => api.post('/tasklisttemplates', data),
-  update: (id, data) => api.put(`/tasklisttemplates/${id}`, data),
-  delete: (id) => api.delete(`/tasklisttemplates/${id}`),
-};
-
-export const upliftApi = {
-  list: (params) => api.get('/uplifts', params),
-  listForDispatch: (dispatchId) => api.get(`/uplifts/dispatch/${dispatchId}`),
-  approve: (id, note) => api.post(`/uplifts/${id}/approve`, { note }),
-  deny: (id, note) => api.post(`/uplifts/${id}/deny`, { note }),
-};
-
-export const dispatchApi = {
-  list: (params) => api.get('/dispatches', params),
-  getById: (id) => api.get(`/dispatches/${id}`),
-};
-
-export default api;
-
diff --git a/src/services/authService.js b/src/services/authService.js
deleted file mode 100644
index c08ab966..00000000
--- a/src/services/authService.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { getAccessToken, removeToken, getUser, isAuthenticated, getRawToken } from "../tokenUtility";
-
-const API_BASE_URL = process.env.REACT_APP_API_URL || "";
-
-export { isAuthenticated };
-
-export function getCurrentUser() {
-    return getUser();
-}
-
-export function getToken() {
-    return getRawToken();
-}
-
-export function logout() {
-    removeToken();
-}
-
-export async function changePassword(currentPassword, newPassword, confirmPassword) {
-    const response = await fetch(`${API_BASE_URL}/api/Authentication/ChangePassword`, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-            "Authorization": getAccessToken(),
-        },
-        body: JSON.stringify({
-            Currentpassword: currentPassword,
-            Newpassword: newPassword,
-            Confirmpassword: confirmPassword,
-        }),
-    });
-
-    if (!response.ok) {
-        throw new Error("Failed to change password");
-    }
-
-    return await response.json();
-}
-
-export async function forgotPassword(email) {
-    const response = await fetch(`${API_BASE_URL}/api/Authentication/ForgetPassword?Email=${encodeURIComponent(email)}`, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
-    });
-
-    if (!response.ok) {
-        throw new Error("Failed to send password reset email");
-    }
-
-    return await response.json();
-}
-
-export async function verifyResetCode(code) {
-    const response = await fetch(`${API_BASE_URL}/api/Authentication/VerificationCode?code=${encodeURIComponent(code)}`, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
-    });
-
-    if (!response.ok) {
-        throw new Error("Invalid verification code");
-    }
-
-    return await response.json();
-}
-
-export async function resetPassword(email, code, password) {
-    const response = await fetch(`${API_BASE_URL}/api/Authentication/ResetPassword`, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-            Email: email,
-            Code: code,
-            Password: password,
-        }),
-    });
-
-    if (!response.ok) {
-        throw new Error("Failed to reset password");
-    }
-
-    return await response.json();
-}
diff --git a/src/setupProxy.js b/src/setupProxy.js
deleted file mode 100644
index 7751a0c3..00000000
--- a/src/setupProxy.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const { createProxyMiddleware } = require('http-proxy-middleware');
-
-const API_TARGET = process.env.REACT_APP_API_TARGET || 'http://localhost:5141';
-
-module.exports = function(app) {
-  app.use(
-    createProxyMiddleware({
-      target: API_TARGET,
-      changeOrigin: true,
-      secure: false,
-      pathFilter: '/api',
-    })
-  );
-};
\ No newline at end of file
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 8f2609b7..00000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
diff --git a/src/site.css b/src/site.css
deleted file mode 100644
index 17058f35..00000000
--- a/src/site.css
+++ /dev/null
@@ -1,680 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600&family=Nunito:ital,wght@0,200;0,300;0,400;0,600;1,200;1,300;1,400;1,600&display=swap");
-
-* {
-  margin: 0;
-  padding: 0;
-  z-index: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: "Nunito", sans-serif;
-  background-color: #f5f5f5;
-  color: #333;
-  line-height: 1.5;
-}
-
-/* Page Layout */
-.listPage, .contactsPage {
-  padding: 20px;
-  background: #f5f5f5;
-  min-height: 100vh;
-}
-
-.pageTitle {
-  font-size: 28px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 20px;
-}
-
-.card, .controlsCard {
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  margin-bottom: 20px;
-}
-
-/* Controls */
-.controlsTop {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px;
-  border-bottom: 1px solid #eee;
-}
-
-.leftControls {
-  flex: 1;
-}
-
-.filter {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.filter select, .filter input {
-  padding: 8px 12px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.filter input {
-  flex: 1;
-  min-width: 300px;
-}
-
-.searchBtn {
-  padding: 8px 16px;
-  background: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-.searchBtn:hover {
-  background: #0056b3;
-}
-
-.rightControls {
-  display: flex;
-  gap: 8px;
-}
-
-.iconSmall {
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  border: 1px solid #ddd;
-  background: white;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-}
-
-.iconSmall:hover {
-  background: #f0f0f0;
-  border-color: #999;
-}
-
-/* Table Styles */
-.tableContainer {
-  padding: 15px;
-}
-
-.tableResponsive {
-  overflow-x: auto;
-}
-
-.dataTable {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-}
-
-.dataTable thead {
-  background: #f9f9f9;
-}
-
-.dataTable th {
-  padding: 12px;
-  text-align: left;
-  font-weight: 600;
-  color: #333;
-  border-bottom: 2px solid #ddd;
-}
-
-.dataTable td {
-  padding: 12px;
-  border-bottom: 1px solid #eee;
-  color: #333;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.gridTable {
-  display: grid;
-  font-size: 14px;
-  min-width: 100%;
-}
-
-.gridCell {
-  padding: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  border-right: 1px solid #eee;
-}
-
-.gridCell:last-child {
-  border-right: none;
-}
-
-.gridHeader {
-  font-weight: 600;
-  color: #333;
-  background: #f5f6f8;
-  border-bottom: 2px solid #ddd;
-  border-right: 1px solid #ddd;
-  position: relative;
-}
-
-.gridHeader:last-child {
-  border-right: none;
-}
-
-.gridBody {
-  border-bottom: 1px solid #eee;
-  color: #333;
-}
-
-.gridBody:hover {
-  background: #f9f9f9;
-}
-
-.gridCell a {
-  color: #007bff;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.gridCell a:hover {
-  text-decoration: underline;
-}
-
-.colConfigBtn {
-  font-size: 15px;
-  color: #999;
-}
-
-.colConfigPanel {
-  position: fixed;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
-  z-index: 99999;
-  width: 220px;
-  overflow: hidden;
-}
-
-.colConfigTitle {
-  padding: 10px 14px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #999;
-  text-transform: uppercase;
-  border-bottom: 1px solid #eee;
-}
-
-.colConfigList {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.colConfigItem {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  cursor: grab;
-  border-bottom: 1px solid #f5f5f5;
-  font-size: 13px;
-}
-
-.colConfigItem:hover {
-  background: #f8f9fa;
-}
-
-.colConfigItem.dragging {
-  opacity: 0.4;
-}
-
-.colConfigDragHandle {
-  color: #ccc;
-  font-size: 14px;
-  cursor: grab;
-  flex-shrink: 0;
-}
-
-.colConfigLabel {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-  flex: 1;
-}
-
-.colConfigLabel input[type="checkbox"] {
-  width: 14px;
-  height: 14px;
-}
-
-.gridSortable {
-  cursor: pointer;
-  user-select: none;
-}
-
-.gridSortable:hover {
-  background: #eef1f4;
-}
-
-.gridHeader.sorted {
-  background: #e8edf2;
-}
-
-.sortArrow {
-  font-size: 10px;
-  color: #007bff;
-  margin-left: 4px;
-}
-
-.colConfigBtn {
-  margin-right: 8px;
-}
-
-.colConfigPanel {
-  position: fixed;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
-  z-index: 99999;
-  width: 220px;
-  overflow: hidden;
-}
-
-.colConfigTitle {
-  padding: 10px 14px;
-  font-size: 13px;
-  font-weight: 600;
-  color: #333;
-  border-bottom: 1px solid #eee;
-}
-
-.colConfigList {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.colConfigItem {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  font-size: 13px;
-  cursor: grab;
-  border-bottom: 1px solid #f5f5f5;
-}
-
-.colConfigItem:hover {
-  background: #f8f9fa;
-}
-
-.colConfigItem.dragging {
-  opacity: 0.4;
-}
-
-.colConfigDragHandle {
-  color: #ccc;
-  font-size: 14px;
-  cursor: grab;
-}
-
-.colConfigLabel {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-  flex: 1;
-}
-
-.colResizeHandle {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 5px;
-  height: 100%;
-  cursor: col-resize;
-  background: transparent;
-}
-
-.colResizeHandle:hover {
-  background: #007bff;
-}
-
-.dataTable tbody tr:hover {
-  background: #f9f9f9;
-}
-
-.dataTable a {
-  color: #007bff;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.dataTable a:hover {
-  text-decoration: underline;
-}
-
-.actionButtons {
-  display: flex;
-  gap: 8px;
-}
-
-.btnIcon {
-  padding: 4px 8px;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s;
-}
-
-.btnIcon:hover {
-  background: #f0f0f0;
-  border-color: #999;
-}
-
-.btnIcon.edit {
-  color: #28a745;
-}
-
-.btnIcon.delete {
-  color: #dc3545;
-}
-
-/* Pagination */
-.paginationBar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid #eee;
-  font-size: 13px;
-  background: #fafafa;
-}
-
-.paginationPerPage {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.paginationLabel {
-  color: #999;
-  font-size: 12px;
-}
-
-.paginationSizeGroup {
-  display: flex;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.paginationSizeBtn {
-  padding: 4px 12px;
-  border: none;
-  border-right: 1px solid #ddd;
-  background: #fff;
-  font-size: 12px;
-  cursor: pointer;
-  color: #666;
-}
-
-.paginationSizeBtn:last-child {
-  border-right: none;
-}
-
-.paginationSizeBtn:hover {
-  background: #f0f0f0;
-}
-
-.paginationSizeBtn.active {
-  background: #007bff;
-  color: #fff;
-}
-
-.paginationNav {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.paginationInfo {
-  color: #999;
-  font-size: 12px;
-}
-
-.paginationButtons {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.paginationBtn {
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #ddd;
-  background: #fff;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  color: #333;
-}
-
-.paginationBtn:hover:not(:disabled) {
-  background: #f0f0f0;
-}
-
-.paginationBtn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.paginationPage {
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #007bff;
-  color: #fff;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-/* Form Styles */
-.formWrapper {
-  padding: 20px;
-  background: #f5f5f5;
-  min-height: 100vh;
-}
-
-.formCard {
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  max-width: 900px;
-  margin: 0 auto;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-
-.formHeader {
-  padding: 20px;
-  border-bottom: 1px solid #ddd;
-  background: #f9f9f9;
-}
-
-.formHeader h2 {
-  margin: 0;
-  font-size: 22px;
-  color: #333;
-}
-
-.dataForm {
-  padding: 20px;
-}
-
-.section {
-  margin-bottom: 25px;
-}
-
-.sectionTitle {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 15px;
-  border-bottom: 2px solid #007bff;
-  padding-bottom: 8px;
-}
-
-.formBody {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 15px;
-  margin-bottom: 15px;
-}
-
-.formGroup {
-  display: flex;
-  flex-direction: column;
-}
-
-.formLabel {
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 6px;
-  color: #333;
-}
-
-.required {
-  color: #dc3545;
-}
-
-.formControl {
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 14px;
-  font-family: inherit;
-}
-
-.formControl:focus {
-  outline: none;
-  border-color: #007bff;
-  box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
-}
-
-.formActions {
-  display: flex;
-  gap: 12px;
-  padding-top: 20px;
-  border-top: 1px solid #ddd;
-}
-
-.btnPrimary {
-  padding: 10px 24px;
-  background: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btnPrimary:hover {
-  background: #0056b3;
-}
-
-.btnPrimary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.btnSecondary {
-  padding: 10px 24px;
-  background: white;
-  color: #333;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.btnSecondary:hover {
-  background: #f0f0f0;
-}
-
-/* Loading State */
-.loading {
-  padding: 40px;
-  text-align: center;
-  color: #666;
-  font-size: 16px;
-}
-
-.error {
-  padding: 15px;
-  background: #f8d7da;
-  border: 1px solid #f5c6cb;
-  color: #721c24;
-  border-radius: 4px;
-  margin: 15px;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .controlsTop {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 12px;
-  }
-
-  .filter {
-    flex-direction: column;
-  }
-
-  .filter input, .filter select {
-    width: 100%;
-  }
-
-  .dataTable {
-    font-size: 12px;
-  }
-
-  .dataTable th, .dataTable td {
-    padding: 8px;
-  }
-
-  .paginationContainer {
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .formBody {
-    grid-template-columns: 1fr;
-  }
-}
diff --git a/src/styles/FormPage.css b/src/styles/FormPage.css
deleted file mode 100644
index 0079d9c0..00000000
--- a/src/styles/FormPage.css
+++ /dev/null
@@ -1,151 +0,0 @@
-.formPage {
-  background: #f5f5f5;
-  min-height: 100vh;
-  padding: 0;
-}
-
-.panel {
-  margin-bottom: 20px;
-  background-color: #fff;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-
-.panel-default {
-  border-color: #ddd;
-}
-
-.panel-connected {
-  border-radius: 0;
-  border: none;
-  box-shadow: none;
-}
-
-.panel-body {
-  padding: 15px;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  padding: 8px 15px;
-  margin-bottom: 20px;
-  list-style: none;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-}
-
-.breadcrumb-alt {
-  background-color: white;
-  border-bottom: 1px solid #e5e5e5;
-  padding: 10px 20px;
-  margin: 0 0 20px 0;
-  border-radius: 0;
-}
-
-.breadcrumb > li {
-  display: inline-block;
-}
-
-.breadcrumb > li + li:before {
-  content: ">\00a0";
-  padding: 0 5px;
-  color: #ccc;
-}
-
-.breadcrumb > li a {
-  color: #0088cc;
-  text-decoration: none;
-}
-
-.breadcrumb > li a:hover {
-  text-decoration: underline;
-}
-
-.breadcrumb > .active {
-  color: #00a0d1;
-  font-weight: bold;
-  cursor: default;
-}
-
-/* Container */
-.container {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-/* Form Header */
-.header {
-  margin-bottom: 15px;
-}
-
-.heading {
-  margin: 0 0 10px 0;
-  font-weight: 300;
-  line-height: 1.1;
-  color: #333;
-}
-
-.heading.thin {
-  font-weight: 300;
-  font-size: 24px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.heading.text-uppercase {
-  text-transform: uppercase;
-  font-size: 14px;
-  margin-bottom: 15px;
-}
-
-.text-primary {
-  color: #0088cc;
-}
-
-.fa-stack {
-  position: relative;
-  display: inline-block;
-  width: 2em;
-  height: 2em;
-  line-height: 2em;
-  vertical-align: middle;
-}
-
-.fa-stack-1x,
-.fa-stack-2x {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  text-align: center;
-}
-
-.fa-stack-2x {
-  font-size: 2em;
-}
-
-.fa-stack-1x {
-  font-size: 1em;
-  line-height: inherit;
-}
-
-.fa-inverse {
-  color: #fff;
-}
-
-/* Form Groups */
-.form-group {
-  margin-bottom: 15px;
-  position: relative;
-}
-
-/* Row and Columns */
-.row {
-  margin-right: -15px;
-  margin-left: -15px;
-  display: flex;
-  flex-wrap: wrap;
-}
\ No newline at end of file
diff --git a/src/styles/fonts.css b/src/styles/fonts.css
new file mode 100644
index 00000000..2163a14d
--- /dev/null
+++ b/src/styles/fonts.css
@@ -0,0 +1,13 @@
+/* Sea Haven DS — self-hosted via @fontsource (matches theme.css stacks) */
+
+@import "@fontsource/montserrat/600.css";
+@import "@fontsource/montserrat/700.css";
+@import "@fontsource/montserrat/800.css";
+
+@import "@fontsource/dm-sans/400.css";
+@import "@fontsource/dm-sans/500.css";
+@import "@fontsource/dm-sans/600.css";
+
+@import "@fontsource/jetbrains-mono/400.css";
+@import "@fontsource/jetbrains-mono/500.css";
+@import "@fontsource/jetbrains-mono/600.css";
diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100644
index 00000000..e776d53a
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,7 @@
+@import "tailwindcss";
+@import "./fonts.css";
+@import "./theme.css";
+@import "./typography.css";
+@import "./motion.css";
+
+@custom-variant dark (&:is(.dark *));
diff --git a/src/styles/motion.css b/src/styles/motion.css
new file mode 100644
index 00000000..156e82ac
--- /dev/null
+++ b/src/styles/motion.css
@@ -0,0 +1,5 @@
+:root {
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+}
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 00000000..121225f3
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,292 @@
+:root {
+  /* Body typography reference — do not set on html (rem/Tailwind use 16px root) */
+  --font-size: 14px;
+
+  /* ── TYPOGRAPHY (runtime CSS vars — used by inline styles + Tailwind) */
+  --font-family-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
+  --font-family-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-family-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-display: var(--font-family-display);
+  --font-sans: var(--font-family-sans);
+  --font-mono: var(--font-family-mono);
+  --font-heading: var(--font-family-display);
+
+  /* ── TYPOGRAPHY SCALE ───────────────────────────────────────────── */
+  --text-xs: 11px;
+  --text-sm: 12px;
+  --text-base-sm: 13px;
+  --text-base: 14px;
+  --text-md: 16px;
+  --text-lg: 18px;
+  --text-xl: 22px;
+  --text-2xl: 28px;
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.08em;
+
+  /* ── LAYOUT SPACING ─────────────────────────────────────────────── */
+  --spacing-sidebar: 244px;
+  --spacing-topbar: 64px;
+  --spacing-sidebar-collapsed: 76px;
+
+  /* ── RADIUS SCALE (scale resolves to 4 / 6 / 8 / 12) ────────────── */
+  --radius: 8px;
+  --radius-md: 6px;
+  --radius-sm: 4px;
+  --radius-xl: 12px;
+
+  /* ── ELEVATION ──────────────────────────────────────────────────── */
+  --shadow-sm: 0 1px 3px rgba(22, 30, 56, 0.06), 0 1px 2px rgba(22, 30, 56, 0.04);
+  --shadow-md: 0 4px 6px -1px rgba(22, 30, 56, 0.08), 0 2px 4px -2px rgba(22, 30, 56, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(22, 30, 56, 0.1), 0 4px 6px -4px rgba(22, 30, 56, 0.08);
+  --shadow-brand-mark: 0 2px 6px -1px rgba(28, 117, 188, 0.45);
+
+  /* ── SHADCN BASE (Sea Haven DS) ──────────────────────────────────── */
+  --background: #ffffff;
+  --foreground: #262262;
+  --placeholder-foreground: color-mix(in srgb, var(--foreground) 50%, transparent);
+  --card: #ffffff;
+  --card-foreground: #262262;
+  --popover: #ffffff;
+  --popover-foreground: #262262;
+  --primary: #1c75bc;
+  --primary-hover: #155a92;
+  --primary-foreground: #ffffff;
+  --secondary: #f1f4f9;
+  --secondary-foreground: #262262;
+  --muted: #e6e7e8;
+  --muted-foreground: #58595b;
+  --accent: #27aae1;
+  --accent-foreground: #ffffff;
+  --success: #00a79d;
+  --warning: #d97706;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --border: #dfe3ea;
+  --border-hover: #c8d0e0;
+  --input: transparent;
+  --input-background: #f9fafb;
+  --switch-background: #c8d0e0;
+  --ring: #1c75bc;
+
+  --chart-1: #1c75bc;
+  --chart-2: #00a79d;
+  --chart-3: #d97706;
+  --chart-4: #7c3aed;
+  --chart-5: #dc2626;
+
+  /* ── SIDEBAR (light surface — Sea Haven DS) ──────────────────────── */
+  --sidebar: #f6f8fb;
+  --sidebar-bg: #f6f8fb;
+  --sidebar-foreground: #262262;
+  --sidebar-primary: #1c75bc;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #e6f4fb;
+  --sidebar-accent-foreground: #155a92;
+  --sidebar-border: #dfe3ea;
+  --sidebar-ring: #1c75bc;
+
+  /* ── SEAHAVEN SEMANTIC ALIASES (consumed across the app) ────────── */
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-foreground: #ffffff;
+  --color-primary-tint: #e6f4fb;
+  --color-accent: var(--accent);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--foreground);
+  --color-ring: var(--ring);
+
+  --color-bg-page: #f9fafb;
+  --color-bg-surface: var(--card);
+  --color-bg-muted: #f1f4f9;
+  --color-border: var(--border);
+  --color-border-hover: #c8d0e0;
+  --color-text-primary: var(--foreground);
+  --color-text-secondary: #58595b;
+  --color-text-muted: #6b7a96;
+  --color-text-inverse: #ffffff;
+
+  /* ── SIDEBAR ALIASES (light) ────────────────────────────────────── */
+  --color-sidebar-bg: var(--sidebar-bg);
+  --color-sidebar-text: #262262;
+  --color-sidebar-text-hover: #155a92;
+  --color-sidebar-active-bg: var(--sidebar-accent);
+  --color-sidebar-active-text: var(--sidebar-accent-foreground);
+  --color-sidebar-hover-bg: #eef2f7;
+  --color-sidebar-label: #6b7a96;
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-badge-bg: #e6f4fb;
+  --color-sidebar-badge-text: #155a92;
+  --color-sidebar-item-active-bg: var(--card);
+  --color-sidebar-item-active-shadow: 0 1px 3px rgba(38, 34, 98, 0.08);
+
+  /* ── SEMANTIC (universal meaning) ───────────────────────────────── */
+  --color-destructive: var(--destructive);
+  --color-destructive-fg: #ffffff;
+  --color-warning: var(--warning);
+  --color-success: var(--success);
+
+  /* ── WO TYPE TOKENS (immutable — CLAUDE.md §3) ──────────────────── */
+  --type-pm-bg: #eff6ff;
+  --type-pm-text: #1d4ed8;
+  --type-reactive-bg: #fff7ed;
+  --type-reactive-text: #c2410c;
+  --type-emergency-bg: #fef2f2;
+  --type-emergency-text: #b91c1c;
+  --type-addon-bg: #f5f3ff;
+  --type-addon-text: #6d28d9;
+  --type-overdue-bg: #fff1f2;
+  --type-overdue-text: #9f1239;
+
+  /* ── WO STATUS TOKENS (immutable) ───────────────────────────────── */
+  --status-incomplete-bg: #f3f4f6;
+  --status-incomplete-text: #374151;
+  --status-pending-bg: #fff7ed;
+  --status-pending-text: #92400e;
+  --status-scheduled-bg: #eff6ff;
+  --status-scheduled-text: #1e40af;
+  --status-inroute-bg: #f0f9ff;
+  --status-inroute-text: #0369a1;
+  --status-onsite-bg: #ecfdf5;
+  --status-onsite-text: #065f46;
+  --status-inprogress-bg: #eff6ff;
+  --status-inprogress-text: #1d4ed8;
+  --status-completed-bg: #f0fdf4;
+  --status-completed-text: #166534;
+  --status-rescheduled-bg: #fffbeb;
+  --status-rescheduled-text: #92400e;
+  --status-canceled-bg: #f9fafb;
+  --status-canceled-text: #6b7280;
+  --status-pendingquote-bg: #faf5ff;
+  --status-pendingquote-text: #6b21a8;
+  --status-pastdue-bg: #fff1f2;
+  --status-pastdue-text: #9f1239;
+
+  /* ── COMPLETION DOCUMENT (immutable) ────────────────────────────── */
+  --doc-yes-bg: #f0fdf4;
+  --doc-yes-text: #166534;
+  --doc-no-bg: #fff1f2;
+  --doc-no-text: #be123c;
+  --doc-nn-bg: #f3f4f6;
+  --doc-nn-text: #6b7280;
+
+  /* ── CARRIED OVER / RESCHEDULE INDICATORS (immutable) ───────────── */
+  --indicator-co-1-bg: #fffbeb;
+  --indicator-co-1-text: #92400e;
+  --indicator-co-2-bg: #fef3c7;
+  --indicator-co-2-text: #b45309;
+  --indicator-co-3-bg: #fef2f2;
+  --indicator-co-3-text: #9f1239;
+
+  /* ── SLA (immutable) ────────────────────────────────────────────── */
+  --sla-safe: #16a34a;
+  --sla-warning: #d97706;
+  --sla-critical: #dc2626;
+
+  /* ── LAB (experiment UI accents) ────────────────────────────────── */
+  --color-lab-accent-bg: #fef3c7;
+  --color-lab-accent-text: #92400e;
+  --color-lab-accent-border: #f59e0b;
+
+  /* ── HEADER (app shell top bar) ─────────────────────────────────── */
+  --color-header-bg-start: #1b1f52;
+  --color-header-bg-mid: #1c4f8f;
+  --color-header-bg-end: var(--primary);
+  --color-header-gradient: linear-gradient(
+    100deg,
+    var(--color-header-bg-start) 0%,
+    var(--color-header-bg-mid) 58%,
+    var(--color-header-bg-end) 100%
+  );
+  --color-header-shadow: 0 1px 0 rgba(38, 34, 98, 0.18), 0 6px 18px -10px rgba(28, 117, 188, 0.5);
+  --color-header-surface: rgba(255, 255, 255, 0.08);
+  --color-header-surface-hover: rgba(255, 255, 255, 0.18);
+  --color-header-chip-hover: rgba(255, 255, 255, 0.12);
+  --color-header-icon: #eaf3fb;
+  --color-header-text: #ffffff;
+  --color-header-text-muted: #bdd8f0;
+  --color-header-avatar-ring: rgba(255, 255, 255, 0.25);
+
+  /* ── SERVICE TYPE TOKENS (Completion Docs) ──────────────────────── */
+  --service-scrubber-pit-bg: #eff6ff;
+  --service-scrubber-pit-text: #1d4ed8;
+  --service-backflow-preventers-bg: #ecfdf5;
+  --service-backflow-preventers-text: #065f46;
+  --service-tank-water-heater-bg: #fff7ed;
+  --service-tank-water-heater-text: #c2410c;
+  --service-floor-drain-bg: #f0f9ff;
+  --service-floor-drain-text: #0369a1;
+  --service-hvac-bg: #f5f3ff;
+  --service-hvac-text: #6d28d9;
+  --service-parking-lot-lighting-bg: #fffbeb;
+  --service-parking-lot-lighting-text: #92400e;
+  --service-pumping-systems-bg: #faf5ff;
+  --service-pumping-systems-text: #6b21a8;
+  --service-door-hardware-bg: #f0fdf4;
+  --service-door-hardware-text: #166534;
+  --service-pressure-reducing-valve-bg: #fff1f2;
+  --service-pressure-reducing-valve-text: #9f1239;
+  --service-fire-suppression-bg: #fef2f2;
+  --service-fire-suppression-text: #b91c1c;
+}
+
+@theme inline {
+  --font-display: var(--font-family-display);
+  --font-sans: var(--font-family-sans);
+  --font-mono: var(--font-family-mono);
+  --font-heading: var(--font-family-display);
+
+  --spacing-sidebar: var(--spacing-sidebar);
+  --spacing-topbar: var(--spacing-topbar);
+  --spacing-sidebar-collapsed: var(--spacing-sidebar-collapsed);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+}
diff --git a/src/styles/typography.css b/src/styles/typography.css
new file mode 100644
index 00000000..34d61f9e
--- /dev/null
+++ b/src/styles/typography.css
@@ -0,0 +1,83 @@
+html {
+  /* 16px root — Tailwind spacing/radius and MUI rem scale assume browser default */
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  /* font-size: var(--text-base); */
+  /* line-height: var(--leading-normal); */
+  color: var(--foreground);
+  background-color: var(--color-bg-page);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-heading);
+  color: var(--foreground);
+  margin: 0;
+}
+
+h1 {
+  font-size: var(--text-2xl);
+  font-weight: 800;
+}
+
+h2 {
+  font-size: var(--text-xl);
+  font-weight: 700;
+}
+
+h3 {
+  font-size: var(--text-lg);
+  font-weight: 600;
+}
+
+h4 {
+  font-size: var(--text-md);
+  font-weight: 600;
+}
+
+h5 {
+  font-size: var(--text-base);
+  font-weight: 600;
+}
+
+h6 {
+  font-size: var(--text-base-sm);
+  font-weight: 600;
+}
+
+.text-caption {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+  color: var(--muted-foreground);
+}
+
+.text-label {
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  line-height: 1.5;
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--color-sidebar-label);
+}
+
+.text-nav-group {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
diff --git a/src/test/api/api-error.test.ts b/src/test/api/api-error.test.ts
new file mode 100644
index 00000000..71c3d1c9
--- /dev/null
+++ b/src/test/api/api-error.test.ts
@@ -0,0 +1,54 @@
+import ky from "ky";
+import { describe, expect, it, vi } from "vitest";
+import { normalizeApiRequestError } from "@/api/api-error";
+
+const RESOURCE_URL = "https://example.test/api/resource";
+
+function createClient(fetchImpl: typeof fetch) {
+  return ky.create({
+    fetch: fetchImpl,
+    retry: 0,
+    timeout: 50,
+    hooks: { beforeError: [({ error }) => normalizeApiRequestError(error)] },
+  });
+}
+
+describe("normalizeApiRequestError", () => {
+  it("surfaces Ky's pre-parsed JSON body for HTTP errors via the hook", async () => {
+    const fetchImpl = vi.fn(() =>
+      Promise.resolve(
+        new Response(JSON.stringify({ message: "Validation failed" }), {
+          status: 422,
+          headers: { "Content-Type": "application/json" },
+        }),
+      ),
+    ) as unknown as typeof fetch;
+
+    await expect(createClient(fetchImpl).get(RESOURCE_URL).json()).rejects.toThrow(
+      "Validation failed",
+    );
+  });
+
+  it("reports a connection failure for network errors", async () => {
+    const fetchImpl = vi.fn(() =>
+      Promise.reject(new TypeError("fetch failed")),
+    ) as unknown as typeof fetch;
+
+    await expect(createClient(fetchImpl).get(RESOURCE_URL).json()).rejects.toThrow(
+      "No response from server. Please check your connection.",
+    );
+  });
+
+  it("returns a friendly timeout message", async () => {
+    const fetchImpl = vi.fn((_input: RequestInfo | URL, init?: RequestInit) => {
+      const signal = init?.signal;
+      return new Promise<Response>((_resolve, reject) => {
+        signal?.addEventListener("abort", () => reject(signal?.reason));
+      });
+    }) as unknown as typeof fetch;
+
+    await expect(createClient(fetchImpl).get(RESOURCE_URL).json()).rejects.toThrow(
+      "The request timed out. Please try again.",
+    );
+  });
+});
diff --git a/src/test/api/api-formdata-content-type.test.ts b/src/test/api/api-formdata-content-type.test.ts
new file mode 100644
index 00000000..94312aba
--- /dev/null
+++ b/src/test/api/api-formdata-content-type.test.ts
@@ -0,0 +1,90 @@
+// @vitest-environment node
+// Node's fetch/FormData/Request follow the WHATWG rules a browser uses to derive the multipart
+// Content-Type; jsdom's FormData does not, which is how a header-less upload once passed here.
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+type Captured = { method: string; contentType: string | null; body: string };
+
+const API_URL = "http://api.test/api";
+let captured: Captured[] = [];
+
+beforeEach(() => {
+  captured = [];
+  vi.resetModules();
+  vi.doMock("@/lib/env", () => ({ env: { apiUrl: API_URL } }));
+  vi.doMock("@/lib/auth/auth-storage", () => ({ getAccessToken: () => "Bearer test-token" }));
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+      // Serialize exactly what would go on the wire.
+      const request = new Request(input, init);
+      captured.push({
+        method: request.method,
+        contentType: request.headers.get("content-type"),
+        body: await request.text(),
+      });
+      return new Response("{}", { status: 200, headers: { "Content-Type": "application/json" } });
+    }),
+  );
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+function lastRequest(): Captured {
+  const request = captured[captured.length - 1];
+  if (!request) throw new Error("No request reached fetch");
+  return request;
+}
+
+describe("api multipart uploads", () => {
+  it("sends FormData with a multipart Content-Type that carries the body's boundary", async () => {
+    const { apiRequestRaw } = await import("@/api/api");
+    const form = new FormData();
+    form.append("file", new File(["%PDF-1.7"], "signed.pdf", { type: "application/pdf" }));
+    form.append("workOrderVersion", "AAAAAAAAB9E=");
+
+    await apiRequestRaw("post", "workorders/10/completion-doc", {
+      body: form,
+      throwHttpErrors: false,
+    });
+
+    const request = lastRequest();
+    const boundary = /^multipart\/form-data; boundary=(.+)$/.exec(request.contentType ?? "")?.[1];
+    expect(boundary, `Content-Type was ${String(request.contentType)}`).toBeTruthy();
+    expect(request.body).toContain(`--${boundary}`);
+    expect(request.body).toContain('name="file"; filename="signed.pdf"');
+  });
+
+  it("sends the multipart Content-Type for PATCH category updates and apiPostForm", async () => {
+    const { apiRequestRaw, apiPostForm } = await import("@/api/api");
+    const category = new FormData();
+    category.append("category", "Before");
+
+    await apiRequestRaw("patch", "workorders/10/media/5", {
+      body: category,
+      throwHttpErrors: false,
+    });
+    expect(lastRequest().contentType).toMatch(/^multipart\/form-data; boundary=/);
+
+    const edit = new FormData();
+    edit.append("Id", "10");
+    await apiPostForm("WorkOrder/EditWorkorder", edit);
+    expect(lastRequest().contentType).toMatch(/^multipart\/form-data; boundary=/);
+  });
+
+  it("keeps application/json for json bodies", async () => {
+    const { apiPost, apiPatch } = await import("@/api/api");
+
+    await apiPost("workorders/10/comments", { text: "hello" });
+    expect(lastRequest()).toMatchObject({
+      method: "POST",
+      contentType: "application/json",
+      body: '{"text":"hello"}',
+    });
+
+    await apiPatch("workorders/10/board", { field: "docStatus", value: "Yes" });
+    expect(lastRequest().contentType).toBe("application/json");
+  });
+});
diff --git a/src/test/api/handle-api-response.test.ts b/src/test/api/handle-api-response.test.ts
new file mode 100644
index 00000000..4916dda3
--- /dev/null
+++ b/src/test/api/handle-api-response.test.ts
@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import { handleApiResponse, handlePaginatedResponse } from "@/api/handle-api-response";
+
+describe("handleApiResponse", () => {
+  it("returns array payloads as-is", () => {
+    const items = [{ id: 1 }, { id: 2 }];
+    expect(handleApiResponse<typeof items>(items)).toEqual(items);
+  });
+
+  it("unwraps data, Data, and value wrappers", () => {
+    expect(handleApiResponse<{ id: number }>({ data: { id: 1 } })).toEqual({ id: 1 });
+    expect(handleApiResponse<{ id: number }>({ Data: { id: 2 } })).toEqual({ id: 2 });
+    expect(handleApiResponse<{ id: number }>({ value: { id: 3 } })).toEqual({ id: 3 });
+  });
+
+  it("returns object payload when no wrapper is present", () => {
+    const payload = { id: 99, name: "Test" };
+    expect(handleApiResponse(payload)).toEqual(payload);
+  });
+});
+
+describe("handlePaginatedResponse", () => {
+  it("normalizes paginated ASP.NET payload", () => {
+    const result = handlePaginatedResponse<{ id: number }>(
+      {
+        Data: [{ id: 1 }, { id: 2 }],
+        TotalCount: 50,
+        PageNumber: 2,
+        PageSize: 25,
+      },
+      { page: 2, pageSize: 25 },
+    );
+
+    expect(result).toEqual({
+      items: [{ id: 1 }, { id: 2 }],
+      totalCount: 50,
+      page: 2,
+      pageSize: 25,
+    });
+  });
+
+  it("reads total as an alias of totalCount", () => {
+    const result = handlePaginatedResponse<{ id: number }>(
+      {
+        items: [{ id: 1 }],
+        total: 1778,
+        page: 0,
+        pageSize: 50,
+      },
+      { page: 0, pageSize: 50 },
+    );
+
+    expect(result.totalCount).toBe(1778);
+    expect(result.items).toHaveLength(1);
+  });
+});
diff --git a/src/test/api/upload-form-with-progress.test.ts b/src/test/api/upload-form-with-progress.test.ts
new file mode 100644
index 00000000..18a4f4dc
--- /dev/null
+++ b/src/test/api/upload-form-with-progress.test.ts
@@ -0,0 +1,184 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const expireSession = vi.fn();
+
+vi.mock("@/lib/auth/expire-session", () => ({
+  expireSessionAndRedirectToLogin: () => expireSession(),
+}));
+
+import { uploadFormWithProgress } from "@/api/upload-form-with-progress";
+
+type Listener = (event?: unknown) => void;
+
+class ListenerBag {
+  private readonly listeners = new Map<string, Listener[]>();
+
+  addEventListener(type: string, listener: Listener): void {
+    this.listeners.set(type, [...(this.listeners.get(type) ?? []), listener]);
+  }
+
+  removeEventListener(type: string, listener: Listener): void {
+    this.listeners.set(
+      type,
+      (this.listeners.get(type) ?? []).filter((entry) => entry !== listener),
+    );
+  }
+
+  emit(type: string, event?: unknown): void {
+    for (const listener of [...(this.listeners.get(type) ?? [])]) {
+      listener(event);
+    }
+  }
+}
+
+class FakeXhr extends ListenerBag {
+  static last: FakeXhr | undefined;
+
+  readonly upload = new ListenerBag();
+  readonly headers: Record<string, string> = {};
+  status = 0;
+  responseText = "";
+  method = "";
+  url = "";
+  body: FormData | undefined;
+  abortCount = 0;
+
+  constructor() {
+    super();
+    FakeXhr.last = this;
+  }
+
+  open(method: string, url: string): void {
+    this.method = method;
+    this.url = url;
+  }
+
+  setRequestHeader(name: string, value: string): void {
+    this.headers[name] = value;
+  }
+
+  send(body: FormData): void {
+    this.body = body;
+  }
+
+  abort(): void {
+    this.abortCount += 1;
+    this.emit("abort");
+  }
+
+  respond(status: number, responseText = ""): void {
+    this.status = status;
+    this.responseText = responseText;
+    this.emit("load");
+  }
+}
+
+function currentXhr(): FakeXhr {
+  const instance = FakeXhr.last;
+  if (!instance) throw new Error("No XMLHttpRequest was created");
+  return instance;
+}
+
+function formWithFile(): FormData {
+  const body = new FormData();
+  body.append("file", new File(["bytes"], "after.jpg", { type: "image/jpeg" }));
+  return body;
+}
+
+describe("uploadFormWithProgress", () => {
+  const originalXhr = globalThis.XMLHttpRequest;
+
+  beforeEach(() => {
+    expireSession.mockReset();
+    FakeXhr.last = undefined;
+    globalThis.XMLHttpRequest = FakeXhr as unknown as typeof XMLHttpRequest;
+    localStorage.setItem("auth", JSON.stringify({ token: "abc123" }));
+  });
+
+  afterEach(() => {
+    globalThis.XMLHttpRequest = originalXhr;
+    localStorage.clear();
+  });
+
+  it("POSTs the FormData with the stored bearer token and no streamed body", async () => {
+    const pending = uploadFormWithProgress("workorders/10/media", formWithFile());
+    const request = currentXhr();
+
+    expect(request.method).toBe("POST");
+    expect(request.url.endsWith("/api/workorders/10/media")).toBe(true);
+    expect(request.headers.Authorization).toBe("Bearer abc123");
+    expect(request.body).toBeInstanceOf(FormData);
+
+    request.respond(201, JSON.stringify({ data: { id: 12 } }));
+
+    await expect(pending).resolves.toEqual({
+      ok: true,
+      status: 201,
+      data: { data: { id: 12 } },
+    });
+  });
+
+  it("reports upload progress as whole percentages", async () => {
+    const onProgress = vi.fn();
+    const pending = uploadFormWithProgress("workorders/10/media", formWithFile(), { onProgress });
+    const request = currentXhr();
+
+    request.upload.emit("progress", { lengthComputable: true, loaded: 25, total: 200 });
+    request.upload.emit("progress", { lengthComputable: false, loaded: 30, total: 200 });
+    request.respond(200, "{}");
+    await pending;
+
+    expect(onProgress.mock.calls).toEqual([[13]]);
+  });
+
+  it("resolves non-2xx responses so callers can map API errors", async () => {
+    const pending = uploadFormWithProgress("workorders/10/media", formWithFile());
+    currentXhr().respond(
+      422,
+      JSON.stringify({ code: "ReadOnly", message: "Work order is closed." }),
+    );
+
+    await expect(pending).resolves.toEqual({
+      ok: false,
+      status: 422,
+      data: { code: "ReadOnly", message: "Work order is closed." },
+    });
+    expect(expireSession).not.toHaveBeenCalled();
+  });
+
+  it("expires the session on 401", async () => {
+    const pending = uploadFormWithProgress("workorders/10/media", formWithFile());
+    currentXhr().respond(401);
+
+    await expect(pending).resolves.toMatchObject({ ok: false, status: 401 });
+    expect(expireSession).toHaveBeenCalledTimes(1);
+  });
+
+  it("rejects transport failures with an actionable message", async () => {
+    const pending = uploadFormWithProgress("workorders/10/media", formWithFile());
+    currentXhr().emit("error");
+
+    await expect(pending).rejects.toThrow(/Upload failed/);
+  });
+
+  it("aborts the request when the caller signal aborts", async () => {
+    const controller = new AbortController();
+    const pending = uploadFormWithProgress("workorders/10/media", formWithFile(), {
+      signal: controller.signal,
+    });
+
+    controller.abort();
+
+    await expect(pending).rejects.toMatchObject({ name: "AbortError" });
+    expect(currentXhr().abortCount).toBe(1);
+  });
+
+  it("rejects immediately when the signal is already aborted", async () => {
+    await expect(
+      uploadFormWithProgress("workorders/10/media", formWithFile(), {
+        signal: AbortSignal.abort(),
+      }),
+    ).rejects.toMatchObject({ name: "AbortError" });
+    expect(FakeXhr.last).toBeUndefined();
+  });
+});
diff --git a/src/test/app/(auth)/_components/login-form.test.tsx b/src/test/app/(auth)/_components/login-form.test.tsx
new file mode 100644
index 00000000..1adc66d6
--- /dev/null
+++ b/src/test/app/(auth)/_components/login-form.test.tsx
@@ -0,0 +1,183 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { useForm, type UseFormHandleSubmit, type UseFormWatch } from "react-hook-form";
+import { describe, expect, it, vi } from "vitest";
+
+import { LoginForm, type LoginFormProps } from "@/app/(auth)/_components/login-form";
+import { loginSchema, type LoginFormValues } from "@/domain/auth/schemas/login-schema";
+import { renderWithProviders } from "@/test/test-utils";
+
+function createMockHandleSubmit(): UseFormHandleSubmit<LoginFormValues> {
+  return (onValid) => async (event) => {
+    event?.preventDefault?.();
+    await onValid({ username: "", password: "" });
+  };
+}
+
+function createMockWatch(
+  values: LoginFormValues = { username: "", password: "" },
+): UseFormWatch<LoginFormValues> {
+  return ((name?: unknown) => {
+    if (name === undefined) {
+      return values;
+    }
+
+    if (Array.isArray(name)) {
+      return name.map((field) => values[field as keyof LoginFormValues]);
+    }
+
+    return values[name as keyof LoginFormValues];
+  }) as UseFormWatch<LoginFormValues>;
+}
+
+type LoginFormHarnessProps = {
+  onSubmit?: (values: LoginFormValues) => void;
+  isLoggingIn?: boolean;
+  loginError?: Error | null;
+};
+
+function LoginFormHarness({
+  onSubmit = vi.fn(),
+  isLoggingIn = false,
+  loginError = null,
+}: LoginFormHarnessProps) {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<LoginFormValues>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: { username: "", password: "" },
+  });
+
+  return (
+    <LoginForm
+      register={register}
+      handleSubmit={handleSubmit}
+      watch={watch}
+      errors={errors}
+      onSubmit={onSubmit}
+      isLoggingIn={isLoggingIn}
+      loginError={loginError}
+    />
+  );
+}
+
+describe("LoginForm", () => {
+  it("renders email, password, and submit button", () => {
+    renderWithProviders(<LoginFormHarness />, { withAuth: false });
+
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.getByLabelText("Password")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /sign in/i })).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("you@seahavenind.com")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("••••••••")).toBeInTheDocument();
+  });
+
+  it("displays field validation helper text", () => {
+    renderWithProviders(
+      <LoginForm
+        register={vi.fn()}
+        handleSubmit={createMockHandleSubmit()}
+        watch={createMockWatch()}
+        errors={{
+          username: { type: "required", message: "Email is required" },
+          password: { type: "required", message: "Password is required" },
+        }}
+        onSubmit={vi.fn()}
+        isLoggingIn={false}
+        loginError={null}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByText("Email is required")).toBeInTheDocument();
+    expect(screen.getByText("Password is required")).toBeInTheDocument();
+  });
+
+  it("shows API login error message", () => {
+    renderWithProviders(<LoginFormHarness loginError={new Error("Invalid credentials")} />, {
+      withAuth: false,
+    });
+
+    expect(screen.getByText("Invalid email or password. Please try again.")).toBeInTheDocument();
+  });
+
+  it("disables fields and shows loading state while logging in", () => {
+    const register = (name: "username" | "password") => ({
+      name,
+      onChange: vi.fn(),
+      onBlur: vi.fn(),
+      ref: vi.fn(),
+    });
+
+    renderWithProviders(
+      <LoginForm
+        register={register as LoginFormProps["register"]}
+        handleSubmit={createMockHandleSubmit()}
+        watch={createMockWatch({ username: "user@seahavenind.com", password: "secret" })}
+        errors={{}}
+        onSubmit={vi.fn()}
+        isLoggingIn
+        loginError={null}
+      />,
+      { withAuth: false },
+    );
+
+    const form = document.querySelector("form");
+    expect(form).not.toBeNull();
+
+    expect(within(form!).getByLabelText("Email").closest(".MuiInputBase-root")).toHaveClass(
+      "Mui-disabled",
+    );
+    expect(within(form!).getByLabelText("Password").closest(".MuiInputBase-root")).toHaveClass(
+      "Mui-disabled",
+    );
+    expect(within(form!).getByRole("button", { name: /signing in/i })).toBeDisabled();
+  });
+
+  it("keeps submit disabled until email and password are valid", async () => {
+    renderWithProviders(<LoginFormHarness />, { withAuth: false });
+
+    const form = document.querySelector("form");
+    expect(form).not.toBeNull();
+
+    const submitButton = within(form!).getByRole("button", { name: /sign in/i });
+    const emailInput = within(form!).getByLabelText("Email");
+    const passwordInput = within(form!).getByLabelText("Password");
+
+    expect(submitButton).toBeDisabled();
+
+    fireEvent.change(emailInput, { target: { value: "not-an-email" } });
+    fireEvent.change(passwordInput, { target: { value: "secret123" } });
+    expect(submitButton).toBeDisabled();
+
+    fireEvent.change(emailInput, { target: { value: "user@seahavenind.com" } });
+    expect(submitButton).toBeEnabled();
+  });
+
+  it("submits credentials via onSubmit", async () => {
+    const onSubmit = vi.fn();
+
+    renderWithProviders(<LoginFormHarness onSubmit={onSubmit} />, { withAuth: false });
+
+    const form = document.querySelector("form");
+    expect(form).not.toBeNull();
+
+    fireEvent.change(within(form!).getByLabelText("Email"), {
+      target: { value: "user@seahavenind.com" },
+    });
+    fireEvent.change(within(form!).getByLabelText("Password"), {
+      target: { value: "secret123" },
+    });
+    fireEvent.click(within(form!).getByRole("button", { name: /sign in/i }));
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith(
+        { username: "user@seahavenind.com", password: "secret123" },
+        expect.anything(),
+      );
+    });
+  });
+});
diff --git a/src/test/app/(auth)/login.integration.test.tsx b/src/test/app/(auth)/login.integration.test.tsx
new file mode 100644
index 00000000..ffa9106f
--- /dev/null
+++ b/src/test/app/(auth)/login.integration.test.tsx
@@ -0,0 +1,168 @@
+import { screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Route, Routes } from "react-router";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import LoginPage from "@/app/(auth)/login";
+import * as authApi from "@/domain/auth/api/auth-api";
+import type { AuthUser } from "@/domain/auth/types/auth-user";
+import { renderWithProviders } from "@/test/test-utils";
+
+const { toastSuccessMock } = vi.hoisted(() => ({
+  toastSuccessMock: vi.fn(),
+}));
+
+const TEST_USER: AuthUser = {
+  token: "test-jwt-token",
+  expiration: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+  email: "user@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Test User",
+  id: 1,
+};
+
+vi.mock("@/domain/auth/api/auth-api", () => ({
+  getSession: vi.fn(),
+  login: vi.fn(),
+  logout: vi.fn(),
+  changePassword: vi.fn(),
+}));
+
+vi.mock("react-toastify", () => ({
+  toast: {
+    success: toastSuccessMock,
+    error: vi.fn(),
+    info: vi.fn(),
+  },
+}));
+
+function LoginRoutes() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/" element={<div data-testid="dashboard">Dashboard</div>} />
+    </Routes>
+  );
+}
+
+describe("LoginPage integration", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(authApi.getSession).mockResolvedValue(null);
+  });
+
+  it("keeps submit disabled until email and password are valid", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<LoginRoutes />, { route: "/login" });
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: "Welcome back" })).toBeInTheDocument();
+    });
+
+    const form = document.querySelector("form");
+    expect(form).not.toBeNull();
+
+    const submitButton = within(form!).getByRole("button", { name: /sign in/i });
+    const emailInput = within(form!).getByLabelText("Email");
+    const passwordInput = within(form!).getByLabelText("Password");
+
+    expect(submitButton).toBeDisabled();
+
+    await user.type(emailInput, "not-an-email");
+    await user.type(passwordInput, "secret123");
+    expect(submitButton).toBeDisabled();
+
+    await user.clear(emailInput);
+    await user.type(emailInput, "user@seahavenind.com");
+    expect(submitButton).toBeEnabled();
+  });
+
+  it("logs in successfully and navigates to dashboard", async () => {
+    const user = userEvent.setup();
+    vi.mocked(authApi.login).mockResolvedValue(TEST_USER);
+
+    renderWithProviders(<LoginRoutes />, { route: "/login" });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    });
+
+    const form = document.querySelector("form");
+    expect(form).not.toBeNull();
+    await user.type(within(form!).getByLabelText("Email"), "user@seahavenind.com");
+    await user.type(within(form!).getByLabelText("Password"), "secret123");
+    await user.click(within(form!).getByRole("button", { name: /sign in/i }));
+
+    await waitFor(() => {
+      expect(authApi.login).toHaveBeenCalledWith({
+        username: "user@seahavenind.com",
+        password: "secret123",
+      });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("dashboard")).toBeInTheDocument();
+    });
+
+    expect(screen.queryByRole("heading", { name: "Welcome back" })).not.toBeInTheDocument();
+    expect(toastSuccessMock).toHaveBeenCalledWith("Login successful!");
+  });
+
+  it("shows generic error message when login fails", async () => {
+    const user = userEvent.setup();
+    vi.mocked(authApi.login).mockRejectedValue(new Error("Invalid credentials"));
+
+    renderWithProviders(<LoginRoutes />, { route: "/login" });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    });
+
+    const form = document.querySelector("form");
+    expect(form).not.toBeNull();
+    await user.type(within(form!).getByLabelText("Email"), "user@seahavenind.com");
+    await user.type(within(form!).getByLabelText("Password"), "wrong-password");
+    await user.click(within(form!).getByRole("button", { name: /sign in/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Invalid email or password. Please try again.")).toBeInTheDocument();
+    });
+
+    expect(screen.getByRole("heading", { name: "Welcome back" })).toBeInTheDocument();
+  });
+
+  it("shows loading state while login is pending", async () => {
+    const user = userEvent.setup();
+    let resolveLogin: (value: AuthUser) => void = () => {};
+
+    vi.mocked(authApi.login).mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolveLogin = resolve;
+        }),
+    );
+
+    renderWithProviders(<LoginRoutes />, { route: "/login" });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    });
+
+    const form = document.querySelector("form");
+    expect(form).not.toBeNull();
+    await user.type(within(form!).getByLabelText("Email"), "user@seahavenind.com");
+    await user.type(within(form!).getByLabelText("Password"), "secret123");
+    await user.click(within(form!).getByRole("button", { name: /sign in/i }));
+
+    await waitFor(() => {
+      expect(within(form!).getByRole("button", { name: /signing in/i })).toBeDisabled();
+    });
+
+    resolveLogin(TEST_USER);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("dashboard")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/test/app/(protected)/dashboard/dashboard-page.test.tsx b/src/test/app/(protected)/dashboard/dashboard-page.test.tsx
new file mode 100644
index 00000000..5ad7396e
--- /dev/null
+++ b/src/test/app/(protected)/dashboard/dashboard-page.test.tsx
@@ -0,0 +1,265 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { DashboardRangeKey } from "@/domain/dashboard/types/dashboard-range";
+import { renderWithProviders } from "@/test/test-utils";
+
+const navigate = vi.fn();
+const statsRange = vi.fn<(range: DashboardRangeKey) => void>();
+const { workloadMock, performanceMock, authUser } = vi.hoisted(() => ({
+  workloadMock: vi.fn(),
+  performanceMock: vi.fn(),
+  authUser: { current: { id: "99", userRoles: "Admin" } as { id: string; userRoles: string } },
+}));
+
+const EMPTY_DISPATCHER_PAGE = { items: [], page: 1, pageSize: 10, totalDispatchers: 0 };
+
+vi.mock("react-router", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-router")>()),
+  useNavigate: () => navigate,
+}));
+
+// An Admin has `viewAllDispatchersOnDashboard`, so the scope picker and the
+// dispatcher tables render (SH-336).
+vi.mock("@/providers/auth-context", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/providers/auth-context")>()),
+  useAuthContext: () => ({ user: authUser.current }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-orders-list", () => ({
+  useWorkOrderUsers: () => ({ data: [], isLoading: false, isFetching: false, error: null }),
+}));
+
+vi.mock("@/domain/dashboard/use-cases/use-dashboard-workload", () => ({
+  useDashboardWorkload: workloadMock,
+}));
+
+vi.mock("@/domain/dashboard/use-cases/use-dashboard-performance", () => ({
+  useDashboardPerformance: performanceMock,
+}));
+
+vi.mock("@/domain/dashboard/use-cases/use-dashboard-regions", () => ({
+  useDashboardRegions: () => ({ data: [], isLoading: false, isFetching: false, error: null }),
+}));
+
+vi.mock("@/domain/dashboard/use-cases/use-dashboard-vendor-insights", () => ({
+  useDashboardVendorInsights: () => ({
+    data: [],
+    isLoading: false,
+    isFetching: false,
+    error: null,
+  }),
+}));
+
+vi.mock("@/domain/dashboard/use-cases/use-dashboard-trend", () => ({
+  useDashboardTrend: () => ({
+    data: { granularity: null, points: [] },
+    isLoading: false,
+    isFetching: false,
+    error: null,
+  }),
+}));
+
+const statsData = {
+  scheduledTomorrow: 3,
+  pendingUplifts: 5,
+  avetaPending: 0,
+  breakdown: [
+    { status: "PM", count: 7 },
+    { status: "Completed", count: 0 },
+  ],
+};
+
+vi.mock("@/domain/dashboard/use-cases/use-dashboard-stats", () => ({
+  useDashboardStats: (range: DashboardRangeKey) => {
+    statsRange(range);
+    return { data: statsData, isLoading: false, isFetching: false, error: null };
+  },
+}));
+
+import DashboardPage from "@/app/(protected)/dashboard";
+import {
+  avetaPendingDrilldownSearch,
+  scheduledTomorrowDrilldownSearch,
+} from "@/domain/dashboard/utils/work-order-drilldown-links";
+import { addDaysIso, businessTodayIso } from "@/domain/dashboard/utils/dashboard-range-utils";
+
+function renderDashboard() {
+  return renderWithProviders(<DashboardPage />);
+}
+
+describe("DashboardPage", () => {
+  beforeEach(() => {
+    authUser.current = { id: "99", userRoles: "Admin" };
+    navigate.mockReset();
+    statsRange.mockReset();
+    workloadMock.mockReset();
+    performanceMock.mockReset();
+    workloadMock.mockReturnValue({
+      data: EMPTY_DISPATCHER_PAGE,
+      isLoading: false,
+      isFetching: false,
+      error: null,
+    });
+    performanceMock.mockReturnValue({
+      data: EMPTY_DISPATCHER_PAGE,
+      isLoading: false,
+      isFetching: false,
+      error: null,
+    });
+  });
+
+  it("renders the prototype title, range options, and card titles", () => {
+    renderDashboard();
+
+    expect(screen.getByRole("heading", { name: "Dashboard" })).toBeInTheDocument();
+    for (const label of ["This week", "Last 3 months", "Today", "All time"]) {
+      expect(screen.getByRole("button", { name: label })).toBeInTheDocument();
+    }
+    for (const title of [
+      "Scheduled Tomorrow",
+      "Pending Uplifts",
+      "Aveta Pending",
+      "Work Order Breakdown",
+      "Status Distribution",
+      "Dispatcher Workload",
+      "Dispatcher Performance",
+      "Work Orders by Region",
+      "Vendor Insights",
+    ]) {
+      expect(screen.getByText(title)).toBeInTheDocument();
+    }
+    expect(statsRange).toHaveBeenCalledWith("this-week");
+  });
+
+  it("shows a Dispatcher the static My WOs scope and hides the dispatcher tables", () => {
+    authUser.current = { id: "7", userRoles: "Dispatcher" };
+
+    renderDashboard();
+
+    expect(screen.getByText("My WOs")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "All dispatchers" })).toBeNull();
+    expect(screen.queryByText("Dispatcher Workload")).toBeNull();
+    expect(screen.queryByText("Dispatcher Performance")).toBeNull();
+    // Their scope is server-scoped, so the tables are never even queried.
+    expect(workloadMock).toHaveBeenCalledWith("this-week", 1, null, false);
+  });
+
+  it("lets an Admin open the dispatcher-scope picker", () => {
+    renderDashboard();
+
+    expect(screen.getByRole("button", { name: /All dispatchers/ })).toBeInTheDocument();
+    expect(screen.getByText("Dispatcher Workload")).toBeInTheDocument();
+    expect(workloadMock).toHaveBeenCalledWith("this-week", 1, null, true);
+  });
+
+  it("exposes positive KPI cards as keyboard-accessible drill-downs", () => {
+    renderDashboard();
+
+    const tomorrowCard = screen.getByRole("button", { name: /Scheduled Tomorrow/ });
+    expect(tomorrowCard).toBeInTheDocument();
+    fireEvent.click(tomorrowCard);
+
+    const today = businessTodayIso();
+    expect(navigate).toHaveBeenCalledWith(
+      `/workorders?${scheduledTomorrowDrilldownSearch(today).toString()}`,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /Pending Uplifts/ }));
+    expect(navigate).toHaveBeenCalledWith("/uplifts");
+  });
+
+  it("keeps zero counts inert", () => {
+    renderDashboard();
+
+    expect(screen.queryByRole("button", { name: /Aveta Pending/ })).toBeNull();
+
+    fireEvent.click(screen.getByText("Aveta Pending"));
+    expect(navigate).not.toHaveBeenCalled();
+
+    const inertRow = screen.getByText("Completed");
+    fireEvent.click(inertRow);
+    expect(navigate).not.toHaveBeenCalled();
+  });
+
+  it("drills the breakdown status into filtered work orders", () => {
+    renderDashboard();
+
+    fireEvent.click(screen.getByText("PM"));
+
+    const calls = navigate.mock.calls;
+    const [url] = calls[calls.length - 1] ?? [];
+    expect(String(url)).toContain("/workorders?");
+    expect(String(url)).toContain("types=PM");
+  });
+
+  it("switches the stats range from the toggle", () => {
+    renderDashboard();
+
+    fireEvent.click(screen.getByRole("button", { name: "Today" }));
+
+    expect(statsRange).toHaveBeenCalledWith("today");
+  });
+
+  it("shows the documented empty states when datasets are empty", () => {
+    renderDashboard();
+
+    // Region, Status Distribution, and Trend share this empty copy.
+    expect(screen.getAllByText("No work orders match the current filters.")).toHaveLength(3);
+    expect(screen.getAllByText("No dispatchers are set up yet.")).toHaveLength(2);
+    expect(screen.getByText("No active vendor has any work orders yet.")).toBeInTheDocument();
+  });
+
+  it("pages the dispatcher tables at 10 rows and re-queries on page change", () => {
+    const rows = Array.from({ length: 10 }, (_, index) => ({
+      dispatcherId: String(index + 1),
+      dispatcherName: `Dispatcher ${index + 1}`,
+      openWorkOrders: 1,
+      totalWorkOrders: 2,
+    }));
+    workloadMock.mockReturnValue({
+      data: { items: rows, page: 1, pageSize: 10, totalDispatchers: 23 },
+      isLoading: false,
+      isFetching: false,
+      error: null,
+    });
+
+    renderDashboard();
+
+    // 23 dispatchers at 10/page = 3 pages; selecting page 2 re-queries with page 2.
+    fireEvent.click(screen.getByRole("button", { name: "Go to page 2" }));
+
+    const requestedPages = workloadMock.mock.calls.map((call) => call[1]);
+    expect(requestedPages).toContain(2);
+  });
+
+  it("resets the dispatcher page when the range changes", () => {
+    const rows = Array.from({ length: 10 }, (_, index) => ({
+      dispatcherId: String(index + 1),
+      dispatcherName: `Dispatcher ${index + 1}`,
+      openWorkOrders: 1,
+      totalWorkOrders: 2,
+    }));
+    workloadMock.mockReturnValue({
+      data: { items: rows, page: 2, pageSize: 10, totalDispatchers: 23 },
+      isLoading: false,
+      isFetching: false,
+      error: null,
+    });
+
+    renderDashboard();
+
+    fireEvent.click(screen.getByRole("button", { name: "Go to page 2" }));
+    fireEvent.click(screen.getByRole("button", { name: "Today" }));
+
+    const calls = workloadMock.mock.calls;
+    const lastRequestedPage = calls[calls.length - 1]?.[1];
+    expect(lastRequestedPage).toBe(1);
+  });
+
+  it("keeps drilldown dates deterministic on the business clock", () => {
+    const today = businessTodayIso();
+
+    expect(scheduledTomorrowDrilldownSearch(today).get("dateFrom")).toBe(addDaysIso(today, 1));
+    expect(avetaPendingDrilldownSearch(today).get("aveta")).toBe("1");
+  });
+});
diff --git a/src/test/app/(protected)/dashboard/dispatcher-table-pager.test.tsx b/src/test/app/(protected)/dashboard/dispatcher-table-pager.test.tsx
new file mode 100644
index 00000000..4e011bd6
--- /dev/null
+++ b/src/test/app/(protected)/dashboard/dispatcher-table-pager.test.tsx
@@ -0,0 +1,39 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DispatcherTablePager } from "@/app/(protected)/dashboard/_components/dispatcher-table-pager";
+
+describe("DispatcherTablePager", () => {
+  it("renders nothing when everything fits on one page", () => {
+    const { container } = render(
+      <DispatcherTablePager
+        page={1}
+        pageSize={10}
+        totalDispatchers={10}
+        onPageChange={vi.fn()}
+        label="pager"
+      />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders a page per 10 rows and reports the selected page", () => {
+    const onPageChange = vi.fn();
+    render(
+      <DispatcherTablePager
+        page={1}
+        pageSize={10}
+        totalDispatchers={23}
+        onPageChange={onPageChange}
+        label="pager"
+      />,
+    );
+
+    // 23 rows at 10/page = 3 pages.
+    expect(screen.getByRole("button", { name: "Go to page 3" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Go to page 4" })).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "Go to page 2" }));
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+});
diff --git a/src/test/app/(protected)/employees/employee-form-job-title.test.tsx b/src/test/app/(protected)/employees/employee-form-job-title.test.tsx
new file mode 100644
index 00000000..afa17e88
--- /dev/null
+++ b/src/test/app/(protected)/employees/employee-form-job-title.test.tsx
@@ -0,0 +1,62 @@
+import { useForm } from "react-hook-form";
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { JobTitleSelect } from "@/app/(protected)/employees/_components/job-title-select";
+import type { EmployeeFormValues } from "@/domain/employees/schemas/employee-schema";
+import { transformToBackend } from "@/domain/employees/mappers/employee-mapper";
+import type { Employee } from "@/domain/employees/types/employee";
+import { renderWithProviders } from "@/test/test-utils";
+
+function JobTitleSelectHarness({
+  onSubmit = vi.fn(),
+}: {
+  onSubmit?: (values: EmployeeFormValues) => void;
+}) {
+  const { control, setValue, handleSubmit } = useForm<EmployeeFormValues>({
+    defaultValues: {
+      jobTitleId: null,
+      jobTitle: "",
+    } as EmployeeFormValues,
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <JobTitleSelect control={control} setValue={setValue} />
+      <button type="submit">Save</button>
+    </form>
+  );
+}
+
+describe("JobTitleSelect", () => {
+  it("submits numeric JobTitleId when a job title is selected", async () => {
+    const onSubmit = vi.fn();
+
+    renderWithProviders(<JobTitleSelectHarness onSubmit={onSubmit} />, { withAuth: false });
+
+    const form = document.querySelector("form");
+    expect(form).not.toBeNull();
+
+    fireEvent.mouseDown(within(form!).getByLabelText("Job Title"));
+    fireEvent.click(await screen.findByRole("option", { name: "Technician" }));
+    fireEvent.click(within(form!).getByRole("button", { name: "Save" }));
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith(
+        expect.objectContaining({
+          jobTitleId: 1,
+          jobTitle: "Technician",
+        }),
+        expect.anything(),
+      );
+    });
+
+    const payload = transformToBackend({
+      firstName: "Jane",
+      lastName: "Doe",
+      jobTitleId: 1,
+      jobTitle: "Technician",
+    } as Employee);
+
+    expect(payload.JobTitleId).toBe(1);
+  });
+});
diff --git a/src/test/app/(protected)/locations/location-contacts-field-array.test.tsx b/src/test/app/(protected)/locations/location-contacts-field-array.test.tsx
new file mode 100644
index 00000000..60444e29
--- /dev/null
+++ b/src/test/app/(protected)/locations/location-contacts-field-array.test.tsx
@@ -0,0 +1,178 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { LocationContactsFieldArray } from "@/app/(protected)/locations/_components/location-contacts-field-array";
+import {
+  locationDefaultValues,
+  locationSchema,
+  type LocationFormValues,
+} from "@/domain/locations/schemas/location-schema";
+import { renderWithProviders } from "@/test/test-utils";
+
+const dataTransferStub = {
+  setData: vi.fn(),
+  effectAllowed: "none" as DataTransfer["effectAllowed"],
+};
+
+function ContactsHarness({
+  initialContacts,
+  onSubmit = vi.fn(),
+}: {
+  initialContacts: LocationFormValues["contacts"];
+  onSubmit?: (values: LocationFormValues) => void;
+}) {
+  const {
+    control,
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<LocationFormValues>({
+    resolver: zodResolver(locationSchema),
+    defaultValues: {
+      ...locationDefaultValues,
+      name: "Dallas DC",
+      address: "3811 Distribution Dr",
+      city: "Dallas",
+      state: "TX",
+      zipCode: "70068",
+      contactEmail: "jane@example.com",
+      contacts: initialContacts,
+    },
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} noValidate>
+      <LocationContactsFieldArray control={control} errors={errors} register={register} />
+      <button type="submit">Save</button>
+    </form>
+  );
+}
+
+function nameInputs(): HTMLInputElement[] {
+  return screen.getAllByLabelText(/^Contact Name/) as HTMLInputElement[];
+}
+
+/** 1-based handle position: `handleFor(2)` is the second row's drag handle. */
+function handleFor(position: number): HTMLElement {
+  return screen.getByRole("button", {
+    name: `Reorder contact ${position}. Use arrow up or down to move.`,
+  });
+}
+
+describe("LocationContactsFieldArray", () => {
+  it("marks the first row as Main and disables removal when only one remains", () => {
+    renderWithProviders(
+      <ContactsHarness initialContacts={[{ name: "Jane", phone: "(421) 433-0032" }]} />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByText("Main")).toBeInTheDocument();
+    expect(screen.getByLabelText(/^Contact Name \(Main\)/)).toHaveValue("Jane");
+    expect(screen.getByLabelText("Remove contact 1")).toBeDisabled();
+  });
+
+  it("adds and removes contact rows", () => {
+    renderWithProviders(
+      <ContactsHarness initialContacts={[{ name: "Jane", phone: "(421) 433-0032" }]} />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /add contact/i }));
+
+    expect(nameInputs()).toHaveLength(2);
+    expect(screen.getByLabelText("Remove contact 1")).toBeEnabled();
+    expect(screen.getByText("Main")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText("Remove contact 2"));
+    expect(nameInputs()).toHaveLength(1);
+    expect(screen.getByLabelText("Remove contact 1")).toBeDisabled();
+  });
+
+  it("reorders with keyboard ArrowUp and keeps focus on the moved handle", async () => {
+    renderWithProviders(
+      <ContactsHarness
+        initialContacts={[
+          { id: 11, name: "Jane", phone: "(421) 433-0032" },
+          { id: 12, name: "Bob", phone: "(421) 433-0033" },
+        ]}
+      />,
+      { withAuth: false },
+    );
+
+    expect(nameInputs().map((input) => input.value)).toEqual(["Jane", "Bob"]);
+
+    const bobHandle = handleFor(2);
+    bobHandle.focus();
+    fireEvent.keyDown(bobHandle, { key: "ArrowUp" });
+
+    expect(nameInputs().map((input) => input.value)).toEqual(["Bob", "Jane"]);
+    await waitFor(() => {
+      expect(document.activeElement).toBe(handleFor(1));
+    });
+  });
+
+  it("ignores ArrowDown on the last row", () => {
+    renderWithProviders(
+      <ContactsHarness
+        initialContacts={[
+          { name: "Jane", phone: "(421) 433-0032" },
+          { name: "Bob", phone: "(421) 433-0033" },
+        ]}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.keyDown(handleFor(2), { key: "ArrowDown" });
+
+    expect(nameInputs().map((input) => input.value)).toEqual(["Jane", "Bob"]);
+  });
+
+  it("reorders with native drag events from the handle", () => {
+    renderWithProviders(
+      <ContactsHarness
+        initialContacts={[
+          { name: "Jane", phone: "(421) 433-0032" },
+          { name: "Bob", phone: "(421) 433-0033" },
+        ]}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.dragStart(handleFor(1), { dataTransfer: dataTransferStub });
+    fireEvent.drop(nameInputs()[1].closest("div") as HTMLElement, {
+      dataTransfer: dataTransferStub,
+    });
+
+    expect(nameInputs().map((input) => input.value)).toEqual(["Bob", "Jane"]);
+  });
+
+  it("submits contacts in displayed order", async () => {
+    const onSubmit = vi.fn();
+    renderWithProviders(
+      <ContactsHarness
+        initialContacts={[
+          { id: 11, name: "Jane", phone: "(421) 433-0032" },
+          { id: 12, name: "Bob", phone: "(421) 433-0033" },
+        ]}
+        onSubmit={onSubmit}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.keyDown(handleFor(2), { key: "ArrowUp" });
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledTimes(1);
+    });
+    expect(onSubmit.mock.calls[0][0]).toEqual(
+      expect.objectContaining({
+        contacts: [
+          { id: 12, name: "Bob", phone: "(421) 433-0033" },
+          { id: 11, name: "Jane", phone: "(421) 433-0032" },
+        ],
+      }),
+    );
+  });
+});
diff --git a/src/test/app/(protected)/locations/location-form-state.test.tsx b/src/test/app/(protected)/locations/location-form-state.test.tsx
new file mode 100644
index 00000000..23b716a3
--- /dev/null
+++ b/src/test/app/(protected)/locations/location-form-state.test.tsx
@@ -0,0 +1,103 @@
+import { screen } from "@testing-library/react";
+import { Route, Routes } from "react-router";
+import { describe, expect, it, vi } from "vitest";
+import LocationFormPage from "@/app/(protected)/locations/_components/location-form";
+import { renderWithProviders } from "@/test/test-utils";
+
+const useLocationDetail = vi.fn();
+const useAccountsList = vi.fn();
+const useCreateLocation = vi.fn();
+const useUpdateLocation = vi.fn();
+
+vi.mock("@/domain/locations/use-cases/use-location-detail", () => ({
+  useLocationDetail: (...args: unknown[]) => useLocationDetail(...args),
+}));
+
+vi.mock("@/domain/accounts/use-cases/use-accounts-list", () => ({
+  useAccountsList: (...args: unknown[]) => useAccountsList(...args),
+}));
+
+vi.mock("@/domain/locations/use-cases/use-create-location", () => ({
+  useCreateLocation: (...args: unknown[]) => useCreateLocation(...args),
+}));
+
+vi.mock("@/domain/locations/use-cases/use-update-location", () => ({
+  useUpdateLocation: (...args: unknown[]) => useUpdateLocation(...args),
+}));
+
+function mockHooks(location: Record<string, unknown> | null) {
+  useLocationDetail.mockReturnValue({
+    data: location,
+    isLoading: false,
+    error: null,
+  });
+  useAccountsList.mockReturnValue({
+    data: { items: [], totalCount: 0, page: 1, pageSize: 50 },
+    isLoading: false,
+  });
+  useCreateLocation.mockReturnValue({ mutate: vi.fn(), isPending: false });
+  useUpdateLocation.mockReturnValue({ mutate: vi.fn(), isPending: false });
+}
+
+function renderEditPage(locationId: string) {
+  return renderWithProviders(
+    <Routes>
+      <Route path="/locations/edit/:id" element={<LocationFormPage />} />
+    </Routes>,
+    {
+      route: `/locations/edit/${locationId}`,
+      routerProps: { initialEntries: [`/locations/edit/${locationId}`] },
+      withAuth: false,
+    },
+  );
+}
+
+describe("LocationFormPage state field", () => {
+  it("normalizes legacy API state values for edit", () => {
+    mockHooks({
+      id: "1",
+      name: "Dallas DC",
+      address: "3811 Distribution Dr",
+      city: "Dallas",
+      state: "texas",
+      zipCode: "70068",
+      phone: "(421) 433-0032",
+      contact: "Jane",
+      contactEmail: "jane@example.com",
+      status: "Active",
+      accountId: "7",
+    });
+
+    renderEditPage("1");
+
+    const stateInput = screen.getByLabelText(/^State/);
+    expect(stateInput).toHaveValue("Texas (TX)");
+    expect(screen.getByText("Area: West")).toBeInTheDocument();
+  });
+
+  it("normalizes code values and keeps their derived area", () => {
+    mockHooks({
+      id: "2",
+      state: "IL",
+      status: "Active",
+    });
+
+    renderEditPage("2");
+
+    expect(screen.getByLabelText(/^State/)).toHaveValue("Illinois (IL)");
+    expect(screen.getByText("Area: Central")).toBeInTheDocument();
+  });
+
+  it("starts empty in create mode with no implicit IL default", () => {
+    mockHooks(null);
+
+    renderWithProviders(<LocationFormPage />, {
+      route: "/locations/new",
+      routerProps: { initialEntries: ["/locations/new"] },
+      withAuth: false,
+    });
+
+    expect(screen.getByLabelText(/^State/)).toHaveValue("");
+    expect(screen.queryByText(/Area: /)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/locations/locations-contacts-cell.test.tsx b/src/test/app/(protected)/locations/locations-contacts-cell.test.tsx
new file mode 100644
index 00000000..e0258626
--- /dev/null
+++ b/src/test/app/(protected)/locations/locations-contacts-cell.test.tsx
@@ -0,0 +1,76 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { LocationsContactsCell } from "@/app/(protected)/locations/_components/locations-contacts-cell";
+import type { LocationListItem } from "@/domain/locations/types/location";
+import { renderWithProviders } from "@/test/test-utils";
+
+function rowWithContacts(overrides: Partial<LocationListItem>): LocationListItem {
+  return {
+    id: 1,
+    name: "Dallas DC",
+    address: "3811 Distribution Dr",
+    city: "Dallas",
+    state: "TX",
+    zipCode: "70068",
+    phone: "(421) 433-0032",
+    contact: "Jane",
+    contactEmail: "jane@example.com",
+    status: "Active",
+    accountId: 7,
+    ...overrides,
+  };
+}
+
+describe("LocationsContactsCell", () => {
+  it("renders only the main contact name when a single contact exists", () => {
+    renderWithProviders(
+      <LocationsContactsCell
+        row={rowWithContacts({ contacts: [{ name: "Jane", phone: "(421) 433-0032" }] })}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByText("Jane")).toBeInTheDocument();
+    expect(screen.queryByText(/^\+\d+$/)).not.toBeInTheDocument();
+  });
+
+  it("shows a +N chip and lists remaining contact names on hover", async () => {
+    renderWithProviders(
+      <LocationsContactsCell
+        row={rowWithContacts({
+          contacts: [
+            { name: "Jane", phone: "(421) 433-0032" },
+            { name: "Bob", phone: "(421) 433-0033" },
+            { name: "Carol", phone: "(421) 433-0034" },
+          ],
+        })}
+      />,
+      { withAuth: false },
+    );
+
+    const chip = screen.getByText("+2");
+    expect(chip).toBeInTheDocument();
+    expect(screen.getByLabelText("2 more contacts: Bob, Carol")).toBeInTheDocument();
+
+    fireEvent.mouseOver(chip);
+    expect(await screen.findByText("Bob, Carol")).toBeInTheDocument();
+  });
+
+  it("falls back to the legacy contact field without a chip", () => {
+    renderWithProviders(<LocationsContactsCell row={rowWithContacts({})} />, {
+      withAuth: false,
+    });
+
+    expect(screen.getByText("Jane")).toBeInTheDocument();
+    expect(screen.queryByText(/^\+\d+$/)).not.toBeInTheDocument();
+  });
+
+  it("renders a placeholder when no contact exists", () => {
+    renderWithProviders(
+      <LocationsContactsCell row={rowWithContacts({ contact: "", phone: "" })} />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByText("—")).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/locations/locations-list-area.test.tsx b/src/test/app/(protected)/locations/locations-list-area.test.tsx
new file mode 100644
index 00000000..fb45e28c
--- /dev/null
+++ b/src/test/app/(protected)/locations/locations-list-area.test.tsx
@@ -0,0 +1,139 @@
+import { fireEvent, screen, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import LocationsListPage from "@/app/(protected)/locations/index";
+import { expandAreasToStateCodes } from "@/data/areas";
+import { renderWithProviders } from "@/test/test-utils";
+
+const useLocationsList = vi.fn();
+const useDeleteLocation = vi.fn();
+
+vi.mock("@/domain/locations/use-cases/use-locations-list", () => ({
+  useLocationsList: (...args: unknown[]) => useLocationsList(...args),
+}));
+
+vi.mock("@/domain/locations/use-cases/use-delete-location", () => ({
+  useDeleteLocation: (...args: unknown[]) => useDeleteLocation(...args),
+}));
+
+vi.mock("@/hooks/use-debounce", () => ({
+  useDebounce: (value: string) => value,
+}));
+
+const rows = [
+  {
+    id: 1,
+    name: "Dallas DC",
+    address: "3811 Distribution Dr",
+    city: "Dallas",
+    state: "TX",
+    zipCode: "70068",
+    phone: "(421) 433-0032",
+    contact: "Jane",
+    contactEmail: "jane@example.com",
+    status: "Active",
+    accountId: 7,
+  },
+  {
+    id: 2,
+    name: "Chicago HQ",
+    address: "100 Main St",
+    city: "Chicago",
+    state: "Illinois",
+    zipCode: "60601",
+    phone: "(312) 555-0100",
+    contact: "Bob",
+    contactEmail: "bob@example.com",
+    status: "Active",
+    accountId: 8,
+  },
+];
+
+function lastListParams() {
+  const calls = useLocationsList.mock.calls;
+  return calls[calls.length - 1][0] as Record<string, unknown>;
+}
+
+function renderListPage() {
+  useDeleteLocation.mockReturnValue({ mutate: vi.fn(), isPending: false });
+  useLocationsList.mockReturnValue({
+    data: { items: rows, totalCount: 30, page: 1, pageSize: 12 },
+    isLoading: false,
+    isFetching: false,
+    error: null,
+  });
+
+  return renderWithProviders(<LocationsListPage />, { route: "/locations", withAuth: false });
+}
+
+describe("LocationsListPage area wiring", () => {
+  it("shows the state abbreviation with the area as secondary text", () => {
+    renderListPage();
+
+    const table = screen.getByRole("table");
+    expect(within(table).getByText("TX")).toBeInTheDocument();
+    expect(within(table).getByText("West")).toBeInTheDocument();
+    expect(within(table).getByText("IL")).toBeInTheDocument();
+    expect(within(table).getByText("Central")).toBeInTheDocument();
+    expect(within(table).queryByText("Illinois")).not.toBeInTheDocument();
+  });
+
+  it("sends no states filter while the area facet is empty", () => {
+    renderListPage();
+
+    expect(lastListParams()).toEqual({ search: "", page: 1, pageSize: 12 });
+  });
+
+  it("offers the four zones in canonical order", () => {
+    renderListPage();
+
+    fireEvent.mouseDown(screen.getByLabelText("Area"));
+
+    const options = screen.getAllByRole("option").map((option) => option.textContent ?? "");
+    expect(options).toEqual(["East", "Central", "West", "California"]);
+  });
+
+  it("expands selected areas to state codes and resets the page", () => {
+    renderListPage();
+
+    fireEvent.click(screen.getByRole("button", { name: "Go to next page" }));
+    expect(lastListParams()).toMatchObject({ page: 2 });
+
+    fireEvent.mouseDown(screen.getByLabelText("Area"));
+    fireEvent.click(screen.getByRole("option", { name: "East" }));
+
+    expect(lastListParams()).toEqual({
+      search: "",
+      page: 1,
+      pageSize: 12,
+      states: expandAreasToStateCodes(["East"]),
+    });
+    expect(lastListParams().states).toHaveLength(16);
+
+    fireEvent.mouseDown(screen.getByLabelText("Area"));
+    fireEvent.click(screen.getByRole("option", { name: "California" }));
+
+    expect(lastListParams()).toEqual({
+      search: "",
+      page: 1,
+      pageSize: 12,
+      states: expandAreasToStateCodes(["East", "California"]),
+    });
+  });
+
+  it("preserves search filtering alongside the area facet", () => {
+    renderListPage();
+
+    fireEvent.mouseDown(screen.getByLabelText("Area"));
+    fireEvent.click(screen.getByRole("option", { name: "West" }));
+    fireEvent.change(screen.getByPlaceholderText("Search locations..."), {
+      target: { value: "dal" },
+    });
+
+    expect(lastListParams()).toEqual({
+      search: "dal",
+      page: 1,
+      pageSize: 12,
+      states: expandAreasToStateCodes(["West"]),
+    });
+  });
+});
diff --git a/src/test/app/(protected)/locations/state-select.test.tsx b/src/test/app/(protected)/locations/state-select.test.tsx
new file mode 100644
index 00000000..68c3fa51
--- /dev/null
+++ b/src/test/app/(protected)/locations/state-select.test.tsx
@@ -0,0 +1,136 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { StateSelect } from "@/app/(protected)/locations/_components/state-select";
+import {
+  locationDefaultValues,
+  locationSchema,
+  type LocationFormValues,
+} from "@/domain/locations/schemas/location-schema";
+import { renderWithProviders } from "@/test/test-utils";
+
+function StateSelectHarness({
+  onSubmit = vi.fn(),
+}: {
+  onSubmit?: (values: LocationFormValues) => void;
+}) {
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LocationFormValues>({
+    resolver: zodResolver(locationSchema),
+    defaultValues: {
+      ...locationDefaultValues,
+      name: "Dallas DC",
+      address: "3811 Distribution Dr",
+      city: "Dallas",
+      zipCode: "70068",
+      contacts: [{ name: "Jane", phone: "(421) 433-0032" }],
+      contactEmail: "jane@example.com",
+      status: "Active",
+    },
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} noValidate>
+      <StateSelect control={control} error={errors.state} />
+      <button type="submit">Save</button>
+    </form>
+  );
+}
+
+function openOptions() {
+  const input = screen.getByRole("combobox");
+  input.focus();
+  fireEvent.mouseDown(input);
+  return input;
+}
+
+describe("StateSelect", () => {
+  it("starts empty with no implicit default state", () => {
+    renderWithProviders(<StateSelectHarness />, { withAuth: false });
+
+    expect(screen.getByRole("combobox")).toHaveValue("");
+    expect(screen.queryByText("Area: ")).not.toBeInTheDocument();
+  });
+
+  it("shows searchable Name (CODE) options and no free-text entries", async () => {
+    renderWithProviders(<StateSelectHarness />, { withAuth: false });
+    const input = openOptions();
+
+    const options = await screen.findAllByRole("option");
+    expect(options).toHaveLength(50);
+    expect(screen.getByRole("option", { name: "Texas (TX)" })).toBeInTheDocument();
+    expect(screen.getByRole("option", { name: "California (CA)" })).toBeInTheDocument();
+
+    fireEvent.change(input, { target: { value: "mass" } });
+    await screen.findAllByRole("option");
+    expect(screen.getByRole("option", { name: "Massachusetts (MA)" })).toBeInTheDocument();
+    expect(screen.getAllByRole("option")).toHaveLength(1);
+
+    fireEvent.change(input, { target: { value: "Republic of Texas" } });
+    expect(screen.queryByRole("option")).not.toBeInTheDocument();
+  });
+
+  it("selects by search and shows the Area helper immediately", async () => {
+    const onSubmit = vi.fn();
+    renderWithProviders(<StateSelectHarness onSubmit={onSubmit} />, { withAuth: false });
+    const input = openOptions();
+
+    fireEvent.change(input, { target: { value: "texas" } });
+    fireEvent.click(await screen.findByRole("option", { name: "Texas (TX)" }));
+
+    expect(input).toHaveValue("Texas (TX)");
+    expect(screen.getByText("Area: West")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith(
+        expect.objectContaining({ state: "TX" }),
+        expect.anything(),
+      );
+    });
+  });
+
+  it("is keyboard accessible (arrow + enter selection)", async () => {
+    const onSubmit = vi.fn();
+    renderWithProviders(<StateSelectHarness onSubmit={onSubmit} />, { withAuth: false });
+    const input = screen.getByRole("combobox");
+
+    input.focus();
+    fireEvent.change(input, { target: { value: "ohio" } });
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    expect(input).toHaveValue("Ohio (OH)");
+    expect(screen.getByText("Area: Central")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith(
+        expect.objectContaining({ state: "OH" }),
+        expect.anything(),
+      );
+    });
+  });
+
+  it("requires a state and rejects free text on submit", async () => {
+    const onSubmit = vi.fn();
+    renderWithProviders(<StateSelectHarness onSubmit={onSubmit} />, { withAuth: false });
+
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+    expect(await screen.findByText("State is required")).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+
+    const input = screen.getByRole("combobox");
+    input.focus();
+    fireEvent.change(input, { target: { value: "NotAState" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+
+    await screen.findByText("State is required");
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/pmschedules/pm-schedules-list-actions.test.tsx b/src/test/app/(protected)/pmschedules/pm-schedules-list-actions.test.tsx
new file mode 100644
index 00000000..efb56316
--- /dev/null
+++ b/src/test/app/(protected)/pmschedules/pm-schedules-list-actions.test.tsx
@@ -0,0 +1,93 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import PmSchedulesListPage from "@/app/(protected)/pmschedules/index";
+// Static import: a dynamic import inside the test transforms the edit page's
+// module graph against the 5s test budget, which times out under load.
+import EditPage from "@/app/(protected)/pmschedules/edit/[id]";
+import { renderWithProviders } from "@/test/test-utils";
+
+const usePmSchedulesList = vi.fn();
+const useDeletePmSchedule = vi.fn();
+
+vi.mock("@/domain/pm-schedules/use-cases/use-pm-schedules-list", () => ({
+  usePmSchedulesList: (...args: unknown[]) => usePmSchedulesList(...args),
+}));
+
+vi.mock("@/domain/pm-schedules/use-cases/use-delete-pm-schedule", () => ({
+  useDeletePmSchedule: (...args: unknown[]) => useDeletePmSchedule(...args),
+}));
+
+vi.mock("@/hooks/use-debounce", () => ({
+  useDebounce: (value: string) => value,
+}));
+
+const mockRow = {
+  id: 1,
+  name: "Quarterly HVAC",
+  frequency: "Quarterly",
+  startDate: "2026-01-01",
+  isActive: true,
+  asset: "Unit A",
+  location: "Building 1",
+};
+
+describe("PmSchedulesListPage actions", () => {
+  it("does not render edit or delete actions when capabilities are disabled", () => {
+    useDeletePmSchedule.mockReturnValue({
+      mutate: vi.fn(),
+      isPending: false,
+    });
+    usePmSchedulesList.mockReturnValue({
+      data: {
+        items: [mockRow],
+        totalCount: 1,
+        page: 1,
+        pageSize: 12,
+      },
+      isLoading: false,
+      isFetching: false,
+      error: null,
+    });
+
+    renderWithProviders(<PmSchedulesListPage />, { route: "/pmschedules", withAuth: false });
+
+    expect(screen.queryByLabelText("Edit PM schedule")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("Delete PM schedule")).not.toBeInTheDocument();
+    expect(screen.queryByRole("columnheader", { name: "Actions" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Quarterly HVAC" })).not.toBeInTheDocument();
+    expect(screen.getByText("Quarterly HVAC")).toBeInTheDocument();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("still renders create when canCreate is enabled", () => {
+    useDeletePmSchedule.mockReturnValue({
+      mutate: vi.fn(),
+      isPending: false,
+    });
+    usePmSchedulesList.mockReturnValue({
+      data: { items: [], totalCount: 0, page: 1, pageSize: 12 },
+      isLoading: false,
+      isFetching: false,
+      error: null,
+    });
+
+    renderWithProviders(<PmSchedulesListPage />, { route: "/pmschedules", withAuth: false });
+
+    expect(screen.getByRole("button", { name: "+ New PM Schedule" })).toBeInTheDocument();
+  });
+});
+
+describe("PmScheduleEditUnavailablePage", () => {
+  it("shows unavailable message instead of edit form when canEdit is false", () => {
+    renderWithProviders(<EditPage />, {
+      route: "/pmschedules/edit/1",
+      routerProps: { initialEntries: ["/pmschedules/edit/1"] },
+      withAuth: false,
+    });
+
+    expect(screen.getByText(/PM Schedule editing is unavailable/i)).toBeInTheDocument();
+    expect(screen.getByText(/PMSchedule\/GetById/i)).toBeInTheDocument();
+    expect(screen.queryByRole("heading", { name: "Edit PM Schedule" })).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Back to PM Schedules" })).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/team-members/add-team-member-dialog.test.tsx b/src/test/app/(protected)/team-members/add-team-member-dialog.test.tsx
new file mode 100644
index 00000000..8bd47668
--- /dev/null
+++ b/src/test/app/(protected)/team-members/add-team-member-dialog.test.tsx
@@ -0,0 +1,104 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "@/test/test-utils";
+import { AddTeamMemberDialog } from "@/app/(protected)/team-members/_components/add-team-member-dialog";
+import { useCreateTeamMember } from "@/domain/team-members/use-cases/use-create-team-member";
+
+vi.mock("@/domain/team-members/use-cases/use-create-team-member", () => ({
+  useCreateTeamMember: vi.fn(),
+}));
+
+describe("AddTeamMemberDialog", () => {
+  const mutate = vi.fn();
+  const reset = vi.fn();
+
+  beforeEach(() => {
+    mutate.mockReset();
+    reset.mockReset();
+    vi.mocked(useCreateTeamMember).mockReturnValue({
+      mutate,
+      reset,
+      isPending: false,
+      error: null,
+    } as unknown as ReturnType<typeof useCreateTeamMember>);
+  });
+
+  it("requires the required fields and a Dispatcher service area", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<AddTeamMemberDialog open onClose={vi.fn()} />, { withAuth: false });
+
+    await user.click(screen.getByRole("button", { name: "Add Member" }));
+
+    expect(screen.getByText("Name is required.")).toBeInTheDocument();
+    expect(screen.getByText("Color is required.")).toBeInTheDocument();
+    expect(screen.getByText("Email is required.")).toBeInTheDocument();
+    expect(screen.getByText("Select at least one service area.")).toBeInTheDocument();
+    expect(mutate).not.toHaveBeenCalled();
+  });
+
+  it("resets role defaults and submits customized permissions", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<AddTeamMemberDialog open onClose={vi.fn()} />, { withAuth: false });
+
+    await user.type(screen.getByRole("textbox", { name: "Name" }), "Taylor Dispatcher");
+    await user.type(screen.getByRole("textbox", { name: "Email" }), "taylor@example.com");
+    await user.click(screen.getByRole("button", { name: "Select color #F59E0B" }));
+    await user.click(screen.getByRole("combobox", { name: "Role" }));
+    await user.click(screen.getByRole("option", { name: "Scheduler" }));
+
+    expect(screen.queryByLabelText("East")).not.toBeInTheDocument();
+    const createSites = screen.getByLabelText("Create sites");
+    expect(createSites).toBeChecked();
+    await user.click(createSites);
+    await user.click(screen.getByRole("button", { name: "Add Member" }));
+
+    expect(mutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: "Taylor Dispatcher",
+        role: "Scheduler",
+        color: "#F59E0B",
+        email: "taylor@example.com",
+        serviceAreas: [],
+        permissionOverrides: { createSites: 2 },
+      }),
+      expect.any(Object),
+    );
+  }, 15000);
+
+  it("does not close while a member is being created", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    vi.mocked(useCreateTeamMember).mockReturnValue({
+      mutate,
+      reset,
+      isPending: true,
+      error: null,
+    } as unknown as ReturnType<typeof useCreateTeamMember>);
+    renderWithProviders(<AddTeamMemberDialog open onClose={onClose} />, { withAuth: false });
+
+    await user.keyboard("{Escape}");
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("clears a previous mutation error when reopened", () => {
+    const mutation = {
+      mutate,
+      reset,
+      isPending: false,
+      error: new Error("Email is already in use."),
+    } as unknown as ReturnType<typeof useCreateTeamMember>;
+    vi.mocked(useCreateTeamMember).mockReturnValue(mutation);
+    const { rerender } = renderWithProviders(<AddTeamMemberDialog open onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    expect(screen.getByText("Email is already in use.")).toBeInTheDocument();
+    mutation.error = null;
+    rerender(<AddTeamMemberDialog open={false} onClose={vi.fn()} />);
+    rerender(<AddTeamMemberDialog open onClose={vi.fn()} />);
+
+    expect(screen.queryByText("Email is already in use.")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/team-members/team-member-detail-drawer.test.tsx b/src/test/app/(protected)/team-members/team-member-detail-drawer.test.tsx
new file mode 100644
index 00000000..e6dc25b1
--- /dev/null
+++ b/src/test/app/(protected)/team-members/team-member-detail-drawer.test.tsx
@@ -0,0 +1,240 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders } from "@/test/test-utils";
+import { TeamMemberDetailDrawer } from "@/app/(protected)/team-members/_components/team-member-detail-drawer";
+import {
+  useTeamMemberDetail,
+  useUpdateTeamMember,
+} from "@/domain/team-members/use-cases/use-team-member-detail";
+import type { TeamMemberDetail, TeamMemberListItem } from "@/domain/team-members/types/team-member";
+
+vi.mock("@/domain/team-members/use-cases/use-team-member-detail", () => ({
+  useTeamMemberDetail: vi.fn(),
+  useUpdateTeamMember: vi.fn(),
+}));
+
+const member: TeamMemberListItem = {
+  id: "u-1",
+  name: "Taylor Dispatcher",
+  role: "Dispatcher",
+  serviceArea: "East",
+  phone: "555-0100",
+  email: "taylor@example.com",
+  color: "#F59E0B",
+  status: "Active",
+  isAccountOwner: false,
+  pendingRegistration: true,
+};
+
+const detail: TeamMemberDetail = {
+  ...member,
+  serviceAreas: ["East"],
+  permissions: [
+    { permissionKey: "createSites", overrideState: 1, isGranted: true },
+    { permissionKey: "editSites", overrideState: 2, isGranted: false },
+  ],
+};
+
+describe("TeamMemberDetailDrawer", () => {
+  const mutate = vi.fn();
+
+  beforeEach(() => {
+    mutate.mockReset();
+    vi.mocked(useTeamMemberDetail).mockReturnValue({
+      data: detail,
+      isLoading: false,
+      error: null,
+    } as unknown as ReturnType<typeof useTeamMemberDetail>);
+    vi.mocked(useUpdateTeamMember).mockReturnValue({
+      mutate,
+      isPending: false,
+    } as unknown as ReturnType<typeof useUpdateTeamMember>);
+  });
+
+  it("shows all member fields and grouped permission state in view mode", () => {
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    expect(screen.getAllByText("Taylor Dispatcher")).not.toHaveLength(0);
+    expect(screen.getByText("taylor@example.com")).toBeInTheDocument();
+    expect(screen.getByText("East")).toBeInTheDocument();
+    expect(screen.getByText("Pending registration")).toBeInTheDocument();
+    expect(screen.getByText("Create sites")).toBeInTheDocument();
+    expect(screen.getByText("Granted")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Edit" })).toBeInTheDocument();
+  });
+
+  it("edits fields and saves active status and permission overrides", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Edit" }));
+    const name = screen.getByRole("textbox", { name: "Name" });
+    await user.clear(name);
+    await user.type(name, "Taylor Updated");
+    await user.click(screen.getByRole("switch", { name: "Active" }));
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(mutate).toHaveBeenCalledTimes(1));
+    expect(mutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "u-1",
+        input: expect.objectContaining({
+          name: "Taylor Updated",
+          isActive: false,
+          serviceAreas: ["East"],
+        }),
+      }),
+      expect.any(Object),
+    );
+  });
+
+  it("disables role changes and deactivation for the account owner", async () => {
+    const owner = { ...detail, isAccountOwner: true };
+    vi.mocked(useTeamMemberDetail).mockReturnValue({
+      data: owner,
+      isLoading: false,
+      error: null,
+    } as unknown as ReturnType<typeof useTeamMemberDetail>);
+    const user = userEvent.setup();
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Edit" }));
+    expect(screen.getByRole("combobox", { name: "Role" })).toHaveAttribute("aria-disabled", "true");
+    const activeSwitch = screen.getByRole("switch", { name: "Active" });
+    expect(activeSwitch).toBeDisabled();
+    const tooltipTarget = activeSwitch.closest("label")?.parentElement;
+    if (!tooltipTarget) throw new Error("missing account-owner tooltip target");
+    await user.hover(tooltipTarget);
+    await waitFor(() =>
+      expect(screen.getByRole("tooltip")).toHaveTextContent(
+        "The account owner cannot be deactivated.",
+      ),
+    );
+  });
+
+  it("keeps edits when the detail query refreshes", async () => {
+    const user = userEvent.setup();
+    const { rerender } = renderWithProviders(
+      <TeamMemberDetailDrawer member={member} onClose={vi.fn()} />,
+      { withAuth: false },
+    );
+
+    await user.click(screen.getByRole("button", { name: "Edit" }));
+    const name = screen.getByRole("textbox", { name: "Name" });
+    await user.clear(name);
+    await user.type(name, "Taylor Updated");
+
+    vi.mocked(useTeamMemberDetail).mockReturnValue({
+      data: { ...detail, phone: "555-0101" },
+      isLoading: false,
+      error: null,
+    } as unknown as ReturnType<typeof useTeamMemberDetail>);
+    rerender(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />);
+
+    expect(screen.getByRole("textbox", { name: "Name" })).toHaveValue("Taylor Updated");
+    expect(screen.getByRole("textbox", { name: "Phone" })).toHaveValue("555-0100");
+  });
+
+  it("restores the saved detail when editing is cancelled", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Edit" }));
+    const name = screen.getByRole("textbox", { name: "Name" });
+    await user.clear(name);
+    await user.type(name, "Discarded draft");
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+    expect(screen.getByRole("button", { name: "Edit" })).toBeInTheDocument();
+    expect(screen.getAllByText("Taylor Dispatcher")).not.toHaveLength(0);
+    expect(screen.queryByDisplayValue("Discarded draft")).not.toBeInTheDocument();
+  });
+
+  it("marks a legacy role in view mode", () => {
+    vi.mocked(useTeamMemberDetail).mockReturnValue({
+      data: { ...detail, role: "Manager" },
+      isLoading: false,
+      error: null,
+    } as unknown as ReturnType<typeof useTeamMemberDetail>);
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    expect(screen.getByText("Manager (legacy)")).toBeInTheDocument();
+  });
+
+  it("shows a legacy role in the edit form and blocks save until a supported role is chosen", async () => {
+    vi.mocked(useTeamMemberDetail).mockReturnValue({
+      data: { ...detail, role: "Manager" },
+      isLoading: false,
+      error: null,
+    } as unknown as ReturnType<typeof useTeamMemberDetail>);
+    const user = userEvent.setup();
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Edit" }));
+    const roleSelect = screen.getByRole("combobox", { name: "Role" });
+    expect(roleSelect).toHaveTextContent("Manager (legacy)");
+    expect(
+      screen.getByText(/Manager is a legacy role and can no longer be saved/),
+    ).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+    expect(mutate).not.toHaveBeenCalled();
+
+    await user.click(roleSelect);
+    await user.click(screen.getByRole("option", { name: "Scheduler" }));
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(mutate).toHaveBeenCalledTimes(1));
+    expect(mutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "u-1",
+        input: expect.objectContaining({ role: "Scheduler" }),
+      }),
+      expect.any(Object),
+    );
+  });
+
+  it("preselects the nearest palette color for a legacy color and saves without a manual pick", async () => {
+    vi.mocked(useTeamMemberDetail).mockReturnValue({
+      data: { ...detail, color: "#FF0000" },
+      isLoading: false,
+      error: null,
+    } as unknown as ReturnType<typeof useTeamMemberDetail>);
+    const user = userEvent.setup();
+    renderWithProviders(<TeamMemberDetailDrawer member={member} onClose={vi.fn()} />, {
+      withAuth: false,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Edit" }));
+    expect(
+      screen.getByText(/Saved color #FF0000 is not in the current palette/),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Select color #EA580C" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+
+    await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+    await waitFor(() => expect(mutate).toHaveBeenCalledTimes(1));
+    expect(mutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        input: expect.objectContaining({ color: "#EA580C" }),
+      }),
+      expect.any(Object),
+    );
+  });
+});
diff --git a/src/test/app/(protected)/team-members/team-member-form-options.test.ts b/src/test/app/(protected)/team-members/team-member-form-options.test.ts
new file mode 100644
index 00000000..8d9dac7f
--- /dev/null
+++ b/src/test/app/(protected)/team-members/team-member-form-options.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import {
+  canonicalRole,
+  nearestPaletteColor,
+  resolveFormColor,
+  TEAM_MEMBER_COLORS,
+} from "@/app/(protected)/team-members/_components/team-member-form-options";
+
+describe("canonicalRole", () => {
+  it("returns the canonical role for supported values", () => {
+    expect(canonicalRole("Dispatcher")).toBe("Dispatcher");
+    expect(canonicalRole("scheduler")).toBe("Scheduler");
+    expect(canonicalRole("  Admin ")).toBe("Admin");
+  });
+
+  it("returns null for legacy and empty roles", () => {
+    expect(canonicalRole("Manager")).toBeNull();
+    expect(canonicalRole("Supervisor")).toBeNull();
+    expect(canonicalRole("")).toBeNull();
+  });
+});
+
+describe("nearestPaletteColor", () => {
+  it("returns the closest palette color by RGB distance", () => {
+    expect(nearestPaletteColor("#FF0000")).toBe("#EA580C");
+    expect(nearestPaletteColor("#00FF00")).toBe("#16A34A");
+    expect(nearestPaletteColor("#111111")).toBe("#16A34A");
+  });
+
+  it("falls back to the first palette color for unparseable values", () => {
+    expect(nearestPaletteColor("not-a-color")).toBe(TEAM_MEMBER_COLORS[0]);
+    expect(nearestPaletteColor("")).toBe(TEAM_MEMBER_COLORS[0]);
+  });
+});
+
+describe("resolveFormColor", () => {
+  it("keeps palette colors and canonicalizes their casing", () => {
+    expect(resolveFormColor("#F59E0B")).toEqual({ color: "#F59E0B", notice: "" });
+    expect(resolveFormColor("#f59e0b")).toEqual({ color: "#F59E0B", notice: "" });
+  });
+
+  it("replaces a legacy color with the nearest palette color and explains the replacement", () => {
+    const resolved = resolveFormColor("#FF0000");
+    expect(resolved.color).toBe("#EA580C");
+    expect(resolved.notice).toContain("#FF0000");
+    expect(resolved.notice).toContain("#EA580C");
+  });
+
+  it("preselects the first palette color when nothing was stored", () => {
+    const resolved = resolveFormColor("  ");
+    expect(resolved.color).toBe(TEAM_MEMBER_COLORS[0]);
+    expect(resolved.notice).not.toBe("");
+  });
+});
diff --git a/src/test/app/(protected)/uplifts/reject-revoke-dialogs.test.tsx b/src/test/app/(protected)/uplifts/reject-revoke-dialogs.test.tsx
new file mode 100644
index 00000000..da3fbee5
--- /dev/null
+++ b/src/test/app/(protected)/uplifts/reject-revoke-dialogs.test.tsx
@@ -0,0 +1,154 @@
+import type { ComponentProps } from "react";
+import { fireEvent, screen, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { RejectDialog } from "@/app/(protected)/uplifts/_components/reject-dialog";
+import { RevokeDialog } from "@/app/(protected)/uplifts/_components/revoke-dialog";
+import { FieldLabel } from "@/app/(protected)/workorders/_components/list/table/cells/dialog-field-label";
+import { VendorDialogFooter } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-footer";
+import {
+  DialogCancelButton,
+  VENDOR_DIALOG_CANCEL_CLASS,
+} from "@/components/ui/dialog-cancel-button";
+import { renderWithProviders } from "@/test/test-utils";
+
+const VENDOR_CANCEL_TOKENS = VENDOR_DIALOG_CANCEL_CLASS.split(" ");
+
+function expectVendorCancelChrome(button: HTMLElement) {
+  for (const token of VENDOR_CANCEL_TOKENS) {
+    expect(button).toHaveClass(token);
+  }
+  expect(button).toHaveClass("text-foreground");
+}
+
+function expectDestructiveAsterisk(labelText: string) {
+  const label = screen.getByText(labelText).closest("label");
+  expect(label).toBeTruthy();
+  const star = within(label as HTMLElement).getByText("*");
+  expect(star).toHaveAttribute("aria-hidden", "true");
+  expect(star).toHaveStyle({ color: "var(--destructive)" });
+}
+
+function renderReject(overrides: Partial<ComponentProps<typeof RejectDialog>> = {}) {
+  const onClose = vi.fn();
+  const onConfirm = vi.fn();
+  renderWithProviders(
+    <RejectDialog open amount={250} onClose={onClose} onConfirm={onConfirm} {...overrides} />,
+  );
+  return { onClose, onConfirm };
+}
+
+function renderRevoke(overrides: Partial<ComponentProps<typeof RevokeDialog>> = {}) {
+  const onClose = vi.fn();
+  const onConfirm = vi.fn();
+  renderWithProviders(
+    <RevokeDialog open amount={500} onClose={onClose} onConfirm={onConfirm} {...overrides} />,
+  );
+  return { onClose, onConfirm };
+}
+
+describe("FieldLabel required asterisk", () => {
+  it("renders a destructive asterisk only when required", () => {
+    const { rerender } = renderWithProviders(<FieldLabel>Site</FieldLabel>);
+    expect(screen.getByText("Site").textContent).toBe("Site");
+    expect(screen.queryByText("*")).not.toBeInTheDocument();
+
+    rerender(<FieldLabel required>Site</FieldLabel>);
+    expectDestructiveAsterisk("Site");
+  });
+});
+
+describe("DialogCancelButton VendorDialog tokens", () => {
+  it("matches VendorDialogFooter Cancel classes (ghost + 12px compact padding)", () => {
+    renderWithProviders(
+      <>
+        <VendorDialogFooter
+          isPending={false}
+          canSubmit={false}
+          onCancel={() => undefined}
+          onSave={() => undefined}
+        />
+        <DialogCancelButton />
+      </>,
+    );
+    const [vendorCancel, sharedCancel] = screen.getAllByRole("button", { name: "Cancel" });
+    expectVendorCancelChrome(vendorCancel);
+    expectVendorCancelChrome(sharedCancel);
+  });
+});
+
+describe("RejectDialog", () => {
+  it("keeps confirm disabled until a non-whitespace reason is typed", () => {
+    const { onConfirm } = renderReject();
+    const confirm = screen.getByRole("button", { name: "Reject uplift" });
+    expect(confirm).toBeDisabled();
+
+    fireEvent.change(screen.getByLabelText(/reason for rejection/i), {
+      target: { value: "   " },
+    });
+    expect(confirm).toBeDisabled();
+
+    fireEvent.change(screen.getByLabelText(/reason for rejection/i), {
+      target: { value: "Over the NTE cap" },
+    });
+    expect(confirm).toBeEnabled();
+    fireEvent.click(confirm);
+    expect(onConfirm).toHaveBeenCalledWith("Over the NTE cap");
+  });
+
+  it("closes on Cancel without confirming", () => {
+    const { onClose, onConfirm } = renderReject();
+    const cancel = screen.getByRole("button", { name: "Cancel" });
+    expectVendorCancelChrome(cancel);
+    fireEvent.click(cancel);
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+
+  it("marks the reason as required with an asterisk", () => {
+    renderReject();
+    expect(screen.getByRole("heading", { name: "Reject uplift of $250.00?" })).toBeInTheDocument();
+    expectDestructiveAsterisk("Reason for rejection");
+    const reason = screen.getByLabelText(/reason for rejection/i);
+    expect(reason).toBeRequired();
+    expect(reason).toHaveAttribute("aria-required", "true");
+  });
+
+  it("blocks cancel and escape while pending", () => {
+    const { onClose } = renderReject({ isPending: true });
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeDisabled();
+    fireEvent.keyDown(document.body, { key: "Escape" });
+    expect(onClose).not.toHaveBeenCalled();
+  });
+});
+
+describe("RevokeDialog", () => {
+  it("keeps confirm disabled until a reason is typed", () => {
+    const { onConfirm } = renderRevoke();
+    const confirm = screen.getByRole("button", { name: "Revoke $500.00" });
+    expect(confirm).toBeDisabled();
+
+    fireEvent.change(screen.getByLabelText(/reason for revoking/i), {
+      target: { value: "Approved in error" },
+    });
+    fireEvent.click(confirm);
+    expect(onConfirm).toHaveBeenCalledWith("Approved in error");
+  });
+
+  it("closes on Cancel without confirming", () => {
+    const { onClose, onConfirm } = renderRevoke();
+    const cancel = screen.getByRole("button", { name: "Cancel" });
+    expectVendorCancelChrome(cancel);
+    fireEvent.click(cancel);
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+
+  it("marks the reason as required with an asterisk", () => {
+    renderRevoke();
+    expect(screen.getByRole("button", { name: "Revoke $500.00" })).toBeInTheDocument();
+    expectDestructiveAsterisk("Reason for revoking");
+    const reason = screen.getByLabelText(/reason for revoking/i);
+    expect(reason).toBeRequired();
+    expect(reason).toHaveAttribute("aria-required", "true");
+  });
+});
diff --git a/src/test/app/(protected)/uplifts/uplift-approvals-approved-tab.test.tsx b/src/test/app/(protected)/uplifts/uplift-approvals-approved-tab.test.tsx
new file mode 100644
index 00000000..7b3456a8
--- /dev/null
+++ b/src/test/app/(protected)/uplifts/uplift-approvals-approved-tab.test.tsx
@@ -0,0 +1,178 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { UpliftQueueItem, UpliftsQueueResult } from "@/domain/uplifts/types/uplift";
+import { renderWithProviders } from "@/test/test-utils";
+
+const revokeMutate = vi.fn();
+
+const queueState = vi.hoisted(() => ({
+  data: null as UpliftsQueueResult | null,
+}));
+const authState = vi.hoisted(() => ({
+  userRoles: "Admin",
+}));
+
+const approvedItem: UpliftQueueItem = {
+  id: 77,
+  status: "Approved",
+  currentNTE: 500,
+  requestedNTE: 900,
+  delta: 400,
+  vendorReason: "Additional scope",
+  requestedAt: "2026-01-10T08:00:00Z",
+  requestedByVendorName: "Gateway",
+  decidedAt: "2026-01-12T09:30:00Z",
+  decidedByName: "Admin User",
+  decisionNote: "",
+  requiredTier: 1,
+  canDecide: false,
+  expiresAt: "",
+  notificationStatus: "",
+  notificationError: "",
+  evidenceDocumentId: "doc-1",
+  evidenceFileName: "quote.pdf",
+  evidenceContentType: "application/pdf",
+  evidenceSizeBytes: 2048,
+  dispatchNumber: "DSP-77",
+  poNumber: "PO-77",
+  vendorCompanyName: "Gateway Plumbing",
+  workOrderId: 55,
+  dispatchId: 12,
+  woNumber: "WO-55",
+  site: "Site B",
+  serviceName: "HVAC service",
+  attachmentCount: 3,
+  approvedOnWoAuto: 100,
+  approvedOnWoAdmin: 400,
+  approvedOnWoTotal: 500,
+  workOrderClosed: true,
+};
+
+const approvedOpenItem: UpliftQueueItem = {
+  ...approvedItem,
+  id: 78,
+  woNumber: "WO-56",
+  workOrderClosed: false,
+};
+
+vi.mock("@/domain/uplifts/use-cases/use-uplifts-queue", () => ({
+  useUpliftsQueue: () => ({
+    data: queueState.data,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch: vi.fn(),
+  }),
+}));
+
+vi.mock("@/domain/uplifts/use-cases/use-uplift-actions", () => ({
+  useApproveUplift: () => ({ isPending: false, mutate: vi.fn() }),
+  useRejectUplift: () => ({ isPending: false, mutate: vi.fn() }),
+  useRevokeUplift: () => ({ isPending: false, mutate: revokeMutate }),
+}));
+
+vi.mock("@/providers/auth-context", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  useAuthContext: () => ({ user: { userRoles: authState.userRoles } }),
+}));
+
+vi.mock("@/domain/uplifts/use-cases/use-uplifts-can-approve", () => ({
+  useUpliftsCanApprove: () => ({ data: true }),
+}));
+
+describe("Uplift Approvals approved tab", () => {
+  beforeEach(() => {
+    revokeMutate.mockReset();
+    authState.userRoles = "Admin";
+    queueState.data = {
+      items: [approvedItem],
+      totalCount: 1,
+      page: 1,
+      pageSize: 25,
+      pendingExposureTotal: null,
+    };
+  });
+
+  it("disables Revoke with the closed work order tooltip", async () => {
+    const { default: UpliftQueuePage } = await import("@/app/(protected)/uplifts/index");
+    renderWithProviders(<UpliftQueuePage />);
+
+    fireEvent.click(screen.getByRole("tab", { name: "Approved" }));
+    expect(screen.getByRole("columnheader", { name: "Approved By" })).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "Approved At" })).toBeInTheDocument();
+    expect(screen.queryByRole("columnheader", { name: "Waiting" })).not.toBeInTheDocument();
+    expect(screen.getByText("Admin User")).toBeInTheDocument();
+    const revoke = await screen.findByRole("button", { name: "Revoke" });
+    expect(revoke).toBeDisabled();
+    fireEvent.mouseOver(revoke);
+    expect(
+      await screen.findByText("This work order is closed. Uplifts can no longer be revoked."),
+    ).toBeInTheDocument();
+    expect(revokeMutate).not.toHaveBeenCalled();
+  });
+
+  it("opens RevokeDialog for an approved uplift on an open work order", async () => {
+    queueState.data = {
+      items: [approvedOpenItem],
+      totalCount: 1,
+      page: 1,
+      pageSize: 25,
+      pendingExposureTotal: null,
+    };
+    const { default: UpliftQueuePage } = await import("@/app/(protected)/uplifts/index");
+    renderWithProviders(<UpliftQueuePage />);
+
+    fireEvent.click(screen.getByRole("tab", { name: "Approved" }));
+    const revoke = await screen.findByRole("button", { name: "Revoke" });
+    expect(revoke).toBeEnabled();
+    fireEvent.click(revoke);
+    expect(screen.getByRole("heading", { name: "Revoke this approval?" })).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "The approved uplift of $900.00 on WO WO-56 will be withdrawn. This does not recover money already spent — it records that the authorization was a mistake.",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("disables Revoke with the admin-only tooltip for a Dispatcher and never opens the dialog", async () => {
+    authState.userRoles = "Dispatcher";
+    queueState.data = {
+      items: [approvedOpenItem],
+      totalCount: 1,
+      page: 1,
+      pageSize: 25,
+      pendingExposureTotal: null,
+    };
+    const { default: UpliftQueuePage } = await import("@/app/(protected)/uplifts/index");
+    renderWithProviders(<UpliftQueuePage />);
+
+    fireEvent.click(screen.getByRole("tab", { name: "Approved" }));
+    const revoke = await screen.findByRole("button", { name: "Revoke" });
+    expect(revoke).toBeDisabled();
+    fireEvent.mouseOver(revoke);
+    expect(await screen.findByText("Only admins can revoke uplifts")).toBeInTheDocument();
+    fireEvent.click(revoke);
+    expect(
+      screen.queryByRole("heading", { name: "Revoke this approval?" }),
+    ).not.toBeInTheDocument();
+    expect(revokeMutate).not.toHaveBeenCalled();
+  });
+
+  it("shows the approved empty copy when nothing is archived", async () => {
+    queueState.data = {
+      items: [],
+      totalCount: 0,
+      page: 1,
+      pageSize: 25,
+      pendingExposureTotal: null,
+    };
+    const { default: UpliftQueuePage } = await import("@/app/(protected)/uplifts/index");
+    renderWithProviders(<UpliftQueuePage />);
+
+    fireEvent.click(screen.getByRole("tab", { name: "Approved" }));
+    expect(await screen.findByText("No approved uplifts yet")).toBeInTheDocument();
+    expect(
+      screen.getByText("Uplifts you approve are archived here for reference."),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/uplifts/uplift-detail-modal-permissions.test.tsx b/src/test/app/(protected)/uplifts/uplift-detail-modal-permissions.test.tsx
new file mode 100644
index 00000000..2b65b7ca
--- /dev/null
+++ b/src/test/app/(protected)/uplifts/uplift-detail-modal-permissions.test.tsx
@@ -0,0 +1,132 @@
+import { screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { UpliftDetailModal } from "@/app/(protected)/uplifts/_components/uplift-detail-modal";
+import { ApiError } from "@/api/api-error";
+import type { UpliftQueueItem } from "@/domain/uplifts/types/uplift";
+import { createAppQueryClient } from "@/lib/query/query-client";
+import { renderWithProviders } from "@/test/test-utils";
+
+const toastMocks = vi.hoisted(() => ({ error: vi.fn() }));
+const boardDetailMock = vi.hoisted(() => ({ calls: 0 }));
+const woUpliftsMock = vi.hoisted(() => ({ calls: 0 }));
+
+vi.mock("react-toastify", () => ({
+  toast: { error: toastMocks.error },
+}));
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    getBoardDetail: vi.fn(() => {
+      boardDetailMock.calls += 1;
+      return Promise.reject(
+        new ApiError("You do not have permission to perform this action.", 403),
+      );
+    }),
+  },
+}));
+
+vi.mock("@/domain/work-orders/api/work-order-uplifts-api", () => ({
+  workOrderUpliftsApi: {
+    list: vi.fn(() => {
+      woUpliftsMock.calls += 1;
+      return Promise.reject(
+        new ApiError("You do not have permission to perform this action.", 403),
+      );
+    }),
+  },
+}));
+
+vi.mock("@/domain/auth/api/auth-api", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  getSession: vi.fn(() =>
+    Promise.resolve({
+      token: "t",
+      expiration: "",
+      email: "dispatch@seahaven.test",
+      userRoles: "Dispatcher",
+      phoneNumber: "",
+      fullname: "Dispatch User",
+      id: "u1",
+    }),
+  ),
+}));
+
+const dispatcherItem: UpliftQueueItem = {
+  id: 41,
+  status: "Approved",
+  currentNTE: 100,
+  requestedNTE: 250,
+  delta: 150,
+  vendorReason: "",
+  requestedAt: "2026-01-15T10:00:00Z",
+  requestedByVendorName: "Gateway",
+  decidedAt: "2026-01-16T10:00:00Z",
+  decidedByName: "Admin User",
+  decisionNote: "",
+  requiredTier: 1,
+  canDecide: false,
+  expiresAt: "",
+  notificationStatus: "",
+  notificationError: "",
+  evidenceDocumentId: null,
+  evidenceFileName: "",
+  evidenceContentType: "",
+  evidenceSizeBytes: null,
+  dispatchNumber: "DSP-41",
+  poNumber: "PO-41",
+  vendorCompanyName: "Gateway Plumbing",
+  workOrderId: 99,
+  dispatchId: 7,
+  woNumber: "WO-99",
+  site: "Site A",
+  serviceName: "Plumbing repair",
+  attachmentCount: null,
+  approvedOnWoAuto: null,
+  approvedOnWoAdmin: null,
+  approvedOnWoTotal: null,
+  workOrderClosed: false,
+};
+
+function renderWithGovernedClient() {
+  const queryClient = createAppQueryClient();
+  queryClient.setDefaultOptions({ queries: { retry: false } });
+  return renderWithProviders(
+    <UpliftDetailModal
+      item={dispatcherItem}
+      canRevoke={false}
+      approvePending={false}
+      revokePending={false}
+      onClose={vi.fn()}
+      onApprove={vi.fn()}
+      onReject={vi.fn()}
+      onRevoke={vi.fn()}
+      onOpenAttachment={vi.fn()}
+    />,
+    { queryClient },
+  );
+}
+
+describe("UpliftDetailModal permission failures (Dispatcher 403)", () => {
+  beforeEach(() => {
+    toastMocks.error.mockReset();
+    boardDetailMock.calls = 0;
+    woUpliftsMock.calls = 0;
+  });
+
+  it("shows unavailable sections without an error toast and keeps Revoke admin-only", async () => {
+    renderWithGovernedClient();
+
+    await waitFor(() => {
+      expect(boardDetailMock.calls).toBeGreaterThan(0);
+      expect(woUpliftsMock.calls).toBeGreaterThan(0);
+    });
+
+    await waitFor(() => {
+      expect(screen.getAllByText("Unavailable").length).toBeGreaterThanOrEqual(3);
+    });
+
+    const revoke = screen.getByRole("button", { name: "Revoke" });
+    expect(revoke).toBeDisabled();
+    expect(toastMocks.error).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/uplifts/uplift-detail-modal.test.tsx b/src/test/app/(protected)/uplifts/uplift-detail-modal.test.tsx
new file mode 100644
index 00000000..ea42e5ae
--- /dev/null
+++ b/src/test/app/(protected)/uplifts/uplift-detail-modal.test.tsx
@@ -0,0 +1,183 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { UpliftDetailModal } from "@/app/(protected)/uplifts/_components/uplift-detail-modal";
+import type { UpliftQueueItem } from "@/domain/uplifts/types/uplift";
+import { renderWithProviders } from "@/test/test-utils";
+
+const boardDetail = vi.hoisted(() => ({ data: null as Record<string, unknown> | null }));
+const woUplifts = vi.hoisted(() => ({ data: null as Array<Record<string, unknown>> | null }));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderBoardDetail: () => ({ data: boardDetail.data, isLoading: false, error: null }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-uplifts", () => ({
+  useWorkOrderUplifts: () => ({ data: woUplifts.data, isLoading: false, error: null }),
+}));
+
+const canApproveState = vi.hoisted(() => ({ data: true as boolean | undefined }));
+
+vi.mock("@/domain/uplifts/use-cases/use-uplifts-can-approve", () => ({
+  useUpliftsCanApprove: () => ({ data: canApproveState.data }),
+}));
+
+const baseItem: UpliftQueueItem = {
+  id: 41,
+  status: "Pending",
+  currentNTE: 100,
+  requestedNTE: 250,
+  delta: 150,
+  vendorReason: "",
+  requestedAt: "2026-01-15T10:00:00Z",
+  requestedByVendorName: "Gateway",
+  decidedAt: "",
+  decidedByName: "",
+  decisionNote: "",
+  requiredTier: 1,
+  canDecide: true,
+  expiresAt: "",
+  notificationStatus: "",
+  notificationError: "",
+  evidenceDocumentId: null,
+  evidenceFileName: "",
+  evidenceContentType: "",
+  evidenceSizeBytes: null,
+  dispatchNumber: "DSP-41",
+  poNumber: "PO-41",
+  vendorCompanyName: "Gateway Plumbing",
+  workOrderId: 99,
+  dispatchId: 7,
+  woNumber: "WO-99",
+  site: "Site A",
+  serviceName: "Plumbing repair",
+  attachmentCount: null,
+  approvedOnWoAuto: null,
+  approvedOnWoAdmin: null,
+  approvedOnWoTotal: null,
+  workOrderClosed: null,
+};
+
+function renderModal(overrides: Partial<UpliftQueueItem> = {}, canRevoke = true) {
+  const onApprove = vi.fn();
+  const onReject = vi.fn();
+  const onRevoke = vi.fn();
+  const onOpenAttachment = vi.fn();
+  renderWithProviders(
+    <UpliftDetailModal
+      item={{ ...baseItem, ...overrides }}
+      canRevoke={canRevoke}
+      approvePending={false}
+      revokePending={false}
+      onClose={vi.fn()}
+      onApprove={onApprove}
+      onReject={onReject}
+      onRevoke={onRevoke}
+      onOpenAttachment={onOpenAttachment}
+    />,
+  );
+  return { onApprove, onReject, onRevoke, onOpenAttachment };
+}
+
+describe("UpliftDetailModal", () => {
+  beforeEach(() => {
+    canApproveState.data = true;
+    boardDetail.data = {
+      info: { woNumber: "WO-99", site: "Site A", status: "Open", dueDate: "" },
+    };
+    woUplifts.data = [
+      { id: 1, status: "auto_approved", amount: 100 },
+      { id: 2, status: "approved", amount: 250 },
+    ];
+  });
+
+  it("shows work order and request placeholders for a pending uplift", () => {
+    renderModal();
+
+    expect(screen.getByText("Unscheduled")).toBeInTheDocument();
+    expect(screen.getByText("No justification provided.")).toBeInTheDocument();
+    expect(screen.getByText("No attachments")).toBeInTheDocument();
+  });
+
+  it("opens an evidence attachment through the provided callback", () => {
+    const { onOpenAttachment } = renderModal({
+      evidenceDocumentId: "document-1",
+      evidenceFileName: "quote.pdf",
+      attachmentCount: 1,
+    });
+
+    fireEvent.click(screen.getByText("quote.pdf"));
+    expect(onOpenAttachment).toHaveBeenCalledWith(
+      expect.objectContaining({ evidenceDocumentId: "document-1" }),
+    );
+  });
+
+  it("falls back to the work order uplifts for the approved-on-WO breakdown", () => {
+    renderModal();
+
+    expect(screen.getByText("Auto-approved")).toBeInTheDocument();
+    expect(screen.getByText("Admin-approved")).toBeInTheDocument();
+    expect(screen.getByText("$100.00")).toBeInTheDocument();
+    expect(screen.getByText("$250.00")).toBeInTheDocument();
+    expect(screen.getByText("$350.00")).toBeInTheDocument();
+  });
+
+  it("offers status-specific actions for a pending uplift", () => {
+    const { onApprove, onReject } = renderModal();
+
+    fireEvent.click(screen.getByRole("button", { name: "Approve" }));
+    expect(onApprove).toHaveBeenCalled();
+    expect(screen.queryByRole("button", { name: "Revoke" })).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Reject" }));
+    expect(onReject).toHaveBeenCalled();
+  });
+
+  it("disables Approve and Reject in the modal for a Dispatcher the backend refuses", async () => {
+    canApproveState.data = false;
+    const { onApprove, onReject } = renderModal();
+
+    const approve = screen.getByRole("button", { name: "Approve" });
+    const reject = screen.getByRole("button", { name: "Reject" });
+    expect(approve).toBeDisabled();
+    expect(reject).toBeDisabled();
+    fireEvent.mouseOver(approve);
+    expect(await screen.findByText("Requires Tier 1 role")).toBeInTheDocument();
+    fireEvent.click(approve);
+    fireEvent.click(reject);
+    expect(onApprove).not.toHaveBeenCalled();
+    expect(onReject).not.toHaveBeenCalled();
+  });
+
+  it("offers Revoke for an approved uplift and disables it on a closed work order", () => {
+    const { onRevoke } = renderModal({ status: "Approved", workOrderClosed: true });
+
+    expect(screen.queryByRole("button", { name: "Approve" })).not.toBeInTheDocument();
+    const revoke = screen.getByRole("button", { name: "Revoke" });
+    expect(revoke).toBeDisabled();
+    fireEvent.click(revoke);
+    expect(onRevoke).not.toHaveBeenCalled();
+  });
+
+  it("disables Revoke with the admin-only tooltip for non-admin users", async () => {
+    const { onRevoke } = renderModal({ status: "Approved", workOrderClosed: false }, false);
+
+    const revoke = screen.getByRole("button", { name: "Revoke" });
+    expect(revoke).toBeDisabled();
+    fireEvent.mouseOver(revoke);
+    expect(await screen.findByText("Only admins can revoke uplifts")).toBeInTheDocument();
+    fireEvent.click(revoke);
+    expect(onRevoke).not.toHaveBeenCalled();
+  });
+
+  it("does not render a heading nested inside the dialog title heading", () => {
+    renderModal();
+
+    const dialog = screen.getByRole("dialog");
+    const headings = dialog.querySelectorAll("h1, h2, h3, h4, h5, h6");
+    expect(headings.length).toBeGreaterThan(0);
+    const nestedHeadings = [...headings].filter((heading) =>
+      heading.querySelector("h1, h2, h3, h4, h5, h6"),
+    );
+    expect(nestedHeadings).toEqual([]);
+  });
+});
diff --git a/src/test/app/(protected)/uplifts/uplift-queue-decision-flow.test.tsx b/src/test/app/(protected)/uplifts/uplift-queue-decision-flow.test.tsx
new file mode 100644
index 00000000..23a4d3ec
--- /dev/null
+++ b/src/test/app/(protected)/uplifts/uplift-queue-decision-flow.test.tsx
@@ -0,0 +1,163 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { UpliftQueueItem, UpliftsQueueResult } from "@/domain/uplifts/types/uplift";
+import { renderWithProviders } from "@/test/test-utils";
+
+const rejectMutate = vi.fn();
+const approveMutate = vi.fn();
+const revokeMutate = vi.fn();
+const refetch = vi.fn();
+
+const queueState = vi.hoisted(() => ({
+  data: null as UpliftsQueueResult | null,
+}));
+const canApproveState = vi.hoisted(() => ({ data: true as boolean | undefined }));
+
+const pendingItem: UpliftQueueItem = {
+  id: 41,
+  status: "Pending",
+  currentNTE: 100,
+  requestedNTE: 250,
+  delta: 150,
+  vendorReason: "Extra parts",
+  requestedAt: "2026-01-15T10:00:00Z",
+  requestedByVendorName: "Gateway",
+  decidedAt: "",
+  decidedByName: "",
+  decisionNote: "",
+  requiredTier: 1,
+  canDecide: true,
+  expiresAt: "",
+  notificationStatus: "",
+  notificationError: "",
+  evidenceDocumentId: null,
+  evidenceFileName: "",
+  evidenceContentType: "",
+  evidenceSizeBytes: null,
+  dispatchNumber: "DSP-41",
+  poNumber: "PO-41",
+  vendorCompanyName: "Gateway Plumbing",
+  workOrderId: 99,
+  dispatchId: 7,
+  woNumber: "WO-99",
+  site: "Site A",
+  serviceName: "Plumbing repair",
+  attachmentCount: null,
+  approvedOnWoAuto: null,
+  approvedOnWoAdmin: null,
+  approvedOnWoTotal: 100,
+  workOrderClosed: false,
+};
+
+vi.mock("@/domain/uplifts/use-cases/use-uplifts-queue", () => ({
+  useUpliftsQueue: () => ({
+    data: queueState.data,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch,
+  }),
+}));
+
+vi.mock("@/domain/uplifts/use-cases/use-uplift-actions", () => ({
+  useApproveUplift: () => ({ isPending: false, mutate: approveMutate }),
+  useRejectUplift: () => ({ isPending: false, mutate: rejectMutate }),
+  useRevokeUplift: () => ({ isPending: false, mutate: revokeMutate }),
+}));
+
+vi.mock("@/providers/auth-context", async (importOriginal) => ({
+  ...(await importOriginal<object>()),
+  useAuthContext: () => ({ user: { userRoles: "Admin" } }),
+}));
+
+vi.mock("@/domain/uplifts/use-cases/use-uplifts-can-approve", () => ({
+  useUpliftsCanApprove: () => ({ data: canApproveState.data }),
+}));
+
+describe("Uplift Approvals decision flow", () => {
+  beforeEach(() => {
+    rejectMutate.mockReset();
+    approveMutate.mockReset();
+    revokeMutate.mockReset();
+    refetch.mockReset();
+    canApproveState.data = true;
+    queueState.data = {
+      items: [pendingItem],
+      totalCount: 1,
+      page: 1,
+      pageSize: 25,
+      pendingExposureTotal: 250,
+    };
+  });
+
+  it("shows the Uplift Approvals heading, count pill and exposure total", async () => {
+    const { default: UpliftQueuePage } = await import("@/app/(protected)/uplifts/index");
+    renderWithProviders(<UpliftQueuePage />);
+
+    expect(screen.getByRole("heading", { name: "Uplift Approvals" })).toBeInTheDocument();
+    expect(screen.getByLabelText("1 pending uplifts")).toBeInTheDocument();
+    expect(screen.getByText("Pending exposure: $250.00")).toBeInTheDocument();
+  });
+
+  it("approves in one click without a confirmation dialog", async () => {
+    const { default: UpliftQueuePage } = await import("@/app/(protected)/uplifts/index");
+    renderWithProviders(<UpliftQueuePage />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Approve" }));
+    expect(approveMutate).toHaveBeenCalledWith({ id: 41, amount: 150, woNumber: "WO-99" });
+    expect(screen.queryByRole("button", { name: "Confirm" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("opens RejectDialog with the dispatcher copy and does not reject on Cancel", async () => {
+    const { default: UpliftQueuePage } = await import("@/app/(protected)/uplifts/index");
+    renderWithProviders(<UpliftQueuePage />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Reject" }));
+    expect(screen.getByRole("heading", { name: /reject uplift of \$250/i })).toBeInTheDocument();
+    expect(screen.getByText("The dispatcher sees this reason on WO #WO-99.")).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(rejectMutate).not.toHaveBeenCalled();
+  });
+
+  it("shows the pending empty copy when nothing is waiting", async () => {
+    queueState.data = {
+      items: [],
+      totalCount: 0,
+      page: 1,
+      pageSize: 25,
+      pendingExposureTotal: null,
+    };
+    const { default: UpliftQueuePage } = await import("@/app/(protected)/uplifts/index");
+    renderWithProviders(<UpliftQueuePage />);
+
+    expect(screen.getByText("No uplifts waiting for approval.")).toBeInTheDocument();
+  });
+
+  it("disables Approve and Reject for a Dispatcher the backend refuses, without dialogs or toasts", async () => {
+    canApproveState.data = false;
+    const { default: UpliftQueuePage } = await import("@/app/(protected)/uplifts/index");
+    renderWithProviders(<UpliftQueuePage />);
+
+    const approve = screen.getByRole("button", { name: "Approve" });
+    const reject = screen.getByRole("button", { name: "Reject" });
+    expect(approve).toBeDisabled();
+    expect(reject).toBeDisabled();
+    fireEvent.mouseOver(approve);
+    expect(await screen.findByText("Requires Tier 1 role")).toBeInTheDocument();
+    fireEvent.click(approve);
+    fireEvent.click(reject);
+    expect(approveMutate).not.toHaveBeenCalled();
+    expect(rejectMutate).not.toHaveBeenCalled();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(screen.queryByRole("heading", { name: /reject uplift of/i })).not.toBeInTheDocument();
+  });
+
+  it("keeps Approve and Reject enabled when the backend allows the tier", async () => {
+    const { default: UpliftQueuePage } = await import("@/app/(protected)/uplifts/index");
+    renderWithProviders(<UpliftQueuePage />);
+
+    expect(screen.getByRole("button", { name: "Approve" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: "Reject" })).toBeEnabled();
+  });
+});
diff --git a/src/test/app/(protected)/vendor-pos/vendor-pos-legacy-vendors-list.test.tsx b/src/test/app/(protected)/vendor-pos/vendor-pos-legacy-vendors-list.test.tsx
new file mode 100644
index 00000000..986f41ad
--- /dev/null
+++ b/src/test/app/(protected)/vendor-pos/vendor-pos-legacy-vendors-list.test.tsx
@@ -0,0 +1,50 @@
+import { describe, expect, it, vi } from "vitest";
+import { screen } from "@testing-library/react";
+import VendorPosListPage from "@/app/(protected)/vendor-pos/index";
+import { renderWithProviders } from "@/test/test-utils";
+
+const useVendorPosList = vi.fn();
+const useVendorsList = vi.fn();
+const useVendorDirectoryList = vi.fn();
+
+vi.mock("@/domain/vendor-pos/use-cases/use-vendor-pos-list", () => ({
+  useVendorPosList: (...args: unknown[]) => useVendorPosList(...args),
+}));
+
+vi.mock("@/domain/vendors/use-cases/use-vendors-list", () => ({
+  useVendorsList: (...args: unknown[]) => useVendorsList(...args),
+}));
+
+vi.mock("@/domain/vendors/use-cases/use-vendor-directory-list", () => ({
+  useVendorDirectoryList: (...args: unknown[]) => useVendorDirectoryList(...args),
+}));
+
+describe("VendorPosListPage vendor source", () => {
+  it("keeps the legacy technician-level vendors list with pageSize 500", () => {
+    useVendorPosList.mockReturnValue({
+      data: { items: [], totalCount: 0, page: 1, pageSize: 12 },
+      isLoading: false,
+      isFetching: false,
+      error: null,
+    });
+    useVendorsList.mockReturnValue({
+      data: { items: [], totalCount: 0, page: 1, pageSize: 500 },
+      isLoading: false,
+      isFetching: false,
+      error: null,
+    });
+    useVendorDirectoryList.mockReturnValue({
+      data: { items: [], totalCount: 0, page: 1, pageSize: 500 },
+      isLoading: false,
+      isFetching: false,
+      error: null,
+    });
+
+    renderWithProviders(<VendorPosListPage />, { route: "/vendor-pos", withAuth: false });
+
+    expect(useVendorsList).toHaveBeenCalledWith({ page: 1, pageSize: 500 });
+    expect(useVendorsList).toHaveBeenCalledTimes(1);
+    expect(useVendorDirectoryList).not.toHaveBeenCalled();
+    expect(screen.getByRole("table")).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
new file mode 100644
index 00000000..031b589e
--- /dev/null
+++ b/src/test/app/(protected)/vendors/use-vendor-roster-form.test.tsx
@@ -0,0 +1,758 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { FormEvent, ReactNode } from "react";
+import { useController, useFieldArray } from "react-hook-form";
+import { toast } from "react-toastify";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const rosterGet = vi.fn();
+const saveMutate = vi.fn();
+
+vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
+  vendorCompanyRosterApi: { get: (...args: unknown[]) => rosterGet(...args) },
+}));
+
+vi.mock("@/domain/vendors/use-cases/use-vendor-company-roster", () => ({
+  useVendorCompanyRoster: () => rosterQueryResult,
+}));
+
+vi.mock("react-toastify", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
+
+let rosterQueryResult: {
+  data: VendorCompanyRoster | undefined;
+  isLoading: boolean;
+  isError: boolean;
+  error: Error | null;
+  refetch: ReturnType<typeof vi.fn>;
+} = { data: undefined, isLoading: false, isError: false, error: null, refetch: vi.fn() };
+
+vi.mock("@/domain/vendors/use-cases/use-vendor-facets", () => ({
+  useVendorFacets: () => ({ data: { companies: [], trades: [] } }),
+}));
+
+vi.mock("@/domain/vendors/use-cases/use-save-vendor-company-roster", async () => {
+  const actual = await vi.importActual<
+    typeof import("@/domain/vendors/use-cases/use-save-vendor-company-roster")
+  >("@/domain/vendors/use-cases/use-save-vendor-company-roster");
+  return {
+    ...actual,
+    useSaveVendorCompanyRoster: () => ({ mutate: saveMutate, isPending: false }),
+  };
+});
+
+import { useVendorRosterForm } from "@/app/(protected)/vendors/_components/use-vendor-roster-form";
+import type { VendorCompanyRosterFormValues } from "@/domain/vendors/schemas/vendor-roster-schema";
+import type { VendorCompanyRoster, VendorFacetCompany } from "@/domain/vendors/types/vendor";
+
+const company: VendorFacetCompany = {
+  companyId: 5,
+  name: "Gateway Plumbing",
+  companyPhone: "(314) 555-0100",
+  email: "dispatch@gateway.test",
+  address: "1 Main St",
+  city: "St. Louis",
+  state: "MO",
+  zip: "63101",
+  googleMapsUrl: "",
+};
+
+const roster: VendorCompanyRoster = {
+  companyId: 5,
+  rowVersion: "rv-1",
+  name: "Gateway Plumbing",
+  companyPhone: "(314) 555-0100",
+  email: "dispatch@gateway.test",
+  address: "1 Main St",
+  city: "St. Louis",
+  state: "MO",
+  zip: "63101",
+  googleMapsUrl: "",
+  notes: "",
+  areaId: "",
+  areaName: "",
+  technicians: [],
+};
+
+const secondCompany: VendorFacetCompany = {
+  ...company,
+  companyId: 6,
+  name: "Metro HVAC",
+  companyPhone: "(314) 555-0110",
+  email: "dispatch@metro.test",
+};
+
+const secondRoster: VendorCompanyRoster = {
+  ...roster,
+  companyId: 6,
+  name: "Metro HVAC",
+  companyPhone: "(314) 555-0110",
+  email: "dispatch@metro.test",
+};
+
+const rosterWithTechnicians: VendorCompanyRoster = {
+  ...roster,
+  technicians: [
+    {
+      id: 11,
+      contactName: "Ray Holt",
+      phone: "(314) 555-0122",
+      email: "",
+      preferredContact: "Phone",
+      tradeSpecialties: "Plumbing",
+      isActive: true,
+      totalJobs: 0,
+    },
+    {
+      id: 12,
+      contactName: "Amy Santiago",
+      phone: "(314) 555-0133",
+      email: "",
+      preferredContact: "Text",
+      tradeSpecialties: "HVAC",
+      isActive: true,
+      totalJobs: 0,
+    },
+  ],
+};
+
+const newTechnician = {
+  contactName: "Dana Kim",
+  phone: "(314) 555-0144",
+  email: "dana@test.test",
+  preferredContact: "Text" as const,
+  tradeSpecialties: "HVAC",
+  isActive: true,
+};
+
+function submitValues(
+  technicians: VendorCompanyRosterFormValues["technicians"],
+): VendorCompanyRosterFormValues {
+  return {
+    name: "Gateway Plumbing",
+    companyPhone: "(314) 555-0100",
+    email: "dispatch@gateway.test",
+    address: "1 Main St",
+    city: "St. Louis",
+    state: "MO",
+    zip: "63101",
+    notes: "",
+    areaId: "",
+    technicians,
+  };
+}
+
+function resetRosterQuery(): void {
+  rosterQueryResult = {
+    data: undefined,
+    isLoading: false,
+    isError: false,
+    error: null,
+    refetch: vi.fn(),
+  };
+}
+
+beforeEach(() => {
+  resetRosterQuery();
+});
+
+function createClient(): QueryClient {
+  return new QueryClient({ defaultOptions: { queries: { retry: false } } });
+}
+
+/**
+ * SH-250: mirrors the app's real staleTime (src/lib/query/query-client.ts). The default
+ * test client uses staleTime 0, which silently masks cache-staleness defects on the
+ * reload path — the conflict recovery must not depend on an empty cache.
+ */
+function createCachingClient(): QueryClient {
+  return new QueryClient({
+    defaultOptions: { queries: { retry: false, staleTime: 5 * 60 * 1000 } },
+  });
+}
+
+function makeWrapper(client: QueryClient) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+  };
+}
+
+function deferRoster(): {
+  promise: Promise<VendorCompanyRoster>;
+  resolve: (value: VendorCompanyRoster) => void;
+} {
+  let resolve!: (value: VendorCompanyRoster) => void;
+  const promise = new Promise<VendorCompanyRoster>((resolver) => {
+    resolve = resolver;
+  });
+  return { promise, resolve };
+}
+
+describe("useVendorRosterForm load-error handling", () => {
+  beforeEach(() => {
+    rosterGet.mockReset();
+    saveMutate.mockReset();
+  });
+
+  it("shows a safe retryable error when selecting an existing company fetch is rejected", async () => {
+    rosterGet.mockRejectedValueOnce(new Error("Internal server error"));
+    const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
+      wrapper: makeWrapper(createClient()),
+    });
+
+    expect(result.current.loadErrorMessage).toBeNull();
+
+    await act(async () => {
+      await result.current.selectCompany(company);
+    });
+
+    expect(result.current.loadErrorMessage).toBe("Couldn't load that company's roster. Try again.");
+    expect(result.current.selectedCompanyId).toBeNull();
+  });
+
+  it("preserves entered form data when selecting an existing company fetch is rejected", async () => {
+    rosterGet.mockRejectedValueOnce(new Error("Internal server error"));
+    const { result } = renderHook(
+      () => {
+        const form = useVendorRosterForm({ mode: "create" });
+        const name = useController({ control: form.control, name: "name" });
+        return { form, name };
+      },
+      { wrapper: makeWrapper(createClient()) },
+    );
+
+    await act(async () => {
+      result.current.name.field.onChange("Draft Vendor");
+    });
+    expect(result.current.name.field.value).toBe("Draft Vendor");
+
+    await act(async () => {
+      await result.current.form.selectCompany(company);
+    });
+
+    expect(result.current.name.field.value).toBe("Draft Vendor");
+    expect(result.current.form.loadErrorMessage).toBe(
+      "Couldn't load that company's roster. Try again.",
+    );
+  });
+
+  it("recovers and populates the form on retry after a rejected fetch", async () => {
+    rosterGet.mockRejectedValueOnce(new Error("boom"));
+    const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
+      wrapper: makeWrapper(createClient()),
+    });
+
+    await act(async () => {
+      await result.current.selectCompany(company);
+    });
+    expect(result.current.loadErrorMessage).not.toBeNull();
+
+    rosterGet.mockResolvedValueOnce(roster);
+    await act(async () => {
+      result.current.retryLoad();
+    });
+    await waitFor(() => expect(result.current.loadErrorMessage).toBeNull());
+
+    expect(result.current.selectedCompanyId).toBe(5);
+  });
+
+  it("clears the selected roster when the form is reset", async () => {
+    rosterGet.mockResolvedValueOnce(roster);
+    const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
+      wrapper: makeWrapper(createClient()),
+    });
+
+    await act(async () => {
+      await result.current.selectCompany(company);
+    });
+    expect(result.current.selectedCompanyId).toBe(5);
+
+    act(() => result.current.resetForm());
+
+    expect(result.current.selectedCompanyId).toBeNull();
+  });
+
+  it("does not expose raw server details in the error message", async () => {
+    rosterGet.mockRejectedValueOnce(new Error("Database connection failed at 10.0.0.1"));
+    const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
+      wrapper: makeWrapper(createClient()),
+    });
+
+    await act(async () => {
+      await result.current.selectCompany(company);
+    });
+
+    expect(result.current.loadErrorMessage).not.toContain("Database");
+    expect(result.current.loadErrorMessage).not.toContain("10.0.0.1");
+  });
+});
+
+describe("useVendorRosterForm prototype defaults", () => {
+  it("does not persist the prototype's untouched optional technician card", () => {
+    const { result } = renderHook(
+      () => useVendorRosterForm({ mode: "create", startWithTechnician: true }),
+      { wrapper: makeWrapper(createClient()) },
+    );
+
+    act(() => {
+      result.current.submit({
+        name: "Independent Vendor LLC",
+        companyPhone: "(314) 555-0199",
+        email: "",
+        address: "",
+        city: "",
+        state: "",
+        zip: "",
+        notes: "",
+        areaId: "",
+        technicians: [
+          {
+            contactName: "",
+            phone: "",
+            email: "",
+            preferredContact: "Phone",
+            tradeSpecialties: "",
+            isActive: true,
+          },
+        ],
+      });
+    });
+
+    expect(saveMutate).toHaveBeenCalledWith(
+      expect.objectContaining({ values: expect.objectContaining({ technicians: [] }) }),
+      expect.any(Object),
+    );
+  });
+});
+
+describe("useVendorRosterForm legacy stored Maps URL", () => {
+  beforeEach(() => {
+    rosterGet.mockReset();
+    saveMutate.mockReset();
+  });
+
+  it("saves an edit of a legacy roster whose stored Maps URL is plain HTTP", async () => {
+    const legacyRoster: VendorCompanyRoster = {
+      ...roster,
+      googleMapsUrl: "http://maps.example.test/legacy",
+    };
+    rosterQueryResult = {
+      data: legacyRoster,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    };
+    const { result } = renderHook(() => useVendorRosterForm({ mode: "update", vendorId: 7 }), {
+      wrapper: makeWrapper(createClient()),
+    });
+
+    // Exercise the real resolver: while the form schema validated the hidden
+    // loaded URL, this submit never reached the save path.
+    await act(async () => {
+      await result.current.handleSubmit(result.current.submit)({
+        preventDefault: () => undefined,
+      } as unknown as FormEvent<HTMLFormElement>);
+    });
+
+    expect(saveMutate).toHaveBeenCalledTimes(1);
+    const input = saveMutate.mock.calls[0]?.[0] as {
+      mode: string;
+      values: VendorCompanyRosterFormValues;
+    };
+    expect(input.mode).toBe("update");
+    expect(input.values).not.toHaveProperty("googleMapsUrl");
+  });
+});
+
+describe("useVendorRosterForm technician removal", () => {
+  it("keeps a valid roster saveable after an existing technician is removed", async () => {
+    rosterQueryResult = {
+      data: rosterWithTechnicians,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    };
+    const { result } = renderHook(
+      () => {
+        const form = useVendorRosterForm({ mode: "update", companyId: 5 });
+        const technicians = useFieldArray({ control: form.control, name: "technicians" });
+        return { form, technicians };
+      },
+      { wrapper: makeWrapper(createClient()) },
+    );
+
+    await waitFor(() => expect(result.current.form.isValid).toBe(true));
+    act(() => result.current.technicians.remove(1));
+
+    await waitFor(() => expect(result.current.form.isValid).toBe(true));
+  });
+});
+
+describe("useVendorRosterForm stale-selection handling", () => {
+  beforeEach(() => {
+    rosterGet.mockReset();
+  });
+
+  it("keeps the newest company roster when two lookups resolve out of order", async () => {
+    const first = deferRoster();
+    const second = deferRoster();
+    rosterGet.mockImplementationOnce(() => first.promise);
+    rosterGet.mockImplementationOnce(() => second.promise);
+
+    const { result } = renderHook(
+      () => {
+        const form = useVendorRosterForm({ mode: "create" });
+        const name = useController({ control: form.control, name: "name" });
+        return { form, name };
+      },
+      { wrapper: makeWrapper(createClient()) },
+    );
+
+    let firstSelect!: Promise<void>;
+    let secondSelect!: Promise<void>;
+    act(() => {
+      firstSelect = result.current.form.selectCompany(company);
+    });
+    act(() => {
+      secondSelect = result.current.form.selectCompany(secondCompany);
+    });
+
+    await act(async () => {
+      second.resolve(secondRoster);
+      await secondSelect;
+    });
+    await act(async () => {
+      first.resolve(roster);
+      await firstSelect;
+    });
+
+    expect(result.current.form.selectedCompanyId).toBe(6);
+    expect(result.current.name.field.value).toBe("Metro HVAC");
+  });
+
+  it("keeps a free-text draft when a pending lookup resolves after clearing to free text", async () => {
+    const lookup = deferRoster();
+    rosterGet.mockImplementationOnce(() => lookup.promise);
+
+    const { result } = renderHook(
+      () => {
+        const form = useVendorRosterForm({ mode: "create" });
+        const name = useController({ control: form.control, name: "name" });
+        return { form, name };
+      },
+      { wrapper: makeWrapper(createClient()) },
+    );
+
+    let pendingSelect!: Promise<void>;
+    act(() => {
+      pendingSelect = result.current.form.selectCompany(company);
+    });
+
+    act(() => {
+      result.current.form.clearSelectedCompany("Draft Vendor");
+    });
+    await act(async () => {
+      result.current.name.field.onChange("Draft Vendor");
+    });
+    expect(result.current.name.field.value).toBe("Draft Vendor");
+
+    await act(async () => {
+      lookup.resolve(roster);
+      await pendingSelect;
+    });
+
+    expect(result.current.form.selectedCompanyId).toBeNull();
+    expect(result.current.name.field.value).toBe("Draft Vendor");
+  });
+});
+
+describe("useVendorRosterForm additive add flow (SH-250)", () => {
+  beforeEach(() => {
+    rosterGet.mockReset();
+    saveMutate.mockReset();
+    vi.mocked(toast.error).mockReset();
+  });
+
+  it("issues an additive add — never update — when an existing company is selected", async () => {
+    rosterGet.mockResolvedValueOnce(roster);
+    const { result } = renderHook(
+      () => {
+        const form = useVendorRosterForm({ mode: "create", startWithTechnician: true });
+        const technician = useController({
+          control: form.control,
+          name: "technicians.0.contactName",
+        });
+        return { form, technician };
+      },
+      { wrapper: makeWrapper(createClient()) },
+    );
+
+    await act(async () => {
+      await result.current.form.selectCompany(company);
+    });
+    await act(async () => {
+      result.current.technician.field.onChange("Dana Kim");
+    });
+    act(() => {
+      result.current.form.submit(submitValues([newTechnician]));
+    });
+
+    expect(saveMutate).toHaveBeenCalledTimes(1);
+    const input = saveMutate.mock.calls[0]?.[0] as { mode: string };
+    expect(input.mode).toBe("add");
+    expect(saveMutate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        companyId: 5,
+        rowVersion: "rv-1",
+        originalRoster: roster,
+        values: expect.objectContaining({ technicians: [newTechnician] }),
+      }),
+      expect.any(Object),
+    );
+  });
+
+  it("still creates via POST when no existing company is matched", () => {
+    const { result } = renderHook(
+      () => useVendorRosterForm({ mode: "create", startWithTechnician: true }),
+      { wrapper: makeWrapper(createClient()) },
+    );
+
+    act(() => {
+      result.current.submit(submitValues([newTechnician]));
+    });
+
+    expect(saveMutate).toHaveBeenCalledTimes(1);
+    expect(saveMutate.mock.calls[0]?.[0]).toEqual(
+      expect.objectContaining({ mode: "create", companyId: undefined, rowVersion: undefined }),
+    );
+  });
+
+  it("blocks submit when the selected company has nothing to add", async () => {
+    rosterGet.mockResolvedValueOnce(roster);
+    const { result } = renderHook(() => useVendorRosterForm({ mode: "create" }), {
+      wrapper: makeWrapper(createClient()),
+    });
+
+    await act(async () => {
+      await result.current.selectCompany(company);
+    });
+    act(() => {
+      result.current.submit(submitValues([]));
+    });
+
+    expect(saveMutate).not.toHaveBeenCalled();
+    expect(vi.mocked(toast.error)).toHaveBeenCalledTimes(1);
+    expect(vi.mocked(toast.error)).toHaveBeenCalledWith(
+      "No changes to save. Enter technician details or update a company field.",
+    );
+  });
+
+  it("keeps the entered technician and retries with the fresh rowVersion after reload", async () => {
+    rosterGet.mockResolvedValueOnce(roster);
+    const { result } = renderHook(
+      () => {
+        const form = useVendorRosterForm({ mode: "create", startWithTechnician: true });
+        const technician = useController({
+          control: form.control,
+          name: "technicians.0.contactName",
+        });
+        return { form, technician };
+      },
+      { wrapper: makeWrapper(createClient()) },
+    );
+
+    await act(async () => {
+      await result.current.form.selectCompany(company);
+    });
+    await act(async () => {
+      result.current.technician.field.onChange("Dana Kim");
+    });
+    act(() => {
+      result.current.form.submit(submitValues([newTechnician]));
+    });
+    expect(saveMutate.mock.calls[0]?.[0]).toEqual(expect.objectContaining({ rowVersion: "rv-1" }));
+
+    rosterGet.mockResolvedValueOnce({ ...roster, rowVersion: "rv-2" });
+    await act(async () => {
+      result.current.form.reload();
+    });
+    await waitFor(() => expect(result.current.form.selectedCompanyId).toBe(5));
+
+    act(() => {
+      result.current.form.submit(submitValues([newTechnician]));
+    });
+    expect(saveMutate.mock.calls[1]?.[0]).toEqual(
+      expect.objectContaining({ mode: "add", rowVersion: "rv-2" }),
+    );
+  });
+
+  it("refreshes the visible company fields on reload, not just rowVersion", async () => {
+    rosterGet.mockResolvedValueOnce(roster);
+    const { result } = renderHook(
+      () => {
+        const form = useVendorRosterForm({ mode: "create", startWithTechnician: true });
+        const name = useController({ control: form.control, name: "name" });
+        return { form, name };
+      },
+      { wrapper: makeWrapper(createClient()) },
+    );
+
+    await act(async () => {
+      await result.current.form.selectCompany(company);
+    });
+    expect(result.current.name.field.value).toBe("Gateway Plumbing");
+
+    // Someone else renamed the company, which is what caused the 409.
+    rosterGet.mockResolvedValueOnce({
+      ...roster,
+      rowVersion: "rv-2",
+      name: "Gateway Plumbing & Drain",
+    });
+    await act(async () => {
+      result.current.form.reload();
+    });
+
+    // Reload must not leave the form on the pre-conflict name, or the retry
+    // would diff stale fields and overwrite the concurrent update.
+    await waitFor(() => expect(result.current.name.field.value).toBe("Gateway Plumbing & Drain"));
+  });
+
+  it("reload bypasses the cache so the retry carries the fresh rowVersion", async () => {
+    rosterGet.mockResolvedValueOnce(roster);
+    const { result } = renderHook(
+      () => useVendorRosterForm({ mode: "create", startWithTechnician: true }),
+      { wrapper: makeWrapper(createCachingClient()) },
+    );
+
+    await act(async () => {
+      await result.current.selectCompany(company);
+    });
+    expect(rosterGet).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      result.current.submit(submitValues([newTechnician]));
+    });
+    expect(saveMutate.mock.calls[0]?.[0]).toEqual(expect.objectContaining({ rowVersion: "rv-1" }));
+
+    // The 409 never invalidates this key, and in the Add flow nothing else observes it.
+    // Without staleTime: 0 on the reload fetch, the cached rv-1 is served straight back
+    // and every retry 409s again.
+    rosterGet.mockResolvedValueOnce({ ...roster, rowVersion: "rv-2" });
+    await act(async () => {
+      result.current.reload();
+    });
+
+    await waitFor(() => expect(rosterGet).toHaveBeenCalledTimes(2));
+
+    act(() => {
+      result.current.submit(submitValues([newTechnician]));
+    });
+    expect(saveMutate.mock.calls[1]?.[0]).toEqual(
+      expect.objectContaining({ mode: "add", rowVersion: "rv-2" }),
+    );
+  });
+
+  it("does not regress the Edit Vendor reconcile path (mode update)", () => {
+    rosterQueryResult = {
+      data: rosterWithTechnicians,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    };
+    const { result } = renderHook(() => useVendorRosterForm({ mode: "update", vendorId: 7 }), {
+      wrapper: makeWrapper(createClient()),
+    });
+
+    act(() => {
+      result.current.submit(submitValues([...rosterWithTechnicians.technicians, newTechnician]));
+    });
+
+    expect(saveMutate).toHaveBeenCalledTimes(1);
+    expect(saveMutate.mock.calls[0]?.[0]).toEqual(
+      expect.objectContaining({
+        mode: "update",
+        companyId: 5,
+        rowVersion: "rv-1",
+        originalRoster: rosterWithTechnicians,
+        values: expect.objectContaining({
+          technicians: [...rosterWithTechnicians.technicians, newTechnician],
+        }),
+      }),
+    );
+  });
+});
+
+describe("useVendorRosterForm technician autopopulation (SH-246)", () => {
+  beforeEach(() => {
+    rosterGet.mockReset();
+    saveMutate.mockReset();
+  });
+
+  it("does not autopopulate technician fields when a company is selected", async () => {
+    rosterGet.mockResolvedValueOnce(rosterWithTechnicians);
+    const { result } = renderHook(
+      () => {
+        const form = useVendorRosterForm({ mode: "create" });
+        const technicians = useController({ control: form.control, name: "technicians" });
+        const name = useController({ control: form.control, name: "name" });
+        return { form, technicians, name };
+      },
+      { wrapper: makeWrapper(createClient()) },
+    );
+
+    await act(async () => {
+      await result.current.form.selectCompany(company);
+    });
+
+    const technicians = result.current.technicians.field.value;
+    expect(technicians).toEqual([
+      {
+        contactName: "",
+        phone: "",
+        email: "",
+        tradeSpecialties: "",
+        isActive: true,
+      },
+    ]);
+    // SH-250: the blank row must not carry a fabricated preferredContact, since
+    // the control was removed from the form and `append` omits it too.
+    expect(technicians[0]).not.toHaveProperty("preferredContact");
+    expect(technicians).not.toContainEqual(expect.objectContaining({ contactName: "Ray Holt" }));
+    expect(technicians).not.toContainEqual(
+      expect.objectContaining({ contactName: "Amy Santiago" }),
+    );
+    expect(result.current.name.field.value).toBe("Gateway Plumbing");
+    expect(result.current.form.selectedCompanyId).toBe(5);
+  });
+
+  it("keeps a typed technician when the company selection is cleared to free text", async () => {
+    rosterGet.mockResolvedValueOnce(roster);
+    const { result } = renderHook(
+      () => {
+        const form = useVendorRosterForm({ mode: "create", startWithTechnician: true });
+        const technician = useController({
+          control: form.control,
+          name: "technicians.0.contactName",
+        });
+        return { form, technician };
+      },
+      { wrapper: makeWrapper(createClient()) },
+    );
+
+    await act(async () => {
+      await result.current.form.selectCompany(company);
+    });
+    await act(async () => {
+      result.current.technician.field.onChange("Dana Kim");
+    });
+
+    act(() => {
+      result.current.form.clearSelectedCompany("Draft Vendor");
+    });
+
+    expect(result.current.form.selectedCompanyId).toBeNull();
+    expect(result.current.technician.field.value).toBe("Dana Kim");
+  });
+});
diff --git a/src/test/app/(protected)/vendors/vendor-create-modal.test.tsx b/src/test/app/(protected)/vendors/vendor-create-modal.test.tsx
new file mode 100644
index 00000000..644fc329
--- /dev/null
+++ b/src/test/app/(protected)/vendors/vendor-create-modal.test.tsx
@@ -0,0 +1,201 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { VendorCreateModal } from "@/app/(protected)/vendors/_components/vendor-create-modal";
+import { VendorRosterFormFields } from "@/app/(protected)/vendors/_components/vendor-roster-form-fields";
+import {
+  VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE,
+  emptyVendorCompanyRosterForm,
+  vendorCompanyRosterSchema,
+  type VendorCompanyRosterFormValues,
+} from "@/domain/vendors/schemas/vendor-roster-schema";
+import { renderWithProviders } from "@/test/test-utils";
+import type { StateCode } from "@/data/areas";
+import { pickVendorState } from "./vendor-state-select";
+
+vi.mock("@/domain/vendors/use-cases/use-vendor-facets", () => ({
+  useVendorFacets: () => ({ data: { companies: [], trades: [] }, isLoading: false }),
+}));
+
+vi.mock("@/domain/vendors/use-cases/use-save-vendor-company-roster", async () => {
+  const actual = await vi.importActual<
+    typeof import("@/domain/vendors/use-cases/use-save-vendor-company-roster")
+  >("@/domain/vendors/use-cases/use-save-vendor-company-roster");
+  return {
+    ...actual,
+    useSaveVendorCompanyRoster: () => ({ mutate: vi.fn(), isPending: false }),
+  };
+});
+
+function PlainCompanyFieldsHarness() {
+  const { control, handleSubmit, formState } = useForm<VendorCompanyRosterFormValues>({
+    defaultValues: emptyVendorCompanyRosterForm,
+    resolver: zodResolver(vendorCompanyRosterSchema),
+    mode: "onChange",
+  });
+  return (
+    <form onSubmit={handleSubmit(() => {})}>
+      <VendorRosterFormFields control={control} errors={formState.errors} />
+    </form>
+  );
+}
+
+function renderCreateModal() {
+  renderWithProviders(<VendorCreateModal open={true} onClose={vi.fn()} />, {
+    route: "/vendors",
+    withAuth: false,
+  });
+}
+
+// delay: null skips user-event's per-keystroke setTimeout yields, which only
+// add real-timer latency here.
+let user = userEvent.setup({ delay: null });
+
+async function fillCompanyNameAndSubmit(name = "Gateway Plumbing") {
+  fireEvent.change(screen.getByRole("combobox", { name: "Company (required)" }), {
+    target: { value: name },
+  });
+  // SH-271 made the structured address required. These tests are about the
+  // phone-or-email rule, so the address is filled to keep the form's only
+  // outstanding problem the one under test.
+  fillRequiredAddress();
+  await user.click(screen.getByRole("button", { name: "Add Vendor" }));
+}
+
+function fillRequiredAddress({
+  street = "6735 Trippel Rd",
+  city = "Theodore",
+  state = "AL" as StateCode,
+} = {}) {
+  fireEvent.change(screen.getByRole("combobox", { name: "Street Address (required)" }), {
+    target: { value: street },
+  });
+  fireEvent.change(screen.getByRole("textbox", { name: "City (required)" }), {
+    target: { value: city },
+  });
+  pickVendorState(state);
+}
+
+// Each test mounts the full MUI dialog (Autocompletes, 50-option State list)
+// and costs ~1s of CPU when idle; the first also pays JIT warm-up. Under
+// parallel agent load the 5s default is exceeded by CPU starvation alone,
+// matching the 10s budgets already used by vendors-list.test.tsx.
+describe("VendorCreateModal validation", { timeout: 15_000 }, () => {
+  beforeEach(() => {
+    user = userEvent.setup({ delay: null });
+  });
+
+  it("explains the company phone-or-email requirement after submission", async () => {
+    renderCreateModal();
+    await fillCompanyNameAndSubmit();
+
+    expect(await screen.findByText(VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE)).toBeInTheDocument();
+  });
+
+  it("labels the autocomplete company field exactly, required, with no generated asterisk", () => {
+    renderCreateModal();
+
+    const company = screen.getByRole("combobox", { name: "Company (required)" });
+    expect(company).toBeRequired();
+    expect(screen.getAllByText("Company (required)")).toHaveLength(2);
+    expect(screen.queryByText("*")).not.toBeInTheDocument();
+    expect(document.querySelector(".MuiFormLabel-asterisk")).toBeNull();
+    expect(company.closest(".MuiFormControl-root")?.querySelector("legend")).toHaveTextContent(
+      /^Company \(required\)$/,
+    );
+  });
+
+  it("labels the optional technician section without counting blank drafts", () => {
+    renderCreateModal();
+
+    expect(screen.getByText("Technician details (optional)")).toBeInTheDocument();
+    expect(screen.queryByText("Technicians (1)")).not.toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: "Technician name (optional)" })).toBeVisible();
+  });
+
+  it("labels the plain company field exactly, required, with no generated asterisk", () => {
+    renderWithProviders(<PlainCompanyFieldsHarness />, { route: "/vendors", withAuth: false });
+
+    const company = screen.getByRole("textbox", { name: "Company (required)" });
+    expect(company).toBeRequired();
+    expect(screen.getAllByText("Company (required)")).toHaveLength(2);
+    expect(screen.queryByText("*")).not.toBeInTheDocument();
+    expect(document.querySelector(".MuiFormLabel-asterisk")).toBeNull();
+    expect(company.closest(".MuiFormControl-root")?.querySelector("legend")).toHaveTextContent(
+      /^Company \(required\)$/,
+    );
+  });
+
+  it("shows the phone-or-email error once without marking either input individually invalid", async () => {
+    renderCreateModal();
+    await fillCompanyNameAndSubmit();
+
+    const message = await screen.findByText(VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE);
+    expect(message).toHaveAttribute("id");
+    expect(screen.getAllByText(VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE)).toHaveLength(1);
+
+    const phone = screen.getByRole("textbox", { name: "Company Phone (optional)" });
+    const email = screen.getByRole("textbox", { name: "Email (optional)" });
+    expect(phone).not.toHaveAttribute("aria-invalid", "true");
+    expect(email).not.toHaveAttribute("aria-invalid", "true");
+    expect(phone.getAttribute("aria-describedby")).toContain(message.getAttribute("id"));
+    expect(email.getAttribute("aria-describedby")).toContain(message.getAttribute("id"));
+  });
+
+  it("marks only the phone input invalid when the phone is malformed", async () => {
+    renderCreateModal();
+    await fillCompanyNameAndSubmit();
+    const phone = screen.getByRole("textbox", { name: "Company Phone (optional)" });
+    const email = screen.getByRole("textbox", { name: "Email (optional)" });
+
+    await user.type(phone, "314");
+    await user.click(screen.getByRole("button", { name: "Add Vendor" }));
+
+    expect(await screen.findByText("Enter a 10-digit phone number")).toBeInTheDocument();
+    expect(phone).toHaveAttribute("aria-invalid", "true");
+    expect(email).not.toHaveAttribute("aria-invalid", "true");
+    expect(screen.queryByText(VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE)).not.toBeInTheDocument();
+  });
+
+  it("marks only the email input invalid when the email is malformed", async () => {
+    renderCreateModal();
+    await fillCompanyNameAndSubmit();
+    const phone = screen.getByRole("textbox", { name: "Company Phone (optional)" });
+    const email = screen.getByRole("textbox", { name: "Email (optional)" });
+
+    await user.type(email, "not-an-email");
+    await user.click(screen.getByRole("button", { name: "Add Vendor" }));
+
+    expect(await screen.findByText("Invalid email")).toBeInTheDocument();
+    expect(email).toHaveAttribute("aria-invalid", "true");
+    expect(phone).not.toHaveAttribute("aria-invalid", "true");
+    expect(screen.queryByText(VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE)).not.toBeInTheDocument();
+  });
+
+  it("clears the phone-or-email error once a valid phone is entered", async () => {
+    renderCreateModal();
+    await fillCompanyNameAndSubmit();
+    const phone = screen.getByRole("textbox", { name: "Company Phone (optional)" });
+
+    expect(await screen.findByText(VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE)).toBeInTheDocument();
+
+    await user.type(phone, "3145550100");
+    await waitFor(() =>
+      expect(screen.queryByText(VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE)).not.toBeInTheDocument(),
+    );
+  });
+
+  it("shows the notes limit and live character counter", async () => {
+    renderCreateModal();
+
+    const notes = screen.getByRole("textbox", { name: "Notes (optional)" });
+    fireEvent.change(notes, { target: { value: "abc" } });
+
+    expect(notes).toHaveAttribute("maxlength", "500");
+    await waitFor(() =>
+      expect(notes).toHaveAccessibleDescription(/3\/500 characters · Maximum 500 characters/),
+    );
+  });
+});
diff --git a/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx b/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
new file mode 100644
index 00000000..0e5ea3eb
--- /dev/null
+++ b/src/test/app/(protected)/vendors/vendor-detail-drawer.test.tsx
@@ -0,0 +1,487 @@
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { VendorDetailDrawer } from "@/app/(protected)/vendors/_components/vendor-detail-drawer";
+import { renderWithProviders } from "@/test/test-utils";
+import type { VendorListItem } from "@/domain/vendors/types/vendor";
+
+const useVendorCompanyRoster = vi.fn();
+const saveMutate = vi.fn();
+
+vi.mock("@/domain/vendors/use-cases/use-vendor-company-roster", () => ({
+  useVendorCompanyRoster: (...args: unknown[]) => useVendorCompanyRoster(...args),
+}));
+
+vi.mock("@/domain/vendors/use-cases/use-save-vendor-company-roster", async () => {
+  const actual = await vi.importActual<
+    typeof import("@/domain/vendors/use-cases/use-save-vendor-company-roster")
+  >("@/domain/vendors/use-cases/use-save-vendor-company-roster");
+  return {
+    ...actual,
+    useSaveVendorCompanyRoster: () => ({ mutate: saveMutate, isPending: false }),
+  };
+});
+
+const vendor: VendorListItem = {
+  id: 1,
+  companyId: "co-1",
+  companyName: "Gateway Plumbing",
+  contactName: "Adam Whyte",
+  email: "",
+  phone: "",
+  companyPhone: "",
+  googleMapsUrl: "",
+  notes: "",
+  totalJobs: 0,
+  address: "",
+  city: "",
+  state: "",
+  tradeSpecialties: "",
+  isActive: true,
+  preferredContact: "Phone",
+  areaId: "",
+  areaName: "",
+};
+
+function rosterWith(technicians: Array<Record<string, unknown>>) {
+  return {
+    data: {
+      companyId: "co-1",
+      rowVersion: "rv-1",
+      name: "Gateway Plumbing",
+      companyPhone: "(314) 555-0100",
+      email: "dispatch@gateway.test",
+      // SH-271: Street/City/State are required, so a saved roster carries them.
+      // Tests that need the incomplete case blank them explicitly.
+      address: "6735 Trippel Rd",
+      city: "Theodore",
+      state: "AL",
+      zip: "",
+      googleMapsUrl: "",
+      notes: "",
+      areaId: "",
+      areaName: "",
+      technicians,
+    },
+    isLoading: false,
+    error: null,
+  };
+}
+
+// delay: null skips user-event's per-keystroke setTimeout yields, which only
+// add real-timer latency here.
+let user = userEvent.setup({ delay: null });
+
+beforeEach(() => {
+  saveMutate.mockReset();
+  user = userEvent.setup({ delay: null });
+});
+
+// The edit-mode drawer is a heavy MUI render and the first test pays JIT
+// warm-up; under parallel agent load the 5s default is exceeded by CPU
+// starvation alone, matching the 10s budgets in vendors-list.test.tsx.
+describe("VendorDetailDrawer selected-technician display", { timeout: 15_000 }, () => {
+  it.each([
+    { removedPosition: 1, remainingId: 2, remainingName: "Beth" },
+    { removedPosition: 2, remainingId: 1, remainingName: "Adam" },
+  ])(
+    "reconciles the remaining roster after removing technician $removedPosition",
+    async ({ removedPosition, remainingId, remainingName }) => {
+      useVendorCompanyRoster.mockReturnValue(
+        rosterWith([
+          {
+            id: 1,
+            contactName: "Adam",
+            phone: "314-555-0198",
+            email: "",
+            tradeSpecialties: "",
+            isActive: removedPosition === 1,
+            totalJobs: 5,
+          },
+          {
+            id: 2,
+            contactName: "Beth",
+            phone: "314-555-0199",
+            email: "",
+            tradeSpecialties: "",
+            isActive: removedPosition === 2,
+            totalJobs: 2,
+          },
+        ]),
+      );
+
+      renderWithProviders(
+        <VendorDetailDrawer open={true} vendor={vendor} startInEdit={true} onClose={vi.fn()} />,
+        { route: "/vendors", withAuth: false },
+      );
+
+      await user.click(
+        screen.getByRole("button", { name: `Remove technician ${removedPosition}` }),
+      );
+      await user.click(screen.getByRole("button", { name: "Save changes" }));
+
+      await waitFor(() => expect(saveMutate).toHaveBeenCalledTimes(1));
+      expect(saveMutate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          mode: "update",
+          values: expect.objectContaining({
+            technicians: [
+              expect.objectContaining({
+                id: remainingId,
+                contactName: remainingName,
+                isActive: false,
+              }),
+            ],
+          }),
+        }),
+        expect.any(Object),
+      );
+    },
+  );
+
+  it("keeps Save changes available after removing a technician from a legacy roster", async () => {
+    const roster = rosterWith([
+      {
+        id: 1,
+        contactName: "Adam",
+        phone: "314-555-0198",
+        email: "",
+        tradeSpecialties: "",
+        isActive: true,
+        totalJobs: 5,
+      },
+      {
+        id: 2,
+        contactName: "Beth",
+        phone: "314-555-0199",
+        email: "",
+        tradeSpecialties: "",
+        isActive: true,
+        totalJobs: 2,
+      },
+    ]);
+    roster.data.companyPhone = "";
+    roster.data.email = "";
+    useVendorCompanyRoster.mockReturnValue(roster);
+
+    renderWithProviders(
+      <VendorDetailDrawer open={true} vendor={vendor} startInEdit={true} onClose={vi.fn()} />,
+      { route: "/vendors", withAuth: false },
+    );
+
+    await user.click(screen.getByRole("button", { name: "Remove technician 2" }));
+
+    const save = screen.getByRole("button", { name: "Save changes" });
+    expect(save).toBeEnabled();
+
+    await user.click(save);
+
+    expect(
+      await screen.findByText("Provide a company phone or email (at least one required)"),
+    ).toBeInTheDocument();
+  });
+
+  it("renders no preference label when preferredContact is absent", () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([
+        { id: 1, contactName: "Adam", phone: "314-555-0198", isActive: true, totalJobs: 5 },
+      ]),
+    );
+
+    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
+      route: "/vendors",
+      withAuth: false,
+    });
+
+    expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
+    expect(screen.queryByText(/^Prefers/)).not.toBeInTheDocument();
+  });
+
+  it("keeps the retired preferred-contact value out of the detail view", () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([
+        {
+          id: 1,
+          contactName: "Adam",
+          phone: "314-555-0198",
+          preferredContact: "Email",
+          isActive: true,
+          totalJobs: 5,
+        },
+      ]),
+    );
+
+    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
+      route: "/vendors",
+      withAuth: false,
+    });
+
+    expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
+    expect(screen.queryByText(/^Prefers/)).not.toBeInTheDocument();
+  });
+
+  it("falls back to the clicked row when the roster has no matching stable id", () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([
+        {
+          id: 7,
+          contactName: "Adam Whyte",
+          phone: "999-999-9999",
+          isActive: true,
+          totalJobs: 99,
+        },
+      ]),
+    );
+
+    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
+      route: "/vendors",
+      withAuth: false,
+    });
+
+    expect(screen.getByText("0")).toBeInTheDocument();
+    expect(screen.queryByText("999-999-9999")).not.toBeInTheDocument();
+  });
+
+  it("does not expose a status control for a different technician", () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([
+        {
+          id: 7,
+          contactName: "Different Technician",
+          phone: "314-555-0101",
+          email: "",
+          tradeSpecialties: "Plumbing",
+          isActive: true,
+          totalJobs: 10,
+        },
+      ]),
+    );
+
+    renderWithProviders(
+      <VendorDetailDrawer open={true} vendor={vendor} startInEdit={true} onClose={vi.fn()} />,
+      { route: "/vendors", withAuth: false },
+    );
+
+    expect(screen.queryByRole("switch", { name: "Active status" })).not.toBeInTheDocument();
+  });
+});
+
+describe("VendorDetailDrawer design parity", () => {
+  it("wraps long unbroken company notes inside the drawer", () => {
+    const roster = rosterWith([]);
+    roster.data.notes = "x".repeat(5000);
+    useVendorCompanyRoster.mockReturnValue(roster);
+
+    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
+      route: "/vendors",
+      withAuth: false,
+    });
+
+    const notes = screen.getByText("x".repeat(5000));
+    expect(notes).toHaveStyle({ overflowWrap: "anywhere", whiteSpace: "pre-wrap" });
+  });
+
+  it("preserves an oversized legacy note in edit mode while showing the new limit", async () => {
+    const roster = rosterWith([]);
+    const legacyNotes = "x".repeat(501);
+    roster.data.notes = legacyNotes;
+    useVendorCompanyRoster.mockReturnValue(roster);
+
+    renderWithProviders(
+      <VendorDetailDrawer open={true} vendor={vendor} startInEdit={true} onClose={vi.fn()} />,
+      { route: "/vendors", withAuth: false },
+    );
+
+    const notes = await screen.findByRole("textbox", { name: "Notes (optional)" });
+    expect(notes).toHaveValue(legacyNotes);
+    expect(notes).toHaveAttribute("maxlength", "500");
+    expect(notes).toHaveStyle({ overflowWrap: "anywhere", whiteSpace: "pre-wrap" });
+    expect(screen.getByText(/501\/500 characters/)).toBeInTheDocument();
+  });
+
+  it("renders the company once when there is no technician name to head the panel", () => {
+    useVendorCompanyRoster.mockReturnValue(rosterWith([]));
+
+    renderWithProviders(
+      <VendorDetailDrawer open={true} vendor={{ ...vendor, contactName: "" }} onClose={vi.fn()} />,
+      { route: "/vendors", withAuth: false },
+    );
+
+    const heading = screen.getByRole("heading", { level: 2, name: "Gateway Plumbing" });
+    expect(heading).toBeInTheDocument();
+    // The header block holds the title alone — no subtitle repeating the company.
+    expect(heading.parentElement?.children).toHaveLength(1);
+  });
+
+  it("keeps the company subtitle under a technician name", () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([{ id: 1, contactName: "Adam", phone: "", isActive: true, totalJobs: 5 }]),
+    );
+
+    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
+      route: "/vendors",
+      withAuth: false,
+    });
+
+    expect(screen.getByRole("heading", { level: 2, name: "Adam" })).toBeInTheDocument();
+    expect(screen.getAllByText("Gateway Plumbing").length).toBeGreaterThan(0);
+  });
+
+  it("shows exactly one Company label above the company value in view mode", () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([{ id: 1, contactName: "Adam", phone: "", isActive: true, totalJobs: 5 }]),
+    );
+
+    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
+      route: "/vendors",
+      withAuth: false,
+    });
+
+    expect(screen.getAllByText("Company")).toHaveLength(1);
+    expect(screen.getAllByText("Gateway Plumbing").length).toBeGreaterThan(0);
+  });
+
+  it("keeps the Notes section heading when notes exist", () => {
+    const roster = rosterWith([
+      { id: 1, contactName: "Adam", phone: "", isActive: true, totalJobs: 5 },
+    ]);
+    roster.data.notes = "Preferred after-hours vendor";
+    useVendorCompanyRoster.mockReturnValue(roster);
+
+    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
+      route: "/vendors",
+      withAuth: false,
+    });
+
+    expect(screen.getByText("Notes")).toBeInTheDocument();
+    expect(screen.getByText("Preferred after-hours vendor")).toBeInTheDocument();
+  });
+
+  it("shows Street, City and State as separate rows with no stored-URL Google Maps row", () => {
+    // SH-271 removed the "Open in Google Maps" row and the stored URL behind
+    // it; the location is derived from the structured address instead.
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([{ id: 1, contactName: "Adam", phone: "", isActive: true, totalJobs: 5 }]),
+    );
+
+    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
+      route: "/vendors",
+      withAuth: false,
+    });
+
+    expect(screen.getByText("Street Address")).toBeInTheDocument();
+    expect(screen.getByText("City")).toBeInTheDocument();
+    expect(screen.getByText("State")).toBeInTheDocument();
+    expect(screen.queryByText("Google Maps")).not.toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: /Open in Google Maps/ })).not.toBeInTheDocument();
+  });
+
+  it("makes the street address itself the link to Google Maps", () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([{ id: 1, contactName: "Adam", phone: "", isActive: true, totalJobs: 5 }]),
+    );
+
+    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
+      route: "/vendors",
+      withAuth: false,
+    });
+
+    expect(screen.getByRole("link", { name: "6735 Trippel Rd" })).toHaveAttribute(
+      "href",
+      "https://www.google.com/maps/search/?api=1&query=6735%20Trippel%20Rd%20Theodore%20AL",
+    );
+  });
+
+  it("renders no map preview and no link until the address is complete", () => {
+    // A preview built from half an address points somewhere misleading.
+    const roster = rosterWith([
+      { id: 1, contactName: "Adam", phone: "", isActive: true, totalJobs: 5 },
+    ]);
+    roster.data.address = "";
+    roster.data.city = "";
+    roster.data.state = "";
+    useVendorCompanyRoster.mockReturnValue(roster);
+
+    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
+      route: "/vendors",
+      withAuth: false,
+    });
+
+    expect(screen.queryByRole("link", { name: /Trippel/ })).not.toBeInTheDocument();
+    expect(document.querySelector("iframe")).toBeNull();
+  });
+
+  it("puts the status opposite Total Jobs and drops the redundant Status label", () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([{ id: 1, contactName: "Adam", phone: "", isActive: true, totalJobs: 5 }]),
+    );
+
+    renderWithProviders(<VendorDetailDrawer open={true} vendor={vendor} onClose={vi.fn()} />, {
+      route: "/vendors",
+      withAuth: false,
+    });
+
+    const row = screen.getByText("Total Jobs").closest("div")?.parentElement;
+    expect(row).not.toBeNull();
+    expect(getComputedStyle(row as Element).justifyContent).toBe("space-between");
+    expect(row).toHaveTextContent("Active");
+    expect(screen.queryByText("Status")).not.toBeInTheDocument();
+  });
+});
+
+describe("VendorDetailDrawer deactivation prompt", () => {
+  const inactiveVendor: VendorListItem = { ...vendor, isActive: false };
+
+  it("does not prompt to deactivate a saved-inactive vendor toggled on and back off", async () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([
+        { id: 1, contactName: "Adam", phone: "314-555-0198", isActive: false, totalJobs: 5 },
+      ]),
+    );
+    const onRequestDeactivation = vi.fn();
+
+    renderWithProviders(
+      <VendorDetailDrawer
+        open={true}
+        vendor={inactiveVendor}
+        startInEdit={true}
+        onRequestDeactivation={onRequestDeactivation}
+        onClose={vi.fn()}
+      />,
+      { route: "/vendors", withAuth: false },
+    );
+
+    const toggle = screen.getByRole("switch", { name: "Active status" });
+    await user.click(toggle);
+    expect(toggle).toBeChecked();
+
+    await user.click(toggle);
+
+    expect(toggle).not.toBeChecked();
+    expect(onRequestDeactivation).not.toHaveBeenCalled();
+  });
+
+  it("prompts to deactivate a saved-active vendor when the toggle is switched off", async () => {
+    useVendorCompanyRoster.mockReturnValue(
+      rosterWith([
+        { id: 1, contactName: "Adam", phone: "314-555-0198", isActive: true, totalJobs: 5 },
+      ]),
+    );
+    const onRequestDeactivation = vi.fn();
+
+    renderWithProviders(
+      <VendorDetailDrawer
+        open={true}
+        vendor={vendor}
+        startInEdit={true}
+        onRequestDeactivation={onRequestDeactivation}
+        onClose={vi.fn()}
+      />,
+      { route: "/vendors", withAuth: false },
+    );
+
+    await user.click(screen.getByRole("switch", { name: "Active status" }));
+
+    expect(onRequestDeactivation).toHaveBeenCalledWith(vendor);
+  });
+});
diff --git a/src/test/app/(protected)/vendors/vendor-roster-address-fields.test.tsx b/src/test/app/(protected)/vendors/vendor-roster-address-fields.test.tsx
new file mode 100644
index 00000000..2a3bcc81
--- /dev/null
+++ b/src/test/app/(protected)/vendors/vendor-roster-address-fields.test.tsx
@@ -0,0 +1,140 @@
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { describe, expect, it, vi } from "vitest";
+import { VendorRosterFormFields } from "@/app/(protected)/vendors/_components/vendor-roster-form-fields";
+import {
+  emptyVendorCompanyRosterForm,
+  vendorCompanyRosterSchema,
+  type VendorCompanyRosterFormValues,
+} from "@/domain/vendors/schemas/vendor-roster-schema";
+import { suggestAddresses } from "@/lib/address/vendor-address";
+import { renderWithProviders } from "@/test/test-utils";
+import { formatStateOptionLabel, normalizeStateCode } from "@/data/areas";
+import { pickVendorState, stateField } from "./vendor-state-select";
+
+const TYPED_STREET = "415 Murphy Rd";
+const FIRST_SUGGESTION = suggestAddresses(TYPED_STREET)[0];
+
+if (FIRST_SUGGESTION == null) throw new Error("expected a suggestion for the typed street");
+const FIRST_SUGGESTION_STATE = normalizeStateCode(FIRST_SUGGESTION.state);
+if (FIRST_SUGGESTION_STATE == null) throw new Error("expected a canonical suggestion state");
+
+function AddressFormHarness({
+  onValid,
+}: {
+  onValid: (values: VendorCompanyRosterFormValues) => void;
+}) {
+  const { control, handleSubmit, formState } = useForm<VendorCompanyRosterFormValues>({
+    defaultValues: emptyVendorCompanyRosterForm,
+    resolver: zodResolver(vendorCompanyRosterSchema),
+    mode: "onChange",
+  });
+  return (
+    <form onSubmit={handleSubmit(onValid)}>
+      <VendorRosterFormFields control={control} errors={formState.errors} />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+
+function fillCompanyBasics(): void {
+  fireEvent.change(screen.getByRole("textbox", { name: "Company (required)" }), {
+    target: { value: "Gateway Plumbing" },
+  });
+  fireEvent.change(screen.getByRole("textbox", { name: "Company Phone (optional)" }), {
+    target: { value: "3145550100" },
+  });
+}
+
+describe("VendorRosterFormFields address autocomplete", () => {
+  it("keeps the picked street when a suggestion whose label differs is clicked", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<AddressFormHarness onValid={vi.fn()} />, { withAuth: false });
+
+    const street = screen.getByRole("combobox", { name: "Street Address (required)" });
+    await user.type(street, TYPED_STREET);
+
+    const listbox = await screen.findByRole("listbox");
+    const option = within(listbox)
+      .getAllByRole("option")
+      .find((candidate) => candidate.textContent === FIRST_SUGGESTION.label);
+    expect(option).toBeDefined();
+    expect(FIRST_SUGGESTION.label).not.toBe(FIRST_SUGGESTION.street);
+
+    await user.click(option as HTMLElement);
+
+    await waitFor(() => {
+      expect(street).toHaveValue(FIRST_SUGGESTION.street);
+    });
+    expect(screen.getByRole("textbox", { name: "City (required)" })).toHaveValue(
+      FIRST_SUGGESTION.city,
+    );
+    expect(stateField()).toHaveValue(formatStateOptionLabel(FIRST_SUGGESTION_STATE));
+  });
+
+  it("submits the settled structured parts, not the option label", async () => {
+    const user = userEvent.setup();
+    const onValid = vi.fn();
+    renderWithProviders(<AddressFormHarness onValid={onValid} />, { withAuth: false });
+
+    const street = screen.getByRole("combobox", { name: "Street Address (required)" });
+    await user.type(street, TYPED_STREET);
+    const listbox = await screen.findByRole("listbox");
+    await user.click(within(listbox).getAllByRole("option")[0] as HTMLElement);
+    fillCompanyBasics();
+
+    await user.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => expect(onValid).toHaveBeenCalledTimes(1));
+    const values = onValid.mock.calls[0]?.[0] as VendorCompanyRosterFormValues;
+    expect(values.address).toBe(FIRST_SUGGESTION.street);
+    expect(values.city).toBe(FIRST_SUGGESTION.city);
+    expect(values.state).toBe(FIRST_SUGGESTION.state);
+  });
+
+  it("clears every structured address part from the autocomplete clear control", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<AddressFormHarness onValid={vi.fn()} />, { withAuth: false });
+
+    const street = screen.getByRole("combobox", { name: "Street Address (required)" });
+    await user.type(street, TYPED_STREET);
+    const listbox = await screen.findByRole("listbox");
+    await user.click(within(listbox).getAllByRole("option")[0] as HTMLElement);
+
+    expect(screen.getByRole("textbox", { name: "City (required)" })).toHaveValue(
+      FIRST_SUGGESTION.city,
+    );
+    expect(stateField()).toHaveValue(formatStateOptionLabel(FIRST_SUGGESTION_STATE));
+    await user.click(screen.getByRole("button", { name: "Clear" }));
+
+    expect(street).toHaveValue("");
+    expect(screen.getByRole("textbox", { name: "City (required)" })).toHaveValue("");
+    expect(stateField()).toHaveValue("");
+  });
+});
+
+describe("VendorRosterFormFields map preview empty state", () => {
+  it("shows the accessible placeholder while incomplete, then the map once complete", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<AddressFormHarness onValid={vi.fn()} />, { withAuth: false });
+
+    expect(screen.getByRole("status")).toHaveTextContent(/street, city, and state/i);
+    expect(screen.queryByTitle(/^Map of /)).not.toBeInTheDocument();
+
+    await user.type(
+      screen.getByRole("combobox", { name: "Street Address (required)" }),
+      TYPED_STREET,
+    );
+    expect(screen.getByRole("status")).toBeInTheDocument();
+
+    fireEvent.change(screen.getByRole("textbox", { name: "City (required)" }), {
+      target: { value: "Theodore" },
+    });
+    pickVendorState("AL");
+
+    expect(await screen.findByTitle(`Map of ${TYPED_STREET} Theodore AL`)).toBeInTheDocument();
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/vendors/vendor-roster-conflict-alert.test.tsx b/src/test/app/(protected)/vendors/vendor-roster-conflict-alert.test.tsx
new file mode 100644
index 00000000..25f61538
--- /dev/null
+++ b/src/test/app/(protected)/vendors/vendor-roster-conflict-alert.test.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { VendorRosterConflictAlert } from "@/app/(protected)/vendors/_components/vendor-roster-conflict-alert";
+
+describe("VendorRosterConflictAlert", () => {
+  it("explains a duplicate company without offering a stale-data reload", () => {
+    render(
+      <VendorRosterConflictAlert
+        conflict={{
+          kind: "duplicate",
+          message: "Another vendor company already uses that name.",
+          blockedWorkOrders: [],
+        }}
+        onReload={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("Company name already exists")).toBeInTheDocument();
+    expect(screen.getByText("Another vendor company already uses that name.")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Reload" })).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/vendors/vendor-service-area.test.tsx b/src/test/app/(protected)/vendors/vendor-service-area.test.tsx
new file mode 100644
index 00000000..bb19416a
--- /dev/null
+++ b/src/test/app/(protected)/vendors/vendor-service-area.test.tsx
@@ -0,0 +1,197 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { describe, expect, it, vi } from "vitest";
+import { VendorRosterFormFields } from "@/app/(protected)/vendors/_components/vendor-roster-form-fields";
+import { SERVICE_AREA_ADMIN_ONLY_MESSAGE } from "@/app/(protected)/vendors/_components/vendor-service-area-field";
+import { VendorFilterOptions } from "@/app/(protected)/vendors/_components/vendor-filter-options";
+import {
+  emptyVendorFilters,
+  serviceAreaFilterOptions,
+} from "@/app/(protected)/vendors/_components/vendor-filters";
+import {
+  emptyVendorCompanyRosterForm,
+  vendorCompanyRosterSchema,
+  type VendorCompanyRosterFormValues,
+} from "@/domain/vendors/schemas/vendor-roster-schema";
+import { VENDOR_AREA_UNASSIGNED, type VendorFacetArea } from "@/domain/vendors/types/vendor";
+import {
+  mapVendorRosterAdditivePatchToBackend,
+  mapVendorRosterToBackend,
+} from "@/domain/vendors/mappers/vendor-roster-mapper";
+import { mapVendorFacets, mapVendorListItem } from "@/domain/vendors/mappers/vendor-mapper";
+import { renderWithProviders } from "@/test/test-utils";
+import { pickVendorState, stateField } from "./vendor-state-select";
+
+const AREAS: VendorFacetArea[] = [
+  { id: "1", name: "East" },
+  { id: "2", name: "Central" },
+];
+
+function Harness({
+  canAssignArea,
+  currentArea = null,
+  defaults = {},
+  onValid,
+}: {
+  canAssignArea: boolean;
+  currentArea?: VendorFacetArea | null;
+  defaults?: Partial<VendorCompanyRosterFormValues>;
+  onValid: (values: VendorCompanyRosterFormValues) => void;
+}) {
+  const { control, handleSubmit, formState } = useForm<VendorCompanyRosterFormValues>({
+    defaultValues: { ...emptyVendorCompanyRosterForm, ...defaults },
+    resolver: zodResolver(vendorCompanyRosterSchema),
+    mode: "onChange",
+  });
+  return (
+    <form onSubmit={handleSubmit(onValid)}>
+      <VendorRosterFormFields
+        control={control}
+        errors={formState.errors}
+        areaOptions={AREAS}
+        currentArea={currentArea}
+        canAssignArea={canAssignArea}
+      />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+
+const COMPLETE_COMPANY: Partial<VendorCompanyRosterFormValues> = {
+  name: "Gateway Plumbing",
+  companyPhone: "(314) 555-0100",
+  address: "1 Market St",
+  city: "St. Louis",
+  state: "MO",
+};
+
+describe("Vendor Service Area field", () => {
+  it("lets an admin assign one Service Area by stable id", async () => {
+    const onValid = vi.fn();
+    renderWithProviders(<Harness canAssignArea onValid={onValid} defaults={COMPLETE_COMPANY} />, {
+      withAuth: false,
+    });
+
+    const area = screen.getByRole("combobox", { name: "Service Area (optional)" });
+    expect(area).toBeEnabled();
+    fireEvent.change(area, { target: { value: "Cen" } });
+    fireEvent.click(screen.getByRole("option", { name: "Central" }));
+    await userEvent.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => expect(onValid).toHaveBeenCalledTimes(1));
+    expect((onValid.mock.calls[0]?.[0] as VendorCompanyRosterFormValues).areaId).toBe("2");
+  });
+
+  it("shows the saved Area read-only to non-admins and keeps it on submit", async () => {
+    const onValid = vi.fn();
+    renderWithProviders(
+      <Harness
+        canAssignArea={false}
+        currentArea={{ id: "9", name: "Archived Zone" }}
+        defaults={{ ...COMPLETE_COMPANY, areaId: "9" }}
+        onValid={onValid}
+      />,
+      { withAuth: false },
+    );
+
+    const area = screen.getByRole("combobox", { name: "Service Area (optional)" });
+    expect(area).toBeDisabled();
+    expect(area).toHaveValue("Archived Zone");
+    expect(screen.getByText(SERVICE_AREA_ADMIN_ONLY_MESSAGE)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Submit" }));
+
+    await waitFor(() => expect(onValid).toHaveBeenCalledTimes(1));
+    expect((onValid.mock.calls[0]?.[0] as VendorCompanyRosterFormValues).areaId).toBe("9");
+  });
+
+  it("does not derive the Service Area from the selected State", () => {
+    renderWithProviders(<Harness canAssignArea onValid={vi.fn()} />, { withAuth: false });
+
+    pickVendorState("CA");
+
+    expect(stateField()).toHaveValue("California (CA)");
+    expect(screen.getByRole("combobox", { name: "Service Area (optional)" })).toHaveValue("");
+    expect(screen.queryByText(/Area:/)).not.toBeInTheDocument();
+  });
+});
+
+describe("Vendor State field", () => {
+  it("is a closed list: free text is not kept and legacy names show as codes", () => {
+    renderWithProviders(
+      <Harness canAssignArea={false} onValid={vi.fn()} defaults={{ state: "missouri" }} />,
+      { withAuth: false },
+    );
+
+    expect(stateField()).toHaveValue("Missouri (MO)");
+    fireEvent.change(stateField(), { target: { value: "Ontario" } });
+    expect(screen.queryByRole("option", { name: /Ontario/ })).not.toBeInTheDocument();
+    fireEvent.blur(stateField());
+    expect(stateField()).toHaveValue("Missouri (MO)");
+  });
+});
+
+describe("Service Area contracts", () => {
+  it("orders filter options Unassigned first, then names A–Z", () => {
+    expect(
+      serviceAreaFilterOptions([
+        { id: "3", name: "West" },
+        { id: "4", name: "california" },
+        { id: "1", name: "East" },
+      ]).map((option) => option.id),
+    ).toEqual([VENDOR_AREA_UNASSIGNED, "4", "1", "3"]);
+  });
+
+  it("maps facet areas and directory Area fields from the API", () => {
+    expect(
+      mapVendorFacets({
+        Areas: [
+          { Id: 1, Name: "East" },
+          { Id: 0, Name: "" },
+        ],
+      }).areas,
+    ).toEqual([{ id: "1", name: "East" }]);
+    const row = mapVendorListItem({ Id: 1, AreaId: 2, AreaName: "Central" });
+    expect(row.areaId).toBe("2");
+    expect(row.areaName).toBe("Central");
+  });
+
+  it("round-trips form Areas, sends explicit null for Unassigned, and omits absent Areas", () => {
+    expect(mapVendorRosterToBackend({ name: "A", areaId: "3" }).areaId).toBe(3);
+    expect(mapVendorRosterToBackend({ name: "A", areaId: "" }).areaId).toBeNull();
+    expect(mapVendorRosterToBackend({ name: "A" })).not.toHaveProperty("areaId");
+    expect(
+      mapVendorRosterAdditivePatchToBackend({
+        rowVersion: "rv",
+        addTechnicians: [],
+        companyFields: { areaId: "" },
+      }).companyFields,
+    ).toEqual({ areaId: null });
+    expect(
+      mapVendorRosterAdditivePatchToBackend({ rowVersion: "rv", addTechnicians: [] }),
+    ).not.toHaveProperty("companyFields");
+  });
+});
+
+describe("Vendor Service Area filter section", () => {
+  it("sits between Trade and Location", () => {
+    const setDraft = vi.fn();
+    renderWithProviders(
+      <VendorFilterOptions
+        facets={{ companies: [], trades: [], areas: AREAS, locations: [], jobBuckets: [] }}
+        draft={emptyVendorFilters}
+        setDraft={setDraft}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getAllByRole("button").map((button) => button.textContent)).toEqual([
+      "Company",
+      "Trade",
+      "Service Area",
+      "Location",
+      "Total Jobs",
+    ]);
+  });
+});
diff --git a/src/test/app/(protected)/vendors/vendor-state-select.ts b/src/test/app/(protected)/vendors/vendor-state-select.ts
new file mode 100644
index 00000000..f8694649
--- /dev/null
+++ b/src/test/app/(protected)/vendors/vendor-state-select.ts
@@ -0,0 +1,15 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { formatStateOptionLabel, type StateCode } from "@/data/areas";
+
+export const STATE_FIELD_NAME = "State (required)";
+
+export function stateField(): HTMLElement {
+  return screen.getByRole("combobox", { name: STATE_FIELD_NAME });
+}
+
+/** Picks a state from the closed vendor State list by its option label. */
+export function pickVendorState(code: StateCode): void {
+  const label = formatStateOptionLabel(code);
+  fireEvent.change(stateField(), { target: { value: label } });
+  fireEvent.click(screen.getByRole("option", { name: label }));
+}
diff --git a/src/test/app/(protected)/vendors/vendor-trade-specialties-field.test.tsx b/src/test/app/(protected)/vendors/vendor-trade-specialties-field.test.tsx
new file mode 100644
index 00000000..0738fb69
--- /dev/null
+++ b/src/test/app/(protected)/vendors/vendor-trade-specialties-field.test.tsx
@@ -0,0 +1,209 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { useEffect } from "react";
+import { useForm, useWatch, type Control } from "react-hook-form";
+import { describe, expect, it } from "vitest";
+import { VendorTradeSpecialtiesField } from "@/app/(protected)/vendors/_components/vendor-trade-specialties-field";
+import {
+  emptyRosterTechnician,
+  emptyVendorCompanyRosterForm,
+  type VendorCompanyRosterFormValues,
+} from "@/domain/vendors/schemas/vendor-roster-schema";
+import { renderWithProviders } from "@/test/test-utils";
+
+function TradeSpecialtiesSpy({
+  control,
+  valuesRef,
+}: {
+  control: Control<VendorCompanyRosterFormValues>;
+  valuesRef: { current: string };
+}) {
+  const value = useWatch({ control, name: "technicians.0.tradeSpecialties" }) ?? "";
+  useEffect(() => {
+    valuesRef.current = value;
+  }, [value, valuesRef]);
+  return null;
+}
+
+function TradeSpecialtiesHarness({
+  tradeOptions,
+  tradeOptionsLoading = false,
+  initialTradeSpecialties = "",
+  valuesRef,
+}: {
+  tradeOptions: string[];
+  tradeOptionsLoading?: boolean;
+  initialTradeSpecialties?: string;
+  valuesRef: { current: string };
+}) {
+  const { control } = useForm<VendorCompanyRosterFormValues>({
+    defaultValues: {
+      ...emptyVendorCompanyRosterForm,
+      technicians: [{ ...emptyRosterTechnician, tradeSpecialties: initialTradeSpecialties }],
+    },
+  });
+  return (
+    <>
+      <VendorTradeSpecialtiesField
+        control={control}
+        index={0}
+        tradeOptions={tradeOptions}
+        tradeOptionsLoading={tradeOptionsLoading}
+      />
+      <TradeSpecialtiesSpy control={control} valuesRef={valuesRef} />
+    </>
+  );
+}
+
+function getAddTradeInput(): HTMLElement {
+  return screen.getByRole("combobox", { name: "Add Trade" });
+}
+
+function typeAndCommitTrade(input: HTMLElement, value: string, commit: "enter" | "button") {
+  fireEvent.change(input, { target: { value } });
+  if (commit === "enter") {
+    fireEvent.keyDown(input, { key: "Enter" });
+  } else {
+    fireEvent.click(screen.getByRole("button", { name: "Add trade" }));
+  }
+}
+
+describe("VendorTradeSpecialtiesField", () => {
+  it("does not expose obsolete reorder actions for multiple trades", () => {
+    const valuesRef = { current: "" };
+    renderWithProviders(
+      <TradeSpecialtiesHarness
+        tradeOptions={["Plumbing", "HVAC"]}
+        initialTradeSpecialties="Plumbing, HVAC"
+        valuesRef={valuesRef}
+      />,
+    );
+
+    expect(screen.getByText("Plumbing (primary)")).toBeInTheDocument();
+    expect(screen.getByText("HVAC")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /move .* (up|down)/i })).toBeNull();
+    expect(screen.queryByText(/reorder with the arrows/i)).toBeNull();
+    expect(valuesRef.current).toBe("Plumbing, HVAC");
+  });
+
+  it("offers facet trades as selectable options when the facets query is populated", async () => {
+    const valuesRef = { current: "" };
+    renderWithProviders(
+      <TradeSpecialtiesHarness
+        tradeOptions={["Plumbing", "HVAC", "Electrical"]}
+        valuesRef={valuesRef}
+      />,
+    );
+
+    const input = getAddTradeInput();
+    fireEvent.change(input, { target: { value: "H" } });
+
+    fireEvent.click(await screen.findByRole("option", { name: "HVAC" }));
+
+    expect(await screen.findByText("HVAC (primary)")).toBeInTheDocument();
+    expect(valuesRef.current).toBe("HVAC");
+  });
+
+  it("does not fail open while the trades facet is still loading", () => {
+    const valuesRef = { current: "" };
+    renderWithProviders(
+      <TradeSpecialtiesHarness tradeOptions={[]} tradeOptionsLoading valuesRef={valuesRef} />,
+    );
+
+    // A cold fetch must not look like an outage.
+    expect(screen.queryByText(/trade list is unavailable right now/i)).toBeNull();
+
+    const input = getAddTradeInput();
+    typeAndCommitTrade(input, "Plumbing", "enter");
+
+    expect(screen.getByText(/trades are still loading/i)).toBeInTheDocument();
+    expect(screen.queryByText("Plumbing (primary)")).toBeNull();
+    expect(valuesRef.current).toBe("");
+  });
+
+  it("has no selectable options when the trades facet is empty, warns, and still accepts typed trades", () => {
+    const valuesRef = { current: "" };
+    renderWithProviders(<TradeSpecialtiesHarness tradeOptions={[]} valuesRef={valuesRef} />);
+
+    expect(screen.getByText(/trade list is unavailable right now/i)).toBeInTheDocument();
+
+    const input = getAddTradeInput();
+    fireEvent.change(input, { target: { value: "P" } });
+    expect(screen.queryByRole("listbox")).toBeNull();
+    expect(screen.queryAllByRole("option")).toHaveLength(0);
+
+    typeAndCommitTrade(input, "Plumbing", "enter");
+
+    expect(screen.getByText("Plumbing (primary)")).toBeInTheDocument();
+    expect(valuesRef.current).toBe("Plumbing");
+  });
+
+  it("rejects trades outside the canonical list with visible feedback and keeps the draft", () => {
+    const valuesRef = { current: "" };
+    renderWithProviders(
+      <TradeSpecialtiesHarness tradeOptions={["Plumbing", "HVAC"]} valuesRef={valuesRef} />,
+    );
+
+    const input = getAddTradeInput();
+    typeAndCommitTrade(input, "Sprinkler Fitting", "button");
+
+    expect(screen.getByText(/is not in the trades list/i)).toBeInTheDocument();
+    expect(screen.queryByText("Sprinkler Fitting (primary)")).toBeNull();
+    expect(valuesRef.current).toBe("");
+    expect(input).toHaveValue("Sprinkler Fitting");
+  });
+
+  it("commits the canonical casing when a typed trade matches case-insensitively", () => {
+    const valuesRef = { current: "" };
+    renderWithProviders(
+      <TradeSpecialtiesHarness tradeOptions={["Plumbing", "HVAC"]} valuesRef={valuesRef} />,
+    );
+
+    const input = getAddTradeInput();
+    typeAndCommitTrade(input, "hvac", "enter");
+
+    expect(screen.getByText("HVAC (primary)")).toBeInTheDocument();
+    expect(valuesRef.current).toBe("HVAC");
+  });
+
+  it("keeps legacy free-text trades visible, removable, and re-selectable", async () => {
+    const valuesRef = { current: "" };
+    renderWithProviders(
+      <TradeSpecialtiesHarness
+        tradeOptions={["Plumbing", "HVAC"]}
+        initialTradeSpecialties="Backflow Testing, HVAC"
+        valuesRef={valuesRef}
+      />,
+    );
+
+    expect(screen.getByText("Backflow Testing (primary)")).toBeInTheDocument();
+    expect(screen.getByText("HVAC")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("remove-trade-Backflow Testing"));
+    expect(screen.queryByText(/Backflow Testing/)).toBeNull();
+    expect(valuesRef.current).toBe("HVAC");
+
+    const input = getAddTradeInput();
+    fireEvent.change(input, { target: { value: "Back" } });
+    fireEvent.click(await screen.findByRole("option", { name: "Backflow Testing" }));
+
+    expect(await screen.findByText("Backflow Testing")).toBeInTheDocument();
+    expect(valuesRef.current).toBe("HVAC, Backflow Testing");
+  });
+
+  it("flags duplicate trades instead of silently doing nothing", () => {
+    const valuesRef = { current: "" };
+    renderWithProviders(
+      <TradeSpecialtiesHarness
+        tradeOptions={["Plumbing"]}
+        initialTradeSpecialties="Plumbing"
+        valuesRef={valuesRef}
+      />,
+    );
+
+    const input = getAddTradeInput();
+    typeAndCommitTrade(input, "plumbing", "enter");
+
+    expect(screen.getByText(/is already on this technician/i)).toBeInTheDocument();
+    expect(valuesRef.current).toBe("Plumbing");
+  });
+});
diff --git a/src/test/app/(protected)/vendors/vendors-list.test.tsx b/src/test/app/(protected)/vendors/vendors-list.test.tsx
new file mode 100644
index 00000000..2b98c7f0
--- /dev/null
+++ b/src/test/app/(protected)/vendors/vendors-list.test.tsx
@@ -0,0 +1,701 @@
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import VendorsListPage from "@/app/(protected)/vendors/index";
+import type { VendorCompanyRoster, VendorListItem } from "@/domain/vendors/types/vendor";
+import { renderWithProviders } from "@/test/test-utils";
+
+const useVendorDirectoryList = vi.fn();
+const useVendorCompanyRoster = vi.fn();
+const useVendorDeactivationImpact = vi.fn();
+const mutate = vi.fn();
+vi.mock("@/domain/vendors/use-cases/use-vendor-directory-list", () => ({
+  useVendorDirectoryList: (...args: unknown[]) => useVendorDirectoryList(...args),
+}));
+
+vi.mock("@/domain/vendors/use-cases/use-vendor-company-roster", () => ({
+  useVendorCompanyRoster: (...args: unknown[]) => useVendorCompanyRoster(...args),
+}));
+
+vi.mock("@/domain/vendors/use-cases/use-vendor-deactivation-impact", () => ({
+  useVendorDeactivationImpact: (...args: unknown[]) => useVendorDeactivationImpact(...args),
+}));
+
+vi.mock("@/domain/vendors/use-cases/use-delete-vendor", () => ({
+  useDeleteVendor: () => ({ mutate, isPending: false }),
+}));
+
+vi.mock("@/hooks/use-debounce", () => ({
+  useDebounce: (value: string) => value,
+}));
+
+const activeVendor: VendorListItem = {
+  id: 1,
+  companyId: "co-1",
+  companyName: "Gateway Plumbing",
+  contactName: "Adam Whyte",
+  email: "dispatch@gatewayplumbing.com",
+  phone: "(314) 555-0198",
+  companyPhone: "(314) 555-0100",
+  googleMapsUrl: "",
+  notes: "",
+  totalJobs: 0,
+  address: "1 Market St",
+  city: "St. Louis",
+  state: "MO",
+  tradeSpecialties: "Backflow Preventers",
+  isActive: true,
+  preferredContact: "Email",
+  areaId: "",
+  areaName: "",
+};
+
+const inactiveVendor = {
+  ...activeVendor,
+  id: 2,
+  companyName: "Drain Cleaning Bros",
+  isActive: false,
+};
+
+const activeRoster: VendorCompanyRoster = {
+  companyId: "co-1",
+  rowVersion: "rv-1",
+  name: "Gateway Plumbing",
+  companyPhone: "(314) 555-0100",
+  email: "dispatch@gatewayplumbing.com",
+  address: "",
+  city: "St. Louis",
+  state: "MO",
+  zip: "",
+  googleMapsUrl: "",
+  notes: "",
+  areaId: "",
+  areaName: "",
+  technicians: [
+    {
+      id: 1,
+      contactName: "Adam Whyte",
+      phone: "(314) 555-0198",
+      email: "dispatch@gatewayplumbing.com",
+      preferredContact: "Email",
+      tradeSpecialties: "Backflow Preventers",
+      isActive: true,
+      totalJobs: 0,
+    },
+  ],
+};
+
+function result(items: VendorListItem[], totalCount: number) {
+  return {
+    data: { items, totalCount, page: 1, pageSize: 12 },
+    isLoading: false,
+    isFetching: false,
+    error: null,
+  };
+}
+
+function setupDefaults() {
+  useVendorCompanyRoster.mockReturnValue({
+    data: undefined,
+    isLoading: false,
+    isError: false,
+    error: null,
+    refetch: vi.fn(),
+  });
+  useVendorDeactivationImpact.mockReturnValue({
+    data: undefined,
+    isLoading: false,
+    error: null,
+  });
+}
+
+describe("VendorsListPage", () => {
+  it("renders prototype-aligned status and two row actions in both tabs", async () => {
+    setupDefaults();
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], params.isActive ? 1 : 1);
+        return params.isActive ? result([activeVendor], 1) : result([inactiveVendor], 1);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    expect(screen.getByRole("heading", { name: "Vendors / Technicians" })).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "Company Phone" })).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "Company Email" })).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "Street Address" })).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "Technician Phone" })).toBeInTheDocument();
+    expect(screen.getByText("St. Louis")).toBeInTheDocument();
+    expect(screen.getByText("MO")).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "Status" })).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: "Active" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "View vendor Gateway Plumbing" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Deactivate vendor" })).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("tab", { name: "Inactive (1)" }));
+
+    expect(screen.getByText("Drain Cleaning Bros")).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: "Inactive" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Deactivate vendor" })).not.toBeInTheDocument();
+  });
+
+  it("renders one company row with the primary technician and a keyboard-accessible roster badge", async () => {
+    setupDefaults();
+    const groupedVendor: VendorListItem = {
+      ...activeVendor,
+      id: 22,
+      contactName: "Promoted Technician",
+      totalJobs: 9,
+      technicians: [
+        {
+          id: 11,
+          contactName: "Older Technician",
+          email: "older@gateway.test",
+          phone: "314-555-0111",
+          preferredContact: "Phone",
+          tradeSpecialties: "Plumbing",
+          isActive: true,
+          totalJobs: 4,
+        },
+        {
+          id: 22,
+          contactName: "Promoted Technician",
+          email: "promoted@gateway.test",
+          phone: "314-555-0222",
+          preferredContact: "Email",
+          tradeSpecialties: "HVAC",
+          isActive: true,
+          totalJobs: 5,
+        },
+      ],
+    };
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([groupedVendor], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    expect(screen.getAllByText("Gateway Plumbing")).toHaveLength(1);
+    expect(screen.getByText("Promoted Technician")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "314-555-0222" })).toBeInTheDocument();
+    expect(screen.getByRole("cell", { name: "9" })).toBeInTheDocument();
+
+    const rosterBadge = screen.getByTestId("vendor-technician-badge");
+    expect(rosterBadge).toHaveTextContent("+1");
+    expect(rosterBadge).toHaveAttribute("tabindex", "0");
+    await userEvent.hover(rosterBadge);
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("Older Technician");
+  });
+
+  it("renders company location and contact fields in separate columns", () => {
+    setupDefaults();
+    const vendorWithAllFields: VendorListItem = {
+      ...activeVendor,
+      id: 3,
+      address: " 1 Market St ",
+      city: " St. Louis ",
+      state: " MO ",
+      phone: " (314) 555-0198 ",
+    };
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([vendorWithAllFields], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    expect(screen.getByText("1 Market St")).toBeInTheDocument();
+    expect(screen.getByText("St. Louis")).toBeInTheDocument();
+    expect(screen.getByText("MO")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "(314) 555-0198" })).toHaveAttribute(
+      "href",
+      "tel:(314) 555-0198",
+    );
+    expect(screen.getByRole("link", { name: "(314) 555-0100" })).toHaveAttribute(
+      "href",
+      "tel:(314) 555-0100",
+    );
+  });
+
+  it("keeps company and technician phone ownership separate when technician phone is absent", () => {
+    setupDefaults();
+    const fallbackVendor: VendorListItem = {
+      ...activeVendor,
+      id: 3,
+      address: " 1 Market St ",
+      city: "  ",
+      state: "",
+      phone: "  ",
+    };
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([fallbackVendor], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    expect(screen.getByText("1 Market St")).toBeInTheDocument();
+    const companyPhoneLink = screen.getByRole("link", { name: "(314) 555-0100" });
+    expect(companyPhoneLink).toHaveAttribute("href", "tel:(314) 555-0100");
+    expect(screen.queryByText(/555-0198/)).not.toBeInTheDocument();
+    expect(screen.getByTestId("vendor-text-technician-phone")).toHaveTextContent("—");
+  });
+
+  it("truncates every textual table field and reveals each full value", async () => {
+    setupDefaults();
+    const longCompany = "Gateway Plumbing and Water Systems of Greater Saint Louis";
+    const longTechnician = "Adam Christopher Whyte Senior Field Technician";
+    const longAddress = "New York, NY, Estados Unidos, 123 Long Address Avenue";
+    const longPhone = "+1 (314) 555-0198 extension 123456";
+    const longEmail = "dispatch-and-after-hours-coordination@gatewayplumbing.example";
+    const fallbackVendor: VendorListItem = {
+      ...activeVendor,
+      id: 4,
+      companyName: longCompany,
+      contactName: longTechnician,
+      phone: longPhone,
+      email: longEmail,
+      address: longAddress,
+      city: "",
+      state: "",
+    };
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([fallbackVendor], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    const fields = [
+      { testId: "vendor-text-company", value: longCompany },
+      { testId: "vendor-text-technician", value: longTechnician },
+      { testId: "vendor-text-street-address", value: longAddress },
+      { testId: "vendor-text-technician-phone", value: longPhone },
+      { testId: "vendor-text-company-email", value: longEmail },
+    ];
+
+    for (const field of fields) {
+      const text = screen.getByTestId(field.testId);
+      const cell = text.closest("td");
+      expect(cell).not.toBeNull();
+      expect(cell).toHaveStyle({ overflow: "hidden" });
+      expect(text).toHaveStyle({
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      });
+
+      await userEvent.hover(text);
+      expect(await screen.findByRole("tooltip")).toHaveTextContent(field.value);
+      await userEvent.unhover(text);
+      await waitFor(() => expect(screen.queryByRole("tooltip")).not.toBeInTheDocument());
+    }
+
+    expect(screen.getByTestId("vendor-text-technician-phone")).toHaveAttribute(
+      "href",
+      `tel:${longPhone}`,
+    );
+    expect(screen.getByTestId("vendor-text-company-email")).toHaveAttribute(
+      "href",
+      `mailto:${longEmail}`,
+    );
+    fireEvent.keyDown(screen.getByTestId("vendor-text-company-email"), { key: "Enter" });
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    const locationText = screen.getByTestId("vendor-text-street-address");
+    fireEvent.keyDown(document, { key: "Tab" });
+    locationText.focus();
+    expect(locationText).toHaveFocus();
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(longAddress);
+    expect(within(screen.getByRole("cell", { name: longAddress })).getByText(longAddress)).toBe(
+      locationText,
+    );
+  });
+
+  it("shows omitted trade names on the +N badge tooltip on hover and keyboard focus", async () => {
+    setupDefaults();
+    const multiTradeVendor: VendorListItem = {
+      ...activeVendor,
+      tradeSpecialties: "Backflow Preventers, Water Heaters, Drain Cleaning",
+    };
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([multiTradeVendor], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    const badge = screen.getByTestId("vendor-trade-badge");
+    expect(badge).toHaveTextContent("+2");
+    expect(screen.getByText("Backflow Preventers")).toBeInTheDocument();
+    expect(badge).toHaveAttribute("aria-label", "+2 more trades: Water Heaters, Drain Cleaning");
+
+    await userEvent.hover(badge);
+    const tooltip = await screen.findByRole("tooltip");
+    expect(tooltip).toHaveTextContent("Water Heaters, Drain Cleaning");
+    expect(tooltip).not.toHaveTextContent(/Backflow/);
+    await userEvent.unhover(badge);
+    await waitFor(() => expect(screen.queryByRole("tooltip")).not.toBeInTheDocument());
+
+    fireEvent.keyDown(document, { key: "Tab" });
+    badge.focus();
+    expect(badge).toHaveFocus();
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("Water Heaters, Drain Cleaning");
+  });
+
+  it("does not show the +N badge when the vendor has a single trade", () => {
+    setupDefaults();
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([activeVendor], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    expect(screen.queryByTestId("vendor-trade-badge")).not.toBeInTheDocument();
+    expect(screen.getByText("Backflow Preventers")).toBeInTheDocument();
+  });
+
+  it("does not open the vendor detail when the +N badge is clicked or activated by keyboard", async () => {
+    setupDefaults();
+    useVendorCompanyRoster.mockReturnValue({
+      data: activeRoster,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    const multiTradeVendor: VendorListItem = {
+      ...activeVendor,
+      tradeSpecialties: "Backflow Preventers, Water Heaters, Drain Cleaning",
+    };
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([multiTradeVendor], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    const badge = screen.getByTestId("vendor-trade-badge");
+
+    await userEvent.click(badge);
+    expect(screen.queryByRole("heading", { level: 2, name: "Adam Whyte" })).not.toBeInTheDocument();
+
+    badge.focus();
+    await userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("{Space}");
+    expect(screen.queryByRole("heading", { level: 2, name: "Adam Whyte" })).not.toBeInTheDocument();
+  });
+
+  it("relies on the MUI tooltip instead of a native title attribute on the +N badge", () => {
+    setupDefaults();
+    const multiTradeVendor: VendorListItem = {
+      ...activeVendor,
+      tradeSpecialties: "Backflow Preventers, Water Heaters",
+    };
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([multiTradeVendor], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    const badge = screen.getByTestId("vendor-trade-badge");
+    expect(badge).not.toHaveAttribute("title");
+    expect(badge).toHaveAttribute("tabIndex", "0");
+  });
+
+  it("reports the filtered totalCount in the footer when page rows are fewer than total", () => {
+    setupDefaults();
+    const pageVendors = Array.from({ length: 3 }, (_, index) => ({
+      ...activeVendor,
+      id: 100 + index,
+      companyName: `Vendor ${index + 1}`,
+    }));
+
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], params.isActive ? 25 : 0);
+        return result(pageVendors, 25);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    expect(screen.getAllByText(/25 active companies/)).not.toHaveLength(0);
+    expect(screen.queryByText(/3 active companies/)).not.toBeInTheDocument();
+  });
+
+  it("opens the detail drawer when a row is clicked or activated by keyboard", async () => {
+    setupDefaults();
+    useVendorCompanyRoster.mockReturnValue({
+      data: activeRoster,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([activeVendor], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    const row = screen.getByRole("button", {
+      name: "Open vendor details for Gateway Plumbing",
+    });
+    row.focus();
+    await userEvent.keyboard("{Enter}");
+
+    expect(screen.getByRole("heading", { level: 2, name: "Adam Whyte" })).toBeInTheDocument();
+  });
+
+  it("offers deactivate-anyway when the preflight reports open work orders", async () => {
+    setupDefaults();
+    useVendorCompanyRoster.mockReturnValue({
+      data: activeRoster,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    useVendorDeactivationImpact.mockReturnValue({
+      data: {
+        vendorId: 1,
+        canDeactivate: false,
+        openWorkOrders: [
+          {
+            workOrderId: 101,
+            workOrderNumber: "WO-101",
+            workOrderTitle: "Boiler repair",
+            status: "Dispatched",
+          },
+        ],
+      },
+      isLoading: false,
+      error: null,
+    });
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([activeVendor], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
+    await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
+
+    expect(
+      screen.getByText(
+        /will no longer be selectable for new work orders\. It still has 1 open work order —/,
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /Boiler repair/ })).toHaveAttribute(
+      "href",
+      "/workorders/101",
+    );
+
+    const confirm = screen.getByRole("button", { name: "Deactivate anyway" });
+    expect(confirm).toBeEnabled();
+    await userEvent.click(confirm);
+
+    expect(mutate).toHaveBeenCalledWith({ id: 1, confirmOpenWorkOrders: true }, expect.anything());
+  });
+
+  it("deactivates without the confirmation flag when nothing is linked", async () => {
+    setupDefaults();
+    useVendorCompanyRoster.mockReturnValue({
+      data: activeRoster,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    useVendorDeactivationImpact.mockReturnValue({
+      data: { vendorId: 1, canDeactivate: true, openWorkOrders: [] },
+      isLoading: false,
+      error: null,
+    });
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([activeVendor], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
+    await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
+
+    expect(screen.queryByText(/It still has/)).not.toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: /^Deactivate$/ }));
+
+    expect(mutate).toHaveBeenCalledWith({ id: 1, confirmOpenWorkOrders: false }, expect.anything());
+  }, 10_000);
+
+  it("preserves inline edits when deactivation is cancelled", async () => {
+    setupDefaults();
+    useVendorCompanyRoster.mockReturnValue({
+      data: activeRoster,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    useVendorDeactivationImpact.mockReturnValue({
+      data: { vendorId: 1, canDeactivate: true, openWorkOrders: [] },
+      isLoading: false,
+      error: null,
+    });
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([activeVendor], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
+    const company = screen.getByRole("textbox", { name: "Company (required)" });
+    await userEvent.clear(company);
+    await userEvent.type(company, "Draft Company Name");
+    await userEvent.click(screen.getByRole("switch", { name: "Active status" }));
+    await userEvent.click(
+      within(screen.getByRole("dialog", { name: "Deactivate this vendor?" })).getByRole("button", {
+        name: "Cancel",
+      }),
+    );
+
+    expect(company).toBeInTheDocument();
+    expect(company).toHaveValue("Draft Company Name");
+  }, 10_000);
+
+  it("opens inline edit when the table Edit control is clicked", async () => {
+    setupDefaults();
+    useVendorCompanyRoster.mockReturnValue({
+      data: activeRoster,
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([activeVendor], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
+
+    expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: "Company (required)" })).toHaveValue(
+      "Gateway Plumbing",
+    );
+  });
+
+  it("opens inline company edit when the row has no vendor id", async () => {
+    setupDefaults();
+    const companyOnlyVendor = { ...activeVendor, id: null, companyId: "co-9" };
+    useVendorCompanyRoster.mockReturnValue({
+      data: { ...activeRoster, companyId: "co-9", technicians: [] },
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 1);
+        return params.isActive ? result([companyOnlyVendor], 1) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    await userEvent.click(screen.getByRole("button", { name: "Edit vendor Gateway Plumbing" }));
+
+    expect(screen.getByRole("button", { name: "Save changes" })).toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: "Company (required)" })).toHaveValue(
+      "Gateway Plumbing",
+    );
+  });
+
+  it("loads rows and status counts through the directory hook", async () => {
+    setupDefaults();
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], params.isActive ? 3 : 2);
+        return result([activeVendor], 3);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    expect(useVendorDirectoryList).toHaveBeenCalledWith(
+      expect.objectContaining({ page: 1, pageSize: 48 }),
+    );
+    expect(useVendorDirectoryList).toHaveBeenCalledWith({ isActive: true, page: 1, pageSize: 1 });
+    expect(useVendorDirectoryList).toHaveBeenCalledWith({ isActive: false, page: 1, pageSize: 1 });
+    expect(screen.getByRole("tab", { name: "Active (3)" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Inactive (2)" })).toBeInTheDocument();
+  });
+
+  it("shows the Service Area column after State with Unassigned for companies without an Area", () => {
+    setupDefaults();
+    const assigned: VendorListItem = { ...activeVendor, areaId: "1", areaName: "East" };
+    const unassigned: VendorListItem = {
+      ...activeVendor,
+      id: 9,
+      companyId: "co-9",
+      companyName: "No Area Co",
+    };
+    useVendorDirectoryList.mockImplementation(
+      (params: { isActive?: boolean; pageSize?: number }) => {
+        if (params.pageSize === 1) return result([], 2);
+        return params.isActive ? result([assigned, unassigned], 2) : result([], 0);
+      },
+    );
+
+    renderWithProviders(<VendorsListPage />, { route: "/vendors", withAuth: false });
+
+    const headers = screen.getAllByRole("columnheader").map((header) => header.textContent);
+    expect(headers.indexOf("Service Area")).toBe(headers.indexOf("State") + 1);
+    expect(headers.indexOf("Trade")).toBe(headers.indexOf("Service Area") + 1);
+    expect(
+      screen.getAllByTestId("vendor-text-service-area").map((cell) => cell.textContent),
+    ).toEqual(["East", "Unassigned"]);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/appt-time-cell.test.tsx b/src/test/app/(protected)/workorders/appt-time-cell.test.tsx
new file mode 100644
index 00000000..07012d32
--- /dev/null
+++ b/src/test/app/(protected)/workorders/appt-time-cell.test.tsx
@@ -0,0 +1,140 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { ApptTimeCell } from "@/app/(protected)/workorders/_components/list/table/cells/appt-time-cell";
+import {
+  apptTimePopoverHint,
+  commitApptTimeSelection,
+} from "@/domain/work-orders/utils/appt-time-selection";
+import { fmt12, formatApptRange } from "@/domain/work-orders/utils/wizard-date-utils";
+
+describe("apptTimePopoverHint", () => {
+  it("asks for start when empty", () => {
+    expect(apptTimePopoverHint("", "")).toBe("Pick a start time");
+  });
+
+  it("marks end as optional after start", () => {
+    expect(apptTimePopoverHint("08:00", "")).toBe("Pick end (optional)");
+  });
+
+  it("prefixes duration when both ends are set", () => {
+    expect(apptTimePopoverHint("08:00", "10:00")).toBe("Duration: 2h");
+  });
+});
+
+describe("commitApptTimeSelection", () => {
+  it("saves an empty string when start is empty and the current value parses empty", () => {
+    const onSave = vi.fn();
+    commitApptTimeSelection("", "", "", onSave);
+    expect(onSave).toHaveBeenCalledWith("");
+  });
+
+  it("does not clear a raw unparsed appointment label", () => {
+    const onSave = vi.fn();
+    commitApptTimeSelection("", "", "AM before 2pm", onSave);
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it("clears a stored start-only time when Start is empty", () => {
+    const onSave = vi.fn();
+    commitApptTimeSelection("", "", "09:00", onSave);
+    expect(onSave).toHaveBeenCalledWith("");
+  });
+
+  it("saves start only when end is omitted", () => {
+    const onSave = vi.fn();
+    commitApptTimeSelection("09:00", "", "", onSave);
+    expect(onSave).toHaveBeenCalledWith("09:00");
+  });
+
+  it("saves an en-dash range when both slots are set", () => {
+    const onSave = vi.fn();
+    commitApptTimeSelection("09:00", "11:00", "", onSave);
+    expect(onSave).toHaveBeenCalledWith("09:00 – 11:00");
+  });
+});
+
+describe("ApptTimeCell", () => {
+  it("shows the AAP empty placeholder", () => {
+    render(<ApptTimeCell apptTime="" onSave={vi.fn()} />);
+    expect(screen.getByRole("button", { name: /select appt time/i })).toBeInTheDocument();
+  });
+
+  it("lets Done confirm an empty selection", async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    render(<ApptTimeCell apptTime="" onSave={onSave} />);
+
+    await user.click(screen.getByRole("button", { name: /select appt time/i }));
+    const done = await screen.findByRole("button", { name: /^done$/i });
+    expect(done).toBeEnabled();
+    expect(screen.getByText("Pick a start time")).toBeInTheDocument();
+    await user.click(done);
+
+    expect(onSave).toHaveBeenCalledWith("");
+  });
+
+  it("saves start and optional end", async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    render(<ApptTimeCell apptTime="" onSave={onSave} />);
+
+    await user.click(screen.getByRole("button", { name: /select appt time/i }));
+    const startSlots = await screen.findAllByRole("button", { name: fmt12("09:00") });
+    await user.click(startSlots[0]!);
+    const endSlots = screen.getAllByRole("button", { name: fmt12("11:00") });
+    await user.click(endSlots[endSlots.length - 1]!);
+    await user.click(screen.getByRole("button", { name: /^done$/i }));
+
+    expect(onSave).toHaveBeenCalledWith("09:00 – 11:00");
+  });
+
+  it("keeps an unparsed label when Done is pressed without a start slot", async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    render(<ApptTimeCell apptTime="AM before 2pm" onSave={onSave} />);
+
+    await user.click(screen.getByRole("button", { name: /am before 2pm/i }));
+    await user.click(await screen.findByRole("button", { name: /^done$/i }));
+
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it("clears optional end when the selected end slot is toggled off", async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    render(<ApptTimeCell apptTime="09:00 – 11:00" onSave={onSave} />);
+
+    await user.click(screen.getByRole("button", { name: formatApptRange("09:00", "11:00") }));
+    const endSlots = await screen.findAllByRole("button", { name: fmt12("11:00") });
+    await user.click(endSlots[endSlots.length - 1]!);
+    await user.click(screen.getByRole("button", { name: /^done$/i }));
+
+    expect(onSave).toHaveBeenCalledWith("09:00");
+  });
+
+  it("clears start and end when the selected start slot is toggled off", async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    render(<ApptTimeCell apptTime="09:00 – 11:00" onSave={onSave} />);
+
+    await user.click(screen.getByRole("button", { name: formatApptRange("09:00", "11:00") }));
+    const startSlots = await screen.findAllByRole("button", { name: fmt12("09:00") });
+    await user.click(startSlots[0]!);
+    await user.click(screen.getByRole("button", { name: /^done$/i }));
+
+    expect(onSave).toHaveBeenCalledWith("");
+  });
+
+  it("hydrates start-only stored times so Done can clear them", async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    render(<ApptTimeCell apptTime="09:00" onSave={onSave} />);
+
+    await user.click(screen.getByRole("button", { name: fmt12("09:00") }));
+    expect(await screen.findByText("Pick end (optional)")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: /^done$/i }));
+
+    expect(onSave).toHaveBeenCalledWith("09:00");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/assigned-to-cell.test.tsx b/src/test/app/(protected)/workorders/assigned-to-cell.test.tsx
new file mode 100644
index 00000000..14484e4d
--- /dev/null
+++ b/src/test/app/(protected)/workorders/assigned-to-cell.test.tsx
@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { AssignedToCell } from "@/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell";
+
+const USERS = [
+  { id: "sarah", name: "Sarah Chen" },
+  { id: "morgan", name: "Morgan Blake" },
+];
+
+describe("AssignedToCell", () => {
+  it("lets any board user pick a dispatcher without a role/disabled prop", async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+
+    render(<AssignedToCell dispatcherId="" users={USERS} highlight onSave={onSave} />);
+
+    const trigger = screen.getByRole("button", { name: /select dispatcher/i });
+    expect(trigger).toBeEnabled();
+    expect(trigger).not.toHaveAttribute("aria-disabled", "true");
+
+    await user.click(trigger);
+    await user.click(await screen.findByRole("button", { name: /sarah chen/i }));
+
+    expect(onSave).toHaveBeenCalledWith("sarah", "Sarah Chen");
+  });
+
+  it("can clear assignment to Unassigned", async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+
+    render(<AssignedToCell dispatcherId="sarah" users={USERS} onSave={onSave} />);
+
+    await user.click(screen.getByRole("button", { name: /sarah chen/i }));
+    await user.click(await screen.findByRole("button", { name: "Unassigned" }));
+
+    expect(onSave).toHaveBeenCalledWith("", "");
+  });
+
+  it("still opens with an empty dispatcher list", async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+
+    render(<AssignedToCell dispatcherId="" users={[]} onSave={onSave} />);
+
+    await user.click(screen.getByRole("button", { name: /select dispatcher/i }));
+    await user.click(await screen.findByRole("button", { name: "Unassigned" }));
+
+    expect(onSave).toHaveBeenCalledWith("", "");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/aveta-service-notes.test.tsx b/src/test/app/(protected)/workorders/aveta-service-notes.test.tsx
new file mode 100644
index 00000000..3df1516b
--- /dev/null
+++ b/src/test/app/(protected)/workorders/aveta-service-notes.test.tsx
@@ -0,0 +1,66 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { PMTypeCell } from "@/app/(protected)/workorders/_components/list/table/cells/pm-type-cell";
+import { ServiceNotesDialog } from "@/app/(protected)/workorders/_components/list/table/cells/service-notes-dialog";
+import { renderWithProviders } from "@/test/test-utils";
+
+describe("Aveta Service & Notes", () => {
+  it("shows the Aveta shield on the Service cell when required", () => {
+    renderWithProviders(
+      <PMTypeCell
+        value="HVAC"
+        pmTypes={["HVAC"]}
+        serviceNotes=""
+        extraServices={[]}
+        avetaRequired
+        onSave={vi.fn()}
+        onSaveDetails={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByLabelText("Aveta required")).toBeInTheDocument();
+  });
+
+  it("shows the green Aveta shield when the document is attached", () => {
+    renderWithProviders(
+      <PMTypeCell
+        value="HVAC"
+        pmTypes={["HVAC"]}
+        serviceNotes=""
+        extraServices={[]}
+        avetaRequired
+        avetaAttached
+        onSave={vi.fn()}
+        onSaveDetails={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByLabelText("Aveta attached")).toBeInTheDocument();
+  });
+
+  it("persists avetaRequired from Service & Notes", () => {
+    const onSave = vi.fn();
+    renderWithProviders(
+      <ServiceNotesDialog
+        open
+        onOpenChange={vi.fn()}
+        pm="HVAC"
+        extraServices={[]}
+        serviceNotes=""
+        avetaRequired={false}
+        pmTypes={["HVAC"]}
+        onSave={onSave}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("checkbox", { name: /Requires Aveta documentation/i }));
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pm: "HVAC",
+        avetaRequired: true,
+      }),
+    );
+  });
+});
diff --git a/src/test/app/(protected)/workorders/build-inline-draft-create-input.test.ts b/src/test/app/(protected)/workorders/build-inline-draft-create-input.test.ts
new file mode 100644
index 00000000..593d4631
--- /dev/null
+++ b/src/test/app/(protected)/workorders/build-inline-draft-create-input.test.ts
@@ -0,0 +1,155 @@
+import { describe, expect, it } from "vitest";
+import { buildInlineDraftCreateInput } from "@/app/(protected)/workorders/_components/list/table/build-inline-draft-create-input";
+import { mapWizardDraftToBoardCreatePayload } from "@/domain/work-orders/mappers/work-order-board-mapper";
+import { EMPTY_TABLE_DRAFT } from "@/domain/work-orders/types/work-order-table-row";
+
+describe("buildInlineDraftCreateInput", () => {
+  it("defaults type to PM and omits schedule flags when undated", () => {
+    const draft = {
+      ...EMPTY_TABLE_DRAFT,
+      site: "BK5",
+      locationId: "9",
+      woNumber: "25001",
+      pocName: "Jane",
+      pocPhone: "555-0100",
+      scheduleWeekOnly: true,
+      targetWeek: "",
+      scheduledOn: "",
+    };
+
+    const input = buildInlineDraftCreateInput(draft, [], [{ id: 9, name: "BK5 · Dallas, TX" }]);
+
+    expect(input.type).toBe("PM");
+    expect(input.scheduleWeekOnly).toBe(false);
+    expect(input.scheduledOn).toBe("");
+    expect(input.targetWeek).toBe("");
+
+    const payload = mapWizardDraftToBoardCreatePayload(input);
+    expect(payload.scheduledDate).toBeUndefined();
+    expect(payload.targetWeek).toBeUndefined();
+    expect(payload.scheduleWeekOnly).toBeUndefined();
+    expect(payload.woNumber).toBe("25001");
+    expect(payload.pocName).toBe("Jane");
+    expect(payload.locationId).toBe(9);
+    expect(payload).not.toHaveProperty("customer");
+  });
+
+  it("keeps week-only schedule when targetWeek is set", () => {
+    const draft = {
+      ...EMPTY_TABLE_DRAFT,
+      site: "BK5",
+      locationId: "9",
+      woNumber: "25002",
+      type: "Reactive" as const,
+      pocName: "Jane",
+      pocPhone: "555-0100",
+      scheduleWeekOnly: true,
+      targetWeek: "2026-06-22",
+    };
+
+    const input = buildInlineDraftCreateInput(draft, [], [{ id: 9, name: "BK5 · Dallas, TX" }]);
+    const payload = mapWizardDraftToBoardCreatePayload(input);
+
+    expect(payload.scheduleWeekOnly).toBe(true);
+    expect(payload.targetWeek).toBe("2026-06-22");
+    expect(payload.scheduledDate).toBeUndefined();
+  });
+
+  it("sends assignTo when a dispatcher is selected at inline create", () => {
+    const draft = {
+      ...EMPTY_TABLE_DRAFT,
+      site: "BK5",
+      locationId: "9",
+      woNumber: "25003",
+      pocName: "Jane",
+      pocPhone: "555-0100",
+      dispatcherId: "sarah",
+    };
+    const users = [{ id: "sarah", name: "Sarah Chen" }];
+
+    const input = buildInlineDraftCreateInput(draft, users, [{ id: 9, name: "BK5 · Dallas, TX" }]);
+    const payload = mapWizardDraftToBoardCreatePayload(input);
+
+    expect(input.assigneeId).toBe("sarah");
+    expect(input.assigneeName).toBe("Sarah Chen");
+    expect(payload.assignTo).toBe("sarah");
+  });
+
+  it("omits assignTo when Assigned To is left unassigned", () => {
+    const draft = {
+      ...EMPTY_TABLE_DRAFT,
+      site: "BK5",
+      locationId: "9",
+      woNumber: "25004",
+      pocName: "Jane",
+      pocPhone: "555-0100",
+      dispatcherId: "",
+    };
+
+    const input = buildInlineDraftCreateInput(draft, [], [{ id: 9, name: "BK5 · Dallas, TX" }]);
+    const payload = mapWizardDraftToBoardCreatePayload(input);
+
+    expect(input.assigneeId).toBe("");
+    expect(payload).not.toHaveProperty("assignTo");
+  });
+
+  it("maps range mode so create persists the start as scheduledDate", () => {
+    const draft = {
+      ...EMPTY_TABLE_DRAFT,
+      site: "BK5",
+      locationId: "9",
+      woNumber: "25007",
+      pocName: "Jane",
+      pocPhone: "555-0100",
+      scheduledOn: "2026-06-08",
+      scheduleEnd: "2026-06-12",
+      schedMode: "range" as const,
+      scheduleWeekOnly: false,
+    };
+
+    const input = buildInlineDraftCreateInput(draft, [], [{ id: 9, name: "BK5 · Dallas, TX" }]);
+    const payload = mapWizardDraftToBoardCreatePayload(input);
+
+    expect(input.schedMode).toBe("range");
+    expect(input.scheduleEnd).toBe("2026-06-12");
+    expect(payload.scheduledDate).toBe("2026-06-08");
+    expect(payload.scheduleWeekOnly).toBeUndefined();
+    expect(payload.targetWeek).toBeUndefined();
+    expect(payload).not.toHaveProperty("scheduleEnd");
+  });
+
+  it("promotes Pending to Scheduled when create has a concrete date", () => {
+    const draft = {
+      ...EMPTY_TABLE_DRAFT,
+      site: "BK5",
+      locationId: "9",
+      woNumber: "25006",
+      pocName: "Jane",
+      pocPhone: "555-0100",
+      status: "Pending" as const,
+      scheduledOn: "2026-06-01",
+      scheduleWeekOnly: false,
+    };
+
+    const input = buildInlineDraftCreateInput(draft, [], [{ id: 9, name: "BK5 · Dallas, TX" }]);
+    expect(input.status).toBe("Scheduled");
+  });
+
+  it("demotes Scheduled to Pending when create has no concrete date", () => {
+    const draft = {
+      ...EMPTY_TABLE_DRAFT,
+      site: "BK5",
+      locationId: "9",
+      woNumber: "25005",
+      pocName: "Jane",
+      pocPhone: "555-0100",
+      status: "Scheduled" as const,
+      scheduledOn: "",
+      scheduleWeekOnly: true,
+      targetWeek: "",
+    };
+
+    const input = buildInlineDraftCreateInput(draft, [], [{ id: 9, name: "BK5 · Dallas, TX" }]);
+    expect(input.status).toBe("Pending");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/carried-over-counter-pill.test.tsx b/src/test/app/(protected)/workorders/carried-over-counter-pill.test.tsx
new file mode 100644
index 00000000..d0059873
--- /dev/null
+++ b/src/test/app/(protected)/workorders/carried-over-counter-pill.test.tsx
@@ -0,0 +1,48 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  CarriedOverCounterPill,
+  RescheduleCounterPill,
+} from "@/app/(protected)/workorders/_components/list/table/cells/wo-counter-pills";
+import { renderWithProviders } from "@/test/test-utils";
+
+describe("CarriedOverCounterPill", () => {
+  it("hides the pill when the count is below 2", () => {
+    const { container } = renderWithProviders(<CarriedOverCounterPill count={1} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("names the count so it is not a bare number", () => {
+    renderWithProviders(<CarriedOverCounterPill count={3} />);
+    const pill = screen.getByLabelText(/Carried over 3 times/i);
+    expect(pill).toHaveTextContent("3");
+  });
+
+  it("includes the source week in the accessible name", () => {
+    renderWithProviders(
+      <CarriedOverCounterPill count={3} originalWeek="2026-05-04" status="Scheduled" />,
+    );
+    expect(screen.getByLabelText(/Source week: 5\/4–5\/8/i)).toBeInTheDocument();
+  });
+
+  it("hides after resolution even when the counter remains", () => {
+    const { container } = renderWithProviders(
+      <CarriedOverCounterPill count={3} originalWeek="2026-05-04" status="Completed" />,
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("is distinguishable from the reschedule pill beside it", () => {
+    renderWithProviders(
+      <>
+        <RescheduleCounterPill count={2} />
+        <CarriedOverCounterPill count={2} />
+      </>,
+    );
+
+    // Both render the same visible digit, so the accessible names are the only
+    // thing telling a non-sighted user which counter is which.
+    expect(screen.getByLabelText(/Rescheduled 2 times/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Carried over 2 times/i)).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/comp-doc-cell-service-gate.test.tsx b/src/test/app/(protected)/workorders/comp-doc-cell-service-gate.test.tsx
new file mode 100644
index 00000000..f5bf9847
--- /dev/null
+++ b/src/test/app/(protected)/workorders/comp-doc-cell-service-gate.test.tsx
@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { CompDocCell } from "@/app/(protected)/workorders/_components/list/table/cells/comp-doc-cell";
+
+describe("CompDocCell service gate", () => {
+  it("shows a disabled placeholder when no service is selected", () => {
+    const onOpen = vi.fn();
+    render(<CompDocCell status="No" woType="PM" pm="" onOpen={onOpen} onOpenMedia={vi.fn()} />);
+
+    expect(screen.getByText("Select service")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /draft|view doc|n\/n/i })).not.toBeInTheDocument();
+  });
+
+  it("opens CompDoc when a service is selected", () => {
+    const onOpen = vi.fn();
+    render(
+      <CompDocCell
+        status="No"
+        woType="PM"
+        pm="HVAC Inspection"
+        onOpen={onOpen}
+        onOpenMedia={vi.fn()}
+      />,
+    );
+
+    screen.getByRole("button", { name: /draft/i }).click();
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/comp-doc-dialog-completion-contract.test.tsx b/src/test/app/(protected)/workorders/comp-doc-dialog-completion-contract.test.tsx
new file mode 100644
index 00000000..f36cc442
--- /dev/null
+++ b/src/test/app/(protected)/workorders/comp-doc-dialog-completion-contract.test.tsx
@@ -0,0 +1,273 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { toast } from "react-toastify";
+import { CompDocDialog } from "@/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+vi.mock("@/domain/locations/use-cases/use-location-detail", () => ({
+  useLocationDetail: () => ({ data: undefined }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderBoardDetail: () => ({ data: undefined, isLoading: false }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-mutations", () => ({
+  useUploadCompletionDoc: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+
+vi.mock("react-toastify", () => ({
+  toast: { error: vi.fn(), success: vi.fn() },
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/comp-doc/comp-doc-draft-toast", () => ({
+  showCompDocDraftSavedToast: vi.fn(),
+}));
+
+const SCHEDULED_ON = "2026-06-01";
+
+function baseRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  const defaults: WorkOrderTableRow = {
+    id: 42,
+    woNumber: "WO-42",
+    site: "SEA1",
+    type: "PM",
+    severity: null,
+    dispatcherId: "u1",
+    dispatcherName: "Dispatcher",
+    scheduledOn: SCHEDULED_ON,
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "",
+    dayLabel: "",
+    location: "Seattle",
+    locationId: "mock-loc-1",
+    pm: "HVAC",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "",
+    company: "Vendor Co",
+    tech: "Tech One",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "No",
+    pocName: "Amazon Rep",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "PM — SEA1",
+    priority: "Sev 3",
+    primaryDispatchId: null,
+    rowVersion: "",
+    dispatchRowVersion: "",
+    flagColor: null,
+    isAddOn: false,
+    upliftSummary: { hasUplift: false, pendingCount: 0 },
+  };
+  return {
+    ...defaults,
+    ...overrides,
+    severity: overrides.severity !== undefined ? overrides.severity : defaults.severity,
+  };
+}
+
+describe("CompDocDialog Save Draft / Generate completion contract", () => {
+  const onSave = vi.fn();
+  const onDateCompletedChange = vi.fn();
+
+  beforeEach(() => {
+    onSave.mockReset();
+    onDateCompletedChange.mockReset();
+    vi.mocked(toast.error).mockReset();
+  });
+
+  function renderDialog(row: WorkOrderTableRow) {
+    // Mirrors board wiring: only completedDate / docStatus — never scheduledOn or lifecycle.
+    const patches: Array<Partial<WorkOrderTableRow>> = [];
+    const client = new QueryClient({
+      defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+    });
+
+    render(
+      <QueryClientProvider client={client}>
+        <CompDocDialog
+          row={row}
+          open
+          onOpenChange={vi.fn()}
+          onSave={async (data, status) => {
+            await onSave(data, status);
+            patches.push({ docStatus: status });
+          }}
+          onDateCompletedChange={async (date) => {
+            await onDateCompletedChange(date);
+            patches.push({ completedDate: date });
+          }}
+        />
+      </QueryClientProvider>,
+    );
+
+    return { patches };
+  }
+
+  function changeDateCompleted(value: string) {
+    const dateInput = document.querySelector('input[type="date"]');
+    expect(dateInput).not.toBeNull();
+    fireEvent.change(dateInput!, { target: { value } });
+  }
+
+  it("Save draft emits completedDate without writing scheduledOn or lifecycle Completed", async () => {
+    const row = baseRow();
+    const { patches } = renderDialog(row);
+
+    changeDateCompleted("2026-07-15");
+    fireEvent.click(screen.getByRole("button", { name: /save draft/i }));
+
+    await waitFor(() => {
+      expect(onDateCompletedChange).toHaveBeenCalledWith("2026-07-15");
+    });
+    expect(onSave).toHaveBeenCalledWith(expect.any(Object), "No");
+    expect(patches).toEqual([{ completedDate: "2026-07-15" }, { docStatus: "No" }]);
+    expect(patches.some((patch) => "scheduledOn" in patch)).toBe(false);
+    expect(patches.some((patch) => patch.status === "Completed")).toBe(false);
+    expect(row.scheduledOn).toBe(SCHEDULED_ON);
+    expect(row.status).toBe("Scheduled");
+  });
+
+  it("Generate emits completedDate before doc Yes without auto-setting lifecycle Completed", async () => {
+    const row = baseRow({ completedDate: "2026-07-01" });
+    const { patches } = renderDialog(row);
+
+    changeDateCompleted("2026-07-20");
+    fireEvent.click(screen.getByRole("button", { name: /^generate$/i }));
+
+    await waitFor(() => {
+      expect(onDateCompletedChange).toHaveBeenCalledWith("2026-07-20");
+    });
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({ generatedAt: expect.any(String) }),
+      "Yes",
+    );
+    expect(patches).toEqual([{ completedDate: "2026-07-20" }, { docStatus: "Yes" }]);
+    expect(patches.some((patch) => "scheduledOn" in patch)).toBe(false);
+    expect(patches.some((patch) => patch.status === "Completed")).toBe(false);
+    expect(row.scheduledOn).toBe(SCHEDULED_ON);
+    expect(row.status).toBe("Scheduled");
+  });
+
+  it("Generate keeps Draft and skips docStatus Yes when Date Work Completed is blank", async () => {
+    const row = baseRow({ completedDate: "" });
+    renderDialog(row);
+
+    fireEvent.click(screen.getByRole("button", { name: /^generate$/i }));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith(
+        "Date Work Completed is required to generate the document.",
+      );
+    });
+    expect(onDateCompletedChange).not.toHaveBeenCalled();
+    expect(onSave).not.toHaveBeenCalled();
+    expect(screen.getByRole("button", { name: /^generate$/i })).toBeInTheDocument();
+  });
+
+  it("Generate keeps Draft and skips docStatus Yes when completedDate patch fails", async () => {
+    const row = baseRow({ completedDate: "2026-07-01" });
+    const client = new QueryClient({
+      defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+    });
+    const invalidateSpy = vi.spyOn(client, "invalidateQueries");
+    onDateCompletedChange.mockRejectedValueOnce(new Error("conflict"));
+
+    render(
+      <QueryClientProvider client={client}>
+        <CompDocDialog
+          row={row}
+          open
+          onOpenChange={vi.fn()}
+          onSave={onSave}
+          onDateCompletedChange={onDateCompletedChange}
+        />
+      </QueryClientProvider>,
+    );
+
+    changeDateCompleted("2026-07-20");
+    fireEvent.click(screen.getByRole("button", { name: /^generate$/i }));
+
+    await waitFor(() => {
+      expect(onDateCompletedChange).toHaveBeenCalledWith("2026-07-20");
+    });
+    expect(onSave).not.toHaveBeenCalled();
+    expect(screen.getByRole("button", { name: /^generate$/i })).toBeInTheDocument();
+    await waitFor(() => {
+      expect(invalidateSpy).toHaveBeenCalled();
+    });
+  });
+
+  it("Generate never writes docStatus Yes after a successful status-capable save when date fails first", async () => {
+    // Regression for the prior order (status then date): if date fails, Yes must not have been sent.
+    // With prerequisites-first ordering, date failure short-circuits before onSave("Yes").
+    const callOrder: string[] = [];
+    onDateCompletedChange.mockImplementation(async () => {
+      callOrder.push("date");
+      throw new Error("completedDate conflict");
+    });
+    onSave.mockImplementation(async () => {
+      callOrder.push("status");
+    });
+
+    const row = baseRow({ completedDate: "2026-07-01" });
+    renderDialog(row);
+    changeDateCompleted("2026-07-20");
+    fireEvent.click(screen.getByRole("button", { name: /^generate$/i }));
+
+    await waitFor(() => {
+      expect(onDateCompletedChange).toHaveBeenCalled();
+    });
+    expect(callOrder).toEqual(["date"]);
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it("Save draft persists PM comments notes through onSave", async () => {
+    const row = baseRow();
+    renderDialog(row);
+
+    const notes = screen.getByPlaceholderText(/add findings/i);
+    fireEvent.change(notes, { target: { value: "No issues noted" } });
+    fireEvent.click(screen.getByRole("button", { name: /save draft/i }));
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({ notes: "No issues noted" }),
+        "No",
+      );
+    });
+  });
+
+  it("Mark as not required rolls back UI when persist fails", async () => {
+    onSave.mockRejectedValueOnce(new Error("persist failed"));
+    const row = baseRow();
+    renderDialog(row);
+
+    fireEvent.click(screen.getByRole("button", { name: /mark as not required/i }));
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(expect.any(Object), "NN");
+    });
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: /mark as not required/i })).toBeInTheDocument();
+    });
+    expect(screen.queryByRole("button", { name: /^undo$/i })).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/comp-doc-dialog-footer-exclusive.test.tsx b/src/test/app/(protected)/workorders/comp-doc-dialog-footer-exclusive.test.tsx
new file mode 100644
index 00000000..49ced8be
--- /dev/null
+++ b/src/test/app/(protected)/workorders/comp-doc-dialog-footer-exclusive.test.tsx
@@ -0,0 +1,53 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { CompDocDialogFooter } from "@/app/(protected)/workorders/_components/comp-doc/comp-doc-dialog-footer";
+
+describe("CompDocDialogFooter exclusive states", () => {
+  const pdfInputRef = createRef<HTMLInputElement | null>();
+  const handlers = {
+    onMarkNotRequired: vi.fn(),
+    onSaveDraft: vi.fn(),
+    onGenerate: vi.fn(),
+    onUndo: vi.fn(),
+    onDownloadPdf: vi.fn(),
+    onUploadPdf: vi.fn(),
+  };
+
+  it("does not render draft actions when a signed PDF is on file while docState is still draft", () => {
+    render(
+      <CompDocDialogFooter
+        docState="draft"
+        isDocumentsReadOnly={false}
+        rowVersion="1"
+        isUploading={false}
+        signOffAttachment="https://example.com/doc.pdf"
+        generatedAt=""
+        pdfInputRef={pdfInputRef}
+        {...handlers}
+      />,
+    );
+
+    expect(screen.queryByRole("button", { name: /save draft/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /mark as not required/i })).not.toBeInTheDocument();
+    expect(screen.getByText(/document on file/i)).toBeInTheDocument();
+  });
+
+  it("renders only draft actions for a clean draft without attachment", () => {
+    render(
+      <CompDocDialogFooter
+        docState="draft"
+        isDocumentsReadOnly={false}
+        rowVersion="1"
+        isUploading={false}
+        signOffAttachment={null}
+        generatedAt=""
+        pdfInputRef={pdfInputRef}
+        {...handlers}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: /save draft/i })).toBeInTheDocument();
+    expect(screen.queryByText(/document on file/i)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/completed-lock-view-only-dialogs.test.tsx b/src/test/app/(protected)/workorders/completed-lock-view-only-dialogs.test.tsx
new file mode 100644
index 00000000..71c32f3c
--- /dev/null
+++ b/src/test/app/(protected)/workorders/completed-lock-view-only-dialogs.test.tsx
@@ -0,0 +1,50 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ServiceNotesDialog } from "@/app/(protected)/workorders/_components/list/table/cells/service-notes-dialog";
+import { SiteDialog } from "@/app/(protected)/workorders/_components/list/table/cells/site-dialog";
+import { renderWithProviders } from "@/test/test-utils";
+
+describe("Completed view-only dialogs", () => {
+  it("hides Save on a view-only site dialog", () => {
+    const onSave = vi.fn();
+
+    renderWithProviders(
+      <SiteDialog
+        open
+        onOpenChange={vi.fn()}
+        value="BK5"
+        locationId="loc-1"
+        sites={[{ id: "loc-1", name: "BK5" }]}
+        viewOnly
+        onSave={onSave}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByRole("button", { name: /^close$/i })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /^save$/i })).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: /^close$/i }));
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it("hides Save on a view-only service notes dialog", () => {
+    const onSave = vi.fn();
+
+    renderWithProviders(
+      <ServiceNotesDialog
+        open
+        onOpenChange={vi.fn()}
+        pm="HVAC"
+        extraServices={[]}
+        serviceNotes="Check filters"
+        pmTypes={["HVAC"]}
+        viewOnly
+        onSave={onSave}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByRole("button", { name: /^close$/i })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /^save$/i })).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/date-cell-schedule-range.test.tsx b/src/test/app/(protected)/workorders/date-cell-schedule-range.test.tsx
new file mode 100644
index 00000000..c0e9544e
--- /dev/null
+++ b/src/test/app/(protected)/workorders/date-cell-schedule-range.test.tsx
@@ -0,0 +1,144 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DateCell } from "@/app/(protected)/workorders/_components/list/table/cells/date-cell";
+import { DueDateCell } from "@/app/(protected)/workorders/_components/list/table/cells/due-date-cell";
+import { pad2, todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+import { renderWithProviders } from "@/test/test-utils";
+
+function currentMonthIso(day: number): string {
+  const [y, m] = todayIso().split("-").map(Number);
+  return `${y}-${pad2(m)}-${pad2(day)}`;
+}
+
+async function openRangeTab(triggerName: RegExp | string) {
+  fireEvent.click(screen.getByRole("button", { name: triggerName }));
+  const rangeTab = await screen.findByRole("button", { name: "Range" });
+  fireEvent.click(rangeTab);
+}
+
+describe("DateCell — Schedule On range", () => {
+  it("shows Week, Date, and Range when onSaveRange is provided", async () => {
+    renderWithProviders(
+      <DateCell
+        value=""
+        allowWeekMode
+        onSave={vi.fn()}
+        onSaveWeek={vi.fn()}
+        onSaveRange={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "—" }));
+
+    expect(await screen.findByRole("button", { name: "Week" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Date" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Range" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Specific date" })).not.toBeInTheDocument();
+  }, 10_000);
+
+  it("keeps Week / Specific date and hides Range without onSaveRange", async () => {
+    renderWithProviders(<DateCell value="" allowWeekMode onSave={vi.fn()} onSaveWeek={vi.fn()} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "—" }));
+
+    expect(await screen.findByRole("button", { name: "Week" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Specific date" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Range" })).not.toBeInTheDocument();
+  });
+
+  it("submits start and end via Done, including inverted clicks", async () => {
+    const onSaveRange = vi.fn();
+    renderWithProviders(
+      <DateCell
+        value=""
+        allowWeekMode
+        onSave={vi.fn()}
+        onSaveWeek={vi.fn()}
+        onSaveRange={onSaveRange}
+      />,
+    );
+
+    await openRangeTab("—");
+    fireEvent.click(screen.getByRole("button", { name: "20" }));
+    fireEvent.click(screen.getByRole("button", { name: "5" }));
+    fireEvent.click(screen.getByRole("button", { name: /^done$/i }));
+
+    expect(onSaveRange).toHaveBeenCalledWith(currentMonthIso(5), currentMonthIso(20));
+  });
+
+  it("does not submit until both ends are picked", async () => {
+    const onSaveRange = vi.fn();
+    renderWithProviders(
+      <DateCell
+        value=""
+        allowWeekMode
+        onSave={vi.fn()}
+        onSaveWeek={vi.fn()}
+        onSaveRange={onSaveRange}
+      />,
+    );
+
+    await openRangeTab("—");
+    fireEvent.click(screen.getByRole("button", { name: "5" }));
+
+    expect(screen.getByRole("button", { name: /^done$/i })).toBeDisabled();
+    expect(onSaveRange).not.toHaveBeenCalled();
+  });
+
+  it("does not persist when switching tabs without confirming", async () => {
+    const onSave = vi.fn();
+    const onSaveRange = vi.fn();
+    renderWithProviders(
+      <DateCell
+        value=""
+        allowWeekMode
+        onSave={onSave}
+        onSaveWeek={vi.fn()}
+        onSaveRange={onSaveRange}
+      />,
+    );
+
+    await openRangeTab("—");
+    fireEvent.click(screen.getByRole("button", { name: "5" }));
+    fireEvent.click(screen.getByRole("button", { name: "Date" }));
+
+    expect(onSave).not.toHaveBeenCalled();
+    expect(onSaveRange).not.toHaveBeenCalled();
+  });
+
+  it("shows Clear above the mode tabs and closes after clearing", async () => {
+    const onClear = vi.fn();
+    renderWithProviders(
+      <DateCell
+        value="2026-09-09"
+        allowWeekMode
+        onSave={vi.fn()}
+        onSaveWeek={vi.fn()}
+        onSaveRange={vi.fn()}
+        onClear={onClear}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /09-09/ }));
+
+    const clear = await screen.findByRole("button", { name: "Clear" });
+    const week = screen.getByRole("button", { name: "Week" });
+    expect(clear.compareDocumentPosition(week) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+
+    fireEvent.click(clear);
+    expect(onClear).toHaveBeenCalledOnce();
+    expect(screen.queryByRole("button", { name: "Clear" })).not.toBeInTheDocument();
+  });
+});
+
+describe("DueDateCell — no Schedule On range tabs", () => {
+  it("does not offer Week / Date / Range on a PM due date", () => {
+    renderWithProviders(<DueDateCell type="PM" value="2026-07-15" onSave={vi.fn()} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /07-15/ }));
+
+    expect(screen.queryByRole("button", { name: "Week" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Range" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Specific date" })).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/dispatch-checklist-section.test.tsx b/src/test/app/(protected)/workorders/dispatch-checklist-section.test.tsx
new file mode 100644
index 00000000..194aff65
--- /dev/null
+++ b/src/test/app/(protected)/workorders/dispatch-checklist-section.test.tsx
@@ -0,0 +1,58 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DispatchChecklistSection } from "@/app/(protected)/workorders/_components/dispatch/dispatch-detail/dispatch-checklist-section";
+import type { DispatchChecklistItem } from "@/domain/work-orders/types/work-order";
+
+const VIEWER_NAME = "Alice Viewer";
+
+function renderChecklist(items: DispatchChecklistItem[]) {
+  return render(
+    <DispatchChecklistSection
+      items={items}
+      isLocked={false}
+      isUpdating={false}
+      newItem=""
+      onNewItemChange={vi.fn()}
+      onToggleItem={vi.fn()}
+      onAddItem={vi.fn()}
+    />,
+  );
+}
+
+describe("DispatchChecklistSection completedBy provenance", () => {
+  it.each([
+    { label: "null", completedBy: null },
+    { label: "empty", completedBy: "" },
+    { label: "whitespace", completedBy: "   " },
+  ])("shows Unknown (never the viewer) when completedBy is $label", ({ completedBy }) => {
+    renderChecklist([
+      {
+        id: 1,
+        itemText: "Verify site access",
+        isCompleted: true,
+        completedBy,
+        completedAt: "2026-07-01T15:30:00Z",
+      },
+    ]);
+
+    expect(screen.getByText(/Unknown/)).toBeInTheDocument();
+    expect(screen.queryByText(VIEWER_NAME)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Alice/)).not.toBeInTheDocument();
+  });
+
+  it("renders the recorded completedBy when present", () => {
+    renderChecklist([
+      {
+        id: 2,
+        itemText: "Collect photos",
+        isCompleted: true,
+        completedBy: "Jordan Tech",
+        completedAt: "2026-07-01T15:30:00Z",
+      },
+    ]);
+
+    expect(screen.getByText(/Jordan Tech/)).toBeInTheDocument();
+    expect(screen.queryByText(/Unknown/)).not.toBeInTheDocument();
+    expect(screen.queryByText(VIEWER_NAME)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/dispatcher-filter.test.tsx b/src/test/app/(protected)/workorders/dispatcher-filter.test.tsx
new file mode 100644
index 00000000..ee92488d
--- /dev/null
+++ b/src/test/app/(protected)/workorders/dispatcher-filter.test.tsx
@@ -0,0 +1,149 @@
+import { screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { DispatcherFilter } from "@/app/(protected)/workorders/_components/list/filter-bar/dispatcher-filter";
+import { ASSIGNEE_FILTER_UNASSIGNED } from "@/domain/work-orders/types/work-order-list";
+import { renderWithProviders } from "@/test/test-utils";
+
+const users = [
+  { id: "u1", name: "Alex Rivera" },
+  { id: "u2", name: "Blair Cho" },
+];
+
+describe("DispatcherFilter (SH-242)", () => {
+  it("renders a plain trigger without a boxed border", () => {
+    renderWithProviders(
+      <DispatcherFilter selectedIds={new Set()} onChange={vi.fn()} users={users} />,
+      { withAuth: false },
+    );
+
+    const trigger = screen.getByRole("button", { name: "All dispatchers" });
+    expect(trigger.className.split(/\s+/)).not.toContain("border");
+    expect(trigger.style.height).not.toBe("38px");
+    expect(trigger.style.borderColor).toBe("");
+    expect(trigger.style.background).toBe("");
+    expect(trigger.style.fontWeight).toBe("500");
+  });
+
+  it("opens the menu from the keyboard", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <DispatcherFilter
+        selectedIds={new Set()}
+        onChange={vi.fn()}
+        users={users}
+        currentUserId="u1"
+      />,
+      { withAuth: false },
+    );
+
+    screen.getByRole("button", { name: "All dispatchers" }).focus();
+    await user.keyboard("{Enter}");
+    expect(screen.getByRole("button", { name: "My WOs only" })).toBeInTheDocument();
+  });
+
+  it("shows loading skeleton while dispatchers are fetching", () => {
+    renderWithProviders(
+      <DispatcherFilter selectedIds={new Set()} onChange={vi.fn()} users={[]} usersLoading />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByLabelText("Loading dispatchers")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "All dispatchers" })).not.toBeInTheDocument();
+  });
+
+  it("disables the trigger when requested", () => {
+    renderWithProviders(
+      <DispatcherFilter selectedIds={new Set()} onChange={vi.fn()} users={users} disabled />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByRole("button", { name: "All dispatchers" })).toBeDisabled();
+  });
+
+  it("labels My WOs, Unassigned, and a multi-select count", () => {
+    const { rerender } = renderWithProviders(
+      <DispatcherFilter
+        selectedIds={new Set(["u1"])}
+        onChange={vi.fn()}
+        users={users}
+        currentUserId="u1"
+      />,
+      { withAuth: false },
+    );
+    expect(screen.getByRole("button", { name: "My WOs" })).toBeInTheDocument();
+
+    rerender(
+      <DispatcherFilter
+        selectedIds={new Set([ASSIGNEE_FILTER_UNASSIGNED])}
+        onChange={vi.fn()}
+        users={users}
+        currentUserId="u1"
+      />,
+    );
+    expect(screen.getByRole("button", { name: "Unassigned" })).toBeInTheDocument();
+
+    rerender(
+      <DispatcherFilter
+        selectedIds={new Set(["u1", "u2"])}
+        onChange={vi.fn()}
+        users={users}
+        currentUserId="u1"
+      />,
+    );
+    expect(screen.getByRole("button", { name: "2 selected" })).toBeInTheDocument();
+  });
+
+  it("scopes All, My WOs, Unassigned, and a named dispatcher", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithProviders(
+      <DispatcherFilter
+        selectedIds={new Set()}
+        onChange={onChange}
+        users={users}
+        currentUserId="u1"
+      />,
+      { withAuth: false },
+    );
+
+    await user.click(screen.getByRole("button", { name: "All dispatchers" }));
+    await user.click(screen.getByRole("button", { name: "My WOs only" }));
+    expect(onChange).toHaveBeenLastCalledWith(new Set(["u1"]));
+
+    await user.click(screen.getByRole("button", { name: "Unassigned" }));
+    expect(onChange).toHaveBeenLastCalledWith(new Set([ASSIGNEE_FILTER_UNASSIGNED]));
+
+    await user.click(screen.getByRole("button", { name: "Blair Cho" }));
+    expect(onChange).toHaveBeenLastCalledWith(new Set(["u2"]));
+
+    const menu = screen.getByRole("presentation");
+    await user.click(within(menu).getByRole("button", { name: "All dispatchers" }));
+    expect(onChange).toHaveBeenLastCalledWith(new Set());
+  });
+
+  it("does not put aria-checked on ordinary dispatcher buttons", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <DispatcherFilter
+        selectedIds={new Set()}
+        onChange={vi.fn()}
+        users={users}
+        currentUserId="u1"
+      />,
+      { withAuth: false },
+    );
+
+    await user.click(screen.getByRole("button", { name: "All dispatchers" }));
+    const popover = screen.getByRole("presentation");
+    const items = [
+      within(popover).getByRole("button", { name: "All dispatchers" }),
+      within(popover).getByRole("button", { name: "Unassigned" }),
+      within(popover).getByRole("button", { name: "Blair Cho" }),
+    ];
+    for (const item of items) {
+      expect(item).not.toHaveAttribute("aria-checked");
+    }
+  });
+});
diff --git a/src/test/app/(protected)/workorders/due-date-calendar-dialog.test.tsx b/src/test/app/(protected)/workorders/due-date-calendar-dialog.test.tsx
new file mode 100644
index 00000000..66326982
--- /dev/null
+++ b/src/test/app/(protected)/workorders/due-date-calendar-dialog.test.tsx
@@ -0,0 +1,62 @@
+import { ThemeProvider } from "@mui/material";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DueDateCalendarDialog } from "@/app/(protected)/workorders/_components/list/table/cells/due-date-calendar-dialog";
+import { DueDateCell } from "@/app/(protected)/workorders/_components/list/table/cells/due-date-cell";
+import { WizardDueDateField } from "@/app/(protected)/workorders/_components/wizard/wizard-due-date-field";
+import { muiTheme } from "@/lib/theme/mui-theme";
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider theme={muiTheme}>{ui}</ThemeProvider>);
+}
+
+describe("DueDateCalendarDialog", () => {
+  it("saves the selected day as ISO and closes", () => {
+    const onSave = vi.fn();
+    const onOpenChange = vi.fn();
+
+    renderWithTheme(
+      <DueDateCalendarDialog open onOpenChange={onOpenChange} value="2026-07-15" onSave={onSave} />,
+    );
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("Due Date")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "20" }));
+
+    expect(onSave).toHaveBeenCalledWith("2026-07-20");
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});
+
+describe("DueDateCell", () => {
+  it("opens a dialog for Emergency and keeps popover for PM", () => {
+    const onSave = vi.fn();
+
+    const { rerender } = renderWithTheme(
+      <DueDateCell type="Emergency" value="2026-07-15" onSave={onSave} />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Due Date" }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+    rerender(
+      <ThemeProvider theme={muiTheme}>
+        <DueDateCell type="PM" value="2026-07-15" onSave={onSave} />
+      </ThemeProvider>,
+    );
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+});
+
+describe("WizardDueDateField", () => {
+  it("opens a dialog when type is Emergency", () => {
+    renderWithTheme(
+      <WizardDueDateField type="Emergency" value="" placeholder="No due date" onChange={vi.fn()} />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /No due date/i }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/due-date-past-due-announcement.test.tsx b/src/test/app/(protected)/workorders/due-date-past-due-announcement.test.tsx
new file mode 100644
index 00000000..eddcf120
--- /dev/null
+++ b/src/test/app/(protected)/workorders/due-date-past-due-announcement.test.tsx
@@ -0,0 +1,42 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DueDateCell } from "@/app/(protected)/workorders/_components/list/table/cells/due-date-cell";
+import { renderWithProviders } from "@/test/test-utils";
+
+describe("Due Date past-due announcement", () => {
+  it("names the past-due state on the Emergency due date control", () => {
+    renderWithProviders(
+      <DueDateCell type="Emergency" value="2026-07-03" pastDue highlight onSave={vi.fn()} />,
+    );
+    expect(screen.getByLabelText("Due Date, past due")).toBeInTheDocument();
+  });
+
+  it("keeps the plain name when the work order is not past due", () => {
+    renderWithProviders(<DueDateCell type="Emergency" value="2026-07-03" onSave={vi.fn()} />);
+    expect(screen.getByLabelText("Due Date")).toBeInTheDocument();
+    expect(screen.queryByLabelText("Due Date, past due")).not.toBeInTheDocument();
+  });
+
+  it("does not announce past due for a transient highlight alone", () => {
+    // `highlight` is also raised to draw attention to a row, which is not a
+    // durable state and must not be announced as one.
+    renderWithProviders(
+      <DueDateCell type="Emergency" value="2026-07-03" highlight onSave={vi.fn()} />,
+    );
+    expect(screen.getByLabelText("Due Date")).toBeInTheDocument();
+  });
+
+  it("announces past due on non-Emergency types too", () => {
+    renderWithProviders(<DueDateCell type="PM" value="2026-07-03" pastDue onSave={vi.fn()} />);
+    // The visible date stays the leading part of the button's accessible name
+    // and the durable past-due state is appended to it.
+    expect(screen.getByRole("button", { name: /07-03\s*Past due/ })).toBeInTheDocument();
+  });
+
+  it("does not announce past due for a non-Emergency transient highlight alone", () => {
+    // `highlight` is also raised to draw attention to a row, which is not a
+    // durable state and must not be announced as one.
+    renderWithProviders(<DueDateCell type="PM" value="2026-07-03" highlight onSave={vi.fn()} />);
+    expect(screen.getByRole("button", { name: "07-03" })).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/due-date-schedule-floor.test.tsx b/src/test/app/(protected)/workorders/due-date-schedule-floor.test.tsx
new file mode 100644
index 00000000..e6c41d50
--- /dev/null
+++ b/src/test/app/(protected)/workorders/due-date-schedule-floor.test.tsx
@@ -0,0 +1,194 @@
+import { fireEvent, render, renderHook, screen, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SlideOverInfoTabEditView } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-edit-view";
+import { WoTableInlineRow } from "@/app/(protected)/workorders/_components/list/table/wo-table-inline-row";
+import { useWoTableRowHandlers } from "@/app/(protected)/workorders/_components/list/table/use-wo-table-row-handlers";
+import { MiniCalendar } from "@/app/(protected)/workorders/_components/wizard/mini-calendar";
+import { WizardStepTypeSchedule } from "@/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule";
+import { EMPTY_TABLE_DRAFT } from "@/domain/work-orders/types/work-order-table-row";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { EMPTY_WIZARD_DRAFT } from "@/domain/work-orders/types/work-order-wizard";
+import { pad2, todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/site-cell", () => ({
+  SiteCell: () => null,
+}));
+vi.mock(
+  "@/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell",
+  () => ({ EditableWONumberCell: () => null }),
+);
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/type-cell", () => ({
+  TypeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell", () => ({
+  AssignedToCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/appt-time-cell", () => ({
+  ApptTimeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/pm-type-cell", () => ({
+  PMTypeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/vendor-cell", () => ({
+  VendorCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/status-cell", () => ({
+  StatusCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/reschedule-notify", () => ({
+  rescheduleNotify: vi.fn(),
+  weekMoveNotify: vi.fn(),
+}));
+
+function day(n: number): string {
+  const [y, m] = todayIso().split("-").map(Number);
+  return `${y}-${pad2(m)}-${pad2(n)}`;
+}
+
+function rowByLabel(label: string) {
+  return screen.getByText(label, { selector: "span,label,div" }).closest("div")!;
+}
+
+describe("Due Date cannot be before Schedule On (SH-356)", () => {
+  it("disables calendar days before the floor", () => {
+    render(<MiniCalendar value={day(12)} minDate={day(10)} onChange={vi.fn()} />);
+
+    expect(screen.getByRole("button", { name: "9" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "10" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: "11" })).toBeEnabled();
+  });
+
+  describe("slide-over edit", () => {
+    const draft = { scheduledOn: day(10), dueDate: day(12) } as Partial<WorkOrderTableRow>;
+
+    function renderSlideOver(onDraftChange = vi.fn()) {
+      renderWithProviders(
+        <SlideOverInfoTabEditView
+          draft={{ ...EMPTY_TABLE_DRAFT, id: 42, targetWeek: "", ...draft } as WorkOrderTableRow}
+          users={[]}
+          sites={[]}
+          vendors={[]}
+          pmTypes={[]}
+          allOrders={[]}
+          onDraftChange={onDraftChange}
+        />,
+      );
+      return onDraftChange;
+    }
+
+    it("disables Due Date days before Schedule On", async () => {
+      renderSlideOver();
+      fireEvent.click(within(rowByLabel("Due Date")).getByRole("button"));
+
+      expect(await screen.findByRole("button", { name: "9" })).toBeDisabled();
+      expect(screen.getByRole("button", { name: "10" })).toBeEnabled();
+    });
+
+    it("clears the Due Date when Schedule On moves past it", async () => {
+      const onDraftChange = renderSlideOver();
+      fireEvent.click(within(rowByLabel("Schedule On")).getAllByRole("button")[0]);
+      fireEvent.click(await screen.findByRole("button", { name: "15" }));
+
+      expect(onDraftChange).toHaveBeenCalledWith(
+        expect.objectContaining({ scheduledOn: day(15), dueDate: "" }),
+      );
+    });
+  });
+
+  it("wizard: clears Due Date on a later Schedule On and floors the Due Date picker", async () => {
+    const onPatch = vi.fn();
+    render(
+      <WizardStepTypeSchedule
+        draft={{ ...EMPTY_WIZARD_DRAFT, scheduledOn: day(10), schedMode: "date", dueDate: day(12) }}
+        users={[]}
+        onUpdate={vi.fn()}
+        onPatch={onPatch}
+      />,
+    );
+
+    const dueDateButtons = within(rowByLabel("Due Date").parentElement!).getAllByRole("button");
+    fireEvent.click(dueDateButtons[dueDateButtons.length - 1]);
+    expect(await screen.findByRole("button", { name: "9" })).toBeDisabled();
+    fireEvent.keyDown(document.activeElement ?? document.body, { key: "Escape" });
+
+    const scheduleBlock = rowByLabel("Schedule On").parentElement!;
+    const scheduleButtons = within(scheduleBlock).getAllByRole("button");
+    fireEvent.click(scheduleButtons[scheduleButtons.length - 1]);
+    const calendars = await screen.findAllByRole("button", { name: "15" });
+    fireEvent.click(calendars[calendars.length - 1]);
+
+    expect(onPatch).toHaveBeenCalledWith(
+      expect.objectContaining({ scheduledOn: day(15), dueDate: "" }),
+    );
+  });
+
+  it("inline creation row: clears Due Date on a later Schedule On", async () => {
+    const onChange = vi.fn();
+    renderWithProviders(
+      <table>
+        <tbody>
+          <WoTableInlineRow
+            draft={{ ...EMPTY_TABLE_DRAFT, scheduledOn: day(10), dueDate: day(12) }}
+            draftDayKey={day(10)}
+            users={[]}
+            sites={[]}
+            vendors={[]}
+            pmTypes={[]}
+            allRows={[]}
+            onChange={onChange}
+            onSave={vi.fn()}
+            onCancel={vi.fn()}
+          />
+        </tbody>
+      </table>,
+      { withAuth: false },
+    );
+
+    const cells = screen.getAllByRole("cell");
+    const dateButtons = cells.flatMap((cell) => within(cell).queryAllByRole("button"));
+    const scheduleButton = dateButtons.find(
+      (b) => b.textContent?.includes(day(10).slice(5).replace("-", "/")) ?? false,
+    );
+    fireEvent.click(scheduleButton ?? dateButtons[0]);
+    fireEvent.click(await screen.findByRole("button", { name: "15" }));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ scheduledOn: day(15), dueDate: "" }),
+    );
+  });
+
+  it("board row: sends the Due Date clear in the same schedule patch", () => {
+    const onPatch = vi.fn();
+    const { result } = renderHook(() =>
+      useWoTableRowHandlers({
+        tableData: {
+          dragState: { current: { dragId: null, overId: null } },
+          setDragViz: vi.fn(),
+          reorderRows: vi.fn(),
+          endDrag: vi.fn(),
+          revealScheduledRow: vi.fn(),
+          setSelectedId: vi.fn(),
+        } as never,
+        weekMonday: "2026-05-18",
+        onNavigateToDay: vi.fn(),
+        onOpenSlideOver: vi.fn(),
+        onOpenMedia: vi.fn(),
+        onPatch,
+        onScheduleHighlight: vi.fn(),
+      }),
+    );
+
+    result.current.onScheduleDate("wo-1", "2026-05-21", "2026-05-20");
+    expect(onPatch).toHaveBeenLastCalledWith("wo-1", expect.objectContaining({ dueDate: "" }));
+
+    result.current.onScheduleRange("wo-1", "2026-05-19", "2026-05-22", "2026-05-20");
+    expect(onPatch.mock.lastCall?.[1]).not.toHaveProperty("dueDate");
+
+    result.current.onScheduleWeek("wo-1", "2026-05-25", "2026-05-20");
+    expect(onPatch).toHaveBeenLastCalledWith(
+      "wo-1",
+      expect.objectContaining({ targetWeek: "2026-05-25", dueDate: "" }),
+    );
+  });
+});
diff --git a/src/test/app/(protected)/workorders/duplicate-wo-number-dialog.test.tsx b/src/test/app/(protected)/workorders/duplicate-wo-number-dialog.test.tsx
new file mode 100644
index 00000000..5d126913
--- /dev/null
+++ b/src/test/app/(protected)/workorders/duplicate-wo-number-dialog.test.tsx
@@ -0,0 +1,58 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DuplicateWoNumberDialog } from "@/app/(protected)/workorders/_components/list/duplicate-wo-number-dialog";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+const existingRow = { id: "wo-99", woNumber: "12345678901" } as WorkOrderTableRow;
+
+describe("DuplicateWoNumberDialog", () => {
+  it("shows the duplicate title and work order number when open", () => {
+    renderWithProviders(
+      <DuplicateWoNumberDialog
+        open
+        existing={existingRow}
+        onDismiss={vi.fn()}
+        onViewExisting={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByText("Duplicate Work Order Number")).toBeInTheDocument();
+    expect(screen.getByText(/12345678901/)).toBeInTheDocument();
+  });
+
+  it("calls onViewExisting when View existing is clicked", () => {
+    const onViewExisting = vi.fn();
+
+    renderWithProviders(
+      <DuplicateWoNumberDialog
+        open
+        existing={existingRow}
+        onDismiss={vi.fn()}
+        onViewExisting={onViewExisting}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "View existing" }));
+
+    expect(onViewExisting).toHaveBeenCalledWith(existingRow);
+  });
+
+  it("calls onDismiss when Dismiss is clicked", () => {
+    const onDismiss = vi.fn();
+
+    renderWithProviders(
+      <DuplicateWoNumberDialog
+        open
+        existing={existingRow}
+        onDismiss={onDismiss}
+        onViewExisting={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Dismiss" }));
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/editable-wo-number-cell-sh-placeholder.test.tsx b/src/test/app/(protected)/workorders/editable-wo-number-cell-sh-placeholder.test.tsx
new file mode 100644
index 00000000..ad16d2e8
--- /dev/null
+++ b/src/test/app/(protected)/workorders/editable-wo-number-cell-sh-placeholder.test.tsx
@@ -0,0 +1,105 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { toast } from "react-toastify";
+import { EditableWONumberCell } from "@/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("react-toastify", () => {
+  const toastFn = Object.assign(vi.fn(), { error: vi.fn(), success: vi.fn() });
+  return { toast: toastFn };
+});
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: { findByWoNumber: vi.fn() },
+}));
+
+function renderCell(value: string, currentId: string | number) {
+  const onSave = vi.fn();
+  renderWithProviders(
+    <EditableWONumberCell
+      value={value}
+      rescheduleCount={0}
+      currentId={currentId}
+      allOrders={[]}
+      onSave={onSave}
+    />,
+  );
+  return onSave;
+}
+
+function typeAndCommit(nextValue: string) {
+  fireEvent.click(screen.getByText(/./, { selector: "span" }));
+  const input = screen.getByLabelText("Work order number");
+  fireEvent.change(input, { target: { value: nextValue } });
+  fireEvent.keyDown(input, { key: "Enter" });
+}
+
+describe("EditableWONumberCell SH placeholder numbers", () => {
+  beforeEach(() => {
+    vi.mocked(workOrdersApi.findByWoNumber).mockResolvedValue(null as never);
+    vi.mocked(toast).mockClear();
+    vi.mocked(toast.error).mockClear();
+  });
+
+  it("saves a freshly typed SH number on a brand-new inline work order", async () => {
+    const onSave = renderCell("", "draft");
+
+    typeAndCommit("SH00001");
+
+    await waitFor(() => expect(onSave).toHaveBeenCalledWith("SH00001"));
+    expect(toast).not.toHaveBeenCalled();
+    expect(toast.error).not.toHaveBeenCalled();
+  });
+
+  it("keeps a typed SH prefix instead of stripping it to digits", () => {
+    renderCell("", "draft");
+
+    fireEvent.click(screen.getByText("-"));
+    const input = screen.getByLabelText("Work order number");
+    fireEvent.change(input, { target: { value: "sh00001" } });
+
+    expect(input).toHaveValue("SH00001");
+  });
+
+  it("does not treat an unsaved inline draft number as a real number to protect", async () => {
+    const onSave = renderCell("12345678901", "draft");
+
+    typeAndCommit("SH00002");
+
+    await waitFor(() => expect(onSave).toHaveBeenCalledWith("SH00002"));
+  });
+
+  it("blocks replacing a saved real APM number with an SH number", async () => {
+    const onSave = renderCell("12345678901", 42);
+
+    typeAndCommit("SH00001");
+
+    await waitFor(() =>
+      expect(toast.error).toHaveBeenCalledWith(
+        "Cannot replace an APM work order number with an internal number",
+      ),
+    );
+    expect(onSave).not.toHaveBeenCalled();
+    expect(screen.getByText("12345678901")).toBeInTheDocument();
+  });
+
+  it("lets a saved SH number be replaced by a real 11-digit number", async () => {
+    const onSave = renderCell("SH00001", 42);
+
+    typeAndCommit("12345678901");
+
+    await waitFor(() => expect(onSave).toHaveBeenCalledWith("12345678901"));
+  });
+
+  it("still rejects a numeric number that is not 11 digits", () => {
+    const onSave = renderCell("", "draft");
+
+    typeAndCommit("12345");
+
+    expect(toast).toHaveBeenCalledWith(
+      "Work order number must be 11 digits or an SH number (e.g. SH00001)",
+    );
+    expect(onSave).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/flag-cell.test.tsx b/src/test/app/(protected)/workorders/flag-cell.test.tsx
new file mode 100644
index 00000000..db90e884
--- /dev/null
+++ b/src/test/app/(protected)/workorders/flag-cell.test.tsx
@@ -0,0 +1,59 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { FlagCell } from "@/app/(protected)/workorders/_components/list/table/cells/flag-cell";
+import { WoTableHead } from "@/app/(protected)/workorders/_components/list/table/wo-table-head";
+
+function flagPickerDialog() {
+  return screen.getByRole("dialog", { name: "Choose flag color" });
+}
+
+describe("FlagCell", () => {
+  it("sets, changes, and clears a flag by named controls", () => {
+    const onChange = vi.fn();
+    const { rerender } = render(<FlagCell color={null} onChange={onChange} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Add flag" }));
+    fireEvent.click(within(flagPickerDialog()).getByRole("button", { name: "Red" }));
+    expect(onChange).toHaveBeenCalledWith("#EF4444");
+    expect(screen.queryByRole("dialog", { name: "Choose flag color" })).toBeNull();
+
+    rerender(<FlagCell color="#EF4444" onChange={onChange} />);
+    expect(screen.getByRole("button", { name: "Red flag" })).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Red flag" }));
+    fireEvent.click(within(flagPickerDialog()).getByRole("button", { name: "Blue" }));
+    expect(onChange).toHaveBeenCalledWith("#3B82F6");
+
+    rerender(<FlagCell color="#3B82F6" onChange={onChange} />);
+    fireEvent.click(screen.getByRole("button", { name: "Blue flag" }));
+    fireEvent.click(within(flagPickerDialog()).getByRole("button", { name: "Clear flag" }));
+    expect(onChange).toHaveBeenCalledWith(null);
+    expect(screen.queryByRole("dialog", { name: "Choose flag color" })).toBeNull();
+  });
+
+  it("exposes a non-color name when the hex is not in the palette", () => {
+    render(<FlagCell color="#000000" onChange={vi.fn()} />);
+    expect(screen.getByRole("button", { name: "Flagged" })).toBeInTheDocument();
+  });
+
+  it("names a disabled flag without exposing a button", () => {
+    const onChange = vi.fn();
+    render(<FlagCell color="#EF4444" disabled onChange={onChange} />);
+
+    expect(screen.getByRole("img", { name: "Red flag" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Red flag" })).toBeNull();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("WoTableHead flag column", () => {
+  it("exposes a screen-reader label for the flag column", () => {
+    render(
+      <table>
+        <WoTableHead />
+      </table>,
+    );
+
+    expect(screen.getByRole("columnheader", { name: "Flag" })).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/media-upload-modal-api.test.tsx b/src/test/app/(protected)/workorders/media-upload-modal-api.test.tsx
new file mode 100644
index 00000000..7202587d
--- /dev/null
+++ b/src/test/app/(protected)/workorders/media-upload-modal-api.test.tsx
@@ -0,0 +1,162 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MediaUploadModal } from "@/app/(protected)/workorders/_components/media/media-upload-modal";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const uploadMutateAsync = vi.fn();
+const deleteMutate = vi.fn();
+const categorizeMutate = vi.fn();
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderBoardDetail: () => ({
+    data: {
+      info: { status: "Scheduled", rowVersion: "DETAIL-VER==" },
+      media: [
+        {
+          id: "11",
+          fileName: "before.jpg",
+          url: "https://example.com/before.jpg",
+          category: "Before",
+          isLegacy: false,
+        },
+      ],
+      comments: [],
+      audit: [],
+      completion: {},
+    },
+    isLoading: false,
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-mutations", () => ({
+  useUploadWorkOrderMedia: () => ({
+    mutate: vi.fn(),
+    mutateAsync: uploadMutateAsync,
+    isPending: false,
+  }),
+  useUpdateWorkOrderMediaCategory: () => ({ mutate: categorizeMutate, isPending: false }),
+  useDeleteWorkOrderMedia: () => ({ mutate: deleteMutate, isPending: false }),
+}));
+
+function baseRow(): WorkOrderTableRow {
+  return {
+    id: 7,
+    woNumber: "WO-7",
+    site: "SEA1",
+    type: "Emergency",
+    severity: 1,
+    dispatcherId: "u1",
+    dispatcherName: "Dispatcher",
+    scheduledOn: "2026-06-01",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "",
+    dayLabel: "",
+    location: "Seattle",
+    locationId: "loc-1",
+    pm: "",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "",
+    company: "",
+    tech: "",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 1,
+    title: "Emergency",
+    priority: "Sev 1",
+    primaryDispatchId: null,
+    rowVersion: "ROW-VER==",
+    dispatchRowVersion: "",
+    flagColor: null,
+    isAddOn: false,
+    upliftSummary: { hasUplift: false, pendingCount: 0 },
+  };
+}
+
+function renderModal() {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+
+  return render(
+    <QueryClientProvider client={client}>
+      <MediaUploadModal row={baseRow()} open onOpenChange={vi.fn()} />
+    </QueryClientProvider>,
+  );
+}
+
+describe("MediaUploadModal API wiring", () => {
+  beforeEach(() => {
+    uploadMutateAsync.mockReset();
+    deleteMutate.mockReset();
+    categorizeMutate.mockReset();
+  });
+
+  it("renders persisted media from board detail (refresh-safe)", async () => {
+    renderModal();
+
+    await waitFor(() => {
+      expect(screen.getByText("before.jpg")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Photos & Videos")).toBeInTheDocument();
+    expect(
+      screen.getByText("Accepted: JPG, PNG, MP4, MOV · Max 50MB per file"),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/categorize after upload/i)).not.toBeInTheDocument();
+  });
+
+  it("offers no purpose picker — the table modal only uploads and removes", async () => {
+    renderModal();
+
+    await waitFor(() => {
+      expect(screen.getByText("before.jpg")).toBeInTheDocument();
+    });
+
+    expect(screen.queryByLabelText(/category for before\.jpg/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/categorize after upload/i)).not.toBeInTheDocument();
+    expect(categorizeMutate).not.toHaveBeenCalled();
+  });
+
+  it("shows only the file name under each tile — no purpose label", async () => {
+    renderModal();
+
+    await waitFor(() => {
+      expect(screen.getByText("before.jpg")).toBeInTheDocument();
+    });
+
+    expect(screen.queryByText("Before")).not.toBeInTheDocument();
+    expect(screen.queryByText("Extra")).not.toBeInTheDocument();
+  });
+
+  it("removes media with workOrderVersion from detail.info.rowVersion", async () => {
+    renderModal();
+
+    await waitFor(() => {
+      expect(screen.getByText("before.jpg")).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /^remove$/i }));
+
+    expect(deleteMutate).toHaveBeenCalledWith({
+      mediaId: "11",
+      workOrderVersion: "DETAIL-VER==",
+    });
+  });
+});
diff --git a/src/test/app/(protected)/workorders/media-uploader-dropzone.test.tsx b/src/test/app/(protected)/workorders/media-uploader-dropzone.test.tsx
new file mode 100644
index 00000000..35da0ef4
--- /dev/null
+++ b/src/test/app/(protected)/workorders/media-uploader-dropzone.test.tsx
@@ -0,0 +1,28 @@
+import { createRef } from "react";
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { MediaUploaderDropzone } from "@/app/(protected)/workorders/_components/media/media-uploader-dropzone";
+import { workOrderMediaAcceptAttribute } from "@/domain/work-orders/utils/work-order-media-limits";
+import { renderWithProviders } from "@/test/test-utils";
+
+describe("MediaUploaderDropzone", () => {
+  it("matches the AAP Photos accept copy and keeps it media-only", () => {
+    renderWithProviders(
+      <MediaUploaderDropzone
+        inputRef={createRef<HTMLInputElement>()}
+        pending={false}
+        onFilesSelected={vi.fn()}
+      />,
+    );
+
+    expect(
+      screen.getByText("Accepted: JPG, PNG, MP4, MOV · Max 50MB per file"),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/categorize after upload/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/PDF/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/DOC/)).not.toBeInTheDocument();
+    const input = document.querySelector('input[type="file"]');
+    expect(input?.getAttribute("accept")).toBe(workOrderMediaAcceptAttribute());
+    expect(input?.getAttribute("accept")).not.toContain(".pdf");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/media-uploader-grid-item-meta.test.tsx b/src/test/app/(protected)/workorders/media-uploader-grid-item-meta.test.tsx
new file mode 100644
index 00000000..ec4b30d8
--- /dev/null
+++ b/src/test/app/(protected)/workorders/media-uploader-grid-item-meta.test.tsx
@@ -0,0 +1,35 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { MediaUploaderGridItemMeta } from "@/app/(protected)/workorders/_components/media/media-uploader-grid-item-meta";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+
+const extraPhoto: MediaFile = {
+  id: "10",
+  name: "site.jpg",
+  fileType: "image",
+  url: "https://cdn.example.com/site.jpg",
+  category: "Photo",
+  purpose: "Extra",
+  isLegacy: false,
+};
+
+describe("MediaUploaderGridItemMeta", () => {
+  it("allows an Extra photo to be explicitly assigned to Extra Docs", () => {
+    const onCategorize = vi.fn();
+    render(
+      <MediaUploaderGridItemMeta
+        file={extraPhoto}
+        readOnly={false}
+        pending={false}
+        onCategorize={onCategorize}
+      />,
+    );
+
+    const category = screen.getByLabelText("Category for site.jpg");
+    expect(category).toHaveValue("");
+
+    fireEvent.change(category, { target: { value: "Extra" } });
+
+    expect(onCategorize).toHaveBeenCalledWith("10", "Extra");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/new-wo-wizard-duplicate.test.tsx b/src/test/app/(protected)/workorders/new-wo-wizard-duplicate.test.tsx
new file mode 100644
index 00000000..02a1fa6c
--- /dev/null
+++ b/src/test/app/(protected)/workorders/new-wo-wizard-duplicate.test.tsx
@@ -0,0 +1,91 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { NewWoWizard } from "@/app/(protected)/workorders/_components/wizard/new-wo-wizard";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+const existingRow = { id: "wo-99", woNumber: "12345678901" } as WorkOrderTableRow;
+const findByWoNumber = vi.fn();
+
+vi.mock("@/domain/work-orders/use-cases/use-create-work-order-from-wizard", () => ({
+  useCreateWorkOrderFromWizard: () => ({
+    mutate: vi.fn(),
+    isPending: false,
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderVendors: () => ({ data: [] }),
+}));
+
+vi.mock("@/domain/locations/use-cases/use-location-sites", () => ({
+  useLocationSites: () => ({ data: [] }),
+}));
+
+vi.mock("@/domain/locations/use-cases/use-location-detail", () => ({
+  useLocationDetail: () => ({ data: undefined }),
+}));
+
+vi.mock("@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category", () => ({
+  useDropdownOptionsByCategory: () => ({ data: [] }),
+}));
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    findByWoNumber: (...args: unknown[]) => findByWoNumber(...args),
+  },
+}));
+
+describe("NewWoWizard duplicate wo number", () => {
+  it("shows the duplicate dialog when the wizard wo number matches an existing row", async () => {
+    renderWithProviders(
+      <NewWoWizard
+        open
+        onOpenChange={vi.fn()}
+        users={[]}
+        existingRows={[existingRow]}
+        onViewExistingWo={vi.fn()}
+      />,
+    );
+
+    const woNumberInput = screen.getByPlaceholderText("Leave blank for SH provisional number");
+    fireEvent.change(woNumberInput, {
+      target: { value: "12345678901" },
+    });
+    fireEvent.blur(woNumberInput);
+
+    await waitFor(() => {
+      expect(screen.getByText("Duplicate Work Order Number")).toBeInTheDocument();
+    });
+    expect(screen.getByText(/is already assigned to another work order/i)).toBeInTheDocument();
+  });
+
+  it("finds a duplicate outside the loaded board rows", async () => {
+    const offPageRow = {
+      id: "wo-off-page",
+      woNumber: "98765432109",
+    } as WorkOrderTableRow;
+    findByWoNumber.mockResolvedValueOnce(offPageRow);
+
+    renderWithProviders(
+      <NewWoWizard
+        open
+        onOpenChange={vi.fn()}
+        users={[]}
+        existingRows={[]}
+        onViewExistingWo={vi.fn()}
+      />,
+    );
+
+    const woNumberInput = screen.getByPlaceholderText("Leave blank for SH provisional number");
+    fireEvent.change(woNumberInput, {
+      target: { value: "98765432109" },
+    });
+    fireEvent.blur(woNumberInput);
+
+    await waitFor(() => {
+      expect(screen.getByText("Duplicate Work Order Number")).toBeInTheDocument();
+    });
+    expect(findByWoNumber).toHaveBeenCalledWith("98765432109");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/reschedule-counter-pill.test.tsx b/src/test/app/(protected)/workorders/reschedule-counter-pill.test.tsx
new file mode 100644
index 00000000..8f81de8d
--- /dev/null
+++ b/src/test/app/(protected)/workorders/reschedule-counter-pill.test.tsx
@@ -0,0 +1,18 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { RescheduleCounterPill } from "@/app/(protected)/workorders/_components/list/table/cells/wo-counter-pills";
+import { renderWithProviders } from "@/test/test-utils";
+
+describe("RescheduleCounterPill", () => {
+  it("hides the pill when the count is below 2", () => {
+    const { container } = renderWithProviders(<RescheduleCounterPill count={1} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders a purple count pill with history tooltip from originalDate", () => {
+    renderWithProviders(<RescheduleCounterPill count={4} originalDate="2026-05-08" />);
+    const pill = screen.getByLabelText(/Rescheduled 4 times.*Original date: May 8, 2026/i);
+    expect(pill).toHaveStyle({ background: "#f5f3ff", color: "#7c3aed" });
+    expect(pill).toHaveTextContent("4");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/reschedule-notify.test.ts b/src/test/app/(protected)/workorders/reschedule-notify.test.ts
new file mode 100644
index 00000000..241d40e2
--- /dev/null
+++ b/src/test/app/(protected)/workorders/reschedule-notify.test.ts
@@ -0,0 +1,33 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { weekMoveNotify } from "@/app/(protected)/workorders/_components/list/table/reschedule-notify";
+
+const { toast } = vi.hoisted(() => {
+  const notify = Object.assign(
+    vi.fn((_content: unknown, _options?: unknown) => 1),
+    {
+      dismiss: vi.fn(),
+    },
+  );
+  return { toast: notify };
+});
+
+vi.mock("react-toastify", () => ({ toast }));
+
+describe("weekMoveNotify", () => {
+  beforeEach(() => {
+    toast.mockClear();
+    toast.dismiss.mockClear();
+  });
+
+  it("uses the AAP Unscheduled message and Advanced Filters action when clearing", () => {
+    weekMoveNotify("", { onNavigate: vi.fn() });
+
+    const content = toast.mock.calls[0][0] as {
+      props: { message: string; linkLabel: string };
+    };
+    expect(content.props).toMatchObject({
+      message: "Work order moved to Unscheduled.",
+      linkLabel: "View in Advanced Filters.",
+    });
+  });
+});
diff --git a/src/test/app/(protected)/workorders/resolve-technician-key.test.ts b/src/test/app/(protected)/workorders/resolve-technician-key.test.ts
new file mode 100644
index 00000000..c2d2bce3
--- /dev/null
+++ b/src/test/app/(protected)/workorders/resolve-technician-key.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { resolveTechnicianKey } from "@/app/(protected)/workorders/_components/list/table/cells/resolve-technician-key";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+
+const vendors: VendorDropdownItem[] = [
+  {
+    id: 10,
+    companyName: "Gateway Plumbing",
+    contactName: "Jordan Lee",
+    tradeSpecialties: "Plumbing",
+    address: "1 Main St",
+    distanceMiles: 4.2,
+    email: "dispatch@gateway.test",
+  },
+  {
+    id: 11,
+    companyName: "Gateway Plumbing",
+    contactName: "Adam Whyte",
+    tradeSpecialties: "Plumbing",
+    address: "1 Main St",
+    distanceMiles: 4.2,
+    email: "dispatch@gateway.test",
+  },
+];
+
+describe("resolveTechnicianKey", () => {
+  it("prefers a stable vendorId when it exists in the list", () => {
+    expect(resolveTechnicianKey(11, "Jordan Lee", "Gateway Plumbing", vendors)).toBe("11");
+  });
+
+  it("falls back to name+company when vendorId is missing", () => {
+    expect(resolveTechnicianKey("", "Jordan Lee", "Gateway Plumbing", vendors)).toBe("10");
+  });
+
+  it("keeps orphan tech string as key when no vendor matches", () => {
+    expect(resolveTechnicianKey("", "Unknown Tech", "Gateway Plumbing", vendors)).toBe(
+      "Unknown Tech",
+    );
+  });
+
+  it("keeps vendorId when the vendors list is still empty", () => {
+    expect(resolveTechnicianKey(42, "Jordan Lee", "Gateway Plumbing", [])).toBe("42");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/save-existing-row-type.test.ts b/src/test/app/(protected)/workorders/save-existing-row-type.test.ts
new file mode 100644
index 00000000..86b6020c
--- /dev/null
+++ b/src/test/app/(protected)/workorders/save-existing-row-type.test.ts
@@ -0,0 +1,64 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const toastWarn = vi.fn();
+
+vi.mock("react-toastify", () => ({
+  toast: { warn: (...args: unknown[]) => toastWarn(...args) },
+}));
+
+import { saveExistingRowType } from "@/app/(protected)/workorders/_components/list/table/save-existing-row-type";
+
+const row = { id: 7, woNumber: "00000024965", severity: 3 as const };
+
+describe("saveExistingRowType", () => {
+  beforeEach(() => {
+    toastWarn.mockReset();
+  });
+
+  it("warns when severity newly enters SEV 1 only after persist onSuccess", () => {
+    const onPatch = vi.fn();
+
+    saveExistingRowType(onPatch, row, "Emergency", 1);
+
+    expect(toastWarn).not.toHaveBeenCalled();
+    expect(onPatch).toHaveBeenCalledWith(
+      7,
+      { type: "Emergency", severity: 1 },
+      expect.objectContaining({ onSuccess: expect.any(Function) }),
+    );
+
+    const { onSuccess } = onPatch.mock.calls[0]![2] as { onSuccess: () => void };
+    onSuccess();
+    expect(toastWarn).toHaveBeenCalledWith("WO #00000024965 escalated to SEV 1.");
+  });
+
+  it("does not warn when staying on a critical severity", () => {
+    const onPatch = vi.fn();
+
+    saveExistingRowType(onPatch, { ...row, severity: 1 }, "Emergency", 1);
+
+    expect(toastWarn).not.toHaveBeenCalled();
+    expect(onPatch).toHaveBeenCalledWith(7, { type: "Emergency", severity: 1 });
+    expect(onPatch.mock.calls[0]![2]).toBeUndefined();
+  });
+
+  it("does not warn when moving between SEV 3–5", () => {
+    const onPatch = vi.fn();
+
+    saveExistingRowType(onPatch, { ...row, severity: 5 }, "Reactive", 3);
+
+    expect(toastWarn).not.toHaveBeenCalled();
+    expect(onPatch).toHaveBeenCalledWith(7, { type: "Reactive", severity: 3 });
+    expect(onPatch.mock.calls[0]![2]).toBeUndefined();
+  });
+
+  it("does not warn when clearing severity on a PM correction", () => {
+    const onPatch = vi.fn();
+
+    saveExistingRowType(onPatch, { ...row, severity: 2 }, "PM", null);
+
+    expect(toastWarn).not.toHaveBeenCalled();
+    expect(onPatch).toHaveBeenCalledWith(7, { type: "PM", severity: null });
+    expect(onPatch.mock.calls[0]![2]).toBeUndefined();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/service-picker-search-placeholder.test.tsx b/src/test/app/(protected)/workorders/service-picker-search-placeholder.test.tsx
new file mode 100644
index 00000000..7a2d7fa1
--- /dev/null
+++ b/src/test/app/(protected)/workorders/service-picker-search-placeholder.test.tsx
@@ -0,0 +1,56 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WizardStepLocationServiceSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-step-location-service-select";
+import { PmTypePickerPopover } from "@/app/(protected)/workorders/_components/list/table/cells/pm-type-picker-popover";
+import {
+  EMPTY_WIZARD_DRAFT,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+
+describe("service picker search placeholder", () => {
+  it("uses a type-neutral search placeholder in the wizard service picker", () => {
+    const draft: WorkOrderWizardDraft = { ...EMPTY_WIZARD_DRAFT, pm: "" };
+
+    render(
+      <WizardStepLocationServiceSelect
+        draft={draft}
+        services={[
+          { id: "1", value: "HVAC" },
+          { id: "2", value: "Plumbing" },
+        ]}
+        svcOpen={false}
+        onSvcOpenChange={vi.fn()}
+        svcSearch=""
+        onSvcSearchChange={vi.fn()}
+        onUpdate={vi.fn()}
+        onPatch={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /select service/i }));
+
+    expect(screen.getByPlaceholderText("Search services…")).toBeTruthy();
+    expect(screen.queryByPlaceholderText("Search PM type…")).toBeNull();
+  });
+
+  it("uses a type-neutral search placeholder in the table service picker popover", () => {
+    const anchor = document.createElement("button");
+
+    render(
+      <PmTypePickerPopover
+        anchorEl={anchor}
+        search=""
+        filtered={["HVAC", "Plumbing"]}
+        value=""
+        showAddDetails={false}
+        onSearchChange={vi.fn()}
+        onClose={vi.fn()}
+        onPick={vi.fn()}
+        onAddDetails={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByPlaceholderText("Search service…")).toBeTruthy();
+    expect(screen.queryByPlaceholderText("Search PM type…")).toBeNull();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/severity-badge.test.tsx b/src/test/app/(protected)/workorders/severity-badge.test.tsx
new file mode 100644
index 00000000..2beb69ef
--- /dev/null
+++ b/src/test/app/(protected)/workorders/severity-badge.test.tsx
@@ -0,0 +1,47 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { SeverityBadge } from "@/app/(protected)/workorders/_components/list/table/cells/severity-badge";
+
+describe("SeverityBadge", () => {
+  it("shows description, Accept/Respond deadline, and after-hours on hover", async () => {
+    const user = userEvent.setup();
+    render(<SeverityBadge severity={1} />);
+
+    await user.hover(screen.getByText("SEV 1"));
+
+    const tooltip = await screen.findByRole("tooltip");
+    expect(tooltip).toHaveTextContent(
+      "Business Critical Function Down · Accept: 15 min · Respond: 2 hrs · After hours: Yes",
+    );
+    expect(tooltip).not.toHaveTextContent(/Quote|Tech Notes|Invoice|Turnaround/i);
+
+    await user.unhover(screen.getByText("SEV 1"));
+    await waitFor(() => expect(screen.queryByRole("tooltip")).not.toBeInTheDocument());
+  });
+
+  it("transcribes the SEV table row for the given severity", async () => {
+    const user = userEvent.setup();
+    render(<SeverityBadge severity={3} />);
+
+    await user.hover(screen.getByText("SEV 3"));
+
+    expect(await screen.findByRole("tooltip")).toHaveTextContent(
+      "Group Productivity Impaired · Accept: 2 hrs · Respond: 8 hrs (next day if after hours) · After hours: Approval required",
+    );
+  });
+
+  it("is a button only when it can reopen the severity control", async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    const { rerender } = render(<SeverityBadge severity={2} />);
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+
+    rerender(<SeverityBadge severity={2} onClick={onClick} />);
+    const badge = screen.getByRole("button");
+    expect(badge).toHaveTextContent("SEV 2");
+    await user.click(badge);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/slide-over-audit-list-assignment.test.tsx b/src/test/app/(protected)/workorders/slide-over-audit-list-assignment.test.tsx
new file mode 100644
index 00000000..7a3ff063
--- /dev/null
+++ b/src/test/app/(protected)/workorders/slide-over-audit-list-assignment.test.tsx
@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SlideOverAuditList } from "@/app/(protected)/workorders/_components/detail/slide-over-audit-list";
+import type { WorkOrderAuditEntry } from "@/domain/work-orders/types/work-order";
+
+const ACTOR = { id: "actor-1", name: "Alex Dispatcher" };
+
+function assignmentEntry(overrides: Partial<WorkOrderAuditEntry> = {}): WorkOrderAuditEntry {
+  return {
+    id: "a1",
+    fieldName: "AssignTo",
+    oldValue: "Unassigned",
+    newValue: "Morgan Blake",
+    action: "AssignmentChanged",
+    createdAt: "2026-06-01T13:10:00.000Z",
+    userName: "",
+    type: "manual",
+    dispatcherId: ACTOR.id,
+    ...overrides,
+  };
+}
+
+describe("SlideOverAuditList assignment actor", () => {
+  it("names who changed Assigned To from dispatcherId on the users list", () => {
+    render(<SlideOverAuditList entries={[assignmentEntry()]} users={[ACTOR]} />);
+
+    expect(screen.getByText("Alex Dispatcher")).toBeInTheDocument();
+    expect(screen.getByText('Changed Assigned To to "Morgan Blake"')).toBeInTheDocument();
+  });
+
+  it("falls back to userName when dispatcherId is not in the users list", () => {
+    render(
+      <SlideOverAuditList
+        entries={[assignmentEntry({ dispatcherId: "missing", userName: "Pat Scheduler" })]}
+        users={[ACTOR]}
+      />,
+    );
+
+    expect(screen.getByText("Pat Scheduler")).toBeInTheDocument();
+    expect(screen.getByText('Changed Assigned To to "Morgan Blake"')).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/slide-over-audit-list-timestamp.test.tsx b/src/test/app/(protected)/workorders/slide-over-audit-list-timestamp.test.tsx
new file mode 100644
index 00000000..ac8d7393
--- /dev/null
+++ b/src/test/app/(protected)/workorders/slide-over-audit-list-timestamp.test.tsx
@@ -0,0 +1,54 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SlideOverAuditList } from "@/app/(protected)/workorders/_components/detail/slide-over-audit-list";
+import type { WorkOrderAuditEntry } from "@/domain/work-orders/types/work-order";
+
+function statusEntry(overrides: Partial<WorkOrderAuditEntry> = {}): WorkOrderAuditEntry {
+  return {
+    id: "s1",
+    fieldName: "LifecycleStatus",
+    oldValue: "Pending",
+    newValue: "En Route",
+    action: "StatusChanged",
+    createdAt: "2026-09-15T19:42:00",
+    userName: "Alex Dispatcher",
+    type: "manual",
+    ...overrides,
+  };
+}
+
+describe("SlideOverAuditList timestamps (SH-361)", () => {
+  it("shows the date as well as the time on a manual status change", () => {
+    render(<SlideOverAuditList entries={[statusEntry()]} />);
+
+    expect(screen.getByText('Changed status from "Pending" to "En Route"')).toBeInTheDocument();
+    expect(screen.getByText(/^\d{2}\/\d{2}\/2026 · 7:42 PM$/)).toBeInTheDocument();
+  });
+
+  it("renders a type correction with its previous value (SH-363)", () => {
+    render(
+      <SlideOverAuditList
+        entries={[
+          statusEntry({
+            id: "t1",
+            action: "FieldChanged",
+            fieldName: "WorkOrderType",
+            oldValue: "PM",
+            newValue: "Reactive",
+          }),
+          statusEntry({
+            id: "t2",
+            action: "FieldChanged",
+            fieldName: "Severity",
+            oldValue: "3",
+            newValue: "",
+          }),
+        ]}
+      />,
+    );
+
+    expect(screen.getByText('Changed Type from "PM" to "Reactive"')).toBeInTheDocument();
+    expect(screen.getByText('Changed Severity from "SEV 3" to "—"')).toBeInTheDocument();
+    expect(screen.queryByText("FieldChanged")).toBeNull();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/slide-over-audit-tab-assignment.test.tsx b/src/test/app/(protected)/workorders/slide-over-audit-tab-assignment.test.tsx
new file mode 100644
index 00000000..0549bb2a
--- /dev/null
+++ b/src/test/app/(protected)/workorders/slide-over-audit-tab-assignment.test.tsx
@@ -0,0 +1,47 @@
+import { screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { SlideOverAuditTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-audit-tab";
+import type { WorkOrderAuditEntry } from "@/domain/work-orders/types/work-order";
+import { renderWithProviders } from "@/test/test-utils";
+
+const fetchUsers = vi.fn();
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    fetchUsers: (...args: unknown[]) => fetchUsers(...args),
+  },
+}));
+
+const DISPATCHER = { id: "d1", name: "Alex Dispatcher" };
+const SCHEDULER = { id: "s1", name: "Pat Scheduler" };
+
+const entry: WorkOrderAuditEntry = {
+  id: "a1",
+  fieldName: "AssignTo",
+  oldValue: "Unassigned",
+  newValue: "Morgan Blake",
+  action: "AssignmentChanged",
+  createdAt: "2026-06-01T13:10:00.000Z",
+  userName: "",
+  type: "manual",
+  dispatcherId: SCHEDULER.id,
+};
+
+describe("SlideOverAuditTab assignment actor", () => {
+  beforeEach(() => {
+    fetchUsers.mockReset();
+    fetchUsers.mockResolvedValue([SCHEDULER]);
+  });
+
+  it("names a scheduler actor who is not on the dispatcher lookup", async () => {
+    renderWithProviders(<SlideOverAuditTab entries={[entry]} users={[DISPATCHER]} />, {
+      withAuth: false,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("Pat Scheduler")).toBeInTheDocument();
+    });
+    expect(screen.getByText('Changed Assigned To to "Morgan Blake"')).toBeInTheDocument();
+    expect(screen.queryByText("s1")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/slide-over-completed-comments-extras.test.tsx b/src/test/app/(protected)/workorders/slide-over-completed-comments-extras.test.tsx
new file mode 100644
index 00000000..1e4b45d7
--- /dev/null
+++ b/src/test/app/(protected)/workorders/slide-over-completed-comments-extras.test.tsx
@@ -0,0 +1,97 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SlideOverCommentsTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-comments-tab";
+import { SlideOverExtrasTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab";
+import {
+  canMutateWorkOrderComments,
+  canMutateWorkOrderExtraDocs,
+} from "@/domain/work-orders/utils/work-order-lock";
+import { renderWithProviders } from "@/test/test-utils";
+
+describe("Completed comments and extra docs remain writable", () => {
+  it("shows the comment composer when status is Completed", () => {
+    renderWithProviders(
+      <SlideOverCommentsTab
+        comments={[]}
+        isReadOnly={!canMutateWorkOrderComments("Completed")}
+        isPending={false}
+        onSubmit={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByPlaceholderText("Add comment…")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /post/i })).toBeInTheDocument();
+  });
+
+  it("keeps edit on the author's own comment when status is Completed", () => {
+    renderWithProviders(
+      <SlideOverCommentsTab
+        comments={[
+          {
+            id: 11,
+            createdDate: "2026-07-20T12:00:00Z",
+            commenttext: "Need a flag on this",
+            commentType: "General",
+            userName: "Alex",
+            authorId: "u1",
+            commenter: "Alex",
+            recordType: "WorkOrder",
+          },
+        ]}
+        isReadOnly={!canMutateWorkOrderComments("Completed")}
+        isPending={false}
+        currentUserId="u1"
+        onSubmit={vi.fn()}
+        onUpdateComment={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByRole("button", { name: /edit comment/i })).toBeInTheDocument();
+  });
+
+  it("hides the comment composer when status is Canceled", () => {
+    renderWithProviders(
+      <SlideOverCommentsTab
+        comments={[]}
+        isReadOnly={!canMutateWorkOrderComments("Canceled")}
+        isPending={false}
+        onSubmit={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByPlaceholderText("Add comment…")).not.toBeInTheDocument();
+  });
+
+  it("shows extra-docs upload when status is Completed", () => {
+    renderWithProviders(
+      <SlideOverExtrasTab
+        uploads={[]}
+        isReadOnly={!canMutateWorkOrderExtraDocs("Completed")}
+        pending={false}
+        onUpload={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByText(/upload documents/i)).toBeInTheDocument();
+  });
+
+  it("hides extra-docs upload when status is Canceled", () => {
+    renderWithProviders(
+      <SlideOverExtrasTab
+        uploads={[]}
+        isReadOnly={!canMutateWorkOrderExtraDocs("Canceled")}
+        pending={false}
+        onUpload={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByText(/upload documents/i)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/slide-over-completion-service-gate.test.tsx b/src/test/app/(protected)/workorders/slide-over-completion-service-gate.test.tsx
new file mode 100644
index 00000000..d87162fe
--- /dev/null
+++ b/src/test/app/(protected)/workorders/slide-over-completion-service-gate.test.tsx
@@ -0,0 +1,46 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SlideOverCompletionTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-completion-tab";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+function renderTab(pm: string, onOpenCompletionDoc = vi.fn()) {
+  const row = { id: "1", type: "PM", pm, docStatus: "No", rowVersion: "1" } as WorkOrderTableRow;
+  render(
+    <SlideOverCompletionTab
+      row={row}
+      isReadOnly={false}
+      media={[]}
+      onOpenCompletionDoc={onOpenCompletionDoc}
+    />,
+  );
+  return onOpenCompletionDoc;
+}
+
+describe("SlideOverCompletionTab service gate", () => {
+  it("disables the completion document button until a service is selected", () => {
+    const onOpen = renderTab("  ");
+
+    const button = screen.getByRole("button", { name: /select service/i });
+    expect(button).toBeDisabled();
+    expect(
+      screen.getByText("Select a service before opening the completion document."),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: /open completion document/i }),
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(button);
+    expect(onOpen).not.toHaveBeenCalled();
+  });
+
+  it("opens the completion document when a service is selected", () => {
+    const onOpen = renderTab("HVAC Inspection");
+
+    const button = screen.getByRole("button", { name: /open completion document/i });
+    expect(button).toBeEnabled();
+    expect(screen.queryByText(/select service/i)).not.toBeInTheDocument();
+
+    fireEvent.click(button);
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/slide-over-emergency-due-date.test.tsx b/src/test/app/(protected)/workorders/slide-over-emergency-due-date.test.tsx
new file mode 100644
index 00000000..62cb3d90
--- /dev/null
+++ b/src/test/app/(protected)/workorders/slide-over-emergency-due-date.test.tsx
@@ -0,0 +1,78 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SlideOverInfoTabEditView } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-edit-view";
+import { EMPTY_UPLIFT_SUMMARY } from "@/domain/work-orders/types/work-order-uplift";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+function row(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 1,
+    woNumber: "24871",
+    site: "BK5",
+    type: "Emergency",
+    severity: 1,
+    dispatcherId: "",
+    dispatcherName: "",
+    scheduledOn: "2026-06-16",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "",
+    dayLabel: "",
+    location: "Dallas",
+    locationId: "1",
+    pm: "Scrubber Pit",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "",
+    company: "",
+    tech: "",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "2026-06-16",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    isAddOn: false,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "",
+    dispatchRowVersion: "",
+    flagColor: null,
+    upliftSummary: EMPTY_UPLIFT_SUMMARY,
+    ...overrides,
+  };
+}
+
+describe("slide-over Emergency Due Date", () => {
+  it("opens the dedicated calendar dialog for Emergency", () => {
+    renderWithProviders(
+      <SlideOverInfoTabEditView
+        draft={row()}
+        users={[]}
+        sites={[]}
+        vendors={[]}
+        pmTypes={["Scrubber Pit"]}
+        allOrders={[]}
+        onDraftChange={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Due Date" }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Due Date" })).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/slide-over-extras-aveta-draft.test.tsx b/src/test/app/(protected)/workorders/slide-over-extras-aveta-draft.test.tsx
new file mode 100644
index 00000000..50a808d3
--- /dev/null
+++ b/src/test/app/(protected)/workorders/slide-over-extras-aveta-draft.test.tsx
@@ -0,0 +1,117 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WorkOrderSlideOverTabs } from "@/app/(protected)/workorders/_components/detail/work-order-slide-over-tabs";
+import type { useWorkOrderSlideOver } from "@/app/(protected)/workorders/_components/detail/use-work-order-slide-over";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+type SlideOverState = ReturnType<typeof useWorkOrderSlideOver>;
+
+function baseRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 42,
+    woNumber: "WO-42",
+    site: "SEA1",
+    type: "PM",
+    severity: null,
+    dispatcherId: "u1",
+    dispatcherName: "Dispatcher",
+    scheduledOn: "2026-07-20",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "07/20",
+    dayLabel: "Mon",
+    location: "Seattle",
+    locationId: "loc-1",
+    pm: "HVAC",
+    serviceNotes: "",
+    extraServices: [],
+    company: "Vendor Co",
+    tech: "Tech",
+    techPhone: "",
+    vendorId: "v1",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "PM — SEA1",
+    priority: "Sev 3",
+    primaryDispatchId: null,
+    rowVersion: "v1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    isAddOn: false,
+    avetaRequired: false,
+    upliftSummary: { hasUplift: false, pendingCount: 0 },
+    ...overrides,
+  };
+}
+
+function extrasState(editing: boolean, persisted: boolean, draft: boolean): SlideOverState {
+  return {
+    error: null,
+    detailForRow: undefined,
+    isLoading: false,
+    infoSource: baseRow({ avetaRequired: persisted }),
+    activeDraft: baseRow({ avetaRequired: draft }),
+    showDetailSkeleton: false,
+    errorMessage: "",
+    refetch: vi.fn(),
+    extrasUploads: [],
+    isExtrasReadOnly: true,
+    mediaPending: false,
+    uploadExtraFiles: vi.fn(),
+    removeMedia: vi.fn(),
+    editing,
+  } as unknown as SlideOverState;
+}
+
+function renderExtras(state: SlideOverState) {
+  return renderWithProviders(
+    <WorkOrderSlideOverTabs
+      tab="extras"
+      state={state}
+      users={[]}
+      sites={[]}
+      vendors={[]}
+      pmTypes={[]}
+      allOrders={[]}
+      onOpenCompletionDoc={vi.fn()}
+    />,
+  );
+}
+
+describe("WorkOrderSlideOverTabs Extras Aveta draft", () => {
+  it("shows the Extras Aveta indicator from an unsaved false-to-true draft", () => {
+    renderExtras(extrasState(true, false, true));
+
+    expect(screen.getByText("Extra Documents")).toBeInTheDocument();
+    expect(screen.getByText("Aveta")).toBeInTheDocument();
+  });
+
+  it("hides the Extras Aveta indicator from an unsaved true-to-false draft", () => {
+    renderExtras(extrasState(true, true, false));
+
+    expect(screen.getByText("Extra Documents")).toBeInTheDocument();
+    expect(screen.queryByText("Aveta")).not.toBeInTheDocument();
+  });
+
+  it("keeps the persisted Aveta indicator when not editing", () => {
+    renderExtras(extrasState(false, true, false));
+
+    expect(screen.getByText("Aveta")).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/slide-over-extras-aveta.test.tsx b/src/test/app/(protected)/workorders/slide-over-extras-aveta.test.tsx
new file mode 100644
index 00000000..ba674966
--- /dev/null
+++ b/src/test/app/(protected)/workorders/slide-over-extras-aveta.test.tsx
@@ -0,0 +1,200 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { toast } from "react-toastify";
+import { SlideOverExtrasTab } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import { renderWithProviders } from "@/test/test-utils";
+
+const photo: MediaFile = {
+  id: "m1",
+  name: "safety-form.pdf",
+  fileType: "pdf",
+  url: "blob:1",
+  category: "Report",
+};
+
+const avetaDoc: MediaFile = {
+  id: "m2",
+  name: "aveta-clearance.pdf",
+  fileType: "pdf",
+  url: "blob:2",
+  category: "Aveta",
+};
+
+describe("SlideOverExtrasTab Aveta", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+  it("does not label the first extra document as Aveta when none is explicitly Aveta", () => {
+    renderWithProviders(
+      <SlideOverExtrasTab
+        uploads={[photo]}
+        avetaRequired
+        isReadOnly
+        onUpload={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("safety-form.pdf")).toBeInTheDocument();
+    expect(screen.getAllByText("Aveta")).toHaveLength(1);
+  });
+
+  it("labels only an explicitly Aveta-categorized extra document", () => {
+    renderWithProviders(
+      <SlideOverExtrasTab
+        uploads={[photo, avetaDoc]}
+        avetaRequired
+        isReadOnly
+        onUpload={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("safety-form.pdf")).toBeInTheDocument();
+    expect(screen.getByText("aveta-clearance.pdf")).toBeInTheDocument();
+    expect(screen.getAllByText("Aveta").length).toBeGreaterThanOrEqual(2);
+  });
+
+  it("categorizes an Extra file as Aveta without auto-labeling the first upload", () => {
+    const onCategorize = vi.fn();
+    renderWithProviders(
+      <SlideOverExtrasTab
+        uploads={[photo]}
+        avetaRequired
+        isReadOnly={false}
+        onUpload={vi.fn()}
+        onRemove={vi.fn()}
+        onCategorize={onCategorize}
+      />,
+    );
+
+    fireEvent.change(screen.getByLabelText("Category for safety-form.pdf"), {
+      target: { value: "Aveta" },
+    });
+    expect(onCategorize).toHaveBeenCalledWith("m1", "Aveta");
+    expect(screen.queryByText("safety-form.pdf")).toBeInTheDocument();
+  });
+
+  it("opens Extra Docs through authenticated content instead of a static href", async () => {
+    const blob = new Blob(["pdf"], { type: "application/pdf" });
+    const getMediaContent = vi.spyOn(workOrdersApi, "getMediaContent").mockResolvedValue(blob);
+    const createObjectURL = vi.fn(() => "blob:authorized");
+    vi.stubGlobal("URL", { ...URL, createObjectURL, revokeObjectURL: vi.fn() });
+    const tab = {
+      opener: window,
+      location: { href: "about:blank" },
+      close: vi.fn(),
+    };
+    const open = vi.fn(() => tab);
+    vi.stubGlobal("open", open);
+
+    renderWithProviders(
+      <SlideOverExtrasTab
+        uploads={[{ ...photo, url: "https://cdn.example.com/Assets/Documents/secret.pdf" }]}
+        workOrderId={10}
+        avetaRequired
+        isReadOnly
+        onUpload={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "safety-form.pdf" }));
+
+    await vi.waitFor(() => {
+      expect(getMediaContent).toHaveBeenCalledWith(10, "m1");
+    });
+    expect(createObjectURL).toHaveBeenCalledWith(blob);
+    expect(open).toHaveBeenCalledWith("about:blank", "_blank");
+    expect(tab.opener).toBeNull();
+    expect(tab.location.href).toBe("blob:authorized");
+  });
+
+  it("shows an error when the browser blocks the document tab", async () => {
+    const getMediaContent = vi.spyOn(workOrdersApi, "getMediaContent");
+    const toastError = vi.spyOn(toast, "error").mockImplementation(vi.fn());
+    vi.stubGlobal(
+      "open",
+      vi.fn(() => null),
+    );
+
+    renderWithProviders(
+      <SlideOverExtrasTab
+        uploads={[photo]}
+        workOrderId={10}
+        isReadOnly
+        onUpload={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "safety-form.pdf" }));
+
+    expect(toastError).toHaveBeenCalledWith(
+      "Unable to open this document. Please allow pop-ups and try again.",
+    );
+    expect(getMediaContent).not.toHaveBeenCalled();
+  });
+
+  it("shows Extra Docs accept copy with PDF DOC and 50MB", () => {
+    renderWithProviders(
+      <SlideOverExtrasTab uploads={[]} isReadOnly={false} onUpload={vi.fn()} onRemove={vi.fn()} />,
+    );
+
+    expect(
+      screen.getByText("Accepted: JPG, PNG, MP4, MOV, PDF, DOC · Max 50MB per file"),
+    ).toBeInTheDocument();
+    const input = document.querySelector('input[type="file"]');
+    expect(input?.getAttribute("accept")).toContain(".pdf");
+    expect(input?.getAttribute("accept")).toContain(".doc");
+    expect(input?.getAttribute("accept")).toContain(".docx");
+  });
+
+  it("disables document opening until the work order id is available", () => {
+    renderWithProviders(
+      <SlideOverExtrasTab uploads={[photo]} isReadOnly onUpload={vi.fn()} onRemove={vi.fn()} />,
+    );
+
+    expect(screen.getByRole("button", { name: "safety-form.pdf" })).toBeDisabled();
+  });
+
+  it("labels each extra item with its type and category", () => {
+    const sitePhoto: MediaFile = {
+      id: "m3",
+      name: "site.jpg",
+      fileType: "image",
+      url: "blob:3",
+      category: "Photo",
+      purpose: "Extra",
+    };
+    const walkthrough: MediaFile = {
+      id: "m4",
+      name: "walkthrough.mp4",
+      fileType: "video",
+      url: "blob:4",
+      category: "Video",
+      purpose: "Extra",
+    };
+
+    renderWithProviders(
+      <SlideOverExtrasTab
+        uploads={[sitePhoto, walkthrough, avetaDoc]}
+        isReadOnly
+        onUpload={vi.fn()}
+        onRemove={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("group", { name: "Photo, Extra: site.jpg" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("group", { name: "Video, Extra: walkthrough.mp4" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("group", { name: "PDF, Aveta: aveta-clearance.pdf" }),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/slide-over-footer-completed.test.tsx b/src/test/app/(protected)/workorders/slide-over-footer-completed.test.tsx
new file mode 100644
index 00000000..348fbf48
--- /dev/null
+++ b/src/test/app/(protected)/workorders/slide-over-footer-completed.test.tsx
@@ -0,0 +1,70 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SlideOverFooter } from "@/app/(protected)/workorders/_components/detail/slide-over-footer";
+import { renderWithProviders } from "@/test/test-utils";
+
+const footerHandlers = {
+  onCancelWO: vi.fn(),
+  onCancelEdit: vi.fn(),
+  onClose: vi.fn(),
+  onEdit: vi.fn(),
+  onSave: vi.fn(),
+  onDiscard: vi.fn(),
+  onKeepEditing: vi.fn(),
+};
+
+describe("SlideOverFooter completed lock", () => {
+  it("hides Edit and Cancel WO when the work order is completed", () => {
+    const { container } = renderWithProviders(
+      <SlideOverFooter
+        isCancelled={false}
+        isCompleted
+        editing={false}
+        isDirty={false}
+        showUnsaved={false}
+        {...footerHandlers}
+      />,
+      { withAuth: false },
+    );
+
+    expect(container).toBeEmptyDOMElement();
+    expect(screen.queryByRole("button", { name: /edit wo/i })).not.toBeInTheDocument();
+    expect(screen.queryByText(/cancel wo/i)).not.toBeInTheDocument();
+  });
+
+  it("hides Cancel WO and Save when completed while still in edit mode", () => {
+    const { container } = renderWithProviders(
+      <SlideOverFooter
+        isCancelled={false}
+        isCompleted
+        editing
+        isDirty
+        showUnsaved={false}
+        {...footerHandlers}
+      />,
+      { withAuth: false },
+    );
+
+    expect(container).toBeEmptyDOMElement();
+    expect(screen.queryByText(/cancel wo/i)).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /^save$/i })).not.toBeInTheDocument();
+  });
+
+  it("hides the unsaved Save bar when the work order is completed", () => {
+    const { container } = renderWithProviders(
+      <SlideOverFooter
+        isCancelled={false}
+        isCompleted
+        editing
+        isDirty
+        showUnsaved
+        {...footerHandlers}
+      />,
+      { withAuth: false },
+    );
+
+    expect(container).toBeEmptyDOMElement();
+    expect(screen.queryByText(/unsaved changes/i)).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /^save$/i })).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/slide-over-info-tab-edit-view-additional-contacts.test.tsx b/src/test/app/(protected)/workorders/slide-over-info-tab-edit-view-additional-contacts.test.tsx
new file mode 100644
index 00000000..9ebf754e
--- /dev/null
+++ b/src/test/app/(protected)/workorders/slide-over-info-tab-edit-view-additional-contacts.test.tsx
@@ -0,0 +1,166 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SlideOverInfoTabEditView } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-edit-view";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { expandTablePatchToBoardFieldOps } from "@/domain/work-orders/mappers/work-order-board-patch-mapper";
+import { buildSlideOverPatch } from "@/domain/work-orders/utils/slide-over-draft";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/site-cell", () => ({
+  SiteCell: ({
+    additionalContacts,
+    onSave,
+  }: {
+    additionalContacts?: { name: string; phone: string }[];
+    onSave: (patch: {
+      site: string;
+      location: string;
+      locationId: string;
+      pocName: string;
+      pocPhone: string;
+      pocNotes: string;
+      additionalContacts?: { name: string; phone: string }[];
+    }) => void;
+  }) => (
+    <button
+      type="button"
+      onClick={() =>
+        onSave({
+          site: "SEA1",
+          location: "Seattle",
+          locationId: "loc-1",
+          pocName: "Pat",
+          pocPhone: "111",
+          pocNotes: "",
+          additionalContacts: [{ name: "Backup", phone: "555-0101" }],
+        })
+      }
+    >
+      save site {additionalContacts?.length ?? 0}
+    </button>
+  ),
+}));
+
+vi.mock(
+  "@/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell",
+  () => ({
+    EditableWONumberCell: () => null,
+  }),
+);
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/type-cell", () => ({
+  TypeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell", () => ({
+  AssignedToCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/date-cell", () => ({
+  DateCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/appt-time-cell", () => ({
+  ApptTimeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/pm-type-cell", () => ({
+  PMTypeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/vendor-cell", () => ({
+  VendorCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/status-cell", () => ({
+  StatusCell: () => null,
+}));
+
+function baseRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 42,
+    woNumber: "WO-42",
+    site: "SEA1",
+    type: "PM",
+    severity: null,
+    dispatcherId: "u1",
+    dispatcherName: "Dispatcher",
+    scheduledOn: "2026-07-20",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "07/20",
+    dayLabel: "Mon",
+    location: "Seattle",
+    locationId: "loc-1",
+    pm: "HVAC",
+    serviceNotes: "",
+    extraServices: [],
+    company: "Vendor Co",
+    tech: "Tech",
+    techPhone: "",
+    vendorId: "v1",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    isAddOn: false,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "v1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    ...overrides,
+  };
+}
+
+describe("SlideOverInfoTabEditView additional contacts", () => {
+  it("passes additionalContacts into SiteCell and persists them on save", () => {
+    const onDraftChange = vi.fn();
+    const contacts = [{ name: "Existing", phone: "555-0000" }];
+
+    renderWithProviders(
+      <SlideOverInfoTabEditView
+        draft={baseRow({ additionalContacts: contacts })}
+        users={[]}
+        sites={[]}
+        vendors={[]}
+        pmTypes={[]}
+        allOrders={[]}
+        onDraftChange={onDraftChange}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByText("Appt Time (optional)")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /save site 1/i })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: /save site 1/i }));
+
+    expect(onDraftChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        additionalContacts: [{ name: "Backup", phone: "555-0101" }],
+      }),
+    );
+  });
+
+  it("includes additionalContacts in the slide-over board PATCH ops", () => {
+    const baseline = baseRow();
+    const draft = baseRow({
+      additionalContacts: [{ name: "Backup", phone: "555-0101", notes: "Gate" }],
+    });
+    const patch = buildSlideOverPatch(draft, baseline);
+
+    expect(expandTablePatchToBoardFieldOps(patch)).toEqual([
+      {
+        field: "additionalContacts",
+        value: JSON.stringify([{ name: "Backup", phone: "555-0101", notes: "Gate" }]),
+      },
+    ]);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/slide-over-schedule-range.test.tsx b/src/test/app/(protected)/workorders/slide-over-schedule-range.test.tsx
new file mode 100644
index 00000000..0de9f938
--- /dev/null
+++ b/src/test/app/(protected)/workorders/slide-over-schedule-range.test.tsx
@@ -0,0 +1,166 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SlideOverInfoTabEditView } from "@/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab-edit-view";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { pad2, todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/site-cell", () => ({
+  SiteCell: () => null,
+}));
+vi.mock(
+  "@/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell",
+  () => ({
+    EditableWONumberCell: () => null,
+  }),
+);
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/type-cell", () => ({
+  TypeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell", () => ({
+  AssignedToCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/appt-time-cell", () => ({
+  ApptTimeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/pm-type-cell", () => ({
+  PMTypeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/vendor-cell", () => ({
+  VendorCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/status-cell", () => ({
+  StatusCell: () => null,
+}));
+
+function currentMonthIso(day: number): string {
+  const [y, m] = todayIso().split("-").map(Number);
+  return `${y}-${pad2(m)}-${pad2(day)}`;
+}
+
+function baseRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 42,
+    woNumber: "WO-42",
+    site: "SEA1",
+    type: "PM",
+    severity: null,
+    dispatcherId: "u1",
+    dispatcherName: "Dispatcher",
+    scheduledOn: "",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "",
+    dayLabel: "",
+    location: "Seattle",
+    locationId: "loc-1",
+    pm: "HVAC",
+    serviceNotes: "",
+    extraServices: [],
+    company: "Vendor Co",
+    tech: "Tech",
+    techPhone: "",
+    vendorId: "v1",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Incomplete",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    isAddOn: false,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "v1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    ...overrides,
+  };
+}
+
+describe("SlideOverInfoTabEditView — Schedule On range", () => {
+  it("patches range start/end and schedMode from the DateCell", async () => {
+    const onDraftChange = vi.fn();
+    renderWithProviders(
+      <SlideOverInfoTabEditView
+        draft={baseRow()}
+        users={[]}
+        sites={[]}
+        vendors={[]}
+        pmTypes={[]}
+        allOrders={[]}
+        onDraftChange={onDraftChange}
+      />,
+    );
+
+    const scheduleRow = screen.getByText("Schedule On").closest("div");
+    fireEvent.click(scheduleRow!.querySelector("button")!);
+    fireEvent.click(await screen.findByRole("button", { name: "Range" }));
+    fireEvent.click(screen.getByRole("button", { name: "5" }));
+    fireEvent.click(screen.getByRole("button", { name: "20" }));
+    fireEvent.click(screen.getByRole("button", { name: /^done$/i }));
+
+    expect(onDraftChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        scheduledOn: currentMonthIso(5),
+        scheduleEnd: currentMonthIso(20),
+        schedMode: "range",
+        scheduleWeekOnly: false,
+        targetWeek: "",
+      }),
+    );
+  }, 10_000);
+
+  it("clears every schedule field in the draft", async () => {
+    const onDraftChange = vi.fn();
+    renderWithProviders(
+      <SlideOverInfoTabEditView
+        draft={baseRow({
+          scheduledOn: currentMonthIso(5),
+          scheduleEnd: currentMonthIso(20),
+          schedMode: "range",
+          scheduleWeekOnly: false,
+          targetWeek: currentMonthIso(1),
+          dayGroup: "09/05",
+          dayLabel: "Sat",
+          isPastDue: true,
+          status: "Scheduled",
+        })}
+        users={[]}
+        sites={[]}
+        vendors={[]}
+        pmTypes={[]}
+        allOrders={[]}
+        onDraftChange={onDraftChange}
+      />,
+    );
+
+    const scheduleRow = screen.getByText("Schedule On").closest("div");
+    fireEvent.click(scheduleRow!.querySelector("button")!);
+    fireEvent.click(await screen.findByRole("button", { name: /clear/i }));
+
+    expect(onDraftChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        scheduledOn: "",
+        scheduleWeekOnly: false,
+        targetWeek: "",
+        scheduleEnd: "",
+        schedMode: undefined,
+        dayGroup: "",
+        dayLabel: "",
+        isPastDue: false,
+      }),
+    );
+  });
+});
diff --git a/src/test/app/(protected)/workorders/status-cell-closability.test.tsx b/src/test/app/(protected)/workorders/status-cell-closability.test.tsx
new file mode 100644
index 00000000..7f42d257
--- /dev/null
+++ b/src/test/app/(protected)/workorders/status-cell-closability.test.tsx
@@ -0,0 +1,119 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { StatusCell } from "@/app/(protected)/workorders/_components/list/table/cells/status-cell";
+import type { WizardWOStatus } from "@/domain/work-orders/types/work-order-wizard";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const incompleteRow = {
+  id: "wo-1",
+  status: "Scheduled",
+  dispatcherId: "",
+  dispatcherName: "",
+  company: "",
+  vendorId: "",
+  tech: "",
+  completedDate: "",
+  woNumber: "",
+  pm: "",
+  docStatus: "",
+  mediaCount: 0,
+  type: "PM",
+} as WorkOrderTableRow;
+
+describe("StatusCell closability gate", () => {
+  it("does not submit Completed when required work-order data is missing", () => {
+    const onChangeStatus = vi.fn();
+
+    render(
+      <StatusCell wo={incompleteRow} onChangeStatus={onChangeStatus} onOpenSlideOver={vi.fn()} />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /scheduled/i }));
+    const completed = screen.getByRole("button", { name: /^completed$/i });
+
+    expect(completed.hasAttribute("disabled")).toBe(true);
+    expect(completed.getAttribute("title") ?? "").toContain("Fill in");
+    fireEvent.click(completed);
+    expect(onChangeStatus).not.toHaveBeenCalledWith("Completed");
+  });
+
+  it("does not offer Canceled", () => {
+    render(<StatusCell wo={incompleteRow} onChangeStatus={vi.fn()} onOpenSlideOver={vi.fn()} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /scheduled/i }));
+    expect(screen.queryByRole("button", { name: /^canceled$/i })).toBeNull();
+  });
+
+  it.each<WizardWOStatus>([
+    "Pending",
+    "En Route",
+    "On Site",
+    "In Progress",
+    "Rescheduled",
+    "Pending Quote",
+  ])("offers only manual transitions away from %s (SH-357, SH-358)", (current) => {
+    const onChangeStatus = vi.fn();
+    render(
+      <StatusCell
+        wo={{ ...incompleteRow, status: current, scheduledOn: "2026-06-01" }}
+        onChangeStatus={onChangeStatus}
+        onOpenSlideOver={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: new RegExp(current, "i") }));
+    const offered = Array.from(document.querySelectorAll(".MuiPopover-paper button")).map(
+      (button) => button.textContent?.trim(),
+    );
+
+    expect(offered).not.toContain("Incomplete");
+    expect(offered).not.toContain("Scheduled");
+    expect(offered).not.toContain("Past Due");
+    expect(offered).not.toContain("Canceled");
+    expect(offered).not.toContain(current);
+    expect(offered).toEqual(
+      [
+        "Pending",
+        "En Route",
+        "On Site",
+        "In Progress",
+        "Completed",
+        "Rescheduled",
+        "Pending Quote",
+      ].filter((status) => status !== current),
+    );
+  });
+
+  it("offers every manual status, and no automatic one, from Incomplete or Scheduled", () => {
+    for (const current of ["Incomplete", "Scheduled"] as const) {
+      const { unmount } = render(
+        <StatusCell
+          wo={{ ...incompleteRow, status: current }}
+          onChangeStatus={vi.fn()}
+          onOpenSlideOver={vi.fn()}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: new RegExp(current, "i") }));
+      expect(screen.getByRole("button", { name: /^pending$/i })).toBeTruthy();
+      expect(screen.queryByRole("button", { name: /^incomplete$/i })).toBeNull();
+      expect(screen.queryByRole("button", { name: /^scheduled$/i })).toBeNull();
+      unmount();
+    }
+  });
+
+  it("limits creation options to Incomplete, Pending, and Scheduled", () => {
+    render(
+      <StatusCell
+        wo={{ ...incompleteRow, status: "Incomplete" }}
+        statusOptions={["Incomplete", "Pending", "Scheduled"]}
+        onChangeStatus={vi.fn()}
+        onOpenSlideOver={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /incomplete/i }));
+    expect(screen.getByRole("button", { name: /^pending$/i })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /^en route$/i })).toBeNull();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/status-cell-past-due-copy.test.tsx b/src/test/app/(protected)/workorders/status-cell-past-due-copy.test.tsx
new file mode 100644
index 00000000..f55a67ea
--- /dev/null
+++ b/src/test/app/(protected)/workorders/status-cell-past-due-copy.test.tsx
@@ -0,0 +1,41 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { StatusCell } from "@/app/(protected)/workorders/_components/list/table/cells/status-cell";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const pastDueRow = {
+  id: "wo-1",
+  status: "Scheduled",
+  dispatcherId: "",
+  dispatcherName: "",
+  company: "",
+  vendorId: "",
+  tech: "",
+  completedDate: "",
+  woNumber: "",
+  pm: "",
+  docStatus: "",
+  mediaCount: 0,
+  type: "PM",
+  isPastDue: true,
+  scheduledOn: "2026-06-01",
+  dueDate: "2026-08-01",
+} as WorkOrderTableRow;
+
+describe("StatusCell Past Due copy", () => {
+  it("directs the dispatcher to update Schedule On, not Due Date", () => {
+    render(<StatusCell wo={pastDueRow} onChangeStatus={vi.fn()} onOpenSlideOver={vi.fn()} />);
+
+    const trigger = screen.getByRole("button", { name: /past due/i });
+    expect(trigger.getAttribute("title") ?? "").toContain("Reschedule to unlock status updates");
+    expect(trigger.getAttribute("title") ?? "").not.toMatch(/due date/i);
+
+    fireEvent.click(trigger);
+
+    expect(
+      screen.getByText(/a new date must be scheduled before the status can be updated/i),
+    ).toBeTruthy();
+    expect(screen.getByRole("button", { name: /reschedule/i })).toBeTruthy();
+    expect(screen.queryByText(/due date/i)).toBeNull();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/status-cell-pending-uplift.test.tsx b/src/test/app/(protected)/workorders/status-cell-pending-uplift.test.tsx
new file mode 100644
index 00000000..69b76209
--- /dev/null
+++ b/src/test/app/(protected)/workorders/status-cell-pending-uplift.test.tsx
@@ -0,0 +1,328 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { StatusCell } from "@/app/(protected)/workorders/_components/list/table/cells/status-cell";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+function makeRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 1,
+    woNumber: "1001",
+    site: "BK5",
+    type: "PM",
+    severity: null,
+    dispatcherId: "u1",
+    dispatcherName: "Alex",
+    scheduledOn: "2026-07-15",
+    completedDate: "2026-07-20",
+    targetWeek: "2026-07-15",
+    dayGroup: "07/15",
+    dayLabel: "Tue",
+    location: "Lobby",
+    locationId: "loc-1",
+    pm: "HVAC",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "7",
+    company: "Acme",
+    tech: "Sam",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "In Progress",
+    docStatus: "Yes",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    isAddOn: false,
+    mediaCount: 1,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "",
+    dispatchRowVersion: "",
+    flagColor: null,
+    additionalContacts: [],
+    ...overrides,
+  };
+}
+
+describe("StatusCell pending uplift closability", () => {
+  it("disables Completed with tooltip when uplift is pending", () => {
+    const onChangeStatus = vi.fn();
+
+    renderWithProviders(
+      <StatusCell
+        wo={makeRow({ hasPendingUplift: true })}
+        onChangeStatus={onChangeStatus}
+        onOpenSlideOver={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /in progress/i }));
+
+    const completed = screen.getByRole("button", { name: /completed/i });
+    expect(completed).toBeDisabled();
+    expect(completed).toHaveAttribute(
+      "title",
+      "This work order has an uplift pending approval and cannot be completed.",
+    );
+
+    fireEvent.click(completed);
+    expect(onChangeStatus).not.toHaveBeenCalled();
+  });
+
+  it("disables Completed with tooltip when board pendingUpliftCount maps to pending", () => {
+    const onChangeStatus = vi.fn();
+
+    renderWithProviders(
+      <StatusCell
+        wo={makeRow({
+          hasPendingUplift: true,
+          upliftSummary: { hasUplift: true, pendingCount: 1 },
+        })}
+        onChangeStatus={onChangeStatus}
+        onOpenSlideOver={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /in progress/i }));
+
+    const completed = screen.getByRole("button", { name: /completed/i });
+    expect(completed).toBeDisabled();
+    expect(completed).toHaveAttribute(
+      "title",
+      "This work order has an uplift pending approval and cannot be completed.",
+    );
+  });
+
+  it("does not patch Completed when confirmation callback is omitted", () => {
+    const onChangeStatus = vi.fn();
+
+    renderWithProviders(
+      <StatusCell wo={makeRow()} onChangeStatus={onChangeStatus} onOpenSlideOver={vi.fn()} />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /in progress/i }));
+    fireEvent.click(screen.getByRole("button", { name: /completed/i }));
+
+    expect(onChangeStatus).not.toHaveBeenCalled();
+  });
+
+  it("allows Completed when no pending uplift", () => {
+    const onChangeStatus = vi.fn();
+    const onRequestComplete = vi.fn();
+
+    renderWithProviders(
+      <StatusCell
+        wo={makeRow()}
+        onChangeStatus={onChangeStatus}
+        onOpenSlideOver={vi.fn()}
+        onRequestComplete={onRequestComplete}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /in progress/i }));
+    fireEvent.click(screen.getByRole("button", { name: /completed/i }));
+
+    expect(onRequestComplete).toHaveBeenCalled();
+    expect(onChangeStatus).not.toHaveBeenCalled();
+  });
+
+  it("disables Completed when company is missing", () => {
+    const onChangeStatus = vi.fn();
+
+    renderWithProviders(
+      <StatusCell
+        wo={makeRow({ company: "", vendorId: "" })}
+        onChangeStatus={onChangeStatus}
+        onOpenSlideOver={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /in progress/i }));
+
+    const completed = screen.getByRole("button", { name: /completed/i });
+    expect(completed).toBeDisabled();
+    expect(completed).toHaveAttribute("title", "Fill in Vendor before completing this work order.");
+    fireEvent.click(completed);
+    expect(onChangeStatus).not.toHaveBeenCalled();
+  });
+
+  it("allows Completed when vendorId is set even if company label is empty", () => {
+    const onChangeStatus = vi.fn();
+    const onRequestComplete = vi.fn();
+
+    renderWithProviders(
+      <StatusCell
+        wo={makeRow({ company: "", vendorId: "7", tech: "" })}
+        onChangeStatus={onChangeStatus}
+        onOpenSlideOver={vi.fn()}
+        onRequestComplete={onRequestComplete}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /in progress/i }));
+    fireEvent.click(screen.getByRole("button", { name: /completed/i }));
+
+    expect(onRequestComplete).toHaveBeenCalled();
+    expect(onChangeStatus).not.toHaveBeenCalled();
+  });
+
+  it("allows Completed when vendorId has an empty company label and a live dispatch status", () => {
+    const onChangeStatus = vi.fn();
+    const onRequestComplete = vi.fn();
+
+    renderWithProviders(
+      <StatusCell
+        wo={makeRow({ company: "", vendorId: "7", tech: "", primaryDispatchStatus: "Sent" })}
+        onChangeStatus={onChangeStatus}
+        onOpenSlideOver={vi.fn()}
+        onRequestComplete={onRequestComplete}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /in progress/i }));
+    fireEvent.click(screen.getByRole("button", { name: /completed/i }));
+
+    expect(onRequestComplete).toHaveBeenCalled();
+    expect(onChangeStatus).not.toHaveBeenCalled();
+  });
+
+  it.each(["Cancelled", "Canceled", "Refused"] as const)(
+    "disables Completed when vendorId is leftover from a %s dispatch",
+    (primaryDispatchStatus) => {
+      const onChangeStatus = vi.fn();
+
+      renderWithProviders(
+        <StatusCell
+          wo={makeRow({
+            company: "",
+            vendorId: "45",
+            tech: "",
+            primaryDispatchStatus,
+          })}
+          onChangeStatus={onChangeStatus}
+          onOpenSlideOver={vi.fn()}
+        />,
+        { withAuth: false },
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: /in progress/i }));
+
+      const completed = screen.getByRole("button", { name: /completed/i });
+      expect(completed).toBeDisabled();
+      expect(completed).toHaveAttribute(
+        "title",
+        "Fill in Vendor before completing this work order.",
+      );
+      fireEvent.click(completed);
+      expect(onChangeStatus).not.toHaveBeenCalled();
+    },
+  );
+
+  it("disables Completed when the board omits vendorId after a Refused primary", () => {
+    const onChangeStatus = vi.fn();
+
+    renderWithProviders(
+      <StatusCell
+        wo={makeRow({
+          company: "",
+          vendorId: "",
+          tech: "",
+          primaryDispatchStatus: "Refused",
+        })}
+        onChangeStatus={onChangeStatus}
+        onOpenSlideOver={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /in progress/i }));
+
+    const completed = screen.getByRole("button", { name: /completed/i });
+    expect(completed).toBeDisabled();
+    expect(completed).toHaveAttribute("title", "Fill in Vendor before completing this work order.");
+  });
+
+  it("allows Completed after a vendor patch clears leftover refused status", () => {
+    const onChangeStatus = vi.fn();
+    const onRequestComplete = vi.fn();
+
+    renderWithProviders(
+      <StatusCell
+        wo={makeRow({
+          company: "New Co",
+          vendorId: "9",
+          tech: "Pat",
+          primaryDispatchStatus: "",
+        })}
+        onChangeStatus={onChangeStatus}
+        onOpenSlideOver={vi.fn()}
+        onRequestComplete={onRequestComplete}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /in progress/i }));
+    fireEvent.click(screen.getByRole("button", { name: /completed/i }));
+
+    expect(onRequestComplete).toHaveBeenCalled();
+    expect(onChangeStatus).not.toHaveBeenCalled();
+  });
+
+  it("does not open the status menu when readOnly", () => {
+    const onChangeStatus = vi.fn();
+
+    renderWithProviders(
+      <StatusCell
+        wo={makeRow({ status: "Completed" })}
+        readOnly
+        onChangeStatus={onChangeStatus}
+        onOpenSlideOver={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByLabelText("Status is locked because this work order is completed"));
+
+    expect(screen.queryByRole("button", { name: /scheduled/i })).not.toBeInTheDocument();
+    expect(onChangeStatus).not.toHaveBeenCalled();
+  });
+
+  it("allows Completed when technician is empty if company is set", () => {
+    const onChangeStatus = vi.fn();
+    const onRequestComplete = vi.fn();
+
+    renderWithProviders(
+      <StatusCell
+        wo={makeRow({ tech: "" })}
+        onChangeStatus={onChangeStatus}
+        onOpenSlideOver={vi.fn()}
+        onRequestComplete={onRequestComplete}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /in progress/i }));
+    fireEvent.click(screen.getByRole("button", { name: /completed/i }));
+
+    expect(onRequestComplete).toHaveBeenCalled();
+    expect(onChangeStatus).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/type-cell.test.tsx b/src/test/app/(protected)/workorders/type-cell.test.tsx
new file mode 100644
index 00000000..f7844681
--- /dev/null
+++ b/src/test/app/(protected)/workorders/type-cell.test.tsx
@@ -0,0 +1,113 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { TypeCell } from "@/app/(protected)/workorders/_components/list/table/cells/type-cell";
+
+describe("TypeCell", () => {
+  it("shows the AAP empty placeholder", () => {
+    render(<TypeCell value="" onSave={vi.fn()} />);
+    expect(screen.getByRole("button", { name: "Select type of WO" })).toBeInTheDocument();
+  });
+
+  it("lists PM, Reactive, Emergency, and Overdue in the popover", async () => {
+    const user = userEvent.setup();
+    render(<TypeCell value="PM" onSave={vi.fn()} />);
+
+    await user.click(screen.getByRole("button", { name: "Type of WO, PM" }));
+
+    expect(screen.getByRole("button", { name: /^Reactive$/ })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /^Emergency$/ })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /^Overdue$/ })).toBeInTheDocument();
+  });
+
+  it("saves PM from the popover without opening the modal", async () => {
+    const onSave = vi.fn();
+    const user = userEvent.setup();
+    render(<TypeCell value="Emergency" severity={2} onSave={onSave} />);
+
+    await user.click(screen.getByRole("button", { name: "Type of WO, Emergency" }));
+    await user.click(screen.getByRole("button", { name: /^PM$/ }));
+
+    expect(onSave).toHaveBeenCalledWith("PM", null);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("opens Type & severity when changing PM to Emergency and saves after SEV", async () => {
+    const onSave = vi.fn();
+    const user = userEvent.setup();
+    render(<TypeCell value="PM" onSave={onSave} />);
+
+    await user.click(screen.getByRole("button", { name: "Type of WO, PM" }));
+    await user.click(screen.getByRole("button", { name: /^Emergency$/ }));
+
+    expect(onSave).not.toHaveBeenCalled();
+    expect(screen.getByRole("dialog", { name: /Type & severity/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: /SEV 1/ }));
+    await user.click(screen.getByRole("button", { name: /^Save$/ }));
+
+    expect(onSave).toHaveBeenCalledWith("Emergency", 1);
+  });
+
+  it("does not save when Cancel is clicked on the modal", async () => {
+    const onSave = vi.fn();
+    const user = userEvent.setup();
+    render(<TypeCell value="PM" onSave={onSave} />);
+
+    await user.click(screen.getByRole("button", { name: "Type of WO, PM" }));
+    await user.click(screen.getByRole("button", { name: /^Emergency$/ }));
+    await user.click(screen.getByRole("button", { name: /^Cancel$/ }));
+
+    expect(onSave).not.toHaveBeenCalled();
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("clears previous severity when switching Emergency to Reactive", async () => {
+    const onSave = vi.fn();
+    const user = userEvent.setup();
+    render(<TypeCell value="Emergency" severity={3} onSave={onSave} />);
+
+    await user.click(screen.getByRole("button", { name: "Type of WO, Emergency" }));
+    await user.click(screen.getByRole("button", { name: /^Reactive$/ }));
+
+    expect(onSave).not.toHaveBeenCalled();
+    const save = screen.getByRole("button", { name: /^Save$/ });
+    expect(save).toBeDisabled();
+
+    await user.click(screen.getByRole("button", { name: /SEV 4/ }));
+    await user.click(save);
+
+    expect(onSave).toHaveBeenCalledWith("Reactive", 4);
+  });
+
+  it("does not open the picker or severity modal when viewOnly", async () => {
+    const onSave = vi.fn();
+    const user = userEvent.setup();
+    render(<TypeCell value="Emergency" severity={2} viewOnly onSave={onSave} />);
+
+    expect(screen.queryByRole("button", { name: "Type of WO, Emergency" })).not.toBeInTheDocument();
+    expect(screen.getByText("Emergency")).toBeInTheDocument();
+    expect(screen.getByText("SEV 2")).toBeInTheDocument();
+
+    await user.click(screen.getByText("Emergency"));
+    await user.click(screen.getByText("SEV 2"));
+
+    expect(screen.queryByRole("button", { name: /^Reactive$/ })).not.toBeInTheDocument();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it("opens the modal from the severity badge", async () => {
+    const onSave = vi.fn();
+    const user = userEvent.setup();
+    render(<TypeCell value="Emergency" severity={2} onSave={onSave} />);
+
+    await user.click(screen.getByText("SEV 2"));
+
+    expect(screen.getByRole("dialog", { name: /Type & severity/i })).toBeInTheDocument();
+    expect(onSave).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-comp-doc-dialog-address-seed.test.tsx b/src/test/app/(protected)/workorders/use-comp-doc-dialog-address-seed.test.tsx
new file mode 100644
index 00000000..3635974c
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-comp-doc-dialog-address-seed.test.tsx
@@ -0,0 +1,197 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { ReactNode } from "react";
+import { useCompDocDialog } from "@/app/(protected)/workorders/_hooks/use-comp-doc-dialog";
+import type { Location } from "@/domain/locations/types/location";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const locationDetailState = vi.hoisted(() => ({
+  data: undefined as Location | undefined,
+}));
+const updateLocation = vi.hoisted(() => vi.fn());
+
+vi.mock("@/domain/locations/use-cases/use-location-detail", () => ({
+  useLocationDetail: () => ({ data: locationDetailState.data }),
+}));
+
+vi.mock("@/domain/locations/api/locations-api", () => ({
+  locationsApi: { update: updateLocation },
+}));
+
+function baseRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  const defaults: WorkOrderTableRow = {
+    id: 42,
+    woNumber: "WO-42",
+    site: "SEA1",
+    type: "PM",
+    severity: null,
+    dispatcherId: "u1",
+    dispatcherName: "Dispatcher",
+    scheduledOn: "2026-06-01",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "",
+    dayLabel: "",
+    location: "Seattle",
+    locationId: "loc-real-1",
+    pm: "HVAC",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "",
+    company: "Vendor Co",
+    tech: "Tech One",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "No",
+    pocName: "Amazon Rep",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "PM — SEA1",
+    priority: "Sev 3",
+    primaryDispatchId: null,
+    rowVersion: "",
+    dispatchRowVersion: "",
+    flagColor: null,
+    isAddOn: false,
+    upliftSummary: { hasUplift: false, pendingCount: 0 },
+  };
+  return {
+    ...defaults,
+    ...overrides,
+    severity: overrides.severity !== undefined ? overrides.severity : defaults.severity,
+  };
+}
+
+function wrapper({ children }: { children: ReactNode }) {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}
+
+describe("useCompDocDialog address seeding", () => {
+  beforeEach(() => {
+    locationDetailState.data = undefined;
+    updateLocation.mockReset();
+  });
+
+  it("seeds address from the first authoritative locationDetail without locking on the empty fallback", async () => {
+    const row = baseRow();
+    const { result, rerender } = renderHook(
+      () =>
+        useCompDocDialog({
+          row,
+          open: true,
+          onSave: vi.fn(),
+        }),
+      { wrapper },
+    );
+
+    expect(result.current.editAddress).toBe("");
+
+    locationDetailState.data = {
+      id: "loc-real-1",
+      name: "SEA1",
+      address: "3811 Distribution Dr",
+      city: "Seattle",
+      state: "WA",
+      zipCode: "98101",
+    } as Location;
+
+    rerender();
+
+    await waitFor(() => {
+      expect(result.current.editAddress).toContain("3811 Distribution Dr");
+    });
+  });
+
+  it("does not overwrite address after the dispatcher edits it", async () => {
+    locationDetailState.data = {
+      id: "loc-real-1",
+      name: "SEA1",
+      address: "3811 Distribution Dr",
+      city: "Seattle",
+      state: "WA",
+      zipCode: "98101",
+    } as Location;
+
+    const row = baseRow();
+    const { result, rerender } = renderHook(
+      () =>
+        useCompDocDialog({
+          row,
+          open: true,
+          onSave: vi.fn(),
+        }),
+      { wrapper },
+    );
+
+    await waitFor(() => {
+      expect(result.current.editAddress).toContain("3811 Distribution Dr");
+    });
+
+    act(() => {
+      result.current.setEditAddress("Dispatcher typed address");
+    });
+
+    locationDetailState.data = {
+      id: "loc-real-1",
+      name: "SEA1",
+      address: "999 Other St",
+      city: "Seattle",
+      state: "WA",
+      zipCode: "98101",
+    } as Location;
+    rerender();
+
+    expect(result.current.editAddress).toBe("Dispatcher typed address");
+  });
+
+  it("does not update the live location when a completed work order uses a frozen site", async () => {
+    const onSave = vi.fn().mockResolvedValue(undefined);
+    const row = baseRow({
+      status: "Completed",
+      frozenSite: {
+        address: "100 Frozen Ave",
+        city: "Chicago",
+        state: "IL",
+        zip: "60601",
+      },
+    });
+    const { result } = renderHook(
+      () =>
+        useCompDocDialog({
+          row,
+          open: true,
+          onSave,
+        }),
+      { wrapper },
+    );
+
+    await waitFor(() => {
+      expect(result.current.editAddress).toBe("100 Frozen Ave");
+    });
+    act(() => {
+      result.current.setEditAddress("Edited document address");
+    });
+    await act(async () => {
+      await result.current.handleSaveDraft();
+    });
+
+    expect(updateLocation).not.toHaveBeenCalled();
+    expect(onSave).toHaveBeenCalledWith(expect.any(Object), "No");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-media-upload-session.test.tsx b/src/test/app/(protected)/workorders/use-media-upload-session.test.tsx
new file mode 100644
index 00000000..8c0886fd
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-media-upload-session.test.tsx
@@ -0,0 +1,193 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useMediaUploadSession } from "@/app/(protected)/workorders/_hooks/use-media-upload-session";
+
+function makeFile(name = "photo.jpg") {
+  return new File(["bytes"], name, { type: "image/jpeg" });
+}
+
+function boardDetail(id: number) {
+  return {
+    info: { id },
+    media: [],
+    comments: [],
+    audit: [],
+    completion: {
+      docStatus: "",
+      template: null,
+      signOffName: "",
+      signOffAttachment: "",
+      signOffSignature: "",
+      dispatchSignoffs: [],
+    },
+  } as unknown as Parameters<typeof useMediaUploadSession>[0];
+}
+
+describe("useMediaUploadSession retry / cancel", () => {
+  it("retry upserts the same localId instead of appending a duplicate", async () => {
+    let rejectFirst!: (error: Error) => void;
+    const uploadMutateAsync = vi
+      .fn()
+      .mockImplementationOnce(
+        () =>
+          new Promise((_resolve, reject) => {
+            rejectFirst = reject;
+          }),
+      )
+      .mockImplementation(() => new Promise(() => undefined));
+
+    const { result } = renderHook(() => useMediaUploadSession(undefined, uploadMutateAsync));
+    const localId = "local-1";
+    const file = makeFile();
+
+    act(() => {
+      result.current.startUploads([
+        {
+          localId,
+          file,
+          onProgress: () => undefined,
+        },
+      ]);
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads).toHaveLength(1);
+    });
+
+    const firstSignal = uploadMutateAsync.mock.calls[0]?.[0]?.signal as AbortSignal;
+
+    act(() => {
+      rejectFirst(new Error("network"));
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads[0]?.uploadStatus).toBe("failed");
+    });
+
+    act(() => {
+      result.current.retryUpload(localId);
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads).toHaveLength(1);
+      expect(result.current.uploads[0]?.id).toBe(localId);
+      expect(result.current.uploads[0]?.uploadStatus).toBe("uploading");
+    });
+    expect(uploadMutateAsync).toHaveBeenCalledTimes(2);
+    const retrySignal = uploadMutateAsync.mock.calls[1]?.[0]?.signal as AbortSignal;
+    expect(retrySignal).toBeInstanceOf(AbortSignal);
+    expect(retrySignal).not.toBe(firstSignal);
+    expect(retrySignal.aborted).toBe(false);
+  });
+
+  it("fail → retry → cancel aborts the replacement upload and records no success", async () => {
+    let rejectFirst!: (error: Error) => void;
+    let resolveRetry!: (value: unknown) => void;
+    const uploadMutateAsync = vi
+      .fn()
+      .mockImplementationOnce(
+        () =>
+          new Promise((_resolve, reject) => {
+            rejectFirst = reject;
+          }),
+      )
+      .mockImplementation(
+        ({ signal }: { signal?: AbortSignal }) =>
+          new Promise((resolve, reject) => {
+            resolveRetry = resolve;
+            signal?.addEventListener("abort", () => {
+              const error = new Error("aborted");
+              error.name = "AbortError";
+              reject(error);
+            });
+          }),
+      );
+
+    const { result } = renderHook(() => useMediaUploadSession(undefined, uploadMutateAsync));
+    const localId = "local-retry";
+    const file = makeFile("retry.jpg");
+
+    act(() => {
+      result.current.startUploads([
+        {
+          localId,
+          file,
+          onProgress: () => undefined,
+        },
+      ]);
+    });
+
+    act(() => {
+      rejectFirst(new Error("upload failed"));
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads[0]?.uploadStatus).toBe("failed");
+    });
+
+    act(() => {
+      result.current.retryUpload(localId);
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads[0]?.uploadStatus).toBe("uploading");
+    });
+
+    const retrySignal = uploadMutateAsync.mock.calls[1]?.[0]?.signal as AbortSignal;
+
+    act(() => {
+      result.current.cancelUpload(localId);
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads).toHaveLength(0);
+    });
+    expect(retrySignal.aborted).toBe(true);
+    // Cancelling must not leave a successful settle path.
+    expect(() => resolveRetry({})).not.toThrow();
+    await waitFor(() => {
+      expect(result.current.uploads).toHaveLength(0);
+    });
+  });
+
+  it("clears local uploads and aborts in-flight work when the bound WO changes", async () => {
+    const uploadMutateAsync = vi.fn().mockImplementation(
+      ({ signal }: { signal?: AbortSignal }) =>
+        new Promise((_resolve, reject) => {
+          signal?.addEventListener("abort", () => {
+            const error = new Error("aborted");
+            error.name = "AbortError";
+            reject(error);
+          });
+        }),
+    );
+
+    const { result, rerender } = renderHook(
+      ({ detail }) => useMediaUploadSession(detail, uploadMutateAsync),
+      { initialProps: { detail: boardDetail(1) } },
+    );
+
+    act(() => {
+      result.current.startUploads([
+        {
+          localId: "local-wo-a",
+          file: makeFile("a.jpg"),
+          onProgress: () => undefined,
+        },
+      ]);
+    });
+
+    await waitFor(() => {
+      expect(result.current.uploads).toHaveLength(1);
+    });
+
+    const firstSignal = uploadMutateAsync.mock.calls[0]?.[0]?.signal as AbortSignal;
+
+    rerender({ detail: boardDetail(2) });
+
+    await waitFor(() => {
+      expect(result.current.uploads).toHaveLength(0);
+    });
+    expect(firstSignal.aborted).toBe(true);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-site-dialog-state.test.tsx b/src/test/app/(protected)/workorders/use-site-dialog-state.test.tsx
new file mode 100644
index 00000000..d527414d
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-site-dialog-state.test.tsx
@@ -0,0 +1,152 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useSiteDialogState } from "@/app/(protected)/workorders/_components/list/table/cells/use-site-dialog-state";
+import type { Location } from "@/domain/locations/types/location";
+import type { LocationOption } from "@/domain/work-orders/types/work-order";
+
+const detailById = new Map<string, Location>();
+const requestedDetailIds: Array<string | undefined> = [];
+const EMPTY_CONTACTS: [] = [];
+
+vi.mock("@/domain/locations/use-cases/use-location-detail", () => ({
+  useLocationDetail: (id: string | undefined) => {
+    requestedDetailIds.push(id);
+    return {
+      data: id && detailById.has(id) ? detailById.get(id) : undefined,
+      isLoading: Boolean(id && !detailById.has(id)),
+      isError: false,
+    };
+  },
+}));
+
+const SITES: LocationOption[] = [
+  { id: "loc-1", name: "BK5 · Dallas", siteCode: "BK5", city: "Dallas", state: "TX" },
+  { id: "loc-2", name: "SEA1 · Seattle", siteCode: "SEA1", city: "Seattle", state: "WA" },
+];
+const FROZEN_SITE = {
+  label: "BK5 · Frozen",
+  address: "100 Frozen Ave",
+  city: "Chicago",
+  state: "IL",
+  zip: "60601",
+};
+
+function locationDetail(id: string, contact: string, phone: string): Location {
+  return {
+    id,
+    name: id,
+    contact,
+    phone,
+    address: "100 Main St",
+    city: "Dallas",
+    state: "TX",
+    zipCode: "75001",
+  };
+}
+
+function renderSiteDialogState() {
+  return renderHook(() =>
+    useSiteDialogState({
+      open: true,
+      onOpenChange: vi.fn(),
+      value: "",
+      locationId: "",
+      pocName: "",
+      pocPhone: "",
+      pocNotes: "",
+      additionalContacts: EMPTY_CONTACTS,
+      sites: SITES,
+      createMode: true,
+      onSave: vi.fn(),
+    }),
+  );
+}
+
+describe("useSiteDialogState POC autofill", () => {
+  beforeEach(() => {
+    detailById.clear();
+    requestedDetailIds.length = 0;
+  });
+
+  it("preserves POC typed before deferred location detail resolves", () => {
+    const { result, rerender } = renderSiteDialogState();
+
+    act(() => {
+      result.current.handlePick("loc-1");
+    });
+
+    act(() => {
+      result.current.setPn("Dispatcher Typed");
+      result.current.setPp("999-000-1111");
+    });
+
+    expect(result.current.pn).toBe("Dispatcher Typed");
+    expect(result.current.pp).toBe("999-000-1111");
+
+    detailById.set("loc-1", locationDetail("loc-1", "Site Contact", "214-555-0111"));
+    act(() => {
+      rerender();
+    });
+
+    expect(result.current.pn).toBe("Dispatcher Typed");
+    expect(result.current.pp).toBe("999-000-1111");
+  });
+
+  it("clears prior POC on site switch then autofills from the new site detail", () => {
+    const { result, rerender } = renderSiteDialogState();
+
+    act(() => {
+      result.current.handlePick("loc-1");
+    });
+
+    detailById.set("loc-1", locationDetail("loc-1", "Contact A", "111-111-1111"));
+    act(() => {
+      rerender();
+    });
+
+    expect(result.current.pn).toBe("Contact A");
+    expect(result.current.pp).toBe("111-111-1111");
+
+    act(() => {
+      result.current.handlePick("loc-2");
+    });
+
+    expect(result.current.locId).toBe("loc-2");
+    expect(result.current.pn).toBe("");
+    expect(result.current.pp).toBe("");
+
+    detailById.set("loc-2", locationDetail("loc-2", "Contact B", "222-222-2222"));
+    act(() => {
+      rerender();
+    });
+
+    expect(result.current.pn).toBe("Contact B");
+    expect(result.current.pp).toBe("222-222-2222");
+  });
+
+  it("does not request live location detail when a frozen site is provided", () => {
+    const { result } = renderHook(() =>
+      useSiteDialogState({
+        open: true,
+        onOpenChange: vi.fn(),
+        value: "BK5",
+        locationId: "loc-1",
+        pocName: "Frozen POC",
+        pocPhone: "111",
+        pocNotes: "",
+        additionalContacts: EMPTY_CONTACTS,
+        sites: SITES,
+        createMode: false,
+        frozenSite: FROZEN_SITE,
+        onSave: vi.fn(),
+      }),
+    );
+
+    expect(requestedDetailIds).not.toContain("loc-1");
+    expect(result.current.locationDetail).toMatchObject({
+      address: "100 Frozen Ave",
+      city: "Chicago",
+      state: "IL",
+    });
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-slide-over-edit-state-completed.test.tsx b/src/test/app/(protected)/workorders/use-slide-over-edit-state-completed.test.tsx
new file mode 100644
index 00000000..1245a22f
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-slide-over-edit-state-completed.test.tsx
@@ -0,0 +1,177 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { toast } from "react-toastify";
+import { useSlideOverEditState } from "@/app/(protected)/workorders/_components/detail/use-slide-over-edit-state";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  vendorAssignedMessage,
+  workOrderSavedMessage,
+} from "@/domain/work-orders/utils/work-order-feedback-toasts";
+
+vi.mock("react-toastify", () => ({
+  toast: {
+    warning: vi.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+function baseRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 100,
+    woNumber: "100",
+    site: "SITE",
+    type: "Emergency",
+    severity: null,
+    dispatcherId: "d1",
+    dispatcherName: "Alex",
+    scheduledOn: "2026-07-16",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "2026-07-16",
+    dayLabel: "Thu",
+    location: "Main",
+    locationId: 5,
+    pm: "",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "v1",
+    company: "Acme",
+    tech: "Sam",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Incomplete",
+    docStatus: "",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    isAddOn: false,
+    upliftSummary: { hasUplift: false, pendingCount: 0 },
+    ...overrides,
+  };
+}
+
+describe("useSlideOverEditState completed lock", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("leaves edit mode and refuses commit when the same work order becomes completed", () => {
+    const onSave = vi.fn();
+    const onClose = vi.fn();
+    const setTab = vi.fn();
+    const open = baseRow();
+
+    const { result, rerender } = renderHook(
+      ({ row, infoSource }) =>
+        useSlideOverEditState({
+          row,
+          editMode: true,
+          infoSource,
+          onSave,
+          onClose,
+          closeDisabled: false,
+          setTab,
+        }),
+      { initialProps: { row: open, infoSource: open } },
+    );
+
+    expect(result.current.editing).toBe(true);
+
+    act(() => {
+      result.current.handleDraftChange({ woNumber: "WO-LOCKED" });
+    });
+
+    const completed = baseRow({ status: "Completed", woNumber: "100" });
+    rerender({ row: completed, infoSource: completed });
+
+    expect(result.current.editing).toBe(false);
+
+    act(() => {
+      result.current.commit();
+    });
+
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it("toasts vendor assigned after a successful save that includes vendorId", () => {
+    const onSave = vi.fn();
+    const open = baseRow();
+
+    const { result } = renderHook(() =>
+      useSlideOverEditState({
+        row: open,
+        editMode: true,
+        infoSource: open,
+        onSave,
+        onClose: vi.fn(),
+        closeDisabled: false,
+        setTab: vi.fn(),
+      }),
+    );
+
+    act(() => {
+      result.current.handleDraftChange({ vendorId: "v2", company: "New Co", tech: "Lee" });
+    });
+    act(() => {
+      result.current.commit();
+    });
+
+    expect(onSave).toHaveBeenCalled();
+    expect(toast.success).not.toHaveBeenCalled();
+    const options = onSave.mock.calls[0][2] as { onSuccess: () => void };
+    act(() => {
+      options.onSuccess();
+    });
+    expect(toast.success).toHaveBeenCalledWith(vendorAssignedMessage());
+    expect(toast.success).toHaveBeenCalledTimes(1);
+  });
+
+  it("toasts generic save after a successful non-vendor slide-over patch", () => {
+    const onSave = vi.fn();
+    const open = baseRow();
+
+    const { result } = renderHook(() =>
+      useSlideOverEditState({
+        row: open,
+        editMode: true,
+        infoSource: open,
+        onSave,
+        onClose: vi.fn(),
+        closeDisabled: false,
+        setTab: vi.fn(),
+      }),
+    );
+
+    act(() => {
+      result.current.handleDraftChange({ dispatcherName: "Blair" });
+    });
+    act(() => {
+      result.current.commit();
+    });
+
+    const options = onSave.mock.calls[0][2] as { onSuccess: () => void };
+    act(() => {
+      options.onSuccess();
+    });
+    expect(toast.success).toHaveBeenCalledWith(workOrderSavedMessage());
+    expect(toast.success).not.toHaveBeenCalledWith(vendorAssignedMessage());
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-slide-over-media-state.test.tsx b/src/test/app/(protected)/workorders/use-slide-over-media-state.test.tsx
new file mode 100644
index 00000000..dab9e3bd
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-slide-over-media-state.test.tsx
@@ -0,0 +1,330 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useSlideOverMediaState } from "@/app/(protected)/workorders/_components/detail/use-slide-over-media-state";
+import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+function baseInfo(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 100,
+    woNumber: "100",
+    site: "SITE",
+    type: "Emergency",
+    severity: null,
+    dispatcherId: "d1",
+    dispatcherName: "Alex",
+    scheduledOn: "2026-07-16",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "2026-07-16",
+    dayLabel: "Thu",
+    location: "Main",
+    locationId: 5,
+    pm: "",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "v1",
+    company: "Acme",
+    tech: "Sam",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Incomplete",
+    docStatus: "",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    isAddOn: false,
+    upliftSummary: { hasUplift: false, pendingCount: 0 },
+    ...overrides,
+  };
+}
+
+function detailWithMedia(
+  media: WorkOrderBoardDetail["media"],
+  infoOverrides: Partial<WorkOrderTableRow> = {},
+): WorkOrderBoardDetail {
+  return {
+    info: baseInfo(infoOverrides),
+    completion: {
+      docStatus: "",
+      template: null,
+      signOffName: "",
+      signOffAttachment: "",
+      signOffSignature: "",
+      dispatchSignoffs: [],
+    },
+    comments: [],
+    audit: [],
+    media,
+  };
+}
+
+function idleMutation() {
+  return {
+    mutate: vi.fn(),
+    mutateAsync: vi.fn().mockResolvedValue({}),
+    isPending: false,
+  } as never;
+}
+
+describe("useSlideOverMediaState completion filter", () => {
+  beforeEach(() => {
+    sessionStorage.clear();
+  });
+
+  it("keeps Before/After/Completion after refetch mapped purpose (not file category)", () => {
+    const detail = detailWithMedia([
+      {
+        id: "1",
+        category: "Before",
+        url: "https://cdn.example.com/before.jpg",
+        fileName: "before.jpg",
+        uploadedAt: "2026-07-15T18:00:00.0000000Z",
+        isLegacy: false,
+      },
+      {
+        id: "2",
+        category: "After",
+        url: "https://cdn.example.com/after.jpg",
+        fileName: "after.jpg",
+        uploadedAt: "2026-07-15T18:00:00.0000000Z",
+        isLegacy: false,
+      },
+      {
+        id: "3",
+        category: "Completion",
+        url: "https://cdn.example.com/completion.pdf",
+        fileName: "completion.pdf",
+        uploadedAt: "2026-07-15T18:00:00.0000000Z",
+        isLegacy: false,
+      },
+      {
+        id: "4",
+        category: "Extra",
+        url: "https://cdn.example.com/extra.pdf",
+        fileName: "extra.pdf",
+        uploadedAt: "2026-07-15T18:00:00.0000000Z",
+        isLegacy: false,
+      },
+      {
+        id: "10",
+        category: "Extra",
+        url: "https://cdn.example.com/site.jpg",
+        fileName: "site.jpg",
+        uploadedAt: "2026-07-15T18:00:00.0000000Z",
+        isLegacy: false,
+      },
+    ]);
+
+    const { result } = renderHook(() =>
+      useSlideOverMediaState({
+        detailForRow: detail,
+        uploadMediaMutation: idleMutation(),
+        deleteMediaMutation: idleMutation(),
+        categorizeMediaMutation: idleMutation(),
+      }),
+    );
+
+    expect(result.current.completionMedia.map((item) => item.purpose)).toEqual([
+      "Before",
+      "After",
+      "Completion",
+      "Extra",
+    ]);
+    expect(result.current.completionMedia.map((item) => item.id)).toContain("10");
+    expect(
+      result.current.completionMedia.every((item) =>
+        ["Photo", "Video", "Report", "Other"].includes(item.category),
+      ),
+    ).toBe(true);
+    expect(result.current.extrasUploads).toHaveLength(1);
+    expect(result.current.extrasUploads[0]?.purpose).toBe("Extra");
+    expect(result.current.extrasUploads[0]?.id).toBe("4");
+  });
+
+  it("keeps Extra photos on Completion Doc until Extra is assigned", () => {
+    const detail = detailWithMedia([
+      {
+        id: "10",
+        category: "Extra",
+        url: "https://cdn.example.com/site.jpg",
+        fileName: "site.jpg",
+        uploadedAt: "2026-07-15T18:00:00.0000000Z",
+        isLegacy: false,
+      },
+    ]);
+
+    const { result } = renderHook(() =>
+      useSlideOverMediaState({
+        detailForRow: detail,
+        uploadMediaMutation: idleMutation(),
+        deleteMediaMutation: idleMutation(),
+        categorizeMediaMutation: idleMutation(),
+      }),
+    );
+
+    expect(result.current.completionMedia.map((item) => item.id)).toEqual(["10"]);
+    expect(result.current.extrasUploads).toHaveLength(0);
+  });
+
+  it("includes Aveta-categorized extra documents in extrasUploads", () => {
+    const detail = detailWithMedia([
+      {
+        id: "4",
+        category: "Extra",
+        url: "https://cdn.example.com/extra.pdf",
+        fileName: "extra.pdf",
+        uploadedAt: "2026-07-15T18:00:00.0000000Z",
+        isLegacy: false,
+      },
+      {
+        id: "5",
+        category: "Aveta",
+        url: "https://cdn.example.com/aveta.pdf",
+        fileName: "aveta.pdf",
+        uploadedAt: "2026-07-15T18:00:00.0000000Z",
+        isLegacy: false,
+      },
+    ]);
+
+    const { result } = renderHook(() =>
+      useSlideOverMediaState({
+        detailForRow: detail,
+        uploadMediaMutation: idleMutation(),
+        deleteMediaMutation: idleMutation(),
+        categorizeMediaMutation: idleMutation(),
+      }),
+    );
+
+    expect(result.current.extrasUploads).toHaveLength(2);
+    expect(result.current.extrasUploads.map((item) => item.purpose)).toEqual(["Extra", "Aveta"]);
+    expect(result.current.extrasUploads[1]?.category).toBe("Aveta");
+  });
+
+  it("keeps an Extra photo in Extra Docs after assigning Extra and remounting", () => {
+    const detail = detailWithMedia([
+      {
+        id: "10",
+        category: "Extra",
+        url: "https://cdn.example.com/site.jpg",
+        fileName: "site.jpg",
+        uploadedAt: "2026-07-15T18:00:00.0000000Z",
+        isLegacy: false,
+      },
+    ]);
+    const categorizeMutate = vi.fn((_input: unknown, options?: { onSuccess?: () => void }) =>
+      options?.onSuccess?.(),
+    );
+    const categorize = {
+      mutate: categorizeMutate,
+      mutateAsync: vi.fn().mockResolvedValue({}),
+      isPending: false,
+    } as never;
+
+    const { result, unmount } = renderHook(() =>
+      useSlideOverMediaState({
+        detailForRow: detail,
+        uploadMediaMutation: idleMutation(),
+        deleteMediaMutation: idleMutation(),
+        categorizeMediaMutation: categorize,
+      }),
+    );
+
+    expect(result.current.completionMedia).toHaveLength(1);
+    expect(result.current.extrasUploads).toHaveLength(0);
+
+    act(() => {
+      result.current.categorizeMedia("10", "Extra");
+    });
+
+    expect(result.current.completionMedia).toHaveLength(0);
+    expect(result.current.extrasUploads.map((item) => item.id)).toEqual(["10"]);
+    expect(categorizeMutate).toHaveBeenCalledWith(
+      {
+        mediaId: "10",
+        category: "Extra",
+        workOrderVersion: "1",
+      },
+      expect.objectContaining({ onSuccess: expect.any(Function) }),
+    );
+
+    unmount();
+    const remounted = renderHook(() =>
+      useSlideOverMediaState({
+        detailForRow: detail,
+        uploadMediaMutation: idleMutation(),
+        deleteMediaMutation: idleMutation(),
+        categorizeMediaMutation: idleMutation(),
+      }),
+    );
+
+    expect(remounted.result.current.completionMedia).toHaveLength(0);
+    expect(remounted.result.current.extrasUploads.map((item) => item.id)).toEqual(["10"]);
+  });
+
+  it("shows Extra photos and videos in Extra Docs on PM work orders", () => {
+    const detail = detailWithMedia(
+      [
+        {
+          id: "10",
+          category: "Extra",
+          url: "https://cdn.example.com/site.jpg",
+          fileName: "site.jpg",
+          uploadedAt: "2026-07-15T18:00:00.0000000Z",
+          isLegacy: false,
+        },
+        {
+          id: "11",
+          category: "Extra",
+          url: "https://cdn.example.com/walkthrough.mp4",
+          fileName: "walkthrough.mp4",
+          uploadedAt: "2026-07-15T18:00:00.0000000Z",
+          isLegacy: false,
+        },
+        {
+          id: "4",
+          category: "Extra",
+          url: "https://cdn.example.com/extra.pdf",
+          fileName: "extra.pdf",
+          uploadedAt: "2026-07-15T18:00:00.0000000Z",
+          isLegacy: false,
+        },
+      ],
+      { id: 200, type: "PM" },
+    );
+
+    const { result } = renderHook(() =>
+      useSlideOverMediaState({
+        detailForRow: detail,
+        uploadMediaMutation: idleMutation(),
+        deleteMediaMutation: idleMutation(),
+        categorizeMediaMutation: idleMutation(),
+      }),
+    );
+
+    expect(result.current.completionMedia).toHaveLength(0);
+    expect(result.current.extrasUploads.map((item) => item.id)).toEqual(["10", "11", "4"]);
+    expect(result.current.extrasUploads.map((item) => item.fileType)).toEqual([
+      "image",
+      "video",
+      "pdf",
+    ]);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-sync-out-of-range-search-page.test.tsx b/src/test/app/(protected)/workorders/use-sync-out-of-range-search-page.test.tsx
new file mode 100644
index 00000000..c9f466a0
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-sync-out-of-range-search-page.test.tsx
@@ -0,0 +1,50 @@
+import { renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useSyncOutOfRangeSearchPage } from "@/app/(protected)/workorders/_hooks/use-sync-out-of-range-search-page";
+
+describe("useSyncOutOfRangeSearchPage", () => {
+  it("sets the last valid page when a search shrinks to one page", () => {
+    const setPage = vi.fn();
+    renderHook(() =>
+      useSyncOutOfRangeSearchPage({
+        enabled: true,
+        ready: true,
+        page: 1,
+        pageSize: 50,
+        totalCount: 40,
+        setPage,
+      }),
+    );
+    expect(setPage).toHaveBeenCalledWith(0);
+  });
+
+  it("does not sync while the search query is loading", () => {
+    const setPage = vi.fn();
+    renderHook(() =>
+      useSyncOutOfRangeSearchPage({
+        enabled: true,
+        ready: false,
+        page: 1,
+        pageSize: 50,
+        totalCount: 40,
+        setPage,
+      }),
+    );
+    expect(setPage).not.toHaveBeenCalled();
+  });
+
+  it("does not sync when the result set is empty", () => {
+    const setPage = vi.fn();
+    renderHook(() =>
+      useSyncOutOfRangeSearchPage({
+        enabled: true,
+        ready: true,
+        page: 1,
+        pageSize: 50,
+        totalCount: 0,
+        setPage,
+      }),
+    );
+    expect(setPage).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-wizard-poc-autofill.test.tsx b/src/test/app/(protected)/workorders/use-wizard-poc-autofill.test.tsx
new file mode 100644
index 00000000..5f9113b8
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-wizard-poc-autofill.test.tsx
@@ -0,0 +1,78 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useWizardPocAutofill } from "@/app/(protected)/workorders/_components/wizard/use-wizard-poc-autofill";
+import type { Location } from "@/domain/locations/types/location";
+import {
+  EMPTY_WIZARD_DRAFT,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+import { useState } from "react";
+
+function baseLocation(overrides: Partial<Location> = {}): Location {
+  return {
+    id: "loc-1",
+    name: "BK5",
+    contact: "Janelle Pickett",
+    phone: "214-555-0111",
+    ...overrides,
+  } as Location;
+}
+
+describe("useWizardPocAutofill", () => {
+  it("fills empty POC fields from location detail once", () => {
+    const { result } = renderHook(() => {
+      const [draft, setDraft] = useState<WorkOrderWizardDraft>({ ...EMPTY_WIZARD_DRAFT });
+      useWizardPocAutofill(true, "loc-1", baseLocation(), setDraft);
+      return draft;
+    });
+
+    expect(result.current.pocName).toBe("Janelle Pickett");
+    expect(result.current.pocPhone).toBe("214-555-0111");
+  });
+
+  it("does not overwrite POC edits made before location detail arrives", () => {
+    const { result, rerender } = renderHook(
+      ({ detail }: { detail: Location | undefined }) => {
+        const [draft, setDraft] = useState<WorkOrderWizardDraft>({
+          ...EMPTY_WIZARD_DRAFT,
+          pocName: "Dispatcher Typed",
+          pocPhone: "999-000-1111",
+        });
+        useWizardPocAutofill(true, "loc-1", detail, setDraft);
+        return draft;
+      },
+      { initialProps: { detail: undefined as Location | undefined } },
+    );
+
+    expect(result.current.pocName).toBe("Dispatcher Typed");
+
+    act(() => {
+      rerender({ detail: baseLocation() });
+    });
+
+    expect(result.current.pocName).toBe("Dispatcher Typed");
+    expect(result.current.pocPhone).toBe("999-000-1111");
+  });
+
+  it("re-seeds POC after re-selecting the same location clears the fields", () => {
+    const { result } = renderHook(() => {
+      const [draft, setDraft] = useState<WorkOrderWizardDraft>({ ...EMPTY_WIZARD_DRAFT });
+      const autofill = useWizardPocAutofill(true, "loc-1", baseLocation(), setDraft);
+      return { draft, setDraft, autofill };
+    });
+
+    expect(result.current.draft.pocName).toBe("Janelle Pickett");
+
+    act(() => {
+      result.current.setDraft((current) => ({
+        ...current,
+        pocName: "",
+        pocPhone: "",
+      }));
+      result.current.autofill.notifyLocationChanged("loc-1");
+    });
+
+    expect(result.current.draft.pocName).toBe("Janelle Pickett");
+    expect(result.current.draft.pocPhone).toBe("214-555-0111");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-wizard-vendor-company-notes.test.tsx b/src/test/app/(protected)/workorders/use-wizard-vendor-company-notes.test.tsx
new file mode 100644
index 00000000..8801c765
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-wizard-vendor-company-notes.test.tsx
@@ -0,0 +1,222 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { useState, type ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useWizardVendorCompanyNotes } from "@/app/(protected)/workorders/_components/wizard/use-wizard-vendor-company-notes";
+import { NOTES_SAVE_FAILED_MESSAGE } from "@/domain/vendors/use-cases/use-save-vendor-company-notes";
+import {
+  EMPTY_WIZARD_DRAFT,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+import { toast } from "react-toastify";
+import { createTestQueryClient } from "@/test/test-utils";
+
+const rosterGet = vi.fn();
+const addTechnicians = vi.fn();
+
+vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
+  vendorCompanyRosterApi: {
+    get: (...args: unknown[]) => rosterGet(...args),
+    addTechnicians: (...args: unknown[]) => addTechnicians(...args),
+  },
+}));
+
+vi.mock("react-toastify", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
+
+type Roster = ReturnType<typeof roster>;
+
+function roster(companyId: number, notes: string) {
+  return {
+    companyId,
+    rowVersion: `rv-${companyId}`,
+    name: `Company ${companyId}`,
+    companyPhone: "",
+    email: "",
+    address: "",
+    city: "",
+    state: "",
+    zip: "",
+    googleMapsUrl: "",
+    notes,
+    technicians: [],
+  };
+}
+
+function deferredRoster() {
+  let resolve!: (value: Roster) => void;
+  const pending = new Promise<Roster>((res) => {
+    resolve = res;
+  });
+  return {
+    promise: () => pending,
+    resolveAll: (value: Roster) => resolve(value),
+  };
+}
+
+function useHarness() {
+  const [draft, setDraft] = useState<WorkOrderWizardDraft>({ ...EMPTY_WIZARD_DRAFT });
+  const notes = useWizardVendorCompanyNotes(true, draft.vendorId, setDraft);
+  return { draft, setDraft, ...notes };
+}
+
+function renderHarness() {
+  const client = createTestQueryClient();
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={client}>{children}</QueryClientProvider>
+  );
+  return renderHook(() => useHarness(), { wrapper });
+}
+
+describe("useWizardVendorCompanyNotes", () => {
+  beforeEach(() => {
+    rosterGet.mockReset();
+    addTechnicians.mockReset();
+    vi.mocked(toast.error).mockClear();
+    rosterGet.mockImplementation(({ vendorId }: { vendorId: string }) =>
+      Promise.resolve(
+        vendorId === "31" ? roster(9, "Other company notes") : roster(7, "Call before arrival"),
+      ),
+    );
+    addTechnicians.mockResolvedValue(roster(7, "Gate code 4411"));
+  });
+
+  it("pre-fills the Notes field with the picked technician's company notes", async () => {
+    const { result } = renderHarness();
+
+    act(() => result.current.setDraft((d) => ({ ...d, vendorId: "21" })));
+
+    await waitFor(() => expect(result.current.draft.vendorNotes).toBe("Call before arrival"));
+    expect(rosterGet).toHaveBeenCalledWith({ vendorId: "21", companyId: undefined });
+  });
+
+  it("keeps edits when switching technicians within the same company", async () => {
+    rosterGet.mockResolvedValue(roster(7, "Call before arrival"));
+    const { result } = renderHarness();
+    act(() => result.current.setDraft((d) => ({ ...d, vendorId: "21" })));
+    await waitFor(() => expect(result.current.draft.vendorNotes).toBe("Call before arrival"));
+
+    act(() => result.current.setDraft((d) => ({ ...d, vendorNotes: "Gate code 4411" })));
+    act(() => result.current.setDraft((d) => ({ ...d, vendorId: "22" })));
+
+    await waitFor(() =>
+      expect(rosterGet).toHaveBeenCalledWith({ vendorId: "22", companyId: undefined }),
+    );
+    expect(result.current.draft.vendorNotes).toBe("Gate code 4411");
+  });
+
+  it("re-seeds notes when the technician belongs to a different company", async () => {
+    const { result } = renderHarness();
+    act(() => result.current.setDraft((d) => ({ ...d, vendorId: "21" })));
+    await waitFor(() => expect(result.current.draft.vendorNotes).toBe("Call before arrival"));
+
+    act(() => result.current.setDraft((d) => ({ ...d, vendorId: "31" })));
+
+    await waitFor(() => expect(result.current.draft.vendorNotes).toBe("Other company notes"));
+  });
+
+  it("keeps notes typed before the roster resolves and saves them for that company", async () => {
+    const lateRoster = deferredRoster();
+    rosterGet.mockImplementation(({ vendorId }: { vendorId: string }) =>
+      vendorId === "21" ? lateRoster.promise() : Promise.resolve(roster(7, "Call before arrival")),
+    );
+    const { result } = renderHarness();
+    act(() => result.current.setDraft((d) => ({ ...d, vendorId: "21" })));
+    act(() => result.current.setDraft((d) => ({ ...d, vendorNotes: "Gate code 4411" })));
+
+    await act(async () => lateRoster.resolveAll(roster(7, "Call before arrival")));
+    expect(result.current.draft.vendorNotes).toBe("Gate code 4411");
+
+    await act(async () => {
+      await result.current.saveCompanyNotes({
+        ...result.current.draft,
+        vendorNotes: "Gate code 4411",
+      });
+    });
+
+    expect(addTechnicians).toHaveBeenCalledWith(7, {
+      rowVersion: "rv-7",
+      addTechnicians: [],
+      companyFields: { notes: "Gate code 4411" },
+    });
+  });
+
+  it("targets the newly selected company at save time while its roster is still loading", async () => {
+    const companyB = deferredRoster();
+    rosterGet.mockImplementation(({ vendorId }: { vendorId: string }) =>
+      vendorId === "21" ? Promise.resolve(roster(7, "Call before arrival")) : companyB.promise(),
+    );
+    const { result } = renderHarness();
+    act(() => result.current.setDraft((d) => ({ ...d, vendorId: "21" })));
+    await waitFor(() => expect(result.current.draft.vendorNotes).toBe("Call before arrival"));
+
+    act(() => result.current.setDraft((d) => ({ ...d, vendorId: "31" })));
+    act(() => result.current.setDraft((d) => ({ ...d, vendorNotes: "Gate code 4411" })));
+
+    let savePromise!: Promise<void>;
+    act(() => {
+      savePromise = result.current
+        .saveCompanyNotes({ ...result.current.draft, vendorNotes: "Gate code 4411" })
+        .then(() => undefined);
+    });
+    await act(async () => companyB.resolveAll(roster(9, "Other company notes")));
+    await act(async () => {
+      await savePromise;
+    });
+
+    expect(addTechnicians).toHaveBeenCalledWith(9, {
+      rowVersion: "rv-9",
+      addTechnicians: [],
+      companyFields: { notes: "Gate code 4411" },
+    });
+    expect(addTechnicians).not.toHaveBeenCalledWith(7, expect.anything());
+    expect(result.current.draft.vendorNotes).toBe("Gate code 4411");
+  });
+
+  it("warns without writing when the save-time roster read fails", async () => {
+    rosterGet.mockRejectedValue(new Error("roster down"));
+    const { result } = renderHarness();
+    act(() => result.current.setDraft((d) => ({ ...d, vendorId: "21" })));
+    act(() => result.current.setDraft((d) => ({ ...d, vendorNotes: "Gate code 4411" })));
+
+    await act(async () => {
+      await result.current.saveCompanyNotes({
+        ...result.current.draft,
+        vendorNotes: "Gate code 4411",
+      });
+    });
+
+    expect(toast.error).toHaveBeenCalledWith(NOTES_SAVE_FAILED_MESSAGE);
+    expect(addTechnicians).not.toHaveBeenCalled();
+  });
+
+  it("writes edited notes to the vendor company when the work order is created", async () => {
+    const { result } = renderHarness();
+    act(() => result.current.setDraft((d) => ({ ...d, vendorId: "21" })));
+    await waitFor(() => expect(result.current.draft.vendorNotes).toBe("Call before arrival"));
+
+    await act(async () => {
+      await result.current.saveCompanyNotes({
+        ...result.current.draft,
+        vendorNotes: "Gate code 4411",
+      });
+    });
+
+    expect(addTechnicians).toHaveBeenCalledWith(7, {
+      rowVersion: "rv-7",
+      addTechnicians: [],
+      companyFields: { notes: "Gate code 4411" },
+    });
+  });
+
+  it("does not write when the notes were left as the company's existing notes", async () => {
+    const { result } = renderHarness();
+    act(() => result.current.setDraft((d) => ({ ...d, vendorId: "21" })));
+    await waitFor(() => expect(result.current.draft.vendorNotes).toBe("Call before arrival"));
+
+    await act(async () => {
+      await result.current.saveCompanyNotes(result.current.draft);
+    });
+
+    expect(addTechnicians).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-wo-table-row-handlers-duplicate.test.ts b/src/test/app/(protected)/workorders/use-wo-table-row-handlers-duplicate.test.ts
new file mode 100644
index 00000000..78f3911c
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-wo-table-row-handlers-duplicate.test.ts
@@ -0,0 +1,65 @@
+import { renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useWoTableRowHandlers } from "@/app/(protected)/workorders/_components/list/table/use-wo-table-row-handlers";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const existingRow = { id: "wo-99", woNumber: "12345678901" } as WorkOrderTableRow;
+
+function buildTableData() {
+  return {
+    dragState: { current: { dragId: null, overId: null } },
+    setDragViz: vi.fn(),
+    reorderRows: vi.fn(),
+    endDrag: vi.fn(),
+    setUnschedOpen: vi.fn(),
+    triggerFlash: vi.fn(),
+    revealScheduledRow: vi.fn(),
+    setSelectedId: vi.fn(),
+  } as never;
+}
+
+describe("useWoTableRowHandlers onDuplicateFound", () => {
+  it("delegates to onDuplicateFound instead of opening the slide-over", () => {
+    const onDuplicateFound = vi.fn();
+    const onOpenSlideOver = vi.fn();
+
+    const { result } = renderHook(() =>
+      useWoTableRowHandlers({
+        tableData: buildTableData(),
+        weekMonday: "2026-07-20",
+        onNavigateToDay: vi.fn(),
+        onOpenSlideOver,
+        onOpenMedia: vi.fn(),
+        onPatch: vi.fn(),
+        onScheduleHighlight: vi.fn(),
+        onDuplicateFound,
+      }),
+    );
+
+    result.current.onDuplicateFound?.(existingRow);
+
+    expect(onDuplicateFound).toHaveBeenCalledWith(existingRow);
+    expect(onOpenSlideOver).not.toHaveBeenCalled();
+  });
+
+  it("forwards patch options so vendor persist can toast on success", () => {
+    const onPatch = vi.fn();
+    const onSuccess = vi.fn();
+
+    const { result } = renderHook(() =>
+      useWoTableRowHandlers({
+        tableData: buildTableData(),
+        weekMonday: "2026-07-20",
+        onNavigateToDay: vi.fn(),
+        onOpenSlideOver: vi.fn(),
+        onOpenMedia: vi.fn(),
+        onPatch,
+        onScheduleHighlight: vi.fn(),
+      }),
+    );
+
+    result.current.onPatch("wo-1", { vendorId: "9" }, { onSuccess });
+
+    expect(onPatch).toHaveBeenCalledWith("wo-1", { vendorId: "9" }, { onSuccess });
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-wo-table-row-handlers-schedule.test.ts b/src/test/app/(protected)/workorders/use-wo-table-row-handlers-schedule.test.ts
new file mode 100644
index 00000000..ff3f0312
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-wo-table-row-handlers-schedule.test.ts
@@ -0,0 +1,186 @@
+import { renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useWoTableRowHandlers } from "@/app/(protected)/workorders/_components/list/table/use-wo-table-row-handlers";
+import {
+  applySchedulePatch,
+  applyScheduleRangePatch,
+} from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+
+const { rescheduleNotify, weekMoveNotify } = vi.hoisted(() => ({
+  rescheduleNotify: vi.fn(),
+  weekMoveNotify: vi.fn(),
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/reschedule-notify", () => ({
+  rescheduleNotify,
+  weekMoveNotify,
+}));
+
+function buildTableData(revealScheduledRow = vi.fn()) {
+  return {
+    dragState: { current: { dragId: null, overId: null } },
+    setDragViz: vi.fn(),
+    reorderRows: vi.fn(),
+    endDrag: vi.fn(),
+    revealScheduledRow,
+    setSelectedId: vi.fn(),
+  } as never;
+}
+
+describe("useWoTableRowHandlers schedule navigation", () => {
+  beforeEach(() => {
+    rescheduleNotify.mockClear();
+    weekMoveNotify.mockClear();
+  });
+
+  it("selects the scheduled weekday in the same week so the row stays visible", () => {
+    const onNavigateToDay = vi.fn();
+    const onPatch = vi.fn();
+    const revealScheduledRow = vi.fn();
+
+    const { result } = renderHook(() =>
+      useWoTableRowHandlers({
+        tableData: buildTableData(revealScheduledRow),
+        weekMonday: "2026-05-18",
+        onNavigateToDay,
+        onOpenSlideOver: vi.fn(),
+        onOpenMedia: vi.fn(),
+        onPatch,
+        onScheduleHighlight: vi.fn(),
+      }),
+    );
+
+    result.current.onScheduleDate("wo-1", "2026-05-21");
+
+    expect(onPatch).toHaveBeenCalledWith("wo-1", applySchedulePatch("2026-05-21", false));
+    expect(onNavigateToDay).toHaveBeenCalledWith("2026-05-21");
+    expect(revealScheduledRow).toHaveBeenCalledWith("wo-1");
+    expect(rescheduleNotify).not.toHaveBeenCalled();
+  });
+
+  it("sends cross-week view-it navigation to the target day, not Monday", () => {
+    const onNavigateToDay = vi.fn();
+    const revealScheduledRow = vi.fn();
+
+    const { result } = renderHook(() =>
+      useWoTableRowHandlers({
+        tableData: buildTableData(revealScheduledRow),
+        weekMonday: "2026-05-18",
+        onNavigateToDay,
+        onOpenSlideOver: vi.fn(),
+        onOpenMedia: vi.fn(),
+        onPatch: vi.fn(),
+        onScheduleHighlight: vi.fn(),
+      }),
+    );
+
+    result.current.onScheduleDate("wo-1", "2026-05-27");
+
+    expect(onNavigateToDay).not.toHaveBeenCalled();
+    expect(rescheduleNotify).toHaveBeenCalledWith(
+      "2026-05-27",
+      expect.objectContaining({ onNavigate: expect.any(Function) }),
+    );
+
+    const { onNavigate } = rescheduleNotify.mock.calls[0][1] as { onNavigate: () => void };
+    onNavigate();
+    expect(onNavigateToDay).toHaveBeenCalledWith("2026-05-27");
+    expect(revealScheduledRow).toHaveBeenCalledWith("wo-1");
+  });
+
+  it("lands a range on the start day and reveals the row", () => {
+    const onNavigateToDay = vi.fn();
+    const onPatch = vi.fn();
+    const revealScheduledRow = vi.fn();
+
+    const { result } = renderHook(() =>
+      useWoTableRowHandlers({
+        tableData: buildTableData(revealScheduledRow),
+        weekMonday: "2026-05-18",
+        onNavigateToDay,
+        onOpenSlideOver: vi.fn(),
+        onOpenMedia: vi.fn(),
+        onPatch,
+        onScheduleHighlight: vi.fn(),
+      }),
+    );
+
+    result.current.onScheduleRange("wo-1", "2026-05-21", "2026-05-23");
+
+    expect(onPatch).toHaveBeenCalledWith(
+      "wo-1",
+      applyScheduleRangePatch("2026-05-21", "2026-05-23"),
+    );
+    expect(onNavigateToDay).toHaveBeenCalledWith("2026-05-21");
+    expect(revealScheduledRow).toHaveBeenCalledWith("wo-1");
+    expect(rescheduleNotify).not.toHaveBeenCalled();
+  });
+
+  it("opens Advanced Filters for week-only moves instead of the removed Unscheduled section", () => {
+    const onNavigateToDay = vi.fn();
+    const onOpenAdvancedFilters = vi.fn();
+    const onPatch = vi.fn();
+
+    const { result } = renderHook(() =>
+      useWoTableRowHandlers({
+        tableData: buildTableData(),
+        weekMonday: "2026-05-18",
+        onNavigateToDay,
+        onOpenAdvancedFilters,
+        onOpenSlideOver: vi.fn(),
+        onOpenMedia: vi.fn(),
+        onPatch,
+        onScheduleHighlight: vi.fn(),
+      }),
+    );
+
+    result.current.onScheduleWeek("wo-1", "2026-05-25");
+
+    expect(onPatch).toHaveBeenCalledWith(
+      "wo-1",
+      expect.objectContaining({
+        scheduledOn: "",
+        scheduleWeekOnly: true,
+        targetWeek: "2026-05-25",
+      }),
+    );
+    expect(weekMoveNotify).toHaveBeenCalled();
+
+    const { onNavigate } = weekMoveNotify.mock.calls[0][1] as { onNavigate: () => void };
+    onNavigate();
+    expect(onNavigateToDay).toHaveBeenCalledWith("2026-05-25");
+    expect(onOpenAdvancedFilters).toHaveBeenCalled();
+  });
+
+  it("clears the concrete schedule and opens Advanced Filters from the Unscheduled toast", () => {
+    const onNavigateToDay = vi.fn();
+    const onOpenAdvancedFilters = vi.fn();
+    const onPatch = vi.fn();
+
+    const { result } = renderHook(() =>
+      useWoTableRowHandlers({
+        tableData: buildTableData(),
+        weekMonday: "2026-05-18",
+        onNavigateToDay,
+        onOpenAdvancedFilters,
+        onOpenSlideOver: vi.fn(),
+        onOpenMedia: vi.fn(),
+        onPatch,
+        onScheduleHighlight: vi.fn(),
+      }),
+    );
+
+    result.current.onScheduleWeek("wo-1", "");
+
+    expect(onPatch).toHaveBeenCalledWith("wo-1", applySchedulePatch("", false));
+    expect(weekMoveNotify).toHaveBeenCalledWith(
+      "",
+      expect.objectContaining({ onNavigate: expect.any(Function) }),
+    );
+
+    const { onNavigate } = weekMoveNotify.mock.calls[0][1] as { onNavigate: () => void };
+    onNavigate();
+    expect(onNavigateToDay).not.toHaveBeenCalled();
+    expect(onOpenAdvancedFilters).toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-work-orders-day-pagination.test.tsx b/src/test/app/(protected)/workorders/use-work-orders-day-pagination.test.tsx
new file mode 100644
index 00000000..fe43965a
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-work-orders-day-pagination.test.tsx
@@ -0,0 +1,83 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useWorkOrdersDayPagination } from "@/app/(protected)/workorders/_hooks/use-work-orders-day-pagination";
+import { DEFAULT_DAY_PAGE_SIZE } from "@/domain/work-orders/utils/day-pagination";
+
+describe("useWorkOrdersDayPagination (SH-241)", () => {
+  const onRevealed = vi.fn();
+  const manyItems = Array.from({ length: 60 }, (_, index) => ({ id: `wo-${index}` }));
+  const base = {
+    weekMonday: "2026-08-17",
+    selectedDayIso: "2026-08-17",
+    advActive: false,
+    dayItems: manyItems,
+    onRevealed,
+  };
+
+  it("defaults to 50 rows per page", () => {
+    const { result } = renderHook(() => useWorkOrdersDayPagination(base));
+    expect(result.current.pageSize).toBe(DEFAULT_DAY_PAGE_SIZE);
+    expect(result.current.page).toBe(0);
+  });
+
+  it("resets to page 1 when switching days", () => {
+    const { result, rerender } = renderHook(
+      (props: typeof base) => useWorkOrdersDayPagination(props),
+      { initialProps: base },
+    );
+    act(() => result.current.goToNextPage());
+    expect(result.current.page).toBe(1);
+    rerender({ ...base, selectedDayIso: "2026-08-18" });
+    expect(result.current.page).toBe(0);
+  });
+
+  it("resets to page 1 when the week changes", () => {
+    const { result, rerender } = renderHook(
+      (props: typeof base) => useWorkOrdersDayPagination(props),
+      { initialProps: base },
+    );
+    act(() => result.current.goToNextPage());
+    rerender({ ...base, weekMonday: "2026-08-10" });
+    expect(result.current.page).toBe(0);
+  });
+
+  it("resets to page 1 when rows-per-page changes", () => {
+    const { result } = renderHook(() => useWorkOrdersDayPagination(base));
+    act(() => result.current.goToNextPage());
+    act(() => result.current.setPageSize(25));
+    expect(result.current.page).toBe(0);
+    expect(result.current.pageSize).toBe(25);
+  });
+
+  it("resets to page 1 when a global filter is applied", () => {
+    const { result, rerender } = renderHook(
+      (props: typeof base) => useWorkOrdersDayPagination(props),
+      { initialProps: base },
+    );
+    act(() => result.current.goToNextPage());
+    rerender({ ...base, advActive: true });
+    expect(result.current.page).toBe(0);
+  });
+
+  it("does not advance past the last page", () => {
+    const { result } = renderHook(() => useWorkOrdersDayPagination(base));
+    act(() => result.current.goToNextPage());
+    act(() => result.current.goToNextPage());
+    expect(result.current.page).toBe(1);
+  });
+
+  it("selects the page that contains a revealed row beyond the first page", () => {
+    const dayItems = Array.from({ length: 60 }, (_, index) => ({ id: `wo-${index}` }));
+    const revealed = vi.fn();
+    const { result, rerender } = renderHook(
+      (props: typeof base) => useWorkOrdersDayPagination(props),
+      { initialProps: { ...base, dayItems: [] as { id: string }[], onRevealed: revealed } },
+    );
+
+    act(() => result.current.revealRow("wo-55"));
+    rerender({ ...base, dayItems, onRevealed: revealed, selectedDayIso: "2026-08-18" });
+
+    expect(result.current.page).toBe(1);
+    expect(revealed).toHaveBeenCalledWith("wo-55");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-work-orders-list-filters-week.test.tsx b/src/test/app/(protected)/workorders/use-work-orders-list-filters-week.test.tsx
new file mode 100644
index 00000000..223a9a96
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-work-orders-list-filters-week.test.tsx
@@ -0,0 +1,30 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+
+vi.mock("@/hooks/use-debounce", () => ({
+  useDebounce: <T,>(value: T) => value,
+}));
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    patchBoardField: vi.fn(),
+    getBoard: vi.fn(),
+  },
+}));
+
+describe("useWorkOrdersListFilters week navigation", () => {
+  it("changes the viewed week without patching schedule fields", () => {
+    const { result } = renderHook(() => useWorkOrdersListFilters());
+
+    act(() => {
+      result.current.setWeekMonday("2026-05-18");
+    });
+
+    expect(result.current.weekMonday).toBe("2026-05-18");
+    expect(result.current.selectedDayIso).toBe("2026-05-18");
+    expect(result.current.boardParams.weekStart).toBe("2026-05-18");
+    expect(workOrdersApi.patchBoardField).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-work-orders-list-page-cancel-toast.test.ts b/src/test/app/(protected)/workorders/use-work-orders-list-page-cancel-toast.test.ts
new file mode 100644
index 00000000..73007eea
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-work-orders-list-page-cancel-toast.test.ts
@@ -0,0 +1,122 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { toast } from "react-toastify";
+import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { workOrderCanceledMessage } from "@/domain/work-orders/utils/work-order-feedback-toasts";
+
+const patchField = vi.hoisted(() => vi.fn());
+
+vi.mock("react-toastify", () => ({
+  toast: {
+    warning: vi.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-list-filters", () => ({
+  useWorkOrdersListFilters: () => ({
+    search: "",
+    handleSearchChange: vi.fn(),
+    advOpen: false,
+    setAdvOpen: vi.fn(),
+    advApplied: null,
+    advInitial: EMPTY_ADVANCED_FILTERS,
+    applyAdvancedFilters: vi.fn(),
+    clearAdvancedFilters: vi.fn(),
+    clearAdvancedFilterChip: vi.fn(),
+    activeFilterCount: 0,
+    weekMonday: "2026-07-20",
+    selectedDayIso: "2026-07-20",
+    setWeekMonday: vi.fn(),
+    setSelectedDayIso: vi.fn(),
+    navigateToDay: vi.fn(),
+    dispatcherIds: new Set<string>(),
+    setDispatcherIds: vi.fn(),
+    types: new Set(),
+    setTypes: vi.fn(),
+  }),
+}));
+
+vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-table-data", () => ({
+  useWorkOrdersTableData: () => ({
+    rows: [],
+    totalCount: 0,
+    scopeTotalCount: 0,
+    isFetching: false,
+    isLoading: false,
+    setSelectedId: vi.fn(),
+    patchRow: vi.fn(),
+    clearRowPatch: vi.fn(),
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-table-mutations", () => ({
+  useWorkOrderTableMutations: () => ({
+    patchField,
+    patchFieldAsync: vi.fn(),
+    isPending: false,
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-orders-list", () => ({
+  useWorkOrderUsers: () => ({ data: [], isLoading: false }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderLocations: () => ({ data: [] }),
+  useWorkOrderVendors: () => ({ data: [] }),
+}));
+
+vi.mock("@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category", () => ({
+  useDropdownOptionsByCategory: () => ({ data: [] }),
+}));
+
+import { useWorkOrdersListPage } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-page";
+
+const row = { id: 77, woNumber: "WO-77" } as WorkOrderTableRow;
+
+describe("useWorkOrdersListPage cancel toast", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("wires Cancel WO to warning toast only after patch onSuccess", () => {
+    const { result } = renderHook(() => useWorkOrdersListPage());
+
+    act(() => {
+      result.current.setConfirmCancel(row);
+    });
+    act(() => {
+      result.current.handleConfirmCancel();
+    });
+
+    expect(patchField).toHaveBeenCalledWith(
+      77,
+      { status: "Canceled" },
+      expect.objectContaining({ onSuccess: expect.any(Function) }),
+    );
+    expect(toast.warning).not.toHaveBeenCalled();
+
+    const { onSuccess } = patchField.mock.calls[0][2] as { onSuccess: () => void };
+    onSuccess();
+    expect(toast.warning).toHaveBeenCalledWith(workOrderCanceledMessage("WO-77"));
+    expect(toast.success).not.toHaveBeenCalled();
+  });
+
+  it("completes a work order without a confirmation toast", () => {
+    const { result } = renderHook(() => useWorkOrdersListPage());
+
+    act(() => {
+      result.current.setConfirmComplete(row);
+    });
+    act(() => {
+      result.current.handleConfirmComplete();
+    });
+
+    expect(patchField).toHaveBeenCalledWith(77, { status: "Completed" });
+    expect(toast.success).not.toHaveBeenCalled();
+    expect(toast.warning).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-work-orders-list-page-completion-doc.test.ts b/src/test/app/(protected)/workorders/use-work-orders-list-page-completion-doc.test.ts
new file mode 100644
index 00000000..60c004c7
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-work-orders-list-page-completion-doc.test.ts
@@ -0,0 +1,162 @@
+import { renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const patchField = vi.hoisted(() => vi.fn());
+const patchFieldAsync = vi.hoisted(() => vi.fn());
+
+vi.mock("react-toastify", () => ({
+  toast: {
+    warning: vi.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-list-filters", () => ({
+  useWorkOrdersListFilters: () => ({
+    search: "",
+    handleSearchChange: vi.fn(),
+    advOpen: false,
+    setAdvOpen: vi.fn(),
+    advApplied: null,
+    advInitial: EMPTY_ADVANCED_FILTERS,
+    applyAdvancedFilters: vi.fn(),
+    clearAdvancedFilters: vi.fn(),
+    clearAdvancedFilterChip: vi.fn(),
+    activeFilterCount: 0,
+    weekMonday: "2026-07-20",
+    selectedDayIso: "2026-07-20",
+    setWeekMonday: vi.fn(),
+    setSelectedDayIso: vi.fn(),
+    navigateToDay: vi.fn(),
+    dispatcherIds: new Set<string>(),
+    setDispatcherIds: vi.fn(),
+    types: new Set(),
+    setTypes: vi.fn(),
+  }),
+}));
+
+vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-table-data", () => ({
+  useWorkOrdersTableData: () => ({
+    rows: [],
+    totalCount: 0,
+    scopeTotalCount: 0,
+    isFetching: false,
+    isLoading: false,
+    setSelectedId: vi.fn(),
+    patchRow: vi.fn(),
+    clearRowPatch: vi.fn(),
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-table-mutations", () => ({
+  useWorkOrderTableMutations: () => ({
+    patchField,
+    patchFieldAsync,
+    isPending: false,
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-orders-list", () => ({
+  useWorkOrderUsers: () => ({ data: [], isLoading: false }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderLocations: () => ({ data: [] }),
+  useWorkOrderVendors: () => ({ data: [] }),
+}));
+
+vi.mock("@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category", () => ({
+  useDropdownOptionsByCategory: () => ({ data: [] }),
+}));
+
+import { useWorkOrdersListPage } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-page";
+
+function closableRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 77,
+    woNumber: "24866",
+    type: "PM",
+    dispatcherId: "u1",
+    dispatcherName: "Dispatcher",
+    company: "Vendor Co",
+    vendorId: "7",
+    tech: "Tech One",
+    completedDate: "2026-09-15",
+    pm: "HVAC",
+    status: "In Progress",
+    docStatus: "No",
+    mediaCount: 0,
+    isPastDue: false,
+    rowVersion: "v1",
+    upliftSummary: { hasUplift: false, pendingCount: 0 },
+    ...overrides,
+  } as WorkOrderTableRow;
+}
+
+describe("useWorkOrdersListPage completion document (SH-341)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("completes the WO without confirmation once Generate persists the document", async () => {
+    const saved = closableRow({ docStatus: "Yes", rowVersion: "v2" });
+    patchFieldAsync.mockResolvedValueOnce({ kind: "board", row: saved });
+    patchFieldAsync.mockResolvedValueOnce({
+      kind: "board",
+      row: { ...saved, status: "Completed" },
+    });
+    const { result } = renderHook(() => useWorkOrdersListPage());
+
+    await result.current.saveCompletionDoc(closableRow(), { notes: "", generatedAt: "now" }, "Yes");
+
+    expect(patchFieldAsync).toHaveBeenNthCalledWith(1, 77, { docStatus: "Yes" });
+    expect(patchFieldAsync).toHaveBeenNthCalledWith(2, 77, { status: "Completed" }, saved);
+    expect(patchField).not.toHaveBeenCalled();
+    expect(result.current.confirmComplete).toBeNull();
+  });
+
+  it("does not complete on Save draft or Not required", async () => {
+    const { result } = renderHook(() => useWorkOrdersListPage());
+
+    patchFieldAsync.mockResolvedValueOnce({ kind: "board", row: closableRow({ docStatus: "No" }) });
+    await result.current.saveCompletionDoc(closableRow(), { notes: "", generatedAt: "" }, "No");
+    patchFieldAsync.mockResolvedValueOnce({ kind: "board", row: closableRow({ docStatus: "NN" }) });
+    await result.current.saveCompletionDoc(closableRow(), { notes: "", generatedAt: "" }, "NN");
+
+    expect(patchFieldAsync).toHaveBeenCalledTimes(2);
+    expect(patchFieldAsync).not.toHaveBeenCalledWith(
+      77,
+      { status: "Completed" },
+      expect.anything(),
+    );
+  });
+
+  it("keeps the closability gate: a missing service leaves the status unchanged", async () => {
+    patchFieldAsync.mockResolvedValueOnce({
+      kind: "board",
+      row: closableRow({ docStatus: "Yes", pm: "" }),
+    });
+    const { result } = renderHook(() => useWorkOrdersListPage());
+
+    await result.current.saveCompletionDoc(closableRow(), { notes: "", generatedAt: "now" }, "Yes");
+
+    expect(patchFieldAsync).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps the generated document when the automatic completion is rejected", async () => {
+    patchFieldAsync.mockResolvedValueOnce({
+      kind: "board",
+      row: closableRow({ docStatus: "Yes" }),
+    });
+    patchFieldAsync.mockRejectedValueOnce(new Error("Work order was modified."));
+    const { result } = renderHook(() => useWorkOrdersListPage());
+
+    await expect(
+      result.current.saveCompletionDoc(closableRow(), { notes: "", generatedAt: "now" }, "Yes"),
+    ).resolves.toBeUndefined();
+    expect(patchFieldAsync).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/use-work-orders-table-local-state-order.test.tsx b/src/test/app/(protected)/workorders/use-work-orders-table-local-state-order.test.tsx
new file mode 100644
index 00000000..f99a0ea8
--- /dev/null
+++ b/src/test/app/(protected)/workorders/use-work-orders-table-local-state-order.test.tsx
@@ -0,0 +1,198 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { useWorkOrdersTableLocalState } from "@/app/(protected)/workorders/_hooks/use-work-orders-table-local-state";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import {
+  boardRowOrderStorageKey,
+  loadBoardRowOrder,
+  saveBoardRowOrder,
+} from "@/domain/work-orders/utils/board-row-order-storage";
+
+const WEEK = "2026-07-13";
+
+function makeRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: "1",
+    woNumber: "WO-1",
+    site: "BK5",
+    type: "PM",
+    severity: null,
+    dispatcherId: "u1",
+    dispatcherName: "Alex",
+    scheduledOn: "2026-07-15",
+    completedDate: "",
+    targetWeek: "2026-07-13",
+    dayGroup: "07/15",
+    dayLabel: "WED · 07/15",
+    location: "Lobby",
+    locationId: "loc-1",
+    pm: "HVAC",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "7",
+    company: "Acme",
+    tech: "Sam",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    isAddOn: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "v1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    additionalContacts: [],
+    ...overrides,
+  };
+}
+
+function hookParams(
+  items: WorkOrderTableRow[],
+  overrides: Partial<{ advActive: boolean; isFetching: boolean }> = {},
+) {
+  return {
+    items,
+    weekMonday: WEEK,
+    advActive: false,
+    isFetching: false,
+    ownerId: "u1",
+    ...overrides,
+  };
+}
+
+describe("useWorkOrdersTableLocalState row order", () => {
+  afterEach(() => {
+    localStorage.removeItem(boardRowOrderStorageKey(WEEK, "u1"));
+    localStorage.removeItem(boardRowOrderStorageKey(WEEK));
+    localStorage.removeItem(boardRowOrderStorageKey("2026-07-20", "u1"));
+  });
+
+  it("reorders within a day and persists when advanced search is off", async () => {
+    const items = [makeRow({ id: "1" }), makeRow({ id: "2", woNumber: "WO-2" })];
+    const { result } = renderHook(() => useWorkOrdersTableLocalState(hookParams(items)));
+
+    await waitFor(() => {
+      expect(result.current.displayRows.map((row) => String(row.id))).toEqual(["1", "2"]);
+    });
+
+    act(() => {
+      result.current.reorderRows("1", "2");
+    });
+
+    expect(result.current.displayRows.map((row) => String(row.id))).toEqual(["2", "1"]);
+    expect(loadBoardRowOrder(WEEK, "u1")).toEqual({ "07/15": ["2", "1"] });
+  });
+
+  it("does not persist a reorder onto a canceled row", async () => {
+    const items = [
+      makeRow({ id: "1" }),
+      makeRow({ id: "2", woNumber: "WO-2", status: "Canceled" }),
+    ];
+    const { result } = renderHook(() => useWorkOrdersTableLocalState(hookParams(items)));
+
+    await waitFor(() => {
+      expect(result.current.displayRows.map((row) => String(row.id))).toEqual(["1", "2"]);
+    });
+
+    act(() => {
+      result.current.reorderRows("1", "2");
+    });
+
+    expect(result.current.displayRows.map((row) => String(row.id))).toEqual(["1", "2"]);
+    expect(loadBoardRowOrder(WEEK, "u1")).toEqual({});
+  });
+
+  it("does not write storage while advanced search is active", async () => {
+    const items = [makeRow({ id: "1" }), makeRow({ id: "2", woNumber: "WO-2" })];
+    const { result } = renderHook(() =>
+      useWorkOrdersTableLocalState(hookParams(items, { advActive: true })),
+    );
+
+    await waitFor(() => {
+      expect(result.current.displayRows).toHaveLength(2);
+    });
+
+    act(() => {
+      result.current.reorderRows("1", "2");
+    });
+
+    expect(result.current.displayRows.map((row) => String(row.id))).toEqual(["2", "1"]);
+    expect(loadBoardRowOrder(WEEK, "u1")).toEqual({});
+  });
+
+  it("applies stored order after load", async () => {
+    saveBoardRowOrder(WEEK, { "07/15": ["2", "1"] }, "u1");
+    const items = [makeRow({ id: "1" }), makeRow({ id: "2", woNumber: "WO-2" })];
+    const { result } = renderHook(() => useWorkOrdersTableLocalState(hookParams(items)));
+
+    await waitFor(() => {
+      expect(result.current.displayRows.map((row) => String(row.id))).toEqual(["2", "1"]);
+    });
+  });
+
+  it("drops the id from the old day bucket when scheduledOn changes day", async () => {
+    saveBoardRowOrder(WEEK, { "07/15": ["1", "2"] }, "u1");
+    const items = [makeRow({ id: "1" }), makeRow({ id: "2", woNumber: "WO-2" })];
+    const { result } = renderHook(() => useWorkOrdersTableLocalState(hookParams(items)));
+
+    await waitFor(() => {
+      expect(result.current.displayRows).toHaveLength(2);
+    });
+
+    act(() => {
+      result.current.patchRow("1", { scheduledOn: "2026-07-16" });
+    });
+
+    expect(loadBoardRowOrder(WEEK, "u1")).toEqual({ "07/15": ["2"], "07/16": ["1"] });
+  });
+
+  it("writes cross-week schedule moves under the destination week key", async () => {
+    saveBoardRowOrder(WEEK, { "07/15": ["1", "2"] }, "u1");
+    const items = [makeRow({ id: "1" }), makeRow({ id: "2", woNumber: "WO-2" })];
+    const { result } = renderHook(() => useWorkOrdersTableLocalState(hookParams(items)));
+
+    await waitFor(() => {
+      expect(result.current.displayRows).toHaveLength(2);
+    });
+
+    act(() => {
+      result.current.patchRow("1", { scheduledOn: "2026-07-20" });
+    });
+
+    expect(loadBoardRowOrder(WEEK, "u1")).toEqual({ "07/15": ["2"] });
+    expect(loadBoardRowOrder("2026-07-20", "u1")).toEqual({ "07/20": ["1"] });
+  });
+
+  it("reloads stored order when another session writes the same key", async () => {
+    const items = [makeRow({ id: "1" }), makeRow({ id: "2", woNumber: "WO-2" })];
+    const { result } = renderHook(() => useWorkOrdersTableLocalState(hookParams(items)));
+
+    await waitFor(() => {
+      expect(result.current.displayRows.map((row) => String(row.id))).toEqual(["1", "2"]);
+    });
+
+    saveBoardRowOrder(WEEK, { "07/15": ["2", "1"] }, "u1");
+    act(() => {
+      window.dispatchEvent(
+        new StorageEvent("storage", { key: boardRowOrderStorageKey(WEEK, "u1") }),
+      );
+    });
+
+    expect(result.current.displayRows.map((row) => String(row.id))).toEqual(["2", "1"]);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/vendor-dialog-add-technician.test.tsx b/src/test/app/(protected)/workorders/vendor-dialog-add-technician.test.tsx
new file mode 100644
index 00000000..0f8ee6a5
--- /dev/null
+++ b/src/test/app/(protected)/workorders/vendor-dialog-add-technician.test.tsx
@@ -0,0 +1,51 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { VendorDialogAddTechnician } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-add-technician";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { isDraftVendorId } from "@/domain/vendors/utils/draft-vendor";
+import { renderWithProviders } from "@/test/test-utils";
+
+const companyVendor: VendorDropdownItem = {
+  id: 10,
+  companyName: "Gateway Plumbing",
+  contactName: "Adam Whyte",
+  tradeSpecialties: "Plumbing",
+  address: "1 Main St",
+  distanceMiles: 4.2,
+  email: "dispatch@gateway.test",
+};
+
+describe("VendorDialogAddTechnician", () => {
+  it("stages a draft technician locally without calling the create API", () => {
+    const onCreated = vi.fn();
+
+    renderWithProviders(
+      <VendorDialogAddTechnician
+        companyName="Gateway Plumbing"
+        companyVendor={companyVendor}
+        onCreated={onCreated}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /\+ add technician/i }));
+    fireEvent.change(screen.getByPlaceholderText("Full name"), {
+      target: { value: "Jordan Lee" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("(000) 000-0000"), {
+      target: { value: "3145550199" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /^add$/i }));
+
+    expect(onCreated).toHaveBeenCalledTimes(1);
+    const [draftVendor, phone, payload] = onCreated.mock.calls[0] ?? [];
+    expect(isDraftVendorId(draftVendor.id)).toBe(true);
+    expect(draftVendor.contactName).toBe("Jordan Lee");
+    expect(phone).toBeTruthy();
+    expect(payload).toEqual(
+      expect.objectContaining({
+        companyName: "Gateway Plumbing",
+        contactName: "Jordan Lee",
+      }),
+    );
+  });
+});
diff --git a/src/test/app/(protected)/workorders/vendor-dialog-can-submit.test.ts b/src/test/app/(protected)/workorders/vendor-dialog-can-submit.test.ts
new file mode 100644
index 00000000..a2f7670a
--- /dev/null
+++ b/src/test/app/(protected)/workorders/vendor-dialog-can-submit.test.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it } from "vitest";
+import {
+  computeVendorDialogCanSubmit,
+  type VendorDialogSubmitSnapshot,
+} from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-can-submit";
+
+const empty: VendorDialogSubmitSnapshot = {
+  company: "",
+  selectedKey: "",
+  phone: "",
+  notes: "",
+  pendingCreateCount: 0,
+};
+
+const assigned: VendorDialogSubmitSnapshot = {
+  company: "Gateway Plumbing",
+  selectedKey: "10",
+  phone: "(314) 555-0100",
+  notes: "",
+  pendingCreateCount: 0,
+};
+
+describe("computeVendorDialogCanSubmit", () => {
+  it("rejects an empty untouched assignment", () => {
+    expect(
+      computeVendorDialogCanSubmit({
+        current: empty,
+        baseline: empty,
+      }),
+    ).toBe(false);
+  });
+
+  it("rejects an existing assignment with no field changes", () => {
+    expect(
+      computeVendorDialogCanSubmit({
+        current: assigned,
+        baseline: assigned,
+      }),
+    ).toBe(false);
+  });
+
+  it("allows save after the technician key changes", () => {
+    expect(
+      computeVendorDialogCanSubmit({
+        current: { ...assigned, selectedKey: "11" },
+        baseline: assigned,
+      }),
+    ).toBe(true);
+  });
+
+  it("allows save when a new technician is staged", () => {
+    expect(
+      computeVendorDialogCanSubmit({
+        current: { ...assigned, selectedKey: "draft-1", pendingCreateCount: 1 },
+        baseline: assigned,
+      }),
+    ).toBe(true);
+  });
+
+  it("rejects notes-only changes because notes are not persisted", () => {
+    expect(
+      computeVendorDialogCanSubmit({
+        current: { ...assigned, notes: "Call before arrival" },
+        baseline: assigned,
+      }),
+    ).toBe(false);
+  });
+
+  it("does not allow notes-only save without a company or technician", () => {
+    expect(
+      computeVendorDialogCanSubmit({
+        current: { ...empty, notes: "Call before arrival" },
+        baseline: empty,
+      }),
+    ).toBe(false);
+  });
+
+  it("allows a company-only assignment", () => {
+    expect(
+      computeVendorDialogCanSubmit({
+        current: { ...empty, company: "Gateway Plumbing" },
+        baseline: empty,
+      }),
+    ).toBe(true);
+  });
+
+  it("rejects a technician without a company", () => {
+    expect(
+      computeVendorDialogCanSubmit({
+        current: { ...empty, selectedKey: "10" },
+        baseline: empty,
+      }),
+    ).toBe(false);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/vendor-dialog-frozen-company.test.tsx b/src/test/app/(protected)/workorders/vendor-dialog-frozen-company.test.tsx
new file mode 100644
index 00000000..413eb2f1
--- /dev/null
+++ b/src/test/app/(protected)/workorders/vendor-dialog-frozen-company.test.tsx
@@ -0,0 +1,90 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { VendorDialogBody } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-body";
+import { VendorDialogCompanyCard } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-company-card";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+
+const LIVE_VENDOR: VendorDropdownItem = {
+  id: 10,
+  companyName: "Live Vendor",
+  contactName: "Live Contact",
+  tradeSpecialties: "Live Trade",
+  address: "900 Live St",
+  distanceMiles: 12,
+  email: "live@example.com",
+};
+
+describe("VendorDialogCompanyCard completion snapshot", () => {
+  it("does not fill missing frozen fields from the live vendor registry", () => {
+    render(
+      <VendorDialogCompanyCard
+        company="Frozen Vendor"
+        vendor={LIVE_VENDOR}
+        frozenCompany={{ name: "Frozen Vendor" }}
+      />,
+    );
+
+    expect(screen.getByText("Frozen Vendor")).toBeInTheDocument();
+    expect(screen.queryByText("Live Contact")).not.toBeInTheDocument();
+    expect(screen.queryByText("Live Trade")).not.toBeInTheDocument();
+    expect(screen.queryByText("live@example.com")).not.toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: /open in google maps/i })).not.toBeInTheDocument();
+  });
+
+  it("renders the complete frozen address instead of the live vendor address", () => {
+    render(
+      <VendorDialogCompanyCard
+        company="Frozen Vendor"
+        vendor={LIVE_VENDOR}
+        frozenCompany={{
+          name: "Frozen Vendor",
+          address: "200 Vendor Ave",
+          city: "Chicago",
+          state: "IL",
+          zip: "60602",
+        }}
+      />,
+    );
+
+    expect(screen.getByText("200 Vendor Ave, Chicago, IL, 60602")).toBeInTheDocument();
+    expect(screen.queryByText("900 Live St")).not.toBeInTheDocument();
+  });
+
+  it("shows the frozen technician instead of a renamed live roster contact", () => {
+    render(
+      <VendorDialogBody
+        selectedCompany="Frozen Vendor"
+        companyOptions={[{ key: "Frozen Vendor", label: "Frozen Vendor" }]}
+        selectedKey={String(LIVE_VENDOR.id)}
+        technicianOptions={[
+          {
+            key: String(LIVE_VENDOR.id),
+            label: LIVE_VENDOR.contactName,
+            name: LIVE_VENDOR.contactName,
+            company: LIVE_VENDOR.companyName,
+            phone: "",
+            vendor: LIVE_VENDOR,
+          },
+        ]}
+        anchorCompanyName="Frozen Vendor"
+        companyVendorForAdd={LIVE_VENDOR}
+        tech="Frozen Tech"
+        phone="111"
+        notes=""
+        resolvedCompany="Frozen Vendor"
+        selectedVendor={LIVE_VENDOR}
+        frozenCompany={{ name: "Frozen Vendor", contactName: "Frozen Tech", phone: "111" }}
+        saveError={null}
+        onCompanyPick={() => undefined}
+        onPick={() => undefined}
+        onPhoneChange={() => undefined}
+        onNotesChange={() => undefined}
+        onTechnicianCreated={() => undefined}
+      />,
+    );
+
+    expect(screen.getAllByText("Frozen Tech").length).toBeGreaterThan(0);
+    expect(screen.queryByText("Live Contact")).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /\+ add technician/i })).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/vendor-dialog-map-and-scroll.test.tsx b/src/test/app/(protected)/workorders/vendor-dialog-map-and-scroll.test.tsx
new file mode 100644
index 00000000..013dcc2d
--- /dev/null
+++ b/src/test/app/(protected)/workorders/vendor-dialog-map-and-scroll.test.tsx
@@ -0,0 +1,90 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  VENDOR_DIALOG_SURFACE_MAX_HEIGHT,
+  VendorDialog,
+} from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog";
+import { VendorDialogCompanyCard } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog-company-card";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/domain/vendors/use-cases/use-create-vendor", () => ({
+  useCreateVendor: () => ({
+    mutateAsync: vi.fn(),
+    isPending: false,
+  }),
+}));
+
+const LIVE_VENDOR: VendorDropdownItem = {
+  id: 10,
+  companyName: "Gateway Plumbing",
+  contactName: "Jordan Lee",
+  tradeSpecialties: "Plumbing",
+  address: "900 Live St",
+  distanceMiles: 4.2,
+  email: "dispatch@gateway.test",
+};
+
+describe("VendorDialogCompanyCard map preview queries", () => {
+  it("embeds the live vendor address", () => {
+    renderWithProviders(
+      <VendorDialogCompanyCard company="Gateway Plumbing" vendor={LIVE_VENDOR} />,
+      { withAuth: false },
+    );
+
+    const frame = screen.getByTitle("Map of 900 Live St");
+    expect(frame).toHaveAttribute(
+      "src",
+      "https://www.google.com/maps?q=900%20Live%20St&output=embed",
+    );
+  });
+
+  it("embeds the frozen company's composed snapshot address, not the live one", () => {
+    renderWithProviders(
+      <VendorDialogCompanyCard
+        company="Frozen Vendor"
+        vendor={LIVE_VENDOR}
+        frozenCompany={{
+          name: "Frozen Vendor",
+          address: "200 Vendor Ave",
+          city: "Chicago",
+          state: "IL",
+          zip: "60602",
+        }}
+      />,
+      { withAuth: false },
+    );
+
+    const frame = screen.getByTitle("Map of 200 Vendor Ave, Chicago, IL, 60602");
+    expect(frame).toHaveAttribute(
+      "src",
+      "https://www.google.com/maps?q=200%20Vendor%20Ave%2C%20Chicago%2C%20IL%2C%2060602&output=embed",
+    );
+    expect(screen.queryByTitle("Map of 900 Live St")).not.toBeInTheDocument();
+  });
+});
+
+describe("VendorDialog scroll boundary", () => {
+  it("bounds the dialog surface and scrolls internally", () => {
+    renderWithProviders(
+      <VendorDialog
+        open
+        onOpenChange={vi.fn()}
+        vendorId={10}
+        company="Gateway Plumbing"
+        tech="Jordan Lee"
+        vendors={[LIVE_VENDOR]}
+        onSave={vi.fn()}
+      />,
+    );
+
+    const surface = screen.getByRole("dialog");
+    expect(VENDOR_DIALOG_SURFACE_MAX_HEIGHT).toBe("55vh");
+    expect(surface.style.maxHeight).toBe(VENDOR_DIALOG_SURFACE_MAX_HEIGHT);
+    expect(surface.style.display).toBe("flex");
+
+    const content = screen.getByRole("dialog").querySelector(".MuiDialogContent-root");
+    expect(content).not.toBeNull();
+    expect(content).toHaveStyle({ overflowY: "auto", minHeight: "0px" });
+  });
+});
diff --git a/src/test/app/(protected)/workorders/vendor-dialog-save-gate.test.tsx b/src/test/app/(protected)/workorders/vendor-dialog-save-gate.test.tsx
new file mode 100644
index 00000000..59f7e004
--- /dev/null
+++ b/src/test/app/(protected)/workorders/vendor-dialog-save-gate.test.tsx
@@ -0,0 +1,159 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { VendorDialog } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/domain/vendors/use-cases/use-create-vendor", () => ({
+  useCreateVendor: () => ({
+    mutateAsync: vi.fn(),
+    isPending: false,
+  }),
+}));
+
+const jordan: VendorDropdownItem = {
+  id: 10,
+  companyName: "Gateway Plumbing",
+  contactName: "Jordan Lee",
+  tradeSpecialties: "Plumbing",
+  address: "1 Main St",
+  distanceMiles: 4.2,
+  email: "dispatch@gateway.test",
+};
+
+const casey: VendorDropdownItem = {
+  ...jordan,
+  id: 11,
+  contactName: "Casey New",
+};
+
+const avery: VendorDropdownItem = {
+  ...jordan,
+  id: 12,
+  companyName: "Coastal HVAC",
+  contactName: "Avery Chen",
+  tradeSpecialties: "HVAC",
+};
+
+function renderAssigned(onSave = vi.fn()) {
+  renderWithProviders(
+    <VendorDialog
+      open
+      onOpenChange={vi.fn()}
+      vendorId={10}
+      company="Gateway Plumbing"
+      tech="Jordan Lee"
+      techPhone="(314) 555-0100"
+      vendors={[jordan, casey]}
+      onSave={onSave}
+    />,
+  );
+  return onSave;
+}
+
+describe("VendorDialog save gate", () => {
+  it("does not persist when the empty modal is saved unchanged", () => {
+    const onSave = vi.fn();
+    renderWithProviders(
+      <VendorDialog
+        open
+        onOpenChange={vi.fn()}
+        vendorId=""
+        company=""
+        tech=""
+        vendors={[]}
+        onSave={onSave}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: /pick a company first/i })).toBeDisabled();
+    const save = screen.getByRole("button", { name: /^save$/i });
+    expect(save).not.toBeDisabled();
+    expect(save).toHaveAttribute("aria-disabled", "true");
+    expect(save).toHaveStyle({ opacity: "0.5", cursor: "not-allowed" });
+    fireEvent.click(save);
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it("does not persist when an existing assignment is saved unchanged", () => {
+    const onSave = renderAssigned();
+    fireEvent.click(screen.getByRole("button", { name: /^save$/i }));
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it("persists after the selected technician changes", async () => {
+    const onSave = renderAssigned();
+    fireEvent.click(screen.getByRole("button", { name: /jordan lee/i }));
+    fireEvent.click(await screen.findByRole("button", { name: /casey new/i }));
+    fireEvent.click(screen.getByRole("button", { name: /^save$/i }));
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({
+          vendorId: "11",
+          tech: "Casey New",
+          company: "Gateway Plumbing",
+        }),
+      );
+    });
+  });
+
+  it("persists a company-only assignment without selecting a technician", async () => {
+    const onSave = vi.fn();
+    renderWithProviders(
+      <VendorDialog
+        open
+        onOpenChange={vi.fn()}
+        vendorId=""
+        company=""
+        tech=""
+        vendors={[jordan, casey]}
+        onSave={onSave}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /select company/i }));
+    fireEvent.click(await screen.findByRole("button", { name: "Gateway Plumbing" }));
+    fireEvent.click(screen.getByRole("button", { name: /^save$/i }));
+
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({
+        vendorId: "10",
+        company: "Gateway Plumbing",
+        tech: "",
+        techPhone: "",
+      }),
+    );
+  });
+
+  it("only offers technicians from the selected company", async () => {
+    renderWithProviders(
+      <VendorDialog
+        open
+        onOpenChange={vi.fn()}
+        vendorId=""
+        company=""
+        tech=""
+        vendors={[jordan, casey, avery]}
+        onSave={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /select company/i }));
+    fireEvent.click(await screen.findByRole("button", { name: "Coastal HVAC" }));
+    fireEvent.click(screen.getByRole("button", { name: /select technician/i }));
+
+    expect(await screen.findByRole("button", { name: "Avery Chen" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Jordan Lee" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Casey New" })).not.toBeInTheDocument();
+  });
+
+  it("does not persist after a notes-only change", () => {
+    const onSave = renderAssigned();
+    fireEvent.change(screen.getByPlaceholderText("Contact preferences, availability, etc."), {
+      target: { value: "Gate code 12" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /^save$/i }));
+    expect(onSave).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/vendor-dialog-stable-identity.test.tsx b/src/test/app/(protected)/workorders/vendor-dialog-stable-identity.test.tsx
new file mode 100644
index 00000000..fb89fc1c
--- /dev/null
+++ b/src/test/app/(protected)/workorders/vendor-dialog-stable-identity.test.tsx
@@ -0,0 +1,230 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { VendorDialog } from "@/app/(protected)/workorders/_components/list/table/cells/vendor-dialog";
+import type { Vendor } from "@/domain/vendors/types/vendor";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { renderWithProviders } from "@/test/test-utils";
+
+const mutateAsync = vi.fn();
+
+vi.mock("@/domain/vendors/use-cases/use-create-vendor", () => ({
+  useCreateVendor: () => ({
+    mutateAsync,
+    isPending: false,
+  }),
+}));
+
+const existingVendor: VendorDropdownItem = {
+  id: 10,
+  companyName: "Gateway Plumbing",
+  contactName: "Jordan Lee",
+  tradeSpecialties: "Plumbing",
+  address: "1 Main St",
+  distanceMiles: 4.2,
+  email: "dispatch@gateway.test",
+};
+
+const createdVendor: Vendor = {
+  id: 99,
+  companyId: 10,
+  companyName: "Gateway Plumbing",
+  contactName: "Jordan Lee",
+  email: "dispatch@gateway.test",
+  phone: "(314) 555-9999",
+  companyPhone: "",
+  googleMapsUrl: "",
+  notes: "",
+  totalJobs: 0,
+  address: "1 Main St",
+  city: "",
+  state: "",
+  zip: "",
+  tradeSpecialties: "Plumbing",
+  isActive: true,
+  preferredContact: "Phone",
+};
+
+describe("VendorDialog stable technician identity", () => {
+  beforeEach(() => {
+    mutateAsync.mockReset();
+    mutateAsync.mockResolvedValue(createdVendor);
+  });
+
+  it("keeps draft identity on same-name collision and posts live phone on save", async () => {
+    const onSave = vi.fn();
+    const onOpenChange = vi.fn();
+
+    renderWithProviders(
+      <VendorDialog
+        open={true}
+        onOpenChange={onOpenChange}
+        vendorId={10}
+        company="Gateway Plumbing"
+        tech="Jordan Lee"
+        techPhone="(314) 555-0100"
+        vendors={[existingVendor]}
+        onSave={onSave}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /\+ add technician/i }));
+    fireEvent.change(screen.getByPlaceholderText("Full name"), {
+      target: { value: "Jordan Lee" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("(000) 000-0000"), {
+      target: { value: "3145550199" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /^add$/i }));
+
+    // Draft stays staged: add form collapses and select still shows the colliding name.
+    expect(screen.getByRole("button", { name: /\+ add technician/i })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Jordan Lee" })).toBeTruthy();
+
+    fireEvent.change(screen.getByDisplayValue("3145550199"), {
+      target: { value: "(314) 555-9999" },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /^save$/i }));
+
+    await waitFor(() => {
+      expect(mutateAsync).toHaveBeenCalledTimes(1);
+    });
+
+    expect(mutateAsync).toHaveBeenCalledWith(
+      expect.objectContaining({
+        contactName: "Jordan Lee",
+        companyName: "Gateway Plumbing",
+        phone: "(314) 555-9999",
+      }),
+    );
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({
+          vendorId: "99",
+          tech: "Jordan Lee",
+          company: "Gateway Plumbing",
+          techPhone: "(314) 555-9999",
+        }),
+      );
+    });
+
+    // Must not persist the pre-existing colliding vendor id.
+    expect(onSave.mock.calls[0]?.[0].vendorId).not.toBe("10");
+  });
+
+  it("does not clear staged draft when technicianOptions rebuild after add", async () => {
+    const onSave = vi.fn();
+    mutateAsync.mockResolvedValue({
+      ...createdVendor,
+      id: 88,
+      contactName: "Casey New",
+      phone: "3145550188",
+    });
+
+    renderWithProviders(
+      <VendorDialog
+        open={true}
+        onOpenChange={vi.fn()}
+        vendorId={11}
+        company="Gateway Plumbing"
+        tech="Adam Whyte"
+        techPhone=""
+        vendors={[
+          existingVendor,
+          {
+            ...existingVendor,
+            id: 11,
+            contactName: "Adam Whyte",
+          },
+        ]}
+        onSave={onSave}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /\+ add technician/i }));
+    fireEvent.change(screen.getByPlaceholderText("Full name"), {
+      target: { value: "Casey New" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("(000) 000-0000"), {
+      target: { value: "3145550188" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /^add$/i }));
+
+    expect(screen.getByRole("button", { name: "Casey New" })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: /^save$/i }));
+
+    await waitFor(() => {
+      expect(mutateAsync).toHaveBeenCalledTimes(1);
+    });
+
+    expect(mutateAsync).toHaveBeenCalledWith(
+      expect.objectContaining({
+        contactName: "Casey New",
+        phone: "3145550188",
+      }),
+    );
+
+    await waitFor(() => {
+      expect(onSave).toHaveBeenCalledWith(
+        expect.objectContaining({
+          vendorId: "88",
+          tech: "Casey New",
+        }),
+      );
+    });
+  });
+
+  it("keeps a staged draft when the same company is picked again", async () => {
+    const onSave = vi.fn();
+    mutateAsync.mockResolvedValue({
+      ...createdVendor,
+      id: 88,
+      contactName: "Casey New",
+      phone: "3145550188",
+    });
+
+    renderWithProviders(
+      <VendorDialog
+        open={true}
+        onOpenChange={vi.fn()}
+        vendorId={10}
+        company="Gateway Plumbing"
+        tech="Jordan Lee"
+        techPhone="(314) 555-0100"
+        vendors={[existingVendor]}
+        onSave={onSave}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /\+ add technician/i }));
+    fireEvent.change(screen.getByPlaceholderText("Full name"), {
+      target: { value: "Casey New" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("(000) 000-0000"), {
+      target: { value: "3145550188" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /^add$/i }));
+
+    fireEvent.click(screen.getByRole("button", { name: "Gateway Plumbing" }));
+    const companyButtons = await screen.findAllByRole("button", { name: "Gateway Plumbing" });
+    fireEvent.click(companyButtons[companyButtons.length - 1]!);
+    fireEvent.click(screen.getByRole("button", { name: /^save$/i }));
+
+    await waitFor(() => {
+      expect(mutateAsync).toHaveBeenCalledWith(
+        expect.objectContaining({
+          contactName: "Casey New",
+          phone: "3145550188",
+        }),
+      );
+    });
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({
+        vendorId: "88",
+        tech: "Casey New",
+      }),
+    );
+  });
+});
diff --git a/src/test/app/(protected)/workorders/week-day-nav.test.tsx b/src/test/app/(protected)/workorders/week-day-nav.test.tsx
new file mode 100644
index 00000000..17e66cdd
--- /dev/null
+++ b/src/test/app/(protected)/workorders/week-day-nav.test.tsx
@@ -0,0 +1,132 @@
+import { act, render, renderHook, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { DayTabs } from "@/app/(protected)/workorders/_components/list/filter-bar/day-tabs";
+import { WeekSelector } from "@/app/(protected)/workorders/_components/list/filter-bar/week-selector";
+import { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
+import { firstWeekday } from "@/domain/work-orders/utils/week-day-nav-utils";
+import { WORK_ORDER_TYPE_API } from "@/domain/work-orders/types/work-order-board";
+
+vi.mock("@/domain/work-orders/utils/wizard-date-utils", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@/domain/work-orders/utils/wizard-date-utils")>();
+  return {
+    ...actual,
+    todayIso: () => "2026-08-19",
+  };
+});
+
+function WeekDayNavHarness() {
+  const [weekMonday, setWeekMonday] = useState("2026-05-18");
+  const [selectedDayIso, setSelectedDayIso] = useState("2026-05-20");
+
+  const handleWeekChange = (mondayIso: string) => {
+    setWeekMonday(mondayIso);
+    setSelectedDayIso(firstWeekday(mondayIso));
+  };
+
+  return (
+    <div>
+      <WeekSelector weekMonday={weekMonday} onChange={handleWeekChange} />
+      <DayTabs
+        weekMonday={weekMonday}
+        selectedDayIso={selectedDayIso}
+        onChange={setSelectedDayIso}
+      />
+    </div>
+  );
+}
+
+describe("WeekSelector and DayTabs (SH-240)", () => {
+  it("renders Mon–Fri tabs for the active week", () => {
+    render(
+      <DayTabs weekMonday="2026-05-18" selectedDayIso="2026-05-18" onChange={() => undefined} />,
+    );
+
+    expect(screen.getByRole("tab", { name: "Mon · 05/18" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByRole("tab", { name: "Tue · 05/19" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Wed · 05/20" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Thu · 05/21" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Fri · 05/22" })).toBeInTheDocument();
+  });
+
+  it("selects a day tab without expanding other days", async () => {
+    const user = userEvent.setup();
+    render(<WeekDayNavHarness />);
+
+    await user.click(screen.getByRole("tab", { name: "Thu · 05/21" }));
+    expect(screen.getByRole("tab", { name: "Thu · 05/21" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByRole("tab", { name: "Wed · 05/20" })).toHaveAttribute(
+      "aria-selected",
+      "false",
+    );
+  });
+
+  it("resets to Monday when the week picker selects another week", async () => {
+    const user = userEvent.setup();
+    render(<WeekDayNavHarness />);
+
+    await user.click(screen.getByRole("button", { name: "Week 5/18–5/22" }));
+    await user.click(screen.getByRole("button", { name: /May 11/i }));
+
+    expect(screen.getByRole("button", { name: "Week 5/11–5/15" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Mon · 05/11" })).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByRole("tab", { name: "Fri · 05/15" })).toBeInTheDocument();
+    expect(screen.queryByRole("tab", { name: "Mon · 05/18" })).not.toBeInTheDocument();
+  });
+});
+
+describe("useWorkOrdersListFilters day state (SH-240)", () => {
+  it("starts on today in the live week and resets to Monday on week change", () => {
+    const { result } = renderHook(() => useWorkOrdersListFilters());
+
+    expect(result.current.weekMonday).toBe("2026-08-17");
+    expect(result.current.selectedDayIso).toBe("2026-08-19");
+
+    act(() => {
+      result.current.setWeekMonday("2026-08-10");
+    });
+
+    expect(result.current.weekMonday).toBe("2026-08-10");
+    expect(result.current.selectedDayIso).toBe("2026-08-10");
+  });
+
+  it("follows a scheduled date onto that weekday instead of resetting to Monday", () => {
+    const { result } = renderHook(() => useWorkOrdersListFilters());
+
+    act(() => {
+      result.current.navigateToDay("2026-05-20");
+    });
+
+    expect(result.current.weekMonday).toBe("2026-05-18");
+    expect(result.current.selectedDayIso).toBe("2026-05-20");
+  });
+
+  it("maps selected types onto board params and resets the page", () => {
+    const { result } = renderHook(() => useWorkOrdersListFilters());
+
+    act(() => {
+      result.current.setPage(2);
+    });
+    act(() => {
+      result.current.setTypes(new Set(["PM", "Emergency"]));
+    });
+
+    expect(result.current.page).toBe(0);
+    expect(result.current.boardParams.types).toEqual([
+      WORK_ORDER_TYPE_API.PM,
+      WORK_ORDER_TYPE_API.Emergency,
+    ]);
+    expect(result.current.boardParams.overdue).toBeUndefined();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wizard-schedule-date-range.test.tsx b/src/test/app/(protected)/workorders/wizard-schedule-date-range.test.tsx
new file mode 100644
index 00000000..4d70e893
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wizard-schedule-date-range.test.tsx
@@ -0,0 +1,143 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WizardStepTypeSchedule } from "@/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule";
+import {
+  EMPTY_WIZARD_DRAFT,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+import { pad2, todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+
+function baseDraft(overrides: Partial<WorkOrderWizardDraft> = {}): WorkOrderWizardDraft {
+  return { ...EMPTY_WIZARD_DRAFT, type: "PM", ...overrides };
+}
+
+function currentMonthIso(day: number): string {
+  const [y, m] = todayIso().split("-").map(Number);
+  return `${y}-${pad2(m)}-${pad2(day)}`;
+}
+
+async function openScheduleRangePicker() {
+  fireEvent.click(screen.getByRole("button", { name: /pick a date/i }));
+  const rangeTab = await screen.findByRole("button", { name: "Range" });
+  fireEvent.click(rangeTab);
+}
+
+describe("WizardStepTypeSchedule — Schedule On range selection", () => {
+  it("clicks start then end in order and submits schedMode range with matching dates", async () => {
+    const onUpdate = vi.fn();
+    const onPatch = vi.fn();
+
+    render(
+      <WizardStepTypeSchedule
+        draft={baseDraft()}
+        users={[]}
+        onUpdate={onUpdate}
+        onPatch={onPatch}
+      />,
+    );
+
+    await openScheduleRangePicker();
+
+    const startIso = currentMonthIso(5);
+    const endIso = currentMonthIso(20);
+
+    fireEvent.click(screen.getByRole("button", { name: "5" }));
+    fireEvent.click(screen.getByRole("button", { name: "20" }));
+    fireEvent.click(screen.getByRole("button", { name: /^done$/i }));
+
+    expect(onPatch).toHaveBeenCalledWith({
+      scheduledOn: startIso,
+      scheduleEnd: endIso,
+      schedMode: "range",
+      scheduleWeekOnly: false,
+      targetWeek: "",
+      isAddOnOverride: false,
+      status: "Scheduled",
+    });
+  });
+
+  it("normalizes an out-of-order click (end clicked before start) into start<end on submission", async () => {
+    const onUpdate = vi.fn();
+    const onPatch = vi.fn();
+
+    render(
+      <WizardStepTypeSchedule
+        draft={baseDraft()}
+        users={[]}
+        onUpdate={onUpdate}
+        onPatch={onPatch}
+      />,
+    );
+
+    await openScheduleRangePicker();
+
+    const laterIso = currentMonthIso(20);
+    const earlierIso = currentMonthIso(5);
+
+    // User clicks the later date first, then an earlier date — the field must
+    // normalize this into (start = earlier, end = later) before submission.
+    fireEvent.click(screen.getByRole("button", { name: "20" }));
+    fireEvent.click(screen.getByRole("button", { name: "5" }));
+    fireEvent.click(screen.getByRole("button", { name: /^done$/i }));
+
+    expect(onPatch).toHaveBeenCalledWith({
+      scheduledOn: earlierIso,
+      scheduleEnd: laterIso,
+      schedMode: "range",
+      scheduleWeekOnly: false,
+      targetWeek: "",
+      isAddOnOverride: false,
+      status: "Scheduled",
+    });
+  });
+
+  it("does not submit until both a start and end date are picked", async () => {
+    const onUpdate = vi.fn();
+    const onPatch = vi.fn();
+
+    render(
+      <WizardStepTypeSchedule
+        draft={baseDraft()}
+        users={[]}
+        onUpdate={onUpdate}
+        onPatch={onPatch}
+      />,
+    );
+
+    await openScheduleRangePicker();
+
+    fireEvent.click(screen.getByRole("button", { name: "5" }));
+
+    expect(screen.getByRole("button", { name: /^done$/i })).toBeDisabled();
+    expect(onPatch).not.toHaveBeenCalled();
+  });
+
+  it("does not promote Incomplete to Scheduled for week-only Schedule On", async () => {
+    const onUpdate = vi.fn();
+    const onPatch = vi.fn();
+
+    render(
+      <WizardStepTypeSchedule
+        draft={baseDraft({ status: "Incomplete" })}
+        users={[]}
+        onUpdate={onUpdate}
+        onPatch={onPatch}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /pick a date/i }));
+    fireEvent.click(await screen.findByRole("button", { name: "Week" }));
+    const weekButtons = screen
+      .getAllByRole("button")
+      .filter((button) => /–/.test(button.textContent ?? ""));
+    fireEvent.click(weekButtons[0]);
+
+    expect(onPatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        scheduleWeekOnly: true,
+        schedMode: "week",
+      }),
+    );
+    expect(onPatch.mock.calls.some(([patch]) => patch.status === "Scheduled")).toBe(false);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wizard-service-clears-vendor.test.tsx b/src/test/app/(protected)/workorders/wizard-service-clears-vendor.test.tsx
new file mode 100644
index 00000000..30658510
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wizard-service-clears-vendor.test.tsx
@@ -0,0 +1,93 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WizardStepLocationServiceSelect } from "@/app/(protected)/workorders/_components/wizard/wizard-step-location-service-select";
+import {
+  EMPTY_WIZARD_DRAFT,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+
+describe("WizardStepLocationServiceSelect — vendor clear on service change", () => {
+  it("clears vendor fields when the primary service changes", () => {
+    const onPatch = vi.fn();
+    const draft: WorkOrderWizardDraft = {
+      ...EMPTY_WIZARD_DRAFT,
+      pm: "HVAC",
+      vendorId: "9",
+      vendorName: "Old Vendor",
+      techPhone: "555-0100",
+      vendorNotes: "Old company notes",
+    };
+
+    render(
+      <WizardStepLocationServiceSelect
+        draft={draft}
+        services={[
+          { id: "1", value: "HVAC" },
+          { id: "2", value: "Plumbing" },
+        ]}
+        svcOpen={false}
+        onSvcOpenChange={vi.fn()}
+        svcSearch=""
+        onSvcSearchChange={vi.fn()}
+        onUpdate={vi.fn()}
+        onPatch={onPatch}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "HVAC" }));
+    fireEvent.click(screen.getByRole("button", { name: "Plumbing" }));
+
+    expect(onPatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pm: "Plumbing",
+        extraServices: [],
+        vendorId: "",
+        vendorName: "",
+        techPhone: "",
+        vendorNotes: "",
+      }),
+    );
+  });
+
+  it("replaces the selected service in Service & Notes without persisting extraServices", () => {
+    const onPatch = vi.fn();
+    const draft: WorkOrderWizardDraft = {
+      ...EMPTY_WIZARD_DRAFT,
+      pm: "HVAC",
+      extraServices: ["Plumbing"],
+      vendorId: "9",
+      vendorName: "Old Vendor",
+      techPhone: "555-0100",
+      vendorNotes: "Old company notes",
+    };
+
+    render(
+      <WizardStepLocationServiceSelect
+        draft={draft}
+        services={[
+          { id: "1", value: "HVAC" },
+          { id: "2", value: "Plumbing" },
+          { id: "3", value: "Electrical" },
+        ]}
+        svcOpen={true}
+        onSvcOpenChange={vi.fn()}
+        svcSearch=""
+        onSvcSearchChange={vi.fn()}
+        onUpdate={vi.fn()}
+        onPatch={onPatch}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Electrical" }));
+
+    expect(onPatch).toHaveBeenCalledWith({
+      pm: "Electrical",
+      serviceId: "3",
+      extraServices: [],
+      vendorId: "",
+      vendorName: "",
+      techPhone: "",
+      vendorNotes: "",
+    });
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wizard-sidebar-summary-rows.test.ts b/src/test/app/(protected)/workorders/wizard-sidebar-summary-rows.test.ts
new file mode 100644
index 00000000..126d4d6a
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wizard-sidebar-summary-rows.test.ts
@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import { buildWizardSidebarSummaryRows } from "@/app/(protected)/workorders/_components/wizard/wizard-sidebar-summary-rows";
+import { EMPTY_WIZARD_DRAFT } from "@/domain/work-orders/types/work-order-wizard";
+
+describe("buildWizardSidebarSummaryRows", () => {
+  it("omits Account from the live summary", () => {
+    const labels = buildWizardSidebarSummaryRows(EMPTY_WIZARD_DRAFT).map(([label]) => label);
+    expect(labels).not.toContain("Account");
+    expect(labels).toContain("Site");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wizard-step-location-service.test.tsx b/src/test/app/(protected)/workorders/wizard-step-location-service.test.tsx
new file mode 100644
index 00000000..76dbd61e
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wizard-step-location-service.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WizardStepLocationService } from "@/app/(protected)/workorders/_components/wizard/wizard-step-location-service";
+import { EMPTY_WIZARD_DRAFT } from "@/domain/work-orders/types/work-order-wizard";
+
+describe("WizardStepLocationService", () => {
+  it("requires Site, keeps Service optional, and does not render Account", () => {
+    render(
+      <WizardStepLocationService
+        draft={EMPTY_WIZARD_DRAFT}
+        locations={[]}
+        locationDetail={undefined}
+        services={[]}
+        svcOpen={false}
+        onSvcOpenChange={vi.fn()}
+        svcSearch=""
+        onSvcSearchChange={vi.fn()}
+        onUpdate={vi.fn()}
+        onPatch={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("Site")).toBeInTheDocument();
+    expect(screen.getByText("Service")).toBeInTheDocument();
+    expect(screen.queryByText("Account")).not.toBeInTheDocument();
+    expect(screen.queryByText(/Both are optional/i)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wizard-step-type-schedule-assigned-to.test.tsx b/src/test/app/(protected)/workorders/wizard-step-type-schedule-assigned-to.test.tsx
new file mode 100644
index 00000000..407ce9c6
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wizard-step-type-schedule-assigned-to.test.tsx
@@ -0,0 +1,60 @@
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { WizardStepTypeSchedule } from "@/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule";
+import { EMPTY_WIZARD_DRAFT } from "@/domain/work-orders/types/work-order-wizard";
+
+const USERS = [
+  { id: "sarah", name: "Sarah Chen" },
+  { id: "morgan", name: "Morgan Blake" },
+];
+
+function assignedToBlock() {
+  return screen.getByText("Assigned To").closest("div");
+}
+
+describe("WizardStepTypeSchedule Assigned To", () => {
+  it("keeps Assigned To optional and selectable without a role gate", async () => {
+    const user = userEvent.setup();
+    const onPatch = vi.fn();
+
+    render(
+      <WizardStepTypeSchedule
+        draft={EMPTY_WIZARD_DRAFT}
+        users={USERS}
+        onUpdate={vi.fn()}
+        onPatch={onPatch}
+      />,
+    );
+
+    const block = assignedToBlock();
+    expect(block).not.toBeNull();
+    expect(within(block!).getByText("optional")).toBeInTheDocument();
+
+    const trigger = within(block!).getByRole("button", { name: /select dispatcher/i });
+    expect(trigger).toBeEnabled();
+
+    await user.click(trigger);
+    await user.click(await screen.findByRole("button", { name: "Sarah Chen" }));
+
+    expect(onPatch).toHaveBeenCalledWith({
+      assigneeId: "sarah",
+      assigneeName: "Sarah Chen",
+    });
+  });
+
+  it("stays interactive when the dispatcher list is empty", () => {
+    render(
+      <WizardStepTypeSchedule
+        draft={EMPTY_WIZARD_DRAFT}
+        users={[]}
+        onUpdate={vi.fn()}
+        onPatch={vi.fn()}
+      />,
+    );
+
+    const block = assignedToBlock();
+    expect(block).not.toBeNull();
+    expect(within(block!).getByRole("button", { name: /select dispatcher/i })).toBeEnabled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wizard-step-type-schedule-clears-service.test.tsx b/src/test/app/(protected)/workorders/wizard-step-type-schedule-clears-service.test.tsx
new file mode 100644
index 00000000..9c9582ee
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wizard-step-type-schedule-clears-service.test.tsx
@@ -0,0 +1,69 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WizardStepTypeSchedule } from "@/app/(protected)/workorders/_components/wizard/wizard-step-type-schedule";
+import {
+  EMPTY_WIZARD_DRAFT,
+  type WorkOrderWizardDraft,
+} from "@/domain/work-orders/types/work-order-wizard";
+
+const USERS = [{ id: "sarah", name: "Sarah Chen" }];
+
+describe("WizardStepTypeSchedule — service clear on type change", () => {
+  it("clears the service and its vendor when the work-order type changes", () => {
+    const onPatch = vi.fn();
+    const draft: WorkOrderWizardDraft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      pm: "HVAC",
+      serviceId: "1",
+      extraServices: ["Plumbing"],
+      vendorId: "9",
+      vendorName: "Old Vendor",
+      techPhone: "555-0100",
+    };
+
+    render(
+      <WizardStepTypeSchedule draft={draft} users={USERS} onUpdate={vi.fn()} onPatch={onPatch} />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /Reactive/ }));
+
+    expect(onPatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: "Reactive",
+        pm: "",
+        serviceId: null,
+        extraServices: [],
+        vendorId: "",
+        vendorName: "",
+        techPhone: "",
+      }),
+    );
+  });
+
+  it("keeps the selected service when the same type is re-selected", () => {
+    const onPatch = vi.fn();
+    const draft: WorkOrderWizardDraft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      pm: "HVAC",
+      serviceId: "1",
+      extraServices: ["Plumbing"],
+      vendorId: "9",
+      vendorName: "Old Vendor",
+      techPhone: "555-0100",
+    };
+
+    render(
+      <WizardStepTypeSchedule draft={draft} users={USERS} onUpdate={vi.fn()} onPatch={onPatch} />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /Scheduled preventive maintenance/ }));
+
+    const patch = onPatch.mock.calls[0][0] as Partial<WorkOrderWizardDraft>;
+    expect(patch).not.toHaveProperty("pm");
+    expect(patch).not.toHaveProperty("serviceId");
+    expect(patch).not.toHaveProperty("extraServices");
+    expect(patch).not.toHaveProperty("vendorId");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wizard-step-vendor-time-closability.test.tsx b/src/test/app/(protected)/workorders/wizard-step-vendor-time-closability.test.tsx
new file mode 100644
index 00000000..9280a735
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wizard-step-vendor-time-closability.test.tsx
@@ -0,0 +1,101 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WizardStepVendorTime } from "@/app/(protected)/workorders/_components/wizard/wizard-step-vendor-time";
+import { EMPTY_WIZARD_DRAFT } from "@/domain/work-orders/types/work-order-wizard";
+
+describe("WizardStepVendorTime Appt Time", () => {
+  it("marks Appt Time as optional", () => {
+    render(
+      <WizardStepVendorTime
+        draft={{ ...EMPTY_WIZARD_DRAFT, type: "PM", status: "Incomplete" }}
+        vendors={[]}
+        onUpdate={vi.fn()}
+        onPatch={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("Appt Time")).toBeInTheDocument();
+    expect(screen.getAllByText("optional").length).toBeGreaterThan(0);
+  });
+});
+
+describe("WizardStepVendorTime creation statuses (AAP)", () => {
+  it("offers only Incomplete, Pending, and Scheduled", () => {
+    render(
+      <WizardStepVendorTime
+        draft={{ ...EMPTY_WIZARD_DRAFT, type: "PM", status: "Incomplete" }}
+        vendors={[]}
+        onUpdate={vi.fn()}
+        onPatch={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /incomplete/i }));
+    expect(screen.getByRole("button", { name: /^pending$/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /^scheduled$/i })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /^completed$/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /^en route$/i })).not.toBeInTheDocument();
+  });
+
+  it("disables Scheduled without a concrete date", () => {
+    const onUpdate = vi.fn();
+    render(
+      <WizardStepVendorTime
+        draft={{ ...EMPTY_WIZARD_DRAFT, type: "PM", status: "Incomplete" }}
+        vendors={[]}
+        onUpdate={onUpdate}
+        onPatch={vi.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /incomplete/i }));
+    const scheduled = screen.getByRole("button", { name: /^scheduled$/i });
+    expect(scheduled).toBeDisabled();
+    expect(scheduled).toHaveAttribute(
+      "title",
+      "Set a Schedule On date before marking this work order as Scheduled.",
+    );
+    fireEvent.click(scheduled);
+    expect(onUpdate).not.toHaveBeenCalledWith("status", "Scheduled");
+  });
+
+  it("allows selecting a non-Completed status", () => {
+    const onPatch = vi.fn();
+    render(
+      <WizardStepVendorTime
+        draft={{ ...EMPTY_WIZARD_DRAFT, type: "PM", status: "Incomplete" }}
+        vendors={[]}
+        onUpdate={vi.fn()}
+        onPatch={onPatch}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /incomplete/i }));
+    const menu = screen.getByRole("button", { name: /^pending$/i }).closest("div");
+    expect(menu).not.toBeNull();
+    fireEvent.click(within(menu!.parentElement!).getByRole("button", { name: /^pending$/i }));
+    expect(onPatch).toHaveBeenCalledWith({ status: "Pending" });
+  });
+
+  it("promotes Pending to Scheduled when picked on a dated draft", () => {
+    const onPatch = vi.fn();
+    render(
+      <WizardStepVendorTime
+        draft={{
+          ...EMPTY_WIZARD_DRAFT,
+          type: "PM",
+          status: "Scheduled",
+          scheduledOn: "2026-06-01",
+          scheduleWeekOnly: false,
+        }}
+        vendors={[]}
+        onUpdate={vi.fn()}
+        onPatch={onPatch}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /scheduled/i }));
+    fireEvent.click(screen.getByRole("button", { name: /^pending$/i }));
+    expect(onPatch).toHaveBeenCalledWith({ status: "Scheduled" });
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-day-pagination-footer.test.tsx b/src/test/app/(protected)/workorders/wo-day-pagination-footer.test.tsx
new file mode 100644
index 00000000..fe9cddd0
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-day-pagination-footer.test.tsx
@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { WoDayPaginationFooter } from "@/app/(protected)/workorders/_components/list/table/wo-day-pagination-footer";
+
+describe("WoDayPaginationFooter (SH-241)", () => {
+  it("changes rows-per-page and navigates pages", async () => {
+    const user = userEvent.setup();
+    const onPageSizeChange = vi.fn();
+    const onNext = vi.fn();
+    render(
+      <WoDayPaginationFooter
+        dayLabel="Mon · 06/01"
+        itemCount={60}
+        pageSize={50}
+        pageIndex={0}
+        pageCount={2}
+        onPageSizeChange={onPageSizeChange}
+        onPrev={vi.fn()}
+        onNext={onNext}
+      />,
+    );
+    expect(screen.getByText("MON · 06/01 · 60 items")).toBeInTheDocument();
+    expect(screen.getByText("Page 1 of 2")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Next page" })).toBeEnabled();
+    await user.selectOptions(screen.getByLabelText("Rows per page"), "25");
+    expect(onPageSizeChange).toHaveBeenCalledWith(25);
+    await user.click(screen.getByRole("button", { name: "Next page" }));
+    expect(onNext).toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-adv-search-page-sync.integration.test.tsx b/src/test/app/(protected)/workorders/wo-table-adv-search-page-sync.integration.test.tsx
new file mode 100644
index 00000000..4ca3e8d8
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-adv-search-page-sync.integration.test.tsx
@@ -0,0 +1,253 @@
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { WorkOrderBoardSearchQueryParams } from "@/domain/work-orders/types/work-order-board";
+import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+const { searchBoard, getBoard, patchBoardField, emptyList } = vi.hoisted(() => ({
+  searchBoard: vi.fn(),
+  getBoard: vi.fn(),
+  patchBoardField: vi.fn(),
+  emptyList: [] as const,
+}));
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    searchBoard: (...args: unknown[]) => searchBoard(...args),
+    getBoard: (...args: unknown[]) => getBoard(...args),
+    patchBoardField: (...args: unknown[]) => patchBoardField(...args),
+  },
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderLocations: () => ({ data: emptyList }),
+  useWorkOrderVendors: () => ({ data: emptyList }),
+}));
+
+vi.mock("@/domain/locations/use-cases/use-location-sites", () => ({
+  useLocationSites: () => ({ data: emptyList }),
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/use-wo-table-inline-create", () => ({
+  useWoTableInlineCreate: () => ({ handleInlineSave: vi.fn(), saving: false }),
+}));
+
+vi.mock("react-toastify", () => ({ toast: { error: vi.fn(), success: vi.fn() } }));
+
+import { WoTable } from "@/app/(protected)/workorders/_components/list/table/wo-table";
+import { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
+import { useWorkOrdersTableData } from "@/app/(protected)/workorders/_hooks/use-work-orders-table-data";
+import { useWorkOrderTableMutations } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+
+const PAGE_SIZE = 25;
+const INITIAL_TOTAL = 26;
+const SHRUNK_TOTAL = 20;
+
+function makeRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: "1",
+    woNumber: "WO-1",
+    site: "CLV2",
+    type: "PM",
+    severity: null,
+    dispatcherId: "",
+    dispatcherName: "",
+    scheduledOn: "2026-08-17",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "",
+    dayLabel: "",
+    location: "Cleveland, OH",
+    locationId: "",
+    pm: "Backflow",
+    serviceNotes: "",
+    extraServices: [],
+    company: "",
+    tech: "",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "—",
+    status: "Incomplete",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    isAddOn: false,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    vendorId: "",
+    primaryDispatchId: null,
+    rowVersion: "v1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    additionalContacts: [],
+    ...overrides,
+  };
+}
+
+function emptyBoardResult() {
+  return {
+    items: [] as WorkOrderTableRow[],
+    scheduled: [] as WorkOrderTableRow[],
+    unscheduled: [] as WorkOrderTableRow[],
+    totalCount: 0,
+    returnedCount: 0,
+    page: 0,
+    pageSize: PAGE_SIZE,
+  };
+}
+
+function pagedResult(rows: WorkOrderTableRow[], page: number, pageSize: number) {
+  const items = rows.slice(page * pageSize, page * pageSize + pageSize);
+  return {
+    items,
+    scheduled: items,
+    unscheduled: [] as WorkOrderTableRow[],
+    totalCount: rows.length,
+    returnedCount: items.length,
+    page,
+    pageSize,
+  };
+}
+
+// Role and text queries over the whole board scan every row cell; scoping them
+// to the pagination footer keeps each waitFor poll cheap on a loaded machine.
+function pagination() {
+  return within(screen.getByTestId("wo-day-pagination"));
+}
+
+function pagesAfter(callCount: number): number[] {
+  return searchBoard.mock.calls.slice(callCount).map((call) => {
+    const params = call[0] as WorkOrderBoardSearchQueryParams;
+    return params.page ?? 0;
+  });
+}
+
+function AdvSearchPageSyncHarness() {
+  const filters = useWorkOrdersListFilters();
+  const tableData = useWorkOrdersTableData(filters);
+  const mutations = useWorkOrderTableMutations({
+    onPatch: tableData.patchRow,
+    clearPatch: tableData.clearRowPatch,
+    getRow: (id) => tableData.rows.find((row) => String(row.id) === String(id)),
+  });
+
+  return (
+    <div>
+      <div data-testid="harness-state">
+        {`adv=${String(tableData.advActive)} rows=${tableData.advResults.length} total=${tableData.scopeTotalCount} page=${filters.page}`}
+      </div>
+      <button
+        type="button"
+        onClick={() => {
+          filters.setPageSize(PAGE_SIZE);
+          filters.applyAdvancedFilters({ ...EMPTY_ADVANCED_FILTERS, rescheduled: true });
+        }}
+      >
+        Apply advanced filters
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          const row = tableData.rows[0];
+          if (row) {
+            void mutations.patchFieldAsync(row.id, { serviceNotes: "after-mutation" });
+          }
+        }}
+      >
+        Save row patch
+      </button>
+      <WoTable
+        tableData={tableData}
+        users={[]}
+        sites={[]}
+        vendors={[]}
+        pmTypes={[]}
+        weekMonday={filters.weekMonday}
+        onNavigateToDay={filters.navigateToDay}
+        onOpenSlideOver={() => undefined}
+        onOpenMedia={() => undefined}
+        onPatch={(id, patch) => {
+          void mutations.patchFieldAsync(id, patch);
+        }}
+      />
+    </div>
+  );
+}
+
+describe("advanced search page sync after mutation", () => {
+  let serverRows: WorkOrderTableRow[];
+
+  beforeEach(() => {
+    serverRows = Array.from({ length: INITIAL_TOTAL }, (_, index) =>
+      makeRow({ id: `wo-${index}`, woNumber: `WO-${index}` }),
+    );
+    searchBoard.mockReset();
+    getBoard.mockReset();
+    patchBoardField.mockReset();
+    getBoard.mockResolvedValue(emptyBoardResult());
+    searchBoard.mockImplementation(async (params: WorkOrderBoardSearchQueryParams) =>
+      pagedResult(serverRows, params.page ?? 0, params.pageSize ?? PAGE_SIZE),
+    );
+    patchBoardField.mockImplementation(async (id: string | number) => {
+      serverRows = serverRows.slice(0, SHRUNK_TOTAL);
+      return makeRow({
+        id,
+        woNumber: `WO-${String(id).replace("wo-", "")}`,
+        serviceNotes: "after-mutation",
+      });
+    });
+  });
+
+  it("refetches the last valid search page after a mutation shrinks results to one page", async () => {
+    renderWithProviders(<AdvSearchPageSyncHarness />, { withAuth: false });
+
+    fireEvent.click(screen.getByRole("button", { name: "Apply advanced filters" }));
+    await waitFor(() => {
+      expect(screen.getByTestId("harness-state")).toHaveTextContent(
+        "adv=true rows=25 total=26 page=0",
+      );
+    });
+    expect(screen.getByText("WO-0")).toBeInTheDocument();
+    expect(pagination().getByText("Page 1 of 2")).toBeInTheDocument();
+    expect(screen.queryByText("WO-25")).not.toBeInTheDocument();
+
+    fireEvent.click(pagination().getByRole("button", { name: "Next page" }));
+    await waitFor(() => {
+      expect(screen.getByTestId("harness-state")).toHaveTextContent("page=1");
+      expect(screen.getByText("WO-25")).toBeInTheDocument();
+      expect(pagination().getByText("Page 2 of 2")).toBeInTheDocument();
+    });
+
+    const callsBeforeMutation = searchBoard.mock.calls.length;
+    fireEvent.click(screen.getByRole("button", { name: "Save row patch" }));
+
+    await waitFor(() => {
+      expect(patchBoardField).toHaveBeenCalled();
+      expect(pagesAfter(callsBeforeMutation)).toContain(1);
+      expect(pagesAfter(callsBeforeMutation)).toContain(0);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("harness-state")).toHaveTextContent(
+        "adv=true rows=20 total=20 page=0",
+      );
+      expect(pagination().getByText("Page 1 of 1")).toBeInTheDocument();
+    });
+    expect(screen.getByText("WO-0")).toBeInTheDocument();
+    expect(screen.queryByText("WO-25")).not.toBeInTheDocument();
+    expect(screen.getByText("RESULTS · 20 items")).toBeInTheDocument();
+    expect(pagination().getByRole("button", { name: "Previous page" })).toBeDisabled();
+    expect(pagination().getByRole("button", { name: "Next page" })).toBeDisabled();
+  }, 15000);
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-adv-search-pagination.test.tsx b/src/test/app/(protected)/workorders/wo-table-adv-search-pagination.test.tsx
new file mode 100644
index 00000000..496fa5d5
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-adv-search-pagination.test.tsx
@@ -0,0 +1,200 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WoTable } from "@/app/(protected)/workorders/_components/list/table/wo-table";
+import type { ReturnTypeOfUseWorkOrdersTableData } from "@/app/(protected)/workorders/_components/list/table/wo-table-types";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/domain/locations/use-cases/use-location-sites", () => ({
+  useLocationSites: () => ({ data: [] }),
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/use-wo-table-inline-create", () => ({
+  useWoTableInlineCreate: () => ({ handleInlineSave: vi.fn(), saving: false }),
+}));
+
+function makeRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: "1",
+    woNumber: "24991",
+    site: "CLV2",
+    type: "PM",
+    severity: null,
+    dispatcherId: "",
+    dispatcherName: "",
+    scheduledOn: "",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "",
+    dayLabel: "",
+    location: "Cleveland, OH",
+    locationId: "",
+    pm: "Backflow",
+    serviceNotes: "",
+    extraServices: [],
+    company: "",
+    tech: "",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "—",
+    status: "Incomplete",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    isAddOn: false,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    vendorId: "",
+    primaryDispatchId: null,
+    rowVersion: "",
+    dispatchRowVersion: "",
+    flagColor: null,
+    additionalContacts: [],
+    ...overrides,
+  };
+}
+
+function tableData(
+  overrides: Partial<ReturnTypeOfUseWorkOrdersTableData> = {},
+): ReturnTypeOfUseWorkOrdersTableData {
+  const pageRows = [
+    makeRow({ id: "wo-0", woNumber: "WO-0" }),
+    makeRow({ id: "wo-49", woNumber: "WO-49" }),
+  ];
+  return {
+    rows: pageRows,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch: vi.fn(),
+    advActive: true,
+    advResults: pageRows,
+    unassigned: [],
+    unassignedError: null,
+    unassignedLoading: false,
+    unscheduled: [],
+    displayGroups: [],
+    searchActive: false,
+    noSearchResults: false,
+    isEmptyWeek: false,
+    todayKey: null,
+    draftDayKey: null,
+    draft: { locationId: "", site: "" },
+    setDraft: vi.fn(),
+    unassignedOpen: true,
+    setUnassignedOpen: vi.fn(),
+    unschedOpen: true,
+    setUnschedOpen: vi.fn(),
+    selectedId: null,
+    setSelectedId: vi.fn(),
+    selectedRow: null,
+    flashId: null,
+    triggerFlash: vi.fn(),
+    revealScheduledRow: vi.fn(),
+    dragViz: { dragId: null, overId: null },
+    setDragViz: vi.fn(),
+    dragState: { current: { dragId: null, overId: null } },
+    patchRow: vi.fn(),
+    clearRowPatch: vi.fn(),
+    reorderRows: vi.fn(),
+    endDrag: vi.fn(),
+    startDayDraft: vi.fn(),
+    cancelDraft: vi.fn(),
+    addRow: vi.fn(),
+    scopeTotalCount: 1778,
+    totalCount: 2,
+    search: "",
+    showDayPagination: true,
+    dayPageSize: 50,
+    dayPageIndex: 0,
+    dayPageCount: 36,
+    dayItemCount: 1778,
+    dayFooterLabel: "Results",
+    setDayPageSize: vi.fn(),
+    goToPrevDayPage: vi.fn(),
+    goToNextDayPage: vi.fn(),
+    ...overrides,
+  } as ReturnTypeOfUseWorkOrdersTableData;
+}
+
+describe("WoTable advanced-search pagination", () => {
+  it("pages the flat Unassigned search without a pin or a 1778-row dump", () => {
+    const goToNextDayPage = vi.fn();
+    const data = tableData({ goToNextDayPage });
+
+    renderWithProviders(
+      <WoTable
+        tableData={data}
+        users={[]}
+        sites={[]}
+        vendors={[]}
+        pmTypes={[]}
+        weekMonday="2026-05-18"
+        onNavigateToDay={vi.fn()}
+        onOpenSlideOver={vi.fn()}
+        onOpenMedia={vi.fn()}
+        onPatch={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByRole("button", { name: /Unassigned/ })).not.toBeInTheDocument();
+    expect(screen.getByText("WO-0")).toBeInTheDocument();
+    expect(screen.getByText("WO-49")).toBeInTheDocument();
+    expect(screen.queryByText("WO-50")).not.toBeInTheDocument();
+    expect(screen.getByText("RESULTS · 1778 items")).toBeInTheDocument();
+    expect(screen.getByText("Page 1 of 36")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Next page" }));
+    expect(goToNextDayPage).toHaveBeenCalled();
+    expect(screen.getByRole("button", { name: "Next page" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
+  });
+
+  it("keeps the search pager when the current page is empty but matches remain", () => {
+    const goToPrevDayPage = vi.fn();
+    const data = tableData({
+      rows: [],
+      advResults: [],
+      totalCount: 0,
+      scopeTotalCount: 1778,
+      dayPageIndex: 35,
+      dayPageCount: 36,
+      goToPrevDayPage,
+    });
+
+    renderWithProviders(
+      <WoTable
+        tableData={data}
+        users={[]}
+        sites={[]}
+        vendors={[]}
+        pmTypes={[]}
+        weekMonday="2026-05-18"
+        onNavigateToDay={vi.fn()}
+        onOpenSlideOver={vi.fn()}
+        onOpenMedia={vi.fn()}
+        onPatch={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByText("No work orders match these filters")).not.toBeInTheDocument();
+    expect(screen.getByText("RESULTS · 1778 items")).toBeInTheDocument();
+    expect(screen.getByText("Page 36 of 36")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Previous page" })).toBeEnabled();
+
+    fireEvent.click(screen.getByRole("button", { name: "Previous page" }));
+    expect(goToPrevDayPage).toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-column-order.test.tsx b/src/test/app/(protected)/workorders/wo-table-column-order.test.tsx
new file mode 100644
index 00000000..aeee1da9
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-column-order.test.tsx
@@ -0,0 +1,116 @@
+import { screen, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WO_TABLE_COLS } from "@/app/(protected)/workorders/_components/list/table/wo-table-cols";
+import { WoTableHead } from "@/app/(protected)/workorders/_components/list/table/wo-table-head";
+import { WoTableRowServiceCells } from "@/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells";
+import type { WoTableRowHandlers } from "@/app/(protected)/workorders/_components/list/table/wo-table-row";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/pm-type-cell", () => ({
+  PMTypeCell: () => <span>cell:service</span>,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/vendor-cell", () => ({
+  VendorCell: () => <span>cell:vendor</span>,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/appt-time-cell", () => ({
+  ApptTimeCell: () => <span>cell:appt</span>,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/status-cell", () => ({
+  StatusCell: () => <span>cell:status</span>,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/date-cell", () => ({
+  DateCell: () => <span>cell:completed</span>,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/comp-doc-cell", () => ({
+  CompDocCell: () => <span>cell:doc</span>,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/uplift-cell", () => ({
+  UpliftCell: () => <span>cell:uplift</span>,
+}));
+
+/** Documented left-to-right data column order for the Work Orders board. */
+const DOCUMENTED_ORDER = [
+  "SITE",
+  "WO",
+  "TYPE OF WO",
+  "ASSIGNED TO",
+  "SCHEDULE ON",
+  "DUE DATE",
+  "SERVICE",
+  "VENDOR",
+  "APPT TIME",
+  "STATUS",
+  "COMPLETED DATE",
+  "COMP DOC",
+  "UPLIFT",
+];
+
+describe("Work Orders board column order", () => {
+  it("renders the documented header order with grip/flag before Site and actions after Uplift", () => {
+    renderWithProviders(
+      <table>
+        <WoTableHead />
+      </table>,
+      { withAuth: false },
+    );
+
+    const headers = screen.getAllByRole("columnheader").map((th) => th.textContent?.trim() ?? "");
+    expect(headers.filter(Boolean)).toEqual(expect.arrayContaining(DOCUMENTED_ORDER));
+    expect(WO_TABLE_COLS.map((col) => col.key)).toEqual([
+      "grip",
+      "flag",
+      "site",
+      "wo",
+      "type",
+      "assigned",
+      "sched",
+      "due",
+      "pm",
+      "vendor",
+      "appt",
+      "status",
+      "completed",
+      "doc",
+      "uplift",
+      "actions",
+    ]);
+    expect(WO_TABLE_COLS.map((col) => col.label).filter(Boolean)).toEqual(DOCUMENTED_ORDER);
+  });
+
+  it("renders row cells under the matching headers: Status, Completed Date, Comp Doc, Uplift", () => {
+    const row = {
+      id: 7,
+      upliftSummary: { hasUplift: false, pendingCount: 0 },
+    } as WorkOrderTableRow;
+    renderWithProviders(
+      <table>
+        <tbody>
+          <tr data-testid="row">
+            <WoTableRowServiceCells
+              row={row}
+              vendors={[]}
+              pmTypes={[]}
+              handlers={{} as unknown as WoTableRowHandlers}
+              onPatchRow={vi.fn()}
+            />
+          </tr>
+        </tbody>
+      </table>,
+      { withAuth: false },
+    );
+
+    const cells = within(screen.getByTestId("row"))
+      .getAllByRole("cell")
+      .map((td) => td.textContent);
+    expect(cells).toEqual([
+      "cell:service",
+      "cell:vendor",
+      "cell:appt",
+      "cell:status",
+      "cell:completed",
+      "cell:doc",
+      "cell:uplift",
+    ]);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-head-date-tooltips.test.tsx b/src/test/app/(protected)/workorders/wo-table-head-date-tooltips.test.tsx
new file mode 100644
index 00000000..a25bd953
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-head-date-tooltips.test.tsx
@@ -0,0 +1,71 @@
+import { screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { WoTableHead } from "@/app/(protected)/workorders/_components/list/table/wo-table-head";
+import { getWoTableHeaderTooltip } from "@/domain/work-orders/constants/wo-table-header-tooltips";
+import { renderWithProviders } from "@/test/test-utils";
+
+const CASES = [
+  {
+    columnName: "SCHEDULE ON",
+    tooltip:
+      "The date the work is planned to happen. Setting it moves the work order to Scheduled.",
+  },
+  {
+    columnName: "DUE DATE",
+    tooltip: "The deadline for the work — when it must be completed by.",
+  },
+  {
+    columnName: "COMPLETED DATE",
+    tooltip: "The date the vendor actually finished the work. Required to complete the work order.",
+  },
+];
+
+function renderHead() {
+  return renderWithProviders(
+    <table>
+      <WoTableHead />
+    </table>,
+    { withAuth: false },
+  );
+}
+
+describe("WoTableHead date column header tooltips (SH-195)", () => {
+  it.each(CASES)(
+    "shows the $columnName help icon and tooltip copy on hover",
+    async ({ columnName, tooltip }) => {
+      const user = userEvent.setup();
+      renderHead();
+
+      const header = screen.getByRole("columnheader", { name: new RegExp(`^${columnName}`) });
+      const icon = within(header).getByRole("button", { name: `${columnName} column help` });
+
+      await user.hover(icon);
+
+      const tip = await screen.findByText(tooltip);
+      expect(tip).toBeInTheDocument();
+    },
+    15000,
+  );
+
+  it("moves focus to the help icon on tab and keeps it keyboard reachable", async () => {
+    const user = userEvent.setup();
+    renderHead();
+
+    const header = screen.getByRole("columnheader", { name: /^SCHEDULE ON/ });
+    const icon = within(header).getByRole("button", { name: "SCHEDULE ON column help" });
+
+    await user.tab();
+
+    expect(icon).toHaveFocus();
+  });
+
+  it("does not add a help icon to Appt Time (open point, not implemented)", () => {
+    renderHead();
+
+    const header = screen.getByRole("columnheader", { name: "APPT TIME" });
+    expect(within(header).queryByRole("img")).not.toBeInTheDocument();
+    expect(getWoTableHeaderTooltip("appt")).toBeUndefined();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-inline-row-required-fields.test.tsx b/src/test/app/(protected)/workorders/wo-table-inline-row-required-fields.test.tsx
new file mode 100644
index 00000000..f5817e84
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-inline-row-required-fields.test.tsx
@@ -0,0 +1,121 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { PocContactFields } from "@/app/(protected)/workorders/_components/poc/poc-contact-fields";
+import { WoTableInlineRow } from "@/app/(protected)/workorders/_components/list/table/wo-table-inline-row";
+import {
+  EMPTY_TABLE_DRAFT,
+  type WorkOrderTableDraft,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/type-cell", () => ({
+  TypeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell", () => ({
+  AssignedToCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/date-cell", () => ({
+  DateCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/due-date-cell", () => ({
+  DueDateCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/pm-type-cell", () => ({
+  PMTypeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/vendor-cell", () => ({
+  VendorCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/appt-time-cell", () => ({
+  ApptTimeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/status-cell", () => ({
+  StatusCell: () => null,
+}));
+
+function renderInlineRow(draft: WorkOrderTableDraft, onSave = vi.fn()) {
+  const ui = (d: WorkOrderTableDraft) => (
+    <table>
+      <tbody>
+        <WoTableInlineRow
+          draft={d}
+          draftDayKey="2026-06-01"
+          users={[]}
+          sites={[]}
+          vendors={[]}
+          pmTypes={[]}
+          allRows={[]}
+          onChange={vi.fn()}
+          onSave={onSave}
+          onCancel={vi.fn()}
+        />
+      </tbody>
+    </table>
+  );
+  const view = renderWithProviders(ui(draft), { withAuth: false });
+  return { ...view, rerenderDraft: (d: WorkOrderTableDraft) => view.rerender(ui(d)) };
+}
+
+const COMPLETE_DRAFT: WorkOrderTableDraft = {
+  ...EMPTY_TABLE_DRAFT,
+  site: "BK5",
+  locationId: 9,
+  woNumber: "12345678901",
+  pocName: "Dana",
+  pocPhone: "555-0100",
+};
+
+describe("WoTableInlineRow required fields", () => {
+  it("marks Site and WO # as required without showing errors before a Save attempt", () => {
+    renderInlineRow(EMPTY_TABLE_DRAFT);
+
+    expect(screen.getByRole("button", { name: /^Site \*$/ })).toBeInTheDocument();
+    expect(screen.getByText("Insert WO #")).toHaveTextContent("Insert WO # *");
+    expect(screen.queryByText("Site is required")).not.toBeInTheDocument();
+    expect(screen.queryByText("Work order number is required")).not.toBeInTheDocument();
+  });
+
+  it("reveals field errors only after Save is attempted, then clears them once corrected", () => {
+    const onSave = vi.fn();
+    const { rerenderDraft } = renderInlineRow(EMPTY_TABLE_DRAFT, onSave);
+
+    fireEvent.click(screen.getByRole("button", { name: "Save work order" }));
+
+    expect(onSave).not.toHaveBeenCalled();
+    expect(screen.getByText("Site is required")).toBeInTheDocument();
+    expect(screen.getByText("Work order number is required")).toBeInTheDocument();
+
+    rerenderDraft(COMPLETE_DRAFT);
+
+    expect(screen.queryByText("Site is required")).not.toBeInTheDocument();
+    expect(screen.queryByText("Work order number is required")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Save work order" }));
+    expect(onSave).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("PocContactFields required primary contact", () => {
+  it("labels POC name and phone with a required asterisk when the contact is required", () => {
+    renderWithProviders(
+      <PocContactFields
+        pocName=""
+        pocPhone=""
+        pocNotes=""
+        additionalContacts={[]}
+        primaryRequired
+        onPocNameChange={vi.fn()}
+        onPocPhoneChange={vi.fn()}
+        onPocNotesChange={vi.fn()}
+        onAdditionalContactsChange={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByLabelText(/POC name/)).toHaveAttribute("placeholder", "POC name");
+    expect(screen.getByLabelText(/POC phone/)).toHaveAttribute("placeholder", "POC phone");
+    expect(screen.getByText("POC name").closest("label")).toHaveTextContent("POC name*");
+    expect(screen.getByText("POC phone").closest("label")).toHaveTextContent("POC phone*");
+    expect(screen.queryByText("Contact name is required")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-inline-schedule-range.test.tsx b/src/test/app/(protected)/workorders/wo-table-inline-schedule-range.test.tsx
new file mode 100644
index 00000000..a276e515
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-inline-schedule-range.test.tsx
@@ -0,0 +1,58 @@
+import { createRef } from "react";
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WoTableInlineRowCells } from "@/app/(protected)/workorders/_components/list/table/wo-table-inline-row-cells";
+import { EMPTY_TABLE_DRAFT } from "@/domain/work-orders/types/work-order-table-row";
+import { pad2, todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+import { renderWithProviders } from "@/test/test-utils";
+
+function currentMonthIso(day: number): string {
+  const [y, m] = todayIso().split("-").map(Number);
+  return `${y}-${pad2(m)}-${pad2(day)}`;
+}
+
+describe("WoTableInlineRowCells — Schedule On range", () => {
+  it("patches schedMode range with start and end", async () => {
+    const onPatch = vi.fn();
+    renderWithProviders(
+      <table>
+        <tbody>
+          <tr>
+            <WoTableInlineRowCells
+              draft={EMPTY_TABLE_DRAFT}
+              weekDefault={false}
+              users={[]}
+              sites={[]}
+              vendors={[]}
+              pmTypes={[]}
+              allRows={[]}
+              siteCellRef={createRef()}
+              woCellRef={createRef()}
+              siteShowError={false}
+              siteError=""
+              woShowError={false}
+              onPatch={onPatch}
+            />
+          </tr>
+        </tbody>
+      </table>,
+    );
+
+    const scheduleButtons = screen.getAllByRole("button", { name: "—" });
+    fireEvent.click(scheduleButtons[0]);
+    fireEvent.click(await screen.findByRole("button", { name: "Range" }));
+    fireEvent.click(screen.getByRole("button", { name: "5" }));
+    fireEvent.click(screen.getByRole("button", { name: "20" }));
+    fireEvent.click(screen.getByRole("button", { name: /^done$/i }));
+
+    expect(onPatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        scheduledOn: currentMonthIso(5),
+        scheduleEnd: currentMonthIso(20),
+        schedMode: "range",
+        scheduleWeekOnly: false,
+        targetWeek: "",
+      }),
+    );
+  }, 10_000);
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-inline-status-schedule.test.tsx b/src/test/app/(protected)/workorders/wo-table-inline-status-schedule.test.tsx
new file mode 100644
index 00000000..38e0014e
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-inline-status-schedule.test.tsx
@@ -0,0 +1,73 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WoTableInlineRow } from "@/app/(protected)/workorders/_components/list/table/wo-table-inline-row";
+import { EMPTY_TABLE_DRAFT } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/site-cell", () => ({
+  SiteCell: () => null,
+}));
+vi.mock(
+  "@/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell",
+  () => ({
+    EditableWONumberCell: () => null,
+  }),
+);
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/type-cell", () => ({
+  TypeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell", () => ({
+  AssignedToCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/date-cell", () => ({
+  DateCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/due-date-cell", () => ({
+  DueDateCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/pm-type-cell", () => ({
+  PMTypeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/vendor-cell", () => ({
+  VendorCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/appt-time-cell", () => ({
+  ApptTimeCell: () => null,
+}));
+
+describe("WoTableInlineRow StatusCell with a concrete schedule", () => {
+  it("keeps Scheduled when Incomplete is picked on a dated draft", () => {
+    const onChange = vi.fn();
+    const draft = {
+      ...EMPTY_TABLE_DRAFT,
+      status: "Incomplete" as const,
+      scheduledOn: "2026-06-01",
+      scheduleWeekOnly: false,
+    };
+
+    renderWithProviders(
+      <table>
+        <tbody>
+          <WoTableInlineRow
+            draft={draft}
+            draftDayKey="2026-06-01"
+            users={[]}
+            sites={[]}
+            vendors={[]}
+            pmTypes={[]}
+            allRows={[]}
+            onChange={onChange}
+            onSave={vi.fn()}
+            onCancel={vi.fn()}
+          />
+        </tbody>
+      </table>,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /incomplete/i }));
+    fireEvent.click(screen.getByRole("button", { name: /^pending$/i }));
+
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ status: "Scheduled" }));
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-row-cells-assigned-toast.test.tsx b/src/test/app/(protected)/workorders/wo-table-row-cells-assigned-toast.test.tsx
new file mode 100644
index 00000000..25b8ed4b
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-row-cells-assigned-toast.test.tsx
@@ -0,0 +1,70 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WoTableRowCells } from "@/app/(protected)/workorders/_components/list/table/wo-table-row-cells";
+import type { WoTableRowHandlers } from "@/app/(protected)/workorders/_components/list/table/wo-table-row";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { notifyWorkOrderSaved } from "@/domain/work-orders/utils/work-order-feedback-toasts";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/site-cell", () => ({
+  SiteCell: () => null,
+}));
+vi.mock(
+  "@/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell",
+  () => ({
+    EditableWONumberCell: () => null,
+  }),
+);
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/type-cell", () => ({
+  TypeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/date-cell", () => ({
+  DateCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/due-date-cell", () => ({
+  DueDateCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell", () => ({
+  AssignedToCell: ({ onSave }: { onSave: (id: string, name: string) => void }) => (
+    <button type="button" onClick={() => onSave("u2", "Admin test")}>
+      persist-assigned
+    </button>
+  ),
+}));
+
+const row = { id: 7, dispatcherId: "u1" } as WorkOrderTableRow;
+
+describe("WoTableRowCells assigned-to persist", () => {
+  it("forwards assigned-to save through patch onSuccess instead of onPatchRow", () => {
+    const onPatch = vi.fn();
+    const onPatchRow = vi.fn();
+    const handlers = { onPatch } as unknown as WoTableRowHandlers;
+
+    renderWithProviders(
+      <table>
+        <tbody>
+          <tr>
+            <WoTableRowCells
+              row={row}
+              allRows={[]}
+              users={[]}
+              sites={[]}
+              handlers={handlers}
+              onPatchRow={onPatchRow}
+            />
+          </tr>
+        </tbody>
+      </table>,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "persist-assigned" }));
+
+    expect(onPatchRow).not.toHaveBeenCalled();
+    expect(onPatch).toHaveBeenCalledWith(
+      7,
+      { dispatcherId: "u2", dispatcherName: "Admin test" },
+      { onSuccess: notifyWorkOrderSaved },
+    );
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-row-cells-type-toast.test.tsx b/src/test/app/(protected)/workorders/wo-table-row-cells-type-toast.test.tsx
new file mode 100644
index 00000000..b98743e2
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-row-cells-type-toast.test.tsx
@@ -0,0 +1,69 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WoTableRowCells } from "@/app/(protected)/workorders/_components/list/table/wo-table-row-cells";
+import type { WoTableRowHandlers } from "@/app/(protected)/workorders/_components/list/table/wo-table-row";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/site-cell", () => ({
+  SiteCell: () => null,
+}));
+vi.mock(
+  "@/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell",
+  () => ({
+    EditableWONumberCell: () => null,
+  }),
+);
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/type-cell", () => ({
+  TypeCell: ({ onSave }: { onSave: (type: string, severity: number) => void }) => (
+    <button type="button" onClick={() => onSave("Emergency", 1)}>
+      persist-type
+    </button>
+  ),
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/date-cell", () => ({
+  DateCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/due-date-cell", () => ({
+  DueDateCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell", () => ({
+  AssignedToCell: () => null,
+}));
+
+const row = { id: 7, woNumber: "00000024965", severity: 3 } as WorkOrderTableRow;
+
+describe("WoTableRowCells type persist", () => {
+  it("forwards type save through patch onSuccess instead of onPatchRow", () => {
+    const onPatch = vi.fn();
+    const onPatchRow = vi.fn();
+    const handlers = { onPatch } as unknown as WoTableRowHandlers;
+
+    renderWithProviders(
+      <table>
+        <tbody>
+          <tr>
+            <WoTableRowCells
+              row={row}
+              allRows={[]}
+              users={[]}
+              sites={[]}
+              handlers={handlers}
+              onPatchRow={onPatchRow}
+            />
+          </tr>
+        </tbody>
+      </table>,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "persist-type" }));
+
+    expect(onPatchRow).not.toHaveBeenCalled();
+    expect(onPatch).toHaveBeenCalledWith(
+      7,
+      { type: "Emergency", severity: 1 },
+      expect.objectContaining({ onSuccess: expect.any(Function) }),
+    );
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-row-completed-lock.test.tsx b/src/test/app/(protected)/workorders/wo-table-row-completed-lock.test.tsx
new file mode 100644
index 00000000..1ce5a477
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-row-completed-lock.test.tsx
@@ -0,0 +1,189 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WoTableRow } from "@/app/(protected)/workorders/_components/list/table/wo-table-row";
+import type { WoTableRowHandlers } from "@/app/(protected)/workorders/_components/list/table/wo-table-row";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+function makeRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 9,
+    woNumber: "24818000001",
+    site: "BK5",
+    type: "PM",
+    severity: null,
+    dispatcherId: "u1",
+    dispatcherName: "Alex",
+    scheduledOn: "2026-07-15",
+    completedDate: "2026-07-20",
+    targetWeek: "2026-07-15",
+    dayGroup: "07/15",
+    dayLabel: "Tue",
+    location: "Lobby",
+    locationId: "loc-1",
+    pm: "HVAC",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "7",
+    company: "Acme",
+    tech: "Sam",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "09:00 – 10:00",
+    status: "Completed",
+    docStatus: "Yes",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    dueDate: "2026-07-22",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    isAddOn: false,
+    mediaCount: 1,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "",
+    dispatchRowVersion: "",
+    flagColor: null,
+    additionalContacts: [],
+    upliftSummary: { hasUplift: false, pendingCount: 0 },
+    ...overrides,
+  };
+}
+
+const handlers: WoTableRowHandlers = {
+  onRowClick: vi.fn(),
+  onView: vi.fn(),
+  onEdit: vi.fn(),
+  onOpenMedia: vi.fn(),
+  onPatch: vi.fn(),
+  onScheduleDate: vi.fn(),
+  onScheduleWeek: vi.fn(),
+  onScheduleRange: vi.fn(),
+  onOpenSlideOver: vi.fn(),
+  onOpenCompDoc: vi.fn(),
+  onOpenUplifts: vi.fn(),
+  onReorder: vi.fn(),
+  onDragStart: vi.fn(),
+  onDragOver: vi.fn(),
+  onDrop: vi.fn(),
+  onDragEnd: vi.fn(),
+};
+
+describe("WoTableRow completed selective lock", () => {
+  it("keeps Flag enabled and hides Edit on a Completed row", () => {
+    const row = makeRow();
+    renderWithProviders(
+      <table>
+        <tbody>
+          <WoTableRow
+            row={row}
+            allRows={[row]}
+            users={[]}
+            sites={[]}
+            vendors={[]}
+            pmTypes={["HVAC"]}
+            isSelected={false}
+            isFlashing={false}
+            dragViz={{ dragId: null, overId: null }}
+            handlers={handlers}
+          />
+        </tbody>
+      </table>,
+      { withAuth: false },
+    );
+
+    expect(screen.getByRole("button", { name: "Add flag" })).toBeEnabled();
+    fireEvent.click(screen.getByRole("button", { name: "Add flag" }));
+    expect(screen.getByText("Clear flag")).toBeInTheDocument();
+    expect(screen.queryByTitle("Edit")).not.toBeInTheDocument();
+    expect(screen.getByTitle("View details")).toBeInTheDocument();
+  });
+
+  it("does not open the status menu on a Completed row", () => {
+    const row = makeRow();
+    renderWithProviders(
+      <table>
+        <tbody>
+          <WoTableRow
+            row={row}
+            allRows={[row]}
+            users={[]}
+            sites={[]}
+            vendors={[]}
+            pmTypes={["HVAC"]}
+            isSelected={false}
+            isFlashing={false}
+            dragViz={{ dragId: null, overId: null }}
+            handlers={handlers}
+          />
+        </tbody>
+      </table>,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByLabelText("Status is locked because this work order is completed"));
+
+    expect(screen.queryByRole("button", { name: /scheduled/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /in progress/i })).not.toBeInTheDocument();
+    expect(handlers.onPatch).not.toHaveBeenCalled();
+  });
+
+  it("does not expose the type picker on a Completed row", () => {
+    const row = makeRow();
+    renderWithProviders(
+      <table>
+        <tbody>
+          <WoTableRow
+            row={row}
+            allRows={[row]}
+            users={[]}
+            sites={[]}
+            vendors={[]}
+            pmTypes={["HVAC"]}
+            isSelected={false}
+            isFlashing={false}
+            dragViz={{ dragId: null, overId: null }}
+            handlers={handlers}
+          />
+        </tbody>
+      </table>,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByRole("button", { name: "Type of WO, PM" })).not.toBeInTheDocument();
+    expect(screen.getByText("PM")).toBeInTheDocument();
+  });
+
+  it("does not expose the type picker on a Canceled row", () => {
+    const row = makeRow({ status: "Canceled" });
+    renderWithProviders(
+      <table>
+        <tbody>
+          <WoTableRow
+            row={row}
+            allRows={[row]}
+            users={[]}
+            sites={[]}
+            vendors={[]}
+            pmTypes={["HVAC"]}
+            isSelected={false}
+            isFlashing={false}
+            dragViz={{ dragId: null, overId: null }}
+            handlers={handlers}
+          />
+        </tbody>
+      </table>,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByRole("button", { name: "Type of WO, PM" })).not.toBeInTheDocument();
+    expect(screen.getByText("PM")).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-row-reorder-keyboard.test.tsx b/src/test/app/(protected)/workorders/wo-table-row-reorder-keyboard.test.tsx
new file mode 100644
index 00000000..868d7412
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-row-reorder-keyboard.test.tsx
@@ -0,0 +1,148 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WoTableRow } from "@/app/(protected)/workorders/_components/list/table/wo-table-row";
+import type { WoTableRowHandlers } from "@/app/(protected)/workorders/_components/list/table/wo-table-row";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+function makeRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: "1",
+    woNumber: "WO-1",
+    site: "BK5",
+    type: "PM",
+    severity: null,
+    dispatcherId: "u1",
+    dispatcherName: "Alex",
+    scheduledOn: "2026-07-15",
+    completedDate: "",
+    targetWeek: "2026-07-13",
+    dayGroup: "07/15",
+    dayLabel: "WED · 07/15",
+    location: "Lobby",
+    locationId: "loc-1",
+    pm: "HVAC",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "7",
+    company: "Acme",
+    tech: "Sam",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    isAddOn: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "v1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    additionalContacts: [],
+    ...overrides,
+  };
+}
+
+function handlers(overrides: Partial<WoTableRowHandlers> = {}): WoTableRowHandlers {
+  return {
+    onRowClick: vi.fn(),
+    onView: vi.fn(),
+    onEdit: vi.fn(),
+    onOpenMedia: vi.fn(),
+    onPatch: vi.fn(),
+    onScheduleDate: vi.fn(),
+    onScheduleWeek: vi.fn(),
+    onScheduleRange: vi.fn(),
+    onOpenSlideOver: vi.fn(),
+    onReorder: vi.fn(),
+    onDragStart: vi.fn(),
+    onDragOver: vi.fn(),
+    onDrop: vi.fn(),
+    onDragEnd: vi.fn(),
+    ...overrides,
+  };
+}
+
+function renderRow(
+  row: WorkOrderTableRow,
+  allRows: WorkOrderTableRow[],
+  rowHandlers: WoTableRowHandlers,
+) {
+  return renderWithProviders(
+    <table>
+      <tbody>
+        <WoTableRow
+          row={row}
+          allRows={allRows}
+          users={[]}
+          sites={[]}
+          vendors={[]}
+          pmTypes={["HVAC"]}
+          isSelected={false}
+          isFlashing={false}
+          dragViz={{ dragId: null, overId: null }}
+          handlers={rowHandlers}
+        />
+      </tbody>
+    </table>,
+    { withAuth: false },
+  );
+}
+
+describe("WoTableRow keyboard reorder", () => {
+  it("reorders down and up with arrow keys on the grip", () => {
+    const onReorder = vi.fn();
+    const first = makeRow({ id: "1", woNumber: "WO-1" });
+    const second = makeRow({ id: "2", woNumber: "WO-2" });
+    renderRow(first, [first, second], handlers({ onReorder }));
+
+    fireEvent.keyDown(screen.getByRole("button", { name: "Reorder work order WO-1" }), {
+      key: "ArrowDown",
+    });
+    expect(onReorder).toHaveBeenCalledWith("1", "2");
+
+    onReorder.mockClear();
+    fireEvent.keyDown(screen.getByRole("button", { name: "Reorder work order WO-1" }), {
+      key: "ArrowUp",
+    });
+    expect(onReorder).not.toHaveBeenCalled();
+  });
+
+  it("does not reorder a canceled row from the grip", () => {
+    const onReorder = vi.fn();
+    const row = makeRow({ status: "Canceled" });
+    renderRow(row, [row], handlers({ onReorder }));
+
+    const grip = screen.getByRole("button", { name: "Reorder work order WO-1" });
+    expect(grip).toHaveAttribute("aria-disabled", "true");
+    expect(grip).toHaveAttribute("tabindex", "-1");
+    fireEvent.keyDown(grip, { key: "ArrowDown" });
+    expect(onReorder).not.toHaveBeenCalled();
+  });
+
+  it("skips a canceled neighbor when reordering an active row", () => {
+    const onReorder = vi.fn();
+    const first = makeRow({ id: "1", woNumber: "WO-1" });
+    const canceled = makeRow({ id: "2", woNumber: "WO-2", status: "Canceled" });
+    const third = makeRow({ id: "3", woNumber: "WO-3" });
+    renderRow(first, [first, canceled, third], handlers({ onReorder }));
+
+    fireEvent.keyDown(screen.getByRole("button", { name: "Reorder work order WO-1" }), {
+      key: "ArrowDown",
+    });
+    expect(onReorder).toHaveBeenCalledWith("1", "3");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-row-schedule-clear.test.tsx b/src/test/app/(protected)/workorders/wo-table-row-schedule-clear.test.tsx
new file mode 100644
index 00000000..33dd7d92
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-row-schedule-clear.test.tsx
@@ -0,0 +1,119 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WoTableRowCells } from "@/app/(protected)/workorders/_components/list/table/wo-table-row-cells";
+import type { WoTableRowHandlers } from "@/app/(protected)/workorders/_components/list/table/wo-table-row";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { applySchedulePatch } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+import { mergeAutoSchedulePatch } from "@/domain/work-orders/utils/wo-lifecycle-transitions";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/site-cell", () => ({
+  SiteCell: () => null,
+}));
+vi.mock(
+  "@/app/(protected)/workorders/_components/list/table/cells/editable-wo-number-cell",
+  () => ({
+    EditableWONumberCell: () => null,
+  }),
+);
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/type-cell", () => ({
+  TypeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell", () => ({
+  AssignedToCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/date-cell", () => ({
+  DateCell: ({ onClear }: { onClear?: () => void }) => {
+    if (!onClear) return null;
+    return (
+      <button type="button" onClick={onClear}>
+        clear schedule
+      </button>
+    );
+  },
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/due-date-cell", () => ({
+  DueDateCell: () => null,
+}));
+
+function renderScheduledRow(
+  row: WorkOrderTableRow,
+  onPersist: (id: string | number, patch: WorkOrderTablePatch) => void,
+  viewOnly = false,
+) {
+  const handlers = {
+    onScheduleWeek: (id: string | number, week: string) => {
+      onPersist(id, mergeAutoSchedulePatch(row, applySchedulePatch(week, false)));
+    },
+  } as unknown as WoTableRowHandlers;
+
+  renderWithProviders(
+    <table>
+      <tbody>
+        <tr>
+          <WoTableRowCells
+            row={row}
+            allRows={[row]}
+            users={[]}
+            sites={[]}
+            viewOnly={viewOnly}
+            handlers={handlers}
+            onPatchRow={vi.fn()}
+          />
+        </tr>
+      </tbody>
+    </table>,
+    { withAuth: false },
+  );
+}
+
+describe("WoTableRowCells Schedule On clear", () => {
+  it.each([
+    { scheduledOn: "2026-09-09", targetWeek: "", scheduleEnd: "" },
+    { scheduledOn: "", targetWeek: "2026-09-07", scheduleEnd: "" },
+    { scheduledOn: "2026-09-09", targetWeek: "", scheduleEnd: "2026-09-11" },
+  ])("clears a persisted schedule and derives Pending from Scheduled", (schedule) => {
+    const onPersist = vi.fn();
+    const row = {
+      id: 42,
+      status: "Scheduled",
+      scheduleWeekOnly: Boolean(schedule.targetWeek),
+      schedMode: schedule.targetWeek ? "week" : schedule.scheduleEnd ? "range" : "date",
+      ...schedule,
+    } as WorkOrderTableRow;
+
+    renderScheduledRow(row, onPersist);
+    fireEvent.click(screen.getByRole("button", { name: "clear schedule" }));
+
+    expect(onPersist).toHaveBeenCalledWith(
+      42,
+      expect.objectContaining({
+        scheduledOn: "",
+        scheduleWeekOnly: false,
+        targetWeek: "",
+        scheduleEnd: "",
+        schedMode: undefined,
+        status: "Pending",
+      }),
+    );
+  });
+
+  it.each(["Completed", "Canceled"])("does not expose Clear for a %s row", (status) => {
+    const row = {
+      id: 42,
+      status,
+      scheduledOn: "2026-09-09",
+      targetWeek: "",
+      scheduleEnd: "",
+      scheduleWeekOnly: false,
+      schedMode: "date",
+    } as WorkOrderTableRow;
+
+    renderScheduledRow(row, vi.fn(), true);
+
+    expect(screen.queryByRole("button", { name: "clear schedule" })).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-row-service-cells-vendor-toast.test.tsx b/src/test/app/(protected)/workorders/wo-table-row-service-cells-vendor-toast.test.tsx
new file mode 100644
index 00000000..7b4653cc
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-row-service-cells-vendor-toast.test.tsx
@@ -0,0 +1,82 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WoTableRowServiceCells } from "@/app/(protected)/workorders/_components/list/table/wo-table-row-service-cells";
+import type { WoTableRowHandlers } from "@/app/(protected)/workorders/_components/list/table/wo-table-row";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { toVendorTablePatch } from "@/domain/work-orders/utils/vendor-assignment-patch";
+import { notifyVendorAssigned } from "@/domain/work-orders/utils/work-order-feedback-toasts";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/pm-type-cell", () => ({
+  PMTypeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/appt-time-cell", () => ({
+  ApptTimeCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/status-cell", () => ({
+  StatusCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/comp-doc-cell", () => ({
+  CompDocCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/uplift-cell", () => ({
+  UpliftCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/date-cell", () => ({
+  DateCell: () => null,
+}));
+vi.mock("@/app/(protected)/workorders/_components/list/table/cells/vendor-cell", () => ({
+  VendorCell: ({
+    onSave,
+  }: {
+    onSave: (patch: { vendorId: string; company: string; tech: string; techPhone: string }) => void;
+  }) => (
+    <button
+      type="button"
+      onClick={() => onSave({ vendorId: "9", company: "Gateway", tech: "Pat", techPhone: "555" })}
+    >
+      persist-vendor
+    </button>
+  ),
+}));
+
+const row = { id: 7, upliftSummary: { hasUplift: false, pendingCount: 0 } } as WorkOrderTableRow;
+
+describe("WoTableRowServiceCells vendor persist", () => {
+  it("forwards vendor save through patch onSuccess instead of onPatchRow", () => {
+    const onPatch = vi.fn();
+    const onPatchRow = vi.fn();
+    const handlers = { onPatch } as unknown as WoTableRowHandlers;
+
+    renderWithProviders(
+      <table>
+        <tbody>
+          <tr>
+            <WoTableRowServiceCells
+              row={row}
+              vendors={[]}
+              pmTypes={[]}
+              handlers={handlers}
+              onPatchRow={onPatchRow}
+            />
+          </tr>
+        </tbody>
+      </table>,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "persist-vendor" }));
+
+    expect(onPatchRow).not.toHaveBeenCalled();
+    expect(onPatch).toHaveBeenCalledWith(
+      7,
+      toVendorTablePatch({
+        vendorId: "9",
+        company: "Gateway",
+        tech: "Pat",
+        techPhone: "555",
+      }),
+      { onSuccess: notifyVendorAssigned },
+    );
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-row-style.test.ts b/src/test/app/(protected)/workorders/wo-table-row-style.test.ts
new file mode 100644
index 00000000..0539e408
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-row-style.test.ts
@@ -0,0 +1,72 @@
+import { describe, expect, it } from "vitest";
+import { resolveFirstCellShadow } from "@/app/(protected)/workorders/_components/list/table/wo-table-row-style";
+import { EMPTY_UPLIFT_SUMMARY } from "@/domain/work-orders/types/work-order-uplift";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+function row(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: "1",
+    woNumber: "24877",
+    site: "BK5",
+    type: "PM",
+    severity: null,
+    dispatcherId: "",
+    dispatcherName: "",
+    scheduledOn: "",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "",
+    dayLabel: "",
+    location: "",
+    locationId: "",
+    pm: "",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "",
+    company: "",
+    tech: "",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    isAddOn: false,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "",
+    dispatchRowVersion: "",
+    flagColor: null,
+    upliftSummary: EMPTY_UPLIFT_SUMMARY,
+    ...overrides,
+  };
+}
+
+describe("resolveFirstCellShadow", () => {
+  it("uses a red inset for Emergency over Past Due", () => {
+    expect(resolveFirstCellShadow(row({ type: "Emergency", isPastDue: true }))).toBe(
+      "inset 3px 0 0 var(--destructive)",
+    );
+  });
+
+  it("uses a warning inset for Past Due when the type is not Emergency", () => {
+    expect(resolveFirstCellShadow(row({ isPastDue: true }))).toBe("inset 3px 0 0 var(--warning)");
+  });
+
+  it("has no inset for a regular row", () => {
+    expect(resolveFirstCellShadow(row())).toBe("none");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-search-empty.test.tsx b/src/test/app/(protected)/workorders/wo-table-search-empty.test.tsx
new file mode 100644
index 00000000..8c9132af
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-search-empty.test.tsx
@@ -0,0 +1,128 @@
+import { describe, expect, it, vi } from "vitest";
+import { WoTable } from "@/app/(protected)/workorders/_components/list/table/wo-table";
+import type { ReturnTypeOfUseWorkOrdersTableData } from "@/app/(protected)/workorders/_components/list/table/wo-table-types";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/domain/locations/use-cases/use-location-sites", () => ({
+  useLocationSites: () => ({ data: [] }),
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/use-wo-table-inline-create", () => ({
+  useWoTableInlineCreate: () => ({ handleInlineSave: vi.fn(), saving: false }),
+}));
+
+function tableData(
+  overrides: Partial<ReturnTypeOfUseWorkOrdersTableData> = {},
+): ReturnTypeOfUseWorkOrdersTableData {
+  return {
+    rows: [],
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch: vi.fn(),
+    advActive: false,
+    advResults: [],
+    unassigned: [],
+    unassignedError: null,
+    unassignedLoading: false,
+    unscheduled: [],
+    displayGroups: [{ key: "05/18", label: "Mon · 05/18", date: "2026-05-18", items: [] }],
+    searchActive: true,
+    noSearchResults: true,
+    isEmptyWeek: false,
+    todayKey: null,
+    draftDayKey: null,
+    draft: { locationId: "", site: "" },
+    setDraft: vi.fn(),
+    unassignedOpen: true,
+    setUnassignedOpen: vi.fn(),
+    unschedOpen: true,
+    setUnschedOpen: vi.fn(),
+    selectedId: null,
+    setSelectedId: vi.fn(),
+    selectedRow: null,
+    flashId: null,
+    triggerFlash: vi.fn(),
+    revealScheduledRow: vi.fn(),
+    dragViz: null,
+    setDragViz: vi.fn(),
+    dragState: { current: { dragId: null, overId: null } },
+    patchRow: vi.fn(),
+    clearRowPatch: vi.fn(),
+    reorderRows: vi.fn(),
+    endDrag: vi.fn(),
+    startDayDraft: vi.fn(),
+    cancelDraft: vi.fn(),
+    addRow: vi.fn(),
+    scopeTotalCount: 0,
+    totalCount: 0,
+    search: "no-match",
+    showDayPagination: false,
+    dayPageSize: 50,
+    dayPageIndex: 0,
+    dayPageCount: 1,
+    dayItemCount: 0,
+    dayFooterLabel: "Mon · 05/18",
+    setDayPageSize: vi.fn(),
+    goToPrevDayPage: vi.fn(),
+    goToNextDayPage: vi.fn(),
+    ...overrides,
+  } as ReturnTypeOfUseWorkOrdersTableData;
+}
+
+function renderTable(data: ReturnTypeOfUseWorkOrdersTableData) {
+  return renderWithProviders(
+    <WoTable
+      tableData={data}
+      users={[]}
+      sites={[]}
+      vendors={[]}
+      pmTypes={[]}
+      weekMonday="2026-05-18"
+      onNavigateToDay={vi.fn()}
+      onOpenSlideOver={vi.fn()}
+      onOpenMedia={vi.fn()}
+      onClearSearch={vi.fn()}
+      onPatch={vi.fn()}
+    />,
+    { withAuth: false },
+  );
+}
+
+describe("WoTable search empty (SH-241)", () => {
+  it("shows empty search when the selected day has no matches", () => {
+    const { getByText, queryByRole } = renderTable(tableData());
+
+    expect(getByText("No work orders match your search")).toBeInTheDocument();
+    expect(queryByRole("button", { name: /Unassigned/ })).not.toBeInTheDocument();
+  });
+
+  it("shows empty advanced-filter copy with Adjust filters", () => {
+    const onOpenAdvancedFilters = vi.fn();
+    const { getByText, getByRole } = renderWithProviders(
+      <WoTable
+        tableData={tableData({
+          advActive: true,
+          advResults: [],
+          searchActive: false,
+          noSearchResults: false,
+        })}
+        users={[]}
+        sites={[]}
+        vendors={[]}
+        pmTypes={[]}
+        weekMonday="2026-05-18"
+        onNavigateToDay={vi.fn()}
+        onOpenSlideOver={vi.fn()}
+        onOpenMedia={vi.fn()}
+        onOpenAdvancedFilters={onOpenAdvancedFilters}
+        onPatch={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    expect(getByText("No work orders match these filters")).toBeInTheDocument();
+    getByRole("button", { name: "Adjust filters" }).click();
+    expect(onOpenAdvancedFilters).toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-unassigned-queue.test.tsx b/src/test/app/(protected)/workorders/wo-table-unassigned-queue.test.tsx
new file mode 100644
index 00000000..54967ec4
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-unassigned-queue.test.tsx
@@ -0,0 +1,233 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { AssignedToCell } from "@/app/(protected)/workorders/_components/list/table/cells/assigned-to-cell";
+import { WoTableBody } from "@/app/(protected)/workorders/_components/list/table/wo-table-body";
+import type { ReturnTypeOfUseWorkOrdersTableData } from "@/app/(protected)/workorders/_components/list/table/wo-table-types";
+import { expandTablePatchToBoardFieldOps } from "@/domain/work-orders/mappers/work-order-board-patch-mapper";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+function makeRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: "1",
+    woNumber: "24991",
+    site: "CLV2",
+    type: "PM",
+    severity: null,
+    dispatcherId: "",
+    dispatcherName: "",
+    scheduledOn: "2026-06-02",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "06/02",
+    dayLabel: "TUE · 06/02",
+    location: "Cleveland, OH",
+    locationId: "",
+    pm: "Backflow",
+    serviceNotes: "",
+    extraServices: [],
+    company: "",
+    tech: "",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "—",
+    status: "Incomplete",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    isAddOn: false,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    vendorId: "",
+    primaryDispatchId: null,
+    rowVersion: "",
+    dispatchRowVersion: "",
+    flagColor: null,
+    additionalContacts: [],
+    ...overrides,
+  };
+}
+
+function baseTableData(
+  overrides: Partial<ReturnTypeOfUseWorkOrdersTableData> = {},
+): ReturnTypeOfUseWorkOrdersTableData {
+  return {
+    rows: [],
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch: vi.fn(),
+    advActive: false,
+    advResults: [],
+    unassigned: [],
+    unassignedError: null,
+    unassignedLoading: false,
+    unscheduled: [],
+    displayGroups: [],
+    searchActive: false,
+    noSearchResults: false,
+    isEmptyWeek: false,
+    todayKey: null,
+    draftDayKey: null,
+    draft: null,
+    setDraft: vi.fn(),
+    unassignedOpen: true,
+    setUnassignedOpen: vi.fn(),
+    unschedOpen: true,
+    setUnschedOpen: vi.fn(),
+    selectedId: null,
+    setSelectedId: vi.fn(),
+    selectedRow: null,
+    flashId: null,
+    triggerFlash: vi.fn(),
+    dragViz: null,
+    setDragViz: vi.fn(),
+    dragState: null,
+    patchRow: vi.fn(),
+    clearRowPatch: vi.fn(),
+    reorderRows: vi.fn(),
+    endDrag: vi.fn(),
+    startDayDraft: vi.fn(),
+    cancelDraft: vi.fn(),
+    addRow: vi.fn(),
+    scopeTotalCount: 0,
+    totalCount: 0,
+    search: "",
+    ...overrides,
+  } as ReturnTypeOfUseWorkOrdersTableData;
+}
+
+const DISPATCHER = { id: "sarah", name: "Sarah Chen", initials: "SC", color: "#3366cc" };
+
+function DayAssignHarness({
+  initialRow,
+  patchBoardField,
+}: {
+  initialRow: WorkOrderTableRow;
+  patchBoardField: (
+    id: string | number,
+    payload: { field: string; value?: string | null },
+  ) => Promise<WorkOrderTableRow>;
+}) {
+  const [row, setRow] = useState(initialRow);
+  const tableData = baseTableData({
+    displayGroups: [
+      {
+        key: "06/02",
+        label: "TUE · 06/02",
+        date: "2026-06-02",
+        items: [row],
+        totalCount: 1,
+      },
+    ],
+  });
+
+  return (
+    <table>
+      <WoTableBody
+        tableData={tableData}
+        renderRow={(item) => (
+          <tr key={String(item.id)} data-testid={`row-${item.id}`}>
+            <td>{item.woNumber}</td>
+            <td>
+              <AssignedToCell
+                dispatcherId={item.dispatcherId}
+                users={[DISPATCHER]}
+                highlight={!item.dispatcherId}
+                onSave={async (id, name) => {
+                  const ops = expandTablePatchToBoardFieldOps({
+                    dispatcherId: id,
+                    dispatcherName: name,
+                  });
+                  const patched = await patchBoardField(item.id, ops[0]!);
+                  setRow({ ...patched, dispatcherId: id, dispatcherName: name });
+                }}
+              />
+            </td>
+          </tr>
+        )}
+        renderInlineRow={() => null}
+      />
+    </table>
+  );
+}
+
+describe("WoTableBody weekly board (AAP day view)", () => {
+  it("renders the selected day and keeps dated-unassigned inline, with no Unassigned pin", () => {
+    const datedUnassigned = makeRow({ id: "u-dated", woNumber: "24991" });
+    const datedAssigned = makeRow({
+      id: "day-assigned",
+      woNumber: "25023",
+      dispatcherId: "sarah",
+      dispatcherName: "Sarah",
+    });
+
+    render(
+      <table>
+        <WoTableBody
+          tableData={baseTableData({
+            displayGroups: [
+              {
+                key: "06/02",
+                label: "TUE · 06/02",
+                date: "2026-06-02",
+                items: [datedUnassigned, datedAssigned],
+                totalCount: 2,
+              },
+            ],
+          })}
+          renderRow={(row) => (
+            <tr key={String(row.id)} data-testid={`row-${row.id}`}>
+              <td>{row.woNumber}</td>
+            </tr>
+          )}
+          renderInlineRow={() => null}
+        />
+      </table>,
+    );
+
+    expect(screen.getByText("TUE · 06/02")).toBeInTheDocument();
+    expect(screen.getByText("2 WOs")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /Unassigned/ })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /Unscheduled/ })).not.toBeInTheDocument();
+    expect(screen.getByTestId("row-u-dated")).toBeInTheDocument();
+    expect(screen.getByTestId("row-day-assigned")).toBeInTheDocument();
+  });
+
+  it("assigns a dated-unassigned row in the day group without a pin section", async () => {
+    const user = userEvent.setup();
+    const pinned = makeRow({
+      id: "u-pin",
+      woNumber: "24991",
+      dispatcherId: "",
+      dispatcherName: "",
+      rowVersion: "AAAAAAA=",
+    });
+    const patchBoardField = vi.fn(async (_id: string | number, payload: { field: string }) => {
+      expect(payload.field).toBe("assignTo");
+      return { ...pinned, dispatcherId: DISPATCHER.id, dispatcherName: DISPATCHER.name };
+    });
+
+    render(<DayAssignHarness initialRow={pinned} patchBoardField={patchBoardField} />);
+
+    expect(screen.getByTestId("row-u-pin")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: /Select/ }));
+    await user.click(screen.getByRole("button", { name: /Sarah Chen/ }));
+
+    expect(patchBoardField).toHaveBeenCalled();
+    expect(screen.queryByRole("button", { name: /Unassigned/ })).not.toBeInTheDocument();
+    expect(screen.getByTestId("row-u-pin")).toBeInTheDocument();
+    expect(screen.getByText("TUE · 06/02")).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx b/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx
new file mode 100644
index 00000000..645154c8
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-unscheduled-highlight.test.tsx
@@ -0,0 +1,121 @@
+import { renderWithProviders } from "@/test/test-utils";
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WoTableBody } from "@/app/(protected)/workorders/_components/list/table/wo-table-body";
+import { WoTableRowCells } from "@/app/(protected)/workorders/_components/list/table/wo-table-row-cells";
+import type { WoTableRowHandlers } from "@/app/(protected)/workorders/_components/list/table/wo-table-row";
+import type { ReturnTypeOfUseWorkOrdersTableData } from "@/app/(protected)/workorders/_components/list/table/wo-table-types";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const unscheduledRow: WorkOrderTableRow = {
+  id: 42,
+  woNumber: "WO-42",
+  site: "CHI-1042",
+  type: "PM",
+  severity: null,
+  dispatcherId: "u1",
+  dispatcherName: "Test Dispatcher",
+  scheduledOn: "",
+  completedDate: "",
+  targetWeek: "",
+  dayGroup: "",
+  dayLabel: "",
+  location: "Chicago Loop",
+  locationId: "mock-loc-1",
+  pm: "HVAC — Quarterly PM",
+  serviceNotes: "",
+  extraServices: [],
+  vendorId: "",
+  company: "",
+  tech: "",
+  techPhone: "",
+  apptStart: "",
+  apptEnd: "",
+  apptTime: "",
+  status: "Pending",
+  docStatus: "No",
+  pocName: "",
+  pocPhone: "",
+  pocNotes: "",
+  additionalContacts: [],
+  dueDate: "2026-07-15",
+  rescheduleCount: 0,
+  carriedOver: 0,
+  isAddOn: false,
+  originalWeek: "",
+  originalDate: "",
+  isPastDue: false,
+  scheduleWeekOnly: false,
+  mediaCount: 0,
+  title: "",
+  priority: "",
+  primaryDispatchId: null,
+  rowVersion: "",
+  dispatchRowVersion: "",
+  flagColor: null,
+  upliftSummary: { hasUplift: false, pendingCount: 0 },
+};
+
+const handlers: WoTableRowHandlers = {
+  onRowClick: vi.fn(),
+  onView: vi.fn(),
+  onEdit: vi.fn(),
+  onOpenMedia: vi.fn(),
+  onPatch: vi.fn(),
+  onScheduleDate: vi.fn(),
+  onScheduleWeek: vi.fn(),
+  onScheduleRange: vi.fn(),
+  onOpenSlideOver: vi.fn(),
+  onOpenCompDoc: vi.fn(),
+  onOpenUplifts: vi.fn(),
+  onReorder: vi.fn(),
+  onDragStart: vi.fn(),
+  onDragOver: vi.fn(),
+  onDrop: vi.fn(),
+  onDragEnd: vi.fn(),
+};
+
+describe("WoTableBody unscheduled exclusion (SH-240)", () => {
+  it("does not render Unscheduled rows in the day-tab board view", () => {
+    const tableData = {
+      advActive: false,
+      unassigned: [],
+      unassignedError: null,
+      unassignedLoading: false,
+      unassignedOpen: true,
+      setUnassignedOpen: vi.fn(),
+      unscheduled: [unscheduledRow],
+      unschedOpen: true,
+      draftDayKey: null,
+      displayGroups: [],
+      todayKey: null,
+      startDayDraft: vi.fn(),
+      setUnschedOpen: vi.fn(),
+    } as unknown as ReturnTypeOfUseWorkOrdersTableData;
+
+    const renderRow = (row: WorkOrderTableRow, forceScheduleHighlight = false) => (
+      <tr key={String(row.id)}>
+        <WoTableRowCells
+          row={row}
+          allRows={[row]}
+          users={[]}
+          sites={[]}
+          forceScheduleHighlight={forceScheduleHighlight}
+          forceDueDateHighlight={false}
+          handlers={handlers}
+          onPatchRow={vi.fn()}
+        />
+      </tr>
+    );
+
+    renderWithProviders(
+      <table>
+        <WoTableBody tableData={tableData} renderRow={renderRow} renderInlineRow={() => null} />
+      </table>,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByRole("button", { name: /Unscheduled/ })).not.toBeInTheDocument();
+    expect(screen.queryByText("WO-42")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/wo-table-unscheduled-server-owned.test.tsx b/src/test/app/(protected)/workorders/wo-table-unscheduled-server-owned.test.tsx
new file mode 100644
index 00000000..ecd9f64f
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-table-unscheduled-server-owned.test.tsx
@@ -0,0 +1,233 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { WorkOrderBoardSearchQueryParams } from "@/domain/work-orders/types/work-order-board";
+import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+const { searchBoard, getBoard, emptyList } = vi.hoisted(() => ({
+  searchBoard: vi.fn(),
+  getBoard: vi.fn(),
+  emptyList: [] as const,
+}));
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    searchBoard: (...args: unknown[]) => searchBoard(...args),
+    getBoard: (...args: unknown[]) => getBoard(...args),
+  },
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderLocations: () => ({ data: emptyList }),
+  useWorkOrderVendors: () => ({ data: emptyList }),
+}));
+
+vi.mock("@/domain/locations/use-cases/use-location-sites", () => ({
+  useLocationSites: () => ({ data: emptyList }),
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/use-wo-table-inline-create", () => ({
+  useWoTableInlineCreate: () => ({ handleInlineSave: vi.fn(), saving: false }),
+}));
+
+vi.mock("react-toastify", () => ({ toast: { error: vi.fn(), success: vi.fn() } }));
+
+import { WoTable } from "@/app/(protected)/workorders/_components/list/table/wo-table";
+import { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
+import { useWorkOrdersTableData } from "@/app/(protected)/workorders/_hooks/use-work-orders-table-data";
+
+const PAGE_SIZE = 25;
+
+function makeRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: "1",
+    woNumber: "WO-1",
+    site: "CLV2",
+    type: "PM",
+    severity: null,
+    dispatcherId: "",
+    dispatcherName: "",
+    scheduledOn: "",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "",
+    dayLabel: "",
+    location: "Cleveland, OH",
+    locationId: "",
+    pm: "Backflow",
+    serviceNotes: "",
+    extraServices: [],
+    company: "",
+    tech: "",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "—",
+    status: "Incomplete",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    isAddOn: false,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    vendorId: "",
+    primaryDispatchId: null,
+    rowVersion: "v1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    additionalContacts: [],
+    ...overrides,
+  };
+}
+
+function emptyBoardResult() {
+  return {
+    items: [] as WorkOrderTableRow[],
+    scheduled: [] as WorkOrderTableRow[],
+    unscheduled: [] as WorkOrderTableRow[],
+    totalCount: 0,
+    returnedCount: 0,
+    page: 0,
+    pageSize: PAGE_SIZE,
+  };
+}
+
+function pagedResult(rows: WorkOrderTableRow[], page: number, pageSize: number) {
+  const items = rows.slice(page * pageSize, page * pageSize + pageSize);
+  return {
+    items,
+    scheduled: items,
+    unscheduled: [] as WorkOrderTableRow[],
+    totalCount: rows.length,
+    returnedCount: items.length,
+    page,
+    pageSize,
+  };
+}
+
+function lastSearchParams(): WorkOrderBoardSearchQueryParams {
+  const calls = searchBoard.mock.calls;
+  return calls[calls.length - 1]?.[0] as WorkOrderBoardSearchQueryParams;
+}
+
+function UnscheduledServerOwnedHarness() {
+  const filters = useWorkOrdersListFilters();
+  const tableData = useWorkOrdersTableData(filters);
+
+  return (
+    <div>
+      <div data-testid="harness-state">
+        {`adv=${String(tableData.advActive)} rows=${tableData.advResults.length} total=${tableData.scopeTotalCount}`}
+      </div>
+      <button
+        type="button"
+        onClick={() => {
+          filters.setPageSize(PAGE_SIZE);
+          filters.applyAdvancedFilters({ ...EMPTY_ADVANCED_FILTERS, unscheduledOnly: true });
+        }}
+      >
+        Apply unscheduled
+      </button>
+      <WoTable
+        tableData={tableData}
+        users={[]}
+        sites={[]}
+        vendors={[]}
+        pmTypes={[]}
+        weekMonday={filters.weekMonday}
+        onNavigateToDay={filters.navigateToDay}
+        onOpenSlideOver={() => undefined}
+        onOpenMedia={() => undefined}
+        onPatch={() => undefined}
+      />
+    </div>
+  );
+}
+
+describe("unscheduled advanced search is server-owned (SH-338)", () => {
+  beforeEach(() => {
+    searchBoard.mockReset();
+    getBoard.mockReset();
+    getBoard.mockResolvedValue(emptyBoardResult());
+  });
+
+  it("sends unscheduledOnly=true with no date window and pages server rows/totals", async () => {
+    // Server owns totals: page 0 returns 3 rows while totalCount spans 2 pages.
+    const pageZero = [
+      makeRow({ id: "wo-0", woNumber: "WO-0", scheduledOn: "" }),
+      // Server owns row filtering: a dated row on the page must still render.
+      makeRow({ id: "wo-1", woNumber: "WO-1", scheduledOn: "2026-08-17" }),
+      makeRow({ id: "wo-2", woNumber: "WO-2", scheduledOn: "" }),
+    ];
+    const pageOne = [
+      makeRow({ id: "wo-25", woNumber: "WO-25", scheduledOn: "" }),
+      makeRow({ id: "wo-26", woNumber: "WO-26", scheduledOn: "" }),
+    ];
+    const serverTotal = PAGE_SIZE + 2;
+    searchBoard.mockImplementation(async (params: WorkOrderBoardSearchQueryParams) => ({
+      items: (params.page ?? 0) === 0 ? pageZero : pageOne,
+      scheduled: (params.page ?? 0) === 0 ? pageZero : pageOne,
+      unscheduled: [] as WorkOrderTableRow[],
+      totalCount: serverTotal,
+      returnedCount: ((params.page ?? 0) === 0 ? pageZero : pageOne).length,
+      page: params.page ?? 0,
+      pageSize: params.pageSize ?? PAGE_SIZE,
+    }));
+
+    renderWithProviders(<UnscheduledServerOwnedHarness />, { withAuth: false });
+
+    fireEvent.click(screen.getByRole("button", { name: "Apply unscheduled" }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("harness-state")).toHaveTextContent("adv=true rows=3");
+    });
+    const params = lastSearchParams();
+    expect(params.unscheduledOnly).toBe(true);
+    expect(params.datePreset).toBeUndefined();
+    expect(params.dateFrom).toBeUndefined();
+    expect(params.dateTo).toBeUndefined();
+    expect(params.page).toBe(0);
+    expect(params.pageSize).toBe(PAGE_SIZE);
+
+    expect(screen.getByText("WO-0")).toBeInTheDocument();
+    expect(screen.getByText("WO-1")).toBeInTheDocument();
+    expect(screen.getByText("WO-2")).toBeInTheDocument();
+    expect(screen.queryByText("WO-25")).not.toBeInTheDocument();
+    expect(screen.getByText(`RESULTS · ${serverTotal} items`)).toBeInTheDocument();
+    expect(screen.getByText("Page 1 of 2")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Next page" }));
+    await waitFor(() => {
+      expect(screen.getByText("WO-25")).toBeInTheDocument();
+      expect(screen.getByText("WO-26")).toBeInTheDocument();
+      expect(screen.getByText("Page 2 of 2")).toBeInTheDocument();
+    });
+    expect(lastSearchParams().page).toBe(1);
+    expect(screen.getByTestId("harness-state")).toHaveTextContent("rows=2");
+    expect(screen.getByText(`RESULTS · ${serverTotal} items`)).toBeInTheDocument();
+  }, 15000);
+
+  it("shows the adv empty state when the server returns zero unscheduled results", async () => {
+    searchBoard.mockResolvedValue(pagedResult([], 0, PAGE_SIZE));
+
+    renderWithProviders(<UnscheduledServerOwnedHarness />, { withAuth: false });
+
+    fireEvent.click(screen.getByRole("button", { name: "Apply unscheduled" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("No work orders match these filters")).toBeInTheDocument();
+    });
+    expect(screen.getByTestId("harness-state")).toHaveTextContent("adv=true rows=0 total=0");
+    expect(screen.queryByText(/Page \d+ of \d+/)).not.toBeInTheDocument();
+  }, 15000);
+});
diff --git a/src/test/app/(protected)/workorders/wo-type-filter.test.tsx b/src/test/app/(protected)/workorders/wo-type-filter.test.tsx
new file mode 100644
index 00000000..82fb7a2f
--- /dev/null
+++ b/src/test/app/(protected)/workorders/wo-type-filter.test.tsx
@@ -0,0 +1,220 @@
+import { useState } from "react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { WoTypeFilter } from "@/app/(protected)/workorders/_components/list/filter-bar/wo-type-filter";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { renderWithProviders } from "@/test/test-utils";
+import { screen, waitFor, within } from "@testing-library/react";
+
+function TypeFilterHarness({
+  initial = new Set<WOType>(),
+  disabled = false,
+}: {
+  initial?: Set<WOType>;
+  disabled?: boolean;
+}) {
+  const [selected, setSelected] = useState(initial);
+  return <WoTypeFilter selected={selected} onChange={setSelected} disabled={disabled} />;
+}
+
+async function openTypeMenu(
+  user: ReturnType<typeof userEvent.setup>,
+  triggerName: string | RegExp,
+) {
+  await user.click(screen.getByRole("button", { name: triggerName }));
+  return screen.getByRole("menu", { name: "Work order types" });
+}
+
+describe("WoTypeFilter", () => {
+  it("exposes a menu trigger, not a listbox", () => {
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const trigger = screen.getByRole("button", { name: /all types/i });
+    expect(trigger).toHaveAttribute("aria-haspopup", "menu");
+    expect(trigger).not.toHaveAttribute("aria-haspopup", "listbox");
+  });
+
+  it("shows All types on the trigger and lists the four types in the menu", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    expect(screen.getByRole("button", { name: /all types/i })).toBeEnabled();
+    const menu = await openTypeMenu(user, /all types/i);
+
+    expect(menu).toHaveAttribute("data-testid", "wo-type-filter-menu");
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "PM" })).toBeInTheDocument();
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "Reactive" })).toBeInTheDocument();
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "Emergency" })).toBeInTheDocument();
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "Overdue" })).toBeInTheDocument();
+  });
+
+  it("exposes selected and unselected type state on the menu", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "All types" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "PM" })).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+
+    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "PM" }));
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "All types" })).toHaveAttribute(
+      "aria-checked",
+      "false",
+    );
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "PM" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+  });
+
+  it("labels a single type and multiple types on the trigger", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "PM" }));
+    expect(
+      screen.getByRole("button", { name: /work order types, pm/i, hidden: true, expanded: true }),
+    ).toBeInTheDocument();
+
+    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "Emergency" }));
+    expect(
+      screen.getByRole("button", {
+        name: /2 types selected/i,
+        hidden: true,
+        expanded: true,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it("clears the selection when All types is chosen", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness initial={new Set(["PM"])} />, { withAuth: false });
+
+    expect(screen.getByRole("button", { name: /work order types, pm/i })).toBeInTheDocument();
+    const menu = await openTypeMenu(user, /work order types, pm/i);
+    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "All types" }));
+    expect(
+      screen.getByRole("button", {
+        name: /work order types, all types/i,
+        hidden: true,
+        expanded: true,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it("returns to All types after deselecting the last type", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness initial={new Set(["PM"])} />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /work order types, pm/i);
+    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "PM" }));
+    expect(
+      screen.getByRole("button", {
+        name: /work order types, all types/i,
+        hidden: true,
+        expanded: true,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it("does not open when disabled", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness disabled />, { withAuth: false });
+
+    const trigger = screen.getByRole("button", { name: /all types/i });
+    expect(trigger).toBeDisabled();
+    await user.click(trigger);
+    expect(screen.queryByRole("menu", { name: "Work order types" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("menuitemcheckbox", { name: "PM" })).not.toBeInTheDocument();
+  });
+
+  it("lists All types first, then the four WO types", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    const labels = within(menu)
+      .getAllByRole("menuitemcheckbox")
+      .map((item) => item.textContent?.trim());
+    expect(labels).toEqual(["All types", "PM", "Reactive", "Emergency", "Overdue"]);
+  });
+
+  it("moves focus into the menu when opened", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    await waitFor(() => {
+      expect(within(menu).getByRole("menuitemcheckbox", { name: "All types" })).toHaveFocus();
+    });
+  });
+
+  it("navigates with Arrow, Home, and End keys", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    const allTypes = within(menu).getByRole("menuitemcheckbox", { name: "All types" });
+    const pm = within(menu).getByRole("menuitemcheckbox", { name: "PM" });
+    const overdue = within(menu).getByRole("menuitemcheckbox", { name: "Overdue" });
+
+    await waitFor(() => {
+      expect(allTypes).toHaveFocus();
+    });
+    await user.keyboard("{ArrowDown}");
+    expect(pm).toHaveFocus();
+    await user.keyboard("{End}");
+    expect(overdue).toHaveFocus();
+    await user.keyboard("{Home}");
+    expect(allTypes).toHaveFocus();
+    await user.keyboard("{ArrowUp}");
+    expect(overdue).toHaveFocus();
+  });
+
+  it("keeps inactive items out of the Tab sequence", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    const items = within(menu).getAllByRole("menuitemcheckbox");
+    for (const item of items) {
+      expect(item).toHaveAttribute("tabindex", "-1");
+    }
+  });
+
+  it("toggles the focused type from the keyboard without closing the menu", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    const menu = await openTypeMenu(user, /all types/i);
+    await waitFor(() => {
+      expect(within(menu).getByRole("menuitemcheckbox", { name: "All types" })).toHaveFocus();
+    });
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard(" ");
+    expect(within(menu).getByRole("menuitemcheckbox", { name: "PM" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+    expect(screen.getByRole("menu", { name: "Work order types" })).toBeInTheDocument();
+  });
+
+  it("closes the menu on Tab instead of walking each item", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
+
+    await openTypeMenu(user, /all types/i);
+    await waitFor(() => {
+      expect(screen.getByRole("menuitemcheckbox", { name: "All types" })).toHaveFocus();
+    });
+    await user.keyboard("{Tab}");
+    expect(screen.queryByRole("menu", { name: "Work order types" })).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/work-order-complete-dialog.test.tsx b/src/test/app/(protected)/workorders/work-order-complete-dialog.test.tsx
new file mode 100644
index 00000000..0bf323dd
--- /dev/null
+++ b/src/test/app/(protected)/workorders/work-order-complete-dialog.test.tsx
@@ -0,0 +1,49 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WorkOrderCompleteDialog } from "@/app/(protected)/workorders/_components/list/work-order-complete-dialog";
+import { renderWithProviders } from "@/test/test-utils";
+
+describe("WorkOrderCompleteDialog", () => {
+  it("confirms or dismisses without side effects until Mark as Complete", () => {
+    const onConfirm = vi.fn();
+    const onKeepOpen = vi.fn();
+
+    renderWithProviders(
+      <WorkOrderCompleteDialog
+        open
+        isPending={false}
+        onDialogClose={undefined}
+        onKeepOpen={onKeepOpen}
+        onConfirm={onConfirm}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByText("Mark as Complete?")).toBeInTheDocument();
+    expect(
+      screen.getByText("Once marked as complete, this work order cannot be edited anymore."),
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /^cancel$/i }));
+    expect(onKeepOpen).toHaveBeenCalled();
+    expect(onConfirm).not.toHaveBeenCalled();
+  });
+
+  it("calls onConfirm from Mark as Complete", () => {
+    const onConfirm = vi.fn();
+
+    renderWithProviders(
+      <WorkOrderCompleteDialog
+        open
+        isPending={false}
+        onDialogClose={undefined}
+        onKeepOpen={vi.fn()}
+        onConfirm={onConfirm}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /mark as complete/i }));
+    expect(onConfirm).toHaveBeenCalled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/work-order-header-closability.test.tsx b/src/test/app/(protected)/workorders/work-order-header-closability.test.tsx
new file mode 100644
index 00000000..a61df935
--- /dev/null
+++ b/src/test/app/(protected)/workorders/work-order-header-closability.test.tsx
@@ -0,0 +1,143 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it, vi } from "vitest";
+import { WorkOrderViewHeader } from "@/app/(protected)/workorders/_components/view/work-order-view-header";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+
+const incompleteDetail = {
+  id: 1,
+  internalWONumber: "SH-1",
+  workOrderNumber: "",
+  title: "Test WO",
+  location: "",
+  locationId: "",
+  locationZip: "",
+  assignedTo: "",
+  dueDate: "",
+  createdDate: "",
+  createdDateFull: "",
+  description: "",
+  priority: "",
+  status: "Open",
+  po: "",
+  tt: "",
+  problem: "",
+  trade: "",
+  subTrade: "",
+  vendorNTE: "",
+  scheduledDate: "",
+  completedDate: "",
+  source: "",
+  type: "",
+  docStatus: "",
+  mediaCount: 0,
+  comments: [],
+  auditLog: [],
+  dispatches: [],
+} as WorkOrderDetail;
+
+/** Base gates satisfied, type still empty (unenriched) — race window without board detail. */
+const unenrichedButOtherwiseClosable = {
+  ...incompleteDetail,
+  assignedTo: "Alice",
+  workOrderNumber: "20260623001",
+  problem: "HVAC",
+  completedDate: "2026-07-15",
+  type: "",
+  docStatus: "",
+  mediaCount: 0,
+  dispatches: [{ vendorName: "Acme HVAC" }],
+} as WorkOrderDetail;
+
+function renderHeader(props: {
+  wo: WorkOrderDetail;
+  isClosabilityReady: boolean;
+  statusAnchor: HTMLElement | null;
+  onStatusAnchorChange: (anchor: HTMLElement | null) => void;
+  onStatusChange: (status: string) => void;
+}) {
+  return (
+    <MemoryRouter>
+      <WorkOrderViewHeader
+        wo={props.wo}
+        workOrderId="1"
+        isClosabilityReady={props.isClosabilityReady}
+        statusAnchor={props.statusAnchor}
+        onStatusAnchorChange={props.onStatusAnchorChange}
+        onStatusChange={props.onStatusChange}
+        onOpenDispatch={vi.fn()}
+      />
+    </MemoryRouter>
+  );
+}
+
+describe("WorkOrderViewHeader closability gate", () => {
+  it("does not submit Done when closability gaps remain", () => {
+    const onStatusChange = vi.fn();
+    const onStatusAnchorChange = vi.fn();
+
+    const { rerender } = render(
+      renderHeader({
+        wo: incompleteDetail,
+        isClosabilityReady: true,
+        statusAnchor: null,
+        onStatusAnchorChange,
+        onStatusChange,
+      }),
+    );
+
+    fireEvent.click(screen.getByText("Open"));
+    const anchor = onStatusAnchorChange.mock.calls[0]?.[0] as HTMLElement;
+    expect(anchor).toBeTruthy();
+
+    rerender(
+      renderHeader({
+        wo: incompleteDetail,
+        isClosabilityReady: true,
+        statusAnchor: anchor,
+        onStatusAnchorChange,
+        onStatusChange,
+      }),
+    );
+
+    const done = screen.getByRole("menuitem", { name: /^Done$/i });
+    expect(done.getAttribute("aria-disabled")).toBe("true");
+    fireEvent.click(done);
+    expect(onStatusChange).not.toHaveBeenCalledWith("Done");
+  });
+
+  it("does not submit Done while board closability is not ready", () => {
+    const onStatusChange = vi.fn();
+    const onStatusAnchorChange = vi.fn();
+
+    const { rerender } = render(
+      renderHeader({
+        wo: unenrichedButOtherwiseClosable,
+        isClosabilityReady: false,
+        statusAnchor: null,
+        onStatusAnchorChange,
+        onStatusChange,
+      }),
+    );
+
+    fireEvent.click(screen.getByText("Open"));
+    const anchor = onStatusAnchorChange.mock.calls[0]?.[0] as HTMLElement;
+    expect(anchor).toBeTruthy();
+
+    rerender(
+      renderHeader({
+        wo: unenrichedButOtherwiseClosable,
+        isClosabilityReady: false,
+        statusAnchor: anchor,
+        onStatusAnchorChange,
+        onStatusChange,
+      }),
+    );
+
+    const done = screen.getByRole("menuitem", { name: /^Done$/i });
+    expect(done.getAttribute("aria-disabled")).toBe("true");
+    expect(done).toHaveAttribute("title", "Unable to verify completion requirements");
+    fireEvent.click(done);
+    expect(onStatusChange).not.toHaveBeenCalledWith("Done");
+  });
+});
diff --git a/src/test/app/(protected)/workorders/work-order-slide-over-failed-save.test.tsx b/src/test/app/(protected)/workorders/work-order-slide-over-failed-save.test.tsx
new file mode 100644
index 00000000..7e2ccec8
--- /dev/null
+++ b/src/test/app/(protected)/workorders/work-order-slide-over-failed-save.test.tsx
@@ -0,0 +1,179 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { WorkOrderSlideOver } from "@/app/(protected)/workorders/_components/detail/work-order-slide-over";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+vi.mock("@/providers/auth-context", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/providers/auth-context")>();
+  return {
+    ...actual,
+    useAuthContext: () => ({ user: { id: "u1" } }),
+  };
+});
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderBoardDetail: () => ({
+    data: undefined,
+    isLoading: true,
+    isFetching: true,
+    error: null,
+    refetch: vi.fn(),
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-mutations", () => ({
+  useAddWorkOrderComment: () => ({ mutate: vi.fn(), isPending: false }),
+  useUpdateWorkOrderComment: () => ({ mutate: vi.fn(), isPending: false }),
+  useUploadWorkOrderMedia: () => ({ mutate: vi.fn(), mutateAsync: vi.fn(), isPending: false }),
+  useUpdateWorkOrderMediaCategory: () => ({ mutate: vi.fn(), isPending: false }),
+  useDeleteWorkOrderMedia: () => ({ mutate: vi.fn(), isPending: false }),
+  useUploadCompletionDoc: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/detail/tabs/slide-over-info-tab", () => ({
+  SlideOverInfoTab: ({
+    draft,
+    onDraftChange,
+  }: {
+    draft: WorkOrderTableRow;
+    onDraftChange: (patch: Partial<WorkOrderTableRow>) => void;
+  }) => (
+    <label>
+      WO number
+      <input
+        aria-label="WO number"
+        value={draft.woNumber}
+        onChange={(event) => onDraftChange({ woNumber: event.target.value })}
+      />
+    </label>
+  ),
+}));
+
+vi.mock("react-toastify", () => ({ toast: { error: vi.fn(), success: vi.fn() } }));
+
+function baseRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 42,
+    woNumber: "WO-42",
+    site: "SEA1",
+    type: "PM",
+    severity: null,
+    dispatcherId: "u1",
+    dispatcherName: "Dispatcher",
+    scheduledOn: "2026-07-20",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "07/20",
+    dayLabel: "Mon",
+    location: "Seattle",
+    locationId: "loc-1",
+    pm: "HVAC",
+    serviceNotes: "",
+    extraServices: [],
+    company: "Vendor Co",
+    tech: "Tech",
+    techPhone: "",
+    vendorId: "v1",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "PM — SEA1",
+    priority: "Sev 3",
+    primaryDispatchId: null,
+    rowVersion: "v1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    isAddOn: false,
+    upliftSummary: { hasUplift: false, pendingCount: 0 },
+    ...overrides,
+  };
+}
+
+describe("WorkOrderSlideOver failed-save retry (no detail yet)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("keeps draft dirty and Save enabled after optimistic parent row + failed save", async () => {
+    const initial = baseRow();
+    let currentRow = initial;
+    const onSave = vi.fn(
+      (
+        _id: string | number,
+        patch: Partial<WorkOrderTableRow>,
+        options?: { onSuccess?: () => void; onError?: (error: Error) => void },
+      ) => {
+        currentRow = { ...currentRow, ...patch };
+        rerenderWithRow(currentRow);
+        currentRow = initial;
+        rerenderWithRow(currentRow);
+        options?.onError?.(new Error("save failed"));
+      },
+    );
+
+    let rerenderWithRow = (_row: WorkOrderTableRow) => {
+      /* assigned after first render */
+    };
+
+    const view = render(
+      <WorkOrderSlideOver
+        row={currentRow}
+        editMode
+        users={[{ id: "u1", name: "Dispatcher" }]}
+        sites={[{ id: "loc-1", name: "Seattle" }]}
+        vendors={[]}
+        pmTypes={["HVAC"]}
+        allOrders={[currentRow]}
+        onSave={onSave}
+        onOpenCompletionDoc={vi.fn()}
+        onCancelWO={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    );
+
+    rerenderWithRow = (row) => {
+      view.rerender(
+        <WorkOrderSlideOver
+          row={row}
+          editMode
+          users={[{ id: "u1", name: "Dispatcher" }]}
+          sites={[{ id: "loc-1", name: "Seattle" }]}
+          vendors={[]}
+          pmTypes={["HVAC"]}
+          allOrders={[row]}
+          onSave={onSave}
+          onOpenCompletionDoc={vi.fn()}
+          onCancelWO={vi.fn()}
+          onClose={vi.fn()}
+        />,
+      );
+    };
+
+    fireEvent.change(screen.getByLabelText("WO number"), { target: { value: "WO-99" } });
+    expect(screen.getByDisplayValue("WO-99")).toBeInTheDocument();
+
+    const saveButton = screen.getByRole("button", { name: /^save$/i });
+    expect(saveButton).not.toBeDisabled();
+    fireEvent.click(saveButton);
+
+    expect(onSave).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(screen.getByDisplayValue("WO-99")).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: /^save$/i })).not.toBeDisabled();
+    });
+  });
+});
diff --git a/src/test/app/(protected)/workorders/work-order-uplifts-affordances.test.tsx b/src/test/app/(protected)/workorders/work-order-uplifts-affordances.test.tsx
new file mode 100644
index 00000000..1afe8888
--- /dev/null
+++ b/src/test/app/(protected)/workorders/work-order-uplifts-affordances.test.tsx
@@ -0,0 +1,178 @@
+import { fireEvent, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { UpliftCell } from "@/app/(protected)/workorders/_components/list/table/cells/uplift-cell";
+import { WorkOrderUpliftListItem } from "@/app/(protected)/workorders/_components/uplifts/work-order-uplift-list-item";
+import { WorkOrderUpliftsDialog } from "@/app/(protected)/workorders/_components/uplifts/work-order-uplifts-dialog";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import type { WorkOrderUplift } from "@/domain/work-orders/types/work-order-uplift";
+import { renderWithProviders } from "@/test/test-utils";
+
+const pendingUplift: WorkOrderUplift = {
+  id: 1,
+  status: "pending",
+  amount: 450,
+  notes: "Extra work",
+  requestedAt: "2026-07-20T10:00:00Z",
+  requestedById: "vendor-1",
+  requestedByName: "Vendor",
+  decidedAt: "",
+  decidedByName: "",
+  decisionNote: "",
+};
+
+const mockState = vi.hoisted(() => ({
+  uplifts: [] as WorkOrderUplift[],
+}));
+
+const baseRow: WorkOrderTableRow = {
+  id: 42,
+  woNumber: "WO-42",
+  site: "CHI-1042",
+  type: "PM",
+  severity: null,
+  dispatcherId: "u1",
+  dispatcherName: "Alex",
+  scheduledOn: "2026-07-20",
+  completedDate: "",
+  targetWeek: "2026-07-20",
+  dayGroup: "2026-07-20",
+  dayLabel: "Mon",
+  location: "Chicago Loop",
+  locationId: "loc-1",
+  pm: "HVAC",
+  serviceNotes: "",
+  extraServices: [],
+  vendorId: "1",
+  company: "Vendor Co",
+  tech: "Sam",
+  techPhone: "",
+  apptStart: "",
+  apptEnd: "",
+  apptTime: "",
+  status: "Scheduled",
+  docStatus: "No",
+  pocName: "",
+  pocPhone: "",
+  pocNotes: "",
+  additionalContacts: [],
+  dueDate: "",
+  rescheduleCount: 0,
+  carriedOver: 0,
+  isAddOn: false,
+  originalWeek: "",
+  originalDate: "",
+  isPastDue: false,
+  scheduleWeekOnly: false,
+  mediaCount: 0,
+  title: "",
+  priority: "",
+  primaryDispatchId: null,
+  rowVersion: "v1",
+  dispatchRowVersion: "",
+  flagColor: null,
+  upliftSummary: { hasUplift: true, pendingCount: 1, primaryStatus: "pending", amount: 450 },
+};
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-uplifts", () => ({
+  useWorkOrderUplifts: () => ({
+    data: mockState.uplifts,
+    isLoading: false,
+    error: null,
+    refetch: vi.fn(),
+  }),
+  useCreateWorkOrderUplift: () => ({ mutate: vi.fn(), isPending: false }),
+  useCancelWorkOrderUplift: () => ({ mutate: vi.fn(), isPending: false }),
+  useRevokeWorkOrderUplift: () => ({ mutate: vi.fn(), isPending: false }),
+}));
+
+describe("UpliftCell affordances", () => {
+  it("renders pending pill and opens handler when onOpen is provided", () => {
+    const onOpen = vi.fn();
+
+    renderWithProviders(
+      <UpliftCell summary={{ hasUplift: true, pendingCount: 1 }} onOpen={onOpen} />,
+      { withAuth: false },
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /1 pending/i }));
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows read-only dash when onOpen is omitted", () => {
+    renderWithProviders(<UpliftCell summary={{ hasUplift: false, pendingCount: 0 }} />, {
+      withAuth: false,
+    });
+
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+    expect(screen.getByText("—")).toBeInTheDocument();
+  });
+});
+
+describe("WorkOrderUpliftsDialog affordances", () => {
+  it("hides create form when a pending request already exists", () => {
+    mockState.uplifts = [pendingUplift];
+
+    renderWithProviders(<WorkOrderUpliftsDialog row={baseRow} open onClose={vi.fn()} />, {
+      withAuth: true,
+    });
+
+    expect(screen.getByRole("heading", { name: /uplifts — wo wo-42/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /cancel pending/i })).toBeInTheDocument();
+    expect(screen.getByText(/cancel the pending request to file a new one/i)).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /create uplift/i })).not.toBeInTheDocument();
+  });
+
+  it("shows create form with remaining allowance when no pending request exists", () => {
+    mockState.uplifts = [];
+
+    renderWithProviders(<WorkOrderUpliftsDialog row={baseRow} open onClose={vi.fn()} />, {
+      withAuth: true,
+    });
+
+    expect(screen.getByRole("button", { name: /create uplift/i })).toBeInTheDocument();
+    expect(screen.getByText(/remaining auto-approval: \$500/i)).toBeInTheDocument();
+  });
+
+  it("hides create and cancel actions when work order is completed", () => {
+    mockState.uplifts = [pendingUplift];
+
+    renderWithProviders(
+      <WorkOrderUpliftsDialog row={{ ...baseRow, status: "Completed" }} open onClose={vi.fn()} />,
+      { withAuth: true },
+    );
+
+    expect(screen.getByText(/uplifts are read-only/i)).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /create uplift/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /cancel pending/i })).not.toBeInTheDocument();
+  });
+});
+
+describe("WorkOrderUpliftListItem revoke affordances", () => {
+  it("hides Revoke for admin-approved uplifts on the Work Order surface", () => {
+    renderWithProviders(
+      <WorkOrderUpliftListItem
+        uplift={{ ...pendingUplift, status: "approved" }}
+        readOnly={false}
+        currentUserId="admin-1"
+        onRevoke={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByRole("button", { name: /revoke/i })).not.toBeInTheDocument();
+  });
+
+  it("shows Revoke for the requesting dispatcher on auto-approved uplifts", () => {
+    renderWithProviders(
+      <WorkOrderUpliftListItem
+        uplift={{ ...pendingUplift, status: "auto_approved", requestedById: "dispatcher-1" }}
+        readOnly={false}
+        currentUserId="dispatcher-1"
+        onRevoke={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByRole("button", { name: /revoke/i })).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/work-order-view-completed-lock.test.tsx b/src/test/app/(protected)/workorders/work-order-view-completed-lock.test.tsx
new file mode 100644
index 00000000..1cf2eb72
--- /dev/null
+++ b/src/test/app/(protected)/workorders/work-order-view-completed-lock.test.tsx
@@ -0,0 +1,169 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it, vi } from "vitest";
+import { WorkOrderVendorEditorDialog } from "@/app/(protected)/workorders/_components/view/work-order-vendor-editor-dialog";
+import { WorkOrderViewDetails } from "@/app/(protected)/workorders/_components/view/work-order-view-details";
+import { WorkOrderViewHeader } from "@/app/(protected)/workorders/_components/view/work-order-view-header";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+
+const baseDetail = {
+  id: 1,
+  internalWONumber: "SH-1",
+  workOrderNumber: "24818",
+  title: "Test WO",
+  location: "Lobby",
+  locationId: "loc-1",
+  locationZip: "",
+  assignedTo: "Alex",
+  dueDate: "",
+  createdDate: "",
+  createdDateFull: "",
+  description: "",
+  priority: "",
+  status: "Scheduled",
+  po: "",
+  tt: "",
+  problem: "HVAC",
+  trade: "",
+  subTrade: "",
+  vendorNTE: "",
+  scheduledDate: "2026-07-15",
+  completedDate: "2026-07-20",
+  source: "",
+  type: "PM",
+  docStatus: "Yes",
+  mediaCount: 1,
+  comments: [],
+  auditLog: [],
+  dispatches: [],
+} as WorkOrderDetail;
+
+const vendorEditor = {
+  vendorId: 7,
+  vendorName: "Acme",
+  contactName: "Sam",
+  phone: "(317) 555-0100",
+  email: "sam@acme.test",
+  notes: "Gate code 12",
+};
+
+function renderHeader(status: string, readOnly: boolean, onStatusChange = vi.fn()) {
+  return render(
+    <MemoryRouter>
+      <WorkOrderViewHeader
+        wo={{ ...baseDetail, status }}
+        workOrderId="1"
+        isClosabilityReady
+        statusAnchor={null}
+        onStatusAnchorChange={vi.fn()}
+        onStatusChange={onStatusChange}
+        onOpenDispatch={vi.fn()}
+        readOnly={readOnly}
+      />
+    </MemoryRouter>,
+  );
+}
+
+describe("legacy work-order view completed lock", () => {
+  it("hides Edit and the status menu on a Completed work order", () => {
+    const onStatusChange = vi.fn();
+    renderHeader("Completed", true, onStatusChange);
+
+    expect(screen.queryByRole("button", { name: /^edit$/i })).not.toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText("Status is locked because this work order is completed"));
+    expect(screen.queryByRole("menuitem", { name: /scheduled/i })).not.toBeInTheDocument();
+    expect(onStatusChange).not.toHaveBeenCalled();
+  });
+
+  it("keeps Edit and opens the status menu on a Scheduled work order", () => {
+    const onStatusAnchorChange = vi.fn();
+    render(
+      <MemoryRouter>
+        <WorkOrderViewHeader
+          wo={baseDetail}
+          workOrderId="1"
+          isClosabilityReady
+          statusAnchor={null}
+          onStatusAnchorChange={onStatusAnchorChange}
+          onStatusChange={vi.fn()}
+          onOpenDispatch={vi.fn()}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByRole("button", { name: /^edit$/i })).toBeInTheDocument();
+    fireEvent.click(screen.getByText("Scheduled"));
+    expect(onStatusAnchorChange).toHaveBeenCalled();
+  });
+
+  it("renders assignee as text without a menu when read-only", () => {
+    const onAssign = vi.fn();
+    render(
+      <WorkOrderViewDetails
+        wo={{ ...baseDetail, status: "Completed" }}
+        users={[{ id: "u2", name: "Blake" }]}
+        assignAnchor={null}
+        onAssignAnchorChange={vi.fn()}
+        onAssign={onAssign}
+        onUnassign={vi.fn()}
+        readOnly
+      />,
+    );
+
+    expect(screen.getByText("Alex")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /alex/i })).not.toBeInTheDocument();
+    expect(onAssign).not.toHaveBeenCalled();
+  });
+
+  it("keeps the assignee menu on a Scheduled work order", () => {
+    render(
+      <WorkOrderViewDetails
+        wo={baseDetail}
+        users={[{ id: "u2", name: "Blake" }]}
+        assignAnchor={null}
+        onAssignAnchorChange={vi.fn()}
+        onAssign={vi.fn()}
+        onUnassign={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: /alex/i })).toBeInTheDocument();
+  });
+
+  it("shows Close only and hides Save on the vendor dialog when view-only", () => {
+    const onSave = vi.fn();
+    render(
+      <WorkOrderVendorEditorDialog
+        editor={vendorEditor}
+        loading={false}
+        error=""
+        isSaving={false}
+        viewOnly
+        onClose={vi.fn()}
+        onSave={onSave}
+        onEditorChange={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: /^close$/i })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /^save$/i })).not.toBeInTheDocument();
+    expect(screen.getByLabelText("Technician name")).toBeDisabled();
+  });
+
+  it("keeps Save on the vendor dialog when editable", () => {
+    render(
+      <WorkOrderVendorEditorDialog
+        editor={vendorEditor}
+        loading={false}
+        error=""
+        isSaving={false}
+        onClose={vi.fn()}
+        onSave={vi.fn()}
+        onEditorChange={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: /^save$/i })).toBeInTheDocument();
+    expect(screen.getByLabelText("Technician name")).toBeEnabled();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/work-orders-advanced-filters-banner-count.test.tsx b/src/test/app/(protected)/workorders/work-orders-advanced-filters-banner-count.test.tsx
new file mode 100644
index 00000000..1043eb54
--- /dev/null
+++ b/src/test/app/(protected)/workorders/work-orders-advanced-filters-banner-count.test.tsx
@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { WorkOrdersAdvancedFiltersBanner } from "@/app/(protected)/workorders/_components/list/work-orders-advanced-filters-banner";
+import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
+
+describe("WorkOrdersAdvancedFiltersBanner count semantics", () => {
+  it("labels the banner with search totalCount, not the current page length", () => {
+    render(
+      <WorkOrdersAdvancedFiltersBanner
+        applied={{
+          ...EMPTY_ADVANCED_FILTERS,
+          severities: new Set([1]),
+          hasUplift: true,
+        }}
+        totalCount={150}
+        sites={[]}
+        users={[]}
+        onClearChip={() => undefined}
+        onClearAll={() => undefined}
+      />,
+    );
+
+    expect(screen.getByText("150 work orders")).toBeInTheDocument();
+  });
+
+  it("shows Date / Unscheduled and the filtered list count when the toggle is on", () => {
+    render(
+      <WorkOrdersAdvancedFiltersBanner
+        applied={{
+          ...EMPTY_ADVANCED_FILTERS,
+          unscheduledOnly: true,
+        }}
+        totalCount={3}
+        sites={[]}
+        users={[]}
+        onClearChip={() => undefined}
+        onClearAll={() => undefined}
+      />,
+    );
+
+    expect(screen.getByText("Date")).toBeInTheDocument();
+    expect(screen.getByText("Unscheduled")).toBeInTheDocument();
+    expect(screen.getByText("3 work orders")).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/work-orders-advanced-search-wiring.test.tsx b/src/test/app/(protected)/workorders/work-orders-advanced-search-wiring.test.tsx
new file mode 100644
index 00000000..6e64219f
--- /dev/null
+++ b/src/test/app/(protected)/workorders/work-orders-advanced-search-wiring.test.tsx
@@ -0,0 +1,452 @@
+import { fireEvent, screen, within } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import WorkOrdersListPage from "@/app/(protected)/workorders/index";
+import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
+import {
+  BOARD_SEARCH_MAX_PAGE_SIZE,
+  toBoardSearchQueryParams,
+} from "@/domain/work-orders/utils/board-query-params";
+import { renderWithProviders } from "@/test/test-utils";
+
+const setAdvOpen = vi.fn();
+const applyAdvancedFilters = vi.fn();
+const clearAdvancedFilters = vi.fn();
+let advOpen = false;
+let advApplied: typeof EMPTY_ADVANCED_FILTERS | null = null;
+
+vi.mock("react-router", async () => {
+  const actual = await vi.importActual<typeof import("react-router")>("react-router");
+  return {
+    ...actual,
+    useNavigate: () => vi.fn(),
+  };
+});
+
+vi.mock("@/providers/auth-context", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/providers/auth-context")>();
+  return {
+    ...actual,
+    useAuthContext: () => ({ user: { id: "u1" } }),
+  };
+});
+
+vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-list-filters", () => ({
+  useWorkOrdersListFilters: () => ({
+    search: "",
+    handleSearchChange: vi.fn(),
+    advOpen,
+    setAdvOpen: (open: boolean) => {
+      advOpen = open;
+      setAdvOpen(open);
+    },
+    advApplied,
+    advInitial: advApplied ?? EMPTY_ADVANCED_FILTERS,
+    applyAdvancedFilters: (filters: typeof EMPTY_ADVANCED_FILTERS) => {
+      advApplied = filters;
+      applyAdvancedFilters(filters);
+    },
+    clearAdvancedFilters: () => {
+      advApplied = null;
+      clearAdvancedFilters();
+    },
+    clearAdvancedFilterChip: vi.fn(),
+    activeFilterCount: advApplied ? 1 : 0,
+    weekMonday: "2026-07-20",
+    selectedDayIso: "2026-07-20",
+    setWeekMonday: vi.fn(),
+    setSelectedDayIso: vi.fn(),
+    navigateToDay: vi.fn(),
+    dispatcherIds: new Set<string>(),
+    setDispatcherIds: vi.fn(),
+    types: new Set(),
+    setTypes: vi.fn(),
+  }),
+}));
+
+vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-table-data", () => ({
+  useWorkOrdersTableData: () => ({
+    rows: [],
+    totalCount: advApplied ? 42 : 0,
+    scopeTotalCount: advApplied ? 42 : 0,
+    isFetching: false,
+    isLoading: false,
+    setSelectedId: vi.fn(),
+    patchRow: vi.fn(),
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-table-mutations", () => ({
+  useWorkOrderTableMutations: () => ({ patchField: vi.fn() }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-orders-list", () => ({
+  useWorkOrderUsers: () => ({
+    data: [{ id: "u1", name: "Dispatcher One" }],
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderLocations: () => ({
+    data: [{ id: "loc-1", name: "Seattle" }],
+  }),
+  useWorkOrderVendors: () => ({
+    data: [{ companyName: "Vendor Co", email: "real@vendor.com" }],
+  }),
+  useWorkOrderBoardDetail: () => ({
+    data: undefined,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch: vi.fn(),
+  }),
+}));
+
+vi.mock("@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category", () => ({
+  useDropdownOptionsByCategory: () => ({ data: [{ value: "HVAC" }] }),
+}));
+
+vi.mock("@/domain/work-orders/mocks/is-wo-table-mock-enabled", () => ({
+  isWoTableMockEnabled: () => false,
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/wo-table", () => ({
+  WoTable: () => null,
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/media/media-upload-modal", () => ({
+  MediaUploadModal: () => null,
+}));
+
+describe("WorkOrders Advanced Search page wiring (SH-121)", () => {
+  beforeEach(() => {
+    advOpen = false;
+    advApplied = null;
+    setAdvOpen.mockClear();
+    applyAdvancedFilters.mockClear();
+    clearAdvancedFilters.mockClear();
+  });
+
+  it("opens the sheet from Advanced Filters, applies, then clears", () => {
+    const view = renderWithProviders(<WorkOrdersListPage />, {
+      route: "/workorders",
+      withAuth: false,
+    });
+
+    expect(screen.queryByRole("button", { name: /apply filters/i })).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Advanced Filters" }));
+    expect(setAdvOpen).toHaveBeenCalledWith(true);
+
+    advOpen = true;
+    view.rerender(<WorkOrdersListPage />);
+
+    const sheet = screen.getByRole("dialog", { name: "Advanced Filters" });
+    expect(within(sheet).getByRole("button", { name: /apply filters/i })).toBeInTheDocument();
+
+    // Expand filter sections that start collapsed and assert option inputs are wired.
+    for (const label of ["Site", "Assigned to", "Service", "Vendor / tech"]) {
+      fireEvent.click(within(sheet).getByRole("button", { name: new RegExp(label, "i") }));
+    }
+    expect(within(sheet).getByText("Seattle")).toBeInTheDocument();
+    expect(within(sheet).getByText("Dispatcher One")).toBeInTheDocument();
+    expect(within(sheet).getByText("HVAC")).toBeInTheDocument();
+    expect(within(sheet).getByText("Vendor Co")).toBeInTheDocument();
+
+    fireEvent.click(within(sheet).getByRole("button", { name: /Aveta Compliance/i }));
+    fireEvent.click(within(sheet).getByRole("checkbox", { name: /Aveta required only/i }));
+    fireEvent.click(within(sheet).getByRole("button", { name: /apply filters/i }));
+    expect(applyAdvancedFilters).toHaveBeenCalled();
+    expect(setAdvOpen).toHaveBeenCalledWith(false);
+
+    advOpen = true;
+    view.rerender(<WorkOrdersListPage />);
+    fireEvent.click(
+      within(screen.getByRole("dialog", { name: "Advanced Filters" })).getByRole("button", {
+        name: /clear all/i,
+      }),
+    );
+    expect(clearAdvancedFilters).toHaveBeenCalled();
+  });
+
+  it("applies Severity and Has uplift through the public Advanced Filters sheet", () => {
+    const view = renderWithProviders(<WorkOrdersListPage />, {
+      route: "/workorders",
+      withAuth: false,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Advanced Filters" }));
+    advOpen = true;
+    view.rerender(<WorkOrdersListPage />);
+
+    const sheet = screen.getByRole("dialog", { name: "Advanced Filters" });
+    fireEvent.click(within(sheet).getByRole("button", { name: /Severity/i }));
+    fireEvent.click(within(sheet).getByRole("button", { name: /SEV 1/i }));
+
+    fireEvent.click(within(sheet).getByRole("button", { name: /^Uplift/i }));
+    fireEvent.click(within(sheet).getByLabelText(/Has uplift/i));
+    fireEvent.click(within(sheet).getByRole("button", { name: /^Pending$/i }));
+
+    fireEvent.click(within(sheet).getByRole("button", { name: /apply filters/i }));
+
+    expect(applyAdvancedFilters).toHaveBeenCalled();
+    const appliedCalls = applyAdvancedFilters.mock.calls;
+    const applied = appliedCalls[appliedCalls.length - 1]?.[0] as typeof EMPTY_ADVANCED_FILTERS;
+    expect(applied.severities.has(1)).toBe(true);
+    expect(applied.hasUplift).toBe(true);
+    expect(applied.upliftStatuses.has("pending")).toBe(true);
+
+    const params = toBoardSearchQueryParams({ filters: applied });
+    expect(params.page).toBe(0);
+    expect(params.pageSize).toBe(BOARD_SEARCH_MAX_PAGE_SIZE);
+    expect(params.severities).toEqual([1]);
+    expect(params.hasUplift).toBe(true);
+    expect(params.upliftStatuses).toEqual(["pending"]);
+    expect(params.datePreset).toBe("Custom");
+    expect(params.dateFrom).toBe("2000-01-01");
+    expect(params.dateTo).toBe("2099-12-31");
+  });
+
+  it("applies Service and Completion doc through the public Advanced Filters sheet", () => {
+    const view = renderWithProviders(<WorkOrdersListPage />, {
+      route: "/workorders",
+      withAuth: false,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Advanced Filters" }));
+    advOpen = true;
+    view.rerender(<WorkOrdersListPage />);
+
+    const sheet = screen.getByRole("dialog", { name: "Advanced Filters" });
+    fireEvent.click(within(sheet).getByRole("button", { name: /^Service/i }));
+    fireEvent.click(within(sheet).getByText("HVAC"));
+
+    fireEvent.click(within(sheet).getByRole("button", { name: /Completion doc/i }));
+    fireEvent.click(within(sheet).getByRole("button", { name: /^Pending$/i }));
+    fireEvent.click(within(sheet).getByRole("button", { name: /^Uploaded$/i }));
+    fireEvent.click(within(sheet).getByRole("button", { name: /^N\/N$/i }));
+
+    fireEvent.click(within(sheet).getByRole("button", { name: /apply filters/i }));
+
+    expect(applyAdvancedFilters).toHaveBeenCalled();
+    const appliedCalls = applyAdvancedFilters.mock.calls;
+    const applied = appliedCalls[appliedCalls.length - 1]?.[0] as typeof EMPTY_ADVANCED_FILTERS;
+    expect(applied.pmTypes.has("HVAC")).toBe(true);
+    expect(applied.docs.has("No")).toBe(true);
+    expect(applied.docs.has("Yes")).toBe(true);
+    expect(applied.docs.has("NN")).toBe(true);
+
+    const params = toBoardSearchQueryParams({ filters: applied });
+    expect(params.pmTypes).toEqual(["HVAC"]);
+    expect(params.docStatuses).toEqual([2, 1, 3]);
+  });
+
+  it("exposes indicator selected state as aria-pressed", () => {
+    const view = renderWithProviders(<WorkOrdersListPage />, {
+      route: "/workorders",
+      withAuth: false,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Advanced Filters" }));
+    advOpen = true;
+    view.rerender(<WorkOrdersListPage />);
+
+    const sheet = screen.getByRole("dialog", { name: "Advanced Filters" });
+    fireEvent.click(within(sheet).getByRole("button", { name: /Indicators/i }));
+
+    const names = [/Rescheduled ≥ 2/i, /Carried Over ≥ 2/i, /^Add-On$/i];
+    for (const name of names) {
+      const pill = within(sheet).getByRole("button", { name });
+      expect(pill).toHaveAttribute("aria-pressed", "false");
+      fireEvent.click(pill);
+      expect(pill).toHaveAttribute("aria-pressed", "true");
+    }
+  });
+
+  it("applies Indicators, Flag, and Internal WO# through the public Advanced Filters sheet", () => {
+    const view = renderWithProviders(<WorkOrdersListPage />, {
+      route: "/workorders",
+      withAuth: false,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Advanced Filters" }));
+    advOpen = true;
+    view.rerender(<WorkOrdersListPage />);
+
+    const sheet = screen.getByRole("dialog", { name: "Advanced Filters" });
+    fireEvent.click(within(sheet).getByRole("button", { name: /Indicators/i }));
+    fireEvent.click(within(sheet).getByRole("button", { name: /Rescheduled ≥ 2/i }));
+    fireEvent.click(within(sheet).getByRole("button", { name: /Carried Over ≥ 2/i }));
+    fireEvent.click(within(sheet).getByRole("button", { name: /^Add-On$/i }));
+
+    const rescheduled = within(sheet).getByRole("button", { name: /Rescheduled ≥ 2/i });
+    const carriedOver = within(sheet).getByRole("button", { name: /Carried Over ≥ 2/i });
+    const addOn = within(sheet).getByRole("button", { name: /^Add-On$/i });
+    expect(rescheduled).toHaveAttribute("data-selected", "true");
+    expect(carriedOver).toHaveAttribute("data-selected", "true");
+    expect(addOn).toHaveAttribute("data-selected", "true");
+    expect(rescheduled.style.background).toBe("rgb(245, 243, 255)");
+    expect(rescheduled.style.color).toBe("rgb(124, 58, 237)");
+    expect(carriedOver.style.background).toBe("var(--color-bg-muted)");
+    expect(addOn.style.background).toBe("var(--type-addon-bg)");
+    expect(addOn.style.color).toBe("var(--type-addon-text)");
+
+    fireEvent.click(within(sheet).getByRole("button", { name: /^Flag$/i }));
+    fireEvent.click(within(sheet).getByRole("button", { name: /^Red$/i }));
+
+    fireEvent.click(within(sheet).getByRole("button", { name: /Work Order Number/i }));
+    fireEvent.click(within(sheet).getByRole("button", { name: /Internal numbers only/i }));
+
+    fireEvent.click(within(sheet).getByRole("button", { name: /apply filters/i }));
+
+    expect(applyAdvancedFilters).toHaveBeenCalled();
+    const appliedCalls = applyAdvancedFilters.mock.calls;
+    const applied = appliedCalls[appliedCalls.length - 1]?.[0] as typeof EMPTY_ADVANCED_FILTERS;
+    expect(applied.rescheduled).toBe(true);
+    expect(applied.carriedOver).toBe(true);
+    expect(applied.addOn).toBe(true);
+    expect(applied.flagColors.has("#EF4444")).toBe(true);
+    expect(applied.internalOnly).toBe(true);
+
+    const params = toBoardSearchQueryParams({ filters: applied });
+    expect(params.page).toBe(0);
+    expect(params.pageSize).toBe(BOARD_SEARCH_MAX_PAGE_SIZE);
+    expect(params.rescheduled).toBe(true);
+    expect(params.carriedOver).toBe(true);
+    expect(params.addOn).toBe(true);
+    expect(params.flagColors).toEqual(["#EF4444"]);
+    expect(params.internalOnly).toBe(true);
+    expect(params.datePreset).toBe("Custom");
+    expect(params.dateFrom).toBe("2000-01-01");
+    expect(params.dateTo).toBe("2099-12-31");
+  });
+
+  it("disables dispatcher, week, and type bar while advanced filters are applied", () => {
+    advApplied = { ...EMPTY_ADVANCED_FILTERS, rescheduled: true };
+    const view = renderWithProviders(<WorkOrdersListPage />, {
+      route: "/workorders",
+      withAuth: false,
+    });
+
+    expect(screen.getByRole("button", { name: "All dispatchers" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Week 7/20–7/24" })).toBeDisabled();
+    expect(screen.getByRole("tab", { name: "Mon · 07/20" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /work order types, all types/i })).toBeDisabled();
+    expect(screen.getByText("42 work orders")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /clear all/i }));
+    expect(clearAdvancedFilters).toHaveBeenCalled();
+
+    view.rerender(<WorkOrdersListPage />);
+
+    expect(screen.queryByText("42 work orders")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "All dispatchers" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: /work order types, all types/i })).toBeEnabled();
+  });
+
+  it("applies Unscheduled from Date range and sends unscheduledOnly without a faked window", () => {
+    const view = renderWithProviders(<WorkOrdersListPage />, {
+      route: "/workorders",
+      withAuth: false,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Advanced Filters" }));
+    advOpen = true;
+    view.rerender(<WorkOrdersListPage />);
+
+    const sheet = screen.getByRole("dialog", { name: "Advanced Filters" });
+    fireEvent.click(within(sheet).getByRole("button", { name: /Date range/i }));
+
+    const custom = within(sheet).getByRole("button", { name: /^Custom$/i });
+    const unscheduled = within(sheet).getByRole("button", { name: /^Unscheduled$/i });
+    expect(custom.compareDocumentPosition(unscheduled) & Node.DOCUMENT_POSITION_FOLLOWING).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+
+    expect(unscheduled).toHaveAttribute("aria-pressed", "false");
+    fireEvent.click(unscheduled);
+    expect(unscheduled).toHaveAttribute("aria-pressed", "true");
+    expect(within(sheet).getByRole("button", { name: /^This week$/i })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+    expect(within(sheet).queryByLabelText(/^From$/i)).not.toBeInTheDocument();
+    expect(within(sheet).queryByLabelText(/^To$/i)).not.toBeInTheDocument();
+
+    fireEvent.click(custom);
+    expect(within(sheet).getByLabelText(/^From$/i)).toBeInTheDocument();
+    expect(unscheduled).toHaveAttribute("aria-pressed", "true");
+
+    fireEvent.click(within(sheet).getByRole("button", { name: /apply filters/i }));
+
+    const appliedCalls = applyAdvancedFilters.mock.calls;
+    const applied = appliedCalls[appliedCalls.length - 1]?.[0] as typeof EMPTY_ADVANCED_FILTERS;
+    expect(applied.unscheduledOnly).toBe(true);
+    expect(applied.dateRange).toBe("custom");
+
+    const params = toBoardSearchQueryParams({ filters: applied });
+    expect(params.unscheduledOnly).toBe(true);
+    expect(params.datePreset).toBeUndefined();
+    expect(params.dateFrom).toBeUndefined();
+    expect(params.dateTo).toBeUndefined();
+  });
+
+  it("places Aveta Compliance immediately above Uplift", () => {
+    const view = renderWithProviders(<WorkOrdersListPage />, {
+      route: "/workorders",
+      withAuth: false,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Advanced Filters" }));
+    advOpen = true;
+    view.rerender(<WorkOrdersListPage />);
+
+    const sheet = screen.getByRole("dialog", { name: "Advanced Filters" });
+    const aveta = within(sheet).getByRole("button", { name: /Aveta Compliance/i });
+    const uplift = within(sheet).getByRole("button", { name: /^Uplift/i });
+    expect(aveta.closest(".border-b")?.nextElementSibling).toBe(uplift.closest(".border-b"));
+  });
+
+  it("keeps Clear all and Apply filters disabled until a filter is selected", () => {
+    const view = renderWithProviders(<WorkOrdersListPage />, {
+      route: "/workorders",
+      withAuth: false,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Advanced Filters" }));
+    advOpen = true;
+    view.rerender(<WorkOrdersListPage />);
+
+    const sheet = screen.getByRole("dialog", { name: "Advanced Filters" });
+    const clearAll = within(sheet).getByRole("button", { name: /clear all/i });
+    const apply = within(sheet).getByRole("button", { name: /apply filters/i });
+    expect(clearAll).toBeDisabled();
+    expect(apply).toBeDisabled();
+
+    fireEvent.click(within(sheet).getByRole("button", { name: /Aveta Compliance/i }));
+    fireEvent.click(within(sheet).getByRole("checkbox", { name: /Aveta required only/i }));
+
+    expect(clearAll).toBeEnabled();
+    expect(apply).toBeEnabled();
+  });
+
+  it("applies Aveta required only through Advanced Filters", () => {
+    const view = renderWithProviders(<WorkOrdersListPage />, {
+      route: "/workorders",
+      withAuth: false,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Advanced Filters" }));
+    advOpen = true;
+    view.rerender(<WorkOrdersListPage />);
+
+    const sheet = screen.getByRole("dialog", { name: "Advanced Filters" });
+    fireEvent.click(within(sheet).getByRole("button", { name: /Aveta Compliance/i }));
+    fireEvent.click(within(sheet).getByRole("checkbox", { name: /Aveta required only/i }));
+    fireEvent.click(within(sheet).getByRole("button", { name: /apply filters/i }));
+
+    const appliedCalls = applyAdvancedFilters.mock.calls;
+    const applied = appliedCalls[appliedCalls.length - 1]?.[0] as typeof EMPTY_ADVANCED_FILTERS;
+    expect(applied.avetaOnly).toBe(true);
+    expect(toBoardSearchQueryParams({ filters: applied }).avetaOnly).toBe(true);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx b/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx
new file mode 100644
index 00000000..7e4df369
--- /dev/null
+++ b/src/test/app/(protected)/workorders/work-orders-board-core-affordances.test.tsx
@@ -0,0 +1,306 @@
+import { fireEvent, screen, waitForElementToBeRemoved } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { WorkOrdersListHeader } from "@/app/(protected)/workorders/_components/list/work-orders-list-header";
+import { CompDocCell } from "@/app/(protected)/workorders/_components/list/table/cells/comp-doc-cell";
+import WorkOrdersListPage from "@/app/(protected)/workorders/index";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { renderWithProviders } from "@/test/test-utils";
+
+const navigate = vi.fn();
+
+vi.mock("react-router", async () => {
+  const actual = await vi.importActual<typeof import("react-router")>("react-router");
+  return {
+    ...actual,
+    useNavigate: () => navigate,
+  };
+});
+
+vi.mock("@/providers/auth-context", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/providers/auth-context")>();
+  return {
+    ...actual,
+    useAuthContext: () => ({ user: { id: "u1" } }),
+  };
+});
+
+vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-list-filters", () => ({
+  useWorkOrdersListFilters: () => ({
+    search: "",
+    handleSearchChange: vi.fn(),
+    setAdvOpen: vi.fn(),
+    advOpen: false,
+    advApplied: null,
+    advInitial: {
+      dateRange: "this-week",
+      customFrom: "",
+      customTo: "",
+      sites: new Set(),
+      types: new Set(),
+      dispatchers: new Set(),
+      statuses: new Set(),
+      pmTypes: new Set(),
+      vendorTechs: new Set(),
+      docs: new Set(),
+    },
+    applyAdvancedFilters: vi.fn(),
+    clearAdvancedFilters: vi.fn(),
+    clearAdvancedFilterChip: vi.fn(),
+    activeFilterCount: 0,
+    weekMonday: "2026-07-20",
+    selectedDayIso: "2026-07-20",
+    setWeekMonday: vi.fn(),
+    setSelectedDayIso: vi.fn(),
+    navigateToDay: vi.fn(),
+    dispatcherIds: new Set<string>(),
+    setDispatcherIds: vi.fn(),
+    types: new Set(),
+    setTypes: vi.fn(),
+  }),
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar", () => ({
+  WorkOrdersFilterBar: () => null,
+}));
+
+vi.mock(
+  "@/app/(protected)/workorders/_components/list/work-orders-advanced-filters-banner",
+  () => ({
+    WorkOrdersAdvancedFiltersBanner: () => null,
+  }),
+);
+
+vi.mock("@/app/(protected)/workorders/_components/media/media-upload-modal", () => ({
+  MediaUploadModal: () => null,
+}));
+
+const canceledRow: WorkOrderTableRow = {
+  id: 77,
+  woNumber: "WO-77",
+  site: "CHI-1042",
+  type: "PM",
+  severity: null,
+  dispatcherId: "u1",
+  dispatcherName: "Test Dispatcher",
+  scheduledOn: "2026-07-20",
+  completedDate: "",
+  targetWeek: "2026-07-20",
+  dayGroup: "2026-07-20",
+  dayLabel: "Mon",
+  location: "Chicago Loop",
+  locationId: "mock-loc-1",
+  pm: "HVAC — Quarterly PM",
+  serviceNotes: "",
+  extraServices: [],
+  vendorId: "",
+  company: "",
+  tech: "",
+  techPhone: "",
+  apptStart: "",
+  apptEnd: "",
+  apptTime: "",
+  status: "Canceled" as WorkOrderTableRow["status"],
+  docStatus: "No",
+  pocName: "",
+  pocPhone: "",
+  pocNotes: "",
+  additionalContacts: [],
+  dueDate: "",
+  rescheduleCount: 0,
+  carriedOver: 0,
+  isAddOn: false,
+  originalWeek: "",
+  originalDate: "",
+  isPastDue: false,
+  scheduleWeekOnly: false,
+  mediaCount: 0,
+  title: "",
+  priority: "",
+  primaryDispatchId: null,
+  rowVersion: "",
+  dispatchRowVersion: "",
+  flagColor: null,
+  upliftSummary: { hasUplift: false, pendingCount: 0 },
+};
+
+vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-table-data", () => ({
+  useWorkOrdersTableData: () => ({
+    rows: [canceledRow],
+    totalCount: 1,
+    scopeTotalCount: 1,
+    isFetching: false,
+    isLoading: false,
+    setSelectedId: vi.fn(),
+    patchRow: vi.fn(),
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-table-mutations", () => ({
+  useWorkOrderTableMutations: () => ({ patchField: vi.fn() }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-orders-list", () => ({
+  useWorkOrderUsers: () => ({ data: [] }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderLocations: () => ({ data: [] }),
+  useWorkOrderVendors: () => ({ data: [] }),
+  useWorkOrderBoardDetail: () => ({
+    data: undefined,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch: vi.fn(),
+  }),
+}));
+
+vi.mock("@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category", () => ({
+  useDropdownOptionsByCategory: () => ({ data: [] }),
+}));
+
+vi.mock("@/domain/locations/use-cases/use-location-detail", () => ({
+  useLocationDetail: () => ({ data: undefined }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-create-work-order-from-wizard", () => ({
+  useCreateWorkOrderFromWizard: () => ({
+    mutate: vi.fn(),
+    isPending: false,
+  }),
+}));
+
+vi.mock("@/domain/work-orders/mocks/is-wo-table-mock-enabled", () => ({
+  isWoTableMockEnabled: () => false,
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/wo-table", () => ({
+  WoTable: ({
+    onOpenSlideOver,
+  }: {
+    onOpenSlideOver: (row: WorkOrderTableRow, edit?: boolean) => void;
+  }) => (
+    <button type="button" onClick={() => onOpenSlideOver(canceledRow, false)}>
+      View canceled row
+    </button>
+  ),
+}));
+
+describe("WorkOrdersListHeader slice affordances", () => {
+  it("hides New WO and Advanced Filters when callbacks are omitted", () => {
+    renderWithProviders(
+      <WorkOrdersListHeader
+        search=""
+        weekLabel="5/4–5/8"
+        onSearchChange={vi.fn()}
+        activeFilterCount={0}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByRole("button", { name: /new wo/i })).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("Advanced Filters")).not.toBeInTheDocument();
+    expect(screen.getByLabelText("Search work orders")).toBeInTheDocument();
+  });
+
+  it("shows New WO and Advanced Filters when callbacks are provided", () => {
+    renderWithProviders(
+      <WorkOrdersListHeader
+        search=""
+        weekLabel="5/4–5/8"
+        onSearchChange={vi.fn()}
+        onNewWorkOrder={vi.fn()}
+        onOpenAdvancedFilters={vi.fn()}
+        activeFilterCount={2}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByRole("button", { name: /new wo/i })).toBeInTheDocument();
+    const filters = screen.getByRole("button", { name: "Advanced Filters" });
+    expect(filters).toBeInTheDocument();
+    expect(filters).toHaveTextContent("Filters");
+  });
+});
+
+describe("WorkOrdersListPage board-core public interface", () => {
+  it("opens New WO wizard on click, enforces step validation, closes, and View opens the slide-over", async () => {
+    navigate.mockReset();
+
+    renderWithProviders(<WorkOrdersListPage />, { route: "/workorders", withAuth: false });
+
+    expect(screen.queryByRole("button", { name: /view doc|draft/i })).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /new wo/i }));
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /type & schedule/i })).toBeInTheDocument();
+    expect(
+      screen.getByPlaceholderText(/leave blank for sh provisional number/i),
+    ).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: /continue/i }));
+    expect(screen.getByRole("heading", { name: /location & service/i })).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: /^back$/i }));
+    fireEvent.click(screen.getByRole("button", { name: /cancel/i }));
+
+    await waitForElementToBeRemoved(() => screen.queryByRole("dialog"));
+
+    fireEvent.click(screen.getByRole("button", { name: /view canceled row/i }));
+
+    expect(await screen.findByLabelText("Work order details")).toBeInTheDocument();
+    expect(screen.getAllByText(/WO-77/i).length).toBeGreaterThan(0);
+    expect(navigate).not.toHaveBeenCalled();
+  });
+});
+
+describe("CompDocCell slice affordances", () => {
+  it("hides View Doc / Draft when onOpen is omitted", () => {
+    const { container } = renderWithProviders(
+      <CompDocCell status="No" woType="PM" onOpenMedia={vi.fn()} />,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByRole("button", { name: /view doc|draft|n\/n/i })).not.toBeInTheDocument();
+    expect(container.textContent).toBe("");
+  });
+
+  it("shows View Doc when onOpen is provided", () => {
+    renderWithProviders(
+      <CompDocCell
+        status="Yes"
+        woType="PM"
+        pm="HVAC Inspection"
+        onOpen={vi.fn()}
+        onOpenMedia={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByRole("button", { name: /view doc/i })).toBeInTheDocument();
+  });
+
+  it("shows the uploaded file count for media work orders", () => {
+    renderWithProviders(
+      <CompDocCell status="No" woType="Emergency" mediaCount={2} onOpenMedia={vi.fn()} />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByRole("button", { name: /2 files/i })).toBeInTheDocument();
+  });
+
+  it("shows a singular label with one file and the Media prompt with none", () => {
+    const { unmount } = renderWithProviders(
+      <CompDocCell status="No" woType="Emergency" mediaCount={1} onOpenMedia={vi.fn()} />,
+      { withAuth: false },
+    );
+    expect(screen.getByRole("button", { name: /^1 file$/i })).toBeInTheDocument();
+    unmount();
+
+    renderWithProviders(
+      <CompDocCell status="No" woType="Emergency" mediaCount={0} onOpenMedia={vi.fn()} />,
+      { withAuth: false },
+    );
+    expect(screen.getByRole("button", { name: /^media$/i })).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/(protected)/workorders/work-orders-dispatcher-layout.test.tsx b/src/test/app/(protected)/workorders/work-orders-dispatcher-layout.test.tsx
new file mode 100644
index 00000000..246da779
--- /dev/null
+++ b/src/test/app/(protected)/workorders/work-orders-dispatcher-layout.test.tsx
@@ -0,0 +1,117 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import WorkOrdersListPage from "@/app/(protected)/workorders/index";
+import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("react-router", async () => {
+  const actual = await vi.importActual<typeof import("react-router")>("react-router");
+  return {
+    ...actual,
+    useNavigate: () => vi.fn(),
+  };
+});
+
+vi.mock("@/providers/auth-context", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/providers/auth-context")>();
+  return {
+    ...actual,
+    useAuthContext: () => ({ user: { id: "u1" } }),
+  };
+});
+
+vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-list-filters", () => ({
+  useWorkOrdersListFilters: () => ({
+    search: "",
+    handleSearchChange: vi.fn(),
+    advOpen: false,
+    setAdvOpen: vi.fn(),
+    advApplied: null,
+    advInitial: EMPTY_ADVANCED_FILTERS,
+    applyAdvancedFilters: vi.fn(),
+    clearAdvancedFilters: vi.fn(),
+    clearAdvancedFilterChip: vi.fn(),
+    activeFilterCount: 0,
+    weekMonday: "2026-07-20",
+    selectedDayIso: "2026-07-20",
+    setWeekMonday: vi.fn(),
+    setSelectedDayIso: vi.fn(),
+    navigateToDay: vi.fn(),
+    dispatcherIds: new Set<string>(),
+    setDispatcherIds: vi.fn(),
+    types: new Set(),
+    setTypes: vi.fn(),
+  }),
+}));
+
+vi.mock("@/app/(protected)/workorders/_hooks/use-work-orders-table-data", () => ({
+  useWorkOrdersTableData: () => ({
+    rows: [],
+    totalCount: 0,
+    scopeTotalCount: 0,
+    isFetching: false,
+    isLoading: false,
+    setSelectedId: vi.fn(),
+    patchRow: vi.fn(),
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-table-mutations", () => ({
+  useWorkOrderTableMutations: () => ({ patchField: vi.fn() }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-orders-list", () => ({
+  useWorkOrderUsers: () => ({
+    data: [{ id: "u1", name: "Dispatcher One" }],
+  }),
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderLocations: () => ({ data: [] }),
+  useWorkOrderVendors: () => ({ data: [] }),
+  useWorkOrderBoardDetail: () => ({
+    data: undefined,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch: vi.fn(),
+  }),
+}));
+
+vi.mock("@/domain/settings/dropdown-options/use-cases/use-dropdown-options-by-category", () => ({
+  useDropdownOptionsByCategory: () => ({ data: [] }),
+}));
+
+vi.mock("@/domain/work-orders/mocks/is-wo-table-mock-enabled", () => ({
+  isWoTableMockEnabled: () => false,
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/list/table/wo-table", () => ({
+  WoTable: () => null,
+}));
+
+vi.mock("@/app/(protected)/workorders/_components/media/media-upload-modal", () => ({
+  MediaUploadModal: () => null,
+}));
+
+describe("Work Orders dispatcher filter layout (SH-242)", () => {
+  it("places the dispatcher trigger under the title and above week/day controls", () => {
+    renderWithProviders(<WorkOrdersListPage />, { route: "/workorders", withAuth: false });
+
+    const title = screen.getByRole("heading", { name: "Work Orders" });
+    const dispatcher = screen.getByRole("button", { name: "All dispatchers" });
+    const weekAndDay = screen.getByLabelText("Week and day");
+    const week = screen.getByRole("button", { name: "Week 7/20–7/24" });
+
+    expect(title.compareDocumentPosition(dispatcher) & Node.DOCUMENT_POSITION_FOLLOWING).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+    expect(dispatcher.compareDocumentPosition(weekAndDay) & Node.DOCUMENT_POSITION_FOLLOWING).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+    expect(weekAndDay.contains(dispatcher)).toBe(false);
+    expect(weekAndDay.contains(week)).toBe(true);
+    expect(weekAndDay.contains(screen.getByTestId("wo-type-filter-trigger"))).toBe(true);
+    expect(weekAndDay.contains(screen.getByText("0 of 0"))).toBe(true);
+  });
+});
diff --git a/src/test/app/(protected)/workorders/work-orders-search-scope.test.tsx b/src/test/app/(protected)/workorders/work-orders-search-scope.test.tsx
new file mode 100644
index 00000000..dbf95538
--- /dev/null
+++ b/src/test/app/(protected)/workorders/work-orders-search-scope.test.tsx
@@ -0,0 +1,130 @@
+import { act, renderHook, screen, waitFor } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
+import { createTestQueryClient, renderWithProviders } from "@/test/test-utils";
+
+const { searchBoard, getBoard, emptyList } = vi.hoisted(() => ({
+  searchBoard: vi.fn(),
+  getBoard: vi.fn(),
+  emptyList: [] as const,
+}));
+
+vi.mock("@/hooks/use-debounce", () => ({
+  useDebounce: <T,>(value: T) => value,
+}));
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    searchBoard: (...args: unknown[]) => searchBoard(...args),
+    getBoard: (...args: unknown[]) => getBoard(...args),
+  },
+}));
+
+vi.mock("@/domain/work-orders/use-cases/use-work-order-detail", () => ({
+  useWorkOrderLocations: () => ({ data: emptyList }),
+  useWorkOrderVendors: () => ({ data: emptyList }),
+}));
+
+import { WorkOrdersListHeader } from "@/app/(protected)/workorders/_components/list/work-orders-list-header";
+import { useWorkOrdersBoardSource } from "@/app/(protected)/workorders/_hooks/use-work-orders-board-source";
+import { useWorkOrdersListFilters } from "@/app/(protected)/workorders/_hooks/use-work-orders-list-filters";
+
+const EMPTY_RESULT = { items: [], totalCount: 0, page: 0, pageSize: 25 };
+
+function useBoardWithFilters() {
+  const filters = useWorkOrdersListFilters();
+  useWorkOrdersBoardSource(filters);
+  return filters;
+}
+
+function renderBoardSource() {
+  const client = createTestQueryClient();
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={client}>{children}</QueryClientProvider>
+  );
+  return renderHook(() => useBoardWithFilters(), { wrapper });
+}
+
+describe("keyword search scope indicator", () => {
+  it("shows no scope badge while the search box is empty", () => {
+    renderWithProviders(
+      <WorkOrdersListHeader
+        search=""
+        weekLabel="5/4–5/8"
+        onSearchChange={vi.fn()}
+        activeFilterCount={0}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByText(/searching within/i)).not.toBeInTheDocument();
+  });
+
+  it("names the active week while a keyword is typed", () => {
+    renderWithProviders(
+      <WorkOrdersListHeader
+        search="hvac"
+        weekLabel="5/4–5/8"
+        onSearchChange={vi.fn()}
+        activeFilterCount={0}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByText("Searching within 5/4–5/8")).toBeInTheDocument();
+  });
+
+  it("hides the scope label while Advanced Filters are active", () => {
+    renderWithProviders(
+      <WorkOrdersListHeader
+        search="hvac"
+        weekLabel="5/4–5/8"
+        onSearchChange={vi.fn()}
+        activeFilterCount={1}
+        advancedFiltersActive
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByText(/searching within/i)).not.toBeInTheDocument();
+  });
+});
+
+describe("keyword search vs Advanced Filters scope", () => {
+  beforeEach(() => {
+    searchBoard.mockReset().mockResolvedValue(EMPTY_RESULT);
+    getBoard.mockReset().mockResolvedValue(EMPTY_RESULT);
+  });
+
+  it("scopes keyword search to the active week", async () => {
+    const { result } = renderBoardSource();
+
+    act(() => {
+      result.current.setWeekMonday("2026-05-04");
+      result.current.handleSearchChange("hvac");
+    });
+
+    await waitFor(() =>
+      expect(getBoard).toHaveBeenCalledWith(
+        expect.objectContaining({ weekStart: "2026-05-04", weekEnd: "2026-05-08", search: "hvac" }),
+      ),
+    );
+    expect(searchBoard).not.toHaveBeenCalled();
+  });
+
+  it("keeps Advanced Filters global and ignores the week-scoped keyword", async () => {
+    const { result } = renderBoardSource();
+
+    act(() => {
+      result.current.handleSearchChange("hvac");
+      result.current.applyAdvancedFilters({ ...EMPTY_ADVANCED_FILTERS, rescheduled: true });
+    });
+
+    await waitFor(() => expect(searchBoard).toHaveBeenCalled());
+    const params = searchBoard.mock.lastCall?.[0] as Record<string, unknown>;
+    expect(params.search).toBeUndefined();
+    expect(params).not.toHaveProperty("weekStart");
+  });
+});
diff --git a/src/test/app/v/dispatch-detail-sections.test.tsx b/src/test/app/v/dispatch-detail-sections.test.tsx
new file mode 100644
index 00000000..8b7258cf
--- /dev/null
+++ b/src/test/app/v/dispatch-detail-sections.test.tsx
@@ -0,0 +1,100 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DispatchDetailSections } from "@/app/v/[token]/dispatch/_components/dispatch-detail-sections";
+import { isVendorPortalLockedStatus } from "@/domain/vendor-portal/lib/status-helpers";
+import type {
+  VendorPortalDispatchDetail,
+  VendorPortalSignoff,
+} from "@/domain/vendor-portal/types/vendor-portal";
+import { renderWithProviders } from "@/test/test-utils";
+
+vi.mock("@/app/v/[token]/dispatch/_components/checklist-section", () => ({
+  ChecklistSection: () => <div data-testid="checklist-mock" />,
+}));
+vi.mock("@/app/v/_components/vendor-portal-documents", () => ({
+  VendorPortalDocuments: () => <div data-testid="documents-mock" />,
+}));
+vi.mock("@/app/v/[token]/dispatch/_components/uplift-requests-section", () => ({
+  UpliftRequestsSection: () => <div data-testid="uplift-mock" />,
+}));
+vi.mock("@/app/v/[token]/dispatch/_components/comments-section", () => ({
+  CommentsSection: () => <div data-testid="comments-mock" />,
+}));
+
+function buildData(
+  overrides: Partial<VendorPortalDispatchDetail> = {},
+): VendorPortalDispatchDetail {
+  return {
+    id: 9,
+    dispatchNumber: "DSP-9",
+    status: "In Progress",
+    nteAmount: 500,
+    checklist: [],
+    comments: [],
+    upliftRequests: [],
+    signoffs: [],
+    documents: [],
+    ...overrides,
+  };
+}
+
+function renderSections({
+  status,
+  signoffs = [],
+}: {
+  status: string;
+  signoffs?: VendorPortalSignoff[];
+}) {
+  const data = buildData({ status, signoffs });
+  const locked = isVendorPortalLockedStatus(status);
+
+  return renderWithProviders(
+    <DispatchDetailSections
+      token="portal-token"
+      dispatchId={9}
+      data={data}
+      locked={locked}
+      refresh={vi.fn()}
+      pollEvidenceDocument={vi.fn(async () => undefined)}
+      updateLocal={vi.fn()}
+    />,
+    { withAuth: false },
+  );
+}
+
+describe("DispatchDetailSections signoff locking", () => {
+  it.each(["Verified", "Cancelled", "Refused"])(
+    "locks both customer and vendor signoff forms when status is %s",
+    (status) => {
+      renderSections({ status });
+
+      expect(screen.getAllByText(/Signoff is unavailable for this dispatch/i)).toHaveLength(2);
+      expect(screen.queryAllByRole("button", { name: "Submit Signoff" })).toHaveLength(0);
+    },
+  );
+
+  it.each(["Completed", "In Progress"])(
+    "keeps both signoff forms available when status is %s",
+    (status) => {
+      renderSections({ status });
+
+      expect(screen.getAllByRole("button", { name: "Submit Signoff" })).toHaveLength(2);
+      expect(screen.queryByText(/Signoff is unavailable/i)).not.toBeInTheDocument();
+    },
+  );
+
+  it("keeps an existing signoff visible while the dispatch is locked", () => {
+    const customerSignoff: VendorPortalSignoff = {
+      signoffType: "customer",
+      name: "Ada Lovelace",
+      signatureMethod: "drawn",
+      signedAt: "2024-01-02T03:04:05Z",
+    };
+    renderSections({ status: "Refused", signoffs: [customerSignoff] });
+
+    expect(screen.getByText("Ada Lovelace")).toBeInTheDocument();
+    expect(screen.getByText("drawn")).toBeInTheDocument();
+    expect(screen.getByText(/Signoff is unavailable/i)).toBeInTheDocument();
+    expect(screen.queryAllByRole("button", { name: "Submit Signoff" })).toHaveLength(0);
+  });
+});
diff --git a/src/test/app/v/dispatch-snapshot-details.test.tsx b/src/test/app/v/dispatch-snapshot-details.test.tsx
new file mode 100644
index 00000000..66f31610
--- /dev/null
+++ b/src/test/app/v/dispatch-snapshot-details.test.tsx
@@ -0,0 +1,52 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { DispatchSnapshotDetails } from "@/app/v/[token]/dispatch/_components/dispatch-snapshot-details";
+import type { VendorPortalDispatchDetail } from "@/domain/vendor-portal/types/vendor-portal";
+import { renderWithProviders } from "@/test/test-utils";
+
+function buildData(
+  overrides: Partial<VendorPortalDispatchDetail> = {},
+): VendorPortalDispatchDetail {
+  return {
+    id: 9,
+    dispatchNumber: "DSP-9",
+    status: "Verified",
+    nteAmount: 500,
+    checklist: [],
+    comments: [],
+    upliftRequests: [],
+    signoffs: [],
+    documents: [],
+    ...overrides,
+  };
+}
+
+describe("DispatchSnapshotDetails locked banner", () => {
+  it.each(["Verified", "Cancelled", "Refused"])(
+    "states that comments remain open when status is %s",
+    (status) => {
+      renderWithProviders(<DispatchSnapshotDetails data={buildData({ status })} locked />, {
+        withAuth: false,
+      });
+
+      expect(
+        screen.getByText(
+          new RegExp(
+            `This dispatch is ${status.toLowerCase()} and locked to further changes\\. Comments remain open\\.`,
+            "i",
+          ),
+        ),
+      ).toBeInTheDocument();
+      expect(screen.queryByText(/sign-off/i)).not.toBeInTheDocument();
+    },
+  );
+
+  it("hides the locked banner when the dispatch is not locked", () => {
+    renderWithProviders(
+      <DispatchSnapshotDetails data={buildData({ status: "In Progress" })} locked={false} />,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByText(/locked to further changes/i)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/v/refuse-dispatch-dialog.test.tsx b/src/test/app/v/refuse-dispatch-dialog.test.tsx
new file mode 100644
index 00000000..ef0c9fe7
--- /dev/null
+++ b/src/test/app/v/refuse-dispatch-dialog.test.tsx
@@ -0,0 +1,210 @@
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { RefuseDispatchDialog } from "@/app/v/[token]/dispatch/_components/refuse-dispatch-dialog";
+import {
+  VendorPortalContext,
+  type VendorPortalContextValue,
+} from "@/app/v/_components/vendor-portal-context";
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+import { REFUSE_REASON_MAX_LENGTH } from "@/domain/vendor-portal/schemas/refuse-dispatch-schema";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { createTestQueryClient, renderWithProviders } from "@/test/test-utils";
+
+function renderDialog({
+  token = "portal-token",
+  dispatchId = 9,
+  onClose = vi.fn(),
+  onRefused = vi.fn(),
+}: Partial<{
+  token: string;
+  dispatchId: number;
+  onClose: () => void;
+  onRefused: () => void;
+}> = {}) {
+  const queryClient = createTestQueryClient();
+  const invalidateSpy = vi.spyOn(queryClient, "invalidateQueries");
+
+  const portalValue: VendorPortalContextValue = {
+    token,
+    vendor: { companyName: "Gateway Plumbing", vendorId: 101 },
+    status: "ready",
+    error: null,
+  };
+
+  const utils = renderWithProviders(
+    <VendorPortalContext.Provider value={portalValue}>
+      <RefuseDispatchDialog open dispatchId={dispatchId} onClose={onClose} onRefused={onRefused} />
+    </VendorPortalContext.Provider>,
+    { withAuth: false, queryClient },
+  );
+
+  return { ...utils, invalidateSpy, queryClient };
+}
+
+beforeEach(() => {
+  vi.spyOn(vendorPortalApi, "refuse").mockResolvedValue({ id: 9, status: "Refused" });
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("RefuseDispatchDialog", () => {
+  it("submits without a reason when the field is left empty", async () => {
+    renderDialog();
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Refuse dispatch" }));
+    });
+
+    await waitFor(() =>
+      expect(vendorPortalApi.refuse).toHaveBeenCalledWith("portal-token", 9, undefined),
+    );
+  });
+
+  it("trims a supplied reason before sending", async () => {
+    renderDialog();
+
+    fireEvent.change(screen.getByLabelText(/Reason/i), { target: { value: "  too busy  " } });
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Refuse dispatch" }));
+    });
+
+    await waitFor(() =>
+      expect(vendorPortalApi.refuse).toHaveBeenCalledWith("portal-token", 9, "too busy"),
+    );
+  });
+
+  it("blocks submission when the reason exceeds the length cap", async () => {
+    renderDialog();
+
+    const overLimit = "a".repeat(REFUSE_REASON_MAX_LENGTH + 1);
+    fireEvent.change(screen.getByLabelText(/Reason/i), { target: { value: overLimit } });
+
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: "Refuse dispatch" })).toBeDisabled(),
+    );
+    expect(vendorPortalApi.refuse).not.toHaveBeenCalled();
+  });
+
+  it("shows a live character counter bounded by the limit", () => {
+    renderDialog();
+
+    fireEvent.change(screen.getByLabelText(/Reason/i), { target: { value: "abc" } });
+
+    expect(screen.getByText(`3/${REFUSE_REASON_MAX_LENGTH}`)).toBeInTheDocument();
+  });
+
+  it("invalidates the detail and list cache and closes on success", async () => {
+    const onClose = vi.fn();
+    const onRefused = vi.fn();
+    const { invalidateSpy } = renderDialog({ onClose, onRefused });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Refuse dispatch" }));
+    });
+
+    await waitFor(() => expect(onClose).toHaveBeenCalled());
+    expect(onRefused).toHaveBeenCalled();
+    expect(invalidateSpy).toHaveBeenCalledWith({
+      queryKey: queryKeys.vendorPortal.dispatch("portal-token", 9),
+    });
+    expect(invalidateSpy).toHaveBeenCalledWith({
+      queryKey: queryKeys.vendorPortal.dispatches("portal-token"),
+    });
+  });
+
+  it("surfaces a safe inline error and keeps the dialog open on failure", async () => {
+    vi.spyOn(vendorPortalApi, "refuse").mockRejectedValueOnce(new Error("nope"));
+    const onClose = vi.fn();
+    renderDialog({ onClose });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Refuse dispatch" }));
+    });
+
+    await waitFor(() => expect(screen.getByRole("alert")).toHaveTextContent(/Unable to refuse/i));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("closes without refusing when cancel is pressed", async () => {
+    const onClose = vi.fn();
+    renderDialog({ onClose });
+
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+
+    await waitFor(() => expect(onClose).toHaveBeenCalled());
+    expect(vendorPortalApi.refuse).not.toHaveBeenCalled();
+  });
+
+  it("blocks Escape and backdrop close while a refusal is pending, then closes on success", async () => {
+    let resolveRefusal!: (value: { id: number; status: string }) => void;
+    vi.spyOn(vendorPortalApi, "refuse").mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolveRefusal = resolve;
+        }),
+    );
+    const onClose = vi.fn();
+    renderDialog({ onClose });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Refuse dispatch" }));
+    });
+
+    await waitFor(() => expect(screen.getByRole("button", { name: "Refusing…" })).toBeDisabled());
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeDisabled();
+
+    const backdrop = document.querySelector(".MuiBackdrop-root");
+    expect(backdrop).not.toBeNull();
+    fireEvent.click(backdrop as Element);
+    fireEvent.keyDown(document.body, { key: "Escape" });
+
+    expect(onClose).not.toHaveBeenCalled();
+
+    await act(async () => {
+      resolveRefusal({ id: 9, status: "Refused" });
+    });
+
+    await waitFor(() => expect(onClose).toHaveBeenCalled());
+  });
+
+  it("clears the stale error and reason after closing and reopening", async () => {
+    vi.spyOn(vendorPortalApi, "refuse").mockRejectedValueOnce(new Error("nope"));
+    const onClose = vi.fn();
+    const onRefused = vi.fn();
+
+    const portalValue: VendorPortalContextValue = {
+      token: "portal-token",
+      vendor: { companyName: "Gateway Plumbing", vendorId: 101 },
+      status: "ready",
+      error: null,
+    };
+    const renderEl = (open: boolean) => (
+      <VendorPortalContext.Provider value={portalValue}>
+        <RefuseDispatchDialog open={open} dispatchId={9} onClose={onClose} onRefused={onRefused} />
+      </VendorPortalContext.Provider>
+    );
+
+    const { rerender } = renderWithProviders(renderEl(true), { withAuth: false });
+
+    fireEvent.change(screen.getByLabelText(/Reason/i), { target: { value: "too busy" } });
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Refuse dispatch" }));
+    });
+    await waitFor(() => expect(screen.getByRole("alert")).toHaveTextContent(/Unable to refuse/i));
+    expect(screen.getByText(`8/${REFUSE_REASON_MAX_LENGTH}`)).toBeInTheDocument();
+
+    await act(async () => {
+      rerender(renderEl(false));
+    });
+
+    await act(async () => {
+      rerender(renderEl(true));
+    });
+
+    await waitFor(() => expect(screen.queryByRole("alert")).not.toBeInTheDocument());
+    expect(screen.getByText(`0/${REFUSE_REASON_MAX_LENGTH}`)).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/v/signoff-section.test.tsx b/src/test/app/v/signoff-section.test.tsx
new file mode 100644
index 00000000..b83b0b7e
--- /dev/null
+++ b/src/test/app/v/signoff-section.test.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SignoffSection } from "@/app/v/[token]/dispatch/_components/signoff-section";
+
+function renderSection(overrides: Partial<React.ComponentProps<typeof SignoffSection>> = {}) {
+  return render(
+    <SignoffSection
+      token="portal-token"
+      dispatchId={9}
+      existing={[]}
+      signoffType="customer"
+      nameLabel="Customer name"
+      onAdded={vi.fn()}
+      {...overrides}
+    />,
+  );
+}
+
+describe("SignoffSection", () => {
+  it("shows status-neutral locked copy when submission is locked", () => {
+    renderSection({ submissionLocked: true });
+
+    expect(screen.getByText(/Signoff is unavailable for this dispatch/i)).toBeInTheDocument();
+    expect(screen.queryByText(/refused/i)).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Submit Signoff" })).not.toBeInTheDocument();
+  });
+
+  it("shows the submission form when unlocked", () => {
+    renderSection();
+
+    expect(screen.getByRole("button", { name: "Submit Signoff" })).toBeInTheDocument();
+  });
+
+  it("shows an existing signoff even while locked", () => {
+    renderSection({
+      signoffType: "vendor",
+      nameLabel: "Your name",
+      submissionLocked: true,
+      existing: [{ signoffType: "vendor", name: "Grace Hopper", signatureMethod: "typed" }],
+    });
+
+    expect(screen.getByText("Grace Hopper")).toBeInTheDocument();
+    expect(screen.queryByText(/Signoff is unavailable/i)).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Submit Signoff" })).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/v/uplift-request-form.test.tsx b/src/test/app/v/uplift-request-form.test.tsx
new file mode 100644
index 00000000..91cfc13e
--- /dev/null
+++ b/src/test/app/v/uplift-request-form.test.tsx
@@ -0,0 +1,48 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { UpliftRequestForm } from "@/app/v/[token]/dispatch/_components/uplift-request-form";
+
+function renderForm(overrides: Partial<React.ComponentProps<typeof UpliftRequestForm>> = {}) {
+  return render(
+    <UpliftRequestForm
+      mode="revise"
+      currentNte={1000}
+      initialRequested="1000"
+      initialReason=""
+      hasExistingEvidence={false}
+      submitting={false}
+      uploadingPercent={undefined}
+      errorMessage=""
+      onSubmit={vi.fn()}
+      onCancel={vi.fn()}
+      {...overrides}
+    />,
+  );
+}
+
+describe("UpliftRequestForm revise mode", () => {
+  it("shows reason and evidence fields regardless of amount", () => {
+    renderForm({ initialRequested: "900" });
+
+    expect(screen.getByLabelText(/reason/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/evidence/i)).toBeInTheDocument();
+  });
+
+  it("blocks submit and does not call onSubmit when revised NTE is at or below current NTE", () => {
+    const onSubmit = vi.fn();
+    renderForm({ initialRequested: "1000", onSubmit });
+
+    fireEvent.click(screen.getByRole("button", { name: /submit revision/i }));
+
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(screen.getByText(/must be greater than the current NTE/i)).toBeInTheDocument();
+  });
+
+  it("reports the current NTE threshold in the actionable error", () => {
+    renderForm({ initialRequested: "900", currentNte: 1000 });
+
+    fireEvent.click(screen.getByRole("button", { name: /submit revision/i }));
+
+    expect(screen.getByText(/\$1000\.00/)).toBeInTheDocument();
+  });
+});
diff --git a/src/test/app/v/vendor-portal-documents.test.tsx b/src/test/app/v/vendor-portal-documents.test.tsx
new file mode 100644
index 00000000..e8a33e78
--- /dev/null
+++ b/src/test/app/v/vendor-portal-documents.test.tsx
@@ -0,0 +1,100 @@
+import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { VendorPortalDocuments } from "@/app/v/_components/vendor-portal-documents";
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+import type { VendorPortalDocument } from "@/domain/vendor-portal/types/vendor-portal";
+import { renderWithProviders } from "@/test/test-utils";
+
+const quarantinedDocument: VendorPortalDocument = {
+  id: 12,
+  originalFileName: "completion.pdf",
+  contentType: "application/pdf",
+  sizeBytes: 1024,
+  scanStatus: "Pending",
+  reviewStatus: "Processing",
+  version: 1,
+  canDownload: false,
+};
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("VendorPortalDocuments", () => {
+  it("rejects unsupported files before starting an upload", async () => {
+    const upload = vi.spyOn(vendorPortalApi, "uploadDocument");
+    renderWithProviders(
+      <VendorPortalDocuments
+        token="portal-token"
+        dispatchId={7}
+        documents={[]}
+        locked={false}
+        onChanged={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.change(screen.getByLabelText("Choose completion document"), {
+      target: { files: [new File(["text"], "notes.txt", { type: "text/plain" })] },
+    });
+
+    expect(await screen.findByRole("alert")).toHaveTextContent(
+      "Only PDF, JPG, and PNG files are allowed.",
+    );
+    expect(upload).not.toHaveBeenCalled();
+  });
+
+  it("keeps pending documents quarantined", () => {
+    renderWithProviders(
+      <VendorPortalDocuments
+        token="portal-token"
+        dispatchId={7}
+        documents={[quarantinedDocument]}
+        locked={false}
+        onChanged={vi.fn()}
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByRole("button", { name: "Quarantined" })).toBeDisabled();
+    expect(screen.getByText("Pending")).toBeInTheDocument();
+    expect(screen.getByText("Processing")).toBeInTheDocument();
+  });
+
+  it("reports upload progress and refreshes the dispatch after success", async () => {
+    const onChanged = vi.fn().mockResolvedValue(undefined);
+    let finishUpload: (() => void) | undefined;
+    vi.spyOn(vendorPortalApi, "uploadDocument").mockImplementation(async ({ onProgress }) => {
+      onProgress(65);
+      await new Promise<void>((resolve) => {
+        finishUpload = resolve;
+      });
+      return quarantinedDocument;
+    });
+    renderWithProviders(
+      <VendorPortalDocuments
+        token="portal-token"
+        dispatchId={7}
+        documents={[]}
+        locked={false}
+        onChanged={onChanged}
+      />,
+      { withAuth: false },
+    );
+
+    fireEvent.change(screen.getByLabelText("Choose completion document"), {
+      target: {
+        files: [
+          new File(["%PDF-1.4"], "completion.pdf", {
+            type: "application/pdf",
+          }),
+        ],
+      },
+    });
+
+    expect(await screen.findByText("Uploading… 65%")).toBeInTheDocument();
+    finishUpload?.();
+    await waitFor(() => expect(onChanged).toHaveBeenCalledOnce());
+  });
+});
diff --git a/src/test/components/auth/auth-routes.test.tsx b/src/test/components/auth/auth-routes.test.tsx
new file mode 100644
index 00000000..c39dd5f5
--- /dev/null
+++ b/src/test/components/auth/auth-routes.test.tsx
@@ -0,0 +1,114 @@
+import { screen } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { GuestRoute } from "@/components/auth/guest-route";
+import { ProtectedRoute } from "@/components/auth/protected-route";
+import type { AuthUser } from "@/domain/auth/types/auth-user";
+import { AuthContext, type AuthContextValue } from "@/providers/auth-context";
+import { renderWithProviders } from "@/test/test-utils";
+
+const mockAuthUser: AuthUser = {
+  token: "test-jwt-token",
+  expiration: new Date(Date.now() + 60 * 60 * 1000).toISOString(),
+  email: "user@seahavenind.com",
+  userRoles: "Admin",
+  phoneNumber: "5551234567",
+  fullname: "Test User",
+  id: 1,
+};
+
+function createAuthContextValue(overrides: Partial<AuthContextValue> = {}): AuthContextValue {
+  return {
+    user: null,
+    isAuthenticated: false,
+    isLoading: false,
+    error: null,
+    login: vi.fn(),
+    logout: vi.fn(),
+    changePassword: vi.fn(),
+    isLoggingIn: false,
+    isLoggingOut: false,
+    isChangingPassword: false,
+    loginError: null,
+    ...overrides,
+  };
+}
+
+function renderWithAuthContext(ui: ReactElement, authValue: AuthContextValue, route = "/") {
+  return renderWithProviders(<AuthContext.Provider value={authValue}>{ui}</AuthContext.Provider>, {
+    withAuth: false,
+    route,
+  });
+}
+
+describe("ProtectedRoute", () => {
+  it("redirects unauthenticated users to login", () => {
+    renderWithAuthContext(
+      <ProtectedRoute>
+        <div>Protected content</div>
+      </ProtectedRoute>,
+      createAuthContextValue({ isAuthenticated: false }),
+      "/workorders",
+    );
+
+    expect(screen.queryByText("Protected content")).not.toBeInTheDocument();
+  });
+
+  it("renders children for authenticated users", () => {
+    renderWithAuthContext(
+      <ProtectedRoute>
+        <div>Protected content</div>
+      </ProtectedRoute>,
+      createAuthContextValue({
+        isAuthenticated: true,
+        user: mockAuthUser,
+      }),
+      "/workorders",
+    );
+
+    expect(screen.getByText("Protected content")).toBeInTheDocument();
+  });
+
+  it("shows loading indicator while session is loading", () => {
+    renderWithAuthContext(
+      <ProtectedRoute>
+        <div>Protected content</div>
+      </ProtectedRoute>,
+      createAuthContextValue({ isLoading: true }),
+      "/workorders",
+    );
+
+    expect(screen.getByRole("status", { name: "Loading" })).toBeInTheDocument();
+    expect(screen.queryByText("Protected content")).not.toBeInTheDocument();
+  });
+});
+
+describe("GuestRoute", () => {
+  it("redirects authenticated users away from login", () => {
+    renderWithAuthContext(
+      <GuestRoute>
+        <div>Login content</div>
+      </GuestRoute>,
+      createAuthContextValue({
+        isAuthenticated: true,
+        user: mockAuthUser,
+      }),
+      "/login",
+    );
+
+    expect(screen.queryByText("Login content")).not.toBeInTheDocument();
+  });
+
+  it("renders children for unauthenticated users", () => {
+    renderWithAuthContext(
+      <GuestRoute>
+        <div>Login content</div>
+      </GuestRoute>,
+      createAuthContextValue({ isAuthenticated: false }),
+      "/login",
+    );
+
+    expect(screen.getByText("Login content")).toBeInTheDocument();
+  });
+});
diff --git a/src/test/components/common/address-map-preview.test.tsx b/src/test/components/common/address-map-preview.test.tsx
new file mode 100644
index 00000000..c1564424
--- /dev/null
+++ b/src/test/components/common/address-map-preview.test.tsx
@@ -0,0 +1,68 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AddressMapPreview } from "@/components/common/address-map-preview";
+import { renderWithProviders } from "@/test/test-utils";
+
+const complete = { street: "6735 Trippel Rd", city: "Theodore", state: "AL" };
+
+function mapFrame() {
+  return screen.getByTitle("Map of 6735 Trippel Rd Theodore AL");
+}
+
+describe("AddressMapPreview structured input", () => {
+  it("renders a compact accessible placeholder while the address is incomplete", () => {
+    renderWithProviders(
+      <AddressMapPreview address={{ street: "6735 Trippel Rd" }} placeholderWhenIncomplete />,
+      { withAuth: false },
+    );
+
+    const placeholder = screen.getByRole("status");
+    expect(placeholder).toHaveTextContent(/street, city, and state/i);
+    expect(screen.queryByTitle(/^Map of /)).not.toBeInTheDocument();
+  });
+
+  it("transitions from the placeholder to the iframe once the address completes", () => {
+    const { rerender } = renderWithProviders(
+      <AddressMapPreview
+        address={{ street: "6735 Trippel Rd", city: "Theodore" }}
+        placeholderWhenIncomplete
+      />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByRole("status")).toBeInTheDocument();
+
+    rerender(<AddressMapPreview address={complete} placeholderWhenIncomplete />);
+    const frame = mapFrame();
+    expect(frame).toBeInTheDocument();
+    expect(frame).toHaveAttribute(
+      "src",
+      "https://www.google.com/maps?q=6735%20Trippel%20Rd%20Theodore%20AL&output=embed",
+    );
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  });
+
+  it("stays blank for incomplete input when the placeholder is not opted into", () => {
+    const { container } = renderWithProviders(
+      <AddressMapPreview address={{ street: "6735 Trippel Rd" }} />,
+      { withAuth: false },
+    );
+
+    expect(container.querySelector("iframe")).toBeNull();
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  });
+});
+
+describe("AddressMapPreview pre-composed query", () => {
+  it("renders the map only when the saved query is non-empty", () => {
+    const { container, rerender } = renderWithProviders(<AddressMapPreview query="900 Live St" />, {
+      withAuth: false,
+    });
+
+    expect(screen.getByTitle("Map of 900 Live St")).toBeInTheDocument();
+
+    rerender(<AddressMapPreview query="   " />);
+    expect(container.querySelector("iframe")).toBeNull();
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/test/components/common/comment-mention-composer.test.tsx b/src/test/components/common/comment-mention-composer.test.tsx
new file mode 100644
index 00000000..a732af50
--- /dev/null
+++ b/src/test/components/common/comment-mention-composer.test.tsx
@@ -0,0 +1,28 @@
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it } from "vitest";
+
+import { CommentMentionComposer } from "@/components/common/comment-mention-composer";
+import { renderWithProviders } from "@/test/test-utils";
+
+const candidates = [{ id: "1", name: "Alice Dispatcher" }];
+
+function MentionComposerHarness() {
+  const [value, setValue] = useState("");
+
+  return <CommentMentionComposer value={value} onChange={setValue} candidates={candidates} />;
+}
+
+describe("CommentMentionComposer", () => {
+  it("keeps the suggestion menu visible after typing @", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<MentionComposerHarness />, { withAuth: false });
+
+    await user.type(screen.getByRole("textbox"), "@");
+
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "@Alice Dispatcher" })).toBeVisible();
+    });
+  });
+});
diff --git a/src/test/components/common/signature-capture.test.tsx b/src/test/components/common/signature-capture.test.tsx
new file mode 100644
index 00000000..d9a8fb62
--- /dev/null
+++ b/src/test/components/common/signature-capture.test.tsx
@@ -0,0 +1,62 @@
+import { fireEvent, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { SignatureCapture } from "@/components/common/signature-capture";
+import { renderWithProviders } from "@/test/test-utils";
+
+/**
+ * Mirrors how a consumer wires `isPending` from a mutation: the flag flips to
+ * `true` synchronously once `onSave` fires and only clears when the caller
+ * decides to (e.g. on mutation settle), never inside `SignatureCapture` itself.
+ */
+function SignatureCaptureHarness({ onSave }: { onSave: () => void }) {
+  const [isPending, setIsPending] = useState(false);
+
+  return (
+    <SignatureCapture
+      title="Customer Sign-off"
+      isPending={isPending}
+      onClose={vi.fn()}
+      onSave={() => {
+        setIsPending(true);
+        onSave();
+      }}
+    />
+  );
+}
+
+async function fillTypedSignature(user: ReturnType<typeof userEvent.setup>) {
+  await user.type(screen.getByPlaceholderText("Enter signer's full name"), "Jane Doe");
+  await user.click(screen.getByRole("tab", { name: "Type" }));
+  await user.type(screen.getByPlaceholderText("Type your name"), "Jane Doe");
+}
+
+describe("SignatureCapture", () => {
+  it("disables Save Signature and closing controls while isPending", () => {
+    renderWithProviders(
+      <SignatureCapture title="Vendor Sign-off" isPending onClose={vi.fn()} onSave={vi.fn()} />,
+      { withAuth: false },
+    );
+
+    expect(screen.getByRole("button", { name: "Saving…" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Close" })).toBeDisabled();
+  });
+
+  it("calls onSave exactly once when Save Signature is double-clicked before the mutation settles", async () => {
+    const user = userEvent.setup();
+    const handleSave = vi.fn();
+    renderWithProviders(<SignatureCaptureHarness onSave={handleSave} />, { withAuth: false });
+
+    await fillTypedSignature(user);
+
+    const saveButton = screen.getByRole("button", { name: "Save Signature" });
+    fireEvent.click(saveButton);
+    fireEvent.click(saveButton);
+
+    expect(handleSave).toHaveBeenCalledTimes(1);
+    expect(screen.getByRole("button", { name: "Saving…" })).toBeDisabled();
+  });
+});
diff --git a/src/test/components/ui/collapsible-section.test.tsx b/src/test/components/ui/collapsible-section.test.tsx
new file mode 100644
index 00000000..0d1d1994
--- /dev/null
+++ b/src/test/components/ui/collapsible-section.test.tsx
@@ -0,0 +1,16 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { CollapsibleSection } from "@/components/ui/collapsible-section";
+import { renderWithProviders } from "@/test/test-utils";
+
+describe("CollapsibleSection", () => {
+  it("renders the section title at the 14px body size token", () => {
+    renderWithProviders(<CollapsibleSection label="Aveta Compliance">child</CollapsibleSection>, {
+      withAuth: false,
+    });
+
+    const title = screen.getByRole("button", { name: /Aveta Compliance/i }).querySelector("span");
+    expect(title).toHaveClass("text-[length:var(--text-base)]");
+  });
+});
diff --git a/src/test/components/ui/text.test.tsx b/src/test/components/ui/text.test.tsx
new file mode 100644
index 00000000..04973d75
--- /dev/null
+++ b/src/test/components/ui/text.test.tsx
@@ -0,0 +1,82 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Text } from "@/components/ui/text";
+import { renderWithProviders } from "@/test/test-utils";
+
+describe("Text", () => {
+  it("maps visual variants to semantic elements", () => {
+    renderWithProviders(
+      <>
+        <Text variant="display">Page title</Text>
+        <Text variant="description">Supporting copy</Text>
+      </>,
+      { withAuth: false },
+    );
+
+    expect(screen.getByRole("heading", { level: 1, name: "Page title" })).toBeInTheDocument();
+    expect(screen.getByText("Supporting copy").tagName).toBe("P");
+  });
+
+  it("does not render conditional text when its condition is false", () => {
+    renderWithProviders(
+      <Text when={false} variant="body">
+        Saved
+      </Text>,
+      { withAuth: false },
+    );
+
+    expect(screen.queryByText("Saved")).not.toBeInTheDocument();
+  });
+
+  it("keeps the feedback live region mounted so toggling its content is announceable", () => {
+    const { rerender } = renderWithProviders(
+      <Text variant="feedback" when={false}>
+        Saved
+      </Text>,
+      { withAuth: false },
+    );
+
+    const region = screen.getByRole("status");
+    expect(region).toHaveAttribute("aria-live", "polite");
+    expect(region).toHaveAttribute("aria-atomic", "true");
+    expect(region).toBeEmptyDOMElement();
+
+    rerender(
+      <Text variant="feedback" when={true}>
+        Saved
+      </Text>,
+    );
+
+    expect(screen.getByRole("status")).toBe(region);
+    expect(region).toHaveTextContent("Saved");
+  });
+
+  it("gives error and feedback messages accessible live-region semantics", () => {
+    renderWithProviders(
+      <>
+        <Text variant="error">Upload failed</Text>
+        <Text variant="feedback">Uploading</Text>
+      </>,
+      { withAuth: false },
+    );
+
+    const alert = screen.getByRole("alert");
+    const status = screen.getByRole("status");
+    expect(alert).toHaveTextContent("Upload failed");
+    expect(status).toHaveTextContent("Uploading");
+    expect(alert).toHaveAttribute("aria-live", "assertive");
+    expect(alert).toHaveAttribute("aria-atomic", "true");
+    expect(status).toHaveAttribute("aria-live", "polite");
+    expect(status).toHaveAttribute("aria-atomic", "true");
+  });
+
+  it("does not attach live-region semantics to non-feedback variants", () => {
+    renderWithProviders(<Text variant="body">Saved</Text>, { withAuth: false });
+
+    const node = screen.getByText("Saved");
+    expect(node).not.toHaveAttribute("role");
+    expect(node).not.toHaveAttribute("aria-live");
+    expect(node).not.toHaveAttribute("aria-atomic");
+  });
+});
diff --git a/src/test/config/menu.test.ts b/src/test/config/menu.test.ts
new file mode 100644
index 00000000..ac75b38c
--- /dev/null
+++ b/src/test/config/menu.test.ts
@@ -0,0 +1,20 @@
+import { getActiveNavPath } from "@/config/menu";
+import { describe, expect, it } from "vitest";
+
+describe("getActiveNavPath", () => {
+  it.each([
+    ["/", "/"],
+    ["/vendors", "/vendors"],
+    ["/vendors/42", "/vendors"],
+    ["/vendors/42/edit", "/vendors"],
+    ["/vendors/insights", "/vendors/insights"],
+    ["/vendors/preferences", "/vendors/preferences"],
+    ["/vendor-pos/42", "/vendor-pos"],
+  ])("selects one longest boundary-matching route for %s", (pathname, expectedPath) => {
+    expect(getActiveNavPath(pathname)).toBe(expectedPath);
+  });
+
+  it("does not match partial route segments", () => {
+    expect(getActiveNavPath("/vendor-posts")).toBeUndefined();
+  });
+});
diff --git a/src/test/config/pm-schedule-capabilities.test.ts b/src/test/config/pm-schedule-capabilities.test.ts
new file mode 100644
index 00000000..8ae57e27
--- /dev/null
+++ b/src/test/config/pm-schedule-capabilities.test.ts
@@ -0,0 +1,10 @@
+import { pmScheduleCapabilities } from "@/config/pm-schedule-capabilities";
+import { describe, expect, it } from "vitest";
+
+describe("pmScheduleCapabilities", () => {
+  it("reflects production Dev API contract (GetList + Save only)", () => {
+    expect(pmScheduleCapabilities.canCreate).toBe(true);
+    expect(pmScheduleCapabilities.canEdit).toBe(false);
+    expect(pmScheduleCapabilities.canDelete).toBe(false);
+  });
+});
diff --git a/src/test/data/areas.test.ts b/src/test/data/areas.test.ts
new file mode 100644
index 00000000..1c37f6bc
--- /dev/null
+++ b/src/test/data/areas.test.ts
@@ -0,0 +1,165 @@
+import { describe, expect, it } from "vitest";
+import {
+  AREA_ZONE_STATE_CODES,
+  AREA_ZONES,
+  STATE_AREA_ENTRIES,
+  US_STATE_CODES,
+  expandAreasToStateCodes,
+  formatStateOptionLabel,
+  getAreaForState,
+  normalizeStateCode,
+} from "@/data/areas";
+
+const EAST = [
+  "CT",
+  "DE",
+  "GA",
+  "MA",
+  "MD",
+  "ME",
+  "NC",
+  "NH",
+  "NJ",
+  "NY",
+  "PA",
+  "RI",
+  "SC",
+  "VA",
+  "VT",
+  "WV",
+];
+const CENTRAL = [
+  "AL",
+  "AR",
+  "FL",
+  "IA",
+  "IL",
+  "IN",
+  "KS",
+  "KY",
+  "LA",
+  "MI",
+  "MN",
+  "MO",
+  "MS",
+  "ND",
+  "NE",
+  "OH",
+  "OK",
+  "SD",
+  "TN",
+  "WI",
+];
+const WEST = ["AK", "AZ", "CO", "HI", "ID", "MT", "NM", "NV", "OR", "TX", "UT", "WA", "WY"];
+
+describe("state area catalog", () => {
+  it("covers exactly the 50 states with unique codes and names", () => {
+    expect(STATE_AREA_ENTRIES).toHaveLength(50);
+    expect(US_STATE_CODES).toHaveLength(50);
+    expect(new Set(US_STATE_CODES).size).toBe(50);
+    expect(new Set(STATE_AREA_ENTRIES.map((entry) => entry.name)).size).toBe(50);
+  });
+
+  it("excludes DC and territories", () => {
+    expect(US_STATE_CODES).not.toContain("DC");
+    expect(US_STATE_CODES).not.toContain("PR");
+    expect(US_STATE_CODES).not.toContain("GU");
+    expect(US_STATE_CODES).not.toContain("VI");
+    expect(US_STATE_CODES).not.toContain("AS");
+    expect(US_STATE_CODES).not.toContain("MP");
+  });
+
+  it("maps every state to exactly one confirmed zone with counts", () => {
+    expect([...AREA_ZONE_STATE_CODES.East]).toEqual(EAST);
+    expect([...AREA_ZONE_STATE_CODES.Central]).toEqual(CENTRAL);
+    expect([...AREA_ZONE_STATE_CODES.West]).toEqual(WEST);
+    expect([...AREA_ZONE_STATE_CODES.California]).toEqual(["CA"]);
+
+    expect(EAST).toHaveLength(16);
+    expect(CENTRAL).toHaveLength(20);
+    expect(WEST).toHaveLength(13);
+
+    for (const entry of STATE_AREA_ENTRIES) {
+      expect(AREA_ZONES).toContain(entry.zone);
+      expect(entry.code).toMatch(/^[A-Z]{2}$/);
+      expect(entry.name.length).toBeGreaterThan(0);
+    }
+  });
+
+  it("keeps the canonical zone order", () => {
+    expect([...AREA_ZONES]).toEqual(["East", "Central", "West", "California"]);
+    expect(US_STATE_CODES[0]).toBe("CT");
+    expect(US_STATE_CODES[49]).toBe("CA");
+  });
+});
+
+describe("formatStateOptionLabel", () => {
+  it("renders Name (CODE)", () => {
+    expect(formatStateOptionLabel("TX")).toBe("Texas (TX)");
+    expect(formatStateOptionLabel("CA")).toBe("California (CA)");
+  });
+});
+
+describe("normalizeStateCode", () => {
+  it("accepts canonical codes in any case", () => {
+    expect(normalizeStateCode("TX")).toBe("TX");
+    expect(normalizeStateCode("tx")).toBe("TX");
+    expect(normalizeStateCode("Mo")).toBe("MO");
+  });
+
+  it("normalizes legacy full-name and lowercase values", () => {
+    expect(normalizeStateCode("Texas")).toBe("TX");
+    expect(normalizeStateCode("texas")).toBe("TX");
+    expect(normalizeStateCode(" Illinois ")).toBe("IL");
+    expect(normalizeStateCode("NORTH CAROLINA")).toBe("NC");
+    expect(normalizeStateCode("California")).toBe("CA");
+  });
+
+  it("returns null for empty, unknown, and non-state values", () => {
+    expect(normalizeStateCode("")).toBeNull();
+    expect(normalizeStateCode("   ")).toBeNull();
+    expect(normalizeStateCode(null)).toBeNull();
+    expect(normalizeStateCode(undefined)).toBeNull();
+    expect(normalizeStateCode("ZZ")).toBeNull();
+    expect(normalizeStateCode("DC")).toBeNull();
+    expect(normalizeStateCode("Puerto Rico")).toBeNull();
+  });
+});
+
+describe("getAreaForState", () => {
+  it("derives the confirmed zone per state", () => {
+    expect(getAreaForState("CT")).toBe("East");
+    expect(getAreaForState("IL")).toBe("Central");
+    expect(getAreaForState("TX")).toBe("West");
+    expect(getAreaForState("CA")).toBe("California");
+  });
+
+  it("derives the zone from legacy full-name values", () => {
+    expect(getAreaForState("illinois")).toBe("Central");
+    expect(getAreaForState("Texas")).toBe("West");
+  });
+
+  it("returns null for unknown states", () => {
+    expect(getAreaForState("XX")).toBeNull();
+    expect(getAreaForState("")).toBeNull();
+    expect(getAreaForState(null)).toBeNull();
+  });
+});
+
+describe("expandAreasToStateCodes", () => {
+  it("returns an empty list for an empty selection", () => {
+    expect(expandAreasToStateCodes([])).toEqual([]);
+  });
+
+  it("expands a single zone in canonical code order", () => {
+    expect(expandAreasToStateCodes(["East"])).toEqual(EAST);
+    expect(expandAreasToStateCodes(["California"])).toEqual(["CA"]);
+    expect(expandAreasToStateCodes(["West"])).toEqual(WEST);
+  });
+
+  it("expands multiple zones in canonical zone order and dedupes", () => {
+    expect(expandAreasToStateCodes(["West", "California"])).toEqual([...WEST, "CA"]);
+    expect(expandAreasToStateCodes(["California", "West", "West"])).toEqual([...WEST, "CA"]);
+    expect(expandAreasToStateCodes([...AREA_ZONES])).toEqual(US_STATE_CODES);
+  });
+});
diff --git a/src/test/domain/accounts/mappers/account-mapper.test.ts b/src/test/domain/accounts/mappers/account-mapper.test.ts
new file mode 100644
index 00000000..d65f2be0
--- /dev/null
+++ b/src/test/domain/accounts/mappers/account-mapper.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { mapAccountToBackend } from "@/domain/accounts/mappers/account-mapper";
+
+describe("mapAccountToBackend", () => {
+  it("maps AccountName to backend Name field", () => {
+    const payload = mapAccountToBackend({
+      AccountName: "Acme Corp",
+      Website: "https://acme.example",
+    });
+
+    expect(payload.Name).toBe("Acme Corp");
+    expect(payload.Website).toBe("https://acme.example");
+    expect(payload).not.toHaveProperty("AccountName");
+  });
+
+  it("includes Id for updates", () => {
+    const payload = mapAccountToBackend({
+      id: 42,
+      AccountName: "Acme Corp",
+    });
+
+    expect(payload.Id).toBe(42);
+    expect(payload.Name).toBe("Acme Corp");
+  });
+});
diff --git a/src/test/domain/assets/api/assets-api.test.ts b/src/test/domain/assets/api/assets-api.test.ts
new file mode 100644
index 00000000..c1de6fee
--- /dev/null
+++ b/src/test/domain/assets/api/assets-api.test.ts
@@ -0,0 +1,31 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { API_PATHS } from "@/api/api-paths";
+
+const apiGet = vi.fn();
+
+vi.mock("@/api/api", () => ({
+  apiGet: (...args: unknown[]) => apiGet(...args),
+  apiPost: vi.fn(),
+}));
+
+import { assetsApi } from "@/domain/assets/api/assets-api";
+
+describe("assetsApi.getSiteOptions", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiGet.mockResolvedValue({
+      Data: [{ Id: 1, Name: "Site A", Title: "Site A Title" }],
+      TotalCount: 1,
+    });
+  });
+
+  it("loads locations via Location/GetLocationList instead of Common/GetSitesName", async () => {
+    const sites = await assetsApi.getSiteOptions();
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.location.getList, {
+      searchParams: { search: "", page: 1, pageSize: 1000 },
+    });
+    expect(apiGet).not.toHaveBeenCalledWith("Common/GetSitesName", expect.anything());
+    expect(sites).toEqual([{ id: 1, name: "Site A", title: "Site A Title" }]);
+  });
+});
diff --git a/src/test/domain/auth/schemas/login-schema.test.ts b/src/test/domain/auth/schemas/login-schema.test.ts
new file mode 100644
index 00000000..5b5ce9b3
--- /dev/null
+++ b/src/test/domain/auth/schemas/login-schema.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+
+import { loginSchema } from "@/domain/auth/schemas/login-schema";
+
+describe("loginSchema", () => {
+  it("rejects empty username", () => {
+    const result = loginSchema.safeParse({ username: "", password: "secret" });
+
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.flatten().fieldErrors.username).toEqual(["Email is required"]);
+    }
+  });
+
+  it("rejects empty password", () => {
+    const result = loginSchema.safeParse({ username: "user@seahavenind.com", password: "" });
+
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.flatten().fieldErrors.password).toEqual(["Password is required"]);
+    }
+  });
+
+  it("rejects invalid email", () => {
+    const result = loginSchema.safeParse({ username: "not-an-email", password: "secret" });
+
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.flatten().fieldErrors.username).toEqual(["Enter a valid email"]);
+    }
+  });
+
+  it("accepts valid credentials", () => {
+    const credentials = { username: "user@seahavenind.com", password: "secret" };
+    const result = loginSchema.safeParse(credentials);
+
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data).toEqual(credentials);
+    }
+  });
+});
diff --git a/src/test/domain/contacts/mappers/contact-mapper.test.ts b/src/test/domain/contacts/mappers/contact-mapper.test.ts
new file mode 100644
index 00000000..50253a7b
--- /dev/null
+++ b/src/test/domain/contacts/mappers/contact-mapper.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { mapContactToBackend } from "@/domain/contacts/mappers/contact-mapper";
+
+describe("mapContactToBackend", () => {
+  it("maps street fields to Address1 and Address2", () => {
+    const payload = mapContactToBackend({
+      firstName: "Jane",
+      lastName: "Doe",
+      street: "123 Main St",
+      streetLineTwo: "Suite 4",
+    });
+
+    expect(payload.Address1).toBe("123 Main St");
+    expect(payload.Address2).toBe("Suite 4");
+    expect(payload.FirstName).toBe("Jane");
+    expect(payload.LastName).toBe("Doe");
+    expect(payload).not.toHaveProperty("street");
+  });
+
+  it("includes Id for updates", () => {
+    const payload = mapContactToBackend({
+      id: 7,
+      firstName: "Jane",
+      lastName: "Doe",
+    });
+
+    expect(payload.Id).toBe(7);
+  });
+});
diff --git a/src/test/domain/dashboard/dashboard-api.test.ts b/src/test/domain/dashboard/dashboard-api.test.ts
new file mode 100644
index 00000000..95f8c258
--- /dev/null
+++ b/src/test/domain/dashboard/dashboard-api.test.ts
@@ -0,0 +1,248 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const apiGet = vi.fn();
+
+vi.mock("@/api/api", () => ({
+  apiGet: (...args: unknown[]) => apiGet(...args),
+}));
+
+import { dashboardApi } from "@/domain/dashboard/api/dashboard-api";
+
+describe("dashboardApi", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+  });
+
+  it("maps stats tolerantly and sends the range params", async () => {
+    apiGet.mockResolvedValue({
+      Data: {
+        Total: 12,
+        Open: 8,
+        NotDispatched: 2,
+        Completed: 4,
+        DueCount: 5,
+        CompletedDueCount: 3,
+        CompletionRate: 60,
+        AverageResolutionDays: 4.5,
+        ScheduledTomorrow: "3",
+        PendingUplifts: 2,
+        AvetaPending: "1",
+        Breakdown: [
+          { Status: "Scheduled", Count: "7" },
+          { Status: "Completed", Count: 4 },
+        ],
+        StatusDistribution: [
+          { Status: "Scheduled", Count: "7" },
+          { Status: "Unknown", Count: 1 },
+        ],
+      },
+    });
+
+    const stats = await dashboardApi.getStats({ dateFrom: "2026-09-14", dateTo: "2026-09-18" });
+
+    expect(stats).toEqual({
+      total: 12,
+      open: 8,
+      notDispatched: 2,
+      completed: 4,
+      dueCount: 5,
+      completedDueCount: 3,
+      completionRate: 60,
+      averageResolutionDays: 4.5,
+      scheduledTomorrow: 3,
+      pendingUplifts: 2,
+      avetaPending: 1,
+      breakdown: [
+        { status: "Scheduled", count: 7 },
+        { status: "Completed", count: 4 },
+      ],
+      statusDistribution: [
+        { status: "Scheduled", count: 7 },
+        { status: "Unknown", count: 1 },
+      ],
+    });
+    expect(apiGet).toHaveBeenCalledWith("Dashboard/Stats", {
+      searchParams: { dateFrom: "2026-09-14", dateTo: "2026-09-18" },
+    });
+  });
+
+  it("maps the object breakdown shape to canonical WOType labels", async () => {
+    apiGet.mockResolvedValue({
+      Data: {
+        Breakdown: { pm: 3, emergency: 1, reactive: "2", overdue: 4, other: 5 },
+      },
+    });
+
+    const stats = await dashboardApi.getStats();
+
+    expect(stats.breakdown).toEqual([
+      { status: "PM", count: 3 },
+      { status: "Emergency", count: 1 },
+      { status: "Reactive", count: 2 },
+      { status: "Overdue", count: 4 },
+      { status: "Other", count: 5 },
+    ]);
+  });
+
+  it("omits search params for the all-time range", async () => {
+    apiGet.mockResolvedValue({ scheduledTomorrow: 0, pendingUplifts: 0, avetaPending: 0 });
+
+    await dashboardApi.getStats({});
+
+    expect(apiGet).toHaveBeenCalledWith("Dashboard/Stats", undefined);
+  });
+
+  it("maps workload rows and returns the paging envelope", async () => {
+    apiGet.mockResolvedValue({
+      Items: [{ DispatcherId: 12, DispatcherName: "Dana Reyes", OpenCount: "4", TotalCount: 6 }],
+      Page: 1,
+      PageSize: 10,
+      TotalDispatchers: 23,
+    });
+
+    await expect(dashboardApi.getWorkload()).resolves.toEqual({
+      items: [
+        {
+          dispatcherId: "12",
+          dispatcherName: "Dana Reyes",
+          openWorkOrders: 4,
+          totalWorkOrders: 6,
+        },
+      ],
+      page: 1,
+      pageSize: 10,
+      totalDispatchers: 23,
+    });
+    expect(apiGet).toHaveBeenCalledWith("Dashboard/Workload", { searchParams: { page: 1 } });
+  });
+
+  it("sends the requested page and range and maps performance rows", async () => {
+    apiGet.mockResolvedValue({
+      Items: [
+        {
+          DispatcherId: 12,
+          DispatcherName: "Dana Reyes",
+          CompletionRate: 96.5,
+          AverageResolutionDays: 3.25,
+          AssignedCount: 40,
+          CompletedCount: "38",
+        },
+      ],
+      Page: 2,
+      PageSize: 10,
+      TotalDispatchers: 14,
+    });
+
+    await expect(
+      dashboardApi.getPerformance({ dateFrom: "2026-09-14", dateTo: "2026-09-18" }, 2),
+    ).resolves.toEqual({
+      items: [
+        {
+          dispatcherId: "12",
+          dispatcherName: "Dana Reyes",
+          completionRate: 96.5,
+          averageResolutionDays: 3.25,
+          assignedCount: 40,
+          completedCount: 38,
+        },
+      ],
+      page: 2,
+      pageSize: 10,
+      totalDispatchers: 14,
+    });
+    expect(apiGet).toHaveBeenCalledWith("Dashboard/Performance", {
+      searchParams: { dateFrom: "2026-09-14", dateTo: "2026-09-18", page: 2 },
+    });
+  });
+
+  it("falls back to the requested page for the legacy bare-array shape", async () => {
+    apiGet.mockResolvedValue([
+      { DispatcherId: 7, DispatcherName: "Lee Ash", OpenCount: 1, TotalCount: 2 },
+    ]);
+
+    await expect(dashboardApi.getWorkload({}, 1)).resolves.toEqual({
+      items: [
+        { dispatcherId: "7", dispatcherName: "Lee Ash", openWorkOrders: 1, totalWorkOrders: 2 },
+      ],
+      page: 1,
+      pageSize: 10,
+      totalDispatchers: 1,
+    });
+  });
+
+  it("maps unknown regions to Unmapped", async () => {
+    apiGet.mockResolvedValue({
+      Items: [{ Region: "North", Count: 5 }, { Name: "  ", WorkOrderCount: 2 }, {}],
+    });
+
+    await expect(dashboardApi.getRegions()).resolves.toEqual([
+      { region: "North", workOrderCount: 5 },
+      { region: "Unmapped/Other", workOrderCount: 2 },
+      { region: "Unmapped/Other", workOrderCount: 0 },
+    ]);
+  });
+
+  it("maps vendor insights with company-name fallback", async () => {
+    apiGet.mockResolvedValue({
+      Items: [
+        {
+          VendorCompanyId: 3,
+          VendorCompanyName: "Gateway Plumbing",
+          CompletionRate: 82,
+          RescheduleRate: 4,
+          AverageResolutionDays: 3,
+          TotalJobs: 11,
+        },
+      ],
+    });
+
+    await expect(dashboardApi.getVendorInsights()).resolves.toEqual([
+      {
+        vendorId: "3",
+        vendorName: "Gateway Plumbing",
+        completionRate: 82,
+        rescheduleRate: 4,
+        averageResolutionDays: 3,
+        totalJobs: 11,
+      },
+    ]);
+  });
+
+  it("maps the trend contract and sends date, granularity, and year params", async () => {
+    apiGet.mockResolvedValue({
+      Granularity: "Week",
+      Buckets: [{ Date: "2026-09-07", Label: "2026-W37", Total: "9", IsCurrent: true }],
+    });
+
+    await expect(
+      dashboardApi.getTrend({
+        dateFrom: "2026-09-01",
+        dateTo: "2026-09-30",
+        granularity: "month",
+        year: 2026,
+      }),
+    ).resolves.toEqual({
+      granularity: "week",
+      points: [
+        {
+          date: "2026-09-07",
+          label: "2026-W37",
+          total: 9,
+          open: 0,
+          completed: 0,
+          canceled: 0,
+          overdue: 0,
+          isCurrent: true,
+        },
+      ],
+    });
+    expect(apiGet).toHaveBeenCalledWith("Dashboard/Trend", {
+      searchParams: {
+        dateFrom: "2026-09-01",
+        dateTo: "2026-09-30",
+        granularity: "month",
+        year: 2026,
+      },
+    });
+  });
+});
diff --git a/src/test/domain/dashboard/dashboard-range-utils.test.ts b/src/test/domain/dashboard/dashboard-range-utils.test.ts
new file mode 100644
index 00000000..61317746
--- /dev/null
+++ b/src/test/domain/dashboard/dashboard-range-utils.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+import {
+  addDaysIso,
+  businessTodayIso,
+  dashboardRangeParams,
+  mondayOf,
+  monthEndIso,
+  monthStartIso,
+} from "@/domain/dashboard/utils/dashboard-range-utils";
+
+describe("businessTodayIso", () => {
+  it("formats the America/New_York calendar date regardless of UTC time", () => {
+    expect(businessTodayIso(new Date("2026-09-16T23:30:00Z"))).toBe("2026-09-16");
+    expect(businessTodayIso(new Date("2026-09-17T02:30:00Z"))).toBe("2026-09-16");
+    expect(businessTodayIso(new Date("2026-01-01T04:30:00Z"))).toBe("2025-12-31");
+  });
+});
+
+describe("addDaysIso", () => {
+  it("rolls over month and year boundaries", () => {
+    expect(addDaysIso("2026-01-31", 1)).toBe("2026-02-01");
+    expect(addDaysIso("2026-12-31", 1)).toBe("2027-01-01");
+    expect(addDaysIso("2026-09-14", -7)).toBe("2026-09-07");
+  });
+});
+
+describe("mondayOf", () => {
+  it("returns the Monday of the ISO week", () => {
+    expect(mondayOf("2026-09-16")).toBe("2026-09-14");
+    expect(mondayOf("2026-09-14")).toBe("2026-09-14");
+    expect(mondayOf("2026-09-13")).toBe("2026-09-07");
+  });
+});
+
+describe("monthStartIso / monthEndIso", () => {
+  it("returns month bounds", () => {
+    expect(monthStartIso("2026-09-16")).toBe("2026-09-01");
+    expect(monthEndIso("2026-09-16")).toBe("2026-09-30");
+    expect(monthEndIso("2026-02-16")).toBe("2026-02-28");
+  });
+});
+
+describe("dashboardRangeParams", () => {
+  it("maps today to the business date", () => {
+    expect(dashboardRangeParams("today", "2026-09-16")).toEqual({
+      dateFrom: "2026-09-16",
+      dateTo: "2026-09-16",
+    });
+  });
+
+  it("maps this week to the Monday-Friday business week", () => {
+    expect(dashboardRangeParams("this-week", "2026-09-16")).toEqual({
+      dateFrom: "2026-09-14",
+      dateTo: "2026-09-18",
+    });
+  });
+
+  it("maps last 3 months to the trailing month span", () => {
+    expect(dashboardRangeParams("last-3-months", "2026-09-16")).toEqual({
+      dateFrom: "2026-07-01",
+      dateTo: "2026-09-30",
+    });
+  });
+
+  it("maps all time to unbounded params", () => {
+    expect(dashboardRangeParams("all-time", "2026-09-16")).toEqual({});
+  });
+});
diff --git a/src/test/domain/dashboard/work-order-drilldown-links.test.ts b/src/test/domain/dashboard/work-order-drilldown-links.test.ts
new file mode 100644
index 00000000..836da9e6
--- /dev/null
+++ b/src/test/domain/dashboard/work-order-drilldown-links.test.ts
@@ -0,0 +1,59 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  avetaPendingDrilldownSearch,
+  scheduledTomorrowDrilldownSearch,
+  workOrderDrilldownUrl,
+  workOrderRangeDrilldownSearch,
+  workOrderStatusDrilldownSearch,
+} from "@/domain/dashboard/utils/work-order-drilldown-links";
+
+describe("work-order drilldown links", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("schedules the tomorrow drilldown on the business clock", () => {
+    const search = scheduledTomorrowDrilldownSearch("2026-09-16");
+
+    expect(search.get("dateFrom")).toBe("2026-09-17");
+    expect(search.get("dateTo")).toBe("2026-09-17");
+  });
+
+  it("builds the Aveta Pending drilldown per SH-294", () => {
+    const search = avetaPendingDrilldownSearch("2026-09-16");
+    const statuses = (search.get("statuses") ?? "").split(",");
+
+    expect(search.get("dateFrom")).toBe("2026-09-16");
+    expect(search.get("dateTo")).toBe("2026-09-17");
+    expect(search.get("aveta")).toBe("1");
+    // `docs=No` is the completion-document status, not the Aveta document, so it
+    // must not be part of the Aveta Pending drilldown (SH-294 / backend#138).
+    expect(search.get("docs")).toBeNull();
+    expect(statuses).toContain("Scheduled");
+    expect(statuses).not.toContain("Completed");
+  });
+
+  it("carries the range into status drilldowns", () => {
+    // "today" resolves against the business clock, so pin it (midday EDT on
+    // 2026-09-16 → 2026-09-16 in America/New_York) to keep the test deterministic.
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-09-16T16:00:00Z"));
+
+    const search = workOrderStatusDrilldownSearch("Scheduled", "today");
+
+    expect(search.get("dateFrom")).toBe("2026-09-16");
+    expect(search.get("dateTo")).toBe("2026-09-16");
+    expect(search.get("statuses")).toBe("Scheduled");
+  });
+
+  it("omits dates for the all-time range", () => {
+    expect(workOrderRangeDrilldownSearch("all-time").toString()).toBe("");
+  });
+
+  it("renders plain or query-bearing work order URLs", () => {
+    expect(workOrderDrilldownUrl(new URLSearchParams())).toBe("/workorders");
+    expect(workOrderDrilldownUrl(new URLSearchParams({ statuses: "Scheduled" }))).toBe(
+      "/workorders?statuses=Scheduled",
+    );
+  });
+});
diff --git a/src/test/domain/employees/lib/resolve-job-title-id.test.ts b/src/test/domain/employees/lib/resolve-job-title-id.test.ts
new file mode 100644
index 00000000..fbfb168d
--- /dev/null
+++ b/src/test/domain/employees/lib/resolve-job-title-id.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import {
+  resolveJobTitleId,
+  resolveJobTitleLabel,
+} from "@/domain/employees/lib/resolve-job-title-id";
+
+describe("resolveJobTitleId", () => {
+  it("prefers explicit jobTitleId when present", () => {
+    expect(resolveJobTitleId(3, "Technician")).toBe(3);
+  });
+
+  it("falls back to label when jobTitleId is missing", () => {
+    expect(resolveJobTitleId(null, "Technician")).toBe(1);
+    expect(resolveJobTitleId(undefined, "President")).toBe(5);
+  });
+
+  it("returns null when label is unknown", () => {
+    expect(resolveJobTitleId(null, "Unknown Title")).toBeNull();
+  });
+});
+
+describe("resolveJobTitleLabel", () => {
+  it("prefers existing label from API", () => {
+    expect(resolveJobTitleLabel(1, "Technician")).toBe("Technician");
+  });
+
+  it("derives label from id when label is empty", () => {
+    expect(resolveJobTitleLabel(2, "")).toBe("Service Associate");
+  });
+});
diff --git a/src/test/domain/employees/mappers/employee-mapper.test.ts b/src/test/domain/employees/mappers/employee-mapper.test.ts
new file mode 100644
index 00000000..96b556e5
--- /dev/null
+++ b/src/test/domain/employees/mappers/employee-mapper.test.ts
@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest";
+import { transformEmployee, transformToBackend } from "@/domain/employees/mappers/employee-mapper";
+import type { Employee } from "@/domain/employees/types/employee";
+
+describe("transformToBackend", () => {
+  it("sends JobTitleId instead of jobTitle string", () => {
+    const payload = transformToBackend({
+      firstName: "Jane",
+      lastName: "Doe",
+      email: "jane@example.com",
+      phone: "555-0100",
+      jobTitle: "Technician",
+      jobTitleId: 3,
+    } as Employee);
+
+    expect(payload.JobTitleId).toBe(3);
+    expect(payload.FirstName).toBe("Jane");
+    expect(payload.LastName).toBe("Doe");
+    expect(payload).not.toHaveProperty("jobTitle");
+    expect(payload).not.toHaveProperty("JobTitle");
+  });
+
+  it("includes Id for updates", () => {
+    const payload = transformToBackend({
+      id: 42,
+      firstName: "Jane",
+      lastName: "Doe",
+      jobTitleId: null,
+    } as Employee);
+
+    expect(payload.Id).toBe(42);
+    expect(payload.JobTitleId).toBeNull();
+  });
+});
+
+describe("transformEmployee", () => {
+  it("reads JobTitleId from PascalCase API response", () => {
+    const employee = transformEmployee({
+      Id: 1,
+      FirstName: "Jane",
+      LastName: "Doe",
+      JobTitle: "Technician",
+      JobTitleId: 5,
+    });
+
+    expect(employee?.jobTitleId).toBe(5);
+    expect(employee?.jobTitle).toBe("Technician");
+  });
+
+  it("maps form values with jobTitleId to backend payload", () => {
+    const payload = transformToBackend({
+      firstName: "Jane",
+      lastName: "Doe",
+      jobTitle: "Technician",
+      jobTitleId: 1,
+    } as Employee);
+
+    expect(payload.JobTitleId).toBe(1);
+    expect(payload).not.toHaveProperty("JobTitle");
+  });
+});
diff --git a/src/test/domain/locations/api/locations-list-api.test.ts b/src/test/domain/locations/api/locations-list-api.test.ts
new file mode 100644
index 00000000..d14bffb9
--- /dev/null
+++ b/src/test/domain/locations/api/locations-list-api.test.ts
@@ -0,0 +1,60 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { API_PATHS } from "@/api/api-paths";
+
+const apiGet = vi.fn();
+
+vi.mock("@/api/api", () => ({
+  apiGet: (...args: unknown[]) => apiGet(...args),
+  apiPost: vi.fn(),
+  apiPut: vi.fn(),
+  apiDelete: vi.fn(),
+}));
+
+import { expandAreasToStateCodes } from "@/data/areas";
+import { locationsApi } from "@/domain/locations/api/locations-api";
+
+describe("locationsApi.getList states query param", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiGet.mockResolvedValue([]);
+  });
+
+  it("joins state codes into a comma-separated param", async () => {
+    await locationsApi.getList({ states: ["TX", "MO"] });
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.location.getList, {
+      searchParams: { search: "", page: 1, pageSize: 12, states: "TX,MO" },
+    });
+  });
+
+  it("omits the states param when no states are provided", async () => {
+    await locationsApi.getList({});
+
+    const [, config] = apiGet.mock.calls[0];
+    expect(config.searchParams).toEqual({ search: "", page: 1, pageSize: 12 });
+    expect("states" in config.searchParams).toBe(false);
+  });
+
+  it("omits the states param when the states list is empty", async () => {
+    await locationsApi.getList({ states: [] });
+
+    const [, config] = apiGet.mock.calls[0];
+    expect(config.searchParams).toEqual({ search: "", page: 1, pageSize: 12 });
+    expect("states" in config.searchParams).toBe(false);
+  });
+
+  it("preserves the canonical area expansion order in the joined value", async () => {
+    await locationsApi.getList({ states: expandAreasToStateCodes(["West", "California"]) });
+
+    const [, config] = apiGet.mock.calls[0];
+    expect(config.searchParams.states).toBe("AK,AZ,CO,HI,ID,MT,NM,NV,OR,TX,UT,WA,WY,CA");
+  });
+
+  it("keeps existing search and pagination params", async () => {
+    await locationsApi.getList({ search: "dallas", page: 2, pageSize: 24, states: ["TX"] });
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.location.getList, {
+      searchParams: { search: "dallas", page: 2, pageSize: 24, states: "TX" },
+    });
+  });
+});
diff --git a/src/test/domain/locations/api/locations-sites-api.test.ts b/src/test/domain/locations/api/locations-sites-api.test.ts
new file mode 100644
index 00000000..1dcdd8c7
--- /dev/null
+++ b/src/test/domain/locations/api/locations-sites-api.test.ts
@@ -0,0 +1,153 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { API_PATHS } from "@/api/api-paths";
+
+const apiGet = vi.fn();
+
+vi.mock("@/api/api", () => ({
+  apiGet: (...args: unknown[]) => apiGet(...args),
+  apiPost: vi.fn(),
+  apiPut: vi.fn(),
+  apiDelete: vi.fn(),
+}));
+
+import { locationsApi } from "@/domain/locations/api/locations-api";
+import {
+  formatLocationAddressPreview,
+  formatLocationSiteLabel,
+  formatSitePlace,
+  formatSiteTableLabel,
+  mapLocation,
+  mapLocationSite,
+} from "@/domain/locations/mappers/location-mapper";
+
+describe("mapLocationSite", () => {
+  it("maps code/city/state site payload", () => {
+    expect(mapLocationSite({ id: 1, code: "BK5", city: "Dallas", state: "TX" })).toEqual({
+      id: 1,
+      code: "BK5",
+      city: "Dallas",
+      state: "TX",
+    });
+  });
+});
+
+describe("mapLocation", () => {
+  it("maps detail payload from locations/{id}", () => {
+    expect(
+      mapLocation({
+        id: 2,
+        name: "BK5",
+        title: "...",
+        address: "3811 Distribution Dr",
+        address1: "3811 Distribution Dr",
+        address2: null,
+        city: "Dallas",
+        state: "TX",
+        zipCode: "70068",
+        phone: "(421) 433-0032",
+        contact: null,
+        contactEmail: "site.bk5@seahavenind.com",
+        status: "Active",
+      }),
+    ).toMatchObject({
+      id: 2,
+      name: "BK5",
+      address: "3811 Distribution Dr",
+      city: "Dallas",
+      state: "TX",
+      zipCode: "70068",
+      phone: "(421) 433-0032",
+      contactEmail: "site.bk5@seahavenind.com",
+      status: "Active",
+    });
+  });
+
+  it("falls back to address1/address2 when address is empty", () => {
+    expect(
+      mapLocation({
+        id: 3,
+        address1: "100 Main St",
+        address2: "Suite 2",
+        city: "Dallas",
+        state: "TX",
+        zipCode: "75001",
+      }),
+    ).toMatchObject({
+      address: "100 Main St, Suite 2",
+      city: "Dallas",
+      state: "TX",
+      zipCode: "75001",
+    });
+  });
+});
+
+describe("formatLocationSiteLabel", () => {
+  it("formats site label for dropdown", () => {
+    expect(formatLocationSiteLabel({ code: "BK5", city: "Dallas", state: "TX" })).toBe(
+      "BK5 · Dallas, TX",
+    );
+  });
+});
+
+describe("formatLocationAddressPreview", () => {
+  it("formats US address without comma before zip", () => {
+    expect(
+      formatLocationAddressPreview({
+        address: "3811 Distribution Dr",
+        city: "Dallas",
+        state: "TX",
+        zipCode: "70068",
+      }),
+    ).toBe("3811 Distribution Dr, Dallas, TX 70068");
+  });
+});
+
+describe("formatSiteTableLabel", () => {
+  it("formats table cell as code . city, ST", () => {
+    expect(formatSiteTableLabel({ code: "BK5", city: "Dallas", state: "TX" })).toBe(
+      "BK5 . Dallas, TX",
+    );
+  });
+
+  it("falls back to location when city/state missing", () => {
+    expect(formatSiteTableLabel({ code: "BK5", fallbackLocation: "Lobby" })).toBe("BK5 . Lobby");
+  });
+
+  it("returns only code when place is empty", () => {
+    expect(formatSiteTableLabel({ code: "BK5" })).toBe("BK5");
+  });
+});
+
+describe("formatSitePlace", () => {
+  it("joins city and state", () => {
+    expect(formatSitePlace("Dallas", "TX")).toBe("Dallas, TX");
+  });
+
+  it("uses fallback when city/state empty", () => {
+    expect(formatSitePlace("", "", "Lobby")).toBe("Lobby");
+  });
+});
+
+describe("locationsApi.getSites", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiGet.mockResolvedValue([{ id: 1, code: "BK5", city: "Dallas", state: "TX" }]);
+  });
+
+  it("calls locations/sites without search", async () => {
+    const sites = await locationsApi.getSites();
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.location.sites, {
+      searchParams: undefined,
+    });
+    expect(sites).toEqual([{ id: 1, code: "BK5", city: "Dallas", state: "TX" }]);
+  });
+
+  it("passes search query param", async () => {
+    await locationsApi.getSites("Dallas");
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.location.sites, {
+      searchParams: { search: "Dallas" },
+    });
+  });
+});
diff --git a/src/test/domain/locations/mappers/location-mapper.test.ts b/src/test/domain/locations/mappers/location-mapper.test.ts
new file mode 100644
index 00000000..52d27cc6
--- /dev/null
+++ b/src/test/domain/locations/mappers/location-mapper.test.ts
@@ -0,0 +1,94 @@
+import { describe, expect, it } from "vitest";
+import {
+  mapLocation,
+  mapLocationListItem,
+  mapLocationToBackend,
+} from "@/domain/locations/mappers/location-mapper";
+
+describe("location contacts hydration", () => {
+  it("maps the response contacts array and derives the main contact fields", () => {
+    const item = mapLocationListItem({
+      id: 1,
+      name: "Dallas DC",
+      contacts: [
+        { name: "Jane", phone: "(421) 433-0032" },
+        { name: "Bob", phone: "(421) 433-0033" },
+      ],
+    });
+
+    expect(item.contacts).toEqual([
+      { name: "Jane", phone: "(421) 433-0032" },
+      { name: "Bob", phone: "(421) 433-0033" },
+    ]);
+    expect(item.contact).toBe("Jane");
+    expect(item.phone).toBe("(421) 433-0032");
+  });
+
+  it("falls back to legacy contact/phone fields when no contacts array exists", () => {
+    const item = mapLocationListItem({
+      id: 2,
+      contact: "Bob",
+      phone: "(312) 555-0100",
+    });
+
+    expect(item.contacts).toBeUndefined();
+    expect(item.contact).toBe("Bob");
+    expect(item.phone).toBe("(312) 555-0100");
+  });
+
+  it("hydrates detail contacts and mirrors the first row in contact/phone", () => {
+    const detail = mapLocation({
+      id: 3,
+      contacts: [{ id: 31, name: "Carol", phone: "555-0143" }],
+    });
+
+    expect(detail.contacts).toEqual([{ id: 31, name: "Carol", phone: "555-0143" }]);
+    expect(detail.contact).toBe("Carol");
+    expect(detail.phone).toBe("555-0143");
+  });
+
+  it("keeps legacy detail contact/phone for zero-contact data", () => {
+    const detail = mapLocation({ id: 4, contact: "Legacy Person", phone: "555-0199" });
+
+    expect(detail.contacts).toBeUndefined();
+    expect(detail.contact).toBe("Legacy Person");
+    expect(detail.phone).toBe("555-0199");
+  });
+});
+
+describe("mapLocationToBackend contacts payload", () => {
+  it("sends trimmed contacts in displayed order and derives legacy fields from the first", () => {
+    const payload = mapLocationToBackend({
+      name: "Dallas DC",
+      address: "3811 Distribution Dr",
+      city: "Dallas",
+      state: "TX",
+      zipCode: "70068",
+      contactEmail: "jane@example.com",
+      status: "Active",
+      contacts: [
+        { id: 41, name: "  Jane  ", phone: " (421) 433-0032 " },
+        { name: "Bob", phone: "(421) 433-0033" },
+      ],
+    });
+
+    expect(payload.contacts).toEqual([
+      { id: 41, name: "Jane", phone: "(421) 433-0032" },
+      { name: "Bob", phone: "(421) 433-0033" },
+    ]);
+    expect(payload.contact).toBe("Jane");
+    expect(payload.phone).toBe("(421) 433-0032");
+  });
+
+  it("keeps legacy contact/phone untouched when no contacts are provided", () => {
+    const payload = mapLocationToBackend({
+      name: "Legacy DC",
+      contact: "Legacy Person",
+      phone: "555-0199",
+    });
+
+    expect(payload.contact).toBe("Legacy Person");
+    expect(payload.phone).toBe("555-0199");
+    expect(payload.contacts).toEqual([]);
+  });
+});
diff --git a/src/test/domain/locations/schemas/location-schema.test.ts b/src/test/domain/locations/schemas/location-schema.test.ts
new file mode 100644
index 00000000..ecf04b56
--- /dev/null
+++ b/src/test/domain/locations/schemas/location-schema.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import {
+  locationDefaultValues,
+  locationSchema,
+  type LocationFormValues,
+} from "@/domain/locations/schemas/location-schema";
+
+const validBase: LocationFormValues = {
+  ...locationDefaultValues,
+  name: "Dallas DC",
+  address: "3811 Distribution Dr",
+  city: "Dallas",
+  state: "TX",
+  zipCode: "70068",
+  contactEmail: "jane@example.com",
+};
+
+describe("locationSchema contacts", () => {
+  it("accepts one fully populated contact", () => {
+    const result = locationSchema.safeParse({
+      ...validBase,
+      contacts: [{ name: "Jane", phone: "(421) 433-0032" }],
+    });
+
+    expect(result.success).toBe(true);
+  });
+
+  it("requires at least one contact", () => {
+    const result = locationSchema.safeParse({ ...validBase, contacts: [] });
+
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.issues[0]?.message).toBe("At least one contact is required");
+    }
+  });
+
+  it("requires a name and a phone on every row", () => {
+    const result = locationSchema.safeParse({
+      ...validBase,
+      contacts: [
+        { name: "Jane", phone: "" },
+        { name: "  ", phone: "(421) 433-0032" },
+      ],
+    });
+
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const messages = result.error.issues.map((issue) => issue.message);
+      expect(messages).toContain("Phone is required");
+      expect(messages).toContain("Contact person is required");
+    }
+  });
+
+  it("trims name and phone values on parse", () => {
+    const result = locationSchema.safeParse({
+      ...validBase,
+      contacts: [{ name: "  Jane  ", phone: " (421) 433-0032 " }],
+    });
+
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.contacts[0]).toEqual({ name: "Jane", phone: "(421) 433-0032" });
+    }
+  });
+});
diff --git a/src/test/domain/pm-schedules/api/pm-schedules-api.test.ts b/src/test/domain/pm-schedules/api/pm-schedules-api.test.ts
new file mode 100644
index 00000000..bd49a2ba
--- /dev/null
+++ b/src/test/domain/pm-schedules/api/pm-schedules-api.test.ts
@@ -0,0 +1,95 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { API_PATHS } from "@/api/api-paths";
+
+const apiGet = vi.fn();
+const apiPostNoContent = vi.fn();
+
+vi.mock("@/api/api", () => ({
+  apiGet: (...args: unknown[]) => apiGet(...args),
+  apiPostNoContent: (...args: unknown[]) => apiPostNoContent(...args),
+}));
+
+import { pmSchedulesApi } from "@/domain/pm-schedules/api/pm-schedules-api";
+
+describe("pmSchedulesApi", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiPostNoContent.mockReset();
+  });
+
+  it("getList uses GetList without server pagination params", async () => {
+    apiGet.mockResolvedValue([
+      {
+        Id: 1,
+        Name: "Schedule A",
+        Frequency: "Weekly",
+        StartDate: "2026-01-01",
+        IsActive: true,
+        Asset: "Asset 1",
+        Location: "Loc 1",
+      },
+    ]);
+
+    const result = await pmSchedulesApi.getList({ page: 1, pageSize: 12 });
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.pmSchedule.getList);
+    expect(result.items).toHaveLength(1);
+    expect(result.items[0]?.name).toBe("Schedule A");
+    expect(result.totalCount).toBe(1);
+  });
+
+  it("getById calls PMSchedule/GetById", async () => {
+    apiGet.mockResolvedValue({
+      Id: 2,
+      Name: "Detail",
+      Frequency: "Monthly",
+      StartDate: "2026-02-01",
+      IsActive: true,
+      AssetId: 5,
+      LocationId: 6,
+    });
+
+    const schedule = await pmSchedulesApi.getById(2);
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.pmSchedule.getById, {
+      searchParams: { id: 2 },
+    });
+    expect(schedule.assetId).toBe(5);
+    expect(schedule.locationId).toBe(6);
+  });
+
+  it("save posts to PMSchedule/Save without re-fetching GetById", async () => {
+    apiPostNoContent.mockResolvedValue(undefined);
+
+    await pmSchedulesApi.save({
+      id: 3,
+      name: "Updated",
+      frequency: "Quarterly",
+      startDate: "2026-03-01",
+      isActive: true,
+      assetId: 1,
+      locationId: 2,
+    });
+
+    expect(apiPostNoContent).toHaveBeenCalledWith(
+      API_PATHS.pmSchedule.save,
+      expect.objectContaining({
+        Id: 3,
+        Name: "Updated",
+        AssetId: 1,
+        LocationId: 2,
+      }),
+    );
+    expect(apiGet).not.toHaveBeenCalled();
+  });
+
+  it("delete posts to PMSchedule/Delete", async () => {
+    apiPostNoContent.mockResolvedValue(undefined);
+
+    await pmSchedulesApi.delete(9);
+
+    expect(apiPostNoContent).toHaveBeenCalledWith(API_PATHS.pmSchedule.delete, undefined, {
+      searchParams: { id: 9 },
+    });
+  });
+});
diff --git a/src/test/domain/pm-schedules/mappers/pm-schedule-mapper.test.ts b/src/test/domain/pm-schedules/mappers/pm-schedule-mapper.test.ts
new file mode 100644
index 00000000..0285bc81
--- /dev/null
+++ b/src/test/domain/pm-schedules/mappers/pm-schedule-mapper.test.ts
@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+import { mapPmScheduleToSavePayload } from "@/domain/pm-schedules/mappers/pm-schedule-mapper";
+
+describe("mapPmScheduleToSavePayload", () => {
+  it("maps form fields to PMSchedule_DTO shape", () => {
+    const payload = mapPmScheduleToSavePayload({
+      id: 0,
+      name: "Quarterly HVAC",
+      frequency: "Quarterly",
+      startDate: "2026-06-16",
+      isActive: true,
+      assetId: 10,
+      locationId: 20,
+    });
+
+    expect(payload).toEqual({
+      Id: 0,
+      Name: "Quarterly HVAC",
+      Frequency: "Quarterly",
+      StartDate: "2026-06-16T00:00:00",
+      IsActive: true,
+      AssetId: 10,
+      LocationId: 20,
+    });
+  });
+
+  it("includes Id for updates", () => {
+    const payload = mapPmScheduleToSavePayload({
+      id: 42,
+      name: "Updated",
+      frequency: "Monthly",
+      startDate: "2026-07-01",
+      isActive: false,
+      assetId: 5,
+      locationId: null,
+    });
+
+    expect(payload.Id).toBe(42);
+    expect(payload.IsActive).toBe(false);
+    expect(payload.LocationId).toBeNull();
+  });
+});
+
+describe("mapPmScheduleListItem", () => {
+  it("maps backend GetList fields only", async () => {
+    const { mapPmScheduleListItem } =
+      await import("@/domain/pm-schedules/mappers/pm-schedule-mapper");
+
+    const item = mapPmScheduleListItem({
+      Id: 1,
+      Name: "Schedule A",
+      Frequency: "Weekly",
+      StartDate: "2026-01-15T00:00:00",
+      IsActive: true,
+      Asset: "Asset 1",
+      Location: "Site 1",
+    });
+
+    expect(item).toEqual({
+      id: 1,
+      name: "Schedule A",
+      frequency: "Weekly",
+      startDate: "2026-01-15",
+      isActive: true,
+      asset: "Asset 1",
+      location: "Site 1",
+    });
+  });
+});
diff --git a/src/test/domain/services/api/services-api.test.ts b/src/test/domain/services/api/services-api.test.ts
new file mode 100644
index 00000000..ab558d03
--- /dev/null
+++ b/src/test/domain/services/api/services-api.test.ts
@@ -0,0 +1,48 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { API_PATHS } from "@/api/api-paths";
+
+const apiGet = vi.fn();
+
+vi.mock("@/api/api", () => ({
+  apiGet: (...args: unknown[]) => apiGet(...args),
+}));
+
+import { servicesApi } from "@/domain/services/api/services-api";
+
+describe("servicesApi", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+  });
+
+  it("loads active services filtered by the selected work-order type", async () => {
+    apiGet.mockResolvedValue([
+      {
+        id: 7,
+        name: "HVAC inspection",
+        trade: "HVAC",
+        iconKey: "hvac-inspection",
+        isActive: true,
+        supportedWorkOrderTypes: [2, "Reactive"],
+      },
+    ]);
+
+    const services = await servicesApi.getActiveForWorkOrderType("PM");
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.services.list, {
+      searchParams: { isActive: true, workOrderType: 2 },
+    });
+    expect(services[0]).toMatchObject({
+      id: 7,
+      name: "HVAC inspection",
+      trade: "HVAC",
+      supportedWorkOrderTypes: ["PM", "Reactive"],
+    });
+  });
+
+  it("does not request services for the unsupported Overdue type", async () => {
+    const services = await servicesApi.getActiveForWorkOrderType("Overdue");
+
+    expect(apiGet).not.toHaveBeenCalled();
+    expect(services).toEqual([]);
+  });
+});
diff --git a/src/test/domain/team-members/api/team-members-api.test.ts b/src/test/domain/team-members/api/team-members-api.test.ts
new file mode 100644
index 00000000..9fcb73de
--- /dev/null
+++ b/src/test/domain/team-members/api/team-members-api.test.ts
@@ -0,0 +1,94 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { API_PATHS } from "@/api/api-paths";
+
+const apiGet = vi.fn();
+const apiPost = vi.fn();
+const apiPut = vi.fn();
+
+vi.mock("@/api/api", () => ({
+  apiGet: (...args: unknown[]) => apiGet(...args),
+  apiPost: (...args: unknown[]) => apiPost(...args),
+  apiPut: (...args: unknown[]) => apiPut(...args),
+}));
+
+import { teamMembersApi } from "@/domain/team-members/api/team-members-api";
+
+describe("teamMembersApi", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiPost.mockReset();
+    apiPut.mockReset();
+  });
+
+  it("posts the pending team member contract without invitation fields", async () => {
+    apiPost.mockResolvedValueOnce({
+      data: {
+        id: "u-1",
+        name: "Taylor Dispatcher",
+        role: "Dispatcher",
+        pendingRegistration: true,
+      },
+    });
+
+    const input = {
+      name: "Taylor Dispatcher",
+      role: "Dispatcher" as const,
+      color: "#F59E0B",
+      email: "taylor@example.com",
+      phone: "555-0100",
+      serviceAreas: ["East"],
+      permissionOverrides: { deleteSites: 1 as const },
+    };
+
+    await expect(teamMembersApi.create(input)).resolves.toMatchObject({
+      id: "u-1",
+      pendingRegistration: true,
+    });
+    expect(apiPost).toHaveBeenCalledWith(API_PATHS.teamMember.create, input);
+    expect(apiPost.mock.calls[0]?.[1]).not.toHaveProperty("invite");
+    expect(apiPost.mock.calls[0]?.[1]).not.toHaveProperty("password");
+  });
+
+  it("gets and updates detail through the team-member detail route", async () => {
+    apiGet.mockResolvedValueOnce({
+      data: {
+        id: "u/1",
+        name: "Taylor Dispatcher",
+        role: "Dispatcher",
+        status: "Active",
+        serviceAreas: ["East"],
+        permissions: [{ permissionKey: "createSites", overrideState: 1, isGranted: true }],
+      },
+    });
+    apiPut.mockResolvedValueOnce({
+      data: {
+        id: "u/1",
+        name: "Taylor Updated",
+        role: "Dispatcher",
+        status: "Inactive",
+        serviceAreas: [],
+        permissions: [],
+      },
+    });
+
+    await expect(teamMembersApi.getDetail("u/1")).resolves.toMatchObject({
+      id: "u/1",
+      serviceAreas: ["East"],
+    });
+    const input = {
+      name: "Taylor Updated",
+      role: "Dispatcher" as const,
+      color: "#F59E0B",
+      email: "taylor@example.com",
+      serviceAreas: [],
+      permissionOverrides: { createSites: 2 as const },
+      isActive: false,
+    };
+    await expect(teamMembersApi.update("u/1", input)).resolves.toMatchObject({
+      name: "Taylor Updated",
+      status: "Inactive",
+    });
+    expect(apiGet).toHaveBeenCalledWith("team-members/u%2F1");
+    expect(apiPut).toHaveBeenCalledWith("team-members/u%2F1", input);
+  });
+});
diff --git a/src/test/domain/team-members/team-member-mapper.test.ts b/src/test/domain/team-members/team-member-mapper.test.ts
new file mode 100644
index 00000000..164a2ef7
--- /dev/null
+++ b/src/test/domain/team-members/team-member-mapper.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import {
+  mapTeamMemberDetail,
+  mapTeamMemberListItem,
+} from "@/domain/team-members/mappers/team-member-mapper";
+
+describe("mapTeamMemberListItem", () => {
+  it("maps the existing User list response and derives inactive state", () => {
+    expect(
+      mapTeamMemberListItem({
+        Id: "u1",
+        Name: "Alex Smith",
+        RoleName: "Dispatcher",
+        Locations: "Central",
+        Email: "alex@example.com",
+        Status: "Inactive",
+        IsAccountOwner: true,
+      }),
+    ).toEqual({
+      id: "u1",
+      name: "Alex Smith",
+      role: "Dispatcher",
+      serviceArea: "Central",
+      phone: "",
+      email: "alex@example.com",
+      color: "",
+      status: "Inactive",
+      isAccountOwner: true,
+      pendingRegistration: false,
+    });
+  });
+});
+
+describe("mapTeamMemberDetail", () => {
+  it("maps service areas and the full permission summary", () => {
+    expect(
+      mapTeamMemberDetail({
+        Id: "u1",
+        Name: "Taylor",
+        Role: "Scheduler",
+        Status: "Active",
+        ServiceAreas: ["Central", "West"],
+        Permissions: [
+          { PermissionKey: "createSites", OverrideState: 2, IsGranted: false },
+          { PermissionKey: "editSites", OverrideState: "Allow", IsGranted: true },
+        ],
+      }),
+    ).toMatchObject({
+      id: "u1",
+      serviceAreas: ["Central", "West"],
+      permissions: [
+        { permissionKey: "createSites", overrideState: 2, isGranted: false },
+        { permissionKey: "editSites", overrideState: 1, isGranted: true },
+      ],
+    });
+  });
+});
diff --git a/src/test/domain/uplifts/api/uplifts-api.test.ts b/src/test/domain/uplifts/api/uplifts-api.test.ts
new file mode 100644
index 00000000..f43c33ad
--- /dev/null
+++ b/src/test/domain/uplifts/api/uplifts-api.test.ts
@@ -0,0 +1,45 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const apiGet = vi.fn();
+const apiPost = vi.fn();
+const apiRequestRaw = vi.fn();
+
+vi.mock("@/api/api", () => ({
+  apiGet: (...args: unknown[]) => apiGet(...args),
+  apiPost: (...args: unknown[]) => apiPost(...args),
+  apiRequestRaw: (...args: unknown[]) => apiRequestRaw(...args),
+}));
+
+import { upliftsApi } from "@/domain/uplifts/api/uplifts-api";
+
+describe("upliftsApi", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiPost.mockReset();
+    apiRequestRaw.mockReset();
+  });
+
+  it("posts admin revoke decisions to the uplift decision endpoint", async () => {
+    apiPost.mockResolvedValueOnce(undefined);
+
+    await upliftsApi.revoke(42, "Scope was already covered");
+
+    expect(apiPost).toHaveBeenCalledWith("uplifts/42/revoke", {
+      note: "Scope was already covered",
+    });
+  });
+
+  it("reads the backend tier decision permission", async () => {
+    apiGet.mockResolvedValueOnce({ status: "Success", data: { canApprove: true } });
+
+    await expect(upliftsApi.canApprove(1)).resolves.toBe(true);
+
+    expect(apiGet).toHaveBeenCalledWith("uplifts/can-approve", { searchParams: { tier: 1 } });
+  });
+
+  it("treats a missing tier permission as false", async () => {
+    apiGet.mockResolvedValueOnce({ status: "Success", data: {} });
+
+    await expect(upliftsApi.canApprove(2)).resolves.toBe(false);
+  });
+});
diff --git a/src/test/domain/uplifts/mappers/uplift-mapper.test.ts b/src/test/domain/uplifts/mappers/uplift-mapper.test.ts
new file mode 100644
index 00000000..702b7cae
--- /dev/null
+++ b/src/test/domain/uplifts/mappers/uplift-mapper.test.ts
@@ -0,0 +1,129 @@
+import { describe, expect, it } from "vitest";
+import {
+  mapUpliftQueueExposureTotal,
+  mapUpliftQueueItem,
+} from "@/domain/uplifts/mappers/uplift-mapper";
+
+describe("mapUpliftQueueItem", () => {
+  it("maps ASP.NET PascalCase payload with queue fields", () => {
+    const result = mapUpliftQueueItem({
+      Id: 42,
+      Status: "Pending",
+      CurrentNTE: 1000,
+      RequestedNTE: 1500,
+      Delta: 500,
+      VendorReason: "Scope increase",
+      RequestedAt: "2026-01-15T10:00:00Z",
+      RequestedByVendorName: "Acme Plumbing",
+      RequiredTier: 2,
+      CanDecide: true,
+      DispatchNumber: "D-1001",
+      PONumber: "PO-2002",
+      VendorCompanyName: "Acme Plumbing LLC",
+      WorkOrderId: 99,
+      DispatchId: 7,
+    });
+
+    expect(result).toMatchObject({
+      id: 42,
+      status: "Pending",
+      currentNTE: 1000,
+      requestedNTE: 1500,
+      delta: 500,
+      vendorReason: "Scope increase",
+      requestedAt: "2026-01-15T10:00:00Z",
+      requestedByVendorName: "Acme Plumbing",
+      requiredTier: 2,
+      canDecide: true,
+      dispatchNumber: "D-1001",
+      poNumber: "PO-2002",
+      vendorCompanyName: "Acme Plumbing LLC",
+      workOrderId: 99,
+      dispatchId: 7,
+    });
+  });
+
+  it("maps camelCase payload", () => {
+    const result = mapUpliftQueueItem({
+      id: "u1",
+      status: "Approved",
+      currentNTE: 200,
+      requestedNTE: 250,
+      delta: 50,
+      dispatchNumber: "D-1",
+      poNumber: "PO-1",
+      vendorCompanyName: "Vendor Co",
+    });
+
+    expect(result.id).toBe("u1");
+    expect(result.status).toBe("Approved");
+    expect(result.dispatchNumber).toBe("D-1");
+  });
+
+  it("maps queue display fields in PascalCase", () => {
+    const result = mapUpliftQueueItem({
+      id: 1,
+      WoNumber: "WO-9",
+      WorkOrderSite: "Site A",
+      WorkOrderService: "Plumbing",
+      RequestedByName: "Pat Approver",
+      AttachmentCount: 3,
+      WorkOrderAutoApprovedTotal: 100,
+      WorkOrderAdminApprovedTotal: 250,
+      WorkOrderApprovedExposureTotal: 350,
+      WorkOrderClosed: true,
+    });
+
+    expect(result.woNumber).toBe("WO-9");
+    expect(result.site).toBe("Site A");
+    expect(result.serviceName).toBe("Plumbing");
+    expect(result.requestedByVendorName).toBe("Pat Approver");
+    expect(result.attachmentCount).toBe(3);
+    expect(result.approvedOnWoAuto).toBe(100);
+    expect(result.approvedOnWoAdmin).toBe(250);
+    expect(result.approvedOnWoTotal).toBe(350);
+    expect(result.workOrderClosed).toBe(true);
+  });
+
+  it("maps queue display fields in camelCase", () => {
+    const result = mapUpliftQueueItem({
+      id: 2,
+      woNumber: "WO-10",
+      siteCode: "S-2",
+      trade: "HVAC",
+      attachmentCount: 2,
+      autoApprovedTotal: 50,
+      adminApprovedTotal: 75,
+      approvedOnWorkOrderTotal: 125,
+      isWorkOrderClosed: false,
+    });
+
+    expect(result.woNumber).toBe("WO-10");
+    expect(result.site).toBe("S-2");
+    expect(result.serviceName).toBe("HVAC");
+    expect(result.attachmentCount).toBe(2);
+    expect(result.approvedOnWoAuto).toBe(50);
+    expect(result.approvedOnWoAdmin).toBe(75);
+    expect(result.approvedOnWoTotal).toBe(125);
+    expect(result.workOrderClosed).toBe(false);
+  });
+
+  it("tolerates absent optional queue fields", () => {
+    const result = mapUpliftQueueItem({ id: 3 });
+
+    expect(result.woNumber).toBe("");
+    expect(result.site).toBe("");
+    expect(result.serviceName).toBe("");
+    expect(result.attachmentCount).toBeNull();
+    expect(result.approvedOnWoAuto).toBeNull();
+    expect(result.approvedOnWoAdmin).toBeNull();
+    expect(result.approvedOnWoTotal).toBeNull();
+    expect(result.workOrderClosed).toBeNull();
+  });
+
+  it("maps pending exposure total from the queue payload", () => {
+    expect(mapUpliftQueueExposureTotal({ PendingExposureTotal: 1250 })).toBe(1250);
+    expect(mapUpliftQueueExposureTotal({ pendingExposureTotal: "900" })).toBe(900);
+    expect(mapUpliftQueueExposureTotal({})).toBeNull();
+  });
+});
diff --git a/src/test/domain/uplifts/use-uplift-actions.test.tsx b/src/test/domain/uplifts/use-uplift-actions.test.tsx
new file mode 100644
index 00000000..ac37f8bf
--- /dev/null
+++ b/src/test/domain/uplifts/use-uplift-actions.test.tsx
@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+const approve = vi.fn();
+
+vi.mock("@/domain/uplifts/api/uplifts-api", () => ({
+  upliftsApi: {
+    approve: (...args: unknown[]) => approve(...args),
+  },
+}));
+
+vi.mock("react-toastify", () => ({
+  toast: { error: vi.fn(), success: vi.fn(), warning: vi.fn() },
+}));
+
+import { useApproveUplift } from "@/domain/uplifts/use-cases/use-uplift-actions";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+function makeWrapper(client: QueryClient) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+  };
+}
+
+describe("useApproveUplift", () => {
+  it("refreshes work-order views after a queue decision", async () => {
+    approve.mockResolvedValueOnce(undefined);
+    const client = new QueryClient({
+      defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+    });
+    const invalidateSpy = vi.spyOn(client, "invalidateQueries");
+    const { result } = renderHook(() => useApproveUplift(), {
+      wrapper: makeWrapper(client),
+    });
+
+    act(() => {
+      result.current.mutate({ id: 17 });
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(approve).toHaveBeenCalledWith(17, undefined);
+    expect(invalidateSpy).toHaveBeenCalledWith({ queryKey: queryKeys.uplifts.all });
+    expect(invalidateSpy).toHaveBeenCalledWith({ queryKey: queryKeys.workOrders.all });
+  });
+});
diff --git a/src/test/domain/vendor-portal/api/vendor-portal-api.test.ts b/src/test/domain/vendor-portal/api/vendor-portal-api.test.ts
new file mode 100644
index 00000000..68a57162
--- /dev/null
+++ b/src/test/domain/vendor-portal/api/vendor-portal-api.test.ts
@@ -0,0 +1,90 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+
+type FetchCall = {
+  url: string;
+  method: string;
+  body: unknown;
+  headers: Record<string, string>;
+};
+
+function mockFetch(response: unknown, status = 200) {
+  const calls: FetchCall[] = [];
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (url: string | URL, init?: RequestInit) => {
+      const body = init?.body ? JSON.parse(String(init.body)) : undefined;
+      const headers = (init?.headers ?? {}) as Record<string, string>;
+      calls.push({
+        url: String(url),
+        method: init?.method ?? "GET",
+        body,
+        headers,
+      });
+      return {
+        ok: status >= 200 && status < 300,
+        status,
+        json: async () =>
+          response == null
+            ? ({} as Record<string, unknown>)
+            : ({ data: response } as Record<string, unknown>),
+      } as Response;
+    }),
+  );
+  return calls;
+}
+
+beforeEach(() => {
+  vi.stubEnv("VITE_API_BASE_URL", "");
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.unstubAllEnvs();
+});
+
+describe("vendorPortalApi.refuse", () => {
+  it("POSTs to the refuse endpoint with a reason when provided", async () => {
+    const calls = mockFetch({ id: 9, status: "Refused", refusedAt: "2026-08-10T12:00:00Z" });
+
+    await vendorPortalApi.refuse("portal-token", 9, "Too far away");
+
+    expect(calls).toHaveLength(1);
+    expect(calls[0].url).toContain("/vendor-portal/dispatches/9/refuse");
+    expect(calls[0].method).toBe("POST");
+    expect(calls[0].headers["X-Vendor-Token"]).toBe("portal-token");
+    expect(calls[0].body).toEqual({ reason: "Too far away" });
+  });
+
+  it("omits the reason from the body when none is supplied", async () => {
+    const calls = mockFetch({ id: 9, status: "Refused" });
+
+    await vendorPortalApi.refuse("portal-token", 9);
+
+    expect(calls[0].body).toEqual({});
+  });
+
+  it("returns the refused payload from the API", async () => {
+    mockFetch({ id: 9, status: "Refused", refusedAt: "2026-08-10T12:00:00Z" });
+
+    const result = await vendorPortalApi.refuse("portal-token", 9);
+
+    expect(result).toEqual({ id: 9, status: "Refused", refusedAt: "2026-08-10T12:00:00Z" });
+  });
+
+  it("throws when the API rejects the refusal", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({
+        ok: false,
+        status: 409,
+        json: async () => ({ message: "Dispatch already terminal" }),
+      })) as unknown as typeof fetch,
+    );
+
+    await expect(vendorPortalApi.refuse("portal-token", 9, "nope")).rejects.toThrow(
+      "Dispatch already terminal",
+    );
+  });
+});
diff --git a/src/test/domain/vendor-portal/lib/dispatch-filters.test.ts b/src/test/domain/vendor-portal/lib/dispatch-filters.test.ts
new file mode 100644
index 00000000..b4bfee8c
--- /dev/null
+++ b/src/test/domain/vendor-portal/lib/dispatch-filters.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  applyVendorPortalDispatchFilter,
+  getVendorPortalDispatchFilter,
+} from "@/domain/vendor-portal/lib/dispatch-filters";
+import type { VendorPortalDispatchSummary } from "@/domain/vendor-portal/types/vendor-portal";
+
+const dispatch = (
+  id: number,
+  status: string,
+  scheduledDate?: string,
+): VendorPortalDispatchSummary => ({
+  id,
+  dispatchNumber: `DSP-${id}`,
+  status,
+  scheduledDate,
+});
+
+describe("vendor portal dispatch filters", () => {
+  it("keeps Refused separate from the Open view", () => {
+    const dispatches = [dispatch(1, "Sent"), dispatch(2, "Refused")];
+
+    expect(
+      applyVendorPortalDispatchFilter(dispatches, getVendorPortalDispatchFilter("open")),
+    ).toEqual([dispatches[0]]);
+    expect(
+      applyVendorPortalDispatchFilter(dispatches, getVendorPortalDispatchFilter("refused")),
+    ).toEqual([dispatches[1]]);
+  });
+
+  it("sorts Upcoming by schedule without mutating the cached list", () => {
+    const later = dispatch(2, "Acknowledged", "2099-08-12T09:00:00Z");
+    const sooner = dispatch(1, "Sent", "2099-08-11T09:00:00Z");
+    const dispatches = [later, sooner];
+
+    const result = applyVendorPortalDispatchFilter(
+      dispatches,
+      getVendorPortalDispatchFilter("upcoming"),
+    );
+
+    expect(result).toEqual([sooner, later]);
+    expect(dispatches).toEqual([later, sooner]);
+  });
+});
diff --git a/src/test/domain/vendor-portal/lib/status-helpers.test.ts b/src/test/domain/vendor-portal/lib/status-helpers.test.ts
new file mode 100644
index 00000000..14a88049
--- /dev/null
+++ b/src/test/domain/vendor-portal/lib/status-helpers.test.ts
@@ -0,0 +1,87 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  formatVendorPortalDateTime,
+  isVendorPortalLockedStatus,
+  isVendorPortalTerminalStatus,
+  isVendorPortalUpcomingDispatch,
+  vendorPortalStatusClass,
+} from "@/domain/vendor-portal/lib/status-helpers";
+
+describe("vendorPortalStatusClass", () => {
+  it("applies a distinct class for the Refused status", () => {
+    expect(vendorPortalStatusClass("Refused")).toBe("vp-status-pill vp-status-refused");
+  });
+
+  it("keeps the established class for existing statuses", () => {
+    expect(vendorPortalStatusClass("Sent")).toBe("vp-status-pill vp-status-sent");
+    expect(vendorPortalStatusClass("Cancelled")).toBe("vp-status-pill vp-status-cancelled");
+  });
+});
+
+describe("isVendorPortalLockedStatus", () => {
+  it("adds Refused without regressing the established Completed behavior", () => {
+    expect(isVendorPortalLockedStatus("Refused")).toBe(true);
+    expect(isVendorPortalLockedStatus("Verified")).toBe(true);
+    expect(isVendorPortalLockedStatus("Cancelled")).toBe(true);
+    expect(isVendorPortalLockedStatus("Completed")).toBe(false);
+  });
+});
+
+describe("isVendorPortalTerminalStatus", () => {
+  it("treats Refused, Verified, Cancelled, and Completed as terminal", () => {
+    expect(isVendorPortalTerminalStatus("Refused")).toBe(true);
+    expect(isVendorPortalTerminalStatus("Verified")).toBe(true);
+    expect(isVendorPortalTerminalStatus("Cancelled")).toBe(true);
+    expect(isVendorPortalTerminalStatus("Completed")).toBe(true);
+  });
+
+  it("treats active statuses as non-terminal", () => {
+    expect(isVendorPortalTerminalStatus("Sent")).toBe(false);
+    expect(isVendorPortalTerminalStatus("Acknowledged")).toBe(false);
+    expect(isVendorPortalTerminalStatus("In Progress")).toBe(false);
+  });
+});
+
+describe("isVendorPortalUpcomingDispatch", () => {
+  const now = new Date("2026-08-10T12:00:00Z");
+
+  it("includes a non-terminal dispatch scheduled in the future", () => {
+    expect(
+      isVendorPortalUpcomingDispatch(
+        { status: "Acknowledged", scheduledDate: "2026-08-11T09:00:00Z" },
+        now,
+      ),
+    ).toBe(true);
+  });
+
+  it("excludes terminal statuses even when scheduled in the future", () => {
+    for (const status of ["Refused", "Verified", "Cancelled", "Completed"]) {
+      expect(
+        isVendorPortalUpcomingDispatch({ status, scheduledDate: "2026-08-11T09:00:00Z" }, now),
+      ).toBe(false);
+    }
+  });
+
+  it("excludes dispatches without a scheduled date", () => {
+    expect(isVendorPortalUpcomingDispatch({ status: "Sent", scheduledDate: undefined }, now)).toBe(
+      false,
+    );
+  });
+
+  it("excludes past scheduled dates", () => {
+    expect(
+      isVendorPortalUpcomingDispatch(
+        { status: "In Progress", scheduledDate: "2026-08-09T09:00:00Z" },
+        now,
+      ),
+    ).toBe(false);
+  });
+});
+
+describe("formatVendorPortalDateTime", () => {
+  it("returns an empty string for missing or invalid values", () => {
+    expect(formatVendorPortalDateTime(undefined)).toBe("");
+    expect(formatVendorPortalDateTime("not-a-date")).toBe("");
+  });
+});
diff --git a/src/test/domain/vendor-portal/uplift-workflow.test.ts b/src/test/domain/vendor-portal/uplift-workflow.test.ts
new file mode 100644
index 00000000..787216a7
--- /dev/null
+++ b/src/test/domain/vendor-portal/uplift-workflow.test.ts
@@ -0,0 +1,86 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { vendorPortalApi } from "@/domain/vendor-portal/api/vendor-portal-api";
+import { createUpliftRequestKey } from "@/domain/vendor-portal/lib/request-key";
+import { validateUpliftAmount } from "@/domain/vendor-portal/lib/uplift-validation";
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+function jsonResponse(data: unknown): Response {
+  return new Response(JSON.stringify({ status: "Success", data }), {
+    status: 200,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+describe("vendor uplift workflow contract", () => {
+  it("requires reason and evidence only when the requested NTE exceeds the current NTE", () => {
+    expect(validateUpliftAmount("90", 100, "", {})).toBe("");
+    expect(validateUpliftAmount("110", 100, "", {})).toMatch(/reason/i);
+    expect(validateUpliftAmount("110", 100, "Emergency work", {})).toMatch(/evidence/i);
+    expect(validateUpliftAmount("110", 100, "Emergency work", { hasExisting: true })).toBe("");
+  });
+
+  it("keeps create-mode requests at or below current NTE as NoApprovalRequired", () => {
+    expect(validateUpliftAmount("90", 100, "", { mode: "create" })).toBe("");
+    expect(validateUpliftAmount("100", 100, "", { mode: "create" })).toBe("");
+  });
+
+  it("rejects revise-mode requests at or below current NTE with an actionable error", () => {
+    expect(
+      validateUpliftAmount("90", 100, "Reason", { hasExisting: true, mode: "revise" }),
+    ).toMatch(/must be greater than the current NTE/i);
+    expect(
+      validateUpliftAmount("100", 100, "Reason", { hasExisting: true, mode: "revise" }),
+    ).toMatch(/must be greater than the current NTE/i);
+  });
+
+  it("still requires approval details in revise mode when current NTE is unknown", () => {
+    expect(validateUpliftAmount("110", undefined, "", { mode: "revise" })).toMatch(/reason/i);
+    expect(validateUpliftAmount("110", undefined, "Emergency work", { mode: "revise" })).toMatch(
+      /evidence/i,
+    );
+    expect(
+      validateUpliftAmount("110", undefined, "Emergency work", {
+        hasExisting: true,
+        mode: "revise",
+      }),
+    ).toBe("");
+  });
+
+  it("uses a secure UUID request key", () => {
+    expect(createUpliftRequestKey()).toMatch(
+      /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i,
+    );
+  });
+
+  it("uses dispatch-scoped request, withdraw, revise, and status routes", async () => {
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(jsonResponse({ id: 31 }));
+
+    await vendorPortalApi.requestUplift("token", 7, {
+      requestedNTE: 125,
+      reason: "Parts",
+      requestKey: "key-1",
+      evidenceDocumentId: 22,
+    });
+    await vendorPortalApi.withdrawUplift("token", 7, 31);
+    await vendorPortalApi.reviseUplift("token", 7, 31, {
+      requestedNTE: 130,
+      reason: "Updated parts",
+      evidenceDocumentId: 22,
+    });
+    await vendorPortalApi.getDocumentStatus("token", 7, 22);
+
+    expect(fetchMock.mock.calls.map(([url]) => new URL(String(url)).pathname)).toEqual([
+      "/api/vendor-portal/dispatches/7/uplift-request",
+      "/api/vendor-portal/dispatches/7/uplift-request/31/withdraw",
+      "/api/vendor-portal/dispatches/7/uplift-request/31/revise",
+      "/api/vendor-portal/dispatches/7/documents/22/status",
+    ]);
+    expect(JSON.parse(String(fetchMock.mock.calls[0]?.[1]?.body))).toMatchObject({
+      requestedNTE: 125,
+      evidenceDocumentId: 22,
+    });
+  });
+});
diff --git a/src/test/domain/vendors/api/vendor-company-roster-api.test.ts b/src/test/domain/vendors/api/vendor-company-roster-api.test.ts
new file mode 100644
index 00000000..ed95e3d4
--- /dev/null
+++ b/src/test/domain/vendors/api/vendor-company-roster-api.test.ts
@@ -0,0 +1,249 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { API_PATHS } from "@/api/api-paths";
+
+const apiGet = vi.fn();
+const apiPost = vi.fn();
+const apiPut = vi.fn();
+const apiPatch = vi.fn();
+
+vi.mock("@/api/api", () => ({
+  apiGet: (...args: unknown[]) => apiGet(...args),
+  apiPost: (...args: unknown[]) => apiPost(...args),
+  apiPut: (...args: unknown[]) => apiPut(...args),
+  apiPatch: (...args: unknown[]) => apiPatch(...args),
+}));
+
+vi.mock("ky", () => ({
+  isHTTPError: (error: unknown) =>
+    error !== null && typeof error === "object" && "__kyHTTPError" in error,
+}));
+
+import { vendorCompanyRosterApi } from "@/domain/vendors/api/vendor-company-roster-api";
+import { isVendorRosterConflictError } from "@/domain/vendors/lib/vendor-roster-conflict";
+
+function httpError(status: number, body: unknown): Error {
+  const error = new Error("HTTPError") as Error & {
+    __kyHTTPError: true;
+    response: { status: number; json: () => Promise<unknown>; text: () => Promise<string> };
+  };
+  error.__kyHTTPError = true;
+  error.response = {
+    status,
+    json: () => Promise.resolve(body),
+    text: () => Promise.resolve(JSON.stringify(body)),
+  };
+  return error;
+}
+
+describe("vendorCompanyRosterApi", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiPost.mockReset();
+    apiPut.mockReset();
+    apiPatch.mockReset();
+  });
+
+  it("fetches by vendorId or companyId with the correct query params", async () => {
+    apiGet.mockResolvedValueOnce({ data: { companyId: 5, name: "Solo Co" } });
+
+    await vendorCompanyRosterApi.get({ vendorId: 7 });
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.vendorCompanyRoster.base, {
+      searchParams: { vendorId: "7" },
+    });
+
+    apiGet.mockResolvedValueOnce({ data: { companyId: 5, name: "Solo Co" } });
+    await vendorCompanyRosterApi.get({ companyId: 5 });
+    expect(apiGet).toHaveBeenLastCalledWith(API_PATHS.vendorCompanyRoster.base, {
+      searchParams: { companyId: "5" },
+    });
+  });
+
+  it("posts the canonicalized create payload", async () => {
+    apiPost.mockResolvedValueOnce({ data: { companyId: 9, name: "Solo Co" } });
+
+    await vendorCompanyRosterApi.create({
+      name: "Solo Co",
+      companyPhone: "314-555-0100",
+      technicians: [{ contactName: "Adam", phone: "3145550198", preferredContact: "Phone" }],
+    });
+
+    expect(apiPost).toHaveBeenCalledWith(
+      API_PATHS.vendorCompanyRoster.base,
+      expect.objectContaining({
+        name: "Solo Co",
+        companyPhone: "(314) 555-0100",
+        technicians: [expect.objectContaining({ phone: "(314) 555-0198" })],
+      }),
+    );
+    expect(apiPost.mock.calls[0]?.[1]).not.toHaveProperty("rowVersion");
+  });
+
+  it("puts the rowVersion on the update payload", async () => {
+    apiPut.mockResolvedValueOnce({ data: { companyId: 5, name: "Solo Co" } });
+
+    await vendorCompanyRosterApi.update(5, { name: "Solo Co" }, "rv-1");
+
+    expect(apiPut).toHaveBeenCalledWith(
+      API_PATHS.vendorCompanyRoster.byCompany(5),
+      expect.objectContaining({ name: "Solo Co", rowVersion: "rv-1" }),
+    );
+  });
+
+  it("throws an open-work-order conflict on a 409 with blocked work orders", async () => {
+    apiPut.mockRejectedValueOnce(
+      httpError(409, {
+        blockedWorkOrders: [
+          { workOrderId: 501, workOrderNumber: "WO-501", workOrderTitle: "Boiler" },
+        ],
+      }),
+    );
+
+    await expect(vendorCompanyRosterApi.update(5, { name: "Solo Co" }, "rv-1")).rejects.toSatisfy(
+      (error: unknown) => {
+        if (!isVendorRosterConflictError(error)) return false;
+        return error.conflict.kind === "open-work-orders";
+      },
+    );
+  });
+
+  it("throws a stale conflict on a 409 without blocked work orders", async () => {
+    apiPut.mockRejectedValueOnce(httpError(409, { message: "rowversion mismatch" }));
+
+    await expect(vendorCompanyRosterApi.update(5, { name: "Solo Co" }, "rv-1")).rejects.toSatisfy(
+      (error: unknown) => {
+        if (!isVendorRosterConflictError(error)) return false;
+        return error.conflict.kind === "stale";
+      },
+    );
+  });
+
+  it("throws a duplicate conflict for the stable create response", async () => {
+    apiPost.mockRejectedValueOnce(
+      httpError(409, {
+        code: "duplicate_vendor_company_name",
+        message: "Another vendor company already uses that name.",
+      }),
+    );
+
+    await expect(vendorCompanyRosterApi.create({ name: "Solo Co" })).rejects.toSatisfy(
+      (error: unknown) => {
+        if (!isVendorRosterConflictError(error)) return false;
+        return (
+          error.conflict.kind === "duplicate" &&
+          error.conflict.message === "Another vendor company already uses that name."
+        );
+      },
+    );
+  });
+
+  it("classifies a duplicate 409 from parsed error.data when the response body is consumed", async () => {
+    const conflictError = new Error("HTTPError") as Error & {
+      __kyHTTPError: true;
+      data: unknown;
+      response: { status: number; json: () => Promise<unknown>; text: () => Promise<string> };
+    };
+    conflictError.__kyHTTPError = true;
+    conflictError.data = {
+      code: "duplicate_vendor_company_name",
+      message: "Another vendor company already uses that name.",
+    };
+    const consumedBody = () => {
+      const rejection = Promise.reject(new TypeError("Body has already been consumed"));
+      rejection.catch(() => {});
+      return rejection;
+    };
+    conflictError.response = {
+      status: 409,
+      json: () => consumedBody(),
+      text: () => consumedBody(),
+    };
+
+    apiPost.mockRejectedValueOnce(conflictError);
+
+    await expect(vendorCompanyRosterApi.create({ name: "Solo Co" })).rejects.toSatisfy(
+      (error: unknown) => {
+        if (!isVendorRosterConflictError(error)) return false;
+        return (
+          error.conflict.kind === "duplicate" &&
+          error.conflict.message === "Another vendor company already uses that name."
+        );
+      },
+    );
+  });
+
+  it("rethrows non-conflict errors untouched", async () => {
+    const generic = new Error("boom");
+    apiPost.mockRejectedValueOnce(generic);
+
+    await expect(vendorCompanyRosterApi.create({ name: "Solo Co" })).rejects.toBe(generic);
+  });
+
+  it("patches the additive payload without a technician id and without PUT", async () => {
+    apiPatch.mockResolvedValueOnce({ data: { companyId: 5, name: "Solo Co" } });
+
+    await vendorCompanyRosterApi.addTechnicians(5, {
+      rowVersion: "rv-1",
+      addTechnicians: [
+        {
+          id: 99,
+          contactName: "Adam",
+          phone: "3145550198",
+          email: "",
+          preferredContact: "Phone",
+          tradeSpecialties: "Plumbing",
+          isActive: true,
+        },
+      ],
+    });
+
+    expect(apiPatch).toHaveBeenCalledWith(
+      API_PATHS.vendorCompanyRoster.byCompany(5),
+      expect.objectContaining({
+        rowVersion: "rv-1",
+        addTechnicians: [expect.objectContaining({ contactName: "Adam", phone: "(314) 555-0198" })],
+      }),
+    );
+    const body = apiPatch.mock.calls[0]?.[1] as Record<string, unknown>;
+    expect(body).not.toHaveProperty("companyFields");
+    expect((body.addTechnicians as Array<Record<string, unknown>>)[0]).not.toHaveProperty("id");
+    expect(apiPut).not.toHaveBeenCalled();
+    expect(apiPost).not.toHaveBeenCalled();
+  });
+
+  it("includes companyFields on the additive patch when provided", async () => {
+    apiPatch.mockResolvedValueOnce({ data: { companyId: 5, name: "Solo Co" } });
+
+    await vendorCompanyRosterApi.addTechnicians(5, {
+      rowVersion: "rv-2",
+      addTechnicians: [
+        { contactName: "Adam", phone: "", email: "", tradeSpecialties: "", isActive: true },
+      ],
+      companyFields: { notes: "Updated notes" },
+    });
+
+    expect(apiPatch).toHaveBeenCalledWith(
+      API_PATHS.vendorCompanyRoster.byCompany(5),
+      expect.objectContaining({
+        rowVersion: "rv-2",
+        companyFields: { notes: "Updated notes" },
+      }),
+    );
+  });
+
+  it("throws a stale conflict on a 409 from the additive patch", async () => {
+    apiPatch.mockRejectedValueOnce(httpError(409, { message: "rowversion mismatch" }));
+
+    await expect(
+      vendorCompanyRosterApi.addTechnicians(5, {
+        rowVersion: "rv-1",
+        addTechnicians: [
+          { contactName: "Adam", phone: "", email: "", tradeSpecialties: "", isActive: true },
+        ],
+      }),
+    ).rejects.toSatisfy((error: unknown) => {
+      if (!isVendorRosterConflictError(error)) return false;
+      return error.conflict.kind === "stale";
+    });
+  });
+});
diff --git a/src/test/domain/vendors/api/vendors-api.test.ts b/src/test/domain/vendors/api/vendors-api.test.ts
new file mode 100644
index 00000000..38a6bd20
--- /dev/null
+++ b/src/test/domain/vendors/api/vendors-api.test.ts
@@ -0,0 +1,442 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { API_PATHS } from "@/api/api-paths";
+
+const apiGet = vi.fn();
+const apiPost = vi.fn();
+const apiPut = vi.fn();
+const apiDelete = vi.fn();
+
+vi.mock("@/api/api", () => ({
+  apiGet: (...args: unknown[]) => apiGet(...args),
+  apiPost: (...args: unknown[]) => apiPost(...args),
+  apiPut: (...args: unknown[]) => apiPut(...args),
+  apiDelete: (...args: unknown[]) => apiDelete(...args),
+}));
+
+import { vendorsApi } from "@/domain/vendors/api/vendors-api";
+
+describe("vendorsApi.getList", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiPost.mockReset();
+    apiPut.mockReset();
+    apiDelete.mockReset();
+    apiGet.mockResolvedValue({
+      Data: [
+        {
+          Id: 7,
+          CompanyId: "co-1",
+          CompanyName: "Gateway Plumbing",
+          ContactName: "Adam Whyte",
+          Email: "dispatch@gateway.test",
+          Phone: "314-555-0198",
+          Address: "1 Market St",
+          City: "St. Louis",
+          State: "MO",
+          IsActive: false,
+          PreferredContact: "Email",
+          Technicians: [
+            {
+              Id: 7,
+              ContactName: "Adam Whyte",
+              Email: "adam@gateway.test",
+              Phone: "314-555-0198",
+              TradeSpecialties: "Plumbing",
+              IsActive: false,
+              TotalJobs: 3,
+            },
+          ],
+        },
+      ],
+      TotalCount: 1,
+    });
+  });
+
+  it("forwards the status filter and maps list location fields", async () => {
+    const result = await vendorsApi.getList({ search: "gateway", isActive: false, page: 1 });
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.vendor.getList, {
+      searchParams: { search: "gateway", isActive: "false", page: 1, pageSize: 12 },
+    });
+    expect(result.items[0]).toMatchObject({
+      address: "1 Market St",
+      city: "St. Louis",
+      state: "MO",
+      isActive: false,
+      companyId: "co-1",
+      preferredContact: "Email",
+      technicians: [
+        expect.objectContaining({
+          id: 7,
+          email: "adam@gateway.test",
+          phone: "314-555-0198",
+          totalJobs: 3,
+        }),
+      ],
+    });
+  });
+
+  it("synthesizes one technician for a legacy ungrouped response", async () => {
+    apiGet.mockResolvedValueOnce({
+      Data: [
+        {
+          Id: 9,
+          CompanyName: "Legacy Co",
+          ContactName: "Legacy Tech",
+          Email: "legacy@example.test",
+          Phone: "555-0109",
+          IsActive: true,
+        },
+      ],
+      TotalCount: 1,
+    });
+
+    const result = await vendorsApi.getList();
+
+    expect(result.items[0]?.technicians).toEqual([
+      expect.objectContaining({ id: 9, contactName: "Legacy Tech", phone: "555-0109" }),
+    ]);
+  });
+
+  it("forwards all selected facets as repeated indexed query parameters", async () => {
+    await vendorsApi.getList({
+      companies: ["Gateway Plumbing", "Metro HVAC"],
+      trades: ["Plumbing"],
+      locations: ["St. Louis, MO"],
+      jobBuckets: ["50-99"],
+    });
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.vendor.getList, {
+      searchParams: {
+        search: "",
+        page: 1,
+        pageSize: 12,
+        "companies[0]": "Gateway Plumbing",
+        "companies[1]": "Metro HVAC",
+        "trades[0]": "Plumbing",
+        "locations[0]": "St. Louis, MO",
+        "jobBuckets[0]": "50-99",
+      },
+    });
+  });
+
+  it("maps company profiles and labels returned by the facets endpoint", async () => {
+    apiGet.mockResolvedValueOnce({
+      data: {
+        companies: [
+          {
+            name: "Gateway Plumbing",
+            companyPhone: "314-555-0100",
+            email: "dispatch@gateway.test",
+            address: "1 Market St",
+            city: "St. Louis",
+            state: "MO",
+            zip: "63101",
+            googleMapsUrl: "https://maps.google.com/gateway",
+          },
+        ],
+        trades: ["Plumbing"],
+        locations: [{ city: "St. Louis", state: "MO" }],
+        jobBuckets: [{ id: "50-99", label: "50–99" }],
+      },
+    });
+
+    const facets = await vendorsApi.getFacets();
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.vendor.facets, { searchParams: {} });
+    expect(facets.companies[0]).toMatchObject({
+      name: "Gateway Plumbing",
+      companyPhone: "314-555-0100",
+      googleMapsUrl: "https://maps.google.com/gateway",
+    });
+    expect(facets.locations[0]?.label).toBe("St. Louis, MO");
+    expect(facets.jobBuckets[0]).toEqual({ id: "50-99", label: "50–99" });
+  });
+
+  it("serializes the requested facet scope as an isActive query parameter", async () => {
+    apiGet.mockResolvedValue({
+      data: { companies: [], trades: [], locations: [], jobBuckets: [] },
+    });
+
+    await vendorsApi.getFacets({ isActive: true });
+    await vendorsApi.getFacets({ isActive: false });
+
+    expect(apiGet).toHaveBeenNthCalledWith(1, API_PATHS.vendor.facets, {
+      searchParams: { isActive: "true" },
+    });
+    expect(apiGet).toHaveBeenNthCalledWith(2, API_PATHS.vendor.facets, {
+      searchParams: { isActive: "false" },
+    });
+  });
+
+  it("sends all editable prototype fields when creating and updating", async () => {
+    const values = {
+      companyId: "42",
+      companyName: "Gateway Plumbing",
+      contactName: "Adam Whyte",
+      phone: "+1 314-555-0198",
+      companyPhone: "314-555-0100",
+      email: "dispatch@gateway.test",
+      address: "1 Market St",
+      city: "St. Louis",
+      state: "MO",
+      zip: "63101",
+      tradeSpecialties: "Plumbing, HVAC",
+      googleMapsUrl: "https://maps.google.com/gateway",
+      notes: "Preferred after-hours vendor",
+      totalJobs: 72,
+      isActive: true,
+    };
+    apiPost.mockResolvedValueOnce({ data: values });
+    apiPut.mockResolvedValueOnce({ data: { ...values, isActive: false } });
+
+    await vendorsApi.create(values);
+    await vendorsApi.update(7, { ...values, isActive: false });
+
+    expect(apiPost).toHaveBeenCalledWith(
+      API_PATHS.rest.vendors,
+      expect.objectContaining({
+        companyName: "Gateway Plumbing",
+        notes: values.notes,
+        companyId: 42,
+        phone: "(314) 555-0198",
+        companyPhone: "(314) 555-0100",
+      }),
+    );
+    expect(apiPost.mock.calls[0]?.[1]).not.toHaveProperty("preferredContact");
+    expect(apiPut).toHaveBeenCalledWith(
+      `${API_PATHS.rest.vendors}/7`,
+      expect.objectContaining({ companyName: "Gateway Plumbing", isActive: false }),
+    );
+    expect(apiPut.mock.calls[0]?.[1]).not.toHaveProperty("preferredContact");
+    expect(apiPost.mock.calls[0]?.[1]).not.toHaveProperty("totalJobs");
+    expect(apiPut.mock.calls[0]?.[1]).not.toHaveProperty("totalJobs");
+  });
+
+  it("sends a null companyId when free-text company has no company link", async () => {
+    apiPost.mockResolvedValueOnce({ data: {} });
+    await vendorsApi.create({
+      companyName: "Independent Vendor LLC",
+      contactName: "Indy Tech",
+    });
+
+    expect(apiPost).toHaveBeenCalledWith(
+      API_PATHS.rest.vendors,
+      expect.objectContaining({ companyName: "Independent Vendor LLC", companyId: null }),
+    );
+  });
+
+  it("does not send a non-numeric company id to the integer backend contract", async () => {
+    apiPost.mockResolvedValueOnce({ data: {} });
+
+    await vendorsApi.create({
+      companyId: "co-1",
+      companyName: "Gateway Plumbing",
+      contactName: "Adam Whyte",
+    });
+
+    expect(apiPost).toHaveBeenCalledWith(
+      API_PATHS.rest.vendors,
+      expect.objectContaining({ companyId: null }),
+    );
+  });
+
+  it("preserves a legacy phone on read and omits it from an unrelated update", async () => {
+    apiGet.mockResolvedValueOnce({
+      data: {
+        id: 7,
+        companyName: "Legacy Vendor",
+        contactName: "Taylor",
+        phone: "555-1234 ext 9",
+      },
+    });
+    apiPut.mockResolvedValueOnce({ data: {} });
+
+    const vendor = await vendorsApi.getById(7);
+    expect(vendor.phone).toBe("555-1234 ext 9");
+
+    await vendorsApi.update(7, { notes: "Updated only the notes" });
+    expect(apiPut).toHaveBeenCalledWith(`${API_PATHS.rest.vendors}/7`, {
+      notes: "Updated only the notes",
+    });
+  });
+
+  it("sends only changed fields and canonicalizes a supplied phone", async () => {
+    apiPut.mockResolvedValueOnce({ data: {} });
+
+    await vendorsApi.update(7, {
+      isActive: false,
+      companyId: null,
+      phone: "314-555-0198",
+    });
+
+    expect(apiPut).toHaveBeenCalledWith(`${API_PATHS.rest.vendors}/7`, {
+      isActive: false,
+      companyId: null,
+      phone: "(314) 555-0198",
+    });
+  });
+
+  it("maps the deactivation-impact payload including linked work orders", async () => {
+    apiGet.mockResolvedValueOnce({
+      data: {
+        vendorId: 7,
+        canDeactivate: false,
+        openWorkOrders: [
+          {
+            workOrderId: 101,
+            workOrderNumber: "WO-101",
+            workOrderTitle: "Boiler repair",
+            status: "Dispatched",
+            scheduledDate: "2025-01-02",
+            dispatchId: 501,
+          },
+        ],
+      },
+    });
+
+    const impact = await vendorsApi.getDeactivationImpact(7);
+
+    expect(apiGet).toHaveBeenCalledWith(
+      `${API_PATHS.rest.vendors}/7/${API_PATHS.vendor.deactivationImpact}`,
+    );
+    expect(impact).toEqual({
+      vendorId: 7,
+      canDeactivate: false,
+      openWorkOrders: [
+        {
+          workOrderId: 101,
+          workOrderNumber: "WO-101",
+          workOrderTitle: "Boiler repair",
+          status: "Dispatched",
+          scheduledDate: "2025-01-02",
+          dispatchId: 501,
+        },
+      ],
+    });
+  });
+
+  it("deletes a vendor by id and surfaces the 409 error without retry swallowing", async () => {
+    apiDelete.mockResolvedValueOnce(undefined);
+    await vendorsApi.delete(7);
+    expect(apiDelete).toHaveBeenCalledWith(`${API_PATHS.rest.vendors}/7`);
+
+    const conflict = Object.assign(new Error("Conflict"), { response: { status: 409 } });
+    apiDelete.mockRejectedValueOnce(conflict);
+    await expect(vendorsApi.delete(8)).rejects.toThrow("Conflict");
+  });
+});
+
+describe("vendorsApi.getDirectoryList", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiGet.mockResolvedValue({
+      Data: [
+        {
+          Id: 7,
+          CompanyId: "co-1",
+          CompanyName: "Gateway Plumbing",
+          ContactName: "Adam Whyte",
+          Email: "dispatch@gateway.test",
+          Phone: "314-555-0198",
+          Address: "1 Market St",
+          City: "St. Louis",
+          State: "MO",
+          IsActive: false,
+          PreferredContact: "Email",
+          Technicians: [
+            {
+              Id: 7,
+              ContactName: "Adam Whyte",
+              Email: "adam@gateway.test",
+              Phone: "314-555-0198",
+              TradeSpecialties: "Plumbing",
+              IsActive: false,
+              TotalJobs: 3,
+            },
+          ],
+        },
+      ],
+      TotalCount: 1,
+    });
+  });
+
+  it("targets the dedicated directory endpoint while getList keeps the legacy route", async () => {
+    await vendorsApi.getDirectoryList({ search: "gateway", isActive: false, page: 1 });
+    await vendorsApi.getList({ search: "gateway", isActive: false, page: 1 });
+
+    expect(API_PATHS.vendor.getDirectoryList).toBe("Vendor/GetVendorDirectoryList");
+    expect(API_PATHS.vendor.getList).toBe("Vendor/GetVendorList");
+    expect(apiGet).toHaveBeenNthCalledWith(1, API_PATHS.vendor.getDirectoryList, {
+      searchParams: { search: "gateway", isActive: "false", page: 1, pageSize: 12 },
+    });
+    expect(apiGet).toHaveBeenNthCalledWith(2, API_PATHS.vendor.getList, {
+      searchParams: { search: "gateway", isActive: "false", page: 1, pageSize: 12 },
+    });
+  });
+
+  it("builds directory query parameters with the same repeated facet encoding", async () => {
+    await vendorsApi.getDirectoryList({
+      companies: ["Gateway Plumbing", "Metro HVAC"],
+      trades: ["Plumbing"],
+      locations: ["St. Louis, MO"],
+      jobBuckets: ["50-99"],
+    });
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.vendor.getDirectoryList, {
+      searchParams: {
+        search: "",
+        page: 1,
+        pageSize: 12,
+        "companies[0]": "Gateway Plumbing",
+        "companies[1]": "Metro HVAC",
+        "trades[0]": "Plumbing",
+        "locations[0]": "St. Louis, MO",
+        "jobBuckets[0]": "50-99",
+      },
+    });
+  });
+
+  it("maps grouped company rows with the shared grouped-row mapper", async () => {
+    const result = await vendorsApi.getDirectoryList({ isActive: false, page: 1 });
+
+    expect(result.items[0]).toMatchObject({
+      companyId: "co-1",
+      companyName: "Gateway Plumbing",
+      address: "1 Market St",
+      city: "St. Louis",
+      state: "MO",
+      isActive: false,
+      technicians: [
+        expect.objectContaining({
+          id: 7,
+          contactName: "Adam Whyte",
+          email: "adam@gateway.test",
+          phone: "314-555-0198",
+          totalJobs: 3,
+        }),
+      ],
+    });
+  });
+});
+
+describe("vendorsApi.getDirectoryList Service Area filter", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiGet.mockResolvedValue({ Data: [], TotalCount: 0 });
+  });
+
+  it("sends areas[n] stable ids and the Unassigned sentinel", async () => {
+    await vendorsApi.getDirectoryList({ page: 1, areas: ["1", "__unassigned__"] });
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.vendor.getDirectoryList, {
+      searchParams: {
+        search: "",
+        page: 1,
+        pageSize: 12,
+        "areas[0]": "1",
+        "areas[1]": "__unassigned__",
+      },
+    });
+  });
+});
diff --git a/src/test/domain/vendors/mappers/vendor-roster-mapper.test.ts b/src/test/domain/vendors/mappers/vendor-roster-mapper.test.ts
new file mode 100644
index 00000000..3f4beef9
--- /dev/null
+++ b/src/test/domain/vendors/mappers/vendor-roster-mapper.test.ts
@@ -0,0 +1,176 @@
+import { describe, expect, it } from "vitest";
+import {
+  mapRosterConflict,
+  mapRosterTechnician,
+  mapVendorCompanyRoster,
+  mapVendorRosterToBackend,
+} from "@/domain/vendors/mappers/vendor-roster-mapper";
+
+describe("vendor roster mapper", () => {
+  it("maps a PascalCase aggregate payload including technicians", () => {
+    const roster = mapVendorCompanyRoster({
+      CompanyId: 101,
+      RowVersion: "rv-1",
+      Name: "Gateway Plumbing",
+      CompanyPhone: "314-555-0100",
+      Email: "dispatch@gateway.test",
+      Technicians: [
+        {
+          Id: 7,
+          ContactName: "Adam Whyte",
+          Phone: "314-555-0198",
+          Email: "adam@gateway.test",
+          PreferredContact: "Email",
+          TradeSpecialties: "Plumbing",
+          IsActive: true,
+          TotalJobs: 72,
+        },
+      ],
+    });
+
+    expect(roster).toEqual({
+      companyId: 101,
+      rowVersion: "rv-1",
+      name: "Gateway Plumbing",
+      companyPhone: "314-555-0100",
+      email: "dispatch@gateway.test",
+      address: "",
+      city: "",
+      state: "",
+      zip: "",
+      googleMapsUrl: "",
+      notes: "",
+      areaId: "",
+      areaName: "",
+      technicians: [
+        {
+          id: 7,
+          contactName: "Adam Whyte",
+          phone: "314-555-0198",
+          email: "adam@gateway.test",
+          preferredContact: "Email",
+          tradeSpecialties: "Plumbing",
+          isActive: true,
+          totalJobs: 72,
+        },
+      ],
+    });
+  });
+
+  it("maps a company-only roster with a null vendor id and zero technicians", () => {
+    const roster = mapVendorCompanyRoster({ companyId: 5, name: "Solo Co" });
+    expect(roster.companyId).toBe(5);
+    expect(roster.technicians).toEqual([]);
+  });
+
+  it("canonicalizes phones and carries rowVersion on the backend payload", () => {
+    const payload = mapVendorRosterToBackend({
+      name: "Gateway Plumbing",
+      companyPhone: "314-555-0100",
+      email: "dispatch@gateway.test",
+      googleMapsUrl: "http://maps.google.com/legacy",
+      tradeSpecialties: "Plumbing",
+      rowVersion: "rv-2",
+      technicians: [{ contactName: "Adam", phone: "3145550198", preferredContact: "Phone" }],
+    });
+
+    expect(payload).toMatchObject({
+      name: "Gateway Plumbing",
+      companyPhone: "(314) 555-0100",
+      email: "dispatch@gateway.test",
+      rowVersion: "rv-2",
+    });
+    expect(payload.technicians).toEqual([
+      expect.objectContaining({ contactName: "Adam", phone: "(314) 555-0198" }),
+    ]);
+    expect(payload).not.toHaveProperty("tradeSpecialties");
+    // The stored Maps URL is deprecated: a legacy value reaching the mapper
+    // (from stale callers or old records) must not be emitted to the backend.
+    expect(payload).not.toHaveProperty("googleMapsUrl");
+  });
+
+  it("omits rowVersion from the create payload when absent", () => {
+    const payload = mapVendorRosterToBackend({ name: "Solo Co", companyPhone: "314-555-0100" });
+    expect(payload).not.toHaveProperty("rowVersion");
+  });
+
+  it("maps an open-work-order conflict payload", () => {
+    const conflict = mapRosterConflict(
+      {
+        blockedWorkOrders: [
+          {
+            workOrderId: 501,
+            workOrderNumber: "WO-501",
+            workOrderTitle: "Boiler repair",
+            status: "Dispatched",
+          },
+        ],
+      },
+      "fallback",
+    );
+    expect(conflict.kind).toBe("open-work-orders");
+    expect(conflict.blockedWorkOrders[0]?.workOrderNumber).toBe("WO-501");
+  });
+
+  it("classifies a body without blocked work orders as stale", () => {
+    const conflict = mapRosterConflict({ message: "stale rowversion" }, "fallback");
+    expect(conflict.kind).toBe("stale");
+    expect(conflict.message).toBe("stale rowversion");
+  });
+
+  it("classifies the stable duplicate-company response", () => {
+    const conflict = mapRosterConflict(
+      {
+        code: "duplicate_vendor_company_name",
+        message: "Another vendor company already uses that name.",
+      },
+      "fallback",
+    );
+
+    expect(conflict.kind).toBe("duplicate");
+    expect(conflict.message).toBe("Another vendor company already uses that name.");
+    expect(conflict.blockedWorkOrders).toEqual([]);
+  });
+
+  it("preserves an explicit Phone/Email/Text preferred contact on read", () => {
+    expect(
+      mapRosterTechnician({ contactName: "A", preferredContact: "Phone" }).preferredContact,
+    ).toBe("Phone");
+    expect(
+      mapRosterTechnician({ contactName: "B", preferredContact: "Email" }).preferredContact,
+    ).toBe("Email");
+    expect(
+      mapRosterTechnician({ contactName: "C", preferredContact: "Text" }).preferredContact,
+    ).toBe("Text");
+  });
+
+  it("preserves an absent preferred contact as absent on read", () => {
+    const tech = mapRosterTechnician({ contactName: "Adam" });
+    expect(tech.preferredContact).toBeUndefined();
+  });
+
+  it("preserves an unknown preferred contact as absent on read", () => {
+    const tech = mapRosterTechnician({ contactName: "Adam", preferredContact: "Fax" });
+    expect(tech.preferredContact).toBeUndefined();
+  });
+
+  it("omits preferredContact from the backend payload when absent", () => {
+    const payload = mapVendorRosterToBackend({
+      name: "Solo Co",
+      companyPhone: "314-555-0100",
+      technicians: [{ contactName: "Adam", phone: "3145550198" }],
+    });
+    const tech = (payload.technicians as Array<Record<string, unknown>>)[0];
+    expect(tech).not.toHaveProperty("preferredContact");
+  });
+
+  it("keeps an explicit preferredContact in the backend payload", () => {
+    const payload = mapVendorRosterToBackend({
+      name: "Solo Co",
+      companyPhone: "314-555-0100",
+      technicians: [{ contactName: "Adam", phone: "3145550198", preferredContact: "Email" }],
+    });
+    const tech = (payload.technicians as Array<Record<string, unknown>>)[0];
+    expect(tech.preferredContact).toBe("Email");
+  });
+});
diff --git a/src/test/domain/vendors/schemas/vendor-roster-schema.test.ts b/src/test/domain/vendors/schemas/vendor-roster-schema.test.ts
new file mode 100644
index 00000000..da7bcff4
--- /dev/null
+++ b/src/test/domain/vendors/schemas/vendor-roster-schema.test.ts
@@ -0,0 +1,161 @@
+import { describe, expect, it } from "vitest";
+import {
+  VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE,
+  emptyRosterTechnician,
+  emptyVendorCompanyRosterForm,
+  VENDOR_NOTES_MAX_LENGTH,
+  vendorCompanyRosterSchema,
+  vendorCompanyRosterUpdateSchema,
+} from "@/domain/vendors/schemas/vendor-roster-schema";
+
+const baseCompany = {
+  ...emptyVendorCompanyRosterForm,
+  name: "Gateway Plumbing",
+  companyPhone: "(314) 555-0100",
+  email: "dispatch@gateway.test",
+  // SH-271 made the structured address required, so a company that is meant to
+  // parse cleanly has to carry one.
+  address: "6735 Trippel Rd",
+  city: "Theodore",
+  state: "AL",
+};
+
+describe("vendorCompanyRosterSchema", () => {
+  it("requires a company name", () => {
+    const result = vendorCompanyRosterSchema.safeParse({ ...baseCompany, name: "" });
+    expect(result.success).toBe(false);
+  });
+
+  it("requires a company phone or email even with no technicians", () => {
+    const result = vendorCompanyRosterSchema.safeParse({
+      ...emptyVendorCompanyRosterForm,
+      name: "Solo Co",
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(
+        result.error.issues.some(
+          (issue) => issue.message === VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE,
+        ),
+      ).toBe(true);
+    }
+  });
+
+  it("reports the phone-or-email rule at the companyContact path, not on companyPhone", () => {
+    const result = vendorCompanyRosterSchema.safeParse({
+      ...emptyVendorCompanyRosterForm,
+      name: "Solo Co",
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const issue = result.error.issues.find(
+        (candidate) => candidate.message === VENDOR_COMPANY_CONTACT_REQUIRED_MESSAGE,
+      );
+      expect(issue?.path).toEqual(["companyContact"]);
+      expect(result.error.issues.some((candidate) => candidate.path.includes("companyPhone"))).toBe(
+        false,
+      );
+    }
+  });
+
+  it("accepts a company with zero technicians when phone is present", () => {
+    const result = vendorCompanyRosterSchema.safeParse({
+      ...baseCompany,
+      name: "Solo Co",
+      email: "",
+      companyPhone: "(314) 555-0100",
+      technicians: [],
+    });
+    expect(result.success).toBe(true);
+    if (result.success) expect(result.data).not.toHaveProperty("companyContact");
+  });
+
+  it("accepts a company with email only and multiple technicians", () => {
+    const result = vendorCompanyRosterSchema.safeParse({
+      ...baseCompany,
+      companyPhone: "",
+      technicians: [
+        { ...emptyRosterTechnician, contactName: "Adam", phone: "314-555-0198" },
+        { ...emptyRosterTechnician, contactName: "Beth", phone: "314-555-0200" },
+      ],
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("accepts exactly 500 note characters and rejects 501", () => {
+    const atLimit = vendorCompanyRosterSchema.safeParse({
+      ...baseCompany,
+      notes: "x".repeat(VENDOR_NOTES_MAX_LENGTH),
+    });
+    const overLimit = vendorCompanyRosterSchema.safeParse({
+      ...baseCompany,
+      notes: "x".repeat(VENDOR_NOTES_MAX_LENGTH + 1),
+    });
+
+    expect(atLimit.success).toBe(true);
+    expect(overLimit.success).toBe(false);
+  });
+
+  it("accepts a technician row without a name or phone", () => {
+    const result = vendorCompanyRosterSchema.safeParse({
+      ...baseCompany,
+      technicians: [{ ...emptyRosterTechnician, contactName: "" }],
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("rejects malformed emails and partial phones", () => {
+    const result = vendorCompanyRosterSchema.safeParse({
+      ...baseCompany,
+      email: "not-an-email",
+      technicians: [{ ...emptyRosterTechnician, contactName: "Adam", phone: "(314)" }],
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it("tolerates a legacy stored Maps URL instead of failing HTTPS validation", () => {
+    // Legacy records carry a stored googleMapsUrl — often plain HTTP. The form
+    // no longer holds the field, so leftover values loaded from old data must
+    // neither fail validation nor re-enter the parsed output.
+    const result = vendorCompanyRosterSchema.safeParse({
+      ...baseCompany,
+      googleMapsUrl: "http://maps.google.com/legacy",
+    });
+
+    expect(result.success).toBe(true);
+    if (result.success) expect(result.data).not.toHaveProperty("googleMapsUrl");
+  });
+
+  it("rejects an unknown preferred contact", () => {
+    const result = vendorCompanyRosterSchema.safeParse({
+      ...baseCompany,
+      technicians: [
+        { ...emptyRosterTechnician, contactName: "Adam", preferredContact: "Fax" as never },
+      ],
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it("accepts a technician with an absent preferred contact", () => {
+    const techWithoutPreference = { ...emptyRosterTechnician };
+    delete techWithoutPreference.preferredContact;
+    const result = vendorCompanyRosterSchema.safeParse({
+      ...baseCompany,
+      technicians: [{ ...techWithoutPreference, contactName: "Adam", phone: "314-555-0198" }],
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("update schema requires a non-empty row version and company id", () => {
+    const result = vendorCompanyRosterUpdateSchema.safeParse({
+      ...baseCompany,
+      companyId: 42,
+      rowVersion: "",
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it("exposes an empty default form with no technicians", () => {
+    expect(emptyVendorCompanyRosterForm.technicians).toEqual([]);
+  });
+});
diff --git a/src/test/domain/vendors/schemas/vendor-schema.test.ts b/src/test/domain/vendors/schemas/vendor-schema.test.ts
new file mode 100644
index 00000000..726ae030
--- /dev/null
+++ b/src/test/domain/vendors/schemas/vendor-schema.test.ts
@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import {
+  getChangedVendorValues,
+  vendorSchema,
+  vendorUpdateSchema,
+} from "@/domain/vendors/schemas/vendor-schema";
+
+const validVendor = {
+  companyName: "Gateway Plumbing",
+  contactName: "Adam Whyte",
+  email: "dispatch@gateway.test",
+  phone: "(314) 555-0198",
+  googleMapsUrl: "https://maps.google.com/gateway",
+};
+
+describe("vendorSchema", () => {
+  it("requires both the company and technician identity", () => {
+    const result = vendorSchema.safeParse({ ...validVendor, companyName: "", contactName: "" });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.flatten().fieldErrors.companyName).toContain("Company is required");
+      expect(result.error.flatten().fieldErrors.contactName).toContain(
+        "Technician name is required",
+      );
+    }
+  });
+
+  it("accepts an empty optional email and HTTPS map URL", () => {
+    expect(vendorSchema.safeParse({ ...validVendor, email: "" }).success).toBe(true);
+  });
+
+  it("rejects malformed email and non-HTTPS map links", () => {
+    expect(
+      vendorSchema.safeParse({
+        ...validVendor,
+        email: "not-an-email",
+        googleMapsUrl: "http://maps.google.com/gateway",
+      }).success,
+    ).toBe(false);
+  });
+
+  it("accepts canonicalizable North American phones and rejects partials", () => {
+    expect(vendorSchema.safeParse({ ...validVendor, phone: "", companyPhone: "" }).success).toBe(
+      true,
+    );
+    expect(vendorSchema.safeParse({ ...validVendor, companyPhone: "(314) 555-0100" }).success).toBe(
+      true,
+    );
+    expect(vendorSchema.safeParse({ ...validVendor, phone: "314-555-0198" }).success).toBe(true);
+    expect(vendorSchema.safeParse({ ...validVendor, phone: "+1 314 555 0198" }).success).toBe(true);
+    expect(vendorSchema.safeParse({ ...validVendor, phone: "(314)" }).success).toBe(false);
+  });
+
+  it("accepts a nullable companyId and a known preferred contact value", () => {
+    expect(
+      vendorSchema.safeParse({ ...validVendor, companyId: null, preferredContact: "Text" }).success,
+    ).toBe(true);
+    expect(
+      vendorSchema.safeParse({ ...validVendor, companyId: 42, preferredContact: "Email" }).success,
+    ).toBe(true);
+  });
+
+  it("rejects an unknown preferred contact value", () => {
+    expect(vendorSchema.safeParse({ ...validVendor, preferredContact: "Fax" }).success).toBe(false);
+  });
+
+  it("validates only edited fields while retaining required and format checks", () => {
+    expect(vendorUpdateSchema.safeParse({ isActive: true }).success).toBe(true);
+    expect(vendorUpdateSchema.safeParse({ companyName: "" }).success).toBe(false);
+    expect(vendorUpdateSchema.safeParse({ phone: "555-1234 ext 9" }).success).toBe(false);
+  });
+
+  it("returns a sparse update that preserves false and null and omits totalJobs", () => {
+    const original = {
+      ...validVendor,
+      totalJobs: 12,
+      isActive: false,
+      companyId: "co-1",
+      preferredContact: "Phone" as const,
+    };
+    const changed = getChangedVendorValues(
+      { ...original, isActive: true, companyId: null, totalJobs: 13 },
+      original,
+    );
+
+    expect(changed).toEqual({ isActive: true, companyId: null });
+  });
+});
diff --git a/src/test/domain/vendors/use-cases/use-save-vendor-company-roster-additive.test.tsx b/src/test/domain/vendors/use-cases/use-save-vendor-company-roster-additive.test.tsx
new file mode 100644
index 00000000..b6dcae4d
--- /dev/null
+++ b/src/test/domain/vendors/use-cases/use-save-vendor-company-roster-additive.test.tsx
@@ -0,0 +1,265 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const rosterAdd = vi.fn();
+const rosterUpdate = vi.fn();
+const rosterCreate = vi.fn();
+
+vi.mock("@/domain/vendors/api/vendor-company-roster-api", () => ({
+  vendorCompanyRosterApi: {
+    addTechnicians: (...args: unknown[]) => rosterAdd(...args),
+    update: (...args: unknown[]) => rosterUpdate(...args),
+    create: (...args: unknown[]) => rosterCreate(...args),
+  },
+}));
+
+vi.mock("@/domain/vendors/api/vendors-api", () => ({
+  vendorsApi: { update: vi.fn() },
+}));
+
+vi.mock("react-toastify", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
+
+import {
+  buildAdditiveRosterPatch,
+  useSaveVendorCompanyRoster,
+} from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
+import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
+import type { VendorCompanyRosterFormValues } from "@/domain/vendors/schemas/vendor-roster-schema";
+
+const roster: VendorCompanyRoster = {
+  companyId: 5,
+  rowVersion: "rv-1",
+  name: "Gateway Plumbing",
+  companyPhone: "(314) 555-0100",
+  email: "dispatch@gateway.test",
+  address: "1 Main St",
+  city: "St. Louis",
+  state: "MO",
+  zip: "63101",
+  googleMapsUrl: "",
+  notes: "Preferred vendor",
+  areaId: "",
+  areaName: "",
+  technicians: [
+    {
+      id: 11,
+      contactName: "Ray Holt",
+      phone: "(314) 555-0122",
+      email: "",
+      preferredContact: "Phone",
+      tradeSpecialties: "Plumbing",
+      isActive: true,
+      totalJobs: 0,
+    },
+  ],
+};
+
+const newTechnician = {
+  contactName: "Dana Kim",
+  phone: "(314) 555-0144",
+  email: "dana@test.test",
+  preferredContact: "Text" as const,
+  tradeSpecialties: "HVAC",
+  isActive: true,
+};
+
+function formValues(
+  overrides: Partial<VendorCompanyRosterFormValues> = {},
+): VendorCompanyRosterFormValues {
+  return {
+    name: roster.name,
+    companyPhone: roster.companyPhone,
+    email: roster.email,
+    address: roster.address,
+    city: roster.city,
+    state: roster.state,
+    zip: roster.zip,
+    notes: roster.notes,
+    areaId: roster.areaId,
+    technicians: [newTechnician],
+    ...overrides,
+  };
+}
+
+describe("buildAdditiveRosterPatch", () => {
+  it("carries only the newly entered technician, never a full roster snapshot", () => {
+    const patch = buildAdditiveRosterPatch(roster, formValues(), "rv-1");
+
+    expect(patch).not.toBeNull();
+    expect(patch?.addTechnicians).toEqual([newTechnician]);
+    expect(patch?.addTechnicians[0]).not.toHaveProperty("id");
+  });
+
+  it("ignores blank technician rows", () => {
+    const patch = buildAdditiveRosterPatch(
+      roster,
+      formValues({
+        technicians: [
+          {
+            contactName: "",
+            phone: "",
+            email: "",
+            preferredContact: "Phone",
+            tradeSpecialties: "",
+            isActive: true,
+          },
+          newTechnician,
+        ],
+      }),
+      "rv-1",
+    );
+
+    expect(patch?.addTechnicians).toEqual([newTechnician]);
+  });
+
+  it("sends only company fields the user edited", () => {
+    const patch = buildAdditiveRosterPatch(
+      roster,
+      formValues({ notes: "New notes", address: "2 Oak Ave" }),
+      "rv-1",
+      { notes: true, address: true },
+    );
+
+    expect(patch?.companyFields).toEqual({ notes: "New notes", address: "2 Oak Ave" });
+  });
+
+  it("never sends a company field the user did not edit, even when it differs from the roster", () => {
+    // Regression: after a stale-409 the roster is refetched while the form keeps pre-conflict
+    // values. A form-vs-roster diff would resend our stale value for a field another user changed
+    // in that window, silently reverting their edit. Only edited fields may be transmitted.
+    const rosterAfterOtherUserEditedPhone = { ...roster, companyPhone: "314-555-9999" };
+
+    const patch = buildAdditiveRosterPatch(
+      rosterAfterOtherUserEditedPhone,
+      formValues({ companyPhone: roster.companyPhone, notes: "New notes" }),
+      "rv-2",
+      { notes: true },
+    );
+
+    expect(patch?.companyFields).toEqual({ notes: "New notes" });
+    expect(patch?.companyFields).not.toHaveProperty("companyPhone");
+  });
+
+  it("omits companyFields when values differ but nothing was edited", () => {
+    const patch = buildAdditiveRosterPatch(
+      roster,
+      formValues({ notes: "Drifted under us" }),
+      "rv-1",
+      {},
+    );
+
+    expect(patch).not.toHaveProperty("companyFields");
+  });
+
+  it("omits companyFields entirely when nothing changed", () => {
+    const patch = buildAdditiveRosterPatch(roster, formValues(), "rv-1");
+
+    expect(patch).not.toHaveProperty("companyFields");
+  });
+
+  it("returns null when there is nothing to add or change", () => {
+    const patch = buildAdditiveRosterPatch(
+      roster,
+      formValues({
+        technicians: [
+          {
+            contactName: "",
+            phone: "",
+            email: "",
+            preferredContact: "Phone",
+            tradeSpecialties: "",
+            isActive: true,
+          },
+        ],
+      }),
+      "rv-1",
+    );
+
+    expect(patch).toBeNull();
+  });
+});
+
+function createWrapper() {
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+  };
+}
+
+describe("useSaveVendorCompanyRoster routing", () => {
+  beforeEach(() => {
+    rosterAdd.mockReset();
+    rosterUpdate.mockReset();
+    rosterCreate.mockReset();
+  });
+
+  it("add mode issues the additive patch and never the reconcile PUT", async () => {
+    rosterAdd.mockResolvedValueOnce(roster);
+    const { result } = renderHook(() => useSaveVendorCompanyRoster(), {
+      wrapper: createWrapper(),
+    });
+
+    act(() => {
+      result.current.mutate({
+        mode: "add",
+        values: formValues(),
+        companyId: 5,
+        rowVersion: "rv-1",
+        originalRoster: roster,
+      });
+    });
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(rosterAdd).toHaveBeenCalledTimes(1);
+    expect(rosterAdd).toHaveBeenCalledWith(
+      5,
+      expect.objectContaining({
+        rowVersion: "rv-1",
+        addTechnicians: [newTechnician],
+      }),
+    );
+    expect(rosterUpdate).not.toHaveBeenCalled();
+    expect(rosterCreate).not.toHaveBeenCalled();
+  });
+
+  it("update mode still issues the full reconcile PUT", async () => {
+    rosterUpdate.mockResolvedValueOnce(roster);
+    const { result } = renderHook(() => useSaveVendorCompanyRoster(), {
+      wrapper: createWrapper(),
+    });
+
+    act(() => {
+      result.current.mutate({
+        mode: "update",
+        values: formValues({
+          technicians: [{ id: 11, ...newTechnician }, newTechnician],
+        }),
+        companyId: 5,
+        rowVersion: "rv-1",
+        originalRoster: roster,
+      });
+    });
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(rosterUpdate).toHaveBeenCalledWith(5, expect.anything(), "rv-1");
+    expect(rosterAdd).not.toHaveBeenCalled();
+  });
+
+  it("create mode still issues the POST", async () => {
+    rosterCreate.mockResolvedValueOnce(roster);
+    const { result } = renderHook(() => useSaveVendorCompanyRoster(), {
+      wrapper: createWrapper(),
+    });
+
+    act(() => {
+      result.current.mutate({ mode: "create", values: formValues() });
+    });
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(rosterCreate).toHaveBeenCalledTimes(1);
+    expect(rosterAdd).not.toHaveBeenCalled();
+    expect(rosterUpdate).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts b/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
new file mode 100644
index 00000000..3aabb058
--- /dev/null
+++ b/src/test/domain/vendors/use-cases/use-save-vendor-company-roster.test.ts
@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+import { getSingleStatusOnlyChange } from "@/domain/vendors/use-cases/use-save-vendor-company-roster";
+import type { VendorCompanyRoster } from "@/domain/vendors/types/vendor";
+
+const roster: VendorCompanyRoster = {
+  companyId: 10,
+  rowVersion: "rv-1",
+  name: "Legacy Plumbing",
+  companyPhone: "555-1234 ext 9",
+  email: "dispatch@example.test",
+  address: "1 Main St",
+  city: "St. Louis",
+  state: "MO",
+  zip: "63101",
+  googleMapsUrl: "http://maps.example.test/legacy",
+  notes: "Legacy values remain untouched",
+  areaId: "",
+  areaName: "",
+  technicians: [
+    {
+      id: 7,
+      contactName: "Taylor",
+      phone: "555-0199 ext 2",
+      email: "taylor@example.test",
+      preferredContact: "Phone",
+      tradeSpecialties: "Plumbing",
+      isActive: false,
+      totalJobs: 12,
+    },
+  ],
+};
+
+const values = {
+  name: roster.name,
+  companyPhone: roster.companyPhone,
+  email: roster.email,
+  address: roster.address,
+  city: roster.city,
+  state: roster.state,
+  zip: roster.zip,
+  notes: roster.notes,
+  areaId: roster.areaId,
+  technicians: roster.technicians.map((technician) => ({
+    id: technician.id,
+    contactName: technician.contactName,
+    phone: technician.phone,
+    email: technician.email,
+    preferredContact: technician.preferredContact,
+    tradeSpecialties: technician.tradeSpecialties,
+    isActive: technician.isActive,
+  })),
+};
+
+describe("getSingleStatusOnlyChange", () => {
+  it("preserves the sparse legacy status path when exactly one technician status changes", () => {
+    expect(
+      getSingleStatusOnlyChange(roster, {
+        ...values,
+        technicians: [{ ...values.technicians[0], isActive: true }],
+      }),
+    ).toEqual({ id: 7, isActive: true });
+  });
+
+  it("requires aggregate reconciliation when company or technician data changes", () => {
+    expect(getSingleStatusOnlyChange(roster, { ...values, notes: "changed" })).toBeNull();
+    expect(
+      getSingleStatusOnlyChange(roster, {
+        ...values,
+        technicians: [{ ...values.technicians[0], contactName: "Renamed", isActive: true }],
+      }),
+    ).toBeNull();
+  });
+});
diff --git a/src/test/domain/vendors/use-cases/use-vendor-directory-list.test.tsx b/src/test/domain/vendors/use-cases/use-vendor-directory-list.test.tsx
new file mode 100644
index 00000000..cc898d8f
--- /dev/null
+++ b/src/test/domain/vendors/use-cases/use-vendor-directory-list.test.tsx
@@ -0,0 +1,80 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+
+const getDirectoryList = vi.fn();
+const getList = vi.fn();
+
+vi.mock("@/domain/vendors/api/vendors-api", () => ({
+  vendorsApi: {
+    getDirectoryList: (...args: unknown[]) => getDirectoryList(...args),
+    getList: (...args: unknown[]) => getList(...args),
+  },
+}));
+
+import { useVendorDirectoryList } from "@/domain/vendors/use-cases/use-vendor-directory-list";
+import { useVendorsList } from "@/domain/vendors/use-cases/use-vendors-list";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+const emptyResult = { items: [], totalCount: 0, page: 1, pageSize: 12 };
+
+function createClient(): QueryClient {
+  return new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+}
+
+function makeWrapper(client: QueryClient) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+  };
+}
+
+describe("useVendorDirectoryList", () => {
+  beforeEach(() => {
+    getDirectoryList.mockReset();
+    getList.mockReset();
+    getDirectoryList.mockResolvedValue(emptyResult);
+    getList.mockResolvedValue(emptyResult);
+  });
+
+  it("fetches through the directory endpoint, never the legacy list", async () => {
+    const { result } = renderHook(() => useVendorDirectoryList({ isActive: true, page: 1 }), {
+      wrapper: makeWrapper(createClient()),
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(getDirectoryList).toHaveBeenCalledWith({ isActive: true, page: 1 });
+    expect(getList).not.toHaveBeenCalled();
+  });
+
+  it("keeps a query key distinct from the legacy list key", () => {
+    const params = { isActive: true, page: 1, pageSize: 12 };
+
+    expect(queryKeys.vendors.directoryList(params)).not.toEqual(queryKeys.vendors.list(params));
+    expect(queryKeys.vendors.directoryList(params)).toEqual(
+      queryKeys.vendors.directoryList(params),
+    );
+    expect(queryKeys.vendors.directoryList(params)[1]).toBe("directoryList");
+    expect(queryKeys.vendors.list(params)[1]).toBe("list");
+  });
+
+  it("caches directory and legacy results independently for the same params", async () => {
+    const params = { isActive: true, page: 1 } as const;
+    const client = createClient();
+    const directory = renderHook(() => useVendorDirectoryList({ ...params }), {
+      wrapper: makeWrapper(client),
+    });
+    const legacy = renderHook(() => useVendorsList({ ...params }), {
+      wrapper: makeWrapper(client),
+    });
+
+    await waitFor(() => expect(directory.result.current.isSuccess).toBe(true));
+    await waitFor(() => expect(legacy.result.current.isSuccess).toBe(true));
+
+    expect(getDirectoryList).toHaveBeenCalledTimes(1);
+    expect(getList).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/test/domain/vendors/use-cases/use-vendor-facets.test.tsx b/src/test/domain/vendors/use-cases/use-vendor-facets.test.tsx
new file mode 100644
index 00000000..c732e116
--- /dev/null
+++ b/src/test/domain/vendors/use-cases/use-vendor-facets.test.tsx
@@ -0,0 +1,86 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+
+const getFacets = vi.fn();
+
+vi.mock("@/domain/vendors/api/vendors-api", () => ({
+  vendorsApi: { getFacets: (...args: unknown[]) => getFacets(...args) },
+}));
+
+import { useVendorFacets } from "@/domain/vendors/use-cases/use-vendor-facets";
+import { queryKeys } from "@/infra/query-key/query-key";
+
+const emptyFacets = { companies: [], trades: [], locations: [], jobBuckets: [] };
+const activeFacets = { ...emptyFacets, companies: [{ name: "Active Co" }] };
+const inactiveFacets = { ...emptyFacets, companies: [{ name: "Inactive Co" }] };
+
+function createClient(): QueryClient {
+  return new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+}
+
+function makeWrapper(client: QueryClient) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+  };
+}
+
+describe("useVendorFacets", () => {
+  beforeEach(() => {
+    getFacets.mockReset();
+  });
+
+  it("switches facet requests true/false as the tab scope changes", async () => {
+    getFacets.mockResolvedValue(activeFacets);
+    const { rerender } = renderHook(({ isActive }) => useVendorFacets(isActive), {
+      initialProps: { isActive: true as boolean | undefined },
+      wrapper: makeWrapper(createClient()),
+    });
+
+    await waitFor(() => expect(getFacets).toHaveBeenCalledWith({ isActive: true }));
+
+    getFacets.mockResolvedValue(inactiveFacets);
+    rerender({ isActive: false });
+    await waitFor(() => expect(getFacets).toHaveBeenCalledWith({ isActive: false }));
+
+    getFacets.mockResolvedValue(activeFacets);
+    rerender({ isActive: undefined });
+    await waitFor(() => expect(getFacets).toHaveBeenCalledWith(undefined));
+  });
+
+  it("scopes the cache so active, inactive, and unscoped keys cannot collide", () => {
+    const active = queryKeys.vendors.facets(true);
+    const inactive = queryKeys.vendors.facets(false);
+    const unscoped = queryKeys.vendors.facets();
+
+    expect(active).not.toEqual(inactive);
+    expect(active).not.toEqual(unscoped);
+    expect(inactive).not.toEqual(unscoped);
+    expect(active[active.length - 1]).toBe(true);
+    expect(inactive[inactive.length - 1]).toBe(false);
+    expect(unscoped[unscoped.length - 1]).toBeNull();
+  });
+
+  it("reuses the cached facet entry when returning to a previous scope", async () => {
+    getFacets.mockResolvedValue(activeFacets);
+    const client = createClient();
+    const { result, rerender } = renderHook(({ isActive }) => useVendorFacets(isActive), {
+      initialProps: { isActive: true as boolean | undefined },
+      wrapper: makeWrapper(client),
+    });
+
+    await waitFor(() => expect(getFacets).toHaveBeenCalledTimes(1));
+
+    getFacets.mockResolvedValue(inactiveFacets);
+    rerender({ isActive: false });
+    await waitFor(() => expect(getFacets).toHaveBeenCalledTimes(2));
+
+    getFacets.mockClear();
+    rerender({ isActive: true });
+    await waitFor(() => expect(result.current.data).toEqual(activeFacets));
+    expect(getFacets).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/domain/vendors/utils/build-company-notes-patch.test.ts b/src/test/domain/vendors/utils/build-company-notes-patch.test.ts
new file mode 100644
index 00000000..824ad1c8
--- /dev/null
+++ b/src/test/domain/vendors/utils/build-company-notes-patch.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { buildCompanyNotesUpdate } from "@/domain/vendors/utils/build-company-notes-patch";
+
+const baseline = { companyId: 12, rowVersion: "AAAAAAAAB9E=", notes: "Call before arrival" };
+
+describe("buildCompanyNotesUpdate", () => {
+  it("builds a notes-only additive patch when the notes changed", () => {
+    expect(buildCompanyNotesUpdate(baseline, "  Gate code 4411  ")).toEqual({
+      companyId: 12,
+      patch: {
+        rowVersion: "AAAAAAAAB9E=",
+        addTechnicians: [],
+        companyFields: { notes: "Gate code 4411" },
+      },
+    });
+  });
+
+  it("skips the write when the notes are unchanged apart from whitespace", () => {
+    expect(buildCompanyNotesUpdate(baseline, "Call before arrival  ")).toBeNull();
+  });
+
+  it("skips the write without a loaded company baseline", () => {
+    expect(buildCompanyNotesUpdate(null, "New notes")).toBeNull();
+    expect(buildCompanyNotesUpdate({ ...baseline, companyId: null }, "New notes")).toBeNull();
+    expect(buildCompanyNotesUpdate({ ...baseline, rowVersion: "" }, "New notes")).toBeNull();
+  });
+
+  it("does not send an emptied field, which the additive patch treats as unchanged", () => {
+    expect(buildCompanyNotesUpdate(baseline, "   ")).toBeNull();
+  });
+});
diff --git a/src/test/domain/vendors/utils/build-technician-create-payload.test.ts b/src/test/domain/vendors/utils/build-technician-create-payload.test.ts
new file mode 100644
index 00000000..844af97d
--- /dev/null
+++ b/src/test/domain/vendors/utils/build-technician-create-payload.test.ts
@@ -0,0 +1,106 @@
+import { describe, expect, it } from "vitest";
+import {
+  mergeVendorDropdownItems,
+  resolveVendorCompanyAnchor,
+} from "@/app/(protected)/workorders/_components/list/table/cells/resolve-vendor-company-anchor";
+import type { VendorDropdownItem } from "@/domain/work-orders/types/work-order";
+import { buildTechnicianCreatePayload } from "@/domain/vendors/utils/build-technician-create-payload";
+import { vendorToDropdownItem } from "@/domain/vendors/utils/vendor-to-dropdown-item";
+import type { Vendor } from "@/domain/vendors/types/vendor";
+
+describe("buildTechnicianCreatePayload", () => {
+  it("copies company fields and sets the new technician identity", () => {
+    const payload = buildTechnicianCreatePayload({
+      companyVendor: {
+        companyName: "Gateway Plumbing",
+        email: "dispatch@gateway.test",
+        address: "1 Main St",
+        tradeSpecialties: "Plumbing",
+      },
+      contactName: "Jordan Lee",
+      phone: "(314) 555-0100",
+      companyId: 42,
+    });
+
+    expect(payload).toMatchObject({
+      companyName: "Gateway Plumbing",
+      contactName: "Jordan Lee",
+      phone: "(314) 555-0100",
+      email: "dispatch@gateway.test",
+      address: "1 Main St",
+      tradeSpecialties: "Plumbing",
+      companyId: 42,
+      isActive: true,
+    });
+  });
+});
+
+describe("resolveVendorCompanyAnchor", () => {
+  const vendors: VendorDropdownItem[] = [
+    {
+      id: 10,
+      companyName: "Gateway Plumbing",
+      contactName: "Adam Whyte",
+      tradeSpecialties: "Plumbing",
+      address: "1 Main St",
+      distanceMiles: null,
+    },
+  ];
+
+  it("returns null anchor when no company context exists", () => {
+    expect(
+      resolveVendorCompanyAnchor({
+        company: "",
+        resolvedCompany: "",
+        selectedVendor: undefined,
+        vendors,
+      }),
+    ).toEqual({ companyName: "", companyVendor: null });
+  });
+
+  it("merges newly created vendors without dropping existing options", () => {
+    const added: VendorDropdownItem = {
+      id: 55,
+      companyName: "Gateway Plumbing",
+      contactName: "Jordan Lee",
+      tradeSpecialties: "Plumbing",
+      address: "1 Main St",
+      distanceMiles: null,
+    };
+    expect(mergeVendorDropdownItems(vendors, [added])).toHaveLength(2);
+  });
+});
+
+describe("vendorToDropdownItem", () => {
+  it("maps a created vendor into the work-order dropdown shape", () => {
+    const vendor: Vendor = {
+      id: 99,
+      companyId: "co-1",
+      companyName: "Gateway Plumbing",
+      contactName: "Jordan Lee",
+      email: "jordan@gateway.test",
+      phone: "(314) 555-0100",
+      companyPhone: "",
+      googleMapsUrl: "",
+      notes: "",
+      totalJobs: 0,
+      address: "1 Main St",
+      city: "St. Louis",
+      state: "MO",
+      zip: "63101",
+      tradeSpecialties: "Plumbing",
+      isActive: true,
+      preferredContact: "Phone",
+    };
+
+    expect(vendorToDropdownItem(vendor)).toEqual({
+      id: 99,
+      companyName: "Gateway Plumbing",
+      contactName: "Jordan Lee",
+      tradeSpecialties: "Plumbing",
+      address: "1 Main St",
+      distanceMiles: null,
+      email: "jordan@gateway.test",
+    });
+  });
+});
diff --git a/src/test/domain/work-orders/api/fetch-unassigned-board-rows.test.ts b/src/test/domain/work-orders/api/fetch-unassigned-board-rows.test.ts
new file mode 100644
index 00000000..e047474c
--- /dev/null
+++ b/src/test/domain/work-orders/api/fetch-unassigned-board-rows.test.ts
@@ -0,0 +1,48 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { BOARD_SEARCH_MAX_PAGE_SIZE } from "@/domain/work-orders/utils/board-query-params";
+
+const searchBoard = vi.fn();
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    searchBoard: (...args: unknown[]) => searchBoard(...args),
+  },
+}));
+
+import { fetchUnassignedBoardPage } from "@/domain/work-orders/api/fetch-unassigned-board-rows";
+
+function pageResult(items: Pick<WorkOrderTableRow, "id">[], totalCount: number, page = 0) {
+  return {
+    items,
+    scheduled: [],
+    unscheduled: [],
+    totalCount,
+    returnedCount: items.length,
+    page,
+    pageSize: BOARD_SEARCH_MAX_PAGE_SIZE,
+  };
+}
+
+describe("fetchUnassignedBoardPage", () => {
+  beforeEach(() => {
+    searchBoard.mockReset();
+  });
+
+  it("fetches a single search page instead of exhausting totalCount", async () => {
+    const first = Array.from({ length: 50 }, (_, index) => ({ id: `a-${index}` }));
+    searchBoard.mockResolvedValueOnce(pageResult(first, 1778, 0));
+
+    const result = await fetchUnassignedBoardPage(0, 50);
+
+    expect(searchBoard).toHaveBeenCalledTimes(1);
+    expect(searchBoard.mock.calls[0]?.[0]).toMatchObject({
+      page: 0,
+      pageSize: 50,
+      dispatchers: ["__unassigned__"],
+      datePreset: "Custom",
+    });
+    expect(result.items).toHaveLength(50);
+    expect(result.totalCount).toBe(1778);
+  });
+});
diff --git a/src/test/domain/work-orders/api/work-order-uplifts-api.test.ts b/src/test/domain/work-orders/api/work-order-uplifts-api.test.ts
new file mode 100644
index 00000000..599ae34e
--- /dev/null
+++ b/src/test/domain/work-orders/api/work-order-uplifts-api.test.ts
@@ -0,0 +1,25 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const apiGet = vi.fn();
+const apiPost = vi.fn();
+
+vi.mock("@/api/api", () => ({
+  apiGet: (...args: unknown[]) => apiGet(...args),
+  apiPost: (...args: unknown[]) => apiPost(...args),
+}));
+
+import { workOrderUpliftsApi } from "@/domain/work-orders/api/work-order-uplifts-api";
+
+describe("workOrderUpliftsApi", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiPost.mockReset();
+  });
+
+  it("propagates a real API list failure instead of returning mock uplifts", async () => {
+    const error = new Error("Unauthorized");
+    apiGet.mockRejectedValueOnce(error);
+
+    await expect(workOrderUpliftsApi.list(42)).rejects.toBe(error);
+  });
+});
diff --git a/src/test/domain/work-orders/api/work-orders-api.test.ts b/src/test/domain/work-orders/api/work-orders-api.test.ts
new file mode 100644
index 00000000..e295ed9d
--- /dev/null
+++ b/src/test/domain/work-orders/api/work-orders-api.test.ts
@@ -0,0 +1,1042 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { API_PATHS } from "@/api/api-paths";
+
+const apiGet = vi.fn();
+const apiPut = vi.fn();
+const apiPost = vi.fn();
+const apiPostForm = vi.fn();
+const apiPatch = vi.fn();
+const apiPatchFn = vi.fn();
+const apiPostFn = vi.fn();
+const apiDeleteFn = vi.fn();
+const apiGetFn = vi.fn();
+const uploadFormFn = vi.fn();
+
+vi.mock("@/api/upload-form-with-progress", () => ({
+  uploadFormWithProgress: (...args: unknown[]) => uploadFormFn(...args),
+}));
+
+vi.mock("@/api/api", () => ({
+  apiGet: (...args: unknown[]) => apiGet(...args),
+  apiPut: (...args: unknown[]) => apiPut(...args),
+  apiPost: (...args: unknown[]) => apiPost(...args),
+  apiPostForm: (...args: unknown[]) => apiPostForm(...args),
+  apiPatch: (...args: unknown[]) => apiPatch(...args),
+  apiDelete: vi.fn(),
+  apiPostNoContent: vi.fn(),
+  apiRequestRaw: (method: string, url: unknown, options?: unknown) => {
+    if (method === "patch") return apiPatchFn(url, options);
+    if (method === "post") return apiPostFn(url, options);
+    if (method === "delete") return apiDeleteFn(url, options);
+    if (method === "get") return apiGetFn(url, options);
+    throw new Error(`Unexpected apiRequestRaw method: ${method}`);
+  },
+  api: {
+    patch: (...args: unknown[]) => apiPatchFn(...args),
+    post: (...args: unknown[]) => apiPostFn(...args),
+    delete: (...args: unknown[]) => apiDeleteFn(...args),
+    get: (...args: unknown[]) => apiGetFn(...args),
+  },
+}));
+
+import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api";
+import { createDefaultWorkOrderFormValues } from "@/domain/work-orders/types/work-order";
+import { EMPTY_WIZARD_DRAFT } from "@/domain/work-orders/types/work-order-wizard";
+
+describe("workOrdersApi.getById", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiPut.mockReset();
+    apiGet.mockResolvedValue({
+      Id: 10,
+      title: "Test WO",
+      status: "Open",
+    });
+  });
+
+  it("updates only the assigned vendor through the work-order-scoped endpoint", async () => {
+    apiPut.mockResolvedValueOnce(undefined);
+    const payload = {
+      workOrderId: 10,
+      contactName: "Taylor Tech",
+      phone: "(314) 555-0199",
+      email: "taylor@example.com",
+      notes: "Text before arrival",
+    };
+
+    await workOrdersApi.updateVendorFromWorkOrder(7, payload);
+
+    expect(apiPut).toHaveBeenCalledWith(`${API_PATHS.rest.vendors}/7/work-order-update`, payload);
+  });
+
+  it("calls GetWorkorderById with id query param, not path suffix", async () => {
+    await workOrdersApi.getById(10);
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.workOrder.getById, {
+      searchParams: { id: 10 },
+    });
+    expect(apiGet).not.toHaveBeenCalledWith(`${API_PATHS.workOrder.getById}/10`, expect.anything());
+  });
+});
+
+describe("workOrdersApi.getBoardDetail", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiGet.mockResolvedValue({
+      info: {
+        id: 123,
+        woNumber: "00000000123",
+        workOrderType: 2,
+        siteCode: "SITE-01",
+        lifecycleStatus: 3,
+        lifecycleStatusLabel: "Scheduled",
+      },
+      completion: { docStatus: 1 },
+      comments: [],
+      audit: [],
+      media: [],
+    });
+  });
+
+  it("GETs workorders/{id}/detail and maps nested sections", async () => {
+    const result = await workOrdersApi.getBoardDetail(123);
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.workOrder.boardDetail(123));
+    expect(result.info.woNumber).toBe("00000000123");
+    expect(result.info.type).toBe("PM");
+    expect(result.completion.docStatus).toBe("Yes");
+    expect(result.comments).toEqual([]);
+    expect(result.audit).toEqual([]);
+    expect(result.media).toEqual([]);
+  });
+});
+
+describe("workOrdersApi.createFromBoard", () => {
+  beforeEach(() => {
+    apiPost.mockReset();
+    apiPost.mockResolvedValue({
+      Id: 42,
+      title: "Board WO",
+      status: "Open",
+      workOrderNumber: "20260625001",
+    });
+  });
+
+  it("posts camelCase board payload to workorders/board", async () => {
+    await workOrdersApi.createFromBoard({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      siteCode: "BK5",
+      woNumber: "12345",
+      locationId: "9",
+    });
+
+    expect(apiPost).toHaveBeenCalledWith(API_PATHS.workOrder.boardCreate, {
+      workOrderType: 2,
+      siteCode: "BK5",
+      lifecycleStatus: 1,
+      woNumber: "12345",
+      isAddOn: false,
+      locationId: 9,
+    });
+  });
+
+  it("includes the registry service id when selected in the wizard", async () => {
+    await workOrdersApi.createFromBoard({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "Reactive",
+      siteCode: "BK5",
+      pm: "HVAC inspection",
+      serviceId: 7,
+    });
+
+    expect(apiPost).toHaveBeenCalledWith(
+      API_PATHS.workOrder.boardCreate,
+      expect.objectContaining({
+        workOrderType: 6,
+        primaryService: "HVAC inspection",
+        serviceId: 7,
+      }),
+    );
+  });
+});
+
+describe("workOrdersApi.update", () => {
+  beforeEach(() => {
+    apiPost.mockReset();
+    apiPostForm.mockReset();
+    apiPostForm.mockResolvedValue({ message: "Updated Successfully", status: "200" });
+  });
+
+  it("posts multipart FormData to EditWorkorder, not JSON", async () => {
+    const values = {
+      ...createDefaultWorkOrderFormValues(),
+      title: "Updated title",
+      description: "Updated description",
+      status: "On Hold" as const,
+      priority: "Sev 2",
+      locationId: "8",
+      dueDate: "2026-07-15",
+      assignedTo: "Dispatcher",
+      contactIds: [1, 2],
+      categoryIds: [3],
+    };
+
+    await workOrdersApi.update(2, values);
+
+    expect(apiPost).not.toHaveBeenCalled();
+    expect(apiPostForm).toHaveBeenCalledTimes(1);
+    expect(apiPostForm).toHaveBeenCalledWith(
+      API_PATHS.workOrder.editWorkorder,
+      expect.any(FormData),
+    );
+
+    const formData = apiPostForm.mock.calls[0]?.[1] as FormData;
+    expect(formData.get("Id")).toBe("2");
+    expect(formData.get("WorkerOrderTitle")).toBe("Updated title");
+    expect(formData.get("Status")).toBe("OnHold");
+    expect(formData.get("Priority")).toBe("High");
+    expect(formData.getAll("ContactIds")).toEqual(["1", "2"]);
+    expect(formData.getAll("CategoryIds")).toEqual(["3"]);
+  });
+});
+
+describe("workOrdersApi completedDate board contract", () => {
+  it("does not expose updateCompletedDate — completedDate uses board PATCH", () => {
+    expect("updateCompletedDate" in workOrdersApi).toBe(false);
+    expect(API_PATHS.workOrder.boardPatch(55)).toBe("workorders/55/board");
+  });
+});
+
+describe("workOrdersApi.fetchDispatchers", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+  });
+
+  it("loads dispatchers from board lookup endpoint", async () => {
+    apiGet.mockResolvedValue([{ id: "guid-1", name: "Alex" }]);
+
+    const users = await workOrdersApi.fetchDispatchers();
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.workOrder.lookupsDispatchers);
+    expect(users).toEqual([{ id: "guid-1", name: "Alex" }]);
+  });
+
+  it("falls back to User list when lookup is empty", async () => {
+    apiGet.mockResolvedValueOnce([]).mockResolvedValueOnce([{ id: "u-1", name: "Fallback User" }]);
+
+    const users = await workOrdersApi.fetchDispatchers();
+
+    expect(apiGet).toHaveBeenNthCalledWith(1, API_PATHS.workOrder.lookupsDispatchers);
+    expect(apiGet).toHaveBeenNthCalledWith(2, API_PATHS.user.list);
+    expect(users).toEqual([{ id: "u-1", name: "Fallback User" }]);
+  });
+});
+
+const GET_USER_SERIALIZED_DIRECTORY = {
+  data: [
+    {
+      Id: "s1",
+      Name: "Alex Smith",
+    },
+  ],
+};
+
+describe("workOrdersApi.fetchUsers", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+  });
+
+  it("maps the serialized GET User Name as the full display name", async () => {
+    apiGet.mockResolvedValue(GET_USER_SERIALIZED_DIRECTORY);
+
+    const users = await workOrdersApi.fetchUsers();
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.user.list);
+    expect(users).toEqual([{ id: "s1", name: "Alex Smith" }]);
+  });
+});
+
+describe("workOrdersApi.getBoard", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiGet.mockResolvedValue({
+      weekStart: "2026-07-13",
+      weekEnd: "2026-07-17",
+      counts: { returned: 1, total: 2 },
+      unscheduled: [
+        {
+          id: 101,
+          woNumber: "10000001234",
+          workOrderType: 2,
+          siteCode: "BK5",
+          lifecycleStatusLabel: "Incomplete",
+          scheduledDate: null,
+          pm: "HVAC",
+        },
+      ],
+      scheduled: [
+        {
+          id: 202,
+          woNumber: "10000001235",
+          workOrderType: 6,
+          siteCode: "BK5",
+          lifecycleStatusLabel: "Scheduled",
+          scheduledDate: "2026-07-15T00:00:00",
+          vendorName: "Acme HVAC LLC",
+          apptTime: "07:00 – 09:00",
+          dueDate: "2026-07-18T00:00:00",
+          pm: "PM Filter",
+        },
+      ],
+    });
+  });
+
+  it("calls board endpoint and maps scheduled/unscheduled rows", async () => {
+    const result = await workOrdersApi.getBoard({
+      weekStart: "2026-07-13",
+      weekEnd: "2026-07-17",
+    });
+
+    expect(apiGet).toHaveBeenCalledWith(
+      API_PATHS.workOrder.board,
+      expect.objectContaining({
+        searchParams: expect.any(URLSearchParams),
+      }),
+    );
+    expect(result.items).toHaveLength(1);
+    expect(result.returnedCount).toBe(1);
+    expect(result.totalCount).toBe(2);
+    expect(result.unscheduled).toHaveLength(1);
+    expect(result.scheduled).toHaveLength(1);
+    expect(result.scheduled[0]?.company).toBe("Acme HVAC LLC");
+    expect(result.scheduled[0]?.apptTime).toBe("07:00 – 09:00");
+    expect(result.scheduled[0]?.type).toBe("Reactive");
+  });
+
+  it("does not dump unscheduled rows into items when counts are zero", async () => {
+    apiGet.mockResolvedValue({
+      weekStart: "2026-08-24",
+      weekEnd: "2026-08-28",
+      counts: { returned: 0, total: 0 },
+      unscheduled: Array.from({ length: 5 }, (_, index) => ({
+        id: index + 1,
+        woNumber: `0000000000${index + 1}`,
+        lifecycleStatusLabel: "Incomplete",
+      })),
+      scheduled: [],
+    });
+
+    const result = await workOrdersApi.getBoard({
+      weekStart: "2026-08-24",
+      weekEnd: "2026-08-28",
+    });
+
+    expect(result.items).toEqual([]);
+    expect(result.unscheduled).toHaveLength(5);
+    expect(result.totalCount).toBe(0);
+    expect(result.returnedCount).toBe(0);
+  });
+});
+
+describe("workOrdersApi.searchBoard", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiGet.mockResolvedValue({
+      items: [
+        {
+          id: 202,
+          woNumber: "10000001235",
+          workOrderType: 6,
+          scheduledDate: "2026-07-15T00:00:00",
+          vendorName: "Acme HVAC LLC",
+          apptTime: "07:00 – 09:00",
+          dueDate: "2026-07-18T00:00:00",
+          pm: "PM Filter",
+          lifecycleStatusLabel: "Scheduled",
+        },
+      ],
+      totalCount: 1,
+      page: 1,
+      pageSize: 100,
+    });
+  });
+
+  it("calls board/search and maps paged items", async () => {
+    const result = await workOrdersApi.searchBoard({
+      datePreset: "Custom",
+      dateFrom: "2026-07-13",
+      dateTo: "2026-07-17",
+      page: 0,
+      pageSize: 100,
+    });
+
+    expect(apiGet).toHaveBeenCalledWith(
+      API_PATHS.workOrder.boardSearch,
+      expect.objectContaining({
+        searchParams: expect.any(URLSearchParams),
+      }),
+    );
+    expect(result.items).toHaveLength(1);
+    expect(result.totalCount).toBe(1);
+    expect(result.items[0]?.pm).toBe("PM Filter");
+    expect(result.items[0]?.scheduledOn).toBe("2026-07-15");
+  });
+
+  it("serializes unscheduledOnly=true with no date window on the exact wire shape (SH-338)", async () => {
+    await workOrdersApi.searchBoard({
+      page: 0,
+      pageSize: 50,
+      unscheduledOnly: true,
+      statuses: [3],
+      sortBy: "scheduledDate",
+      sortDir: "asc",
+    });
+
+    const searchParams = apiGet.mock.calls[0]?.[1]?.searchParams as URLSearchParams;
+    expect(String(searchParams)).toBe(
+      "page=0&pageSize=50&unscheduledOnly=true&statuses=3&sortBy=scheduledDate&sortDir=asc",
+    );
+    expect(searchParams.get("unscheduledOnly")).toBe("true");
+    expect(searchParams.has("datePreset")).toBe(false);
+    expect(searchParams.has("dateFrom")).toBe(false);
+    expect(searchParams.has("dateTo")).toBe(false);
+  });
+
+  it("keeps the legacy wire shape (datePreset, no unscheduledOnly) when the toggle is off", async () => {
+    await workOrdersApi.searchBoard({
+      datePreset: "Custom",
+      dateFrom: "2000-01-01",
+      dateTo: "2099-12-31",
+      page: 0,
+      pageSize: 50,
+    });
+
+    const searchParams = apiGet.mock.calls[0]?.[1]?.searchParams as URLSearchParams;
+    expect(searchParams.has("unscheduledOnly")).toBe(false);
+    expect(searchParams.get("datePreset")).toBe("Custom");
+    expect(searchParams.get("dateFrom")).toBe("2000-01-01");
+    expect(searchParams.get("dateTo")).toBe("2099-12-31");
+  });
+});
+
+describe("workOrdersApi.findByWoNumber", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+  });
+
+  it("searches globally without the active board filters", async () => {
+    apiGet.mockResolvedValue({
+      items: [
+        {
+          id: 505,
+          woNumber: "10000001235",
+          lifecycleStatusLabel: "Incomplete",
+        },
+      ],
+      totalCount: 1,
+      page: 0,
+      pageSize: 100,
+    });
+
+    const result = await workOrdersApi.findByWoNumber("10000001235");
+
+    expect(apiGet).toHaveBeenCalledWith(
+      API_PATHS.workOrder.boardSearch,
+      expect.objectContaining({
+        searchParams: expect.any(URLSearchParams),
+      }),
+    );
+    const searchParams = apiGet.mock.calls[0]?.[1]?.searchParams as URLSearchParams;
+    expect(Object.fromEntries(searchParams)).toEqual({
+      search: "10000001235",
+      page: "0",
+      pageSize: "100",
+    });
+    expect(result).toMatchObject({ id: 505, woNumber: "10000001235" });
+  });
+
+  it("pages through fuzzy search until the exact WO number is found", async () => {
+    apiGet
+      .mockResolvedValueOnce({
+        items: Array.from({ length: 100 }, (_, index) => ({
+          id: index + 1,
+          woNumber: `fuzzy-match-${index}`,
+          lifecycleStatusLabel: "Incomplete",
+        })),
+        totalCount: 101,
+        page: 0,
+        pageSize: 100,
+      })
+      .mockResolvedValueOnce({
+        items: [
+          {
+            id: 999,
+            woNumber: "10000009999",
+            lifecycleStatusLabel: "Incomplete",
+          },
+        ],
+        totalCount: 101,
+        page: 1,
+        pageSize: 100,
+      });
+
+    const result = await workOrdersApi.findByWoNumber("10000009999");
+
+    expect(apiGet).toHaveBeenCalledTimes(2);
+    const secondParams = apiGet.mock.calls[1]?.[1]?.searchParams as URLSearchParams;
+    expect(Object.fromEntries(secondParams)).toMatchObject({
+      search: "10000009999",
+      page: "1",
+      pageSize: "100",
+    });
+    expect(result).toMatchObject({ id: 999, woNumber: "10000009999" });
+  });
+
+  it("skips remote search for empty WO numbers", async () => {
+    const result = await workOrdersApi.findByWoNumber("   ");
+    expect(apiGet).not.toHaveBeenCalled();
+    expect(result).toBeUndefined();
+  });
+
+  it("finds a one-character WO number duplicate outside loaded board rows", async () => {
+    apiGet.mockResolvedValue({
+      items: [
+        {
+          id: 7,
+          woNumber: "9",
+          lifecycleStatusLabel: "Incomplete",
+        },
+      ],
+      totalCount: 1,
+      page: 0,
+      pageSize: 100,
+    });
+
+    const result = await workOrdersApi.findByWoNumber("9");
+
+    expect(apiGet).toHaveBeenCalledTimes(1);
+    const searchParams = apiGet.mock.calls[0]?.[1]?.searchParams as URLSearchParams;
+    expect(Object.fromEntries(searchParams)).toEqual({
+      search: "9",
+      page: "0",
+      pageSize: "100",
+    });
+    expect(result).toMatchObject({ id: 7, woNumber: "9" });
+  });
+
+  it("throws when the safety page limit is hit before exhausting results", async () => {
+    apiGet.mockResolvedValue({
+      items: Array.from({ length: 100 }, (_, index) => ({
+        id: index + 1,
+        woNumber: `fuzzy-match-${index}`,
+        lifecycleStatusLabel: "Incomplete",
+      })),
+      totalCount: 10_000,
+      page: 0,
+      pageSize: 100,
+    });
+
+    await expect(workOrdersApi.findByWoNumber("10000005555")).rejects.toThrow(/safety page limit/i);
+    expect(apiGet).toHaveBeenCalledTimes(50);
+  });
+
+  it("returns undefined after exhausting all fuzzy search pages", async () => {
+    apiGet
+      .mockResolvedValueOnce({
+        items: Array.from({ length: 100 }, (_, index) => ({
+          id: index + 1,
+          woNumber: `fuzzy-match-${index}`,
+          lifecycleStatusLabel: "Incomplete",
+        })),
+        totalCount: 150,
+        page: 0,
+        pageSize: 100,
+      })
+      .mockResolvedValueOnce({
+        items: Array.from({ length: 50 }, (_, index) => ({
+          id: index + 101,
+          woNumber: `fuzzy-match-${index + 100}`,
+          lifecycleStatusLabel: "Incomplete",
+        })),
+        totalCount: 150,
+        page: 1,
+        pageSize: 100,
+      });
+
+    const result = await workOrdersApi.findByWoNumber("10000005555");
+
+    expect(apiGet).toHaveBeenCalledTimes(2);
+    expect(result).toBeUndefined();
+  });
+});
+
+describe("workOrdersApi.patchBoardField", () => {
+  beforeEach(() => {
+    apiPatchFn.mockReset();
+  });
+
+  it("PATCHes board field and maps row with versions", async () => {
+    apiPatchFn.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        id: 10,
+        siteCode: "BK5",
+        lifecycleStatusLabel: "Scheduled",
+        rowVersion: "AAAAAAAB",
+        dispatchRowVersion: null,
+        primaryDispatchId: null,
+        vendorId: null,
+      }),
+    });
+
+    const row = await workOrdersApi.patchBoardField(10, {
+      field: "siteCode",
+      value: "BK5",
+      workOrderVersion: "AAAAAAA=",
+    });
+
+    expect(apiPatchFn).toHaveBeenCalledWith(API_PATHS.workOrder.boardPatch(10), {
+      json: {
+        field: "siteCode",
+        value: "BK5",
+        workOrderVersion: "AAAAAAA=",
+      },
+      throwHttpErrors: false,
+    });
+    expect(row.site).toBe("BK5");
+    expect(row.rowVersion).toBe("AAAAAAAB");
+  });
+
+  it("throws BoardPatchConflictError with currentState on 409", async () => {
+    apiPatchFn.mockResolvedValue({
+      ok: false,
+      status: 409,
+      json: async () => ({
+        message: "The record was modified by another user. Refresh and retry.",
+        currentState: {
+          id: 10,
+          siteCode: "OTHER",
+          rowVersion: "NEWVER==",
+          lifecycleStatusLabel: "Scheduled",
+        },
+      }),
+    });
+
+    const { BoardPatchConflictError } =
+      await import("@/domain/work-orders/errors/board-patch-errors");
+
+    await expect(
+      workOrdersApi.patchBoardField(10, {
+        field: "siteCode",
+        value: "BK5",
+        workOrderVersion: "STALE==",
+      }),
+    ).rejects.toBeInstanceOf(BoardPatchConflictError);
+  });
+
+  it("throws BoardPatchValidationError with DuplicateWoNumber code on 422", async () => {
+    apiPatchFn.mockResolvedValue({
+      ok: false,
+      status: 422,
+      json: async () => ({
+        code: "DuplicateWoNumber",
+        message: "WO number already exists.",
+      }),
+    });
+
+    await expect(
+      workOrdersApi.patchBoardField(10, {
+        field: "woNumber",
+        value: "12345678901",
+        workOrderVersion: "AAAAAAA=",
+      }),
+    ).rejects.toMatchObject({
+      name: "BoardPatchValidationError",
+      code: "DuplicateWoNumber",
+    });
+  });
+});
+
+describe("workOrdersApi.createComment", () => {
+  beforeEach(() => {
+    apiPost.mockReset();
+    apiPost.mockResolvedValue({
+      id: 1,
+      authorId: "guid",
+      authorName: "Admin Test",
+      text: "Called vendor",
+      time: "2026-06-01T12:00:00.0000000Z",
+      documents: null,
+    });
+  });
+
+  it("POSTs { text } to workorders/{id}/comments", async () => {
+    const comment = await workOrdersApi.createComment(55, "Called vendor");
+
+    expect(apiPost).toHaveBeenCalledWith(API_PATHS.workOrder.comments(55), {
+      text: "Called vendor",
+    });
+    expect(comment.commenttext).toBe("Called vendor");
+    expect(comment.userName).toBe("Admin Test");
+    expect(comment.authorId).toBe("guid");
+    expect(comment.createdDate).toBe("2026-06-01T12:00:00.0000000Z");
+  });
+
+  it("POSTs mentions when provided", async () => {
+    await workOrdersApi.createComment(55, "Ping @[u1:Jane]", ["u1"]);
+
+    expect(apiPost).toHaveBeenCalledWith(API_PATHS.workOrder.comments(55), {
+      text: "Ping @[u1:Jane]",
+      mentions: ["u1"],
+    });
+  });
+});
+
+describe("workOrdersApi.updateComment", () => {
+  beforeEach(() => {
+    apiPatchFn.mockReset();
+  });
+
+  it("PATCHes JSON { text } to workorders/{id}/comments/{commentId}", async () => {
+    apiPatchFn.mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: async () => ({
+        id: 3,
+        authorId: "guid",
+        authorName: "Admin Test",
+        text: "Updated text",
+        time: "2026-06-01T12:00:00.0000000Z",
+        documents: null,
+      }),
+    });
+
+    const comment = await workOrdersApi.updateComment(55, 3, "Updated text");
+
+    expect(apiPatchFn).toHaveBeenCalledWith(API_PATHS.workOrder.commentItem(55, 3), {
+      json: { text: "Updated text" },
+      throwHttpErrors: false,
+    });
+    expect(comment.commenttext).toBe("Updated text");
+    expect(comment.userName).toBe("Admin Test");
+    expect(comment.authorId).toBe("guid");
+  });
+
+  it("accepts 204 No Content without a response body", async () => {
+    apiPatchFn.mockResolvedValue({
+      ok: true,
+      status: 204,
+      json: async () => {
+        throw new Error("no body");
+      },
+    });
+
+    const comment = await workOrdersApi.updateComment(2, 2, "zzzzzzzzzzzzzzzzaaaa");
+
+    expect(apiPatchFn).toHaveBeenCalledWith(API_PATHS.workOrder.commentItem(2, 2), {
+      json: { text: "zzzzzzzzzzzzzzzzaaaa" },
+      throwHttpErrors: false,
+    });
+    expect(comment.id).toBe(2);
+    expect(comment.commenttext).toBe("zzzzzzzzzzzzzzzzaaaa");
+  });
+});
+
+describe("workOrdersApi.uploadMedia", () => {
+  beforeEach(() => {
+    uploadFormFn.mockReset();
+  });
+
+  it("POSTs multipart FormData with file and category, forwarding progress and signal", async () => {
+    uploadFormFn.mockResolvedValue({
+      ok: true,
+      status: 201,
+      data: {
+        id: 12,
+        category: 3,
+        url: "https://cdn.example.com/extra.jpg",
+        fileName: "extra.jpg",
+        uploadedAt: "2026-07-16T12:00:00Z",
+        isLegacy: false,
+      },
+    });
+
+    const file = new File(["bytes"], "extra.jpg", { type: "image/jpeg" });
+    const onProgress = vi.fn();
+    const signal = new AbortController().signal;
+    const item = await workOrdersApi.uploadMedia(10, file, "Extra", { signal, onProgress });
+
+    expect(uploadFormFn).toHaveBeenCalledWith(API_PATHS.workOrder.media(10), expect.any(FormData), {
+      signal,
+      onProgress,
+    });
+    const body = uploadFormFn.mock.calls[0]?.[1] as FormData;
+    expect(body.get("category")).toBe("Extra");
+    expect(body.get("file")).toBeInstanceOf(File);
+    expect(item.id).toBe("12");
+    expect(item.category).toBe("Extra");
+  });
+
+  it("does not upload through Ky, whose streamed body breaks HTTP/1.1 transports", async () => {
+    uploadFormFn.mockResolvedValue({ ok: true, status: 200, data: { id: 12, category: 3 } });
+
+    await workOrdersApi.uploadMedia(10, new File(["x"], "a.jpg", { type: "image/jpeg" }), "Before");
+
+    expect(apiPostFn).not.toHaveBeenCalled();
+  });
+
+  it("throws BoardPatchValidationError on 422", async () => {
+    uploadFormFn.mockResolvedValue({
+      ok: false,
+      status: 422,
+      data: {
+        code: "ReadOnly",
+        message: "Work order is read-only.",
+      },
+    });
+
+    const { BoardPatchValidationError } =
+      await import("@/domain/work-orders/errors/board-patch-errors");
+
+    await expect(
+      workOrdersApi.uploadMedia(10, new File(["x"], "a.jpg", { type: "image/jpeg" }), "Before"),
+    ).rejects.toMatchObject({
+      name: "BoardPatchValidationError",
+      code: "ReadOnly",
+    });
+    expect(BoardPatchValidationError).toBeTruthy();
+  });
+});
+
+describe("workOrdersApi.updateMediaCategory", () => {
+  beforeEach(() => {
+    apiPatchFn.mockReset();
+  });
+
+  it("PATCHes FormData with category and workOrderVersion", async () => {
+    apiPatchFn.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        id: 12,
+        category: 1,
+        url: "https://cdn.example.com/before.jpg",
+        fileName: "before.jpg",
+        uploadedAt: "2026-07-16T12:00:00Z",
+        isLegacy: false,
+      }),
+    });
+
+    const item = await workOrdersApi.updateMediaCategory(10, 12, "Before", "AAAAAAA=");
+
+    expect(apiPatchFn).toHaveBeenCalledWith(
+      API_PATHS.workOrder.mediaItem(10, 12),
+      expect.objectContaining({ throwHttpErrors: false }),
+    );
+    const body = apiPatchFn.mock.calls[0]?.[1]?.body as FormData;
+    expect(body.get("category")).toBe("Before");
+    expect(body.get("workOrderVersion")).toBe("AAAAAAA=");
+    expect(item.category).toBe("Before");
+  });
+
+  it("rejects missing workOrderVersion client-side", async () => {
+    const { BoardPatchValidationError } =
+      await import("@/domain/work-orders/errors/board-patch-errors");
+
+    await expect(workOrdersApi.updateMediaCategory(10, 12, "After", "")).rejects.toMatchObject({
+      name: "BoardPatchValidationError",
+      code: "WorkOrderVersionRequired",
+    });
+    expect(apiPatchFn).not.toHaveBeenCalled();
+    expect(BoardPatchValidationError).toBeTruthy();
+  });
+});
+
+describe("workOrdersApi.deleteMedia", () => {
+  beforeEach(() => {
+    apiDeleteFn.mockReset();
+  });
+
+  it("DELETEs media item with workOrderVersion query and accepts 204", async () => {
+    apiDeleteFn.mockResolvedValue({
+      ok: true,
+      status: 204,
+      json: async () => {
+        throw new Error("no body");
+      },
+    });
+
+    await workOrdersApi.deleteMedia(10, 12, "AAAAAAA=");
+
+    expect(apiDeleteFn).toHaveBeenCalledWith(API_PATHS.workOrder.mediaItem(10, 12), {
+      searchParams: { workOrderVersion: "AAAAAAA=" },
+      throwHttpErrors: false,
+    });
+  });
+
+  it("rejects missing workOrderVersion client-side", async () => {
+    const { BoardPatchValidationError } =
+      await import("@/domain/work-orders/errors/board-patch-errors");
+
+    await expect(workOrdersApi.deleteMedia(10, 12, "")).rejects.toMatchObject({
+      name: "BoardPatchValidationError",
+      code: "WorkOrderVersionRequired",
+    });
+    expect(apiDeleteFn).not.toHaveBeenCalled();
+    expect(BoardPatchValidationError).toBeTruthy();
+  });
+
+  it("rejects legacy media ids client-side", async () => {
+    const { BoardPatchValidationError } =
+      await import("@/domain/work-orders/errors/board-patch-errors");
+
+    await expect(workOrdersApi.deleteMedia(10, -1, "AAAAAAA=")).rejects.toBeInstanceOf(
+      BoardPatchValidationError,
+    );
+    expect(apiDeleteFn).not.toHaveBeenCalled();
+  });
+});
+
+describe("workOrdersApi.uploadCompletionDoc", () => {
+  beforeEach(() => {
+    apiPostFn.mockReset();
+  });
+
+  it("POSTs FormData with file and workOrderVersion", async () => {
+    apiPostFn.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        docStatus: 1,
+        template: null,
+        signOffName: "Jane Doe",
+        signOffAttachment: "https://cdn.example.com/signed.pdf",
+        signOffSignature: null,
+        dispatchSignoffs: [],
+      }),
+    });
+
+    const file = new File(["%PDF"], "signed.pdf", { type: "application/pdf" });
+    const completion = await workOrdersApi.uploadCompletionDoc(10, {
+      file,
+      workOrderVersion: "AAAAAAAB",
+      signOffName: "Jane Doe",
+    });
+
+    const body = apiPostFn.mock.calls[0]?.[1]?.body as FormData;
+    expect(apiPostFn).toHaveBeenCalledWith(
+      API_PATHS.workOrder.completionDoc(10),
+      expect.objectContaining({ throwHttpErrors: false }),
+    );
+    expect(body.get("workOrderVersion")).toBe("AAAAAAAB");
+    expect(body.get("signOffName")).toBe("Jane Doe");
+    expect(body.get("file")).toBeInstanceOf(File);
+    expect(completion.docStatus).toBe("Yes");
+    expect(completion.signOffAttachment).toBe("https://cdn.example.com/signed.pdf");
+  });
+
+  it("throws BoardPatchConflictError on 409", async () => {
+    apiPostFn.mockResolvedValue({
+      ok: false,
+      status: 409,
+      json: async () => ({
+        code: "ConcurrencyConflict",
+        message: "The record was modified by another user. Refresh and retry.",
+      }),
+    });
+
+    const { BoardPatchConflictError } =
+      await import("@/domain/work-orders/errors/board-patch-errors");
+
+    await expect(
+      workOrdersApi.uploadCompletionDoc(10, {
+        file: new File(["%PDF"], "signed.pdf", { type: "application/pdf" }),
+        workOrderVersion: "STALE==",
+      }),
+    ).rejects.toBeInstanceOf(BoardPatchConflictError);
+  });
+});
+
+describe("workOrdersApi.fetchVendorsDropdown", () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiGet.mockResolvedValue([
+      {
+        id: 7,
+        companyName: "Cool Air LLC",
+        contactName: "Ana Silva",
+        tradeSpecialties: "HVAC",
+        address: "100 Main St, Miami, FL",
+        distanceMiles: 4.2,
+      },
+    ]);
+  });
+
+  it("calls vendors/Dropdown without filters", async () => {
+    const vendors = await workOrdersApi.fetchVendorsDropdown();
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.vendor.dropdown, {
+      searchParams: undefined,
+    });
+    expect(vendors).toEqual([
+      {
+        id: 7,
+        companyName: "Cool Air LLC",
+        contactName: "Ana Silva",
+        tradeSpecialties: "HVAC",
+        address: "100 Main St, Miami, FL",
+        distanceMiles: 4.2,
+      },
+    ]);
+  });
+
+  it("passes optional trade and siteZip query params", async () => {
+    await workOrdersApi.fetchVendorsDropdown("HVAC", "33101");
+
+    expect(apiGet).toHaveBeenCalledWith(API_PATHS.vendor.dropdown, {
+      searchParams: { trade: "HVAC", siteZip: "33101" },
+    });
+  });
+});
+
+describe("API_PATHS.workOrder.mediaContent", () => {
+  it("builds the authorized media content path", () => {
+    expect(API_PATHS.workOrder.mediaContent(10, 12)).toBe("workorders/10/media/12/content");
+  });
+});
+
+describe("workOrdersApi.getMediaContent", () => {
+  beforeEach(() => {
+    apiGetFn.mockReset();
+  });
+
+  it("returns the response blob on 200", async () => {
+    const blob = new Blob(["pdf-bytes"], { type: "application/pdf" });
+    apiGetFn.mockResolvedValue({
+      ok: true,
+      status: 200,
+      blob: async () => blob,
+    });
+
+    const result = await workOrdersApi.getMediaContent(10, 12);
+
+    expect(result).toBe(blob);
+    expect(apiGetFn).toHaveBeenCalledWith(
+      API_PATHS.workOrder.mediaContent(10, 12),
+      expect.objectContaining({ credentials: "include", throwHttpErrors: false }),
+    );
+  });
+
+  it("throws ApiError on 404 without inventing a filename", async () => {
+    apiGetFn.mockResolvedValue({
+      ok: false,
+      status: 404,
+      json: async () => ({ fileName: "secret.pdf" }),
+    });
+
+    await expect(workOrdersApi.getMediaContent(10, 12)).rejects.toMatchObject({
+      name: "ApiError",
+      status: 404,
+      message: "The requested resource was not found.",
+    });
+  });
+});
diff --git a/src/test/domain/work-orders/dashboard-drilldown-params.test.ts b/src/test/domain/work-orders/dashboard-drilldown-params.test.ts
new file mode 100644
index 00000000..8ff30f72
--- /dev/null
+++ b/src/test/domain/work-orders/dashboard-drilldown-params.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import { parseDashboardDrilldownParams } from "@/domain/work-orders/utils/dashboard-drilldown-params";
+import { avetaPendingDrilldownSearch } from "@/domain/dashboard/utils/work-order-drilldown-links";
+
+describe("parseDashboardDrilldownParams", () => {
+  it("returns null when no recognized param is present", () => {
+    expect(parseDashboardDrilldownParams(new URLSearchParams())).toBeNull();
+    expect(
+      parseDashboardDrilldownParams(new URLSearchParams({ dateFrom: "2026-09-16" })),
+    ).toBeNull();
+    expect(parseDashboardDrilldownParams(new URLSearchParams({ aveta: "0" }))).toBeNull();
+  });
+
+  it("maps dates to a custom advanced-filter range", () => {
+    const filters = parseDashboardDrilldownParams(
+      new URLSearchParams({ dateFrom: "2026-09-14", dateTo: "2026-09-18" }),
+    );
+
+    expect(filters).not.toBeNull();
+    expect(filters?.dateRange).toBe("custom");
+    expect(filters?.customFrom).toBe("2026-09-14");
+    expect(filters?.customTo).toBe("2026-09-18");
+  });
+
+  it("parses the Aveta Pending drilldown and drops unknown statuses", () => {
+    const params = avetaPendingDrilldownSearch("2026-09-16");
+    params.append("statuses", "NotAStatus");
+    const filters = parseDashboardDrilldownParams(params);
+
+    expect(filters).not.toBeNull();
+    expect(filters?.avetaOnly).toBe(true);
+    // The Aveta drilldown no longer sends `docs=No` (completion-doc status), so
+    // no completion-document filter is applied.
+    expect(filters?.docs.size).toBe(0);
+    expect(filters?.statuses).not.toBeNull();
+    expect([...(filters?.statuses ?? [])]).not.toContain("Completed");
+    expect([...(filters?.statuses ?? [])]).not.toContain("NotAStatus");
+    expect(filters?.statuses.has("Scheduled")).toBe(true);
+    expect(filters?.statuses.has("Pending Quote")).toBe(true);
+  });
+
+  it("parses dispatcher and uplift params", () => {
+    const filters = parseDashboardDrilldownParams(
+      new URLSearchParams({
+        dispatchers: " 12 , 13",
+        upliftStatuses: "pending,bogus",
+      }),
+    );
+
+    expect(filters?.dispatchers).toEqual(new Set(["12", "13"]));
+    expect(filters?.hasUplift).toBe(true);
+    expect(filters?.upliftStatuses).toEqual(new Set(["pending"]));
+  });
+
+  it("parses the region drilldown and drops unknown region names", () => {
+    const filters = parseDashboardDrilldownParams(
+      new URLSearchParams({ regions: "California, Atlantis" }),
+    );
+
+    expect(filters?.regions).toEqual(new Set(["California"]));
+  });
+
+  it("rejects partial or malformed date ranges", () => {
+    expect(
+      parseDashboardDrilldownParams(
+        new URLSearchParams({ dateFrom: "2026-9-16", dateTo: "2026-09-18" }),
+      ),
+    ).toBeNull();
+  });
+});
diff --git a/src/test/domain/work-orders/errors/board-patch-errors.test.ts b/src/test/domain/work-orders/errors/board-patch-errors.test.ts
new file mode 100644
index 00000000..d38217cd
--- /dev/null
+++ b/src/test/domain/work-orders/errors/board-patch-errors.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import {
+  BOARD_PATCH_CONFLICT_MESSAGE,
+  BOARD_PATCH_FAILED_MESSAGE,
+  BoardPatchConflictError,
+  BoardPatchValidationError,
+  DUPLICATE_WO_NUMBER_MESSAGE,
+  boardPatchErrorMessage,
+} from "@/domain/work-orders/errors/board-patch-errors";
+
+describe("boardPatchErrorMessage", () => {
+  it("maps a DuplicateWoNumber validation error to the duplicate-WO product copy", () => {
+    const error = new BoardPatchValidationError("DuplicateWoNumber", "WO number already exists.");
+
+    expect(boardPatchErrorMessage(error)).toBe(DUPLICATE_WO_NUMBER_MESSAGE);
+  });
+
+  it("never leaks backend validation text for unknown codes", () => {
+    const error = new BoardPatchValidationError("SomethingElse", "vendorId is required.");
+
+    expect(boardPatchErrorMessage(error)).toBe(BOARD_PATCH_FAILED_MESSAGE);
+  });
+
+  it("maps a conflict error to the concurrent-edit copy", () => {
+    const error = new BoardPatchConflictError("stale", null);
+
+    expect(boardPatchErrorMessage(error)).toBe(BOARD_PATCH_CONFLICT_MESSAGE);
+  });
+});
diff --git a/src/test/domain/work-orders/flag-colors.test.ts b/src/test/domain/work-orders/flag-colors.test.ts
new file mode 100644
index 00000000..15ba9909
--- /dev/null
+++ b/src/test/domain/work-orders/flag-colors.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { flagColorName, flagTriggerAccessibleName } from "@/domain/work-orders/flag-colors";
+
+describe("flag color accessible names", () => {
+  it("resolves palette hex values to names", () => {
+    expect(flagColorName("#EF4444")).toBe("Red");
+    expect(flagColorName("#ef4444")).toBe("Red");
+    expect(flagColorName("#3B82F6")).toBe("Blue");
+  });
+
+  it("returns null for empty or unknown values", () => {
+    expect(flagColorName(null)).toBeNull();
+    expect(flagColorName(undefined)).toBeNull();
+    expect(flagColorName("")).toBeNull();
+    expect(flagColorName("#000000")).toBeNull();
+  });
+
+  it("builds trigger names that are not color-only", () => {
+    expect(flagTriggerAccessibleName(null)).toBe("Add flag");
+    expect(flagTriggerAccessibleName("#EF4444")).toBe("Red flag");
+    expect(flagTriggerAccessibleName("#000000")).toBe("Flagged");
+  });
+});
diff --git a/src/test/domain/work-orders/mappers/additional-contacts-mapper.test.ts b/src/test/domain/work-orders/mappers/additional-contacts-mapper.test.ts
new file mode 100644
index 00000000..9b76a8b5
--- /dev/null
+++ b/src/test/domain/work-orders/mappers/additional-contacts-mapper.test.ts
@@ -0,0 +1,87 @@
+import { describe, expect, it } from "vitest";
+import {
+  isIncompleteAdditionalContact,
+  normalizeAdditionalContacts,
+  readAdditionalContacts,
+  serializeAdditionalContactsForPatch,
+} from "@/domain/work-orders/mappers/additional-contacts-mapper";
+
+describe("readAdditionalContacts", () => {
+  it("returns [] when field is missing", () => {
+    expect(readAdditionalContacts({ id: 1 })).toEqual([]);
+  });
+
+  it("maps camelCase and PascalCase arrays", () => {
+    expect(
+      readAdditionalContacts({
+        additionalContacts: [{ name: "Alex", phone: "555-0100", notes: "Gate code" }],
+      }),
+    ).toEqual([{ name: "Alex", phone: "555-0100", notes: "Gate code" }]);
+
+    expect(
+      readAdditionalContacts({
+        AdditionalContacts: [{ Name: "Sam", Phone: "555-0200" }],
+      }),
+    ).toEqual([{ name: "Sam", phone: "555-0200" }]);
+  });
+
+  it("drops empty rows", () => {
+    expect(
+      readAdditionalContacts({
+        additionalContacts: [
+          { name: "", phone: "" },
+          { name: "Pat", phone: "111" },
+        ],
+      }),
+    ).toEqual([{ name: "Pat", phone: "111" }]);
+  });
+});
+
+describe("normalizeAdditionalContacts", () => {
+  it("trims and omits empty notes", () => {
+    expect(
+      normalizeAdditionalContacts([
+        { name: " Alex ", phone: " 555 ", notes: "  " },
+        { name: "", phone: "" },
+      ]),
+    ).toEqual([{ name: "Alex", phone: "555" }]);
+  });
+
+  it("returns undefined when all rows are empty", () => {
+    expect(normalizeAdditionalContacts([{ name: "", phone: "" }])).toBeUndefined();
+  });
+
+  it("drops name-only and phone-only rows", () => {
+    expect(
+      normalizeAdditionalContacts([
+        { name: "Alex", phone: "" },
+        { name: "", phone: "555-0100" },
+        { name: "Pat", phone: "111" },
+      ]),
+    ).toEqual([{ name: "Pat", phone: "111" }]);
+  });
+});
+
+describe("isIncompleteAdditionalContact", () => {
+  it("is true when exactly one of name or phone is filled", () => {
+    expect(isIncompleteAdditionalContact({ name: "Alex", phone: "" })).toBe(true);
+    expect(isIncompleteAdditionalContact({ name: "", phone: "555" })).toBe(true);
+    expect(isIncompleteAdditionalContact({ name: "Alex", phone: "555" })).toBe(false);
+    expect(isIncompleteAdditionalContact({ name: "", phone: "" })).toBe(false);
+  });
+});
+
+describe("serializeAdditionalContactsForPatch", () => {
+  it("JSON-stringifies normalized contacts for board PATCH", () => {
+    expect(
+      serializeAdditionalContactsForPatch([
+        { name: "Alex", phone: "555-0100" },
+        { name: "", phone: "" },
+      ]),
+    ).toBe('[{"name":"Alex","phone":"555-0100"}]');
+  });
+
+  it("serializes empty array when nothing to persist", () => {
+    expect(serializeAdditionalContactsForPatch([])).toBe("[]");
+  });
+});
diff --git a/src/test/domain/work-orders/mappers/completed-date-board-column.test.ts b/src/test/domain/work-orders/mappers/completed-date-board-column.test.ts
new file mode 100644
index 00000000..1820df72
--- /dev/null
+++ b/src/test/domain/work-orders/mappers/completed-date-board-column.test.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { WO_TABLE_COLS } from "@/app/(protected)/workorders/_components/list/table/wo-table-cols";
+import { expandScalarBoardOps } from "@/domain/work-orders/mappers/expand-scalar-board-ops";
+import { mapWorkOrderTableRow } from "@/domain/work-orders/mappers/work-order-table-row-mapper";
+
+describe("COMPLETED DATE board column wiring", () => {
+  it("includes COMPLETED DATE column between STATUS and COMP DOC", () => {
+    const keys = WO_TABLE_COLS.map((col) => col.key);
+    expect(keys).toContain("completed");
+    expect(keys.indexOf("completed")).toBe(keys.indexOf("status") + 1);
+    expect(keys.indexOf("completed")).toBeLessThan(keys.indexOf("doc"));
+  });
+
+  it("expands completedDate patch to board field op", () => {
+    const ops = expandScalarBoardOps({ completedDate: "2026-07-30" });
+    expect(ops).toEqual([{ field: "completedDate", value: "2026-07-30" }]);
+  });
+
+  it("maps completedDate returned by a board GET row", () => {
+    const row = mapWorkOrderTableRow({
+      id: 42,
+      completedDate: "2026-07-30T00:00:00Z",
+    });
+
+    expect(row.completedDate).toBe("2026-07-30");
+  });
+});
diff --git a/src/test/domain/work-orders/mappers/vendor-dropdown-mapper.test.ts b/src/test/domain/work-orders/mappers/vendor-dropdown-mapper.test.ts
new file mode 100644
index 00000000..47d7e120
--- /dev/null
+++ b/src/test/domain/work-orders/mappers/vendor-dropdown-mapper.test.ts
@@ -0,0 +1,84 @@
+import { describe, expect, it } from "vitest";
+import { mapVendorDropdownItem } from "@/domain/work-orders/mappers/work-order-mapper";
+import {
+  formatVendorDistance,
+  formatVendorTechnicianLabel,
+} from "@/domain/work-orders/utils/vendor-dropdown-label";
+
+describe("mapVendorDropdownItem", () => {
+  it("maps camelCase dropdown payload", () => {
+    expect(
+      mapVendorDropdownItem({
+        id: 7,
+        companyName: "Cool Air LLC",
+        contactName: "Ana Silva",
+        tradeSpecialties: "HVAC",
+        address: "100 Main St",
+        distanceMiles: 4.2,
+      }),
+    ).toEqual({
+      id: 7,
+      companyName: "Cool Air LLC",
+      contactName: "Ana Silva",
+      tradeSpecialties: "HVAC",
+      address: "100 Main St",
+      distanceMiles: 4.2,
+    });
+  });
+
+  it("maps PascalCase dropdown payload", () => {
+    expect(
+      mapVendorDropdownItem({
+        Id: "v-1",
+        CompanyName: "Rooter Pros",
+        ContactName: "Jon",
+        TradeSpecialties: "Plumbing",
+        Address: "200 Ocean Dr",
+        DistanceMiles: "12",
+      }),
+    ).toEqual({
+      id: "v-1",
+      companyName: "Rooter Pros",
+      contactName: "Jon",
+      tradeSpecialties: "Plumbing",
+      address: "200 Ocean Dr",
+      distanceMiles: 12,
+    });
+  });
+});
+
+describe("formatVendorTechnicianLabel", () => {
+  it("formats contactName · companyName", () => {
+    expect(
+      formatVendorTechnicianLabel({
+        id: 1,
+        companyName: "Gateway Plumbing",
+        contactName: "Adam Whyte",
+        tradeSpecialties: "",
+        address: "",
+        distanceMiles: null,
+      }),
+    ).toBe("Adam Whyte · Gateway Plumbing");
+  });
+
+  it("falls back to company when contact is missing", () => {
+    expect(
+      formatVendorTechnicianLabel({
+        id: 2,
+        companyName: "Gateway Plumbing",
+        contactName: "",
+        tradeSpecialties: "",
+        address: "",
+        distanceMiles: null,
+      }),
+    ).toBe("Gateway Plumbing");
+  });
+});
+
+describe("formatVendorDistance", () => {
+  it("formats miles", () => {
+    expect(formatVendorDistance(4.2)).toBe("4.2 mi");
+    expect(formatVendorDistance(5)).toBe("5 mi");
+    expect(formatVendorDistance(null)).toBe("");
+  });
+});
diff --git a/src/test/domain/work-orders/mappers/wizard-draft-mapper.test.ts b/src/test/domain/work-orders/mappers/wizard-draft-mapper.test.ts
new file mode 100644
index 00000000..a086e5f5
--- /dev/null
+++ b/src/test/domain/work-orders/mappers/wizard-draft-mapper.test.ts
@@ -0,0 +1,253 @@
+import { describe, expect, it } from "vitest";
+import { mapWizardDraftToFormValues } from "@/domain/work-orders/mappers/wizard-draft-mapper";
+import {
+  EMPTY_WIZARD_DRAFT,
+  canContinueWizardStep1,
+  canContinueWizardStep2,
+  canCreateWorkOrderFromWizard,
+  isWizardStepValid,
+  isWizardWoNumberValid,
+  wizardStep1ContinueHint,
+  wizardStep2ContinueHint,
+} from "@/domain/work-orders/types/work-order-wizard";
+
+describe("mapWizardDraftToFormValues", () => {
+  it("maps minimal draft with type and site to valid form values", () => {
+    const draft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM" as const,
+      locationId: "42",
+      locationName: "DFW8 · Dallas, TX",
+      woNumber: "24818",
+      assigneeName: "Sarah Chen",
+      status: "Incomplete" as const,
+    };
+
+    const values = mapWizardDraftToFormValues(draft);
+
+    expect(values.title).toBe("PM — #24818");
+    expect(values.workOrderNumber).toBe("24818");
+    expect(values.locationId).toBe("42");
+    expect(values.assignedTo).toBe("Sarah Chen");
+    expect(values.status).toBe("Open");
+    expect(values.priority).toBe("Sev 3");
+    expect(values.source).toBe("PM");
+    expect(values.createdDate).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+  });
+
+  it("maps emergency type to Sev 1 priority", () => {
+    const values = mapWizardDraftToFormValues({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "Emergency",
+      locationId: "1",
+      locationName: "Site A",
+    });
+
+    expect(values.priority).toBe("Sev 1");
+    expect(values.title).toBe("Emergency — Site A");
+  });
+
+  it("includes appointment and notes in description", () => {
+    const values = mapWizardDraftToFormValues({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "Reactive",
+      locationId: "1",
+      locationName: "Site A",
+      apptStart: "09:00",
+      apptEnd: "11:00",
+      pocNotes: "Call ahead",
+      vendorName: "Roto-Rooter",
+      vendorNotes: "Prefers morning",
+    });
+
+    expect(values.description).toContain("Appt:");
+    expect(values.description).toContain("POC notes: Call ahead");
+    expect(values.description).toContain("Vendor: Roto-Rooter");
+  });
+});
+
+describe("wizard step validation", () => {
+  it("allows step 1 with a blank woNumber for backend SH generation", () => {
+    expect(canContinueWizardStep1(EMPTY_WIZARD_DRAFT)).toBe(true);
+    expect(isWizardStepValid(1, EMPTY_WIZARD_DRAFT)).toBe(true);
+  });
+
+  it("allows step 1 without type when woNumber is set", () => {
+    const draft = { ...EMPTY_WIZARD_DRAFT, woNumber: "12345" };
+    expect(canContinueWizardStep1(draft)).toBe(true);
+    expect(isWizardStepValid(1, draft)).toBe(true);
+  });
+
+  it("allows step 1 without woNumber when type is set", () => {
+    const draft = { ...EMPTY_WIZARD_DRAFT, type: "PM" as const };
+    expect(canContinueWizardStep1(draft)).toBe(true);
+    expect(isWizardStepValid(1, draft)).toBe(true);
+  });
+
+  it("allows step 1 when type and woNumber are set (schedule optional)", () => {
+    const draft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM" as const,
+      woNumber: "12345",
+    };
+    expect(canContinueWizardStep1(draft)).toBe(true);
+    expect(isWizardStepValid(1, draft)).toBe(true);
+  });
+
+  it("blocks step 1 for Emergency without severity", () => {
+    const draft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "Emergency" as const,
+      woNumber: "12345",
+    };
+    expect(canContinueWizardStep1(draft)).toBe(false);
+  });
+
+  it("allows step 1 for Emergency with severity", () => {
+    const draft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "Emergency" as const,
+      woNumber: "12345",
+      severity: 2 as const,
+    };
+    expect(canContinueWizardStep1(draft)).toBe(true);
+  });
+
+  it("blocks step 2 without POC name/phone", () => {
+    const draft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM" as const,
+      woNumber: "12345",
+      locationId: "99",
+      siteCode: "BK5",
+    };
+    expect(canContinueWizardStep2(draft)).toBe(false);
+    expect(isWizardStepValid(2, draft)).toBe(false);
+  });
+
+  it("allows step 2 without an account when site and POC are set", () => {
+    const draft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM" as const,
+      woNumber: "12345",
+      locationId: "99",
+      siteCode: "BK5",
+      pocName: "Jordan",
+      pocPhone: "555-0100",
+    };
+    expect(canContinueWizardStep2(draft)).toBe(true);
+    expect(isWizardStepValid(2, draft)).toBe(true);
+    expect(wizardStep2ContinueHint(draft)).toBeNull();
+  });
+
+  it("hints pick a site when step 2 has no location", () => {
+    expect(wizardStep2ContinueHint(EMPTY_WIZARD_DRAFT)).toBe("Pick a site to continue");
+  });
+
+  it("hints POC when step 2 has site but no phone", () => {
+    const draft = {
+      ...EMPTY_WIZARD_DRAFT,
+      locationId: "99",
+      siteCode: "BK5",
+      pocName: "Jordan",
+    };
+    expect(wizardStep2ContinueHint(draft)).toBe("Enter POC name and phone to continue");
+  });
+
+  it("allows step 2 when site and POC are set", () => {
+    const draft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM" as const,
+      woNumber: "12345",
+      locationId: "99",
+      siteCode: "BK5",
+      pocName: "Jordan",
+      pocPhone: "555-0100",
+    };
+    expect(canContinueWizardStep2(draft)).toBe(true);
+    expect(isWizardStepValid(2, draft)).toBe(true);
+    expect(wizardStep2ContinueHint(draft)).toBeNull();
+  });
+
+  it("blocks create without siteCode", () => {
+    const draft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM" as const,
+      woNumber: "12345",
+      locationId: "99",
+    };
+    expect(canCreateWorkOrderFromWizard(draft)).toBe(false);
+    expect(isWizardStepValid(2, draft)).toBe(false);
+  });
+
+  it("allows create when type, woNumber, site, and POC are set", () => {
+    const draft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM" as const,
+      woNumber: "12345678901",
+      locationId: "99",
+      siteCode: "BK5",
+      pocName: "Jordan",
+      pocPhone: "555-0100",
+    };
+    expect(canCreateWorkOrderFromWizard(draft)).toBe(true);
+    expect(isWizardStepValid(2, draft)).toBe(true);
+  });
+
+  it("does not require Appt Time for wizard step 3 or create", () => {
+    const draft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM" as const,
+      woNumber: "12345678901",
+      locationId: "99",
+      siteCode: "BK5",
+      pocName: "Jordan",
+      pocPhone: "555-0100",
+      apptStart: "",
+      apptEnd: "",
+    };
+    expect(isWizardStepValid(3, draft)).toBe(true);
+    expect(canCreateWorkOrderFromWizard(draft)).toBe(true);
+  });
+
+  it("allows provisional SH-prefixed woNumber", () => {
+    const draft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM" as const,
+      woNumber: "SH12345",
+    };
+    expect(isWizardWoNumberValid(draft.woNumber)).toBe(true);
+    expect(canContinueWizardStep1(draft)).toBe(true);
+  });
+
+  it("accepts whitespace-only woNumber for backend SH generation", () => {
+    const draft = {
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM" as const,
+      woNumber: "   ",
+    };
+    expect(isWizardWoNumberValid(draft.woNumber)).toBe(true);
+    expect(canContinueWizardStep1(draft)).toBe(true);
+  });
+
+  it("rejects non-alphanumeric woNumber", () => {
+    expect(isWizardWoNumberValid("!!!")).toBe(false);
+    expect(canContinueWizardStep1({ ...EMPTY_WIZARD_DRAFT, type: "PM", woNumber: "!!!" })).toBe(
+      false,
+    );
+  });
+
+  it("accepts alphanumeric woNumber", () => {
+    expect(isWizardWoNumberValid("ABC123")).toBe(true);
+  });
+
+  it("hints alphanumeric WO number or severity when step 1 is incomplete", () => {
+    expect(wizardStep1ContinueHint(EMPTY_WIZARD_DRAFT)).toBeNull();
+    expect(wizardStep1ContinueHint({ ...EMPTY_WIZARD_DRAFT, type: "PM", woNumber: "!!!" })).toBe(
+      "WO number must be alphanumeric",
+    );
+    expect(wizardStep1ContinueHint({ ...EMPTY_WIZARD_DRAFT, type: "Emergency" })).toBe(
+      "Select severity to continue",
+    );
+  });
+});
diff --git a/src/test/domain/work-orders/mappers/work-order-board-detail-mapper.test.ts b/src/test/domain/work-orders/mappers/work-order-board-detail-mapper.test.ts
new file mode 100644
index 00000000..fb24f6b5
--- /dev/null
+++ b/src/test/domain/work-orders/mappers/work-order-board-detail-mapper.test.ts
@@ -0,0 +1,338 @@
+import { describe, expect, it } from "vitest";
+import {
+  boardMediaItemsToMediaFiles,
+  buildCompletionDocFormData,
+  buildMediaFormData,
+  mapBoardDetailMediaItem,
+  mapWorkOrderBoardDetail,
+} from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import {
+  getClosabilityGaps,
+  tableRowToClosabilityInput,
+} from "@/domain/work-orders/utils/wo-closability";
+
+const SAMPLE_DETAIL = {
+  info: {
+    id: 123,
+    woNumber: "00000000123",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    workOrderType: 2,
+    isPastDue: false,
+    siteCode: "SITE-01",
+    locationName: "Main Warehouse",
+    pocName: "John Doe",
+    pocPhone: "555-0100",
+    pocNotes: null,
+    lifecycleStatus: 3,
+    lifecycleStatusLabel: "Scheduled",
+    legacyStatus: null,
+    dispatcherId: "user-guid",
+    dispatcherName: "Jane Dispatcher",
+    initials: "JD",
+    color: "#3B82F6",
+    dueDate: "2026-07-20T00:00:00Z",
+    scheduledDate: "2026-07-16T00:00:00Z",
+    targetWeek: "2026-07-13",
+    scheduleWeekOnly: false,
+    dayGroup: "Wed",
+    vendorId: 45,
+    vendorName: "ACME HVAC",
+    techName: "Mike Tech",
+    techPhone: "555-0200",
+    apptDate: "2026-07-16T14:00:00Z",
+    apptTime: "10:00 AM",
+    pm: "HVAC PM",
+    serviceNotes: "Check filters",
+    extraServices: ["Filter Change"],
+    additionalContacts: [
+      { name: "Backup Lead", phone: "+1 555-0101", notes: "After hours" },
+      { name: "Security Desk", phone: "+1 555-0102" },
+    ],
+    docStatus: 2,
+    flagColor: "#EF4444",
+    primaryDispatchId: 789,
+    rowVersion: "AQAAAAAAAQE=",
+    dispatchRowVersion: "AQAAAAAAAQE=",
+  },
+  completion: {
+    docStatus: 2,
+    template: {
+      id: 1,
+      name: "HVAC PM Completion",
+      serviceKey: "HVAC PM",
+      workOrderType: 2,
+      templateUrl: "https://example.com/hvac.pdf",
+      isActive: true,
+    },
+    signOffName: null,
+    signOffAttachment: null,
+    signOffSignature: null,
+    dispatchSignoffs: [
+      {
+        dispatchId: 789,
+        signoffType: "Customer",
+        name: "Site Contact",
+        signedAt: "2026-07-16T15:30:00.0000000Z",
+      },
+    ],
+  },
+  comments: [
+    {
+      id: 1,
+      authorId: "user-1",
+      text: "Called vendor",
+      time: "2026-06-01T12:00:00.0000000Z",
+      documents: null,
+    },
+  ],
+  audit: [
+    {
+      type: "system",
+      dispatcherId: null,
+      action: "WeekRolled",
+      fieldName: "CarriedOver",
+      oldValue: "0",
+      newValue: "1",
+      time: "2026-07-16T10:00:00.0000000Z",
+      dispatchId: null,
+    },
+  ],
+  media: [
+    {
+      id: 10,
+      category: 1,
+      url: "https://cdn.example.com/before.jpg",
+      fileName: "before.jpg",
+      uploadedAt: "2026-07-15T18:00:00.0000000Z",
+      isLegacy: false,
+    },
+    {
+      id: 11,
+      category: 3,
+      url: "https://cdn.example.com/extra.pdf",
+      fileName: "extra.pdf",
+      uploadedAt: "2026-07-15T19:00:00.0000000Z",
+      isLegacy: false,
+    },
+  ],
+};
+
+describe("mapWorkOrderBoardDetail", () => {
+  it("maps nested info/completion/comments/audit/media", () => {
+    const detail = mapWorkOrderBoardDetail(SAMPLE_DETAIL);
+
+    expect(detail.info.id).toBe(123);
+    expect(detail.info.woNumber).toBe("00000000123");
+    expect(detail.info.site).toBe("SITE-01");
+    expect(detail.info.type).toBe("PM");
+    expect(detail.info.status).toBe("Scheduled");
+    expect(detail.info.docStatus).toBe("No");
+    expect(detail.info.company).toBe("ACME HVAC");
+    expect(detail.info.tech).toBe("Mike Tech");
+    expect(detail.info.pm).toBe("HVAC PM");
+    expect(detail.info.location).toBe("Main Warehouse");
+    expect(detail.info.additionalContacts).toEqual([
+      { name: "Backup Lead", phone: "+1 555-0101", notes: "After hours" },
+      { name: "Security Desk", phone: "+1 555-0102" },
+    ]);
+
+    expect(detail.completion.docStatus).toBe("No");
+    expect(detail.completion.template?.name).toBe("HVAC PM Completion");
+    expect(detail.completion.dispatchSignoffs).toHaveLength(1);
+    expect(detail.completion.dispatchSignoffs[0]?.signoffType).toBe("Customer");
+
+    expect(detail.comments).toHaveLength(1);
+    expect(detail.comments[0]?.commenttext).toBe("Called vendor");
+    expect(detail.comments[0]?.createdDate).toBe("2026-06-01T12:00:00.0000000Z");
+    expect(detail.comments[0]?.authorId).toBe("user-1");
+    expect(detail.comments[0]?.userName).toBe("");
+
+    expect(detail.audit).toHaveLength(1);
+    expect(detail.audit[0]?.action).toBe("WeekRolled");
+    expect(detail.audit[0]?.userName).toBe("System");
+    expect(detail.audit[0]?.createdAt).toBe("2026-07-16T10:00:00.0000000Z");
+
+    expect(detail.media).toHaveLength(2);
+    expect(detail.media[0]?.category).toBe("Before");
+    expect(detail.media[1]?.category).toBe("Extra");
+  });
+
+  it("maps authorName to userName and keeps authorId separate", () => {
+    const detail = mapWorkOrderBoardDetail({
+      ...SAMPLE_DETAIL,
+      comments: [
+        {
+          id: 2,
+          authorId: "guid-abc",
+          authorName: "Jane Dispatcher",
+          text: "On site",
+          time: "2026-06-02T12:00:00.0000000Z",
+        },
+      ],
+    });
+
+    expect(detail.comments[0]?.userName).toBe("Jane Dispatcher");
+    expect(detail.comments[0]?.authorId).toBe("guid-abc");
+  });
+
+  it("converts board media to MediaFile for UI", () => {
+    const detail = mapWorkOrderBoardDetail(SAMPLE_DETAIL);
+    const files = boardMediaItemsToMediaFiles(detail.media);
+    expect(files[0]).toMatchObject({
+      id: "10",
+      name: "before.jpg",
+      url: "https://cdn.example.com/before.jpg",
+      category: "Photo",
+      purpose: "Before",
+      fileType: "image",
+      isLegacy: false,
+    });
+    expect(files[1]?.category).toBe("Other");
+    expect(files[1]?.purpose).toBe("Extra");
+    expect(files[1]?.fileType).toBe("pdf");
+  });
+
+  it("maps Aveta board category to Extra Docs Aveta", () => {
+    const aveta = mapBoardDetailMediaItem({
+      id: 22,
+      category: 5,
+      url: "https://cdn.example.com/aveta.pdf",
+      fileName: "aveta.pdf",
+    });
+    const fromName = mapBoardDetailMediaItem({
+      id: 23,
+      category: "Aveta",
+      url: "https://cdn.example.com/aveta.pdf",
+      fileName: "aveta.pdf",
+    });
+    const files = boardMediaItemsToMediaFiles([aveta, fromName]);
+    expect(files[0]).toMatchObject({
+      category: "Aveta",
+      purpose: "Aveta",
+      fileType: "pdf",
+    });
+    expect(files[1]?.purpose).toBe("Aveta");
+  });
+
+  it("maps After and Completion board categories to purpose for completion UI", () => {
+    const after = mapBoardDetailMediaItem({
+      id: 20,
+      category: 2,
+      url: "https://cdn.example.com/after.jpg",
+      fileName: "after.jpg",
+    });
+    const completion = mapBoardDetailMediaItem({
+      id: 21,
+      category: 4,
+      url: "https://cdn.example.com/completion.pdf",
+      fileName: "completion.pdf",
+    });
+    const files = boardMediaItemsToMediaFiles([after, completion]);
+    expect(files[0]).toMatchObject({
+      category: "Photo",
+      purpose: "After",
+    });
+    expect(files[1]).toMatchObject({
+      category: "Report",
+      purpose: "Completion",
+      fileType: "pdf",
+    });
+  });
+
+  it("shows the uploaded file name instead of the stored guid name", () => {
+    const stored = mapBoardDetailMediaItem({
+      id: 30,
+      category: 3,
+      url: "https://cdn.example.com/7a0cf3b5-3eeb-4c4f-a86e-8e2da1b0c9f4_6370_1_Before.jpg",
+      fileName: "7a0cf3b5-3eeb-4c4f-a86e-8e2da1b0c9f4_6370_1_Before.jpg",
+    });
+    expect(stored.fileName).toBe("6370_1_Before.jpg");
+    expect(boardMediaItemsToMediaFiles([stored])[0]).toMatchObject({
+      name: "6370_1_Before.jpg",
+      fileType: "image",
+    });
+  });
+
+  it("maps numeric category and marks negative ids as legacy", () => {
+    const legacy = mapBoardDetailMediaItem({
+      id: -1,
+      category: 1,
+      url: "https://cdn.example.com/before.jpg",
+      fileName: "before.jpg",
+    });
+    expect(legacy.id).toBe("-1");
+    expect(legacy.category).toBe("Before");
+    expect(legacy.isLegacy).toBe(true);
+  });
+
+  it("builds media and completion FormData fields", () => {
+    const mediaFile = new File(["img"], "a.jpg", { type: "image/jpeg" });
+    const mediaForm = buildMediaFormData(mediaFile, "After");
+    expect(mediaForm.get("category")).toBe("After");
+    expect(mediaForm.get("file")).toBeInstanceOf(File);
+
+    const pdf = new File(["%PDF"], "doc.pdf", { type: "application/pdf" });
+    const completionForm = buildCompletionDocFormData({
+      file: pdf,
+      workOrderVersion: "VER==",
+      signOffName: "Jane",
+    });
+    expect(completionForm.get("workOrderVersion")).toBe("VER==");
+    expect(completionForm.get("signOffName")).toBe("Jane");
+    expect(completionForm.get("file")).toBeInstanceOf(File);
+  });
+});
+
+describe("mapWorkOrderBoardDetail media count (SH-339)", () => {
+  const reactiveInfo = { ...SAMPLE_DETAIL.info, workOrderType: 6 };
+
+  it("derives mediaCount from stored media when detail info omits it", () => {
+    const detail = mapWorkOrderBoardDetail({ ...SAMPLE_DETAIL, info: reactiveInfo });
+
+    expect(detail.info.type).toBe("Reactive");
+    expect(detail.info.mediaCount).toBe(2);
+    expect(getClosabilityGaps(tableRowToClosabilityInput(detail.info))).not.toContain(
+      "At least 1 photo",
+    );
+  });
+
+  it("prefers stored media when detail info reports an explicit zero", () => {
+    const detail = mapWorkOrderBoardDetail({
+      ...SAMPLE_DETAIL,
+      info: { ...reactiveInfo, mediaCount: 0 },
+    });
+
+    expect(detail.info.mediaCount).toBe(2);
+    expect(getClosabilityGaps(tableRowToClosabilityInput(detail.info))).not.toContain(
+      "At least 1 photo",
+    );
+  });
+
+  it("does not count legacy URL-column media, matching the board row count", () => {
+    const detail = mapWorkOrderBoardDetail({
+      ...SAMPLE_DETAIL,
+      info: reactiveInfo,
+      media: [
+        {
+          id: -1,
+          category: 1,
+          url: "https://cdn.example.com/legacy.jpg",
+          fileName: "legacy.jpg",
+          isLegacy: true,
+        },
+      ],
+    });
+
+    expect(detail.info.mediaCount).toBe(0);
+  });
+
+  it("keeps an explicit info mediaCount", () => {
+    const detail = mapWorkOrderBoardDetail({
+      ...SAMPLE_DETAIL,
+      info: { ...reactiveInfo, mediaCount: 5 },
+    });
+
+    expect(detail.info.mediaCount).toBe(5);
+  });
+});
diff --git a/src/test/domain/work-orders/mappers/work-order-board-mapper.test.ts b/src/test/domain/work-orders/mappers/work-order-board-mapper.test.ts
new file mode 100644
index 00000000..e5d0cd0e
--- /dev/null
+++ b/src/test/domain/work-orders/mappers/work-order-board-mapper.test.ts
@@ -0,0 +1,488 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  mapWizardDraftToBoardCreatePayload,
+  mapWizardTypeToApi,
+  parseSiteCodeFromLocationName,
+  resolveSiteCode,
+} from "@/domain/work-orders/mappers/work-order-board-mapper";
+
+import {
+  LIFECYCLE_STATUS_API,
+  WORK_ORDER_TYPE_API,
+} from "@/domain/work-orders/types/work-order-board";
+
+import { EMPTY_WIZARD_DRAFT } from "@/domain/work-orders/types/work-order-wizard";
+
+describe("parseSiteCodeFromLocationName", () => {
+  it("parses leading site code tokens", () => {
+    expect(parseSiteCodeFromLocationName("BK5 · Dallas, TX")).toBe("BK5");
+
+    expect(parseSiteCodeFromLocationName("CHI-1042 — Chicago Loop")).toBe("CHI-1042");
+  });
+});
+
+describe("resolveSiteCode", () => {
+  it("prefers explicit siteCode over name parse", () => {
+    expect(resolveSiteCode({ siteCode: "BK5", name: "OTHER — City" })).toBe("BK5");
+  });
+});
+
+describe("mapWizardTypeToApi", () => {
+  it("maps wizard types to numeric enums", () => {
+    expect(mapWizardTypeToApi("PM")).toBe(WORK_ORDER_TYPE_API.PM);
+
+    expect(mapWizardTypeToApi("Emergency")).toBe(WORK_ORDER_TYPE_API.Emergency);
+
+    expect(mapWizardTypeToApi("Reactive")).toBe(WORK_ORDER_TYPE_API.Reactive);
+
+    expect(mapWizardTypeToApi("Overdue")).toBe(WORK_ORDER_TYPE_API.Other);
+
+    expect(mapWizardTypeToApi("")).toBeNull();
+  });
+});
+
+describe("mapWizardDraftToBoardCreatePayload", () => {
+  it("maps required create fields", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+
+      type: "PM",
+
+      siteCode: "BK5",
+    });
+
+    expect(payload).toEqual({
+      workOrderType: 2,
+
+      siteCode: "BK5",
+
+      isAddOn: false,
+
+      lifecycleStatus: 1,
+    });
+  });
+
+  it("sends locationId and never customer on create", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      siteCode: "BK5",
+      locationId: "12",
+    });
+
+    expect(payload.locationId).toBe(12);
+    expect(payload).not.toHaveProperty("customer");
+  });
+
+  it("allows create mapping without a service", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      siteCode: "BK5",
+      locationId: "12",
+    });
+
+    expect(payload.primaryService).toBeUndefined();
+  });
+
+  it("sets isAddOn from cutoff preview when scheduled (create hint; not frozen)", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      siteCode: "BK5",
+      scheduledOn: "2026-07-08",
+      isAddOnOverride: false,
+    });
+
+    // createdAt defaults to now; after prior-Saturday 2026-07-04 for that week → true
+    expect(payload.isAddOn).toBe(true);
+  });
+
+  it("sets isAddOn from manual override when schedule is missing", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      siteCode: "BK5",
+      isAddOnOverride: true,
+    });
+
+    expect(payload.isAddOn).toBe(true);
+  });
+
+  it("derives isAddOn from range start via cutoff (range persists scheduledDate)", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      siteCode: "BK5",
+      scheduledOn: "2026-07-08",
+      scheduleEnd: "2026-07-10",
+      schedMode: "range",
+      isAddOnOverride: false,
+    });
+
+    expect(payload.scheduledDate).toBe("2026-07-08");
+    // createdAt defaults to now; after prior-Saturday 2026-07-04 for that week → true
+    expect(payload.isAddOn).toBe(true);
+  });
+
+  it("uses manual Add-On override when range has no start date", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      siteCode: "BK5",
+      scheduledOn: "",
+      scheduleEnd: "",
+      schedMode: "range",
+      isAddOnOverride: true,
+    });
+
+    expect(payload.isAddOn).toBe(true);
+  });
+
+  it("maps wizard status to lifecycleStatus on create", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      siteCode: "BK5",
+      status: "Scheduled",
+    });
+
+    expect(payload.lifecycleStatus).toBe(3);
+  });
+
+  it("maps full wizard payload with structured service and notes fields", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+
+      type: "PM",
+
+      siteCode: "BK5",
+
+      woNumber: "12345",
+
+      assigneeId: "dispatcher-guid",
+
+      dueDate: "2026-07-01",
+
+      scheduledOn: "2026-06-25",
+
+      scheduleWeekOnly: false,
+
+      vendorId: "5",
+
+      apptStart: "09:00",
+
+      apptEnd: "11:00",
+
+      pm: "HVAC PM",
+
+      pmNote: "Check unit on roof",
+
+      extraServices: ["Filter change", "Coil clean"],
+
+      pocName: "Jane Site Lead",
+
+      pocPhone: "+1 555-0100",
+
+      pocNotes: "Call before arrival",
+
+      additionalContacts: [{ name: "Backup Lead", phone: "+1 555-0101", notes: "After hours" }],
+
+      techPhone: "+1 555-0199",
+
+      vendorNotes: "Gate code 4421",
+
+      locationId: "12",
+    });
+
+    expect(payload).toMatchObject({
+      workOrderType: 2,
+
+      siteCode: "BK5",
+
+      woNumber: "12345",
+
+      assignTo: "dispatcher-guid",
+
+      dueDate: "2026-07-01",
+
+      scheduledDate: "2026-06-25",
+
+      isAddOn: true,
+
+      vendorId: 5,
+
+      apptDate: "2026-06-25",
+
+      apptTime: "09:00 – 11:00",
+
+      primaryService: "HVAC PM",
+
+      serviceNotes: "Check unit on roof",
+
+      pocName: "Jane Site Lead",
+
+      pocPhone: "+1 555-0100",
+
+      pocNotes: "Call before arrival",
+
+      techPhone: "+1 555-0199",
+
+      vendorNotes: "Gate code 4421",
+
+      locationId: 12,
+
+      additionalContacts: [{ name: "Backup Lead", phone: "+1 555-0101", notes: "After hours" }],
+    });
+
+    expect(payload.trade).toBeUndefined();
+
+    expect(payload.description).toBeUndefined();
+
+    expect(payload.scheduleWeekOnly).toBeUndefined();
+
+    expect(payload.targetWeek).toBeUndefined();
+  });
+
+  it("maps scheduleWeekOnly to targetWeek and omits scheduledDate", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+
+      type: "Reactive",
+
+      siteCode: "BK5",
+
+      scheduledOn: "2026-06-25",
+
+      scheduleWeekOnly: true,
+    });
+
+    expect(payload.scheduleWeekOnly).toBe(true);
+
+    expect(payload.targetWeek).toBe("2026-06-22");
+
+    expect(payload.scheduledDate).toBeUndefined();
+  });
+
+  it("keeps Incomplete on week-only create and omits scheduledDate", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      siteCode: "BK5",
+      status: "Incomplete",
+      scheduleWeekOnly: true,
+      targetWeek: "2026-06-22",
+    });
+
+    expect(payload.lifecycleStatus).toBe(LIFECYCLE_STATUS_API.Incomplete);
+    expect(payload.scheduleWeekOnly).toBe(true);
+    expect(payload.targetWeek).toBe("2026-06-22");
+    expect(payload.scheduledDate).toBeUndefined();
+  });
+
+  it("prefers explicit targetWeek when scheduleWeekOnly and scheduledOn is empty", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+
+      type: "PM",
+
+      siteCode: "BK5",
+
+      scheduledOn: "",
+
+      scheduleWeekOnly: true,
+
+      targetWeek: "2026-06-22",
+    });
+
+    expect(payload.scheduleWeekOnly).toBe(true);
+
+    expect(payload.targetWeek).toBe("2026-06-22");
+
+    expect(payload.scheduledDate).toBeUndefined();
+  });
+
+  it("omits week-mode flags when scheduleWeekOnly is set without a week", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      siteCode: "BK5",
+      scheduleWeekOnly: true,
+      scheduledOn: "",
+      targetWeek: "",
+    });
+
+    expect(payload.scheduleWeekOnly).toBeUndefined();
+    expect(payload.targetWeek).toBeUndefined();
+    expect(payload.scheduledDate).toBeUndefined();
+  });
+
+  it("omits apptTime when start and end are empty even with a vendor", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      siteCode: "BK5",
+      vendorId: "5",
+      scheduledOn: "2026-06-25",
+      apptStart: "",
+      apptEnd: "",
+    });
+
+    expect(payload.vendorId).toBe(5);
+    expect(payload.apptDate).toBe("2026-06-25");
+    expect(payload.apptTime).toBeUndefined();
+  });
+
+  it("omits appointment fields when vendor is missing but still sends techPhone and vendorNotes", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+
+      type: "PM",
+
+      siteCode: "BK5",
+
+      scheduledOn: "2026-06-25",
+
+      apptStart: "09:00",
+
+      apptEnd: "11:00",
+
+      techPhone: "+1 555-0199",
+
+      vendorNotes: "Leave at dock",
+    });
+
+    expect(payload.vendorId).toBeUndefined();
+
+    expect(payload.apptDate).toBeUndefined();
+
+    expect(payload.apptTime).toBeUndefined();
+
+    expect(payload.techPhone).toBe("+1 555-0199");
+
+    expect(payload.vendorNotes).toBe("Leave at dock");
+  });
+
+  it("derives siteCode from locationName when draft.siteCode is empty", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+
+      type: "Emergency",
+
+      locationName: "BK5 · Dallas, TX",
+    });
+
+    expect(payload.siteCode).toBe("BK5");
+
+    expect(payload.workOrderType).toBe(3);
+  });
+
+  it("defaults empty type to PM", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+      siteCode: "BK5",
+    });
+    expect(payload.workOrderType).toBe(WORK_ORDER_TYPE_API.PM);
+  });
+
+  it("throws when siteCode cannot be resolved", () => {
+    expect(() =>
+      mapWizardDraftToBoardCreatePayload({
+        ...EMPTY_WIZARD_DRAFT,
+
+        type: "PM",
+      }),
+    ).toThrow("Site code is required");
+  });
+
+  it("sets scheduledDate from range start and keeps range text in description", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+
+      type: "PM",
+
+      siteCode: "BK5",
+
+      scheduledOn: "2026-06-08",
+
+      scheduleEnd: "2026-06-12",
+
+      schedMode: "range",
+
+      pocNotes: "Should not be in description",
+
+      vendorNotes: "Also not in description",
+    });
+
+    expect(payload.scheduledDate).toBe("2026-06-08");
+
+    expect(payload.scheduleWeekOnly).toBeUndefined();
+
+    expect(payload.targetWeek).toBeUndefined();
+
+    expect(payload.description).toContain("Schedule range:");
+
+    expect(payload.description).toContain("Jun 8");
+
+    expect(payload.description).toContain("Jun 12");
+
+    expect(payload.description).not.toContain("Should not be in description");
+
+    expect(payload.description).not.toContain("Also not in description");
+
+    expect(payload.pocNotes).toBe("Should not be in description");
+
+    expect(payload.vendorNotes).toBe("Also not in description");
+  });
+
+  it("maps service notes as structured fields and omits extraServices on create", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+
+      type: "PM",
+
+      siteCode: "BK5",
+
+      pm: "HVAC PM",
+
+      pmNote: "Check unit on roof",
+
+      extraServices: ["Filter change", "Coil clean", "Filter change"],
+    });
+
+    expect(payload.primaryService).toBe("HVAC PM");
+
+    expect(payload.extraServices).toBeUndefined();
+
+    expect(payload.serviceNotes).toBe("Check unit on roof");
+
+    expect(payload.description).toBeUndefined();
+
+    expect(payload.trade).toBeUndefined();
+  });
+
+  it("sends avetaRequired on create when the Service & Notes flag is set", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+      type: "PM",
+      siteCode: "BK5",
+      avetaRequired: true,
+    });
+    expect(payload.avetaRequired).toBe(true);
+  });
+
+  it("maps numeric WO numbers", () => {
+    const payload = mapWizardDraftToBoardCreatePayload({
+      ...EMPTY_WIZARD_DRAFT,
+
+      type: "PM",
+
+      siteCode: "BK5",
+
+      woNumber: "12345678901",
+    });
+
+    expect(payload.woNumber).toBe("12345678901");
+  });
+});
diff --git a/src/test/domain/work-orders/mappers/work-order-board-patch-mapper.test.ts b/src/test/domain/work-orders/mappers/work-order-board-patch-mapper.test.ts
new file mode 100644
index 00000000..0d973632
--- /dev/null
+++ b/src/test/domain/work-orders/mappers/work-order-board-patch-mapper.test.ts
@@ -0,0 +1,282 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildBoardPatchPayload,
+  expandTablePatchToBoardFieldOps,
+  isLocalOnlyTablePatch,
+  mapDocStatusToApi,
+} from "@/domain/work-orders/mappers/work-order-board-patch-mapper";
+import { toVendorTablePatch } from "@/domain/work-orders/utils/vendor-assignment-patch";
+
+describe("mapDocStatusToApi", () => {
+  it("maps NN to NotNeeded", () => {
+    expect(mapDocStatusToApi("NN")).toBe("NotNeeded");
+  });
+
+  it("keeps Yes and No", () => {
+    expect(mapDocStatusToApi("Yes")).toBe("Yes");
+    expect(mapDocStatusToApi("No")).toBe("No");
+  });
+});
+
+describe("isLocalOnlyTablePatch", () => {
+  it("treats mediaCount as local-only", () => {
+    expect(isLocalOnlyTablePatch({ mediaCount: 3 })).toBe(true);
+  });
+
+  it("does not treat site as local-only", () => {
+    expect(isLocalOnlyTablePatch({ site: "BK5" })).toBe(false);
+  });
+
+  it("treats primaryDispatchStatus overlay as local-only", () => {
+    expect(isLocalOnlyTablePatch({ primaryDispatchStatus: "" })).toBe(true);
+  });
+
+  it("treats scheduleEnd and schedMode as local-only overlays", () => {
+    expect(isLocalOnlyTablePatch({ scheduleEnd: "2026-06-12", schedMode: "range" })).toBe(true);
+  });
+});
+
+describe("expandTablePatchToBoardFieldOps", () => {
+  it("maps single fields to board field names", () => {
+    expect(expandTablePatchToBoardFieldOps({ woNumber: "12345" })).toEqual([
+      { field: "woNumber", value: "12345" },
+    ]);
+    expect(expandTablePatchToBoardFieldOps({ type: "PM" })).toEqual([
+      { field: "workOrderType", value: "PM" },
+    ]);
+    expect(expandTablePatchToBoardFieldOps({ site: "BK5" })).toEqual([
+      { field: "siteCode", value: "BK5" },
+    ]);
+    expect(expandTablePatchToBoardFieldOps({ dispatcherId: "guid-1" })).toEqual([
+      { field: "assignTo", value: "guid-1" },
+    ]);
+    expect(expandTablePatchToBoardFieldOps({ status: "Scheduled" })).toEqual([
+      { field: "lifecycleStatus", value: "Scheduled" },
+    ]);
+    expect(expandTablePatchToBoardFieldOps({ vendorId: "7" })).toEqual([
+      { field: "vendorId", value: "7" },
+    ]);
+    expect(expandTablePatchToBoardFieldOps({ pm: "HVAC" })).toEqual([
+      { field: "pm", value: "HVAC" },
+    ]);
+    expect(expandTablePatchToBoardFieldOps({ docStatus: "NN" })).toEqual([
+      { field: "docStatus", value: "NotNeeded" },
+    ]);
+    expect(expandTablePatchToBoardFieldOps({ flagColor: "#EF4444" })).toEqual([
+      { field: "flagColor", value: "#EF4444" },
+    ]);
+    expect(expandTablePatchToBoardFieldOps({ flagColor: null })).toEqual([
+      { field: "flagColor", value: "" },
+    ]);
+    expect(expandTablePatchToBoardFieldOps({ severity: 3 })).toEqual([
+      { field: "severity", value: "3" },
+    ]);
+    expect(expandTablePatchToBoardFieldOps({ severity: null })).toEqual([
+      { field: "severity", value: "" },
+    ]);
+    expect(expandTablePatchToBoardFieldOps({ apptTime: "" })).toEqual([
+      { field: "apptTime", value: "" },
+    ]);
+  });
+
+  it("emits service notes modal ops in pm → extraServices → serviceNotes order", () => {
+    expect(
+      expandTablePatchToBoardFieldOps({
+        pm: "Backflow Preventers",
+        extraServices: ["Filter change", "Coil clean"],
+        serviceNotes: "service notes",
+        avetaRequired: true,
+      }),
+    ).toEqual([
+      { field: "pm", value: "Backflow Preventers" },
+      { field: "extraServices", value: '["Filter change","Coil clean"]' },
+      { field: "serviceNotes", value: "service notes" },
+      { field: "avetaRequired", value: "true" },
+    ]);
+  });
+
+  it("emits week-only schedule ops in stable order", () => {
+    expect(
+      expandTablePatchToBoardFieldOps({
+        scheduleWeekOnly: true,
+        targetWeek: "2026-07-13",
+        scheduledOn: "",
+        completedDate: "",
+      }),
+    ).toEqual([
+      { field: "scheduleWeekOnly", value: "true" },
+      { field: "targetWeek", value: "2026-07-13" },
+      { field: "scheduledDate", value: "" },
+      { field: "completedDate", value: "" },
+    ]);
+  });
+
+  it("emits day schedule ops clearing week-only", () => {
+    expect(
+      expandTablePatchToBoardFieldOps({
+        scheduleWeekOnly: false,
+        scheduledOn: "2026-07-15",
+        completedDate: "",
+        targetWeek: "",
+      }),
+    ).toEqual([
+      { field: "scheduleWeekOnly", value: "false" },
+      { field: "scheduledDate", value: "2026-07-15" },
+      { field: "targetWeek", value: "" },
+      { field: "completedDate", value: "" },
+    ]);
+  });
+
+  it("does not emit scheduleEnd or schedMode as board fields", () => {
+    const ops = expandTablePatchToBoardFieldOps({
+      scheduleWeekOnly: false,
+      scheduledOn: "2026-06-08",
+      targetWeek: "",
+      scheduleEnd: "2026-06-12",
+      schedMode: "range",
+    });
+    expect(ops).toEqual([
+      { field: "scheduleWeekOnly", value: "false" },
+      { field: "scheduledDate", value: "2026-06-08" },
+      { field: "targetWeek", value: "" },
+    ]);
+  });
+
+  it("emits additionalContacts as serialized JSON for board PATCH", () => {
+    expect(
+      expandTablePatchToBoardFieldOps({
+        additionalContacts: [{ name: "Alex", phone: "555-0100", notes: "Gate" }],
+      }),
+    ).toEqual([
+      {
+        field: "additionalContacts",
+        value: JSON.stringify([{ name: "Alex", phone: "555-0100", notes: "Gate" }]),
+      },
+    ]);
+  });
+
+  it("ignores local-only companion keys when expanding vendor/site", () => {
+    expect(
+      expandTablePatchToBoardFieldOps({
+        vendorId: "7",
+        company: "Acme",
+        tech: "Ana",
+        techPhone: "555",
+      }),
+    ).toEqual([{ field: "vendorId", value: "7" }]);
+
+    expect(
+      expandTablePatchToBoardFieldOps(
+        toVendorTablePatch({
+          vendorId: "9",
+          company: "New Co",
+          tech: "Pat",
+          techPhone: "555",
+        }),
+      ),
+    ).toEqual([{ field: "vendorId", value: "9" }]);
+
+    expect(
+      expandTablePatchToBoardFieldOps({
+        site: "BK5",
+        location: "Dallas",
+        locationId: "12",
+        pocName: "Pat",
+        pocPhone: "111",
+        pocNotes: "call",
+      }),
+    ).toEqual([{ field: "siteCode", value: "BK5" }]);
+  });
+
+  it("keeps dueDate and scheduledDate patches independent", () => {
+    expect(expandTablePatchToBoardFieldOps({ dueDate: "2026-08-01" })).toEqual([
+      { field: "dueDate", value: "2026-08-01" },
+    ]);
+    expect(
+      expandTablePatchToBoardFieldOps({
+        scheduledOn: "2026-07-15",
+        scheduleWeekOnly: false,
+      }),
+    ).toEqual([
+      { field: "scheduleWeekOnly", value: "false" },
+      { field: "scheduledDate", value: "2026-07-15" },
+    ]);
+    expect(expandTablePatchToBoardFieldOps({ dueDate: "2026-08-01", isPastDue: false })).toEqual([
+      { field: "dueDate", value: "2026-08-01" },
+    ]);
+  });
+});
+
+describe("buildBoardPatchPayload", () => {
+  it("includes dispatch version for dispatch fields", () => {
+    const payload = buildBoardPatchPayload(
+      { field: "vendorId", value: "7" },
+      {
+        rowVersion: "wo-v1",
+        dispatchRowVersion: "disp-v1",
+        primaryDispatchId: 9,
+      },
+    );
+
+    expect(payload).toEqual({
+      field: "vendorId",
+      value: "7",
+      workOrderVersion: "wo-v1",
+      dispatchVersion: "disp-v1",
+      primaryDispatchId: 9,
+    });
+  });
+
+  it("omits non-positive primaryDispatchId on dispatch fields", () => {
+    const payload = buildBoardPatchPayload(
+      { field: "vendorId", value: "7" },
+      {
+        rowVersion: "wo-v1",
+        dispatchRowVersion: "disp-v1",
+        primaryDispatchId: 0,
+      },
+    );
+
+    expect(payload).toEqual({
+      field: "vendorId",
+      value: "7",
+      workOrderVersion: "wo-v1",
+      dispatchVersion: "disp-v1",
+    });
+    expect(payload).not.toHaveProperty("primaryDispatchId");
+  });
+
+  it("omits dispatch version for WO-only fields", () => {
+    const payload = buildBoardPatchPayload(
+      { field: "siteCode", value: "BK5" },
+      {
+        rowVersion: "wo-v1",
+        dispatchRowVersion: "disp-v1",
+        primaryDispatchId: 9,
+      },
+    );
+
+    expect(payload).toEqual({
+      field: "siteCode",
+      value: "BK5",
+      workOrderVersion: "wo-v1",
+    });
+  });
+
+  it("omits dispatch version for flagColor", () => {
+    const payload = buildBoardPatchPayload(
+      { field: "flagColor", value: "#8B5CF6" },
+      {
+        rowVersion: "wo-v1",
+        dispatchRowVersion: "disp-v1",
+        primaryDispatchId: 9,
+      },
+    );
+
+    expect(payload).toEqual({
+      field: "flagColor",
+      value: "#8B5CF6",
+      workOrderVersion: "wo-v1",
+    });
+  });
+});
diff --git a/src/test/domain/work-orders/mappers/work-order-form-payload.test.ts b/src/test/domain/work-orders/mappers/work-order-form-payload.test.ts
new file mode 100644
index 00000000..ed1be20e
--- /dev/null
+++ b/src/test/domain/work-orders/mappers/work-order-form-payload.test.ts
@@ -0,0 +1,152 @@
+import { describe, expect, it } from "vitest";
+import {
+  mapWorkOrderFormToCreatePayload,
+  mapWorkOrderFormToUpdateFormData,
+} from "@/domain/work-orders/mappers/work-order-mapper";
+import { createDefaultWorkOrderFormValues } from "@/domain/work-orders/types/work-order";
+
+describe("mapWorkOrderFormToCreatePayload", () => {
+  it("maps required create fields to API payload", () => {
+    const values = {
+      ...createDefaultWorkOrderFormValues(),
+      workOrderNumber: "CUST-001",
+      title: "Replace filter",
+      locationId: "42",
+      priority: "Sev 1",
+      status: "Open" as const,
+      createdDate: "2026-01-15",
+      assignedTo: "Jane Doe",
+      description: "HVAC filter replacement",
+    };
+
+    expect(mapWorkOrderFormToCreatePayload(values)).toMatchObject({
+      WorkerOrderNumber: "CUST-001",
+      WorkerOrderTitle: "Replace filter",
+      LocationId: 42,
+      Priority: "Sev 1",
+      Status: "Open",
+      CreatedDate: "2026-01-15",
+      AssignTo: "Jane Doe",
+      Description: "HVAC filter replacement",
+    });
+  });
+});
+
+describe("mapWorkOrderFormToUpdateFormData", () => {
+  it("builds multipart FormData with Id and persisted fields only", () => {
+    const values = {
+      ...createDefaultWorkOrderFormValues(),
+      workOrderNumber: "CUST-001",
+      title: "Replace filter",
+      locationId: "42",
+      priority: "Sev 1",
+      status: "On Hold" as const,
+      createdDate: "2026-01-15",
+      dueDate: "2026-07-15",
+      completedDate: "",
+      assignedTo: "Dispatcher",
+      description: "Updated description",
+      po: "PO-1",
+      problem: "Leak",
+      source: "PM",
+    };
+
+    const formData = mapWorkOrderFormToUpdateFormData(99, values);
+
+    expect(formData.get("Id")).toBe("99");
+    expect(formData.get("WorkerOrderTitle")).toBe("Replace filter");
+    expect(formData.get("Description")).toBe("Updated description");
+    expect(formData.get("Status")).toBe("OnHold");
+    expect(formData.get("Priority")).toBe("Critical");
+    expect(formData.get("LocationId")).toBe("42");
+    expect(formData.get("AssignTo")).toBe("Dispatcher");
+    expect(formData.get("DueDate")).toBe("2026-07-15");
+    expect(formData.get("CompletedDate")).toBeNull();
+    expect(formData.get("WorkerOrderNumber")).toBeNull();
+    expect(formData.get("PO")).toBeNull();
+    expect(formData.get("Problem")).toBeNull();
+    expect(formData.get("ScheduledDate")).toBeNull();
+    expect(formData.get("Source")).toBeNull();
+    expect(formData.get("CreatedDate")).toBeNull();
+  });
+
+  it("maps form status and priority labels to edit enums", () => {
+    const values = {
+      ...createDefaultWorkOrderFormValues(),
+      title: "WO",
+      description: "Desc",
+      status: "In Progress" as const,
+      priority: "Sev 3",
+    };
+
+    const formData = mapWorkOrderFormToUpdateFormData(1, values);
+
+    expect(formData.get("Status")).toBe("InProgress");
+    expect(formData.get("Priority")).toBe("Medium");
+  });
+
+  it("omits empty optional fields for partial update", () => {
+    const values = {
+      ...createDefaultWorkOrderFormValues(),
+      title: "Title only",
+      description: "",
+      priority: "",
+      assignedTo: "",
+      dueDate: "",
+      locationId: "",
+    };
+
+    const formData = mapWorkOrderFormToUpdateFormData(1, values);
+
+    expect(formData.get("Id")).toBe("1");
+    expect(formData.get("WorkerOrderTitle")).toBe("Title only");
+    expect(formData.get("Status")).toBe("Open");
+    expect(formData.get("Description")).toBeNull();
+    expect(formData.get("Priority")).toBeNull();
+    expect(formData.get("AssignTo")).toBeNull();
+    expect(formData.get("DueDate")).toBeNull();
+    expect(formData.get("LocationId")).toBeNull();
+  });
+
+  it("appends ContactIds and CategoryIds when present", () => {
+    const values = {
+      ...createDefaultWorkOrderFormValues(),
+      title: "With contacts",
+      description: "Desc",
+      contactIds: [1, 2],
+      categoryIds: [3],
+    };
+
+    const formData = mapWorkOrderFormToUpdateFormData(2, values);
+
+    expect(formData.getAll("ContactIds")).toEqual(["1", "2"]);
+    expect(formData.getAll("CategoryIds")).toEqual(["3"]);
+  });
+
+  it("does not append ContactIds or CategoryIds when undefined", () => {
+    const values = {
+      ...createDefaultWorkOrderFormValues(),
+      title: "No lists",
+      description: "Desc",
+    };
+
+    const formData = mapWorkOrderFormToUpdateFormData(2, values);
+
+    expect(formData.getAll("ContactIds")).toEqual([]);
+    expect(formData.getAll("CategoryIds")).toEqual([]);
+  });
+
+  it("keeps completedDate on full EditWorkorder form and omits DocStatus (board field)", () => {
+    const values = {
+      ...createDefaultWorkOrderFormValues(),
+      createdDate: "2026-01-15",
+      completedDate: "2026-07-20",
+      docStatus: "NN" as const,
+    };
+
+    const formData = mapWorkOrderFormToUpdateFormData(1, values);
+
+    expect(formData.get("CompletedDate")).toBe("2026-07-20");
+    expect(formData.has("DocStatus")).toBe(false);
+  });
+});
diff --git a/src/test/domain/work-orders/mappers/work-order-mapper.test.ts b/src/test/domain/work-orders/mappers/work-order-mapper.test.ts
new file mode 100644
index 00000000..676e26a3
--- /dev/null
+++ b/src/test/domain/work-orders/mappers/work-order-mapper.test.ts
@@ -0,0 +1,247 @@
+import { describe, expect, it } from "vitest";
+import {
+  mapDocStatusToApi,
+  mapWorkOrderDetail,
+  mapWorkOrderDetailToFormValues,
+  mapWorkOrderDispatchSummary,
+  mapWorkOrderTableRow,
+} from "@/domain/work-orders/mappers/work-order-mapper";
+import { mapUpliftRequest } from "@/domain/uplifts/mappers/uplift-mapper";
+
+describe("mapWorkOrderDispatchSummary", () => {
+  it("preserves the assigned vendor identity needed by inline editing", () => {
+    expect(
+      mapWorkOrderDispatchSummary({
+        Id: 21,
+        VendorId: 7,
+        VendorName: "Gateway Plumbing",
+        VendorEmail: "dispatch@gateway.test",
+      }),
+    ).toMatchObject({
+      id: 21,
+      vendorId: 7,
+      vendorName: "Gateway Plumbing",
+      vendorEmail: "dispatch@gateway.test",
+    });
+  });
+});
+
+describe("mapWorkOrderDetail completion-document status", () => {
+  it("reads DocStatus from the API payload so it round-trips into form values", () => {
+    const detail = mapWorkOrderDetail({
+      Id: 42,
+      CompletedDate: "2026-07-20",
+      DocStatus: "Yes",
+    });
+
+    expect(detail.docStatus).toBe("Yes");
+
+    const formValues = mapWorkOrderDetailToFormValues(detail);
+    expect(formValues.docStatus).toBe("Yes");
+    expect(formValues.completedDate).toBe("2026-07-20");
+  });
+
+  it("maps API NotNeeded to UI NN", () => {
+    expect(mapWorkOrderDetail({ Id: 1, DocStatus: "NotNeeded" }).docStatus).toBe("NN");
+    expect(mapWorkOrderDetail({ Id: 2, docStatus: 3 }).docStatus).toBe("NN");
+  });
+
+  it("falls back to an empty doc status for unknown/missing values", () => {
+    const detail = mapWorkOrderDetail({ Id: 1 });
+    expect(detail.docStatus).toBe("");
+  });
+});
+
+describe("mapDocStatusToApi", () => {
+  it("maps NN to NotNeeded and keeps Yes/No", () => {
+    expect(mapDocStatusToApi("NN")).toBe("NotNeeded");
+    expect(mapDocStatusToApi("Yes")).toBe("Yes");
+    expect(mapDocStatusToApi("No")).toBe("No");
+  });
+});
+
+describe("mapUpliftRequest", () => {
+  it("maps decided uplift fields from PascalCase payload", () => {
+    const result = mapUpliftRequest({
+      Id: 10,
+      Status: "Approved",
+      CurrentNTE: 800,
+      RequestedNTE: 1200,
+      Delta: 400,
+      VendorReason: "Additional materials",
+      RequestedAt: "2026-02-01T08:00:00Z",
+      RequestedByVendorName: "Beta HVAC",
+      DecidedAt: "2026-02-02T14:30:00Z",
+      DecidedByName: "Jane Manager",
+      DecisionNote: "Approved per contract",
+      RequiredTier: 2,
+      CanDecide: false,
+      ExpiresAt: "2026-02-05T08:00:00Z",
+      NotificationStatus: "Sent",
+      EvidenceDocumentId: 77,
+      EvidenceFileName: "invoice.pdf",
+      EvidenceContentType: "application/pdf",
+      EvidenceSizeBytes: 2048,
+    });
+
+    expect(result).toEqual({
+      id: 10,
+      status: "Approved",
+      currentNTE: 800,
+      requestedNTE: 1200,
+      delta: 400,
+      vendorReason: "Additional materials",
+      requestedAt: "2026-02-01T08:00:00Z",
+      requestedByVendorName: "Beta HVAC",
+      decidedAt: "2026-02-02T14:30:00Z",
+      decidedByName: "Jane Manager",
+      decisionNote: "Approved per contract",
+      requiredTier: 2,
+      canDecide: false,
+      expiresAt: "2026-02-05T08:00:00Z",
+      notificationStatus: "Sent",
+      notificationError: "",
+      evidenceDocumentId: 77,
+      evidenceFileName: "invoice.pdf",
+      evidenceContentType: "application/pdf",
+      evidenceSizeBytes: 2048,
+    });
+  });
+
+  it("defaults missing numeric and evidence fields", () => {
+    const result = mapUpliftRequest({ id: 1, status: "Pending" });
+
+    expect(result.requestedNTE).toBe(0);
+    expect(result.delta).toBe(0);
+    expect(result.requiredTier).toBe(1);
+    expect(result.canDecide).toBe(false);
+    expect(result.evidenceDocumentId).toBeNull();
+    expect(result.evidenceFileName).toBe("");
+    expect(result.evidenceSizeBytes).toBeNull();
+  });
+});
+
+describe("mapWorkOrderTableRow (board DTO)", () => {
+  it("maps WorkOrderBoardRowDto fields into table columns", () => {
+    const row = mapWorkOrderTableRow({
+      id: 202,
+      woNumber: "10000001235",
+      workOrderType: 6,
+      isPastDue: false,
+      siteCode: "BK5",
+      locationName: "Lobby",
+      lifecycleStatus: 3,
+      lifecycleStatusLabel: "Scheduled",
+      dispatcherId: "guid-1",
+      dispatcherName: "Alex Dispatcher",
+      dueDate: "2026-07-18T00:00:00",
+      scheduledDate: "2026-07-15T00:00:00",
+      vendorId: 44,
+      vendorName: "Acme HVAC LLC",
+      techName: "Sam Tech",
+      techPhone: "555-0200",
+      apptTime: "07:00 – 09:00",
+      pm: "PM Filter",
+      serviceNotes: "service notes",
+      extraServices: ["Filter change", "Coil clean"],
+      docStatus: 1,
+      dayGroup: "wednesday",
+      flagColor: "#EF4444",
+      severity: 2,
+    });
+
+    expect(row.woNumber).toBe("10000001235");
+    expect(row.site).toBe("BK5");
+    expect(row.type).toBe("Reactive");
+    expect(row.severity).toBe(2);
+    expect(row.status).toBe("Scheduled");
+    expect(row.scheduledOn).toBe("2026-07-15");
+    expect(row.dueDate).toBe("2026-07-18");
+    expect(row.company).toBe("Acme HVAC LLC");
+    expect(row.tech).toBe("Sam Tech");
+    expect(row.apptTime).toBe("07:00 – 09:00");
+    expect(row.pm).toBe("PM Filter");
+    expect(row.serviceNotes).toBe("service notes");
+    expect(row.extraServices).toEqual(["Filter change", "Coil clean"]);
+    expect(row.docStatus).toBe("Yes");
+    expect(row.additionalContacts).toEqual([]);
+    expect(row.dayGroup).toBe("07/15");
+    expect(row.flagColor).toBe("#EF4444");
+  });
+
+  it("maps missing or empty flagColor as null", () => {
+    expect(mapWorkOrderTableRow({ id: 1 }).flagColor).toBeNull();
+    expect(mapWorkOrderTableRow({ id: 1, flagColor: null }).flagColor).toBeNull();
+    expect(mapWorkOrderTableRow({ id: 1, flagColor: "" }).flagColor).toBeNull();
+    expect(mapWorkOrderTableRow({ id: 1, FlagColor: "#3B82F6" }).flagColor).toBe("#3B82F6");
+  });
+
+  it("maps additionalContacts from board rows", () => {
+    expect(
+      mapWorkOrderTableRow({
+        id: 1,
+        additionalContacts: [{ name: "Alex", phone: "555-0100" }],
+      }).additionalContacts,
+    ).toEqual([{ name: "Alex", phone: "555-0100" }]);
+  });
+
+  it("maps uplift summary and pending flag from API payload", () => {
+    const row = mapWorkOrderTableRow({
+      id: 303,
+      upliftSummary: {
+        hasUplift: true,
+        pendingCount: 2,
+        primaryStatus: "pending",
+      },
+    });
+
+    expect(row.upliftSummary).toEqual({
+      hasUplift: true,
+      pendingCount: 2,
+      primaryStatus: "pending",
+    });
+    expect(row.hasPendingUplift).toBe(true);
+  });
+
+  it("maps board pendingUpliftCount into hasPendingUplift (SH-188 contract)", () => {
+    const pending = mapWorkOrderTableRow({
+      id: 305,
+      pendingUpliftCount: 1,
+    });
+    expect(pending.hasPendingUplift).toBe(true);
+    expect(pending.upliftSummary).toEqual({ hasUplift: true, pendingCount: 1 });
+
+    const clear = mapWorkOrderTableRow({
+      id: 306,
+      PendingUpliftCount: 0,
+    });
+    expect(clear.hasPendingUplift).toBe(false);
+    expect(clear.upliftSummary).toEqual({ hasUplift: false, pendingCount: 0 });
+  });
+
+  it("does not copy work-order status into uplift primaryStatus on flat board rows", () => {
+    const row = mapWorkOrderTableRow({
+      id: 308,
+      pendingUpliftCount: 1,
+      status: "In Progress",
+      Status: "In Progress",
+    });
+    expect(row.upliftSummary?.primaryStatus).toBeUndefined();
+  });
+
+  it("leaves hasPendingUplift undefined when board count is absent", () => {
+    const row = mapWorkOrderTableRow({ id: 307 });
+    expect(row.hasPendingUplift).toBeUndefined();
+    expect(row.upliftSummary).toBeUndefined();
+  });
+
+  it("maps hasPendingUplift from top-level API flag", () => {
+    const row = mapWorkOrderTableRow({
+      id: 304,
+      hasPendingUplift: true,
+    });
+
+    expect(row.hasPendingUplift).toBe(true);
+    expect(row.upliftSummary).toBeUndefined();
+  });
+});
diff --git a/src/test/domain/work-orders/mappers/work-order-table-row-mapper.test.ts b/src/test/domain/work-orders/mappers/work-order-table-row-mapper.test.ts
new file mode 100644
index 00000000..9315fd9d
--- /dev/null
+++ b/src/test/domain/work-orders/mappers/work-order-table-row-mapper.test.ts
@@ -0,0 +1,230 @@
+import { describe, expect, it } from "vitest";
+
+import { mapWorkOrderTableRow } from "@/domain/work-orders/mappers/work-order-table-row-mapper";
+import { WORK_ORDER_TYPE_API } from "@/domain/work-orders/types/work-order-board";
+import { buildSelectedDayGroup } from "@/domain/work-orders/utils/week-day-nav-utils";
+
+describe("mapWorkOrderTableRow isAddOn", () => {
+  it("reads isAddOn from board DTO when present", () => {
+    const row = mapWorkOrderTableRow({
+      id: 1,
+      workOrderType: WORK_ORDER_TYPE_API.PM,
+      isAddOn: true,
+    });
+    expect(row.type).toBe("PM");
+    expect(row.isAddOn).toBe(true);
+  });
+
+  it("maps legacy AddOn type to isAddOn without a selectable type", () => {
+    const row = mapWorkOrderTableRow({
+      id: 2,
+      workOrderType: WORK_ORDER_TYPE_API.AddOn,
+    });
+    expect(row.type).toBe("");
+    expect(row.isAddOn).toBe(true);
+  });
+
+  it("prefers explicit isAddOn false over legacy AddOn type", () => {
+    const row = mapWorkOrderTableRow({
+      id: 3,
+      workOrderType: WORK_ORDER_TYPE_API.AddOn,
+      isAddOn: false,
+    });
+    expect(row.isAddOn).toBe(false);
+  });
+
+  it("falls back to legacy AddOn type when isAddOn is null", () => {
+    const row = mapWorkOrderTableRow({
+      id: 5,
+      workOrderType: WORK_ORDER_TYPE_API.AddOn,
+      isAddOn: null,
+    });
+    expect(row.isAddOn).toBe(true);
+  });
+
+  it("defaults isAddOn to false for normal types", () => {
+    const row = mapWorkOrderTableRow({
+      id: 4,
+      workOrderType: WORK_ORDER_TYPE_API.Reactive,
+    });
+    expect(row.type).toBe("Reactive");
+    expect(row.isAddOn).toBe(false);
+  });
+});
+
+describe("mapWorkOrderTableRow avetaRequired", () => {
+  it("maps avetaRequired and originalDate from the same board list row", () => {
+    const row = mapWorkOrderTableRow({
+      id: 8,
+      workOrderType: WORK_ORDER_TYPE_API.PM,
+      avetaRequired: true,
+      originalDate: "2026-05-08",
+    });
+    expect(row.avetaRequired).toBe(true);
+    expect(row.originalDate).toBe("2026-05-08");
+  });
+
+  it("defaults avetaRequired to false when omitted", () => {
+    const row = mapWorkOrderTableRow({
+      id: 8,
+      workOrderType: WORK_ORDER_TYPE_API.PM,
+    });
+    expect(row.avetaRequired).toBe(false);
+  });
+
+  it("maps hasAvetaDocument from the board list row", () => {
+    const attached = mapWorkOrderTableRow({
+      id: 9,
+      workOrderType: WORK_ORDER_TYPE_API.PM,
+      avetaRequired: true,
+      hasAvetaDocument: true,
+    });
+    expect(attached.hasAvetaDocument).toBe(true);
+
+    const pending = mapWorkOrderTableRow({
+      id: 10,
+      workOrderType: WORK_ORDER_TYPE_API.PM,
+      avetaRequired: true,
+    });
+    expect(pending.hasAvetaDocument).toBe(false);
+  });
+});
+
+describe("mapWorkOrderTableRow mediaCount", () => {
+  it("maps the board mediaCount that feeds the CompDoc file count", () => {
+    const row = mapWorkOrderTableRow({
+      id: 11,
+      workOrderType: WORK_ORDER_TYPE_API.Emergency,
+      mediaCount: 2,
+    });
+    expect(row.mediaCount).toBe(2);
+  });
+
+  it("defaults mediaCount to zero when the board omits it", () => {
+    const row = mapWorkOrderTableRow({
+      id: 12,
+      workOrderType: WORK_ORDER_TYPE_API.Emergency,
+    });
+    expect(row.mediaCount).toBe(0);
+  });
+});
+
+describe("mapWorkOrderTableRow primaryDispatchStatus", () => {
+  it.each([
+    ["primaryDispatchStatus", "Refused"],
+    ["PrimaryDispatchStatus", "Canceled"],
+  ] as const)("maps exact DTO field %s onto primaryDispatchStatus", (key, value) => {
+    const row = mapWorkOrderTableRow({ id: 9, vendorId: 45, [key]: value });
+    expect(row.vendorId).toBe("45");
+    expect(row.primaryDispatchStatus).toBe(value);
+  });
+
+  it("maps backend #74 omitted vendor with Refused primaryDispatchStatus", () => {
+    const row = mapWorkOrderTableRow({
+      id: 9,
+      vendorId: null,
+      vendorName: null,
+      primaryDispatchStatus: "Refused",
+    });
+    expect(row.vendorId).toBe("");
+    expect(row.company).toBe("");
+    expect(row.primaryDispatchStatus).toBe("Refused");
+  });
+
+  it("maps live vendorId with empty company label and Sent status", () => {
+    const row = mapWorkOrderTableRow({
+      id: 9,
+      vendorId: 45,
+      vendorName: "",
+      primaryDispatchStatus: "Sent",
+    });
+    expect(row.vendorId).toBe("45");
+    expect(row.company).toBe("");
+    expect(row.primaryDispatchStatus).toBe("Sent");
+  });
+
+  it("maps vendor PATCH replacement dispatch as Pending with a new primaryDispatchId", () => {
+    const row = mapWorkOrderTableRow({
+      id: 1,
+      VendorId: 5,
+      VendorName: "New Co",
+      PrimaryDispatchStatus: "Pending",
+      PrimaryDispatchId: 11,
+    });
+    expect(row.vendorId).toBe("5");
+    expect(row.company).toBe("New Co");
+    expect(row.primaryDispatchStatus).toBe("Pending");
+    expect(row.primaryDispatchId).toBe(11);
+  });
+});
+
+describe("mapWorkOrderTableRow carry-over fields", () => {
+  it("maps carriedOver and originalWeek without rewriting scheduledOn", () => {
+    const row = mapWorkOrderTableRow({
+      id: 41,
+      workOrderType: WORK_ORDER_TYPE_API.PM,
+      scheduledDate: "2026-05-13",
+      carriedOver: 2,
+      originalWeek: "2026-05-11",
+    });
+    expect(row.carriedOver).toBe(2);
+    expect(row.originalWeek).toBe("2026-05-11");
+    expect(row.scheduledOn).toBe("2026-05-13");
+  });
+
+  it("shows an unresolved prior-week row on the next week's matching day tab", () => {
+    const row = mapWorkOrderTableRow({
+      id: 42,
+      workOrderType: WORK_ORDER_TYPE_API.PM,
+      scheduledDate: "2026-05-13",
+      lifecycleStatus: 3,
+      carriedOver: 2,
+      originalWeek: "2026-05-11",
+    });
+    const group = buildSelectedDayGroup("2026-05-18", "2026-05-20", [row]);
+    expect(row.status).toBe("Scheduled");
+    expect(group.items.map((item) => item.id)).toEqual([42]);
+  });
+});
+
+describe("mapWorkOrderTableRow completion snapshot", () => {
+  it("maps frozen site, company, and POC payloads", () => {
+    const row = mapWorkOrderTableRow({
+      id: 191,
+      lifecycleStatus: 7,
+      frozenSite: { code: "BK5", label: "BK5 Chicago", city: "Chicago", state: "IL" },
+      frozenCompany: { name: "Frozen Co", contactName: "Frozen Tech", phone: "111" },
+      frozenPoc: {
+        contacts: [{ name: "Frozen POC", phone: "222" }],
+        notes: "Call first",
+      },
+    });
+
+    expect(row.frozenSite).toMatchObject({ code: "BK5", city: "Chicago", state: "IL" });
+    expect(row.frozenCompany).toMatchObject({
+      name: "Frozen Co",
+      contactName: "Frozen Tech",
+      phone: "111",
+    });
+    expect(row.frozenPoc).toEqual({
+      contacts: [{ name: "Frozen POC", phone: "222", notes: "" }],
+      notes: "Call first",
+    });
+  });
+
+  it("maps frozen POC contact notes when the payload supplies them", () => {
+    const row = mapWorkOrderTableRow({
+      id: 192,
+      lifecycleStatus: 7,
+      frozenPoc: {
+        contacts: [{ name: "Frozen POC", phone: "222", notes: "Gate code 9" }],
+        notes: "Call first",
+      },
+    });
+
+    expect(row.frozenPoc).toEqual({
+      contacts: [{ name: "Frozen POC", phone: "222", notes: "Gate code 9" }],
+      notes: "Call first",
+    });
+  });
+});
diff --git a/src/test/domain/work-orders/mappers/work-order-uplift-mapper.test.ts b/src/test/domain/work-orders/mappers/work-order-uplift-mapper.test.ts
new file mode 100644
index 00000000..d765c4d5
--- /dev/null
+++ b/src/test/domain/work-orders/mappers/work-order-uplift-mapper.test.ts
@@ -0,0 +1,101 @@
+import { describe, expect, it } from "vitest";
+import {
+  mapUpliftSummary,
+  mapWorkOrderUplift,
+} from "@/domain/work-orders/mappers/work-order-uplift-mapper";
+import {
+  getUpliftCellLabel,
+  getUpliftStatusPillStyle,
+} from "@/domain/work-orders/utils/uplift-display-utils";
+
+describe("mapUpliftSummary", () => {
+  it("maps nested PascalCase upliftSummary from board row payload", () => {
+    const result = mapUpliftSummary({
+      id: 10,
+      UpliftSummary: {
+        HasUplift: true,
+        PendingCount: 2,
+        PrimaryStatus: "Pending",
+        Amount: 500,
+      },
+    });
+
+    expect(result).toEqual({
+      hasUplift: true,
+      pendingCount: 2,
+      primaryStatus: "pending",
+      amount: 500,
+    });
+  });
+
+  it("derives hasUplift from pendingUpliftCount when nested summary is absent", () => {
+    const result = mapUpliftSummary({
+      pendingUpliftCount: 1,
+    });
+
+    expect(result.hasUplift).toBe(true);
+    expect(result.pendingCount).toBe(1);
+  });
+
+  it("does not treat work-order status as uplift primaryStatus when nested summary is absent", () => {
+    const result = mapUpliftSummary({
+      status: "Cancelled",
+      Status: "Cancelled",
+      hasUplift: false,
+    });
+
+    expect(result.hasUplift).toBe(false);
+    expect(result.primaryStatus).toBeUndefined();
+    expect(getUpliftCellLabel(result)).toBeNull();
+  });
+
+  it("normalizes auto-approved and canceled status aliases", () => {
+    expect(mapUpliftSummary({ primaryStatus: "AutoApproved" }).primaryStatus).toBe("auto_approved");
+    expect(mapWorkOrderUplift({ status: "Canceled" }).status).toBe("cancelled");
+  });
+
+  it("maps requester identity for revoke ownership checks", () => {
+    expect(mapWorkOrderUplift({ requestedById: "dispatcher-1" }).requestedById).toBe(
+      "dispatcher-1",
+    );
+  });
+});
+
+describe("uplift display utils", () => {
+  it("builds pending pill label and style", () => {
+    const summary = { hasUplift: true, pendingCount: 1, primaryStatus: "pending" as const };
+    expect(getUpliftCellLabel(summary)).toBe("1 Pending");
+    expect(getUpliftStatusPillStyle("pending")).toEqual({
+      background: "var(--status-pending-bg)",
+      color: "var(--status-pending-text)",
+    });
+  });
+
+  it("includes amount in non-pending primary status label", () => {
+    expect(
+      getUpliftCellLabel({
+        hasUplift: true,
+        pendingCount: 0,
+        primaryStatus: "approved",
+        amount: 1200,
+      }),
+    ).toBe("Approved $1,200");
+  });
+
+  it("hides Pending/Cancelled when hasUplift is false", () => {
+    expect(
+      getUpliftCellLabel({
+        hasUplift: false,
+        pendingCount: 0,
+        primaryStatus: "pending",
+      }),
+    ).toBeNull();
+    expect(
+      getUpliftCellLabel({
+        hasUplift: false,
+        pendingCount: 0,
+        primaryStatus: "cancelled",
+      }),
+    ).toBeNull();
+  });
+});
diff --git a/src/test/domain/work-orders/schemas/work-order-schema.test.ts b/src/test/domain/work-orders/schemas/work-order-schema.test.ts
new file mode 100644
index 00000000..09234098
--- /dev/null
+++ b/src/test/domain/work-orders/schemas/work-order-schema.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import { workOrderFormSchema } from "@/domain/work-orders/schemas/work-order-schema";
+import { createDefaultWorkOrderFormValues } from "@/domain/work-orders/types/work-order";
+
+describe("workOrderFormSchema", () => {
+  it("accepts valid work order form values", () => {
+    const result = workOrderFormSchema.safeParse({
+      ...createDefaultWorkOrderFormValues(),
+      title: "Replace filter",
+      locationId: "10",
+      priority: "Sev 1",
+      status: "Open",
+      createdDate: "2026-01-15",
+    });
+
+    expect(result.success).toBe(true);
+  });
+
+  it("rejects missing title", () => {
+    const result = workOrderFormSchema.safeParse({
+      ...createDefaultWorkOrderFormValues(),
+      title: "",
+      locationId: "10",
+      priority: "Sev 1",
+      status: "Open",
+      createdDate: "2026-01-15",
+    });
+
+    expect(result.success).toBe(false);
+  });
+
+  it("rejects missing location", () => {
+    const result = workOrderFormSchema.safeParse({
+      ...createDefaultWorkOrderFormValues(),
+      title: "Replace filter",
+      locationId: "",
+      priority: "Sev 1",
+      status: "Open",
+      createdDate: "2026-01-15",
+    });
+
+    expect(result.success).toBe(false);
+  });
+
+  it("rejects invalid priority", () => {
+    const result = workOrderFormSchema.safeParse({
+      ...createDefaultWorkOrderFormValues(),
+      title: "Replace filter",
+      locationId: "10",
+      priority: "Urgent",
+      status: "Open",
+      createdDate: "2026-01-15",
+    });
+
+    expect(result.success).toBe(false);
+  });
+});
diff --git a/src/test/domain/work-orders/use-cases/use-create-work-order-from-wizard-errors.test.tsx b/src/test/domain/work-orders/use-cases/use-create-work-order-from-wizard-errors.test.tsx
new file mode 100644
index 00000000..59392029
--- /dev/null
+++ b/src/test/domain/work-orders/use-cases/use-create-work-order-from-wizard-errors.test.tsx
@@ -0,0 +1,90 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { HTTPError } from "ky";
+import type { ReactNode } from "react";
+import { toast } from "react-toastify";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { normalizeApiRequestError } from "@/api/api-error";
+import { EMPTY_WIZARD_DRAFT } from "@/domain/work-orders/types/work-order-wizard";
+import { useCreateWorkOrderFromWizard } from "@/domain/work-orders/use-cases/use-create-work-order-from-wizard";
+import { createTestQueryClient } from "@/test/test-utils";
+
+const createFromBoard = vi.fn();
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: { createFromBoard: (...args: unknown[]) => createFromBoard(...args) },
+}));
+
+vi.mock("react-toastify", () => ({
+  toast: { error: vi.fn(), success: vi.fn() },
+}));
+
+/** Mirrors the ky client: HTTPError with parsed body, message normalized from it. */
+function backendError(status: number, body: Record<string, unknown>): HTTPError {
+  const error = new HTTPError(
+    new Response(JSON.stringify(body), { status }),
+    new Request("https://api.example.test/workorders/board"),
+    {} as never,
+  );
+  error.data = body;
+  return normalizeApiRequestError(error) as HTTPError;
+}
+
+function wrapper({ children }: { children: ReactNode }) {
+  return <QueryClientProvider client={createTestQueryClient()}>{children}</QueryClientProvider>;
+}
+
+async function createAndGetToast(error: unknown): Promise<unknown> {
+  createFromBoard.mockRejectedValueOnce(error);
+  const { result } = renderHook(() => useCreateWorkOrderFromWizard(), { wrapper });
+  act(() => {
+    result.current.mutate(EMPTY_WIZARD_DRAFT);
+  });
+  await waitFor(() => expect(toast.error).toHaveBeenCalledTimes(1));
+  return vi.mocked(toast.error).mock.calls[0]?.[0];
+}
+
+describe("useCreateWorkOrderFromWizard error copy", () => {
+  beforeEach(() => {
+    vi.mocked(toast.error).mockClear();
+    createFromBoard.mockReset();
+  });
+
+  it("never surfaces raw backend validation text from a 400", async () => {
+    const message = await createAndGetToast(
+      backendError(400, { status: "Validation Error", message: "siteCode is required." }),
+    );
+
+    expect(message).toBe("Unable to create the work order. Please try again.");
+  });
+
+  it("maps a coded 422 to product copy instead of the backend field name", async () => {
+    const message = await createAndGetToast(
+      backendError(422, {
+        code: "DispatchRequired",
+        message: "vendorId is required when setting appointment fields.",
+      }),
+    );
+
+    expect(message).toBe("Select a vendor company before saving.");
+  });
+
+  it("falls back to generic copy for unknown 422 codes", async () => {
+    const message = await createAndGetToast(
+      backendError(422, {
+        code: "InvalidLifecycleStatus",
+        message: "lifecycleStatus must be Incomplete, Pending, or Scheduled at create.",
+      }),
+    );
+
+    expect(message).toBe("Unable to create the work order. Please try again.");
+  });
+
+  it("keeps fixed permission copy for a 403", async () => {
+    const message = await createAndGetToast(
+      backendError(403, { code: "Forbidden", message: "accountId not permitted" }),
+    );
+
+    expect(message).toBe("You do not have permission to perform this action.");
+  });
+});
diff --git a/src/test/domain/work-orders/use-cases/use-work-order-table-mutations-assigned-toast.test.tsx b/src/test/domain/work-orders/use-cases/use-work-order-table-mutations-assigned-toast.test.tsx
new file mode 100644
index 00000000..a4b0d0cc
--- /dev/null
+++ b/src/test/domain/work-orders/use-cases/use-work-order-table-mutations-assigned-toast.test.tsx
@@ -0,0 +1,132 @@
+import type { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { toast } from "react-toastify";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { useWorkOrderTableMutations } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+import {
+  applyAssignedToTableSave,
+  applyVendorTableSave,
+  workOrderSavedMessage,
+} from "@/domain/work-orders/utils/work-order-feedback-toasts";
+
+const patchBoardField = vi.fn();
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    patchBoardField: (...args: unknown[]) => patchBoardField(...args),
+  },
+}));
+
+vi.mock("react-toastify", () => ({
+  toast: { error: vi.fn(), success: vi.fn(), warning: vi.fn() },
+}));
+
+const ROW = {
+  id: 7,
+  dispatcherId: "u1",
+  dispatcherName: "Admin",
+  rowVersion: "v1",
+} as WorkOrderTableRow;
+
+function makeWrapper() {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+  };
+}
+
+describe("useWorkOrderTableMutations assigned-to toast", () => {
+  beforeEach(() => {
+    patchBoardField.mockReset();
+    vi.mocked(toast.success).mockClear();
+    vi.mocked(toast.error).mockClear();
+  });
+
+  it("toasts assigned-to save only after the board PATCH succeeds", async () => {
+    let release: () => void = () => undefined;
+    const gate = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+    patchBoardField.mockImplementation(async () => {
+      await gate;
+      return { ...ROW, dispatcherId: "u2", dispatcherName: "Admin test", rowVersion: "v2" };
+    });
+
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch: () => undefined,
+          clearPatch: () => undefined,
+          getRow: () => ROW,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      applyAssignedToTableSave(result.current.patchField, 7, "u2", "Admin test");
+    });
+
+    expect(toast.success).not.toHaveBeenCalled();
+    release();
+    await waitFor(() => expect(toast.success).toHaveBeenCalledWith(workOrderSavedMessage()));
+  });
+
+  it("does not toast assigned-to save when the board PATCH fails", async () => {
+    patchBoardField.mockRejectedValue(new Error("Failed to update work order"));
+
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch: () => undefined,
+          clearPatch: () => undefined,
+          getRow: () => ROW,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      applyAssignedToTableSave(result.current.patchField, 7, "u2", "Admin test");
+    });
+
+    await waitFor(() => expect(toast.error).toHaveBeenCalled());
+    expect(toast.success).not.toHaveBeenCalled();
+  });
+
+  it("replaces the raw DispatchRequired validation string with user-facing copy", async () => {
+    const { BoardPatchValidationError } =
+      await import("@/domain/work-orders/errors/board-patch-errors");
+    patchBoardField.mockRejectedValue(
+      new BoardPatchValidationError(
+        "DispatchRequired",
+        "A primary dispatch is required. Set vendorId first or provide primaryDispatchId.",
+      ),
+    );
+
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch: () => undefined,
+          clearPatch: () => undefined,
+          getRow: () => ROW,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      applyVendorTableSave(result.current.patchField, 7, {
+        vendorId: "",
+        company: "",
+        tech: "",
+        techPhone: "",
+      });
+    });
+
+    await waitFor(() => expect(patchBoardField).toHaveBeenCalled());
+    expect(toast.error).toHaveBeenCalledWith("Select a vendor company before saving.");
+    expect(toast.error).not.toHaveBeenCalledWith(expect.stringContaining("primaryDispatchId"));
+  });
+});
diff --git a/src/test/domain/work-orders/use-cases/use-work-order-table-mutations-completed-date.test.ts b/src/test/domain/work-orders/use-cases/use-work-order-table-mutations-completed-date.test.ts
new file mode 100644
index 00000000..399a64fa
--- /dev/null
+++ b/src/test/domain/work-orders/use-cases/use-work-order-table-mutations-completed-date.test.ts
@@ -0,0 +1,51 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const patchBoardField = vi.fn();
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    getById: vi.fn(),
+    update: vi.fn(),
+    patchBoardField: (...args: unknown[]) => patchBoardField(...args),
+  },
+}));
+
+import { runWorkOrderTablePatch } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+
+const BASE_ROW = {
+  id: 99,
+  rowVersion: "AAAAAAA=",
+  completedDate: "",
+  severity: null,
+} as WorkOrderTableRow;
+
+describe("runWorkOrderTablePatch completedDate", () => {
+  beforeEach(() => {
+    patchBoardField.mockReset();
+    patchBoardField.mockResolvedValue({
+      ...BASE_ROW,
+      completedDate: "2026-07-30",
+      rowVersion: "BBBBBBB=",
+    });
+  });
+
+  it("persists completedDate via board PATCH (not EditWorkorder)", async () => {
+    const result = await runWorkOrderTablePatch(
+      99,
+      { completedDate: "2026-07-30" },
+      () => BASE_ROW,
+    );
+
+    expect(patchBoardField).toHaveBeenCalledTimes(1);
+    expect(patchBoardField).toHaveBeenCalledWith(99, {
+      field: "completedDate",
+      value: "2026-07-30",
+      workOrderVersion: "AAAAAAA=",
+    });
+    expect(result).toEqual({
+      kind: "board",
+      row: expect.objectContaining({ completedDate: "2026-07-30" }),
+    });
+  });
+});
diff --git a/src/test/domain/work-orders/use-cases/use-work-order-table-mutations-errors.test.tsx b/src/test/domain/work-orders/use-cases/use-work-order-table-mutations-errors.test.tsx
new file mode 100644
index 00000000..d4105ff0
--- /dev/null
+++ b/src/test/domain/work-orders/use-cases/use-work-order-table-mutations-errors.test.tsx
@@ -0,0 +1,171 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { toast } from "react-toastify";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  BOARD_PATCH_CONFLICT_MESSAGE,
+  BOARD_PATCH_FAILED_MESSAGE,
+  DISPATCH_REQUIRED_MESSAGE,
+  PARTIAL_SAVE_PREFIX,
+} from "@/domain/work-orders/errors/board-patch-errors";
+import type {
+  WorkOrderTablePatch,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+import { useWorkOrderTableMutations } from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+import { createTestQueryClient } from "@/test/test-utils";
+
+vi.mock("react-toastify", () => ({
+  toast: { error: vi.fn(), success: vi.fn(), warning: vi.fn() },
+}));
+
+const ROW = { id: 7, rowVersion: "v1" } as WorkOrderTableRow;
+
+function wrapper({ children }: { children: ReactNode }) {
+  return <QueryClientProvider client={createTestQueryClient()}>{children}</QueryClientProvider>;
+}
+
+type FakeResponse = { status: number; body: Record<string, unknown> };
+
+/** Board PATCH goes through the real ky client; only the network responses are faked. */
+function respondWith(...responses: FakeResponse[]) {
+  const queue = [...responses];
+  globalThis.fetch = vi.fn(async () => {
+    const next = queue.shift() ?? responses[responses.length - 1];
+    return new Response(JSON.stringify(next.body), {
+      status: next.status,
+      headers: { "Content-Type": "application/json" },
+    });
+  }) as typeof fetch;
+}
+
+async function patchAndGetToast(
+  patch: WorkOrderTablePatch = { woNumber: "WO-100" },
+  expectedCalls = 1,
+  onPatch: (id: string | number, patch: WorkOrderTablePatch) => void = () => undefined,
+): Promise<unknown> {
+  const { result } = renderHook(
+    () =>
+      useWorkOrderTableMutations({
+        onPatch,
+        clearPatch: () => undefined,
+        getRow: () => ROW,
+      }),
+    { wrapper },
+  );
+  act(() => {
+    result.current.patchField(7, patch);
+  });
+  await waitFor(() => expect(toast.error).toHaveBeenCalledTimes(1));
+  expect(globalThis.fetch).toHaveBeenCalledTimes(expectedCalls);
+  return vi.mocked(toast.error).mock.calls[0]?.[0];
+}
+
+describe("useWorkOrderTableMutations edit error copy", () => {
+  const originalFetch = globalThis.fetch;
+
+  beforeEach(() => {
+    vi.mocked(toast.error).mockClear();
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+  });
+
+  it("shows generic copy instead of backend text for an unknown 422 code", async () => {
+    respondWith({
+      status: 422,
+      body: {
+        code: "InvalidLifecycleStatus",
+        message: "lifecycleStatus cannot move from Completed for workOrderId 7.",
+      },
+    });
+
+    const message = await patchAndGetToast();
+
+    expect(message).toBe(BOARD_PATCH_FAILED_MESSAGE);
+    expect(message).not.toMatch(/lifecycleStatus|workOrderId|InvalidLifecycleStatus/);
+  });
+
+  it("keeps specific copy for DispatchRequired", async () => {
+    respondWith({
+      status: 422,
+      body: {
+        code: "DispatchRequired",
+        message: "vendorId is required when setting appointment fields.",
+      },
+    });
+
+    const message = await patchAndGetToast();
+
+    expect(message).toBe(DISPATCH_REQUIRED_MESSAGE);
+  });
+
+  it("shows generic copy instead of backend text for a non-422 failure", async () => {
+    respondWith({ status: 400, body: { message: "siteCode is required for accountId 42." } });
+
+    const message = await patchAndGetToast();
+
+    expect(message).toBe(BOARD_PATCH_FAILED_MESSAGE);
+  });
+
+  it("reports a partial save in plain language without backend field keys", async () => {
+    const onPatch = vi.fn();
+    respondWith(
+      { status: 200, body: { id: 7, workOrderNumber: "WO-100", rowVersion: "v2" } },
+      {
+        status: 422,
+        body: {
+          code: "SeverityInvalid",
+          message: "severity 3 is not allowed for workOrderType Emergency.",
+        },
+      },
+    );
+
+    const message = await patchAndGetToast({ woNumber: "WO-100", severity: 3 }, 2, onPatch);
+
+    expect(message).toBe(`${PARTIAL_SAVE_PREFIX} ${BOARD_PATCH_FAILED_MESSAGE}`);
+    expect(message).not.toMatch(/severity|woNumber|workOrderType|SeverityInvalid|\d\/\d/);
+    expect(onPatch).toHaveBeenCalledWith(7, expect.objectContaining({ rowVersion: "v2" }));
+  });
+
+  it("keeps DispatchRequired copy inside a partial save", async () => {
+    respondWith(
+      { status: 200, body: { id: 7, workOrderNumber: "WO-100", rowVersion: "v2" } },
+      {
+        status: 422,
+        body: { code: "DispatchRequired", message: "vendorId is required." },
+      },
+    );
+
+    const message = await patchAndGetToast({ woNumber: "WO-100", severity: 2 }, 2);
+
+    expect(message).toBe(`${PARTIAL_SAVE_PREFIX} ${DISPATCH_REQUIRED_MESSAGE}`);
+  });
+
+  it("shows fixed conflict copy and still applies the latest row on a 409", async () => {
+    const onPatch = vi.fn();
+    respondWith({
+      status: 409,
+      body: {
+        message: "RowVersion mismatch for workOrderId 7 (expected v1, found v3).",
+        currentState: { id: 7, workOrderNumber: "WO-099", rowVersion: "v3" },
+      },
+    });
+
+    const message = await patchAndGetToast({ woNumber: "WO-100" }, 1, onPatch);
+
+    expect(message).toBe(BOARD_PATCH_CONFLICT_MESSAGE);
+    expect(message).not.toMatch(/RowVersion|workOrderId|v3/);
+    expect(onPatch).toHaveBeenLastCalledWith(7, expect.objectContaining({ rowVersion: "v3" }));
+  });
+
+  it("shows fixed conflict copy when a 409 carries no latest row", async () => {
+    respondWith({ status: 409, body: { message: "RowVersion mismatch for workOrderId 7." } });
+
+    const message = await patchAndGetToast();
+
+    expect(message).toBe(BOARD_PATCH_CONFLICT_MESSAGE);
+  });
+});
diff --git a/src/test/domain/work-orders/use-cases/use-work-order-table-mutations.test.tsx b/src/test/domain/work-orders/use-cases/use-work-order-table-mutations.test.tsx
new file mode 100644
index 00000000..97f364b5
--- /dev/null
+++ b/src/test/domain/work-orders/use-cases/use-work-order-table-mutations.test.tsx
@@ -0,0 +1,866 @@
+import type { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type {
+  CompletionDocStatus,
+  WorkOrderTableRow,
+} from "@/domain/work-orders/types/work-order-table-row";
+
+const getById = vi.fn();
+const update = vi.fn();
+const patchBoardField = vi.fn();
+
+vi.mock("@/domain/work-orders/api/work-orders-api", () => ({
+  workOrdersApi: {
+    getById: (...args: unknown[]) => getById(...args),
+    update: (...args: unknown[]) => update(...args),
+    patchBoardField: (...args: unknown[]) => patchBoardField(...args),
+  },
+}));
+
+vi.mock("react-toastify", () => ({
+  toast: { error: vi.fn(), success: vi.fn(), warning: vi.fn() },
+}));
+
+import { BoardPatchConflictError } from "@/domain/work-orders/errors/board-patch-errors";
+import { mapWorkOrderTableRow } from "@/domain/work-orders/mappers/work-order-table-row-mapper";
+import {
+  applySchedulePatch,
+  applyScheduleRangePatch,
+  useWorkOrderTableMutations,
+} from "@/domain/work-orders/use-cases/use-work-order-table-mutations";
+import { queryKeys } from "@/infra/query-key/query-key";
+import { toVendorTablePatch } from "@/domain/work-orders/utils/vendor-assignment-patch";
+import {
+  getClosabilityGaps,
+  tableRowToClosabilityInput,
+} from "@/domain/work-orders/utils/wo-closability";
+
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function makeWrapper() {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+  };
+}
+
+type ServerState = {
+  status: string;
+  scheduledDate: string;
+  completedDate: string;
+  docStatus: CompletionDocStatus;
+};
+
+const BASE_SERVER: ServerState = {
+  status: "Open",
+  scheduledDate: "2026-06-01",
+  completedDate: "",
+  docStatus: "No",
+};
+
+const BASE_ROW: WorkOrderTableRow = {
+  id: 42,
+  woNumber: "WO-42",
+  site: "SEA1",
+  type: "PM",
+  severity: null,
+  dispatcherId: "d1",
+  dispatcherName: "Dispatcher",
+  scheduledOn: "2026-06-01",
+  completedDate: "",
+  targetWeek: "",
+  dayGroup: "",
+  dayLabel: "",
+  location: "Seattle",
+  locationId: "loc-1",
+  pm: "HVAC",
+  serviceNotes: "",
+  extraServices: [],
+  vendorId: "",
+  company: "",
+  tech: "",
+  techPhone: "",
+  apptStart: "",
+  apptEnd: "",
+  apptTime: "",
+  status: "Incomplete",
+  docStatus: "No",
+  pocName: "",
+  pocPhone: "",
+  pocNotes: "",
+  additionalContacts: [],
+  dueDate: "",
+  rescheduleCount: 0,
+  carriedOver: 0,
+  originalWeek: "",
+  originalDate: "",
+  isPastDue: false,
+  scheduleWeekOnly: false,
+  mediaCount: 0,
+  title: "PM — SEA1",
+  priority: "Sev 3",
+  primaryDispatchId: null,
+  rowVersion: "AAAAAAA=",
+  dispatchRowVersion: "",
+  flagColor: null,
+  isAddOn: false,
+  upliftSummary: { hasUplift: false, pendingCount: 0 },
+} as WorkOrderTableRow;
+
+describe("useWorkOrderTableMutations completion-doc persistence", () => {
+  let serverState: ServerState;
+  let events: string[];
+  let rowState: WorkOrderTableRow;
+
+  beforeEach(() => {
+    getById.mockReset();
+    update.mockReset();
+    patchBoardField.mockReset();
+    serverState = { ...BASE_SERVER };
+    rowState = { ...BASE_ROW };
+    events = [];
+
+    patchBoardField.mockImplementation(
+      async (
+        _id: unknown,
+        payload: { field: string; value?: string | null; workOrderVersion: string },
+      ) => {
+        events.push(`boardPatch:${payload.field}:start`);
+        await delay(5);
+        if (payload.field === "docStatus" && typeof payload.value === "string") {
+          const docStatus =
+            payload.value === "NotNeeded" ? "NN" : (payload.value as CompletionDocStatus);
+          serverState = { ...serverState, docStatus };
+          rowState = {
+            ...rowState,
+            docStatus,
+            rowVersion: `${payload.workOrderVersion}-next`,
+          };
+        }
+        if (payload.field === "completedDate" && typeof payload.value === "string") {
+          serverState = { ...serverState, completedDate: payload.value };
+          rowState = {
+            ...rowState,
+            completedDate: payload.value,
+            rowVersion: `${payload.workOrderVersion}-date`,
+          };
+        }
+        events.push(`boardPatch:${payload.field}:end`);
+        return { ...rowState };
+      },
+    );
+  });
+
+  it("persists docStatus via board PATCH with NotNeeded for UI NN", async () => {
+    const onPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch: () => undefined,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(42, { docStatus: "NN" });
+    });
+
+    await waitFor(() => expect(events).toContain("boardPatch:docStatus:end"));
+
+    expect(patchBoardField).toHaveBeenCalledWith(42, {
+      field: "docStatus",
+      value: "NotNeeded",
+      workOrderVersion: "AAAAAAA=",
+    });
+    expect(update).not.toHaveBeenCalled();
+    expect(getById).not.toHaveBeenCalled();
+    expect(serverState.docStatus).toBe("NN");
+  });
+
+  it("serializes board docStatus and completedDate via PATCH without racing or EditWorkorder", async () => {
+    const onPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch: () => undefined,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(42, { docStatus: "Yes" });
+      result.current.patchField(42, { completedDate: "2026-07-20" });
+    });
+
+    await waitFor(() => expect(events).toContain("boardPatch:completedDate:end"));
+    await waitFor(() => expect(events).toContain("boardPatch:docStatus:end"));
+
+    expect(events).toEqual([
+      "boardPatch:docStatus:start",
+      "boardPatch:docStatus:end",
+      "boardPatch:completedDate:start",
+      "boardPatch:completedDate:end",
+    ]);
+
+    expect(getById).not.toHaveBeenCalled();
+    expect(update).not.toHaveBeenCalled();
+    expect(patchBoardField).toHaveBeenCalledWith(
+      42,
+      expect.objectContaining({ field: "completedDate", value: "2026-07-20" }),
+    );
+
+    expect(serverState.docStatus).toBe("Yes");
+    expect(serverState.completedDate).toBe("2026-07-20");
+    expect(serverState.scheduledDate).toBe(BASE_SERVER.scheduledDate);
+    expect(serverState.status).toBe(BASE_SERVER.status);
+  });
+  it("sends the follow-up status patch with the rowVersion of the just-saved row (SH-341)", async () => {
+    const staleTableRow = { ...BASE_ROW };
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch: vi.fn(),
+          clearPatch: () => undefined,
+          getRow: () => staleTableRow,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    let saved: Awaited<ReturnType<typeof result.current.patchFieldAsync>> | undefined;
+    await act(async () => {
+      saved = await result.current.patchFieldAsync(42, { docStatus: "Yes" });
+    });
+    expect(saved?.kind).toBe("board");
+    const savedRow = saved?.kind === "board" ? saved.row : undefined;
+
+    await act(async () => {
+      await result.current.patchFieldAsync(42, { status: "Completed" }, savedRow);
+    });
+
+    expect(patchBoardField).toHaveBeenLastCalledWith(42, {
+      field: "lifecycleStatus",
+      value: "Completed",
+      workOrderVersion: "AAAAAAA=-next",
+    });
+  });
+});
+
+describe("maybeAutoSchedule on board patch", () => {
+  it("optimistically promotes Incomplete to Scheduled when a date is set", async () => {
+    const rowState = { ...BASE_ROW, status: "Incomplete" as const, scheduledOn: "" };
+    patchBoardField.mockImplementation(async (_id: unknown, payload: { field: string }) => {
+      if (payload.field === "lifecycleStatus") {
+        return { ...rowState, status: "Scheduled", scheduledOn: "2026-07-15" };
+      }
+      return { ...rowState, scheduledOn: "2026-07-15" };
+    });
+
+    const onPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch: () => undefined,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(42, applySchedulePatch("2026-07-15", false));
+    });
+
+    expect(onPatch).toHaveBeenCalledWith(
+      42,
+      expect.objectContaining({ scheduledOn: "2026-07-15", status: "Scheduled" }),
+    );
+    await waitFor(() => expect(patchBoardField).toHaveBeenCalled());
+    expect(patchBoardField).toHaveBeenCalledWith(
+      42,
+      expect.objectContaining({ field: "lifecycleStatus", value: "Scheduled" }),
+    );
+  });
+});
+
+describe("applySchedulePatch isAddOn optimistic clear", () => {
+  it("clears isAddOn when schedule is cleared", () => {
+    expect(applySchedulePatch("", false)).toMatchObject({
+      scheduledOn: "",
+      targetWeek: "",
+      scheduleWeekOnly: false,
+      isAddOn: false,
+    });
+  });
+
+  it("does not set isAddOn on day or week moves (BE response owns it)", () => {
+    expect(applySchedulePatch("2026-07-15", false).isAddOn).toBeUndefined();
+    expect(applySchedulePatch("2026-07-13", true).isAddOn).toBeUndefined();
+  });
+
+  it("keeps range end/mode optimistic while landing on the start day", () => {
+    expect(applyScheduleRangePatch("2026-06-08", "2026-06-12")).toMatchObject({
+      scheduledOn: "2026-06-08",
+      scheduleEnd: "2026-06-12",
+      schedMode: "range",
+      scheduleWeekOnly: false,
+      targetWeek: "",
+    });
+  });
+});
+
+describe("useWorkOrderTableMutations schedule isAddOn from BE", () => {
+  let rowState: WorkOrderTableRow;
+
+  beforeEach(() => {
+    getById.mockReset();
+    update.mockReset();
+    patchBoardField.mockReset();
+    rowState = { ...BASE_ROW, isAddOn: false, scheduledOn: "2026-06-01" };
+  });
+
+  function mockSchedulePatchReturning(isAddOn: boolean) {
+    patchBoardField.mockImplementation(
+      async (
+        _id: unknown,
+        payload: { field: string; value?: string | null; workOrderVersion: string },
+      ) => {
+        if (payload.field === "scheduledDate") {
+          rowState = {
+            ...rowState,
+            scheduledOn: typeof payload.value === "string" ? payload.value : "",
+            isAddOn,
+            rowVersion: `${payload.workOrderVersion}-sched`,
+          };
+        } else {
+          rowState = {
+            ...rowState,
+            rowVersion: `${payload.workOrderVersion}-noop`,
+          };
+        }
+        return { ...rowState };
+      },
+    );
+  }
+
+  it("applies isAddOn ON when schedule patch response flips Add-On on", async () => {
+    mockSchedulePatchReturning(true);
+
+    const onPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch: () => undefined,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(42, applySchedulePatch("2026-07-15", false));
+    });
+
+    await waitFor(() =>
+      expect(onPatch).toHaveBeenCalledWith(
+        42,
+        expect.objectContaining({ scheduledOn: "2026-07-15", isAddOn: true }),
+      ),
+    );
+  });
+
+  it("applies isAddOn OFF when schedule patch response flips Add-On off", async () => {
+    rowState = { ...rowState, isAddOn: true, scheduledOn: "2026-07-15" };
+    mockSchedulePatchReturning(false);
+
+    const onPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch: () => undefined,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(42, applySchedulePatch("2026-06-03", false));
+    });
+
+    await waitFor(() =>
+      expect(onPatch).toHaveBeenCalledWith(
+        42,
+        expect.objectContaining({ scheduledOn: "2026-06-03", isAddOn: false }),
+      ),
+    );
+  });
+
+  it("applies isAddOn false when schedule clear response clears Add-On", async () => {
+    rowState = { ...rowState, isAddOn: true, scheduledOn: "2026-07-15" };
+    mockSchedulePatchReturning(false);
+
+    const onPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch: () => undefined,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(42, applySchedulePatch("", false));
+    });
+
+    await waitFor(() =>
+      expect(onPatch).toHaveBeenCalledWith(
+        42,
+        expect.objectContaining({ scheduledOn: "", isAddOn: false }),
+      ),
+    );
+  });
+});
+
+describe("useWorkOrderTableMutations vendor assignment round-trip", () => {
+  let rowState: WorkOrderTableRow;
+
+  beforeEach(() => {
+    getById.mockReset();
+    update.mockReset();
+    patchBoardField.mockReset();
+    rowState = {
+      ...BASE_ROW,
+      vendorId: "1",
+      company: "",
+      tech: "",
+      completedDate: "2026-07-15",
+      docStatus: "Yes",
+      mediaCount: 1,
+      woNumber: "20260623001",
+      primaryDispatchStatus: "Refused",
+      primaryDispatchId: 10,
+      dispatchRowVersion: "disp-v1",
+    };
+  });
+
+  it("keeps Company off the gap list when vendor PATCH returns a Pending assignment", async () => {
+    const returnedRow = mapWorkOrderTableRow({
+      id: 42,
+      VendorId: 9,
+      VendorName: "New Co",
+      PrimaryDispatchStatus: "Pending",
+      PrimaryDispatchId: 11,
+      DispatcherId: "d1",
+      DispatcherName: "Dispatcher",
+      CompletedDate: "2026-07-15",
+      InternalWONumber: "20260623001",
+      PM: "HVAC",
+      DocStatus: "Yes",
+      MediaCount: 1,
+      WorkOrderType: "PM",
+    });
+    patchBoardField.mockResolvedValue(returnedRow);
+
+    const onPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch: () => undefined,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(
+        42,
+        toVendorTablePatch({
+          vendorId: "9",
+          company: "New Co",
+          tech: "",
+          techPhone: "",
+        }),
+      );
+    });
+
+    await waitFor(() =>
+      expect(onPatch).toHaveBeenCalledWith(
+        42,
+        expect.objectContaining({
+          primaryDispatchStatus: "Pending",
+          primaryDispatchId: 11,
+          vendorId: "9",
+        }),
+      ),
+    );
+
+    expect(patchBoardField).toHaveBeenCalledWith(
+      42,
+      expect.objectContaining({
+        field: "vendorId",
+        value: "9",
+        dispatchVersion: "disp-v1",
+        primaryDispatchId: 10,
+      }),
+    );
+    const payload = patchBoardField.mock.calls[0]?.[1] as Record<string, unknown>;
+    expect(payload).not.toHaveProperty("primaryDispatchStatus");
+    expect(payload.primaryDispatchId).toBe(10);
+    expect(returnedRow.primaryDispatchId).not.toBe(10);
+    expect(getClosabilityGaps(tableRowToClosabilityInput(returnedRow))).not.toContain("Company");
+  });
+
+  it("keeps a Company gap when vendor PATCH still returns Refused", async () => {
+    const returnedRow = mapWorkOrderTableRow({
+      id: 42,
+      VendorId: 9,
+      VendorName: "New Co",
+      PrimaryDispatchStatus: "Refused",
+      PrimaryDispatchId: 10,
+    });
+    patchBoardField.mockResolvedValue(returnedRow);
+
+    const onPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch: () => undefined,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(
+        42,
+        toVendorTablePatch({
+          vendorId: "9",
+          company: "New Co",
+          tech: "",
+          techPhone: "",
+        }),
+      );
+    });
+
+    await waitFor(() =>
+      expect(onPatch).toHaveBeenCalledWith(
+        42,
+        expect.objectContaining({ primaryDispatchStatus: "Refused" }),
+      ),
+    );
+    expect(getClosabilityGaps(tableRowToClosabilityInput(returnedRow))).toContain("Company");
+  });
+
+  it("omits non-positive primaryDispatchId from the vendor PATCH payload", async () => {
+    rowState = { ...rowState, primaryDispatchId: 0 };
+    const returnedRow = mapWorkOrderTableRow({
+      id: 42,
+      VendorId: 9,
+      VendorName: "New Co",
+      PrimaryDispatchStatus: "Pending",
+      PrimaryDispatchId: 11,
+    });
+    patchBoardField.mockResolvedValue(returnedRow);
+
+    const onPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch: () => undefined,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(
+        42,
+        toVendorTablePatch({
+          vendorId: "9",
+          company: "New Co",
+          tech: "",
+          techPhone: "",
+        }),
+      );
+    });
+
+    await waitFor(() => expect(patchBoardField).toHaveBeenCalled());
+    const payload = patchBoardField.mock.calls[0]?.[1] as Record<string, unknown>;
+    expect(payload).toMatchObject({
+      field: "vendorId",
+      value: "9",
+      dispatchVersion: "disp-v1",
+    });
+    expect(payload).not.toHaveProperty("primaryDispatchId");
+  });
+});
+
+describe("useWorkOrderTableMutations patchField success callbacks", () => {
+  beforeEach(() => {
+    getById.mockReset();
+    update.mockReset();
+    patchBoardField.mockReset();
+  });
+
+  it("invokes each onSuccess when two work orders overlap", async () => {
+    const rows = new Map<string, WorkOrderTableRow>([
+      ["1", { ...BASE_ROW, id: 1, rowVersion: "v1" }],
+      ["2", { ...BASE_ROW, id: 2, rowVersion: "v2" }],
+    ]);
+
+    let releaseFirst: () => void = () => undefined;
+    const firstGate = new Promise<void>((resolve) => {
+      releaseFirst = resolve;
+    });
+
+    patchBoardField.mockImplementation(async (id: unknown) => {
+      if (String(id) === "1") await firstGate;
+      const current = rows.get(String(id));
+      if (!current) throw new Error("missing row");
+      const next = { ...current, rowVersion: `${current.rowVersion}-n` };
+      rows.set(String(id), next);
+      return next;
+    });
+
+    const onSuccessFirst = vi.fn();
+    const onSuccessSecond = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch: () => undefined,
+          clearPatch: () => undefined,
+          getRow: (id) => rows.get(String(id)),
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(1, { dispatcherId: "d2" }, { onSuccess: onSuccessFirst });
+      result.current.patchField(2, { dispatcherId: "d3" }, { onSuccess: onSuccessSecond });
+    });
+
+    await waitFor(() => expect(onSuccessSecond).toHaveBeenCalledTimes(1));
+    expect(onSuccessFirst).not.toHaveBeenCalled();
+
+    releaseFirst();
+    await waitFor(() => expect(onSuccessFirst).toHaveBeenCalledTimes(1));
+  });
+});
+
+describe("useWorkOrderTableMutations apptTime clear", () => {
+  it("patches empty apptTime and keeps the appointment date on refetch", async () => {
+    const datedRow: WorkOrderTableRow = {
+      ...BASE_ROW,
+      scheduledOn: "2026-06-25",
+      apptStart: "09:00",
+      apptEnd: "11:00",
+      apptTime: "09:00 – 11:00",
+      vendorId: "7",
+      primaryDispatchId: 10,
+      dispatchRowVersion: "disp-v1",
+    };
+    const clearedRow: WorkOrderTableRow = {
+      ...datedRow,
+      apptStart: "",
+      apptEnd: "",
+      apptTime: "",
+      rowVersion: "wo-v2",
+    };
+    patchBoardField.mockReset();
+    patchBoardField.mockResolvedValue(clearedRow);
+
+    const onPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch: () => undefined,
+          getRow: () => datedRow,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(42, { apptTime: "" });
+    });
+
+    await waitFor(() =>
+      expect(onPatch).toHaveBeenCalledWith(
+        42,
+        expect.objectContaining({
+          apptTime: "",
+          scheduledOn: "2026-06-25",
+        }),
+      ),
+    );
+
+    expect(patchBoardField).toHaveBeenCalledWith(
+      42,
+      expect.objectContaining({
+        field: "apptTime",
+        value: "",
+        workOrderVersion: "AAAAAAA=",
+        dispatchVersion: "disp-v1",
+        primaryDispatchId: 10,
+      }),
+    );
+  });
+});
+
+describe("useWorkOrderTableMutations type and severity", () => {
+  let rowState: WorkOrderTableRow;
+
+  beforeEach(() => {
+    getById.mockReset();
+    update.mockReset();
+    patchBoardField.mockReset();
+    rowState = { ...BASE_ROW, type: "PM", severity: null };
+  });
+
+  it("patches severity before workOrderType and merges the API row", async () => {
+    const fields: string[] = [];
+    patchBoardField.mockImplementation(
+      async (
+        _id: unknown,
+        payload: { field: string; value?: string | null; workOrderVersion: string },
+      ) => {
+        fields.push(payload.field);
+        if (payload.field === "severity") {
+          rowState = {
+            ...rowState,
+            severity: payload.value ? (Number(payload.value) as 1) : null,
+            rowVersion: `${payload.workOrderVersion}-sev`,
+          };
+        }
+        if (payload.field === "workOrderType") {
+          rowState = {
+            ...rowState,
+            type: (payload.value as WorkOrderTableRow["type"]) || rowState.type,
+            rowVersion: `${payload.workOrderVersion}-type`,
+          };
+        }
+        return { ...rowState };
+      },
+    );
+
+    const onPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch: () => undefined,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(42, { type: "Emergency", severity: 1 });
+    });
+
+    await waitFor(() => expect(fields).toEqual(["severity", "workOrderType"]));
+    expect(onPatch).toHaveBeenCalledWith(
+      42,
+      expect.objectContaining({ type: "Emergency", severity: 1 }),
+    );
+  });
+
+  it("applies currentState on 409 conflict instead of clearing", async () => {
+    const currentState = { ...BASE_ROW, type: "PM" as const, severity: null };
+    patchBoardField.mockRejectedValue(new BoardPatchConflictError("stale", currentState));
+
+    const onPatch = vi.fn();
+    const clearPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(42, { type: "Emergency", severity: 1 });
+    });
+
+    await waitFor(() =>
+      expect(onPatch).toHaveBeenCalledWith(42, expect.objectContaining({ type: "PM" })),
+    );
+    expect(clearPatch).not.toHaveBeenCalled();
+  });
+
+  it("rolls back with clearPatch on a generic type patch error", async () => {
+    patchBoardField.mockRejectedValue(new Error("network"));
+
+    const onPatch = vi.fn();
+    const clearPatch = vi.fn();
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch,
+          clearPatch,
+          getRow: () => rowState,
+        }),
+      { wrapper: makeWrapper() },
+    );
+
+    act(() => {
+      result.current.patchField(42, { type: "Emergency", severity: 1 });
+    });
+
+    await waitFor(() => expect(clearPatch).toHaveBeenCalledWith(42));
+  });
+});
+
+describe("useWorkOrderTableMutations audit cache refresh", () => {
+  it("invalidates work-order queries after a successful status transition", async () => {
+    const client = new QueryClient({
+      defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+    });
+    const invalidateSpy = vi.spyOn(client, "invalidateQueries");
+    const nextRow = { ...BASE_ROW, status: "En Route" as const, rowVersion: "wo-v2" };
+    patchBoardField.mockReset();
+    patchBoardField.mockResolvedValue(nextRow);
+
+    const { result } = renderHook(
+      () =>
+        useWorkOrderTableMutations({
+          onPatch: vi.fn(),
+          clearPatch: () => undefined,
+          getRow: () => BASE_ROW,
+        }),
+      {
+        wrapper: ({ children }: { children: ReactNode }) => (
+          <QueryClientProvider client={client}>{children}</QueryClientProvider>
+        ),
+      },
+    );
+
+    act(() => {
+      result.current.patchField(42, { status: "En Route" });
+    });
+
+    await waitFor(() =>
+      expect(invalidateSpy).toHaveBeenCalledWith(
+        expect.objectContaining({ queryKey: queryKeys.workOrders.all }),
+      ),
+    );
+  });
+});
diff --git a/src/test/domain/work-orders/utils/advanced-filters-utils.test.ts b/src/test/domain/work-orders/utils/advanced-filters-utils.test.ts
new file mode 100644
index 00000000..e26229d7
--- /dev/null
+++ b/src/test/domain/work-orders/utils/advanced-filters-utils.test.ts
@@ -0,0 +1,223 @@
+import { describe, expect, it } from "vitest";
+import {
+  ASSIGNEE_FILTER_UNASSIGNED,
+  EMPTY_ADVANCED_FILTERS,
+  type WorkOrderAdvancedFilters,
+} from "@/domain/work-orders/types/work-order-advanced-filters";
+import {
+  buildAdvancedFilterChips,
+  clearAdvancedFilterGroup,
+  cloneAdvancedFilters,
+  countAdvancedFilters,
+} from "@/domain/work-orders/utils/advanced-filters-utils";
+
+function withSites(...sites: string[]): WorkOrderAdvancedFilters {
+  return {
+    ...cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS),
+    sites: new Set(sites),
+  };
+}
+
+describe("countAdvancedFilters", () => {
+  it("returns 0 for default empty filters", () => {
+    expect(countAdvancedFilters(EMPTY_ADVANCED_FILTERS)).toBe(0);
+  });
+
+  it("counts non-default date range as one active group", () => {
+    const filters = {
+      ...cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS),
+      dateRange: "last-week" as const,
+    };
+    expect(countAdvancedFilters(filters)).toBe(1);
+  });
+
+  it("counts each active filter group once", () => {
+    const filters = {
+      ...withSites("1", "2"),
+      types: new Set(["PM" as const]),
+      statuses: new Set(["Pending" as const]),
+    };
+    expect(countAdvancedFilters(filters)).toBe(3);
+  });
+
+  it("counts Unscheduled +1 with the this-week default still in place", () => {
+    const filters = {
+      ...cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS),
+      unscheduledOnly: true,
+    };
+    expect(filters.dateRange).toBe("this-week");
+    expect(countAdvancedFilters(filters)).toBe(1);
+  });
+
+  it("counts Unscheduled independently of a non-default date range", () => {
+    const filters = {
+      ...cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS),
+      dateRange: "last-week" as const,
+      unscheduledOnly: true,
+    };
+    expect(countAdvancedFilters(filters)).toBe(2);
+  });
+});
+
+describe("buildAdvancedFilterChips", () => {
+  it("shows site labels when two or fewer sites are selected", () => {
+    const chips = buildAdvancedFilterChips(withSites("1"), {
+      siteNameOf: (id) => (id === "1" ? "DFW8" : id),
+    });
+
+    expect(chips).toHaveLength(1);
+    expect(chips[0]).toMatchObject({
+      key: "sites",
+      group: "Site",
+      value: "DFW8",
+    });
+  });
+
+  it("shows a count badge when more than two sites are selected", () => {
+    const chips = buildAdvancedFilterChips(withSites("1", "2", "3"));
+
+    expect(chips).toHaveLength(1);
+    expect(chips[0]).toMatchObject({
+      key: "sites",
+      group: "Site",
+      count: 3,
+    });
+  });
+
+  it("builds a Date / Unscheduled chip whose clear only turns the toggle off", () => {
+    const filters = {
+      ...cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS),
+      dateRange: "last-week" as const,
+      unscheduledOnly: true,
+    };
+
+    const chips = buildAdvancedFilterChips(filters);
+    const unscheduled = chips.find((chip) => chip.key === "unscheduled");
+    expect(unscheduled).toMatchObject({
+      key: "unscheduled",
+      group: "Date",
+      value: "Unscheduled",
+    });
+    expect(chips.some((chip) => chip.key === "date" && chip.value === "Last week")).toBe(true);
+
+    const cleared = unscheduled?.clear(filters);
+    expect(cleared?.unscheduledOnly).toBe(false);
+    expect(cleared?.dateRange).toBe("last-week");
+  });
+
+  it("creates a separate unassigned chip for dispatchers", () => {
+    const filters = {
+      ...cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS),
+      dispatchers: new Set([ASSIGNEE_FILTER_UNASSIGNED, "42"]),
+    };
+
+    const chips = buildAdvancedFilterChips(filters, {
+      dispatcherNameOf: (id) => (id === "42" ? "Sarah Chen" : id),
+    });
+
+    expect(
+      chips.some((chip) => chip.key === "disp-unassigned" && chip.value === "Unassigned"),
+    ).toBe(true);
+    expect(chips.some((chip) => chip.key === "disp" && chip.value === "Sarah Chen")).toBe(true);
+  });
+});
+
+describe("clearAdvancedFilterGroup", () => {
+  it("removes only the targeted filter group", () => {
+    const filters = {
+      ...withSites("1"),
+      types: new Set(["PM" as const]),
+    };
+
+    const next = clearAdvancedFilterGroup(filters, "sites");
+
+    expect(next?.sites.size).toBe(0);
+    expect(next?.types.has("PM")).toBe(true);
+  });
+
+  it("returns null when clearing the last active group", () => {
+    const next = clearAdvancedFilterGroup(withSites("1"), "sites");
+    expect(next).toBeNull();
+  });
+
+  it("clears only Unscheduled and returns null when it was the last chip", () => {
+    const filters = {
+      ...cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS),
+      unscheduledOnly: true,
+    };
+    const next = clearAdvancedFilterGroup(filters, "unscheduled");
+    expect(next).toBeNull();
+  });
+
+  it("builds chips for severity, indicators, flags, internal WO#, and uplift", () => {
+    const filters = {
+      ...cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS),
+      severities: new Set([1, 2] as const),
+      rescheduled: true,
+      flagColors: new Set(["#EF4444"]),
+      internalOnly: true,
+      hasUplift: true,
+      upliftStatuses: new Set(["pending" as const]),
+    };
+
+    const chips = buildAdvancedFilterChips(filters);
+    expect(chips.some((c) => c.key === "severity" && c.value === "SEV 1, SEV 2")).toBe(true);
+    expect(chips.some((c) => c.key === "rescheduled" && c.value === "Rescheduled")).toBe(true);
+    expect(chips.some((c) => c.key === "flags" && c.value === "Red")).toBe(true);
+    expect(chips.some((c) => c.key === "internal" && c.value === "Internal (SH)")).toBe(true);
+    expect(chips.some((c) => c.key === "uplift" && c.value === "Pending")).toBe(true);
+  });
+
+  it("builds chips for service, carried over, add-on, and completion doc", () => {
+    const filters = {
+      ...cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS),
+      pmTypes: new Set(["HVAC"]),
+      carriedOver: true,
+      addOn: true,
+      docs: new Set(["No" as const, "Yes" as const]),
+    };
+
+    const chips = buildAdvancedFilterChips(filters);
+    expect(chips.some((c) => c.key === "pm" && c.group === "Service" && c.value === "HVAC")).toBe(
+      true,
+    );
+    expect(chips.some((c) => c.key === "carriedover" && c.value === "Carried Over")).toBe(true);
+    expect(chips.some((c) => c.key === "addon" && c.value === "Add-On")).toBe(true);
+    expect(chips.some((c) => c.key === "doc" && c.group === "Comp doc")).toBe(true);
+  });
+
+  it("builds an Aveta required chip", () => {
+    const filters = {
+      ...cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS),
+      avetaOnly: true,
+    };
+
+    const chips = buildAdvancedFilterChips(filters);
+    expect(
+      chips.some((c) => c.key === "aveta" && c.group === "Aveta" && c.value === "Required"),
+    ).toBe(true);
+  });
+
+  it("clears uplift chip and drops hasUplift with statuses", () => {
+    const filters = {
+      ...cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS),
+      hasUplift: true,
+      upliftStatuses: new Set(["pending" as const, "approved" as const]),
+    };
+
+    const next = clearAdvancedFilterGroup(filters, "uplift");
+    expect(next).toBeNull();
+  });
+
+  it("clears indicator chip without affecting other groups", () => {
+    const filters = {
+      ...cloneAdvancedFilters(EMPTY_ADVANCED_FILTERS),
+      rescheduled: true,
+      severities: new Set([3] as const),
+    };
+
+    const next = clearAdvancedFilterGroup(filters, "rescheduled");
+    expect(next?.rescheduled).toBe(false);
+    expect(next?.severities.has(3)).toBe(true);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/board-query-params.test.ts b/src/test/domain/work-orders/utils/board-query-params.test.ts
new file mode 100644
index 00000000..486cd60e
--- /dev/null
+++ b/src/test/domain/work-orders/utils/board-query-params.test.ts
@@ -0,0 +1,435 @@
+import { describe, expect, it } from "vitest";
+import { ASSIGNEE_FILTER_UNASSIGNED } from "@/domain/work-orders/types/work-order-list";
+import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
+import {
+  DOC_STATUS_API,
+  LIFECYCLE_STATUS_API,
+  WORK_ORDER_TYPE_API,
+} from "@/domain/work-orders/types/work-order-board";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import { queryKeys } from "@/infra/query-key/query-key";
+import {
+  BOARD_SEARCH_MAX_PAGE_SIZE,
+  buildBoardSearchParamsRecord,
+  toBoardQueryParams,
+  toBoardSearchQueryParams,
+  toUnassignedQueueQueryParams,
+  UNASSIGNED_QUEUE_DATE_FROM,
+  UNASSIGNED_QUEUE_DATE_TO,
+} from "@/domain/work-orders/utils/board-query-params";
+
+describe("toBoardQueryParams", () => {
+  const baseBar = {
+    weekMonday: "2026-07-13",
+    dispatcherIds: new Set<string>(),
+    types: new Set<WOType>(),
+  };
+
+  it("omits search when shorter than 2 characters", () => {
+    const params = toBoardQueryParams(baseBar, "B");
+    expect(params.search).toBeUndefined();
+    expect(params.weekStart).toBe("2026-07-13");
+    expect(params.weekEnd).toBe("2026-07-17");
+  });
+
+  it("includes trimmed search when length >= 2", () => {
+    const params = toBoardQueryParams(baseBar, "  BK5  ");
+    expect(params.search).toBe("BK5");
+  });
+
+  it("maps unassigned dispatcher to __unassigned__", () => {
+    const params = toBoardQueryParams(
+      {
+        ...baseBar,
+        dispatcherIds: new Set([ASSIGNEE_FILTER_UNASSIGNED, "user-guid"]),
+      },
+      "",
+    );
+    expect(params.dispatchers).toEqual(["__unassigned__", "user-guid"]);
+  });
+
+  it("maps PM type filter to API types", () => {
+    const params = toBoardQueryParams({ ...baseBar, types: new Set(["PM"]) }, "");
+    expect(params.types).toEqual([WORK_ORDER_TYPE_API.PM]);
+    expect(params.overdue).toBeUndefined();
+  });
+
+  it("maps multiple types as union query params", () => {
+    const params = toBoardQueryParams({ ...baseBar, types: new Set(["PM", "Emergency"]) }, "");
+    expect(params.types).toEqual([WORK_ORDER_TYPE_API.PM, WORK_ORDER_TYPE_API.Emergency]);
+    expect(params.overdue).toBeUndefined();
+  });
+
+  it("maps Overdue bar filter to overdue=true without types", () => {
+    const params = toBoardQueryParams({ ...baseBar, types: new Set(["Overdue"]) }, "");
+    expect(params.overdue).toBe(true);
+    expect(params.types).toBeUndefined();
+  });
+
+  it("maps Overdue with real types as OR (types + overdue)", () => {
+    const params = toBoardQueryParams({ ...baseBar, types: new Set(["PM", "Overdue"]) }, "");
+    expect(params.types).toEqual([WORK_ORDER_TYPE_API.PM]);
+    expect(params.overdue).toBe(true);
+  });
+
+  it("omits types when the set is empty", () => {
+    const params = toBoardQueryParams(baseBar, "");
+    expect(params.types).toBeUndefined();
+    expect(params.overdue).toBeUndefined();
+  });
+});
+
+describe("toBoardSearchQueryParams", () => {
+  it("defaults page to 0 (0-based pagination)", () => {
+    const params = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS },
+    });
+    expect(params.page).toBe(0);
+    expect(params.pageSize).toBe(BOARD_SEARCH_MAX_PAGE_SIZE);
+    expect(params.datePreset).toBe("Custom");
+    expect(params.dateFrom).toBe("2000-01-01");
+    expect(params.dateTo).toBe("2099-12-31");
+    expect(params.unscheduledOnly).toBeUndefined();
+  });
+
+  it("forwards chrome pageSize 50 instead of the search max", () => {
+    const params = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS },
+      page: 1,
+      pageSize: 50,
+    });
+    expect(params.page).toBe(1);
+    expect(params.pageSize).toBe(50);
+  });
+
+  it("maps date presets to PascalCase API values", () => {
+    const params = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS, dateRange: "last-3-months" },
+    });
+    expect(params.datePreset).toBe("Last3Months");
+  });
+
+  it("includes dateFrom/dateTo only for Custom preset", () => {
+    const custom = toBoardSearchQueryParams({
+      filters: {
+        ...EMPTY_ADVANCED_FILTERS,
+        dateRange: "custom",
+        customFrom: "2026-06-01",
+        customTo: "2026-06-30",
+      },
+    });
+    expect(custom.datePreset).toBe("Custom");
+    expect(custom.dateFrom).toBe("2026-06-01");
+    expect(custom.dateTo).toBe("2026-06-30");
+
+    const thisWeek = toBoardSearchQueryParams({
+      filters: {
+        ...EMPTY_ADVANCED_FILTERS,
+        dateRange: "this-week",
+        customFrom: "2026-06-01",
+        customTo: "2026-06-30",
+      },
+    });
+    expect(thisWeek.datePreset).toBe("Custom");
+    expect(thisWeek.dateFrom).toBe("2000-01-01");
+    expect(thisWeek.dateTo).toBe("2099-12-31");
+  });
+
+  it("sends unscheduledOnly=true with no faked Custom date window (SH-338)", () => {
+    const withDefaultRange = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS, unscheduledOnly: true },
+    });
+    expect(withDefaultRange.unscheduledOnly).toBe(true);
+    expect(withDefaultRange.datePreset).toBeUndefined();
+    expect(withDefaultRange.dateFrom).toBeUndefined();
+    expect(withDefaultRange.dateTo).toBeUndefined();
+
+    const overridingLastWeek = toBoardSearchQueryParams({
+      filters: {
+        ...EMPTY_ADVANCED_FILTERS,
+        dateRange: "last-week",
+        unscheduledOnly: true,
+      },
+    });
+    expect(overridingLastWeek.unscheduledOnly).toBe(true);
+    expect(overridingLastWeek.datePreset).toBeUndefined();
+    expect(overridingLastWeek.dateFrom).toBeUndefined();
+    expect(overridingLastWeek.dateTo).toBeUndefined();
+
+    const record = buildBoardSearchParamsRecord(overridingLastWeek);
+    expect(record.unscheduledOnly).toBe(true);
+    expect(record).not.toHaveProperty("datePreset");
+    expect(record).not.toHaveProperty("dateFrom");
+    expect(record).not.toHaveProperty("dateTo");
+  });
+
+  it("keeps applying every other facet alongside unscheduledOnly", () => {
+    const params = toBoardSearchQueryParams({
+      filters: {
+        ...EMPTY_ADVANCED_FILTERS,
+        unscheduledOnly: true,
+        statuses: new Set(["Scheduled"]),
+        severities: new Set([4]),
+        pmTypes: new Set(["HVAC"]),
+      },
+    });
+    expect(params.unscheduledOnly).toBe(true);
+    expect(params.statuses).toEqual([LIFECYCLE_STATUS_API.Scheduled]);
+    expect(params.severities).toEqual([4]);
+    expect(params.pmTypes).toEqual(["HVAC"]);
+  });
+
+  it("omits unscheduledOnly and keeps the wide Custom default when the toggle is off", () => {
+    const params = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS, dateRange: "last-week" },
+    });
+    expect(params.unscheduledOnly).toBeUndefined();
+    expect(params.datePreset).toBe("LastWeek");
+    expect(buildBoardSearchParamsRecord(params)).not.toHaveProperty("unscheduledOnly");
+  });
+
+  it("maps Overdue-only advanced filter to overdue=true without types", () => {
+    const params = toBoardSearchQueryParams({
+      filters: {
+        ...EMPTY_ADVANCED_FILTERS,
+        types: new Set(["Overdue"]),
+      },
+    });
+    expect(params.overdue).toBe(true);
+    expect(params.types).toBeUndefined();
+  });
+
+  it("maps Overdue with real types as OR (types + overdue)", () => {
+    const params = toBoardSearchQueryParams({
+      filters: {
+        ...EMPTY_ADVANCED_FILTERS,
+        types: new Set(["PM", "Overdue"]),
+      },
+    });
+    expect(params.types).toEqual([WORK_ORDER_TYPE_API.PM]);
+    expect(params.overdue).toBe(true);
+  });
+
+  it("resolves vendor company names to vendorIds", () => {
+    const params = toBoardSearchQueryParams({
+      filters: {
+        ...EMPTY_ADVANCED_FILTERS,
+        vendorTechs: new Set(["Acme HVAC", "Unknown"]),
+      },
+      vendorIdsByCompanyName: new Map([["Acme HVAC", 12]]),
+    });
+    expect(params.vendorIds).toEqual([12]);
+  });
+
+  it("omits empty filter arrays", () => {
+    const params = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS },
+      search: "x",
+    });
+    expect(params.search).toBeUndefined();
+    expect(params.sites).toBeUndefined();
+    expect(params.types).toBeUndefined();
+    expect(params.overdue).toBeUndefined();
+    expect(params.dispatchers).toBeUndefined();
+    expect(params.statuses).toBeUndefined();
+    expect(params.pmTypes).toBeUndefined();
+    expect(params.vendorIds).toBeUndefined();
+    expect(params.docStatuses).toBeUndefined();
+    expect(params.severities).toBeUndefined();
+    expect(params.rescheduled).toBeUndefined();
+    expect(params.carriedOver).toBeUndefined();
+    expect(params.addOn).toBeUndefined();
+    expect(params.flagColors).toBeUndefined();
+    expect(params.internalOnly).toBeUndefined();
+    expect(params.hasUplift).toBeUndefined();
+    expect(params.upliftStatuses).toBeUndefined();
+    expect(params.unscheduledOnly).toBeUndefined();
+  });
+
+  it("maps service types and completion docs onto board search params", () => {
+    const params = toBoardSearchQueryParams({
+      filters: {
+        ...EMPTY_ADVANCED_FILTERS,
+        pmTypes: new Set(["HVAC", "Electrical"]),
+        docs: new Set(["No", "Yes", "NN"]),
+      },
+    });
+    expect(params.pmTypes).toEqual(["HVAC", "Electrical"]);
+    expect(params.docStatuses).toEqual([
+      DOC_STATUS_API.No,
+      DOC_STATUS_API.Yes,
+      DOC_STATUS_API.NotNeeded,
+    ]);
+  });
+
+  it("maps each extra advanced-filter facet alone onto board search params", () => {
+    const severity = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS, severities: new Set([4]) },
+    });
+    expect(severity.severities).toEqual([4]);
+    expect(severity.carriedOver).toBeUndefined();
+    expect(severity.addOn).toBeUndefined();
+    expect(severity.pmTypes).toBeUndefined();
+    expect(severity.docStatuses).toBeUndefined();
+
+    const carried = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS, carriedOver: true },
+    });
+    expect(carried.carriedOver).toBe(true);
+    expect(carried.severities).toBeUndefined();
+
+    const addOn = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS, addOn: true },
+    });
+    expect(addOn.addOn).toBe(true);
+    expect(addOn.carriedOver).toBeUndefined();
+
+    const aveta = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS, avetaOnly: true },
+    });
+    expect(aveta.avetaOnly).toBe(true);
+
+    const service = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS, pmTypes: new Set(["HVAC"]) },
+    });
+    expect(service.pmTypes).toEqual(["HVAC"]);
+
+    const docs = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS, docs: new Set(["NN"]) },
+    });
+    expect(docs.docStatuses).toEqual([DOC_STATUS_API.NotNeeded]);
+  });
+
+  it("combines extra advanced-filter facets with a status facet on the same request", () => {
+    const params = toBoardSearchQueryParams({
+      filters: {
+        ...EMPTY_ADVANCED_FILTERS,
+        severities: new Set([1]),
+        carriedOver: true,
+        addOn: true,
+        pmTypes: new Set(["HVAC"]),
+        docs: new Set(["Yes"]),
+        statuses: new Set(["Scheduled"]),
+      },
+    });
+    expect(params.severities).toEqual([1]);
+    expect(params.carriedOver).toBe(true);
+    expect(params.addOn).toBe(true);
+    expect(params.pmTypes).toEqual(["HVAC"]);
+    expect(params.docStatuses).toEqual([DOC_STATUS_API.Yes]);
+    expect(params.statuses).toEqual([LIFECYCLE_STATUS_API.Scheduled]);
+    const record = buildBoardSearchParamsRecord(params);
+    expect(record.severities).toEqual([1]);
+    expect(record.carriedOver).toBe(true);
+    expect(record.addOn).toBe(true);
+    expect(record.pmTypes).toEqual(["HVAC"]);
+    expect(record.docStatuses).toEqual([DOC_STATUS_API.Yes]);
+    expect(record.statuses).toEqual([LIFECYCLE_STATUS_API.Scheduled]);
+  });
+
+  it("maps severity and uplift facets onto board search params", () => {
+    const params = toBoardSearchQueryParams({
+      filters: {
+        ...EMPTY_ADVANCED_FILTERS,
+        severities: new Set([1, 3, 5]),
+        rescheduled: true,
+        carriedOver: true,
+        addOn: true,
+        flagColors: new Set(["#EF4444", "#3B82F6"]),
+        internalOnly: true,
+        hasUplift: true,
+        upliftStatuses: new Set(["pending", "approved"]),
+      },
+    });
+    expect(params.severities).toEqual([1, 3, 5]);
+    expect(params.rescheduled).toBe(true);
+    expect(params.carriedOver).toBe(true);
+    expect(params.addOn).toBe(true);
+    expect(params.flagColors).toEqual(["#EF4444", "#3B82F6"]);
+    expect(params.internalOnly).toBe(true);
+    expect(params.hasUplift).toBe(true);
+    expect(params.upliftStatuses).toEqual(["pending", "approved"]);
+  });
+
+  it("omits upliftStatuses when hasUplift is false", () => {
+    const params = toBoardSearchQueryParams({
+      filters: {
+        ...EMPTY_ADVANCED_FILTERS,
+        hasUplift: false,
+        upliftStatuses: new Set(["pending"]),
+      },
+    });
+    expect(params.hasUplift).toBeUndefined();
+    expect(params.upliftStatuses).toBeUndefined();
+  });
+
+  it("caps pageSize at BOARD_SEARCH_MAX_PAGE_SIZE", () => {
+    const params = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS },
+      pageSize: 500,
+    });
+    expect(params.pageSize).toBe(200);
+  });
+});
+
+describe("buildBoardSearchParamsRecord", () => {
+  it("keeps arrays as repeated-key friendly values (not types[])", () => {
+    const record = buildBoardSearchParamsRecord({
+      weekStart: "2026-07-13",
+      types: [2, 6],
+      overdue: true,
+      dispatchers: ["guid-a", "__unassigned__"],
+      search: "",
+    });
+    expect(record.types).toEqual([2, 6]);
+    expect(record.overdue).toBe(true);
+    expect(record.dispatchers).toEqual(["guid-a", "__unassigned__"]);
+    expect(record.search).toBeUndefined();
+    expect(Object.keys(record)).not.toContain("types[]");
+  });
+});
+
+describe("toUnassignedQueueQueryParams", () => {
+  it("requests unassigned dispatchers with a Custom range, not the weekly board window", () => {
+    const params = toUnassignedQueueQueryParams(2);
+    const record = buildBoardSearchParamsRecord(params);
+
+    expect(params.page).toBe(2);
+    expect(params.pageSize).toBe(BOARD_SEARCH_MAX_PAGE_SIZE);
+    expect(params.dispatchers).toEqual(["__unassigned__"]);
+    expect(params.statuses).not.toContain(7);
+    expect(params.statuses).not.toContain(9);
+    expect(params.datePreset).toBe("Custom");
+    expect(params.dateFrom).toBe(UNASSIGNED_QUEUE_DATE_FROM);
+    expect(params.dateTo).toBe(UNASSIGNED_QUEUE_DATE_TO);
+    expect(record).not.toHaveProperty("weekStart");
+    expect(record).not.toHaveProperty("weekEnd");
+  });
+});
+
+describe("boardSearch query-key isolation", () => {
+  it("separates unscheduledOnly=true from the same facets without it", () => {
+    const without = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS, rescheduled: true },
+    });
+    const withUnscheduled = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS, rescheduled: true, unscheduledOnly: true },
+    });
+
+    expect(queryKeys.workOrders.boardSearch(without)).not.toEqual(
+      queryKeys.workOrders.boardSearch(withUnscheduled),
+    );
+  });
+
+  it("separates pages under the same unscheduledOnly filter", () => {
+    const base = toBoardSearchQueryParams({
+      filters: { ...EMPTY_ADVANCED_FILTERS, unscheduledOnly: true },
+      page: 0,
+    });
+    const pageOne = { ...base, page: 1 };
+
+    expect(queryKeys.workOrders.boardSearch(base)).not.toEqual(
+      queryKeys.workOrders.boardSearch(pageOne),
+    );
+  });
+});
diff --git a/src/test/domain/work-orders/utils/board-row-order-storage.test.ts b/src/test/domain/work-orders/utils/board-row-order-storage.test.ts
new file mode 100644
index 00000000..63d9f984
--- /dev/null
+++ b/src/test/domain/work-orders/utils/board-row-order-storage.test.ts
@@ -0,0 +1,203 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  applyDayRowOrder,
+  applyRowOrderByDay,
+  boardRowOrderStorageKey,
+  loadBoardRowOrder,
+  mergeDayOrder,
+  moveIdToDayOrder,
+  removeIdFromRowOrder,
+  neighborIdForReorder,
+  legacyBoardRowOrderStorageKey,
+  reorderIdsInList,
+  saveBoardRowOrder,
+  transferIdToDestinationWeekOrder,
+} from "@/domain/work-orders/utils/board-row-order-storage";
+
+describe("applyDayRowOrder", () => {
+  const items = [{ id: "a" }, { id: "b" }, { id: "c" }];
+
+  it("returns items unchanged when orderedIds is empty", () => {
+    expect(applyDayRowOrder(items, undefined)).toEqual(items);
+    expect(applyDayRowOrder(items, [])).toEqual(items);
+  });
+
+  it("orders known ids and appends unknowns at the end", () => {
+    expect(applyDayRowOrder(items, ["c", "a"])).toEqual([{ id: "c" }, { id: "a" }, { id: "b" }]);
+  });
+
+  it("ignores stored ids that are not present", () => {
+    expect(applyDayRowOrder(items, ["x", "b", "a"])).toEqual([
+      { id: "b" },
+      { id: "a" },
+      { id: "c" },
+    ]);
+  });
+});
+
+describe("applyRowOrderByDay", () => {
+  it("reorders within each dayGroup without mixing days", () => {
+    const items = [
+      { id: "1", dayGroup: "07/14" },
+      { id: "2", dayGroup: "07/14" },
+      { id: "3", dayGroup: "07/15" },
+      { id: "4", dayGroup: "07/15" },
+    ];
+    const result = applyRowOrderByDay(items, {
+      "07/14": ["2", "1"],
+      "07/15": ["4", "3"],
+    });
+    expect(result.map((r) => r.id)).toEqual(["2", "1", "4", "3"]);
+  });
+});
+
+describe("neighborIdForReorder", () => {
+  const rows = [
+    { id: "a", dayGroup: "07/14" },
+    { id: "b", dayGroup: "07/14" },
+    { id: "c", dayGroup: "07/15" },
+  ];
+
+  it("returns the previous and next id in the same day", () => {
+    expect(neighborIdForReorder(rows, rows[1]!, -1)).toBe("a");
+    expect(neighborIdForReorder(rows, rows[0]!, 1)).toBe("b");
+  });
+
+  it("returns null at the ends of a day or when the row is missing", () => {
+    expect(neighborIdForReorder(rows, rows[0]!, -1)).toBeNull();
+    expect(neighborIdForReorder(rows, rows[2]!, 1)).toBeNull();
+    expect(neighborIdForReorder(rows, { id: "x", dayGroup: "07/14" }, 1)).toBeNull();
+  });
+
+  it("skips neighbors that fail isReorderTarget", () => {
+    const dayRows = [
+      { id: "a", dayGroup: "07/14", locked: false },
+      { id: "b", dayGroup: "07/14", locked: true },
+      { id: "c", dayGroup: "07/14", locked: false },
+    ];
+    expect(neighborIdForReorder(dayRows, dayRows[0]!, 1, (item) => !item.locked)).toBe("c");
+    expect(neighborIdForReorder(dayRows, dayRows[2]!, -1, (item) => !item.locked)).toBe("a");
+    expect(neighborIdForReorder(dayRows, dayRows[0]!, 1, () => false)).toBeNull();
+  });
+});
+
+describe("reorderIdsInList", () => {
+  it("moves drag id to over index", () => {
+    expect(reorderIdsInList(["a", "b", "c"], "a", "c")).toEqual(["b", "c", "a"]);
+    expect(reorderIdsInList(["a", "b", "c"], "c", "a")).toEqual(["c", "a", "b"]);
+  });
+
+  it("returns null when ids are missing or identical", () => {
+    expect(reorderIdsInList(["a", "b"], "a", "a")).toBeNull();
+    expect(reorderIdsInList(["a", "b"], "x", "a")).toBeNull();
+  });
+});
+
+describe("mergeDayOrder", () => {
+  it("keeps hidden ids after the visible block", () => {
+    expect(mergeDayOrder(["a", "b", "c", "d"], ["c", "a"])).toEqual(["c", "a", "b", "d"]);
+  });
+
+  it("returns visible order when there is no previous list", () => {
+    expect(mergeDayOrder(undefined, ["b", "a"])).toEqual(["b", "a"]);
+  });
+});
+
+describe("removeIdFromRowOrder", () => {
+  it("removes the id from every day bucket and drops empty days", () => {
+    const next = removeIdFromRowOrder(
+      { "07/14": ["1", "2"], "07/15": ["1"], __unscheduled__: ["3"] },
+      "1",
+    );
+    expect(next).toEqual({ "07/14": ["2"], __unscheduled__: ["3"] });
+  });
+
+  it("returns the same object when id is absent", () => {
+    const prev = { "07/14": ["1"] };
+    expect(removeIdFromRowOrder(prev, "9")).toBe(prev);
+  });
+});
+
+describe("moveIdToDayOrder", () => {
+  it("moves an id to the end of the destination day", () => {
+    expect(moveIdToDayOrder({ "07/15": ["1", "2"], "07/16": ["3"] }, "1", "07/16")).toEqual({
+      "07/15": ["2"],
+      "07/16": ["3", "1"],
+    });
+  });
+});
+
+describe("transferIdToDestinationWeekOrder", () => {
+  const sourceWeek = "2026-07-13";
+  const destinationWeek = "2026-07-20";
+  const ownerKeySource = boardRowOrderStorageKey(sourceWeek, "u1");
+  const ownerKeyDestination = boardRowOrderStorageKey(destinationWeek, "u1");
+
+  afterEach(() => {
+    localStorage.removeItem(ownerKeySource);
+    localStorage.removeItem(ownerKeyDestination);
+  });
+
+  it("removes the id from the source week and appends it to the destination week day bucket", () => {
+    saveBoardRowOrder(sourceWeek, { "07/15": ["1", "2"] }, "u1");
+    transferIdToDestinationWeekOrder({
+      sourceWeekMonday: sourceWeek,
+      destinationWeekMonday: destinationWeek,
+      ownerId: "u1",
+      id: "1",
+      nextDayGroup: "07/20",
+    });
+    expect(loadBoardRowOrder(sourceWeek, "u1")).toEqual({ "07/15": ["2"] });
+    expect(loadBoardRowOrder(destinationWeek, "u1")).toEqual({ "07/20": ["1"] });
+  });
+});
+
+describe("loadBoardRowOrder / saveBoardRowOrder", () => {
+  const week = "2026-07-13";
+  const key = boardRowOrderStorageKey(week);
+  const ownerKey = boardRowOrderStorageKey(week, "u1");
+  const legacyKey = legacyBoardRowOrderStorageKey(week);
+
+  afterEach(() => {
+    localStorage.removeItem(key);
+    localStorage.removeItem(ownerKey);
+    localStorage.removeItem(legacyKey);
+    vi.restoreAllMocks();
+  });
+
+  it("round-trips a valid order map", () => {
+    const order = { "07/14": ["1", "2"], __unscheduled__: ["9"] };
+    saveBoardRowOrder(week, order);
+    expect(loadBoardRowOrder(week)).toEqual(order);
+  });
+
+  it("reads the legacy unscoped key when the owner key is empty", () => {
+    const order = { "07/14": ["9"] };
+    localStorage.setItem(legacyKey, JSON.stringify(order));
+    expect(loadBoardRowOrder(week, "u1")).toEqual(order);
+  });
+
+  it("keeps owner-scoped maps isolated", () => {
+    saveBoardRowOrder(week, { "07/14": ["1"] }, "u1");
+    saveBoardRowOrder(week, { "07/14": ["2"] }, "u2");
+    expect(loadBoardRowOrder(week, "u1")).toEqual({ "07/14": ["1"] });
+    expect(loadBoardRowOrder(week, "u2")).toEqual({ "07/14": ["2"] });
+  });
+
+  it("returns empty object for invalid JSON payload", () => {
+    localStorage.setItem(key, "{not-json");
+    expect(loadBoardRowOrder(week)).toEqual({});
+  });
+
+  it("returns empty object for malformed shape", () => {
+    localStorage.setItem(key, JSON.stringify({ "07/14": [1, 2] }));
+    expect(loadBoardRowOrder(week)).toEqual({});
+  });
+
+  it("swallows write failures", () => {
+    vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
+      throw new Error("quota");
+    });
+    expect(() => saveBoardRowOrder(week, { "07/14": ["1"] })).not.toThrow();
+  });
+});
diff --git a/src/test/domain/work-orders/utils/carry-over-display.test.ts b/src/test/domain/work-orders/utils/carry-over-display.test.ts
new file mode 100644
index 00000000..00b54dfe
--- /dev/null
+++ b/src/test/domain/work-orders/utils/carry-over-display.test.ts
@@ -0,0 +1,94 @@
+import { describe, expect, it } from "vitest";
+import {
+  applyCarryOverDisplayDayFields,
+  formatCarriedOverHover,
+  isCarryOverDisplayRow,
+  mapCarryOverDisplayDay,
+  resolveCarryOverSourceWeek,
+  shouldShowCarriedOverPill,
+} from "@/domain/work-orders/utils/carry-over-display";
+
+describe("carry-over-display", () => {
+  it("hides the pill below 2 and on terminal statuses", () => {
+    expect(shouldShowCarriedOverPill(1, "Scheduled")).toBe(false);
+    expect(shouldShowCarriedOverPill(2, "Scheduled")).toBe(true);
+    expect(shouldShowCarriedOverPill(3, "Completed")).toBe(false);
+    expect(shouldShowCarriedOverPill(3, "Canceled")).toBe(false);
+  });
+
+  it("formats hover without a source week", () => {
+    expect(formatCarriedOverHover(2)).toBe(
+      "Carried over 2 times — this WO was not completed and moved to the next period",
+    );
+  });
+
+  it("appends the source week label from originalWeek", () => {
+    expect(formatCarriedOverHover(3, "2026-05-04")).toBe(
+      "Carried over 3 times — this WO was not completed and moved to the next period. Source week: 5/4–5/8.",
+    );
+  });
+
+  it("resolves source week from originalWeek, then originalDate, then scheduledOn", () => {
+    expect(resolveCarryOverSourceWeek({ originalWeek: "2026-05-04" })).toBe("2026-05-04");
+    expect(resolveCarryOverSourceWeek({ originalDate: "2026-05-06" })).toBe("2026-05-04");
+    expect(resolveCarryOverSourceWeek({ scheduledOn: "2026-05-13" })).toBe("2026-05-11");
+    expect(resolveCarryOverSourceWeek({})).toBe("");
+  });
+
+  it("treats non-terminal rows scheduled before the viewed week as carry-over", () => {
+    expect(
+      isCarryOverDisplayRow(
+        { scheduledOn: "2026-05-13", status: "Scheduled", carriedOver: 1 },
+        "2026-05-18",
+      ),
+    ).toBe(true);
+    expect(
+      isCarryOverDisplayRow(
+        { scheduledOn: "2026-05-20", status: "Scheduled", carriedOver: 2 },
+        "2026-05-18",
+      ),
+    ).toBe(false);
+    expect(
+      isCarryOverDisplayRow(
+        { scheduledOn: "2026-05-13", status: "Completed", carriedOver: 2 },
+        "2026-05-18",
+      ),
+    ).toBe(false);
+  });
+
+  it("maps the original weekday onto the viewed week and weekends onto Monday", () => {
+    expect(mapCarryOverDisplayDay("2026-05-13", "2026-05-18")).toBe("2026-05-20");
+    expect(mapCarryOverDisplayDay("2026-05-16", "2026-05-18")).toBe("2026-05-18");
+    expect(mapCarryOverDisplayDay("2026-05-17", "2026-05-18")).toBe("2026-05-18");
+  });
+
+  it("remaps dayGroup to the viewed weekday without changing scheduledOn", () => {
+    const row = {
+      scheduledOn: "2026-05-13",
+      status: "Scheduled",
+      dayGroup: "05/13",
+      dayLabel: "WED · 05/13",
+    };
+    const next = applyCarryOverDisplayDayFields(row, "2026-05-18");
+    expect(next.scheduledOn).toBe("2026-05-13");
+    expect(next.dayGroup).toBe("05/20");
+    expect(next.dayLabel).toBe("WED · 05/20");
+  });
+
+  it("leaves in-week and terminal rows' dayGroup unchanged", () => {
+    const inWeek = {
+      scheduledOn: "2026-05-20",
+      status: "Scheduled",
+      dayGroup: "05/20",
+      dayLabel: "WED · 05/20",
+    };
+    const completed = {
+      scheduledOn: "2026-05-13",
+      status: "Completed",
+      dayGroup: "05/13",
+      dayLabel: "WED · 05/13",
+    };
+    expect(applyCarryOverDisplayDayFields(inWeek, "2026-05-18")).toEqual(inWeek);
+    expect(applyCarryOverDisplayDayFields(completed, "2026-05-18")).toEqual(completed);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/comment-mentions.test.ts b/src/test/domain/work-orders/utils/comment-mentions.test.ts
new file mode 100644
index 00000000..95e03ebc
--- /dev/null
+++ b/src/test/domain/work-orders/utils/comment-mentions.test.ts
@@ -0,0 +1,118 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildCommentBodySegments,
+  encodeMentionToken,
+  extractMentionIds,
+  filterMentionCandidates,
+  findActiveMentionQuery,
+  insertMentionToken,
+  toDisplayText,
+} from "@/domain/work-orders/utils/comment-mentions";
+
+describe("comment-mentions", () => {
+  it("encodes and extracts mention ids from tokens", () => {
+    const token = encodeMentionToken("user-1", "Jane Doe");
+    const text = `Please review ${token} today`;
+
+    expect(text).toBe("Please review @[user-1:Jane Doe] today");
+    expect(extractMentionIds(text)).toEqual(["user-1"]);
+    expect(toDisplayText(text)).toBe("Please review @Jane Doe today");
+  });
+
+  it("builds highlight segments from encoded tokens", () => {
+    const text = `Hi ${encodeMentionToken("42", "Alex Smith")}!`;
+
+    expect(buildCommentBodySegments(text)).toEqual([
+      { type: "text", value: "Hi " },
+      { type: "mention", userId: "42", label: "Alex Smith" },
+      { type: "text", value: "!" },
+    ]);
+  });
+
+  it("highlights plain @names when response mentions are provided", () => {
+    const text = "Ping @Jane Doe about this";
+
+    expect(
+      buildCommentBodySegments(text, ["user-1"], [{ id: "user-1", name: "Jane Doe" }]),
+    ).toEqual([
+      { type: "text", value: "Ping " },
+      { type: "mention", userId: "Jane Doe", label: "Jane Doe" },
+      { type: "text", value: " about this" },
+    ]);
+  });
+
+  it("does not highlight casual @names from the full user roster without mentions", () => {
+    const text = "See @Jane Doe later";
+
+    expect(buildCommentBodySegments(text, undefined, [{ id: "user-1", name: "Jane Doe" }])).toEqual(
+      [{ type: "text", value: "See @Jane Doe later" }],
+    );
+  });
+
+  it("highlights plain @names before encoded tokens when mentioned", () => {
+    const encoded = encodeMentionToken("2", "Bob");
+    const text = `Hi @Jane Doe and ${encoded}`;
+
+    expect(
+      buildCommentBodySegments(
+        text,
+        ["user-1", "2"],
+        [
+          { id: "user-1", name: "Jane Doe" },
+          { id: "2", name: "Bob" },
+        ],
+      ),
+    ).toEqual([
+      { type: "text", value: "Hi " },
+      { type: "mention", userId: "Jane Doe", label: "Jane Doe" },
+      { type: "text", value: " and " },
+      { type: "mention", userId: "2", label: "Bob" },
+    ]);
+  });
+
+  it("does not highlight shorter mention names as prefixes of longer @words", () => {
+    const text = "Check @Annual maintenance with @Ann";
+
+    expect(buildCommentBodySegments(text, ["user-ann"], [{ id: "user-ann", name: "Ann" }])).toEqual(
+      [
+        { type: "text", value: "Check @Annual maintenance with " },
+        { type: "mention", userId: "Ann", label: "Ann" },
+      ],
+    );
+  });
+
+  it("finds active mention query at cursor", () => {
+    const text = "Hello @ja";
+    const query = findActiveMentionQuery(text, text.length);
+
+    expect(query).toEqual({ start: 6, query: "ja" });
+    expect(findActiveMentionQuery("email@test.com", 13)).toBeNull();
+  });
+
+  it("filters mention candidates by query", () => {
+    const candidates = [
+      { id: "1", name: "Jane Doe" },
+      { id: "2", name: "John Smith" },
+    ];
+
+    expect(filterMentionCandidates(candidates, "jo")).toEqual([{ id: "2", name: "John Smith" }]);
+  });
+
+  it("inserts encoded mention token replacing active query", () => {
+    const text = "Hello @ja";
+    const activeQuery = findActiveMentionQuery(text, text.length);
+
+    expect(activeQuery).not.toBeNull();
+    if (!activeQuery) {
+      return;
+    }
+
+    const { nextText, nextCursor } = insertMentionToken(text, activeQuery.start, text.length, {
+      id: "1",
+      name: "Jane Doe",
+    });
+
+    expect(nextText).toBe("Hello @[1:Jane Doe] ");
+    expect(nextCursor).toBe(nextText.length);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/comment-ownership.test.ts b/src/test/domain/work-orders/utils/comment-ownership.test.ts
new file mode 100644
index 00000000..616029ab
--- /dev/null
+++ b/src/test/domain/work-orders/utils/comment-ownership.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import type { WorkOrderComment } from "@/domain/work-orders/types/work-order-detail";
+import { isOwnWorkOrderComment } from "@/domain/work-orders/utils/comment-ownership";
+
+function comment(partial: Partial<WorkOrderComment> = {}): WorkOrderComment {
+  return {
+    id: 1,
+    createdDate: "2026-06-01T12:00:00Z",
+    commenttext: "Hello",
+    commentType: "internal",
+    userName: "Sarah Chen",
+    authorId: "user-1",
+    commenter: null,
+    recordType: "WorkOrder",
+    ...partial,
+  };
+}
+
+describe("isOwnWorkOrderComment", () => {
+  it("returns true when authorId matches current user id", () => {
+    expect(isOwnWorkOrderComment(comment({ authorId: "user-1" }), "user-1")).toBe(true);
+    expect(isOwnWorkOrderComment(comment({ authorId: "42" }), 42)).toBe(true);
+  });
+
+  it("returns false when author or current user is missing", () => {
+    expect(isOwnWorkOrderComment(comment({ authorId: null }), "user-1")).toBe(false);
+    expect(isOwnWorkOrderComment(comment({ authorId: "" }), "user-1")).toBe(false);
+    expect(isOwnWorkOrderComment(comment(), null)).toBe(false);
+    expect(isOwnWorkOrderComment(comment(), undefined)).toBe(false);
+  });
+
+  it("returns false when ids differ", () => {
+    expect(isOwnWorkOrderComment(comment({ authorId: "user-1" }), "user-2")).toBe(false);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/completion-doc-auto-complete.test.ts b/src/test/domain/work-orders/utils/completion-doc-auto-complete.test.ts
new file mode 100644
index 00000000..ab12e39e
--- /dev/null
+++ b/src/test/domain/work-orders/utils/completion-doc-auto-complete.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it } from "vitest";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { shouldCompleteAfterCompletionDoc } from "@/domain/work-orders/utils/completion-doc-auto-complete";
+
+function closablePmRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 42,
+    woNumber: "24866",
+    type: "PM",
+    dispatcherId: "u1",
+    dispatcherName: "Dispatcher",
+    company: "Vendor Co",
+    vendorId: "7",
+    tech: "Tech One",
+    completedDate: "2026-09-15",
+    pm: "HVAC",
+    status: "In Progress",
+    docStatus: "Yes",
+    mediaCount: 0,
+    isPastDue: false,
+    upliftSummary: { hasUplift: false, pendingCount: 0 },
+    ...overrides,
+  } as WorkOrderTableRow;
+}
+
+describe("shouldCompleteAfterCompletionDoc (SH-341)", () => {
+  it("completes a closable PM once the generated document is persisted", () => {
+    expect(shouldCompleteAfterCompletionDoc("Yes", closablePmRow())).toBe(true);
+  });
+
+  it("never completes on Save draft or Not required", () => {
+    expect(shouldCompleteAfterCompletionDoc("No", closablePmRow({ docStatus: "No" }))).toBe(false);
+    expect(shouldCompleteAfterCompletionDoc("NN", closablePmRow({ docStatus: "NN" }))).toBe(false);
+  });
+
+  it("does not complete when the server did not persist the document as generated", () => {
+    expect(shouldCompleteAfterCompletionDoc("Yes", closablePmRow({ docStatus: "No" }))).toBe(false);
+  });
+
+  it.each([
+    ["dispatcher", { dispatcherId: "", dispatcherName: "" }],
+    ["vendor", { company: "", vendorId: "" }],
+    ["completed date", { completedDate: "" }],
+    ["real WO number", { woNumber: "SH02137" }],
+    ["service", { pm: "" }],
+    ["pending uplift", { upliftSummary: { hasUplift: true, pendingCount: 1 } }],
+    ["photo on a Reactive WO", { type: "Reactive" as const, mediaCount: 0 }],
+  ])("keeps the SH-114 closability gate: missing %s blocks completion", (_label, overrides) => {
+    expect(shouldCompleteAfterCompletionDoc("Yes", closablePmRow(overrides))).toBe(false);
+  });
+
+  it("completes a Reactive WO that has its completion photo", () => {
+    expect(
+      shouldCompleteAfterCompletionDoc("Yes", closablePmRow({ type: "Reactive", mediaCount: 1 })),
+    ).toBe(true);
+  });
+
+  it("leaves Completed, Canceled, and Past Due rows unchanged", () => {
+    expect(shouldCompleteAfterCompletionDoc("Yes", closablePmRow({ status: "Completed" }))).toBe(
+      false,
+    );
+    expect(shouldCompleteAfterCompletionDoc("Yes", closablePmRow({ status: "Canceled" }))).toBe(
+      false,
+    );
+    expect(shouldCompleteAfterCompletionDoc("Yes", closablePmRow({ isPastDue: true }))).toBe(false);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/completion-doc-service-title.test.ts b/src/test/domain/work-orders/utils/completion-doc-service-title.test.ts
new file mode 100644
index 00000000..380a28e4
--- /dev/null
+++ b/src/test/domain/work-orders/utils/completion-doc-service-title.test.ts
@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { hasCompletionDocService } from "@/domain/work-orders/utils/completion-doc-service-gate";
+import { serviceTitle } from "@/domain/work-orders/utils/completion-doc-service-title";
+
+describe("completion doc service gate", () => {
+  it("rejects empty or whitespace-only pm", () => {
+    expect(hasCompletionDocService("")).toBe(false);
+    expect(hasCompletionDocService("   ")).toBe(false);
+    expect(hasCompletionDocService(null)).toBe(false);
+    expect(hasCompletionDocService(undefined)).toBe(false);
+  });
+
+  it("accepts a selected service", () => {
+    expect(hasCompletionDocService("HVAC Inspection")).toBe(true);
+  });
+});
+
+describe("completion doc service title", () => {
+  it("uses the selected service without fabricating a frequency cycle", () => {
+    expect(serviceTitle({ pm: "HVAC Inspection" })).toBe("Amer-Building HVAC Inspection");
+    expect(serviceTitle({ pm: "HVAC Inspection" })).not.toMatch(/Week/);
+  });
+
+  it("maps known service phrases without hashing the work-order number", () => {
+    expect(serviceTitle({ pm: "Scrubber Pit" })).toBe("Amer-Building Scrubber Pit Augering");
+  });
+});
diff --git a/src/test/domain/work-orders/utils/completion-doc-site.test.ts b/src/test/domain/work-orders/utils/completion-doc-site.test.ts
new file mode 100644
index 00000000..4a2cb2f9
--- /dev/null
+++ b/src/test/domain/work-orders/utils/completion-doc-site.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+import { resolveCompDocSite } from "@/domain/work-orders/utils/completion-doc-site";
+
+describe("resolveCompDocSite", () => {
+  it("prefers a completed work order snapshot over conflicting live location data", () => {
+    const result = resolveCompDocSite(
+      {
+        site: "BK5",
+        location: "Live City, WI",
+        status: "Completed",
+        company: "Live Co",
+        tech: "Live Tech",
+        frozenSite: {
+          code: "FROZEN",
+          address: "100 Frozen Ave",
+          city: "Chicago",
+          state: "IL",
+          zip: "60601",
+        },
+        frozenCompany: { name: "Frozen Co", contactName: "Frozen Tech" },
+      },
+      {
+        address: "900 Live St",
+        city: "Milwaukee",
+        state: "WI",
+        zipCode: "53202",
+      },
+    );
+
+    expect(result).toEqual({
+      code: "FROZEN",
+      street: "100 Frozen Ave",
+      city: "Chicago",
+      state: "IL",
+      zip: "60601",
+      label: "Chicago, IL",
+      fullAddress: "100 Frozen Ave, Chicago, IL, 60601",
+      tech: "Frozen Tech",
+      company: "Frozen Co",
+    });
+  });
+
+  it("keeps using the live location for an open work order", () => {
+    const result = resolveCompDocSite(
+      {
+        site: "BK5",
+        location: "Old City, IL",
+        status: "Scheduled",
+        frozenSite: { address: "100 Frozen Ave", city: "Chicago", state: "IL" },
+      },
+      {
+        address: "900 Live St",
+        city: "Milwaukee",
+        state: "WI",
+        zipCode: "53202",
+      },
+    );
+
+    expect(result.street).toBe("900 Live St");
+    expect(result.label).toBe("Milwaukee, WI");
+  });
+});
diff --git a/src/test/domain/work-orders/utils/day-pagination.test.ts b/src/test/domain/work-orders/utils/day-pagination.test.ts
new file mode 100644
index 00000000..dba28fcb
--- /dev/null
+++ b/src/test/domain/work-orders/utils/day-pagination.test.ts
@@ -0,0 +1,158 @@
+import { describe, expect, it } from "vitest";
+import {
+  DAY_PAGE_SIZE_OPTIONS,
+  DEFAULT_DAY_PAGE_SIZE,
+  asDayPageSize,
+  findItemPageIndex,
+  formatDayPaginationSummary,
+  nextSearchPageIfOutOfRange,
+  pageIndexForItem,
+  paginateItems,
+  pickBoardPager,
+  shouldShowDayPagination,
+  shouldShowSearchPagination,
+} from "@/domain/work-orders/utils/day-pagination";
+
+describe("day pagination utils (SH-241)", () => {
+  it("defaults to 50 and exposes 25/50/100/200", () => {
+    expect(DEFAULT_DAY_PAGE_SIZE).toBe(50);
+    expect(DAY_PAGE_SIZE_OPTIONS).toEqual([25, 50, 100, 200]);
+    expect(asDayPageSize(200)).toBe(200);
+    expect(asDayPageSize(13)).toBe(DEFAULT_DAY_PAGE_SIZE);
+  });
+
+  it("paginates 60 items at 50 per page", () => {
+    const items = Array.from({ length: 60 }, (_, index) => index);
+    const first = paginateItems(items, 0, 50);
+    expect(first.visible).toHaveLength(50);
+    expect(first.pageCount).toBe(2);
+    const second = paginateItems(items, 1, 50);
+    expect(second.visible).toEqual(items.slice(50));
+  });
+
+  it("re-paginates immediately when page size changes", () => {
+    const items = Array.from({ length: 60 }, (_, index) => index);
+    expect(paginateItems(items, 0, 25).visible).toHaveLength(25);
+    expect(paginateItems(items, 0, 25).pageCount).toBe(3);
+  });
+
+  it("clamps an out-of-range page to the last page", () => {
+    const paged = paginateItems([1, 2, 3], 9, 2);
+    expect(paged.pageIndex).toBe(1);
+    expect(paged.visible).toEqual([3]);
+  });
+
+  it("shows pagination in day view even when the page is not full", () => {
+    expect(
+      shouldShowDayPagination({
+        flatListMode: false,
+        isLoading: false,
+        noSearchResults: false,
+      }),
+    ).toBe(true);
+  });
+
+  it("hides pagination in flat-list / loading / empty search", () => {
+    expect(
+      shouldShowDayPagination({
+        flatListMode: true,
+        isLoading: false,
+        noSearchResults: false,
+      }),
+    ).toBe(false);
+    expect(
+      shouldShowDayPagination({
+        flatListMode: false,
+        isLoading: true,
+        noSearchResults: false,
+      }),
+    ).toBe(false);
+    expect(
+      shouldShowDayPagination({
+        flatListMode: false,
+        isLoading: false,
+        noSearchResults: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("shows search pagination when advanced filters return rows", () => {
+    expect(shouldShowSearchPagination({ isLoading: false, hasResults: true })).toBe(true);
+    expect(shouldShowSearchPagination({ isLoading: true, hasResults: true })).toBe(false);
+    expect(shouldShowSearchPagination({ isLoading: false, hasResults: false })).toBe(false);
+  });
+
+  it("shows search pagination when the current page is empty but totalCount is positive", () => {
+    const pager = pickBoardPager({
+      advActive: true,
+      isLoading: false,
+      noSearchResults: false,
+      advResultCount: 0,
+      search: { page: 99, pageSize: 50, totalCount: 1778 },
+      day: {
+        pageSize: 50,
+        pageIndex: 0,
+        pageCount: 1,
+        itemCount: 0,
+        footerLabel: "Mon · 08/17",
+      },
+    });
+    expect(pager.show).toBe(true);
+    expect(pager.itemCount).toBe(1778);
+    expect(pager.pageCount).toBe(36);
+    expect(pager.pageIndex).toBe(35);
+    expect(pager.footerLabel).toBe("Results");
+  });
+
+  it("pages a 1778-row search at 50 per page without dumping the universe", () => {
+    const pager = pickBoardPager({
+      advActive: true,
+      isLoading: false,
+      noSearchResults: false,
+      advResultCount: 50,
+      search: { page: 0, pageSize: 50, totalCount: 1778 },
+      day: {
+        pageSize: 50,
+        pageIndex: 0,
+        pageCount: 1,
+        itemCount: 0,
+        footerLabel: "Mon · 08/17",
+      },
+    });
+    expect(pager.show).toBe(true);
+    expect(pager.itemCount).toBe(1778);
+    expect(pager.pageCount).toBe(36);
+    expect(pager.pageIndex).toBe(0);
+    expect(pager.footerLabel).toBe("Results");
+  });
+
+  it("maps a row past the first page onto page 2 at the default size", () => {
+    const items = Array.from({ length: 60 }, (_, index) => ({ id: `wo-${index}` }));
+    expect(pageIndexForItem(50, 50)).toBe(1);
+    expect(findItemPageIndex(items, "wo-55", 50)).toBe(1);
+    expect(findItemPageIndex(items, "missing", 50)).toBeNull();
+  });
+
+  it("formats the AAP footer summary", () => {
+    expect(formatDayPaginationSummary("Mon · 06/01", 9)).toBe("MON · 06/01 · 9 items");
+    expect(formatDayPaginationSummary("Tue · 06/02", 1)).toBe("TUE · 06/02 · 1 item");
+  });
+});
+
+describe("nextSearchPageIfOutOfRange", () => {
+  it("returns the last valid page when a search shrinks to one page", () => {
+    expect(nextSearchPageIfOutOfRange({ page: 1, pageSize: 50, totalCount: 40 })).toBe(0);
+  });
+
+  it("leaves a still-valid second page alone", () => {
+    expect(nextSearchPageIfOutOfRange({ page: 1, pageSize: 50, totalCount: 60 })).toBeNull();
+  });
+
+  it("does not pull an empty result set onto page 1", () => {
+    expect(nextSearchPageIfOutOfRange({ page: 1, pageSize: 50, totalCount: 0 })).toBeNull();
+  });
+
+  it("leaves the last valid page alone", () => {
+    expect(nextSearchPageIfOutOfRange({ page: 0, pageSize: 50, totalCount: 40 })).toBeNull();
+  });
+});
diff --git a/src/test/domain/work-orders/utils/display-file-name.test.ts b/src/test/domain/work-orders/utils/display-file-name.test.ts
new file mode 100644
index 00000000..5c51f417
--- /dev/null
+++ b/src/test/domain/work-orders/utils/display-file-name.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { toDisplayFileName } from "@/domain/work-orders/utils/display-file-name";
+
+describe("toDisplayFileName", () => {
+  it("drops the storage guid prefix and keeps the original name", () => {
+    expect(toDisplayFileName("7a0cf3b5-3eeb-4c4f-a86e-8e2da1b0c9f4_6370_1_Before.jpg")).toBe(
+      "6370_1_Before.jpg",
+    );
+  });
+
+  it("matches the prefix regardless of guid casing", () => {
+    expect(toDisplayFileName("7A0CF3B5-3EEB-4C4F-A86E-8E2DA1B0C9F4_report.pdf")).toBe("report.pdf");
+  });
+
+  it("keeps names that do not carry a guid prefix", () => {
+    expect(toDisplayFileName("before.jpg")).toBe("before.jpg");
+    expect(toDisplayFileName("2026_summary_report.pdf")).toBe("2026_summary_report.pdf");
+  });
+
+  it("falls back to the raw name when nothing follows the prefix", () => {
+    const onlyPrefix = "7a0cf3b5-3eeb-4c4f-a86e-8e2da1b0c9f4_";
+    expect(toDisplayFileName(onlyPrefix)).toBe(onlyPrefix);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/due-date-floor.test.ts b/src/test/domain/work-orders/utils/due-date-floor.test.ts
new file mode 100644
index 00000000..b4c52c1b
--- /dev/null
+++ b/src/test/domain/work-orders/utils/due-date-floor.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import {
+  clearDueDateBeforeSchedule,
+  isDueDateBeforeFloor,
+  resolveDueDateFloor,
+} from "@/domain/work-orders/utils/due-date-floor";
+
+describe("due date floor (SH-356)", () => {
+  it("uses the concrete or range-start Schedule On, else the target week's first day", () => {
+    expect(resolveDueDateFloor({ scheduledOn: "2026-09-10", targetWeek: "" })).toBe("2026-09-10");
+    expect(resolveDueDateFloor({ scheduledOn: "", targetWeek: "2026-09-14" })).toBe("2026-09-14");
+    expect(resolveDueDateFloor({ scheduledOn: "", targetWeek: "" })).toBe("");
+    expect(resolveDueDateFloor({ scheduledOn: null, targetWeek: undefined })).toBe("");
+  });
+
+  it("flags only a Due Date strictly before the floor", () => {
+    expect(isDueDateBeforeFloor("2026-09-09", "2026-09-10")).toBe(true);
+    expect(isDueDateBeforeFloor("2026-09-10", "2026-09-10")).toBe(false);
+    expect(isDueDateBeforeFloor("", "2026-09-10")).toBe(false);
+    expect(isDueDateBeforeFloor("2026-09-09", "")).toBe(false);
+  });
+
+  it("clears (never bumps) a Due Date the new schedule passes", () => {
+    expect(clearDueDateBeforeSchedule("2026-09-12", "2026-09-15")).toEqual({ dueDate: "" });
+    expect(clearDueDateBeforeSchedule("2026-09-12", "2026-09-12")).toEqual({});
+    expect(clearDueDateBeforeSchedule("2026-09-20", "2026-09-15")).toEqual({});
+    expect(clearDueDateBeforeSchedule("2026-09-12", "")).toEqual({});
+  });
+});
diff --git a/src/test/domain/work-orders/utils/effective-completion-snapshot.test.ts b/src/test/domain/work-orders/utils/effective-completion-snapshot.test.ts
new file mode 100644
index 00000000..5044a09a
--- /dev/null
+++ b/src/test/domain/work-orders/utils/effective-completion-snapshot.test.ts
@@ -0,0 +1,116 @@
+import { describe, expect, it } from "vitest";
+import {
+  effectiveAdditionalContacts,
+  effectiveCompany,
+  effectivePoc,
+  effectiveSite,
+  effectiveSitePlace,
+} from "@/domain/work-orders/utils/effective-completion-snapshot";
+
+describe("effective completion snapshot", () => {
+  it("prefers frozen values for a completed work order", () => {
+    const frozenSite = { code: "BK5", city: "Chicago", state: "IL" };
+    expect(effectiveSite({ status: "Completed", frozenSite })).toEqual(frozenSite);
+    expect(effectiveSitePlace({ status: "Completed", frozenSite })).toEqual({
+      city: "Chicago",
+      state: "IL",
+    });
+
+    expect(
+      effectiveCompany({
+        status: "Completed",
+        company: "Live Co",
+        tech: "Live Tech",
+        techPhone: "222",
+        frozenCompany: { name: "Frozen Co", contactName: "Frozen Tech", phone: "111" },
+      }),
+    ).toMatchObject({ name: "Frozen Co", contactName: "Frozen Tech", phone: "111" });
+
+    expect(
+      effectivePoc({
+        status: "Completed",
+        pocName: "Live POC",
+        pocPhone: "222",
+        pocNotes: "live",
+        additionalContacts: [],
+        frozenPoc: {
+          contacts: [{ name: "Frozen POC", phone: "111" }],
+          notes: "frozen",
+        },
+      }),
+    ).toEqual({
+      contacts: [{ name: "Frozen POC", phone: "111" }],
+      notes: "frozen",
+    });
+  });
+
+  it("uses live values while open or when a completed snapshot is missing", () => {
+    expect(effectiveSite({ status: "Scheduled", frozenSite: { city: "Old" } })).toBeUndefined();
+    expect(effectiveSitePlace({ status: "Completed" })).toBeNull();
+    expect(
+      effectiveCompany({
+        status: "Scheduled",
+        company: "Live Co",
+        tech: "Live Tech",
+        techPhone: "222",
+        frozenCompany: { name: "Old Co" },
+      }),
+    ).toMatchObject({ name: "Live Co", contactName: "Live Tech", phone: "222" });
+    expect(
+      effectivePoc({
+        status: "Completed",
+        pocName: "Live POC",
+        pocPhone: "222",
+        pocNotes: "live",
+        additionalContacts: [{ name: "Backup", phone: "333", notes: "gate hours" }],
+      }),
+    ).toEqual({
+      contacts: [
+        { name: "Live POC", phone: "222" },
+        { name: "Backup", phone: "333", notes: "gate hours" },
+      ],
+      notes: "live",
+    });
+    expect(
+      effectiveAdditionalContacts({
+        status: "Scheduled",
+        pocName: "Live POC",
+        pocPhone: "222",
+        pocNotes: "live",
+        additionalContacts: [{ name: "Backup", phone: "333", notes: "gate hours" }],
+      }),
+    ).toEqual([{ name: "Backup", phone: "333", notes: "gate hours" }]);
+  });
+
+  it("keeps extra-contact notes on the open work-order path", () => {
+    expect(
+      effectiveAdditionalContacts({
+        status: "Scheduled",
+        pocName: "Primary",
+        pocPhone: "111",
+        pocNotes: "",
+        additionalContacts: [{ name: "Backup", phone: "333", notes: "gate hours" }],
+        frozenPoc: {
+          contacts: [
+            { name: "Frozen", phone: "000" },
+            { name: "Frozen Extra", phone: "999", notes: "ignored while open" },
+          ],
+        },
+      }),
+    ).toEqual([{ name: "Backup", phone: "333", notes: "gate hours" }]);
+  });
+
+  it("treats missing additional contacts as an empty live contact list", () => {
+    expect(
+      effectivePoc({
+        status: "Scheduled",
+        pocName: "Primary",
+        pocPhone: "111",
+        pocNotes: "",
+      }),
+    ).toEqual({
+      contacts: [{ name: "Primary", phone: "111" }],
+      notes: "",
+    });
+  });
+});
diff --git a/src/test/domain/work-orders/utils/enrich-detail-closability-from-board.test.ts b/src/test/domain/work-orders/utils/enrich-detail-closability-from-board.test.ts
new file mode 100644
index 00000000..2f981501
--- /dev/null
+++ b/src/test/domain/work-orders/utils/enrich-detail-closability-from-board.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import type { WorkOrderBoardDetail } from "@/domain/work-orders/types/work-order-board-detail";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import { enrichDetailClosabilityFromBoard } from "@/domain/work-orders/utils/enrich-detail-closability-from-board";
+
+const baseDetail = {
+  id: 1,
+  internalWONumber: "SH-1",
+  workOrderNumber: "20260623001",
+  title: "Test",
+  location: "",
+  locationId: "",
+  locationZip: "",
+  assignedTo: "Alice",
+  dueDate: "",
+  createdDate: "",
+  createdDateFull: "",
+  description: "",
+  priority: "",
+  status: "Open",
+  po: "",
+  tt: "",
+  problem: "HVAC",
+  trade: "",
+  subTrade: "",
+  vendorNTE: "",
+  scheduledDate: "",
+  completedDate: "2026-07-15",
+  source: "PM",
+  type: "" as const,
+  docStatus: "" as const,
+  mediaCount: 0,
+  comments: [],
+  auditLog: [],
+  dispatches: [],
+} satisfies WorkOrderDetail;
+
+describe("enrichDetailClosabilityFromBoard", () => {
+  it("returns detail unchanged when board is undefined", () => {
+    expect(enrichDetailClosabilityFromBoard(baseDetail, undefined)).toBe(baseDetail);
+  });
+
+  it("overlays authoritative type, docStatus, and mediaCount from board", () => {
+    const board = {
+      info: { type: "PM" },
+      completion: { docStatus: "Yes" },
+      media: [{ id: "1" }, { id: "2" }],
+    } as WorkOrderBoardDetail;
+
+    const enriched = enrichDetailClosabilityFromBoard(baseDetail, board);
+    expect(enriched.type).toBe("PM");
+    expect(enriched.docStatus).toBe("Yes");
+    expect(enriched.mediaCount).toBe(2);
+    expect(enriched.source).toBe("PM");
+    expect(enriched.problem).toBe("HVAC");
+  });
+});
diff --git a/src/test/domain/work-orders/utils/extra-docs-aveta.test.ts b/src/test/domain/work-orders/utils/extra-docs-aveta.test.ts
new file mode 100644
index 00000000..88aed90a
--- /dev/null
+++ b/src/test/domain/work-orders/utils/extra-docs-aveta.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import {
+  hasExplicitAvetaFile,
+  isAvetaDocumentAttached,
+  resolveExtraDocCategory,
+} from "@/domain/work-orders/utils/extra-docs-aveta";
+
+function file(category: MediaFile["category"]): MediaFile {
+  return {
+    id: "1",
+    name: "doc.pdf",
+    fileType: "pdf",
+    url: "blob:1",
+    category,
+  };
+}
+
+describe("extra-docs-aveta", () => {
+  it("does not label the first extra file as Aveta when the WO is flagged and none is Aveta", () => {
+    const files = [file("Photo"), file("Report")];
+    expect(resolveExtraDocCategory(files[0])).toBe("Photo");
+    expect(resolveExtraDocCategory(files[1])).toBe("Report");
+    expect(hasExplicitAvetaFile(files)).toBe(false);
+  });
+
+  it("keeps an explicit Aveta file and does not relabel others", () => {
+    const files = [file("Photo"), file("Aveta")];
+    expect(resolveExtraDocCategory(files[0])).toBe("Photo");
+    expect(resolveExtraDocCategory(files[1])).toBe("Aveta");
+    expect(hasExplicitAvetaFile(files)).toBe(true);
+  });
+
+  it("does not label extras as Aveta when the WO is not flagged", () => {
+    const files = [file("Photo")];
+    expect(resolveExtraDocCategory(files[0])).toBe("Photo");
+    expect(hasExplicitAvetaFile(files)).toBe(false);
+  });
+
+  it("treats purpose Aveta as an explicit Aveta file", () => {
+    const aveta: MediaFile = { ...file("Other"), purpose: "Aveta" };
+    expect(resolveExtraDocCategory(aveta)).toBe("Aveta");
+    expect(hasExplicitAvetaFile([aveta])).toBe(true);
+    expect(isAvetaDocumentAttached(false, [aveta])).toBe(true);
+  });
+
+  it("uses hasAvetaDocument from the board row after reopen", () => {
+    expect(isAvetaDocumentAttached(true, [])).toBe(true);
+    expect(isAvetaDocumentAttached(false, [file("Other")])).toBe(false);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/find-duplicate-wo-number-row.test.ts b/src/test/domain/work-orders/utils/find-duplicate-wo-number-row.test.ts
new file mode 100644
index 00000000..f56dda8d
--- /dev/null
+++ b/src/test/domain/work-orders/utils/find-duplicate-wo-number-row.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { findDuplicateWoNumberRow } from "@/domain/work-orders/utils/find-duplicate-wo-number-row";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+const rows = [
+  { id: "wo-1", woNumber: "12345678901" },
+  { id: "wo-2", woNumber: "99999999999" },
+] as WorkOrderTableRow[];
+
+describe("findDuplicateWoNumberRow", () => {
+  it("returns a matching row when the wo number already exists", () => {
+    expect(findDuplicateWoNumberRow("12345678901", rows)).toEqual(rows[0]);
+  });
+
+  it("ignores blank values and excluded ids", () => {
+    expect(findDuplicateWoNumberRow("", rows)).toBeUndefined();
+    expect(findDuplicateWoNumberRow("12345678901", rows, "wo-1")).toBeUndefined();
+  });
+});
diff --git a/src/test/domain/work-orders/utils/format-audit-timestamp.test.ts b/src/test/domain/work-orders/utils/format-audit-timestamp.test.ts
new file mode 100644
index 00000000..c7bb498b
--- /dev/null
+++ b/src/test/domain/work-orders/utils/format-audit-timestamp.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { formatAuditTimestamp } from "@/domain/work-orders/utils/format-audit-timestamp";
+
+describe("formatAuditTimestamp (SH-361)", () => {
+  it("includes the calendar date and the time for an ISO audit time", () => {
+    const iso = "2026-09-15T19:42:00";
+    const date = new Date(iso);
+    const expectedDate = date.toLocaleDateString("en-US", {
+      month: "2-digit",
+      day: "2-digit",
+      year: "numeric",
+    });
+
+    const formatted = formatAuditTimestamp(iso);
+
+    expect(formatted).toBe(`${expectedDate} · 7:42 PM`);
+    expect(formatted).toMatch(/^\d{2}\/\d{2}\/\d{4} · \d{1,2}:\d{2} (AM|PM)$/);
+  });
+
+  it("distinguishes the same time of day on different dates", () => {
+    expect(formatAuditTimestamp("2026-09-14T09:48:00")).not.toBe(
+      formatAuditTimestamp("2026-09-15T09:48:00"),
+    );
+  });
+
+  it("keeps pre-formatted or unparseable strings unchanged", () => {
+    expect(formatAuditTimestamp("· 7:42 PM")).toBe("· 7:42 PM");
+    expect(formatAuditTimestamp("09/15/2026 · 7:42 PM")).toBe("09/15/2026 · 7:42 PM");
+  });
+
+  it("returns an empty string when there is no time", () => {
+    expect(formatAuditTimestamp("")).toBe("");
+  });
+});
diff --git a/src/test/domain/work-orders/utils/format-board-audit-action.test.ts b/src/test/domain/work-orders/utils/format-board-audit-action.test.ts
new file mode 100644
index 00000000..e0a3f0b8
--- /dev/null
+++ b/src/test/domain/work-orders/utils/format-board-audit-action.test.ts
@@ -0,0 +1,209 @@
+import { describe, expect, it } from "vitest";
+import { formatBoardAuditAction } from "@/domain/work-orders/utils/format-board-audit-action";
+
+describe("formatBoardAuditAction", () => {
+  it("keeps human sentences from action as-is", () => {
+    expect(
+      formatBoardAuditAction({
+        action: 'Changed status to "Incomplete"',
+        fieldName: "",
+        oldValue: "",
+        newValue: "",
+      }),
+    ).toBe('Changed status to "Incomplete"');
+  });
+
+  it("formats lifecycle status from field/newValue", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "StatusChanged",
+        fieldName: "LifecycleStatus",
+        oldValue: "Scheduled",
+        newValue: "Incomplete",
+      }),
+    ).toBe('Changed status from "Scheduled" to "Incomplete"');
+  });
+
+  it("includes the previous status in the audit sentence when present", () => {
+    const sentence = formatBoardAuditAction({
+      action: "StatusChanged",
+      fieldName: "LifecycleStatus",
+      oldValue: "Pending",
+      newValue: "En Route",
+    });
+    expect(sentence).toBe('Changed status from "Pending" to "En Route"');
+  });
+
+  it("omits from when the previous status is empty", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "StatusChanged",
+        fieldName: "LifecycleStatus",
+        oldValue: "",
+        newValue: "Scheduled",
+      }),
+    ).toBe('Changed status to "Scheduled"');
+  });
+
+  it("formats WeekRolled / CarriedOver with increment", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "WeekRolled",
+        fieldName: "CarriedOver",
+        oldValue: "0",
+        newValue: "1",
+      }),
+    ).toBe("Carried over to the next week (increment #1)");
+  });
+
+  it("formats schedule changes", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "Rescheduled",
+        fieldName: "ScheduledDate",
+        oldValue: "2026-07-10",
+        newValue: "2026-07-16",
+      }),
+    ).toBe('Changed schedule to "07/16/2026"');
+  });
+
+  it("formats appt time ISO range as mm/dd/yyyy", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "ApptTimeChanged",
+        fieldName: "ApptTime",
+        oldValue: "",
+        newValue: "2026-07-13T05:30:00.0000000|2026-07-13T07:00:00.0000000",
+      }),
+    ).toBe('Changed appt time to "07/13/2026"');
+  });
+
+  it("formats past due system message", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "MarkedPastDue",
+        fieldName: "IsPastDue",
+        oldValue: "false",
+        newValue: "true",
+      }),
+    ).toBe("WO marked as Past Due. Schedule On has passed without completion.");
+  });
+
+  it("formats type correction with the previous and new type (SH-363)", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "FieldChanged",
+        fieldName: "WorkOrderType",
+        oldValue: "PM",
+        newValue: "Reactive",
+      }),
+    ).toBe('Changed Type from "PM" to "Reactive"');
+  });
+
+  it("formats a first type assignment without a from clause", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "FieldChanged",
+        fieldName: "WorkOrderType",
+        oldValue: "",
+        newValue: "Emergency",
+      }),
+    ).toBe('Changed Type to "Emergency"');
+  });
+
+  it("formats severity with the previous and new SEV labels", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "FieldChanged",
+        fieldName: "Severity",
+        oldValue: "3",
+        newValue: "1",
+      }),
+    ).toBe('Changed Severity from "SEV 3" to "SEV 1"');
+  });
+
+  it("formats severity cleared by a type correction instead of a raw FieldChanged (SH-363)", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "FieldChanged",
+        fieldName: "Severity",
+        oldValue: "3",
+        newValue: "",
+      }),
+    ).toBe('Changed Severity from "SEV 3" to "—"');
+  });
+
+  it("never renders a raw audit action enum for a cleared unknown field", () => {
+    const cleared = formatBoardAuditAction({
+      action: "FieldChanged",
+      fieldName: "VendorNte",
+      oldValue: "100",
+      newValue: "",
+    });
+    const empty = formatBoardAuditAction({
+      action: "FieldChanged",
+      fieldName: "VendorNte",
+      oldValue: "",
+      newValue: "",
+    });
+
+    expect(cleared).toBe('Changed vendor nte from "100" to "—"');
+    expect(empty).toBe("Updated vendor nte");
+    expect([cleared, empty]).not.toContain("FieldChanged");
+  });
+
+  it("falls back to from → to for unknown fields", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "FieldPatched",
+        fieldName: "VendorNte",
+        oldValue: "100",
+        newValue: "250",
+      }),
+    ).toBe('Changed vendor nte from "100" to "250"');
+  });
+
+  it("formats JSON array values as comma-separated quoted items", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "FieldPatched",
+        fieldName: "ExtraServices",
+        oldValue: "",
+        newValue: '["Other","Installation","Preventive Maintenance"]',
+      }),
+    ).toBe('Changed extra services to "Other", "Installation", "Preventive Maintenance"');
+  });
+
+  it("formats AssignmentChanged as AAP Assigned To copy", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "AssignmentChanged",
+        fieldName: "AssignTo",
+        oldValue: "Unassigned",
+        newValue: "Morgan Blake",
+      }),
+    ).toBe('Changed Assigned To to "Morgan Blake"');
+  });
+
+  it("formats empty AssignTo as an em dash", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "AssignmentChanged",
+        fieldName: "AssignedTo",
+        oldValue: "Morgan Blake",
+        newValue: "",
+      }),
+    ).toBe('Changed Assigned To to "—"');
+  });
+
+  it("falls back to Updated work order when empty", () => {
+    expect(
+      formatBoardAuditAction({
+        action: "",
+        fieldName: "Something",
+        oldValue: "",
+        newValue: "",
+      }),
+    ).toBe("Updated work order");
+  });
+});
diff --git a/src/test/domain/work-orders/utils/get-inline-create-missing.test.ts b/src/test/domain/work-orders/utils/get-inline-create-missing.test.ts
new file mode 100644
index 00000000..c5336aa1
--- /dev/null
+++ b/src/test/domain/work-orders/utils/get-inline-create-missing.test.ts
@@ -0,0 +1,96 @@
+import { describe, expect, it } from "vitest";
+import {
+  draftHasScheduleDate,
+  getInlineCreateMissing,
+  INLINE_CREATE_REQ_LABELS,
+  inlineCreateSaveHint,
+  inlineCreateSiteError,
+} from "@/domain/work-orders/utils/get-inline-create-missing";
+
+describe("getInlineCreateMissing", () => {
+  it("does not require Appt Time for inline create", () => {
+    expect(
+      getInlineCreateMissing({
+        site: "BK5",
+        locationId: "12",
+        woNumber: "25001",
+        pocName: "Jane",
+        pocPhone: "555-0100",
+      }),
+    ).toEqual([]);
+    expect(Object.keys(INLINE_CREATE_REQ_LABELS)).not.toContain("apptTime");
+  });
+
+  it("returns empty when Site, WO#, and POC are filled even without schedule", () => {
+    expect(
+      getInlineCreateMissing({
+        site: "BK5",
+        locationId: "12",
+        woNumber: "25001",
+        pocName: "Jane",
+        pocPhone: "555-0100",
+      }),
+    ).toEqual([]);
+  });
+
+  it("accepts locationId alone as site presence", () => {
+    expect(
+      getInlineCreateMissing({
+        site: "",
+        locationId: 42,
+        woNumber: "25001",
+        pocName: "Jane",
+        pocPhone: "555-0100",
+      }),
+    ).toEqual([]);
+  });
+
+  it("lists missing POC fields without requiring schedule", () => {
+    expect(
+      getInlineCreateMissing({
+        site: "BK5",
+        woNumber: "25001",
+        pocName: "",
+        pocPhone: "",
+      }),
+    ).toEqual(["pocName", "pocPhone"]);
+  });
+
+  it("lists site and woNumber when empty", () => {
+    expect(getInlineCreateMissing({})).toEqual(["site", "woNumber", "pocName", "pocPhone"]);
+  });
+});
+
+describe("inlineCreateSaveHint", () => {
+  it("returns Save when ready", () => {
+    expect(inlineCreateSaveHint([])).toBe("Save");
+  });
+
+  it("lists missing labels", () => {
+    expect(inlineCreateSaveHint(["site", "woNumber"])).toBe("Missing: Site, WO #");
+  });
+});
+
+describe("inlineCreateSiteError", () => {
+  it("prefers site-required message when site is missing", () => {
+    expect(inlineCreateSiteError(["site", "pocName"])).toBe("Site is required");
+  });
+
+  it("surfaces contact message when only POC is missing", () => {
+    expect(inlineCreateSiteError(["pocName", "pocPhone"])).toBe(
+      "Contact name and phone are required",
+    );
+  });
+});
+
+describe("draftHasScheduleDate", () => {
+  it("is true for a concrete day", () => {
+    expect(draftHasScheduleDate({ scheduledOn: "2026-06-25" })).toBe(true);
+  });
+
+  it("is false for week-only", () => {
+    expect(
+      draftHasScheduleDate({ scheduledOn: "", scheduleWeekOnly: true, schedMode: "week" }),
+    ).toBe(false);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/is-dispatch-locked.test.ts b/src/test/domain/work-orders/utils/is-dispatch-locked.test.ts
new file mode 100644
index 00000000..f26370c9
--- /dev/null
+++ b/src/test/domain/work-orders/utils/is-dispatch-locked.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { isDispatchLocked } from "@/domain/work-orders/utils/is-dispatch-locked";
+
+describe("isDispatchLocked", () => {
+  it("returns true when dispatch has verifiedAt timestamp", () => {
+    expect(isDispatchLocked({ verifiedAt: "2026-02-01T10:00:00Z", status: "In Progress" })).toBe(
+      true,
+    );
+  });
+
+  it("returns true when dispatch status is Verified", () => {
+    expect(isDispatchLocked({ verifiedAt: null, status: "Verified" })).toBe(true);
+  });
+
+  it("returns true when dispatch status is Cancelled", () => {
+    expect(isDispatchLocked({ verifiedAt: null, status: "Cancelled" })).toBe(true);
+  });
+
+  it("returns false for active dispatch", () => {
+    expect(isDispatchLocked({ verifiedAt: null, status: "Sent" })).toBe(false);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/list-week-utils.test.ts b/src/test/domain/work-orders/utils/list-week-utils.test.ts
new file mode 100644
index 00000000..46cf2cf6
--- /dev/null
+++ b/src/test/domain/work-orders/utils/list-week-utils.test.ts
@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildWeekWindow,
+  compactWeekLabel,
+  currentWeekMonday,
+  isFutureWeek,
+  nextWeekMonday,
+  weekRange,
+} from "@/domain/work-orders/utils/list-week-utils";
+import { mondayOf } from "@/domain/work-orders/utils/wizard-date-utils";
+
+describe("list-week-utils", () => {
+  it("currentWeekMonday returns a Monday ISO date", () => {
+    const monday = currentWeekMonday();
+    expect(monday).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    expect(mondayOf(monday)).toBe(monday);
+  });
+
+  it("compactWeekLabel formats Mon–Fri range", () => {
+    expect(compactWeekLabel("2026-06-01")).toBe("6/1–6/5");
+    expect(compactWeekLabel("2026-05-25")).toBe("5/25–5/29");
+  });
+
+  it("weekRange returns Monday through Friday", () => {
+    expect(weekRange("2026-06-01")).toEqual(["2026-06-01", "2026-06-05"]);
+  });
+
+  it("buildWeekWindow generates ordered weeks around anchor", () => {
+    const weeks = buildWeekWindow("2026-06-01", 2, 2);
+    expect(weeks.length).toBeGreaterThanOrEqual(3);
+    expect(weeks[0].mondayIso).toBe("2026-05-18");
+    expect(weeks.some((week) => week.mondayIso === "2026-06-01")).toBe(true);
+    expect(weeks.every((week) => week.label.length > 0)).toBe(true);
+  });
+
+  it("buildWeekWindow always includes the next week even when it is in the future", () => {
+    const upcoming = nextWeekMonday();
+    const weeks = buildWeekWindow(currentWeekMonday(), 2, 0);
+    expect(weeks.some((week) => week.mondayIso === upcoming)).toBe(true);
+    if (isFutureWeek(upcoming)) {
+      expect(isFutureWeek(upcoming)).toBe(true);
+    }
+  });
+
+  it("buildWeekWindow always includes the current live week", () => {
+    const liveMonday = currentWeekMonday();
+    const weeks = buildWeekWindow("2000-01-03", 2, 0);
+    expect(weeks.some((week) => week.mondayIso === liveMonday && week.live)).toBe(true);
+  });
+
+  it("isFutureWeek identifies weeks after the current week", () => {
+    const live = currentWeekMonday();
+    expect(isFutureWeek(live)).toBe(false);
+    expect(isFutureWeek("2099-01-05")).toBe(true);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/merge-work-order-users.test.ts b/src/test/domain/work-orders/utils/merge-work-order-users.test.ts
new file mode 100644
index 00000000..493b1fc9
--- /dev/null
+++ b/src/test/domain/work-orders/utils/merge-work-order-users.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { mergeWorkOrderUsers } from "@/domain/work-orders/utils/merge-work-order-users";
+
+describe("mergeWorkOrderUsers", () => {
+  it("keeps dispatcher lookup entries and adds directory-only actors", () => {
+    const dispatchers = [{ id: "d1", name: "Alex Dispatcher" }];
+    const directory = [
+      { id: "d1", name: "Alex Dispatcher (stale)" },
+      { id: "s1", name: "Pat Scheduler" },
+    ];
+
+    expect(mergeWorkOrderUsers(dispatchers, directory)).toEqual([
+      { id: "d1", name: "Alex Dispatcher" },
+      { id: "s1", name: "Pat Scheduler" },
+    ]);
+  });
+
+  it("skips empty ids", () => {
+    expect(mergeWorkOrderUsers([{ id: "", name: "Bad" }], [{ id: "s1", name: "Pat" }])).toEqual([
+      { id: "s1", name: "Pat" },
+    ]);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/partition-slide-over-media.test.ts b/src/test/domain/work-orders/utils/partition-slide-over-media.test.ts
new file mode 100644
index 00000000..1970db61
--- /dev/null
+++ b/src/test/domain/work-orders/utils/partition-slide-over-media.test.ts
@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
+import {
+  hasCompletionMediaGallery,
+  isCompletionSurfaceMedia,
+  isExtrasSurfaceMedia,
+} from "@/domain/work-orders/utils/partition-slide-over-media";
+
+function file(
+  overrides: Partial<MediaFile> & Pick<MediaFile, "id" | "fileType" | "purpose">,
+): MediaFile {
+  return {
+    name: overrides.name ?? overrides.id,
+    url: "https://cdn.example.com/file",
+    category: "Photo",
+    uploadStatus: "done",
+    ...overrides,
+  };
+}
+
+describe("partition-slide-over-media", () => {
+  it("keeps unowned Extra photos on Completion Doc, not Extra Docs", () => {
+    const photo = file({
+      id: "10",
+      fileType: "image",
+      purpose: "Extra",
+      name: "site.jpg",
+    });
+
+    expect(isCompletionSurfaceMedia(photo)).toBe(true);
+    expect(isExtrasSurfaceMedia(photo)).toBe(false);
+  });
+
+  it("keeps Extra PDFs on Extra Docs, not Completion Doc", () => {
+    const pdf = file({
+      id: "4",
+      fileType: "pdf",
+      purpose: "Extra",
+      name: "extra.pdf",
+      category: "Other",
+    });
+
+    expect(isCompletionSurfaceMedia(pdf)).toBe(false);
+    expect(isExtrasSurfaceMedia(pdf)).toBe(true);
+  });
+
+  it("moves Extra photo to Extra Docs after explicit Extra ownership", () => {
+    const photo = file({ id: "10", fileType: "image", purpose: "Extra" });
+    const ownership = {
+      completionOwnedIds: new Set<string>(),
+      extraOwnedIds: new Set(["10"]),
+    };
+
+    expect(isCompletionSurfaceMedia(photo, ownership)).toBe(false);
+    expect(isExtrasSurfaceMedia(photo, ownership)).toBe(true);
+  });
+
+  it("keeps Extra photo on Completion Doc while completion-owned", () => {
+    const photo = file({ id: "10", fileType: "image", purpose: "Extra" });
+    const ownership = {
+      completionOwnedIds: new Set(["10"]),
+      extraOwnedIds: new Set<string>(),
+    };
+
+    expect(isCompletionSurfaceMedia(photo, ownership)).toBe(true);
+    expect(isExtrasSurfaceMedia(photo, ownership)).toBe(false);
+  });
+
+  it("keeps Before/After/Completion and in-flight tiles on Completion Doc", () => {
+    expect(isCompletionSurfaceMedia(file({ id: "1", fileType: "image", purpose: "Before" }))).toBe(
+      true,
+    );
+    expect(
+      isCompletionSurfaceMedia({
+        ...file({ id: "local-1", fileType: "image", purpose: null }),
+        uploadStatus: "uploading",
+      }),
+    ).toBe(true);
+  });
+
+  it("renders a Completion gallery only for Reactive and Emergency work orders", () => {
+    expect(hasCompletionMediaGallery("Reactive")).toBe(true);
+    expect(hasCompletionMediaGallery("Emergency")).toBe(true);
+    expect(hasCompletionMediaGallery("PM")).toBe(false);
+    expect(hasCompletionMediaGallery("Overdue")).toBe(false);
+    expect(hasCompletionMediaGallery("")).toBe(false);
+  });
+
+  it("puts Extra photos and videos on Extra Docs when Completion has no gallery", () => {
+    const photo = file({ id: "10", fileType: "image", purpose: "Extra" });
+    const video = file({ id: "11", fileType: "video", purpose: "Extra", category: "Video" });
+
+    for (const item of [photo, video]) {
+      expect(isCompletionSurfaceMedia(item, undefined, false)).toBe(false);
+      expect(isExtrasSurfaceMedia(item, undefined, false)).toBe(true);
+    }
+  });
+
+  it("ignores stale completion ownership when Completion has no gallery", () => {
+    const photo = file({ id: "10", fileType: "image", purpose: "Extra" });
+    const ownership = {
+      completionOwnedIds: new Set(["10"]),
+      extraOwnedIds: new Set<string>(),
+    };
+
+    expect(isCompletionSurfaceMedia(photo, ownership, false)).toBe(false);
+    expect(isExtrasSurfaceMedia(photo, ownership, false)).toBe(true);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/reschedule-indicator.test.ts b/src/test/domain/work-orders/utils/reschedule-indicator.test.ts
new file mode 100644
index 00000000..72f48f86
--- /dev/null
+++ b/src/test/domain/work-orders/utils/reschedule-indicator.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { formatRescheduleHover } from "@/domain/work-orders/utils/reschedule-indicator";
+
+describe("formatRescheduleHover", () => {
+  it("includes the count without an original date when the API omits it", () => {
+    expect(formatRescheduleHover(4)).toBe(
+      "Rescheduled 4 times — this WO has had its date changed 4 times.",
+    );
+  });
+
+  it("appends the original date when the board DTO provides originalDate", () => {
+    expect(formatRescheduleHover(3, "2026-05-08")).toBe(
+      "Rescheduled 3 times — this WO has had its date changed 3 times. Original date: May 8, 2026.",
+    );
+  });
+});
diff --git a/src/test/domain/work-orders/utils/resolve-slide-over-aveta-required.test.ts b/src/test/domain/work-orders/utils/resolve-slide-over-aveta-required.test.ts
new file mode 100644
index 00000000..bf4c7193
--- /dev/null
+++ b/src/test/domain/work-orders/utils/resolve-slide-over-aveta-required.test.ts
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { resolveSlideOverAvetaRequired } from "@/domain/work-orders/utils/resolve-slide-over-aveta-required";
+
+describe("resolveSlideOverAvetaRequired", () => {
+  it("uses the draft when editing false-to-true", () => {
+    expect(resolveSlideOverAvetaRequired(true, false, true)).toBe(true);
+  });
+
+  it("uses the draft when editing true-to-false", () => {
+    expect(resolveSlideOverAvetaRequired(true, true, false)).toBe(false);
+  });
+
+  it("uses the persisted row when not editing", () => {
+    expect(resolveSlideOverAvetaRequired(false, false, true)).toBe(false);
+    expect(resolveSlideOverAvetaRequired(false, true, false)).toBe(true);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/run-sequential-uploads.test.ts b/src/test/domain/work-orders/utils/run-sequential-uploads.test.ts
new file mode 100644
index 00000000..92bd2d01
--- /dev/null
+++ b/src/test/domain/work-orders/utils/run-sequential-uploads.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it, vi } from "vitest";
+import { runSequentialUploads } from "@/domain/work-orders/utils/run-sequential-uploads";
+
+describe("runSequentialUploads", () => {
+  it("keeps pending true across the full batch; second upload starts only after the first settles", async () => {
+    const pendingLog: boolean[] = [];
+    const setPending = (pending: boolean) => {
+      pendingLog.push(pending);
+    };
+
+    let resolveFirst: (() => void) | undefined;
+    let resolveSecond: (() => void) | undefined;
+
+    const first = new Promise<void>((resolve) => {
+      resolveFirst = resolve;
+    });
+    const second = new Promise<void>((resolve) => {
+      resolveSecond = resolve;
+    });
+
+    const upload = vi
+      .fn()
+      .mockImplementationOnce(() => first)
+      .mockImplementationOnce(() => second);
+
+    const done = runSequentialUploads(["large.bin", "small.bin"], upload, setPending);
+
+    expect(pendingLog).toEqual([true]);
+    expect(upload).toHaveBeenCalledTimes(1);
+    expect(upload).toHaveBeenCalledWith("large.bin");
+
+    // First file still in flight — pending must stay true.
+    await Promise.resolve();
+    expect(pendingLog).toEqual([true]);
+    expect(upload).toHaveBeenCalledTimes(1);
+
+    resolveFirst?.();
+    await Promise.resolve();
+    await Promise.resolve();
+
+    expect(upload).toHaveBeenCalledTimes(2);
+    expect(upload).toHaveBeenNthCalledWith(2, "small.bin");
+    expect(pendingLog).toEqual([true]);
+
+    resolveSecond?.();
+    await done;
+
+    expect(pendingLog).toEqual([true, false]);
+  });
+
+  it("clears pending when a middle upload rejects", async () => {
+    const setPending = vi.fn();
+    const upload = vi
+      .fn()
+      .mockResolvedValueOnce(undefined)
+      .mockRejectedValueOnce(new Error("upload failed"));
+
+    await expect(runSequentialUploads(["a", "b", "c"], upload, setPending)).rejects.toThrow(
+      "upload failed",
+    );
+
+    expect(setPending.mock.calls.map((call) => call[0])).toEqual([true, false]);
+    expect(upload).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/service-notes-ui.test.ts b/src/test/domain/work-orders/utils/service-notes-ui.test.ts
new file mode 100644
index 00000000..a2ff4416
--- /dev/null
+++ b/src/test/domain/work-orders/utils/service-notes-ui.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import {
+  hasServiceNotesDetails,
+  truncateServiceNotesPreview,
+} from "@/domain/work-orders/utils/service-notes-ui";
+
+describe("hasServiceNotesDetails", () => {
+  it("is false when empty", () => {
+    expect(hasServiceNotesDetails("", [])).toBe(false);
+    expect(hasServiceNotesDetails(null, null)).toBe(false);
+  });
+
+  it("is true when notes or extras exist", () => {
+    expect(hasServiceNotesDetails("service notes", [])).toBe(true);
+    expect(hasServiceNotesDetails("", ["Filter change"])).toBe(true);
+  });
+
+  it("is true when Aveta is required even without notes", () => {
+    expect(hasServiceNotesDetails("", [], true)).toBe(true);
+  });
+});
+
+describe("truncateServiceNotesPreview", () => {
+  it("keeps short notes", () => {
+    expect(truncateServiceNotesPreview("service notes")).toBe("service notes");
+  });
+
+  it("truncates long notes with ellipsis", () => {
+    const long = "a".repeat(40);
+    expect(truncateServiceNotesPreview(long)).toBe(`${"a".repeat(30)}…`);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/severity-escalation.test.ts b/src/test/domain/work-orders/utils/severity-escalation.test.ts
new file mode 100644
index 00000000..22c2cc9a
--- /dev/null
+++ b/src/test/domain/work-orders/utils/severity-escalation.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest";
+import {
+  formatSeverityEscalationToast,
+  shouldAnnounceSeverityEscalation,
+} from "@/domain/work-orders/utils/severity-escalation";
+
+describe("shouldAnnounceSeverityEscalation", () => {
+  it("announces when severity newly enters SEV 1", () => {
+    expect(shouldAnnounceSeverityEscalation(3, 1)).toBe(true);
+    expect(shouldAnnounceSeverityEscalation(null, 1)).toBe(true);
+  });
+
+  it("does not announce a re-save of the same critical severity", () => {
+    expect(shouldAnnounceSeverityEscalation(1, 1)).toBe(false);
+  });
+
+  it("does not announce a de-escalation out of SEV 1/2", () => {
+    expect(shouldAnnounceSeverityEscalation(2, 3)).toBe(false);
+  });
+
+  it("announces when severity rises from SEV 3–5 into SEV 2", () => {
+    expect(shouldAnnounceSeverityEscalation(5, 2)).toBe(true);
+    expect(shouldAnnounceSeverityEscalation(4, 2)).toBe(true);
+  });
+
+  it("does not announce moves between SEV 3–5", () => {
+    expect(shouldAnnounceSeverityEscalation(5, 3)).toBe(false);
+    expect(shouldAnnounceSeverityEscalation(4, 3)).toBe(false);
+    expect(shouldAnnounceSeverityEscalation(3, 5)).toBe(false);
+  });
+
+  it("does not announce SEV 1 to SEV 2 (already critical)", () => {
+    expect(shouldAnnounceSeverityEscalation(1, 2)).toBe(false);
+  });
+
+  it("does not announce SEV 2 to SEV 1 (already critical)", () => {
+    expect(shouldAnnounceSeverityEscalation(2, 1)).toBe(false);
+  });
+});
+
+describe("formatSeverityEscalationToast", () => {
+  it("matches the AAP warning copy", () => {
+    expect(formatSeverityEscalationToast("00000024965", 1)).toBe(
+      "WO #00000024965 escalated to SEV 1.",
+    );
+  });
+});
diff --git a/src/test/domain/work-orders/utils/should-notify-cross-week.test.ts b/src/test/domain/work-orders/utils/should-notify-cross-week.test.ts
new file mode 100644
index 00000000..8b3553fe
--- /dev/null
+++ b/src/test/domain/work-orders/utils/should-notify-cross-week.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { shouldNotifyCrossWeek } from "@/domain/work-orders/utils/should-notify-cross-week";
+
+describe("shouldNotifyCrossWeek", () => {
+  const activeMonday = "2026-07-13"; // Mon Jul 13 – Fri Jul 17
+
+  it("returns false when date is in the active week", () => {
+    expect(shouldNotifyCrossWeek("2026-07-15", activeMonday)).toBe(false);
+    expect(shouldNotifyCrossWeek("2026-07-13", activeMonday)).toBe(false);
+    expect(shouldNotifyCrossWeek("2026-07-17", activeMonday)).toBe(false);
+  });
+
+  it("returns true when date is in another week", () => {
+    expect(shouldNotifyCrossWeek("2026-07-20", activeMonday)).toBe(true);
+    expect(shouldNotifyCrossWeek("2026-07-06", activeMonday)).toBe(true);
+  });
+
+  it("returns false for empty inputs", () => {
+    expect(shouldNotifyCrossWeek("", activeMonday)).toBe(false);
+    expect(shouldNotifyCrossWeek("2026-07-20", "")).toBe(false);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/slide-over-draft.test.ts b/src/test/domain/work-orders/utils/slide-over-draft.test.ts
new file mode 100644
index 00000000..615e1085
--- /dev/null
+++ b/src/test/domain/work-orders/utils/slide-over-draft.test.ts
@@ -0,0 +1,179 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildSlideOverPatch,
+  isSlideOverDraftDirty,
+  SLIDE_OVER_EDIT_KEYS,
+} from "@/domain/work-orders/utils/slide-over-draft";
+import { EMPTY_UPLIFT_SUMMARY } from "@/domain/work-orders/types/work-order-uplift";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { mergeAutoSchedulePatch } from "@/domain/work-orders/utils/wo-lifecycle-transitions";
+
+function baseRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 1,
+    woNumber: "1001",
+    site: "SITE-A",
+    type: "PM",
+    severity: null,
+    dispatcherId: "10",
+    dispatcherName: "Alex",
+    scheduledOn: "2026-07-16",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "2026-07-16",
+    dayLabel: "Thu",
+    location: "Main",
+    locationId: 5,
+    pm: "Plumbing",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "v1",
+    company: "Acme",
+    tech: "Sam",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "09:00",
+    status: "Incomplete",
+    docStatus: "",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "2026-07-20",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    isAddOn: false,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    upliftSummary: EMPTY_UPLIFT_SUMMARY,
+    ...overrides,
+  };
+}
+
+describe("slide-over-draft", () => {
+  it("exposes only board-persistable edit keys", () => {
+    expect(SLIDE_OVER_EDIT_KEYS).toContain("woNumber");
+    expect(SLIDE_OVER_EDIT_KEYS).toContain("status");
+    expect(SLIDE_OVER_EDIT_KEYS).toContain("vendorId");
+    expect(SLIDE_OVER_EDIT_KEYS).toContain("additionalContacts");
+    expect(SLIDE_OVER_EDIT_KEYS).toContain("avetaRequired");
+    expect(SLIDE_OVER_EDIT_KEYS).not.toContain("pocName");
+    expect(SLIDE_OVER_EDIT_KEYS).not.toContain("locationId");
+    expect(SLIDE_OVER_EDIT_KEYS).not.toContain("techPhone");
+    expect(SLIDE_OVER_EDIT_KEYS).not.toContain("company");
+    expect(SLIDE_OVER_EDIT_KEYS).not.toContain("tech");
+  });
+
+  it("tracks vendor via vendorId only (company/tech are display companions)", () => {
+    const row = baseRow();
+    const draft = baseRow({ company: "Other Co", tech: "Pat" });
+    expect(isSlideOverDraftDirty(draft, row)).toBe(false);
+    expect(buildSlideOverPatch(draft, row)).toEqual({});
+
+    const vendorDraft = baseRow({ vendorId: "v2", company: "Other Co", tech: "Pat" });
+    expect(isSlideOverDraftDirty(vendorDraft, row)).toBe(true);
+    expect(buildSlideOverPatch(vendorDraft, row)).toEqual({ vendorId: "v2" });
+  });
+
+  it("ignores POC-only edits for dirty state", () => {
+    const row = baseRow();
+    const draft = baseRow({ pocName: "Jordan", pocPhone: "555-0100" });
+    expect(isSlideOverDraftDirty(draft, row)).toBe(false);
+    expect(buildSlideOverPatch(draft, row)).toEqual({});
+  });
+
+  it("detects dirty draft when a tracked field changes", () => {
+    const row = baseRow();
+    const draft = baseRow({ scheduledOn: "2026-07-17" });
+    expect(isSlideOverDraftDirty(draft, row)).toBe(true);
+  });
+
+  it("clears client schedule range overlays in the save patch", () => {
+    const row = baseRow({
+      scheduleEnd: "2026-07-18",
+      schedMode: "range",
+    });
+    const draft = baseRow({
+      scheduledOn: "",
+      scheduleEnd: "",
+      schedMode: undefined,
+    });
+
+    expect(buildSlideOverPatch(draft, row)).toEqual({
+      scheduledOn: "",
+      scheduleEnd: "",
+      schedMode: undefined,
+    });
+  });
+
+  it("is not dirty when values match", () => {
+    const row = baseRow();
+    expect(isSlideOverDraftDirty(row, row)).toBe(false);
+  });
+
+  it("builds a patch with only changed fields", () => {
+    const row = baseRow();
+    const draft = baseRow({
+      woNumber: "1002",
+      status: "Completed",
+      extraServices: ["HVAC"],
+    });
+    expect(buildSlideOverPatch(draft, row)).toEqual({
+      woNumber: "1002",
+      status: "Completed",
+      extraServices: ["HVAC"],
+    });
+  });
+
+  it("derives Pending on persist when a Scheduled draft clears Schedule On", () => {
+    const baseline = baseRow({
+      status: "Scheduled",
+      scheduledOn: "2026-07-16",
+      scheduleWeekOnly: false,
+      targetWeek: "",
+      scheduleEnd: "",
+      schedMode: "date",
+    });
+    const draft = baseRow({
+      status: "Scheduled",
+      scheduledOn: "",
+      scheduleWeekOnly: false,
+      targetWeek: "",
+      scheduleEnd: "",
+      schedMode: undefined,
+    });
+
+    const patch = buildSlideOverPatch(draft, baseline);
+    expect(patch).toEqual({
+      scheduledOn: "",
+      schedMode: undefined,
+    });
+    expect(patch.status).toBeUndefined();
+    expect(mergeAutoSchedulePatch(baseline, patch)).toEqual(
+      expect.objectContaining({
+        scheduledOn: "",
+        status: "Pending",
+      }),
+    );
+  });
+
+  it("tracks ordered additionalContacts for dirty state and patch (SH-218)", () => {
+    const row = baseRow();
+    const contacts = [{ name: "Backup", phone: "555-0101", notes: "Gate" }];
+    const draft = baseRow({ additionalContacts: contacts });
+
+    expect(isSlideOverDraftDirty(draft, row)).toBe(true);
+    expect(buildSlideOverPatch(draft, row)).toEqual({ additionalContacts: contacts });
+    expect(isSlideOverDraftDirty(baseRow({ additionalContacts: [] }), row)).toBe(false);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/slide-over-failed-save-baseline.test.ts b/src/test/domain/work-orders/utils/slide-over-failed-save-baseline.test.ts
new file mode 100644
index 00000000..a85a291a
--- /dev/null
+++ b/src/test/domain/work-orders/utils/slide-over-failed-save-baseline.test.ts
@@ -0,0 +1,103 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildSlideOverPatch,
+  isSlideOverDraftDirty,
+} from "@/domain/work-orders/utils/slide-over-draft";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+/**
+ * Mirrors the failed-save path: optimistic parent row absorbs the patch, then
+ * rolls back, while draft is compared against a frozen pre-save baseline.
+ */
+function afterFailedOptimisticSave(input: {
+  baseline: WorkOrderTableRow;
+  draft: WorkOrderTableRow;
+  optimisticParent: WorkOrderTableRow;
+  rolledBackParent: WorkOrderTableRow;
+}) {
+  const dirtyAgainstOptimistic = isSlideOverDraftDirty(input.draft, input.optimisticParent);
+  const dirtyAgainstBaseline = isSlideOverDraftDirty(input.draft, input.baseline);
+  const dirtyAgainstRolledBack = isSlideOverDraftDirty(input.draft, input.rolledBackParent);
+  const retryPatch = buildSlideOverPatch(input.draft, input.baseline);
+  return {
+    dirtyAgainstOptimistic,
+    dirtyAgainstBaseline,
+    dirtyAgainstRolledBack,
+    retryPatch,
+    canRetry: dirtyAgainstBaseline && Object.keys(retryPatch).length > 0,
+  };
+}
+
+function row(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: 1,
+    woNumber: "1001",
+    site: "SITE-A",
+    type: "PM",
+    severity: null,
+    dispatcherId: "10",
+    dispatcherName: "Alex",
+    scheduledOn: "2026-07-16",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "2026-07-16",
+    dayLabel: "Thu",
+    location: "Main",
+    locationId: 5,
+    pm: "Plumbing",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "v1",
+    company: "Acme",
+    tech: "Sam",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "09:00",
+    status: "Incomplete",
+    docStatus: "",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "2026-07-20",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "rv1",
+    dispatchRowVersion: "",
+    flagColor: null,
+    isAddOn: false,
+    upliftSummary: { hasUplift: false, pendingCount: 0 },
+    ...overrides,
+  };
+}
+
+describe("slide-over failed-save baseline contract", () => {
+  it("stays dirty vs frozen baseline after optimistic parent absorbs the edit", () => {
+    const baseline = row({ woNumber: "1001" });
+    const draft = row({ woNumber: "2002" });
+    const optimisticParent = row({ woNumber: "2002" });
+
+    const result = afterFailedOptimisticSave({
+      baseline,
+      draft,
+      optimisticParent,
+      rolledBackParent: baseline,
+    });
+
+    // Bug the review caught: comparing against optimistic parent clears dirty.
+    expect(result.dirtyAgainstOptimistic).toBe(false);
+    expect(result.dirtyAgainstBaseline).toBe(true);
+    expect(result.dirtyAgainstRolledBack).toBe(true);
+    expect(result.canRetry).toBe(true);
+    expect(result.retryPatch).toEqual({ woNumber: "2002" });
+  });
+});
diff --git a/src/test/domain/work-orders/utils/slide-over-save-contract.test.ts b/src/test/domain/work-orders/utils/slide-over-save-contract.test.ts
new file mode 100644
index 00000000..31828684
--- /dev/null
+++ b/src/test/domain/work-orders/utils/slide-over-save-contract.test.ts
@@ -0,0 +1,76 @@
+import { describe, expect, it, vi } from "vitest";
+
+/**
+ * Mirrors WorkOrderSlideOver commit: exit edit mode only after a successful save
+ * (or when there is nothing to persist).
+ */
+function commitSlideOverEdit(input: {
+  patchKeys: number;
+  onSave: (options: { onSuccess?: () => void }) => void;
+  exitEdit: () => void;
+  clearUnsaved: () => void;
+}) {
+  if (input.patchKeys === 0) {
+    input.exitEdit();
+    input.clearUnsaved();
+    return;
+  }
+
+  input.onSave({
+    onSuccess: () => {
+      input.exitEdit();
+      input.clearUnsaved();
+    },
+  });
+}
+
+describe("slide-over commit save contract", () => {
+  it("exits edit mode immediately when there is no patch", () => {
+    const exitEdit = vi.fn();
+    const clearUnsaved = vi.fn();
+    const onSave = vi.fn();
+
+    commitSlideOverEdit({ patchKeys: 0, onSave, exitEdit, clearUnsaved });
+
+    expect(onSave).not.toHaveBeenCalled();
+    expect(exitEdit).toHaveBeenCalledOnce();
+    expect(clearUnsaved).toHaveBeenCalledOnce();
+  });
+
+  it("keeps edit mode when save fails (onSuccess never runs)", () => {
+    const exitEdit = vi.fn();
+    const clearUnsaved = vi.fn();
+
+    commitSlideOverEdit({
+      patchKeys: 1,
+      onSave: () => {
+        /* rejected — do not call onSuccess */
+      },
+      exitEdit,
+      clearUnsaved,
+    });
+
+    expect(exitEdit).not.toHaveBeenCalled();
+    expect(clearUnsaved).not.toHaveBeenCalled();
+  });
+
+  it("exits edit mode only from onSuccess after a rejected-then-retry path would not", () => {
+    const exitEdit = vi.fn();
+    const clearUnsaved = vi.fn();
+    let success: (() => void) | undefined;
+
+    commitSlideOverEdit({
+      patchKeys: 2,
+      onSave: (options) => {
+        success = options.onSuccess;
+      },
+      exitEdit,
+      clearUnsaved,
+    });
+
+    expect(exitEdit).not.toHaveBeenCalled();
+    success?.();
+    expect(exitEdit).toHaveBeenCalledOnce();
+    expect(clearUnsaved).toHaveBeenCalledOnce();
+  });
+});
diff --git a/src/test/domain/work-orders/utils/table-filter-utils.test.ts b/src/test/domain/work-orders/utils/table-filter-utils.test.ts
new file mode 100644
index 00000000..022d36fe
--- /dev/null
+++ b/src/test/domain/work-orders/utils/table-filter-utils.test.ts
@@ -0,0 +1,611 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { EMPTY_UPLIFT_SUMMARY } from "@/domain/work-orders/types/work-order-uplift";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { EMPTY_ADVANCED_FILTERS } from "@/domain/work-orders/types/work-order-advanced-filters";
+import type { WorkOrderBarFilters } from "@/domain/work-orders/types/work-order-list-filters";
+import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
+import {
+  buildDayGroups,
+  composeBoardSections,
+  computeIsPastDue,
+  enrichTableRow,
+  filterByBarAndSearch,
+  isUnassignedBoardRow,
+  matchesAdvancedFilters,
+  mergeWeeklyAndUnassignedQueue,
+  partitionBoardRows,
+  splitScheduledUnscheduled,
+} from "@/domain/work-orders/utils/table-filter-utils";
+import { deriveDayFields } from "@/domain/work-orders/utils/table-day-utils";
+import { mapWorkOrderTableRow } from "@/domain/work-orders/mappers/work-order-mapper";
+import { mondayOf, todayIso } from "@/domain/work-orders/utils/wizard-date-utils";
+
+function shiftIso(days: number): string {
+  const d = new Date(`${todayIso()}T12:00:00.000Z`);
+  d.setUTCDate(d.getUTCDate() + days);
+  return d.toISOString().slice(0, 10);
+}
+function makeRow(overrides: Partial<WorkOrderTableRow> = {}): WorkOrderTableRow {
+  return {
+    id: "1",
+    woNumber: "12345678901",
+    site: "SITE01",
+    type: "PM",
+    severity: null,
+    dispatcherId: "u1",
+    dispatcherName: "Alice",
+    scheduledOn: "2026-06-23",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "06/23",
+    dayLabel: "TUE · 06/23",
+    location: "Main St",
+    locationId: "10",
+    pm: "HVAC",
+    serviceNotes: "",
+    extraServices: [],
+    company: "Acme",
+    tech: "Bob",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Scheduled",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "2026-06-30",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    isAddOn: false,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "Test WO",
+    priority: "Sev 3",
+    vendorId: "",
+    primaryDispatchId: null,
+    rowVersion: "AQAAAAAAAAA=",
+    dispatchRowVersion: "",
+    flagColor: null,
+    upliftSummary: EMPTY_UPLIFT_SUMMARY,
+    ...overrides,
+  };
+}
+
+function bar(
+  weekMonday: string,
+  overrides: Partial<WorkOrderBarFilters> = {},
+): WorkOrderBarFilters {
+  return {
+    weekMonday,
+    dispatcherIds: new Set(),
+    types: new Set<WOType>(),
+    ...overrides,
+  };
+}
+
+describe("deriveDayFields", () => {
+  it("derives MM/DD group and weekday label", () => {
+    expect(deriveDayFields("2026-06-23")).toEqual({
+      dayGroup: "06/23",
+      dayLabel: "TUE · 06/23",
+    });
+  });
+});
+
+describe("filterByBarAndSearch", () => {
+  const weekMonday = "2026-06-01";
+
+  it("keeps undated rows without targetWeek for any active week", () => {
+    const undated = makeRow({ id: "us1", scheduledOn: "", targetWeek: "" });
+
+    const ids = filterByBarAndSearch([undated], bar(weekMonday), "").map((row) => row.id);
+    expect(ids).toEqual(["us1"]);
+  });
+
+  it("excludes undated rows whose targetWeek is outside the active week", () => {
+    const undatedOtherTarget = makeRow({
+      id: "tw1",
+      scheduledOn: "",
+      targetWeek: "2026-07-06",
+    });
+
+    const ids = filterByBarAndSearch([undatedOtherTarget], bar(weekMonday), "").map(
+      (row) => row.id,
+    );
+    expect(ids).toEqual([]);
+  });
+
+  it("excludes dated rows outside the active week", () => {
+    const inWeek = makeRow({
+      id: "in",
+      scheduledOn: "2026-06-03",
+      ...deriveDayFields("2026-06-03"),
+    });
+    const outWeek = makeRow({
+      id: "out",
+      scheduledOn: "2026-06-15",
+      ...deriveDayFields("2026-06-15"),
+    });
+
+    const ids = filterByBarAndSearch([inWeek, outWeek], bar(weekMonday), "").map((row) => row.id);
+    expect(ids).toEqual(["in"]);
+  });
+
+  it("keeps prior-week unresolved carry-over rows that match a one-character search", () => {
+    const carried = makeRow({
+      id: "co",
+      woNumber: "WO-CARRY",
+      scheduledOn: "2026-05-13",
+      status: "Scheduled",
+      ...deriveDayFields("2026-05-13"),
+    });
+    const completed = makeRow({
+      id: "done",
+      woNumber: "WO-DONE",
+      scheduledOn: "2026-05-13",
+      status: "Completed",
+      ...deriveDayFields("2026-05-13"),
+    });
+
+    const ids = filterByBarAndSearch([carried, completed], bar("2026-05-18"), "W").map(
+      (row) => row.id,
+    );
+    expect(ids).toEqual(["co"]);
+  });
+
+  it("keeps the union of selected types (OR)", () => {
+    const pm = makeRow({ id: "pm", type: "PM", scheduledOn: "2026-06-03" });
+    const emergency = makeRow({ id: "em", type: "Emergency", scheduledOn: "2026-06-03" });
+    const reactive = makeRow({ id: "rx", type: "Reactive", scheduledOn: "2026-06-03" });
+
+    const ids = filterByBarAndSearch(
+      [pm, emergency, reactive],
+      bar(weekMonday, { types: new Set(["Emergency", "Reactive"]) }),
+      "",
+    ).map((row) => row.id);
+    expect(ids).toEqual(["em", "rx"]);
+  });
+
+  it("matches Overdue via isPastDue even when row.type is not Overdue", () => {
+    const pastDuePm = makeRow({
+      id: "pd",
+      type: "PM",
+      isPastDue: true,
+      scheduledOn: "2026-06-03",
+    });
+    const currentPm = makeRow({
+      id: "now",
+      type: "PM",
+      isPastDue: false,
+      scheduledOn: "2026-06-03",
+    });
+
+    const ids = filterByBarAndSearch(
+      [pastDuePm, currentPm],
+      bar(weekMonday, { types: new Set(["Overdue"]) }),
+      "",
+    ).map((row) => row.id);
+    expect(ids).toEqual(["pd"]);
+  });
+
+  it("hides a row after type correction when the bar filter no longer matches", () => {
+    const afterCorrection = makeRow({
+      id: "1",
+      type: "Emergency",
+      scheduledOn: "2026-06-03",
+    });
+
+    expect(
+      filterByBarAndSearch(
+        [afterCorrection],
+        bar(weekMonday, { types: new Set<WOType>(["PM"]) }),
+        "",
+      ).map((row) => row.id),
+    ).toEqual([]);
+  });
+
+  it("does not filter by type when the set is empty", () => {
+    const pm = makeRow({ id: "pm", type: "PM", scheduledOn: "2026-06-03" });
+    const emergency = makeRow({ id: "em", type: "Emergency", scheduledOn: "2026-06-03" });
+
+    const ids = filterByBarAndSearch([pm, emergency], bar(weekMonday), "").map((row) => row.id);
+    expect(ids).toEqual(["pm", "em"]);
+  });
+});
+
+describe("isUnassignedBoardRow", () => {
+  it("treats empty dispatcher as unassigned unless terminal", () => {
+    expect(isUnassignedBoardRow(makeRow({ dispatcherId: "" }))).toBe(true);
+    expect(isUnassignedBoardRow(makeRow({ dispatcherId: "u1" }))).toBe(false);
+    expect(isUnassignedBoardRow(makeRow({ dispatcherId: "", status: "Completed" }))).toBe(false);
+  });
+});
+
+describe("partitionBoardRows", () => {
+  it("pins unassigned rows first and keeps assigned undated rows in Unscheduled", () => {
+    const datedUnassigned = makeRow({
+      id: "u-dated",
+      dispatcherId: "",
+      dispatcherName: "",
+      scheduledOn: "2026-06-02",
+      ...deriveDayFields("2026-06-02"),
+    });
+    const undatedUnassigned = makeRow({
+      id: "us-undated",
+      dispatcherId: "",
+      dispatcherName: "",
+      scheduledOn: "",
+      dayGroup: "",
+      dayLabel: "",
+    });
+    const undatedAssigned = makeRow({
+      id: "us-assigned",
+      dispatcherId: "sarah",
+      dispatcherName: "Sarah",
+      scheduledOn: "",
+      dayGroup: "",
+      dayLabel: "",
+    });
+    const datedAssigned = makeRow({ id: "day-assigned", dispatcherId: "sarah" });
+
+    const result = partitionBoardRows([
+      datedUnassigned,
+      undatedUnassigned,
+      undatedAssigned,
+      datedAssigned,
+    ]);
+
+    expect(result.unassigned.map((row) => row.id)).toEqual(["u-dated", "us-undated"]);
+    expect(result.unscheduled.map((row) => row.id)).toEqual(["us-assigned"]);
+    expect(result.scheduled.map((row) => row.id)).toEqual(["day-assigned"]);
+
+    const allIds = [...result.unassigned, ...result.unscheduled, ...result.scheduled].map(
+      (row) => row.id,
+    );
+    expect(new Set(allIds).size).toBe(allIds.length);
+  });
+});
+
+describe("mergeWeeklyAndUnassignedQueue", () => {
+  it("keeps the weekly row when the same id is also in the queue", () => {
+    const weekly = makeRow({ id: "dup", dispatcherName: "Weekly" });
+    const queue = makeRow({ id: "dup", dispatcherName: "Queue" });
+    const extra = makeRow({ id: "out", dispatcherId: "", dispatcherName: "" });
+
+    const merged = mergeWeeklyAndUnassignedQueue([weekly], [queue, extra]);
+    expect(merged.map((row) => row.id)).toEqual(["dup", "out"]);
+    expect(merged[0]?.dispatcherName).toBe("Weekly");
+  });
+});
+
+describe("composeBoardSections", () => {
+  it("pins a scheduled unassigned WO that is outside the selected week", () => {
+    const inWeekAssigned = makeRow({
+      id: "in-week",
+      dispatcherId: "sarah",
+      dispatcherName: "Sarah",
+      scheduledOn: "2026-06-03",
+      ...deriveDayFields("2026-06-03"),
+    });
+    const outOfWeekUnassigned = makeRow({
+      id: "out-week",
+      dispatcherId: "",
+      dispatcherName: "",
+      scheduledOn: "2026-07-15",
+      ...deriveDayFields("2026-07-15"),
+    });
+
+    const result = composeBoardSections({
+      displayRows: [inWeekAssigned, outOfWeekUnassigned],
+      weekRows: [inWeekAssigned],
+      weeklyIds: new Set(["in-week"]),
+      queueIds: new Set(["out-week"]),
+    });
+
+    expect(result.unassigned.map((row) => row.id)).toEqual(["out-week"]);
+    expect(result.scheduled.map((row) => row.id)).toEqual(["in-week"]);
+    expect(result.unscheduled).toEqual([]);
+  });
+
+  it("does not place an assigned leftover queue row into the current week groups", () => {
+    const assignedOutOfWeek = makeRow({
+      id: "was-queue",
+      dispatcherId: "sarah",
+      dispatcherName: "Sarah",
+      scheduledOn: "2026-07-15",
+      ...deriveDayFields("2026-07-15"),
+    });
+
+    const result = composeBoardSections({
+      displayRows: [assignedOutOfWeek],
+      weekRows: [assignedOutOfWeek],
+      weeklyIds: new Set(),
+      queueIds: new Set(["was-queue"]),
+    });
+
+    expect(result.unassigned).toEqual([]);
+    expect(result.scheduled).toEqual([]);
+    expect(result.unscheduled).toEqual([]);
+  });
+});
+
+describe("splitScheduledUnscheduled", () => {
+  it("splits rows without scheduledOn into unscheduled", () => {
+    const scheduled = makeRow({ id: "a", scheduledOn: "2026-06-23" });
+    const unsched = makeRow({ id: "b", scheduledOn: "" });
+    const result = splitScheduledUnscheduled([scheduled, unsched]);
+    expect(result.scheduled).toHaveLength(1);
+    expect(result.unscheduled).toHaveLength(1);
+    expect(result.unscheduled[0].id).toBe("b");
+  });
+});
+
+describe("buildDayGroups", () => {
+  it("groups by dayGroup and sorts chronologically", () => {
+    const later = makeRow({
+      id: "2",
+      scheduledOn: "2026-06-24",
+      completedDate: "",
+      dayGroup: "06/24",
+      dayLabel: "WED · 06/24",
+    });
+    const earlier = makeRow({
+      id: "1",
+      scheduledOn: "2026-06-23",
+      completedDate: "",
+      dayGroup: "06/23",
+      dayLabel: "TUE · 06/23",
+    });
+    const groups = buildDayGroups([later, earlier]);
+    expect(groups).toHaveLength(2);
+    expect(groups[0].key).toBe("06/23");
+    expect(groups[1].key).toBe("06/24");
+  });
+});
+
+describe("matchesAdvancedFilters", () => {
+  it("filters by site and type", () => {
+    const weekMonday = mondayOf(todayIso());
+    const row = makeRow({
+      site: "SITE01",
+      type: "PM",
+      scheduledOn: weekMonday,
+      ...deriveDayFields(weekMonday),
+    });
+    const filters = {
+      ...EMPTY_ADVANCED_FILTERS,
+      dateRange: "custom" as const,
+      customFrom: "0000-01-01",
+      customTo: "9999-12-31",
+      sites: new Set(["SITE01"]),
+      types: new Set(["PM" as const]),
+    };
+    expect(matchesAdvancedFilters(row, filters)).toBe(true);
+
+    const noMatch = {
+      ...filters,
+      types: new Set(["Emergency" as const]),
+    };
+    expect(matchesAdvancedFilters(row, noMatch)).toBe(false);
+  });
+
+  it("matches Overdue when isPastDue is true", () => {
+    const weekMonday = mondayOf(todayIso());
+    const pastDue = makeRow({
+      scheduledOn: weekMonday,
+      ...deriveDayFields(weekMonday),
+      isPastDue: true,
+    });
+    const filters = {
+      ...EMPTY_ADVANCED_FILTERS,
+      dateRange: "custom" as const,
+      customFrom: "0000-01-01",
+      customTo: "9999-12-31",
+      types: new Set(["Overdue" as const]),
+    };
+    expect(matchesAdvancedFilters(pastDue, filters)).toBe(true);
+    expect(
+      matchesAdvancedFilters(makeRow({ isPastDue: false, scheduledOn: weekMonday }), filters),
+    ).toBe(false);
+  });
+
+  it("matches Aveta-only when avetaRequired is true", () => {
+    const weekMonday = mondayOf(todayIso());
+    const filters = {
+      ...EMPTY_ADVANCED_FILTERS,
+      dateRange: "custom" as const,
+      customFrom: "0000-01-01",
+      customTo: "9999-12-31",
+      avetaOnly: true,
+    };
+    expect(
+      matchesAdvancedFilters(makeRow({ scheduledOn: weekMonday, avetaRequired: true }), filters),
+    ).toBe(true);
+    expect(
+      matchesAdvancedFilters(makeRow({ scheduledOn: weekMonday, avetaRequired: false }), filters),
+    ).toBe(false);
+  });
+
+  it("keeps only undated rows when Unscheduled overrides any date range", () => {
+    const filters = {
+      ...EMPTY_ADVANCED_FILTERS,
+      dateRange: "last-week" as const,
+      unscheduledOnly: true,
+    };
+    const dated = makeRow({ scheduledOn: "2026-06-23" });
+    const weekOnly = makeRow({
+      scheduledOn: "",
+      targetWeek: "2026-07-06",
+      scheduleWeekOnly: true,
+    });
+    const undatedAssigned = makeRow({
+      scheduledOn: "",
+      dispatcherId: "u1",
+      dispatcherName: "Alice",
+    });
+
+    expect(matchesAdvancedFilters(dated, filters)).toBe(false);
+    expect(matchesAdvancedFilters(weekOnly, filters)).toBe(true);
+    expect(matchesAdvancedFilters(undatedAssigned, filters)).toBe(true);
+  });
+});
+
+describe("computeIsPastDue", () => {
+  it("is true when scheduledOn is before today even if dueDate is future", () => {
+    expect(
+      computeIsPastDue(
+        makeRow({
+          dueDate: shiftIso(5),
+          scheduledOn: shiftIso(-1),
+          status: "Scheduled",
+        }),
+      ),
+    ).toBe(true);
+  });
+
+  it("is false when scheduledOn is future even if dueDate is past", () => {
+    expect(
+      computeIsPastDue(
+        makeRow({
+          dueDate: shiftIso(-1),
+          scheduledOn: shiftIso(5),
+          status: "Incomplete",
+        }),
+      ),
+    ).toBe(false);
+  });
+
+  it("is false when scheduledOn is empty", () => {
+    expect(
+      computeIsPastDue(
+        makeRow({
+          dueDate: shiftIso(-3),
+          scheduledOn: "",
+          status: "Scheduled",
+        }),
+      ),
+    ).toBe(false);
+  });
+
+  it("is false for terminal statuses even with past scheduledOn", () => {
+    expect(
+      computeIsPastDue(
+        makeRow({
+          dueDate: shiftIso(-2),
+          scheduledOn: shiftIso(-2),
+          status: "Completed",
+        }),
+      ),
+    ).toBe(false);
+    expect(
+      computeIsPastDue(
+        makeRow({
+          scheduledOn: shiftIso(-2),
+          status: "Canceled",
+        }),
+      ),
+    ).toBe(false);
+  });
+
+  it("is false when scheduledOn is today", () => {
+    expect(
+      computeIsPastDue(
+        makeRow({
+          dueDate: shiftIso(-1),
+          scheduledOn: todayIso(),
+          status: "Scheduled",
+        }),
+      ),
+    ).toBe(false);
+  });
+});
+
+describe("computeIsPastDue across the local/UTC day boundary", () => {
+  beforeEach(() => {
+    // UTC-3 with no DST: local evening is already the next day in UTC.
+    vi.stubEnv("TZ", "America/Sao_Paulo");
+    vi.useFakeTimers({ toFake: ["Date"] });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllEnvs();
+  });
+
+  it("does not flag today's work as Past Due at 23:30 local (02:30 UTC next day)", () => {
+    vi.setSystemTime(new Date("2026-09-17T02:30:00.000Z"));
+
+    expect(computeIsPastDue(makeRow({ scheduledOn: "2026-09-16", status: "Scheduled" }))).toBe(
+      false,
+    );
+    expect(computeIsPastDue(makeRow({ scheduledOn: "2026-09-15", status: "Scheduled" }))).toBe(
+      true,
+    );
+  });
+
+  it("flags yesterday's work as Past Due at 00:30 local", () => {
+    vi.setSystemTime(new Date("2026-09-17T03:30:00.000Z"));
+
+    expect(computeIsPastDue(makeRow({ scheduledOn: "2026-09-16", status: "Scheduled" }))).toBe(
+      true,
+    );
+    expect(computeIsPastDue(makeRow({ scheduledOn: "2026-09-17", status: "Scheduled" }))).toBe(
+      false,
+    );
+  });
+});
+
+describe("enrichTableRow", () => {
+  it("recomputes isPastDue from scheduledOn and ignores sticky API true", () => {
+    const enriched = enrichTableRow(
+      makeRow({
+        dueDate: shiftIso(-1),
+        scheduledOn: shiftIso(5),
+        isPastDue: true,
+        status: "Scheduled",
+      }),
+    );
+    expect(enriched.isPastDue).toBe(false);
+  });
+
+  it("sets isPastDue true from past scheduledOn even when API flag is false", () => {
+    const enriched = enrichTableRow(
+      makeRow({
+        dueDate: shiftIso(5),
+        scheduledOn: shiftIso(-1),
+        isPastDue: false,
+        status: "Incomplete",
+      }),
+    );
+    expect(enriched.isPastDue).toBe(true);
+  });
+});
+
+describe("mapWorkOrderTableRow", () => {
+  it("maps API list fields to table row", () => {
+    const row = mapWorkOrderTableRow({
+      id: 42,
+      internalWONumber: "12345678901",
+      title: "Leak repair",
+      location: "Building A",
+      status: "Open",
+      scheduledDate: "2026-06-23",
+      dueDate: "2026-06-30",
+      assignedTo: "Alice",
+      problem: "Plumbing",
+      source: "Reactive",
+    });
+    expect(row.id).toBe(42);
+    expect(row.woNumber).toBe("12345678901");
+    expect(row.scheduledOn).toBe("2026-06-23");
+    expect(row.dayGroup).toBe("06/23");
+    expect(row.type).toBe("Reactive");
+    expect(row.status).toBe("Incomplete");
+  });
+});
diff --git a/src/test/domain/work-orders/utils/uplift-display-utils.test.ts b/src/test/domain/work-orders/utils/uplift-display-utils.test.ts
new file mode 100644
index 00000000..af91feeb
--- /dev/null
+++ b/src/test/domain/work-orders/utils/uplift-display-utils.test.ts
@@ -0,0 +1,89 @@
+import { describe, expect, it } from "vitest";
+import {
+  canRevokeWorkOrderUplift,
+  getRemainingUpliftAllowance,
+  hasOpenWorkOrderUplift,
+  upliftRevokeRequiresReason,
+} from "@/domain/work-orders/utils/uplift-display-utils";
+
+describe("canRevokeWorkOrderUplift", () => {
+  it("allows a dispatcher to revoke their own auto-approved uplift", () => {
+    expect(
+      canRevokeWorkOrderUplift(
+        { status: "auto_approved", requestedById: "dispatcher-1" },
+        "dispatcher-1",
+      ),
+    ).toBe(true);
+  });
+
+  it("rejects a dispatcher revoking another user's auto-approved uplift", () => {
+    expect(
+      canRevokeWorkOrderUplift(
+        { status: "auto_approved", requestedById: "other-dispatcher" },
+        "dispatcher-1",
+      ),
+    ).toBe(false);
+  });
+
+  it("rejects admin revoking auto-approved uplift they did not request", () => {
+    expect(
+      canRevokeWorkOrderUplift(
+        { status: "auto_approved", requestedById: "dispatcher-1" },
+        "admin-user",
+      ),
+    ).toBe(false);
+  });
+
+  it("allows admin to revoke their own auto-approved uplift as the requester", () => {
+    expect(
+      canRevokeWorkOrderUplift(
+        { status: "auto_approved", requestedById: "admin-user" },
+        "admin-user",
+      ),
+    ).toBe(true);
+  });
+
+  it("rejects approved revoke on the Work Order surface (SH-214)", () => {
+    const uplift = { status: "approved" as const, requestedById: "dispatcher-1" };
+    expect(canRevokeWorkOrderUplift(uplift, "dispatcher-1")).toBe(false);
+    expect(canRevokeWorkOrderUplift(uplift, "admin-user")).toBe(false);
+  });
+
+  it("rejects revoke for other statuses", () => {
+    expect(canRevokeWorkOrderUplift({ status: "pending", requestedById: "u1" }, "u1")).toBe(false);
+    expect(canRevokeWorkOrderUplift({ status: "rejected", requestedById: "u1" }, "u1")).toBe(false);
+  });
+});
+
+describe("upliftRevokeRequiresReason", () => {
+  it("requires reason only for approved uplifts", () => {
+    expect(upliftRevokeRequiresReason("approved")).toBe(true);
+    expect(upliftRevokeRequiresReason("auto_approved")).toBe(false);
+  });
+});
+
+describe("SH-196 allowance helpers", () => {
+  it("uses a $500 cap for non-emergency work orders", () => {
+    expect(getRemainingUpliftAllowance("PM", [])).toBe(500);
+    expect(getRemainingUpliftAllowance("PM", [{ status: "auto_approved", amount: 400 }])).toBe(100);
+  });
+
+  it("uses a $5,000 cap for emergency work orders", () => {
+    expect(getRemainingUpliftAllowance("Emergency", [])).toBe(5000);
+  });
+
+  it("ignores revoked and pending amounts when computing remaining allowance", () => {
+    expect(
+      getRemainingUpliftAllowance("PM", [
+        { status: "auto_approved", amount: 200 },
+        { status: "revoked", amount: 300 },
+        { status: "pending", amount: 400 },
+      ]),
+    ).toBe(300);
+  });
+
+  it("detects an open pending request", () => {
+    expect(hasOpenWorkOrderUplift([{ status: "pending" }])).toBe(true);
+    expect(hasOpenWorkOrderUplift([{ status: "auto_approved" }])).toBe(false);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/vendor-assignment-patch.test.ts b/src/test/domain/work-orders/utils/vendor-assignment-patch.test.ts
new file mode 100644
index 00000000..72aaa7d2
--- /dev/null
+++ b/src/test/domain/work-orders/utils/vendor-assignment-patch.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+
+import { toVendorTablePatch } from "@/domain/work-orders/utils/vendor-assignment-patch";
+import {
+  getClosabilityGaps,
+  tableRowToClosabilityInput,
+} from "@/domain/work-orders/utils/wo-closability";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+describe("toVendorTablePatch", () => {
+  it("clears leftover primaryDispatchStatus so a new vendor is a live assignment", () => {
+    const patch = toVendorTablePatch({
+      vendorId: "9",
+      company: "New Co",
+      tech: "Pat",
+      techPhone: "555",
+    });
+    expect(patch.primaryDispatchStatus).toBe("");
+    expect(patch.vendorId).toBe("9");
+
+    const input = tableRowToClosabilityInput({
+      dispatcherId: "u1",
+      dispatcherName: "Alex",
+      company: patch.company ?? "",
+      vendorId: patch.vendorId ?? "",
+      tech: patch.tech ?? "",
+      completedDate: "2026-07-15",
+      woNumber: "20260623001",
+      pm: "HVAC PM",
+      docStatus: "Yes",
+      mediaCount: 1,
+      type: "PM",
+      primaryDispatchStatus: patch.primaryDispatchStatus,
+    } as WorkOrderTableRow);
+    expect(getClosabilityGaps(input)).not.toContain("Company");
+  });
+});
diff --git a/src/test/domain/work-orders/utils/week-day-nav-utils.test.ts b/src/test/domain/work-orders/utils/week-day-nav-utils.test.ts
new file mode 100644
index 00000000..ec6c9bc3
--- /dev/null
+++ b/src/test/domain/work-orders/utils/week-day-nav-utils.test.ts
@@ -0,0 +1,222 @@
+import { describe, expect, it } from "vitest";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { currentWeekMonday } from "@/domain/work-orders/utils/list-week-utils";
+import {
+  buildSelectedDayGroup,
+  firstWeekday,
+  formatDayTabLabel,
+  initialSelectedDay,
+  isDayScopedSearchEmpty,
+  isUnassignedQueueReady,
+  rowMatchesSelectedDay,
+  scheduledDayTab,
+  weekdaysMonFri,
+} from "@/domain/work-orders/utils/week-day-nav-utils";
+import { addDaysIso } from "@/domain/work-orders/utils/wizard-date-utils";
+
+function row(overrides: Partial<WorkOrderTableRow>): WorkOrderTableRow {
+  return {
+    id: "1",
+    woNumber: "1",
+    site: "",
+    type: "PM",
+    severity: null,
+    dispatcherId: "d1",
+    dispatcherName: "D",
+    scheduledOn: "",
+    completedDate: "",
+    targetWeek: "",
+    dayGroup: "",
+    dayLabel: "",
+    location: "",
+    locationId: "",
+    pm: "",
+    serviceNotes: "",
+    extraServices: [],
+    vendorId: "",
+    company: "",
+    tech: "",
+    techPhone: "",
+    apptStart: "",
+    apptEnd: "",
+    apptTime: "",
+    status: "Incomplete",
+    docStatus: "No",
+    pocName: "",
+    pocPhone: "",
+    pocNotes: "",
+    additionalContacts: [],
+    dueDate: "",
+    rescheduleCount: 0,
+    carriedOver: 0,
+    isAddOn: false,
+    originalWeek: "",
+    originalDate: "",
+    isPastDue: false,
+    scheduleWeekOnly: false,
+    mediaCount: 0,
+    title: "",
+    priority: "",
+    primaryDispatchId: null,
+    rowVersion: "",
+    dispatchRowVersion: "",
+    flagColor: null,
+    ...overrides,
+  };
+}
+
+describe("week-day-nav-utils (SH-240)", () => {
+  it("lists Mon–Fri of the active week", () => {
+    expect(weekdaysMonFri("2026-05-18")).toEqual([
+      "2026-05-18",
+      "2026-05-19",
+      "2026-05-20",
+      "2026-05-21",
+      "2026-05-22",
+    ]);
+  });
+
+  it("formats day tabs as Title · MM/DD", () => {
+    expect(formatDayTabLabel("2026-05-18")).toBe("Mon · 05/18");
+    expect(formatDayTabLabel("2026-05-22")).toBe("Fri · 05/22");
+  });
+
+  it("resets to Monday when the week changes", () => {
+    expect(firstWeekday("2026-05-25")).toBe("2026-05-25");
+  });
+
+  it("selects today on the live week when today is a weekday", () => {
+    const liveMonday = currentWeekMonday();
+    const wednesday = addDaysIso(liveMonday, 2);
+    expect(initialSelectedDay(liveMonday, wednesday)).toBe(wednesday);
+  });
+
+  it("selects Monday on a non-live week", () => {
+    expect(initialSelectedDay("2026-05-18", "2026-05-20")).toBe("2026-05-18");
+  });
+
+  it("excludes unscheduled and other days from the selected day group", () => {
+    const monday = row({
+      id: "mon",
+      scheduledOn: "2026-05-18",
+      dayGroup: "05/18",
+      dayLabel: "MON · 05/18",
+    });
+    const wednesday = row({
+      id: "wed",
+      scheduledOn: "2026-05-20",
+      dayGroup: "05/20",
+      dayLabel: "WED · 05/20",
+    });
+    const unscheduled = row({ id: "us", scheduledOn: "", scheduleWeekOnly: true });
+
+    expect(rowMatchesSelectedDay(unscheduled, "2026-05-18")).toBe(false);
+    expect(rowMatchesSelectedDay(monday, "2026-05-18")).toBe(true);
+
+    const group = buildSelectedDayGroup("2026-05-18", "2026-05-18", [
+      monday,
+      wednesday,
+      unscheduled,
+    ]);
+    expect(group.date).toBe("2026-05-18");
+    expect(group.label).toBe("Mon · 05/18");
+    expect(group.items.map((item) => item.id)).toEqual(["mon"]);
+  });
+
+  it("maps a scheduled weekday onto its week and day tab", () => {
+    expect(scheduledDayTab("2026-05-20")).toEqual({
+      weekMonday: "2026-05-18",
+      selectedDayIso: "2026-05-20",
+    });
+  });
+
+  it("treats search as empty only when the selected day and Unassigned have no hits", () => {
+    expect(
+      isDayScopedSearchEmpty({
+        searchActive: true,
+        unassignedCount: 0,
+        dayItemCount: 0,
+        unassignedQueueReady: true,
+      }),
+    ).toBe(true);
+    expect(
+      isDayScopedSearchEmpty({
+        searchActive: true,
+        unassignedCount: 0,
+        dayItemCount: 1,
+        unassignedQueueReady: true,
+      }),
+    ).toBe(false);
+    expect(
+      isDayScopedSearchEmpty({
+        searchActive: true,
+        unassignedCount: 2,
+        dayItemCount: 0,
+        unassignedQueueReady: true,
+      }),
+    ).toBe(false);
+    expect(
+      isDayScopedSearchEmpty({
+        searchActive: false,
+        unassignedCount: 0,
+        dayItemCount: 0,
+        unassignedQueueReady: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("does not treat search as empty while the Unassigned queue is loading or failed", () => {
+    expect(isUnassignedQueueReady(true, null)).toBe(false);
+    expect(isUnassignedQueueReady(false, new Error("queue unavailable"))).toBe(false);
+    expect(isUnassignedQueueReady(false, null)).toBe(true);
+    expect(
+      isDayScopedSearchEmpty({
+        searchActive: true,
+        unassignedCount: 0,
+        dayItemCount: 0,
+        unassignedQueueReady: false,
+      }),
+    ).toBe(false);
+  });
+});
+
+describe("week-day-nav-utils carry-over display", () => {
+  it("places a prior-week unresolved WO on the same weekday of the viewed week", () => {
+    const carried = row({
+      id: "co",
+      scheduledOn: "2026-05-13",
+      dayGroup: "05/13",
+      status: "Scheduled",
+      carriedOver: 2,
+      originalWeek: "2026-05-11",
+    });
+    const nativeWed = row({
+      id: "native",
+      scheduledOn: "2026-05-20",
+      dayGroup: "05/20",
+      status: "Scheduled",
+    });
+
+    expect(rowMatchesSelectedDay(carried, "2026-05-20", "2026-05-18")).toBe(true);
+    expect(rowMatchesSelectedDay(carried, "2026-05-18", "2026-05-18")).toBe(false);
+
+    const group = buildSelectedDayGroup("2026-05-18", "2026-05-20", [carried, nativeWed]);
+    expect(group.items.map((item) => item.id)).toEqual(["co", "native"]);
+  });
+
+  it("does not map completed carry-overs onto the viewed week", () => {
+    const completed = row({
+      id: "done",
+      scheduledOn: "2026-05-13",
+      status: "Completed",
+      carriedOver: 2,
+    });
+    expect(rowMatchesSelectedDay(completed, "2026-05-20", "2026-05-18")).toBe(false);
+    expect(buildSelectedDayGroup("2026-05-18", "2026-05-20", [completed]).items).toEqual([]);
+  });
+
+  it("keeps unscheduled rows out of day groups", () => {
+    const unscheduled = row({ id: "us", scheduledOn: "", scheduleWeekOnly: true, carriedOver: 2 });
+    expect(rowMatchesSelectedDay(unscheduled, "2026-05-18", "2026-05-18")).toBe(false);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/wizard-date-utils.test.ts b/src/test/domain/work-orders/utils/wizard-date-utils.test.ts
new file mode 100644
index 00000000..acf1ce97
--- /dev/null
+++ b/src/test/domain/work-orders/utils/wizard-date-utils.test.ts
@@ -0,0 +1,68 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  fmtDateRange,
+  fmtShortDate,
+  pad2,
+  parseApptTime,
+  rangeDayCount,
+  todayIso,
+} from "@/domain/work-orders/utils/wizard-date-utils";
+
+describe("parseApptTime", () => {
+  it("parses a 24-hour start-only value", () => {
+    expect(parseApptTime("09:00")).toEqual({ start: "09:00", end: "" });
+  });
+
+  it("leaves free-text labels unparsed", () => {
+    expect(parseApptTime("AM before 2pm")).toEqual({ start: "", end: "" });
+  });
+});
+
+describe("fmtShortDate", () => {
+  it("formats ISO dates as Mon D", () => {
+    expect(fmtShortDate("2026-06-08")).toBe("Jun 8");
+  });
+
+  it("returns em dash for invalid input", () => {
+    expect(fmtShortDate("")).toBe("—");
+    expect(fmtShortDate("nope")).toBe("—");
+  });
+});
+
+describe("fmtDateRange", () => {
+  it("joins start and end with en dash", () => {
+    expect(fmtDateRange("2026-06-08", "2026-06-12")).toBe("Jun 8 – Jun 12");
+  });
+});
+
+describe("rangeDayCount", () => {
+  it("counts inclusive days order-independently", () => {
+    expect(rangeDayCount("2026-06-08", "2026-06-12")).toBe(5);
+    expect(rangeDayCount("2026-06-12", "2026-06-08")).toBe(5);
+    expect(rangeDayCount("2026-06-08", "2026-06-08")).toBe(1);
+  });
+});
+
+describe("todayIso", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("uses local calendar day, not UTC ISO date, near midnight", () => {
+    // 02:30 UTC is still the previous local evening in Americas (UTC−N).
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-08-11T02:30:00.000Z"));
+
+    const now = new Date();
+    const expectedLocal = `${now.getFullYear()}-${pad2(now.getMonth() + 1)}-${pad2(now.getDate())}`;
+    const utcSlice = now.toISOString().slice(0, 10);
+
+    expect(todayIso()).toBe(expectedLocal);
+    expect(utcSlice).toBe("2026-08-11");
+
+    if (now.getTimezoneOffset() > 0) {
+      expect(todayIso()).toBe("2026-08-10");
+      expect(todayIso()).not.toBe(utcSlice);
+    }
+  });
+});
diff --git a/src/test/domain/work-orders/utils/wo-addon-cutoff.test.ts b/src/test/domain/work-orders/utils/wo-addon-cutoff.test.ts
new file mode 100644
index 00000000..091ab621
--- /dev/null
+++ b/src/test/domain/work-orders/utils/wo-addon-cutoff.test.ts
@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  computeIsAddOnAtCreation,
+  getAddonCutoffIso,
+  previewIsAddOnFromCutoff,
+  resolveIsAddOnForCreate,
+} from "@/domain/work-orders/utils/wo-addon-cutoff";
+
+describe("getAddonCutoffIso", () => {
+  it("returns Saturday of the week prior to the scheduled week", () => {
+    // Week of Mon 2026-07-06 → prior Saturday 2026-07-04
+    expect(getAddonCutoffIso("2026-07-08")).toBe("2026-07-04");
+    expect(getAddonCutoffIso("2026-07-06")).toBe("2026-07-04");
+    expect(getAddonCutoffIso("2026-07-10")).toBe("2026-07-04");
+  });
+
+  it("returns null for missing or invalid scheduledOn", () => {
+    expect(getAddonCutoffIso("")).toBeNull();
+    expect(getAddonCutoffIso("not-a-date")).toBeNull();
+  });
+});
+
+describe("previewIsAddOnFromCutoff", () => {
+  it("returns true when created after prior-Saturday 23:59", () => {
+    expect(
+      previewIsAddOnFromCutoff({
+        createdAt: "2026-07-05T00:00:00",
+        scheduledOn: "2026-07-08",
+      }),
+    ).toBe(true);
+  });
+
+  it("returns false when created on or before prior-Saturday 23:59", () => {
+    expect(
+      previewIsAddOnFromCutoff({
+        createdAt: "2026-07-04T23:59:59",
+        scheduledOn: "2026-07-08",
+      }),
+    ).toBe(false);
+    expect(
+      previewIsAddOnFromCutoff({
+        createdAt: "2026-07-03T12:00:00",
+        scheduledOn: "2026-07-08",
+      }),
+    ).toBe(false);
+  });
+
+  it("returns null when scheduledOn is missing", () => {
+    expect(
+      previewIsAddOnFromCutoff({
+        createdAt: new Date("2026-07-05T12:00:00"),
+        scheduledOn: "",
+      }),
+    ).toBeNull();
+  });
+
+  it("keeps computeIsAddOnAtCreation as a deprecated alias", () => {
+    expect(computeIsAddOnAtCreation).toBe(previewIsAddOnFromCutoff);
+  });
+});
+
+describe("resolveIsAddOnForCreate", () => {
+  it("uses cutoff preview when scheduledOn is set", () => {
+    expect(
+      resolveIsAddOnForCreate({
+        createdAt: "2026-07-05T00:00:00",
+        scheduledOn: "2026-07-08",
+        manualOverride: false,
+      }),
+    ).toBe(true);
+  });
+
+  it("uses manual override when scheduledOn is missing", () => {
+    expect(
+      resolveIsAddOnForCreate({
+        scheduledOn: "",
+        manualOverride: true,
+      }),
+    ).toBe(true);
+    expect(
+      resolveIsAddOnForCreate({
+        scheduledOn: "",
+        manualOverride: false,
+      }),
+    ).toBe(false);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/wo-closability.test.ts b/src/test/domain/work-orders/utils/wo-closability.test.ts
new file mode 100644
index 00000000..674d5d4a
--- /dev/null
+++ b/src/test/domain/work-orders/utils/wo-closability.test.ts
@@ -0,0 +1,498 @@
+import { describe, expect, it } from "vitest";
+import { readDetailWoType } from "@/domain/work-orders/utils/read-detail-closability-fields";
+import type { WorkOrderDetail } from "@/domain/work-orders/types/work-order-detail";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+import { EMPTY_WIZARD_DRAFT } from "@/domain/work-orders/types/work-order-wizard";
+import type { WoClosabilityInput } from "@/domain/work-orders/utils/wo-closability";
+import {
+  PENDING_UPLIFT_GAP,
+  UPLIFT_PENDING_COMPLETED_TITLE,
+  canGenerateCompDoc,
+  detailToClosabilityInput,
+  formatClosabilityMissingTitle,
+  getClosabilityGaps,
+  hasPendingUplift,
+  isCompletionStatusLabel,
+  isRealWoNumber,
+  tableRowToClosabilityInput,
+  wizardDraftToClosabilityInput,
+} from "@/domain/work-orders/utils/wo-closability";
+
+function makeInput(overrides: Partial<WoClosabilityInput> = {}): WoClosabilityInput {
+  return {
+    dispatcherId: "u1",
+    dispatcherName: "Alex",
+    company: "Acme HVAC",
+    vendorId: "",
+    tech: "Sam",
+    completedDate: "2026-07-01",
+    woNumber: "1001",
+    pm: "HVAC",
+    docStatus: "Yes",
+    mediaCount: 1,
+    type: "PM",
+    hasPendingUplift: false,
+    ...overrides,
+  };
+}
+
+describe("isRealWoNumber", () => {
+  it("rejects empty and SH-prefixed provisional numbers", () => {
+    expect(isRealWoNumber("")).toBe(false);
+    expect(isRealWoNumber("SH-9")).toBe(false);
+    expect(isRealWoNumber("sh123")).toBe(false);
+    expect(isRealWoNumber("98765")).toBe(true);
+  });
+});
+
+describe("isCompletionStatusLabel", () => {
+  it("treats Done and Completed as completion labels", () => {
+    expect(isCompletionStatusLabel("Done")).toBe(true);
+    expect(isCompletionStatusLabel("Completed")).toBe(true);
+    expect(isCompletionStatusLabel("Scheduled")).toBe(false);
+  });
+});
+
+describe("hasPendingUplift", () => {
+  it("is true when hasPendingUplift flag is set", () => {
+    expect(hasPendingUplift(makeInput({ hasPendingUplift: true }))).toBe(true);
+  });
+
+  it("is true when upliftSummary.pendingCount is positive", () => {
+    expect(
+      hasPendingUplift(makeInput({ upliftSummary: { hasUplift: true, pendingCount: 2 } })),
+    ).toBe(true);
+  });
+
+  it("is false when uplift is explicitly not pending", () => {
+    expect(hasPendingUplift(makeInput())).toBe(false);
+    expect(
+      hasPendingUplift(makeInput({ upliftSummary: { hasUplift: false, pendingCount: 0 } })),
+    ).toBe(false);
+  });
+});
+
+describe("getClosabilityGaps", () => {
+  it("returns empty when all gates are satisfied", () => {
+    expect(getClosabilityGaps(makeInput())).toEqual([]);
+  });
+
+  it("does not require appointment time to complete", () => {
+    const gaps = getClosabilityGaps(makeInput());
+    expect(gaps).toEqual([]);
+    expect(gaps.join(" ")).not.toMatch(/appt/i);
+  });
+
+  it("allows company without technician", () => {
+    const gaps = getClosabilityGaps(makeInput({ tech: "" }));
+    expect(gaps).toEqual([]);
+    expect(gaps).not.toContain("Technician");
+  });
+
+  it("blocks Completed when company is missing even if technician is assigned", () => {
+    expect(getClosabilityGaps(makeInput({ company: "", tech: "Sam" }))).toEqual(["Company"]);
+    expect(getClosabilityGaps(makeInput({ company: "  ", tech: "Sam" }))).toEqual(["Company"]);
+  });
+
+  it("allows Completed when vendorId is set and company/technician are empty", () => {
+    expect(getClosabilityGaps(makeInput({ company: "", vendorId: "7", tech: "" }))).toEqual([]);
+  });
+
+  it("blocks Completed when both company and vendorId are empty even with a technician", () => {
+    expect(getClosabilityGaps(makeInput({ company: "", vendorId: "  ", tech: "Sam" }))).toEqual([
+      "Company",
+    ]);
+  });
+
+  it.each(["PM", "Reactive", "Emergency", "Overdue", ""] as const)(
+    "blocks Completed without a company for type %s",
+    (type) => {
+      const gaps = getClosabilityGaps(
+        makeInput({
+          company: "",
+          vendorId: "",
+          type,
+          docStatus: "Yes",
+          mediaCount: 1,
+        }),
+      );
+      expect(gaps).toContain("Company");
+    },
+  );
+
+  it("lists field gaps before uplift and document gaps", () => {
+    expect(
+      getClosabilityGaps(
+        makeInput({
+          dispatcherId: "",
+          dispatcherName: "",
+          company: "  ",
+          tech: "  ",
+          completedDate: "",
+          woNumber: "SH-1",
+          pm: "",
+          hasPendingUplift: true,
+          docStatus: "No",
+          type: "PM",
+        }),
+      ),
+    ).toEqual([
+      "Dispatcher",
+      "Company",
+      "Completed Date",
+      "WO number",
+      "Service",
+      PENDING_UPLIFT_GAP,
+      "Completion document",
+    ]);
+  });
+
+  it("blocks Completed when uplift is pending via summary", () => {
+    expect(
+      getClosabilityGaps(makeInput({ upliftSummary: { hasUplift: true, pendingCount: 1 } })),
+    ).toEqual([PENDING_UPLIFT_GAP]);
+  });
+
+  it("blocks Completed when hasPendingUplift is true", () => {
+    expect(getClosabilityGaps(makeInput({ hasPendingUplift: true }))).toEqual([PENDING_UPLIFT_GAP]);
+  });
+
+  it("allows Completed when uplift status fields are absent (no pending evidence)", () => {
+    expect(
+      getClosabilityGaps(makeInput({ hasPendingUplift: undefined, upliftSummary: undefined })),
+    ).toEqual([]);
+  });
+
+  it("requires a photo for Emergency / Reactive", () => {
+    expect(
+      getClosabilityGaps(makeInput({ type: "Emergency", mediaCount: 0, docStatus: "No" })),
+    ).toEqual(["At least 1 photo"]);
+  });
+});
+
+describe("formatClosabilityMissingTitle", () => {
+  it("uses design Completed title when only uplift is missing", () => {
+    expect(formatClosabilityMissingTitle([PENDING_UPLIFT_GAP])).toBe(
+      UPLIFT_PENDING_COMPLETED_TITLE,
+    );
+  });
+
+  it("uses design Completed title when pending uplift is among mixed gaps", () => {
+    expect(formatClosabilityMissingTitle(["Dispatcher", PENDING_UPLIFT_GAP])).toBe(
+      UPLIFT_PENDING_COMPLETED_TITLE,
+    );
+  });
+
+  it("joins multiple non-uplift gaps with Missing prefix", () => {
+    expect(formatClosabilityMissingTitle(["Dispatcher", "Company"])).toBe(
+      "Missing: Dispatcher, Company",
+    );
+  });
+});
+
+describe("canGenerateCompDoc", () => {
+  it("allows generation when no closability gaps", () => {
+    expect(canGenerateCompDoc(makeInput())).toEqual({ allowed: true });
+  });
+
+  it("allows generation when only the completion document is missing", () => {
+    expect(canGenerateCompDoc(makeInput({ docStatus: "No" }))).toEqual({ allowed: true });
+  });
+
+  it("blocks generation with design reason when only pending uplift exists", () => {
+    expect(canGenerateCompDoc(makeInput({ hasPendingUplift: true }))).toEqual({
+      allowed: false,
+      reason: UPLIFT_PENDING_COMPLETED_TITLE,
+    });
+  });
+});
+
+describe("wizardDraftToClosabilityInput", () => {
+  it("maps vendorName to company and leaves tech empty", () => {
+    const input = wizardDraftToClosabilityInput({
+      ...EMPTY_WIZARD_DRAFT,
+      assigneeId: "u1",
+      assigneeName: "Alice",
+      vendorName: "ACME",
+      woNumber: "20260623001",
+      pm: "HVAC",
+      type: "PM",
+    });
+
+    expect(input).toEqual({
+      dispatcherId: "u1",
+      dispatcherName: "Alice",
+      company: "ACME",
+      vendorId: "",
+      tech: "",
+      completedDate: "",
+      woNumber: "20260623001",
+      pm: "HVAC",
+      docStatus: "",
+      mediaCount: 0,
+      type: "PM",
+    });
+    expect(getClosabilityGaps(input)).toContain("Completed Date");
+    expect(getClosabilityGaps(input)).toContain("Completion document");
+    expect(getClosabilityGaps(input)).not.toContain("Company");
+    expect(getClosabilityGaps(input)).not.toContain("Technician");
+  });
+});
+
+describe("detailToClosabilityInput", () => {
+  it("maps authoritative type/doc/media and problem so Done is not permanently blocked", () => {
+    const detail = {
+      assignedTo: "Alice",
+      completedDate: "2026-07-15",
+      workOrderNumber: "20260623001",
+      internalWONumber: "SH-1",
+      problem: "HVAC PM",
+      source: "procurement-integration",
+      type: "",
+      docStatus: "",
+      mediaCount: 0,
+      dispatches: [{ vendorName: "ACME Tech" }],
+    } as WorkOrderDetail;
+
+    const input = detailToClosabilityInput(detail);
+    expect(input.dispatcherName).toBe("Alice");
+    expect(input.company).toBe("ACME Tech");
+    expect(input.vendorId).toBe("");
+    expect(input.woNumber).toBe("20260623001");
+    expect(input.pm).toBe("HVAC PM");
+    expect(getClosabilityGaps(input)).toEqual([]);
+  });
+
+  it("does not treat integration source as WorkOrderType", () => {
+    const detail = {
+      assignedTo: "Alice",
+      completedDate: "2026-07-15",
+      workOrderNumber: "20260623001",
+      internalWONumber: "SH-1",
+      problem: "HVAC",
+      source: "PM",
+      type: "",
+      docStatus: "No",
+      mediaCount: 0,
+      dispatches: [{ vendorName: "ACME Tech" }],
+    } as WorkOrderDetail;
+
+    expect(detailToClosabilityInput(detail).type).toBe("");
+    expect(getClosabilityGaps(detailToClosabilityInput(detail))).toEqual([]);
+  });
+
+  it("blocks PM detail transition without completion document", () => {
+    const detail = {
+      assignedTo: "Alice",
+      completedDate: "2026-07-15",
+      workOrderNumber: "20260623001",
+      internalWONumber: "SH-1",
+      problem: "HVAC PM",
+      source: "procurement",
+      type: "PM",
+      docStatus: "No",
+      mediaCount: 0,
+      dispatches: [{ vendorName: "ACME Tech" }],
+    } as WorkOrderDetail;
+
+    expect(getClosabilityGaps(detailToClosabilityInput(detail))).toEqual(["Completion document"]);
+  });
+
+  it("blocks Emergency detail transition without photos", () => {
+    const detail = {
+      assignedTo: "Alice",
+      completedDate: "2026-07-15",
+      workOrderNumber: "20260623001",
+      internalWONumber: "SH-1",
+      problem: "Leak",
+      source: "portal",
+      type: "Emergency",
+      docStatus: "No",
+      mediaCount: 0,
+      dispatches: [{ vendorName: "ACME Tech" }],
+    } as WorkOrderDetail;
+
+    expect(getClosabilityGaps(detailToClosabilityInput(detail))).toEqual(["At least 1 photo"]);
+  });
+
+  it("treats vendorId without vendorName as assigned company", () => {
+    const detail = {
+      assignedTo: "Alice",
+      completedDate: "2026-07-15",
+      workOrderNumber: "20260623001",
+      internalWONumber: "SH-1",
+      problem: "HVAC PM",
+      source: "procurement-integration",
+      type: "",
+      docStatus: "",
+      mediaCount: 0,
+      dispatches: [{ vendorName: "", vendorId: 45 }],
+    } as WorkOrderDetail;
+
+    const input = detailToClosabilityInput(detail);
+    expect(input.company).toBe("");
+    expect(input.vendorId).toBe("45");
+    expect(getClosabilityGaps(input)).toEqual([]);
+  });
+
+  it.each(["Cancelled", "Canceled", "Refused", "CANCELLED", " canceled "])(
+    "ignores inactive dispatch status %s when resolving assigned company",
+    (status) => {
+      const inactiveOnly = {
+        assignedTo: "Alice",
+        completedDate: "2026-07-15",
+        workOrderNumber: "20260623001",
+        internalWONumber: "SH-1",
+        problem: "HVAC PM",
+        source: "procurement-integration",
+        type: "",
+        docStatus: "",
+        mediaCount: 0,
+        dispatches: [{ vendorName: "Old Co", vendorId: 45, status }],
+      } as WorkOrderDetail;
+
+      expect(detailToClosabilityInput(inactiveOnly).vendorId).toBe("");
+      expect(detailToClosabilityInput(inactiveOnly).company).toBe("");
+      expect(getClosabilityGaps(detailToClosabilityInput(inactiveOnly))).toContain("Company");
+    },
+  );
+
+  it.each(["Verified", "Completed", "Sent"])(
+    "treats dispatch status %s as a live company assignment",
+    (status) => {
+      const liveAssignment = {
+        assignedTo: "Alice",
+        completedDate: "2026-07-15",
+        workOrderNumber: "20260623001",
+        internalWONumber: "SH-1",
+        problem: "HVAC PM",
+        source: "procurement-integration",
+        type: "",
+        docStatus: "",
+        mediaCount: 0,
+        dispatches: [{ vendorName: "ACME Tech", vendorId: 45, status }],
+      } as WorkOrderDetail;
+
+      const input = detailToClosabilityInput(liveAssignment);
+      expect(input.company).toBe("ACME Tech");
+      expect(input.vendorId).toBe("45");
+      expect(getClosabilityGaps(input)).toEqual([]);
+    },
+  );
+
+  it("uses the active dispatch after an inactive cancelled spelling", () => {
+    const supersededThenCurrent = {
+      assignedTo: "Alice",
+      completedDate: "2026-07-15",
+      workOrderNumber: "20260623001",
+      internalWONumber: "SH-1",
+      problem: "HVAC PM",
+      source: "procurement-integration",
+      type: "",
+      docStatus: "",
+      mediaCount: 0,
+      dispatches: [
+        { vendorName: "Old Co", vendorId: 1, status: "Canceled" },
+        { vendorName: "ACME Tech", vendorId: 45, status: "Sent" },
+      ],
+    } as WorkOrderDetail;
+
+    const input = detailToClosabilityInput(supersededThenCurrent);
+    expect(input.company).toBe("ACME Tech");
+    expect(input.vendorId).toBe("45");
+    expect(getClosabilityGaps(input)).toEqual([]);
+  });
+});
+
+describe("tableRowToClosabilityInput", () => {
+  const closableRow = {
+    dispatcherId: "u1",
+    dispatcherName: "Alex",
+    company: "",
+    vendorId: "45",
+    tech: "",
+    completedDate: "2026-07-15",
+    woNumber: "20260623001",
+    pm: "HVAC PM",
+    docStatus: "",
+    mediaCount: 0,
+    type: "",
+  } as WorkOrderTableRow;
+
+  it("keeps vendorId as a live assignment when primary dispatch status is absent", () => {
+    const input = tableRowToClosabilityInput(closableRow);
+    expect(input.vendorId).toBe("45");
+    expect(getClosabilityGaps(input)).toEqual([]);
+  });
+
+  it.each(["Cancelled", "Canceled", "Refused"] as const)(
+    "clears company assignment when primary dispatch status is %s",
+    (primaryDispatchStatus) => {
+      const input = tableRowToClosabilityInput({ ...closableRow, primaryDispatchStatus });
+      expect(input.company).toBe("");
+      expect(input.vendorId).toBe("");
+      expect(getClosabilityGaps(input)).toContain("Company");
+    },
+  );
+
+  it("raises Company when the board omits vendor assignment (inactive primary)", () => {
+    const input = tableRowToClosabilityInput({
+      ...closableRow,
+      vendorId: "",
+      company: "",
+      primaryDispatchStatus: "Refused",
+    });
+    expect(input.vendorId).toBe("");
+    expect(getClosabilityGaps(input)).toContain("Company");
+  });
+
+  it("keeps a live vendorId after a vendor patch clears leftover refused status", () => {
+    const input = tableRowToClosabilityInput({
+      ...closableRow,
+      company: "New Co",
+      vendorId: "9",
+      primaryDispatchStatus: "",
+    });
+    expect(getClosabilityGaps(input)).toEqual([]);
+  });
+
+  it.each(["Pending", "Sent"] as const)(
+    "keeps company assignment after vendor save when primary dispatch status is %s",
+    (primaryDispatchStatus) => {
+      const input = tableRowToClosabilityInput({
+        ...closableRow,
+        company: "New Co",
+        vendorId: "9",
+        primaryDispatchStatus,
+      });
+      expect(input.vendorId).toBe("9");
+      expect(getClosabilityGaps(input)).not.toContain("Company");
+    },
+  );
+
+  it("raises Company when leftover Refused remains on the patched vendor id", () => {
+    const input = tableRowToClosabilityInput({
+      ...closableRow,
+      company: "New Co",
+      vendorId: "9",
+      primaryDispatchStatus: "Refused",
+    });
+    expect(getClosabilityGaps(input)).toContain("Company");
+  });
+});
+
+describe("readDetailWoType", () => {
+  it.each(["PM", "Reactive", "Emergency", "Overdue"])(
+    "passes through the business type %s",
+    (type) => {
+      expect(readDetailWoType({ workOrderType: type })).toBe(type);
+    },
+  );
+
+  it.each(["Add-On", "AddOn"])(
+    "normalizes the legacy Add-On payload %s to empty (SH-126/SH-184)",
+    (legacy) => {
+      expect(readDetailWoType({ workOrderType: legacy })).toBe("");
+    },
+  );
+});
diff --git a/src/test/domain/work-orders/utils/wo-lifecycle-transitions.test.ts b/src/test/domain/work-orders/utils/wo-lifecycle-transitions.test.ts
new file mode 100644
index 00000000..75ea23c6
--- /dev/null
+++ b/src/test/domain/work-orders/utils/wo-lifecycle-transitions.test.ts
@@ -0,0 +1,217 @@
+import { describe, expect, it } from "vitest";
+import { PENDING_UPLIFT_GAP } from "@/domain/work-orders/utils/wo-closability";
+import {
+  AUTOMATIC_LIFECYCLE_STATUSES,
+  BOARD_INLINE_STATUSES,
+  COMPLETED_DOC_BLOCK_MSG,
+  COMPLETED_MEDIA_BLOCK_MSG,
+  CREATION_INLINE_STATUSES,
+  SCHEDULED_NEEDS_DATE_MSG,
+  formatAapCompletedBlockTitle,
+  getInlineStatusTransitions,
+  getStatusOptionState,
+  hasConcreteScheduleDate,
+  maybeAutoSchedulePatch,
+  mergeAutoSchedulePatch,
+  resolveCreationStatus,
+  withAutoScheduleStatus,
+} from "@/domain/work-orders/utils/wo-lifecycle-transitions";
+import type { WorkOrderTableRow } from "@/domain/work-orders/types/work-order-table-row";
+
+describe("wo-lifecycle-transitions", () => {
+  it("lists only manual board statuses: no automatic states and no Canceled (SH-169)", () => {
+    expect(BOARD_INLINE_STATUSES).toEqual([
+      "Pending",
+      "En Route",
+      "On Site",
+      "In Progress",
+      "Completed",
+      "Rescheduled",
+      "Pending Quote",
+    ]);
+    expect(BOARD_INLINE_STATUSES).not.toContain("Canceled");
+    for (const automatic of AUTOMATIC_LIFECYCLE_STATUSES) {
+      expect(BOARD_INLINE_STATUSES).not.toContain(automatic);
+    }
+  });
+
+  it("never offers the current status as a transition (SH-358)", () => {
+    expect(getInlineStatusTransitions("On Site")).toEqual([
+      "Pending",
+      "En Route",
+      "In Progress",
+      "Completed",
+      "Rescheduled",
+      "Pending Quote",
+    ]);
+    expect(getInlineStatusTransitions("Incomplete")).toEqual(BOARD_INLINE_STATUSES);
+  });
+
+  it("lists AAP creation statuses only", () => {
+    expect(CREATION_INLINE_STATUSES).toEqual(["Incomplete", "Pending", "Scheduled"]);
+  });
+
+  it("treats week-only as no concrete schedule date", () => {
+    expect(hasConcreteScheduleDate({ scheduledOn: "2026-06-01", scheduleWeekOnly: true })).toBe(
+      false,
+    );
+    expect(hasConcreteScheduleDate({ scheduledOn: "2026-06-01", schedMode: "week" })).toBe(false);
+    expect(hasConcreteScheduleDate({ scheduledOn: "—" })).toBe(false);
+    expect(hasConcreteScheduleDate({ scheduledOn: "2026-06-01" })).toBe(true);
+  });
+
+  it("disables Scheduled without a concrete date", () => {
+    expect(getStatusOptionState({ scheduledOn: "" }, "Scheduled", [])).toEqual({
+      disabled: true,
+      title: SCHEDULED_NEEDS_DATE_MSG,
+    });
+  });
+
+  it("promotes Incomplete/Pending when a concrete date exists", () => {
+    expect(
+      maybeAutoSchedulePatch({
+        status: "Incomplete",
+        scheduledOn: "2026-06-01",
+        scheduleWeekOnly: false,
+      }),
+    ).toEqual({ status: "Scheduled" });
+    expect(
+      maybeAutoSchedulePatch({
+        status: "Pending",
+        scheduledOn: "2026-06-01",
+        scheduleWeekOnly: false,
+      }),
+    ).toEqual({ status: "Scheduled" });
+  });
+
+  it("reverts Scheduled without a concrete date to Pending", () => {
+    expect(
+      maybeAutoSchedulePatch({
+        status: "Scheduled",
+        scheduledOn: "",
+        scheduleWeekOnly: false,
+      }),
+    ).toEqual({ status: "Pending" });
+  });
+
+  it("does not auto-change In Progress when a date exists", () => {
+    expect(
+      maybeAutoSchedulePatch({
+        status: "In Progress",
+        scheduledOn: "2026-06-01",
+        scheduleWeekOnly: false,
+      }),
+    ).toEqual({});
+  });
+
+  it("merges auto-schedule onto an existing-row patch", () => {
+    const row = {
+      status: "Incomplete",
+      scheduledOn: "",
+      scheduleWeekOnly: false,
+    } as WorkOrderTableRow;
+    expect(
+      mergeAutoSchedulePatch(row, { scheduledOn: "2026-06-02", scheduleWeekOnly: false }),
+    ).toEqual({
+      scheduledOn: "2026-06-02",
+      scheduleWeekOnly: false,
+      status: "Scheduled",
+    });
+    expect(mergeAutoSchedulePatch(row, { vendorId: "9" })).toEqual({ vendorId: "9" });
+    expect(
+      mergeAutoSchedulePatch({ ...row, scheduledOn: "2026-06-01" }, { vendorId: "9" }),
+    ).toEqual({ vendorId: "9" });
+  });
+
+  it("promotes a pre-schedule wizard pick to Scheduled on a dated draft", () => {
+    const draft = {
+      status: "Scheduled",
+      scheduledOn: "2026-06-01",
+      scheduleWeekOnly: false,
+    };
+    expect(withAutoScheduleStatus(draft, { status: "Pending" })).toEqual({ status: "Scheduled" });
+    expect(withAutoScheduleStatus(draft, { status: "Incomplete" })).toEqual({
+      status: "Scheduled",
+    });
+  });
+
+  it("still derives Scheduled when a concrete date is set on a draft", () => {
+    const draft = {
+      status: "Pending",
+      scheduledOn: "",
+      scheduleWeekOnly: false,
+    };
+    expect(
+      withAutoScheduleStatus(draft, { scheduledOn: "2026-06-02", scheduleWeekOnly: false }),
+    ).toEqual({
+      scheduledOn: "2026-06-02",
+      scheduleWeekOnly: false,
+      status: "Scheduled",
+    });
+  });
+
+  it("promotes pre-schedule picks on dated rows", () => {
+    const row = {
+      status: "Scheduled",
+      scheduledOn: "2026-06-01",
+      scheduleWeekOnly: false,
+    } as WorkOrderTableRow;
+    expect(mergeAutoSchedulePatch(row, { status: "Pending" })).toEqual({ status: "Scheduled" });
+    expect(mergeAutoSchedulePatch(row, { status: "Incomplete" })).toEqual({
+      status: "Scheduled",
+    });
+  });
+
+  it("still demotes Scheduled when the schedule is cleared", () => {
+    const row = {
+      status: "Scheduled",
+      scheduledOn: "2026-06-01",
+      scheduleWeekOnly: false,
+    } as WorkOrderTableRow;
+    expect(mergeAutoSchedulePatch(row, { scheduledOn: "", scheduleWeekOnly: false })).toEqual({
+      scheduledOn: "",
+      scheduleWeekOnly: false,
+      status: "Pending",
+    });
+  });
+
+  it("promotes a Pending create pick to Scheduled when the draft is dated", () => {
+    expect(
+      resolveCreationStatus({
+        status: "Pending",
+        scheduledOn: "2026-06-01",
+        scheduleWeekOnly: false,
+      }),
+    ).toBe("Scheduled");
+  });
+
+  it("demotes Scheduled without a concrete date at create", () => {
+    expect(
+      resolveCreationStatus({
+        status: "Scheduled",
+        scheduledOn: "",
+        scheduleWeekOnly: false,
+      }),
+    ).toBe("Pending");
+  });
+
+  it("uses AAP completed tooltip hierarchy", () => {
+    expect(formatAapCompletedBlockTitle(["Dispatcher", "Company"])).toBe(
+      "Fill in Assigned To, Vendor before completing this work order.",
+    );
+    expect(formatAapCompletedBlockTitle(["Service"])).toBe(
+      "Select a service before completing this work order.",
+    );
+    expect(formatAapCompletedBlockTitle(["WO number"])).toBe(
+      "Assign a real APM number (not SH) before completing this work order.",
+    );
+    expect(formatAapCompletedBlockTitle([PENDING_UPLIFT_GAP])).toBe(
+      "This work order has an uplift pending approval and cannot be completed.",
+    );
+    expect(formatAapCompletedBlockTitle(["Completion document"])).toBe(COMPLETED_DOC_BLOCK_MSG);
+    expect(formatAapCompletedBlockTitle(["At least 1 photo"])).toBe(COMPLETED_MEDIA_BLOCK_MSG);
+    expect(formatAapCompletedBlockTitle(["Company", PENDING_UPLIFT_GAP])).toBe(
+      "Fill in Vendor before completing this work order.",
+    );
+  });
+});
diff --git a/src/test/domain/work-orders/utils/work-order-feedback-toasts.test.ts b/src/test/domain/work-orders/utils/work-order-feedback-toasts.test.ts
new file mode 100644
index 00000000..e9a5483f
--- /dev/null
+++ b/src/test/domain/work-orders/utils/work-order-feedback-toasts.test.ts
@@ -0,0 +1,188 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { toast } from "react-toastify";
+import { toVendorTablePatch } from "@/domain/work-orders/utils/vendor-assignment-patch";
+import {
+  applyAssignedToTableSave,
+  applyVendorTableSave,
+  isVendorAssignmentPatch,
+  notifySlideOverSaveSuccess,
+  notifyVendorAssigned,
+  notifyWorkOrderSaved,
+  patchWorkOrderAsCanceled,
+  patchWorkOrderAsCompleted,
+  vendorAssignedMessage,
+  workOrderCanceledMessage,
+  workOrderSavedMessage,
+} from "@/domain/work-orders/utils/work-order-feedback-toasts";
+
+vi.mock("react-toastify", () => ({
+  toast: {
+    warning: vi.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+describe("work-order-feedback-toasts", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("builds the cancel copy with the work order number", () => {
+    expect(workOrderCanceledMessage("20260819001")).toBe("Work order #20260819001 canceled.");
+  });
+
+  it("warns on cancel only after patch onSuccess", () => {
+    const patchField = vi.fn();
+    patchWorkOrderAsCanceled(patchField, { id: 42, woNumber: "20260819001" });
+
+    expect(patchField).toHaveBeenCalledWith(
+      42,
+      { status: "Canceled" },
+      expect.objectContaining({ onSuccess: expect.any(Function) }),
+    );
+    expect(toast.warning).not.toHaveBeenCalled();
+
+    const options = patchField.mock.calls[0][2] as { onSuccess: () => void; onError?: unknown };
+    expect(options.onError).toBeUndefined();
+    options.onSuccess();
+    expect(toast.warning).toHaveBeenCalledWith("Work order #20260819001 canceled.");
+    expect(toast.success).not.toHaveBeenCalled();
+  });
+
+  it("toasts vendor assignment only after persist onSuccess", () => {
+    const onPatch = vi.fn();
+    const fields = {
+      vendorId: "9",
+      company: "Gateway",
+      tech: "Pat",
+      techPhone: "555",
+    };
+    applyVendorTableSave(onPatch, 7, fields);
+
+    expect(onPatch).toHaveBeenCalledWith(
+      7,
+      toVendorTablePatch(fields),
+      expect.objectContaining({ onSuccess: notifyVendorAssigned }),
+    );
+    expect(toast.success).not.toHaveBeenCalled();
+
+    const { onSuccess } = onPatch.mock.calls[0][2] as { onSuccess: () => void };
+    onSuccess();
+    expect(toast.success).toHaveBeenCalledWith(vendorAssignedMessage());
+    expect(toast.warning).not.toHaveBeenCalled();
+  });
+
+  it("shows generic save success for an empty vendor after persistence", () => {
+    const onPatch = vi.fn();
+    const fields = {
+      vendorId: "",
+      company: "",
+      tech: "",
+      techPhone: "",
+    };
+    applyVendorTableSave(onPatch, 7, fields);
+
+    expect(onPatch).toHaveBeenCalledWith(
+      7,
+      toVendorTablePatch(fields),
+      expect.objectContaining({ onSuccess: expect.any(Function) }),
+    );
+    expect(toast.success).not.toHaveBeenCalled();
+
+    const { onSuccess } = onPatch.mock.calls[0][2] as { onSuccess: () => void };
+    onSuccess();
+    expect(toast.success).toHaveBeenCalledWith(workOrderSavedMessage());
+    expect(toast.success).not.toHaveBeenCalledWith(vendorAssignedMessage());
+  });
+
+  it("shows generic save success for a whitespace vendor id after persistence", () => {
+    const onPatch = vi.fn();
+    const fields = {
+      vendorId: "   ",
+      company: "Gateway",
+      tech: "Pat",
+      techPhone: "555",
+    };
+    applyVendorTableSave(onPatch, 7, fields);
+
+    expect(onPatch).toHaveBeenCalledWith(
+      7,
+      toVendorTablePatch(fields),
+      expect.objectContaining({ onSuccess: expect.any(Function) }),
+    );
+    expect(toast.success).not.toHaveBeenCalled();
+
+    const { onSuccess } = onPatch.mock.calls[0][2] as { onSuccess: () => void };
+    onSuccess();
+    expect(toast.success).toHaveBeenCalledWith(workOrderSavedMessage());
+    expect(toast.success).not.toHaveBeenCalledWith(vendorAssignedMessage());
+  });
+
+  it("toasts vendor assignment when a slide-over patch includes a vendor id", () => {
+    notifySlideOverSaveSuccess({ vendorId: "9", dispatcherId: "d1" });
+    expect(toast.success).toHaveBeenCalledTimes(1);
+    expect(toast.success).toHaveBeenCalledWith(vendorAssignedMessage());
+  });
+
+  it("toasts generic save when a slide-over patch has no assigned vendor", () => {
+    expect(isVendorAssignmentPatch({ dispatcherId: "d1" })).toBe(false);
+    notifySlideOverSaveSuccess({ dispatcherId: "d1" });
+    expect(toast.success).toHaveBeenCalledTimes(1);
+    expect(toast.success).toHaveBeenCalledWith(workOrderSavedMessage());
+  });
+
+  it("does not treat an empty vendorId as an assignment", () => {
+    expect(isVendorAssignmentPatch({ vendorId: "" })).toBe(false);
+    notifySlideOverSaveSuccess({ vendorId: "", dispatcherId: "d1" });
+    expect(toast.success).toHaveBeenCalledWith(workOrderSavedMessage());
+    expect(toast.success).not.toHaveBeenCalledWith(vendorAssignedMessage());
+  });
+
+  it("toasts generic save after assigned-to persist onSuccess", () => {
+    const onPatch = vi.fn();
+    applyAssignedToTableSave(onPatch, 7, "u2", "Admin test");
+
+    expect(onPatch).toHaveBeenCalledWith(
+      7,
+      { dispatcherId: "u2", dispatcherName: "Admin test" },
+      { onSuccess: notifyWorkOrderSaved },
+    );
+    expect(toast.success).not.toHaveBeenCalled();
+
+    const { onSuccess } = onPatch.mock.calls[0][2] as { onSuccess: () => void };
+    onSuccess();
+    expect(toast.success).toHaveBeenCalledWith(workOrderSavedMessage());
+    expect(toast.warning).not.toHaveBeenCalled();
+  });
+
+  it("toasts the same save copy after unassign persist onSuccess", () => {
+    const onPatch = vi.fn();
+    applyAssignedToTableSave(onPatch, 7, "", "");
+
+    expect(onPatch).toHaveBeenCalledWith(
+      7,
+      { dispatcherId: "", dispatcherName: "" },
+      { onSuccess: notifyWorkOrderSaved },
+    );
+    expect(toast.success).not.toHaveBeenCalled();
+
+    const { onSuccess } = onPatch.mock.calls[0][2] as { onSuccess: () => void };
+    onSuccess();
+    expect(toast.success).toHaveBeenCalledWith(workOrderSavedMessage());
+  });
+
+  it("does not toast assigned-to save when persist onSuccess is skipped", () => {
+    const onPatch = vi.fn();
+    applyAssignedToTableSave(onPatch, 7, "u2", "Admin test");
+    expect(toast.success).not.toHaveBeenCalled();
+  });
+
+  it("completes a work order without a success toast", () => {
+    const patchField = vi.fn();
+    patchWorkOrderAsCompleted(patchField, 42);
+    expect(patchField).toHaveBeenCalledWith(42, { status: "Completed" });
+    expect(toast.success).not.toHaveBeenCalled();
+    expect(toast.warning).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/domain/work-orders/utils/work-order-lock.test.ts b/src/test/domain/work-orders/utils/work-order-lock.test.ts
new file mode 100644
index 00000000..e8ce1f1b
--- /dev/null
+++ b/src/test/domain/work-orders/utils/work-order-lock.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import {
+  canApplyWorkOrderTablePatch,
+  canMutateWorkOrderComments,
+  canMutateWorkOrderExtraDocs,
+  canMutateWorkOrderFlag,
+  isWorkOrderCompletionSurfaceReadOnly,
+  isWorkOrderCoreLocked,
+  isWorkOrderFullyLocked,
+} from "@/domain/work-orders/utils/work-order-lock";
+
+describe("work-order-lock", () => {
+  it("locks core fields only when Completed", () => {
+    expect(isWorkOrderCoreLocked("Completed")).toBe(true);
+    expect(isWorkOrderCoreLocked("Done")).toBe(true);
+    expect(isWorkOrderCoreLocked("Scheduled")).toBe(false);
+    expect(isWorkOrderCoreLocked("Canceled")).toBe(false);
+  });
+
+  it("fully locks only canceled statuses", () => {
+    expect(isWorkOrderFullyLocked("Canceled")).toBe(true);
+    expect(isWorkOrderFullyLocked("Cancelled")).toBe(true);
+    expect(isWorkOrderFullyLocked("Completed")).toBe(false);
+  });
+
+  it("keeps flag comments and extra docs writable on Completed", () => {
+    expect(canMutateWorkOrderFlag("Completed")).toBe(true);
+    expect(canMutateWorkOrderComments("Completed")).toBe(true);
+    expect(canMutateWorkOrderExtraDocs("Completed")).toBe(true);
+    expect(canMutateWorkOrderFlag("Canceled")).toBe(false);
+    expect(canMutateWorkOrderComments("Canceled")).toBe(false);
+    expect(canMutateWorkOrderExtraDocs("Canceled")).toBe(false);
+  });
+
+  it("keeps the completion document surface read-only after complete", () => {
+    expect(isWorkOrderCompletionSurfaceReadOnly("Completed")).toBe(true);
+    expect(isWorkOrderCompletionSurfaceReadOnly("Canceled")).toBe(true);
+    expect(isWorkOrderCompletionSurfaceReadOnly("Scheduled")).toBe(false);
+  });
+
+  it("allows only flagColor board patches on Completed", () => {
+    expect(canApplyWorkOrderTablePatch("Completed", { flagColor: "red" })).toBe(true);
+    expect(canApplyWorkOrderTablePatch("Completed", { dispatcherId: "u2" })).toBe(false);
+    expect(canApplyWorkOrderTablePatch("Completed", { status: "Scheduled" })).toBe(false);
+    expect(canApplyWorkOrderTablePatch("Completed", { site: "BK1" })).toBe(false);
+    expect(canApplyWorkOrderTablePatch("Scheduled", { dispatcherId: "u2" })).toBe(true);
+    expect(canApplyWorkOrderTablePatch("Canceled", { flagColor: "red" })).toBe(false);
+    expect(canApplyWorkOrderTablePatch("Completed", { type: "Emergency", severity: 1 })).toBe(
+      false,
+    );
+    expect(canApplyWorkOrderTablePatch("Canceled", { type: "PM" })).toBe(false);
+    expect(canApplyWorkOrderTablePatch("Scheduled", { type: "Reactive", severity: 3 })).toBe(true);
+  });
+});
diff --git a/src/test/domain/work-orders/utils/work-order-media-limits.test.ts b/src/test/domain/work-orders/utils/work-order-media-limits.test.ts
new file mode 100644
index 00000000..9cf3bc76
--- /dev/null
+++ b/src/test/domain/work-orders/utils/work-order-media-limits.test.ts
@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+import {
+  canDeleteWorkOrderMedia,
+  formatMediaSizeLimit,
+  isWorkOrderDocumentsReadOnly,
+  isWorkOrderExtraDocTypeAllowed,
+  isWorkOrderFileTooLarge,
+  isWorkOrderMediaTypeAllowed,
+  MAX_WORK_ORDER_MEDIA_BYTES,
+  workOrderExtraDocsAcceptAttribute,
+  workOrderMediaAcceptAttribute,
+} from "@/domain/work-orders/utils/work-order-media-limits";
+
+describe("work-order-media-limits", () => {
+  it("treats Canceled and Completed as read-only", () => {
+    expect(isWorkOrderDocumentsReadOnly("Canceled")).toBe(true);
+    expect(isWorkOrderDocumentsReadOnly("Completed")).toBe(true);
+    expect(isWorkOrderDocumentsReadOnly("Scheduled")).toBe(false);
+  });
+
+  it("allows delete only for non-legacy positive ids", () => {
+    expect(canDeleteWorkOrderMedia({ id: "12", isLegacy: false })).toBe(true);
+    expect(canDeleteWorkOrderMedia({ id: -1, isLegacy: true })).toBe(false);
+    expect(canDeleteWorkOrderMedia({ id: "0" })).toBe(false);
+  });
+
+  it("caps uploads at 50_000_000 bytes and formats decimal MB", () => {
+    expect(MAX_WORK_ORDER_MEDIA_BYTES).toBe(50_000_000);
+    expect(formatMediaSizeLimit()).toBe("50 MB");
+    expect(isWorkOrderFileTooLarge({ size: MAX_WORK_ORDER_MEDIA_BYTES + 1 } as File)).toBe(true);
+    expect(isWorkOrderFileTooLarge({ size: 10 } as File)).toBe(false);
+  });
+
+  it("allows only JPG PNG MP4 MOV by MIME or extension", () => {
+    expect(isWorkOrderMediaTypeAllowed({ name: "a.jpg", type: "image/jpeg" } as File)).toBe(true);
+    expect(isWorkOrderMediaTypeAllowed({ name: "a.jpg", type: "image/jpg" } as File)).toBe(true);
+    expect(isWorkOrderMediaTypeAllowed({ name: "a.png", type: "image/png" } as File)).toBe(true);
+    expect(isWorkOrderMediaTypeAllowed({ name: "a.mp4", type: "video/mp4" } as File)).toBe(true);
+    expect(isWorkOrderMediaTypeAllowed({ name: "a.mov", type: "video/quicktime" } as File)).toBe(
+      true,
+    );
+    expect(isWorkOrderMediaTypeAllowed({ name: "a.gif", type: "image/gif" } as File)).toBe(false);
+    expect(isWorkOrderMediaTypeAllowed({ name: "a.pdf", type: "application/pdf" } as File)).toBe(
+      false,
+    );
+    expect(workOrderMediaAcceptAttribute()).not.toContain(".pdf");
+  });
+
+  it("allows Extra Docs PDF DOC DOCX plus media types", () => {
+    expect(isWorkOrderExtraDocTypeAllowed({ name: "a.pdf", type: "application/pdf" } as File)).toBe(
+      true,
+    );
+    expect(
+      isWorkOrderExtraDocTypeAllowed({ name: "a.doc", type: "application/msword" } as File),
+    ).toBe(true);
+    expect(
+      isWorkOrderExtraDocTypeAllowed({
+        name: "a.docx",
+        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      } as File),
+    ).toBe(true);
+    expect(isWorkOrderExtraDocTypeAllowed({ name: "a.jpg", type: "image/jpeg" } as File)).toBe(
+      true,
+    );
+    expect(isWorkOrderExtraDocTypeAllowed({ name: "a.gif", type: "image/gif" } as File)).toBe(
+      false,
+    );
+    const accept = workOrderExtraDocsAcceptAttribute();
+    expect(accept).toContain(".pdf");
+    expect(accept).toContain(".doc");
+    expect(accept).toContain(".docx");
+  });
+});
diff --git a/src/test/domain/work-orders/utils/work-order-patch-queue.test.ts b/src/test/domain/work-orders/utils/work-order-patch-queue.test.ts
new file mode 100644
index 00000000..c088e3c1
--- /dev/null
+++ b/src/test/domain/work-orders/utils/work-order-patch-queue.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vitest";
+import { createWorkOrderPatchQueue } from "@/domain/work-orders/utils/work-order-patch-queue";
+
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+describe("createWorkOrderPatchQueue", () => {
+  it("serializes calls for the same id so the second never starts before the first settles", async () => {
+    const enqueue = createWorkOrderPatchQueue();
+    const events: string[] = [];
+
+    const first = enqueue(1, async () => {
+      events.push("first:start");
+      await delay(20);
+      events.push("first:end");
+      return "first";
+    });
+    const second = enqueue(1, async () => {
+      events.push("second:start");
+      await delay(1);
+      events.push("second:end");
+      return "second";
+    });
+
+    await Promise.all([first, second]);
+
+    expect(events).toEqual(["first:start", "first:end", "second:start", "second:end"]);
+  });
+
+  it("does not block work queued for a different id", async () => {
+    const enqueue = createWorkOrderPatchQueue();
+    const events: string[] = [];
+
+    const slow = enqueue(1, async () => {
+      events.push("slow:start");
+      await delay(20);
+      events.push("slow:end");
+    });
+    const fast = enqueue(2, async () => {
+      events.push("fast:start");
+      await delay(1);
+      events.push("fast:end");
+    });
+
+    await Promise.all([slow, fast]);
+
+    expect(events.indexOf("fast:end")).toBeLessThan(events.indexOf("slow:end"));
+  });
+
+  it("still runs the next task after a prior task rejects", async () => {
+    const enqueue = createWorkOrderPatchQueue();
+
+    await expect(
+      enqueue(1, async () => {
+        throw new Error("boom");
+      }),
+    ).rejects.toThrow("boom");
+
+    await expect(enqueue(1, async () => "recovered")).resolves.toBe("recovered");
+  });
+});
diff --git a/src/test/lib/address/vendor-address.test.ts b/src/test/lib/address/vendor-address.test.ts
new file mode 100644
index 00000000..4a2736dc
--- /dev/null
+++ b/src/test/lib/address/vendor-address.test.ts
@@ -0,0 +1,89 @@
+import { describe, expect, it } from "vitest";
+import {
+  ADDRESS_SUGGESTION_LIMIT,
+  ADDRESS_SUGGESTION_MIN_LENGTH,
+  buildAddressQuery,
+  hasCompleteAddress,
+  mapsEmbedUrl,
+  mapsSearchUrl,
+  suggestAddresses,
+} from "@/lib/address/vendor-address";
+
+describe("suggestAddresses", () => {
+  it("offers nothing until the minimum length is reached", () => {
+    expect(suggestAddresses("")).toEqual([]);
+    expect(suggestAddresses("12")).toEqual([]);
+    expect(suggestAddresses("  12  ")).toEqual([]);
+    expect(suggestAddresses("123").length).toBeGreaterThan(0);
+  });
+
+  it("caps the list so the dropdown stays scannable", () => {
+    expect(suggestAddresses("6735 Trippel Rd").length).toBeLessThanOrEqual(
+      ADDRESS_SUGGESTION_LIMIT,
+    );
+  });
+
+  it("keeps the typed text as the street and only proposes city and state", () => {
+    const [first] = suggestAddresses("415 Murphy Rd");
+    expect(first?.street).toBe("415 Murphy Rd");
+    expect(first?.city).toBeTruthy();
+    expect(first?.state).toBeTruthy();
+    expect(first?.label).toBe(`415 Murphy Rd, ${first?.city}, ${first?.state}`);
+  });
+
+  it("is stable for the same input", () => {
+    // The list must not reshuffle between renders, or a row moves out from
+    // under the pointer mid-click.
+    expect(suggestAddresses("4255 Anson Blvd")).toEqual(suggestAddresses("4255 Anson Blvd"));
+  });
+
+  it("never repeats a city and state pair", () => {
+    const suggestions = suggestAddresses("3050 Gateway Commerce Dr");
+    const keys = suggestions.map((s) => `${s.city},${s.state}`);
+    expect(new Set(keys).size).toBe(keys.length);
+  });
+
+  it("trims the typed text before using it", () => {
+    const [first] = suggestAddresses("  1715 Wall Triana Hwy  ");
+    expect(first?.street).toBe("1715 Wall Triana Hwy");
+  });
+
+  it("exposes the minimum length it enforces", () => {
+    expect(suggestAddresses("x".repeat(ADDRESS_SUGGESTION_MIN_LENGTH))).not.toEqual([]);
+    expect(suggestAddresses("x".repeat(ADDRESS_SUGGESTION_MIN_LENGTH - 1))).toEqual([]);
+  });
+});
+
+describe("address queries and links", () => {
+  const full = { street: "6735 Trippel Rd", city: "Theodore", state: "AL" };
+
+  it("joins the parts it has and skips the ones it does not", () => {
+    expect(buildAddressQuery(full)).toBe("6735 Trippel Rd Theodore AL");
+    expect(buildAddressQuery({ street: "", city: "Dallas", state: "TX" })).toBe("Dallas TX");
+    expect(buildAddressQuery({})).toBe("");
+  });
+
+  it("builds a search link and an embed link for the same address", () => {
+    expect(mapsSearchUrl(full)).toBe(
+      "https://www.google.com/maps/search/?api=1&query=6735%20Trippel%20Rd%20Theodore%20AL",
+    );
+    expect(mapsEmbedUrl(full)).toBe(
+      "https://www.google.com/maps?q=6735%20Trippel%20Rd%20Theodore%20AL&output=embed",
+    );
+  });
+
+  it("returns empty strings rather than a link to nowhere", () => {
+    // An href of "" renders as no link; a link to a bare maps search would look
+    // like an address we do not have.
+    expect(mapsSearchUrl({})).toBe("");
+    expect(mapsEmbedUrl({ street: "   " })).toBe("");
+  });
+
+  it("needs all three parts before a preview is meaningful", () => {
+    expect(hasCompleteAddress(full)).toBe(true);
+    expect(hasCompleteAddress({ street: "6735 Trippel Rd", city: "Theodore", state: "  " })).toBe(
+      false,
+    );
+    expect(hasCompleteAddress({ street: "6735 Trippel Rd" })).toBe(false);
+  });
+});
diff --git a/src/test/lib/auth/user-utils.test.ts b/src/test/lib/auth/user-utils.test.ts
new file mode 100644
index 00000000..ac185d49
--- /dev/null
+++ b/src/test/lib/auth/user-utils.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { canViewAllDispatchersOnDashboard, isAdminUser } from "@/lib/auth/user-utils";
+
+describe("isAdminUser", () => {
+  it("returns true when Admin appears in roles", () => {
+    expect(isAdminUser("Admin")).toBe(true);
+    expect(isAdminUser("Dispatcher,Admin")).toBe(true);
+    expect(isAdminUser(" admin ")).toBe(true);
+  });
+
+  it("returns false for non-admin roles", () => {
+    expect(isAdminUser("Dispatcher")).toBe(false);
+    expect(isAdminUser(undefined)).toBe(false);
+  });
+});
+
+describe("canViewAllDispatchersOnDashboard", () => {
+  it("grants the dashboard picker to Admin and Scheduler", () => {
+    expect(canViewAllDispatchersOnDashboard("Admin")).toBe(true);
+    expect(canViewAllDispatchersOnDashboard("Scheduler")).toBe(true);
+    expect(canViewAllDispatchersOnDashboard("Dispatcher, Scheduler")).toBe(true);
+  });
+
+  it("locks a Dispatcher (and unknown roles) to their own work orders", () => {
+    expect(canViewAllDispatchersOnDashboard("Dispatcher")).toBe(false);
+    expect(canViewAllDispatchersOnDashboard("Technician")).toBe(false);
+    expect(canViewAllDispatchersOnDashboard(undefined)).toBe(false);
+  });
+});
diff --git a/src/test/lib/mui-theme.test.tsx b/src/test/lib/mui-theme.test.tsx
new file mode 100644
index 00000000..c7fdd6ba
--- /dev/null
+++ b/src/test/lib/mui-theme.test.tsx
@@ -0,0 +1,18 @@
+import { Alert, ThemeProvider } from "@mui/material";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { muiTheme } from "@/lib/theme/mui-theme";
+
+describe("MUI theme variants", () => {
+  it("applies the custom success palette when Alert uses severity", () => {
+    render(
+      <ThemeProvider theme={muiTheme}>
+        <Alert severity="success">Saved</Alert>
+      </ThemeProvider>,
+    );
+
+    const alert = screen.getByRole("alert");
+    expect(getComputedStyle(alert).backgroundColor).toBe("rgb(240, 253, 244)");
+    expect(getComputedStyle(alert).color).toBe("rgb(22, 101, 52)");
+  });
+});
diff --git a/src/test/lib/query/query-client.test.ts b/src/test/lib/query/query-client.test.ts
new file mode 100644
index 00000000..430d1415
--- /dev/null
+++ b/src/test/lib/query/query-client.test.ts
@@ -0,0 +1,42 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createAppQueryClient } from "@/lib/query/query-client";
+
+const toastMocks = vi.hoisted(() => ({ error: vi.fn() }));
+
+vi.mock("react-toastify", () => ({
+  toast: { error: toastMocks.error },
+}));
+
+describe("createAppQueryClient query cache", () => {
+  beforeEach(() => {
+    toastMocks.error.mockReset();
+  });
+
+  it("does not toast for queries that suppress the error toast", async () => {
+    const queryClient = createAppQueryClient();
+
+    await expect(
+      queryClient.fetchQuery({
+        queryKey: ["suppressed-403"],
+        queryFn: () =>
+          Promise.reject(new Error("You do not have permission to perform this action.")),
+        meta: { suppressErrorToast: true },
+      }),
+    ).rejects.toThrow("You do not have permission");
+
+    expect(toastMocks.error).not.toHaveBeenCalled();
+  });
+
+  it("still toasts for queries without suppression", async () => {
+    const queryClient = createAppQueryClient();
+
+    await expect(
+      queryClient.fetchQuery({
+        queryKey: ["unsuppressed-failure"],
+        queryFn: () => Promise.reject(new Error("A server error occurred.")),
+      }),
+    ).rejects.toThrow("A server error occurred.");
+
+    expect(toastMocks.error).toHaveBeenCalledWith("A server error occurred.");
+  });
+});
diff --git a/src/test/lib/query/setup-query-broadcast.test.ts b/src/test/lib/query/setup-query-broadcast.test.ts
new file mode 100644
index 00000000..19871038
--- /dev/null
+++ b/src/test/lib/query/setup-query-broadcast.test.ts
@@ -0,0 +1,109 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { QueryClient } from "@tanstack/react-query";
+
+const disposeA = vi.fn();
+const disposeB = vi.fn();
+const broadcastQueryClient = vi.fn();
+
+vi.mock("@tanstack/query-broadcast-client-experimental", () => ({
+  broadcastQueryClient: (...args: unknown[]) => broadcastQueryClient(...args),
+}));
+
+describe("query broadcast account isolation", () => {
+  beforeEach(() => {
+    broadcastQueryClient.mockReset();
+    disposeA.mockReset();
+    disposeB.mockReset();
+    vi.unstubAllEnvs();
+  });
+
+  afterEach(() => {
+    vi.unstubAllEnvs();
+  });
+
+  it("does not call broadcastQueryClient when MODE is test", async () => {
+    vi.stubEnv("MODE", "test");
+    vi.resetModules();
+
+    const { startQueryBroadcast } = await import("@/lib/query/setup-query-broadcast");
+    const client = new QueryClient();
+
+    startQueryBroadcast(client, "user-a");
+
+    expect(broadcastQueryClient).not.toHaveBeenCalled();
+  });
+
+  it("scopes the BroadcastChannel to the authenticated user id", async () => {
+    vi.stubEnv("MODE", "development");
+    vi.resetModules();
+    broadcastQueryClient.mockReturnValue(disposeA);
+
+    const { startQueryBroadcast, queryBroadcastChannelForUser, QUERY_BROADCAST_CHANNEL_PREFIX } =
+      await import("@/lib/query/setup-query-broadcast");
+    const client = new QueryClient();
+
+    startQueryBroadcast(client, 42);
+
+    expect(QUERY_BROADCAST_CHANNEL_PREFIX).toBe("seahaven-admin-query");
+    expect(queryBroadcastChannelForUser(42)).toBe("seahaven-admin-query:42");
+    expect(broadcastQueryClient).toHaveBeenCalledTimes(1);
+    expect(broadcastQueryClient).toHaveBeenCalledWith({
+      queryClient: client,
+      broadcastChannel: "seahaven-admin-query:42",
+    });
+  });
+
+  it("disposes the prior broadcaster, clears cache, and switches channel across accounts", async () => {
+    vi.stubEnv("MODE", "development");
+    vi.resetModules();
+    broadcastQueryClient.mockReturnValueOnce(disposeA).mockReturnValueOnce(disposeB);
+
+    const { startQueryBroadcast, stopQueryBroadcast } =
+      await import("@/lib/query/setup-query-broadcast");
+    const client = new QueryClient();
+    const clearSpy = vi.spyOn(client, "clear");
+
+    client.setQueryData(["work-orders", "sensitive"], { from: "user-a" });
+
+    startQueryBroadcast(client, "user-a");
+    expect(broadcastQueryClient).toHaveBeenCalledWith({
+      queryClient: client,
+      broadcastChannel: "seahaven-admin-query:user-a",
+    });
+
+    startQueryBroadcast(client, "user-b");
+
+    expect(disposeA).toHaveBeenCalledTimes(1);
+    expect(clearSpy).toHaveBeenCalledTimes(1);
+    expect(client.getQueryData(["work-orders", "sensitive"])).toBeUndefined();
+    expect(broadcastQueryClient).toHaveBeenCalledTimes(2);
+    expect(broadcastQueryClient).toHaveBeenLastCalledWith({
+      queryClient: client,
+      broadcastChannel: "seahaven-admin-query:user-b",
+    });
+
+    client.setQueryData(["vendors", "roster"], { from: "user-b" });
+    stopQueryBroadcast(client);
+
+    expect(disposeB).toHaveBeenCalledTimes(1);
+    expect(clearSpy).toHaveBeenCalledTimes(2);
+    expect(client.getQueryData(["vendors", "roster"])).toBeUndefined();
+  });
+
+  it("is a no-op when start is called again for the same user", async () => {
+    vi.stubEnv("MODE", "development");
+    vi.resetModules();
+    broadcastQueryClient.mockReturnValue(disposeA);
+
+    const { startQueryBroadcast } = await import("@/lib/query/setup-query-broadcast");
+    const client = new QueryClient();
+    const clearSpy = vi.spyOn(client, "clear");
+
+    startQueryBroadcast(client, "user-a");
+    startQueryBroadcast(client, "user-a");
+
+    expect(broadcastQueryClient).toHaveBeenCalledTimes(1);
+    expect(disposeA).not.toHaveBeenCalled();
+    expect(clearSpy).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/test/lib/resolve-api-prefix-url.test.ts b/src/test/lib/resolve-api-prefix-url.test.ts
new file mode 100644
index 00000000..0e66563b
--- /dev/null
+++ b/src/test/lib/resolve-api-prefix-url.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { resolveApiBaseUrl, resolveApiPrefixUrl } from "@/lib/resolve-api-prefix-url";
+
+const ORIGIN = "http://localhost:3000";
+
+describe("resolveApiPrefixUrl", () => {
+  it("joins relative /api with origin", () => {
+    expect(resolveApiPrefixUrl("/api", ORIGIN)).toBe(`${ORIGIN}/api/`);
+  });
+
+  it("normalizes relative api without leading slash", () => {
+    expect(resolveApiPrefixUrl("api", ORIGIN)).toBe(`${ORIGIN}/api/`);
+  });
+
+  it("preserves absolute URL with /api and adds trailing slash", () => {
+    expect(resolveApiPrefixUrl("https://api.seahavenindustries.com/api", ORIGIN)).toBe(
+      "https://api.seahavenindustries.com/api/",
+    );
+  });
+
+  it("preserves absolute URL with /api/ trailing slash", () => {
+    expect(resolveApiPrefixUrl("https://api.seahavenindustries.com/api/", ORIGIN)).toBe(
+      "https://api.seahavenindustries.com/api/",
+    );
+  });
+
+  it("uses absolute host without /api as-is (invalid for production)", () => {
+    expect(resolveApiPrefixUrl("https://api.seahavenindustries.com", ORIGIN)).toBe(
+      "https://api.seahavenindustries.com/",
+    );
+  });
+
+  it("falls back to /api when empty", () => {
+    expect(resolveApiPrefixUrl("", ORIGIN)).toBe(`${ORIGIN}/api/`);
+    expect(resolveApiPrefixUrl("   ", ORIGIN)).toBe(`${ORIGIN}/api/`);
+  });
+});
+
+describe("resolveApiBaseUrl", () => {
+  it("strips trailing slash from prefix", () => {
+    expect(resolveApiBaseUrl("/api", ORIGIN)).toBe(`${ORIGIN}/api`);
+    expect(resolveApiBaseUrl("https://host/api/", ORIGIN)).toBe("https://host/api");
+  });
+});
diff --git a/src/test/observability/http-transaction.test.ts b/src/test/observability/http-transaction.test.ts
new file mode 100644
index 00000000..c90bc9bf
--- /dev/null
+++ b/src/test/observability/http-transaction.test.ts
@@ -0,0 +1,155 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const capturedSpan = vi.hoisted(() => ({ setAttribute: vi.fn() }));
+
+vi.mock("@sentry/react", () => ({
+  startSpan: vi.fn((options: unknown, callback: (span: unknown) => unknown) =>
+    callback(capturedSpan),
+  ),
+  spanToJSON: vi.fn(() => ({ trace_id: "trace-1", span_id: "span-1" })),
+  setHttpStatus: vi.fn(),
+}));
+
+import * as Sentry from "@sentry/react";
+import { HTTPError } from "ky";
+import { normalizeHttpRoute, traceHttpOperation } from "@/observability/http-transaction";
+
+const startSpanMock = vi.mocked(Sentry.startSpan);
+const setHttpStatusMock = vi.mocked(Sentry.setHttpStatus);
+
+function lastSpanOptions(): Record<string, unknown> {
+  const calls = startSpanMock.mock.calls;
+  const [options] = calls[calls.length - 1] ?? [];
+  return (options ?? {}) as unknown as Record<string, unknown>;
+}
+
+describe("normalizeHttpRoute", () => {
+  it("replaces integer path segments with :id", () => {
+    expect(normalizeHttpRoute("/api/workorders/9/media")).toBe("/api/workorders/:id/media");
+  });
+
+  it("replaces UUID path segments with :id", () => {
+    expect(normalizeHttpRoute("/uplifts/3f2504e0-4f89-11d3-9a0c-0305e82c3301/evidence")).toBe(
+      "/uplifts/:id/evidence",
+    );
+  });
+
+  it("replaces long hex and opaque token segments with :id", () => {
+    expect(normalizeHttpRoute("/files/deadbeefcafe1234")).toBe("/files/:id");
+    expect(normalizeHttpRoute("/share/Ab12Cd34Ef56Gh78")).toBe("/share/:id");
+  });
+
+  it("strips query strings and fragments without using their values", () => {
+    expect(normalizeHttpRoute("/vendor-portal/dispatches?status=pending#x")).toBe(
+      "/vendor-portal/dispatches",
+    );
+  });
+
+  it("keeps descriptive segments untouched", () => {
+    expect(normalizeHttpRoute("/vendor-operations/insights.csv")).toBe(
+      "/vendor-operations/insights.csv",
+    );
+  });
+
+  it("uses only the pathname of absolute URLs", () => {
+    expect(normalizeHttpRoute("https://api.example.com/workorders/9/media?q=1")).toBe(
+      "/workorders/:id/media",
+    );
+  });
+});
+
+describe("traceHttpOperation", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("starts a forced http.client transaction with safe attributes", async () => {
+    await traceHttpOperation(
+      { method: "get", url: "/workorders/9/media?include=x", entryPoint: "api.apiGet" },
+      async () => "ok",
+    );
+
+    const options = lastSpanOptions();
+    expect(startSpanMock).toHaveBeenCalledTimes(1);
+    expect(options.name).toBe("GET /workorders/:id/media");
+    expect(options.op).toBe("http.client");
+    expect(options.kind).toBe(2);
+    expect(options.forceTransaction).toBe(true);
+    expect(options.attributes).toEqual({
+      "http.request.method": "GET",
+      "http.route": "/workorders/:id/media",
+      "code.function": "api.apiGet",
+      "operation.type": "http.client",
+    });
+  });
+
+  it("adds actor.type only when provided and native span ids as attributes", async () => {
+    await traceHttpOperation(
+      {
+        method: "POST",
+        url: "/vendor-portal/dispatches",
+        entryPoint: "vendorPortalApi.call",
+        actorType: "vendor_link",
+      },
+      async () => null,
+    );
+
+    expect(lastSpanOptions().attributes).toMatchObject({
+      "actor.type": "vendor_link",
+    });
+    expect(capturedSpan.setAttribute).toHaveBeenCalledWith("trace_id", "trace-1");
+    expect(capturedSpan.setAttribute).toHaveBeenCalledWith("span_id", "span-1");
+    expect(capturedSpan.setAttribute).toHaveBeenCalledWith("transaction_id", "span-1");
+  });
+
+  it("reports the status of a returned Response", async () => {
+    const response = new Response("{}", { status: 201 });
+
+    await traceHttpOperation({ method: "POST", url: "/x", entryPoint: "fn" }, async () => response);
+
+    expect(setHttpStatusMock).toHaveBeenCalledTimes(1);
+    expect(setHttpStatusMock).toHaveBeenCalledWith(capturedSpan, 201);
+  });
+
+  it("exposes a single-shot status reporter for non-Response results", async () => {
+    const result = await traceHttpOperation(
+      { method: "GET", url: "/x", entryPoint: "fn" },
+      async ({ reportStatus }) => {
+        reportStatus(204);
+        reportStatus(500);
+        return "done";
+      },
+    );
+
+    expect(result).toBe("done");
+    expect(setHttpStatusMock).toHaveBeenCalledTimes(1);
+    expect(setHttpStatusMock).toHaveBeenCalledWith(capturedSpan, 204);
+  });
+
+  it("reports the Ky HTTPError response status instead of 500", async () => {
+    const httpError = new HTTPError(
+      new Response("Unauthorized", { status: 401 }),
+      new Request("https://api.example.test/x"),
+      {} as never,
+    );
+
+    await expect(
+      traceHttpOperation({ method: "GET", url: "/x", entryPoint: "fn" }, async () => {
+        throw httpError;
+      }),
+    ).rejects.toThrow();
+
+    expect(setHttpStatusMock).toHaveBeenCalledTimes(1);
+    expect(setHttpStatusMock).toHaveBeenCalledWith(capturedSpan, 401);
+  });
+
+  it("reports status 500 when the callback throws", async () => {
+    await expect(
+      traceHttpOperation({ method: "GET", url: "/x", entryPoint: "fn" }, async () => {
+        throw new Error("boom");
+      }),
+    ).rejects.toThrow("boom");
+
+    expect(setHttpStatusMock).toHaveBeenCalledWith(capturedSpan, 500);
+  });
+});
diff --git a/src/test/observability/sentry-scrubber.test.ts b/src/test/observability/sentry-scrubber.test.ts
new file mode 100644
index 00000000..2726d22f
--- /dev/null
+++ b/src/test/observability/sentry-scrubber.test.ts
@@ -0,0 +1,148 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  scrubBreadcrumb,
+  scrubErrorEvent,
+  scrubTransactionEvent,
+} from "@/observability/sentry-scrubber";
+
+describe("Sentry telemetry scrubbing", () => {
+  it("keeps only an opaque user id and safe request method/path on errors", () => {
+    const event = scrubErrorEvent({
+      type: undefined,
+      user: {
+        id: "opaque-user-123",
+        email: "secret.user@example.com",
+        username: "Secret User",
+        ip_address: "203.0.113.10",
+      },
+      request: {
+        method: "GET",
+        url: "https://app.example.com/workorders/123?token=secret",
+        headers: { Authorization: "Bearer secret" },
+        cookies: { session: "secret" },
+        data: "secret-body",
+      },
+      contexts: {
+        trace: {
+          trace_id: "0123456789abcdef0123456789abcdef",
+          span_id: "0123456789abcdef",
+          op: "http.client",
+        },
+      },
+    });
+
+    expect(event.user).toEqual({ id: "opaque-user-123" });
+    expect(event.request).toEqual({
+      method: "GET",
+      url: "https://app.example.com/workorders/:id",
+    });
+    expect(event.tags).toMatchObject({
+      trace_id: "0123456789abcdef0123456789abcdef",
+      transaction_id: "0123456789abcdef",
+      "operation.type": "http.client",
+      "actor.type": "authenticated",
+    });
+  });
+
+  it("applies the same request/user contract to transactions", () => {
+    const event = scrubTransactionEvent({
+      type: "transaction",
+      transaction: "GET /workorders/:id",
+      user: { id: "opaque-user-123", email: "secret.user@example.com" },
+      request: {
+        method: "GET",
+        url: "/workorders/123?token=secret",
+        query_string: "token=secret",
+      },
+      contexts: {
+        trace: {
+          trace_id: "fedcba9876543210fedcba9876543210",
+          span_id: "fedcba9876543210",
+          op: "navigation",
+          data: {
+            "actor.type": "vendor_link",
+            "operation.type": "http.client",
+            "code.function": "vendorPortalApi.call",
+            "http.query": "token=secret",
+          },
+        },
+      },
+      spans: [
+        {
+          trace_id: "fedcba9876543210fedcba9876543210",
+          span_id: "1111111111111111",
+          parent_span_id: "fedcba9876543210",
+          op: "http.client",
+          start_timestamp: 1,
+          timestamp: 2,
+          description: "GET https://api.example.com/workorders/123?token=secret",
+          data: {
+            "http.request.method": "GET",
+            "http.route": "/workorders/:id",
+            "http.response.status_code": 200,
+            "code.function": "vendorPortalApi.call",
+            "http.query": "token=secret",
+            "url.full": "https://api.example.com/workorders/123?token=secret",
+            request_body: "secret-body",
+          },
+        },
+      ],
+    });
+
+    expect(event.user).toEqual({ id: "opaque-user-123" });
+    expect(event.request).toEqual({
+      method: "GET",
+      url: `${window.location.origin}/workorders/:id`,
+    });
+    expect(event.tags).toMatchObject({
+      trace_id: "fedcba9876543210fedcba9876543210",
+      transaction_id: "fedcba9876543210",
+      "operation.type": "http.client",
+      "code.function": "vendorPortalApi.call",
+      "actor.type": "vendor_link",
+    });
+    expect(event.contexts?.trace?.data).toEqual({
+      "actor.type": "vendor_link",
+      "operation.type": "http.client",
+      "code.function": "vendorPortalApi.call",
+    });
+    expect(event.spans).toEqual([
+      expect.objectContaining({
+        trace_id: "fedcba9876543210fedcba9876543210",
+        span_id: "1111111111111111",
+        parent_span_id: "fedcba9876543210",
+        op: "http.client",
+        start_timestamp: 1,
+        timestamp: 2,
+        description: "GET https://api.example.com/workorders/:id",
+        data: {
+          "http.request.method": "GET",
+          "http.route": "/workorders/:id",
+          "http.response.status_code": 200,
+          "code.function": "vendorPortalApi.call",
+        },
+      }),
+    ]);
+  });
+
+  it("retains only safe network breadcrumb details", () => {
+    const breadcrumb = scrubBreadcrumb({
+      category: "fetch",
+      message: "secret free-form text",
+      data: {
+        method: "POST",
+        status_code: 201,
+        url: "/uplifts/3f2504e0-4f89-11d3-9a0c-0305e82c3301?token=secret",
+        request_body: "secret",
+      },
+    });
+
+    expect(breadcrumb.message).toBeUndefined();
+    expect(breadcrumb.data).toEqual({
+      method: "POST",
+      status_code: 201,
+      url: `${window.location.origin}/uplifts/:id`,
+    });
+  });
+});
diff --git a/src/test/setup.ts b/src/test/setup.ts
new file mode 100644
index 00000000..d435a466
--- /dev/null
+++ b/src/test/setup.ts
@@ -0,0 +1,65 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/react";
+import { afterEach, vi } from "vitest";
+
+afterEach(() => {
+  cleanup();
+});
+
+function localStorageIsUsable(): boolean {
+  try {
+    const probe = "__vitest_ls_probe__";
+    globalThis.localStorage.setItem(probe, "1");
+    const ok = globalThis.localStorage.getItem(probe) === "1";
+    globalThis.localStorage.removeItem(probe);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+
+// Node 25+ / some harnesses lack a stable localStorage — provide an in-memory mock when needed.
+if (!localStorageIsUsable()) {
+  const store = new Map<string, string>();
+  vi.stubGlobal("localStorage", {
+    getItem: (key: string) => store.get(key) ?? null,
+    setItem: (key: string, value: string) => {
+      store.set(key, String(value));
+    },
+    removeItem: (key: string) => {
+      store.delete(key);
+    },
+    clear: () => {
+      store.clear();
+    },
+    get length() {
+      return store.size;
+    },
+    key: (index: number) => [...store.keys()][index] ?? null,
+  });
+}
+
+// Files that opt into `@vitest-environment node` (real fetch/FormData semantics) have no window.
+if (typeof window !== "undefined") {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+
+  window.ResizeObserver = ResizeObserverMock;
+}
diff --git a/src/test/test-utils.tsx b/src/test/test-utils.tsx
new file mode 100644
index 00000000..0d766a57
--- /dev/null
+++ b/src/test/test-utils.tsx
@@ -0,0 +1,62 @@
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, type RenderOptions } from "@testing-library/react";
+import type { ReactElement, ReactNode } from "react";
+import { MemoryRouter, type MemoryRouterProps } from "react-router";
+
+import { muiTheme } from "@/lib/theme/mui-theme";
+import { AuthProvider } from "@/providers/auth-provider";
+
+export function createTestQueryClient(): QueryClient {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        gcTime: 0,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  });
+}
+
+type RenderWithProvidersOptions = Omit<RenderOptions, "wrapper"> & {
+  route?: string;
+  routerProps?: Omit<MemoryRouterProps, "children">;
+  withAuth?: boolean;
+  queryClient?: QueryClient;
+};
+
+export function renderWithProviders(
+  ui: ReactElement,
+  {
+    route = "/",
+    routerProps,
+    withAuth = true,
+    queryClient = createTestQueryClient(),
+    ...renderOptions
+  }: RenderWithProvidersOptions = {},
+) {
+  const initialEntries = routerProps?.initialEntries ?? [route];
+
+  function Wrapper({ children }: { children: ReactNode }) {
+    const content = withAuth ? <AuthProvider>{children}</AuthProvider> : children;
+
+    return (
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider theme={muiTheme}>
+          <CssBaseline />
+          <MemoryRouter {...routerProps} initialEntries={initialEntries}>
+            {content}
+          </MemoryRouter>
+        </ThemeProvider>
+      </QueryClientProvider>
+    );
+  }
+
+  return {
+    ...render(ui, { wrapper: Wrapper, ...renderOptions }),
+    queryClient,
+  };
+}
diff --git a/src/tokenUtility.js b/src/tokenUtility.js
deleted file mode 100644
index 83a339ec..00000000
--- a/src/tokenUtility.js
+++ /dev/null
@@ -1,50 +0,0 @@
-const tokenKey = "token";
-
-export const setUser = (user) => {
-    if (user && user.token) {
-        window.localStorage.setItem(tokenKey, JSON.stringify(user));
-    }
-    else {
-        window.localStorage.removeItem(tokenKey);
-    }
-}
-
-export const getAccessToken = () => {
-    let result = window.localStorage.getItem(tokenKey);
-    if (!result) {
-        return "";
-    }
-    const user = JSON.parse(result);
-    return `Bearer ${user.token}`;
-}
-
-export const getRawToken = () => {
-    let result = window.localStorage.getItem(tokenKey);
-    if (!result) {
-        return null;
-    }
-    return JSON.parse(result).token || null;
-}
-
-export const getUser = () => {
-    let result = window.localStorage.getItem(tokenKey);
-    if (!result) {
-        return null;
-    }
-    return JSON.parse(result);
-}
-
-export const removeToken = () => {
-    window.localStorage.removeItem(tokenKey);
-}
-
-export const isAuthenticated = () => {
-    const token = getRawToken();
-    if (!token) return false;
-    try {
-        const payload = JSON.parse(atob(token.split(".")[1]));
-        return new Date(payload.exp * 1000) > new Date();
-    } catch (e) {
-        return false;
-    }
-}
diff --git a/src/utils/timeSince.js b/src/utils/timeSince.js
deleted file mode 100644
index 72e5d2ce..00000000
--- a/src/utils/timeSince.js
+++ /dev/null
@@ -1,38 +0,0 @@
-export function timeSince(dateString) {
-  if (!dateString) return "";
-  const d = new Date(dateString.endsWith("Z") ? dateString : dateString + "Z");
-  if (isNaN(d)) return "";
-  const now = new Date();
-  const diffMs = now - d;
-  const mins = Math.floor(diffMs / 60000);
-  if (mins < 1) return "just now";
-  if (mins < 60) return `${mins}m ago`;
-  const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days < 7) return `${days}d ago`;
-  return `${Math.floor(days / 7)}w ago`;
-}
-
-export function timeBetween(startStr, endStr) {
-  if (!startStr || !endStr) return "";
-  const start = new Date(startStr.endsWith("Z") ? startStr : startStr + "Z");
-  const end = new Date(endStr.endsWith("Z") ? endStr : endStr + "Z");
-  if (isNaN(start) || isNaN(end)) return "";
-  const diffMs = end - start;
-  const mins = Math.floor(diffMs / 60000);
-  if (mins < 60) return `${mins}m`;
-  const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours}h`;
-  const days = Math.floor(hours / 24);
-  return `${days}d`;
-}
-
-export function waitTimeColor(dateString) {
-  if (!dateString) return "";
-  const d = new Date(dateString.endsWith("Z") ? dateString : dateString + "Z");
-  const hours = (new Date() - d) / 3600000;
-  if (hours < 4) return "green";
-  if (hours < 24) return "yellow";
-  return "red";
-}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..820c0ca5
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+  readonly VITE_API_TARGET: string;
+  readonly VITE_SENTRY_DSN?: string;
+  readonly VITE_SENTRY_ENVIRONMENT?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+declare const __APP_COMMIT_SHA__: string;
+declare const __SENTRY_RELEASE__: string;
diff --git a/terraform/README.md b/terraform/README.md
new file mode 100644
index 00000000..f466e8d6
--- /dev/null
+++ b/terraform/README.md
@@ -0,0 +1,352 @@
+# Frontend Terraform adoption runbook (dev)
+
+This tree adopts the existing Sea Haven SHOC frontend dev hosting resources
+into HCP Terraform without recreating them. It mirrors the backend adoption
+(`shoc-backend` #94, #98, #99, #102) and lands in three PRs:
+
+| PR  | Branch                                | Change                                                                                                  |
+| --- | ------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| A   | `feature/frontend-terraform-adoption` | Merged (#159). Dev root with `adoption_complete = false`, import guard, CDK retain mode.                |
+| B   | `feature/terraform-dev-adoption`      | Merged (#178). `adoption_complete = true`: ownership tags, bucket policy drops the auto-delete grant.   |
+| C   | `feature/terraform-dev-content-cd`    | This PR. Content CD through Terraform: release prefixes, pointer, origin group, invalidation, rollback. |
+
+Creating these files, formatting them, initializing with `-backend=false`, and
+validating them does not authorize an AWS, HCP Terraform, GitHub,
+CloudFormation, DNS, or deployment mutation. Every live step below is gated on
+an explicit go from the owner, with the production impact stated first.
+
+Staging stays on the CDK and `deploy-staging.yml` path. Its cutover is tracked
+separately (SH-287) and adds its own root under `live/staging` when it starts.
+The `staging` constants in `scripts/terraform_import_plan_resources.py` exist
+only so the checker can prove a dev plan carrying a staging identifier fails.
+
+## Fixed targets
+
+- AWS account: `396287094661`
+- AWS region: `us-east-1`
+- HCP organization: `seahaven`
+- HCP project: `seahaven-external-dev`
+- HCP workspace: `shoc-frontend-new-dev`, VCS branch `dev`, working
+  directory `terraform/live/dev`
+- Site: `dev.seahaven.com`
+- API build value: `https://api.dev.seahaven.com/api`
+
+## Workspace invariants
+
+Set before any Terraform lands on `dev`, read back after setting, and re-read
+before the first release after any Terraform merge:
+
+- Auto-apply **off**. GitHub or a human applies every run.
+- Automatic speculative plans **on** (PR plans are read-only evidence).
+- Automatic run triggering: **patterns**
+  `terraform/live/dev/**` and `terraform/live/modules/**`. No trigger
+  prefixes, no tags regex. Do not switch to tag-based triggering.
+- Execution mode remote, Terraform `1.16.x` (`versions.tf` requires
+  `>= 1.14.0, < 2.0.0`; CI validates with `1.16.0`).
+- Dynamic AWS credentials only: environment variables
+  `TFC_AWS_PROVIDER_AUTH=true`, `TFC_AWS_PLAN_ROLE_ARN`, and
+  `TFC_AWS_APPLY_ROLE_ARN` pointing at `hcptf-shoc-frontend-new-dev-plan`
+  and `hcptf-shoc-frontend-new-dev`. No access keys.
+- **No** `adoption_complete` workspace variable. The dev root pins it in code
+  (`local.adoption_complete`) so the value under review is the value that
+  applies. `scripts/test-terraform-import-plan-check.py` fails if a `variable`
+  block reappears in the root.
+
+## Ownership boundary
+
+`live/modules/environment-owned` owns these 14 addresses (13 imported hosting
+resources plus the release pointer created in Phase 3):
+
+1. `module.environment_owned.aws_s3_bucket.site`
+2. `module.environment_owned.aws_s3_bucket_public_access_block.site`
+3. `module.environment_owned.aws_s3_bucket_ownership_controls.site`
+4. `module.environment_owned.aws_s3_bucket_server_side_encryption_configuration.site`
+5. `module.environment_owned.aws_s3_bucket_versioning.site`
+6. `module.environment_owned.aws_s3_bucket_policy.site`
+7. `module.environment_owned.aws_cloudfront_distribution.site`
+8. `module.environment_owned.aws_cloudfront_origin_access_control.site`
+9. `module.environment_owned.aws_cloudfront_function.spa_rewrite`
+10. `module.environment_owned.aws_route53_record.site_a`
+11. `module.environment_owned.aws_route53_record.site_aaaa`
+12. `module.environment_owned.aws_iam_role.github_deploy`
+13. `module.environment_owned.aws_iam_role_policy.github_deploy`
+14. `module.environment_owned.aws_s3_object.release_pointer`
+
+The CloudFront invalidation is a Terraform action
+(`action.aws_cloudfront_create_invalidation.release`), not a managed resource.
+Every managed resource has `prevent_destroy = true`.
+
+`live/modules/environment-inventory` is data-only. It resolves and checks the
+caller account, provider region, public hosted zone, ACM certificate, account
+GitHub OIDC provider, and the AWS managed `Managed-CachingOptimized` cache
+policy against pinned values, and fails the plan on any mismatch.
+
+The following remain outside state:
+
+- the `dev.seahaven.com` hosted zone and the `*.seahaven.com` certificate
+- the account-global GitHub OIDC provider
+- the AWS managed CloudFront cache policy
+- `CDKToolkit` resources and CDK metadata
+- the S3 auto-delete custom resource, its provider Lambda and role
+- the HCP plan/apply roles and the deploy-role permissions boundary
+
+## Exact live inventory (dev)
+
+- Bucket and all bucket subresources: `seahaven-shoc-frontend-dev`
+- Distribution: `E2CWLM1AFB964P`
+- OAC: `E30VSIK87N8H64`, name
+  `shocfrontenddevDistributionOrigin1S3OriginAccessControlDFC82620`,
+  description modeled as `""`
+- Distribution origin ID: `shocfrontenddevDistributionOrigin10CCD0EE1`
+- Function: `us-east-1shocfrontenddevSpaRewrite58674DB8`
+- A import ID: `Z07671212N75U4YLPWZR8_dev.seahaven.com_A`
+- AAAA import ID: `Z07671212N75U4YLPWZR8_dev.seahaven.com_AAAA`
+- Deploy role: `githubdeploy-shoc-frontend-new-dev`
+- Inline policy import ID:
+  `githubdeploy-shoc-frontend-new-dev:GithubDeployRoleDefaultPolicyE8F540D1`
+- Hosted zone: `Z07671212N75U4YLPWZR8`
+- Certificate:
+  `arn:aws:acm:us-east-1:396287094661:certificate/2b78e74f-7b65-4b82-a413-7a498b102f00`
+- Legacy stack: `shoc-frontend-dev`
+- Auto-delete helper role:
+  `arn:aws:iam::396287094661:role/shoc-frontend-dev-CustomS3AutoDeleteObjectsCustomRe-dmSDIY8EH7KV`
+- Permissions boundary:
+  `arn:aws:iam::396287094661:policy/shoc-frontend-new-dev-deploy-boundary`
+
+With `adoption_complete = false` the root declares the configuration observed
+after the CDK retain deploy (Phase 1, step 2), not the configuration live
+today:
+
+- `Environment=dev`, `ManagedBy=cdk`, `Project=shoc-frontend` tags, plus the
+  S3-only `aws-cdk:auto-delete-objects=true` tag
+- the deploy-role-only `HcpTerraformWorkspace=shoc-frontend-new-dev` tag
+- the permissions boundary attached to the deploy role
+- `StringEquals` on the OIDC subject
+  `repo:Sea-Haven-Industries/shoc-frontend-new:ref:refs/heads/dev`
+- the legacy bucket policy including the auto-delete helper grant
+- the legacy deploy inline policy (`AssumeCdkBootstrapRoles`, `DescribeStack`,
+  bucket read/write, `InvalidateDistribution`)
+
+The retain deploy adds the boundary, the tag, and the `StringEquals` narrowing.
+If read-back after that deploy differs from the root in any other way, update
+the root to the observed value and prove a zero-change import plan. Do not
+approve drift through the controlled-update checker.
+
+## Phase 1: import-first adoption (merged)
+
+Each step is gated. State the impact, get the go, act, read back, record.
+
+1. **Workspace invariants.** Set the invariants above on
+   `shoc-frontend-new-dev`. Read back the workspace and record the JSON in the
+   PR.
+2. **CDK retain deploy.** Completed from the reviewed PR A head. The CDK app
+   is no longer in this repository.
+
+   Expected: an update-only change set (no create, no delete, no replace)
+   that adds `DeletionPolicy: Retain` and `UpdateReplacePolicy: Retain` to the
+   13 transferred resources and the `Custom::S3AutoDeleteObjects` resource,
+   attaches the boundary, adds the `HcpTerraformWorkspace` tag, and narrows
+   the trust operator. Read back the role, bucket policy, and stack resources
+   as JSON and attach it to the PR.
+
+3. **Merge PR A.** The merge triggers a VCS run on the workspace (auto-apply
+   off). Download the plan JSON and run the guard:
+
+   ```bash
+   python3 scripts/check-terraform-import-plan.py plan.json --environment dev
+   ```
+
+   Confirm the apply only when the plan is exactly 13 imports, 0 create,
+   0 update, 0 delete, 0 replace and the guard exits 0. Otherwise discard the
+   run and fix the root in a new PR.
+
+4. **Post-import no-op.** Queue a plan and require it to be no-op:
+
+   ```bash
+   python3 scripts/check-terraform-import-plan.py post-import.json \
+     --environment dev --post-import-no-op
+   ```
+
+   Post the run URLs and the guard output on SH-300.
+
+After Phase 1 CloudFormation still owns every resource. Terraform holds state
+for them and nothing else.
+
+## Phase 2: controlled ownership transfer (merged #178)
+
+PR B pins `adoption_complete = true`. The controlled apply may update only:
+
+- `module.environment_owned.aws_s3_bucket.site` (tags)
+- `module.environment_owned.aws_s3_bucket_policy.site` (drops only the
+  auto-delete helper grant)
+- `module.environment_owned.aws_cloudfront_distribution.site` (tags)
+- `module.environment_owned.aws_cloudfront_function.spa_rewrite` (tags)
+- `module.environment_owned.aws_iam_role.github_deploy` (tags)
+
+The OAC, both Route 53 records, and the deploy inline policy must be no-op.
+PR B keeps the GitHub deploy inline policy byte-identical to live so
+`aws_iam_role_policy.github_deploy` does not appear in the plan. Run the
+checker with one `--allow-update-address` per updating address; it rejects
+unused allowlist entries, unknown values, and replacements:
+
+```bash
+python3 scripts/check-terraform-import-plan.py plan.json --environment dev \
+  --allow-update-address module.environment_owned.aws_s3_bucket.site \
+  --allow-update-address module.environment_owned.aws_s3_bucket_policy.site \
+  --allow-update-address module.environment_owned.aws_cloudfront_distribution.site \
+  --allow-update-address module.environment_owned.aws_cloudfront_function.spa_rewrite \
+  --allow-update-address module.environment_owned.aws_iam_role.github_deploy
+```
+
+After the apply and a no-op plan, the CDK stack was relinquished with
+`ManageSiteInfrastructure=false`. Never deploy that stack with
+`ManageSiteInfrastructure=true` again. The CDK app was removed in PR C.
+
+Confirm `dev.seahaven.com` still serves. Phase 2 proved a manual
+`workflow_dispatch` of `deploy.yml` could still upload with the then-unchanged
+GitHub content policy. PR C replaces that policy with the release-prefix
+document during bootstrap.
+
+## Phase 3: content CD through Terraform (this PR)
+
+GitHub builds the SPA and uploads only `releases/<sha>-<run>-<attempt>/`.
+The GitHub role may `GetObject` on `.release/current` and read the exact
+distribution (`GetDistribution` / `GetDistributionConfig`) so verify and
+live-state summary can observe origin paths. It cannot invalidate or write
+the pointer. Terraform owns `.release/current`, both origin paths of the
+CloudFront origin group, and the `aws_cloudfront_create_invalidation` action. Rollback is one
+guarded Terraform run that swaps the labels. Push-to-`dev` stays off until
+`vars.TERRAFORM_CONTENT_CD_ENABLED` is the string `true`. Dev no longer calls
+`scripts/deploy-web.sh`; that script remains the staging publisher (SH-287).
+
+Release vars `release_version_label` and `previous_release_version_label` are
+nullable, default null, and must not be set on the workspace or in tfvars.
+Null VCS plans read the pointer back from S3. Empty string is the legacy root
+layout.
+
+Per GitHub content release after bootstrap: exactly two managed updates plus
+one action invocation (`0/2/0`). `scripts/check-terraform-release-plan.py`
+accepts a plan that updates only the pointer `content` and
+`origin[*].origin_path`, with `after` equal to the expected labels, `before`
+equal to the pointer's prior values, and exactly one invalidation
+`action_invocations` entry.
+
+The first VCS apply after merge is **bootstrap**, not `0/2/0`. It creates
+`.release/current` (legacy empty labels), adds the previous origin and origin
+group, switches the default behavior to the group, replaces the GitHub inline
+policy with the release-prefix document, and invokes invalidation. A human
+confirms that apply. GitHub CD starts only after bootstrap is applied.
+
+Activation (each step gated; do not run without an explicit go):
+
+1. Merge this PR with `TERRAFORM_CONTENT_CD_ENABLED` unset. Confirm or discard
+   the HCP VCS run. Apply bootstrap as a human-confirmed controlled update.
+2. Re-read workspace invariants (auto-apply off, speculative on, trigger
+   patterns only, no prefixes, no tags-regex).
+3. `workflow_dispatch` on `dev`. Confirm pointer, origin paths, invalidation,
+   smoke, and rollback readiness from the live-state summary.
+4. Set `TERRAFORM_CONTENT_CD_ENABLED=true` only after that proof and owner
+   approval.
+5. Confirm the first push-to-`dev` run. Close SH-300 on that proof.
+
+A red job does not mean the site is down. Read the live-state summary first.
+
+## Operational rules
+
+- **Terraform-only PRs.** A PR that changes `terraform/**` may not change
+  deployable application code. The `terraform-isolation` job in
+  `.github/workflows/terraform-isolation.yaml` enforces this; documentation and the
+  `scripts/*terraform*` tooling are allowed alongside. A reviewer may add the
+  `terraform-isolation-override` label for the rare change that must introduce
+  Terraform variables together with the workflow that consumes them (PR C).
+  Adding or removing that label re-runs only that workflow against the labels
+  currently on the PR; Frontend checks does not start a new run. Removing the
+  label fails a mixed PR that had previously passed with the override, so a
+  stale green check cannot merge. Markdown under `terraform/` does not count as a Terraform
+  change for this gate; it does not match the workspace trigger patterns.
+  The label is the approval record. The override is temporary:
+  a follow-up PR after PR C removes the label path from the checker and
+  workflow so the gate has no exception.
+- **Every Terraform merge produces a VCS run.** A human confirms or discards
+  it before the next content release. Do not leave a pending run on the
+  workspace.
+- **Re-read the workspace invariants** before the first release after any
+  Terraform merge or workspace settings change.
+- **A red job does not mean the site is down.** Read the live-state summary
+  first (served `index.html` hash, distribution status, pointer body, both
+  origin paths), then triage.
+- **Exact-head evidence.** Every live step records the run URL, the SHA, and a
+  machine-readable read-back on the PR or SH-300.
+
+## Local validation
+
+From the repository root (also run by `npm run verify` through
+`scripts/governance-check.mjs`):
+
+```bash
+npm run test:terraform              # fmt -check, init -backend=false, validate
+npm run test:terraform-import-plan  # checker unit tests against synthetic plans
+npm run test:terraform-release-plan # content-release plan guard
+npm run test:terraform-isolation    # isolation gate unit tests
+npm run test:hcp-run-guard          # workspace invariant and apply reconcile
+npm run test:cloudfront-release-verify
+npm run test:github-workflows       # bash -n and actionlint
+```
+
+`terraform init -backend=false -lockfile=readonly` may download the provider
+but never contacts HCP state or plans against AWS. Only HCP runs plan against
+the account.
+
+The lock file must carry `h1:` hashes for every platform that runs the gate
+(CI and HCP are `linux_amd64`, laptops are `darwin_*`). After changing the
+provider version, refresh them with:
+
+```bash
+terraform -chdir=terraform/live/dev providers lock \
+  -platform=linux_amd64 -platform=linux_arm64 \
+  -platform=darwin_amd64 -platform=darwin_arm64
+```
+
+## Import plan safety
+
+Import mode requires exactly the canonical 13 addresses and AWS types, valid
+import metadata for every resource, the exact dev import IDs (a staging ID in a
+dev plan fails), and zero create, update, delete, or replace actions.
+
+Post-import mode requires all 13 resources to be no-op and rejects any
+remaining import metadata.
+
+Controlled mode permits only in-place updates to the addresses explicitly
+listed with `--allow-update-address`, verifies `before` against the exact
+pre-adoption policies and tags and `after` against the exact adopted values,
+and rejects create, delete, replace, import metadata, unknown values,
+unapproved addresses, and unused allowlist entries.
+
+## Rollback
+
+- Before import apply: discard the run and correct the root.
+- After import, before the controlled update (end of Phase 1): remove only the
+  13 imported addresses from state under a separately reviewed state
+  operation. CloudFormation remains authoritative; a
+  `ManageSiteInfrastructure=true` stack is unchanged by this.
+- After the controlled update, before detachment: either complete the reviewed
+  detachment or restore the exact pre-adoption policy and tags under a
+  separate approval. Do not remove state or redeploy CloudFormation blindly.
+- After detachment: Terraform is authoritative. Restore content from the
+  versioned bucket. Re-establishing CloudFormation ownership requires a
+  reviewed `IMPORT` change set, never an ordinary update.
+
+Any replacement, destroy, cross-environment ID, missing import, broad policy
+change, or failed smoke check is a hard stop.
+
+## Evidence per phase
+
+- HCP run URL and the workspace settings read-back
+- plan JSON and checker output
+- `terraform state list` showing exactly the 13 addresses
+- read-only inventory before and after each mutation
+- synthesized CloudFormation template, change set, and stack events
+- deploy, invalidation, and smoke output
+- the post-action no-op plan
+- phase close-out on SH-300: completed work, validation, risks, deviations,
+  remaining work
diff --git a/terraform/live/dev/.terraform.lock.hcl b/terraform/live/dev/.terraform.lock.hcl
new file mode 100644
index 00000000..7f171232
--- /dev/null
+++ b/terraform/live/dev/.terraform.lock.hcl
@@ -0,0 +1,30 @@
+# This file is maintained automatically by "terraform init".
+# Manual edits may be lost in future updates.
+
+provider "registry.terraform.io/hashicorp/aws" {
+  version     = "6.62.0"
+  constraints = "~> 6.57"
+  hashes = [
+    "h1:4qcuRkosNKYxV2y69uJ6zAfTEO1Op04L4KUuWBrUvBo=",
+    "h1:OthB9UeoBgmy348EpDjs5GDGk6p6UxAMQD5cXn7u9Ho=",
+    "h1:lTKd2c1EunGxt2XROLgEeSXA2Jk+WiiG9BTcp+L/0xY=",
+    "h1:nWSI/kgPk9aieiY01TEKOGXRX3+L889GSkEq0SMCL6E=",
+    "h1:yOSEz5G8b/n5uhFCZ0gbEsKkAQATtVuhXJEXR3OM5qs=",
+    "zh:35a9e4bc6fd622c5a99561b882025f2745f1256bbf1a8da8d6b39319b75ae0b5",
+    "zh:405927d470ff16201e40aa0fa2d0ab1de477360a0926d20719cd029179682ecd",
+    "zh:4ab7866593a90bcf18f066b0092a209b9f42852acd783b504031ae74cb6f7010",
+    "zh:5b477f313fc511648a4eed9f9085d0778414835896256ab14296d2345b7070e3",
+    "zh:87de70bc99751f94262cec2260d972555a98f588aa3a613e417438f88a1182df",
+    "zh:88f02a8ff07f00da4ffb3bee9e8ae25588e3a0a92633c625c1c2a63bac00a844",
+    "zh:8d8596257453357c9f3fccaa7d2f04299e8d35b16f364adb8a2c829143a9c090",
+    "zh:953c8e15fa9c12c081f17d66cf45246d032fa23bee33f264dc82242afdb98bc2",
+    "zh:9a7dd903e5e9b2b0cc1317ad2d2692e0ddf05ae2a5aaee20ec5dd1db456711b7",
+    "zh:9b12af85486a96aedd8d7984b0ff811a4b42e3d88dad1a3fb4c0b580d04fa425",
+    "zh:a859154c75c1088d098a481f1ebb259720c5a2ad87781364abf556a741e5adb7",
+    "zh:b8d1e72ad39d5864118f64dd3273424ab637d34b3ff8dd3dfeb4aef9d458587f",
+    "zh:c3666fcfc7b131f5282d4e7249fa68c3a21665757888aa02bbaf6be1cd036bba",
+    "zh:c6b8ff94b3f49bf85fc087381cfe1b271c5b01cf74cf140d58aa500be7138913",
+    "zh:d8143d790e9dd77b8e2f9168e4a33ad6d064dc4b082a0196636b182105aaed14",
+    "zh:fa41eca042f377eb2741e95b36609c1de5b0cd675cd4e3e30c709497cb94db02",
+  ]
+}
diff --git a/terraform/live/dev/imports.tf b/terraform/live/dev/imports.tf
new file mode 100644
index 00000000..8f5e3e3f
--- /dev/null
+++ b/terraform/live/dev/imports.tf
@@ -0,0 +1,64 @@
+import {
+  to = module.environment_owned.aws_s3_bucket.site
+  id = local.bucket_name
+}
+
+import {
+  to = module.environment_owned.aws_s3_bucket_public_access_block.site
+  id = local.bucket_name
+}
+
+import {
+  to = module.environment_owned.aws_s3_bucket_ownership_controls.site
+  id = local.bucket_name
+}
+
+import {
+  to = module.environment_owned.aws_s3_bucket_server_side_encryption_configuration.site
+  id = local.bucket_name
+}
+
+import {
+  to = module.environment_owned.aws_s3_bucket_versioning.site
+  id = local.bucket_name
+}
+
+import {
+  to = module.environment_owned.aws_s3_bucket_policy.site
+  id = local.bucket_name
+}
+
+import {
+  to = module.environment_owned.aws_cloudfront_distribution.site
+  id = local.distribution_id
+}
+
+import {
+  to = module.environment_owned.aws_cloudfront_origin_access_control.site
+  id = local.oac_id
+}
+
+import {
+  to = module.environment_owned.aws_cloudfront_function.spa_rewrite
+  id = local.function_name
+}
+
+import {
+  to = module.environment_owned.aws_route53_record.site_a
+  id = "${local.hosted_zone_id}_${local.domain_name}_A"
+}
+
+import {
+  to = module.environment_owned.aws_route53_record.site_aaaa
+  id = "${local.hosted_zone_id}_${local.domain_name}_AAAA"
+}
+
+import {
+  to = module.environment_owned.aws_iam_role.github_deploy
+  id = local.deploy_role_name
+}
+
+import {
+  to = module.environment_owned.aws_iam_role_policy.github_deploy
+  id = "${local.deploy_role_name}:${local.inline_policy}"
+}
diff --git a/terraform/live/dev/main.tf b/terraform/live/dev/main.tf
new file mode 100644
index 00000000..f926ffd1
--- /dev/null
+++ b/terraform/live/dev/main.tf
@@ -0,0 +1,95 @@
+locals {
+  # Controlled ownership transfer. Pinned in code, never a workspace variable.
+  adoption_complete = true
+
+  environment      = "dev"
+  workspace_name   = "shoc-frontend-new-dev"
+  aws_account_id   = "396287094661"
+  aws_region       = "us-east-1"
+  bucket_name      = "seahaven-shoc-frontend-dev"
+  distribution_id  = "E2CWLM1AFB964P"
+  oac_id           = "E30VSIK87N8H64"
+  oac_name         = "shocfrontenddevDistributionOrigin1S3OriginAccessControlDFC82620"
+  origin_id        = "shocfrontenddevDistributionOrigin10CCD0EE1"
+  function_name    = "us-east-1shocfrontenddevSpaRewrite58674DB8"
+  domain_name      = "dev.seahaven.com"
+  hosted_zone_id   = "Z07671212N75U4YLPWZR8"
+  certificate_arn  = "arn:aws:acm:us-east-1:396287094661:certificate/2b78e74f-7b65-4b82-a413-7a498b102f00"
+  github_oidc_arn  = "arn:aws:iam::396287094661:oidc-provider/token.actions.githubusercontent.com"
+  deploy_role_name = "githubdeploy-shoc-frontend-new-dev"
+  inline_policy    = "GithubDeployRoleDefaultPolicyE8F540D1"
+  stack_name       = "shoc-frontend-dev"
+  cache_policy_id  = "658327ea-f89d-4fab-a63d-7e88639e58f6"
+  permissions_boundary_arn = (
+    "arn:aws:iam::396287094661:policy/shoc-frontend-new-dev-deploy-boundary"
+  )
+  bucket_auto_delete_helper_role_arn = (
+    "arn:aws:iam::396287094661:role/shoc-frontend-dev-CustomS3AutoDeleteObjectsCustomRe-dmSDIY8EH7KV"
+  )
+  legacy_tags = {
+    Environment = "dev"
+    ManagedBy   = "cdk"
+    Project     = "shoc-frontend"
+  }
+  legacy_bucket_tags = merge(local.legacy_tags, {
+    "aws-cdk:auto-delete-objects" = "true"
+  })
+  terraform_tags = {
+    Environment = "dev"
+    ManagedBy   = "terraform"
+    Ownership   = "terraform"
+    Project     = "shoc-frontend"
+  }
+  manager_tag = {
+    HcpTerraformWorkspace = local.workspace_name
+  }
+}
+
+module "inventory" {
+  source = "../modules/environment-inventory"
+
+  aws_account_id                    = local.aws_account_id
+  aws_region                        = local.aws_region
+  hosted_zone_name                  = local.domain_name
+  expected_hosted_zone_id           = local.hosted_zone_id
+  certificate_domain                = "*.seahaven.com"
+  expected_certificate_arn          = local.certificate_arn
+  expected_github_oidc_provider_arn = local.github_oidc_arn
+  expected_cache_policy_id          = local.cache_policy_id
+}
+
+module "environment_owned" {
+  source = "../modules/environment-owned"
+
+  environment                           = local.environment
+  adoption_complete                     = local.adoption_complete
+  aws_account_id                        = local.aws_account_id
+  aws_region                            = local.aws_region
+  bucket_name                           = local.bucket_name
+  distribution_id                       = local.distribution_id
+  origin_access_control_name            = local.oac_name
+  origin_access_control_description     = ""
+  origin_id                             = local.origin_id
+  function_name                         = local.function_name
+  domain_name                           = local.domain_name
+  hosted_zone_id                        = local.hosted_zone_id
+  certificate_arn                       = local.certificate_arn
+  cache_policy_id                       = local.cache_policy_id
+  github_oidc_provider_arn              = local.github_oidc_arn
+  github_subject                        = "repo:Sea-Haven-Industries/shoc-frontend-new:ref:refs/heads/dev"
+  pre_adoption_github_subject_operator  = "StringEquals"
+  post_adoption_github_subject_operator = "StringEquals"
+  deploy_branch                         = "dev"
+  deploy_role_name                      = local.deploy_role_name
+  deploy_inline_policy_name             = local.inline_policy
+  deploy_permissions_boundary_arn       = local.permissions_boundary_arn
+  cloudformation_stack_name             = local.stack_name
+  bucket_auto_delete_helper_role_arn    = local.bucket_auto_delete_helper_role_arn
+  pre_adoption_tags                     = local.legacy_tags
+  pre_adoption_bucket_tags              = local.legacy_bucket_tags
+  ownership_tags                        = local.terraform_tags
+  pre_adoption_deploy_role_tags         = merge(local.legacy_tags, local.manager_tag)
+  post_adoption_deploy_role_tags        = merge(local.terraform_tags, local.manager_tag)
+  release_version_label                 = var.release_version_label
+  previous_release_version_label        = var.previous_release_version_label
+}
diff --git a/terraform/live/dev/outputs.tf b/terraform/live/dev/outputs.tf
new file mode 100644
index 00000000..8b9e94c5
--- /dev/null
+++ b/terraform/live/dev/outputs.tf
@@ -0,0 +1,19 @@
+output "bucket_name" {
+  value = module.environment_owned.bucket_name
+}
+
+output "distribution_id" {
+  value = module.environment_owned.distribution_id
+}
+
+output "deploy_role_arn" {
+  value = module.environment_owned.deploy_role_arn
+}
+
+output "current_origin_id" {
+  value = module.environment_owned.current_origin_id
+}
+
+output "previous_origin_id" {
+  value = module.environment_owned.previous_origin_id
+}
diff --git a/terraform/live/dev/providers.tf b/terraform/live/dev/providers.tf
new file mode 100644
index 00000000..b6c81d54
--- /dev/null
+++ b/terraform/live/dev/providers.tf
@@ -0,0 +1,3 @@
+provider "aws" {
+  region = local.aws_region
+}
diff --git a/terraform/live/dev/variables.tf b/terraform/live/dev/variables.tf
new file mode 100644
index 00000000..b280e421
--- /dev/null
+++ b/terraform/live/dev/variables.tf
@@ -0,0 +1,33 @@
+variable "release_version_label" {
+  type     = string
+  default  = null
+  nullable = true
+
+  description = "Immutable content release label. Null VCS plans read the live pointer from S3."
+
+  validation {
+    condition = (
+      var.release_version_label == null ||
+      var.release_version_label == "" ||
+      can(regex("^[0-9a-f]{40}-[0-9]+-[0-9]+$", var.release_version_label))
+    )
+    error_message = "release_version_label must be empty or <full-sha>-<run-id>-<attempt>."
+  }
+}
+
+variable "previous_release_version_label" {
+  type     = string
+  default  = null
+  nullable = true
+
+  description = "Previous content release label used as the origin-group failover. Null VCS plans read the live pointer from S3."
+
+  validation {
+    condition = (
+      var.previous_release_version_label == null ||
+      var.previous_release_version_label == "" ||
+      can(regex("^[0-9a-f]{40}-[0-9]+-[0-9]+$", var.previous_release_version_label))
+    )
+    error_message = "previous_release_version_label must be empty or <full-sha>-<run-id>-<attempt>."
+  }
+}
diff --git a/terraform/live/dev/versions.tf b/terraform/live/dev/versions.tf
new file mode 100644
index 00000000..b8a94b0c
--- /dev/null
+++ b/terraform/live/dev/versions.tf
@@ -0,0 +1,19 @@
+terraform {
+  required_version = ">= 1.14.0, < 2.0.0"
+
+  cloud {
+    organization = "seahaven"
+
+    workspaces {
+      project = "seahaven-external-dev"
+      name    = "shoc-frontend-new-dev"
+    }
+  }
+
+  required_providers {
+    aws = {
+      source  = "hashicorp/aws"
+      version = "~> 6.57"
+    }
+  }
+}
diff --git a/terraform/live/modules/environment-inventory/main.tf b/terraform/live/modules/environment-inventory/main.tf
new file mode 100644
index 00000000..d0639b77
--- /dev/null
+++ b/terraform/live/modules/environment-inventory/main.tf
@@ -0,0 +1,65 @@
+data "aws_caller_identity" "current" {
+  lifecycle {
+    postcondition {
+      condition     = self.account_id == var.aws_account_id
+      error_message = "Refusing to inspect resources outside the expected AWS account."
+    }
+  }
+}
+
+data "aws_region" "current" {
+  lifecycle {
+    postcondition {
+      condition     = self.region == var.aws_region
+      error_message = "Refusing to inspect resources outside the expected AWS region."
+    }
+  }
+}
+
+data "aws_route53_zone" "site" {
+  name         = "${trimsuffix(var.hosted_zone_name, ".")}."
+  private_zone = false
+
+  lifecycle {
+    postcondition {
+      condition     = self.zone_id == var.expected_hosted_zone_id
+      error_message = "The resolved Route 53 zone does not match the pinned hosted zone."
+    }
+  }
+}
+
+data "aws_acm_certificate" "shared" {
+  domain      = var.certificate_domain
+  statuses    = ["ISSUED"]
+  types       = ["AMAZON_ISSUED"]
+  most_recent = true
+
+  lifecycle {
+    postcondition {
+      condition     = self.arn == var.expected_certificate_arn
+      error_message = "The resolved ACM certificate does not match the pinned certificate."
+    }
+  }
+}
+
+data "aws_iam_openid_connect_provider" "github" {
+  url = "https://token.actions.githubusercontent.com"
+
+  lifecycle {
+    postcondition {
+      condition     = self.arn == var.expected_github_oidc_provider_arn
+      error_message = "The GitHub OIDC provider does not match the pinned account provider."
+    }
+  }
+}
+
+data "aws_cloudfront_cache_policy" "managed" {
+  name = var.cache_policy_name
+
+  lifecycle {
+    postcondition {
+      condition     = self.id == var.expected_cache_policy_id
+      error_message = "The AWS managed CloudFront cache policy does not match the pinned ID."
+    }
+  }
+}
diff --git a/terraform/live/modules/environment-inventory/outputs.tf b/terraform/live/modules/environment-inventory/outputs.tf
new file mode 100644
index 00000000..3223842d
--- /dev/null
+++ b/terraform/live/modules/environment-inventory/outputs.tf
@@ -0,0 +1,19 @@
+output "hosted_zone_id" {
+  value       = data.aws_route53_zone.site.zone_id
+  description = "Verified hosted zone ID."
+}
+
+output "certificate_arn" {
+  value       = data.aws_acm_certificate.shared.arn
+  description = "Verified ACM certificate ARN."
+}
+
+output "github_oidc_provider_arn" {
+  value       = data.aws_iam_openid_connect_provider.github.arn
+  description = "Verified GitHub OIDC provider ARN."
+}
+
+output "cache_policy_id" {
+  value       = data.aws_cloudfront_cache_policy.managed.id
+  description = "Verified AWS managed cache policy ID."
+}
diff --git a/terraform/live/modules/environment-inventory/variables.tf b/terraform/live/modules/environment-inventory/variables.tf
new file mode 100644
index 00000000..e76ae6dd
--- /dev/null
+++ b/terraform/live/modules/environment-inventory/variables.tf
@@ -0,0 +1,46 @@
+variable "aws_account_id" {
+  type        = string
+  description = "Expected AWS account ID."
+}
+
+variable "aws_region" {
+  type        = string
+  description = "Expected AWS provider region."
+}
+
+variable "hosted_zone_name" {
+  type        = string
+  description = "Public hosted zone DNS name."
+}
+
+variable "expected_hosted_zone_id" {
+  type        = string
+  description = "Pinned hosted zone ID."
+}
+
+variable "certificate_domain" {
+  type        = string
+  description = "Domain used to resolve the expected certificate."
+}
+
+variable "expected_certificate_arn" {
+  type        = string
+  description = "Pinned ACM certificate ARN."
+}
+
+variable "expected_github_oidc_provider_arn" {
+  type        = string
+  description = "Pinned account-global GitHub OIDC provider ARN."
+}
+
+variable "cache_policy_name" {
+  type        = string
+  description = "AWS managed CloudFront cache policy name."
+  default     = "Managed-CachingOptimized"
+}
+
+variable "expected_cache_policy_id" {
+  type        = string
+  description = "Pinned AWS managed CloudFront cache policy ID."
+  default     = "658327ea-f89d-4fab-a63d-7e88639e58f6"
+}
diff --git a/terraform/live/modules/environment-owned/main.tf b/terraform/live/modules/environment-owned/main.tf
new file mode 100644
index 00000000..1bf36612
--- /dev/null
+++ b/terraform/live/modules/environment-owned/main.tf
@@ -0,0 +1,441 @@
+locals {
+  bucket_arn              = "arn:aws:s3:::${var.bucket_name}"
+  distribution_arn        = "arn:aws:cloudfront::${var.aws_account_id}:distribution/${var.distribution_id}"
+  resource_tags           = var.adoption_complete ? var.ownership_tags : var.pre_adoption_tags
+  bucket_tags             = var.adoption_complete ? var.ownership_tags : var.pre_adoption_bucket_tags
+  deploy_role_tags        = var.adoption_complete ? var.post_adoption_deploy_role_tags : var.pre_adoption_deploy_role_tags
+  github_subject_operator = var.pre_adoption_github_subject_operator
+  previous_origin_id      = "${var.origin_id}-previous"
+  origin_group_id         = "${var.origin_id}-group"
+  pointer_key             = ".release/current"
+  pointer_body            = try(jsondecode(data.aws_s3_object.release_pointer[0].body), {})
+  # coalesce() skips empty strings, so a null var plus a missing pointer
+  # would error. Empty string is the legacy root layout and must be valid.
+  current_label = (
+    var.release_version_label != null
+    ? var.release_version_label
+    : try(local.pointer_body.current, "")
+  )
+  previous_label = (
+    var.previous_release_version_label != null
+    ? var.previous_release_version_label
+    : try(local.pointer_body.previous, "")
+  )
+  current_origin_path  = local.current_label == "" ? "" : "/releases/${local.current_label}"
+  previous_origin_path = local.previous_label == "" ? "" : "/releases/${local.previous_label}"
+
+  spa_rewrite_code = join("\n", [
+    "function handler(event) {",
+    "  var request = event.request;",
+    "  var uri = request.uri;",
+    "  // No file extension after the last slash -> a client-side route.",
+    "  if (uri.lastIndexOf('.') <= uri.lastIndexOf('/')) {",
+    "    request.uri = '/index.html';",
+    "  }",
+    "  return request;",
+    "}",
+  ])
+}
+
+data "aws_s3_objects" "release_prefix" {
+  bucket = aws_s3_bucket.site.bucket
+  prefix = ".release/"
+}
+
+data "aws_s3_object" "release_pointer" {
+  count  = contains(coalesce(data.aws_s3_objects.release_prefix.keys, []), local.pointer_key) ? 1 : 0
+  bucket = aws_s3_bucket.site.bucket
+  key    = local.pointer_key
+}
+
+data "aws_iam_policy_document" "site_bucket" {
+  dynamic "statement" {
+    for_each = var.adoption_complete ? [] : [1]
+
+    content {
+      effect = "Allow"
+
+      principals {
+        type        = "AWS"
+        identifiers = [var.bucket_auto_delete_helper_role_arn]
+      }
+
+      actions = [
+        "s3:DeleteObject*",
+        "s3:GetBucket*",
+        "s3:List*",
+        "s3:PutBucketPolicy",
+      ]
+      resources = [
+        local.bucket_arn,
+        "${local.bucket_arn}/*",
+      ]
+    }
+  }
+
+  statement {
+    effect = "Allow"
+
+    principals {
+      type        = "Service"
+      identifiers = ["cloudfront.amazonaws.com"]
+    }
+
+    actions   = ["s3:GetObject"]
+    resources = ["${local.bucket_arn}/*"]
+
+    condition {
+      test     = "StringEquals"
+      variable = "AWS:SourceArn"
+      values   = [local.distribution_arn]
+    }
+  }
+
+  statement {
+    effect = "Deny"
+
+    principals {
+      type        = "AWS"
+      identifiers = ["*"]
+    }
+
+    actions = ["s3:*"]
+    resources = [
+      local.bucket_arn,
+      "${local.bucket_arn}/*",
+    ]
+
+    condition {
+      test     = "Bool"
+      variable = "aws:SecureTransport"
+      values   = ["false"]
+    }
+  }
+}
+
+data "aws_iam_policy_document" "github_deploy_assume" {
+  statement {
+    effect  = "Allow"
+    actions = ["sts:AssumeRoleWithWebIdentity"]
+
+    principals {
+      type        = "Federated"
+      identifiers = [var.github_oidc_provider_arn]
+    }
+
+    condition {
+      test     = "StringEquals"
+      variable = "token.actions.githubusercontent.com:aud"
+      values   = ["sts.amazonaws.com"]
+    }
+
+    condition {
+      test     = local.github_subject_operator
+      variable = "token.actions.githubusercontent.com:sub"
+      values   = [var.github_subject]
+    }
+  }
+}
+
+data "aws_iam_policy_document" "github_deploy" {
+  statement {
+    sid    = "ListReleasePrefixes"
+    effect = "Allow"
+    actions = [
+      "s3:GetBucketLocation",
+      "s3:ListBucket",
+    ]
+    resources = [local.bucket_arn]
+
+    condition {
+      test     = "StringLike"
+      variable = "s3:prefix"
+      values = [
+        "releases/",
+        "releases/*",
+      ]
+    }
+  }
+
+  statement {
+    sid    = "PublishReleasePrefix"
+    effect = "Allow"
+    actions = [
+      "s3:GetObject",
+      "s3:PutObject",
+    ]
+    resources = ["${local.bucket_arn}/releases/*"]
+  }
+
+  statement {
+    sid       = "ReadReleasePointer"
+    effect    = "Allow"
+    actions   = ["s3:GetObject"]
+    resources = ["${local.bucket_arn}/${local.pointer_key}"]
+  }
+
+  statement {
+    sid    = "ReadDistribution"
+    effect = "Allow"
+    actions = [
+      "cloudfront:GetDistribution",
+      "cloudfront:GetDistributionConfig",
+    ]
+    resources = [local.distribution_arn]
+  }
+}
+
+resource "aws_s3_bucket" "site" {
+  bucket        = var.bucket_name
+  force_destroy = false
+  tags          = local.bucket_tags
+
+  lifecycle {
+    prevent_destroy = true
+  }
+}
+
+resource "aws_s3_bucket_public_access_block" "site" {
+  bucket = aws_s3_bucket.site.id
+
+  block_public_acls       = true
+  block_public_policy     = true
+  ignore_public_acls      = true
+  restrict_public_buckets = true
+
+  lifecycle {
+    prevent_destroy = true
+  }
+}
+
+resource "aws_s3_bucket_ownership_controls" "site" {
+  bucket = aws_s3_bucket.site.id
+
+  rule {
+    object_ownership = "BucketOwnerEnforced"
+  }
+
+  lifecycle {
+    prevent_destroy = true
+  }
+}
+
+resource "aws_s3_bucket_server_side_encryption_configuration" "site" {
+  bucket = aws_s3_bucket.site.id
+
+  rule {
+    apply_server_side_encryption_by_default {
+      sse_algorithm = "AES256"
+    }
+
+    bucket_key_enabled = false
+  }
+
+  lifecycle {
+    prevent_destroy = true
+  }
+}
+
+resource "aws_s3_bucket_versioning" "site" {
+  bucket = aws_s3_bucket.site.id
+
+  versioning_configuration {
+    status = "Enabled"
+  }
+
+  lifecycle {
+    prevent_destroy = true
+  }
+}
+
+resource "aws_s3_bucket_policy" "site" {
+  bucket = aws_s3_bucket.site.id
+  policy = data.aws_iam_policy_document.site_bucket.json
+
+  lifecycle {
+    prevent_destroy = true
+  }
+}
+
+resource "aws_s3_object" "release_pointer" {
+  bucket       = aws_s3_bucket.site.bucket
+  key          = local.pointer_key
+  content_type = "application/json"
+  content = jsonencode({
+    current  = local.current_label
+    previous = local.previous_label
+  })
+
+  lifecycle {
+    prevent_destroy = true
+  }
+}
+
+resource "aws_cloudfront_origin_access_control" "site" {
+  name                              = var.origin_access_control_name
+  description                       = var.origin_access_control_description
+  origin_access_control_origin_type = "s3"
+  signing_behavior                  = "always"
+  signing_protocol                  = "sigv4"
+
+  lifecycle {
+    prevent_destroy = true
+  }
+}
+
+resource "aws_cloudfront_function" "spa_rewrite" {
+  name    = var.function_name
+  runtime = "cloudfront-js-1.0"
+  comment = "SPA routing: rewrite extensionless paths to /index.html"
+  publish = true
+  code    = local.spa_rewrite_code
+  tags    = local.resource_tags
+
+  lifecycle {
+    prevent_destroy = true
+    ignore_changes  = [publish]
+  }
+}
+
+resource "aws_cloudfront_distribution" "site" {
+  aliases             = [var.domain_name]
+  comment             = "SeaHaven SHOC frontend (${var.environment})"
+  default_root_object = "index.html"
+  enabled             = true
+  http_version        = "http2and3"
+  is_ipv6_enabled     = true
+  price_class         = "PriceClass_100"
+  tags                = local.resource_tags
+
+  origin {
+    connection_attempts      = 3
+    connection_timeout       = 10
+    domain_name              = aws_s3_bucket.site.bucket_regional_domain_name
+    origin_access_control_id = aws_cloudfront_origin_access_control.site.id
+    origin_id                = var.origin_id
+    origin_path              = local.current_origin_path
+  }
+
+  origin {
+    connection_attempts      = 3
+    connection_timeout       = 10
+    domain_name              = aws_s3_bucket.site.bucket_regional_domain_name
+    origin_access_control_id = aws_cloudfront_origin_access_control.site.id
+    origin_id                = local.previous_origin_id
+    origin_path              = local.previous_origin_path
+  }
+
+  origin_group {
+    origin_id = local.origin_group_id
+
+    failover_criteria {
+      status_codes = [403, 404]
+    }
+
+    member {
+      origin_id = var.origin_id
+    }
+
+    member {
+      origin_id = local.previous_origin_id
+    }
+  }
+
+  default_cache_behavior {
+    allowed_methods        = ["GET", "HEAD", "OPTIONS"]
+    cache_policy_id        = var.cache_policy_id
+    cached_methods         = ["GET", "HEAD"]
+    compress               = true
+    target_origin_id       = local.origin_group_id
+    viewer_protocol_policy = "redirect-to-https"
+
+    function_association {
+      event_type   = "viewer-request"
+      function_arn = aws_cloudfront_function.spa_rewrite.arn
+    }
+  }
+
+  restrictions {
+    geo_restriction {
+      restriction_type = "none"
+    }
+  }
+
+  viewer_certificate {
+    acm_certificate_arn      = var.certificate_arn
+    minimum_protocol_version = "TLSv1.2_2021"
+    ssl_support_method       = "sni-only"
+  }
+
+  lifecycle {
+    prevent_destroy = true
+
+    action_trigger {
+      events  = [after_update]
+      actions = [action.aws_cloudfront_create_invalidation.release]
+    }
+  }
+}
+
+action "aws_cloudfront_create_invalidation" "release" {
+  config {
+    distribution_id = aws_cloudfront_distribution.site.id
+    paths           = ["/*"]
+  }
+}
+
+resource "aws_route53_record" "site_a" {
+  zone_id = var.hosted_zone_id
+  name    = var.domain_name
+  type    = "A"
+
+  alias {
+    name                   = aws_cloudfront_distribution.site.domain_name
+    zone_id                = aws_cloudfront_distribution.site.hosted_zone_id
+    evaluate_target_health = false
+  }
+
+  lifecycle {
+    prevent_destroy = true
+  }
+}
+
+resource "aws_route53_record" "site_aaaa" {
+  zone_id = var.hosted_zone_id
+  name    = var.domain_name
+  type    = "AAAA"
+
+  alias {
+    name                   = aws_cloudfront_distribution.site.domain_name
+    zone_id                = aws_cloudfront_distribution.site.hosted_zone_id
+    evaluate_target_health = false
+  }
+
+  lifecycle {
+    prevent_destroy = true
+  }
+}
+
+resource "aws_iam_role" "github_deploy" {
+  name                 = var.deploy_role_name
+  path                 = "/"
+  description          = "GitHub Actions deploy role for Sea-Haven-Industries/shoc-frontend-new@${var.deploy_branch}"
+  assume_role_policy   = data.aws_iam_policy_document.github_deploy_assume.json
+  max_session_duration = 3600
+  permissions_boundary = var.deploy_permissions_boundary_arn
+  tags                 = local.deploy_role_tags
+
+  lifecycle {
+    prevent_destroy = true
+  }
+}
+
+resource "aws_iam_role_policy" "github_deploy" {
+  name   = var.deploy_inline_policy_name
+  role   = aws_iam_role.github_deploy.id
+  policy = data.aws_iam_policy_document.github_deploy.json
+
+  lifecycle {
+    prevent_destroy = true
+  }
+}
diff --git a/terraform/live/modules/environment-owned/outputs.tf b/terraform/live/modules/environment-owned/outputs.tf
new file mode 100644
index 00000000..ef7ebee9
--- /dev/null
+++ b/terraform/live/modules/environment-owned/outputs.tf
@@ -0,0 +1,44 @@
+output "bucket_name" {
+  value       = aws_s3_bucket.site.id
+  description = "Imported site bucket name."
+}
+
+output "distribution_id" {
+  value       = aws_cloudfront_distribution.site.id
+  description = "Imported CloudFront distribution ID."
+}
+
+output "deploy_role_arn" {
+  value       = aws_iam_role.github_deploy.arn
+  description = "Imported GitHub deployment role ARN."
+}
+
+output "current_release_label" {
+  value       = local.current_label
+  description = "Pointer current release label. Empty string is the legacy root layout."
+}
+
+output "previous_release_label" {
+  value       = local.previous_label
+  description = "Pointer previous release label. Empty string is the legacy root layout."
+}
+
+output "current_origin_path" {
+  value       = local.current_origin_path
+  description = "CloudFront origin_path for the current member of the origin group."
+}
+
+output "previous_origin_path" {
+  value       = local.previous_origin_path
+  description = "CloudFront origin_path for the previous member of the origin group."
+}
+
+output "current_origin_id" {
+  value       = var.origin_id
+  description = "CloudFront origin ID for the current release."
+}
+
+output "previous_origin_id" {
+  value       = local.previous_origin_id
+  description = "CloudFront origin ID for the previous release."
+}
diff --git a/terraform/live/modules/environment-owned/variables.tf b/terraform/live/modules/environment-owned/variables.tf
new file mode 100644
index 00000000..05d6b7a9
--- /dev/null
+++ b/terraform/live/modules/environment-owned/variables.tf
@@ -0,0 +1,194 @@
+variable "environment" {
+  type        = string
+  description = "Environment name."
+
+  validation {
+    condition     = contains(["dev", "staging"], var.environment)
+    error_message = "environment must be dev or staging."
+  }
+}
+
+variable "adoption_complete" {
+  type        = bool
+  description = "Switches ownership tags and drops the auto-delete helper grant from the bucket policy."
+  default     = false
+}
+
+variable "release_version_label" {
+  type     = string
+  default  = null
+  nullable = true
+
+  description = "Immutable content release label. Null VCS plans read the live pointer from S3."
+
+  validation {
+    condition = (
+      var.release_version_label == null ||
+      var.release_version_label == "" ||
+      can(regex("^[0-9a-f]{40}-[0-9]+-[0-9]+$", var.release_version_label))
+    )
+    error_message = "release_version_label must be empty or <full-sha>-<run-id>-<attempt>."
+  }
+}
+
+variable "previous_release_version_label" {
+  type     = string
+  default  = null
+  nullable = true
+
+  description = "Previous content release label used as the origin-group failover. Null VCS plans read the live pointer from S3."
+
+  validation {
+    condition = (
+      var.previous_release_version_label == null ||
+      var.previous_release_version_label == "" ||
+      can(regex("^[0-9a-f]{40}-[0-9]+-[0-9]+$", var.previous_release_version_label))
+    )
+    error_message = "previous_release_version_label must be empty or <full-sha>-<run-id>-<attempt>."
+  }
+}
+
+variable "aws_account_id" {
+  type        = string
+  description = "AWS account containing the resources."
+}
+
+variable "aws_region" {
+  type        = string
+  description = "AWS region used by the environment."
+}
+
+variable "bucket_name" {
+  type        = string
+  description = "Existing private S3 origin bucket."
+}
+
+variable "distribution_id" {
+  type        = string
+  description = "Existing CloudFront distribution ID."
+}
+
+variable "origin_access_control_name" {
+  type        = string
+  description = "Exact existing CloudFront OAC name."
+}
+
+variable "origin_access_control_description" {
+  type        = string
+  description = "Exact existing CloudFront OAC description."
+}
+
+variable "origin_id" {
+  type        = string
+  description = "Exact origin ID in the existing distribution."
+}
+
+variable "function_name" {
+  type        = string
+  description = "Existing CloudFront Function name."
+}
+
+variable "domain_name" {
+  type        = string
+  description = "Site hostname."
+}
+
+variable "hosted_zone_id" {
+  type        = string
+  description = "Inventory-verified hosted zone ID."
+}
+
+variable "certificate_arn" {
+  type        = string
+  description = "Inventory-verified ACM certificate ARN."
+}
+
+variable "cache_policy_id" {
+  type        = string
+  description = "Inventory-verified AWS managed cache policy ID."
+}
+
+variable "github_oidc_provider_arn" {
+  type        = string
+  description = "Inventory-verified GitHub OIDC provider ARN."
+}
+
+variable "github_subject" {
+  type        = string
+  description = "Exact GitHub OIDC subject in the existing role."
+}
+
+variable "pre_adoption_github_subject_operator" {
+  type        = string
+  description = "Condition operator used by the role before adoption."
+
+  validation {
+    condition     = contains(["StringEquals", "StringLike"], var.pre_adoption_github_subject_operator)
+    error_message = "pre_adoption_github_subject_operator must be StringEquals or StringLike."
+  }
+}
+
+variable "post_adoption_github_subject_operator" {
+  type        = string
+  description = "Condition operator used by the role after adoption."
+
+  validation {
+    condition     = contains(["StringEquals", "StringLike"], var.post_adoption_github_subject_operator)
+    error_message = "post_adoption_github_subject_operator must be StringEquals or StringLike."
+  }
+}
+
+variable "deploy_branch" {
+  type        = string
+  description = "Branch or environment named in the existing role description."
+}
+
+variable "deploy_role_name" {
+  type        = string
+  description = "Existing GitHub deployment role name."
+}
+
+variable "deploy_inline_policy_name" {
+  type        = string
+  description = "Existing generated inline policy name."
+}
+
+variable "deploy_permissions_boundary_arn" {
+  type        = string
+  description = "Exact permissions boundary attached before import."
+}
+
+variable "cloudformation_stack_name" {
+  type        = string
+  description = "Legacy CloudFormation stack used by the pre-adoption policy."
+}
+
+variable "bucket_auto_delete_helper_role_arn" {
+  type        = string
+  description = "Exact legacy S3 auto-delete helper role ARN."
+}
+
+variable "pre_adoption_tags" {
+  type        = map(string)
+  description = "Exact tags present while CloudFormation still owns the resources."
+}
+
+variable "pre_adoption_bucket_tags" {
+  type        = map(string)
+  description = "Exact pre-adoption S3 tags, including the CDK auto-delete marker."
+}
+
+variable "ownership_tags" {
+  type        = map(string)
+  description = "Tags applied by the controlled ownership transfer."
+}
+
+variable "pre_adoption_deploy_role_tags" {
+  type        = map(string)
+  description = "Exact pre-adoption deploy-role tags, including its HCP manager tag."
+}
+
+variable "post_adoption_deploy_role_tags" {
+  type        = map(string)
+  description = "Exact post-adoption deploy-role tags, preserving its HCP manager tag."
+}
diff --git a/tmp/pr-descriptions/pr2-severity-wizard.md b/tmp/pr-descriptions/pr2-severity-wizard.md
new file mode 100644
index 00000000..c11c1978
--- /dev/null
+++ b/tmp/pr-descriptions/pr2-severity-wizard.md
@@ -0,0 +1,43 @@
+## Jira
+
+- [SH-192](https://luby-us.atlassian.net/browse/SH-192) — severity on Emergency/Reactive
+- Related: [SH-107](https://luby-us.atlassian.net/browse/SH-107) (WO# provisional SH…), [SH-108](https://luby-us.atlassian.net/browse/SH-108) (POC)
+
+## QA residual
+
+- P0 wizard fixed: Type optional (default PM); WO# alphanumeric / SH provisional (not digits-only).
+- P1: COL_HELP tooltips, Scheduled-requires-date — follow-up.
+
+## Summary
+
+- Add SEV 1–5 domain field on board row/create/patch and Type cell modal for Emergency/Reactive.
+- Wizard gates: required WO# (alphanumeric/SH ok), Type optional (defaults PM), severity when E/R, POC name/phone on step 2 with error UX.
+
+## Scope
+
+### In
+
+- `severity` on WorkOrderBoardRowApi / create payload / editable field / table row / wizard draft
+- Type cell popover + TypeSeverityModal + SeverityBadge
+- Wizard step1/step2 validation + footer attempt-continue errors
+- Unit tests for canContinue* and severity patch mapping
+
+### Out (follow-up PRs)
+
+- Advanced filter severity facet (PR5)
+- Uplift UI, Completed Date column, multi-POC, SH auto-numbering beyond wizard gate
+
+## API / BE
+
+- Contract assumed: `severity` on GET board/search row, POST create, and PATCH field `severity`
+- Blocked on BE: none for FE wiring; 422 if severity missing for E/R should be handled by BE
+
+## Test plan
+
+- [ ] Board: pick Emergency/Reactive → severity modal required; badge shows SEV
+- [ ] Wizard: cannot continue step1 without WO#; E/R without severity; step2 without POC
+- [ ] `npm run verify` green locally
+
+## Base
+
+- Base branch: `dev`
diff --git a/tmp/pr-descriptions/pr4-uplift-pending-close-gate.md b/tmp/pr-descriptions/pr4-uplift-pending-close-gate.md
new file mode 100644
index 00000000..13a8b08c
--- /dev/null
+++ b/tmp/pr-descriptions/pr4-uplift-pending-close-gate.md
@@ -0,0 +1,39 @@
+# PR4 — Pending uplift close gate (+ SH-114 closability union)
+
+## Summary
+
+Blocks marking a work order **Completed** (and future completion-document generation) when closability gaps remain — **SH-114 field gates ∪ pending uplift** (SH-188).
+
+- Unifies `wo-closability.ts` / `getClosabilityGaps` with hierarchy: **fields → uplift pending → completion document / photos**.
+- Field gates: dispatcher, technician, completed date, real WO# (non-SH), service; then PM/Overdue completion doc; Emergency/Reactive ≥1 photo.
+- Pending uplift via `hasPendingUplift` or `upliftSummary.pendingCount`.
+- Completed tooltip uses design copy when the **only** gap is pending uplift.
+- Maps optional `completedDate` on board rows for the Completed Date gate.
+
+## Jira
+
+- [SH-188](https://luby-us.atlassian.net/browse/SH-188) — pending uplift close gate
+- Related: [SH-114](https://luby-us.atlassian.net/browse/SH-114) — closability field matrix (pulled into this branch so sister merges do not wipe gates)
+
+## Comp Doc Generate
+
+`CompDocDialog` is **not** mounted on `dev` yet. This PR exports `canGenerateCompDoc(row)` so the completion-doc slice can block generate/open with the same reason string. No UI wiring in this PR.
+
+## Out of scope
+
+- Full uplift CRUD (PR3)
+- Advanced filter facets for uplift
+- Scheduled-requires-date gate (design P1)
+- COL_HELP tooltips (P1)
+
+## Test plan
+
+- [ ] Row with all fields ok + `hasPendingUplift: true` — Completed disabled; design tooltip about pending uplift.
+- [ ] Row missing dispatcher / completed date — Completed disabled; `Missing: …` tooltip.
+- [ ] Row fully closable — Completed selectable.
+- [ ] `canGenerateCompDoc` blocked when gaps exist.
+- [ ] Board API `completedDate` / `upliftSummary.pendingCount` map through to the gate.
+
+## Base
+
+Branch `feature/wo-uplift-pending-close-gate` from local `dev`. Merge **before** or instead of stacking raw SH-114 alone with an uplift-only closability overwrite.
diff --git a/tmp/pr-descriptions/pr7-add-technician.md b/tmp/pr-descriptions/pr7-add-technician.md
new file mode 100644
index 00000000..6ee69d9b
--- /dev/null
+++ b/tmp/pr-descriptions/pr7-add-technician.md
@@ -0,0 +1,27 @@
+## Jira
+
+- [SH-193](https://luby-us.atlassian.net/browse/SH-193)
+
+## QA residual
+
+- P0 done: technician is staged as a **local draft** until the vendor dialog is saved / wizard submitted — Cancel does not orphan a vendor row.
+
+## Summary
+
+- Adds **+ Add technician** to the WO board vendor dialog when a company context is known (from the row or the current selection).
+- Stages a draft technician locally (`draft:` id) without calling `POST vendors` until the dialog save commits the selection.
+- On save, create runs via the existing **`POST vendors`** REST endpoint (`vendorsApi.create` / `useCreateVendor`) using the company profile + new `contactName`.
+
+## Backend
+
+Uses the established vendor create API (`API_PATHS.rest.vendors` → `POST /vendors`). Each vendor record represents one technician; linking to an existing company is done by sending the same `companyName` (and optional `companyId` when available). **No new endpoint**.
+
+## Test plan
+
+- [ ] Open vendor dialog → **+ Add technician** → fill name → Cancel dialog → no vendor create API call.
+- [ ] Add technician → Save dialog → `POST /vendors` once; row shows new tech.
+- [ ] `npm run verify`
+
+## Out of scope
+
+- Multi-POC, multi-tech arrays on WO, vendors directory redesign.
diff --git a/tmp/pr-descriptions/pr9-comment-mentions.md b/tmp/pr-descriptions/pr9-comment-mentions.md
new file mode 100644
index 00000000..a3c588db
--- /dev/null
+++ b/tmp/pr-descriptions/pr9-comment-mentions.md
@@ -0,0 +1,41 @@
+# PR9 — Work order comment @mentions
+
+## Jira
+
+- [SH-217](https://luby-us.atlassian.net/browse/SH-217) — FE @mention autocomplete / chips
+- Related BE: [SH-75](https://luby-us.atlassian.net/browse/SH-75)
+
+## QA residual
+
+- Parcial / Blocked-BE for notification + structured `mentions[]` confirm; token chip polish = P1.
+
+## Summary
+
+- Adds `@` autocomplete to the internal comments composer on work order detail (`/workorders/:id`).
+- Encodes selected users as `@[userId:Display Name]` tokens in comment text so mentions stay readable when the backend ignores the optional payload field.
+- Sends `mentions: string[]` on `POST workorders/{id}/comments` when the composer contains encoded tokens.
+- Highlights mentions in the comment thread using encoded tokens and/or `mentions` returned by the API.
+
+## Out of scope
+
+- Notification Center deep-linking for mention events.
+- Backend notification triggers beyond the FE payload.
+
+## BE contract
+
+See `docs/work-orders/pending-be-contract.md` (Comments section):
+
+| Field                                    | Status   |
+| ---------------------------------------- | -------- |
+| POST `{ text, mentions?: string[] }`     | FE ready |
+| Response includes mentions for highlight | FE ready |
+
+Until BE confirms, encoded tokens in `text` preserve highlight behavior client-side.
+
+## Test plan
+
+- [ ] Open a work order detail → Internal tab → type `@` and pick a dispatcher from the list.
+- [ ] Submit comment; verify POST body includes `text` with encoded token and `mentions` array.
+- [ ] Reload detail; verify mention is highlighted in the thread (token and/or API `mentions`).
+- [ ] Type `@` mid-word (e.g. email) — autocomplete should not open.
+- [ ] Run `npm run verify`.
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..9ab884b7
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "composite": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 00000000..8e08c499
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "strict": true,
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./node_modules/.tmp/tsconfig.node",
+    "types": ["node"]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "config/api-url-contract.ts",
+    "config/api-url-contract.test.ts",
+    "config/sentry-release.ts",
+    "config/sentry-release.test.ts",
+    "config/pwa-manifest.test.ts"
+  ]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..79ced947
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,51 @@
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { execFileSync } from "node:child_process";
+import path from "node:path";
+import { defineConfig, loadEnv } from "vite";
+import { assertAbsoluteApiUrlHasApiSegment } from "./config/api-url-contract";
+import { resolveSentryRelease } from "./config/sentry-release";
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+
+  assertAbsoluteApiUrlHasApiSegment(env.VITE_API_URL);
+
+  let gitCommit: string | undefined;
+  try {
+    gitCommit = execFileSync("git", ["rev-parse", "HEAD"], { encoding: "utf8" }).trim();
+  } catch {
+    gitCommit = undefined;
+  }
+  const sentryRelease = resolveSentryRelease(
+    env.VITE_APP_COMMIT_SHA || process.env.GITHUB_SHA || gitCommit,
+    process.env.CI === "true",
+  );
+
+  return {
+    plugins: [react(), tailwindcss()],
+    define: {
+      __APP_COMMIT_SHA__: JSON.stringify(sentryRelease.commitSha),
+      __SENTRY_RELEASE__: JSON.stringify(sentryRelease.release),
+    },
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "src"),
+      },
+    },
+    server: {
+      port: 3000,
+      proxy: {
+        "/api": {
+          target: env.VITE_API_TARGET ?? "http://localhost:5141",
+          changeOrigin: true,
+          secure: false,
+        },
+      },
+    },
+    build: {
+      outDir: "dist",
+      sourcemap: "hidden",
+    },
+  };
+});
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 00000000..30927fa4
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,23 @@
+import react from "@vitejs/plugin-react";
+import path from "node:path";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
+  test: {
+    environment: "jsdom",
+    setupFiles: ["./src/test/setup.ts"],
+    globals: false,
+    include: [
+      "src/test/**/*.test.{ts,tsx}",
+      "src/test/**/*.integration.test.{ts,tsx}",
+      "config/**/*.test.ts",
+    ],
+    exclude: ["e2e/**", "node_modules/**"],
+  },
+});