dashboard-spec

Dashboard specification (implemented)

This document records the dashboard spec and notes what the current frontend implementation provides vs. what remains optional or unimplemented.

Stack and high-level

  • Frontend: Vue 3 + Vite + TypeScript (Composition API), Bulma CSS, Apache ECharts.
  • Backend adapter: Go in-memory adapter (existing). The app is intentionally read-only and in-memory; most aggregations are performed client-side.

High-level status

  • Core pages implemented: Overview (/), Projects (/projects), Project detail (/projects/:id), Customers (/customers), Customer detail (/customers/:id), Persons (/persons), Person detail (/persons/:id), Admin (/admin).
  • Timeline (Gantt-like) charts implemented in Overview, Person detail and Customer detail; charts include a vertical “Today” marker.
  • Filters: multi-value filters are encoded as CSV by default; server parseMultiParam accepts CSV and repeated params.
  • Discovery endpoints: /statuses and /priorities are used to populate selects.
  • Admin refresh endpoint exists (POST /admin/refresh) and is wired to the Admin page.

What is implemented (concrete)

  • Projects table (frontend/src/components/ProjectsTable.vue): id, name (link), customers (linked), status badge, priority badge, progress bar + % and start/end dates. Row navigates to project detail.
  • Status color palette: frontend/src/utils/statusColors.ts provides a shared color map; timeline bars and status badges use the same colors.
  • Timeline charts: custom ECharts custom series is used to render project bars; each bar is colored by status; a dashed red markLine shows today’s date.
  • Customers page (frontend/src/pages/Customers.vue): shows project counts, shared-project counts, unique people count per customer; names link to /customers/:id and People links to /persons with person_id query.
  • Persons page and Person detail: Persons.vue groups roles and links to project(s); PersonDetail.vue lists assigned projects and renders a timeline.
  • Customer detail: CustomerDetail.vue lists the customer’s projects and renders a timeline.
  • API client: frontend/src/api/client.ts encodes arrays as CSV by default and supports discovery calls.
  • ECharts wrapper: frontend/src/components/charts/EChart.vue exists and provides reactive option handling and safe click payloads.

What’s intentionally client-side today

  • Count aggregations (projects by status/priority/top-customers) are computed client-side from the project list. This is appropriate for small–medium datasets and keeps the backend simple.

Remaining / optional work

  • Server-side aggregation endpoints (counts by status/priority/customer) — not implemented. If you expect large datasets, adding dedicated backend endpoints is recommended.
  • Auto-refresh (periodic refresh toggle): Admin page currently exposes manual refresh; the periodic auto-refresh (60s) is not enabled by default and not wired yet.
  • Frontend integration tests / CI: backend unit tests exist; adding a CI job to run go test ./... and the frontend build is recommended.

Routes and notable files

  • frontend/src/router.ts — routes registered for Overview, Projects, ProjectDetail, Customers, CustomerDetail, Persons, PersonDetail, Admin.
  • frontend/src/pages/* — page components (Overview.vue, Projects.vue, ProjectDetail.vue, Customers.vue, CustomerDetail.vue, Persons.vue, PersonDetail.vue, Admin.vue).
  • frontend/src/components/ProjectsTable.vue — main projects table.
  • frontend/src/components/charts/EChart.vue — ECharts wrapper.
  • frontend/src/utils/statusColors.ts — status→color map.

UX / query semantics

  • Multi-value filters: encoded as CSV by default (e.g. ?status=active,planned). The backend accepts repeated params too. The client.listProjects() helper in frontend/src/api/client.ts constructs these.
  • URL sync: Projects list filter state is encoded into the URL for sharing/bookmarking.
  • Dates: localized with browser Intl APIs; timeline uses project start_date / end_date when present.

Small implementation notes & gotchas

  • Top-customers links: the frontend computes topCustomers by name and count; customer detail links introduced a CustomerDetail page which uses customer id — the top-customers data can be adjusted to include ids for robust linking.
  • Project badges retain Bulma classes for accessibility while using inline background color from statusColors for visual consistency.
  • The Today mark uses client Date.now() when the chart is rendered; chart timezones follow the browser locale/timezone.

Suggested next steps (pick one)

  • Update the backend with small aggregation endpoints for counts (if you expect large datasets): I can draft the server handlers and wire them into the adapter. Reply counts-endpoint.
  • Add periodic auto-refresh toggle to Admin page: reply auto-refresh and I’ll implement a 60s toggle.
  • Update this spec further to include example API responses or an OpenAPI → UI mapping file: reply openapi-ui-mapping.
  • Add CI job to run go test ./... and the frontend build: reply ci.
  • Nothing more right now: reply none.