salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs & ux improvmeents

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-25 20:31:58 +00:00
parent 90e6e96b2b
commit 4bffede052
247 changed files with 6869 additions and 53517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/pages/account/PlansAndBillingPage.tsx
View File

@@ -1,6 +1,6 @@
/**
* Plans & Billing Page - Refactored for Better UX
* Organized tabs: Current Plan, Plan Limits, Credits, Purchase Credits, Billing History
* Organized tabs: Current Plan, Plan Limits, Usage, Upgrade Plan, Billing History
*/
import { useState, useEffect, useRef } from 'react';
@@ -15,7 +15,7 @@ import { useToast } from '../../components/ui/toast/ToastContainer';
import { PricingPlan } from '../../components/ui/pricing-table';
import PricingTable1 from '../../components/ui/pricing-table/pricing-table-1';
import CreditCostBreakdownPanel from '../../components/billing/CreditCostBreakdownPanel';
import CreditCostsPanel from '../../components/billing/CreditCostsPanel';
// import CreditCostsPanel from '../../components/billing/CreditCostsPanel'; // Hidden from regular users
import UsageLimitsPanel from '../../components/billing/UsageLimitsPanel';
import { convertToPricingPlan } from '../../utils/pricingHelpers';
import {
@@ -345,9 +345,8 @@ export default function PlansAndBillingPage() {
const tabs = [
{ id: 'plan' as TabType, label: 'Current Plan', icon: <Package className="w-4 h-4" /> },
{ id: 'limits' as TabType, label: 'Plan Limits', icon: <BarChart3 className="w-4 h-4" /> },
{ id: 'credits' as TabType, label: 'Credits', icon: <TrendingUp className="w-4 h-4" /> },
{ id: 'upgrade' as TabType, label: 'Purchase/Upgrade', icon: <Wallet className="w-4 h-4" /> },
{ id: 'limits' as TabType, label: 'Usage', icon: <BarChart3 className="w-4 h-4" /> },
{ id: 'upgrade' as TabType, label: 'Upgrade Plan', icon: <Wallet className="w-4 h-4" /> },
{ id: 'invoices' as TabType, label: 'History', icon: <FileText className="w-4 h-4" /> },
];
@@ -356,7 +355,7 @@ export default function PlansAndBillingPage() {
<div className="mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Your Subscription</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
Manage your plan and payments - View what's included, upgrade, or buy more credits
Manage your plan and view usage
</p>
</div>
@@ -477,7 +476,7 @@ export default function PlansAndBillingPage() {
onClick={() => setActiveTab('upgrade')}
startIcon={<ArrowUpCircle className="w-4 h-4" />}
>
Purchase Credits
Upgrade Plan
</Button>
<Button
variant="outline"
@@ -597,22 +596,22 @@ export default function PlansAndBillingPage() {
</div>
)}
{/* Credits Overview Tab */}
{/* Usage Overview Tab */}
{activeTab === 'credits' && (
<div className="space-y-6">
{/* Credit Balance Cards */}
{/* Usage Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card className="p-6 bg-gradient-to-br from-brand-50 to-brand-100 dark:from-brand-900/20 dark:to-brand-800/10 border-brand-200 dark:border-brand-700">
<div className="flex items-center gap-3 mb-3">
<div className="p-2 bg-brand-500 rounded-lg">
<Wallet className="w-5 h-5 text-white" />
</div>
<div className="text-sm font-medium text-brand-700 dark:text-brand-300">Current Balance</div>
<div className="text-sm font-medium text-brand-700 dark:text-brand-300">Content Remaining</div>
</div>
<div className="text-4xl font-bold text-brand-600 dark:text-brand-400">
{creditBalance?.credits.toLocaleString() || 0}
</div>
<div className="text-sm text-brand-600 dark:text-brand-400 mt-2">credits available</div>
<div className="text-sm text-brand-600 dark:text-brand-400 mt-2">pieces available</div>
</Card>
<Card className="p-6 bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/10 border-red-200 dark:border-red-700">
@@ -689,19 +688,7 @@ export default function PlansAndBillingPage() {
</div>
</Card>
{/* Credit Cost Breakdown */}
<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 text-gray-900 dark:text-white">Credit Cost Analytics</h2>
<p className="text-gray-600 dark:text-gray-400">Detailed breakdown of credit usage 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>
{/* Usage Analytics - removed detailed credit breakdown to simplify user view */}
</div>
)}
@@ -765,7 +752,7 @@ export default function PlansAndBillingPage() {
</Card>
</div>
{/* Purchase Additional Credits Section */}
{/* Purchase Additional Credits Section - Hidden from regular users
<div className="mt-12 pt-8 border-t-2 border-gray-200 dark:border-gray-700">
<div className="mb-6">
<h2 className="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Purchase Additional Credits</h2>
@@ -780,14 +767,14 @@ export default function PlansAndBillingPage() {
<Wallet className="w-6 h-6 text-white" />
</div>
<div>
<div className="text-sm text-gray-600 dark:text-gray-400">Current Credit Balance</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Content Remaining</div>
<div className="text-3xl font-bold text-gray-900 dark:text-white">
{creditBalance?.credits.toLocaleString() || 0}
</div>
</div>
</div>
<div className="text-right">
<div className="text-sm text-gray-600 dark:text-gray-400">Monthly Allocation</div>
<div className="text-sm text-gray-600 dark:text-gray-400">Monthly Allowance</div>
<div className="text-xl font-bold text-brand-600 dark:text-brand-400">
{creditBalance?.plan_credits_per_month.toLocaleString() || 0}
</div>
@@ -795,7 +782,8 @@ export default function PlansAndBillingPage() {
</div>
</Card>
{/* Credit Packages Grid */}
{/* Credit Packages Grid - Hidden from regular users */}
{/*
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
{packages.map((pkg) => (
<Card
@@ -867,6 +855,7 @@ export default function PlansAndBillingPage() {
</Card>
)}
</div>
*/}
</div>
)}