## 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> |
||
|---|---|---|
| .. | ||
| aiservice | ||
| .dockerignore | ||