From 601ca1da48b2e6e41b6b97dea6344a9451bbc4a8 Mon Sep 17 00:00:00 2001
From: Ashwin <ashwin@micropyramid.com>
Date: Wed, 21 Oct 2026 09:25:18 +0530
Subject: [PATCH] clean up

---
 .github/workflows/tests.yml                   |   4 +-
 CLAUDE.md                                     |   2 +-
 backend/cases/tests/test_csat.py              |   3 +-
 .../test_inbound_webhook_reachability.py      |   2 +-
 backend/common/base.py                        |  30 --
 backend/common/middleware/get_company.py      |   2 +-
 backend/common/middleware/rls_context.py      |  76 +--
 backend/common/tests/test_models.py           |  74 ---
 backend/common/tests/test_multitenancy.py     |  30 --
 .../common/tests/test_rls_context_reset.py    |  17 +-
 backend/common/utils.py                       |   9 -
 backend/invoices/tests/test_portal_rls.py     |   3 +-
 backend/pyproject.toml                        |   1 -
 backend/pytest.ini                            |   1 -
 backend/uv.lock                               |  11 -
 docs/architecture/multi-tenancy-and-rls.md    |   7 +-
 docs/architecture/overview.md                 |   5 -
 .../adding-an-org-scoped-model.md             |   2 +-
 docs/contributing/testing.md                  |   8 +-
 docs/self-hosting/postgresql-and-rls.md       |   7 +-
 frontend/package.json                         |   1 -
 frontend/pnpm-lock.yaml                       |   3 -
 frontend/src/lib/api-helpers.js               | 108 ----
 .../components/dashboard/ActivityFeed.svelte  | 228 ---------
 .../lib/components/dashboard/FocusBar.svelte  | 113 ----
 .../components/dashboard/HotLeadsPanel.svelte | 198 -------
 .../lib/components/dashboard/KPICard.svelte   | 164 ------
 .../lib/components/dashboard/TaskList.svelte  | 251 ---------
 .../src/lib/components/dashboard/index.js     |   5 -
 .../lib/components/icons/GithubIcon.svelte    |  22 -
 .../lib/components/icons/LinkedinIcon.svelte  |  21 -
 frontend/src/lib/components/icons/index.js    |   2 -
 .../lib/components/layout/FilterPill.svelte   |  65 ---
 .../components/layout/FilterPopover.svelte    |  40 --
 .../lib/components/layout/FilterStrip.svelte  |  23 -
 .../lib/components/layout/PageHeader.svelte   | 116 -----
 .../src/lib/components/layout/ViewTabs.svelte |  34 --
 frontend/src/lib/components/layout/index.js   |   5 -
 .../alert-dialog/alert-dialog-action.svelte   |  21 -
 .../alert-dialog/alert-dialog-cancel.svelte   |  21 -
 .../alert-dialog/alert-dialog-content.svelte  |  37 --
 .../alert-dialog-description.svelte           |  20 -
 .../alert-dialog/alert-dialog-footer.svelte   |  22 -
 .../alert-dialog/alert-dialog-header.svelte   |  22 -
 .../alert-dialog/alert-dialog-overlay.svelte  |  23 -
 .../ui/alert-dialog/alert-dialog-title.svelte |  20 -
 .../alert-dialog/alert-dialog-trigger.svelte  |   7 -
 .../lib/components/ui/alert-dialog/index.js   |  39 --
 .../ui/avatar/avatar-fallback.svelte          |  40 --
 .../components/ui/avatar/avatar-gradients.js  |  22 -
 .../components/ui/avatar/avatar-image.svelte  |  13 -
 .../lib/components/ui/avatar/avatar.svelte    |  48 --
 .../src/lib/components/ui/avatar/index.js     |  14 -
 .../src/lib/components/ui/badge/badge.svelte  |  84 ---
 frontend/src/lib/components/ui/badge/index.js |   2 -
 .../ui/bulk-action-bar/BulkActionBar.svelte   |  31 --
 .../components/ui/bulk-action-bar/index.js    |   1 -
 .../components/ui/calendar/Calendar.svelte    | 135 -----
 .../src/lib/components/ui/calendar/index.js   |   3 -
 .../components/ui/card/card-content.svelte    |  14 -
 .../ui/card/card-description.svelte           |  14 -
 .../lib/components/ui/card/card-header.svelte |  18 -
 .../lib/components/ui/card/card-title.svelte  |  16 -
 .../src/lib/components/ui/card/card.svelte    |  27 -
 frontend/src/lib/components/ui/card/index.js  |  19 -
 .../components/ui/crm-drawer/CrmDrawer.svelte | 301 -----------
 .../ui/crm-drawer/CrmPropertyRow.svelte       | 482 ------------------
 .../src/lib/components/ui/crm-drawer/index.js |   2 -
 .../components/ui/crm-table/CrmTable.svelte   | 481 -----------------
 .../src/lib/components/ui/crm-table/index.js  |   1 -
 .../dropdown-menu-checkbox-group.svelte       |  12 -
 .../dropdown-menu-checkbox-item.svelte        |  37 --
 .../dropdown-menu-content.svelte              |  37 --
 .../dropdown-menu/dropdown-menu-group.svelte  |   7 -
 .../dropdown-menu/dropdown-menu-item.svelte   |  34 --
 .../dropdown-menu/dropdown-menu-label.svelte  |  23 -
 .../dropdown-menu-separator.svelte            |  20 -
 .../dropdown-menu-trigger.svelte              |   7 -
 .../lib/components/ui/dropdown-menu/index.js  |  34 --
 .../editable-field/EditableMultiSelect.svelte | 247 ---------
 .../lib/components/ui/editable-field/index.js |   1 -
 .../ui/filter/DateRangeFilter.svelte          | 319 ------------
 .../lib/components/ui/filter/FilterBar.svelte | 196 -------
 .../components/ui/filter/SearchInput.svelte   |  97 ----
 .../components/ui/filter/SelectFilter.svelte  | 212 --------
 .../lib/components/ui/filter/TagFilter.svelte | 231 ---------
 .../src/lib/components/ui/filter/index.js     |   5 -
 .../components/ui/form-shell/FormShell.svelte |  82 ---
 .../src/lib/components/ui/form-shell/index.js |   1 -
 frontend/src/lib/components/ui/input/index.js |   7 -
 .../src/lib/components/ui/input/input.svelte  |  59 ---
 frontend/src/lib/components/ui/label/index.js |   7 -
 .../src/lib/components/ui/label/label.svelte  |  16 -
 .../ui/pagination/Pagination.svelte           | 157 ------
 .../src/lib/components/ui/pagination/index.js |   1 -
 .../src/lib/components/ui/popover/index.js    |  17 -
 .../ui/popover/popover-content.svelte         |  37 --
 .../ui/popover/popover-trigger.svelte         |  13 -
 .../src/lib/components/ui/progress/index.js   |   7 -
 .../components/ui/progress/progress.svelte    |  21 -
 .../ui/section-card/SectionCard.svelte        |  72 ---
 .../lib/components/ui/section-card/index.js   |   2 -
 .../src/lib/components/ui/select/index.js     |  37 --
 .../ui/select/select-content.svelte           |  53 --
 .../ui/select/select-group-heading.svelte     |  14 -
 .../components/ui/select/select-group.svelte  |   7 -
 .../components/ui/select/select-item.svelte   |  48 --
 .../components/ui/select/select-label.svelte  |  13 -
 .../components/ui/select/select-portal.svelte |   7 -
 .../select/select-scroll-down-button.svelte   |  16 -
 .../ui/select/select-scroll-up-button.svelte  |  16 -
 .../ui/select/select-separator.svelte         |  13 -
 .../ui/select/select-trigger.svelte           |  41 --
 .../lib/components/ui/select/select.svelte    |  12 -
 .../src/lib/components/ui/separator/index.js  |   7 -
 .../components/ui/separator/separator.svelte  |  21 -
 frontend/src/lib/components/ui/sheet/index.js |  27 -
 .../components/ui/sheet/sheet-content.svelte  |  56 --
 .../ui/sheet/sheet-description.svelte         |  21 -
 .../components/ui/sheet/sheet-header.svelte   |  22 -
 .../components/ui/sheet/sheet-overlay.svelte  |  23 -
 .../components/ui/sheet/sheet-title.svelte    |  21 -
 .../components/ui/side-panel/SidePanel.svelte |  75 ---
 .../ui/side-panel/SidePanelSection.svelte     |  22 -
 .../src/lib/components/ui/side-panel/index.js |  27 -
 .../src/lib/components/ui/skeleton/index.js   |   7 -
 .../components/ui/skeleton/skeleton.svelte    |  11 -
 .../ui/stage-stepper/StageStepper.svelte      |  80 ---
 .../lib/components/ui/stage-stepper/index.js  |   1 -
 .../src/lib/components/ui/switch/index.js     |   3 -
 .../lib/components/ui/switch/switch.svelte    |  48 --
 frontend/src/lib/components/ui/table/index.js |  22 -
 .../lib/components/ui/table/table-body.svelte |  21 -
 .../lib/components/ui/table/table-cell.svelte |  24 -
 .../lib/components/ui/table/table-head.svelte |  24 -
 .../components/ui/table/table-header.svelte   |  21 -
 .../lib/components/ui/table/table-row.svelte  |  24 -
 .../src/lib/components/ui/table/table.svelte  |  24 -
 frontend/src/lib/components/ui/tabs/index.js  |  16 -
 .../components/ui/tabs/tabs-content.svelte    |  14 -
 .../lib/components/ui/tabs/tabs-list.svelte   |  18 -
 .../components/ui/tabs/tabs-trigger.svelte    |  29 --
 .../src/lib/components/ui/tabs/tabs.svelte    |  14 -
 .../src/lib/components/ui/textarea/index.js   |   7 -
 .../components/ui/textarea/textarea.svelte    |  31 --
 .../components/ui/timeline/Timeline.svelte    |  27 -
 .../ui/timeline/TimelineItem.svelte           |  54 --
 .../src/lib/components/ui/timeline/index.js   |   2 -
 .../ui/view-toggle/ViewToggle.svelte          |  53 --
 .../lib/components/ui/view-toggle/index.js    |   1 -
 .../src/lib/components/users/TeamCard.svelte  | 126 -----
 .../components/users/TeamFormDialog.svelte    | 158 ------
 frontend/src/lib/components/users/index.js    |   2 -
 frontend/src/lib/constants/colors.js          | 116 -----
 frontend/src/lib/constants/lead-choices.js    | 131 -----
 frontend/src/lib/hooks/index.js               |   3 -
 frontend/src/lib/hooks/is-mobile.svelte.js    |  13 -
 .../src/lib/hooks/use-drawer-state.svelte.js  | 194 -------
 .../src/lib/hooks/use-list-filters.svelte.js  | 215 --------
 frontend/src/lib/stores/org.js                |  27 -
 frontend/src/lib/utils/drag-drop.js           | 110 ----
 frontend/src/lib/utils/formatting.js          | 148 ------
 frontend/src/lib/utils/phone.js               | 165 ------
 frontend/src/lib/utils/table-helpers.js       | 343 -------------
 frontend/src/lib/utils/ui-helpers.js          | 131 -----
 .../test/unit/api_service_refresh_test.dart   |   2 +-
 166 files changed, 27 insertions(+), 8743 deletions(-)
 delete mode 100644 frontend/src/lib/components/dashboard/ActivityFeed.svelte
 delete mode 100644 frontend/src/lib/components/dashboard/FocusBar.svelte
 delete mode 100644 frontend/src/lib/components/dashboard/HotLeadsPanel.svelte
 delete mode 100644 frontend/src/lib/components/dashboard/KPICard.svelte
 delete mode 100644 frontend/src/lib/components/dashboard/TaskList.svelte
 delete mode 100644 frontend/src/lib/components/dashboard/index.js
 delete mode 100644 frontend/src/lib/components/icons/GithubIcon.svelte
 delete mode 100644 frontend/src/lib/components/icons/LinkedinIcon.svelte
 delete mode 100644 frontend/src/lib/components/icons/index.js
 delete mode 100644 frontend/src/lib/components/layout/FilterPill.svelte
 delete mode 100644 frontend/src/lib/components/layout/FilterPopover.svelte
 delete mode 100644 frontend/src/lib/components/layout/FilterStrip.svelte
 delete mode 100644 frontend/src/lib/components/layout/PageHeader.svelte
 delete mode 100644 frontend/src/lib/components/layout/ViewTabs.svelte
 delete mode 100644 frontend/src/lib/components/layout/index.js
 delete mode 100644 frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
 delete mode 100644 frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
 delete mode 100644 frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
 delete mode 100644 frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
 delete mode 100644 frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
 delete mode 100644 frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
 delete mode 100644 frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
 delete mode 100644 frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
 delete mode 100644 frontend/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
 delete mode 100644 frontend/src/lib/components/ui/alert-dialog/index.js
 delete mode 100644 frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
 delete mode 100644 frontend/src/lib/components/ui/avatar/avatar-gradients.js
 delete mode 100644 frontend/src/lib/components/ui/avatar/avatar-image.svelte
 delete mode 100644 frontend/src/lib/components/ui/avatar/avatar.svelte
 delete mode 100644 frontend/src/lib/components/ui/avatar/index.js
 delete mode 100644 frontend/src/lib/components/ui/badge/badge.svelte
 delete mode 100644 frontend/src/lib/components/ui/badge/index.js
 delete mode 100644 frontend/src/lib/components/ui/bulk-action-bar/BulkActionBar.svelte
 delete mode 100644 frontend/src/lib/components/ui/bulk-action-bar/index.js
 delete mode 100644 frontend/src/lib/components/ui/calendar/Calendar.svelte
 delete mode 100644 frontend/src/lib/components/ui/calendar/index.js
 delete mode 100644 frontend/src/lib/components/ui/card/card-content.svelte
 delete mode 100644 frontend/src/lib/components/ui/card/card-description.svelte
 delete mode 100644 frontend/src/lib/components/ui/card/card-header.svelte
 delete mode 100644 frontend/src/lib/components/ui/card/card-title.svelte
 delete mode 100644 frontend/src/lib/components/ui/card/card.svelte
 delete mode 100644 frontend/src/lib/components/ui/card/index.js
 delete mode 100644 frontend/src/lib/components/ui/crm-drawer/CrmDrawer.svelte
 delete mode 100644 frontend/src/lib/components/ui/crm-drawer/CrmPropertyRow.svelte
 delete mode 100644 frontend/src/lib/components/ui/crm-drawer/index.js
 delete mode 100644 frontend/src/lib/components/ui/crm-table/CrmTable.svelte
 delete mode 100644 frontend/src/lib/components/ui/crm-table/index.js
 delete mode 100644 frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
 delete mode 100644 frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
 delete mode 100644 frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
 delete mode 100644 frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
 delete mode 100644 frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
 delete mode 100644 frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
 delete mode 100644 frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
 delete mode 100644 frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
 delete mode 100644 frontend/src/lib/components/ui/dropdown-menu/index.js
 delete mode 100644 frontend/src/lib/components/ui/editable-field/EditableMultiSelect.svelte
 delete mode 100644 frontend/src/lib/components/ui/editable-field/index.js
 delete mode 100644 frontend/src/lib/components/ui/filter/DateRangeFilter.svelte
 delete mode 100644 frontend/src/lib/components/ui/filter/FilterBar.svelte
 delete mode 100644 frontend/src/lib/components/ui/filter/SearchInput.svelte
 delete mode 100644 frontend/src/lib/components/ui/filter/SelectFilter.svelte
 delete mode 100644 frontend/src/lib/components/ui/filter/TagFilter.svelte
 delete mode 100644 frontend/src/lib/components/ui/filter/index.js
 delete mode 100644 frontend/src/lib/components/ui/form-shell/FormShell.svelte
 delete mode 100644 frontend/src/lib/components/ui/form-shell/index.js
 delete mode 100644 frontend/src/lib/components/ui/input/index.js
 delete mode 100644 frontend/src/lib/components/ui/input/input.svelte
 delete mode 100644 frontend/src/lib/components/ui/label/index.js
 delete mode 100644 frontend/src/lib/components/ui/label/label.svelte
 delete mode 100644 frontend/src/lib/components/ui/pagination/Pagination.svelte
 delete mode 100644 frontend/src/lib/components/ui/pagination/index.js
 delete mode 100644 frontend/src/lib/components/ui/popover/index.js
 delete mode 100644 frontend/src/lib/components/ui/popover/popover-content.svelte
 delete mode 100644 frontend/src/lib/components/ui/popover/popover-trigger.svelte
 delete mode 100644 frontend/src/lib/components/ui/progress/index.js
 delete mode 100644 frontend/src/lib/components/ui/progress/progress.svelte
 delete mode 100644 frontend/src/lib/components/ui/section-card/SectionCard.svelte
 delete mode 100644 frontend/src/lib/components/ui/section-card/index.js
 delete mode 100644 frontend/src/lib/components/ui/select/index.js
 delete mode 100644 frontend/src/lib/components/ui/select/select-content.svelte
 delete mode 100644 frontend/src/lib/components/ui/select/select-group-heading.svelte
 delete mode 100644 frontend/src/lib/components/ui/select/select-group.svelte
 delete mode 100644 frontend/src/lib/components/ui/select/select-item.svelte
 delete mode 100644 frontend/src/lib/components/ui/select/select-label.svelte
 delete mode 100644 frontend/src/lib/components/ui/select/select-portal.svelte
 delete mode 100644 frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
 delete mode 100644 frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
 delete mode 100644 frontend/src/lib/components/ui/select/select-separator.svelte
 delete mode 100644 frontend/src/lib/components/ui/select/select-trigger.svelte
 delete mode 100644 frontend/src/lib/components/ui/select/select.svelte
 delete mode 100644 frontend/src/lib/components/ui/separator/index.js
 delete mode 100644 frontend/src/lib/components/ui/separator/separator.svelte
 delete mode 100644 frontend/src/lib/components/ui/sheet/index.js
 delete mode 100644 frontend/src/lib/components/ui/sheet/sheet-content.svelte
 delete mode 100644 frontend/src/lib/components/ui/sheet/sheet-description.svelte
 delete mode 100644 frontend/src/lib/components/ui/sheet/sheet-header.svelte
 delete mode 100644 frontend/src/lib/components/ui/sheet/sheet-overlay.svelte
 delete mode 100644 frontend/src/lib/components/ui/sheet/sheet-title.svelte
 delete mode 100644 frontend/src/lib/components/ui/side-panel/SidePanel.svelte
 delete mode 100644 frontend/src/lib/components/ui/side-panel/SidePanelSection.svelte
 delete mode 100644 frontend/src/lib/components/ui/side-panel/index.js
 delete mode 100644 frontend/src/lib/components/ui/skeleton/index.js
 delete mode 100644 frontend/src/lib/components/ui/skeleton/skeleton.svelte
 delete mode 100644 frontend/src/lib/components/ui/stage-stepper/StageStepper.svelte
 delete mode 100644 frontend/src/lib/components/ui/stage-stepper/index.js
 delete mode 100644 frontend/src/lib/components/ui/switch/index.js
 delete mode 100644 frontend/src/lib/components/ui/switch/switch.svelte
 delete mode 100644 frontend/src/lib/components/ui/table/index.js
 delete mode 100644 frontend/src/lib/components/ui/table/table-body.svelte
 delete mode 100644 frontend/src/lib/components/ui/table/table-cell.svelte
 delete mode 100644 frontend/src/lib/components/ui/table/table-head.svelte
 delete mode 100644 frontend/src/lib/components/ui/table/table-header.svelte
 delete mode 100644 frontend/src/lib/components/ui/table/table-row.svelte
 delete mode 100644 frontend/src/lib/components/ui/table/table.svelte
 delete mode 100644 frontend/src/lib/components/ui/tabs/index.js
 delete mode 100644 frontend/src/lib/components/ui/tabs/tabs-content.svelte
 delete mode 100644 frontend/src/lib/components/ui/tabs/tabs-list.svelte
 delete mode 100644 frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
 delete mode 100644 frontend/src/lib/components/ui/tabs/tabs.svelte
 delete mode 100644 frontend/src/lib/components/ui/textarea/index.js
 delete mode 100644 frontend/src/lib/components/ui/textarea/textarea.svelte
 delete mode 100644 frontend/src/lib/components/ui/timeline/Timeline.svelte
 delete mode 100644 frontend/src/lib/components/ui/timeline/TimelineItem.svelte
 delete mode 100644 frontend/src/lib/components/ui/timeline/index.js
 delete mode 100644 frontend/src/lib/components/ui/view-toggle/ViewToggle.svelte
 delete mode 100644 frontend/src/lib/components/ui/view-toggle/index.js
 delete mode 100644 frontend/src/lib/components/users/TeamCard.svelte
 delete mode 100644 frontend/src/lib/components/users/TeamFormDialog.svelte
 delete mode 100644 frontend/src/lib/components/users/index.js
 delete mode 100644 frontend/src/lib/constants/colors.js
 delete mode 100644 frontend/src/lib/constants/lead-choices.js
 delete mode 100644 frontend/src/lib/hooks/index.js
 delete mode 100644 frontend/src/lib/hooks/is-mobile.svelte.js
 delete mode 100644 frontend/src/lib/hooks/use-drawer-state.svelte.js
 delete mode 100644 frontend/src/lib/hooks/use-list-filters.svelte.js
 delete mode 100644 frontend/src/lib/stores/org.js
 delete mode 100644 frontend/src/lib/utils/drag-drop.js
 delete mode 100644 frontend/src/lib/utils/formatting.js
 delete mode 100644 frontend/src/lib/utils/phone.js
 delete mode 100644 frontend/src/lib/utils/table-helpers.js
 delete mode 100644 frontend/src/lib/utils/ui-helpers.js

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 5372ac01..ebb49c81 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -64,8 +64,8 @@ jobs:
         working-directory: backend
         run: uv sync --frozen
 
-      # The suite runs with --no-migrations for speed, so nothing else would
-      # catch a model change that is missing its migration.
+      # Running the migrations cannot notice a model change that has no
+      # migration yet, so this checks for one explicitly.
       - name: Check for missing migrations
         working-directory: backend
         env:
diff --git a/CLAUDE.md b/CLAUDE.md
index 65282325..a2f54861 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -42,7 +42,7 @@ Frontend:
 - Formatting: `#lib/v2/format.js` (`money(n, currency)`, which defaults to USD, so pass `data.org.currency`; `shortDate`, `longDate`, `relativeTime`). The org's "today": `todayIn(tz)` from `#lib/v2/dates.js` with `data.org.timezone`.
 - Admin: `isOrgAdmin` from `#lib/admin.js`. Labels and tones: `#lib/v2/enums.js`. Classes: `cn` from `#lib/utils.js`. DRF errors to a sentence: `readableError` from `#lib/server/v2/form-errors.js`.
 - Lists and filters: `#lib/v2/filters.js`, `#lib/server/v2/filter-params.js`, `#lib/server/v2/list-queries.js`, `#lib/server/v2/saved-views.js`. Custom fields: `#lib/server/v2/custom-fields.js`. @mentions: `MentionTextarea` and `MentionBody` in `#lib/v2/components/`, fed by `mentionPeople()` from `#lib/v2/mentions.js`.
-- Components: `#lib/v2/components/<Name>.svelte` (`PageHeader`, `Pill`, `EmptyState`, `StatCard`, `ConfirmAction`, `FilterBar`, ...). Many shadcn components in `components/ui/` and everything in `components/layout`, `components/dashboard` and `components/users` have no importers. Find a live caller before building on any of them.
+- Components: `#lib/v2/components/<Name>.svelte` (`PageHeader`, `Pill`, `EmptyState`, `StatCard`, `ConfirmAction`, `FilterBar`, ...).
 
 ## Commands
 
diff --git a/backend/cases/tests/test_csat.py b/backend/cases/tests/test_csat.py
index ef3290a7..beea6c99 100644
--- a/backend/cases/tests/test_csat.py
+++ b/backend/cases/tests/test_csat.py
@@ -507,8 +507,7 @@ class TestPublicCsatResolvesOrgFirst:
 def test_public_survey_answers_under_enforced_rls(client):
     """The anonymous survey GET and POST work under a role that enforces RLS.
 
-    Runs only against PostgreSQL as a non-superuser (``RLS_ENFORCE=1
-    --ds=crm.test_settings_postgres``): a superuser bypasses RLS, and the first
+    Runs only against PostgreSQL as a non-superuser (``--ds=crm.test_settings_postgres``): a superuser bypasses RLS, and the first
     assertion below says so rather than passing vacuously.
     """
     from django.db import connection
diff --git a/backend/cases/tests/test_inbound_webhook_reachability.py b/backend/cases/tests/test_inbound_webhook_reachability.py
index e2e1af6b..44f72795 100644
--- a/backend/cases/tests/test_inbound_webhook_reachability.py
+++ b/backend/cases/tests/test_inbound_webhook_reachability.py
@@ -374,7 +374,7 @@ class TestBackfill:
 
 
 # ---------------------------------------------------------------------------
-# Under a role RLS binds (RLS_ENFORCE run, --ds=crm.test_settings_postgres)
+# Under a role RLS binds (--ds=crm.test_settings_postgres)
 # ---------------------------------------------------------------------------
 
 
diff --git a/backend/common/base.py b/backend/common/base.py
index a35c5d38..3e9871a9 100644
--- a/backend/common/base.py
+++ b/backend/common/base.py
@@ -118,33 +118,6 @@ class BaseModel(AuditModel):
         return str(self.id)
 
 
-class OrgScopedQuerySet(models.QuerySet):
-    """QuerySet with automatic organization filtering support"""
-
-    def for_org(self, org):
-        """Filter queryset by organization"""
-        return self.filter(org=org)
-
-    def for_request(self, request):
-        """Filter queryset by organization from request"""
-        if hasattr(request, "profile") and request.profile:
-            return self.filter(org=request.profile.org)
-        return self.none()
-
-
-class OrgScopedManager(models.Manager):
-    """Manager that uses OrgScopedQuerySet"""
-
-    def get_queryset(self):
-        return OrgScopedQuerySet(self.model, using=self._db)
-
-    def for_org(self, org):
-        return self.get_queryset().for_org(org)
-
-    def for_request(self, request):
-        return self.get_queryset().for_request(request)
-
-
 class BaseOrgModel(BaseModel):
     """
     Base model for all organization-scoped entities.
@@ -153,7 +126,6 @@ class BaseOrgModel(BaseModel):
     This ensures:
     - Required org field (no null values)
     - Per-org indexes for performance
-    - OrgScopedManager for easier filtering
 
     RLS Protection:
     ---------------
@@ -174,8 +146,6 @@ class BaseOrgModel(BaseModel):
         help_text="Organization this record belongs to",
     )
 
-    objects = OrgScopedManager()
-
     class Meta:
         abstract = True
         indexes = [
diff --git a/backend/common/middleware/get_company.py b/backend/common/middleware/get_company.py
index 0c170e6b..d502c989 100644
--- a/backend/common/middleware/get_company.py
+++ b/backend/common/middleware/get_company.py
@@ -46,7 +46,7 @@ class GetProfileAndOrg:
         # another's without any view knowing about it.
         #
         # The deactivate is in a `finally` for the same reason the RLS reset is
-        # (see `rls_context.SetOrgContext.__call__`): the active timezone is a
+        # (see `rls_context.RequireOrgContext.__call__`): the active timezone is a
         # thread-local, worker threads are reused, and a request that raised
         # after activating would hand the next tenant its own day boundary.
         activate_org_timezone(getattr(request, "org", None))
diff --git a/backend/common/middleware/rls_context.py b/backend/common/middleware/rls_context.py
index 5f25a262..36b12eaf 100644
--- a/backend/common/middleware/rls_context.py
+++ b/backend/common/middleware/rls_context.py
@@ -14,7 +14,7 @@ Usage in settings.py:
     MIDDLEWARE = [
         ...
         'common.middleware.get_company.GetProfileAndOrg',
-        'common.middleware.rls_context.SetOrgContext',  # After GetProfileAndOrg
+        'common.middleware.rls_context.RequireOrgContext',  # After GetProfileAndOrg
         ...
     ]
 """
@@ -27,78 +27,10 @@ from django.http import JsonResponse
 logger = logging.getLogger(__name__)
 
 
-class SetOrgContext:
-    """
-    Middleware to set PostgreSQL session variable for Row-Level Security.
-
-    This sets `app.current_org` to the user's organization ID, which is
-    used by RLS policies to automatically filter data at the database level.
-
-    Security: This provides defense-in-depth. Even if application code
-    forgets to filter by org, the database will enforce isolation.
-    """
-
-    def __init__(self, get_response):
-        self.get_response = get_response
-
-    def __call__(self, request):
-        # Set org context before processing request
-        self._set_org_context(request)
-
-        # The reset MUST run even when the view raises. `app.current_org` is
-        # set at SESSION scope, so it outlives the statement and the
-        # transaction; it is cleared only because we clear it. Without the
-        # finally, an exception anywhere downstream hands the connection back
-        # still carrying this tenant's org id, and the next request to reuse
-        # that connection inherits it. That is a cross-tenant read.
-        try:
-            return self.get_response(request)
-        finally:
-            self._reset_org_context()
-
-    def _set_org_context(self, request):
-        """
-        Set the PostgreSQL session variable for RLS.
-
-        Args:
-            request: Django request object with profile attached
-        """
-        if not hasattr(request, "org") or request.org is None:
-            return
-
-        org_id = str(request.org.id)
-
-        try:
-            with connection.cursor() as cursor:
-                # Set the session variable (is_local=false for session scope)
-                # Required because Django uses autocommit mode by default
-                cursor.execute(
-                    "SELECT set_config('app.current_org', %s, false)", [org_id]
-                )
-                logger.debug("Set RLS context: app.current_org = %s", org_id)
-
-        except Exception as e:
-            # RLS might not be configured - log but don't fail
-            logger.debug("Could not set RLS context: %s", e)
-
-    def _reset_org_context(self):
-        """
-        Reset the PostgreSQL session variable after request.
-        Critical to prevent context leakage between requests on pooled connections.
-        """
-        try:
-            with connection.cursor() as cursor:
-                cursor.execute("SELECT set_config('app.current_org', '', false)")
-        except Exception:
-            pass
-
-
 class RequireOrgContext:
     """
-    Stricter middleware that fails if org context is not set.
-
-    Use this instead of SetOrgContext when you want to ensure
-    all requests have proper org context (after RLS is fully enabled).
+    Sets `app.current_org` for the request and refuses a request with no org
+    context, except on the exempt paths below.
 
     Usage in settings.py:
         MIDDLEWARE = [
@@ -263,7 +195,7 @@ class RequireOrgContext:
         # Set org context
         self._set_org_context(request)
 
-        # See SetOrgContext.__call__: the reset is in a finally because
+        # The reset is in a finally because
         # `app.current_org` is SESSION-scoped and survives an exception. On a
         # pooled or otherwise reused connection, skipping it leaks this
         # tenant's context to whoever borrows the connection next.
diff --git a/backend/common/tests/test_models.py b/backend/common/tests/test_models.py
index 6c694a75..a5fbf1b3 100644
--- a/backend/common/tests/test_models.py
+++ b/backend/common/tests/test_models.py
@@ -8,7 +8,6 @@ Covers:
 - SessionToken.revoke() and cleanup_expired()
 - Activity.created_on_arrow property
 - AssignableMixin properties (get_team_users, etc.)
-- OrgScopedQuerySet and OrgScopedManager methods
 
 Run with: pytest common/tests/test_models.py -v
 """
@@ -265,76 +264,3 @@ class TestAssignableMixin:
         assert account.get_team_users.count() == 0
         assert account.get_team_and_assigned_users.count() == 0
         assert account.get_assigned_users_not_in_teams.count() == 0
-
-
-# ---------------------------------------------------------------------------
-# OrgScopedQuerySet and OrgScopedManager
-# ---------------------------------------------------------------------------
-
-
-@pytest.mark.django_db
-class TestOrgScopedManager:
-    """Test OrgScopedQuerySet.for_org() and for_request() via a model that uses them."""
-
-    def test_org_scoped_classes_instantiate(self, org_a, org_b):
-        """OrgScopedQuerySet and OrgScopedManager can be instantiated."""
-        from common.base import OrgScopedManager, OrgScopedQuerySet
-
-        _qs = OrgScopedQuerySet(model=Activity)
-        manager = OrgScopedManager()
-        assert manager is not None
-
-    def test_for_request_with_profile(self, org_a, admin_profile):
-        """for_request should filter by org from request.profile."""
-        from common.base import OrgScopedQuerySet
-
-        # Create activities in different orgs
-        Activity.objects.create(
-            user=admin_profile,
-            action="CREATE",
-            entity_type="Account",
-            entity_id=uuid.uuid4(),
-            org=org_a,
-        )
-
-        request = MagicMock()
-        request.profile = admin_profile
-
-        # Test OrgScopedQuerySet.for_request directly
-        qs = OrgScopedQuerySet(model=Activity, using="default")
-        result = qs.for_request(request)
-        assert result.count() == 1
-
-    def test_for_request_without_profile(self):
-        """for_request without profile should return empty queryset."""
-        from common.base import OrgScopedQuerySet
-
-        request = MagicMock(spec=[])  # no profile attribute
-
-        qs = OrgScopedQuerySet(model=Activity, using="default")
-        result = qs.for_request(request)
-        assert result.count() == 0
-
-    def test_for_org(self, org_a, org_b, admin_profile):
-        """for_org should filter activities by specified org."""
-        from common.base import OrgScopedQuerySet
-
-        Activity.objects.create(
-            user=admin_profile,
-            action="CREATE",
-            entity_type="Account",
-            entity_id=uuid.uuid4(),
-            org=org_a,
-        )
-        Activity.objects.create(
-            user=admin_profile,
-            action="UPDATE",
-            entity_type="Lead",
-            entity_id=uuid.uuid4(),
-            org=org_b,
-        )
-
-        qs = OrgScopedQuerySet(model=Activity, using="default")
-        result = qs.for_org(org_a)
-        assert result.count() == 1
-        assert result.first().org == org_a
diff --git a/backend/common/tests/test_multitenancy.py b/backend/common/tests/test_multitenancy.py
index d6b2a39c..39c02f99 100644
--- a/backend/common/tests/test_multitenancy.py
+++ b/backend/common/tests/test_multitenancy.py
@@ -314,36 +314,6 @@ class TestBaseOrgModel(TestCase):
         self.assertIsNotNone(team.id)
 
 
-class TestOrgScopedQuerySet(MultiTenancyBaseTestCase):
-    """Test OrgScopedQuerySet helper methods"""
-
-    def setUp(self):
-        super().setUp()
-
-        # Create teams in each org
-        self.team_a = Teams.objects.create(
-            name="Team A", description="In Org A", org=self.org_a
-        )
-        self.team_b = Teams.objects.create(
-            name="Team B", description="In Org B", org=self.org_b
-        )
-
-    def test_for_org_filters_correctly(self):
-        """for_org() should filter by organization"""
-        teams = Teams.objects.filter(org=self.org_a)
-        self.assertEqual(teams.count(), 1)
-        self.assertEqual(teams.first().name, "Team A")
-
-    def test_for_request_uses_profile_org(self):
-        """for_request() should use org from request.profile"""
-        # Create mock request
-        request = MagicMock()
-        request.profile = self.profile_a
-
-        # This would be used with OrgScopedManager
-        # Teams.objects.for_request(request)
-
-
 class TestNullOrgPrevention(MultiTenancyBaseTestCase):
     """Test that models properly handle org field"""
 
diff --git a/backend/common/tests/test_rls_context_reset.py b/backend/common/tests/test_rls_context_reset.py
index 019e5e86..eb6eb92f 100644
--- a/backend/common/tests/test_rls_context_reset.py
+++ b/backend/common/tests/test_rls_context_reset.py
@@ -18,7 +18,7 @@ a real PostgreSQL with a non-superuser role.
 
 import pytest
 
-from common.middleware.rls_context import RequireOrgContext, SetOrgContext
+from common.middleware.rls_context import RequireOrgContext
 
 
 class _Boom(Exception):
@@ -44,16 +44,14 @@ def _instrument(middleware_cls, get_response):
     return mw, calls
 
 
-@pytest.mark.parametrize("middleware_cls", [SetOrgContext, RequireOrgContext])
-def test_reset_runs_on_the_happy_path(middleware_cls):
-    mw, calls = _instrument(middleware_cls, lambda request: "response")
+def test_reset_runs_on_the_happy_path():
+    mw, calls = _instrument(RequireOrgContext, lambda request: "response")
 
     assert mw(_FakeRequest()) == "response"
     assert calls == ["set", "reset"]
 
 
-@pytest.mark.parametrize("middleware_cls", [SetOrgContext, RequireOrgContext])
-def test_reset_runs_when_the_view_raises(middleware_cls):
+def test_reset_runs_when_the_view_raises():
     """The regression this file exists for.
 
     Without the try/finally the middleware returned early on the exception and
@@ -63,7 +61,7 @@ def test_reset_runs_when_the_view_raises(middleware_cls):
     def boom(request):
         raise _Boom("view exploded")
 
-    mw, calls = _instrument(middleware_cls, boom)
+    mw, calls = _instrument(RequireOrgContext, boom)
 
     with pytest.raises(_Boom):
         mw(_FakeRequest())
@@ -74,14 +72,13 @@ def test_reset_runs_when_the_view_raises(middleware_cls):
     )
 
 
-@pytest.mark.parametrize("middleware_cls", [SetOrgContext, RequireOrgContext])
-def test_the_exception_still_propagates(middleware_cls):
+def test_the_exception_still_propagates():
     """The finally must not swallow the error into a silent 200."""
 
     def boom(request):
         raise _Boom("view exploded")
 
-    mw, _ = _instrument(middleware_cls, boom)
+    mw, _ = _instrument(RequireOrgContext, boom)
 
     with pytest.raises(_Boom, match="view exploded"):
         mw(_FakeRequest())
diff --git a/backend/common/utils.py b/backend/common/utils.py
index 96f7b22c..a16ba493 100644
--- a/backend/common/utils.py
+++ b/backend/common/utils.py
@@ -1,4 +1,3 @@
-import pytz
 from django.utils.translation import gettext_lazy as _
 
 INDCHOICES = (
@@ -423,14 +422,6 @@ CURRENCY_SYMBOLS = {
 }
 
 
-def convert_to_custom_timezone(custom_date, custom_timezone, to_utc=False):
-    user_time_zone = pytz.timezone(custom_timezone)
-    if to_utc:
-        custom_date = user_time_zone.localize(custom_date.replace(tzinfo=None))
-        user_time_zone = pytz.UTC
-    return custom_date.astimezone(user_time_zone)
-
-
 # =============================================================================
 # CRM Entity Utilities
 # =============================================================================
diff --git a/backend/invoices/tests/test_portal_rls.py b/backend/invoices/tests/test_portal_rls.py
index bf6b210b..fd5d6993 100644
--- a/backend/invoices/tests/test_portal_rls.py
+++ b/backend/invoices/tests/test_portal_rls.py
@@ -1,7 +1,6 @@
 """RLS-enforced proof for the portal token → org resolution (Option 1).
 
-These run only under a non-superuser Postgres role (``RLS_ENFORCE=1
---ds=crm.test_settings_postgres``), because the whole point is the behaviour
+These run only under a non-superuser Postgres role (``--ds=crm.test_settings_postgres``), because the whole point is the behaviour
 that a superuser dev DB hides: with an empty ``app.current_org`` the isolation
 policy makes the estimate row invisible, so the anonymous portal view can only
 work if it resolves the org from the unscoped lookup first.
diff --git a/backend/pyproject.toml b/backend/pyproject.toml
index dd29eb86..d075d6bd 100644
--- a/backend/pyproject.toml
+++ b/backend/pyproject.toml
@@ -81,7 +81,6 @@ dependencies = [
     "django-crum>=0.7.9",
     "disposable-email-domains>=0.0.280",
     "redis>=8.1.0",
-    "pytz>=2026.5",
     "requests>=2.34.2",
     "faker>=40.43.0",
     "python-dateutil>=2.9.0.post0",
diff --git a/backend/pytest.ini b/backend/pytest.ini
index d4fe498c..a493d3f7 100644
--- a/backend/pytest.ini
+++ b/backend/pytest.ini
@@ -11,5 +11,4 @@ addopts =
     --cov-report=html:htmlcov
     --cov-report=xml:coverage.xml
 markers =
-    slow: marks tests as slow
     postgres_only: marks tests that require PostgreSQL
diff --git a/backend/uv.lock b/backend/uv.lock
index 60a3f5b6..f28d7d65 100644
--- a/backend/uv.lock
+++ b/backend/uv.lock
@@ -728,7 +728,6 @@ dependencies = [
     { name = "psycopg", extra = ["binary", "pool"] },
     { name = "python-dateutil" },
     { name = "python-dotenv" },
-    { name = "pytz" },
     { name = "redis" },
     { name = "requests" },
     { name = "sentry-sdk" },
@@ -772,7 +771,6 @@ requires-dist = [
     { name = "psycopg", extras = ["binary", "pool"], specifier = ">=3.3.6" },
     { name = "python-dateutil", specifier = ">=2.9.0.post0" },
     { name = "python-dotenv", specifier = ">=1.2.4" },
-    { name = "pytz", specifier = ">=2026.5" },
     { name = "redis", specifier = ">=8.1.0" },
     { name = "requests", specifier = ">=2.34.2" },
     { name = "sentry-sdk", specifier = ">=2.72.0" },
@@ -1782,15 +1780,6 @@ wheels = [
     { url = "https://files.pythonhosted.org/packages/60/d1/38f3a3405989a89ac18390803e70c6ad7c7760da4f9b83cbeca0c44a0c72/python_dotenv-1.2.4-py3-none-any.whl", hash = "sha256:42269a8a5b3fd54ffa6f3d84b18abed50064717576b4ecf03dc4a55d8aa04fdc", size = 23266, upload-time = "2026-10-01T05:36:08.633Z" },
 ]
 
-[[package]]
-name = "pytz"
-version = "2026.5"
-source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/14/21/d83d6ef28c4c912c4bb4d1dcf591f7b8c6bde87b9c66f9f454677314e16d/pytz-2026.5.tar.gz", hash = "sha256:fa23724b9c486543b9ff54a327ee7569ac83ade54bb9afd0fc18676620401c86", size = 318572, upload-time = "2026-10-04T02:37:58.719Z" }
-wheels = [
-    { url = "https://files.pythonhosted.org/packages/4f/ef/c66110d46fb800dda0bf33164182dfadabe26a90e4476844d502a23dca8e/pytz-2026.5-py2.py3-none-any.whl", hash = "sha256:e658af3757f9e26a9d25dd2aff38335acd92bc9104f890a894b2c1ba28311b03", size = 506342, upload-time = "2026-10-04T02:37:56.814Z" },
-]
-
 [[package]]
 name = "pyyaml"
 version = "6.0.3"
diff --git a/docs/architecture/multi-tenancy-and-rls.md b/docs/architecture/multi-tenancy-and-rls.md
index f1f4cab5..fdf4c58b 100644
--- a/docs/architecture/multi-tenancy-and-rls.md
+++ b/docs/architecture/multi-tenancy-and-rls.md
@@ -26,8 +26,7 @@ Neither layer is optional, and neither is a superset of the other in practice: s
 ## BaseOrgModel
 
 `BaseOrgModel` (`backend/common/base.py`) is a `BaseModel` subclass that adds an `org` foreign key
-to `common.Org`, an `OrgScopedManager` (giving you `Model.objects.for_org(org)` and
-`Model.objects.for_request(request)` helpers), and a `["org", "-created_at"]` index. Its own
+to `common.Org` and a `["org", "-created_at"]` index. Its own
 docstring states the intent plainly: "All tenant-owned models should inherit from this instead of
 `BaseModel`."
 
@@ -58,9 +57,7 @@ class CaseWatcher(BaseModel):
 checkout; treat the reasoning captured in the code comments themselves as the source of truth.)
 
 The practical takeaway: inheriting `BaseOrgModel` is a correct and recommended way to add an `org`
-field to a new model. Doing so also gets you the `OrgScopedManager` helpers
-(`Model.objects.for_org(org)`, `Model.objects.for_request(request)`) for free, which is itself a
-reason to prefer it, and you should default to it unless you have a specific reason to match this
+field to a new model, and you should default to it unless you have a specific reason to match this
 codebase's more common hand-rolled-FK convention instead (for consistency with a sibling model in
 the same app, for instance). But inheriting it is not what makes RLS protection work,
 and it is not sufficient on its own; `PersonalAccessToken` inherits `BaseOrgModel` and is
diff --git a/docs/architecture/overview.md b/docs/architecture/overview.md
index 58f2dd74..b58fef8e 100644
--- a/docs/architecture/overview.md
+++ b/docs/architecture/overview.md
@@ -66,11 +66,6 @@ never runs before both steps have completed; `RequireOrgContext` sits after `Get
 the list above and returns a response itself (the 403) rather than calling `get_response` when the
 context is missing, so a request that fails tenancy resolution never reaches URL dispatch.
 
-This file also defines an older class, `SetOrgContext`, whose own docstring describes it as the
-one wired into `MIDDLEWARE`. That docstring is stale. `SetOrgContext` sets the session variable
-but never rejects a context-less request; `RequireOrgContext` is what `settings.py` actually
-lists, and it is the one enforced.
-
 One layer above middleware, DRF's own authentication runs at view dispatch time
 (`DEFAULT_AUTHENTICATION_CLASSES` in `REST_FRAMEWORK`: `PATAuthentication`, then simplejwt's
 `JWTAuthentication`, then `APIKeyAuthentication`) to populate `request.user` for `IsAuthenticated`
diff --git a/docs/contributing/adding-an-org-scoped-model.md b/docs/contributing/adding-an-org-scoped-model.md
index fc7b471f..c6c39988 100644
--- a/docs/contributing/adding-an-org-scoped-model.md
+++ b/docs/contributing/adding-an-org-scoped-model.md
@@ -9,7 +9,7 @@ these steps exists; this page is the checklist for *doing* it.
 ## The checklist
 
 1. **Inherit `BaseOrgModel`** (`common.base`) so the model gets an `org` foreign key, the UUID
-   primary key, audit fields, and the `OrgScopedManager` helpers for free.
+   primary key and audit fields.
 2. **Add the table's `db_table` name to `ORG_SCOPED_TABLES`** in `backend/common/rls/__init__.py`.
 3. **Write a migration** that calls `get_enable_policy_sql('your_table')` inside a `RunPython`
    operation, with a `dependencies` entry that guarantees the table already exists when it runs.
diff --git a/docs/contributing/testing.md b/docs/contributing/testing.md
index c7bbbdbb..b94d82c7 100644
--- a/docs/contributing/testing.md
+++ b/docs/contributing/testing.md
@@ -37,22 +37,20 @@ uv run pytest --no-cov -x
 rather than being silently ignored. Every custom marker you use has to be declared in `pytest.ini`'s
 `markers` list. It doesn't touch markers a plugin registers itself, like `@pytest.mark.django_db`
 (from `pytest-django`). Those work without appearing in `pytest.ini` at all, which is why every
-example on this page uses `django_db` freely alongside the two markers that actually are declared.
+example on this page uses `django_db` freely alongside the one marker that is declared.
 
 ## Markers
 
-`pytest.ini` declares two custom markers:
+`pytest.ini` declares one custom marker:
 
 ```ini
 markers =
-    slow: marks tests as slow
     postgres_only: marks tests that require PostgreSQL
 ```
 
 `postgres_only` marks the tests that need a real PostgreSQL: RLS policy state, isolation behaviour
 under a role that RLS binds, and session-scoped connection state. List them with
-`uv run pytest -m postgres_only --collect-only -q`. `slow` is declared and currently applied to
-nothing.
+`uv run pytest -m postgres_only --collect-only -q`.
 
 ## The SQLite caveat
 
diff --git a/docs/self-hosting/postgresql-and-rls.md b/docs/self-hosting/postgresql-and-rls.md
index 13594bb7..91065620 100644
--- a/docs/self-hosting/postgresql-and-rls.md
+++ b/docs/self-hosting/postgresql-and-rls.md
@@ -155,11 +155,8 @@ by `RequireOrgContext` (`backend/common/middleware/rls_context.py`, wired into `
 `backend/crm/settings.py`) from `request.org`, which is itself derived earlier in the same
 middleware chain by `GetProfileAndOrg` (`backend/common/middleware/get_company.py`) from the
 `org_id` claim inside the caller's signed JWT, validated against an active `Profile` for that
-user in that org before it's trusted. (The file also defines a second, older middleware class,
-`SetOrgContext`, referenced in that file's own module docstring, but `settings.py` wires
-`RequireOrgContext` instead, which additionally rejects unauthenticated/context-less requests
-with a 403 rather than silently proceeding without a context; `RequireOrgContext` is the class
-actually enforced.) Every policy uses `NULLIF(current_setting('app.current_org', true), '')`,
+user in that org before it's trusted. A request that arrives with no org context is refused with a
+403 rather than run without one. Every policy uses `NULLIF(current_setting('app.current_org', true), '')`,
 when no context has been set, `current_setting` returns an empty string, `NULLIF` turns that into
 SQL `NULL`, and `org_id::text = NULL` is never true. **No context means zero rows, by design**.
 A fail-safe default, not an edge case to special-case around.
diff --git a/frontend/package.json b/frontend/package.json
index af9be1e8..b5daa625 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,7 +18,6 @@
   "devDependencies": {
     "@eslint/compat": "^2.1.1",
     "@eslint/js": "^10.0.1",
-    "@internationalized/date": "^3.12.4",
     "@lucide/svelte": "^1.57.0",
     "@sveltejs/adapter-node": "^6.0.0",
     "@sveltejs/kit": "^3.0.1",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 1aa40fcf..d6d3dfc2 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -43,9 +43,6 @@ importers:
       '@eslint/js':
         specifier: ^10.0.1
         version: 10.0.1(eslint@10.12.0(jiti@2.7.0)(supports-color@8.1.1))
-      '@internationalized/date':
-        specifier: ^3.12.4
-        version: 3.12.4
       '@lucide/svelte':
         specifier: ^1.57.0
         version: 1.57.0(svelte@5.57.2)
diff --git a/frontend/src/lib/api-helpers.js b/frontend/src/lib/api-helpers.js
index 036cb068..37aee93e 100644
--- a/frontend/src/lib/api-helpers.js
+++ b/frontend/src/lib/api-helpers.js
@@ -160,111 +160,3 @@ export async function apiRequest(endpoint, options = {}, locals) {
     throw error;
   }
 }
-
-/**
- * Transform Django field names to camelCase for SvelteKit
- *
- * @param {any} obj - Django object with snake_case fields
- * @returns {any} Object with camelCase fields
- */
-export function transformFromDjango(obj) {
-  if (!obj) return obj;
-  if (Array.isArray(obj)) return obj.map(transformFromDjango);
-  if (typeof obj !== 'object') return obj;
-
-  /** @type {Record<string, unknown>} */
-  const transformed = {};
-  for (const [key, value] of Object.entries(obj)) {
-    const camelKey = key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
-    transformed[camelKey] = typeof value === 'object' ? transformFromDjango(value) : value;
-  }
-  return transformed;
-}
-
-/**
- * Transform camelCase field names to Django snake_case
- *
- * @param {any} obj - SvelteKit object with camelCase fields
- * @returns {any} Object with snake_case fields
- */
-export function transformToDjango(obj) {
-  if (!obj) return obj;
-  if (Array.isArray(obj)) return obj.map(transformToDjango);
-  if (typeof obj !== 'object') return obj;
-
-  /** @type {Record<string, unknown>} */
-  const transformed = {};
-  for (const [key, value] of Object.entries(obj)) {
-    const snakeKey = key.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
-    transformed[snakeKey] = typeof value === 'object' ? transformToDjango(value) : value;
-  }
-  return transformed;
-}
-
-/**
- * Build Django query parameters from filter object
- *
- * @param {Object} filters - Filter object
- * @param {number} [filters.page] - Page number (1-indexed)
- * @param {number} [filters.limit] - Items per page
- * @param {string} [filters.sort] - Sort field name
- * @param {string} [filters.order] - Sort order ('asc' or 'desc')
- * @returns {URLSearchParams} Query parameters for Django API
- */
-export function buildQueryParams(filters = {}) {
-  const { page = 1, limit = 10, sort, order = 'asc', ...otherFilters } = filters;
-
-  const params = new URLSearchParams();
-
-  // Pagination
-  params.append('limit', limit.toString());
-  params.append('offset', ((page - 1) * limit).toString());
-
-  // Sorting (Django uses - prefix for descending)
-  if (sort) {
-    const ordering = order === 'desc' ? `-${sort}` : sort;
-    params.append('ordering', ordering);
-  }
-
-  // Other filters
-  for (const [key, value] of Object.entries(otherFilters)) {
-    if (value !== null && value !== undefined && value !== '') {
-      params.append(key, value.toString());
-    }
-  }
-
-  return params;
-}
-
-/**
- * Extract pagination info from Django response
- *
- * @param {{ count?: number, next?: string | null, previous?: string | null, results?: unknown[] }} response - Django paginated response
- * @param {number} [limit=10] - Items per page
- * @returns {{ page: number, limit: number, total: number, totalPages: number, hasNext: boolean, hasPrevious: boolean }} Pagination info compatible with SvelteKit
- */
-export function extractPagination(response, limit = 10) {
-  const total = response.count || 0;
-  const totalPages = Math.ceil(total / limit);
-
-  // Determine current page from offset in next/previous URLs
-  let currentPage = 1;
-  if (response.next) {
-    const url = new URL(response.next, 'http://localhost');
-    const offset = parseInt(url.searchParams.get('offset') || '0');
-    currentPage = Math.floor(offset / limit);
-  } else if (response.previous) {
-    const url = new URL(response.previous, 'http://localhost');
-    const offset = parseInt(url.searchParams.get('offset') || '0');
-    currentPage = Math.floor(offset / limit) + 2;
-  }
-
-  return {
-    page: currentPage,
-    limit,
-    total,
-    totalPages,
-    hasNext: response.next !== null,
-    hasPrevious: response.previous !== null
-  };
-}
diff --git a/frontend/src/lib/components/dashboard/ActivityFeed.svelte b/frontend/src/lib/components/dashboard/ActivityFeed.svelte
deleted file mode 100644
index 8a87ceef..00000000
--- a/frontend/src/lib/components/dashboard/ActivityFeed.svelte
+++ /dev/null
@@ -1,228 +0,0 @@
-<script>
-  import { SvelteDate } from 'svelte/reactivity';
-  import { Button } from '#lib/components/ui/button/index.js';
-  import {
-    Activity,
-    Plus,
-    Pencil,
-    Trash2,
-    Eye,
-    MessageSquare,
-    UserPlus,
-    ChevronRight,
-    Clock
-  } from '@lucide/svelte';
-
-  /**
-   * @typedef {Object} ActivityItem
-   * @property {string} id
-   * @property {string} [description]
-   * @property {string} [message]
-   * @property {string} [timestamp]
-   * @property {string} [createdAt]
-   * @property {string} [action]
-   * @property {string} [entityType]
-   * @property {string} [entityName]
-   * @property {{ name?: string }} [user]
-   */
-
-  /**
-   * @typedef {Object} Props
-   * @property {ActivityItem[]} [activities=[]] - List of activity items
-   */
-
-  /** @type {Props} */
-  let { activities = [] } = $props();
-
-  let showAll = $state(false);
-
-  // Using design system activity tokens
-  const actionConfig =
-    /** @type {Record<string, { icon: typeof Activity, bg: string, text: string }>} */ ({
-      CREATE: {
-        icon: Plus,
-        bg: 'bg-[var(--color-success-light)] dark:bg-[var(--color-success-default)]/15',
-        text: 'text-[var(--color-success-default)]'
-      },
-      UPDATE: {
-        icon: Pencil,
-        bg: 'bg-[var(--color-primary-light)] dark:bg-[var(--color-primary-default)]/15',
-        text: 'text-[var(--color-primary-default)]'
-      },
-      DELETE: {
-        icon: Trash2,
-        bg: 'bg-[var(--color-negative-light)] dark:bg-[var(--color-negative-default)]/15',
-        text: 'text-[var(--color-negative-default)]'
-      },
-      VIEW: {
-        icon: Eye,
-        bg: 'bg-[var(--surface-sunken)]',
-        text: 'text-[var(--text-secondary)]'
-      },
-      COMMENT: {
-        icon: MessageSquare,
-        bg: 'bg-[var(--activity-note)]/10 dark:bg-[var(--activity-note)]/15',
-        text: 'text-[var(--activity-note)]'
-      },
-      ASSIGN: {
-        icon: UserPlus,
-        bg: 'bg-[var(--activity-meeting)]/10 dark:bg-[var(--activity-meeting)]/15',
-        text: 'text-[var(--activity-meeting)]'
-      }
-    });
-
-  const defaultConfig = {
-    icon: Activity,
-    bg: 'bg-[var(--surface-sunken)]',
-    text: 'text-[var(--text-tertiary)]'
-  };
-
-  /**
-   * Get date category for grouping
-   * @param {string | undefined} dateStr
-   */
-  function getDateCategory(dateStr) {
-    if (!dateStr) return 'Earlier';
-    const date = new Date(dateStr);
-    const now = new Date();
-    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-    const yesterday = new SvelteDate(today);
-    yesterday.setDate(yesterday.getDate() - 1);
-    const weekAgo = new SvelteDate(today);
-    weekAgo.setDate(weekAgo.getDate() - 7);
-
-    if (date >= today) return 'Today';
-    if (date >= yesterday) return 'Yesterday';
-    if (date >= weekAgo) return 'This Week';
-    return 'Earlier';
-  }
-
-  /**
-   * Format time only
-   * @param {string | undefined} dateStr
-   */
-  function formatTime(dateStr) {
-    if (!dateStr) return '';
-    const date = new Date(dateStr);
-    return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
-  }
-
-  /**
-   * Group activities by date category
-   * @param {ActivityItem[]} activities
-   */
-  function groupByDate(activities) {
-    const groups = /** @type {Record<string, ActivityItem[]>} */ ({});
-    const order = ['Today', 'Yesterday', 'This Week', 'Earlier'];
-
-    for (const activity of activities) {
-      const category = getDateCategory(activity.timestamp || activity.createdAt);
-      if (!groups[category]) groups[category] = [];
-      groups[category].push(activity);
-    }
-
-    return order
-      .filter((cat) => groups[cat]?.length > 0)
-      .map((cat) => ({
-        category: cat,
-        items: groups[cat]
-      }));
-  }
-
-  const displayedActivities = $derived(showAll ? activities : activities.slice(0, 5));
-  const groupedActivities = $derived(groupByDate(displayedActivities));
-</script>
-
-<div
-  class="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-default)] bg-[var(--surface-raised)] dark:bg-[var(--surface-raised)]/80 dark:backdrop-blur-sm"
->
-  <!-- Header - Orange accent -->
-  <div
-    class="flex items-center justify-between border-b border-[var(--border-default)]/50 px-5 py-4"
-  >
-    <div class="flex items-center gap-3">
-      <div
-        class="flex size-8 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-primary-light)] dark:bg-[var(--color-primary-default)]/15"
-      >
-        <Activity class="size-4 text-[var(--color-primary-default)]" />
-      </div>
-      <h3 class="text-sm font-semibold tracking-tight text-[var(--text-primary)]">
-        Recent Activity
-      </h3>
-    </div>
-    <Button variant="ghost" size="sm" href="/activities" class="gap-1 text-xs font-medium">
-      View all
-      <ChevronRight class="size-3.5" />
-    </Button>
-  </div>
-
-  <!-- Activity list -->
-  <div class="p-5">
-    {#if activities.length === 0}
-      <div class="flex flex-col items-center justify-center py-10 text-center">
-        <div
-          class="mb-3 flex size-12 items-center justify-center rounded-[var(--radius-lg)] bg-[var(--surface-sunken)]"
-        >
-          <Clock class="size-6 text-[var(--text-tertiary)]" />
-        </div>
-        <p class="text-sm font-medium text-[var(--text-secondary)]">No recent activity</p>
-        <p class="text-xs text-[var(--text-tertiary)]">Actions will appear here</p>
-      </div>
-    {:else}
-      <div class="space-y-5">
-        {#each groupedActivities as group (group.category)}
-          <div>
-            <p
-              class="mb-3 text-[10px] font-semibold tracking-widest text-[var(--text-tertiary)] uppercase"
-            >
-              {group.category}
-            </p>
-            <div class="space-y-2">
-              {#each group.items as activity (activity.id)}
-                {@const config = actionConfig[activity.action || ''] || defaultConfig}
-                {@const Icon = config.icon}
-                <div
-                  class="group -mx-2 flex items-start gap-3 rounded-[var(--radius-md)] px-2 py-2 transition-all duration-200 hover:bg-[var(--color-primary-light)] dark:hover:bg-[var(--color-primary-default)]/5"
-                >
-                  <!-- Icon -->
-                  <div
-                    class="flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-md)] transition-transform duration-200 group-hover:scale-105 {config.bg}"
-                  >
-                    <Icon class="size-3.5 {config.text}" />
-                  </div>
-
-                  <!-- Content -->
-                  <div class="min-w-0 flex-1">
-                    <p class="text-sm leading-snug text-[var(--text-primary)]">
-                      {activity.description ||
-                        activity.message ||
-                        `${activity.action} ${activity.entityType}: ${activity.entityName}`}
-                    </p>
-                    <div
-                      class="mt-1 flex items-center gap-1.5 text-xs text-[var(--text-secondary)]"
-                    >
-                      <span class="font-medium">{activity.user?.name || 'System'}</span>
-                      <span class="text-[var(--text-tertiary)]">&middot;</span>
-                      <span>{formatTime(activity.timestamp || activity.createdAt)}</span>
-                    </div>
-                  </div>
-                </div>
-              {/each}
-            </div>
-          </div>
-        {/each}
-      </div>
-
-      {#if activities.length > 5 && !showAll}
-        <Button
-          variant="ghost"
-          size="sm"
-          class="mt-4 w-full text-xs font-medium"
-          onclick={() => (showAll = true)}
-        >
-          Show more ({activities.length - 5} more)
-        </Button>
-      {/if}
-    {/if}
-  </div>
-</div>
diff --git a/frontend/src/lib/components/dashboard/FocusBar.svelte b/frontend/src/lib/components/dashboard/FocusBar.svelte
deleted file mode 100644
index 9981a296..00000000
--- a/frontend/src/lib/components/dashboard/FocusBar.svelte
+++ /dev/null
@@ -1,113 +0,0 @@
-<script>
-  import { resolve } from '$app/paths';
-  import { asInternalPath } from '#lib/utils/paths.js';
-  import { AlertCircle, Calendar, Phone, Flame, Zap } from '@lucide/svelte';
-
-  /**
-   * @typedef {Object} Props
-   * @property {number} [overdueCount] - Number of overdue tasks
-   * @property {number} [todayCount] - Number of tasks due today
-   * @property {number} [followupsCount] - Number of follow-ups scheduled today
-   * @property {number} [hotLeadsCount] - Number of hot leads
-   */
-
-  /** @type {Props} */
-  let { overdueCount = 0, todayCount = 0, followupsCount = 0, hotLeadsCount = 0 } = $props();
-
-  const items = $derived([
-    {
-      href: '/tasks?filter=overdue',
-      icon: AlertCircle,
-      iconClass: 'text-[var(--task-overdue)]',
-      bgClass: 'bg-[var(--task-overdue-bg)] dark:bg-[var(--task-overdue)]/15',
-      count: overdueCount,
-      label: 'Overdue',
-      show: overdueCount > 0
-    },
-    {
-      href: '/tasks?filter=today',
-      icon: Calendar,
-      iconClass: 'text-[var(--task-due-today)]',
-      bgClass: 'bg-[var(--task-due-today-bg)] dark:bg-[var(--task-due-today)]/15',
-      count: todayCount,
-      label: 'Due Today',
-      show: true
-    },
-    {
-      href: '/leads?filter=followup_today',
-      icon: Phone,
-      iconClass: 'text-[var(--activity-call)]',
-      bgClass: 'bg-[var(--color-success-light)] dark:bg-[var(--activity-call)]/15',
-      count: followupsCount,
-      label: 'Follow-ups',
-      show: true
-    },
-    {
-      href: '/leads?rating=HOT',
-      icon: Flame,
-      iconClass: 'text-[var(--lead-hot)]',
-      bgClass: 'bg-[var(--lead-hot-bg)] dark:bg-[var(--lead-hot)]/15',
-      count: hotLeadsCount,
-      label: 'Hot Leads',
-      show: hotLeadsCount > 0
-    }
-  ]);
-
-  const visibleItems = $derived(items.filter((item) => item.show));
-  const hasUrgentItems = $derived(overdueCount > 0);
-</script>
-
-{#if visibleItems.length > 0}
-  <div
-    class="relative overflow-hidden rounded-[var(--radius-lg)] border px-4 py-3 backdrop-blur-sm transition-all duration-300 sm:px-6
-      {hasUrgentItems
-      ? 'border-[var(--task-overdue)]/30 bg-[var(--task-overdue-bg)] dark:border-[var(--task-overdue)]/20 dark:bg-[var(--task-overdue)]/10'
-      : 'border-[var(--border-default)] bg-[var(--surface-raised)]/50 dark:bg-[var(--surface-raised)]/30'}"
-  >
-    <!-- Subtle gradient overlay -->
-    <div
-      class="pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent dark:via-white/[0.02]"
-    ></div>
-
-    <div class="relative flex items-center gap-3 sm:gap-5">
-      <!-- Label with icon - Orange accent -->
-      <div class="hidden items-center gap-2 sm:flex">
-        <div
-          class="flex size-7 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-primary-light)] dark:bg-[var(--color-primary-default)]/15"
-        >
-          <Zap class="size-4 text-[var(--color-primary-default)]" />
-        </div>
-        <span class="text-xs font-semibold tracking-wider text-[var(--text-secondary)] uppercase">
-          Today's Focus
-        </span>
-      </div>
-
-      <!-- Divider -->
-      <div class="hidden h-6 w-px bg-[var(--border-default)]/50 sm:block"></div>
-
-      <!-- Items -->
-      <div class="flex flex-1 items-center gap-1 overflow-x-auto sm:gap-2">
-        {#each visibleItems as item (item.href)}
-          <a
-            href={resolve(asInternalPath(item.href))}
-            class="group flex items-center gap-2 rounded-[var(--radius-md)] px-3 py-2 transition-all duration-200 hover:bg-white/50 sm:gap-2.5 sm:px-4 dark:hover:bg-white/5"
-          >
-            <div
-              class="flex size-8 items-center justify-center rounded-[var(--radius-md)] transition-transform duration-200 group-hover:scale-110 {item.bgClass}"
-            >
-              <item.icon class="size-4 {item.iconClass}" />
-            </div>
-            <div class="flex items-center gap-2">
-              <span class="text-base font-bold text-[var(--text-primary)] tabular-nums"
-                >{item.count}</span
-              >
-              <span class="hidden text-xs font-medium text-[var(--text-secondary)] sm:inline"
-                >{item.label}</span
-              >
-            </div>
-          </a>
-        {/each}
-      </div>
-    </div>
-  </div>
-{/if}
diff --git a/frontend/src/lib/components/dashboard/HotLeadsPanel.svelte b/frontend/src/lib/components/dashboard/HotLeadsPanel.svelte
deleted file mode 100644
index 5e9f120d..00000000
--- a/frontend/src/lib/components/dashboard/HotLeadsPanel.svelte
+++ /dev/null
@@ -1,198 +0,0 @@
-<script>
-  import { SvelteDate } from 'svelte/reactivity';
-  import { resolve } from '$app/paths';
-  import { Badge } from '#lib/components/ui/badge/index.js';
-  import { Button } from '#lib/components/ui/button/index.js';
-  import { Flame, Phone, Mail, ChevronRight, Calendar, Sparkles } from '@lucide/svelte';
-
-  /**
-   * @typedef {Object} Lead
-   * @property {string} id
-   * @property {string} [first_name]
-   * @property {string} [last_name]
-   * @property {string} [company]
-   * @property {string} [rating]
-   * @property {string} [next_follow_up]
-   * @property {string} [last_contacted]
-   */
-
-  /**
-   * @typedef {Object} Props
-   * @property {Lead[]} [leads] - Hot leads
-   */
-
-  /** @type {Props} */
-  let { leads = [] } = $props();
-
-  // Using design system lead temperature tokens
-  const ratingConfig =
-    /** @type {Record<string, { bg: string, text: string, border: string, iconColor: string }>} */ ({
-      HOT: {
-        bg: 'bg-[var(--lead-hot-bg)] dark:bg-[var(--lead-hot)]/15',
-        text: 'text-[var(--lead-hot)]',
-        border: 'border-[var(--lead-hot)]/30',
-        iconColor: 'text-[var(--lead-hot)]'
-      },
-      WARM: {
-        bg: 'bg-[var(--lead-warm-bg)] dark:bg-[var(--lead-warm)]/15',
-        text: 'text-[var(--lead-warm)]',
-        border: 'border-[var(--lead-warm)]/30',
-        iconColor: 'text-[var(--lead-warm)]'
-      },
-      COLD: {
-        bg: 'bg-[var(--lead-cold-bg)] dark:bg-[var(--lead-cold)]/15',
-        text: 'text-[var(--lead-cold)]',
-        border: 'border-[var(--lead-cold)]/30',
-        iconColor: 'text-[var(--lead-cold)]'
-      }
-    });
-
-  /**
-   * Format date for display
-   * @param {string | null | undefined} dateStr
-   */
-  function formatFollowUp(dateStr) {
-    if (!dateStr) return 'No follow-up set';
-    const date = new Date(dateStr);
-    const today = new SvelteDate();
-    today.setHours(0, 0, 0, 0);
-    const tomorrow = new SvelteDate(today);
-    tomorrow.setDate(tomorrow.getDate() + 1);
-
-    const dateOnly = new SvelteDate(date);
-    dateOnly.setHours(0, 0, 0, 0);
-
-    if (dateOnly.getTime() === today.getTime()) return 'Today';
-    if (dateOnly.getTime() === tomorrow.getTime()) return 'Tomorrow';
-    if (dateOnly.getTime() < today.getTime()) {
-      const days = Math.floor((today.getTime() - dateOnly.getTime()) / (1000 * 60 * 60 * 24));
-      return `${days}d overdue`;
-    }
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-  }
-
-  /**
-   * Check if follow-up is overdue
-   * @param {string | null | undefined} dateStr
-   */
-  function isOverdue(dateStr) {
-    if (!dateStr) return false;
-    const date = new Date(dateStr);
-    const today = new SvelteDate();
-    today.setHours(0, 0, 0, 0);
-    return date < today;
-  }
-
-  /**
-   * Get lead name
-   * @param {Lead} lead
-   */
-  function getLeadName(lead) {
-    const parts = [lead.first_name, lead.last_name].filter(Boolean);
-    return parts.length > 0 ? parts.join(' ') : 'Unnamed Lead';
-  }
-</script>
-
-<div
-  class="flex h-full flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-default)] bg-[var(--surface-raised)] dark:bg-[var(--surface-raised)]/80 dark:backdrop-blur-sm"
->
-  <!-- Header - Orange accent for hot leads -->
-  <div
-    class="flex items-center justify-between border-b border-[var(--border-default)]/50 px-5 py-4"
-  >
-    <div class="flex items-center gap-3">
-      <div
-        class="flex size-8 items-center justify-center rounded-[var(--radius-md)] bg-[var(--lead-hot-bg)] dark:bg-[var(--lead-hot)]/15"
-      >
-        <Flame class="size-4 text-[var(--lead-hot)]" />
-      </div>
-      <h3 class="text-sm font-semibold tracking-tight text-[var(--text-primary)]">Hot Leads</h3>
-    </div>
-    <Button variant="ghost" size="sm" href="/leads?rating=HOT" class="gap-1 text-xs font-medium">
-      View all
-      <ChevronRight class="size-3.5" />
-    </Button>
-  </div>
-
-  <!-- Leads list -->
-  <div class="flex-1 overflow-auto">
-    {#if leads.length === 0}
-      <div class="flex h-full flex-col items-center justify-center py-10 text-center">
-        <div
-          class="mb-3 flex size-12 items-center justify-center rounded-[var(--radius-lg)] bg-[var(--surface-sunken)]"
-        >
-          <Sparkles class="size-6 text-[var(--text-tertiary)]" />
-        </div>
-        <p class="text-sm font-medium text-[var(--text-secondary)]">No hot leads</p>
-        <p class="text-xs text-[var(--text-tertiary)]">Mark leads as "Hot" to see them here</p>
-      </div>
-    {:else}
-      <div class="divide-y divide-[var(--border-default)]/30">
-        {#each leads as lead (lead.id)}
-          {@const config = ratingConfig[lead.rating || 'HOT'] || ratingConfig.HOT}
-          <a
-            href={resolve(`leads?view=${lead.id}`)}
-            class="group flex items-center gap-3 px-5 py-3 transition-all duration-200 hover:bg-[var(--color-primary-light)] dark:hover:bg-[var(--color-primary-default)]/5"
-          >
-            <!-- Lead info -->
-            <div class="min-w-0 flex-1">
-              <p
-                class="truncate text-sm font-medium text-[var(--text-primary)] transition-colors group-hover:text-[var(--color-primary-default)]"
-              >
-                {getLeadName(lead)}
-              </p>
-              <p class="mt-0.5 truncate text-xs text-[var(--text-secondary)]">
-                {lead.company || 'No company'}
-              </p>
-            </div>
-
-            <!-- Rating badge -->
-            <Badge
-              class="flex-shrink-0 gap-1.5 border text-[10px] font-semibold {config.bg} {config.text} {config.border}"
-            >
-              <Flame class="size-3 {config.iconColor}" />
-              {lead.rating || 'HOT'}
-            </Badge>
-
-            <!-- Follow-up date -->
-            {#if lead.next_follow_up}
-              <div class="flex flex-shrink-0 items-center gap-1.5">
-                <Calendar class="size-3.5 text-[var(--text-tertiary)]" />
-                <span
-                  class="text-xs font-medium tabular-nums
-                    {isOverdue(lead.next_follow_up)
-                    ? 'text-[var(--task-overdue)]'
-                    : 'text-[var(--text-secondary)]'}"
-                >
-                  {formatFollowUp(lead.next_follow_up)}
-                </span>
-              </div>
-            {/if}
-
-            <!-- Hover actions -->
-            <div
-              class="flex flex-shrink-0 gap-1 opacity-0 transition-all duration-200 group-hover:opacity-100"
-            >
-              <Button
-                variant="ghost"
-                size="icon"
-                class="size-7 rounded-[var(--radius-md)] hover:bg-[var(--activity-call)]/10 hover:text-[var(--activity-call)]"
-                title="Call"
-              >
-                <Phone class="size-3.5" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                class="size-7 rounded-[var(--radius-md)] hover:bg-[var(--activity-email)]/10 hover:text-[var(--activity-email)]"
-                title="Email"
-              >
-                <Mail class="size-3.5" />
-              </Button>
-            </div>
-          </a>
-        {/each}
-      </div>
-    {/if}
-  </div>
-</div>
diff --git a/frontend/src/lib/components/dashboard/KPICard.svelte b/frontend/src/lib/components/dashboard/KPICard.svelte
deleted file mode 100644
index 82e14051..00000000
--- a/frontend/src/lib/components/dashboard/KPICard.svelte
+++ /dev/null
@@ -1,164 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  import { TrendingUp, TrendingDown } from '@lucide/svelte';
-
-  /**
-   * @typedef {Object} Props
-   * @property {string} label - The metric label (e.g., "Active Leads")
-   * @property {string | number} value - The metric value
-   * @property {string} [subtitle] - Small note below the value (e.g., "INR only")
-   * @property {import('svelte').Snippet} [icon] - Icon snippet to display
-   * @property {number} [trend] - Percentage change (positive or negative)
-   * @property {string} [trendLabel] - Label for trend (e.g., "vs last month")
-   * @property {'orange' | 'cyan' | 'violet' | 'emerald' | 'amber' | 'rose' | 'blue'} [accentColor] - Accent color theme
-   * @property {string} [class] - Additional classes
-   */
-
-  /** @type {Props & Record<string, any>} */
-  let {
-    label,
-    value,
-    subtitle,
-    icon,
-    trend,
-    trendLabel,
-    accentColor = 'orange',
-    class: className,
-    ...restProps
-  } = $props();
-
-  const hasTrend = $derived(trend !== undefined && trend !== null);
-  const isPositive = $derived(trend !== undefined && trend >= 0);
-
-  // Color configurations using design system tokens
-  const colorConfig = {
-    orange: {
-      iconBg: 'bg-[var(--color-primary-light)] dark:bg-[var(--color-primary-default)]/15',
-      iconColor: 'text-[var(--color-primary-default)] dark:text-[var(--color-primary-default)]',
-      borderGlow: 'hover:border-[var(--color-primary-default)]/30',
-      shadowGlow: 'dark:hover:shadow-[var(--color-primary-default)]/10'
-    },
-    cyan: {
-      iconBg: 'bg-cyan-500/10 dark:bg-cyan-500/20',
-      iconColor: 'text-cyan-600 dark:text-cyan-400',
-      borderGlow: 'hover:border-cyan-500/30 dark:hover:border-cyan-400/30',
-      shadowGlow: 'dark:hover:shadow-cyan-500/10'
-    },
-    violet: {
-      iconBg: 'bg-[var(--stage-proposal-bg)] dark:bg-[var(--stage-proposal)]/15',
-      iconColor: 'text-[var(--stage-proposal)] dark:text-[var(--stage-proposal)]',
-      borderGlow: 'hover:border-[var(--stage-proposal)]/30',
-      shadowGlow: 'dark:hover:shadow-[var(--stage-proposal)]/10'
-    },
-    blue: {
-      iconBg: 'bg-[var(--stage-qualified-bg)] dark:bg-[var(--stage-qualified)]/15',
-      iconColor: 'text-[var(--stage-qualified)] dark:text-[var(--stage-qualified)]',
-      borderGlow: 'hover:border-[var(--stage-qualified)]/30',
-      shadowGlow: 'dark:hover:shadow-[var(--stage-qualified)]/10'
-    },
-    emerald: {
-      iconBg: 'bg-[var(--color-success-light)] dark:bg-[var(--stage-won)]/15',
-      iconColor: 'text-[var(--stage-won)] dark:text-[var(--stage-won)]',
-      borderGlow: 'hover:border-[var(--stage-won)]/30',
-      shadowGlow: 'dark:hover:shadow-[var(--stage-won)]/10'
-    },
-    amber: {
-      iconBg: 'bg-[var(--stage-negotiation-bg)] dark:bg-[var(--stage-negotiation)]/15',
-      iconColor: 'text-[var(--stage-negotiation)] dark:text-[var(--stage-negotiation)]',
-      borderGlow: 'hover:border-[var(--stage-negotiation)]/30',
-      shadowGlow: 'dark:hover:shadow-[var(--stage-negotiation)]/10'
-    },
-    rose: {
-      iconBg: 'bg-[var(--stage-lost-bg)] dark:bg-[var(--stage-lost)]/15',
-      iconColor: 'text-[var(--stage-lost)] dark:text-[var(--stage-lost)]',
-      borderGlow: 'hover:border-[var(--stage-lost)]/30',
-      shadowGlow: 'dark:hover:shadow-[var(--stage-lost)]/10'
-    }
-  };
-
-  const colors = $derived(colorConfig[accentColor] || colorConfig.orange);
-</script>
-
-<div
-  class={cn(
-    'group relative overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-default)] bg-[var(--surface-raised)] p-5 transition-all duration-300',
-    'hover:-translate-y-0.5 hover:shadow-[var(--shadow-md)]',
-    'dark:border-[var(--border-default)] dark:bg-[var(--surface-raised)]/80 dark:backdrop-blur-sm dark:hover:shadow-lg',
-    colors.borderGlow,
-    colors.shadowGlow,
-    className
-  )}
-  {...restProps}
->
-  <!-- Subtle gradient overlay on hover -->
-  <div
-    class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-  >
-    <div
-      class="absolute inset-0 bg-gradient-to-br from-[var(--color-primary-default)]/5 via-transparent to-transparent dark:from-[var(--color-primary-default)]/[0.03]"
-    ></div>
-  </div>
-
-  <div class="relative flex items-start justify-between gap-4">
-    <div class="flex min-w-0 flex-col gap-1.5">
-      <!-- Label -->
-      <p class="text-xs font-semibold tracking-wider text-[var(--text-secondary)] uppercase">
-        {label}
-      </p>
-
-      <!-- Value -->
-      <p
-        class="truncate text-2xl font-bold tracking-tight text-[var(--text-primary)] tabular-nums lg:text-3xl"
-      >
-        {value}
-      </p>
-
-      <!-- Subtitle -->
-      {#if subtitle}
-        <p class="text-[10px] font-medium text-[var(--text-tertiary)]">{subtitle}</p>
-      {/if}
-
-      <!-- Trend indicator -->
-      {#if hasTrend}
-        <div class="mt-1 flex items-center gap-1.5">
-          {#if isPositive}
-            <div
-              class="flex items-center gap-1 rounded-full bg-[var(--color-success-light)] px-2 py-0.5 dark:bg-[var(--stage-won)]/15"
-            >
-              <TrendingUp class="size-3 text-[var(--stage-won)]" />
-              <span class="text-xs font-semibold text-[var(--stage-won)]">
-                +{trend}%
-              </span>
-            </div>
-          {:else}
-            <div
-              class="flex items-center gap-1 rounded-full bg-[var(--stage-lost-bg)] px-2 py-0.5 dark:bg-[var(--stage-lost)]/15"
-            >
-              <TrendingDown class="size-3 text-[var(--stage-lost)]" />
-              <span class="text-xs font-semibold text-[var(--stage-lost)]">
-                {trend}%
-              </span>
-            </div>
-          {/if}
-          {#if trendLabel}
-            <span class="text-[10px] text-[var(--text-tertiary)]">{trendLabel}</span>
-          {/if}
-        </div>
-      {/if}
-    </div>
-
-    <!-- Icon -->
-    {#if icon}
-      <div
-        class={cn(
-          'flex size-11 flex-shrink-0 items-center justify-center rounded-[var(--radius-lg)] transition-transform duration-300 group-hover:scale-105',
-          colors.iconBg
-        )}
-      >
-        <div class={colors.iconColor}>
-          {@render icon()}
-        </div>
-      </div>
-    {/if}
-  </div>
-</div>
diff --git a/frontend/src/lib/components/dashboard/TaskList.svelte b/frontend/src/lib/components/dashboard/TaskList.svelte
deleted file mode 100644
index b8357ecf..00000000
--- a/frontend/src/lib/components/dashboard/TaskList.svelte
+++ /dev/null
@@ -1,251 +0,0 @@
-<script>
-  import { SvelteDate } from 'svelte/reactivity';
-  import { resolve } from '$app/paths';
-  import { Badge } from '#lib/components/ui/badge/index.js';
-  import { Button } from '#lib/components/ui/button/index.js';
-  import { Circle, CheckCircle2, ChevronRight, ListTodo } from '@lucide/svelte';
-
-  /**
-   * @typedef {Object} Task
-   * @property {string} id
-   * @property {string} subject
-   * @property {string} status
-   * @property {string} priority
-   * @property {string} [dueDate]
-   * @property {boolean} [isOverdue]
-   * @property {boolean} [isDueToday]
-   */
-
-  /**
-   * @typedef {Object} Props
-   * @property {Task[]} [tasks] - All tasks
-   */
-
-  /** @type {Props} */
-  let { tasks = [] } = $props();
-
-  /** @type {'all' | 'overdue' | 'today' | 'week'} */
-  let filter = $state('all');
-
-  const today = new SvelteDate();
-  today.setHours(0, 0, 0, 0);
-
-  const weekEnd = new SvelteDate(today);
-  weekEnd.setDate(weekEnd.getDate() + 7);
-
-  /**
-   * Check if a date is today
-   * @param {string} dateStr
-   */
-  function isToday(dateStr) {
-    if (!dateStr) return false;
-    const date = new SvelteDate(dateStr);
-    date.setHours(0, 0, 0, 0);
-    return date.getTime() === today.getTime();
-  }
-
-  /**
-   * Check if a date is overdue
-   * @param {string} dateStr
-   */
-  function isOverdue(dateStr) {
-    if (!dateStr) return false;
-    const date = new SvelteDate(dateStr);
-    date.setHours(0, 0, 0, 0);
-    return date.getTime() < today.getTime();
-  }
-
-  /**
-   * Check if a date is within this week
-   * @param {string} dateStr
-   */
-  function isThisWeek(dateStr) {
-    if (!dateStr) return false;
-    const date = new SvelteDate(dateStr);
-    date.setHours(0, 0, 0, 0);
-    return date.getTime() >= today.getTime() && date.getTime() <= weekEnd.getTime();
-  }
-
-  const filteredTasks = $derived(() => {
-    return tasks.filter((task) => {
-      if (task.status === 'Completed') return false;
-      if (filter === 'overdue') return isOverdue(task.dueDate);
-      if (filter === 'today') return isToday(task.dueDate);
-      if (filter === 'week') return isThisWeek(task.dueDate);
-      return true;
-    });
-  });
-
-  const overdueTasks = $derived(
-    tasks.filter((t) => t.status !== 'Completed' && isOverdue(t.dueDate))
-  );
-
-  // Using design system priority tokens
-  const priorityConfig =
-    /** @type {Record<string, { bg: string, text: string, border: string }>} */ ({
-      Urgent: {
-        bg: 'bg-[var(--priority-urgent-bg)] dark:bg-[var(--priority-urgent)]/15',
-        text: 'text-[var(--priority-urgent)]',
-        border: 'border-[var(--priority-urgent)]/30'
-      },
-      High: {
-        bg: 'bg-[var(--priority-high-bg)] dark:bg-[var(--priority-high)]/15',
-        text: 'text-[var(--priority-high)]',
-        border: 'border-[var(--priority-high)]/30'
-      },
-      Medium: {
-        bg: 'bg-[var(--priority-medium-bg)] dark:bg-[var(--priority-medium)]/15',
-        text: 'text-[var(--priority-medium)]',
-        border: 'border-[var(--priority-medium)]/30'
-      },
-      Low: {
-        bg: 'bg-[var(--priority-low-bg)] dark:bg-[var(--priority-low)]/15',
-        text: 'text-[var(--priority-low)]',
-        border: 'border-[var(--priority-low)]/30'
-      }
-    });
-
-  /**
-   * Get priority config
-   * @param {string} priority
-   */
-  function getPriorityConfig(priority) {
-    return priorityConfig[priority] || priorityConfig['Medium'];
-  }
-
-  /**
-   * Format date for display
-   * @param {string} dateStr
-   */
-  function formatDate(dateStr) {
-    if (!dateStr) return '';
-    const date = new Date(dateStr);
-    if (isToday(dateStr)) return 'Today';
-    if (isOverdue(dateStr)) {
-      const days = Math.floor((today.getTime() - date.getTime()) / (1000 * 60 * 60 * 24));
-      return days === 1 ? 'Yesterday' : `${days}d ago`;
-    }
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-  }
-
-  /** @type {{ id: 'all' | 'overdue' | 'today' | 'week', label: string }[]} */
-  const filterButtons = [
-    { id: 'all', label: 'All' },
-    { id: 'overdue', label: 'Overdue' },
-    { id: 'today', label: 'Today' },
-    { id: 'week', label: 'Week' }
-  ];
-</script>
-
-<div
-  class="flex h-full flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-default)] bg-[var(--surface-raised)] dark:bg-[var(--surface-raised)]/80 dark:backdrop-blur-sm"
->
-  <!-- Header - Orange accent -->
-  <div
-    class="flex items-center justify-between border-b border-[var(--border-default)]/50 px-5 py-4"
-  >
-    <div class="flex items-center gap-3">
-      <div
-        class="flex size-8 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-primary-light)] dark:bg-[var(--color-primary-default)]/15"
-      >
-        <ListTodo class="size-4 text-[var(--color-primary-default)]" />
-      </div>
-      <h3 class="text-sm font-semibold tracking-tight text-[var(--text-primary)]">My Tasks</h3>
-    </div>
-    <Button variant="ghost" size="sm" href="/tasks" class="gap-1 text-xs font-medium">
-      View all
-      <ChevronRight class="size-3.5" />
-    </Button>
-  </div>
-
-  <!-- Filter tabs -->
-  <div class="flex gap-1 border-b border-[var(--border-default)]/50 px-4 py-2">
-    {#each filterButtons as btn (btn.id)}
-      <Button
-        variant={filter === btn.id ? 'secondary' : 'ghost'}
-        size="sm"
-        class="h-7 px-3 text-xs font-medium transition-all duration-200
-          {filter === btn.id
-          ? 'bg-[var(--surface-sunken)] shadow-sm'
-          : 'hover:bg-[var(--surface-sunken)]/50'}"
-        onclick={() => (filter = btn.id)}
-      >
-        {btn.label}
-        {#if btn.id === 'overdue' && overdueTasks.length > 0}
-          <Badge
-            class="ml-1.5 h-4 min-w-4 bg-[var(--task-overdue)] px-1 text-[10px] font-bold text-white"
-          >
-            {overdueTasks.length}
-          </Badge>
-        {/if}
-      </Button>
-    {/each}
-  </div>
-
-  <!-- Task list -->
-  <div class="flex-1 overflow-auto">
-    {#if filteredTasks().length === 0}
-      <div class="flex h-full flex-col items-center justify-center py-10 text-center">
-        <div
-          class="mb-3 flex size-12 items-center justify-center rounded-[var(--radius-lg)] bg-[var(--surface-sunken)]"
-        >
-          <ListTodo class="size-6 text-[var(--text-tertiary)]" />
-        </div>
-        <p class="text-sm font-medium text-[var(--text-secondary)]">No tasks found</p>
-        <p class="text-xs text-[var(--text-tertiary)]">All caught up!</p>
-      </div>
-    {:else}
-      <div class="divide-y divide-[var(--border-default)]/30">
-        {#each filteredTasks() as task (task.id)}
-          {@const config = getPriorityConfig(task.priority)}
-          <a
-            href={resolve(`tasks?view=${task.id}`)}
-            class="group flex items-center gap-3 px-5 py-3 transition-all duration-200 hover:bg-[var(--color-primary-light)] dark:hover:bg-[var(--color-primary-default)]/5"
-          >
-            <!-- Status icon -->
-            <button
-              class="flex-shrink-0 text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]"
-            >
-              {#if task.status === 'Completed'}
-                <CheckCircle2 class="size-5 text-[var(--task-completed)]" />
-              {:else}
-                <Circle class="size-5" />
-              {/if}
-            </button>
-
-            <!-- Task details -->
-            <div class="min-w-0 flex-1">
-              <p
-                class="truncate text-sm font-medium text-[var(--text-primary)] transition-colors group-hover:text-[var(--color-primary-default)]
-                  {task.status === 'Completed' ? 'text-[var(--text-tertiary)] line-through' : ''}"
-              >
-                {task.subject}
-              </p>
-              <p class="mt-0.5 truncate text-xs text-[var(--text-secondary)]">{task.status}</p>
-            </div>
-
-            <!-- Priority badge -->
-            <Badge
-              variant="outline"
-              class="flex-shrink-0 border text-[10px] font-semibold {config.bg} {config.text} {config.border}"
-            >
-              {task.priority}
-            </Badge>
-
-            <!-- Due date -->
-            {#if task.dueDate}
-              <span
-                class="flex-shrink-0 text-xs font-medium tabular-nums
-                  {isOverdue(task.dueDate)
-                  ? 'text-[var(--task-overdue)]'
-                  : 'text-[var(--text-secondary)]'}"
-              >
-                {formatDate(task.dueDate)}
-              </span>
-            {/if}
-          </a>
-        {/each}
-      </div>
-    {/if}
-  </div>
-</div>
diff --git a/frontend/src/lib/components/dashboard/index.js b/frontend/src/lib/components/dashboard/index.js
deleted file mode 100644
index e9af3baf..00000000
--- a/frontend/src/lib/components/dashboard/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as KPICard } from './KPICard.svelte';
-export { default as ActivityFeed } from './ActivityFeed.svelte';
-export { default as FocusBar } from './FocusBar.svelte';
-export { default as TaskList } from './TaskList.svelte';
-export { default as HotLeadsPanel } from './HotLeadsPanel.svelte';
diff --git a/frontend/src/lib/components/icons/GithubIcon.svelte b/frontend/src/lib/components/icons/GithubIcon.svelte
deleted file mode 100644
index a46e570b..00000000
--- a/frontend/src/lib/components/icons/GithubIcon.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-  let { class: className = '', ...rest } = $props();
-</script>
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class={className}
-  {...rest}
->
-  <path
-    d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
-  />
-  <path d="M9 18c-4.51 2-5-2-7-2" />
-</svg>
diff --git a/frontend/src/lib/components/icons/LinkedinIcon.svelte b/frontend/src/lib/components/icons/LinkedinIcon.svelte
deleted file mode 100644
index 69c650bb..00000000
--- a/frontend/src/lib/components/icons/LinkedinIcon.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  let { class: className = '', ...rest } = $props();
-</script>
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  class={className}
-  {...rest}
->
-  <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z" />
-  <rect width="4" height="12" x="2" y="9" />
-  <circle cx="4" cy="4" r="2" />
-</svg>
diff --git a/frontend/src/lib/components/icons/index.js b/frontend/src/lib/components/icons/index.js
deleted file mode 100644
index 275c64e2..00000000
--- a/frontend/src/lib/components/icons/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as LinkedinIcon } from './LinkedinIcon.svelte';
-export { default as GithubIcon } from './GithubIcon.svelte';
diff --git a/frontend/src/lib/components/layout/FilterPill.svelte b/frontend/src/lib/components/layout/FilterPill.svelte
deleted file mode 100644
index 387c7b59..00000000
--- a/frontend/src/lib/components/layout/FilterPill.svelte
+++ /dev/null
@@ -1,65 +0,0 @@
-<script>
-  import { X } from '@lucide/svelte';
-  /**
-   * @type {{
-   *   label: string,
-   *   active?: boolean,
-   *   value?: string,
-   *   icon?: import('svelte').Snippet,
-   *   onclick?: (e: MouseEvent) => void,
-   *   onclear?: (e: MouseEvent) => void,
-   *   dashed?: boolean,
-   *   class?: string,
-   * }}
-   */
-  let {
-    label,
-    active = false,
-    value = '',
-    icon,
-    onclick,
-    onclear,
-    dashed = false,
-    class: className = ''
-  } = $props();
-
-  const base =
-    'inline-flex h-7 items-center gap-1.5 rounded-[var(--r-sm)] px-[9px] text-[13px] font-medium leading-none transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[color:var(--ring)]';
-  const neutral =
-    'border border-[color:var(--border-faint)] bg-[color:var(--bg-elevated)] text-[color:var(--text-muted)] hover:bg-[color:var(--bg-hover)]';
-  const activeCls =
-    'border border-[color:var(--violet)]/40 bg-[color:var(--violet-soft)] text-[color:var(--violet-soft-text)]';
-  const dashedCls =
-    'border border-dashed border-[color:var(--border-faint)] bg-transparent text-[color:var(--text-subtle)] hover:text-[color:var(--text-muted)] hover:border-[color:var(--border)]';
-</script>
-
-<button
-  type="button"
-  {onclick}
-  class="{base} {dashed ? dashedCls : active ? activeCls : neutral} {className}"
->
-  {#if icon}<span class="flex shrink-0 items-center">{@render icon()}</span>{/if}
-  <span class="truncate"
-    >{label}{#if value}<span class="ml-1 opacity-80">: {value}</span>{/if}</span
-  >
-  {#if active && onclear}
-    <span
-      role="button"
-      tabindex="-1"
-      class="-mr-1 ml-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm hover:bg-[color:var(--violet)]/15"
-      onclick={(e) => {
-        e.stopPropagation();
-        onclear(e);
-      }}
-      onkeydown={(e) => {
-        if (e.key === 'Enter') {
-          e.stopPropagation();
-          onclear(/** @type {any} */ (e));
-        }
-      }}
-      aria-label="Clear filter"
-    >
-      <X class="size-3 stroke-[2]" />
-    </span>
-  {/if}
-</button>
diff --git a/frontend/src/lib/components/layout/FilterPopover.svelte b/frontend/src/lib/components/layout/FilterPopover.svelte
deleted file mode 100644
index f68b5118..00000000
--- a/frontend/src/lib/components/layout/FilterPopover.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-  import { Filter } from '@lucide/svelte';
-  import { Button } from '#lib/components/ui/button/index.js';
-  import { Badge } from '#lib/components/ui/badge/index.js';
-  import * as Popover from '#lib/components/ui/popover/index.js';
-
-  /**
-   * @type {{
-   *   activeCount?: number,
-   *   onClear?: () => void,
-   *   children?: import('svelte').Snippet
-   * }}
-   */
-  let { activeCount = 0, onClear, children } = $props();
-
-  let open = $state(false);
-</script>
-
-<Popover.Root bind:open>
-  <Popover.Trigger asChild class="">
-    {#snippet child({ props })}
-      <Button variant="outline" {...props}>
-        <Filter class="mr-2 h-4 w-4" />
-        Filters
-        {#if activeCount > 0}
-          <Badge variant="secondary" class="ml-2">{activeCount}</Badge>
-        {/if}
-      </Button>
-    {/snippet}
-  </Popover.Trigger>
-  <Popover.Content align="end" class="w-72">
-    <div class="space-y-4">
-      <h4 class="text-sm font-medium">Filters</h4>
-      {@render children?.()}
-      {#if onClear}
-        <Button variant="ghost" onclick={onClear} class="w-full">Clear Filters</Button>
-      {/if}
-    </div>
-  </Popover.Content>
-</Popover.Root>
diff --git a/frontend/src/lib/components/layout/FilterStrip.svelte b/frontend/src/lib/components/layout/FilterStrip.svelte
deleted file mode 100644
index cd019184..00000000
--- a/frontend/src/lib/components/layout/FilterStrip.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
-  /**
-   * @type {{
-   *   children?: import('svelte').Snippet,
-   *   meta?: import('svelte').Snippet,
-   *   class?: string,
-   * }}
-   */
-  let { children, meta, class: className = '' } = $props();
-</script>
-
-<div
-  class="flex items-center gap-2 border-b border-[color:var(--border-faint)] px-7 py-2.5 md:px-8 {className}"
->
-  <div class="flex flex-wrap items-center gap-2">
-    {@render children?.()}
-  </div>
-  {#if meta}
-    <div class="ml-auto flex items-center gap-2 text-[13px] text-[color:var(--text-subtle)]">
-      {@render meta()}
-    </div>
-  {/if}
-</div>
diff --git a/frontend/src/lib/components/layout/PageHeader.svelte b/frontend/src/lib/components/layout/PageHeader.svelte
deleted file mode 100644
index 5d9029f9..00000000
--- a/frontend/src/lib/components/layout/PageHeader.svelte
+++ /dev/null
@@ -1,116 +0,0 @@
-<script>
-  import { resolve } from '$app/paths';
-  import { asInternalPath } from '#lib/utils/paths.js';
-  import { ChevronRight } from '@lucide/svelte';
-
-  /**
-   * @typedef {Object} BreadcrumbItem
-   * @property {string} label
-   * @property {string} [href]
-   */
-
-  /**
-   * @typedef {Object} Props
-   * @property {string} title
-   * @property {string} [subtitle]
-   * @property {'page' | 'display'} [size]
-   * @property {string} [eyebrow]
-   * @property {BreadcrumbItem[]} [breadcrumb]
-   * @property {import('svelte').Snippet} [titleIcon]
-   * @property {import('svelte').Snippet} [meta]
-   * @property {import('svelte').Snippet} [amount]
-   * @property {import('svelte').Snippet} [actions]
-   * @property {import('svelte').Snippet} [tabs]
-   */
-
-  /** @type {Props} */
-  let {
-    title,
-    subtitle = '',
-    size = 'page',
-    eyebrow = '',
-    breadcrumb = [],
-    titleIcon,
-    meta,
-    amount,
-    actions,
-    tabs
-  } = $props();
-</script>
-
-<header
-  class="sticky top-0 z-10 flex flex-col gap-3 bg-[color:var(--bg)] px-7 pt-6 md:px-8 {tabs
-    ? 'pb-0'
-    : 'pb-4'}"
->
-  {#if breadcrumb.length > 0}
-    <nav
-      aria-label="Breadcrumb"
-      class="flex items-center gap-1 text-[13px] leading-none text-[color:var(--text-subtle)]"
-    >
-      {#each breadcrumb as crumb, i (i)}
-        {#if i > 0}
-          <ChevronRight class="size-[14px] shrink-0 stroke-[1.6]" aria-hidden="true" />
-        {/if}
-        {#if crumb.href && i < breadcrumb.length - 1}
-          <a
-            href={resolve(asInternalPath(crumb.href))}
-            class="rounded-sm transition-colors hover:text-[color:var(--text-muted)] focus-visible:ring-1 focus-visible:ring-[color:var(--ring)] focus-visible:outline-none"
-            >{crumb.label}</a
-          >
-        {:else}
-          <span class={i === breadcrumb.length - 1 ? 'text-[color:var(--text-muted)]' : ''}
-            >{crumb.label}</span
-          >
-        {/if}
-      {/each}
-    </nav>
-  {/if}
-
-  <div class="flex min-h-[44px] items-start justify-between gap-6">
-    <div class="flex min-w-0 flex-1 items-start gap-3">
-      {#if titleIcon}
-        <div
-          class="flex size-7 shrink-0 items-center justify-center rounded-[var(--r-md)] bg-[color:var(--bg-elevated)] text-[color:var(--text-muted)]"
-        >
-          {@render titleIcon()}
-        </div>
-      {/if}
-      <div class="flex min-w-0 flex-1 flex-col gap-1">
-        {#if eyebrow}
-          <p class="label-tiny">{eyebrow}</p>
-        {/if}
-        <h1 class={size === 'display' ? 'h-display truncate' : 'h-page truncate'}>{title}</h1>
-        {#if subtitle}
-          <p class="t-body-sm truncate">{subtitle}</p>
-        {/if}
-      </div>
-    </div>
-    {#if amount || actions}
-      <div class="flex shrink-0 items-center gap-3">
-        {#if amount}
-          <div class="flex flex-col items-end gap-0.5">
-            {@render amount()}
-          </div>
-        {/if}
-        {#if actions}
-          <div class="flex items-center gap-2">
-            {@render actions()}
-          </div>
-        {/if}
-      </div>
-    {/if}
-  </div>
-
-  {#if meta}
-    <div class="flex flex-wrap items-center gap-2 text-[color:var(--text-muted)]">
-      {@render meta()}
-    </div>
-  {/if}
-
-  {#if tabs}
-    <div class="-mx-7 mt-1 border-t border-[color:var(--border-faint)] px-7 md:-mx-8 md:px-8">
-      {@render tabs()}
-    </div>
-  {/if}
-</header>
diff --git a/frontend/src/lib/components/layout/ViewTabs.svelte b/frontend/src/lib/components/layout/ViewTabs.svelte
deleted file mode 100644
index c669c8e3..00000000
--- a/frontend/src/lib/components/layout/ViewTabs.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script>
-  /**
-   * @type {{
-   *   views: { id: string, label: string, count?: number }[],
-   *   active?: string,
-   *   onSelect?: (id: string) => void,
-   * }}
-   */
-  let { views, active = views[0]?.id, onSelect } = $props();
-</script>
-
-<div class="flex items-center gap-1 overflow-x-auto" role="tablist" aria-label="Views">
-  {#each views as v (v.id)}
-    {@const isActive = v.id === active}
-    <button
-      type="button"
-      role="tab"
-      aria-selected={isActive}
-      onclick={() => onSelect?.(v.id)}
-      class="-mb-px inline-flex items-center gap-1.5 px-3 pt-2 pb-[11px] text-[14px] leading-none transition-colors focus-visible:ring-1 focus-visible:ring-[color:var(--ring)] focus-visible:outline-none {isActive
-        ? 'border-b-2 border-[color:var(--text)] font-medium text-[color:var(--text)]'
-        : 'border-b-2 border-transparent text-[color:var(--text-muted)] hover:text-[color:var(--text)]'}"
-    >
-      <span>{v.label}</span>
-      {#if v.count != null}
-        <span
-          class="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[var(--r-sm)] border border-[color:var(--border-faint)] bg-[color:var(--bg-elevated)] px-1.5 text-[11px] text-[color:var(--text-muted)] tabular-nums"
-        >
-          {v.count}
-        </span>
-      {/if}
-    </button>
-  {/each}
-</div>
diff --git a/frontend/src/lib/components/layout/index.js b/frontend/src/lib/components/layout/index.js
deleted file mode 100644
index d336987e..00000000
--- a/frontend/src/lib/components/layout/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as FilterPopover } from './FilterPopover.svelte';
-export { default as PageHeader } from './PageHeader.svelte';
-export { default as FilterPill } from './FilterPill.svelte';
-export { default as FilterStrip } from './FilterStrip.svelte';
-export { default as ViewTabs } from './ViewTabs.svelte';
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
deleted file mode 100644
index 4df874c2..00000000
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-  import { buttonVariants } from '#lib/components/ui/button/index.js';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<AlertDialogPrimitive.Action
-  bind:ref
-  data-slot="alert-dialog-action"
-  class={cn(buttonVariants(), className)}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
deleted file mode 100644
index c9a17a59..00000000
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-  import { buttonVariants } from '#lib/components/ui/button/index.js';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<AlertDialogPrimitive.Cancel
-  bind:ref
-  data-slot="alert-dialog-cancel"
-  class={cn(buttonVariants({ variant: 'outline' }), className)}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
deleted file mode 100644
index a51a0827..00000000
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-  import AlertDialogOverlay from './alert-dialog-overlay.svelte';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   portalProps?: Record<string, any>,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let {
-    ref = $bindable(null),
-    class: className,
-    portalProps = {},
-    children,
-    ...restProps
-  } = $props();
-</script>
-
-<AlertDialogPrimitive.Portal {...portalProps}>
-  <AlertDialogOverlay />
-  <AlertDialogPrimitive.Content
-    bind:ref
-    data-slot="alert-dialog-content"
-    class={cn(
-      'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200',
-      className
-    )}
-    {...restProps}
-  >
-    {@render children?.()}
-  </AlertDialogPrimitive.Content>
-</AlertDialogPrimitive.Portal>
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
deleted file mode 100644
index ca8a4f27..00000000
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<AlertDialogPrimitive.Description
-  bind:ref
-  data-slot="alert-dialog-description"
-  class={cn('text-muted-foreground text-sm', className)}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
deleted file mode 100644
index a7d5466e..00000000
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
-</script>
-
-<div
-  bind:this={ref}
-  data-slot="alert-dialog-footer"
-  class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
-  {...restProps}
->
-  {@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
deleted file mode 100644
index 4994099b..00000000
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
-</script>
-
-<div
-  bind:this={ref}
-  data-slot="alert-dialog-header"
-  class={cn('flex flex-col gap-2 text-center sm:text-left', className)}
-  {...restProps}
->
-  {@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
deleted file mode 100644
index b682823f..00000000
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
-  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<AlertDialogPrimitive.Overlay
-  bind:ref
-  data-slot="alert-dialog-overlay"
-  class={cn(
-    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-    className
-  )}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
deleted file mode 100644
index 93212cc7..00000000
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<AlertDialogPrimitive.Title
-  bind:ref
-  data-slot="alert-dialog-title"
-  class={cn('text-lg font-semibold', className)}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
deleted file mode 100644
index a45e563a..00000000
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-
-  let { ref = $bindable(null), ...restProps } = $props();
-</script>
-
-<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />
diff --git a/frontend/src/lib/components/ui/alert-dialog/index.js b/frontend/src/lib/components/ui/alert-dialog/index.js
deleted file mode 100644
index 54fb20bf..00000000
--- a/frontend/src/lib/components/ui/alert-dialog/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-import Trigger from './alert-dialog-trigger.svelte';
-import Overlay from './alert-dialog-overlay.svelte';
-import Content from './alert-dialog-content.svelte';
-import Header from './alert-dialog-header.svelte';
-import Footer from './alert-dialog-footer.svelte';
-import Title from './alert-dialog-title.svelte';
-import Description from './alert-dialog-description.svelte';
-import Cancel from './alert-dialog-cancel.svelte';
-import Action from './alert-dialog-action.svelte';
-
-const Root = AlertDialogPrimitive.Root;
-const Portal = AlertDialogPrimitive.Portal;
-
-export {
-  Root,
-  Trigger,
-  Portal,
-  Overlay,
-  Content,
-  Header,
-  Footer,
-  Title,
-  Description,
-  Cancel,
-  Action,
-  //
-  Root as AlertDialog,
-  Trigger as AlertDialogTrigger,
-  Portal as AlertDialogPortal,
-  Overlay as AlertDialogOverlay,
-  Content as AlertDialogContent,
-  Header as AlertDialogHeader,
-  Footer as AlertDialogFooter,
-  Title as AlertDialogTitle,
-  Description as AlertDialogDescription,
-  Cancel as AlertDialogCancel,
-  Action as AlertDialogAction
-};
diff --git a/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte b/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
deleted file mode 100644
index c4b5c491..00000000
--- a/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-  import { Avatar as AvatarPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-  import { gradientFor, WORKSPACE_GRADIENT } from './avatar-gradients.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   gradientSeed?: string | number,
-   *   workspace?: boolean,
-   *   style?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let {
-    ref = $bindable(null),
-    class: className,
-    gradientSeed = undefined,
-    workspace = false,
-    style: callerStyle = '',
-    ...restProps
-  } = $props();
-
-  const bg = $derived(workspace ? WORKSPACE_GRADIENT : gradientFor(gradientSeed));
-  const styleValue = $derived(`background-image: ${bg};${callerStyle ? ' ' + callerStyle : ''}`);
-</script>
-
-<AvatarPrimitive.Fallback
-  bind:ref
-  data-slot="avatar-fallback"
-  class={cn(
-    'flex size-full items-center justify-center rounded-full',
-    'leading-none font-semibold text-white',
-    className
-  )}
-  style={styleValue}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/avatar/avatar-gradients.js b/frontend/src/lib/components/ui/avatar/avatar-gradients.js
deleted file mode 100644
index 36e2c7aa..00000000
--- a/frontend/src/lib/components/ui/avatar/avatar-gradients.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export const AVATAR_GRADIENTS = [
-  'linear-gradient(135deg, #a78bfa, #7c3aed)', // 0 purple
-  'linear-gradient(135deg, #f472b6, #db2777)', // 1 pink
-  'linear-gradient(135deg, #34d399, #059669)', // 2 green
-  'linear-gradient(135deg, #60a5fa, #2563eb)', // 3 blue
-  'linear-gradient(135deg, #fbbf24, #ef4444)', // 4 orange-red
-  'linear-gradient(135deg, #67e8f9, #0891b2)', // 5 cyan
-  'linear-gradient(135deg, #fcd34d, #d97706)' // 6 amber
-];
-
-export const WORKSPACE_GRADIENT = 'linear-gradient(135deg, #ea580c, #c2410c)';
-
-// Stable string hash → bucket [0,6]. djb2-ish; only needs to be deterministic & well-spread.
-export function gradientFor(seed) {
-  if (seed == null) return AVATAR_GRADIENTS[0];
-  const s = String(seed);
-  let h = 5381;
-  for (let i = 0; i < s.length; i++) {
-    h = ((h << 5) + h + s.charCodeAt(i)) | 0;
-  }
-  return AVATAR_GRADIENTS[Math.abs(h) % AVATAR_GRADIENTS.length];
-}
diff --git a/frontend/src/lib/components/ui/avatar/avatar-image.svelte b/frontend/src/lib/components/ui/avatar/avatar-image.svelte
deleted file mode 100644
index 1744e136..00000000
--- a/frontend/src/lib/components/ui/avatar/avatar-image.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-  import { Avatar as AvatarPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<AvatarPrimitive.Image
-  bind:ref
-  data-slot="avatar-image"
-  class={cn('aspect-square size-full', className)}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/avatar/avatar.svelte b/frontend/src/lib/components/ui/avatar/avatar.svelte
deleted file mode 100644
index 1dd2db28..00000000
--- a/frontend/src/lib/components/ui/avatar/avatar.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-  import { Avatar as AvatarPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @typedef {'loading' | 'loaded' | 'error'} LoadingStatus
-   * @typedef {'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} AvatarSize
-   */
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   loadingStatus?: LoadingStatus,
-   *   size?: AvatarSize,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let {
-    ref = $bindable(null),
-    loadingStatus = $bindable(/** @type {LoadingStatus} */ ('loading')),
-    size = 'md',
-    class: className,
-    ...restProps
-  } = $props();
-
-  // Spec §6.5: 18 / 22 / 24 / 28 / 32 / 44.
-  const sizeClass = $derived(
-    {
-      xs: 'size-[18px] text-[8px]',
-      sm: 'size-[22px] text-[9px]',
-      md: 'size-[24px] text-[10px]',
-      lg: 'size-[28px] text-[11px]',
-      xl: 'size-[32px] text-[12px]',
-      '2xl': 'size-[44px] text-[14px]'
-    }[size] || 'size-[24px] text-[10px]'
-  );
-</script>
-
-<AvatarPrimitive.Root
-  bind:ref
-  bind:loadingStatus
-  data-slot="avatar"
-  data-size={size}
-  class={cn('relative flex shrink-0 overflow-hidden rounded-full', sizeClass, className)}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/avatar/index.js b/frontend/src/lib/components/ui/avatar/index.js
deleted file mode 100644
index a32de14d..00000000
--- a/frontend/src/lib/components/ui/avatar/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Root from './avatar.svelte';
-import Image from './avatar-image.svelte';
-import Fallback from './avatar-fallback.svelte';
-
-export {
-  Root,
-  Image,
-  Fallback,
-  //
-  Root as Avatar,
-  Image as AvatarImage,
-  Fallback as AvatarFallback
-};
-export { gradientFor, AVATAR_GRADIENTS, WORKSPACE_GRADIENT } from './avatar-gradients.js';
diff --git a/frontend/src/lib/components/ui/badge/badge.svelte b/frontend/src/lib/components/ui/badge/badge.svelte
deleted file mode 100644
index bb5af8ab..00000000
--- a/frontend/src/lib/components/ui/badge/badge.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script module>
-  import { tv } from 'tailwind-variants';
-
-  export const badgeVariants = tv({
-    base: [
-      'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap',
-      'rounded-full border text-[10px] font-medium leading-none',
-      'transition-[color,background-color,border-color] duration-150',
-      'focus-visible:shadow-[0_0_0_3px_var(--focus-ring)]',
-      '[&>svg]:pointer-events-none [&>svg]:size-3'
-    ].join(' '),
-    variants: {
-      variant: {
-        // Legacy shadcn variants, kept for back-compat with existing callers.
-        default:
-          'bg-primary text-primary-foreground border-transparent px-2 py-0.5 [a&]:hover:bg-primary/90',
-        secondary:
-          'bg-secondary text-secondary-foreground border-transparent px-2 py-0.5 [a&]:hover:bg-secondary/90',
-        destructive:
-          'bg-destructive text-white border-transparent px-2 py-0.5 [a&]:hover:bg-destructive/90 dark:bg-destructive/70',
-        outline:
-          'text-foreground border-[color:var(--border-faint)] bg-[color:var(--bg-elevated)] px-2 py-0.5',
-
-        // New design-system tag variants, spec §6.4.
-        customer:
-          'bg-[color:var(--green-soft)] text-[color:var(--green-soft-text)] border-transparent px-[7px] py-px',
-        vip: 'bg-[color:var(--violet-soft)] text-[color:var(--violet-soft-text)] border-transparent px-[7px] py-px',
-        meeting:
-          'bg-[color:var(--amber-soft)] text-[color:var(--amber-soft-text)] border-transparent px-[7px] py-px',
-        neutral:
-          'bg-[color:var(--bg-elevated)] text-[color:var(--text-muted)] border-[color:var(--border-faint)] px-[7px] py-px',
-        count:
-          'bg-[color:var(--bg-elevated)] text-[color:var(--text-subtle)] border-[color:var(--border-faint)] px-[5px] py-px text-[10px]'
-      }
-    },
-    defaultVariants: {
-      variant: 'default'
-    }
-  });
-
-  // Variants that render the 5px dot prefix (every spec variant except `count`).
-  const DOT_VARIANTS = new Set(['customer', 'vip', 'meeting', 'neutral']);
-</script>
-
-<script>
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   href?: string,
-   *   class?: string,
-   *   variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'customer' | 'vip' | 'meeting' | 'neutral' | 'count',
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let {
-    ref = $bindable(null),
-    href = undefined,
-    class: className,
-    variant = 'default',
-    children,
-    ...restProps
-  } = $props();
-
-  const showDot = $derived(DOT_VARIANTS.has(variant));
-</script>
-
-<svelte:element
-  this={href ? 'a' : 'span'}
-  bind:this={ref}
-  data-slot="badge"
-  data-variant={variant}
-  {href}
-  class={cn(badgeVariants({ variant }), className)}
-  {...restProps}
->
-  {#if showDot}
-    <span aria-hidden="true" class="inline-block size-[5px] shrink-0 rounded-full bg-current"
-    ></span>
-  {/if}
-  {@render children?.()}
-</svelte:element>
diff --git a/frontend/src/lib/components/ui/badge/index.js b/frontend/src/lib/components/ui/badge/index.js
deleted file mode 100644
index cde98224..00000000
--- a/frontend/src/lib/components/ui/badge/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Badge } from './badge.svelte';
-export { badgeVariants } from './badge.svelte';
diff --git a/frontend/src/lib/components/ui/bulk-action-bar/BulkActionBar.svelte b/frontend/src/lib/components/ui/bulk-action-bar/BulkActionBar.svelte
deleted file mode 100644
index af8858af..00000000
--- a/frontend/src/lib/components/ui/bulk-action-bar/BulkActionBar.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-  import { X } from '@lucide/svelte';
-  import { Button } from '#lib/components/ui/button/index.js';
-
-  /** @typedef {{ label: string, onClick: () => void, variant?: 'default'|'outline'|'destructive' }} BulkAction */
-
-  /** @type {{ count: number, actions?: BulkAction[], onClear: () => void }} */
-  let { count, actions = [], onClear } = $props();
-</script>
-
-{#if count > 0}
-  <div
-    role="region"
-    aria-label="Bulk actions"
-    class="fixed inset-x-0 bottom-4 z-40 mx-auto flex w-fit items-center gap-2 rounded-full border border-[var(--border-default)] bg-[var(--surface-default)] px-4 py-2 shadow-lg"
-  >
-    <span class="text-sm font-medium">{count} selected</span>
-    <span class="h-4 w-px bg-[var(--border-default)]"></span>
-    {#each actions as a (a.label)}
-      <Button size="sm" variant={a.variant || 'outline'} onclick={a.onClick}>{a.label}</Button>
-    {/each}
-    <button
-      type="button"
-      onclick={onClear}
-      class="ml-1 rounded-full p-1 hover:bg-[var(--surface-sunken)]"
-      aria-label="Clear selection"
-    >
-      <X class="h-4 w-4" />
-    </button>
-  </div>
-{/if}
diff --git a/frontend/src/lib/components/ui/bulk-action-bar/index.js b/frontend/src/lib/components/ui/bulk-action-bar/index.js
deleted file mode 100644
index 8976d1d4..00000000
--- a/frontend/src/lib/components/ui/bulk-action-bar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as BulkActionBar } from './BulkActionBar.svelte';
diff --git a/frontend/src/lib/components/ui/calendar/Calendar.svelte b/frontend/src/lib/components/ui/calendar/Calendar.svelte
deleted file mode 100644
index cf419bfa..00000000
--- a/frontend/src/lib/components/ui/calendar/Calendar.svelte
+++ /dev/null
@@ -1,135 +0,0 @@
-<script>
-  import { Calendar } from 'bits-ui';
-  import { ChevronLeft, ChevronRight } from '@lucide/svelte';
-  import { cn } from '#lib/utils.js';
-  import { today, getLocalTimeZone } from '@internationalized/date';
-
-  /**
-   * @type {{
-   *   value?: import('@internationalized/date').DateValue | undefined,
-   *   onValueChange?: (value: import('@internationalized/date').DateValue | undefined) => void,
-   *   class?: string,
-   * }}
-   */
-  let { value = $bindable(), onValueChange, class: className } = $props();
-
-  // Placeholder controls which month/year is displayed
-  let placeholder = $state(value || today(getLocalTimeZone()));
-
-  // Sync placeholder when value changes
-  $effect(() => {
-    if (value) {
-      placeholder = value;
-    }
-  });
-
-  // Generate year options (100 years back, 10 years forward)
-  const currentYear = today(getLocalTimeZone()).year;
-  const years = Array.from({ length: 111 }, (_, i) => currentYear - 100 + i);
-
-  const months = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December'
-  ];
-</script>
-
-<Calendar.Root
-  type="single"
-  weekdayFormat="short"
-  fixedWeeks={true}
-  bind:value
-  bind:placeholder
-  {onValueChange}
-  class={cn('p-3', className)}
->
-  {#snippet children({ months: calendarMonths, weekdays })}
-    <Calendar.Header class="relative flex w-full items-center justify-between gap-1 pb-2">
-      <Calendar.PrevButton
-        class="inline-flex h-7 w-7 items-center justify-center rounded-md border border-gray-200 bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100 dark:border-gray-700"
-      >
-        <ChevronLeft class="h-4 w-4" />
-      </Calendar.PrevButton>
-
-      <div class="flex items-center gap-1">
-        <!-- Month Select -->
-        <select
-          class="h-7 rounded-md border border-gray-200 bg-transparent px-2 text-sm font-medium focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-700"
-          value={placeholder?.month}
-          onchange={(e) => {
-            const target = /** @type {HTMLSelectElement} */ (e.target);
-            if (placeholder) {
-              placeholder = placeholder.set({ month: parseInt(target.value) });
-            }
-          }}
-        >
-          {#each months as month, i (month)}
-            <option value={i + 1}>{month}</option>
-          {/each}
-        </select>
-
-        <!-- Year Select -->
-        <select
-          class="h-7 rounded-md border border-gray-200 bg-transparent px-2 text-sm font-medium focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-700"
-          value={placeholder?.year}
-          onchange={(e) => {
-            const target = /** @type {HTMLSelectElement} */ (e.target);
-            if (placeholder) {
-              placeholder = placeholder.set({ year: parseInt(target.value) });
-            }
-          }}
-        >
-          {#each years as year (year)}
-            <option value={year}>{year}</option>
-          {/each}
-        </select>
-      </div>
-
-      <Calendar.NextButton
-        class="inline-flex h-7 w-7 items-center justify-center rounded-md border border-gray-200 bg-transparent p-0 opacity-50 transition-opacity hover:opacity-100 dark:border-gray-700"
-      >
-        <ChevronRight class="h-4 w-4" />
-      </Calendar.NextButton>
-    </Calendar.Header>
-
-    {#each calendarMonths as month (month.value.toString())}
-      <Calendar.Grid class="w-full border-collapse space-y-1">
-        <Calendar.GridHead>
-          <Calendar.GridRow class="flex">
-            {#each weekdays as day (day)}
-              <Calendar.HeadCell
-                class="w-8 rounded-md text-[0.8rem] font-normal text-gray-500 dark:text-gray-400"
-              >
-                {day.slice(0, 2)}
-              </Calendar.HeadCell>
-            {/each}
-          </Calendar.GridRow>
-        </Calendar.GridHead>
-        <Calendar.GridBody>
-          {#each month.weeks as week, weekIndex (weekIndex)}
-            <Calendar.GridRow class="mt-2 flex w-full">
-              {#each week as date (date.toString())}
-                <Calendar.Cell {date} month={month.value} class="relative p-0 text-center text-sm">
-                  <Calendar.Day
-                    class="inline-flex h-8 w-8 items-center justify-center rounded-md p-0 text-sm font-normal transition-colors hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[disabled]:text-gray-400 data-[outside-month]:text-gray-400 data-[outside-month]:opacity-50 data-[selected]:bg-blue-600 data-[selected]:text-white data-[today]:bg-gray-100 data-[today]:font-semibold dark:hover:bg-gray-800 dark:data-[selected]:bg-blue-600 dark:data-[today]:bg-gray-800"
-                  >
-                    {date.day}
-                  </Calendar.Day>
-                </Calendar.Cell>
-              {/each}
-            </Calendar.GridRow>
-          {/each}
-        </Calendar.GridBody>
-      </Calendar.Grid>
-    {/each}
-  {/snippet}
-</Calendar.Root>
diff --git a/frontend/src/lib/components/ui/calendar/index.js b/frontend/src/lib/components/ui/calendar/index.js
deleted file mode 100644
index fa9f6624..00000000
--- a/frontend/src/lib/components/ui/calendar/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Calendar from './Calendar.svelte';
-
-export { Calendar };
diff --git a/frontend/src/lib/components/ui/card/card-content.svelte b/frontend/src/lib/components/ui/card/card-content.svelte
deleted file mode 100644
index 844c8681..00000000
--- a/frontend/src/lib/components/ui/card/card-content.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  /** @type {{ ref?: HTMLElement | null, class?: string, children?: import('svelte').Snippet, [key: string]: any }} */
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
-</script>
-
-<div
-  bind:this={ref}
-  data-slot="card-content"
-  class={cn('px-4 py-3.5 text-[13px] leading-[1.55] text-[color:var(--text-muted)]', className)}
-  {...restProps}
->
-  {@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/card/card-description.svelte b/frontend/src/lib/components/ui/card/card-description.svelte
deleted file mode 100644
index 86378638..00000000
--- a/frontend/src/lib/components/ui/card/card-description.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-
-  let { ref = $bindable(null), class: className = undefined, children, ...restProps } = $props();
-</script>
-
-<p
-  bind:this={ref}
-  data-slot="card-description"
-  class={cn('text-muted-foreground text-sm', className)}
-  {...restProps}
->
-  {@render children?.()}
-</p>
diff --git a/frontend/src/lib/components/ui/card/card-header.svelte b/frontend/src/lib/components/ui/card/card-header.svelte
deleted file mode 100644
index df901bcb..00000000
--- a/frontend/src/lib/components/ui/card/card-header.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  let { ref = $bindable(null), class: className = undefined, children, ...restProps } = $props();
-</script>
-
-<div
-  bind:this={ref}
-  data-slot="card-header"
-  class={cn(
-    '@container/card-header flex items-center justify-between gap-2',
-    'border-b border-[color:var(--border-faint)] px-4 py-3',
-    'has-data-[slot=card-action]:grid-cols-[1fr_auto]',
-    className
-  )}
-  {...restProps}
->
-  {@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/card/card-title.svelte b/frontend/src/lib/components/ui/card/card-title.svelte
deleted file mode 100644
index c81ec6ef..00000000
--- a/frontend/src/lib/components/ui/card/card-title.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  let { ref = $bindable(null), class: className = undefined, children, ...restProps } = $props();
-</script>
-
-<div
-  bind:this={ref}
-  data-slot="card-title"
-  class={cn(
-    'text-[10px] leading-none font-medium tracking-[0.06em] text-[color:var(--text-muted)] uppercase',
-    className
-  )}
-  {...restProps}
->
-  {@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/card/card.svelte b/frontend/src/lib/components/ui/card/card.svelte
deleted file mode 100644
index 0c0fc423..00000000
--- a/frontend/src/lib/components/ui/card/card.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
-</script>
-
-<div
-  bind:this={ref}
-  data-slot="card"
-  class={cn(
-    'flex flex-col overflow-hidden',
-    'rounded-[var(--r-lg)] border border-[color:var(--border-faint)]',
-    'bg-[color:var(--bg-card)] text-[color:var(--text)]',
-    className
-  )}
-  {...restProps}
->
-  {@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/card/index.js b/frontend/src/lib/components/ui/card/index.js
deleted file mode 100644
index 0fcc220f..00000000
--- a/frontend/src/lib/components/ui/card/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Root from './card.svelte';
-import Content from './card-content.svelte';
-import Description from './card-description.svelte';
-import Header from './card-header.svelte';
-import Title from './card-title.svelte';
-
-export {
-  Root,
-  Content,
-  Description,
-  Header,
-  Title,
-  //
-  Root as Card,
-  Content as CardContent,
-  Description as CardDescription,
-  Header as CardHeader,
-  Title as CardTitle
-};
diff --git a/frontend/src/lib/components/ui/crm-drawer/CrmDrawer.svelte b/frontend/src/lib/components/ui/crm-drawer/CrmDrawer.svelte
deleted file mode 100644
index d73abbc7..00000000
--- a/frontend/src/lib/components/ui/crm-drawer/CrmDrawer.svelte
+++ /dev/null
@@ -1,301 +0,0 @@
-<script>
-  import { resolve } from '$app/paths';
-  import { asInternalPath } from '#lib/utils/paths.js';
-  import { X, Trash2, Maximize2 } from '@lucide/svelte';
-  import * as Sheet from '#lib/components/ui/sheet/index.js';
-  import { Skeleton } from '#lib/components/ui/skeleton/index.js';
-  import { cn } from '#lib/utils.js';
-  import CrmPropertyRow from './CrmPropertyRow.svelte';
-
-  /**
-   * @type {{
-   *   open?: boolean,
-   *   onOpenChange?: (open: boolean) => void,
-   *   data?: Record<string, any> | null,
-   *   columns?: any[],
-   *   titleKey?: string,
-   *   titlePlaceholder?: string,
-   *   titleEditable?: boolean,
-   *   headerLabel?: string,
-   *   onFieldChange?: (field: string, value: any) => void,
-   *   onDelete?: () => void,
-   *   onClose?: () => void,
-   *   loading?: boolean,
-   *   mode?: 'view' | 'create',
-   *   fullPageHref?: string,
-   *   class?: string,
-   *   metaSection?: import('svelte').Snippet,
-   *   banner?: import('svelte').Snippet,
-   *   activitySection?: import('svelte').Snippet,
-   *   footerActions?: import('svelte').Snippet,
-   * }}
-   */
-  let {
-    open = $bindable(false),
-    onOpenChange,
-    data = null,
-    columns = [],
-    titleKey = 'name',
-    titlePlaceholder = 'Untitled',
-    titleEditable = true,
-    headerLabel = 'Item',
-    onFieldChange,
-    onDelete,
-    onClose,
-    loading = false,
-    mode = 'view',
-    fullPageHref = '',
-    class: className,
-    metaSection,
-    banner,
-    activitySection,
-    footerActions
-  } = $props();
-
-  /**
-   * Get field value from data
-   * @param {any} col
-   */
-  function getFieldValue(col) {
-    if (!data) return '';
-    if (col.getValue) {
-      return col.getValue(data);
-    }
-    return data[col.key] ?? '';
-  }
-
-  /**
-   * Handle field change
-   * @param {string} key
-   * @param {any} value
-   */
-  function handleFieldChange(key, value) {
-    onFieldChange?.(key, value);
-  }
-
-  /**
-   * Handle title change
-   * @param {Event} e
-   */
-  function handleTitleChange(e) {
-    const target = /** @type {HTMLInputElement} */ (e.target);
-    onFieldChange?.(titleKey, target.value);
-  }
-
-  /**
-   * Close the drawer
-   */
-  function closeDrawer() {
-    open = false;
-    onOpenChange?.(false);
-    onClose?.();
-  }
-
-  /**
-   * Handle delete
-   */
-  function handleDelete() {
-    onDelete?.();
-  }
-
-  // Get title value
-  const titleValue = $derived(data?.[titleKey] || '');
-
-  // Stable id for ARIA labelling, Sheet.Content references this so screen readers
-  // announce the lead title when the dialog opens.
-  const titleId = $derived(`crm-drawer-title-${data?.id ?? 'new'}`);
-
-  // All non-title fields to render. In create mode, hide fields marked hideOnCreate
-  // (typically read-only system fields like created/closed dates).
-  const visibleColumns = $derived(
-    columns.filter((col) => {
-      if (col.key === titleKey) return false;
-      if (mode === 'create' && col.hideOnCreate) return false;
-      return true;
-    })
-  );
-</script>
-
-<Sheet.Root bind:open onOpenChange={(value) => onOpenChange?.(value)}>
-  <Sheet.Content
-    side="right"
-    aria-labelledby={titleId}
-    class={cn(
-      'border-border/50 bg-background/95 w-[480px] overflow-hidden border-l p-0 backdrop-blur-xl sm:max-w-[480px]',
-      className
-    )}
-  >
-    {#if loading}
-      <!-- Loading skeleton with premium styling -->
-      <div class="flex h-full flex-col">
-        <!-- Header skeleton -->
-        <div class="border-border/40 relative border-b px-6 py-4">
-          <div class="flex items-center justify-between">
-            <Skeleton class="h-4 w-16 rounded-md" />
-            <Skeleton class="h-8 w-8 rounded-lg" />
-          </div>
-        </div>
-
-        <!-- Content skeleton -->
-        <div class="flex-1 overflow-y-auto">
-          <div class="px-6 pt-8 pb-6">
-            <Skeleton class="h-9 w-64 rounded-lg" />
-          </div>
-          <div class="space-y-2 px-6 pb-8">
-            {#each { length: 6 } as _, index (index)}
-              <div class="bg-muted/20 flex items-center gap-4 rounded-lg px-3 py-3">
-                <Skeleton class="h-6 w-6 rounded-md" />
-                <Skeleton class="h-4 w-24" />
-                <Skeleton class="ml-auto h-5 w-32 rounded-md" />
-              </div>
-            {/each}
-          </div>
-        </div>
-      </div>
-    {:else}
-      <div class="flex h-full flex-col">
-        <!-- Premium Header -->
-        <div
-          class="border-border/40 from-muted/30 relative border-b bg-gradient-to-b to-transparent"
-        >
-          <!-- Ambient glow -->
-          <div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
-            <div
-              class="bg-primary/5 absolute -top-12 left-1/4 h-24 w-48 rounded-full blur-2xl"
-            ></div>
-          </div>
-
-          <div class="relative flex items-center justify-between px-6 py-4">
-            <div class="flex items-center gap-2">
-              <span
-                class="bg-primary/10 text-primary rounded-md px-2 py-1 text-xs font-semibold tracking-wider uppercase"
-              >
-                {headerLabel}
-              </span>
-              {#if mode === 'create'}
-                <span class="text-muted-foreground text-xs">New</span>
-              {/if}
-            </div>
-            <div class="flex items-center gap-1">
-              {#if fullPageHref && mode !== 'create'}
-                <a
-                  href={resolve(asInternalPath(fullPageHref))}
-                  aria-label="Open full page"
-                  title="Open full page"
-                  class="text-muted-foreground hover:bg-muted/60 hover:text-foreground flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150"
-                >
-                  <Maximize2 class="h-3.5 w-3.5" aria-hidden="true" />
-                </a>
-              {/if}
-              <button
-                type="button"
-                onclick={closeDrawer}
-                aria-label="Close"
-                class="text-muted-foreground hover:bg-muted/60 hover:text-foreground flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150"
-              >
-                <X class="h-4 w-4" aria-hidden="true" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Scrollable content -->
-        <div class="flex-1 overflow-x-hidden overflow-y-auto">
-          {#if banner}
-            {@render banner()}
-          {/if}
-
-          <!-- Title section with elegant styling -->
-          <div class="px-6 pt-8 pb-6">
-            {#if titleEditable}
-              <input
-                id={titleId}
-                type="text"
-                value={titleValue}
-                oninput={handleTitleChange}
-                placeholder={titlePlaceholder}
-                aria-label="{headerLabel} title"
-                class="text-foreground placeholder:text-muted-foreground/30 hover:bg-muted/40 focus:bg-muted/40 focus:ring-primary/20 -mx-2 w-[calc(100%+1rem)] rounded-md border-0 bg-transparent px-2 py-1 text-2xl font-bold tracking-tight transition-colors outline-none focus:ring-1"
-                style="letter-spacing: -0.025em;"
-              />
-            {:else}
-              <h2
-                id={titleId}
-                class="text-foreground text-2xl font-bold tracking-tight"
-                style="letter-spacing: -0.025em;"
-              >
-                {titleValue || titlePlaceholder}
-              </h2>
-            {/if}
-            {#if metaSection && mode !== 'create'}
-              <div class="mt-3">
-                {@render metaSection()}
-              </div>
-            {/if}
-          </div>
-
-          <!-- Properties section with refined spacing -->
-          <div class="px-6 pb-8">
-            <div class="space-y-1">
-              {#each visibleColumns as col (col.key)}
-                <CrmPropertyRow
-                  label={col.label}
-                  value={getFieldValue(col)}
-                  type={col.type || 'text'}
-                  icon={col.icon}
-                  options={col.options}
-                  placeholder={col.placeholder}
-                  emptyText={col.emptyText}
-                  editable={col.editable !== false}
-                  required={col.required === true}
-                  prefix={col.prefix}
-                  loading={col.loading === true}
-                  loadingError={col.loadingError || ''}
-                  onRetry={col.onRetry}
-                  onchange={(value) => handleFieldChange(col.key, value)}
-                />
-              {/each}
-            </div>
-          </div>
-
-          <!-- Activity section with refined styling -->
-          {#if activitySection}
-            <div
-              class="via-border mx-6 h-px bg-gradient-to-r from-transparent to-transparent"
-            ></div>
-            <div class="px-6 py-6">
-              {@render activitySection()}
-            </div>
-          {/if}
-        </div>
-
-        <!-- Premium Footer -->
-        <div
-          class="border-border/40 from-muted/20 relative mt-auto border-t bg-gradient-to-t to-transparent"
-        >
-          <div class="flex items-center justify-between px-6 py-4">
-            <!-- Delete button -->
-            {#if onDelete && mode !== 'create'}
-              <button
-                onclick={handleDelete}
-                class="group text-destructive hover:bg-destructive/10 flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-150"
-              >
-                <Trash2 class="h-4 w-4 transition-transform group-hover:scale-110" />
-                Delete
-              </button>
-            {:else}
-              <div></div>
-            {/if}
-
-            <!-- Custom footer actions -->
-            {#if footerActions}
-              <div class="flex items-center gap-2">
-                {@render footerActions()}
-              </div>
-            {/if}
-          </div>
-        </div>
-      </div>
-    {/if}
-  </Sheet.Content>
-</Sheet.Root>
diff --git a/frontend/src/lib/components/ui/crm-drawer/CrmPropertyRow.svelte b/frontend/src/lib/components/ui/crm-drawer/CrmPropertyRow.svelte
deleted file mode 100644
index 8acba289..00000000
--- a/frontend/src/lib/components/ui/crm-drawer/CrmPropertyRow.svelte
+++ /dev/null
@@ -1,482 +0,0 @@
-<script>
-  import { Check, Calendar as CalendarIcon } from '@lucide/svelte';
-  import * as DropdownMenu from '#lib/components/ui/dropdown-menu/index.js';
-  import * as Popover from '#lib/components/ui/popover/index.js';
-  import { Calendar } from '#lib/components/ui/calendar/index.js';
-  import { EditableMultiSelect } from '#lib/components/ui/editable-field/index.js';
-  import { cn } from '#lib/utils.js';
-  import { formatCurrency } from '#lib/utils/formatting.js';
-  import { parseDate } from '@internationalized/date';
-
-  /**
-   * @type {{
-   *   label: string,
-   *   value?: any,
-   *   type?: 'text' | 'email' | 'number' | 'date' | 'select' | 'checkbox' | 'boolean' | 'multiselect' | 'textarea' | 'color' | 'readonly',
-   *   icon?: import('svelte').Component,
-   *   options?: any[],
-   *   placeholder?: string,
-   *   emptyText?: string,
-   *   editable?: boolean,
-   *   required?: boolean,
-   *   error?: string,
-   *   id?: string,
-   *   prefix?: string,
-   *   loading?: boolean,
-   *   loadingError?: string,
-   *   onRetry?: () => void,
-   *   onchange?: (value: any) => void,
-   *   class?: string,
-   * }}
-   */
-  let {
-    label,
-    value = '',
-    type = 'text',
-    icon: Icon,
-    options = [],
-    placeholder = '',
-    emptyText = '',
-    editable = true,
-    required = false,
-    error = '',
-    id = '',
-    prefix = '',
-    loading = false,
-    loadingError = '',
-    onRetry,
-    onchange,
-    class: className
-  } = $props();
-
-  // Stable id for ARIA wiring; falls back to a slug of the label
-  const inputId = $derived(
-    id ||
-      `prop-${label
-        .toLowerCase()
-        .replace(/[^a-z0-9]+/g, '-')
-        .replace(/^-|-$/g, '')}`
-  );
-  const labelId = $derived(`${inputId}-label`);
-  const errorId = $derived(`${inputId}-error`);
-
-  // Plain-text rendering for read-only text-like fields
-  const isPlainReadonly = $derived(
-    !editable && (type === 'text' || type === 'email' || type === 'number' || type === 'textarea')
-  );
-
-  // Read-only date renders as plain formatted text instead of a disabled-looking button
-  const isReadonlyDate = $derived(!editable && type === 'date');
-
-  // Read-only select renders the colored badge as a static span (no dropdown chrome)
-  const isReadonlySelect = $derived(!editable && type === 'select');
-
-  /**
-   * Get option style for select
-   * @param {string} val
-   */
-  function getOptionStyle(val) {
-    if (type !== 'select') return '';
-    const opt = options.find((/** @type {any} */ o) => o.value === val);
-    return opt?.color || 'bg-gray-100 text-gray-700';
-  }
-
-  /**
-   * Get option label for select
-   * @param {string} val
-   */
-  function getOptionLabel(val) {
-    if (type !== 'select') return val;
-    const opt = options.find((/** @type {any} */ o) => o.value === val);
-    return opt?.label || val || emptyText || 'Select...';
-  }
-
-  /**
-   * Get option background color class (for the dot)
-   * @param {string} val
-   */
-  function getOptionBgColor(val) {
-    if (type !== 'select') return '';
-    const opt = options.find((/** @type {any} */ o) => o.value === val);
-    if (!opt?.color) return 'bg-gray-400';
-    // Extract bg class from color string (e.g., "bg-emerald-100 text-emerald-700" -> "bg-emerald-500")
-    const match = opt.color.match(/bg-(\w+)-\d+/);
-    if (match) {
-      return `bg-${match[1]}-500`;
-    }
-    return 'bg-gray-400';
-  }
-
-  /**
-   * Parse string date to DateValue
-   * @param {string} dateStr
-   */
-  function parseDateValue(dateStr) {
-    if (!dateStr) return undefined;
-    try {
-      return parseDate(dateStr);
-    } catch {
-      return undefined;
-    }
-  }
-
-  /**
-   * Format date for display. Accepts a YYYY-MM-DD string or an ISO datetime.
-   * @param {string} dateStr
-   */
-  function formatDateDisplay(dateStr) {
-    if (!dateStr) return placeholder || 'Pick a date';
-    try {
-      // If we got just YYYY-MM-DD, pin it to local midnight; otherwise let Date parse the ISO string.
-      const isoLike = /T|\s/.test(dateStr) ? dateStr : `${dateStr}T00:00:00`;
-      const date = new Date(isoLike);
-      if (Number.isNaN(date.getTime())) return dateStr;
-      return date.toLocaleDateString('en-US', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric'
-      });
-    } catch {
-      return dateStr;
-    }
-  }
-
-  /**
-   * Handle calendar date change
-   * @param {import('@internationalized/date').DateValue | undefined} dateValue
-   */
-  function handleCalendarChange(dateValue) {
-    if (dateValue) {
-      onchange?.(dateValue.toString());
-      datePopoverOpen = false;
-    }
-  }
-
-  // State for date popover
-  let datePopoverOpen = $state(false);
-
-  /**
-   * Format number with optional currency
-   * @param {number | string} val
-   */
-  function formatNumber(val) {
-    const num = typeof val === 'string' ? parseFloat(val) : val;
-    if (isNaN(num)) return emptyText || '0';
-    if (prefix === '$') {
-      return formatCurrency(num);
-    }
-    return prefix + num.toLocaleString();
-  }
-
-  /**
-   * Handle text input
-   * @param {Event} e
-   */
-  function handleInput(e) {
-    const target = /** @type {HTMLInputElement} */ (e.target);
-    onchange?.(target.value);
-  }
-
-  /**
-   * Handle number input
-   * @param {Event} e
-   */
-  function handleNumberInput(e) {
-    const target = /** @type {HTMLInputElement} */ (e.target);
-    onchange?.(parseFloat(target.value) || 0);
-  }
-
-  /**
-   * Handle checkbox toggle
-   */
-  function handleCheckboxToggle() {
-    onchange?.(!value);
-  }
-
-  /**
-   * Handle color input
-   * @param {Event} e
-   */
-  function handleColorInput(e) {
-    const target = /** @type {HTMLInputElement} */ (e.target);
-    onchange?.(target.value);
-  }
-
-  /**
-   * Handle select change
-   * @param {string} newValue
-   */
-  function handleSelectChange(newValue) {
-    onchange?.(newValue);
-  }
-
-  /**
-   * Handle multiselect change
-   * @param {string[]} newValue
-   */
-  function handleMultiSelectChange(newValue) {
-    onchange?.(newValue);
-  }
-</script>
-
-<div class="flex flex-col">
-  <div
-    class={cn(
-      'group hover:bg-muted/40 -mx-3 flex min-h-[44px] items-center rounded-lg px-3 transition-all duration-150',
-      className
-    )}
-  >
-    <!-- Label with icon. Uses <label for> so clicking focuses the input -->
-    <label
-      for={inputId}
-      id={labelId}
-      class="text-muted-foreground flex w-32 shrink-0 items-center gap-2.5 text-[13px] font-medium"
-    >
-      {#if Icon}
-        <div class="bg-muted/50 flex h-6 w-6 items-center justify-center rounded-md">
-          <Icon class="text-muted-foreground/70 h-3.5 w-3.5" aria-hidden="true" />
-        </div>
-      {/if}
-      <span>
-        {label}
-        {#if required}
-          <span class="text-destructive ml-0.5" aria-hidden="true">*</span>
-        {/if}
-      </span>
-    </label>
-
-    <!-- Value -->
-    <div class="min-w-0 flex-1">
-      {#if isPlainReadonly}
-        <span
-          class={cn('block px-2.5 py-1.5 text-sm', type === 'textarea' && 'whitespace-pre-wrap')}
-          aria-labelledby={labelId}
-        >
-          {#if value !== null && value !== undefined && value !== ''}
-            <span class="text-foreground font-medium">
-              {type === 'number' ? formatNumber(value) : value}
-            </span>
-          {:else}
-            <span class="text-muted-foreground/40 italic">{emptyText || '—'}</span>
-          {/if}
-        </span>
-      {:else if type === 'text' || type === 'email'}
-        <input
-          id={inputId}
-          {type}
-          {value}
-          oninput={handleInput}
-          {placeholder}
-          disabled={!editable}
-          aria-labelledby={labelId}
-          aria-required={required ? 'true' : undefined}
-          aria-invalid={error ? 'true' : undefined}
-          aria-describedby={error ? errorId : undefined}
-          class="text-foreground placeholder:text-muted-foreground/40 focus:bg-muted/30 focus:ring-primary/20 aria-[invalid=true]:ring-destructive/40 w-full rounded-lg border-0 bg-transparent px-2.5 py-1.5 text-sm font-medium transition-all outline-none focus:ring-1 aria-[invalid=true]:ring-1"
-        />
-      {:else if type === 'number'}
-        <div class="flex items-center">
-          {#if prefix}
-            <span class="text-muted-foreground mr-1.5 text-sm font-medium" aria-hidden="true"
-              >{prefix}</span
-            >
-          {/if}
-          <input
-            id={inputId}
-            type="number"
-            value={value || 0}
-            oninput={handleNumberInput}
-            {placeholder}
-            disabled={!editable}
-            aria-labelledby={labelId}
-            aria-required={required ? 'true' : undefined}
-            aria-invalid={error ? 'true' : undefined}
-            aria-describedby={error ? errorId : undefined}
-            class="text-foreground placeholder:text-muted-foreground/40 focus:bg-muted/30 focus:ring-primary/20 aria-[invalid=true]:ring-destructive/40 w-full rounded-lg border-0 bg-transparent px-2 py-1.5 text-sm font-medium tabular-nums transition-all outline-none focus:ring-1 aria-[invalid=true]:ring-1"
-          />
-        </div>
-      {:else if isReadonlyDate}
-        <span
-          class="text-foreground block px-2.5 py-1.5 text-sm font-medium"
-          aria-labelledby={labelId}
-        >
-          {#if value}
-            {formatDateDisplay(value)}
-          {:else}
-            <span class="text-muted-foreground/40 italic">{emptyText || '—'}</span>
-          {/if}
-        </span>
-      {:else if type === 'date'}
-        <Popover.Root bind:open={datePopoverOpen}>
-          <Popover.Trigger disabled={!editable} class="w-full">
-            {#snippet child({ props })}
-              <button
-                {...props}
-                type="button"
-                id={inputId}
-                aria-labelledby={labelId}
-                aria-describedby={error ? errorId : undefined}
-                class={cn(
-                  'hover:bg-muted/30 inline-flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all',
-                  !value ? 'text-muted-foreground/50' : 'text-foreground',
-                  !editable && 'cursor-default hover:bg-transparent',
-                  error && 'ring-destructive/40 ring-1'
-                )}
-              >
-                <CalendarIcon
-                  class="text-muted-foreground/60 h-3.5 w-3.5 shrink-0"
-                  aria-hidden="true"
-                />
-                {formatDateDisplay(value)}
-              </button>
-            {/snippet}
-          </Popover.Trigger>
-          <Popover.Content class="w-auto p-0" align="start">
-            <Calendar value={parseDateValue(value)} onValueChange={handleCalendarChange} />
-          </Popover.Content>
-        </Popover.Root>
-      {:else if type === 'textarea'}
-        <textarea
-          id={inputId}
-          oninput={handleInput}
-          {placeholder}
-          disabled={!editable}
-          rows={3}
-          aria-labelledby={labelId}
-          aria-required={required ? 'true' : undefined}
-          aria-invalid={error ? 'true' : undefined}
-          aria-describedby={error ? errorId : undefined}
-          class="text-foreground placeholder:text-muted-foreground/40 focus:bg-muted/30 focus:ring-primary/20 aria-[invalid=true]:ring-destructive/40 w-full resize-none rounded-lg border-0 bg-transparent px-2.5 py-1.5 text-sm transition-all outline-none focus:ring-1 aria-[invalid=true]:ring-1"
-          >{value || ''}</textarea
-        >
-      {:else if isReadonlySelect}
-        <span
-          aria-labelledby={labelId}
-          class="inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-semibold ring-1 ring-black/5 ring-inset dark:ring-white/10 {getOptionStyle(
-            value
-          )}"
-        >
-          <span
-            aria-hidden="true"
-            class="h-2 w-2 rounded-full ring-1 ring-black/10 ring-inset dark:ring-white/20 {getOptionBgColor(
-              value
-            )}"
-          ></span>
-          {getOptionLabel(value)}
-        </span>
-      {:else if type === 'select'}
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger disabled={!editable}>
-            {#snippet child({ props })}
-              <button
-                {...props}
-                type="button"
-                id={inputId}
-                aria-labelledby={labelId}
-                aria-describedby={error ? errorId : undefined}
-                class={cn(
-                  'inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-semibold shadow-sm ring-1 transition-all duration-150 ring-inset hover:shadow',
-                  error ? 'ring-destructive/40' : 'ring-black/5 dark:ring-white/10',
-                  getOptionStyle(value)
-                )}
-              >
-                <span
-                  aria-hidden="true"
-                  class="h-2 w-2 rounded-full ring-1 ring-black/10 ring-inset dark:ring-white/20 {getOptionBgColor(
-                    value
-                  )}"
-                ></span>
-                {getOptionLabel(value)}
-              </button>
-            {/snippet}
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content align="start" class="min-w-48 p-1.5">
-            {#each options as option (option.value)}
-              <DropdownMenu.Item
-                onclick={() => handleSelectChange(option.value)}
-                class="flex items-center gap-2.5 rounded-lg px-2.5 py-2"
-              >
-                <span
-                  aria-hidden="true"
-                  class="h-2.5 w-2.5 rounded-full ring-1 ring-black/10 ring-inset dark:ring-white/20 {option.color?.split(
-                    ' '
-                  )[0] || 'bg-gray-400'}"
-                ></span>
-                <span class="font-medium">{option.label}</span>
-                {#if value === option.value}
-                  <Check class="text-primary ml-auto h-4 w-4" aria-hidden="true" />
-                {/if}
-              </DropdownMenu.Item>
-            {/each}
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      {:else if type === 'checkbox' || type === 'boolean'}
-        <button
-          type="button"
-          id={inputId}
-          role="checkbox"
-          aria-checked={value ? 'true' : 'false'}
-          aria-labelledby={labelId}
-          aria-required={required ? 'true' : undefined}
-          aria-invalid={error ? 'true' : undefined}
-          aria-describedby={error ? errorId : undefined}
-          onclick={handleCheckboxToggle}
-          disabled={!editable}
-          class="flex h-5 w-5 items-center justify-center rounded-md border-2 transition-all duration-150 {value
-            ? 'border-primary bg-primary shadow-primary/25 shadow-sm'
-            : 'border-muted-foreground/30 hover:border-muted-foreground/50'}"
-        >
-          {#if value}
-            <Check class="text-primary-foreground h-3.5 w-3.5" aria-hidden="true" />
-          {/if}
-        </button>
-      {:else if type === 'color'}
-        <div class="flex items-center gap-3 px-2 py-1">
-          <input
-            id={inputId}
-            type="color"
-            value={value || '#3B82F6'}
-            oninput={handleColorInput}
-            disabled={!editable}
-            aria-labelledby={labelId}
-            aria-required={required ? 'true' : undefined}
-            aria-invalid={error ? 'true' : undefined}
-            aria-describedby={error ? errorId : undefined}
-            class="border-border/50 h-8 w-10 cursor-pointer rounded-lg border bg-transparent p-0.5 shadow-sm"
-          />
-          <span class="text-muted-foreground font-mono text-xs">{value || '#3B82F6'}</span>
-        </div>
-      {:else if type === 'multiselect'}
-        <EditableMultiSelect
-          value={Array.isArray(value) ? value : []}
-          {options}
-          {placeholder}
-          emptyText={emptyText || 'None selected'}
-          disabled={!editable}
-          {loading}
-          error={loadingError}
-          {onRetry}
-          onchange={handleMultiSelectChange}
-        />
-      {:else if type === 'readonly'}
-        <span class="text-foreground px-2.5 py-1.5 text-sm font-medium" aria-labelledby={labelId}>
-          {#if value}
-            {value}
-          {:else}
-            <span class="text-muted-foreground/40 italic">{emptyText || '—'}</span>
-          {/if}
-        </span>
-      {/if}
-    </div>
-  </div>
-
-  {#if error}
-    <p
-      id={errorId}
-      class="text-destructive ml-32 px-2.5 pt-0.5 pb-1 text-[11px] font-medium"
-      role="alert"
-    >
-      {error}
-    </p>
-  {/if}
-</div>
diff --git a/frontend/src/lib/components/ui/crm-drawer/index.js b/frontend/src/lib/components/ui/crm-drawer/index.js
deleted file mode 100644
index 81d814b8..00000000
--- a/frontend/src/lib/components/ui/crm-drawer/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as CrmDrawer } from './CrmDrawer.svelte';
-export { default as CrmPropertyRow } from './CrmPropertyRow.svelte';
diff --git a/frontend/src/lib/components/ui/crm-table/CrmTable.svelte b/frontend/src/lib/components/ui/crm-table/CrmTable.svelte
deleted file mode 100644
index 4fae2995..00000000
--- a/frontend/src/lib/components/ui/crm-table/CrmTable.svelte
+++ /dev/null
@@ -1,481 +0,0 @@
-<script>
-  import { tick } from 'svelte';
-  import { Check, ChevronDown, Building2, User } from '@lucide/svelte';
-  import * as DropdownMenu from '#lib/components/ui/dropdown-menu/index.js';
-  import { getOptionStyle, getOptionLabel, getOptionBgColor } from '#lib/utils/table-helpers.js';
-  import { formatCurrency } from '#lib/utils/formatting.js';
-
-  /**
-   * @typedef {Object} ColumnDef
-   * @property {string} key - Field key in data object
-   * @property {string} label - Display label for column header
-   * @property {'text' | 'email' | 'number' | 'date' | 'select' | 'checkbox' | 'relation'} [type='text']
-   * @property {string} [width] - Tailwind width class
-   * @property {{ value: string, label: string, color: string }[]} [options] - Options for select type
-   * @property {boolean} [editable=true] - Allow inline editing
-   * @property {boolean} [canHide=true] - Allow hiding column
-   * @property {string} [emptyText='Empty'] - Text when value is empty
-   * @property {(value: any, row?: any) => string} [format] - Custom value formatter (receives value and optional row data)
-   * @property {(row: any) => any} [getValue] - Custom value getter for nested data
-   * @property {string} [relationIcon] - Icon type for relation cells ('building' | 'user')
-   * @property {(row: any) => string} [cellClass] - Dynamic CSS class for cell text based on row data
-   */
-
-  /**
-   * @type {{
-   *   data: any[],
-   *   columns: ColumnDef[],
-   *   visibleColumns?: string[],
-   *   onRowChange?: (row: any, field: string, value: any) => void,
-   *   onRowClick?: (row: any) => void,
-   *   emptyState?: import('svelte').Snippet,
-   *   cellContent?: import('svelte').Snippet<[any, ColumnDef]>,
-   *   cellSuffix?: import('svelte').Snippet<[any, ColumnDef]>,
-   *   selectable?: boolean,
-   *   selectedIds?: string[],
-   *   rowIdKey?: string,
-   *   activeRowId?: string | null
-   * }}
-   */
-  let {
-    data = [],
-    columns = [],
-    visibleColumns = $bindable(/** @type {string[]} */ ([])),
-    onRowChange,
-    onRowClick,
-    emptyState,
-    cellContent,
-    cellSuffix,
-    selectable = false,
-    selectedIds = $bindable(/** @type {string[]} */ ([])),
-    rowIdKey = 'id',
-    activeRowId = $bindable(/** @type {string | null} */ (null))
-  } = $props();
-
-  // Initialize visibleColumns from columns if not provided
-  $effect(() => {
-    if (visibleColumns.length === 0 && columns.length > 0) {
-      visibleColumns = columns.map((c) => c.key);
-    }
-  });
-
-  // Editing state
-  /** @type {{ rowId: string, columnKey: string } | null} */
-  let editingCell = $state(null);
-  let editValue = $state('');
-
-  /**
-   * Get value from row, using custom getter if provided
-   * @param {any} row
-   * @param {ColumnDef} column
-   */
-  function getCellValue(row, column) {
-    if (column.getValue) {
-      return column.getValue(row);
-    }
-    return row[column.key];
-  }
-
-  /**
-   * Format value for display
-   * @param {any} value
-   * @param {ColumnDef} column
-   * @param {any} [row] - The full row data (for format functions that need row context)
-   */
-  function formatValue(value, column, row) {
-    if (value == null || value === '') return null;
-    if (column.format) return column.format(value, row);
-    if (column.type === 'number') return formatCurrency(value);
-    if (column.type === 'date') return formatDate(value);
-    return value;
-  }
-
-  /**
-   * @param {string} dateStr
-   */
-  function formatDate(dateStr) {
-    if (!dateStr) return '';
-    const date = new Date(dateStr);
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
-  }
-
-  /**
-   * Start editing a cell
-   * @param {string} rowId
-   * @param {string} columnKey
-   */
-  async function startEditing(rowId, columnKey) {
-    const row = data.find((r) => r.id === rowId);
-    const column = columns.find((c) => c.key === columnKey);
-
-    if (!row || !column) return;
-    if (column.editable === false) return;
-    // Non-editable types
-    if (column.type === 'checkbox' || column.type === 'relation' || column.type === 'select')
-      return;
-
-    editingCell = { rowId, columnKey };
-    const value = getCellValue(row, column);
-    editValue = value?.toString() ?? '';
-
-    await tick();
-
-    const input = document.querySelector(`[data-edit-input="${rowId}-${columnKey}"]`);
-    if (input) {
-      // @ts-ignore
-      input.focus();
-      // @ts-ignore
-      if (input.select) input.select();
-    }
-  }
-
-  /**
-   * Stop editing and optionally save
-   * @param {boolean} save
-   */
-  function stopEditing(save = true) {
-    if (!editingCell) return;
-
-    if (save && onRowChange) {
-      const { rowId, columnKey } = editingCell;
-      const column = columns.find((c) => c.key === columnKey);
-      const row = data.find((r) => r.id === rowId);
-
-      if (row && column) {
-        /** @type {string | number} */
-        let parsedValue = editValue;
-        if (column.type === 'number') {
-          parsedValue = parseFloat(editValue) || 0;
-        }
-
-        const original = getCellValue(row, column);
-        if (parsedValue !== original) {
-          onRowChange(row, columnKey, parsedValue);
-        }
-      }
-    }
-
-    editingCell = null;
-    editValue = '';
-  }
-
-  /**
-   * @param {KeyboardEvent} e
-   */
-  function handleKeydown(e) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      stopEditing(true);
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      stopEditing(false);
-    }
-  }
-
-  /**
-   * Update select value
-   * @param {string} rowId
-   * @param {string} columnKey
-   * @param {string} value
-   */
-  function updateSelectValue(rowId, columnKey, value) {
-    const row = data.find((r) => r.id === rowId);
-    if (row && onRowChange) {
-      onRowChange(row, columnKey, value);
-    }
-  }
-
-  /**
-   * Toggle checkbox value
-   * @param {string} rowId
-   * @param {string} columnKey
-   */
-  function toggleCheckbox(rowId, columnKey) {
-    const row = data.find((r) => r.id === rowId);
-    const column = columns.find((c) => c.key === columnKey);
-    if (row && column && onRowChange) {
-      const currentValue = getCellValue(row, column);
-      onRowChange(row, columnKey, !currentValue);
-    }
-  }
-
-  // Derived values
-  const visibleColumnDefs = $derived(columns.filter((col) => visibleColumns.includes(col.key)));
-</script>
-
-{#snippet tableBody()}
-  {#if data.length === 0}
-    {#if emptyState}
-      {@render emptyState()}
-    {:else}
-      <div class="flex flex-col items-center justify-center py-16 text-center">
-        <p class="text-muted-foreground text-sm">No items found</p>
-      </div>
-    {/if}
-  {:else}
-    <table class="w-full border-collapse">
-      <thead class="sticky top-0 z-[1] bg-[color:var(--bg)]">
-        <tr class="border-b border-[color:var(--border-faint)]">
-          {#if selectable}
-            <th class="w-10 px-3 py-2.5">
-              <input
-                type="checkbox"
-                aria-label="Select all rows"
-                checked={data.length > 0 && selectedIds.length === data.length}
-                indeterminate={selectedIds.length > 0 && selectedIds.length < data.length}
-                onchange={(e) => {
-                  const checked = /** @type {HTMLInputElement} */ (e.currentTarget).checked;
-                  selectedIds = checked ? data.map((r) => r[rowIdKey]) : [];
-                }}
-              />
-            </th>
-          {/if}
-          {#each visibleColumnDefs as column, colIndex (column.key)}
-            <th
-              class="px-[14px] py-[9px] text-left text-[10px] font-medium tracking-[0.06em] text-[color:var(--text-subtle)] uppercase {colIndex ===
-              0
-                ? 'pl-7 md:pl-8'
-                : ''} {column.width || ''}"
-            >
-              {column.label}
-            </th>
-          {/each}
-        </tr>
-      </thead>
-      <tbody>
-        {#each data as row (row.id)}
-          <tr
-            class="border-b border-[color:var(--border-faint)] transition-colors {onRowClick
-              ? 'cursor-pointer'
-              : ''} {activeRowId === row[rowIdKey]
-              ? 'bg-[color:var(--bg-active)]'
-              : onRowClick
-                ? 'hover:bg-[color:var(--bg-hover)]'
-                : ''}"
-            onclick={(e) => {
-              if (!onRowClick) return;
-              const target = /** @type {HTMLElement} */ (e.target);
-              if (
-                target.closest('button') ||
-                target.closest('input') ||
-                target.closest('[data-dropdown-trigger]') ||
-                target.closest('[role="menu"]')
-              ) {
-                return;
-              }
-              activeRowId = row[rowIdKey];
-              onRowClick(row);
-            }}
-          >
-            {#if selectable}
-              <td class="w-10 px-3 py-3" onclick={(e) => e.stopPropagation()}>
-                <input
-                  type="checkbox"
-                  aria-label="Select row"
-                  checked={selectedIds.includes(row[rowIdKey])}
-                  onchange={(e) => {
-                    const id = row[rowIdKey];
-                    const checked = /** @type {HTMLInputElement} */ (e.currentTarget).checked;
-                    selectedIds = checked
-                      ? [...selectedIds, id]
-                      : selectedIds.filter((x) => x !== id);
-                  }}
-                />
-              </td>
-            {/if}
-            {#each visibleColumnDefs as column, colIndex (column.key)}
-              {@const value = getCellValue(row, column)}
-              {@const formattedValue = formatValue(value, column, row)}
-              <td
-                class="h-[37px] px-[14px] text-[12px] {colIndex === 0
-                  ? 'pl-7 font-medium text-[color:var(--text)] md:pl-8'
-                  : 'text-[color:var(--text-muted)]'} {colIndex === 0 &&
-                activeRowId === row[rowIdKey]
-                  ? 'shadow-[inset_2.5px_0_0_var(--text)]'
-                  : ''} {column.width || ''}"
-              >
-                {#if cellContent}
-                  {@render cellContent(row, column)}
-                {:else if column.type === 'text' || column.type === 'email' || column.type === 'number' || !column.type}
-                  {#if editingCell?.rowId === row.id && editingCell?.columnKey === column.key && onRowChange}
-                    <input
-                      type={column.type === 'email'
-                        ? 'email'
-                        : column.type === 'number'
-                          ? 'number'
-                          : 'text'}
-                      bind:value={editValue}
-                      onkeydown={handleKeydown}
-                      onblur={() => stopEditing(true)}
-                      data-edit-input="{row.id}-{column.key}"
-                      class="w-full rounded bg-white px-2 py-1.5 text-sm shadow-sm ring-1 ring-gray-200 transition-shadow duration-100 outline-none focus:ring-blue-300 dark:bg-gray-900 dark:ring-gray-700"
-                    />
-                  {:else if onRowChange && column.editable !== false}
-                    <button
-                      type="button"
-                      onclick={() => startEditing(row.id, column.key)}
-                      class="-mx-2 -my-1.5 w-full cursor-text rounded px-2 py-1.5 text-left text-sm transition-colors duration-75 hover:bg-[color:var(--bg-elevated)]"
-                    >
-                      {#if formattedValue}
-                        {formattedValue}
-                      {:else}
-                        <span class="text-[color:var(--text-subtle)]"
-                          >{column.emptyText || 'Empty'}</span
-                        >
-                      {/if}
-                    </button>
-                  {:else}
-                    <span class="text-sm {column.cellClass ? column.cellClass(row) : ''}">
-                      {#if formattedValue}
-                        {formattedValue}
-                      {:else}
-                        <span class="text-[color:var(--text-subtle)]"
-                          >{column.emptyText || 'Empty'}</span
-                        >
-                      {/if}
-                    </span>
-                  {/if}
-                {:else if column.type === 'date'}
-                  {#if editingCell?.rowId === row.id && editingCell?.columnKey === column.key && onRowChange}
-                    <input
-                      type="date"
-                      bind:value={editValue}
-                      onkeydown={handleKeydown}
-                      onblur={() => stopEditing(true)}
-                      data-edit-input="{row.id}-{column.key}"
-                      class="w-full rounded bg-white px-2 py-1.5 text-sm shadow-sm ring-1 ring-gray-200 transition-shadow duration-100 outline-none focus:ring-blue-300 dark:bg-gray-900 dark:ring-gray-700"
-                    />
-                  {:else if onRowChange && column.editable !== false}
-                    <button
-                      type="button"
-                      onclick={() => startEditing(row.id, column.key)}
-                      class="-mx-2 -my-1.5 w-full cursor-text rounded px-2 py-1.5 text-left text-sm transition-colors duration-75 hover:bg-[color:var(--bg-elevated)]"
-                    >
-                      {#if formattedValue}
-                        {formattedValue}
-                      {:else}
-                        <span class="text-[color:var(--text-subtle)]"
-                          >{column.emptyText || 'Empty'}</span
-                        >
-                      {/if}
-                    </button>
-                  {:else}
-                    <span class="text-sm {column.cellClass ? column.cellClass(row) : ''}">
-                      {#if formattedValue}
-                        {formattedValue}
-                      {:else}
-                        <span class="text-[color:var(--text-subtle)]"
-                          >{column.emptyText || 'Empty'}</span
-                        >
-                      {/if}
-                    </span>
-                  {/if}
-                {:else if column.type === 'select' && column.options}
-                  {#if onRowChange}
-                    <DropdownMenu.Root>
-                      <DropdownMenu.Trigger>
-                        {#snippet child({ props })}
-                          <button
-                            {...props}
-                            type="button"
-                            class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium transition-opacity hover:opacity-80 {getOptionStyle(
-                              value,
-                              column.options
-                            )}"
-                          >
-                            {getOptionLabel(value, column.options)}
-                            <ChevronDown class="h-3 w-3 opacity-60" />
-                          </button>
-                        {/snippet}
-                      </DropdownMenu.Trigger>
-                      <DropdownMenu.Content align="start" class="w-36">
-                        {#each column.options as option (option.value)}
-                          <DropdownMenu.Item
-                            onclick={() => updateSelectValue(row.id, column.key, option.value)}
-                            class="flex items-center gap-2"
-                          >
-                            <span
-                              class="h-2 w-2 rounded-full {getOptionBgColor(option.value, [
-                                option
-                              ])}"
-                            ></span>
-                            {option.label}
-                            {#if value === option.value}
-                              <Check class="ml-auto h-4 w-4" />
-                            {/if}
-                          </DropdownMenu.Item>
-                        {/each}
-                      </DropdownMenu.Content>
-                    </DropdownMenu.Root>
-                  {:else}
-                    <span
-                      class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium {getOptionStyle(
-                        value,
-                        column.options
-                      )}"
-                    >
-                      {getOptionLabel(value, column.options)}
-                    </span>
-                  {/if}
-                {:else if column.type === 'checkbox'}
-                  {#if onRowChange}
-                    <button
-                      type="button"
-                      onclick={() => toggleCheckbox(row.id, column.key)}
-                      class="flex h-5 w-5 items-center justify-center rounded border transition-colors {value
-                        ? 'border-blue-500 bg-blue-500'
-                        : 'border-gray-300 hover:border-gray-400'}"
-                    >
-                      {#if value}
-                        <Check class="h-3.5 w-3.5 text-white" />
-                      {/if}
-                    </button>
-                  {:else}
-                    <span
-                      class="flex h-5 w-5 items-center justify-center rounded border {value
-                        ? 'border-blue-500 bg-blue-500'
-                        : 'border-gray-300'}"
-                    >
-                      {#if value}
-                        <Check class="h-3.5 w-3.5 text-white" />
-                      {/if}
-                    </span>
-                  {/if}
-                {:else if column.type === 'relation'}
-                  <button
-                    type="button"
-                    onclick={() => {
-                      activeRowId = row[rowIdKey];
-                      onRowClick?.(row);
-                    }}
-                    class="-mx-2 -my-1.5 w-full cursor-pointer rounded px-2 py-1.5 text-left text-sm transition-colors duration-75 hover:bg-[color:var(--bg-elevated)]"
-                  >
-                    {#if value}
-                      <div class="flex items-center gap-1.5">
-                        {#if column.relationIcon === 'user'}
-                          <User class="h-3.5 w-3.5 text-[color:var(--text-subtle)]" />
-                        {:else}
-                          <Building2 class="h-3.5 w-3.5 text-[color:var(--text-subtle)]" />
-                        {/if}
-                        <span class="truncate"
-                          >{typeof value === 'object' ? value.name || value.email : value}</span
-                        >
-                      </div>
-                    {:else}
-                      <span class="text-[color:var(--text-subtle)]">-</span>
-                    {/if}
-                  </button>
-                {/if}
-                {#if cellSuffix}
-                  {@render cellSuffix(row, column)}
-                {/if}
-              </td>
-            {/each}
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  {/if}
-{/snippet}
-
-{@render tableBody()}
diff --git a/frontend/src/lib/components/ui/crm-table/index.js b/frontend/src/lib/components/ui/crm-table/index.js
deleted file mode 100644
index f97d9026..00000000
--- a/frontend/src/lib/components/ui/crm-table/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as CrmTable } from './CrmTable.svelte';
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
deleted file mode 100644
index 0cea5591..00000000
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-
-  let { ref = $bindable(null), value = $bindable([]), ...restProps } = $props();
-</script>
-
-<DropdownMenuPrimitive.CheckboxGroup
-  bind:ref
-  bind:value
-  data-slot="dropdown-menu-checkbox-group"
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
deleted file mode 100644
index 02f7070e..00000000
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-  import CheckIcon from '@lucide/svelte/icons/check';
-  import MinusIcon from '@lucide/svelte/icons/minus';
-  import { cn } from '#lib/utils.js';
-  let {
-    ref = $bindable(null),
-    checked = $bindable(false),
-    indeterminate = $bindable(false),
-    class: className,
-    children: childrenProp,
-    ...restProps
-  } = $props();
-</script>
-
-<DropdownMenuPrimitive.CheckboxItem
-  bind:ref
-  bind:checked
-  bind:indeterminate
-  data-slot="dropdown-menu-checkbox-item"
-  class={cn(
-    "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    className
-  )}
-  {...restProps}
->
-  {#snippet children({ checked, indeterminate })}
-    <span class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
-      {#if indeterminate}
-        <MinusIcon class="size-4" />
-      {:else}
-        <CheckIcon class={cn('size-4', !checked && 'text-transparent')} />
-      {/if}
-    </span>
-    {@render childrenProp?.()}
-  {/snippet}
-</DropdownMenuPrimitive.CheckboxItem>
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
deleted file mode 100644
index 9f62b8c8..00000000
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   sideOffset?: number,
-   *   portalProps?: Record<string, any>,
-   *   class?: string,
-   *   align?: 'start' | 'center' | 'end',
-   *   side?: 'top' | 'right' | 'bottom' | 'left',
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let {
-    ref = $bindable(null),
-    sideOffset = 4,
-    portalProps = {},
-    class: className,
-    ...restProps
-  } = $props();
-</script>
-
-<DropdownMenuPrimitive.Portal {...portalProps}>
-  <DropdownMenuPrimitive.Content
-    bind:ref
-    data-slot="dropdown-menu-content"
-    {sideOffset}
-    class={cn(
-      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none',
-      className
-    )}
-    {...restProps}
-  />
-</DropdownMenuPrimitive.Portal>
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
deleted file mode 100644
index bcba08b3..00000000
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-
-  let { ref = $bindable(null), ...restProps } = $props();
-</script>
-
-<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
deleted file mode 100644
index 3de481a3..00000000
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   inset?: boolean,
-   *   variant?: 'default' | 'destructive',
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let {
-    ref = $bindable(null),
-    class: className,
-    inset = false,
-    variant = 'default',
-    ...restProps
-  } = $props();
-</script>
-
-<DropdownMenuPrimitive.Item
-  bind:ref
-  data-slot="dropdown-menu-item"
-  data-inset={inset}
-  data-variant={variant}
-  class={cn(
-    "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    className
-  )}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
deleted file mode 100644
index 430142e6..00000000
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   inset?: boolean,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, inset = false, children, ...restProps } = $props();
-</script>
-
-<div
-  bind:this={ref}
-  data-slot="dropdown-menu-label"
-  data-inset={inset}
-  class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8', className)}
-  {...restProps}
->
-  {@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
deleted file mode 100644
index ede0be72..00000000
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<DropdownMenuPrimitive.Separator
-  bind:ref
-  data-slot="dropdown-menu-separator"
-  class={cn('bg-border -mx-1 my-1 h-px', className)}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
deleted file mode 100644
index 825e0d41..00000000
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-
-  let { ref = $bindable(null), ...restProps } = $props();
-</script>
-
-<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
diff --git a/frontend/src/lib/components/ui/dropdown-menu/index.js b/frontend/src/lib/components/ui/dropdown-menu/index.js
deleted file mode 100644
index 6c2d04a7..00000000
--- a/frontend/src/lib/components/ui/dropdown-menu/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-import CheckboxGroup from './dropdown-menu-checkbox-group.svelte';
-import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
-import Content from './dropdown-menu-content.svelte';
-import Group from './dropdown-menu-group.svelte';
-import Item from './dropdown-menu-item.svelte';
-import Label from './dropdown-menu-label.svelte';
-import Separator from './dropdown-menu-separator.svelte';
-import Trigger from './dropdown-menu-trigger.svelte';
-const Sub = DropdownMenuPrimitive.Sub;
-const Root = DropdownMenuPrimitive.Root;
-
-export {
-  CheckboxGroup,
-  CheckboxItem,
-  Content,
-  Root as DropdownMenu,
-  CheckboxGroup as DropdownMenuCheckboxGroup,
-  CheckboxItem as DropdownMenuCheckboxItem,
-  Content as DropdownMenuContent,
-  Group as DropdownMenuGroup,
-  Item as DropdownMenuItem,
-  Label as DropdownMenuLabel,
-  Separator as DropdownMenuSeparator,
-  Sub as DropdownMenuSub,
-  Trigger as DropdownMenuTrigger,
-  Group,
-  Item,
-  Label,
-  Root,
-  Separator,
-  Sub,
-  Trigger
-};
diff --git a/frontend/src/lib/components/ui/editable-field/EditableMultiSelect.svelte b/frontend/src/lib/components/ui/editable-field/EditableMultiSelect.svelte
deleted file mode 100644
index 74a44209..00000000
--- a/frontend/src/lib/components/ui/editable-field/EditableMultiSelect.svelte
+++ /dev/null
@@ -1,247 +0,0 @@
-<script>
-  import { ChevronDown, X, Search, AlertCircle, RotateCw } from '@lucide/svelte';
-  import * as DropdownMenu from '#lib/components/ui/dropdown-menu/index.js';
-  import { Badge } from '#lib/components/ui/badge/index.js';
-  import { Skeleton } from '#lib/components/ui/skeleton/index.js';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @typedef {Object} SelectOption
-   * @property {string} [id]
-   * @property {string} [value]
-   * @property {string} [name]
-   * @property {string} [label]
-   * @property {string} [email]
-   */
-
-  /**
-   * @type {{
-   *   value?: string[],
-   *   options?: SelectOption[],
-   *   placeholder?: string,
-   *   emptyText?: string,
-   *   disabled?: boolean,
-   *   loading?: boolean,
-   *   error?: string,
-   *   onRetry?: () => void,
-   *   onchange?: (value: string[]) => void,
-   *   class?: string,
-   *   maxDisplay?: number,
-   *   searchThreshold?: number,
-   * }}
-   */
-  let {
-    value = [],
-    options = [],
-    placeholder = 'Select...',
-    emptyText = 'None selected',
-    disabled = false,
-    loading = false,
-    error = '',
-    onRetry,
-    onchange,
-    class: className,
-    maxDisplay = 3,
-    searchThreshold = 6
-  } = $props();
-
-  let isOpen = $state(false);
-  let query = $state('');
-
-  // Reset the search query whenever the dropdown closes
-  $effect(() => {
-    if (!isOpen) query = '';
-  });
-
-  /**
-   * Toggle an option
-   * @param {string} id
-   */
-  function toggleOption(id) {
-    const newValue = value.includes(id) ? value.filter((v) => v !== id) : [...value, id];
-    onchange?.(newValue);
-  }
-
-  /**
-   * Remove an option
-   * @param {Event} e
-   * @param {string} id
-   */
-  function removeOption(e, id) {
-    e.stopPropagation();
-    const newValue = value.filter((v) => v !== id);
-    onchange?.(newValue);
-  }
-
-  /**
-   * Normalize option data so shared drawers can pass either `{ id, name }`
-   * or `{ value, label }` without crashing keyed each blocks.
-   * @returns {Array<SelectOption & { id: string, name: string }>}
-   */
-  const normalizedOptions = $derived(
-    options
-      .map((opt) => {
-        const id = opt?.id ?? opt?.value;
-        if (!id) return null;
-
-        return {
-          ...opt,
-          id,
-          name: opt?.name ?? opt?.label ?? opt?.email ?? id
-        };
-      })
-      .filter(Boolean)
-  );
-
-  // Show the search input once there are enough options to make it useful
-  const showSearch = $derived(!loading && !error && normalizedOptions.length >= searchThreshold);
-
-  const filteredOptions = $derived.by(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return normalizedOptions;
-    return normalizedOptions.filter((opt) => {
-      const name = (opt.name || '').toLowerCase();
-      const email = (opt.email || '').toLowerCase();
-      return name.includes(q) || email.includes(q);
-    });
-  });
-
-  /**
-   * Get selected options
-   */
-  const selectedOptions = $derived(normalizedOptions.filter((opt) => value.includes(opt.id)));
-
-  /**
-   * Get display options (limited to maxDisplay)
-   */
-  const displayOptions = $derived(selectedOptions.slice(0, maxDisplay));
-
-  /**
-   * Get remaining count
-   */
-  const remainingCount = $derived(
-    selectedOptions.length > maxDisplay ? selectedOptions.length - maxDisplay : 0
-  );
-</script>
-
-<div class={cn('group', className)}>
-  <DropdownMenu.Root bind:open={isOpen}>
-    <DropdownMenu.Trigger {disabled} class="w-full">
-      <button
-        type="button"
-        class={cn(
-          'flex min-h-[36px] w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors',
-          !disabled && 'hover:bg-muted/50 cursor-pointer',
-          disabled && 'cursor-default opacity-50'
-        )}
-      >
-        <div class="flex flex-1 flex-wrap items-center gap-1.5">
-          {#if selectedOptions.length === 0}
-            <span class="text-muted-foreground italic">{emptyText || placeholder}</span>
-          {:else}
-            {#each displayOptions as opt (opt.id)}
-              <Badge variant="secondary" class="gap-1 pr-1">
-                <span class="max-w-[120px] truncate">{opt.name}</span>
-                {#if !disabled}
-                  <button
-                    type="button"
-                    aria-label="Remove {opt.name}"
-                    class="hover:bg-muted rounded-sm p-0.5"
-                    onclick={(e) => removeOption(e, opt.id)}
-                  >
-                    <X class="h-3 w-3" aria-hidden="true" />
-                  </button>
-                {/if}
-              </Badge>
-            {/each}
-            {#if remainingCount > 0}
-              <Badge variant="outline" class="text-xs">+{remainingCount}</Badge>
-            {/if}
-          {/if}
-        </div>
-        <ChevronDown
-          aria-hidden="true"
-          class={cn(
-            'text-muted-foreground h-4 w-4 shrink-0 transition-transform',
-            isOpen && 'rotate-180'
-          )}
-        />
-      </button>
-    </DropdownMenu.Trigger>
-    <DropdownMenu.Content class="max-h-72 w-64 overflow-hidden p-0" align="start">
-      {#if showSearch}
-        <div class="border-border/40 bg-background sticky top-0 z-10 border-b p-1.5">
-          <div class="relative">
-            <Search
-              aria-hidden="true"
-              class="text-muted-foreground/60 pointer-events-none absolute top-1/2 left-2 h-3.5 w-3.5 -translate-y-1/2"
-            />
-            <input
-              type="search"
-              bind:value={query}
-              placeholder="Search…"
-              aria-label="Search options"
-              class="focus:ring-primary/30 placeholder:text-muted-foreground/50 w-full rounded-md border-0 bg-transparent py-1.5 pr-2 pl-7 text-xs outline-none focus:ring-1"
-            />
-          </div>
-        </div>
-      {/if}
-
-      <div class="max-h-56 overflow-y-auto p-1">
-        {#if loading}
-          <div class="space-y-1.5 px-1 py-1.5" aria-busy="true" aria-live="polite">
-            {#each { length: 3 } as _, i (i)}
-              <div class="flex items-center gap-2 px-1.5 py-1">
-                <Skeleton class="h-3.5 w-3.5 rounded" />
-                <Skeleton class="h-3.5 flex-1 rounded" />
-              </div>
-            {/each}
-          </div>
-        {:else if error}
-          <div class="flex items-start gap-2 px-2 py-3 text-xs" role="alert">
-            <AlertCircle class="text-destructive mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
-            <div class="flex-1 space-y-1.5">
-              <p class="text-destructive font-medium">{error}</p>
-              {#if onRetry}
-                <button
-                  type="button"
-                  onclick={onRetry}
-                  class="text-primary hover:bg-primary/10 inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] font-medium"
-                >
-                  <RotateCw class="h-3 w-3" aria-hidden="true" />
-                  Retry
-                </button>
-              {/if}
-            </div>
-          </div>
-        {:else if normalizedOptions.length === 0}
-          <div class="text-muted-foreground px-2 py-4 text-center text-sm">
-            No options available
-          </div>
-        {:else if filteredOptions.length === 0}
-          <div class="text-muted-foreground px-2 py-4 text-center text-xs">
-            No matches for "{query}"
-          </div>
-        {:else}
-          <DropdownMenu.CheckboxGroup {value}>
-            {#each filteredOptions as opt (opt.id)}
-              <DropdownMenu.CheckboxItem
-                checked={value.includes(opt.id)}
-                onCheckedChange={() => toggleOption(opt.id)}
-                closeOnSelect={false}
-                class=""
-              >
-                <div class="flex flex-col">
-                  <span>{opt.name}</span>
-                  {#if opt.email && opt.email !== opt.name}
-                    <span class="text-muted-foreground text-xs">{opt.email}</span>
-                  {/if}
-                </div>
-              </DropdownMenu.CheckboxItem>
-            {/each}
-          </DropdownMenu.CheckboxGroup>
-        {/if}
-      </div>
-    </DropdownMenu.Content>
-  </DropdownMenu.Root>
-</div>
diff --git a/frontend/src/lib/components/ui/editable-field/index.js b/frontend/src/lib/components/ui/editable-field/index.js
deleted file mode 100644
index c0de5dbe..00000000
--- a/frontend/src/lib/components/ui/editable-field/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as EditableMultiSelect } from './EditableMultiSelect.svelte';
diff --git a/frontend/src/lib/components/ui/filter/DateRangeFilter.svelte b/frontend/src/lib/components/ui/filter/DateRangeFilter.svelte
deleted file mode 100644
index 105dc61b..00000000
--- a/frontend/src/lib/components/ui/filter/DateRangeFilter.svelte
+++ /dev/null
@@ -1,319 +0,0 @@
-<script>
-  import { CalendarDays, ChevronDown, X, Clock, ArrowRight } from '@lucide/svelte';
-  import { cn } from '#lib/utils.js';
-  import * as Popover from '#lib/components/ui/popover/index.js';
-  import Calendar from '#lib/components/ui/calendar/Calendar.svelte';
-  import { Button } from '#lib/components/ui/button/index.js';
-  import { today, getLocalTimeZone, parseDate } from '@internationalized/date';
-
-  /**
-   * @type {{
-   *   startDate?: string,
-   *   endDate?: string,
-   *   label?: string,
-   *   placeholder?: string,
-   *   class?: string,
-   *   onchange?: (startDate: string, endDate: string) => void,
-   * }}
-   */
-  let {
-    startDate = $bindable(''),
-    endDate = $bindable(''),
-    label: _label = '',
-    placeholder = 'Select dates',
-    class: className,
-    onchange
-  } = $props();
-
-  let open = $state(false);
-  let selectingEnd = $state(false);
-
-  const todayDate = today(getLocalTimeZone());
-
-  // Convert string dates to DateValue for calendar
-  const startDateValue = $derived(startDate ? parseDate(startDate) : undefined);
-  const endDateValue = $derived(endDate ? parseDate(endDate) : undefined);
-
-  /** @type {{ label: string, shortLabel: string, getRange: () => { start: string, end: string } }[]} */
-  const presets = [
-    {
-      label: 'Today',
-      shortLabel: 'Today',
-      getRange: () => {
-        const d = todayDate.toString();
-        return { start: d, end: d };
-      }
-    },
-    {
-      label: 'Last 7 days',
-      shortLabel: '7d',
-      getRange: () => ({
-        start: todayDate.subtract({ days: 7 }).toString(),
-        end: todayDate.toString()
-      })
-    },
-    {
-      label: 'Last 30 days',
-      shortLabel: '30d',
-      getRange: () => ({
-        start: todayDate.subtract({ days: 30 }).toString(),
-        end: todayDate.toString()
-      })
-    },
-    {
-      label: 'This month',
-      shortLabel: 'Month',
-      getRange: () => ({
-        start: todayDate.set({ day: 1 }).toString(),
-        end: todayDate.toString()
-      })
-    },
-    {
-      label: 'Last month',
-      shortLabel: 'Prev',
-      getRange: () => {
-        const lastMonth = todayDate.subtract({ months: 1 });
-        const lastDayOfLastMonth = lastMonth
-          .set({ day: 1 })
-          .add({ months: 1 })
-          .subtract({ days: 1 });
-        return {
-          start: lastMonth.set({ day: 1 }).toString(),
-          end: lastDayOfLastMonth.toString()
-        };
-      }
-    },
-    {
-      label: 'Last 90 days',
-      shortLabel: '90d',
-      getRange: () => ({
-        start: todayDate.subtract({ days: 90 }).toString(),
-        end: todayDate.toString()
-      })
-    }
-  ];
-
-  const displayText = $derived.by(() => {
-    if (!startDate && !endDate) return placeholder;
-    if (startDate && endDate) {
-      if (startDate === endDate) return formatDate(startDate);
-      return `${formatDateShort(startDate)} - ${formatDateShort(endDate)}`;
-    }
-    if (startDate) return `From ${formatDateShort(startDate)}`;
-    return `Until ${formatDateShort(endDate)}`;
-  });
-
-  /**
-   * @param {string} dateStr
-   */
-  function formatDate(dateStr) {
-    if (!dateStr) return '';
-    const date = new Date(dateStr);
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
-  }
-
-  /**
-   * @param {string} dateStr
-   */
-  function formatDateShort(dateStr) {
-    if (!dateStr) return '';
-    const date = new Date(dateStr);
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-  }
-
-  /**
-   * @param {{ label: string, shortLabel: string, getRange: () => { start: string, end: string } }} preset
-   */
-  function handlePreset(preset) {
-    const { start, end } = preset.getRange();
-    startDate = start;
-    endDate = end;
-    onchange?.(start, end);
-    open = false;
-  }
-
-  /**
-   * @param {import('@internationalized/date').DateValue | undefined} dateValue
-   */
-  function handleDateSelect(dateValue) {
-    if (!dateValue) return;
-    const dateStr = dateValue.toString();
-
-    if (!selectingEnd) {
-      startDate = dateStr;
-      endDate = '';
-      selectingEnd = true;
-    } else {
-      // Ensure end is after start
-      if (dateStr < startDate) {
-        endDate = startDate;
-        startDate = dateStr;
-      } else {
-        endDate = dateStr;
-      }
-      selectingEnd = false;
-      onchange?.(startDate, endDate);
-      open = false;
-    }
-  }
-
-  function handleClear() {
-    startDate = '';
-    endDate = '';
-    selectingEnd = false;
-    onchange?.('', '');
-  }
-
-  const hasValue = $derived(!!startDate || !!endDate);
-</script>
-
-<Popover.Root
-  bind:open
-  onOpenChange={(o) => {
-    if (!o) selectingEnd = false;
-  }}
->
-  <Popover.Trigger asChild class="">
-    {#snippet child({ props })}
-      <button
-        type="button"
-        {...props}
-        class={cn(
-          'inline-flex h-7 items-center gap-1.5 rounded-[var(--r-sm)] border px-2.5 text-[13px] leading-none font-medium transition-colors focus:ring-1 focus:ring-[color:var(--ring)] focus:outline-none',
-          hasValue
-            ? 'border-[color:var(--violet)]/40 bg-[color:var(--violet-soft)] text-[color:var(--violet-soft-text)]'
-            : 'border-[color:var(--border-faint)] bg-[color:var(--bg-elevated)] text-[color:var(--text-muted)] hover:bg-[color:var(--bg-hover)]',
-          className
-        )}
-      >
-        <CalendarDays class="size-3.5 shrink-0" />
-        <span class="truncate">{displayText}</span>
-        {#if hasValue}
-          <span
-            role="button"
-            tabindex="0"
-            onclick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              handleClear();
-            }}
-            onkeydown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.stopPropagation();
-                e.preventDefault();
-                handleClear();
-              }
-            }}
-            class="-mr-1 ml-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm hover:bg-[color:var(--violet)]/15"
-            aria-label="Clear filter"
-          >
-            <X class="size-3" />
-          </span>
-        {:else}
-          <ChevronDown class="size-3.5 shrink-0 opacity-60" />
-        {/if}
-      </button>
-    {/snippet}
-  </Popover.Trigger>
-
-  <Popover.Content
-    align="start"
-    sideOffset={4}
-    class="w-auto overflow-hidden rounded-[var(--r-md)] border border-[color:var(--border)] bg-[color:var(--bg-card)] p-0 shadow-lg shadow-black/5"
-  >
-    <div class="flex">
-      <!-- Presets sidebar -->
-      <div
-        class={cn(
-          'border-border/40 flex flex-col gap-0.5 border-r p-2',
-          'bg-muted/30 dark:border-white/[0.04] dark:bg-white/[0.02]'
-        )}
-      >
-        <div class="mb-1 px-2 py-1">
-          <span class="text-muted-foreground/60 text-[10px] font-semibold tracking-wider uppercase">
-            Quick select
-          </span>
-        </div>
-        {#each presets as preset, i (preset.label)}
-          <Button
-            variant="ghost"
-            size="sm"
-            class={cn(
-              'h-8 justify-start px-3 text-xs font-medium',
-              'text-muted-foreground hover:text-foreground',
-              'hover:bg-primary/10 dark:hover:bg-primary/20',
-              'transition-all duration-150',
-              'animate-in fade-in slide-in-from-left-1'
-            )}
-            style="animation-delay: {i * 30}ms"
-            onclick={() => handlePreset(preset)}
-          >
-            <Clock class="mr-2 h-3 w-3 opacity-50" />
-            {preset.label}
-          </Button>
-        {/each}
-      </div>
-
-      <!-- Calendar section -->
-      <div class="p-3">
-        <!-- Date selection status -->
-        <div
-          class={cn(
-            'mb-3 flex items-center justify-center gap-2',
-            'bg-muted/50 rounded-lg px-3 py-2',
-            'dark:bg-white/[0.03]'
-          )}
-        >
-          {#if startDate}
-            <div class="flex items-center gap-1.5">
-              <div class="bg-primary h-2 w-2 rounded-full"></div>
-              <span class="text-foreground text-xs font-medium">
-                {formatDateShort(startDate)}
-              </span>
-            </div>
-          {:else}
-            <span class="text-muted-foreground text-xs">Start date</span>
-          {/if}
-
-          <ArrowRight class="text-muted-foreground/50 h-3 w-3" />
-
-          {#if endDate}
-            <div class="flex items-center gap-1.5">
-              <div class="bg-primary h-2 w-2 rounded-full"></div>
-              <span class="text-foreground text-xs font-medium">
-                {formatDateShort(endDate)}
-              </span>
-            </div>
-          {:else}
-            <span class="text-muted-foreground text-xs">
-              {selectingEnd ? 'Select end' : 'End date'}
-            </span>
-          {/if}
-        </div>
-
-        <!-- Selection hint -->
-        <div
-          class={cn(
-            'mb-2 text-center text-xs font-medium',
-            'transition-colors duration-200',
-            selectingEnd ? 'text-primary' : 'text-muted-foreground'
-          )}
-        >
-          {#if selectingEnd}
-            <span class="animate-pulse">Click to select end date</span>
-          {:else}
-            Select start date
-          {/if}
-        </div>
-
-        <!-- Calendar -->
-        <div class="date-calendar-wrapper">
-          <Calendar
-            value={selectingEnd ? endDateValue : startDateValue}
-            onValueChange={handleDateSelect}
-          />
-        </div>
-      </div>
-    </div>
-  </Popover.Content>
-</Popover.Root>
diff --git a/frontend/src/lib/components/ui/filter/FilterBar.svelte b/frontend/src/lib/components/ui/filter/FilterBar.svelte
deleted file mode 100644
index a87f5dca..00000000
--- a/frontend/src/lib/components/ui/filter/FilterBar.svelte
+++ /dev/null
@@ -1,196 +0,0 @@
-<script>
-  import { Filter, X, ChevronDown, Sparkles } from '@lucide/svelte';
-  import { cn } from '#lib/utils.js';
-  import { Button } from '#lib/components/ui/button/index.js';
-
-  /**
-   * @type {{
-   *   activeCount?: number,
-   *   collapsible?: boolean,
-   *   defaultExpanded?: boolean,
-   *   expanded?: boolean,
-   *   minimal?: boolean,
-   *   class?: string,
-   *   onClear?: () => void,
-   *   children?: import('svelte').Snippet,
-   * }}
-   */
-  let {
-    activeCount = 0,
-    collapsible = false,
-    defaultExpanded = true,
-    expanded: externalExpanded,
-    minimal = false,
-    class: className,
-    onClear,
-    children
-  } = $props();
-
-  // Use a function to capture initial value
-  let internalExpanded = $state((() => defaultExpanded)());
-
-  // Use external expanded if provided, otherwise use internal state
-  const isExpanded = $derived(externalExpanded !== undefined ? externalExpanded : internalExpanded);
-</script>
-
-{#if minimal}
-  <!-- Minimal mode: sleek inline filter row with glass effect -->
-  {#if isExpanded}
-    <div
-      class={cn(
-        'filter-bar-minimal',
-        'relative flex flex-wrap items-end gap-3 px-4 py-3',
-        'from-muted/40 via-muted/20 to-muted/40 bg-gradient-to-r',
-        'border-border/50 border backdrop-blur-sm',
-        'dark:from-white/[0.02] dark:via-white/[0.04] dark:to-white/[0.02]',
-        'dark:border-white/[0.06]',
-        'transition-all duration-300 ease-out',
-        className
-      )}
-    >
-      <!-- Subtle gradient overlay -->
-      <div
-        class="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100 dark:opacity-[0.02]"
-        style="background: radial-gradient(ellipse at 50% 0%, var(--accent-primary) 0%, transparent 70%);"
-      ></div>
-
-      <!-- Filter content -->
-      <div class="relative z-10 flex flex-wrap items-end gap-3">
-        {@render children?.()}
-      </div>
-
-      <!-- Clear button with animation -->
-      {#if activeCount > 0 && onClear}
-        <div class="relative z-10 ml-auto flex items-center gap-2">
-          <div
-            class="bg-primary/10 dark:bg-primary/20 flex items-center gap-1.5 rounded-full px-2.5 py-1"
-          >
-            <Sparkles class="text-primary h-3 w-3" />
-            <span class="text-primary text-xs font-semibold">
-              {activeCount} active
-            </span>
-          </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            onclick={onClear}
-            class="group/clear text-muted-foreground hover:bg-destructive/10 hover:text-destructive dark:hover:bg-destructive/20 h-8 gap-1.5 rounded-lg px-3 text-xs font-medium transition-all"
-          >
-            <X class="h-3.5 w-3.5 transition-transform group-hover/clear:rotate-90" />
-            Clear all
-          </Button>
-        </div>
-      {/if}
-    </div>
-  {/if}
-{:else}
-  <!-- Full mode: Refined card with premium styling -->
-  <div
-    class={cn(
-      'filter-bar-full',
-      'overflow-hidden rounded-xl',
-      'bg-card/80 backdrop-blur-md',
-      'border-border/60 border',
-      'shadow-sm',
-      'dark:bg-card/60 dark:border-white/[0.08]',
-      'dark:shadow-[0_4px_24px_-4px_rgba(0,0,0,0.3)]',
-      'transition-all duration-300',
-      className
-    )}
-  >
-    <!-- Header -->
-    <div
-      class={cn(
-        'flex items-center justify-between px-4 py-2.5',
-        'from-muted/30 bg-gradient-to-r to-transparent',
-        'dark:from-white/[0.02] dark:to-transparent'
-      )}
-    >
-      <button
-        type="button"
-        class={cn(
-          'group flex items-center gap-2.5 text-sm font-semibold',
-          'text-foreground/80 hover:text-foreground transition-colors',
-          !collapsible && 'cursor-default'
-        )}
-        onclick={() => collapsible && (internalExpanded = !internalExpanded)}
-        disabled={!collapsible}
-      >
-        <div
-          class={cn(
-            'flex h-7 w-7 items-center justify-center rounded-lg',
-            'bg-primary/10 text-primary',
-            'dark:bg-primary/20',
-            'transition-all duration-200',
-            collapsible && 'group-hover:bg-primary/20 group-hover:scale-105'
-          )}
-        >
-          <Filter class="h-3.5 w-3.5" />
-        </div>
-        <span class="tracking-tight">Filters</span>
-        {#if activeCount > 0}
-          <span
-            class={cn(
-              'inline-flex items-center justify-center',
-              'h-5 min-w-5 rounded-full px-1.5',
-              'bg-primary text-primary-foreground text-[10px] font-bold',
-              'animate-in fade-in zoom-in duration-200'
-            )}
-          >
-            {activeCount}
-          </span>
-        {/if}
-        {#if collapsible}
-          <div class="ml-1 transition-transform duration-200" class:rotate-180={isExpanded}>
-            <ChevronDown class="h-4 w-4 opacity-50" />
-          </div>
-        {/if}
-      </button>
-
-      {#if activeCount > 0 && onClear}
-        <Button
-          variant="ghost"
-          size="sm"
-          onclick={onClear}
-          class="group/clear text-muted-foreground hover:bg-destructive/10 hover:text-destructive h-7 gap-1.5 rounded-lg px-2.5 text-xs font-medium transition-all"
-        >
-          <X class="h-3 w-3 transition-transform group-hover/clear:rotate-90" />
-          Clear all
-        </Button>
-      {/if}
-    </div>
-
-    <!-- Filter content with smooth expand/collapse -->
-    {#if !collapsible || isExpanded}
-      <div
-        class={cn(
-          'border-border/40 border-t px-4 py-4',
-          'dark:border-white/[0.04]',
-          'animate-in fade-in slide-in-from-top-2 duration-200'
-        )}
-      >
-        <div class="flex flex-wrap items-end gap-4">
-          {@render children?.()}
-        </div>
-      </div>
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .filter-bar-minimal {
-    --filter-glow: 0 0 0 1px var(--border);
-  }
-
-  .filter-bar-minimal:focus-within {
-    --filter-glow: 0 0 0 1px var(--ring), 0 0 20px -8px var(--accent-primary);
-  }
-
-  :global(.dark) .filter-bar-minimal:focus-within {
-    --filter-glow: 0 0 0 1px var(--ring), 0 0 30px -10px var(--accent-primary);
-  }
-
-  .filter-bar-minimal {
-    box-shadow: var(--filter-glow);
-  }
-</style>
diff --git a/frontend/src/lib/components/ui/filter/SearchInput.svelte b/frontend/src/lib/components/ui/filter/SearchInput.svelte
deleted file mode 100644
index 1ae4f21e..00000000
--- a/frontend/src/lib/components/ui/filter/SearchInput.svelte
+++ /dev/null
@@ -1,97 +0,0 @@
-<script>
-  import { Search, X } from '@lucide/svelte';
-
-  /**
-   * @type {{
-   *   value?: string,
-   *   placeholder?: string,
-   *   class?: string,
-   *   onchange?: (value: string) => void,
-   *   [key: string]: any
-   * }}
-   */
-  let {
-    value = $bindable(''),
-    placeholder = 'Search...',
-    class: className,
-    onchange,
-    ...restProps
-  } = $props();
-
-  /** @type {HTMLInputElement | undefined} */
-  let inputEl = $state();
-  let inputValue = $state(value);
-  let isFocused = $state(false);
-
-  // Sync external value changes to internal state only when not focused
-  $effect(() => {
-    if (!isFocused && value !== inputValue) {
-      inputValue = value;
-    }
-  });
-
-  /**
-   * @param {Event} e
-   */
-  function handleInput(e) {
-    const target = /** @type {HTMLInputElement} */ (e.target);
-    inputValue = target.value;
-  }
-
-  function handleFocus() {
-    isFocused = true;
-  }
-
-  function handleBlur() {
-    isFocused = false;
-    if (inputValue !== value) {
-      value = inputValue;
-      onchange?.(inputValue);
-    }
-  }
-
-  /**
-   * @param {KeyboardEvent} e
-   */
-  function handleKeydown(e) {
-    if (e.key === 'Enter') {
-      inputEl?.blur();
-    }
-    if (e.key === 'Escape') {
-      handleClear();
-      inputEl?.blur();
-    }
-  }
-
-  function handleClear() {
-    inputValue = '';
-    value = '';
-    onchange?.('');
-  }
-</script>
-
-<div class="relative inline-flex items-center {className || ''}" {...restProps}>
-  <Search class="pointer-events-none absolute left-2.5 size-3.5 text-[color:var(--text-subtle)]" />
-  <input
-    id="search-input"
-    bind:this={inputEl}
-    type="text"
-    value={inputValue}
-    oninput={handleInput}
-    onfocus={handleFocus}
-    onblur={handleBlur}
-    onkeydown={handleKeydown}
-    {placeholder}
-    class="h-7 w-full rounded-[var(--r-sm)] border border-[color:var(--border-faint)] bg-[color:var(--bg-elevated)] py-0 pr-7 pl-8 text-[13px] text-[color:var(--text)] transition-colors outline-none placeholder:text-[color:var(--text-subtle)] focus:border-[color:var(--violet)]/50 focus:ring-1 focus:ring-[color:var(--violet)]/30"
-  />
-  {#if inputValue}
-    <button
-      type="button"
-      onclick={handleClear}
-      class="absolute right-1.5 flex size-4 items-center justify-center rounded-sm text-[color:var(--text-subtle)] hover:bg-[color:var(--bg-hover)] hover:text-[color:var(--text-muted)]"
-      aria-label="Clear search"
-    >
-      <X class="size-3" />
-    </button>
-  {/if}
-</div>
diff --git a/frontend/src/lib/components/ui/filter/SelectFilter.svelte b/frontend/src/lib/components/ui/filter/SelectFilter.svelte
deleted file mode 100644
index 1f452d53..00000000
--- a/frontend/src/lib/components/ui/filter/SelectFilter.svelte
+++ /dev/null
@@ -1,212 +0,0 @@
-<script>
-  import { ChevronDown, Check, X } from '@lucide/svelte';
-  import { cn } from '#lib/utils.js';
-  import * as Popover from '#lib/components/ui/popover/index.js';
-
-  /**
-   * @typedef {{
-   *   value: string,
-   *   label: string,
-   *   icon?: any,
-   * }} Option
-   */
-
-  /**
-   * @type {{
-   *   options: Option[],
-   *   value?: string | string[],
-   *   multiple?: boolean,
-   *   placeholder?: string,
-   *   label?: string,
-   *   allLabel?: string,
-   *   class?: string,
-   *   onchange?: (value: string | string[]) => void,
-   * }}
-   */
-  let {
-    options = [],
-    value = $bindable(''),
-    multiple = false,
-    placeholder = 'Select...',
-    label: _label = '',
-    allLabel = 'All',
-    class: className,
-    onchange
-  } = $props();
-
-  let open = $state(false);
-
-  const selectedValues = $derived(
-    multiple ? (Array.isArray(value) ? value : value ? [value] : []) : []
-  );
-
-  const displayText = $derived.by(() => {
-    if (multiple) {
-      if (selectedValues.length === 0) return placeholder;
-      if (selectedValues.length === 1) {
-        const opt = options.find((o) => o.value === selectedValues[0]);
-        return opt?.label || selectedValues[0];
-      }
-      return `${selectedValues.length} selected`;
-    } else {
-      if (!value || value === 'ALL') return allLabel;
-      const opt = options.find((o) => o.value === value);
-      return opt?.label || value;
-    }
-  });
-
-  /**
-   * @param {string} optValue
-   */
-  function handleSelect(optValue) {
-    if (multiple) {
-      const newValues = selectedValues.includes(optValue)
-        ? selectedValues.filter((v) => v !== optValue)
-        : [...selectedValues, optValue];
-      value = newValues;
-      onchange?.(newValues);
-    } else {
-      value = optValue;
-      onchange?.(optValue);
-      open = false;
-    }
-  }
-
-  function handleClear() {
-    if (multiple) {
-      value = [];
-      onchange?.([]);
-    } else {
-      value = 'ALL';
-      onchange?.('ALL');
-    }
-  }
-
-  const hasValue = $derived(multiple ? selectedValues.length > 0 : value && value !== 'ALL');
-</script>
-
-<Popover.Root bind:open>
-  <Popover.Trigger asChild class="">
-    {#snippet child({ props })}
-      <button
-        type="button"
-        {...props}
-        class={cn(
-          'inline-flex h-7 items-center gap-1.5 rounded-[var(--r-sm)] border px-2.5 text-[13px] leading-none font-medium transition-colors focus:ring-1 focus:ring-[color:var(--ring)] focus:outline-none',
-          hasValue
-            ? 'border-[color:var(--violet)]/40 bg-[color:var(--violet-soft)] text-[color:var(--violet-soft-text)]'
-            : 'border-[color:var(--border-faint)] bg-[color:var(--bg-elevated)] text-[color:var(--text-muted)] hover:bg-[color:var(--bg-hover)]',
-          className
-        )}
-      >
-        <span class="truncate">{displayText}</span>
-        {#if hasValue}
-          <span
-            role="button"
-            tabindex="0"
-            onclick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              handleClear();
-            }}
-            onkeydown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.stopPropagation();
-                e.preventDefault();
-                handleClear();
-              }
-            }}
-            class="-mr-1 ml-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm hover:bg-[color:var(--violet)]/15"
-            aria-label="Clear filter"
-          >
-            <X class="size-3" />
-          </span>
-        {:else}
-          <ChevronDown class="size-3.5 shrink-0 opacity-60" />
-        {/if}
-      </button>
-    {/snippet}
-  </Popover.Trigger>
-
-  <Popover.Content
-    align="start"
-    sideOffset={4}
-    class="w-[220px] overflow-hidden rounded-[var(--r-md)] border border-[color:var(--border)] bg-[color:var(--bg-card)] p-1 shadow-lg shadow-black/5"
-  >
-    <!-- All option -->
-    {#if !multiple}
-      <button
-        type="button"
-        class={cn(
-          'select-option group',
-          'relative flex w-full cursor-pointer items-center gap-2.5',
-          'rounded-lg px-2.5 py-2 text-sm',
-          'transition-all duration-150',
-          'outline-none',
-          !value || value === 'ALL'
-            ? 'bg-primary/10 text-primary dark:bg-primary/20'
-            : 'text-foreground/80 hover:bg-muted/80 hover:text-foreground'
-        )}
-        onclick={() => handleSelect('ALL')}
-      >
-        <div
-          class={cn(
-            'flex h-4 w-4 items-center justify-center rounded-full',
-            'border transition-all duration-150',
-            !value || value === 'ALL'
-              ? 'border-primary bg-primary text-primary-foreground scale-100'
-              : 'border-border group-hover:border-primary/50 scale-90 bg-transparent group-hover:scale-100'
-          )}
-        >
-          {#if !value || value === 'ALL'}
-            <Check class="h-2.5 w-2.5" />
-          {/if}
-        </div>
-        <span class="font-medium">{allLabel}</span>
-      </button>
-      <div class="bg-border/50 my-1 h-px dark:bg-white/[0.06]"></div>
-    {/if}
-
-    <!-- Options -->
-    <div class="max-h-[240px] overflow-y-auto">
-      {#each options as option, i (option.value)}
-        {@const isSelected = multiple
-          ? selectedValues.includes(option.value)
-          : value === option.value}
-        <button
-          type="button"
-          class={cn(
-            'select-option group',
-            'relative flex w-full cursor-pointer items-center gap-2.5',
-            'rounded-lg px-2.5 py-2 text-sm',
-            'transition-all duration-150',
-            'outline-none',
-            isSelected
-              ? 'bg-primary/10 text-primary dark:bg-primary/20'
-              : 'text-foreground/80 hover:bg-muted/80 hover:text-foreground',
-            'animate-in fade-in-0 slide-in-from-left-1'
-          )}
-          style="animation-delay: {i * 20}ms"
-          onclick={() => handleSelect(option.value)}
-        >
-          <div
-            class={cn(
-              'flex h-4 w-4 shrink-0 items-center justify-center rounded-full',
-              'border transition-all duration-150',
-              isSelected
-                ? 'border-primary bg-primary text-primary-foreground scale-100'
-                : 'border-border/60 group-hover:border-primary/50 scale-90 bg-transparent group-hover:scale-100'
-            )}
-          >
-            {#if isSelected}
-              <Check class="h-2.5 w-2.5" />
-            {/if}
-          </div>
-          <span class={cn('truncate', isSelected && 'font-medium')}>
-            {option.label}
-          </span>
-        </button>
-      {/each}
-    </div>
-  </Popover.Content>
-</Popover.Root>
diff --git a/frontend/src/lib/components/ui/filter/TagFilter.svelte b/frontend/src/lib/components/ui/filter/TagFilter.svelte
deleted file mode 100644
index aff40fac..00000000
--- a/frontend/src/lib/components/ui/filter/TagFilter.svelte
+++ /dev/null
@@ -1,231 +0,0 @@
-<script>
-  import { ChevronDown, Check, X, Tag, Hash } from '@lucide/svelte';
-  import { cn } from '#lib/utils.js';
-  import * as Popover from '#lib/components/ui/popover/index.js';
-
-  /**
-   * @typedef {{
-   *   id: string,
-   *   name: string,
-   *   color?: string,
-   * }} TagOption
-   */
-
-  /**
-   * @type {{
-   *   tags: TagOption[],
-   *   value?: string[],
-   *   placeholder?: string,
-   *   label?: string,
-   *   class?: string,
-   *   onchange?: (ids: string[]) => void,
-   * }}
-   */
-  let {
-    tags = [],
-    value = $bindable([]),
-    placeholder = 'Filter by tags...',
-    label: _label = '',
-    class: className,
-    onchange
-  } = $props();
-
-  let open = $state(false);
-
-  const selectedIds = $derived(Array.isArray(value) ? value : []);
-
-  const displayText = $derived.by(() => {
-    if (selectedIds.length === 0) return placeholder;
-    if (selectedIds.length === 1) {
-      const tag = tags.find((t) => t.id === selectedIds[0]);
-      return tag?.name || selectedIds[0];
-    }
-    return `${selectedIds.length} tags`;
-  });
-
-  /**
-   * @param {string} tagId
-   */
-  function toggleTag(tagId) {
-    const newIds = selectedIds.includes(tagId)
-      ? selectedIds.filter((id) => id !== tagId)
-      : [...selectedIds, tagId];
-    value = newIds;
-    onchange?.(newIds);
-  }
-
-  function clearAll() {
-    value = [];
-    onchange?.([]);
-  }
-
-  const hasSelection = $derived(selectedIds.length > 0);
-
-  /**
-   * Get vibrant color classes for tags
-   * @param {string | undefined} color
-   */
-  function getTagStyle(color) {
-    const colorMap = {
-      blue: 'bg-blue-500/15 text-blue-600 border-blue-500/30 dark:bg-blue-500/25 dark:text-blue-400 dark:border-blue-400/30',
-      green:
-        'bg-emerald-500/15 text-emerald-600 border-emerald-500/30 dark:bg-emerald-500/25 dark:text-emerald-400 dark:border-emerald-400/30',
-      red: 'bg-rose-500/15 text-rose-600 border-rose-500/30 dark:bg-rose-500/25 dark:text-rose-400 dark:border-rose-400/30',
-      yellow:
-        'bg-amber-500/15 text-amber-600 border-amber-500/30 dark:bg-amber-500/25 dark:text-amber-400 dark:border-amber-400/30',
-      purple:
-        'bg-violet-500/15 text-violet-600 border-violet-500/30 dark:bg-violet-500/25 dark:text-violet-400 dark:border-violet-400/30',
-      pink: 'bg-pink-500/15 text-pink-600 border-pink-500/30 dark:bg-pink-500/25 dark:text-pink-400 dark:border-pink-400/30',
-      orange:
-        'bg-orange-500/15 text-orange-600 border-orange-500/30 dark:bg-orange-500/25 dark:text-orange-400 dark:border-orange-400/30',
-      cyan: 'bg-cyan-500/15 text-cyan-600 border-cyan-500/30 dark:bg-cyan-500/25 dark:text-cyan-400 dark:border-cyan-400/30',
-      gray: 'bg-slate-500/15 text-slate-600 border-slate-500/30 dark:bg-slate-500/25 dark:text-slate-400 dark:border-slate-400/30'
-    };
-    return colorMap[color || 'blue'] || colorMap.blue;
-  }
-</script>
-
-<Popover.Root bind:open>
-  <Popover.Trigger asChild class="">
-    {#snippet child({ props })}
-      <button
-        type="button"
-        {...props}
-        class={cn(
-          'inline-flex h-7 items-center gap-1.5 rounded-[var(--r-sm)] border px-2.5 text-[13px] leading-none font-medium transition-colors focus:ring-1 focus:ring-[color:var(--ring)] focus:outline-none',
-          hasSelection
-            ? 'border-[color:var(--violet)]/40 bg-[color:var(--violet-soft)] text-[color:var(--violet-soft-text)]'
-            : 'border-[color:var(--border-faint)] bg-[color:var(--bg-elevated)] text-[color:var(--text-muted)] hover:bg-[color:var(--bg-hover)]',
-          className
-        )}
-      >
-        <Tag class="size-3.5 shrink-0" />
-        <span class="truncate">{displayText}</span>
-        {#if hasSelection}
-          <span
-            class="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[var(--r-sm)] px-1.5 text-[11px] font-medium text-[color:var(--violet-soft-text)] tabular-nums opacity-90"
-          >
-            {selectedIds.length}
-          </span>
-          <span
-            role="button"
-            tabindex="0"
-            onclick={(e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              clearAll();
-            }}
-            onkeydown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.stopPropagation();
-                e.preventDefault();
-                clearAll();
-              }
-            }}
-            class="-mr-1 ml-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm hover:bg-[color:var(--violet)]/15"
-            aria-label="Clear filter"
-          >
-            <X class="size-3" />
-          </span>
-        {:else}
-          <ChevronDown class="size-3.5 shrink-0 opacity-60" />
-        {/if}
-      </button>
-    {/snippet}
-  </Popover.Trigger>
-
-  <Popover.Content
-    align="start"
-    sideOffset={4}
-    class="w-[280px] overflow-hidden rounded-[var(--r-md)] border border-[color:var(--border)] bg-[color:var(--bg-card)] p-1 shadow-lg shadow-black/5"
-  >
-    {#if tags.length === 0}
-      <div class="flex flex-col items-center justify-center py-6 text-center">
-        <Tag class="text-muted-foreground/30 mb-2 h-8 w-8" />
-        <p class="text-muted-foreground text-sm font-medium">No tags available</p>
-        <p class="text-muted-foreground/60 mt-1 text-xs">Create tags to organize your leads</p>
-      </div>
-    {:else}
-      <!-- Header with selected count -->
-      {#if selectedIds.length > 0}
-        <div
-          class={cn(
-            'mb-1 flex items-center justify-between rounded-lg px-2.5 py-2',
-            'bg-primary/5 dark:bg-primary/10'
-          )}
-        >
-          <span class="text-primary text-xs font-medium">
-            {selectedIds.length} tag{selectedIds.length > 1 ? 's' : ''} selected
-          </span>
-          <button
-            type="button"
-            onclick={clearAll}
-            class="text-primary/70 hover:text-primary text-xs font-medium transition-colors"
-          >
-            Clear all
-          </button>
-        </div>
-      {/if}
-
-      <!-- Tags list -->
-      <div class="max-h-[280px] space-y-0.5 overflow-y-auto">
-        {#each tags as tag, i (tag.id)}
-          {@const isSelected = selectedIds.includes(tag.id)}
-          <button
-            type="button"
-            class={cn(
-              'tag-option group',
-              'relative flex w-full cursor-pointer items-center gap-2.5',
-              'rounded-lg px-2.5 py-2',
-              'transition-all duration-150',
-              'outline-none',
-              isSelected ? 'bg-primary/10 dark:bg-primary/15' : 'hover:bg-muted/80',
-              'animate-in fade-in-0 slide-in-from-left-1'
-            )}
-            style="animation-delay: {i * 15}ms"
-            onclick={() => toggleTag(tag.id)}
-          >
-            <!-- Checkbox -->
-            <div
-              class={cn(
-                'flex h-4 w-4 shrink-0 items-center justify-center rounded',
-                'border transition-all duration-150',
-                isSelected
-                  ? 'border-primary bg-primary text-primary-foreground scale-100'
-                  : 'border-border/60 group-hover:border-primary/50 scale-90 bg-transparent group-hover:scale-100'
-              )}
-            >
-              {#if isSelected}
-                <Check class="h-2.5 w-2.5" />
-              {/if}
-            </div>
-
-            <!-- Tag badge -->
-            <span
-              class={cn(
-                'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5',
-                'text-xs font-semibold',
-                'transition-all duration-150',
-                getTagStyle(tag.color),
-                isSelected && 'ring-primary/20 ring-1'
-              )}
-            >
-              <Hash class="h-3 w-3 opacity-60" />
-              {tag.name}
-            </span>
-
-            <!-- Selected indicator glow -->
-            {#if isSelected}
-              <div
-                class={cn(
-                  'bg-primary absolute right-2 h-2 w-2 rounded-full',
-                  'animate-in fade-in zoom-in duration-200'
-                )}
-              ></div>
-            {/if}
-          </button>
-        {/each}
-      </div>
-    {/if}
-  </Popover.Content>
-</Popover.Root>
diff --git a/frontend/src/lib/components/ui/filter/index.js b/frontend/src/lib/components/ui/filter/index.js
deleted file mode 100644
index 11e0162c..00000000
--- a/frontend/src/lib/components/ui/filter/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as SearchInput } from './SearchInput.svelte';
-export { default as SelectFilter } from './SelectFilter.svelte';
-export { default as DateRangeFilter } from './DateRangeFilter.svelte';
-export { default as FilterBar } from './FilterBar.svelte';
-export { default as TagFilter } from './TagFilter.svelte';
diff --git a/frontend/src/lib/components/ui/form-shell/FormShell.svelte b/frontend/src/lib/components/ui/form-shell/FormShell.svelte
deleted file mode 100644
index f13250f6..00000000
--- a/frontend/src/lib/components/ui/form-shell/FormShell.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script>
-  import { enhance } from '$app/forms';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @typedef {Object} Props
-   * @property {'GET' | 'POST' | 'get' | 'post' | 'dialog' | 'DIALOG'} [method]
-   * @property {string} [action]
-   * @property {'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'} [enctype]
-   * @property {(this: HTMLFormElement, event: SubmitEvent) => void} [onsubmit]
-   * @property {import('$app/forms').SubmitFunction} [useEnhance]
-   * @property {string} [class]
-   * @property {string} [errorMessage]
-   * @property {import('svelte').Snippet} children
-   * @property {import('svelte').Snippet} actions
-   */
-
-  /** @type {Props} */
-  let {
-    method = 'POST',
-    action = '',
-    enctype,
-    onsubmit,
-    useEnhance = undefined,
-    class: className,
-    errorMessage = '',
-    children,
-    actions
-  } = $props();
-</script>
-
-{#snippet body()}
-  <div class="flex flex-col gap-6">
-    {@render children()}
-  </div>
-
-  <div
-    class="fixed inset-x-0 bottom-0 z-20 border-t border-[color:var(--border-faint)] bg-[color:var(--bg)]/95 backdrop-blur-[1px]"
-  >
-    <div class="mx-auto flex max-w-[680px] items-center justify-between gap-3 px-7 py-3 md:px-8">
-      {#if errorMessage}
-        <p class="truncate text-[12px] text-[color:var(--red)]">{errorMessage}</p>
-      {:else}
-        <span></span>
-      {/if}
-      <div class="flex items-center gap-2">
-        {@render actions()}
-      </div>
-    </div>
-  </div>
-{/snippet}
-
-{#if useEnhance}
-  <form
-    {method}
-    {action}
-    {enctype}
-    {onsubmit}
-    use:enhance={useEnhance}
-    class={cn(
-      'mx-auto flex w-full max-w-[680px] flex-col',
-      'px-7 pt-4 pb-[88px] md:px-8',
-      className
-    )}
-  >
-    {@render body()}
-  </form>
-{:else}
-  <form
-    {method}
-    {action}
-    {enctype}
-    {onsubmit}
-    class={cn(
-      'mx-auto flex w-full max-w-[680px] flex-col',
-      'px-7 pt-4 pb-[88px] md:px-8',
-      className
-    )}
-  >
-    {@render body()}
-  </form>
-{/if}
diff --git a/frontend/src/lib/components/ui/form-shell/index.js b/frontend/src/lib/components/ui/form-shell/index.js
deleted file mode 100644
index 05fb6068..00000000
--- a/frontend/src/lib/components/ui/form-shell/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as FormShell } from './FormShell.svelte';
diff --git a/frontend/src/lib/components/ui/input/index.js b/frontend/src/lib/components/ui/input/index.js
deleted file mode 100644
index be0783a3..00000000
--- a/frontend/src/lib/components/ui/input/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from './input.svelte';
-
-export {
-  Root,
-  //
-  Root as Input
-};
diff --git a/frontend/src/lib/components/ui/input/input.svelte b/frontend/src/lib/components/ui/input/input.svelte
deleted file mode 100644
index 2ad40d22..00000000
--- a/frontend/src/lib/components/ui/input/input.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLInputElement | null,
-   *   value?: string | number,
-   *   type?: string,
-   *   files?: FileList | null,
-   *   class?: string,
-   *   'data-slot'?: string,
-   *   [key: string]: any
-   * }}
-   */
-  let {
-    ref = $bindable(null),
-    value = $bindable(),
-    type = 'text',
-    files = $bindable(),
-    class: className,
-    'data-slot': dataSlot = 'input',
-    ...restProps
-  } = $props();
-
-  const baseClass = [
-    'flex h-9 w-full min-w-0 px-3',
-    'rounded-[var(--r-md)] border border-[color:var(--border)]',
-    'bg-[color:var(--bg-input)] text-[13px] text-[color:var(--text)]',
-    'leading-none outline-none',
-    'placeholder:text-[color:var(--text-subtle)]',
-    'transition-[border-color,box-shadow] duration-150',
-    'hover:border-[color:var(--border-strong)]',
-    'focus-visible:border-[color:var(--text)] focus-visible:shadow-[0_0_0_3px_var(--focus-ring)]',
-    'aria-invalid:border-[color:var(--red)] aria-invalid:shadow-[0_0_0_3px_var(--red-soft)]',
-    'disabled:cursor-not-allowed disabled:opacity-50',
-    'selection:bg-[color:var(--text)] selection:text-[color:var(--bg)]'
-  ].join(' ');
-</script>
-
-{#if type === 'file'}
-  <input
-    bind:this={ref}
-    data-slot={dataSlot}
-    class={cn(baseClass, 'pt-1.5 text-[13px] font-medium', className)}
-    type="file"
-    bind:files
-    bind:value
-    {...restProps}
-  />
-{:else}
-  <input
-    bind:this={ref}
-    data-slot={dataSlot}
-    class={cn(baseClass, className)}
-    {type}
-    bind:value
-    {...restProps}
-  />
-{/if}
diff --git a/frontend/src/lib/components/ui/label/index.js b/frontend/src/lib/components/ui/label/index.js
deleted file mode 100644
index d1907754..00000000
--- a/frontend/src/lib/components/ui/label/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from './label.svelte';
-
-export {
-  Root,
-  //
-  Root as Label
-};
diff --git a/frontend/src/lib/components/ui/label/label.svelte b/frontend/src/lib/components/ui/label/label.svelte
deleted file mode 100644
index 03e33104..00000000
--- a/frontend/src/lib/components/ui/label/label.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  import { Label as LabelPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  let { ref = $bindable(null), class: className = undefined, ...restProps } = $props();
-</script>
-
-<LabelPrimitive.Root
-  bind:ref
-  data-slot="label"
-  class={cn(
-    'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-    className
-  )}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/pagination/Pagination.svelte b/frontend/src/lib/components/ui/pagination/Pagination.svelte
deleted file mode 100644
index f346f7d8..00000000
--- a/frontend/src/lib/components/ui/pagination/Pagination.svelte
+++ /dev/null
@@ -1,157 +0,0 @@
-<script>
-  import { ChevronLeft, ChevronRight, ChevronsUpDown } from '@lucide/svelte';
-  import * as Popover from '#lib/components/ui/popover/index.js';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   page?: number,
-   *   limit?: number,
-   *   total?: number,
-   *   limitOptions?: number[],
-   *   class?: string,
-   *   onPageChange?: (page: number) => void,
-   *   onLimitChange?: (limit: number) => void,
-   * }}
-   */
-  let {
-    page = 1,
-    limit = 10,
-    total = 0,
-    limitOptions = [10, 25, 50, 100],
-    class: className,
-    onPageChange,
-    onLimitChange
-  } = $props();
-
-  const totalPages = $derived(Math.ceil(total / limit) || 1);
-  const startItem = $derived((page - 1) * limit + 1);
-  const endItem = $derived(Math.min(page * limit, total));
-
-  let limitPopoverOpen = $state(false);
-
-  function handlePrevious() {
-    if (page > 1) {
-      onPageChange?.(page - 1);
-    }
-  }
-
-  function handleNext() {
-    if (page < totalPages) {
-      onPageChange?.(page + 1);
-    }
-  }
-
-  /**
-   * @param {number} newLimit
-   */
-  function handleLimitSelect(newLimit) {
-    limitPopoverOpen = false;
-    if (newLimit !== limit) {
-      onLimitChange?.(newLimit);
-    }
-  }
-</script>
-
-{#if total > 0}
-  <div
-    class={cn(
-      'relative mt-6 flex flex-col items-center gap-4 px-1 sm:flex-row sm:justify-between',
-      className
-    )}
-  >
-    <!-- Left side: Results summary with refined typography -->
-    <div class="flex items-center gap-2">
-      <p class="text-muted-foreground text-sm">
-        Showing
-        <span
-          class="bg-muted/50 text-foreground mx-1 inline-flex items-center justify-center rounded-md px-2 py-0.5 font-semibold tabular-nums"
-        >
-          {startItem}-{endItem}
-        </span>
-        of
-        <span class="text-foreground ml-1 font-semibold">{total}</span>
-        results
-      </p>
-    </div>
-
-    <!-- Right side: Controls -->
-    <div class="flex items-center gap-3">
-      <!-- Rows per page selector -->
-      <div class="flex items-center gap-2">
-        <span class="text-muted-foreground/70 text-xs font-medium tracking-wide uppercase"
-          >Rows</span
-        >
-        <Popover.Root bind:open={limitPopoverOpen}>
-          <Popover.Trigger asChild class="">
-            {#snippet child({ props })}
-              <button
-                type="button"
-                class="group border-border/60 bg-card/50 text-foreground hover:border-border hover:bg-card focus-visible:ring-ring/50 inline-flex h-9 items-center gap-1.5 rounded-lg border px-3 text-sm font-medium shadow-sm backdrop-blur-sm transition-all duration-150 focus-visible:ring-2 focus-visible:outline-none"
-                {...props}
-              >
-                <span class="tabular-nums">{limit}</span>
-                <ChevronsUpDown
-                  class="text-muted-foreground group-hover:text-foreground h-3.5 w-3.5 transition-colors"
-                />
-              </button>
-            {/snippet}
-          </Popover.Trigger>
-          <Popover.Content align="end" class="w-28 p-1.5">
-            <div class="flex flex-col gap-0.5">
-              {#each limitOptions as option (option)}
-                <button
-                  type="button"
-                  class={cn(
-                    'flex w-full items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors',
-                    option === limit
-                      ? 'bg-primary text-primary-foreground'
-                      : 'text-foreground hover:bg-muted'
-                  )}
-                  onclick={() => handleLimitSelect(option)}
-                >
-                  {option}
-                </button>
-              {/each}
-            </div>
-          </Popover.Content>
-        </Popover.Root>
-      </div>
-
-      <!-- Divider -->
-      <div class="bg-border/60 h-5 w-px"></div>
-
-      <!-- Page navigation -->
-      <div class="flex items-center gap-1.5">
-        <button
-          type="button"
-          disabled={page <= 1}
-          onclick={handlePrevious}
-          aria-label="Previous page"
-          class="group border-border/60 bg-card/50 text-muted-foreground hover:border-border hover:bg-card hover:text-foreground focus-visible:ring-ring/50 inline-flex h-9 w-9 items-center justify-center rounded-lg border shadow-sm backdrop-blur-sm transition-all duration-150 focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-40"
-        >
-          <ChevronLeft class="h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
-        </button>
-
-        <!-- Page indicator pill -->
-        <div
-          class="border-border/40 bg-muted/30 flex min-w-[7rem] items-center justify-center gap-1 rounded-lg border px-3 py-1.5"
-        >
-          <span class="text-foreground text-sm font-semibold tabular-nums">{page}</span>
-          <span class="text-muted-foreground text-xs">/</span>
-          <span class="text-muted-foreground text-sm tabular-nums">{totalPages}</span>
-        </div>
-
-        <button
-          type="button"
-          disabled={page >= totalPages}
-          onclick={handleNext}
-          aria-label="Next page"
-          class="group border-border/60 bg-card/50 text-muted-foreground hover:border-border hover:bg-card hover:text-foreground focus-visible:ring-ring/50 inline-flex h-9 w-9 items-center justify-center rounded-lg border shadow-sm backdrop-blur-sm transition-all duration-150 focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-40"
-        >
-          <ChevronRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-        </button>
-      </div>
-    </div>
-  </div>
-{/if}
diff --git a/frontend/src/lib/components/ui/pagination/index.js b/frontend/src/lib/components/ui/pagination/index.js
deleted file mode 100644
index 2aaec1ac..00000000
--- a/frontend/src/lib/components/ui/pagination/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Pagination } from './Pagination.svelte';
diff --git a/frontend/src/lib/components/ui/popover/index.js b/frontend/src/lib/components/ui/popover/index.js
deleted file mode 100644
index 3d237eb1..00000000
--- a/frontend/src/lib/components/ui/popover/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Popover as PopoverPrimitive } from 'bits-ui';
-import Content from './popover-content.svelte';
-import Trigger from './popover-trigger.svelte';
-const Root = PopoverPrimitive.Root;
-const Close = PopoverPrimitive.Close;
-
-export {
-  Root,
-  Content,
-  Trigger,
-  Close,
-  //
-  Root as Popover,
-  Content as PopoverContent,
-  Trigger as PopoverTrigger,
-  Close as PopoverClose
-};
diff --git a/frontend/src/lib/components/ui/popover/popover-content.svelte b/frontend/src/lib/components/ui/popover/popover-content.svelte
deleted file mode 100644
index c38845fa..00000000
--- a/frontend/src/lib/components/ui/popover/popover-content.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  import { Popover as PopoverPrimitive } from 'bits-ui';
-
-  /**
-   * @type {{
-   *   ref?: any,
-   *   class?: string,
-   *   sideOffset?: number,
-   *   align?: "start" | "center" | "end",
-   *   portalProps?: any,
-   *   [key: string]: any
-   * }}
-   */
-  let {
-    ref = $bindable(null),
-    class: className,
-    sideOffset = 4,
-    align = /** @type {"start" | "center" | "end"} */ ('center'),
-    portalProps,
-    ...restProps
-  } = $props();
-</script>
-
-<PopoverPrimitive.Portal {...portalProps}>
-  <PopoverPrimitive.Content
-    bind:ref
-    data-slot="popover-content"
-    {sideOffset}
-    {align}
-    class={cn(
-      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-      className
-    )}
-    {...restProps}
-  />
-</PopoverPrimitive.Portal>
diff --git a/frontend/src/lib/components/ui/popover/popover-trigger.svelte b/frontend/src/lib/components/ui/popover/popover-trigger.svelte
deleted file mode 100644
index 8247d524..00000000
--- a/frontend/src/lib/components/ui/popover/popover-trigger.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  import { Popover as PopoverPrimitive } from 'bits-ui';
-
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<PopoverPrimitive.Trigger
-  bind:ref
-  data-slot="popover-trigger"
-  class={cn('', className)}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/progress/index.js b/frontend/src/lib/components/ui/progress/index.js
deleted file mode 100644
index 8685886f..00000000
--- a/frontend/src/lib/components/ui/progress/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from './progress.svelte';
-
-export {
-  Root,
-  //
-  Root as Progress
-};
diff --git a/frontend/src/lib/components/ui/progress/progress.svelte b/frontend/src/lib/components/ui/progress/progress.svelte
deleted file mode 100644
index 21ef5b98..00000000
--- a/frontend/src/lib/components/ui/progress/progress.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { Progress as ProgressPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  let { ref = $bindable(null), class: className, max = 100, value, ...restProps } = $props();
-</script>
-
-<ProgressPrimitive.Root
-  bind:ref
-  data-slot="progress"
-  class={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
-  {value}
-  {max}
-  {...restProps}
->
-  <div
-    data-slot="progress-indicator"
-    class="bg-primary h-full w-full flex-1 transition-all"
-    style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
-  ></div>
-</ProgressPrimitive.Root>
diff --git a/frontend/src/lib/components/ui/section-card/SectionCard.svelte b/frontend/src/lib/components/ui/section-card/SectionCard.svelte
deleted file mode 100644
index 8ea79e92..00000000
--- a/frontend/src/lib/components/ui/section-card/SectionCard.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   title?: string | import('svelte').Snippet,
-   *   actions?: import('svelte').Snippet,
-   *   meta?: import('svelte').Snippet,
-   *   children?: import('svelte').Snippet,
-   *   padded?: boolean,
-   *   class?: string,
-   *   ref?: HTMLElement | null,
-   *   [key: string]: any
-   * }}
-   */
-  let {
-    title,
-    actions,
-    meta,
-    children,
-    padded = true,
-    class: className,
-    ref = $bindable(null),
-    ...restProps
-  } = $props();
-
-  const hasTitleRow = $derived(!!title || !!actions || !!meta);
-  /** @type {import('svelte').Snippet | undefined} */
-  const titleSnippet = $derived(typeof title === 'function' ? title : undefined);
-  const titleText = $derived(typeof title === 'string' ? title : '');
-</script>
-
-<section
-  bind:this={ref}
-  data-slot="section-card"
-  class={cn(
-    'rounded-[var(--r-lg)] border border-[color:var(--border-subtle)] bg-[color:var(--surface-default)] text-[color:var(--text)]',
-    padded && 'px-5 py-4',
-    className
-  )}
-  {...restProps}
->
-  {#if hasTitleRow}
-    <header
-      data-slot="section-card-header"
-      class={cn('flex items-center justify-between gap-3', children && 'mb-3')}
-    >
-      <div class="flex min-w-0 items-center gap-2">
-        {#if titleSnippet}
-          {@render titleSnippet()}
-        {:else if titleText}
-          <h3
-            class="truncate text-[16px] leading-[1.3] font-medium text-[color:var(--text-primary)]"
-          >
-            {titleText}
-          </h3>
-        {/if}
-        {#if meta}
-          {@render meta()}
-        {/if}
-      </div>
-      {#if actions}
-        <div class="flex shrink-0 items-center gap-1.5">
-          {@render actions()}
-        </div>
-      {/if}
-    </header>
-  {/if}
-  {#if children}
-    {@render children()}
-  {/if}
-</section>
diff --git a/frontend/src/lib/components/ui/section-card/index.js b/frontend/src/lib/components/ui/section-card/index.js
deleted file mode 100644
index b857cbaf..00000000
--- a/frontend/src/lib/components/ui/section-card/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as SectionCard } from './SectionCard.svelte';
-export { default } from './SectionCard.svelte';
diff --git a/frontend/src/lib/components/ui/select/index.js b/frontend/src/lib/components/ui/select/index.js
deleted file mode 100644
index 312f827c..00000000
--- a/frontend/src/lib/components/ui/select/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Root from './select.svelte';
-import Group from './select-group.svelte';
-import Label from './select-label.svelte';
-import Item from './select-item.svelte';
-import Content from './select-content.svelte';
-import Trigger from './select-trigger.svelte';
-import Separator from './select-separator.svelte';
-import ScrollDownButton from './select-scroll-down-button.svelte';
-import ScrollUpButton from './select-scroll-up-button.svelte';
-import GroupHeading from './select-group-heading.svelte';
-import Portal from './select-portal.svelte';
-
-export {
-  Root,
-  Group,
-  Label,
-  Item,
-  Content,
-  Trigger,
-  Separator,
-  ScrollDownButton,
-  ScrollUpButton,
-  GroupHeading,
-  Portal,
-  //
-  Root as Select,
-  Group as SelectGroup,
-  Label as SelectLabel,
-  Item as SelectItem,
-  Content as SelectContent,
-  Trigger as SelectTrigger,
-  Separator as SelectSeparator,
-  ScrollDownButton as SelectScrollDownButton,
-  ScrollUpButton as SelectScrollUpButton,
-  GroupHeading as SelectGroupHeading,
-  Portal as SelectPortal
-};
diff --git a/frontend/src/lib/components/ui/select/select-content.svelte b/frontend/src/lib/components/ui/select/select-content.svelte
deleted file mode 100644
index 26bc052f..00000000
--- a/frontend/src/lib/components/ui/select/select-content.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-  import { Select as SelectPrimitive } from 'bits-ui';
-  import SelectPortal from './select-portal.svelte';
-  import SelectScrollUpButton from './select-scroll-up-button.svelte';
-  import SelectScrollDownButton from './select-scroll-down-button.svelte';
-  import { cn } from '#lib/utils.js';
-  let {
-    ref = $bindable(null),
-    class: className = '',
-    sideOffset = 4,
-    portalProps = {},
-    children,
-    preventScroll = true,
-    ...restProps
-  } = $props();
-</script>
-
-<SelectPortal {...portalProps}>
-  <SelectPrimitive.Content
-    bind:ref
-    {sideOffset}
-    {preventScroll}
-    data-slot="select-content"
-    class={cn(
-      [
-        'relative z-50 min-w-[8rem] overflow-hidden overflow-x-hidden overflow-y-auto',
-        'rounded-[var(--r-md)] border border-[color:var(--border-faint)]',
-        'bg-[color:var(--bg-card)] text-[13px] text-[color:var(--text)]',
-        'shadow-[0_8px_24px_-12px_rgba(0,0,0,0.16)]',
-        'max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin)',
-        'data-[state=open]:animate-in data-[state=closed]:animate-out',
-        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2',
-        'data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2',
-        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1',
-        'data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1'
-      ].join(' '),
-      className
-    )}
-    {...restProps}
-  >
-    <SelectScrollUpButton />
-    <SelectPrimitive.Viewport
-      class={cn(
-        'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1'
-      )}
-    >
-      {@render children?.()}
-    </SelectPrimitive.Viewport>
-    <SelectScrollDownButton />
-  </SelectPrimitive.Content>
-</SelectPortal>
diff --git a/frontend/src/lib/components/ui/select/select-group-heading.svelte b/frontend/src/lib/components/ui/select/select-group-heading.svelte
deleted file mode 100644
index 6c4e7194..00000000
--- a/frontend/src/lib/components/ui/select/select-group-heading.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import { Select as SelectPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
-</script>
-
-<SelectPrimitive.GroupHeading
-  bind:ref
-  data-slot="select-group-heading"
-  class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
-  {...restProps}
->
-  {@render children?.()}
-</SelectPrimitive.GroupHeading>
diff --git a/frontend/src/lib/components/ui/select/select-group.svelte b/frontend/src/lib/components/ui/select/select-group.svelte
deleted file mode 100644
index 4f7b22de..00000000
--- a/frontend/src/lib/components/ui/select/select-group.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import { Select as SelectPrimitive } from 'bits-ui';
-
-  let { ref = $bindable(null), ...restProps } = $props();
-</script>
-
-<SelectPrimitive.Group bind:ref data-slot="select-group" {...restProps} />
diff --git a/frontend/src/lib/components/ui/select/select-item.svelte b/frontend/src/lib/components/ui/select/select-item.svelte
deleted file mode 100644
index 8aba1c0f..00000000
--- a/frontend/src/lib/components/ui/select/select-item.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-  import CheckIcon from '@lucide/svelte/icons/check';
-  import { Select as SelectPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  let {
-    ref = $bindable(null),
-    class: className = '',
-    value,
-    label = '',
-    children: childrenProp,
-    ...restProps
-  } = $props();
-</script>
-
-<SelectPrimitive.Item
-  bind:ref
-  {value}
-  data-slot="select-item"
-  class={cn(
-    [
-      'relative flex w-full cursor-default items-center gap-2 select-none',
-      'py-1.5 ps-2 pe-8 text-[13px] text-[color:var(--text-muted)]',
-      'rounded-[var(--r-sm)] outline-hidden',
-      'data-[highlighted]:bg-[color:var(--bg-elevated)] data-[highlighted]:text-[color:var(--text)]',
-      'data-[state=checked]:text-[color:var(--text)]',
-      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      "[&_svg:not([class*='text-'])]:text-[color:var(--text-subtle)]",
-      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[14px]",
-      '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2'
-    ].join(' '),
-    className
-  )}
-  {...restProps}
->
-  {#snippet children({ selected, highlighted })}
-    <span class="absolute end-2 flex size-3.5 items-center justify-center">
-      {#if selected}
-        <CheckIcon class="size-[14px]" />
-      {/if}
-    </span>
-    {#if childrenProp}
-      {@render childrenProp({ selected, highlighted })}
-    {:else}
-      {label || value}
-    {/if}
-  {/snippet}
-</SelectPrimitive.Item>
diff --git a/frontend/src/lib/components/ui/select/select-label.svelte b/frontend/src/lib/components/ui/select/select-label.svelte
deleted file mode 100644
index 77bda038..00000000
--- a/frontend/src/lib/components/ui/select/select-label.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
-</script>
-
-<div
-  bind:this={ref}
-  data-slot="select-label"
-  class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
-  {...restProps}
->
-  {@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/select/select-portal.svelte b/frontend/src/lib/components/ui/select/select-portal.svelte
deleted file mode 100644
index 6f23aeda..00000000
--- a/frontend/src/lib/components/ui/select/select-portal.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import { Select as SelectPrimitive } from 'bits-ui';
-
-  let { ...restProps } = $props();
-</script>
-
-<SelectPrimitive.Portal {...restProps} />
diff --git a/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte b/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
deleted file mode 100644
index 0293e938..00000000
--- a/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
-  import { Select as SelectPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  let { ref = $bindable(null), class: className = '', ...restProps } = $props();
-</script>
-
-<SelectPrimitive.ScrollDownButton
-  bind:ref
-  data-slot="select-scroll-down-button"
-  class={cn('flex cursor-default items-center justify-center py-1', className)}
-  {...restProps}
->
-  <ChevronDownIcon class="size-4" />
-</SelectPrimitive.ScrollDownButton>
diff --git a/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte b/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
deleted file mode 100644
index e493bd7b..00000000
--- a/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
-  import { Select as SelectPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  let { ref = $bindable(null), class: className = '', ...restProps } = $props();
-</script>
-
-<SelectPrimitive.ScrollUpButton
-  bind:ref
-  data-slot="select-scroll-up-button"
-  class={cn('flex cursor-default items-center justify-center py-1', className)}
-  {...restProps}
->
-  <ChevronUpIcon class="size-4" />
-</SelectPrimitive.ScrollUpButton>
diff --git a/frontend/src/lib/components/ui/select/select-separator.svelte b/frontend/src/lib/components/ui/select/select-separator.svelte
deleted file mode 100644
index 694a5355..00000000
--- a/frontend/src/lib/components/ui/select/select-separator.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-  import { Separator } from '#lib/components/ui/separator/index.js';
-  import { cn } from '#lib/utils.js';
-
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<Separator
-  bind:ref
-  data-slot="select-separator"
-  class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/select/select-trigger.svelte b/frontend/src/lib/components/ui/select/select-trigger.svelte
deleted file mode 100644
index 8174c06f..00000000
--- a/frontend/src/lib/components/ui/select/select-trigger.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-  import { Select as SelectPrimitive } from 'bits-ui';
-  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
-  import { cn } from '#lib/utils.js';
-
-  let {
-    ref = $bindable(null),
-    class: className,
-    children,
-    size = 'default',
-    ...restProps
-  } = $props();
-</script>
-
-<SelectPrimitive.Trigger
-  bind:ref
-  data-slot="select-trigger"
-  data-size={size}
-  class={cn(
-    [
-      'flex w-fit items-center justify-between gap-2 px-3 pr-2.5',
-      'rounded-[var(--r-md)] border border-[color:var(--border)]',
-      'bg-[color:var(--bg-input)] text-[13px] text-[color:var(--text)]',
-      'leading-none whitespace-nowrap outline-none select-none',
-      'transition-[border-color,box-shadow] duration-150',
-      'hover:border-[color:var(--border-strong)]',
-      'focus-visible:border-[color:var(--text)] focus-visible:shadow-[0_0_0_3px_var(--focus-ring)]',
-      'aria-invalid:border-[color:var(--red)] aria-invalid:shadow-[0_0_0_3px_var(--red-soft)]',
-      'disabled:cursor-not-allowed disabled:opacity-50',
-      'data-[placeholder]:text-[color:var(--text-subtle)]',
-      'data-[size=default]:h-9 data-[size=sm]:h-8',
-      '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',
-      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.7] [&_svg:not([class*='size-'])]:size-[14px]"
-    ].join(' '),
-    className
-  )}
-  {...restProps}
->
-  {@render children?.()}
-  <ChevronDownIcon class="size-[14px] text-[color:var(--text-subtle)]" />
-</SelectPrimitive.Trigger>
diff --git a/frontend/src/lib/components/ui/select/select.svelte b/frontend/src/lib/components/ui/select/select.svelte
deleted file mode 100644
index 80f9cec4..00000000
--- a/frontend/src/lib/components/ui/select/select.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import { Select as SelectPrimitive } from 'bits-ui';
-
-  let {
-    open = $bindable(false),
-    value = $bindable(),
-    type = /** @type {"single" | "multiple"} */ ('single'),
-    ...restProps
-  } = $props();
-</script>
-
-<SelectPrimitive.Root bind:open bind:value {type} {...restProps} />
diff --git a/frontend/src/lib/components/ui/separator/index.js b/frontend/src/lib/components/ui/separator/index.js
deleted file mode 100644
index 2402e13e..00000000
--- a/frontend/src/lib/components/ui/separator/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from './separator.svelte';
-
-export {
-  Root,
-  //
-  Root as Separator
-};
diff --git a/frontend/src/lib/components/ui/separator/separator.svelte b/frontend/src/lib/components/ui/separator/separator.svelte
deleted file mode 100644
index e22b42af..00000000
--- a/frontend/src/lib/components/ui/separator/separator.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { Separator as SeparatorPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  let {
-    ref = $bindable(null),
-    class: className = '',
-    'data-slot': dataSlot = 'separator',
-    ...restProps
-  } = $props();
-</script>
-
-<SeparatorPrimitive.Root
-  bind:ref
-  data-slot={dataSlot}
-  class={cn(
-    'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
-    className
-  )}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/sheet/index.js b/frontend/src/lib/components/ui/sheet/index.js
deleted file mode 100644
index d83a16aa..00000000
--- a/frontend/src/lib/components/ui/sheet/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Dialog as SheetPrimitive } from 'bits-ui';
-import Overlay from './sheet-overlay.svelte';
-import Content from './sheet-content.svelte';
-import Header from './sheet-header.svelte';
-import Title from './sheet-title.svelte';
-import Description from './sheet-description.svelte';
-
-const Root = SheetPrimitive.Root;
-const Portal = SheetPrimitive.Portal;
-
-export {
-  Root,
-  Portal,
-  Overlay,
-  Content,
-  Header,
-  Title,
-  Description,
-  //
-  Root as Sheet,
-  Portal as SheetPortal,
-  Overlay as SheetOverlay,
-  Content as SheetContent,
-  Header as SheetHeader,
-  Title as SheetTitle,
-  Description as SheetDescription
-};
diff --git a/frontend/src/lib/components/ui/sheet/sheet-content.svelte b/frontend/src/lib/components/ui/sheet/sheet-content.svelte
deleted file mode 100644
index 0df99483..00000000
--- a/frontend/src/lib/components/ui/sheet/sheet-content.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script module>
-  import { tv } from 'tailwind-variants';
-  export const sheetVariants = tv({
-    base: 'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-    variants: {
-      side: {
-        top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-        bottom:
-          'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-        left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm',
-        right:
-          'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm'
-      }
-    },
-    defaultVariants: {
-      side: 'right'
-    }
-  });
-</script>
-
-<script>
-  import { Dialog as SheetPrimitive } from 'bits-ui';
-  import SheetOverlay from './sheet-overlay.svelte';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   side?: 'top' | 'bottom' | 'left' | 'right',
-   *   portalProps?: Record<string, any>,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let {
-    ref = $bindable(null),
-    class: className,
-    side = 'right',
-    portalProps = {},
-    children,
-    ...restProps
-  } = $props();
-</script>
-
-<SheetPrimitive.Portal {...portalProps}>
-  <SheetOverlay />
-  <SheetPrimitive.Content
-    bind:ref
-    data-slot="sheet-content"
-    class={cn(sheetVariants({ side }), className)}
-    {...restProps}
-  >
-    {@render children?.()}
-  </SheetPrimitive.Content>
-</SheetPrimitive.Portal>
diff --git a/frontend/src/lib/components/ui/sheet/sheet-description.svelte b/frontend/src/lib/components/ui/sheet/sheet-description.svelte
deleted file mode 100644
index edb97aaf..00000000
--- a/frontend/src/lib/components/ui/sheet/sheet-description.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { Dialog as SheetPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<SheetPrimitive.Description
-  bind:ref
-  data-slot="sheet-description"
-  class={cn('text-muted-foreground text-sm', className)}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/sheet/sheet-header.svelte b/frontend/src/lib/components/ui/sheet/sheet-header.svelte
deleted file mode 100644
index 26ef31be..00000000
--- a/frontend/src/lib/components/ui/sheet/sheet-header.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
-</script>
-
-<div
-  bind:this={ref}
-  data-slot="sheet-header"
-  class={cn('flex flex-col gap-1.5 p-4', className)}
-  {...restProps}
->
-  {@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/sheet/sheet-overlay.svelte b/frontend/src/lib/components/ui/sheet/sheet-overlay.svelte
deleted file mode 100644
index 50c3dec5..00000000
--- a/frontend/src/lib/components/ui/sheet/sheet-overlay.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
-  import { Dialog as SheetPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<SheetPrimitive.Overlay
-  bind:ref
-  data-slot="sheet-overlay"
-  class={cn(
-    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-    className
-  )}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/sheet/sheet-title.svelte b/frontend/src/lib/components/ui/sheet/sheet-title.svelte
deleted file mode 100644
index daeba208..00000000
--- a/frontend/src/lib/components/ui/sheet/sheet-title.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { Dialog as SheetPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<SheetPrimitive.Title
-  bind:ref
-  data-slot="sheet-title"
-  class={cn('text-foreground font-semibold', className)}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/side-panel/SidePanel.svelte b/frontend/src/lib/components/ui/side-panel/SidePanel.svelte
deleted file mode 100644
index 38a0c189..00000000
--- a/frontend/src/lib/components/ui/side-panel/SidePanel.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script>
-  import { X, ChevronLeft } from '@lucide/svelte';
-  import { cn } from '#lib/utils.js';
-  import { sidePanelHidden } from './index.js';
-
-  /**
-   * @typedef {Object} Props
-   * @property {string} [class]
-   * @property {import('svelte').Snippet} [head]
-   * @property {import('svelte').Snippet} [body]
-   * @property {import('svelte').Snippet} [empty]
-   * @property {boolean} [hasActive]
-   */
-
-  /** @type {Props} */
-  let { class: className, head, body, empty, hasActive = true } = $props();
-
-  function close() {
-    sidePanelHidden.set(true);
-  }
-
-  function reopen() {
-    sidePanelHidden.set(false);
-  }
-</script>
-
-{#if $sidePanelHidden}
-  <button
-    type="button"
-    onclick={reopen}
-    aria-label="Show side panel"
-    class="fixed top-1/2 right-0 z-30 hidden h-16 w-3 -translate-y-1/2 items-center justify-center rounded-l-md border border-r-0 border-[color:var(--border)] bg-[color:var(--bg-card)] text-[color:var(--text-subtle)] hover:bg-[color:var(--bg-hover)] hover:text-[color:var(--text)] xl:flex"
-  >
-    <ChevronLeft class="size-3.5" />
-  </button>
-{:else}
-  <aside
-    class={cn(
-      'fixed top-0 right-0 z-20 hidden h-screen w-[380px] flex-col border-l border-[color:var(--border-faint)] bg-[color:var(--bg-card)] xl:flex',
-      className
-    )}
-  >
-    <div
-      class="flex items-start justify-between gap-2 border-b border-[color:var(--border-faint)] px-[22px] pt-5 pb-4"
-    >
-      <div class="min-w-0 flex-1">
-        {#if hasActive && head}
-          {@render head()}
-        {:else}
-          <p class="text-[13px] text-[color:var(--text-subtle)]">No row selected</p>
-        {/if}
-      </div>
-      <button
-        type="button"
-        onclick={close}
-        aria-label="Hide side panel"
-        class="-mr-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-[color:var(--text-subtle)] hover:bg-[color:var(--bg-hover)] hover:text-[color:var(--text)]"
-      >
-        <X class="size-4" />
-      </button>
-    </div>
-
-    <div class="flex-1 overflow-y-auto px-[22px] py-[18px]">
-      {#if hasActive && body}
-        <div class="flex flex-col gap-5">
-          {@render body()}
-        </div>
-      {:else if empty}
-        {@render empty()}
-      {:else}
-        <p class="text-[12px] text-[color:var(--text-subtle)]">Click a row to peek.</p>
-      {/if}
-    </div>
-  </aside>
-{/if}
diff --git a/frontend/src/lib/components/ui/side-panel/SidePanelSection.svelte b/frontend/src/lib/components/ui/side-panel/SidePanelSection.svelte
deleted file mode 100644
index 00b84e1a..00000000
--- a/frontend/src/lib/components/ui/side-panel/SidePanelSection.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @typedef {Object} Props
-   * @property {string} label
-   * @property {string} [class]
-   * @property {import('svelte').Snippet} children
-   */
-
-  /** @type {Props} */
-  let { label, class: className, children } = $props();
-</script>
-
-<section class={cn('flex flex-col gap-2', className)}>
-  <h4 class="text-[10px] font-semibold tracking-[0.06em] text-[color:var(--text-subtle)] uppercase">
-    {label}
-  </h4>
-  <div class="flex flex-col gap-1.5 text-[13px] text-[color:var(--text)]">
-    {@render children()}
-  </div>
-</section>
diff --git a/frontend/src/lib/components/ui/side-panel/index.js b/frontend/src/lib/components/ui/side-panel/index.js
deleted file mode 100644
index 158a0b92..00000000
--- a/frontend/src/lib/components/ui/side-panel/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { writable } from 'svelte/store';
-
-const STORAGE_KEY = 'bottlecrm:side-panel-hidden';
-
-function readInitial() {
-  if (typeof sessionStorage === 'undefined') return false;
-  try {
-    return sessionStorage.getItem(STORAGE_KEY) === '1';
-  } catch {
-    return false;
-  }
-}
-
-export const sidePanelHidden = writable(readInitial());
-
-if (typeof window !== 'undefined') {
-  sidePanelHidden.subscribe((v) => {
-    try {
-      sessionStorage.setItem(STORAGE_KEY, v ? '1' : '0');
-    } catch {
-      /* private mode / storage disabled */
-    }
-  });
-}
-
-export { default as SidePanel } from './SidePanel.svelte';
-export { default as SidePanelSection } from './SidePanelSection.svelte';
diff --git a/frontend/src/lib/components/ui/skeleton/index.js b/frontend/src/lib/components/ui/skeleton/index.js
deleted file mode 100644
index df169ced..00000000
--- a/frontend/src/lib/components/ui/skeleton/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from './skeleton.svelte';
-
-export {
-  Root,
-  //
-  Root as Skeleton
-};
diff --git a/frontend/src/lib/components/ui/skeleton/skeleton.svelte b/frontend/src/lib/components/ui/skeleton/skeleton.svelte
deleted file mode 100644
index 4df4208a..00000000
--- a/frontend/src/lib/components/ui/skeleton/skeleton.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<div
-  bind:this={ref}
-  data-slot="skeleton"
-  class={cn('bg-accent animate-pulse rounded-md', className)}
-  {...restProps}
-></div>
diff --git a/frontend/src/lib/components/ui/stage-stepper/StageStepper.svelte b/frontend/src/lib/components/ui/stage-stepper/StageStepper.svelte
deleted file mode 100644
index 0dced2bb..00000000
--- a/frontend/src/lib/components/ui/stage-stepper/StageStepper.svelte
+++ /dev/null
@@ -1,80 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @typedef {Object} Stage
-   * @property {string} value
-   * @property {string} label
-   * @property {string} [meta] - date or dwell text shown under the name (e.g. "Mar 12 · 3d")
-   */
-
-  /**
-   * @type {{
-   *   stages: Stage[],
-   *   current: string,
-   *   class?: string,
-   * }}
-   */
-  let { stages = [], current = '', class: className } = $props();
-
-  // Index of the current stage; -1 means "no current" → all rendered as future.
-  const currentIndex = $derived(stages.findIndex((s) => s.value === current));
-
-  /**
-   * @param {number} i
-   * @returns {'done' | 'current' | 'future'}
-   */
-  function stateAt(i) {
-    if (currentIndex === -1) return 'future';
-    if (i < currentIndex) return 'done';
-    if (i === currentIndex) return 'current';
-    return 'future';
-  }
-</script>
-
-<div
-  role="list"
-  aria-label="Stage progress"
-  class={cn('grid w-full gap-1.5', className)}
-  style="grid-template-columns: repeat({stages.length}, minmax(0, 1fr));"
->
-  {#each stages as stage, i (stage.value)}
-    {@const state = stateAt(i)}
-    <div
-      role="listitem"
-      aria-current={state === 'current' ? 'step' : undefined}
-      class={cn(
-        'flex h-10 flex-col justify-center gap-0.5 rounded-[var(--r-md)] border px-2.5 py-1.5',
-        state === 'current' &&
-          'border-[color:var(--text)] bg-[color:var(--text)] text-[color:var(--bg)]',
-        state === 'done' &&
-          'border-[color:var(--border-faint)] bg-[color:var(--bg-elevated)] text-[color:var(--text-muted)]',
-        state === 'future' &&
-          'border-[color:var(--border-faint)] bg-[color:var(--bg-elevated)] text-[color:var(--text-subtle)]'
-      )}
-    >
-      <span
-        class={cn(
-          'truncate text-[10px] leading-none font-semibold tracking-[0.04em] uppercase',
-          state === 'current'
-            ? ''
-            : state === 'done'
-              ? 'text-[color:var(--text-muted)]'
-              : 'text-[color:var(--text-subtle)]'
-        )}
-      >
-        {stage.label}
-      </span>
-      <span
-        class={cn(
-          'truncate text-[10px] leading-none',
-          state === 'current'
-            ? 'text-[color:var(--bg)] opacity-80'
-            : 'text-[color:var(--text-subtle)]'
-        )}
-      >
-        {state === 'future' ? '—' : stage.meta || '—'}
-      </span>
-    </div>
-  {/each}
-</div>
diff --git a/frontend/src/lib/components/ui/stage-stepper/index.js b/frontend/src/lib/components/ui/stage-stepper/index.js
deleted file mode 100644
index 58c3de89..00000000
--- a/frontend/src/lib/components/ui/stage-stepper/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as StageStepper } from './StageStepper.svelte';
diff --git a/frontend/src/lib/components/ui/switch/index.js b/frontend/src/lib/components/ui/switch/index.js
deleted file mode 100644
index 5d85ec6c..00000000
--- a/frontend/src/lib/components/ui/switch/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Root from './switch.svelte';
-
-export { Root, Root as Switch };
diff --git a/frontend/src/lib/components/ui/switch/switch.svelte b/frontend/src/lib/components/ui/switch/switch.svelte
deleted file mode 100644
index d795fec7..00000000
--- a/frontend/src/lib/components/ui/switch/switch.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-  import { Switch as SwitchPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLButtonElement | null,
-   *   checked?: boolean,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let {
-    ref = $bindable(null),
-    checked = $bindable(false),
-    class: className,
-    ...restProps
-  } = $props();
-</script>
-
-<SwitchPrimitive.Root
-  bind:ref
-  bind:checked
-  data-slot="switch"
-  class={cn(
-    [
-      'relative inline-flex h-[18px] w-8 shrink-0 cursor-pointer items-center',
-      'rounded-full border border-transparent',
-      'bg-[color:var(--border)] data-[state=checked]:bg-[color:var(--text)]',
-      'transition-colors duration-150',
-      'outline-none focus-visible:shadow-[0_0_0_3px_var(--focus-ring)]',
-      'disabled:cursor-not-allowed disabled:opacity-50'
-    ].join(' '),
-    className
-  )}
-  {...restProps}
->
-  <SwitchPrimitive.Thumb
-    data-slot="switch-thumb"
-    class={cn(
-      'pointer-events-none block size-[14px] rounded-full bg-[color:var(--bg)]',
-      'shadow-[0_1px_2px_rgba(0,0,0,0.15)]',
-      'transition-transform duration-150',
-      'translate-x-0.5 data-[state=checked]:translate-x-[16px]'
-    )}
-  />
-</SwitchPrimitive.Root>
diff --git a/frontend/src/lib/components/ui/table/index.js b/frontend/src/lib/components/ui/table/index.js
deleted file mode 100644
index 4aaee157..00000000
--- a/frontend/src/lib/components/ui/table/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Root from './table.svelte';
-import Body from './table-body.svelte';
-import Cell from './table-cell.svelte';
-import Head from './table-head.svelte';
-import Header from './table-header.svelte';
-import Row from './table-row.svelte';
-
-export {
-  Root,
-  Body,
-  Cell,
-  Head,
-  Header,
-  Row,
-  //
-  Root as Table,
-  Body as TableBody,
-  Cell as TableCell,
-  Head as TableHead,
-  Header as TableHeader,
-  Row as TableRow
-};
diff --git a/frontend/src/lib/components/ui/table/table-body.svelte b/frontend/src/lib/components/ui/table/table-body.svelte
deleted file mode 100644
index f672c73d..00000000
--- a/frontend/src/lib/components/ui/table/table-body.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
-</script>
-
-<tbody
-  bind:this={ref}
-  data-slot="table-body"
-  class={cn('[&_tr:last-child]:border-0', className)}
-  {...restProps}
->
-  {@render children?.()}
-</tbody>
diff --git a/frontend/src/lib/components/ui/table/table-cell.svelte b/frontend/src/lib/components/ui/table/table-cell.svelte
deleted file mode 100644
index fa0041c3..00000000
--- a/frontend/src/lib/components/ui/table/table-cell.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
-</script>
-
-<td
-  bind:this={ref}
-  data-slot="table-cell"
-  class={cn(
-    'bg-clip-padding p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0',
-    className
-  )}
-  {...restProps}
->
-  {@render children?.()}
-</td>
diff --git a/frontend/src/lib/components/ui/table/table-head.svelte b/frontend/src/lib/components/ui/table/table-head.svelte
deleted file mode 100644
index 4197ee26..00000000
--- a/frontend/src/lib/components/ui/table/table-head.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
-</script>
-
-<th
-  bind:this={ref}
-  data-slot="table-head"
-  class={cn(
-    'text-foreground h-10 bg-clip-padding px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0',
-    className
-  )}
-  {...restProps}
->
-  {@render children?.()}
-</th>
diff --git a/frontend/src/lib/components/ui/table/table-header.svelte b/frontend/src/lib/components/ui/table/table-header.svelte
deleted file mode 100644
index acb7a046..00000000
--- a/frontend/src/lib/components/ui/table/table-header.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
-</script>
-
-<thead
-  bind:this={ref}
-  data-slot="table-header"
-  class={cn('[&_tr]:border-b', className)}
-  {...restProps}
->
-  {@render children?.()}
-</thead>
diff --git a/frontend/src/lib/components/ui/table/table-row.svelte b/frontend/src/lib/components/ui/table/table-row.svelte
deleted file mode 100644
index ef9684aa..00000000
--- a/frontend/src/lib/components/ui/table/table-row.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
-</script>
-
-<tr
-  bind:this={ref}
-  data-slot="table-row"
-  class={cn(
-    'hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
-    className
-  )}
-  {...restProps}
->
-  {@render children?.()}
-</tr>
diff --git a/frontend/src/lib/components/ui/table/table.svelte b/frontend/src/lib/components/ui/table/table.svelte
deleted file mode 100644
index 97d5fb92..00000000
--- a/frontend/src/lib/components/ui/table/table.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   ref?: HTMLElement | null,
-   *   class?: string,
-   *   children?: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
-</script>
-
-<div data-slot="table-container" class="relative w-full overflow-x-auto">
-  <table
-    bind:this={ref}
-    data-slot="table"
-    class={cn('w-full caption-bottom text-sm', className)}
-    {...restProps}
-  >
-    {@render children?.()}
-  </table>
-</div>
diff --git a/frontend/src/lib/components/ui/tabs/index.js b/frontend/src/lib/components/ui/tabs/index.js
deleted file mode 100644
index 047a4ce6..00000000
--- a/frontend/src/lib/components/ui/tabs/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Root from './tabs.svelte';
-import Content from './tabs-content.svelte';
-import List from './tabs-list.svelte';
-import Trigger from './tabs-trigger.svelte';
-
-export {
-  Root,
-  Content,
-  List,
-  Trigger,
-  //
-  Root as Tabs,
-  Content as TabsContent,
-  List as TabsList,
-  Trigger as TabsTrigger
-};
diff --git a/frontend/src/lib/components/ui/tabs/tabs-content.svelte b/frontend/src/lib/components/ui/tabs/tabs-content.svelte
deleted file mode 100644
index 9b0cea5e..00000000
--- a/frontend/src/lib/components/ui/tabs/tabs-content.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import { Tabs as TabsPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  let { ref = $bindable(null), class: className, value, ...restProps } = $props();
-</script>
-
-<TabsPrimitive.Content
-  bind:ref
-  data-slot="tabs-content"
-  {value}
-  class={cn('flex-1 outline-none', className)}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/tabs/tabs-list.svelte b/frontend/src/lib/components/ui/tabs/tabs-list.svelte
deleted file mode 100644
index f39fa2b2..00000000
--- a/frontend/src/lib/components/ui/tabs/tabs-list.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-  import { Tabs as TabsPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  let { ref = $bindable(null), class: className, ...restProps } = $props();
-</script>
-
-<TabsPrimitive.List
-  bind:ref
-  data-slot="tabs-list"
-  class={cn(
-    'inline-flex w-full items-center gap-4 px-0',
-    'border-b border-[color:var(--border-faint)]',
-    'text-[color:var(--text-muted)]',
-    className
-  )}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte b/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
deleted file mode 100644
index 2b526bcb..00000000
--- a/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-  import { Tabs as TabsPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  let { ref = $bindable(null), class: className, value, ...restProps } = $props();
-</script>
-
-<TabsPrimitive.Trigger
-  bind:ref
-  data-slot="tabs-trigger"
-  {value}
-  class={cn(
-    [
-      'relative inline-flex items-center justify-center gap-1.5',
-      '-mb-px px-0 pb-2.5',
-      'text-[13px] leading-none font-medium whitespace-nowrap',
-      'text-[color:var(--text-muted)]',
-      'border-b-2 border-transparent',
-      'transition-colors duration-150',
-      'hover:text-[color:var(--text)]',
-      'data-[state=active]:border-[color:var(--text)] data-[state=active]:text-[color:var(--text)]',
-      'rounded-[var(--r-sm)] focus-visible:shadow-[0_0_0_3px_var(--focus-ring)] focus-visible:outline-none',
-      'disabled:pointer-events-none disabled:opacity-50',
-      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-    ].join(' '),
-    className
-  )}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/tabs/tabs.svelte b/frontend/src/lib/components/ui/tabs/tabs.svelte
deleted file mode 100644
index a5bb99c5..00000000
--- a/frontend/src/lib/components/ui/tabs/tabs.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import { Tabs as TabsPrimitive } from 'bits-ui';
-  import { cn } from '#lib/utils.js';
-
-  let { ref = $bindable(null), value = $bindable(''), class: className, ...restProps } = $props();
-</script>
-
-<TabsPrimitive.Root
-  bind:ref
-  bind:value
-  data-slot="tabs"
-  class={cn('flex flex-col gap-2', className)}
-  {...restProps}
-/>
diff --git a/frontend/src/lib/components/ui/textarea/index.js b/frontend/src/lib/components/ui/textarea/index.js
deleted file mode 100644
index f802ddff..00000000
--- a/frontend/src/lib/components/ui/textarea/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Root from './textarea.svelte';
-
-export {
-  Root,
-  //
-  Root as Textarea
-};
diff --git a/frontend/src/lib/components/ui/textarea/textarea.svelte b/frontend/src/lib/components/ui/textarea/textarea.svelte
deleted file mode 100644
index f982a97c..00000000
--- a/frontend/src/lib/components/ui/textarea/textarea.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-  let {
-    ref = $bindable(null),
-    value = $bindable(),
-    class: className = '',
-    'data-slot': dataSlot = 'textarea',
-    ...restProps
-  } = $props();
-</script>
-
-<textarea
-  bind:this={ref}
-  data-slot={dataSlot}
-  class={cn(
-    [
-      'flex min-h-[92px] w-full min-w-0 resize-y px-3 py-[9px]',
-      'rounded-[var(--r-md)] border border-[color:var(--border)]',
-      'bg-[color:var(--bg-input)] text-[13px] text-[color:var(--text)]',
-      'field-sizing-content leading-[1.55] outline-none',
-      'placeholder:text-[color:var(--text-subtle)]',
-      'transition-[border-color,box-shadow] duration-150',
-      'hover:border-[color:var(--border-strong)]',
-      'focus-visible:border-[color:var(--text)] focus-visible:shadow-[0_0_0_3px_var(--focus-ring)]',
-      'aria-invalid:border-[color:var(--red)] aria-invalid:shadow-[0_0_0_3px_var(--red-soft)]',
-      'disabled:cursor-not-allowed disabled:opacity-50'
-    ].join(' '),
-    className
-  )}
-  bind:value
-  {...restProps}></textarea>
diff --git a/frontend/src/lib/components/ui/timeline/Timeline.svelte b/frontend/src/lib/components/ui/timeline/Timeline.svelte
deleted file mode 100644
index 635d7dc1..00000000
--- a/frontend/src/lib/components/ui/timeline/Timeline.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   children?: import('svelte').Snippet,
-   *   empty?: import('svelte').Snippet,
-   *   isEmpty?: boolean,
-   *   class?: string,
-   * }}
-   */
-  let { children, empty, isEmpty = false, class: className } = $props();
-</script>
-
-{#if isEmpty}
-  <div class={cn('px-4 py-6 text-center text-[12px] text-[color:var(--text-subtle)]', className)}>
-    {#if empty}
-      {@render empty()}
-    {:else}
-      No activity yet.
-    {/if}
-  </div>
-{:else}
-  <ol class={cn('divide-y divide-[color:var(--border-faint)]', className)}>
-    {@render children?.()}
-  </ol>
-{/if}
diff --git a/frontend/src/lib/components/ui/timeline/TimelineItem.svelte b/frontend/src/lib/components/ui/timeline/TimelineItem.svelte
deleted file mode 100644
index 7b6224b0..00000000
--- a/frontend/src/lib/components/ui/timeline/TimelineItem.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script>
-  import { cn } from '#lib/utils.js';
-
-  /**
-   * @type {{
-   *   variant?: 'default' | 'success' | 'violet' | 'amber',
-   *   time?: string,
-   *   quote?: string,
-   *   text: import('svelte').Snippet,
-   *   icon?: import('svelte').Snippet,
-   *   class?: string,
-   * }}
-   */
-  let { variant = 'default', time = '', quote = '', text, icon, class: className } = $props();
-
-  // Map variant → icon background classes. Default is the neutral chip.
-  const iconBg = $derived(
-    variant === 'success'
-      ? 'bg-[color:var(--green)]/12 border-[color:var(--green)]/30 text-[color:var(--green)]'
-      : variant === 'violet'
-        ? 'bg-[color:var(--violet-soft)] border-[color:var(--violet)]/30 text-[color:var(--violet-soft-text)]'
-        : variant === 'amber'
-          ? 'bg-[color:var(--amber)]/12 border-[color:var(--amber)]/30 text-[color:var(--amber)]'
-          : 'bg-[color:var(--bg-elevated)] border-[color:var(--border-faint)] text-[color:var(--text-muted)]'
-  );
-</script>
-
-<li class={cn('flex items-start gap-3 py-3.5 first:pt-0 last:pb-0', className)}>
-  <div
-    aria-hidden="true"
-    class={cn('flex size-7 shrink-0 items-center justify-center rounded-full border', iconBg)}
-  >
-    {#if icon}
-      {@render icon()}
-    {/if}
-  </div>
-  <div class="min-w-0 flex-1">
-    <div
-      class="text-[13px] leading-[1.55] text-[color:var(--text-muted)] [&_strong]:font-medium [&_strong]:text-[color:var(--text)]"
-    >
-      {@render text()}
-    </div>
-    {#if quote}
-      <blockquote
-        class="mt-2 rounded-[var(--r-md)] border border-[color:var(--border-faint)] bg-[color:var(--bg-elevated)] px-3 py-2 text-[12px] leading-[1.5] text-[color:var(--text)]"
-      >
-        {quote}
-      </blockquote>
-    {/if}
-    {#if time}
-      <p class="mt-1.5 text-[11px] leading-none text-[color:var(--text-subtle)]">{time}</p>
-    {/if}
-  </div>
-</li>
diff --git a/frontend/src/lib/components/ui/timeline/index.js b/frontend/src/lib/components/ui/timeline/index.js
deleted file mode 100644
index 5b4130bf..00000000
--- a/frontend/src/lib/components/ui/timeline/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as Timeline } from './Timeline.svelte';
-export { default as TimelineItem } from './TimelineItem.svelte';
diff --git a/frontend/src/lib/components/ui/view-toggle/ViewToggle.svelte b/frontend/src/lib/components/ui/view-toggle/ViewToggle.svelte
deleted file mode 100644
index 1d9a030a..00000000
--- a/frontend/src/lib/components/ui/view-toggle/ViewToggle.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-  import { LayoutGrid, Table2 } from '@lucide/svelte';
-
-  /**
-   * @typedef {'table' | 'kanban'} ViewMode
-   */
-
-  /** @type {{ view: ViewMode, onchange?: (view: ViewMode) => void }} */
-  let { view = 'table', onchange } = $props();
-
-  /**
-   * Handle view change
-   * @param {ViewMode} newView
-   */
-  function handleChange(newView) {
-    if (newView !== view) {
-      onchange?.(newView);
-    }
-  }
-</script>
-
-<div
-  class="flex rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
-  role="group"
-  aria-label="View mode toggle"
->
-  <button
-    type="button"
-    onclick={() => handleChange('table')}
-    class="flex items-center gap-1.5 rounded-l-lg px-3 py-1.5 text-sm font-medium transition-colors {view ===
-    'table'
-      ? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
-      : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:text-gray-300'}"
-    aria-pressed={view === 'table'}
-    aria-label="Table view"
-  >
-    <Table2 class="h-4 w-4" />
-    <span class="hidden sm:inline">Table</span>
-  </button>
-  <button
-    type="button"
-    onclick={() => handleChange('kanban')}
-    class="flex items-center gap-1.5 rounded-r-lg border-l border-gray-200 px-3 py-1.5 text-sm font-medium transition-colors dark:border-gray-700 {view ===
-    'kanban'
-      ? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
-      : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:text-gray-300'}"
-    aria-pressed={view === 'kanban'}
-    aria-label="Kanban view"
-  >
-    <LayoutGrid class="h-4 w-4" />
-    <span class="hidden sm:inline">Kanban</span>
-  </button>
-</div>
diff --git a/frontend/src/lib/components/ui/view-toggle/index.js b/frontend/src/lib/components/ui/view-toggle/index.js
deleted file mode 100644
index 7d52b5d0..00000000
--- a/frontend/src/lib/components/ui/view-toggle/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ViewToggle } from './ViewToggle.svelte';
diff --git a/frontend/src/lib/components/users/TeamCard.svelte b/frontend/src/lib/components/users/TeamCard.svelte
deleted file mode 100644
index 39200fd5..00000000
--- a/frontend/src/lib/components/users/TeamCard.svelte
+++ /dev/null
@@ -1,126 +0,0 @@
-<script>
-  import { Users, Pencil, Trash2 } from '@lucide/svelte';
-  import { SectionCard } from '#lib/components/ui/section-card/index.js';
-  import * as Avatar from '#lib/components/ui/avatar/index.js';
-  import * as AlertDialog from '#lib/components/ui/alert-dialog/index.js';
-  import { Button } from '#lib/components/ui/button/index.js';
-  import { getInitials } from '#lib/utils/formatting.js';
-
-  /**
-   * @typedef {Object} TeamMember
-   * @property {string} id
-   * @property {Object} [user_details]
-   * @property {string} [user_details.email]
-   * @property {string} [user_details.profile_pic]
-   */
-
-  /**
-   * @typedef {Object} Team
-   * @property {string} id
-   * @property {string} name
-   * @property {string} [description]
-   * @property {TeamMember[]} [users]
-   * @property {string} [created_at]
-   */
-
-  /**
-   * @type {{
-   *   team: Team,
-   *   onEdit?: (team: Team) => void,
-   *   onDelete?: (teamId: string) => void,
-   *   maxAvatars?: number
-   * }}
-   */
-  let { team, onEdit, onDelete, maxAvatars = 4 } = $props();
-
-  const members = $derived(team.users || []);
-  const displayMembers = $derived(members.slice(0, maxAvatars));
-  const remainingCount = $derived(members.length > maxAvatars ? members.length - maxAvatars : 0);
-
-  /** @param {TeamMember} member */
-  function getMemberName(member) {
-    return member.user_details?.email?.split('@')[0] || 'User';
-  }
-
-  /** @param {TeamMember} member */
-  function getMemberAvatar(member) {
-    return member.user_details?.profile_pic || '';
-  }
-</script>
-
-<SectionCard class="group transition-shadow hover:shadow-md">
-  {#snippet title()}
-    <div class="flex items-center gap-3">
-      <div
-        class="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900/30"
-      >
-        <Users class="h-5 w-5 text-purple-600 dark:text-purple-400" />
-      </div>
-      <div>
-        <h3 class="text-[16px] leading-[1.3] font-medium text-[color:var(--text-primary)]">
-          {team.name}
-        </h3>
-        <p class="text-[12px] text-[color:var(--text-muted)]">
-          {members.length} member{members.length !== 1 ? 's' : ''}
-        </p>
-      </div>
-    </div>
-  {/snippet}
-
-  {#snippet actions()}
-    <div class="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
-      <Button variant="ghost" size="icon" class="h-8 w-8" onclick={() => onEdit?.(team)}>
-        <Pencil class="h-4 w-4" />
-      </Button>
-      <AlertDialog.Root>
-        <AlertDialog.Trigger
-          class="text-destructive hover:bg-destructive/10 inline-flex h-8 w-8 items-center justify-center rounded-md"
-        >
-          <Trash2 class="h-4 w-4" />
-        </AlertDialog.Trigger>
-        <AlertDialog.Content>
-          <AlertDialog.Header>
-            <AlertDialog.Title>Delete Team</AlertDialog.Title>
-            <AlertDialog.Description>
-              Are you sure you want to delete <strong>{team.name}</strong>? This will remove the
-              team from all assigned records. This action cannot be undone.
-            </AlertDialog.Description>
-          </AlertDialog.Header>
-          <AlertDialog.Footer>
-            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-            <Button variant="destructive" onclick={() => onDelete?.(team.id)}>Delete</Button>
-          </AlertDialog.Footer>
-        </AlertDialog.Content>
-      </AlertDialog.Root>
-    </div>
-  {/snippet}
-
-  {#if team.description}
-    <p class="text-muted-foreground mb-3 line-clamp-2 text-sm">{team.description}</p>
-  {/if}
-
-  <div class="flex items-center">
-    <div class="flex -space-x-2">
-      {#each displayMembers as member (member.id)}
-        <Avatar.Root class="border-background h-8 w-8 border-2">
-          {#if getMemberAvatar(member)}
-            <Avatar.Image class="" src={getMemberAvatar(member)} alt={getMemberName(member)} />
-          {/if}
-          <Avatar.Fallback class="bg-gradient-to-br from-blue-500 to-purple-600 text-xs text-white">
-            {getInitials(getMemberName(member))}
-          </Avatar.Fallback>
-        </Avatar.Root>
-      {/each}
-      {#if remainingCount > 0}
-        <div
-          class="bg-muted text-muted-foreground border-background flex h-8 w-8 items-center justify-center rounded-full border-2 text-xs font-medium"
-        >
-          +{remainingCount}
-        </div>
-      {/if}
-    </div>
-    {#if members.length === 0}
-      <span class="text-muted-foreground text-sm italic">No members assigned</span>
-    {/if}
-  </div>
-</SectionCard>
diff --git a/frontend/src/lib/components/users/TeamFormDialog.svelte b/frontend/src/lib/components/users/TeamFormDialog.svelte
deleted file mode 100644
index 1032accc..00000000
--- a/frontend/src/lib/components/users/TeamFormDialog.svelte
+++ /dev/null
@@ -1,158 +0,0 @@
-<script>
-  import * as Dialog from '#lib/components/ui/dialog/index.js';
-  import { Button } from '#lib/components/ui/button/index.js';
-  import { Input } from '#lib/components/ui/input/index.js';
-  import { Label } from '#lib/components/ui/label/index.js';
-  import EditableMultiSelect from '#lib/components/ui/editable-field/EditableMultiSelect.svelte';
-
-  /**
-   * @typedef {Object} User
-   * @property {string} id
-   * @property {string} name
-   * @property {string} email
-   */
-
-  /**
-   * @typedef {Object} Team
-   * @property {string} [id]
-   * @property {string} name
-   * @property {string} [description]
-   * @property {string[]} [userIds]
-   */
-
-  /**
-   * @type {{
-   *   open?: boolean,
-   *   team?: Team | null,
-   *   users?: User[],
-   *   onClose?: () => void,
-   *   onSubmit?: (data: { name: string, description: string, users: string[], teamId?: string }) => void,
-   *   isLoading?: boolean
-   * }}
-   */
-  let {
-    open = $bindable(false),
-    team = null,
-    users = [],
-    onClose,
-    onSubmit,
-    isLoading = false
-  } = $props();
-
-  // Form state
-  let formName = $state('');
-  let formDescription = $state('');
-  let formUsers = $state(/** @type {string[]} */ ([]));
-
-  // Reset form when dialog opens/closes or team changes
-  $effect(() => {
-    if (open) {
-      formName = team?.name || '';
-      formDescription = team?.description || '';
-      formUsers = team?.userIds || [];
-    }
-  });
-
-  const isEditing = $derived(!!team?.id);
-  const dialogTitle = $derived(isEditing ? 'Edit Team' : 'Create Team');
-  const submitLabel = $derived(isEditing ? 'Save Changes' : 'Create Team');
-
-  // Transform users for multi-select
-  const userOptions = $derived(
-    users.map((u) => ({
-      id: u.id,
-      name: u.name,
-      email: u.email
-    }))
-  );
-
-  function handleClose() {
-    open = false;
-    onClose?.();
-  }
-
-  /**
-   * @param {Event} e
-   */
-  function handleSubmit(e) {
-    e.preventDefault();
-    if (!formName.trim()) return;
-
-    onSubmit?.({
-      name: formName.trim(),
-      description: formDescription.trim(),
-      users: formUsers,
-      teamId: team?.id
-    });
-  }
-
-  /**
-   * @param {string[]} value
-   */
-  function handleUsersChange(value) {
-    formUsers = value;
-  }
-</script>
-
-<Dialog.Root bind:open onOpenChange={(o) => !o && handleClose()}>
-  <Dialog.Content class="sm:max-w-[500px]" portalProps={{}}>
-    <Dialog.Header class="">
-      <Dialog.Title class="">{dialogTitle}</Dialog.Title>
-      <Dialog.Description class="">
-        {isEditing
-          ? 'Update team details and member assignments.'
-          : 'Create a new team to group users for assignments.'}
-      </Dialog.Description>
-    </Dialog.Header>
-
-    <form onsubmit={handleSubmit} class="space-y-4">
-      <div class="space-y-2">
-        <Label class="" for="team-name">Team Name *</Label>
-        <Input
-          id="team-name"
-          bind:value={formName}
-          placeholder="e.g., Sales Team"
-          required
-          disabled={isLoading}
-        />
-      </div>
-
-      <div class="space-y-2">
-        <Label class="" for="team-description">Description</Label>
-        <textarea
-          id="team-description"
-          bind:value={formDescription}
-          placeholder="Describe the team's purpose..."
-          rows="3"
-          disabled={isLoading}
-          class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-        ></textarea>
-      </div>
-
-      <div class="space-y-2">
-        <Label class="">Assign Members</Label>
-        <EditableMultiSelect
-          value={formUsers}
-          options={userOptions}
-          placeholder="Select team members..."
-          emptyText="No members assigned"
-          onchange={handleUsersChange}
-          disabled={isLoading}
-          class="rounded-md border p-1"
-        />
-        <p class="text-muted-foreground text-xs">
-          Team members will be able to access records assigned to this team.
-        </p>
-      </div>
-
-      <Dialog.Footer class="gap-2 sm:gap-0">
-        <Button type="button" variant="outline" onclick={handleClose} disabled={isLoading}>
-          Cancel
-        </Button>
-        <Button type="submit" disabled={isLoading || !formName.trim()}>
-          {isLoading ? 'Saving...' : submitLabel}
-        </Button>
-      </Dialog.Footer>
-    </form>
-  </Dialog.Content>
-</Dialog.Root>
diff --git a/frontend/src/lib/components/users/index.js b/frontend/src/lib/components/users/index.js
deleted file mode 100644
index 890dc041..00000000
--- a/frontend/src/lib/components/users/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as TeamCard } from './TeamCard.svelte';
-export { default as TeamFormDialog } from './TeamFormDialog.svelte';
diff --git a/frontend/src/lib/constants/colors.js b/frontend/src/lib/constants/colors.js
deleted file mode 100644
index edc23fc9..00000000
--- a/frontend/src/lib/constants/colors.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * Tag color palette constants
- * Matches backend COLOR_CHOICES in common/models.py
- * @module lib/constants/colors
- */
-
-/**
- * @typedef {Object} TagColor
- * @property {string} value - Color key (matches backend)
- * @property {string} label - Display name
- * @property {string} class - Combined Tailwind classes for light/dark mode
- */
-
-/** @type {TagColor[]} */
-export const TAG_COLORS = [
-  {
-    value: 'gray',
-    label: 'Gray',
-    class: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'
-  },
-  {
-    value: 'red',
-    label: 'Red',
-    class: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-  },
-  {
-    value: 'orange',
-    label: 'Orange',
-    class: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
-  },
-  {
-    value: 'amber',
-    label: 'Amber',
-    class: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
-  },
-  {
-    value: 'yellow',
-    label: 'Yellow',
-    class: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
-  },
-  {
-    value: 'lime',
-    label: 'Lime',
-    class: 'bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-400'
-  },
-  {
-    value: 'green',
-    label: 'Green',
-    class: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-  },
-  {
-    value: 'emerald',
-    label: 'Emerald',
-    class: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
-  },
-  {
-    value: 'teal',
-    label: 'Teal',
-    class: 'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-400'
-  },
-  {
-    value: 'cyan',
-    label: 'Cyan',
-    class: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400'
-  },
-  {
-    value: 'sky',
-    label: 'Sky',
-    class: 'bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-400'
-  },
-  {
-    value: 'blue',
-    label: 'Blue',
-    class: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
-  },
-  {
-    value: 'indigo',
-    label: 'Indigo',
-    class: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400'
-  },
-  {
-    value: 'violet',
-    label: 'Violet',
-    class: 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400'
-  },
-  {
-    value: 'purple',
-    label: 'Purple',
-    class: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
-  },
-  {
-    value: 'fuchsia',
-    label: 'Fuchsia',
-    class: 'bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-900/30 dark:text-fuchsia-400'
-  },
-  {
-    value: 'pink',
-    label: 'Pink',
-    class: 'bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-400'
-  },
-  {
-    value: 'rose',
-    label: 'Rose',
-    class: 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400'
-  }
-];
-
-/**
- * Get Tailwind classes for a tag color
- * @param {string} color - Color value from TAG_COLORS
- * @returns {string} Combined Tailwind classes
- */
-export function getTagColorClass(color) {
-  const colorDef = TAG_COLORS.find((c) => c.value === color);
-  return colorDef?.class || TAG_COLORS[11].class; // Default to blue
-}
diff --git a/frontend/src/lib/constants/lead-choices.js b/frontend/src/lib/constants/lead-choices.js
deleted file mode 100644
index 00a154b9..00000000
--- a/frontend/src/lib/constants/lead-choices.js
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * Lead field choices matching Django backend
- * @module lib/constants/lead-choices
- */
-
-/** @type {{ value: string, label: string }[]} */
-export const INDUSTRIES = [
-  { value: '', label: 'Select Industry' },
-  { value: 'ADVERTISING', label: 'Advertising' },
-  { value: 'AGRICULTURE', label: 'Agriculture' },
-  { value: 'APPAREL & ACCESSORIES', label: 'Apparel & Accessories' },
-  { value: 'AUTOMOTIVE', label: 'Automotive' },
-  { value: 'BANKING', label: 'Banking' },
-  { value: 'BIOTECHNOLOGY', label: 'Biotechnology' },
-  { value: 'BUILDING MATERIALS & EQUIPMENT', label: 'Building Materials & Equipment' },
-  { value: 'CHEMICAL', label: 'Chemical' },
-  { value: 'COMPUTER', label: 'Computer' },
-  { value: 'EDUCATION', label: 'Education' },
-  { value: 'ELECTRONICS', label: 'Electronics' },
-  { value: 'ENERGY', label: 'Energy' },
-  { value: 'ENTERTAINMENT & LEISURE', label: 'Entertainment & Leisure' },
-  { value: 'FINANCE', label: 'Finance' },
-  { value: 'FOOD & BEVERAGE', label: 'Food & Beverage' },
-  { value: 'GROCERY', label: 'Grocery' },
-  { value: 'HEALTHCARE', label: 'Healthcare' },
-  { value: 'INSURANCE', label: 'Insurance' },
-  { value: 'LEGAL', label: 'Legal' },
-  { value: 'MANUFACTURING', label: 'Manufacturing' },
-  { value: 'PUBLISHING', label: 'Publishing' },
-  { value: 'REAL ESTATE', label: 'Real Estate' },
-  { value: 'SERVICE', label: 'Service' },
-  { value: 'SOFTWARE', label: 'Software' },
-  { value: 'SPORTS', label: 'Sports' },
-  { value: 'TECHNOLOGY', label: 'Technology' },
-  { value: 'TELECOMMUNICATIONS', label: 'Telecommunications' },
-  { value: 'TELEVISION', label: 'Television' },
-  { value: 'TRANSPORTATION', label: 'Transportation' },
-  { value: 'VENTURE CAPITAL', label: 'Venture Capital' }
-];
-
-/** @type {{ value: string, label: string }[]} */
-export const COUNTRIES = [
-  { value: '', label: 'Select Country' },
-  { value: 'US', label: 'United States' },
-  { value: 'GB', label: 'United Kingdom' },
-  { value: 'CA', label: 'Canada' },
-  { value: 'AU', label: 'Australia' },
-  { value: 'DE', label: 'Germany' },
-  { value: 'FR', label: 'France' },
-  { value: 'IN', label: 'India' },
-  { value: 'CN', label: 'China' },
-  { value: 'JP', label: 'Japan' },
-  { value: 'BR', label: 'Brazil' },
-  { value: 'MX', label: 'Mexico' },
-  { value: 'ES', label: 'Spain' },
-  { value: 'IT', label: 'Italy' },
-  { value: 'NL', label: 'Netherlands' },
-  { value: 'SE', label: 'Sweden' },
-  { value: 'CH', label: 'Switzerland' },
-  { value: 'SG', label: 'Singapore' },
-  { value: 'AE', label: 'United Arab Emirates' },
-  { value: 'AF', label: 'Afghanistan' },
-  { value: 'AL', label: 'Albania' },
-  { value: 'DZ', label: 'Algeria' },
-  { value: 'AR', label: 'Argentina' },
-  { value: 'AM', label: 'Armenia' },
-  { value: 'AT', label: 'Austria' },
-  { value: 'AZ', label: 'Azerbaijan' },
-  { value: 'BH', label: 'Bahrain' },
-  { value: 'BD', label: 'Bangladesh' },
-  { value: 'BY', label: 'Belarus' },
-  { value: 'BE', label: 'Belgium' },
-  { value: 'BG', label: 'Bulgaria' },
-  { value: 'CL', label: 'Chile' },
-  { value: 'CO', label: 'Colombia' },
-  { value: 'CR', label: 'Costa Rica' },
-  { value: 'HR', label: 'Croatia' },
-  { value: 'CY', label: 'Cyprus' },
-  { value: 'CZ', label: 'Czech Republic' },
-  { value: 'DK', label: 'Denmark' },
-  { value: 'EG', label: 'Egypt' },
-  { value: 'EE', label: 'Estonia' },
-  { value: 'FI', label: 'Finland' },
-  { value: 'GE', label: 'Georgia' },
-  { value: 'GR', label: 'Greece' },
-  { value: 'HK', label: 'Hong Kong' },
-  { value: 'HU', label: 'Hungary' },
-  { value: 'IS', label: 'Iceland' },
-  { value: 'ID', label: 'Indonesia' },
-  { value: 'IR', label: 'Iran' },
-  { value: 'IQ', label: 'Iraq' },
-  { value: 'IE', label: 'Ireland' },
-  { value: 'IL', label: 'Israel' },
-  { value: 'JO', label: 'Jordan' },
-  { value: 'KZ', label: 'Kazakhstan' },
-  { value: 'KE', label: 'Kenya' },
-  { value: 'KW', label: 'Kuwait' },
-  { value: 'LV', label: 'Latvia' },
-  { value: 'LB', label: 'Lebanon' },
-  { value: 'LT', label: 'Lithuania' },
-  { value: 'LU', label: 'Luxembourg' },
-  { value: 'MY', label: 'Malaysia' },
-  { value: 'MT', label: 'Malta' },
-  { value: 'MA', label: 'Morocco' },
-  { value: 'NZ', label: 'New Zealand' },
-  { value: 'NG', label: 'Nigeria' },
-  { value: 'NO', label: 'Norway' },
-  { value: 'OM', label: 'Oman' },
-  { value: 'PK', label: 'Pakistan' },
-  { value: 'PE', label: 'Peru' },
-  { value: 'PH', label: 'Philippines' },
-  { value: 'PL', label: 'Poland' },
-  { value: 'PT', label: 'Portugal' },
-  { value: 'QA', label: 'Qatar' },
-  { value: 'RO', label: 'Romania' },
-  { value: 'RU', label: 'Russia' },
-  { value: 'SA', label: 'Saudi Arabia' },
-  { value: 'RS', label: 'Serbia' },
-  { value: 'SK', label: 'Slovakia' },
-  { value: 'SI', label: 'Slovenia' },
-  { value: 'ZA', label: 'South Africa' },
-  { value: 'KR', label: 'South Korea' },
-  { value: 'LK', label: 'Sri Lanka' },
-  { value: 'TW', label: 'Taiwan' },
-  { value: 'TH', label: 'Thailand' },
-  { value: 'TR', label: 'Turkey' },
-  { value: 'UA', label: 'Ukraine' },
-  { value: 'UY', label: 'Uruguay' },
-  { value: 'VE', label: 'Venezuela' },
-  { value: 'VN', label: 'Vietnam' }
-];
diff --git a/frontend/src/lib/hooks/index.js b/frontend/src/lib/hooks/index.js
deleted file mode 100644
index c3a0f042..00000000
--- a/frontend/src/lib/hooks/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { IsMobile } from './is-mobile.svelte.js';
-export { useDrawerState } from './use-drawer-state.svelte.js';
-export { useListFilters } from './use-list-filters.svelte.js';
diff --git a/frontend/src/lib/hooks/is-mobile.svelte.js b/frontend/src/lib/hooks/is-mobile.svelte.js
deleted file mode 100644
index 7c500d82..00000000
--- a/frontend/src/lib/hooks/is-mobile.svelte.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { MediaQuery } from 'svelte/reactivity';
-
-const MOBILE_BREAKPOINT = 768;
-
-/**
- * A reactive class that tracks whether the viewport is mobile-sized.
- * Uses Svelte 5's MediaQuery to reactively check the viewport width.
- */
-export class IsMobile extends MediaQuery {
-  constructor() {
-    super(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-  }
-}
diff --git a/frontend/src/lib/hooks/use-drawer-state.svelte.js b/frontend/src/lib/hooks/use-drawer-state.svelte.js
deleted file mode 100644
index 1deba5c4..00000000
--- a/frontend/src/lib/hooks/use-drawer-state.svelte.js
+++ /dev/null
@@ -1,194 +0,0 @@
-import { SvelteURL } from 'svelte/reactivity';
-import { resolve } from '$app/paths';
-import { asInternalPath } from '#lib/utils/paths.js';
-import { goto } from '$app/navigation';
-
-/**
- * @typedef {Object} DrawerStateOptions
- * @property {import('$app/state').Page} [page] - SvelteKit page store for URL sync
- * @property {boolean} [syncUrl=false] - Whether to sync drawer state with URL
- */
-
-/**
- * Creates reactive drawer state management for list pages
- * @param {DrawerStateOptions} [options={}]
- */
-export function useDrawerState(options = {}) {
-  const { page, syncUrl = false } = options;
-
-  // Core state
-  let detailOpen = $state(false);
-  let formOpen = $state(false);
-  /** @type {any} */
-  let selected = $state(null);
-  let mode = $state(/** @type {'create' | 'edit'} */ ('create'));
-  let loading = $state(false);
-
-  /**
-   * Update URL without triggering navigation
-   * @param {string | null} viewId
-   * @param {string | null} action
-   */
-  function updateUrl(viewId, action) {
-    if (!syncUrl || !page) return;
-
-    const url = new SvelteURL(page.url.href);
-    if (viewId) {
-      url.searchParams.set('view', viewId);
-      url.searchParams.delete('action');
-    } else if (action) {
-      url.searchParams.set('action', action);
-      url.searchParams.delete('view');
-    } else {
-      url.searchParams.delete('view');
-      url.searchParams.delete('action');
-    }
-    goto(resolve(asInternalPath(`${url.pathname}${url.search}${url.hash}`)), {
-      replace: true,
-      reset: false
-    });
-  }
-
-  /**
-   * Open detail drawer with item
-   * @param {any} item
-   */
-  function openDetail(item) {
-    selected = item;
-    mode = 'edit'; // Set to edit mode (view with inline editing)
-    detailOpen = true;
-    updateUrl(item?.id, null);
-  }
-
-  /**
-   * Open create form
-   */
-  function openCreate() {
-    selected = null;
-    mode = 'create';
-    detailOpen = true;
-    formOpen = true;
-    updateUrl(null, 'create');
-  }
-
-  /**
-   * Open edit form (switches from detail to form)
-   */
-  function openEdit() {
-    mode = 'edit';
-    detailOpen = false;
-    formOpen = true;
-  }
-
-  /**
-   * Close detail drawer
-   */
-  function closeDetail() {
-    detailOpen = false;
-    updateUrl(null, null);
-  }
-
-  /**
-   * Close form drawer
-   */
-  function closeForm() {
-    formOpen = false;
-    updateUrl(null, null);
-  }
-
-  /**
-   * Close all drawers
-   */
-  function closeAll() {
-    detailOpen = false;
-    formOpen = false;
-    updateUrl(null, null);
-  }
-
-  /**
-   * Handle detail drawer open state change
-   * @param {boolean} open
-   */
-  function handleDetailChange(open) {
-    detailOpen = open;
-    if (!open) updateUrl(null, null);
-  }
-
-  /**
-   * Handle form drawer open state change
-   * @param {boolean} open
-   */
-  function handleFormChange(open) {
-    formOpen = open;
-    if (!open) updateUrl(null, null);
-  }
-
-  /**
-   * Initialize URL sync - call this with an effect and provide items list
-   * @param {any[]} items - List of items to search for viewId
-   */
-  function initUrlSync(items) {
-    if (!syncUrl || !page) return;
-
-    const viewId = page.url.searchParams.get('view');
-    const action = page.url.searchParams.get('action');
-
-    if (action === 'create') {
-      selected = null;
-      mode = 'create';
-      detailOpen = true;
-      formOpen = true;
-    } else if (viewId) {
-      const item = items.find((i) => i.id === viewId);
-      if (item) {
-        selected = item;
-        detailOpen = true;
-      }
-    }
-  }
-
-  return {
-    // State getters/setters
-    get detailOpen() {
-      return detailOpen;
-    },
-    set detailOpen(v) {
-      detailOpen = v;
-    },
-    get formOpen() {
-      return formOpen;
-    },
-    set formOpen(v) {
-      formOpen = v;
-    },
-    get selected() {
-      return selected;
-    },
-    set selected(v) {
-      selected = v;
-    },
-    get mode() {
-      return mode;
-    },
-    set mode(v) {
-      mode = v;
-    },
-    get loading() {
-      return loading;
-    },
-    set loading(v) {
-      loading = v;
-    },
-
-    // Actions
-    openDetail,
-    openCreate,
-    openEdit,
-    closeDetail,
-    closeForm,
-    closeAll,
-    handleDetailChange,
-    handleFormChange,
-    initUrlSync
-  };
-}
diff --git a/frontend/src/lib/hooks/use-list-filters.svelte.js b/frontend/src/lib/hooks/use-list-filters.svelte.js
deleted file mode 100644
index d176a61e..00000000
--- a/frontend/src/lib/hooks/use-list-filters.svelte.js
+++ /dev/null
@@ -1,215 +0,0 @@
-/**
- * @typedef {Object} FilterDef
- * @property {string} key - The filter key name
- * @property {any} defaultValue - Default value for this filter
- * @property {(item: any, value: any) => boolean} [match] - Custom match function
- */
-
-/**
- * @typedef {Object} ListFiltersOptions
- * @property {string[]} [searchFields=[]] - Fields to search in
- * @property {FilterDef[]} [filters=[]] - Filter definitions
- * @property {string} [defaultSortColumn='createdAt'] - Default sort column
- * @property {'asc' | 'desc'} [defaultSortDirection='desc'] - Default sort direction
- */
-
-/**
- * Helper function to get nested values like "owner.name"
- * @param {any} obj
- * @param {string} path
- * @returns {any}
- */
-function getNestedValue(obj, path) {
-  return path.split('.').reduce((current, key) => current?.[key], obj);
-}
-
-/**
- * Creates reactive filter, search, and sort state for list pages
- * @param {ListFiltersOptions} [options={}]
- */
-export function useListFilters(options = {}) {
-  const {
-    searchFields = [],
-    filters = [],
-    defaultSortColumn = 'createdAt',
-    defaultSortDirection = 'desc'
-  } = options;
-
-  // Search state
-  let searchQuery = $state('');
-  let showFilters = $state(false);
-
-  // Sort state
-  let sortColumn = $state(defaultSortColumn);
-  let sortDirection = $state(/** @type {'asc' | 'desc'} */ (defaultSortDirection));
-
-  // Build initial filter state from definitions
-  /** @type {Record<string, any>} */
-  const initialFilterState = {};
-  /** @type {Record<string, any>} */
-  const filterDefaults = {};
-  for (const filter of filters) {
-    initialFilterState[filter.key] = filter.defaultValue;
-    filterDefaults[filter.key] = filter.defaultValue;
-  }
-
-  // Filter state as a reactive object
-  let filterState = $state(initialFilterState);
-
-  /**
-   * Toggle sort column/direction
-   * @param {string} column
-   */
-  function toggleSort(column) {
-    if (sortColumn === column) {
-      sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
-    } else {
-      sortColumn = column;
-      sortDirection = 'desc';
-    }
-  }
-
-  /**
-   * Clear all filters
-   */
-  function clearFilters() {
-    searchQuery = '';
-    for (const filter of filters) {
-      filterState[filter.key] = filter.defaultValue;
-    }
-  }
-
-  /**
-   * Get count of active filters
-   * @returns {number}
-   */
-  function getActiveFilterCount() {
-    let count = 0;
-    for (const filter of filters) {
-      if (filterState[filter.key] !== filter.defaultValue) {
-        count++;
-      }
-    }
-    return count;
-  }
-
-  /**
-   * Apply search filter to item
-   * @param {any} item
-   * @returns {boolean}
-   */
-  function matchesSearch(item) {
-    if (searchQuery === '') return true;
-
-    const query = searchQuery.toLowerCase();
-    return searchFields.some((field) => {
-      const value = getNestedValue(item, field);
-      return value && String(value).toLowerCase().includes(query);
-    });
-  }
-
-  /**
-   * Apply custom filters to item
-   * @param {any} item
-   * @returns {boolean}
-   */
-  function matchesFilters(item) {
-    for (const filter of filters) {
-      const filterValue = filterState[filter.key];
-
-      // Skip if filter is at default value
-      if (filterValue === filter.defaultValue) continue;
-
-      // Use custom match function if provided
-      if (filter.match) {
-        if (!filter.match(item, filterValue)) return false;
-      } else {
-        // Default: direct field comparison
-        if (getNestedValue(item, filter.key) !== filterValue) return false;
-      }
-    }
-    return true;
-  }
-
-  /**
-   * Apply filters to items array
-   * @param {any[]} items
-   * @returns {any[]}
-   */
-  function applyFilters(items) {
-    return items.filter((item) => matchesSearch(item) && matchesFilters(item));
-  }
-
-  /**
-   * Apply sorting to items array
-   * @param {any[]} items
-   * @returns {any[]}
-   */
-  function applySort(items) {
-    return [...items].sort((a, b) => {
-      const aValue = getNestedValue(a, sortColumn);
-      const bValue = getNestedValue(b, sortColumn);
-
-      if (aValue == null && bValue == null) return 0;
-      if (aValue == null) return 1;
-      if (bValue == null) return -1;
-
-      const comparison = aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
-      return sortDirection === 'asc' ? comparison : -comparison;
-    });
-  }
-
-  /**
-   * Apply both filtering and sorting
-   * @param {any[]} items
-   * @returns {any[]}
-   */
-  function filterAndSort(items) {
-    return applySort(applyFilters(items));
-  }
-
-  return {
-    // Search state
-    get searchQuery() {
-      return searchQuery;
-    },
-    set searchQuery(v) {
-      searchQuery = v;
-    },
-    get showFilters() {
-      return showFilters;
-    },
-    set showFilters(v) {
-      showFilters = v;
-    },
-
-    // Sort state
-    get sortColumn() {
-      return sortColumn;
-    },
-    set sortColumn(v) {
-      sortColumn = v;
-    },
-    get sortDirection() {
-      return sortDirection;
-    },
-    set sortDirection(v) {
-      sortDirection = v;
-    },
-
-    // Filter state (reactive object)
-    get filters() {
-      return filterState;
-    },
-
-    // Actions
-    toggleSort,
-    clearFilters,
-
-    // Computed helpers
-    getActiveFilterCount,
-    applyFilters,
-    applySort,
-    filterAndSort
-  };
-}
diff --git a/frontend/src/lib/stores/org.js b/frontend/src/lib/stores/org.js
deleted file mode 100644
index d4a6e5e3..00000000
--- a/frontend/src/lib/stores/org.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { writable } from 'svelte/store';
-
-/**
- * @typedef {Object} OrgSettings
- * @property {string} default_currency - Default currency code (e.g., 'USD', 'EUR')
- * @property {string} currency_symbol - Currency symbol (e.g., '$', '€')
- * @property {string|null} default_country - Default country code or null
- */
-
-/** @type {import('svelte/store').Writable<OrgSettings>} */
-export const orgSettings = writable({
-  default_currency: 'USD',
-  currency_symbol: '$',
-  default_country: null
-});
-
-/**
- * Initialize org settings from JWT or API response
- * @param {Partial<OrgSettings>} settings
- */
-export function initOrgSettings(settings) {
-  orgSettings.set({
-    default_currency: settings.default_currency || 'USD',
-    currency_symbol: settings.currency_symbol || '$',
-    default_country: settings.default_country || null
-  });
-}
diff --git a/frontend/src/lib/utils/drag-drop.js b/frontend/src/lib/utils/drag-drop.js
deleted file mode 100644
index f26ce6f7..00000000
--- a/frontend/src/lib/utils/drag-drop.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * Drag and drop utilities for table row reordering
- * @module lib/utils/drag-drop
- */
-
-/**
- * @typedef {'before' | 'after' | null} DropPosition
- */
-
-/**
- * @typedef {Object} DragState
- * @property {string | null} draggedId - ID of the row being dragged
- * @property {string | null} dragOverId - ID of the row being dragged over
- * @property {DropPosition} dropPosition - Position relative to dragOverId
- */
-
-/**
- * Create initial drag state
- * @returns {DragState}
- */
-export function createDragState() {
-  return {
-    draggedId: null,
-    dragOverId: null,
-    dropPosition: null
-  };
-}
-
-/**
- * Calculate drop position based on mouse position
- * @param {DragEvent} event - Drag event
- * @returns {DropPosition}
- */
-export function calculateDropPosition(event) {
-  const target = /** @type {HTMLElement} */ (event.currentTarget);
-  const rect = target.getBoundingClientRect();
-  const midpoint = rect.top + rect.height / 2;
-  return event.clientY < midpoint ? 'before' : 'after';
-}
-
-/**
- * Reorder array items based on drag and drop
- * @template T
- * @param {T[]} items - Array of items
- * @param {string} draggedId - ID of dragged item
- * @param {string} targetId - ID of drop target
- * @param {DropPosition} position - Drop position
- * @param {(item: T) => string} getId - Function to get item ID
- * @returns {T[]} Reordered array
- */
-export function reorderItems(items, draggedId, targetId, position, getId) {
-  if (!draggedId || !targetId || draggedId === targetId || !position) {
-    return items;
-  }
-
-  const draggedIndex = items.findIndex((item) => getId(item) === draggedId);
-  const targetIndex = items.findIndex((item) => getId(item) === targetId);
-
-  if (draggedIndex === -1 || targetIndex === -1) {
-    return items;
-  }
-
-  const newItems = [...items];
-  const [draggedItem] = newItems.splice(draggedIndex, 1);
-
-  // Calculate insert position
-  let insertIndex;
-  if (position === 'after') {
-    insertIndex = draggedIndex < targetIndex ? targetIndex : targetIndex + 1;
-  } else {
-    insertIndex = draggedIndex < targetIndex ? targetIndex - 1 : targetIndex;
-  }
-
-  newItems.splice(insertIndex, 0, draggedItem);
-  return newItems;
-}
-
-/**
- * Handle drag start event
- * @param {DragEvent} event - Drag event
- * @param {string} itemId - ID of the item being dragged
- */
-export function handleDragStart(event, itemId) {
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move';
-    event.dataTransfer.setData('text/plain', itemId);
-  }
-}
-
-/**
- * Drag handle styles that show on row hover
- */
-export const dragHandleClasses =
-  'flex items-center justify-center w-6 h-6 rounded opacity-0 group-hover:opacity-40 hover:!opacity-70 hover:bg-gray-200 transition-all cursor-grab active:cursor-grabbing';
-
-/**
- * Expand button styles that show on row hover
- */
-export const expandButtonClasses =
-  'flex items-center justify-center w-6 h-6 rounded opacity-0 group-hover:opacity-100 hover:bg-gray-200 transition-all duration-75';
-
-/**
- * Drop indicator line styles
- */
-export const dropIndicatorClasses = 'h-0.5 bg-blue-400 rounded-full mx-4';
-
-/**
- * Dragged row styles
- */
-export const draggedRowClasses = 'opacity-40 bg-gray-100';
diff --git a/frontend/src/lib/utils/formatting.js b/frontend/src/lib/utils/formatting.js
deleted file mode 100644
index 56fb60b6..00000000
--- a/frontend/src/lib/utils/formatting.js
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * Formatting utilities for consistent data display across the application
- * @module lib/utils/formatting
- */
-
-const dateFormatter = new Intl.DateTimeFormat('en-US', {
-  month: 'short',
-  day: 'numeric',
-  year: 'numeric'
-});
-
-const relativeFormatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
-
-const RELATIVE_UNITS = /** @type {const} */ ([
-  { unit: 'year', ms: 365.25 * 24 * 60 * 60 * 1000 },
-  { unit: 'month', ms: 30.44 * 24 * 60 * 60 * 1000 },
-  { unit: 'week', ms: 7 * 24 * 60 * 60 * 1000 },
-  { unit: 'day', ms: 24 * 60 * 60 * 1000 },
-  { unit: 'hour', ms: 60 * 60 * 1000 },
-  { unit: 'minute', ms: 60 * 1000 },
-  { unit: 'second', ms: 1000 }
-]);
-
-/**
- * Format a date string to a human-readable format (e.g., "Feb 18, 2026")
- * @param {string | Date | null | undefined} date - Date to format
- * @returns {string} Formatted date string or '-' if no date
- */
-export function formatDate(date) {
-  if (!date) return '-';
-  try {
-    return dateFormatter.format(new Date(date));
-  } catch {
-    return '-';
-  }
-}
-
-/**
- * Format a date as relative time (e.g., "2 hours ago")
- * @param {string | Date | null | undefined} date - Date to format
- * @returns {string} Relative time string or '-' if no date
- */
-export function formatRelativeDate(date) {
-  if (!date) return '-';
-  try {
-    const diff = new Date(date).getTime() - Date.now();
-    for (const { unit, ms } of RELATIVE_UNITS) {
-      if (Math.abs(diff) >= ms || unit === 'second') {
-        return relativeFormatter.format(Math.round(diff / ms), unit);
-      }
-    }
-    return '-';
-  } catch {
-    return '-';
-  }
-}
-
-/**
- * Format a number as currency
- * @param {number | string | null | undefined} amount - Amount to format
- * @param {string} [currency='USD'] - Currency code (ISO 4217)
- * @param {boolean} [compact=false] - Use compact notation (e.g., $1.2M)
- * @returns {string} Formatted currency string or '-' if no amount
- */
-export function formatCurrency(amount, currency = 'USD', compact = false) {
-  if (amount === null || amount === undefined) return '-';
-
-  // Convert to number if string
-  const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
-
-  // Handle NaN or invalid numbers
-  if (isNaN(numAmount)) return '-';
-
-  // Ensure valid currency code (fallback to USD)
-  const currencyCode = currency && currency.length === 3 ? currency : 'USD';
-
-  try {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: currencyCode,
-      notation: compact ? 'compact' : 'standard',
-      maximumFractionDigits: compact ? 1 : 2
-    }).format(numAmount);
-  } catch {
-    // Fallback if currency code is invalid
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      notation: compact ? 'compact' : 'standard',
-      maximumFractionDigits: compact ? 1 : 2
-    }).format(numAmount);
-  }
-}
-
-/**
- * Format a number with commas
- * @param {number | null | undefined} num - Number to format
- * @returns {string} Formatted number string or '-' if no number
- */
-export function formatNumber(num) {
-  if (num === null || num === undefined) return '-';
-  return new Intl.NumberFormat('en-US').format(num);
-}
-
-/**
- * Get initials from a name string
- * @param {string | null | undefined} name - Full name
- * @param {number} [maxLength=2] - Maximum number of initials
- * @returns {string} Uppercase initials
- */
-export function getInitials(name, maxLength = 2) {
-  if (!name) return '';
-  return name
-    .split(' ')
-    .map((n) => n[0])
-    .join('')
-    .toUpperCase()
-    .slice(0, maxLength);
-}
-
-/**
- * Get initials from first and last name
- * @param {string | null | undefined} firstName
- * @param {string | null | undefined} lastName
- * @returns {string} Uppercase initials
- */
-export function getNameInitials(firstName, lastName) {
-  const first = firstName?.[0] || '';
-  const last = lastName?.[0] || '';
-  return `${first}${last}`.toUpperCase();
-}
-
-/**
- * Format a phone number for display
- * @param {string | null | undefined} phone - Phone number
- * @returns {string} Formatted phone number or empty string
- */
-export function formatPhone(phone) {
-  if (!phone) return '';
-  // Remove non-digits
-  const digits = phone.replace(/\D/g, '');
-  // Format as (XXX) XXX-XXXX if 10 digits
-  if (digits.length === 10) {
-    return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
-  }
-  // Return original if not 10 digits
-  return phone;
-}
diff --git a/frontend/src/lib/utils/phone.js b/frontend/src/lib/utils/phone.js
deleted file mode 100644
index ed38cc67..00000000
--- a/frontend/src/lib/utils/phone.js
+++ /dev/null
@@ -1,165 +0,0 @@
-/** @type {Promise<typeof import('libphonenumber-js')> | null} */
-let _lib = null;
-
-function getLib() {
-  if (!_lib) _lib = import('libphonenumber-js');
-  return _lib;
-}
-
-/**
- * Validates a phone number and returns validation result
- * @param {string} phoneNumber - The phone number to validate
- * @param {string} [defaultCountry] - Default country code (e.g., 'US', 'IN')
- * @returns {Promise<{ isValid: boolean, formatted?: string, error?: string }>}
- */
-export async function validatePhoneNumber(phoneNumber, defaultCountry) {
-  if (!phoneNumber || phoneNumber.trim() === '') {
-    return { isValid: true }; // Allow empty phone numbers
-  }
-
-  const trimmed = phoneNumber.trim();
-
-  try {
-    const { isValidPhoneNumber, parsePhoneNumber, isPossiblePhoneNumber } = await getLib();
-
-    // If the number starts with +, validate as international
-    if (trimmed.startsWith('+')) {
-      const isValid = isValidPhoneNumber(trimmed);
-      if (!isValid) {
-        return {
-          isValid: false,
-          error: 'Please enter a valid phone number with country code'
-        };
-      }
-      const parsed = parsePhoneNumber(trimmed);
-      return {
-        isValid: true,
-        formatted: parsed.formatInternational()
-      };
-    }
-
-    // For numbers without country code, try with default country if provided
-    if (defaultCountry) {
-      // @ts-ignore - defaultCountry is a valid CountryCode
-      const isValid = isValidPhoneNumber(trimmed, defaultCountry);
-      if (isValid) {
-        // @ts-ignore
-        const parsed = parsePhoneNumber(trimmed, defaultCountry);
-        return {
-          isValid: true,
-          formatted: parsed.formatInternational()
-        };
-      }
-    }
-
-    // Try common countries for numbers without + prefix
-    const commonCountries = ['IN', 'US', 'GB', 'AU', 'CA', 'DE', 'FR'];
-    for (const country of commonCountries) {
-      try {
-        // @ts-ignore
-        if (isValidPhoneNumber(trimmed, country)) {
-          // @ts-ignore
-          const parsed = parsePhoneNumber(trimmed, country);
-          return {
-            isValid: true,
-            formatted: parsed.formatInternational()
-          };
-        }
-      } catch {
-        continue;
-      }
-    }
-
-    // If nothing worked, check if it's at least a possible phone number
-    // (has right length, starts with valid digits, etc.)
-    if (isPossiblePhoneNumber(trimmed, 'IN') || isPossiblePhoneNumber(trimmed, 'US')) {
-      return {
-        isValid: true,
-        formatted: trimmed
-      };
-    }
-
-    return {
-      isValid: false,
-      error:
-        'Please enter a valid phone number (include country code like +91 for India or +1 for US)'
-    };
-  } catch {
-    return {
-      isValid: false,
-      error: 'Please enter a valid phone number'
-    };
-  }
-}
-
-/**
- * Formats a phone number for display
- * @param {string} phoneNumber - The phone number to format
- * @param {string} defaultCountry - Default country code
- * @returns {Promise<string>} Formatted phone number or original if invalid
- */
-export async function formatPhoneNumber(phoneNumber, defaultCountry = 'US') {
-  if (!phoneNumber) return '';
-
-  try {
-    const { parsePhoneNumber } = await getLib();
-    // @ts-ignore - defaultCountry is a valid CountryCode
-    const parsed = parsePhoneNumber(phoneNumber, { defaultCountry });
-    return parsed.formatInternational();
-  } catch {
-    return phoneNumber; // Return original if parsing fails
-  }
-}
-
-/**
- * Formats a phone number for storage (E.164 format)
- * @param {string} phoneNumber - The phone number to format
- * @param {string} [defaultCountry] - Default country code
- * @returns {Promise<string>} E.164 formatted phone number or original if invalid
- */
-export async function formatPhoneForStorage(phoneNumber, defaultCountry) {
-  if (!phoneNumber) return '';
-
-  const trimmed = phoneNumber.trim();
-
-  try {
-    const { parsePhoneNumber } = await getLib();
-
-    // If starts with +, parse as international
-    if (trimmed.startsWith('+')) {
-      const parsed = parsePhoneNumber(trimmed);
-      return parsed.format('E.164');
-    }
-
-    // Try with default country first
-    if (defaultCountry) {
-      try {
-        // @ts-ignore
-        const parsed = parsePhoneNumber(trimmed, defaultCountry);
-        if (parsed.isValid()) {
-          return parsed.format('E.164');
-        }
-      } catch {
-        // Continue to try other countries
-      }
-    }
-
-    // Try common countries
-    const commonCountries = ['IN', 'US', 'GB', 'AU', 'CA', 'DE', 'FR'];
-    for (const country of commonCountries) {
-      try {
-        // @ts-ignore
-        const parsed = parsePhoneNumber(trimmed, country);
-        if (parsed.isValid()) {
-          return parsed.format('E.164');
-        }
-      } catch {
-        continue;
-      }
-    }
-
-    return phoneNumber; // Return original if parsing fails
-  } catch {
-    return phoneNumber; // Return original if parsing fails
-  }
-}
diff --git a/frontend/src/lib/utils/table-helpers.js b/frontend/src/lib/utils/table-helpers.js
deleted file mode 100644
index 22a21694..00000000
--- a/frontend/src/lib/utils/table-helpers.js
+++ /dev/null
@@ -1,343 +0,0 @@
-/**
- * Table helper utilities for CRM-style inline editing tables
- * @module lib/utils/table-helpers
- */
-
-/**
- * @typedef {Object} SelectOption
- * @property {string} value - Option value
- * @property {string} label - Display label
- * @property {string} color - Tailwind CSS classes for styling
- */
-
-/**
- * Get style classes for a select option
- * @param {string | null | undefined} value - Current value
- * @param {SelectOption[]} options - Available options
- * @returns {string} Tailwind CSS classes
- */
-export function getOptionStyle(value, options) {
-  const option = options.find((o) => o.value === value);
-  return option?.color ?? 'bg-[var(--surface-sunken)] text-[var(--text-secondary)]';
-}
-
-/**
- * Get display label for a select option
- * @param {string | null | undefined} value - Current value
- * @param {SelectOption[]} options - Available options
- * @returns {string} Display label
- */
-export function getOptionLabel(value, options) {
-  const option = options.find((o) => o.value === value);
-  return option?.label ?? value ?? '';
-}
-
-/**
- * Get the background color class (first part of color string)
- * @param {string | null | undefined} value - Current value
- * @param {SelectOption[]} options - Available options
- * @returns {string} Background color class
- */
-export function getOptionBgColor(value, options) {
-  const style = getOptionStyle(value, options);
-  return style.split(' ')[0] ?? 'bg-gray-100';
-}
-
-/**
- * Create a column config for localStorage persistence
- * @param {string} key - Column key
- * @param {string} label - Column label
- * @param {boolean} [visible=true] - Whether column is visible
- * @param {boolean} [canHide=true] - Whether column can be hidden
- * @returns {{ key: string, label: string, visible: boolean, canHide: boolean }}
- */
-export function createColumnConfig(key, label, visible = true, canHide = true) {
-  return { key, label, visible, canHide };
-}
-
-/**
- * Load column config from localStorage
- * @param {string} storageKey - localStorage key
- * @param {{ key: string, label: string, visible: boolean, canHide: boolean }[]} defaultColumns - Default columns
- * @returns {{ key: string, label: string, visible: boolean, canHide: boolean }[]}
- */
-export function loadColumnConfig(storageKey, defaultColumns) {
-  if (typeof window === 'undefined') return defaultColumns;
-  try {
-    const saved = localStorage.getItem(storageKey);
-    if (saved) {
-      const parsed = JSON.parse(saved);
-      return defaultColumns.map((def) => {
-        const savedCol = parsed.find((/** @type {{ key: string }} */ p) => p.key === def.key);
-        return savedCol ? { ...def, visible: savedCol.visible } : def;
-      });
-    }
-  } catch (e) {
-    console.error('Failed to load column config:', e);
-  }
-  return defaultColumns;
-}
-
-/**
- * Save column config to localStorage
- * @param {string} storageKey - localStorage key
- * @param {{ key: string, visible: boolean }[]} columns - Column config
- */
-export function saveColumnConfig(storageKey, columns) {
-  if (typeof window === 'undefined') return;
-  try {
-    localStorage.setItem(storageKey, JSON.stringify(columns));
-  } catch (e) {
-    console.error('Failed to save column config:', e);
-  }
-}
-
-/**
- * Toggle column visibility
- * @param {{ key: string, visible: boolean, canHide: boolean }[]} columns - Current columns
- * @param {string} key - Column key to toggle
- * @returns {{ key: string, visible: boolean, canHide: boolean }[]}
- */
-export function toggleColumnVisibility(columns, key) {
-  return columns.map((col) => {
-    if (col.key === key && col.canHide) {
-      return { ...col, visible: !col.visible };
-    }
-    return col;
-  });
-}
-
-/**
- * Get visible column count
- * @param {{ visible: boolean }[]} columns - Columns
- * @returns {{ visible: number, total: number }}
- */
-export function getVisibleColumnCount(columns) {
-  return {
-    visible: columns.filter((c) => c.visible).length,
-    total: columns.length
-  };
-}
-
-// Common status options for CRM entities - Using design system tokens
-// Must match Django LEAD_STATUS: assigned, in process, converted, recycled, closed
-export const leadStatusOptions = [
-  {
-    value: 'ASSIGNED',
-    label: 'Assigned',
-    color: 'bg-[var(--stage-new-bg)] text-[var(--stage-new)] dark:bg-[var(--stage-new)]/15'
-  },
-  {
-    value: 'IN_PROCESS',
-    label: 'In Process',
-    color:
-      'bg-[var(--stage-contacted-bg)] text-[var(--stage-contacted)] dark:bg-[var(--stage-contacted)]/15'
-  },
-  {
-    value: 'CONVERTED',
-    label: 'Converted',
-    color: 'bg-[var(--stage-won-bg)] text-[var(--stage-won)] dark:bg-[var(--stage-won)]/15'
-  },
-  {
-    value: 'RECYCLED',
-    label: 'Recycled',
-    color:
-      'bg-[var(--color-primary-light)] text-[var(--color-primary-default)] dark:bg-[var(--color-primary-default)]/15'
-  },
-  {
-    value: 'CLOSED',
-    label: 'Closed',
-    color: 'bg-[var(--surface-sunken)] text-[var(--text-secondary)]'
-  }
-];
-
-// Lead temperature ratings - using design system tokens
-export const leadRatingOptions = [
-  {
-    value: 'HOT',
-    label: 'Hot',
-    color: 'bg-[var(--lead-hot-bg)] text-[var(--lead-hot)] dark:bg-[var(--lead-hot)]/15'
-  },
-  {
-    value: 'WARM',
-    label: 'Warm',
-    color: 'bg-[var(--lead-warm-bg)] text-[var(--lead-warm)] dark:bg-[var(--lead-warm)]/15'
-  },
-  {
-    value: 'COLD',
-    label: 'Cold',
-    color: 'bg-[var(--lead-cold-bg)] text-[var(--lead-cold)] dark:bg-[var(--lead-cold)]/15'
-  }
-];
-
-// Priority options - using design system tokens
-export const priorityOptions = [
-  {
-    value: 'URGENT',
-    label: 'Urgent',
-    color:
-      'bg-[var(--priority-urgent-bg)] text-[var(--priority-urgent)] dark:bg-[var(--priority-urgent)]/15'
-  },
-  {
-    value: 'HIGH',
-    label: 'High',
-    color:
-      'bg-[var(--priority-high-bg)] text-[var(--priority-high)] dark:bg-[var(--priority-high)]/15'
-  },
-  {
-    value: 'NORMAL',
-    label: 'Normal',
-    color:
-      'bg-[var(--priority-medium-bg)] text-[var(--priority-medium)] dark:bg-[var(--priority-medium)]/15'
-  },
-  {
-    value: 'MEDIUM',
-    label: 'Medium',
-    color:
-      'bg-[var(--priority-medium-bg)] text-[var(--priority-medium)] dark:bg-[var(--priority-medium)]/15'
-  },
-  {
-    value: 'LOW',
-    label: 'Low',
-    color: 'bg-[var(--priority-low-bg)] text-[var(--priority-low)] dark:bg-[var(--priority-low)]/15'
-  }
-];
-
-// Task status options - using design system tokens
-export const taskStatusOptions = [
-  {
-    value: 'NOT STARTED',
-    label: 'Not Started',
-    color:
-      'bg-[var(--task-upcoming-bg)] text-[var(--task-upcoming)] dark:bg-[var(--task-upcoming)]/15'
-  },
-  {
-    value: 'IN PROGRESS',
-    label: 'In Progress',
-    color:
-      'bg-[var(--task-due-today-bg)] text-[var(--task-due-today)] dark:bg-[var(--task-due-today)]/15'
-  },
-  {
-    value: 'PENDING',
-    label: 'Pending',
-    color:
-      'bg-[var(--color-primary-light)] text-[var(--color-primary-default)] dark:bg-[var(--color-primary-default)]/15'
-  },
-  {
-    value: 'COMPLETED',
-    label: 'Completed',
-    color:
-      'bg-[var(--task-completed-bg)] text-[var(--task-completed)] dark:bg-[var(--task-completed)]/15'
-  },
-  {
-    value: 'DEFERRED',
-    label: 'Deferred',
-    color: 'bg-[var(--surface-sunken)] text-[var(--text-secondary)]'
-  }
-];
-
-// Ticket status options - using design system tokens
-export const ticketStatusOptions = [
-  {
-    value: 'New',
-    label: 'New',
-    color: 'bg-[var(--stage-new-bg)] text-[var(--stage-new)] dark:bg-[var(--stage-new)]/15'
-  },
-  {
-    value: 'Assigned',
-    label: 'Assigned',
-    color:
-      'bg-[var(--stage-qualified-bg)] text-[var(--stage-qualified)] dark:bg-[var(--stage-qualified)]/15'
-  },
-  {
-    value: 'Pending',
-    label: 'Pending',
-    color:
-      'bg-[var(--stage-negotiation-bg)] text-[var(--stage-negotiation)] dark:bg-[var(--stage-negotiation)]/15'
-  },
-  {
-    value: 'Closed',
-    label: 'Closed',
-    color: 'bg-[var(--surface-sunken)] text-[var(--text-secondary)]'
-  },
-  {
-    value: 'Rejected',
-    label: 'Rejected',
-    color: 'bg-[var(--stage-lost-bg)] text-[var(--stage-lost)] dark:bg-[var(--stage-lost)]/15'
-  },
-  {
-    value: 'Duplicate',
-    label: 'Duplicate',
-    color:
-      'bg-[var(--color-primary-light)] text-[var(--color-primary-default)] dark:bg-[var(--color-primary-default)]/15'
-  }
-];
-
-// Ticket type options - using design system tokens
-export const ticketTypeOptions = [
-  {
-    value: 'Question',
-    label: 'Question',
-    color:
-      'bg-[var(--stage-qualified-bg)] text-[var(--stage-qualified)] dark:bg-[var(--stage-qualified)]/15'
-  },
-  {
-    value: 'Incident',
-    label: 'Incident',
-    color:
-      'bg-[var(--color-primary-light)] text-[var(--color-primary-default)] dark:bg-[var(--color-primary-default)]/15'
-  },
-  {
-    value: 'Problem',
-    label: 'Problem',
-    color: 'bg-[var(--stage-lost-bg)] text-[var(--stage-lost)] dark:bg-[var(--stage-lost)]/15'
-  }
-];
-
-// Ticket priority options - using design system tokens
-export const ticketPriorityOptions = [
-  {
-    value: 'Low',
-    label: 'Low',
-    color: 'bg-[var(--priority-low-bg)] text-[var(--priority-low)] dark:bg-[var(--priority-low)]/15'
-  },
-  {
-    value: 'Normal',
-    label: 'Normal',
-    color:
-      'bg-[var(--priority-medium-bg)] text-[var(--priority-medium)] dark:bg-[var(--priority-medium)]/15'
-  },
-  {
-    value: 'High',
-    label: 'High',
-    color:
-      'bg-[var(--priority-high-bg)] text-[var(--priority-high)] dark:bg-[var(--priority-high)]/15'
-  },
-  {
-    value: 'Urgent',
-    label: 'Urgent',
-    color:
-      'bg-[var(--priority-urgent-bg)] text-[var(--priority-urgent)] dark:bg-[var(--priority-urgent)]/15'
-  }
-];
-
-// Account status options - using design system tokens
-export const accountStatusOptions = [
-  {
-    value: 'ACTIVE',
-    label: 'Active',
-    color:
-      'bg-[var(--color-success-light)] text-[var(--color-success-default)] dark:bg-[var(--color-success-default)]/15'
-  },
-  {
-    value: 'INACTIVE',
-    label: 'Inactive',
-    color: 'bg-[var(--surface-sunken)] text-[var(--text-secondary)]'
-  },
-  {
-    value: 'PENDING',
-    label: 'Pending',
-    color:
-      'bg-[var(--stage-negotiation-bg)] text-[var(--stage-negotiation)] dark:bg-[var(--stage-negotiation)]/15'
-  }
-];
diff --git a/frontend/src/lib/utils/ui-helpers.js b/frontend/src/lib/utils/ui-helpers.js
deleted file mode 100644
index 5b56b085..00000000
--- a/frontend/src/lib/utils/ui-helpers.js
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * UI helper utilities for consistent styling across the application
- * @module lib/utils/ui-helpers
- */
-
-/**
- * Lead/Contact status class mapping
- * @param {string | null | undefined} status
- * @returns {string} Tailwind CSS classes
- */
-export function getLeadStatusClass(status) {
-  /** @type {{ [key: string]: string }} */
-  const classes = {
-    NEW: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-    ASSIGNED: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-    IN_PROCESS: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
-    PENDING: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
-    CONTACTED: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
-    QUALIFIED: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
-    CONVERTED: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
-    RECYCLED: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
-    CLOSED: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
-  };
-  return classes[status?.toUpperCase() || ''] || classes.NEW;
-}
-
-/**
- * Ticket status class mapping
- * @param {string | null | undefined} status
- * @returns {string} Tailwind CSS classes
- */
-export function getTicketStatusClass(status) {
-  /** @type {{ [key: string]: string }} */
-  const classes = {
-    NEW: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-    ASSIGNED: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-    OPEN: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-    PENDING: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
-    'IN PROGRESS': 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
-    IN_PROGRESS: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
-    CLOSED: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
-    REJECTED: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
-    DUPLICATE: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
-  };
-  return classes[status?.toUpperCase() || ''] || classes.NEW;
-}
-
-/**
- * Ticket type class mapping
- * @param {string | null | undefined} ticketType
- * @returns {string} Tailwind CSS classes
- */
-export function getTicketTypeClass(ticketType) {
-  /** @type {{ [key: string]: string }} */
-  const classes = {
-    QUESTION: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-    INCIDENT: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
-    PROBLEM: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-  };
-  return (
-    classes[ticketType?.toUpperCase() || ''] ||
-    'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
-  );
-}
-
-/**
- * Priority class mapping
- * @param {string | null | undefined} priority
- * @returns {string} Tailwind CSS classes
- */
-export function getPriorityClass(priority) {
-  /** @type {{ [key: string]: string }} */
-  const classes = {
-    URGENT: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
-    HIGH: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
-    NORMAL: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
-    MEDIUM: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
-    LOW: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
-  };
-  return classes[priority?.toUpperCase() || ''] || classes.NORMAL;
-}
-
-/**
- * Lead rating configuration
- * @param {string | null | undefined} rating
- * @returns {{ color: string, bgColor: string, dots: number }}
- */
-export function getRatingConfig(rating) {
-  /** @type {{ [key: string]: { color: string, bgColor: string, dots: number } }} */
-  const configs = {
-    HOT: { color: 'text-red-500', bgColor: 'bg-red-500', dots: 3 },
-    WARM: { color: 'text-orange-500', bgColor: 'bg-orange-500', dots: 2 },
-    COLD: { color: 'text-blue-500', bgColor: 'bg-blue-500', dots: 1 }
-  };
-  return (
-    configs[rating?.toUpperCase() || ''] || {
-      color: 'text-gray-400',
-      bgColor: 'bg-gray-400',
-      dots: 0
-    }
-  );
-}
-
-/**
- * Task status class mapping
- * @param {string | null | undefined} status
- * @returns {string} Tailwind CSS classes
- */
-export function getTaskStatusClass(status) {
-  /** @type {{ [key: string]: string }} */
-  const classes = {
-    NEW: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-    'NOT STARTED': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-    'IN PROGRESS': 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
-    IN_PROGRESS: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
-    PENDING: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
-    COMPLETED: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
-    DEFERRED: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
-  };
-  return classes[status?.toUpperCase() || ''] || classes.NEW;
-}
-
-/**
- * Format status for display (replace underscores with spaces)
- * @param {string | null | undefined} status
- * @returns {string}
- */
-export function formatStatusDisplay(status) {
-  if (!status) return 'Unknown';
-  return status.replace(/_/g, ' ');
-}
diff --git a/mobile/test/unit/api_service_refresh_test.dart b/mobile/test/unit/api_service_refresh_test.dart
index c4893ac2..791f9c12 100644
--- a/mobile/test/unit/api_service_refresh_test.dart
+++ b/mobile/test/unit/api_service_refresh_test.dart
@@ -192,7 +192,7 @@ void main() {
       api.setClientForTesting(
         MockClient((request) async {
           throw const SocketException(
-            'Failed host lookup: pc-8000.rcdev.in',
+            'Failed host lookup: api.example.com',
             osError: OSError('No address associated with hostname', 7),
           );
         }),