Santhosh Janardhanan
3e36ea8888
- Update decision-log with UI layout decisions (Feb 18, 2026) - Update architecture with frontend layout patterns - Update config.yaml with TDD, documentation, UI standards rules - Create p00-api-documentation change (Scribe annotations) - Create p01-ui-foundation change (types, stores, Lucide) - Create p02-app-layout change (AppLayout, Sidebar, TopBar) - Create p03-dashboard-enhancement change (PageHeader, StatCard) - Create p04-content-patterns change (DataTable, FilterBar) - Create p05-page-migrations change (page migrations) - Fix E2E auth tests (11/11 passing) - Add JWT expiry validation to dashboard guard
2.2 KiB
2.2 KiB
Tasks: Dashboard Enhancement
Phase 1: PageHeader Component
- 3.1 Create
src/lib/components/layout/PageHeader.svelte - 3.2 Add title prop (required)
- 3.3 Add description prop (optional)
- 3.4 Add children snippet for action buttons
- 3.5 Style with Tailwind/DaisyUI
- 3.6 Write component test: renders title
- 3.7 Write component test: renders description
- 3.8 Write component test: renders action buttons
Phase 2: StatCard Component
- 3.9 Create
src/lib/components/common/directory - 3.10 Create
StatCard.svelte - 3.11 Add title, value props
- 3.12 Add description prop (optional)
- 3.13 Add trend prop ('up' | 'down' | 'neutral')
- 3.14 Add trendValue prop (optional)
- 3.15 Add icon prop (Lucide component)
- 3.16 Style trend indicators with colors
- 3.17 Style with DaisyUI card
- 3.18 Write component test: renders value
- 3.19 Write component test: trend colors correct
- 3.20 Write component test: icon renders
Phase 3: Dashboard Enhancement
- 3.21 Update
src/routes/dashboard/+page.svelte - 3.22 Add svelte:head with title
- 3.23 Add PageHeader component
- 3.24 Add "New Allocation" button in header
- 3.25 Add grid of 4 StatCards
- 3.26 Add Quick Actions card
- 3.27 Add Allocation Preview placeholder
- 3.28 Use periodStore for display
- 3.29 Write E2E test: dashboard renders correctly
Phase 4: Login Polish
- 3.30 Update
src/routes/login/+page.svelte - 3.31 Center card vertically in viewport
- 3.32 Add app branding/logo
- 3.33 Improve form styling consistency
- 3.34 Write E2E test: login page centered
Phase 5: Verification
- 3.35 Run
npm run check- no type errors - 3.36 Run
npm run test:unit- all tests pass - 3.37 Run
npm run test:e2e- all E2E tests pass - 3.38 Manual test: Dashboard looks correct
- 3.39 Manual test: Login page looks correct
Commits
feat(ui): Create PageHeader componentfeat(ui): Create StatCard component with trend indicatorsfeat(dashboard): Enhance dashboard with KPI cards and quick actionsfeat(login): Polish login page stylingtest(ui): Add tests for PageHeader and StatCard