PPLX-37 - trckr

← PPLX-37

feature,web,ux

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

Relationships Loading...

Create card component to display cost summary metrics (Storybook-first development).

## Implementation
- Create src/src/components/molecules/BillingCard/BillingCard.tsx
- Create src/src/components/molecules/BillingCard/BillingCard.stories.tsx
- Create src/src/components/molecules/BillingCard/BillingCard.test.tsx
- Props: totalCost, totalTokens, queryCount, modelBreakdown
- Support loading and error states
- Use design tokens for styling

## Storybook Stories
1. Default - with sample data
2. Loading - skeleton state
3. Error - error message display
4. Zero data - empty state
5. Large numbers - formatting test

## Component Features
- Display cost in USD format ($X.XXXX)
- Show token count with thousands separators (7,011)
- Model breakdown shows % distribution
- Responsive design (mobile/desktop)
- Accessible (proper ARIA labels)

## Acceptance Criteria
- All Storybook stories render correctly
- Component tests pass
- Follows design system tokens
- Loading state shows skeleton
- Error state shows message
- Responsive on all screen sizes

Pull Requests (comma-separated URLs)

Attachments

Comments (1)

agent · 2025-12-22

## Implementation Complete Created the BillingCard component with Storybook stories and comprehensive tests. ### Files Created - `src/src/components/molecules/BillingCard/BillingCard.tsx` - Main component - `src/src/components/molecules/BillingCard/BillingCard.stories.tsx` - 11 Storybook stories - `src/src/components/molecules/BillingCard/BillingCard.test.tsx` - 33 unit tests ### Component Features - **Props**: totalCost, totalTokens, queryCount, modelBreakdown, isLoading, error - **Cost formatting**: USD format with 4 decimal places ($X.XXXX) - **Number formatting**: Thousands separators (7,011) - **Model breakdown**: Percentage distribution with animated progress bars - **Loading state**: Skeleton placeholders with pulse animation - **Error state**: Red error message with icon - **Empty state**: "No usage data available" message when all values are zero - **Responsive**: Works on mobile and desktop (grid layout) - **Accessible**: ARIA labels, roles, progressbar attributes ### Storybook Stories 1. Default - with sample data (GPT-4, GPT-3.5 Turbo) 2. Loading - skeleton state 3. Error - error message display 4. Zero Data - empty state 5. Large Numbers - formatting test (12,345,678 tokens) ### Test Results All 33 unit tests pass covering rendering, states, formatting, and accessibility. ### Visual Verification All 5 required stories verified with Playwright screenshots - all render correctly.