Skip to content

Admin Svelte Implementation Plan

tracker-admin-svelte is the Svelte 5 rewrite of the admin panel, built by reusing tracker-frontend-svelte's app shell, theme system, API client, and auth/session logic rather than redesigning them. The migration is complete — the React app (tracker-admin) has been deleted and this is the live app. This doc now records the architecture decisions that are still true, not the original migration plan. For the cutover history (phases, incidents, dates), see svelte-staging-cutover-todo.md; for how the code sharing with tracker-frontend-svelte was structured, see admin-frontend-shared-code-todo.md.

Code Style

Same rules as the frontend: Svelte 5 runes only, no legacy syntax, small composable components, shared pieces promoted into src/lib/components/ or src/lib/utils/ once reused more than once. This mattered more here than for the frontend, given how much of the admin panel is repeated CRUD.

Repo Shape

Same shape as tracker-frontend-svelte:

tracker-admin-svelte/
├── build/
│   └── dev/
├── static/
├── src/
│   ├── lib/
│   │   ├── api/
│   │   ├── components/
│   │   ├── state/
│   │   ├── theme/
│   │   └── utils/
│   ├── routes/
│   ├── app.css
│   ├── app.html
│   └── app.d.ts
├── package.json
├── tailwind.config.ts
├── vite.config.ts
├── svelte.config.js
└── tsconfig.json

Docker

Runs as its own Compose service (admin-svelte-dev, port 3102, continuing the 310x frontend-family numbering — 3100 was the old React frontend, 3101 is tracker-frontend-svelte). build/dev/Dockerfile and build/dev/entrypoint.sh are framework-agnostic and shared with tracker-frontend-svelte's equivalents.

What's Shared vs. Admin-Specific

Most of the generic infrastructure (API client, auth/session, theme system, ThemeSelector, AnimatedDialog, pagination/sortable-header primitives, location/campaign editor and modal components) now lives in packages/tracker-shared and is used by both apps — see admin-frontend-shared-code-todo.md for what's shared and why.

What's admin-specific:

  • AppShell/Sidebar nav config — admin's 8 sidebar items (Dashboard, Clients, Brands, Production Runs, Trackers, Locations, Images, Users). Health Dashboard and Service Controller were not carried over — they were unused in the old React admin panel and excluded from the rewrite entirely (not deferred). That also kept chart.js/react-chartjs-2 off the initial rewrite list; Tracker Heatmaps is the only chart-using page that did get ported.
  • The CRUD quadruplets themselves (Clients, Brands, Production Runs, Trackers, Locations) — built on a shared list/detail/form/delete-confirm scaffold in src/lib/components/ rather than five bespoke pages, since they all share the same List/Detail/Create/Edit shape.
  • Tracker Heatmaps charting: kept Chart.js itself (same reasoning as keeping Leaflet in the frontend rewrite — the underlying library is framework-agnostic), replacing the React wrapper with direct Chart.js calls from Svelte lifecycle (onMount/onDestroy against a bound canvas element).

Custom Component Priority

Ported/wired first (already built in tracker-frontend-svelte, just needed porting/wiring): app shell, sidebar, theme switcher, modal shell, pagination, sortable headers, location editor/import modals, campaign editor/row/delete modals.

Designed fresh, no existing precedent: tracker status heatmap visualization, images gallery.

Excluded entirely (unused, not part of the rewrite): Health Dashboard, Service Controller.