layout updates

frontend/src/components/billing/BillingRecentTransactions.tsx

@@ -4,7 +4,9 @@ import Badge from '../../components/ui/badge/Badge';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { getCreditTransactions, type CreditTransaction } from '../../services/billing.api';
 
-export default function BillingRecentTransactions({ limit = 10 }: { limit?: number }) {
+type Variant = 'card' | 'plain';
+
+export default function BillingRecentTransactions({ limit = 10, variant = 'card' }: { limit?: number; variant?: Variant }) {
   const toast = useToast();
   const [transactions, setTransactions] = useState<CreditTransaction[]>([]);
   const [loading, setLoading] = useState(true);
@@ -41,6 +43,44 @@ export default function BillingRecentTransactions({ limit = 10 }: { limit?: numb
     return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
   };
 
+  const content = (
+    <div className="space-y-3">
+      {transactions.slice(0, limit).map((transaction) => (
+        <div key={transaction.id} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+          <div className="flex-1">
+            <div className="flex items-center gap-2">
+              <Badge tone={getTransactionTypeColor(transaction.transaction_type) as any}>
+                {formatOperationType(transaction.transaction_type)}
+              </Badge>
+              <span className="text-sm text-gray-900 dark:text-white">
+                {transaction.description}
+              </span>
+            </div>
+            <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              {new Date(transaction.created_at).toLocaleString()}
+              {transaction.reference_id && ` • Ref: ${transaction.reference_id}`}
+            </div>
+          </div>
+          <div className="text-right">
+            <div className={`font-bold ${transaction.amount > 0 ? 'text-green-600' : 'text-red-600'}`}>
+              {transaction.amount > 0 ? '+' : ''}{transaction.amount}
+            </div>
+          </div>
+        </div>
+      ))}
+      {transactions.length === 0 && (
+        <div className="text-center py-8 text-gray-500 dark:text-gray-400">No transactions yet</div>
+      )}
+    </div>
+  );
+
+  if (variant === 'plain') {
+    if (loading) {
+      return <div className="text-center py-8 text-gray-500">Loading...</div>;
+    }
+    return content;
+  }
+
   if (loading) {
     return (
       <ComponentCard title="Recent Transactions">
@@ -49,36 +89,5 @@ export default function BillingRecentTransactions({ limit = 10 }: { limit?: numb
     );
   }
 
-  return (
+  return <ComponentCard title="Recent Transactions">{content}</ComponentCard>;
-    <ComponentCard title="Recent Transactions">
-      <div className="space-y-3">
-        {transactions.slice(0, limit).map((transaction) => (
-          <div key={transaction.id} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
-            <div className="flex-1">
-              <div className="flex items-center gap-2">
-                <Badge tone={getTransactionTypeColor(transaction.transaction_type) as any}>
-                  {formatOperationType(transaction.transaction_type)}
-                </Badge>
-                <span className="text-sm text-gray-900 dark:text-white">
-                  {transaction.description}
-                </span>
-              </div>
-              <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                {new Date(transaction.created_at).toLocaleString()}
-                {transaction.reference_id && ` • Ref: ${transaction.reference_id}`}
-              </div>
-            </div>
-            <div className="text-right">
-              <div className={`font-bold ${transaction.amount > 0 ? 'text-green-600' : 'text-red-600'}`}>
-                {transaction.amount > 0 ? '+' : ''}{transaction.amount}
-              </div>
-            </div>
-          </div>
-        ))}
-        {transactions.length === 0 && (
-          <div className="text-center py-8 text-gray-500 dark:text-gray-400">No transactions yet</div>
-        )}
-      </div>
-    </ComponentCard>
-  );
 }

frontend/src/pages/account/AccountBillingPage.tsx

@@ -47,6 +47,43 @@ export default function AccountBillingPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string>('');
 
+  const planCatalog: PricingPlan[] = [
+    {
+      id: 1,
+      name: 'Starter',
+      price: 89,
+      period: '/month',
+      description: 'Good for small teams getting started',
+      features: ['1,000 credits included', '1 site', '2 users'],
+    },
+    {
+      id: 2,
+      name: 'Growth',
+      price: 139,
+      period: '/month',
+      description: 'For growing teams that need more volume',
+      features: ['2,000 credits included', '3 sites', '3 users'],
+      highlighted: true,
+    },
+    {
+      id: 3,
+      name: 'Scale',
+      price: 229,
+      period: '/month',
+      description: 'Larger teams with higher usage',
+      features: ['4,000 credits included', '5 sites', '5 users'],
+    },
+    {
+      id: 4,
+      name: 'Enterprise',
+      price: 0,
+      period: '/custom',
+      description: 'Custom limits, SSO, and dedicated support',
+      features: ['10,000+ credits', '20 sites', '10,000 users'],
+      buttonText: 'Talk to us',
+    },
+  ];
+
   useEffect(() => {
     loadData();
   }, []);
@@ -126,15 +163,15 @@ export default function AccountBillingPage() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div className="container mx-auto px-6 py-8">
-      <div className="max-w-6xl mx-auto">
+      <div className="max-w-7xl mx-auto">
         <div className="flex items-center justify-between mb-6">
           <div>
             <h1 className="text-3xl font-bold">Plans & Billing</h1>
             <p className="text-gray-600">Manage your subscription, credits, and billing</p>
           </div>
           <Link
-            to="/account/credits/purchase"
+            to="/account/purchase-credits"
             className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center gap-2"
           >
             <CreditCard className="w-4 h-4" />
@@ -242,7 +279,7 @@ export default function AccountBillingPage() {
                 <h3 className="text-lg font-semibold mb-4">Quick Actions</h3>
                 <div className="space-y-2">
                   <Link
-                    to="/account/credits/purchase"
+                    to="/account/purchase-credits"
                     className="block w-full bg-blue-600 text-white text-center py-2 px-4 rounded hover:bg-blue-700 transition-colors"
                   >
                     Purchase Credits
@@ -285,7 +322,7 @@ export default function AccountBillingPage() {
                   View usage details
                 </Link>
               </div>
-              <BillingRecentTransactions />
+              <BillingRecentTransactions variant="plain" />
             </Card>
           </div>
         )}
@@ -293,79 +330,76 @@ export default function AccountBillingPage() {
         {/* Plans Tab */}
         {activeTab === 'plans' && (
           <div className="space-y-8">
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <Card className="p-6">
-              <Card className="p-6 lg:col-span-2">
+              <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-                <div className="flex items-center justify-between mb-4">
+                <div>
-                  <div>
+                  <h2 className="text-xl font-semibold">Active plan</h2>
-                    <h2 className="text-xl font-semibold">Choose a plan</h2>
+                  <p className="text-gray-600">Your current subscription allocation</p>
-                    <p className="text-gray-600">Pick the package that fits your team.</p>
-                  </div>
-                  <button
-                    onClick={() => navigate('/account/credits/purchase')}
-                    className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
-                  >
-                    Purchase credits
-                  </button>
                 </div>
-                {creditPackages.length === 0 ? (
+                <div className="text-right">
-                  <div className="text-center text-gray-600 py-10">
+                  <div className="text-sm text-gray-600">Monthly allocation</div>
-                    <FileText className="w-10 h-10 mx-auto mb-3 text-gray-400" />
+                  <div className="text-3xl font-bold text-blue-600">
-                    No packages available yet. Please check back soon.
+                    {creditBalance?.plan_credits_per_month?.toLocaleString() || '—'}
                   </div>
-                ) : (
+                  <div className="text-sm text-gray-500">
-                  <PricingTable
+                    Remaining: {creditBalance?.credits_remaining?.toLocaleString() ?? '—'} credits
-                    variant="1"
+                  </div>
-                    plans={creditPackages.map((pkg) => {
+                </div>
-                      const plan: PricingPlan = {
+              </div>
-                        id: pkg.id,
+            </Card>
-                        name: pkg.name,
-                        price: Number(pkg.price),
-                        period: '/one-time',
-                        description: pkg.description,
-                        features: [
-                          `${pkg.credits.toLocaleString()} credits`,
-                          pkg.discount_percentage > 0 ? `${pkg.discount_percentage}% discount applied` : 'Standard pricing',
-                          'Manual & online payments supported',
-                        ],
-                        highlighted: pkg.is_featured,
-                        buttonText: 'Select',
-                      };
-                      return plan;
-                    })}
-                    onPlanSelect={() => navigate('/account/credits/purchase')}
-                  />
-                )}
-              </Card>
 
-              <Card className="p-6 space-y-3">
+            <Card className="p-6">
-                <h3 className="text-lg font-semibold">Current plan</h3>
+              <div className="flex items-center justify-between mb-6">
-                <div className="flex items-start justify-between">
+                <div>
-                  <div>
+                  <h3 className="text-lg font-semibold">Available plans</h3>
-                    <div className="text-sm text-gray-600">Plan</div>
+                  <p className="text-gray-600">Choose the plan that fits your team (excluding free).</p>
-                    <div className="text-xl font-semibold">
-                      {creditBalance?.plan_credits_per_month ? 'Active Plan' : 'Pay as you go'}
-                    </div>
-                  </div>
-                  <div className="text-right">
-                    <div className="text-sm text-gray-600">Monthly allocation</div>
-                    <div className="text-2xl font-bold text-blue-600">
-                      {creditBalance?.plan_credits_per_month?.toLocaleString() || '—'}
-                    </div>
-                  </div>
                 </div>
-                <div className="border-t pt-3 text-sm text-gray-600">
+              </div>
-                  Remaining this month:{' '}
+              <PricingTable
-                  <span className="font-semibold text-gray-900">
+                variant="2"
-                    {creditBalance?.credits_remaining?.toLocaleString() ?? '—'} credits
+                className="w-full"
-                  </span>
+                plans={planCatalog.filter((plan) => plan.name !== 'Free')}
+                onPlanSelect={() => {}}
+              />
+            </Card>
+
+            <Card className="p-6">
+              <div className="flex items-center justify-between mb-6">
+                <div>
+                  <h3 className="text-lg font-semibold">Credit add-ons</h3>
+                  <p className="text-gray-600">One-time credit bundles to top up your balance.</p>
                 </div>
-                <div className="pt-2">
+              </div>
-                  <Link to="/account/credits/purchase" className="text-blue-600 hover:text-blue-700 text-sm font-medium">
+              {creditPackages.length === 0 ? (
-                    Buy more credits
+                <div className="text-center text-gray-600 py-10">
-                  </Link>
+                  <FileText className="w-10 h-10 mx-auto mb-3 text-gray-400" />
+                  No packages available yet. Please check back soon.
                 </div>
-              </Card>
+              ) : (
-            </div>
+                <PricingTable
+                  variant="1"
+                  className="w-full"
+                  plans={creditPackages.map((pkg) => {
+                    const plan: PricingPlan = {
+                      id: pkg.id,
+                      name: pkg.name,
+                      price: Number(pkg.price),
+                      period: '/one-time',
+                      description: pkg.description,
+                      features: [
+                        `${pkg.credits.toLocaleString()} credits`,
+                        pkg.discount_percentage > 0 ? `${pkg.discount_percentage}% discount applied` : 'Standard pricing',
+                        'Manual & online payments supported',
+                      ],
+                      highlighted: pkg.is_featured,
+                      buttonText: 'Select',
+                    };
+                    return plan;
+                  })}
+                  onPlanSelect={() => navigate('/account/purchase-credits')}
+                />
+              )}
+            </Card>
           </div>
         )}
 
@@ -508,7 +542,7 @@ export default function AccountBillingPage() {
                   <p className="text-sm text-gray-600">Use these options when purchasing credits.</p>
                 </div>
                 <Link
-                  to="/account/credits/purchase"
+                  to="/account/purchase-credits"
                   className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                 >
                   Go to purchase