Skip to content

Platform: Dashboard page — remove local components, use unified MetricCard and Badge, add Breadcrumbs #102

@8dazo

Description

@8dazo

Summary

Clean up the dashboard page by removing local MetricCard/SpendCard/StatusBadge definitions and replacing with unified components from #97 and #98.

Current Defect

  • Local MetricCard in dashboard/page.tsx is a more complex version of components/metric-card.tsx — two conflicting implementations
  • Local SpendCard has 3 color variants (slate/cyan/emerald) but isn't a shared component
  • Local StatusBadge uses rounded-full border — inconsistent with Badge component's rounded-md no-border
  • Cards use hardcoded colors (border-slate-800, bg-slate-950/80) instead of semantic tokens
  • No breadcrumbs

Solution

Files to Modify

  • Modify: apps/platform/app/projects/[projectId]/dashboard/page.tsx

Acceptance Criteria

  • No local MetricCard/SpendCard/StatusBadge definitions in dashboard/page.tsx
  • All metrics use unified MetricCard with appropriate variants
  • Status badges use Badge status variant
  • All colors use semantic tokens (no hardcoded slate/cyan)
  • Breadcrumb shows navigation trail

Depends on #95, #96, #97, #98
Part of #dashboard-ui-modernization

Metadata

Metadata

Assignees

Labels

area/platformPlatform app, ingest, and trace experience work.severity/mediumMedium priorityui/cosmeticCosmetic UI changes - styling, components, visual polish

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions