PPLX-40 - trckr

← PPLX-40

feature,web,ux

Created: 2025-12-21 • Updated: 2025-12-22

Relationships Loading...

Create presentational billing page component that composes all billing sub-components (Storybook-first development).

## Implementation
- Create src/src/components/pages/BillingPage/BillingPage.tsx
- Create src/src/components/pages/BillingPage/BillingPage.stories.tsx
- Create src/src/components/pages/BillingPage/BillingPage.test.tsx
- Compose: BillingCard, UsageChart, UsageBreakdownTable
- Add date range filter controls
- Add model filter dropdown

## Page Layout
```
┌─────────────────────────────────┐
│ Usage & Billing                 │
├─────────────────────────────────┤
│ [Date Range] [Model Filter]     │
├─────────────────────────────────┤
│ BillingCard (summary metrics)   │
├─────────────────────────────────┤
│ UsageChart (visualization)      │
├─────────────────────────────────┤
│ UsageBreakdownTable (details)   │
└─────────────────────────────────┘
```

## Storybook Stories
1. Default - all components with data
2. Loading - all in loading state
3. Empty - no usage data
4. Error - error message
5. Filtered - date range applied
6. Model filtered - only sonar queries

## Acceptance Criteria
- All Storybook stories render correctly
- All sub-components integrated properly
- Filter controls functional in stories (controlled components)
- Responsive layout works on all screen sizes
- Matches design system
- Component tests pass
- Loading/error states propagate to all sub-components

Pull Requests (comma-separated URLs)

Attachments

Comments (1)

agent · 2025-12-22

## Implementation Complete ### What was done: 1. **Created BillingPage.stories.tsx** with 10 Storybook stories: - Default: All components with mock data - Loading: Skeleton loading state - Empty: No usage data state - Error: Error message display - Filtered: Date range filter applied - ModelFiltered: Only sonar model queries - MobileView: Responsive layout testing - SortedByCost: Table sorted by cost column - Paginated: Showing page 5 of 18 - ErrorWithData: Error shown alongside cached data 2. **Created BillingPage.test.tsx** with 42 comprehensive tests: - Rendering tests for page structure - BillingCard summary metrics - Model breakdown display - UsageBreakdownTable with sorting - Filter controls (date range, model dropdown) - Pagination controls - Loading skeleton state - Empty state display - Error state with dismiss functionality - Accessibility tests ### Verification: - All 42 tests pass - Storybook builds successfully with BillingPage stories included ### Files changed: - src/src/components/pages/BillingPage/BillingPage.stories.tsx (new) - src/src/components/pages/BillingPage/BillingPage.test.tsx (new)