some-improvement

2025-12-05 05:38:58 +00:00
parent 6cf786b03f
commit d92a99ecc3
20 changed files with 376 additions and 3719 deletions
--- a/frontend/src/components/billing/BillingBalancePanel.tsx
+++ b/frontend/src/components/billing/BillingBalancePanel.tsx
@@ -0,0 +1,94 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import PageMeta from '../../components/common/PageMeta';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { getCreditBalance } from '../../services/billing.api';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+import Button from '../../components/ui/button/Button';
+import { DollarLineIcon } from '../../icons';
+
+export default function BillingBalancePanel() {
+  const toast = useToast();
+  const [balance, setBalance] = useState<any | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadBalance();
+  }, []);
+
+  const loadBalance = async () => {
+    try {
+      setLoading(true);
+      const data = await getCreditBalance();
+      setBalance(data as any);
+    } catch (error: any) {
+      toast.error(`Failed to load credit balance: ${error?.message || error}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-4">
+        <div className="text-gray-500">Loading credit balance...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 space-y-6">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Credit Balance</h2>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Manage your AI credits and subscription status</p>
+        </div>
+        <Link to="/account/purchase-credits">
+          <Button variant="primary" startIcon={<DollarLineIcon className="w-4 h-4" />}>
+            Purchase Credits
+          </Button>
+        </Link>
+      </div>
+
+      {balance && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <Card className="p-6">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Current Balance</h3>
+            </div>
+            <div className="text-3xl font-bold text-gray-900 dark:text-white">
+              {(balance?.credits ?? 0).toLocaleString()}
+            </div>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Available credits</p>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Subscription Plan</h3>
+            </div>
+            <div className="text-3xl font-bold text-gray-900 dark:text-white">
+              {(balance as any)?.subscription_plan || 'None'}
+            </div>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
+              {(balance?.plan_credits_per_month ?? 0) ? `${(balance?.plan_credits_per_month ?? 0).toLocaleString()} credits/month` : 'No subscription'}
+            </p>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Status</h3>
+            </div>
+            <div className="mt-2">
+              <Badge variant="light" color={(balance as any)?.subscription_status === 'active' ? 'success' : 'secondary'} className="text-base font-semibold">
+                {(balance as any)?.subscription_status || 'No subscription'}
+              </Badge>
+            </div>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Subscription status</p>
+          </Card>
+        </div>
+      )}
+
+    </div>
+  );
+}