Skip to content

Admin Panel

The Tracker API includes an admin panel that provides a user-friendly interface for managing the system. The admin panel (tracker-admin-svelte) is built with SvelteKit 5, TypeScript, and Tailwind CSS/daisyUI, and communicates with the API via REST endpoints. It shares its API client, auth state, and most of its UI components with the public tracker frontend through the tracker-shared workspace package.

Access is restricted to users with the admin role — any other authenticated user is shown an "Access denied" screen instead of the app.

Features

  • Authentication: JWT-based authentication with the Tracker API, including SSO login (Google/Microsoft, when configured)
  • Dashboard: Overview of system statistics (active trackers, trackers moved in the last hour/24 hours/7 days, "gone dark" count) plus a movement calendar heatmap
  • Campaign Management: A unified, drill-down view for managing clients, brands, campaigns (production runs), and their parent/child batches
  • User Management: Create, read, update, and delete users, including role and per-client access assignment
  • Tracker Management: View and move trackers within a campaign/child run, including bulk import via CSV, from the run's detail page
  • Gone Dark Trackers: Dedicated view for trackers that haven't reported in 3+ days within active runs
  • Location Management: Manage delivery and storage locations, including geofence configuration and map visualization
  • Sorting Functionality: Sort data in tables/cards by various columns (for example, trackers by name, MAC address, or last report time)
  • Dark Mode / Theming: Switch between multiple daisyUI themes; the preference persists across sessions

Architecture

The admin panel is a standalone SvelteKit application that communicates with the Tracker API via REST endpoints. It is designed to be deployed separately from the API, allowing for independent scaling and maintenance. In production it is built as a static SvelteKit site (adapter-static) served by nginx, which also proxies API requests to the backend.

The admin panel uses the following technologies (see tracker-admin-svelte/package.json for exact versions):

  • Svelte 5 / SvelteKit: Component framework and application framework, used with runes ($state, $props, $derived)
  • TypeScript: Typed superset of JavaScript
  • Tailwind CSS v4 / daisyUI: Utility-first CSS framework and component theme library
  • tracker-shared: An internal workspace package shared with tracker-frontend-svelte that provides the API client, auth state, and most UI components
  • Leaflet / leaflet-geosearch / leaflet.markercluster: Interactive maps for location management
  • ECharts: Charting library used for dashboard visualizations
  • svelte-hero-icons: Icon set
  • Vite: Build tool and dev server
  • Vitest: Test runner
  • Docker: Containerization platform (Node 20 for the dev container, nginx:alpine for the production image)

Documentation Sections