codeflash-internal/django
mashraf-222 75201a95ab
feat: Add optimization usage display component to dashboard and billi… (#2028)
## Add Optimization Usage Display

### Technical Changes

- **New Component**: Created `OptimizationUsageCard` component
(`js/cf-webapp/src/components/dashboard/OptimizationUsageCard.tsx`)
  - Reusable component matching existing dashboard card styling
  - Uses shadcn/ui `Progress` component for visual progress indicator
  - Responsive design with mobile-friendly layouts
- Color-coded progress bar (green/yellow < 80%, yellow 80-95%,
orange/red ≥ 95%)

- **Server Action**: Added `getSubscriptionData` server action in
`dashboard/action.ts`
- Properly handles Prisma calls on server-side (fixes browser
PrismaClient error)
  - Fetches subscription data with lazy period reset logic

- **Dashboard Integration**: Added usage card to main dashboard page
  - Displays at top of metrics section for individual users
  - Only shows for personal accounts (hidden for organization views)
  - Integrated with existing data fetching pipeline
  
<img width="1891" height="991" alt="image"
src="https://github.com/user-attachments/assets/12c4f22b-51e7-439a-8614-644b06a423b2"
/>


- **Billing Page Integration**: Added usage card to billing page
  - Positioned above subscription card for easy visibility
  - Uses existing subscription data from page props
  
<img width="1891" height="982" alt="image"
src="https://github.com/user-attachments/assets/9c603227-750f-47be-ac10-36cfec3e4b45"
/>


### User-Facing Features

Users can now see their optimization usage in a clear, visual format:

- **Usage Metrics**: Displays formatted numbers showing "X / Y"
optimizations used
- **Remaining Count**: Shows how many optimizations are still available
- **Visual Progress Bar**: Color-coded progress indicator that changes
based on usage percentage
- **Plan Information**: Badge showing current plan type (free/pro)
- **Reset Date**: Displays when the usage period resets (if available)
- **Percentage**: Shows exact percentage of usage

The component appears on both the Dashboard and Billing pages, giving
users easy access to their usage information wherever they need it.

---------

Co-authored-by: Aseem Saxena <aseem.bits@gmail.com>
Co-authored-by: HeshamHM28 <HeshamMohamedFathy@outlook.com>
Co-authored-by: Sarthak Agarwal <sarthak.saga@gmail.com>
Co-authored-by: Kevin Turcios <106575910+KRRT7@users.noreply.github.com>
2025-12-22 21:02:43 +05:30
..
aiservice feat: Add optimization usage display component to dashboard and billi… (#2028) 2025-12-22 21:02:43 +05:30
.dockerignore local setup (#1898) 2025-11-17 12:35:09 -08:00