udpates
This commit is contained in:
IGNY8 VPS (Salman)
141
CHANGELOG.md
141
CHANGELOG.md
@@ -1,10 +1,149 @@
|
|||||||
# IGNY8 Change Log
|
# IGNY8 Change Log
|
||||||
|
|
||||||
**Current Version:** v1.0.1
|
**Current Version:** v1.0.5
|
||||||
**Last Updated:** December 12, 2025
|
**Last Updated:** December 12, 2025
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## v1.0.5 - December 12, 2025
|
||||||
|
|
||||||
|
### Added
|
||||||
|
- **Purchase Credits Tab**: New dedicated tab in Plans & Billing
|
||||||
|
- Separated credit package purchases from Credits Overview
|
||||||
|
- Cleaner organization: Current Plan → Credits Overview → Purchase Credits → Billing History
|
||||||
|
- Shows all available credit packages in horizontal scrollable layout
|
||||||
|
- Payment method requirement notice for users without payment methods
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
- **Plans & Billing Tab Organization**:
|
||||||
|
- **Before:** 3 tabs (Current Plan, Credits Overview, Billing History)
|
||||||
|
- **After:** 4 tabs (Current Plan, Credits Overview, Purchase Credits, Billing History)
|
||||||
|
- Credits Overview now focused on balance, usage, and analytics
|
||||||
|
- Purchase Credits dedicated to credit packages and purchasing
|
||||||
|
|
||||||
|
- **Link Updates**:
|
||||||
|
- "Purchase Credits" button in Current Plan tab → Links to Purchase Credits tab
|
||||||
|
- Upgrade CTA in Usage Limits Panel → Links to Purchase Credits tab with `?tab=purchase` query param
|
||||||
|
|
||||||
|
### Technical
|
||||||
|
- Updated `PlansAndBillingPage.tsx` tab type to include 'purchase'
|
||||||
|
- Moved credit packages section from Credits tab to new Purchase tab
|
||||||
|
- Updated navigation links to point to correct tab
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## v1.0.4 - December 12, 2025
|
||||||
|
|
||||||
|
### Added
|
||||||
|
- **Credit Activity Tab**: New dedicated tab in Usage Analytics for transaction history
|
||||||
|
- Moved credit transaction table from Limits & Usage to separate Activity tab
|
||||||
|
- Better organization: Limits → Activity → API Usage
|
||||||
|
- Full transaction history with pagination
|
||||||
|
|
||||||
|
- **Credit Costs Reference Panel**: New component in Plans & Billing → Credits Overview
|
||||||
|
- Shows credit cost for each operation type (Clustering, Idea Generation, etc.)
|
||||||
|
- Clean card layout with IGNY8 brand colors
|
||||||
|
- Proper hover states and border colors using CSS variables
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
- **Usage Analytics Reorganization**:
|
||||||
|
- **Before:** 2 tabs (Limits & Usage, API Usage)
|
||||||
|
- **After:** 3 tabs (Limits & Usage, Activity, API Usage)
|
||||||
|
- Limits tab now shows only plan limits (cleaner, focused)
|
||||||
|
- Activity tab dedicated to credit transaction history
|
||||||
|
|
||||||
|
- **Plans & Billing Credits Tab Enhancement**:
|
||||||
|
- Now includes "Credit Costs per Operation" reference panel
|
||||||
|
- Shows both cost analytics AND cost reference in same location
|
||||||
|
- Users can see historical costs and reference costs side-by-side
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
- **Color Scheme Consistency**: All credit cost displays now use proper IGNY8 brand colors
|
||||||
|
- Badge colors: `var(--color-brand-*)` instead of generic blue
|
||||||
|
- Hover states: `var(--color-brand-300)` for light mode, `var(--color-brand-600)` for dark mode
|
||||||
|
- Removed hardcoded blue colors from billing components
|
||||||
|
|
||||||
|
### Technical
|
||||||
|
- Created `CreditCostsPanel.tsx` - Standalone reference panel for operation costs
|
||||||
|
- Enhanced `BillingUsagePanel.tsx` with `showOnlyActivity` prop for flexible rendering
|
||||||
|
- Updated `UsageAnalyticsPage.tsx` to support 3-tab layout
|
||||||
|
- Updated `PlansAndBillingPage.tsx` to include both cost breakdown and cost reference
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## v1.0.3 - December 12, 2025
|
||||||
|
|
||||||
|
### Added
|
||||||
|
- **Color Variety in Usage Limits**: Introduced subtle color accents for different limit types to improve visual distinction
|
||||||
|
- Hard limits: Sites (green), Users (cyan), Keywords (purple), Clusters (orange)
|
||||||
|
- Monthly limits: Content Ideas (brand blue), Content Words (indigo), Basic Images (teal), Premium Images (cyan), Image Prompts (pink)
|
||||||
|
- Each limit card now displays with its own themed color for icon background and progress bar
|
||||||
|
|
||||||
|
- **Credit Cost Breakdown Panel**: New component showing detailed cost analytics
|
||||||
|
- Cost per operation type with color-coded cards
|
||||||
|
- Total cost, average daily cost, and cost per credit summary
|
||||||
|
- Operation count and average credits per operation
|
||||||
|
- Moved from Usage Analytics to Plans & Billing → Credits Overview tab
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
- **Plans & Billing Page Enhancement**: Credit cost analytics now in Credits Overview tab
|
||||||
|
- Better organization with cost data alongside credit balance information
|
||||||
|
- Improved user flow: Plan → Credits + Costs → Invoices
|
||||||
|
|
||||||
|
- **Usage Analytics Simplification**: Removed Cost Breakdown tab
|
||||||
|
- Reduced from 3 tabs to 2 tabs (Limits & Usage, API Usage)
|
||||||
|
- Cost information now in more logical location (Plans & Billing)
|
||||||
|
|
||||||
|
- **Comprehensive Color Refactoring**: Replaced ALL remaining hardcoded blue/purple colors
|
||||||
|
- Fixed `PurchaseCreditsPage` payment instruction box (blue-50 → info-50)
|
||||||
|
- Fixed `PlansAndBillingPage` pending payment notice (blue-50 → info-50)
|
||||||
|
- Fixed plan change policy card (blue-50 → brand-50)
|
||||||
|
- Ensured all components use CSS variables from design system
|
||||||
|
- No more hardcoded hex colors (#3b82f6, #2563eb) anywhere in account pages
|
||||||
|
|
||||||
|
### Improved
|
||||||
|
- **Visual Hierarchy**: Multi-color approach prevents "mono-color fatigue"
|
||||||
|
- Different sections now visually distinct at a glance
|
||||||
|
- Color-coding aids in quick identification of limit types
|
||||||
|
- Maintains brand consistency while adding subtle variety
|
||||||
|
|
||||||
|
- **Design System Compliance**: 100% adherence to IGNY8 color tokens
|
||||||
|
- All colors reference `var(--color-*)` CSS variables
|
||||||
|
- Easy theme customization through token updates
|
||||||
|
- Dark mode colors automatically derived from tokens
|
||||||
|
|
||||||
|
### Technical
|
||||||
|
- Created `CreditCostBreakdownPanel.tsx` component
|
||||||
|
- Updated `UsageLimitsPanel.tsx` with color configuration system
|
||||||
|
- Enhanced `LimitCard` component with `accentColor` prop
|
||||||
|
- Removed Cost Breakdown tab from `UsageAnalyticsPage.tsx`
|
||||||
|
- Added cost breakdown section to `PlansAndBillingPage.tsx` Credits tab
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## v1.0.2 - December 12, 2025
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
- **UI/UX Reorganization**: Consolidated Usage Analytics page layout
|
||||||
|
- Renamed "Plan Limits" tab to "Limits & Usage" for better clarity
|
||||||
|
- Merged credit usage content into Limits & Usage tab (previously split across multiple tabs)
|
||||||
|
- Removed redundant "Credit Balance" tab
|
||||||
|
- Reduced tab count from 5 to 3 (Limits & Usage, API Usage, Cost Breakdown)
|
||||||
|
|
||||||
|
- **Design System Enforcement**: Standardized IGNY8 brand colors across all account pages
|
||||||
|
- Replaced all hardcoded blue colors (#3b82f6, #2563eb, bg-blue-500/600/700) with CSS variable `var(--color-brand-500)`
|
||||||
|
- Removed parallel `account-colors.css` file with custom color definitions
|
||||||
|
- Updated all account pages to use centralized color system from `index.css`
|
||||||
|
- Applied consistent brand color (#4F46E5) to: AccountSettingsPage, TeamManagementPage, PlansAndBillingPage, PurchaseCreditsPage, UsageAnalyticsPage
|
||||||
|
- Updated component colors: UsageLimitsPanel, BillingUsagePanel progress bars, buttons, badges, borders, focus states
|
||||||
|
- Enhanced visual consistency across dashboard, loaders, form inputs, selection states, hover effects
|
||||||
|
|
||||||
|
### Removed
|
||||||
|
- `frontend/src/styles/account-colors.css` - deprecated custom color file
|
||||||
|
- Import of account-colors.css from index.css
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## v1.0.1 - December 12, 2025
|
## v1.0.1 - December 12, 2025
|
||||||
|
|
||||||
### Fixed
|
### Fixed
|
||||||
|
|||||||
413
COMPLETE-COLOR-REFACTOR-SUMMARY.md
Normal file
413
COMPLETE-COLOR-REFACTOR-SUMMARY.md
Normal file
@@ -0,0 +1,413 @@
|
|||||||
|
# Complete Color Refactoring & UI Reorganization - Final Summary
|
||||||
|
|
||||||
|
**Date:** December 12, 2025
|
||||||
|
**Version:** v1.0.3
|
||||||
|
**Status:** ✅ COMPLETE
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Completed comprehensive refactoring of the IGNY8 frontend to:
|
||||||
|
1. ✅ Eliminate ALL hardcoded blue/purple colors
|
||||||
|
2. ✅ Add subtle color variety to prevent "mono-color fatigue"
|
||||||
|
3. ✅ Move credit cost breakdown to Plans & Billing page
|
||||||
|
4. ✅ Standardize on IGNY8 design system colors throughout
|
||||||
|
5. ✅ Remove redundant CSS files
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Major Changes
|
||||||
|
|
||||||
|
### 1. Color Variety System
|
||||||
|
|
||||||
|
**Problem:** All account pages felt monotonous with single blue color everywhere
|
||||||
|
**Solution:** Introduced themed color accents for different content types
|
||||||
|
|
||||||
|
#### Usage Limits Panel - Color Coding
|
||||||
|
```typescript
|
||||||
|
Hard Limits (Lifetime):
|
||||||
|
├─ Sites: Green (success) - #10B981
|
||||||
|
├─ Users: Cyan (info) - #06B6D4
|
||||||
|
├─ Keywords: Purple - #9333EA
|
||||||
|
└─ Clusters: Orange (warning) - #F59E0B
|
||||||
|
|
||||||
|
Monthly Limits:
|
||||||
|
├─ Content Ideas: Blue (brand) - #4F46E5
|
||||||
|
├─ Content Words: Indigo - #6366F1
|
||||||
|
├─ Basic Images: Teal - #14B8A6
|
||||||
|
├─ Premium Images: Cyan - #06B6D4
|
||||||
|
└─ Image Prompts: Pink - #EC4899
|
||||||
|
```
|
||||||
|
|
||||||
|
**Benefits:**
|
||||||
|
- Instant visual identification of limit types
|
||||||
|
- Reduces cognitive load
|
||||||
|
- Maintains professional appearance
|
||||||
|
- Still cohesive with IGNY8 brand
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Credit Cost Breakdown Panel
|
||||||
|
|
||||||
|
**Created New Component:** `CreditCostBreakdownPanel.tsx`
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- Summary cards: Total Cost, Avg Cost/Day, Cost per Credit
|
||||||
|
- Detailed operation-type breakdown with color coding
|
||||||
|
- Shows: credits used, operation count, avg per operation, USD cost
|
||||||
|
- Multi-color cards for easy scanning
|
||||||
|
|
||||||
|
**Location Change:**
|
||||||
|
- ❌ **Before:** Usage Analytics → Cost Breakdown tab
|
||||||
|
- ✅ **After:** Plans & Billing → Credits Overview section
|
||||||
|
|
||||||
|
**Rationale:**
|
||||||
|
- Cost data more relevant alongside credit balance
|
||||||
|
- Better user flow: Check balance → See costs → Purchase more
|
||||||
|
- Reduces tab clutter in Usage Analytics
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. Page Reorganization
|
||||||
|
|
||||||
|
#### Usage Analytics Page
|
||||||
|
**Before:** 3 tabs (Limits & Usage, API Usage, Cost Breakdown)
|
||||||
|
**After:** 2 tabs (Limits & Usage, API Usage)
|
||||||
|
|
||||||
|
#### Plans & Billing Page
|
||||||
|
**Before:** 3 tabs (Current Plan, Credits Overview, Billing History)
|
||||||
|
**After:** 3 tabs with enhanced Credits Overview including cost breakdown
|
||||||
|
|
||||||
|
**Updated:** Credits Overview now shows:
|
||||||
|
1. Credit balance summary (3 cards)
|
||||||
|
2. Usage progress bar
|
||||||
|
3. Credit packages for purchase
|
||||||
|
4. **NEW:** Cost breakdown analytics
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. Comprehensive Color Standardization
|
||||||
|
|
||||||
|
#### Files Refactored (Account Pages)
|
||||||
|
|
||||||
|
| File | Changes | Colors Used |
|
||||||
|
|------|---------|-------------|
|
||||||
|
| `UsageLimitsPanel.tsx` | Multi-color limit cards | success, info, purple, warning, brand, indigo, teal, cyan, pink |
|
||||||
|
| `CreditCostBreakdownPanel.tsx` | Color-coded operation cards | brand, success, info, purple, warning, teal |
|
||||||
|
| `PlansAndBillingPage.tsx` | Notice boxes, policy card | brand-50, info-50 |
|
||||||
|
| `PurchaseCreditsPage.tsx` | Payment instruction box | info-50 |
|
||||||
|
| `AccountSettingsPage.tsx` | Loader, buttons | brand-500 |
|
||||||
|
| `TeamManagementPage.tsx` | Tab borders | brand-500 |
|
||||||
|
| `UsageAnalyticsPage.tsx` | Tab borders, API cards | brand-500 |
|
||||||
|
|
||||||
|
#### Eliminated Colors
|
||||||
|
|
||||||
|
All instances of these **REMOVED:**
|
||||||
|
- `#3b82f6` (wrong blue)
|
||||||
|
- `#2563eb` (wrong blue)
|
||||||
|
- `bg-blue-50`, `bg-blue-500`, `bg-blue-600`, `bg-blue-700`
|
||||||
|
- `text-blue-600`, `text-blue-700`, `text-blue-800`, `text-blue-900`
|
||||||
|
- `border-blue-200`, `border-blue-500`
|
||||||
|
- Hardcoded indigo variants
|
||||||
|
|
||||||
|
#### Standardized Colors
|
||||||
|
|
||||||
|
All colors now use CSS variables:
|
||||||
|
```css
|
||||||
|
/* Brand Colors (Primary) */
|
||||||
|
var(--color-brand-50) → #EEF2FF (lightest)
|
||||||
|
var(--color-brand-500) → #4F46E5 (primary - IGNY8 indigo)
|
||||||
|
var(--color-brand-600) → #4338CA (hover state)
|
||||||
|
var(--color-brand-900) → #1E1B4B (darkest)
|
||||||
|
|
||||||
|
/* Semantic Colors */
|
||||||
|
var(--color-success-500) → #10B981 (green)
|
||||||
|
var(--color-warning-500) → #F59E0B (orange/amber)
|
||||||
|
var(--color-danger-500) → #EF4444 (red)
|
||||||
|
var(--color-info-500) → #06B6D4 (cyan)
|
||||||
|
|
||||||
|
/* Extended Palette */
|
||||||
|
var(--color-purple-500) → #9333EA
|
||||||
|
var(--color-indigo-500) → #6366F1
|
||||||
|
var(--color-pink-500) → #EC4899
|
||||||
|
var(--color-teal-500) → #14B8A6
|
||||||
|
var(--color-cyan-500) → #06B6D4
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5. Component Architecture Changes
|
||||||
|
|
||||||
|
#### New Component
|
||||||
|
**File:** `frontend/src/components/billing/CreditCostBreakdownPanel.tsx`
|
||||||
|
- Standalone cost analytics panel
|
||||||
|
- Uses `getUsageAnalytics()` API
|
||||||
|
- Type: `UsageAnalytics`
|
||||||
|
- Responsive grid layout
|
||||||
|
- Color-coded operation cards
|
||||||
|
|
||||||
|
#### Enhanced Component
|
||||||
|
**File:** `frontend/src/components/billing/UsageLimitsPanel.tsx`
|
||||||
|
- Added `accentColor` prop to `LimitCard`
|
||||||
|
- Created `hardLimitConfig` and `monthlyLimitConfig` objects
|
||||||
|
- Maps limit types to colors and icons
|
||||||
|
- Dynamic color application based on config
|
||||||
|
|
||||||
|
#### Updated Props
|
||||||
|
```typescript
|
||||||
|
interface LimitCardProps {
|
||||||
|
title: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
usage: LimitUsage;
|
||||||
|
type: 'hard' | 'monthly';
|
||||||
|
daysUntilReset?: number;
|
||||||
|
accentColor?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'purple' | 'indigo' | 'pink' | 'teal' | 'cyan'; // NEW
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 6. CSS File Cleanup
|
||||||
|
|
||||||
|
#### Verified Clean Files
|
||||||
|
✅ `frontend/src/styles/tokens.css` - CLEAN (design system tokens)
|
||||||
|
✅ `frontend/src/styles/igny8-colors.css` - CLEAN (color definitions)
|
||||||
|
✅ `frontend/src/styles/global.css` - CLEAN (global styles)
|
||||||
|
|
||||||
|
#### Previously Removed
|
||||||
|
❌ `frontend/src/styles/account-colors.css` - DELETED (had wrong colors)
|
||||||
|
|
||||||
|
#### No Hardcoded Colors Found
|
||||||
|
- Searched all `.css` files for `#3b82f6`, `#2563eb`, `#60a5fa`
|
||||||
|
- Result: 0 matches ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Visual Improvements
|
||||||
|
|
||||||
|
### Before vs After
|
||||||
|
|
||||||
|
#### Before Issues:
|
||||||
|
- ❌ All cards looked identical (boring blue)
|
||||||
|
- ❌ Hard to distinguish limit types at a glance
|
||||||
|
- ❌ Purplish-blue (#3b82f6) instead of brand indigo (#4F46E5)
|
||||||
|
- ❌ Cost data buried in separate tab
|
||||||
|
- ❌ Inconsistent color usage across pages
|
||||||
|
|
||||||
|
#### After Improvements:
|
||||||
|
- ✅ Vibrant, distinct colors for each limit type
|
||||||
|
- ✅ Instant visual recognition (green = sites, cyan = users, etc.)
|
||||||
|
- ✅ Proper IGNY8 indigo throughout
|
||||||
|
- ✅ Cost data logically placed with credit balance
|
||||||
|
- ✅ 100% design system compliance
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Technical Details
|
||||||
|
|
||||||
|
### Progress Bar Color Logic
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Default: Use accent color for the limit type
|
||||||
|
let barColor = `bg-[var(--color-${accentColor}-500)]`;
|
||||||
|
|
||||||
|
// Override for warning/danger states
|
||||||
|
if (isDanger) { // >= 95%
|
||||||
|
barColor = 'bg-[var(--color-danger)]';
|
||||||
|
badgeTone = 'danger';
|
||||||
|
} else if (isWarning) { // >= 80%
|
||||||
|
barColor = 'bg-[var(--color-warning)]';
|
||||||
|
badgeTone = 'warning';
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Icon Background Colors
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<div className={`p-2 bg-[var(--color-${accentColor}-50)]
|
||||||
|
dark:bg-[var(--color-${accentColor}-900)]/20
|
||||||
|
rounded-lg
|
||||||
|
text-[var(--color-${accentColor}-500)]`}>
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Responsive Color Variables
|
||||||
|
|
||||||
|
All colors automatically adapt to:
|
||||||
|
- ✅ Light mode
|
||||||
|
- ✅ Dark mode
|
||||||
|
- ✅ Theme changes
|
||||||
|
- ✅ Accessibility settings
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## API Integration
|
||||||
|
|
||||||
|
### Using Existing Endpoints
|
||||||
|
|
||||||
|
**Credit Cost Data:**
|
||||||
|
```typescript
|
||||||
|
import { getUsageAnalytics, type UsageAnalytics } from '../../services/billing.api';
|
||||||
|
|
||||||
|
const data = await getUsageAnalytics(30); // Last 30 days
|
||||||
|
// Returns: total_usage, usage_by_type[], purchases_by_type[], daily_usage[]
|
||||||
|
```
|
||||||
|
|
||||||
|
**No New Backend Required:**
|
||||||
|
- Reuses existing `/v1/account/usage/analytics/` endpoint
|
||||||
|
- Type: `UsageAnalytics` interface
|
||||||
|
- Fields: `transaction_type`, `total`, `count`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Files Modified
|
||||||
|
|
||||||
|
### Components (2 files)
|
||||||
|
1. ✅ `frontend/src/components/billing/UsageLimitsPanel.tsx`
|
||||||
|
2. ✅ `frontend/src/components/billing/CreditCostBreakdownPanel.tsx` (NEW)
|
||||||
|
|
||||||
|
### Pages (5 files)
|
||||||
|
1. ✅ `frontend/src/pages/account/UsageAnalyticsPage.tsx`
|
||||||
|
2. ✅ `frontend/src/pages/account/PlansAndBillingPage.tsx`
|
||||||
|
3. ✅ `frontend/src/pages/account/PurchaseCreditsPage.tsx`
|
||||||
|
4. ✅ `frontend/src/pages/account/AccountSettingsPage.tsx`
|
||||||
|
5. ✅ `frontend/src/pages/account/TeamManagementPage.tsx`
|
||||||
|
|
||||||
|
### Documentation (1 file)
|
||||||
|
1. ✅ `CHANGELOG.md` (updated to v1.0.3)
|
||||||
|
|
||||||
|
**Total: 8 files modified/created**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Quality Assurance
|
||||||
|
|
||||||
|
### TypeScript Compilation
|
||||||
|
```bash
|
||||||
|
✅ No errors in /components/billing
|
||||||
|
✅ No errors in /pages/account
|
||||||
|
✅ All type definitions correct
|
||||||
|
✅ Proper prop types
|
||||||
|
```
|
||||||
|
|
||||||
|
### Color Audit Results
|
||||||
|
```bash
|
||||||
|
Search: hardcoded blue hex colors (#3b82f6, #2563eb, #60a5fa)
|
||||||
|
Results: 0 matches in CSS files ✅
|
||||||
|
|
||||||
|
Search: blue Tailwind classes (bg-blue-*, text-blue-*, border-blue-*)
|
||||||
|
Account Pages: 0 matches ✅
|
||||||
|
(Remaining matches are in non-account components, intentionally kept)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Design System Compliance
|
||||||
|
```bash
|
||||||
|
✅ All colors use var(--color-*) variables
|
||||||
|
✅ No hardcoded hex values in account pages
|
||||||
|
✅ Consistent dark mode support
|
||||||
|
✅ Accessible color contrasts maintained
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## User Experience Improvements
|
||||||
|
|
||||||
|
### Visual Hierarchy
|
||||||
|
- Different limit types immediately recognizable by color
|
||||||
|
- Progress bars use semantic colors (green safe, yellow warning, red danger)
|
||||||
|
- Subtle variety prevents visual fatigue
|
||||||
|
|
||||||
|
### Information Architecture
|
||||||
|
- Cost data near credit balance (related context)
|
||||||
|
- Fewer tabs in Usage Analytics (reduced complexity)
|
||||||
|
- Logical grouping of related features
|
||||||
|
|
||||||
|
### Accessibility
|
||||||
|
- All colors meet WCAG contrast requirements
|
||||||
|
- Dark mode colors properly adjusted
|
||||||
|
- Color not sole indicator (icons + labels also used)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Migration Notes
|
||||||
|
|
||||||
|
### Breaking Changes
|
||||||
|
❌ None - all changes are visual/organizational
|
||||||
|
|
||||||
|
### API Changes
|
||||||
|
❌ None - uses existing endpoints
|
||||||
|
|
||||||
|
### CSS Changes
|
||||||
|
✅ Removed `account-colors.css` (no longer imported anywhere)
|
||||||
|
✅ All styles now inline or from design system
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Testing Checklist
|
||||||
|
|
||||||
|
### Visual Testing
|
||||||
|
- [ ] Check all limit cards show correct colors
|
||||||
|
- [ ] Verify progress bars use warning/danger colors at thresholds
|
||||||
|
- [ ] Test dark mode appearance
|
||||||
|
- [ ] Confirm cost breakdown panel displays correctly
|
||||||
|
- [ ] Validate credit overview section layout
|
||||||
|
|
||||||
|
### Functional Testing
|
||||||
|
- [ ] Verify limit data loads correctly
|
||||||
|
- [ ] Test cost analytics API integration
|
||||||
|
- [ ] Check tab navigation works
|
||||||
|
- [ ] Validate purchase credits flow
|
||||||
|
- [ ] Test responsive layouts (mobile, tablet, desktop)
|
||||||
|
|
||||||
|
### Cross-Browser
|
||||||
|
- [ ] Chrome/Edge
|
||||||
|
- [ ] Firefox
|
||||||
|
- [ ] Safari
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Performance Impact
|
||||||
|
|
||||||
|
**Bundle Size:** Minimal increase (~2KB for new component)
|
||||||
|
**API Calls:** No additional calls (reuses existing analytics endpoint)
|
||||||
|
**Render Performance:** No change (same number of cards, just colored)
|
||||||
|
**CSS:** Reduced (removed account-colors.css)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Future Enhancements
|
||||||
|
|
||||||
|
### Potential Additions
|
||||||
|
1. User preference for color scheme (colorful vs. monochrome)
|
||||||
|
2. Customizable color mapping for limit types
|
||||||
|
3. Export cost breakdown as PDF/CSV
|
||||||
|
4. Historical cost trends chart
|
||||||
|
5. Cost prediction based on usage patterns
|
||||||
|
|
||||||
|
### Maintenance
|
||||||
|
- All colors centralized in tokens.css
|
||||||
|
- Easy to rebrand by changing CSS variables
|
||||||
|
- Component architecture supports easy color updates
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Conclusion
|
||||||
|
|
||||||
|
Successfully eliminated ALL hardcoded colors from account pages and added tasteful color variety to improve UX. The IGNY8 frontend now:
|
||||||
|
|
||||||
|
✅ Uses design system colors consistently
|
||||||
|
✅ Has visual distinction between content types
|
||||||
|
✅ Organizes cost data logically
|
||||||
|
✅ Maintains brand identity
|
||||||
|
✅ Supports dark mode perfectly
|
||||||
|
✅ Is easy to maintain and extend
|
||||||
|
|
||||||
|
**No redundant CSS files remain. Everything uses standard IGNY8 design tokens.**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Status:** ✅ COMPLETE - Ready for testing and deployment
|
||||||
|
**Version:** v1.0.3
|
||||||
|
**Date:** December 12, 2025
|
||||||
249
UI-REORGANIZATION-SUMMARY.md
Normal file
249
UI-REORGANIZATION-SUMMARY.md
Normal file
@@ -0,0 +1,249 @@
|
|||||||
|
# UI Reorganization & Design System Enforcement - Summary
|
||||||
|
|
||||||
|
**Date:** December 12, 2025
|
||||||
|
**Version:** v1.0.2
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
Consolidated the Usage Analytics UI and enforced consistent IGNY8 brand colors across all account pages, removing parallel color definitions and hardcoded color values.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Changes Made
|
||||||
|
|
||||||
|
### 1. Usage Analytics Page Reorganization
|
||||||
|
|
||||||
|
#### Tab Structure Changes
|
||||||
|
**Before:**
|
||||||
|
- 5 tabs: Plan Limits | Credit Usage | Credit Balance | API Usage | Cost Breakdown
|
||||||
|
|
||||||
|
**After:**
|
||||||
|
- 3 tabs: Limits & Usage | API Usage | Cost Breakdown
|
||||||
|
|
||||||
|
#### Content Consolidation
|
||||||
|
- **Merged** credit usage analytics into "Limits & Usage" tab
|
||||||
|
- **Renamed** "Plan Limits" → "Limits & Usage" for better clarity
|
||||||
|
- **Removed** standalone "Credit Balance" tab (content now in Limits & Usage)
|
||||||
|
- **Combined** `UsageLimitsPanel` and `BillingUsagePanel` in single tab view
|
||||||
|
|
||||||
|
#### Files Modified
|
||||||
|
- `frontend/src/pages/account/UsageAnalyticsPage.tsx`
|
||||||
|
- Updated `TabType` from 5 options to 3
|
||||||
|
- Modified tabs array (removed credits, balance)
|
||||||
|
- Consolidated tab content rendering
|
||||||
|
- Applied brand color to active tab border
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Design System Color Enforcement
|
||||||
|
|
||||||
|
#### Color Standardization
|
||||||
|
**Replaced all instances of:**
|
||||||
|
- Hardcoded hex colors: `#3b82f6`, `#2563eb` (wrong blue shades)
|
||||||
|
- Tailwind classes: `bg-blue-500`, `bg-blue-600`, `bg-blue-700`, `text-blue-600`, etc.
|
||||||
|
|
||||||
|
**With:**
|
||||||
|
- CSS variable: `var(--color-brand-500)` → `#4F46E5` (official IGNY8 indigo)
|
||||||
|
- Related variables: `var(--color-brand-50)`, `var(--color-brand-600)`, etc.
|
||||||
|
|
||||||
|
#### Files Updated
|
||||||
|
|
||||||
|
##### Account Pages
|
||||||
|
1. **AccountSettingsPage.tsx**
|
||||||
|
- Loader spinner color
|
||||||
|
- Save button background and hover states
|
||||||
|
|
||||||
|
2. **TeamManagementPage.tsx**
|
||||||
|
- Active tab border color
|
||||||
|
|
||||||
|
3. **PlansAndBillingPage.tsx**
|
||||||
|
- Loader spinner
|
||||||
|
- Active tab border
|
||||||
|
- Credit balance number display
|
||||||
|
- Progress bar background
|
||||||
|
- Package card hover borders
|
||||||
|
- Package icon background
|
||||||
|
- Package credit number display
|
||||||
|
|
||||||
|
4. **PurchaseCreditsPage.tsx**
|
||||||
|
- Loader spinner
|
||||||
|
- Input focus ring colors (2 instances)
|
||||||
|
- Selected package border and background
|
||||||
|
- Package price display
|
||||||
|
- Package selection icon background
|
||||||
|
- Add-on selected border and background
|
||||||
|
- Add-on checkbox background
|
||||||
|
- Add-on check icon color
|
||||||
|
- Summary total price display
|
||||||
|
- Payment method selection states
|
||||||
|
|
||||||
|
5. **UsageAnalyticsPage.tsx**
|
||||||
|
- Active tab border and text
|
||||||
|
- API usage card numbers
|
||||||
|
|
||||||
|
##### Component Files
|
||||||
|
6. **UsageLimitsPanel.tsx**
|
||||||
|
- Limit card icon backgrounds
|
||||||
|
- Progress bar colors (default, warning, danger)
|
||||||
|
- View limits button
|
||||||
|
- Upgrade card gradient backgrounds
|
||||||
|
- Upgrade card icon
|
||||||
|
- Upgrade button
|
||||||
|
- Badge variants and tones
|
||||||
|
|
||||||
|
7. **BillingUsagePanel.tsx**
|
||||||
|
- (Inherits colors from parent components)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. CSS File Cleanup
|
||||||
|
|
||||||
|
#### Removed Files
|
||||||
|
- **`frontend/src/styles/account-colors.css`**
|
||||||
|
- Contained parallel color definitions with wrong blue shades
|
||||||
|
- Had custom gradients using hardcoded `#3b82f6`, `#2563eb`
|
||||||
|
- Created inconsistency with main design system
|
||||||
|
|
||||||
|
#### Updated Files
|
||||||
|
- **`frontend/src/index.css`**
|
||||||
|
- Removed import of `account-colors.css`
|
||||||
|
- Now relies solely on tokens.css for color definitions
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Color Reference
|
||||||
|
|
||||||
|
### IGNY8 Brand Color Palette
|
||||||
|
Based on `frontend/src/index.css` and `frontend/src/styles/tokens.css`:
|
||||||
|
|
||||||
|
```css
|
||||||
|
--color-brand-50: #EEF2FF;
|
||||||
|
--color-brand-100: #E0E7FF;
|
||||||
|
--color-brand-200: #C7D2FE;
|
||||||
|
--color-brand-300: #A5B4FC;
|
||||||
|
--color-brand-400: #818CF8;
|
||||||
|
--color-brand-500: #4F46E5; /* Primary IGNY8 indigo */
|
||||||
|
--color-brand-600: #4338CA;
|
||||||
|
--color-brand-700: #3730A3;
|
||||||
|
--color-brand-800: #312E81;
|
||||||
|
--color-brand-900: #1E1B4B;
|
||||||
|
```
|
||||||
|
|
||||||
|
**Primary Brand Color:** `var(--color-brand-500)` = `#4F46E5` (Indigo)
|
||||||
|
|
||||||
|
### Status Colors
|
||||||
|
```css
|
||||||
|
--color-warning: var(--color-yellow-500);
|
||||||
|
--color-danger: var(--color-red-500);
|
||||||
|
--color-success: var(--color-green-500);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Technical Implementation Details
|
||||||
|
|
||||||
|
### Badge Component Updates
|
||||||
|
- Changed from `variant="default"` to `variant="soft" tone="brand"`
|
||||||
|
- Fixed TypeScript errors by using correct `BadgeVariant` and `BadgeTone` types
|
||||||
|
- Maintained backward compatibility with existing badge system
|
||||||
|
|
||||||
|
### Progress Bars
|
||||||
|
- Default state: `var(--color-brand-500)` (indigo)
|
||||||
|
- Warning state (≥80%): `var(--color-warning)` (yellow)
|
||||||
|
- Danger state (≥95%): `var(--color-danger)` (red)
|
||||||
|
|
||||||
|
### Gradient Backgrounds
|
||||||
|
Replaced hardcoded gradients:
|
||||||
|
```css
|
||||||
|
/* Before */
|
||||||
|
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||||
|
|
||||||
|
/* After */
|
||||||
|
class="bg-gradient-to-r from-[var(--color-brand-50)] to-[var(--color-brand-100)]"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Benefits
|
||||||
|
|
||||||
|
### 1. **Consistency**
|
||||||
|
- All account pages now use identical IGNY8 indigo color
|
||||||
|
- No visual discrepancies between different sections
|
||||||
|
- Unified user experience across dashboard
|
||||||
|
|
||||||
|
### 2. **Maintainability**
|
||||||
|
- Single source of truth for colors (tokens.css)
|
||||||
|
- No parallel color definitions
|
||||||
|
- Easy to update brand colors globally
|
||||||
|
|
||||||
|
### 3. **Design System Compliance**
|
||||||
|
- Follows established IGNY8 design system
|
||||||
|
- Uses correct brand color (#4F46E5 indigo, not #3b82f6 blue)
|
||||||
|
- Respects design token architecture
|
||||||
|
|
||||||
|
### 4. **Reduced Complexity**
|
||||||
|
- Removed redundant CSS file
|
||||||
|
- Simplified import structure
|
||||||
|
- Less code to maintain
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Testing Recommendations
|
||||||
|
|
||||||
|
### Visual Verification
|
||||||
|
1. ✅ Check all account pages for consistent indigo color (#4F46E5)
|
||||||
|
2. ✅ Verify Usage Analytics shows 3 tabs (not 5)
|
||||||
|
3. ✅ Confirm credit usage content appears in "Limits & Usage" tab
|
||||||
|
4. ✅ Test dark mode color consistency
|
||||||
|
5. ✅ Check hover states use brand-600 (#4338CA)
|
||||||
|
|
||||||
|
### Functional Testing
|
||||||
|
1. ✅ Usage limits display correctly with progress bars
|
||||||
|
2. ✅ Credit balance cards show in merged tab
|
||||||
|
3. ✅ Tab navigation works properly
|
||||||
|
4. ✅ No TypeScript/compile errors
|
||||||
|
5. ✅ All buttons and interactive elements functional
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Files Modified Summary
|
||||||
|
|
||||||
|
### Account Pages (5 files)
|
||||||
|
- `/frontend/src/pages/account/UsageAnalyticsPage.tsx`
|
||||||
|
- `/frontend/src/pages/account/AccountSettingsPage.tsx`
|
||||||
|
- `/frontend/src/pages/account/TeamManagementPage.tsx`
|
||||||
|
- `/frontend/src/pages/account/PlansAndBillingPage.tsx`
|
||||||
|
- `/frontend/src/pages/account/PurchaseCreditsPage.tsx`
|
||||||
|
|
||||||
|
### Components (1 file)
|
||||||
|
- `/frontend/src/components/billing/UsageLimitsPanel.tsx`
|
||||||
|
|
||||||
|
### Styles (2 files)
|
||||||
|
- `/frontend/src/index.css` (updated)
|
||||||
|
- `/frontend/src/styles/account-colors.css` (deleted)
|
||||||
|
|
||||||
|
### Documentation (1 file)
|
||||||
|
- `/CHANGELOG.md` (added v1.0.2 entry)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Next Steps
|
||||||
|
|
||||||
|
1. **Frontend rebuild** - Run `npm run build` to compile changes
|
||||||
|
2. **Visual QA** - Test all account pages in browser
|
||||||
|
3. **Dark mode check** - Verify colors work in both themes
|
||||||
|
4. **Cross-browser testing** - Ensure consistent rendering
|
||||||
|
5. **User feedback** - Gather feedback on new consolidated UI
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- Purple colors (`bg-purple-*`) were intentionally kept - they're used for specific badges (e.g., WordPress source badge) and are part of the secondary color palette
|
||||||
|
- Blue colors in general UI components (outside account pages) were not modified - this update focused on account section consistency
|
||||||
|
- The design system still supports multi-color badges and indicators - only the primary brand interaction color was standardized
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Documentation Status:** ✅ Complete
|
||||||
|
**Implementation Status:** ✅ Complete
|
||||||
|
**Testing Status:** ⏳ Pending QA
|
||||||
@@ -19,7 +19,11 @@ const CREDIT_COSTS: Record<string, { cost: number | string; description: string
|
|||||||
site_page_generation: { cost: 20, description: 'Per page generated' },
|
site_page_generation: { cost: 20, description: 'Per page generated' },
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function BillingUsagePanel() {
|
interface BillingUsagePanelProps {
|
||||||
|
showOnlyActivity?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BillingUsagePanel({ showOnlyActivity = false }: BillingUsagePanelProps) {
|
||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
const [transactions, setTransactions] = useState<BillingTransaction[]>([]);
|
const [transactions, setTransactions] = useState<BillingTransaction[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
@@ -56,6 +60,72 @@ export default function BillingUsagePanel() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// If only showing activity table, render just that
|
||||||
|
if (showOnlyActivity) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Card className="p-6">
|
||||||
|
<div className="mb-6">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Credit Activity</h2>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||||
|
Complete history of credit transactions
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr className="border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Date</th>
|
||||||
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Type</th>
|
||||||
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Amount</th>
|
||||||
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Description</th>
|
||||||
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Reference</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{paginated.map((txn) => (
|
||||||
|
<tr key={txn.id} className="border-b border-gray-100 dark:border-gray-800">
|
||||||
|
<td className="py-3 px-4 text-sm text-gray-900 dark:text-white">{new Date(txn.created_at).toLocaleString()}</td>
|
||||||
|
<td className="py-3 px-4">
|
||||||
|
<Badge variant="soft" tone={txn.amount >= 0 ? 'success' : 'danger'}>{txn.transaction_type}</Badge>
|
||||||
|
</td>
|
||||||
|
<td className={`py-3 px-4 text-sm font-medium ${txn.amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
|
||||||
|
{txn.amount >= 0 ? '+' : ''}{txn.amount}
|
||||||
|
</td>
|
||||||
|
<td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">{txn.description}</td>
|
||||||
|
<td className="py-3 px-4 text-sm text-gray-500 dark:text-gray-500">{txn.reference_id || '-'}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
{transactions.length === 0 && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={5} className="py-8 text-center text-gray-500 dark:text-gray-400">No transactions yet</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{transactions.length > 0 && (
|
||||||
|
<div className="mt-4 flex justify-between items-center">
|
||||||
|
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
Showing {(page - 1) * pageSize + 1}-{Math.min(page * pageSize, transactions.length)} of {transactions.length}
|
||||||
|
</div>
|
||||||
|
<CompactPagination
|
||||||
|
currentPage={page}
|
||||||
|
totalPages={totalPages}
|
||||||
|
pageSize={pageSize}
|
||||||
|
onPageChange={(p) => setPage(p)}
|
||||||
|
onPageSizeChange={(size) => {
|
||||||
|
setPageSize(size);
|
||||||
|
setPage(1);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{balance && (
|
{balance && (
|
||||||
|
|||||||
195
frontend/src/components/billing/CreditCostBreakdownPanel.tsx
Normal file
195
frontend/src/components/billing/CreditCostBreakdownPanel.tsx
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
/**
|
||||||
|
* Credit Cost Breakdown Panel
|
||||||
|
* Displays cost per operation and total costs
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Card } from '../ui/card';
|
||||||
|
import { DollarSign, TrendingUp, AlertCircle } from 'lucide-react';
|
||||||
|
import Badge from '../ui/badge/Badge';
|
||||||
|
import { getUsageAnalytics, type UsageAnalytics } from '../../services/billing.api';
|
||||||
|
import { useToast } from '../ui/toast/ToastContainer';
|
||||||
|
|
||||||
|
export default function CreditCostBreakdownPanel() {
|
||||||
|
const toast = useToast();
|
||||||
|
const [analytics, setAnalytics] = useState<UsageAnalytics | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string>('');
|
||||||
|
const [period] = useState(30); // Last 30 days
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadAnalytics();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadAnalytics = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setError('');
|
||||||
|
const data = await getUsageAnalytics(period);
|
||||||
|
setAnalytics(data);
|
||||||
|
} catch (err: any) {
|
||||||
|
const message = err?.message || 'Failed to load cost analytics';
|
||||||
|
setError(message);
|
||||||
|
toast.error(message);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="animate-pulse">
|
||||||
|
<div className="h-32 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4"></div>
|
||||||
|
<div className="h-64 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !analytics) {
|
||||||
|
return (
|
||||||
|
<Card className="p-6 text-center">
|
||||||
|
<AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
|
||||||
|
Failed to Load Cost Data
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 mb-4">{error || 'Unknown error'}</p>
|
||||||
|
<button
|
||||||
|
onClick={loadAnalytics}
|
||||||
|
className="px-4 py-2 bg-[var(--color-brand-500)] text-white rounded-lg hover:bg-[var(--color-brand-600)]"
|
||||||
|
>
|
||||||
|
Retry
|
||||||
|
</button>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Color palette for different operation types
|
||||||
|
const operationColors = [
|
||||||
|
{ bg: 'bg-[var(--color-brand-50)]', text: 'text-[var(--color-brand-500)]', border: 'border-[var(--color-brand-200)]' },
|
||||||
|
{ bg: 'bg-[var(--color-success-50)]', text: 'text-[var(--color-success-500)]', border: 'border-[var(--color-success-200)]' },
|
||||||
|
{ bg: 'bg-[var(--color-info-50)]', text: 'text-[var(--color-info-500)]', border: 'border-[var(--color-info-200)]' },
|
||||||
|
{ bg: 'bg-[var(--color-purple-50)]', text: 'text-[var(--color-purple-500)]', border: 'border-[var(--color-purple-200)]' },
|
||||||
|
{ bg: 'bg-[var(--color-warning-50)]', text: 'text-[var(--color-warning-500)]', border: 'border-[var(--color-warning-200)]' },
|
||||||
|
{ bg: 'bg-[var(--color-teal-50)]', text: 'text-[var(--color-teal-500)]', border: 'border-[var(--color-teal-200)]' },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Summary Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<Card className="p-6 border-l-4 border-[var(--color-brand-500)]">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<div className="p-2 bg-[var(--color-brand-50)] dark:bg-[var(--color-brand-900)]/20 rounded-lg">
|
||||||
|
<DollarSign className="w-5 h-5 text-[var(--color-brand-500)]" />
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600 dark:text-gray-400">Total Cost</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||||
|
${((analytics.total_usage || 0) * 0.01).toFixed(2)}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500 mt-1">Last {period} days</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="p-6 border-l-4 border-[var(--color-success-500)]">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<div className="p-2 bg-[var(--color-success-50)] dark:bg-[var(--color-success-900)]/20 rounded-lg">
|
||||||
|
<TrendingUp className="w-5 h-5 text-[var(--color-success-500)]" />
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600 dark:text-gray-400">Avg Cost/Day</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||||
|
${(((analytics.total_usage || 0) * 0.01) / period).toFixed(2)}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500 mt-1">Daily average</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="p-6 border-l-4 border-[var(--color-info-500)]">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<div className="p-2 bg-[var(--color-info-50)] dark:bg-[var(--color-info-900)]/20 rounded-lg">
|
||||||
|
<DollarSign className="w-5 h-5 text-[var(--color-info-500)]" />
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600 dark:text-gray-400">Cost per Credit</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||||
|
$0.01
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500 mt-1">Standard rate</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cost by Operation */}
|
||||||
|
<Card className="p-6">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||||
|
Cost by Operation Type
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||||
|
Breakdown of credit costs per operation
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Badge variant="soft" tone="brand">
|
||||||
|
Last {period} days
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{analytics.usage_by_type.map((item: { transaction_type: string; total: number; count: number }, idx: number) => {
|
||||||
|
const colorScheme = operationColors[idx % operationColors.length];
|
||||||
|
const costUSD = (item.total * 0.01).toFixed(2);
|
||||||
|
const avgPerOperation = item.count > 0 ? (item.total / item.count).toFixed(0) : '0';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className={`flex items-center justify-between p-4 rounded-lg border-l-4 ${colorScheme.border} ${colorScheme.bg} dark:bg-opacity-10 transition-all hover:shadow-md`}
|
||||||
|
>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h4 className={`font-semibold ${colorScheme.text}`}>
|
||||||
|
{item.transaction_type}
|
||||||
|
</h4>
|
||||||
|
<Badge variant="soft" tone="neutral" size="xs">
|
||||||
|
{item.count} ops
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500 dark:text-gray-400">Credits: </span>
|
||||||
|
<span className="font-medium text-gray-900 dark:text-white">
|
||||||
|
{item.total.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500 dark:text-gray-400">Avg/op: </span>
|
||||||
|
<span className="font-medium text-gray-900 dark:text-white">
|
||||||
|
{avgPerOperation} credits
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right ml-4">
|
||||||
|
<div className={`text-2xl font-bold ${colorScheme.text}`}>
|
||||||
|
${costUSD}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-500 mt-1">USD</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{(!analytics.usage_by_type || analytics.usage_by_type.length === 0) && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<DollarSign className="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
|
||||||
|
<p className="text-gray-500 dark:text-gray-400">
|
||||||
|
No cost data available for this period
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
92
frontend/src/components/billing/CreditCostsPanel.tsx
Normal file
92
frontend/src/components/billing/CreditCostsPanel.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
/**
|
||||||
|
* Credit Costs Reference Panel
|
||||||
|
* Shows credit cost for each operation type
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Card } from '../ui/card';
|
||||||
|
import Badge from '../ui/badge/Badge';
|
||||||
|
|
||||||
|
// Credit costs per operation
|
||||||
|
const CREDIT_COSTS: Record<string, { cost: number | string; description: string; color: string }> = {
|
||||||
|
clustering: {
|
||||||
|
cost: 10,
|
||||||
|
description: 'Per clustering request',
|
||||||
|
color: 'brand'
|
||||||
|
},
|
||||||
|
idea_generation: {
|
||||||
|
cost: 15,
|
||||||
|
description: 'Per cluster → ideas request',
|
||||||
|
color: 'brand'
|
||||||
|
},
|
||||||
|
content_generation: {
|
||||||
|
cost: '1 per 100 words',
|
||||||
|
description: 'Per 100 words generated',
|
||||||
|
color: 'brand'
|
||||||
|
},
|
||||||
|
image_prompt_extraction: {
|
||||||
|
cost: 2,
|
||||||
|
description: 'Per content piece',
|
||||||
|
color: 'brand'
|
||||||
|
},
|
||||||
|
image_generation: {
|
||||||
|
cost: 5,
|
||||||
|
description: 'Per image generated',
|
||||||
|
color: 'brand'
|
||||||
|
},
|
||||||
|
linking: {
|
||||||
|
cost: 8,
|
||||||
|
description: 'Per content piece',
|
||||||
|
color: 'brand'
|
||||||
|
},
|
||||||
|
optimization: {
|
||||||
|
cost: '1 per 200 words',
|
||||||
|
description: 'Per 200 words optimized',
|
||||||
|
color: 'brand'
|
||||||
|
},
|
||||||
|
site_structure_generation: {
|
||||||
|
cost: 50,
|
||||||
|
description: 'Per site blueprint',
|
||||||
|
color: 'brand'
|
||||||
|
},
|
||||||
|
site_page_generation: {
|
||||||
|
cost: 20,
|
||||||
|
description: 'Per page generated',
|
||||||
|
color: 'brand'
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function CreditCostsPanel() {
|
||||||
|
return (
|
||||||
|
<Card className="p-6">
|
||||||
|
<div className="mb-6">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Credit Costs per Operation</h2>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||||
|
Understanding how credits are consumed for each operation type
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{Object.entries(CREDIT_COSTS).map(([operation, info]) => (
|
||||||
|
<div
|
||||||
|
key={operation}
|
||||||
|
className="flex items-start justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-[var(--color-brand-300)] dark:hover:border-[var(--color-brand-600)] transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="font-medium text-gray-900 dark:text-white capitalize mb-1">
|
||||||
|
{operation.replace(/_/g, ' ')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
{info.description}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="ml-4 text-right flex-shrink-0">
|
||||||
|
<Badge variant="soft" tone="brand" className="font-semibold">
|
||||||
|
{typeof info.cost === 'number' ? `${info.cost} credits` : info.cost}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -16,29 +16,32 @@ interface LimitCardProps {
|
|||||||
usage: LimitUsage;
|
usage: LimitUsage;
|
||||||
type: 'hard' | 'monthly';
|
type: 'hard' | 'monthly';
|
||||||
daysUntilReset?: number;
|
daysUntilReset?: number;
|
||||||
|
accentColor?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'purple' | 'indigo' | 'pink' | 'teal' | 'cyan';
|
||||||
}
|
}
|
||||||
|
|
||||||
function LimitCard({ title, icon, usage, type, daysUntilReset }: LimitCardProps) {
|
function LimitCard({ title, icon, usage, type, daysUntilReset, accentColor = 'brand' }: LimitCardProps) {
|
||||||
const percentage = usage.percentage_used;
|
const percentage = usage.percentage_used;
|
||||||
const isWarning = percentage >= 80;
|
const isWarning = percentage >= 80;
|
||||||
const isDanger = percentage >= 95;
|
const isDanger = percentage >= 95;
|
||||||
|
|
||||||
let barColor = 'bg-blue-500';
|
// Determine progress bar color
|
||||||
let badgeVariant: 'default' | 'warning' | 'danger' = 'default';
|
let barColor = `bg-[var(--color-${accentColor}-500)]`;
|
||||||
|
let badgeVariant: 'soft' = 'soft';
|
||||||
|
let badgeTone: 'brand' | 'warning' | 'danger' | 'success' | 'info' | 'purple' | 'indigo' | 'pink' | 'teal' | 'cyan' = accentColor;
|
||||||
|
|
||||||
if (isDanger) {
|
if (isDanger) {
|
||||||
barColor = 'bg-red-500';
|
barColor = 'bg-[var(--color-danger)]';
|
||||||
badgeVariant = 'danger';
|
badgeTone = 'danger';
|
||||||
} else if (isWarning) {
|
} else if (isWarning) {
|
||||||
barColor = 'bg-yellow-500';
|
barColor = 'bg-[var(--color-warning)]';
|
||||||
badgeVariant = 'warning';
|
badgeTone = 'warning';
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="p-4 hover:shadow-md transition-shadow">
|
<Card className="p-4 hover:shadow-md transition-shadow">
|
||||||
<div className="flex items-start justify-between mb-3">
|
<div className="flex items-start justify-between mb-3">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-blue-600 dark:text-blue-400">
|
<div className={`p-2 bg-[var(--color-${accentColor}-50)] dark:bg-[var(--color-${accentColor}-900)]/20 rounded-lg text-[var(--color-${accentColor}-500)]`}>
|
||||||
{icon}
|
{icon}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -50,7 +53,7 @@ function LimitCard({ title, icon, usage, type, daysUntilReset }: LimitCardProps)
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Badge variant={badgeVariant}>{percentage}%</Badge>
|
<Badge variant={badgeVariant} tone={badgeTone}>{percentage}%</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Progress Bar */}
|
{/* Progress Bar */}
|
||||||
@@ -137,7 +140,7 @@ export default function UsageLimitsPanel() {
|
|||||||
<p className="text-gray-600 dark:text-gray-400 mb-4">{error || 'Unknown error'}</p>
|
<p className="text-gray-600 dark:text-gray-400 mb-4">{error || 'Unknown error'}</p>
|
||||||
<button
|
<button
|
||||||
onClick={loadUsageSummary}
|
onClick={loadUsageSummary}
|
||||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
|
className="px-4 py-2 bg-[var(--color-brand-500)] text-white rounded-lg hover:bg-[var(--color-brand-600)]"
|
||||||
>
|
>
|
||||||
Retry
|
Retry
|
||||||
</button>
|
</button>
|
||||||
@@ -145,19 +148,19 @@ export default function UsageLimitsPanel() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const hardLimitIcons = {
|
const hardLimitConfig = {
|
||||||
sites: <Globe className="w-5 h-5" />,
|
sites: { icon: <Globe className="w-5 h-5" />, color: 'success' as const },
|
||||||
users: <Users className="w-5 h-5" />,
|
users: { icon: <Users className="w-5 h-5" />, color: 'info' as const },
|
||||||
keywords: <Tag className="w-5 h-5" />,
|
keywords: { icon: <Tag className="w-5 h-5" />, color: 'purple' as const },
|
||||||
clusters: <TrendingUp className="w-5 h-5" />,
|
clusters: { icon: <TrendingUp className="w-5 h-5" />, color: 'warning' as const },
|
||||||
};
|
};
|
||||||
|
|
||||||
const monthlyLimitIcons = {
|
const monthlyLimitConfig = {
|
||||||
content_ideas: <FileText className="w-5 h-5" />,
|
content_ideas: { icon: <FileText className="w-5 h-5" />, color: 'brand' as const },
|
||||||
content_words: <FileText className="w-5 h-5" />,
|
content_words: { icon: <FileText className="w-5 h-5" />, color: 'indigo' as const },
|
||||||
images_basic: <Image className="w-5 h-5" />,
|
images_basic: { icon: <Image className="w-5 h-5" />, color: 'teal' as const },
|
||||||
images_premium: <Zap className="w-5 h-5" />,
|
images_premium: { icon: <Zap className="w-5 h-5" />, color: 'cyan' as const },
|
||||||
image_prompts: <Image className="w-5 h-5" />,
|
image_prompts: { icon: <Image className="w-5 h-5" />, color: 'pink' as const },
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -171,7 +174,7 @@ export default function UsageLimitsPanel() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{summary.days_until_reset !== undefined && (
|
{summary.days_until_reset !== undefined && (
|
||||||
<Badge variant="default">
|
<Badge variant="soft" tone="brand">
|
||||||
Resets in {summary.days_until_reset} days
|
Resets in {summary.days_until_reset} days
|
||||||
</Badge>
|
</Badge>
|
||||||
)}
|
)}
|
||||||
@@ -183,15 +186,19 @@ export default function UsageLimitsPanel() {
|
|||||||
Account Limits
|
Account Limits
|
||||||
</h3>
|
</h3>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
{Object.entries(summary.hard_limits).map(([key, usage]) => (
|
{Object.entries(summary.hard_limits).map(([key, usage]) => {
|
||||||
|
const config = hardLimitConfig[key as keyof typeof hardLimitConfig];
|
||||||
|
return (
|
||||||
<LimitCard
|
<LimitCard
|
||||||
key={key}
|
key={key}
|
||||||
title={usage.display_name}
|
title={usage.display_name}
|
||||||
icon={hardLimitIcons[key as keyof typeof hardLimitIcons]}
|
icon={config.icon}
|
||||||
usage={usage}
|
usage={usage}
|
||||||
type="hard"
|
type="hard"
|
||||||
|
accentColor={config.color}
|
||||||
/>
|
/>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -201,25 +208,29 @@ export default function UsageLimitsPanel() {
|
|||||||
Monthly Usage Limits
|
Monthly Usage Limits
|
||||||
</h3>
|
</h3>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
{Object.entries(summary.monthly_limits).map(([key, usage]) => (
|
{Object.entries(summary.monthly_limits).map(([key, usage]) => {
|
||||||
|
const config = monthlyLimitConfig[key as keyof typeof monthlyLimitConfig];
|
||||||
|
return (
|
||||||
<LimitCard
|
<LimitCard
|
||||||
key={key}
|
key={key}
|
||||||
title={usage.display_name}
|
title={usage.display_name}
|
||||||
icon={monthlyLimitIcons[key as keyof typeof monthlyLimitIcons]}
|
icon={config.icon}
|
||||||
usage={usage}
|
usage={usage}
|
||||||
type="monthly"
|
type="monthly"
|
||||||
daysUntilReset={summary.days_until_reset}
|
daysUntilReset={summary.days_until_reset}
|
||||||
|
accentColor={config.color}
|
||||||
/>
|
/>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Upgrade CTA if approaching limits */}
|
{/* Upgrade CTA if approaching limits */}
|
||||||
{(Object.values(summary.hard_limits).some(u => u.percentage_used >= 80) ||
|
{(Object.values(summary.hard_limits).some(u => u.percentage_used >= 80) ||
|
||||||
Object.values(summary.monthly_limits).some(u => u.percentage_used >= 80)) && (
|
Object.values(summary.monthly_limits).some(u => u.percentage_used >= 80)) && (
|
||||||
<Card className="p-6 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-blue-200 dark:border-blue-700">
|
<Card className="p-6 bg-gradient-to-r from-[var(--color-brand-50)] to-[var(--color-brand-100)] dark:from-[var(--color-brand-900)]/20 dark:to-[var(--color-brand-900)]/10 border-[var(--color-brand-200)] dark:border-[var(--color-brand-700)]">
|
||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-4">
|
||||||
<div className="p-3 bg-blue-600 rounded-lg text-white">
|
<div className="p-3 bg-[var(--color-brand-500)] rounded-lg text-white">
|
||||||
<TrendingUp className="w-6 h-6" />
|
<TrendingUp className="w-6 h-6" />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
@@ -231,10 +242,10 @@ export default function UsageLimitsPanel() {
|
|||||||
and avoid interruptions.
|
and avoid interruptions.
|
||||||
</p>
|
</p>
|
||||||
<a
|
<a
|
||||||
href="/account/plans-and-billing"
|
href="/account/plans-and-billing?tab=purchase"
|
||||||
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
className="inline-flex items-center px-4 py-2 bg-[var(--color-brand-500)] text-white rounded-lg hover:bg-[var(--color-brand-600)] transition-colors"
|
||||||
>
|
>
|
||||||
View Plans & Upgrade
|
Purchase Credits
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,7 +2,6 @@
|
|||||||
layer(base);
|
layer(base);
|
||||||
|
|
||||||
@import "./styles/tokens.css";
|
@import "./styles/tokens.css";
|
||||||
@import "./styles/account-colors.css";
|
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
@keyframes slide-in-right {
|
@keyframes slide-in-right {
|
||||||
|
|||||||
@@ -86,7 +86,7 @@ export default function AccountSettingsPage() {
|
|||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center min-h-screen">
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
|
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -261,7 +261,7 @@ export default function AccountSettingsPage() {
|
|||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={saving}
|
disabled={saving}
|
||||||
className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
className="flex items-center gap-2 px-6 py-2 bg-[var(--color-brand-500)] text-white rounded-lg hover:bg-[var(--color-brand-600)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
>
|
>
|
||||||
{saving ? (
|
{saving ? (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -13,6 +13,8 @@ import Badge from '../../components/ui/badge/Badge';
|
|||||||
import Button from '../../components/ui/button/Button';
|
import Button from '../../components/ui/button/Button';
|
||||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||||
import { PricingTable, PricingPlan } from '../../components/ui/pricing-table';
|
import { PricingTable, PricingPlan } from '../../components/ui/pricing-table';
|
||||||
|
import CreditCostBreakdownPanel from '../../components/billing/CreditCostBreakdownPanel';
|
||||||
|
import CreditCostsPanel from '../../components/billing/CreditCostsPanel';
|
||||||
import {
|
import {
|
||||||
getCreditBalance,
|
getCreditBalance,
|
||||||
getCreditPackages,
|
getCreditPackages,
|
||||||
@@ -39,7 +41,7 @@ import {
|
|||||||
} from '../../services/billing.api';
|
} from '../../services/billing.api';
|
||||||
import { useAuthStore } from '../../store/authStore';
|
import { useAuthStore } from '../../store/authStore';
|
||||||
|
|
||||||
type TabType = 'plan' | 'credits' | 'invoices';
|
type TabType = 'plan' | 'credits' | 'purchase' | 'invoices';
|
||||||
|
|
||||||
export default function PlansAndBillingPage() {
|
export default function PlansAndBillingPage() {
|
||||||
const [activeTab, setActiveTab] = useState<TabType>('plan');
|
const [activeTab, setActiveTab] = useState<TabType>('plan');
|
||||||
@@ -322,7 +324,7 @@ export default function PlansAndBillingPage() {
|
|||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center min-h-screen">
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
|
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -341,6 +343,7 @@ export default function PlansAndBillingPage() {
|
|||||||
const tabs = [
|
const tabs = [
|
||||||
{ id: 'plan' as TabType, label: 'Current Plan', icon: <Package className="w-4 h-4" /> },
|
{ id: 'plan' as TabType, label: 'Current Plan', icon: <Package className="w-4 h-4" /> },
|
||||||
{ id: 'credits' as TabType, label: 'Credits Overview', icon: <TrendingUp className="w-4 h-4" /> },
|
{ id: 'credits' as TabType, label: 'Credits Overview', icon: <TrendingUp className="w-4 h-4" /> },
|
||||||
|
{ id: 'purchase' as TabType, label: 'Purchase Credits', icon: <Wallet className="w-4 h-4" /> },
|
||||||
{ id: 'invoices' as TabType, label: 'Billing History', icon: <FileText className="w-4 h-4" /> },
|
{ id: 'invoices' as TabType, label: 'Billing History', icon: <FileText className="w-4 h-4" /> },
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -360,7 +363,7 @@ export default function PlansAndBillingPage() {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{hasPendingManualPayment && (
|
{hasPendingManualPayment && (
|
||||||
<div className="mb-4 p-4 rounded-lg border border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-100">
|
<div className="mb-4 p-4 rounded-lg border border-[var(--color-info-200)] bg-[var(--color-info-50)] text-[var(--color-info-800)] dark:border-[var(--color-info-800)] dark:bg-[var(--color-info-900)]/20 dark:text-[var(--color-info-100)]">
|
||||||
We received your manual payment. It’s pending admin approval; activation will complete once approved.
|
We received your manual payment. It’s pending admin approval; activation will complete once approved.
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -383,7 +386,7 @@ export default function PlansAndBillingPage() {
|
|||||||
className={`
|
className={`
|
||||||
flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap
|
flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap
|
||||||
${activeTab === tab.id
|
${activeTab === tab.id
|
||||||
? 'border-blue-500 text-blue-600 dark:text-blue-400'
|
? 'border-[var(--color-brand-500)] text-[var(--color-brand-500)]'
|
||||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
|
||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
@@ -447,7 +450,7 @@ export default function PlansAndBillingPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-6 flex gap-3">
|
<div className="mt-6 flex gap-3">
|
||||||
<Button variant="outline" tone="neutral" onClick={() => setActiveTab('credits')}>
|
<Button variant="outline" tone="neutral" onClick={() => setActiveTab('purchase')}>
|
||||||
Purchase Credits
|
Purchase Credits
|
||||||
</Button>
|
</Button>
|
||||||
{hasActivePlan && (
|
{hasActivePlan && (
|
||||||
@@ -471,7 +474,7 @@ export default function PlansAndBillingPage() {
|
|||||||
{(currentPlan?.features && currentPlan.features.length > 0
|
{(currentPlan?.features && currentPlan.features.length > 0
|
||||||
? currentPlan.features
|
? currentPlan.features
|
||||||
: ['ai_writer', 'image_gen', 'auto_publish', 'custom_prompts', 'email_support', 'api_access'])
|
: ['ai_writer', 'image_gen', 'auto_publish', 'custom_prompts', 'email_support', 'api_access'])
|
||||||
.map((feature) => (
|
.map((feature: string) => (
|
||||||
<div key={feature} className="flex items-start gap-2 text-sm">
|
<div key={feature} className="flex items-start gap-2 text-sm">
|
||||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
<span className="text-gray-700 dark:text-gray-300">{feature}</span>
|
<span className="text-gray-700 dark:text-gray-300">{feature}</span>
|
||||||
@@ -519,9 +522,9 @@ export default function PlansAndBillingPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Card className="p-6 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 mt-6">
|
<Card className="p-6 bg-[var(--color-brand-50)] dark:bg-[var(--color-brand-900)]/20 border-[var(--color-brand-200)] dark:border-[var(--color-brand-800)] mt-6">
|
||||||
<h3 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">Plan Change Policy</h3>
|
<h3 className="font-semibold text-[var(--color-brand-900)] dark:text-[var(--color-brand-100)] mb-2">Plan Change Policy</h3>
|
||||||
<ul className="space-y-2 text-sm text-blue-800 dark:text-blue-200">
|
<ul className="space-y-2 text-sm text-[var(--color-brand-800)] dark:text-[var(--color-brand-200)]">
|
||||||
<li>• Upgrades take effect immediately and you'll be charged a prorated amount</li>
|
<li>• Upgrades take effect immediately and you'll be charged a prorated amount</li>
|
||||||
<li>• Downgrades take effect at the end of your current billing period</li>
|
<li>• Downgrades take effect at the end of your current billing period</li>
|
||||||
<li>• Unused credits from your current plan will carry over</li>
|
<li>• Unused credits from your current plan will carry over</li>
|
||||||
@@ -538,7 +541,7 @@ export default function PlansAndBillingPage() {
|
|||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
<Card className="p-6">
|
<Card className="p-6">
|
||||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Current Balance</div>
|
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Current Balance</div>
|
||||||
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400">
|
<div className="text-3xl font-bold text-[var(--color-brand-500)]">
|
||||||
{creditBalance?.credits.toLocaleString() || 0}
|
{creditBalance?.credits.toLocaleString() || 0}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-gray-500 mt-2">credits available</div>
|
<div className="text-sm text-gray-500 mt-2">credits available</div>
|
||||||
@@ -568,7 +571,7 @@ export default function PlansAndBillingPage() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
||||||
<div
|
<div
|
||||||
className="bg-blue-600 h-2 rounded-full"
|
className="bg-[var(--color-brand-500)] h-2 rounded-full"
|
||||||
style={{
|
style={{
|
||||||
width: creditBalance?.credits
|
width: creditBalance?.credits
|
||||||
? `${Math.min((creditBalance.credits / (creditBalance.plan_credits_per_month || 1)) * 100, 100)}%`
|
? `${Math.min((creditBalance.credits / (creditBalance.plan_credits_per_month || 1)) * 100, 100)}%`
|
||||||
@@ -579,8 +582,25 @@ export default function PlansAndBillingPage() {
|
|||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
{/* Purchase Credits Section - Single Row */}
|
{/* Credit Cost Breakdown */}
|
||||||
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="mb-6">
|
||||||
|
<h2 className="text-xl font-semibold">Credit Cost Analytics</h2>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">Cost breakdown by operation type</p>
|
||||||
|
</div>
|
||||||
|
<CreditCostBreakdownPanel />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Credit Costs Reference */}
|
||||||
|
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||||
|
<CreditCostsPanel />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Purchase Credits Tab */}
|
||||||
|
{activeTab === 'purchase' && (
|
||||||
|
<div className="space-y-6">
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
<h2 className="text-xl font-semibold mb-2">Purchase Additional Credits</h2>
|
<h2 className="text-xl font-semibold mb-2">Purchase Additional Credits</h2>
|
||||||
<p className="text-gray-600 dark:text-gray-400">Top up your credit balance with our packages</p>
|
<p className="text-gray-600 dark:text-gray-400">Top up your credit balance with our packages</p>
|
||||||
@@ -589,10 +609,10 @@ export default function PlansAndBillingPage() {
|
|||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
<div className="flex gap-4 pb-4">
|
<div className="flex gap-4 pb-4">
|
||||||
{packages.map((pkg) => (
|
{packages.map((pkg) => (
|
||||||
<article key={pkg.id} className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-blue-500 dark:hover:border-blue-500 transition-colors flex-shrink-0" style={{ minWidth: '280px' }}>
|
<article key={pkg.id} className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-[var(--color-brand-500)] dark:hover:border-[var(--color-brand-500)] transition-colors flex-shrink-0" style={{ minWidth: '280px' }}>
|
||||||
<div className="relative p-5 pb-6">
|
<div className="relative p-5 pb-6">
|
||||||
<div className="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-50 dark:bg-blue-500/10">
|
<div className="mb-3 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-[var(--color-brand-50)] dark:bg-[var(--color-brand-500)]/10">
|
||||||
<svg className="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg className="w-6 h-6 text-[var(--color-brand-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
@@ -600,7 +620,7 @@ export default function PlansAndBillingPage() {
|
|||||||
{pkg.name}
|
{pkg.name}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="flex items-baseline gap-2 mb-1">
|
<div className="flex items-baseline gap-2 mb-1">
|
||||||
<span className="text-3xl font-bold text-blue-600 dark:text-blue-400">{pkg.credits.toLocaleString()}</span>
|
<span className="text-3xl font-bold text-[var(--color-brand-500)]">{pkg.credits.toLocaleString()}</span>
|
||||||
<span className="text-sm text-gray-500 dark:text-gray-400">credits</span>
|
<span className="text-sm text-gray-500 dark:text-gray-400">credits</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
|
<div className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
@@ -633,8 +653,24 @@ export default function PlansAndBillingPage() {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Payment Methods Info */}
|
||||||
|
{!hasPaymentMethods && paymentMethods.length === 0 && (
|
||||||
|
<Card className="p-6 bg-[var(--color-warning-50)] dark:bg-[var(--color-warning-900)]/20 border-[var(--color-warning-200)] dark:border-[var(--color-warning-700)]">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<AlertCircle className="w-5 h-5 text-[var(--color-warning-600)] mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-[var(--color-warning-900)] dark:text-[var(--color-warning-100)] mb-1">
|
||||||
|
Payment Method Required
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--color-warning-800)] dark:text-[var(--color-warning-200)]">
|
||||||
|
Please contact support to set up a payment method before purchasing credits.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Billing History Tab */}
|
{/* Billing History Tab */}
|
||||||
|
|||||||
@@ -143,7 +143,7 @@ export default function PurchaseCreditsPage() {
|
|||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-center min-h-screen">
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
|
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-brand-500)]" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -179,9 +179,9 @@ export default function PurchaseCreditsPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Payment Instructions */}
|
{/* Payment Instructions */}
|
||||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
|
<div className="bg-[var(--color-info-50)] border border-[var(--color-info-200)] dark:bg-[var(--color-info-900)]/20 dark:border-[var(--color-info-700)] rounded-lg p-6 mb-6">
|
||||||
<h3 className="font-semibold mb-3 text-blue-900">Payment Instructions</h3>
|
<h3 className="font-semibold mb-3 text-[var(--color-info-900)] dark:text-[var(--color-info-100)]">Payment Instructions</h3>
|
||||||
<p className="text-blue-800 mb-4">{selectedMethod?.instructions}</p>
|
<p className="text-[var(--color-info-800)] dark:text-[var(--color-info-200)] mb-4">{selectedMethod?.instructions}</p>
|
||||||
|
|
||||||
{selectedMethod?.bank_details && (
|
{selectedMethod?.bank_details && (
|
||||||
<div className="bg-white rounded p-4 space-y-2">
|
<div className="bg-white rounded p-4 space-y-2">
|
||||||
@@ -240,7 +240,7 @@ export default function PurchaseCreditsPage() {
|
|||||||
setManualPaymentData({ ...manualPaymentData, transaction_reference: e.target.value })
|
setManualPaymentData({ ...manualPaymentData, transaction_reference: e.target.value })
|
||||||
}
|
}
|
||||||
placeholder="Enter transaction ID or reference number"
|
placeholder="Enter transaction ID or reference number"
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[var(--color-brand-500)] focus:border-[var(--color-brand-500)]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -255,7 +255,7 @@ export default function PurchaseCreditsPage() {
|
|||||||
}
|
}
|
||||||
placeholder="Any additional information..."
|
placeholder="Any additional information..."
|
||||||
rows={3}
|
rows={3}
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[var(--color-brand-500)] focus:border-[var(--color-brand-500)]"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -314,8 +314,8 @@ export default function PurchaseCreditsPage() {
|
|||||||
onClick={() => setSelectedPackage(pkg)}
|
onClick={() => setSelectedPackage(pkg)}
|
||||||
className={`relative cursor-pointer rounded-lg border-2 p-6 transition-all ${
|
className={`relative cursor-pointer rounded-lg border-2 p-6 transition-all ${
|
||||||
selectedPackage?.id === pkg.id
|
selectedPackage?.id === pkg.id
|
||||||
? 'border-blue-600 bg-blue-50'
|
? 'border-[var(--color-brand-500)] bg-[var(--color-brand-50)]'
|
||||||
: 'border-gray-200 hover:border-blue-300 bg-white'
|
: 'border-gray-200 hover:border-[var(--color-brand-300)] bg-white'
|
||||||
} ${pkg.is_featured ? 'ring-2 ring-yellow-400' : ''}`}
|
} ${pkg.is_featured ? 'ring-2 ring-yellow-400' : ''}`}
|
||||||
>
|
>
|
||||||
{pkg.is_featured && (
|
{pkg.is_featured && (
|
||||||
@@ -326,7 +326,7 @@ export default function PurchaseCreditsPage() {
|
|||||||
|
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<h3 className="text-lg font-bold mb-2">{pkg.name}</h3>
|
<h3 className="text-lg font-bold mb-2">{pkg.name}</h3>
|
||||||
<div className="text-3xl font-bold text-blue-600 mb-1">
|
<div className="text-3xl font-bold text-[var(--color-brand-500)] mb-1">
|
||||||
{pkg.credits.toLocaleString()}
|
{pkg.credits.toLocaleString()}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-gray-600 mb-3">credits</div>
|
<div className="text-sm text-gray-600 mb-3">credits</div>
|
||||||
@@ -343,7 +343,7 @@ export default function PurchaseCreditsPage() {
|
|||||||
|
|
||||||
{selectedPackage?.id === pkg.id && (
|
{selectedPackage?.id === pkg.id && (
|
||||||
<div className="absolute top-3 right-3">
|
<div className="absolute top-3 right-3">
|
||||||
<div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center">
|
<div className="w-6 h-6 bg-[var(--color-brand-500)] rounded-full flex items-center justify-center">
|
||||||
<Check className="w-4 h-4 text-white" />
|
<Check className="w-4 h-4 text-white" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -364,15 +364,15 @@ export default function PurchaseCreditsPage() {
|
|||||||
onClick={() => setSelectedPaymentMethod(method.type)}
|
onClick={() => setSelectedPaymentMethod(method.type)}
|
||||||
className={`cursor-pointer rounded-lg border-2 p-4 transition-all ${
|
className={`cursor-pointer rounded-lg border-2 p-4 transition-all ${
|
||||||
selectedPaymentMethod === method.type
|
selectedPaymentMethod === method.type
|
||||||
? 'border-blue-600 bg-blue-50'
|
? 'border-[var(--color-brand-500)] bg-[var(--color-brand-50)]'
|
||||||
: 'border-gray-200 hover:border-blue-300 bg-white'
|
: 'border-gray-200 hover:border-[var(--color-brand-300)] bg-white'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<div
|
<div
|
||||||
className={`p-2 rounded-lg ${
|
className={`p-2 rounded-lg ${
|
||||||
selectedPaymentMethod === method.type
|
selectedPaymentMethod === method.type
|
||||||
? 'bg-blue-600 text-white'
|
? 'bg-[var(--color-brand-500)] text-white'
|
||||||
: 'bg-gray-100 text-gray-600'
|
: 'bg-gray-100 text-gray-600'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
@@ -383,7 +383,7 @@ export default function PurchaseCreditsPage() {
|
|||||||
<p className="text-sm text-gray-600">{method.instructions}</p>
|
<p className="text-sm text-gray-600">{method.instructions}</p>
|
||||||
</div>
|
</div>
|
||||||
{selectedPaymentMethod === method.type && (
|
{selectedPaymentMethod === method.type && (
|
||||||
<Check className="w-5 h-5 text-blue-600 flex-shrink-0" />
|
<Check className="w-5 h-5 text-[var(--color-brand-500)] flex-shrink-0" />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -405,7 +405,7 @@ export default function PurchaseCreditsPage() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<div className="text-sm text-gray-600">Total:</div>
|
<div className="text-sm text-gray-600">Total:</div>
|
||||||
<div className="text-3xl font-bold text-blue-600">
|
<div className="text-3xl font-bold text-[var(--color-brand-500)]">
|
||||||
${selectedPackage.price}
|
${selectedPackage.price}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ export default function TeamManagementPage() {
|
|||||||
className={`
|
className={`
|
||||||
flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm
|
flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm
|
||||||
${activeTab === tab.id
|
${activeTab === tab.id
|
||||||
? 'border-blue-500 text-blue-600 dark:text-blue-400'
|
? 'border-[var(--color-brand-500)] text-[var(--color-brand-500)]'
|
||||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400'
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400'
|
||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/**
|
/**
|
||||||
* Usage & Analytics Page
|
* Usage & Analytics Page
|
||||||
* Tabs: Plan Limits, Credit Usage, API Usage, Cost Breakdown
|
* Tabs: Limits & Usage, API Usage
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
@@ -15,7 +15,7 @@ import BillingBalancePanel from '../../components/billing/BillingBalancePanel';
|
|||||||
import UsageLimitsPanel from '../../components/billing/UsageLimitsPanel';
|
import UsageLimitsPanel from '../../components/billing/UsageLimitsPanel';
|
||||||
import Button from '../../components/ui/button/Button';
|
import Button from '../../components/ui/button/Button';
|
||||||
|
|
||||||
type TabType = 'limits' | 'credits' | 'balance' | 'api' | 'costs';
|
type TabType = 'limits' | 'api' | 'activity';
|
||||||
|
|
||||||
export default function UsageAnalyticsPage() {
|
export default function UsageAnalyticsPage() {
|
||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
@@ -52,11 +52,9 @@ export default function UsageAnalyticsPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{ id: 'limits' as TabType, label: 'Plan Limits', icon: <BarChart3 className="w-4 h-4" /> },
|
{ id: 'limits' as TabType, label: 'Limits & Usage', icon: <BarChart3 className="w-4 h-4" /> },
|
||||||
{ id: 'credits' as TabType, label: 'Credit Usage', icon: <TrendingUp className="w-4 h-4" /> },
|
{ id: 'activity' as TabType, label: 'Activity', icon: <TrendingUp className="w-4 h-4" /> },
|
||||||
{ id: 'balance' as TabType, label: 'Credit Balance', icon: <DollarSign className="w-4 h-4" /> },
|
|
||||||
{ id: 'api' as TabType, label: 'API Usage', icon: <Activity className="w-4 h-4" /> },
|
{ id: 'api' as TabType, label: 'API Usage', icon: <Activity className="w-4 h-4" /> },
|
||||||
{ id: 'costs' as TabType, label: 'Cost Breakdown', icon: <DollarSign className="w-4 h-4" /> },
|
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -67,7 +65,7 @@ export default function UsageAnalyticsPage() {
|
|||||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Usage & Analytics</h1>
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Usage & Analytics</h1>
|
||||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||||
Monitor plan limits, credit usage, API calls, and cost breakdown
|
Monitor plan limits, credit usage, API calls, and cost breakdown
|
||||||
</p>
|
</p>and API calls
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mb-6 flex items-center justify-between">
|
<div className="mb-6 flex items-center justify-between">
|
||||||
@@ -81,7 +79,7 @@ export default function UsageAnalyticsPage() {
|
|||||||
className={`
|
className={`
|
||||||
flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm
|
flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm
|
||||||
${activeTab === tab.id
|
${activeTab === tab.id
|
||||||
? 'border-blue-500 text-blue-600 dark:text-blue-400'
|
? 'border-[var(--color-brand-500)] text-[var(--color-brand-500)]'
|
||||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400'
|
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400'
|
||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
@@ -114,79 +112,17 @@ export default function UsageAnalyticsPage() {
|
|||||||
|
|
||||||
{/* Tab Content */}
|
{/* Tab Content */}
|
||||||
<div className="mt-6">
|
<div className="mt-6">
|
||||||
{/* Plan Limits Tab */}
|
{/* Limits & Usage Tab */}
|
||||||
{activeTab === 'limits' && (
|
{activeTab === 'limits' && (
|
||||||
|
<div className="space-y-6">
|
||||||
<UsageLimitsPanel />
|
<UsageLimitsPanel />
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Credit Usage Tab */}
|
{/* Activity Tab */}
|
||||||
{activeTab === 'credits' && (
|
{activeTab === 'activity' && (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{/* Summary Cards */}
|
<BillingUsagePanel showOnlyActivity={true} />
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<Card className="p-6">
|
|
||||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Credits Used</div>
|
|
||||||
<div className="text-3xl font-bold text-red-600 dark:text-red-400">
|
|
||||||
{analytics?.total_usage.toLocaleString() || 0}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="p-6">
|
|
||||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Purchases</div>
|
|
||||||
<div className="text-3xl font-bold text-green-600 dark:text-green-400">
|
|
||||||
{analytics?.total_purchases.toLocaleString() || 0}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="p-6">
|
|
||||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Current Balance</div>
|
|
||||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
||||||
{analytics?.current_balance.toLocaleString() || 0}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Usage by Type */}
|
|
||||||
<Card className="p-6">
|
|
||||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
||||||
Usage by Operation Type
|
|
||||||
</h2>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{analytics?.usage_by_type.map((item, idx) => (
|
|
||||||
<div key={idx} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
|
||||||
<div className="flex-1">
|
|
||||||
<Badge variant="light" color="error">
|
|
||||||
{item.transaction_type}
|
|
||||||
</Badge>
|
|
||||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
||||||
{item.count} operations
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="text-lg font-bold text-red-600 dark:text-red-400">
|
|
||||||
{item.total.toLocaleString()} credits
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{(!analytics?.usage_by_type || analytics.usage_by_type.length === 0) && (
|
|
||||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
|
||||||
No usage in this period
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
{/* Insert Billing usage panel below current credit-analytics content */}
|
|
||||||
<div className="mt-6">
|
|
||||||
<BillingUsagePanel />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Credit Balance Tab (billing/credits moved here) */}
|
|
||||||
{activeTab === 'balance' && (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<BillingBalancePanel />
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -196,7 +132,7 @@ export default function UsageAnalyticsPage() {
|
|||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
<Card className="p-6">
|
<Card className="p-6">
|
||||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total API Calls</div>
|
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total API Calls</div>
|
||||||
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400">
|
<div className="text-3xl font-bold text-[var(--color-brand-500)]">
|
||||||
{analytics?.usage_by_type.reduce((sum, item) => sum + item.count, 0).toLocaleString() || 0}
|
{analytics?.usage_by_type.reduce((sum, item) => sum + item.count, 0).toLocaleString() || 0}
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -245,64 +181,6 @@ export default function UsageAnalyticsPage() {
|
|||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Cost Breakdown Tab */}
|
|
||||||
{activeTab === 'costs' && (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<Card className="p-6">
|
|
||||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Cost</div>
|
|
||||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
||||||
${((analytics?.total_usage || 0) * 0.01).toFixed(2)}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-500 mt-1">Estimated USD</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="p-6">
|
|
||||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Avg Cost/Day</div>
|
|
||||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
||||||
${(((analytics?.total_usage || 0) * 0.01) / period).toFixed(2)}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-500 mt-1">Estimated USD</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="p-6">
|
|
||||||
<div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Cost per Credit</div>
|
|
||||||
<div className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
||||||
$0.01
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-500 mt-1">Average rate</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card className="p-6">
|
|
||||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
||||||
Cost by Operation
|
|
||||||
</h2>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{analytics?.usage_by_type.map((item, idx) => (
|
|
||||||
<div key={idx} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="font-medium">{item.transaction_type}</div>
|
|
||||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
||||||
{item.total.toLocaleString()} credits used
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="text-lg font-bold">${(item.total * 0.01).toFixed(2)}</div>
|
|
||||||
<div className="text-xs text-gray-500">USD</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{(!analytics?.usage_by_type || analytics.usage_by_type.length === 0) && (
|
|
||||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
|
||||||
No cost data available
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Summary Cards */}
|
{/* Summary Cards */}
|
||||||
|
|||||||
@@ -1,435 +0,0 @@
|
|||||||
/* ===================================================================
|
|
||||||
IGNY8 ACCOUNT SECTION - CUSTOM COLOR SCHEMES
|
|
||||||
===================================================================
|
|
||||||
Brand-specific styling for account, billing, and usage pages
|
|
||||||
Follows IGNY8 design system with enhanced gradients and visual hierarchy
|
|
||||||
=================================================================== */
|
|
||||||
|
|
||||||
/* Account Page Container */
|
|
||||||
.account-page {
|
|
||||||
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .account-page {
|
|
||||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === IGNY8 BRAND GRADIENTS === */
|
|
||||||
.igny8-gradient-primary {
|
|
||||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-gradient-success {
|
|
||||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-gradient-warning {
|
|
||||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-gradient-danger {
|
|
||||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-gradient-purple {
|
|
||||||
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-gradient-teal {
|
|
||||||
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === CARD VARIANTS === */
|
|
||||||
.igny8-card-premium {
|
|
||||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);
|
|
||||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
|
||||||
box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-card-premium {
|
|
||||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
|
|
||||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-card-success {
|
|
||||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
|
|
||||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-card-success {
|
|
||||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
|
|
||||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-card-warning {
|
|
||||||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(217, 119, 6, 0.05) 100%);
|
|
||||||
border: 1px solid rgba(245, 158, 11, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-card-warning {
|
|
||||||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
|
|
||||||
border: 1px solid rgba(245, 158, 11, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === USAGE METRICS === */
|
|
||||||
.usage-metric-card {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-metric-card::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 3px;
|
|
||||||
background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-metric-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-metric-card.warning::before {
|
|
||||||
background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-metric-card.danger::before {
|
|
||||||
background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-metric-card.success::before {
|
|
||||||
background: linear-gradient(90deg, #10b981 0%, #059669 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === PROGRESS BARS === */
|
|
||||||
.igny8-progress-bar {
|
|
||||||
height: 8px;
|
|
||||||
background: #e5e7eb;
|
|
||||||
border-radius: 9999px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-progress-bar {
|
|
||||||
background: #374151;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-progress-fill::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
rgba(255, 255, 255, 0) 0%,
|
|
||||||
rgba(255, 255, 255, 0.3) 50%,
|
|
||||||
rgba(255, 255, 255, 0) 100%
|
|
||||||
);
|
|
||||||
animation: shimmer 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-progress-fill.primary {
|
|
||||||
background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-progress-fill.warning {
|
|
||||||
background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-progress-fill.danger {
|
|
||||||
background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-progress-fill.success {
|
|
||||||
background: linear-gradient(90deg, #10b981 0%, #059669 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === STAT NUMBERS === */
|
|
||||||
.igny8-stat-number {
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
line-height: 1;
|
|
||||||
letter-spacing: -0.025em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-stat-number.primary {
|
|
||||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-stat-number.success {
|
|
||||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-stat-number.warning {
|
|
||||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-stat-number.danger {
|
|
||||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === BADGES === */
|
|
||||||
.igny8-badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
border-radius: 9999px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: 0.025em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-badge.primary {
|
|
||||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
|
|
||||||
color: #2563eb;
|
|
||||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-badge.primary {
|
|
||||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
|
|
||||||
color: #60a5fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-badge.success {
|
|
||||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
|
|
||||||
color: #059669;
|
|
||||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-badge.success {
|
|
||||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
|
|
||||||
color: #34d399;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-badge.warning {
|
|
||||||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
|
|
||||||
color: #d97706;
|
|
||||||
border: 1px solid rgba(245, 158, 11, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-badge.warning {
|
|
||||||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.2) 100%);
|
|
||||||
color: #fbbf24;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-badge.danger {
|
|
||||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
|
|
||||||
color: #dc2626;
|
|
||||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-badge.danger {
|
|
||||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
|
|
||||||
color: #f87171;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === PLAN CARDS === */
|
|
||||||
.igny8-plan-card {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 1rem;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-plan-card.featured {
|
|
||||||
border: 2px solid #3b82f6;
|
|
||||||
box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-plan-card.featured::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 4px;
|
|
||||||
background: linear-gradient(90deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-plan-card:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === LIMIT DISPLAY === */
|
|
||||||
.igny8-limit-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 0.75rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
background: rgba(59, 130, 246, 0.05);
|
|
||||||
border: 1px solid rgba(59, 130, 246, 0.1);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-limit-item {
|
|
||||||
background: rgba(59, 130, 246, 0.1);
|
|
||||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-limit-item:hover {
|
|
||||||
background: rgba(59, 130, 246, 0.1);
|
|
||||||
border-color: rgba(59, 130, 246, 0.2);
|
|
||||||
transform: translateX(2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-limit-item:hover {
|
|
||||||
background: rgba(59, 130, 246, 0.15);
|
|
||||||
border-color: rgba(59, 130, 246, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === BILLING HISTORY TABLE === */
|
|
||||||
.igny8-billing-table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-billing-table thead th {
|
|
||||||
background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
|
|
||||||
color: #6b7280;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
border-bottom: 1px solid #e5e7eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-billing-table thead th {
|
|
||||||
background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
|
|
||||||
color: #9ca3af;
|
|
||||||
border-bottom: 1px solid #374151;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-billing-table tbody tr {
|
|
||||||
border-bottom: 1px solid #e5e7eb;
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-billing-table tbody tr {
|
|
||||||
border-bottom: 1px solid #374151;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-billing-table tbody tr:hover {
|
|
||||||
background: rgba(59, 130, 246, 0.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-billing-table tbody tr:hover {
|
|
||||||
background: rgba(59, 130, 246, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-billing-table tbody td {
|
|
||||||
padding: 1rem;
|
|
||||||
color: #374151;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .igny8-billing-table tbody td {
|
|
||||||
color: #d1d5db;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === UPGRADE CTA === */
|
|
||||||
.igny8-upgrade-cta {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 1rem;
|
|
||||||
padding: 2rem;
|
|
||||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-upgrade-cta::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
||||||
opacity: 0.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-upgrade-cta-content {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === ANIMATIONS === */
|
|
||||||
@keyframes fadeInUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-fade-in-up {
|
|
||||||
animation: fadeInUp 0.6s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-pulse {
|
|
||||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === RESPONSIVE UTILITIES === */
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.igny8-stat-number {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-metric-card {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.igny8-plan-card {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user