udpates

2025-12-12 14:08:27 +00:00
parent 6e2101d019
commit f163a2e07d
14 changed files with 1324 additions and 677 deletions
--- a/frontend/src/pages/account/PlansAndBillingPage.tsx
+++ b/frontend/src/pages/account/PlansAndBillingPage.tsx
@@ -13,6 +13,8 @@ import Badge from '../../components/ui/badge/Badge';
 import Button from '../../components/ui/button/Button';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { PricingTable, PricingPlan } from '../../components/ui/pricing-table';
+import CreditCostBreakdownPanel from '../../components/billing/CreditCostBreakdownPanel';
+import CreditCostsPanel from '../../components/billing/CreditCostsPanel';
 import {
  getCreditBalance,
  getCreditPackages,
@@ -39,7 +41,7 @@ import {
 } from '../../services/billing.api';
 import { useAuthStore } from '../../store/authStore';

-type TabType = 'plan' | 'credits' | 'invoices';
+type TabType = 'plan' | 'credits' | 'purchase' | 'invoices';

 export default function PlansAndBillingPage() {
  const [activeTab, setActiveTab] = useState<TabType>('plan');
@@ -322,7 +324,7 @@ export default function PlansAndBillingPage() {
  if (loading) {
    return (
      <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>
    );
  }
@@ -341,6 +343,7 @@ export default function PlansAndBillingPage() {
  const tabs = [
    { 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: '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" /> },
  ];

@@ -360,7 +363,7 @@ export default function PlansAndBillingPage() {
        </div>
      )}
      {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.
        </div>
      )}
@@ -383,7 +386,7 @@ export default function PlansAndBillingPage() {
              className={`
                flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm whitespace-nowrap
                ${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'
                }
              `}
@@ -447,7 +450,7 @@ export default function PlansAndBillingPage() {
                    </div>
                  </div>
                  <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
                    </Button>
                    {hasActivePlan && (
@@ -471,7 +474,7 @@ export default function PlansAndBillingPage() {
                  {(currentPlan?.features && currentPlan.features.length > 0
                    ? currentPlan.features
                    : ['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">
                        <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>
@@ -519,9 +522,9 @@ export default function PlansAndBillingPage() {
                />
              </div>

-              <Card className="p-6 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 mt-6">
-                <h3 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">Plan Change Policy</h3>
-                <ul className="space-y-2 text-sm text-blue-800 dark:text-blue-200">
+              <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-[var(--color-brand-900)] dark:text-[var(--color-brand-100)] mb-2">Plan Change Policy</h3>
+                <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>• Downgrades take effect at the end of your current billing period</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">
              <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-blue-600 dark:text-blue-400">
+                <div className="text-3xl font-bold text-[var(--color-brand-500)]">
                  {creditBalance?.credits.toLocaleString() || 0}
                </div>
                <div className="text-sm text-gray-500 mt-2">credits available</div>
@@ -568,7 +571,7 @@ export default function PlansAndBillingPage() {
                </div>
                <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                  <div 
-                    className="bg-blue-600 h-2 rounded-full" 
+                    className="bg-[var(--color-brand-500)] h-2 rounded-full" 
                    style={{ 
                      width: creditBalance?.credits 
                        ? `${Math.min((creditBalance.credits / (creditBalance.plan_credits_per_month || 1)) * 100, 100)}%` 
@@ -579,40 +582,57 @@ export default function PlansAndBillingPage() {
              </div>
            </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="mb-6">
-                <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>
+                <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>

-              <div className="overflow-x-auto">
-                <div className="flex gap-4 pb-4">
-                  {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' }}>
-                      <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">
-                          <svg className="w-6 h-6 text-blue-600 dark:text-blue-400" 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" />
-                          </svg>
-                        </div>
-                        <h3 className="mb-2 text-lg font-semibold text-gray-800 dark:text-white/90">
-                          {pkg.name}
-                        </h3>
-                        <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-sm text-gray-500 dark:text-gray-400">credits</span>
-                        </div>
-                        <div className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
-                          ${pkg.price}
-                        </div>
-                        {pkg.description && (
-                          <p className="text-sm text-gray-500 dark:text-gray-400">
-                            {pkg.description}
-                          </p>
-                        )}
+            {/* 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">
+              <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>
+            </div>
+
+            <div className="overflow-x-auto">
+              <div className="flex gap-4 pb-4">
+                {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-[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="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-[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" />
+                        </svg>
                      </div>
-                      <div className="border-t border-gray-200 p-4 dark:border-gray-800">
+                      <h3 className="mb-2 text-lg font-semibold text-gray-800 dark:text-white/90">
+                        {pkg.name}
+                      </h3>
+                      <div className="flex items-baseline gap-2 mb-1">
+                        <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>
+                      </div>
+                      <div className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
+                        ${pkg.price}
+                      </div>
+                      {pkg.description && (
+                        <p className="text-sm text-gray-500 dark:text-gray-400">
+                          {pkg.description}
+                        </p>
+                      )}
+                    </div>
+                    <div className="border-t border-gray-200 p-4 dark:border-gray-800">
                      <Button 
                        variant="primary"
                        tone="brand"
@@ -633,7 +653,23 @@ export default function PlansAndBillingPage() {
                )}
              </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>
+              </Card>
+            )}
          </div>
        )}