Superprompt: Generate React Components

Use with: Claude Code, Cursor, Gemini Code Assist

TASK: Create reusable React components for merchant dashboards

CONTEXT:
I'm building dashboard components that connect to the AIVA API.
These will be used in multiple merchant dashboards.

COMPONENT REQUIREMENTS:

- **CustomerSegmentChart Component**

   - Input: RFM breakdown data from /intelligence endpoint
   - Visualization: Donut chart with 5 segments
   - Library: Recharts
   - Colors: Champions (green), Loyal (blue), At Risk (orange), Hibernating (red), New (purple)
   - Show percentages and counts
   - Tooltip on hover
   - Click segment to filter customers

- **MRRCard Component**

   - Input: Subscription data
   - Calculate MRR (monthly subscriptions + yearly/12)
   - Display: MRR, ARR, ARPU
   - Show growth percentage vs last month
   - Green if growing, red if declining
   - Animated counter effect

- **CustomerTable Component**

   - Input: Customer array from API
   - Columns: Avatar, Name, Email, Segment Badge, Orders, Spent, Last Order
   - Sortable by all columns
   - Search/filter functionality
   - Pagination (client-side)
   - Export to CSV button
   - Responsive (stacks on mobile)

- **RevenueChart Component**

   - Input: Revenue trends from /intelligence
   - Visualization: Line chart (last 6 months)
   - Show revenue and order count (dual axis)
   - Gradient fill under line
   - Responsive to container width
   - Animated on mount

TECH STACK:

- React 18 with TypeScript

- Recharts for charts

- Tailwind CSS for styling

- Heroicons for icons

- date-fns for date formatting

API INTEGRATION:

- Each component receives data as props (no API calls inside components)

- Parent component handles API calls using SWR

- Show loading skeleton while data loads

- Show error state if API fails

TYPESCRIPT INTERFACES:
Create proper interfaces for all props and data structures.

ACCESSIBILITY:

- Proper ARIA labels

- Keyboard navigation

- Screen reader friendly

- Color contrast (WCAG AA)

DELIVERABLES:

- 4 complete React components with TypeScript

- Storybook stories for each component

- PropTypes/Interface definitions

- Usage examples in README

- Test data fixtures

CODE QUALITY:

- ESLint compliant

- Prettier formatted

- Commented for complex logic

- Optimized for performance (memo where needed)

CREATE ALL COMPONENTS NOW.
Make them production-ready and fully documented.
`"

**Expected Result:** Production-ready React components with TypeScript, tests, and Storybook. -