billing accoutn with all the mess here

frontend/src/pages/Billing/Credits.tsx

@@ -1,9 +1,12 @@
 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 { fetchCreditBalance, CreditBalance } from '../../services/api';
+import { getCreditBalance, CreditBalance } 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';
 
 // Credit costs per operation (Phase 0: Credit-only system)
 const CREDIT_COSTS: Record<string, { cost: number | string; description: string }> = {
@@ -30,7 +33,7 @@ export default function Credits() {
   const loadBalance = async () => {
     try {
       setLoading(true);
-      const data = await fetchCreditBalance();
+      const data = await getCreditBalance();
       setBalance(data);
     } catch (error: any) {
       toast.error(`Failed to load credit balance: ${error.message}`);
@@ -53,51 +56,56 @@ export default function Credits() {
   return (
     <div className="p-6">
       <PageMeta title="Credits" />
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Credit Balance</h1>
-        <p className="text-gray-600 dark:text-gray-400 mt-1">Manage your AI credits and usage</p>
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Credit Balance</h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">Manage your AI credits and usage</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-4 gap-6">
+        <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()}
+              {(balance.balance ?? 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">Monthly Allocation</h3>
+              <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.plan_credits_per_month ?? 0).toLocaleString()}
+              {balance.subscription_plan || 'None'}
             </div>
-            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Credits per month</p>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
+              {balance.monthly_credits ? `${balance.monthly_credits.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">Used This Month</h3>
+              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Status</h3>
             </div>
-            <div className="text-3xl font-bold text-gray-900 dark:text-white">
-              {(balance.credits_used_this_month ?? 0).toLocaleString()}
+            <div className="mt-2">
+              <Badge 
+                variant="light" 
+                color={balance.subscription_status === 'active' ? 'success' : 'secondary'}
+                className="text-base font-semibold"
+              >
+                {balance.subscription_status || 'No subscription'}
+              </Badge>
             </div>
-            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Credits consumed</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">Remaining</h3>
-            </div>
-            <div className="text-3xl font-bold text-gray-900 dark:text-white">
-              {(balance.credits_remaining ?? 0).toLocaleString()}
-            </div>
-            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Credits remaining</p>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Subscription status</p>
           </Card>
         </div>
       )}

frontend/src/pages/Billing/Transactions.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import PageMeta from '../../components/common/PageMeta';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { fetchCreditTransactions, CreditTransaction } from '../../services/api';
+import { getCreditTransactions, CreditTransaction } from '../../services/billing.api';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 
@@ -19,9 +19,10 @@ export default function Transactions() {
   const loadTransactions = async () => {
     try {
       setLoading(true);
-      const response = await fetchCreditTransactions({ page: currentPage });
+      const response = await getCreditTransactions();
       setTransactions(response.results || []);
-      setTotalPages(Math.ceil((response.count || 0) / 50));
+      const count = response.count || 0;
+      setTotalPages(Math.ceil(count / 50));
     } catch (error: any) {
       toast.error(`Failed to load transactions: ${error.message}`);
     } finally {
@@ -32,10 +33,14 @@ export default function Transactions() {
   const getTransactionTypeColor = (type: string) => {
     switch (type) {
       case 'purchase':
-      case 'subscription':
+      case 'grant':
+      case 'refund':
         return 'success';
       case 'deduction':
+      case 'usage':
         return 'error';
+      case 'adjustment':
+        return 'warning';
       default:
         return 'primary';
     }
@@ -62,7 +67,7 @@ export default function Transactions() {
                   <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">Balance After</th>
+                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Reference</th>
                   <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Description</th>
                 </tr>
               </thead>
@@ -74,7 +79,7 @@ export default function Transactions() {
                     </td>
                     <td className="py-3 px-4">
                       <Badge variant="light" color={getTransactionTypeColor(transaction.transaction_type) as any}>
-                        {transaction.transaction_type_display}
+                        {transaction.transaction_type}
                       </Badge>
                     </td>
                     <td className={`py-3 px-4 text-sm font-medium ${
@@ -85,7 +90,7 @@ export default function Transactions() {
                       {transaction.amount >= 0 ? '+' : ''}{transaction.amount.toLocaleString()}
                     </td>
                     <td className="py-3 px-4 text-sm text-gray-900 dark:text-white">
-                      {transaction.balance_after.toLocaleString()}
+                      {transaction.reference_id || '-'}
                     </td>
                     <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
                       {transaction.description}

frontend/src/pages/Billing/Usage.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import PageMeta from '../../components/common/PageMeta';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { fetchCreditUsage, CreditUsageLog, fetchUsageLimits, LimitCard } from '../../services/api';
+import { getCreditTransactions, getCreditBalance, CreditTransaction as BillingTransaction, CreditBalance } from '../../services/billing.api';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 
@@ -20,53 +20,84 @@ const CREDIT_COSTS: Record<string, { cost: number | string; description: string
 
 export default function Usage() {
   const toast = useToast();
-  const [usageLogs, setUsageLogs] = useState<CreditUsageLog[]>([]);
-  const [limits, setLimits] = useState<LimitCard[]>([]);
+  const [transactions, setTransactions] = useState<BillingTransaction[]>([]);
+  const [balance, setBalance] = useState<CreditBalance | null>(null);
   const [loading, setLoading] = useState(true);
-  const [limitsLoading, setLimitsLoading] = useState(true);
 
   useEffect(() => {
     loadUsage();
-    loadLimits();
   }, []);
 
   const loadUsage = async () => {
     try {
       setLoading(true);
-      const response = await fetchCreditUsage({ page: 1 });
-      setUsageLogs(response.results || []);
+      const [txnData, balanceData] = await Promise.all([
+        getCreditTransactions(),
+        getCreditBalance()
+      ]);
+      setTransactions(txnData.results || []);
+      setBalance(balanceData);
     } catch (error: any) {
-      toast.error(`Failed to load usage logs: ${error.message}`);
+      toast.error(`Failed to load usage data: ${error.message}`);
     } finally {
       setLoading(false);
     }
   };
 
-  const loadLimits = async () => {
-    try {
-      setLimitsLoading(true);
-      const response = await fetchUsageLimits();
-      setLimits(response.limits || []);
-    } catch (error: any) {
-      toast.error(`Failed to load usage limits: ${error.message}`);
-      setLimits([]);
-    } finally {
-      setLimitsLoading(false);
-    }
-  };
-
-  // Filter limits to show only credits and account management (Phase 0: Credit-only system)
-  const creditLimits = limits.filter(l => l.category === 'credits');
-  const accountLimits = limits.filter(l => l.category === 'account');
+  if (loading) {
+    return (
+      <div className="p-6">
+        <PageMeta title="Usage" description="Monitor your credit usage" />
+        <div className="flex items-center justify-center h-64">
+          <div className="text-gray-500">Loading...</div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="p-6">
       <PageMeta title="Usage" description="Monitor your credit usage and account limits" />
       <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Credit Usage & Limits</h1>
-        <p className="text-gray-600 dark:text-gray-400 mt-1">Monitor your credit usage and account management limits</p>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Credit Usage & Activity</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">Monitor your credit usage and transaction history</p>
       </div>
 
+      {/* Current Balance Overview */}
+      {balance && (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+          <Card className="p-6">
+            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Current Balance</h3>
+            <div className="text-3xl font-bold text-gray-900 dark:text-white">
+              {balance.balance.toLocaleString()}
+            </div>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Available credits</p>
+          </Card>
+
+          <Card className="p-6">
+            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Monthly Allocation</h3>
+            <div className="text-3xl font-bold text-gray-900 dark:text-white">
+              {(balance.monthly_credits || 0).toLocaleString()}
+            </div>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              {balance.subscription_plan || 'No plan'}
+            </p>
+          </Card>
+
+          <Card className="p-6">
+            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Status</h3>
+            <div className="mt-2">
+              <Badge 
+                variant="light" 
+                className="text-lg"
+              >
+                {balance.subscription_status || 'No subscription'}
+              </Badge>
+            </div>
+          </Card>
+        </div>
+      )}
+
       {/* Credit Costs Reference */}
       <Card className="p-6 mb-6">
         <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Costs per Operation</h2>
@@ -91,184 +122,62 @@ export default function Usage() {
         </div>
       </Card>
 
-      {/* Credit Limits */}
-      {limitsLoading ? (
-        <Card className="p-6 mb-8">
-          <div className="flex items-center justify-center h-32">
-            <div className="text-gray-500">Loading limits...</div>
+      {/* Credit Activity Table */}
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Activity</h2>
+        <Card className="p-6">
+          <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>
+                {transactions.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="light" 
+                        color={txn.amount >= 0 ? 'success' : 'error'}
+                      >
+                        {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>
         </Card>
-      ) : (
-        <div className="space-y-6 mb-8">
-          {/* Credit Usage Limits */}
-          {creditLimits.length > 0 && (
-            <div>
-              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Usage</h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                {creditLimits.map((limit, idx) => (
-                  <LimitCardComponent key={idx} limit={limit} />
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Account Management Limits */}
-          {accountLimits.length > 0 && (
-            <div>
-              <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Account Management</h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                {accountLimits.map((limit, idx) => (
-                  <LimitCardComponent key={idx} limit={limit} />
-                ))}
-              </div>
-            </div>
-          )}
-
-          {creditLimits.length === 0 && accountLimits.length === 0 && (
-            <Card className="p-6">
-              <div className="text-center text-gray-500 dark:text-gray-400">
-                <p className="mb-2 font-medium">No limits data available.</p>
-                <p className="text-sm">Your account may not have a plan configured.</p>
-              </div>
-            </Card>
-          )}
-        </div>
-      )}
-
-      {/* Usage Logs Table */}
-      <div className="mb-6">
-        <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Usage Logs</h2>
-        {loading ? (
-          <div className="flex items-center justify-center h-64">
-            <div className="text-gray-500">Loading...</div>
-          </div>
-        ) : (
-          <Card className="p-6">
-            <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">Operation</th>
-                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Credits Used</th>
-                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Model</th>
-                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Cost (USD)</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {usageLogs.map((log) => (
-                    <tr key={log.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(log.created_at).toLocaleString()}
-                      </td>
-                      <td className="py-3 px-4">
-                        <Badge variant="light" color="primary">{log.operation_type_display}</Badge>
-                      </td>
-                      <td className="py-3 px-4 text-sm font-medium text-gray-900 dark:text-white">
-                        {log.credits_used}
-                      </td>
-                      <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
-                        {log.model_used || 'N/A'}
-                      </td>
-                      <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
-                        {log.cost_usd ? `$${parseFloat(log.cost_usd).toFixed(4)}` : 'N/A'}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </Card>
-        )}
       </div>
     </div>
   );
 }
-
-// Limit Card Component
-function LimitCardComponent({ limit }: { limit: LimitCard }) {
-  const getCategoryColor = (category: string) => {
-    switch (category) {
-      case 'credits': return 'primary';
-      case 'account': return 'gray';
-      default: return 'gray';
-    }
-  };
-
-  const getUsageStatus = (percentage: number | null) => {
-    if (percentage === null) return 'info';
-    if (percentage >= 90) return 'danger';
-    if (percentage >= 75) return 'warning';
-    return 'success';
-  };
-
-  const percentage = limit.percentage !== null && limit.percentage !== undefined ? Math.min(limit.percentage, 100) : null;
-  const status = getUsageStatus(percentage);
-  const color = getCategoryColor(limit.category);
-  
-  const statusColorClass = status === 'danger' 
-    ? 'bg-red-500' 
-    : status === 'warning' 
-    ? 'bg-yellow-500' 
-    : status === 'info'
-    ? 'bg-blue-500'
-    : 'bg-green-500';
-  
-  const statusTextColor = status === 'danger'
-    ? 'text-red-600 dark:text-red-400'
-    : status === 'warning'
-    ? 'text-yellow-600 dark:text-yellow-400'
-    : status === 'info'
-    ? 'text-blue-600 dark:text-blue-400'
-    : 'text-green-600 dark:text-green-400';
-
-  return (
-    <Card className="p-4">
-      <div className="flex items-center justify-between mb-2">
-        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">{limit.title}</h3>
-        <Badge variant="light" color={color as any}>{limit.category}</Badge>
-      </div>
-      <div className="mb-3">
-        <div className="flex items-baseline gap-2">
-          {limit.limit !== null && limit.limit !== undefined ? (
-            <>
-              <span className="text-2xl font-bold text-gray-900 dark:text-white">{limit.used.toLocaleString()}</span>
-              <span className="text-sm text-gray-500 dark:text-gray-400">/ {limit.limit.toLocaleString()}</span>
-            </>
-          ) : (
-            <span className="text-2xl font-bold text-gray-900 dark:text-white">
-              {limit.available !== null && limit.available !== undefined ? limit.available.toLocaleString() : limit.used.toLocaleString()}
-            </span>
-          )}
-          {limit.unit && (
-            <span className="text-xs text-gray-400 dark:text-gray-500">{limit.unit}</span>
-          )}
-        </div>
-        {percentage !== null && (
-          <div className="mt-2">
-            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-              <div
-                className={`h-2 rounded-full ${statusColorClass}`}
-                style={{ width: `${percentage}%` }}
-              />
-            </div>
-          </div>
-        )}
-      </div>
-      <div className="flex items-center justify-between text-xs">
-        {limit.available !== null && limit.available !== undefined ? (
-          <span className={statusTextColor}>
-            {limit.available.toLocaleString()} available
-          </span>
-        ) : (
-          <span className="text-gray-500 dark:text-gray-400">Current value</span>
-        )}
-        {percentage !== null && (
-          <span className="text-gray-500 dark:text-gray-400">
-            {percentage.toFixed(1)}% used
-          </span>
-        )}
-      </div>
-    </Card>
-  );
-}