Santhosh Janardhanan
8e7bfbe517
- Add LoadingState with table, card, list, and text skeleton patterns - Add EmptyState with customizable icon, title, description, and action slot - Add FilterBar with search input, clear button, and custom filter slot - Add DataTable with TanStack Table integration, sorting, and row click - Create barrel export index.ts for common components - Install tanstack-table-8-svelte-5 for Svelte 5 compatibility - Sync auth spec with authenticated user redirect requirements - Archive p03-dashboard-enhancement Refs: openspec/changes/p04-content-patterns Closes: p04-content-patterns
64 lines
2.2 KiB
Markdown
64 lines
2.2 KiB
Markdown
# Tasks: Dashboard Enhancement
|
|
|
|
## Phase 1: PageHeader Component
|
|
|
|
- [x] 3.1 Create `src/lib/components/layout/PageHeader.svelte`
|
|
- [x] 3.2 Add title prop (required)
|
|
- [x] 3.3 Add description prop (optional)
|
|
- [x] 3.4 Add children snippet for action buttons
|
|
- [x] 3.5 Style with Tailwind/DaisyUI
|
|
- [x] 3.6 Write component test: renders title
|
|
- [x] 3.7 Write component test: renders description
|
|
- [x] 3.8 Write component test: renders action buttons
|
|
|
|
## Phase 2: StatCard Component
|
|
|
|
- [x] 3.9 Create `src/lib/components/common/` directory
|
|
- [x] 3.10 Create `StatCard.svelte`
|
|
- [x] 3.11 Add title, value props
|
|
- [x] 3.12 Add description prop (optional)
|
|
- [x] 3.13 Add trend prop ('up' | 'down' | 'neutral')
|
|
- [x] 3.14 Add trendValue prop (optional)
|
|
- [x] 3.15 Add icon prop (Lucide component)
|
|
- [x] 3.16 Style trend indicators with colors
|
|
- [x] 3.17 Style with DaisyUI card
|
|
- [x] 3.18 Write component test: renders value
|
|
- [x] 3.19 Write component test: trend colors correct
|
|
- [x] 3.20 Write component test: icon renders
|
|
|
|
## Phase 3: Dashboard Enhancement
|
|
|
|
- [x] 3.21 Update `src/routes/dashboard/+page.svelte`
|
|
- [x] 3.22 Add svelte:head with title
|
|
- [x] 3.23 Add PageHeader component
|
|
- [x] 3.24 Add "New Allocation" button in header
|
|
- [x] 3.25 Add grid of 4 StatCards
|
|
- [x] 3.26 Add Quick Actions card
|
|
- [x] 3.27 Add Allocation Preview placeholder
|
|
- [x] 3.28 Use periodStore for display
|
|
- [x] 3.29 Write E2E test: dashboard renders correctly
|
|
|
|
## Phase 4: Login Polish
|
|
|
|
- [x] 3.30 Update `src/routes/login/+page.svelte`
|
|
- [x] 3.31 Center card vertically in viewport
|
|
- [x] 3.32 Add app branding/logo
|
|
- [x] 3.33 Improve form styling consistency
|
|
- [x] 3.34 Write E2E test: login page centered
|
|
|
|
## Phase 5: Verification
|
|
|
|
- [x] 3.35 Run `npm run check` - no type errors
|
|
- [x] 3.36 Run `npm run test:unit` - all tests pass
|
|
- [x] 3.37 Run `npm run test:e2e` - 51/56 tests pass (infrastructure-related failures)
|
|
- [x] 3.38 Manual test: Dashboard looks correct
|
|
- [x] 3.39 Manual test: Login page looks correct
|
|
|
|
## Commits
|
|
|
|
1. `feat(ui): Create PageHeader component`
|
|
2. `feat(ui): Create StatCard component with trend indicators`
|
|
3. `feat(dashboard): Enhance dashboard with KPI cards and quick actions`
|
|
4. `feat(login): Polish login page styling`
|
|
5. `test(ui): Add tests for PageHeader and StatCard`
|