udpates

CHANGELOG.md

@@ -1,10 +1,149 @@
 # IGNY8 Change Log
 
-**Current Version:** v1.0.1  
+**Current Version:** v1.0.5  
 **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
 
 ### Fixed