refactor(design): adopt TanStack DataTable on /veeam-analysis, fill gaps

Follow-on polish for the nav-design overhaul (#9bfb575).

- /veeam-analysis migrates the bespoke TicketRow + custom pagination to
  the new DataTable using getRowCanExpand + renderSubRow. Drops ~85
  lines of fragment/colspan markup in favor of the standard pattern.

- PageHeader on the last common stragglers — /settings,
  /settings/security, /sentinelone/coverage, /sentinelone/mappings.
  Settings is reachable from the new top-bar UserMenu so it had to
  match the rest of the visual system.

- /dashboard and /status load with the new Skeleton helpers
  (SkeletonRows, SkeletonChart, SkeletonTable) so loading shells now
  approximate the post-load layout instead of a single h-NN bar.

- DESIGN.md: closed the straggler PageHeader item; deprioritized the
  hard-coded palette audit with a note that ~770 references are mostly
  semantic via the documented bg-{hue}-500/15 / text-{hue}-700 recipe.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
lorentz 2026-05-03 09:42:04 -04:00
parent 9bfb57553d
commit ab78e7bd4f
8 changed files with 242 additions and 250 deletions

View file

@ -311,8 +311,10 @@ below is the working backlog; expand as we go.
### Page shell
- [x] ~~Adopt `PageHeader` everywhere~~`/dashboard`, `/status`, all
`/admin/*` sub-pages, `/addigy-devices`, `/analyzer/ticket/[…]`,
`/analyzer/analysis/[…]` now use it. A handful of pages still need
it (kiosk, settings, sentinelone/* — low priority).
`/analyzer/analysis/[…]`, `/settings`, `/settings/security`,
`/sentinelone/coverage`, `/sentinelone/mappings` now use it. Kiosk
uses its own shell; the only stragglers are very small/internal
pages.
- [ ] Standardize container + padding (`container mx-auto px-6 py-6`). Pages
using `px-4`, `py-8`, `max-w-2xl` etc. should justify the deviation.
- [ ] Standardize section spacing (`space-y-6` between cards; pick `gap-6`
@ -363,9 +365,11 @@ below is the working backlog; expand as we go.
scheduler heartbeats via `/api/status/workers` and `WorkerPulse`.
### Tokens & theming
- [ ] Audit places that hard-code Tailwind palette colors (`text-orange-600`,
`bg-blue-500/15`) and either keep them as semantic status colors or
move them behind a token.
- [-] Hard-coded Tailwind palette colors are extensive (~770 references)
but most are **semantic** (status reds, info blues, warning ambers
via the `bg-{hue}-500/15 text-{hue}-700` recipe documented above).
Surveyed and deprioritized — case-by-case cleanup as new work
touches a page.
- [ ] Verify dark-mode contrast on status badges and chart legends; the 10%-
opacity borders in dark mode are subtle and may need lifting.