billing accoutn with all the mess here

frontend/src/App.tsx

@@ -62,10 +62,27 @@ const Usage = lazy(() => import("./pages/Billing/Usage"));
 const CreditsAndBilling = lazy(() => import("./pages/Settings/CreditsAndBilling"));
 const PurchaseCreditsPage = lazy(() => import("./pages/account/PurchaseCreditsPage"));
 const AccountBillingPage = lazy(() => import("./pages/account/AccountBillingPage"));
+const PlansAndBillingPage = lazy(() => import("./pages/account/PlansAndBillingPage"));
+const AccountSettingsPage = lazy(() => import("./pages/account/AccountSettingsPage"));
+const TeamManagementPage = lazy(() => import("./pages/account/TeamManagementPage"));
+const UsageAnalyticsPage = lazy(() => import("./pages/account/UsageAnalyticsPage"));
 
 // Admin Module - Lazy loaded
 const AdminBilling = lazy(() => import("./pages/Admin/AdminBilling"));
 const PaymentApprovalPage = lazy(() => import("./pages/admin/PaymentApprovalPage"));
+const AdminSystemDashboard = lazy(() => import("./pages/admin/AdminSystemDashboard"));
+const AdminAllAccountsPage = lazy(() => import("./pages/admin/AdminAllAccountsPage"));
+const AdminSubscriptionsPage = lazy(() => import("./pages/admin/AdminSubscriptionsPage"));
+const AdminAccountLimitsPage = lazy(() => import("./pages/admin/AdminAccountLimitsPage"));
+const AdminAllInvoicesPage = lazy(() => import("./pages/admin/AdminAllInvoicesPage"));
+const AdminAllPaymentsPage = lazy(() => import("./pages/admin/AdminAllPaymentsPage"));
+const AdminCreditPackagesPage = lazy(() => import("./pages/admin/AdminCreditPackagesPage"));
+const AdminAllUsersPage = lazy(() => import("./pages/admin/AdminAllUsersPage"));
+const AdminRolesPermissionsPage = lazy(() => import("./pages/admin/AdminRolesPermissionsPage"));
+const AdminActivityLogsPage = lazy(() => import("./pages/admin/AdminActivityLogsPage"));
+const AdminSystemSettingsPage = lazy(() => import("./pages/admin/AdminSystemSettingsPage"));
+const AdminSystemHealthPage = lazy(() => import("./pages/admin/AdminSystemHealthPage"));
+const AdminAPIMonitorPage = lazy(() => import("./pages/admin/AdminAPIMonitorPage"));
 
 // Reference Data - Lazy loaded
 const SeedKeywords = lazy(() => import("./pages/Reference/SeedKeywords"));
@@ -76,6 +93,7 @@ const IndustriesSectorsKeywords = lazy(() => import("./pages/Setup/IndustriesSec
 
 // Settings - Lazy loaded
 const GeneralSettings = lazy(() => import("./pages/Settings/General"));
+const ProfileSettingsPage = lazy(() => import("./pages/settings/ProfileSettingsPage"));
 const Users = lazy(() => import("./pages/Settings/Users"));
 const Subscriptions = lazy(() => import("./pages/Settings/Subscriptions"));
 const SystemSettings = lazy(() => import("./pages/Settings/System"));
@@ -355,27 +373,122 @@ export default function App() {
               </Suspense>
             } />
 
-            {/* Account Section - New Billing Pages */}
+            {/* Account Section - Billing & Management Pages */}
             <Route path="/account/billing" element={
               <Suspense fallback={null}>
                   <AccountBillingPage />
               </Suspense>
             } />
-            <Route path="/account/credits/purchase" element={
+            <Route path="/account/purchase-credits" element={
               <Suspense fallback={null}>
                   <PurchaseCreditsPage />
               </Suspense>
-            } />            {/* Admin Routes */}
+            } />
+            <Route path="/account/settings" element={
+              <Suspense fallback={null}>
+                  <AccountSettingsPage />
+              </Suspense>
+            } />
+            <Route path="/account/team" element={
+              <Suspense fallback={null}>
+                  <TeamManagementPage />
+              </Suspense>
+            } />
+            <Route path="/account/usage" element={
+              <Suspense fallback={null}>
+                  <UsageAnalyticsPage />
+              </Suspense>
+            } />
+            
+            {/* Admin Routes */}
+            {/* Admin Dashboard */}
+            <Route path="/admin/dashboard" element={
+              <Suspense fallback={null}>
+                  <AdminSystemDashboard />
+              </Suspense>
+            } />
+            
+            {/* Admin Account Management */}
+            <Route path="/admin/accounts" element={
+              <Suspense fallback={null}>
+                  <AdminAllAccountsPage />
+              </Suspense>
+            } />
+            <Route path="/admin/subscriptions" element={
+              <Suspense fallback={null}>
+                  <AdminSubscriptionsPage />
+              </Suspense>
+            } />
+            <Route path="/admin/account-limits" element={
+              <Suspense fallback={null}>
+                  <AdminAccountLimitsPage />
+              </Suspense>
+            } />
+            
+            {/* Admin Billing Administration */}
             <Route path="/admin/billing" element={
               <Suspense fallback={null}>
                   <AdminBilling />
               </Suspense>
             } />
+            <Route path="/admin/invoices" element={
+              <Suspense fallback={null}>
+                  <AdminAllInvoicesPage />
+              </Suspense>
+            } />
+            <Route path="/admin/payments" element={
+              <Suspense fallback={null}>
+                  <AdminAllPaymentsPage />
+              </Suspense>
+            } />
             <Route path="/admin/payments/approvals" element={
               <Suspense fallback={null}>
                   <PaymentApprovalPage />
               </Suspense>
-            } />            {/* Reference Data */}
+            } />
+            <Route path="/admin/credit-packages" element={
+              <Suspense fallback={null}>
+                  <AdminCreditPackagesPage />
+              </Suspense>
+            } />
+            
+            {/* Admin User Administration */}
+            <Route path="/admin/users" element={
+              <Suspense fallback={null}>
+                  <AdminAllUsersPage />
+              </Suspense>
+            } />
+            <Route path="/admin/roles" element={
+              <Suspense fallback={null}>
+                  <AdminRolesPermissionsPage />
+              </Suspense>
+            } />
+            <Route path="/admin/activity-logs" element={
+              <Suspense fallback={null}>
+                  <AdminActivityLogsPage />
+              </Suspense>
+            } />
+            
+            {/* Admin System Configuration */}
+            <Route path="/admin/settings/system" element={
+              <Suspense fallback={null}>
+                  <AdminSystemSettingsPage />
+              </Suspense>
+            } />
+            
+            {/* Admin Monitoring */}
+            <Route path="/admin/monitoring/health" element={
+              <Suspense fallback={null}>
+                  <AdminSystemHealthPage />
+              </Suspense>
+            } />
+            <Route path="/admin/monitoring/api" element={
+              <Suspense fallback={null}>
+                  <AdminAPIMonitorPage />
+              </Suspense>
+            } />
+            
+            {/* Reference Data */}
             <Route path="/reference/seed-keywords" element={
               <Suspense fallback={null}>
                   <SeedKeywords />
@@ -402,6 +515,11 @@ export default function App() {
             <Route path="/setup/industries-sectors-keywords" element={<Navigate to="/setup/add-keywords" replace />} />
 
             {/* Settings */}
+            <Route path="/settings/profile" element={
+              <Suspense fallback={null}>
+                  <ProfileSettingsPage />
+                </Suspense>
+            } />
             <Route path="/settings" element={
               <Suspense fallback={null}>
                   <GeneralSettings />

frontend/src/components/ui/pricing-table/index.tsx

@@ -0,0 +1,141 @@
+/**
+ * Pricing Table Component
+ * Display subscription plans in a table format
+ */
+
+import { useState } from 'react';
+import { Check } from 'lucide-react';
+import Button from '../button/Button';
+import Badge from '../badge/Badge';
+
+export interface PricingPlan {
+  id: number;
+  name: string;
+  monthlyPrice: number;
+  price: number;
+  period: string;
+  description: string;
+  features: string[];
+  buttonText: string;
+  highlighted?: boolean;
+}
+
+interface PricingTableProps {
+  variant?: '1' | '2';
+  title?: string;
+  plans: PricingPlan[];
+  showToggle?: boolean;
+  onPlanSelect?: (plan: PricingPlan) => void;
+}
+
+export function PricingTable({ variant = '1', title, plans, showToggle = false, onPlanSelect }: PricingTableProps) {
+  const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'annual'>('monthly');
+
+  const getPrice = (plan: PricingPlan) => {
+    if (billingPeriod === 'annual') {
+      return (plan.monthlyPrice * 12 * 0.8).toFixed(0); // 20% discount for annual
+    }
+    return plan.monthlyPrice.toFixed(0);
+  };
+
+  const getPeriod = () => {
+    return billingPeriod === 'annual' ? '/year' : '/month';
+  };
+
+  return (
+    <div className="w-full">
+      {title && (
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-bold text-gray-900 dark:text-white">{title}</h2>
+        </div>
+      )}
+
+      {showToggle && (
+        <div className="flex justify-center mb-8">
+          <div className="inline-flex items-center gap-3 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg">
+            <button
+              onClick={() => setBillingPeriod('monthly')}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+                billingPeriod === 'monthly'
+                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
+                  : 'text-gray-600 dark:text-gray-400'
+              }`}
+            >
+              Monthly
+            </button>
+            <button
+              onClick={() => setBillingPeriod('annual')}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+                billingPeriod === 'annual'
+                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
+                  : 'text-gray-600 dark:text-gray-400'
+              }`}
+            >
+              Annual
+              <Badge className="ml-2 text-xs" color="success">
+                Save 20%
+              </Badge>
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {plans.map((plan) => (
+          <div
+            key={plan.id}
+            className={`relative rounded-lg border ${
+              plan.highlighted
+                ? 'border-primary shadow-lg ring-2 ring-primary ring-opacity-50'
+                : 'border-gray-200 dark:border-gray-700'
+            } bg-white dark:bg-gray-800 p-6 flex flex-col`}
+          >
+            {plan.highlighted && (
+              <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
+                <Badge color="primary" className="px-3 py-1">
+                  Popular
+                </Badge>
+              </div>
+            )}
+
+            <div className="mb-4">
+              <h3 className="text-xl font-bold text-gray-900 dark:text-white">{plan.name}</h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">{plan.description}</p>
+            </div>
+
+            <div className="mb-6">
+              <div className="flex items-baseline gap-1">
+                <span className="text-4xl font-bold text-gray-900 dark:text-white">
+                  ${getPrice(plan)}
+                </span>
+                <span className="text-gray-600 dark:text-gray-400">{getPeriod()}</span>
+              </div>
+              {billingPeriod === 'annual' && plan.monthlyPrice > 0 && (
+                <p className="text-sm text-gray-500 mt-1">
+                  Billed ${(plan.monthlyPrice * 12 * 0.8).toFixed(0)}/year
+                </p>
+              )}
+            </div>
+
+            <ul className="space-y-3 mb-6 flex-grow">
+              {plan.features.map((feature, index) => (
+                <li key={index} className="flex items-start gap-2">
+                  <Check className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span className="text-sm text-gray-700 dark:text-gray-300">{feature}</span>
+                </li>
+              ))}
+            </ul>
+
+            <Button
+              variant={plan.highlighted ? 'primary' : 'outline'}
+              className="w-full"
+              onClick={() => onPlanSelect?.(plan)}
+            >
+              {plan.buttonText}
+            </Button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/layout/AppSidebar.tsx

@@ -15,6 +15,8 @@ import {
   PageIcon,
   DollarLineIcon,
   FileIcon,
+  UserIcon,
+  UserCircleIcon,
 } from "../icons";
 import { useSidebar } from "../context/SidebarContext";
 import SidebarWidget from "./SidebarWidget";
@@ -175,15 +177,25 @@ const AppSidebar: React.FC = () => {
       {
         label: "ACCOUNT",
         items: [
+          {
+            icon: <UserCircleIcon />,
+            name: "Account Settings",
+            path: "/account/settings",
+          },
           {
             icon: <DollarLineIcon />,
             name: "Plans & Billing",
             path: "/account/billing",
           },
           {
-            icon: <DollarLineIcon />,
-            name: "Purchase Credits",
-            path: "/account/credits/purchase",
+            icon: <UserIcon />,
+            name: "Team Management",
+            path: "/account/team",
+          },
+          {
+            icon: <PieChartIcon />,
+            name: "Usage & Analytics",
+            path: "/account/usage",
           },
         ],
       },
@@ -191,16 +203,30 @@ const AppSidebar: React.FC = () => {
         label: "SETTINGS",
         items: [
           {
-            icon: <PlugInIcon />,
-            name: "Settings",
-            subItems: [
-              { name: "General", path: "/settings" },
-              { name: "Plans", path: "/settings/plans" },
-              { name: "Integration", path: "/settings/integration" },
-              { name: "Publishing", path: "/settings/publishing" },
-              { name: "Import / Export", path: "/settings/import-export" },
-            ],
+            icon: <UserCircleIcon />,
+            name: "Profile Settings",
+            path: "/settings/profile",
           },
+          {
+            icon: <PlugInIcon />,
+            name: "Integration",
+            path: "/settings/integration",
+          },
+          {
+            icon: <PageIcon />,
+            name: "Publishing",
+            path: "/settings/publishing",
+          },
+          {
+            icon: <FileIcon />,
+            name: "Import / Export",
+            path: "/settings/import-export",
+          },
+        ],
+      },
+      {
+        label: "HELP & DOCS",
+        items: [
           {
             icon: <DocsIcon />,
             name: "Help & Documentation",
@@ -215,84 +241,66 @@ const AppSidebar: React.FC = () => {
   const adminSection: MenuSection = useMemo(() => ({
     label: "ADMIN",
     items: [
+      {
+        icon: <GridIcon />,
+        name: "System Dashboard",
+        path: "/admin/dashboard",
+      },
+      {
+        icon: <UserIcon />,
+        name: "Account Management",
+        subItems: [
+          { name: "All Accounts", path: "/admin/accounts" },
+          { name: "Subscriptions", path: "/admin/subscriptions" },
+          { name: "Account Limits", path: "/admin/account-limits" },
+        ],
+      },
       {
         icon: <DollarLineIcon />,
-        name: "Billing & Credits",
+        name: "Billing Administration",
         subItems: [
-          { name: "Billing Management", path: "/admin/billing" },
-          { name: "Payment Approvals", path: "/admin/payments/approvals" },
-          { name: "Credit Costs", path: "/admin/credit-costs" },
+          { name: "Billing Overview", path: "/admin/billing" },
+          { name: "Invoices", path: "/admin/invoices" },
+          { name: "Payments", path: "/admin/payments" },
+          { name: "Credit Costs Config", path: "/admin/credit-costs" },
+          { name: "Credit Packages", path: "/admin/credit-packages" },
+        ],
+      },
+      {
+        icon: <UserCircleIcon />,
+        name: "User Administration",
+        subItems: [
+          { name: "All Users", path: "/admin/users" },
+          { name: "Roles & Permissions", path: "/admin/roles" },
+          { name: "Activity Logs", path: "/admin/activity-logs" },
         ],
       },
       {
         icon: <PlugInIcon />,
-        name: "User Management",
+        name: "System Configuration",
         subItems: [
-          { name: "Users", path: "/settings/users" },
-          { name: "Subscriptions", path: "/settings/subscriptions" },
-        ],
-      },
-      {
-        icon: <PlugInIcon />,
-        name: "Configuration",
-        subItems: [
-          { name: "System Settings", path: "/settings/system" },
-          { name: "Account Settings", path: "/settings/account" },
-          { name: "Module Settings", path: "/settings/modules" },
-        ],
-      },
-      {
-        icon: <BoltIcon />,
-        name: "AI Controls",
-        subItems: [
-          { name: "AI Settings", path: "/settings/ai" },
+          { name: "System Settings", path: "/admin/system-settings" },
+          { name: "AI Settings", path: "/admin/ai-settings" },
+          { name: "Module Settings", path: "/admin/module-settings" },
+          { name: "Integration Settings", path: "/admin/integration-settings" },
         ],
       },
       {
         icon: <PieChartIcon />,
-        name: "System Health",
+        name: "Monitoring",
         subItems: [
-          { name: "Status", path: "/settings/status" },
-          { name: "API Monitor", path: "/settings/api-monitor" },
-          { name: "Debug Status", path: "/settings/debug-status" },
+          { name: "System Health", path: "/admin/health" },
+          { name: "API Monitor", path: "/admin/api-monitor" },
+          { name: "Usage Analytics", path: "/admin/analytics" },
         ],
       },
       {
-        icon: <DocsIcon />,
-        name: "Testing Tools",
+        icon: <BoltIcon />,
+        name: "Developer Tools",
         subItems: [
-          { name: "Function Testing", path: "/help/function-testing" },
-          { name: "System Testing", path: "/help/system-testing" },
-        ],
-      },
-      {
-        icon: <PageIcon />,
-        name: "UI Elements",
-        subItems: [
-          { name: "Alerts", path: "/ui-elements/alerts" },
-          { name: "Avatar", path: "/ui-elements/avatars" },
-          { name: "Badge", path: "/ui-elements/badges" },
-          { name: "Breadcrumb", path: "/ui-elements/breadcrumb" },
-          { name: "Buttons", path: "/ui-elements/buttons" },
-          { name: "Buttons Group", path: "/ui-elements/buttons-group" },
-          { name: "Cards", path: "/ui-elements/cards" },
-          { name: "Carousel", path: "/ui-elements/carousel" },
-          { name: "Dropdowns", path: "/ui-elements/dropdowns" },
-          { name: "Images", path: "/ui-elements/images" },
-          { name: "Links", path: "/ui-elements/links" },
-          { name: "List", path: "/ui-elements/list" },
-          { name: "Modals", path: "/ui-elements/modals" },
-          { name: "Notification", path: "/ui-elements/notifications" },
-          { name: "Pagination", path: "/ui-elements/pagination" },
-          { name: "Popovers", path: "/ui-elements/popovers" },
-          { name: "Pricing Table", path: "/ui-elements/pricing-table" },
-          { name: "Progressbar", path: "/ui-elements/progressbar" },
-          { name: "Ribbons", path: "/ui-elements/ribbons" },
-          { name: "Spinners", path: "/ui-elements/spinners" },
-          { name: "Tabs", path: "/ui-elements/tabs" },
-          { name: "Tooltips", path: "/ui-elements/tooltips" },
-          { name: "Videos", path: "/ui-elements/videos" },
-          { name: "Components", path: "/components" },
+          { name: "Function Testing", path: "/admin/function-testing" },
+          { name: "System Testing", path: "/admin/system-testing" },
+          { name: "UI Elements", path: "/admin/ui-elements" },
         ],
       },
     ],

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>
-  );
-}

frontend/src/pages/Settings/CreditsAndBilling.tsx

@@ -3,11 +3,12 @@
  * User-facing credits usage, transactions, and billing information
  */
 import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import PageMeta from '../../components/common/PageMeta';
 import ComponentCard from '../../components/common/ComponentCard';
 import EnhancedMetricCard from '../../components/dashboard/EnhancedMetricCard';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { fetchAPI } from '../../services/api';
+import { getCreditBalance, getCreditTransactions, CreditBalance, CreditTransaction } from '../../services/billing.api';
 import Button from '../../components/ui/button/Button';
 import Badge from '../../components/ui/badge/Badge';
 import { 
@@ -17,38 +18,12 @@ import {
   CheckCircleIcon 
 } from '../../icons';
 
-interface CreditTransaction {
-  id: number;
-  transaction_type: string;
-  amount: number;
-  balance_after: number;
-  description: string;
-  created_at: string;
-}
-
-interface CreditUsageLog {
-  id: number;
-  operation_type: string;
-  credits_used: number;
-  model_used: string;
-  created_at: string;
-  metadata: any;
-}
-
-interface AccountBalance {
-  credits: number;
-  subscription_plan: string;
-  monthly_credits_included: number;
-  bonus_credits: number;
-}
-
 const CreditsAndBilling: React.FC = () => {
   const toast = useToast();
-  const [balance, setBalance] = useState<AccountBalance | null>(null);
+  const [balance, setBalance] = useState<CreditBalance | null>(null);
   const [transactions, setTransactions] = useState<CreditTransaction[]>([]);
-  const [usageLogs, setUsageLogs] = useState<CreditUsageLog[]>([]);
   const [loading, setLoading] = useState(true);
-  const [activeTab, setActiveTab] = useState<'overview' | 'transactions' | 'usage'>('overview');
+  const [activeTab, setActiveTab] = useState<'overview' | 'transactions'>('overview');
 
   useEffect(() => {
     loadData();
@@ -57,15 +32,13 @@ const CreditsAndBilling: React.FC = () => {
   const loadData = async () => {
     try {
       setLoading(true);
-      const [balanceData, transactionsData, usageData] = await Promise.all([
-        fetchAPI('/v1/billing/account_balance/'),
-        fetchAPI('/v1/billing/transactions/?limit=50'),
-        fetchAPI('/v1/billing/usage/?limit=50'),
+      const [balanceData, transactionsData] = await Promise.all([
+        getCreditBalance(),
+        getCreditTransactions(),
       ]);
       
       setBalance(balanceData);
       setTransactions(transactionsData.results || []);
-      setUsageLogs(usageData.results || []);
     } catch (error: any) {
       toast?.error(error?.message || 'Failed to load billing data');
     } finally {
@@ -78,6 +51,7 @@ const CreditsAndBilling: React.FC = () => {
       case 'purchase': return 'success';
       case 'grant': return 'info';
       case 'deduction': return 'warning';
+      case 'usage': return 'error';
       case 'refund': return 'primary';
       case 'adjustment': return 'secondary';
       default: return 'default';
@@ -113,42 +87,38 @@ const CreditsAndBilling: React.FC = () => {
             Manage your credits, view transactions, and monitor usage
           </p>
         </div>
-        <Button
-          variant="primary"
-          startIcon={<DollarLineIcon className="w-4 h-4" />}
-          onClick={() => {
-            // TODO: Link to purchase credits page
-            toast?.info('Purchase credits feature coming soon');
-          }}
-        >
-          Purchase Credits
-        </Button>
+        <Link to="/account/purchase-credits">
+          <Button variant="primary">
+            Purchase Credits
+          </Button>
+        </Link>
       </div>
 
       {/* Credit Balance Cards */}
       <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
         <EnhancedMetricCard
           title="Current Balance"
-          value={balance?.credits || 0}
+          value={balance?.balance || 0}
           icon={<BoltIcon />}
           accentColor="orange"
         />
         <EnhancedMetricCard
-          title="Monthly Included"
-          value={balance?.monthly_credits_included || 0}
-          subtitle={balance?.subscription_plan || 'Free'}
+          title="Monthly Credits"
+          value={balance?.monthly_credits || 0}
+          subtitle={balance?.subscription_plan || 'No plan'}
           icon={<CheckCircleIcon />}
           accentColor="green"
         />
         <EnhancedMetricCard
-          title="Bonus Credits"
-          value={balance?.bonus_credits || 0}
+          title="Subscription"
+          value={balance?.subscription_plan || 'None'}
+          subtitle={balance?.subscription_status || 'Inactive'}
           icon={<DollarLineIcon />}
           accentColor="blue"
         />
         <EnhancedMetricCard
-          title="Total This Month"
-          value={usageLogs.reduce((sum, log) => sum + log.credits_used, 0)}
+          title="Total Transactions"
+          value={transactions.length}
           icon={<TimeIcon />}
           accentColor="purple"
         />
@@ -177,31 +147,21 @@ const CreditsAndBilling: React.FC = () => {
           >
             Transactions ({transactions.length})
           </button>
-          <button
-            onClick={() => setActiveTab('usage')}
-            className={`py-4 px-1 border-b-2 font-medium text-sm ${
-              activeTab === 'usage'
-                ? 'border-primary-500 text-primary-600 dark:text-primary-400'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
-            }`}
-          >
-            Usage History ({usageLogs.length})
-          </button>
         </nav>
       </div>
 
       {/* Tab Content */}
       {activeTab === 'overview' && (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
           {/* Recent Transactions */}
           <ComponentCard title="Recent Transactions">
             <div className="space-y-3">
-              {transactions.slice(0, 5).map((transaction) => (
+              {transactions.slice(0, 10).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}>
-                        {transaction.transaction_type}
+                        {formatOperationType(transaction.transaction_type)}
                       </Badge>
                       <span className="text-sm text-gray-900 dark:text-white">
                         {transaction.description}
@@ -209,15 +169,13 @@ const CreditsAndBilling: React.FC = () => {
                     </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 className="text-xs text-gray-500">
-                      Balance: {transaction.balance_after}
-                    </div>
                   </div>
                 </div>
               ))}
@@ -228,34 +186,6 @@ const CreditsAndBilling: React.FC = () => {
               )}
             </div>
           </ComponentCard>
-
-          {/* Recent Usage */}
-          <ComponentCard title="Recent Usage">
-            <div className="space-y-3">
-              {usageLogs.slice(0, 5).map((log) => (
-                <div key={log.id} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
-                  <div className="flex-1">
-                    <div className="text-sm font-medium text-gray-900 dark:text-white">
-                      {formatOperationType(log.operation_type)}
-                    </div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      {log.model_used} • {new Date(log.created_at).toLocaleString()}
-                    </div>
-                  </div>
-                  <div className="text-right">
-                    <div className="font-bold text-amber-600 dark:text-amber-400">
-                      {log.credits_used} credits
-                    </div>
-                  </div>
-                </div>
-              ))}
-              {usageLogs.length === 0 && (
-                <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-                  No usage history yet
-                </div>
-              )}
-            </div>
-          </ComponentCard>
         </div>
       )}
 
@@ -274,11 +204,11 @@ const CreditsAndBilling: React.FC = () => {
                   <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                     Description
                   </th>
-                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                    Amount
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Reference
                   </th>
                   <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                    Balance
+                    Amount
                   </th>
                 </tr>
               </thead>
@@ -290,63 +220,20 @@ const CreditsAndBilling: React.FC = () => {
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap">
                       <Badge tone={getTransactionTypeColor(transaction.transaction_type) as any}>
-                        {transaction.transaction_type}
+                        {formatOperationType(transaction.transaction_type)}
                       </Badge>
                     </td>
                     <td className="px-6 py-4 text-sm text-gray-900 dark:text-white">
                       {transaction.description}
                     </td>
+                    <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
+                      {transaction.reference_id || '-'}
+                    </td>
                     <td className={`px-6 py-4 whitespace-nowrap text-sm text-right font-bold ${
                       transaction.amount > 0 ? 'text-green-600' : 'text-red-600'
                     }`}>
                       {transaction.amount > 0 ? '+' : ''}{transaction.amount}
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white text-right">
-                      {transaction.balance_after}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </ComponentCard>
-      )}
-
-      {activeTab === 'usage' && (
-        <ComponentCard title="Usage History">
-          <div className="overflow-x-auto">
-            <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead className="bg-gray-50 dark:bg-gray-800">
-                <tr>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                    Date
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                    Operation
-                  </th>
-                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                    Model
-                  </th>
-                  <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                    Credits
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
-                {usageLogs.map((log) => (
-                  <tr key={log.id}>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
-                      {new Date(log.created_at).toLocaleString()}
-                    </td>
-                    <td className="px-6 py-4 text-sm text-gray-900 dark:text-white">
-                      {formatOperationType(log.operation_type)}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
-                      {log.model_used || 'N/A'}
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-right font-bold text-amber-600 dark:text-amber-400">
-                      {log.credits_used}
-                    </td>
                   </tr>
                 ))}
               </tbody>

frontend/src/pages/account/AccountBillingPage.tsx

@@ -14,6 +14,8 @@ import {
   CheckCircle,
   XCircle,
   Clock,
+  DollarSign,
+  TrendingUp,
 } from 'lucide-react';
 import {
   getInvoices,
@@ -24,6 +26,7 @@ import {
   type Payment,
   type CreditBalance,
 } from '../../services/billing.api';
+import { Card } from '../../components/ui/card';
 
 type TabType = 'overview' | 'invoices' | 'payments';
 
@@ -53,6 +56,7 @@ export default function AccountBillingPage() {
       setPayments(paymentsRes.results);
     } catch (err: any) {
       setError(err.message || 'Failed to load billing data');
+      console.error('Billing data load error:', err);
     } finally {
       setLoading(false);
     }
@@ -153,65 +157,81 @@ export default function AccountBillingPage() {
         {/* Overview Tab */}
         {activeTab === 'overview' && creditBalance && (
           <div className="space-y-6">
-            {/* Credit Balance Card */}
-            <div className="bg-gradient-to-r from-blue-600 to-blue-700 rounded-lg shadow-lg p-6 text-white">
-              <div className="flex items-center justify-between">
-                <div>
-                  <div className="text-sm opacity-90 mb-1">Current Balance</div>
-                  <div className="text-4xl font-bold">
-                    {creditBalance.balance.toLocaleString()}
-                  </div>
-                  <div className="text-sm opacity-90">credits</div>
+            {/* Stats Cards */}
+            <div className="grid grid-cols-1 md: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>
+                  <CreditCard className="w-5 h-5 text-blue-600" />
                 </div>
-                <CreditCard className="w-16 h-16 opacity-20" />
-              </div>
+                <div className="text-3xl font-bold text-gray-900 dark:text-white">
+                  {creditBalance?.credits?.toLocaleString() || '0'}
+                </div>
+                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">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>
+                  <TrendingUp className="w-5 h-5 text-green-600" />
+                </div>
+                <div className="text-3xl font-bold text-gray-900 dark:text-white">
+                  {creditBalance?.plan_credits_per_month?.toLocaleString() || '0'}
+                </div>
+                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Credits per month</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>
+                  <DollarSign className="w-5 h-5 text-red-600" />
+                </div>
+                <div className="text-3xl font-bold text-red-600 dark:text-red-400">
+                  {creditBalance?.credits_used_this_month?.toLocaleString() || '0'}
+                </div>
+                <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Credits consumed</p>
+              </Card>
             </div>
 
-            {/* Plan Info */}
+            {/* Quick Actions */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div className="bg-white rounded-lg shadow p-6">
-                <h3 className="text-lg font-semibold mb-4">Current Plan</h3>
-                <div className="space-y-3">
-                  <div className="flex justify-between">
-                    <span className="text-gray-600">Plan:</span>
-                    <span className="font-semibold">{creditBalance.subscription_plan}</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-600">Monthly Credits:</span>
-                    <span className="font-semibold">
-                      {creditBalance.monthly_credits.toLocaleString()}
-                    </span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-600">Status:</span>
-                    <span>
-                      {getStatusBadge(creditBalance.subscription_status || 'active')}
-                    </span>
-                  </div>
+              <Card className="p-6">
+                <h3 className="text-lg font-semibold mb-4">Quick Actions</h3>
+                <div className="space-y-2">
+                  <Link
+                    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
+                  </Link>
+                  <Link
+                    to="/account/usage"
+                    className="block w-full bg-gray-100 text-gray-700 text-center py-2 px-4 rounded hover:bg-gray-200 transition-colors"
+                  >
+                    View Usage Analytics
+                  </Link>
                 </div>
-              </div>
+              </Card>
 
-              <div className="bg-white rounded-lg shadow p-6">
-                <h3 className="text-lg font-semibold mb-4">Recent Activity</h3>
+              <Card className="p-6">
+                <h3 className="text-lg font-semibold mb-4">Account Summary</h3>
                 <div className="space-y-3">
-                  <div className="text-sm">
-                    <div className="text-gray-600">Total Invoices:</div>
-                    <div className="text-2xl font-bold">{invoices.length}</div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Remaining Credits:</span>
+                    <span className="font-semibold">{creditBalance?.credits_remaining?.toLocaleString() || '0'}</span>
                   </div>
-                  <div className="text-sm">
-                    <div className="text-gray-600">Paid Invoices:</div>
-                    <div className="text-2xl font-bold text-green-600">
-                      {invoices.filter((i) => i.status === 'paid').length}
-                    </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Total Invoices:</span>
+                    <span className="font-semibold">{invoices.length}</span>
                   </div>
-                  <div className="text-sm">
-                    <div className="text-gray-600">Pending Payments:</div>
-                    <div className="text-2xl font-bold text-yellow-600">
-                      {payments.filter((p) => p.status === 'pending_approval').length}
-                    </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600">Paid Invoices:</span>
+                    <span className="font-semibold text-green-600">
+                      {invoices.filter(inv => inv.status === 'paid').length}
+                    </span>
                   </div>
                 </div>
-              </div>
+              </Card>
             </div>
           </div>
         )}

frontend/src/pages/account/AccountSettingsPage.tsx

@@ -0,0 +1,282 @@
+/**
+ * Account Settings Page
+ * Manage account information and billing address
+ */
+
+import { useState, useEffect } from 'react';
+import { Save, Loader2 } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+import {
+  getAccountSettings,
+  updateAccountSettings,
+  type AccountSettings,
+} from '../../services/billing.api';
+
+export default function AccountSettingsPage() {
+  const [settings, setSettings] = useState<AccountSettings | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string>('');
+  const [success, setSuccess] = useState<string>('');
+
+  const [formData, setFormData] = useState({
+    name: '',
+    billing_address_line1: '',
+    billing_address_line2: '',
+    billing_city: '',
+    billing_state: '',
+    billing_postal_code: '',
+    billing_country: '',
+    tax_id: '',
+    billing_email: '',
+  });
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const loadSettings = async () => {
+    try {
+      setLoading(true);
+      const data = await getAccountSettings();
+      setSettings(data);
+      setFormData({
+        name: data.name || '',
+        billing_address_line1: data.billing_address_line1 || '',
+        billing_address_line2: data.billing_address_line2 || '',
+        billing_city: data.billing_city || '',
+        billing_state: data.billing_state || '',
+        billing_postal_code: data.billing_postal_code || '',
+        billing_country: data.billing_country || '',
+        tax_id: data.tax_id || '',
+        billing_email: data.billing_email || '',
+      });
+    } catch (err: any) {
+      setError(err.message || 'Failed to load account settings');
+      console.error('Account settings load error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      setSaving(true);
+      setError('');
+      setSuccess('');
+      
+      await updateAccountSettings(formData);
+      setSuccess('Account settings updated successfully');
+      await loadSettings();
+    } catch (err: any) {
+      setError(err.message || 'Failed to update account settings');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData(prev => ({
+      ...prev,
+      [e.target.name]: e.target.value
+    }));
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Account Settings</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          Manage your account information and billing details
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+          <p className="text-red-800 dark:text-red-200">{error}</p>
+        </div>
+      )}
+
+      {success && (
+        <div className="mb-6 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+          <p className="text-green-800 dark:text-green-200">{success}</p>
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Account Information */}
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4">Account Information</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Account Name
+              </label>
+              <input
+                type="text"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+                required
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Account Slug
+              </label>
+              <input
+                type="text"
+                value={settings?.slug || ''}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-700"
+                disabled
+              />
+            </div>
+          </div>
+          <div className="mt-4">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Billing Email
+            </label>
+            <input
+              type="email"
+              name="billing_email"
+              value={formData.billing_email}
+              onChange={handleChange}
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+            />
+          </div>
+        </Card>
+
+        {/* Billing Address */}
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4">Billing Address</h2>
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Address Line 1
+              </label>
+              <input
+                type="text"
+                name="billing_address_line1"
+                value={formData.billing_address_line1}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Address Line 2
+              </label>
+              <input
+                type="text"
+                name="billing_address_line2"
+                value={formData.billing_address_line2}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  City
+                </label>
+                <input
+                  type="text"
+                  name="billing_city"
+                  value={formData.billing_city}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  State/Province
+                </label>
+                <input
+                  type="text"
+                  name="billing_state"
+                  value={formData.billing_state}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Postal Code
+                </label>
+                <input
+                  type="text"
+                  name="billing_postal_code"
+                  value={formData.billing_postal_code}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+                />
+              </div>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Country
+              </label>
+              <input
+                type="text"
+                name="billing_country"
+                value={formData.billing_country}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+                placeholder="US, GB, IN, etc."
+              />
+            </div>
+          </div>
+        </Card>
+
+        {/* Tax Information */}
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4">Tax Information</h2>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Tax ID / VAT Number
+            </label>
+            <input
+              type="text"
+              name="tax_id"
+              value={formData.tax_id}
+              onChange={handleChange}
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              placeholder="Optional"
+            />
+          </div>
+        </Card>
+
+        {/* Submit Button */}
+        <div className="flex justify-end">
+          <button
+            type="submit"
+            disabled={saving}
+            className="flex items-center gap-2 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {saving ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              <>
+                <Save className="w-4 h-4" />
+                Save Changes
+              </>
+            )}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

frontend/src/pages/account/AccountSettingsPage.tsx.old

@@ -0,0 +1,264 @@
+import { useState, useEffect } from 'react';
+import PageMeta from '../../components/common/PageMeta';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { getAccountSettings, updateAccountSettings, AccountSettings } from '../../services/billing.api';
+import { Card } from '../../components/ui/card';
+import Button from '../../components/ui/button/Button';
+
+export default function AccountSettingsPage() {
+  const toast = useToast();
+  const [settings, setSettings] = useState<AccountSettings | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [formData, setFormData] = useState<Partial<AccountSettings>>({});
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const loadSettings = async () => {
+    try {
+      setLoading(true);
+      const data = await getAccountSettings();
+      setSettings(data);
+      setFormData(data);
+    } catch (error: any) {
+      toast.error(`Failed to load account settings: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (field: keyof AccountSettings, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  const handleSave = async () => {
+    try {
+      setSaving(true);
+      const result = await updateAccountSettings(formData);
+      toast.success(result.message || 'Settings updated successfully');
+      await loadSettings();
+    } catch (error: any) {
+      toast.error(`Failed to update settings: ${error.message}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <PageMeta title="Account Settings" description="Manage your account settings" />
+        <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="Account Settings" description="Manage your account settings" />
+      
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Account Settings</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          Manage your account information and billing details
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Account Info */}
+        <Card className="p-6 lg:col-span-2">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            Account Information
+          </h2>
+          
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Account Name
+              </label>
+              <input
+                type="text"
+                value={formData.name || ''}
+                onChange={(e) => handleChange('name', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Account Slug
+              </label>
+              <input
+                type="text"
+                value={settings?.slug || ''}
+                disabled
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400"
+              />
+              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                Account slug cannot be changed
+              </p>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Billing Email
+              </label>
+              <input
+                type="email"
+                value={formData.billing_email || ''}
+                onChange={(e) => handleChange('billing_email', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Tax ID
+              </label>
+              <input
+                type="text"
+                value={formData.tax_id || ''}
+                onChange={(e) => handleChange('tax_id', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                placeholder="VAT/GST number"
+              />
+            </div>
+          </div>
+
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-4">
+            Billing Address
+          </h2>
+
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Address Line 1
+              </label>
+              <input
+                type="text"
+                value={formData.billing_address_line1 || ''}
+                onChange={(e) => handleChange('billing_address_line1', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Address Line 2
+              </label>
+              <input
+                type="text"
+                value={formData.billing_address_line2 || ''}
+                onChange={(e) => handleChange('billing_address_line2', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  City
+                </label>
+                <input
+                  type="text"
+                  value={formData.billing_city || ''}
+                  onChange={(e) => handleChange('billing_city', e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  State/Province
+                </label>
+                <input
+                  type="text"
+                  value={formData.billing_state || ''}
+                  onChange={(e) => handleChange('billing_state', e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Postal Code
+                </label>
+                <input
+                  type="text"
+                  value={formData.billing_postal_code || ''}
+                  onChange={(e) => handleChange('billing_postal_code', e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Country
+                </label>
+                <input
+                  type="text"
+                  value={formData.billing_country || ''}
+                  onChange={(e) => handleChange('billing_country', e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-6 flex justify-end gap-3">
+            <Button
+              variant="secondary"
+              onClick={loadSettings}
+              disabled={saving}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              onClick={handleSave}
+              disabled={saving}
+            >
+              {saving ? 'Saving...' : 'Save Changes'}
+            </Button>
+          </div>
+        </Card>
+
+        {/* Account Summary */}
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+            Account Summary
+          </h2>
+          
+          <div className="space-y-4">
+            <div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">Credit Balance</div>
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                {settings?.credit_balance.toLocaleString() || 0}
+              </div>
+            </div>
+
+            <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
+              <div className="text-sm text-gray-600 dark:text-gray-400">Account Created</div>
+              <div className="text-sm text-gray-900 dark:text-white">
+                {settings?.created_at ? new Date(settings.created_at).toLocaleDateString() : '-'}
+              </div>
+            </div>
+
+            <div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">Last Updated</div>
+              <div className="text-sm text-gray-900 dark:text-white">
+                {settings?.updated_at ? new Date(settings.updated_at).toLocaleDateString() : '-'}
+              </div>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/account/PlansAndBillingPage.tsx

@@ -0,0 +1,523 @@
+/**
+ * Plans & Billing Page - Consolidated
+ * Tabs: Current Plan, Upgrade/Downgrade, Credits Overview, Purchase Credits, Billing History, Payment Methods
+ */
+
+import { useState, useEffect } from 'react';
+import { 
+  CreditCard, Package, TrendingUp, FileText, Wallet, ArrowUpCircle,
+  Loader2, AlertCircle, CheckCircle, Download 
+} from 'lucide-react';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+import Button from '../../components/ui/button/Button';
+import {
+  getCreditBalance,
+  getCreditPackages,
+  getInvoices,
+  getAvailablePaymentMethods,
+  purchaseCreditPackage,
+  type CreditBalance,
+  type CreditPackage,
+  type Invoice,
+  type PaymentMethod,
+} from '../../services/billing.api';
+
+type TabType = 'plan' | 'upgrade' | 'credits' | 'purchase' | 'invoices' | 'payment-methods';
+
+export default function PlansAndBillingPage() {
+  const [activeTab, setActiveTab] = useState<TabType>('plan');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string>('');
+
+  // Data states
+  const [creditBalance, setCreditBalance] = useState<CreditBalance | null>(null);
+  const [packages, setPackages] = useState<CreditPackage[]>([]);
+  const [invoices, setInvoices] = useState<Invoice[]>([]);
+  const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]);
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    try {
+      setLoading(true);
+      const [balanceData, packagesData, invoicesData, methodsData] = await Promise.all([
+        getCreditBalance(),
+        getCreditPackages(),
+        getInvoices({}),
+        getAvailablePaymentMethods(),
+      ]);
+
+      setCreditBalance(balanceData);
+      setPackages(packagesData.results || []);
+      setInvoices(invoicesData.results || []);
+      setPaymentMethods(methodsData.results || []);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load billing data');
+      console.error('Billing load error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePurchase = async (packageId: number) => {
+    try {
+      await purchaseCreditPackage({
+        package_id: packageId,
+        payment_method: 'stripe',
+      });
+      await loadData();
+    } catch (err: any) {
+      setError(err.message || 'Failed to purchase credits');
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  const tabs = [
+    { id: 'plan' as TabType, label: 'Current Plan', icon: <Package className="w-4 h-4" /> },
+    { id: 'upgrade' as TabType, label: 'Upgrade/Downgrade', icon: <ArrowUpCircle 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: <CreditCard className="w-4 h-4" /> },
+    { id: 'invoices' as TabType, label: 'Billing History', icon: <FileText className="w-4 h-4" /> },
+    { id: 'payment-methods' as TabType, label: 'Payment Methods', icon: <Wallet className="w-4 h-4" /> },
+  ];
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Plans & Billing</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          Manage your subscription, credits, and billing information
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
+          <AlertCircle className="w-5 h-5 text-red-600" />
+          <p className="text-red-800 dark:text-red-200">{error}</p>
+        </div>
+      )}
+
+      {/* Tabs */}
+      <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
+        <nav className="-mb-px flex space-x-8 overflow-x-auto">
+          {tabs.map((tab) => (
+            <button
+              type="button"
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              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-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
+                }
+              `}
+            >
+              {tab.icon}
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* Tab Content */}
+      <div className="mt-6">
+        {/* Current Plan Tab */}
+        {activeTab === 'plan' && (
+          <div className="space-y-6">
+            <Card className="p-6">
+              <h2 className="text-lg font-semibold mb-4">Your Current Plan</h2>
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="text-2xl font-bold text-gray-900 dark:text-white">Free Plan</div>
+                    <div className="text-gray-600 dark:text-gray-400">Perfect for getting started</div>
+                  </div>
+                  <Badge variant="light" color="success">Active</Badge>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+                  <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <div className="text-sm text-gray-600 dark:text-gray-400">Monthly Credits</div>
+                    <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                      {creditBalance?.plan_credits_per_month.toLocaleString() || 0}
+                    </div>
+                  </div>
+                  <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <div className="text-sm text-gray-600 dark:text-gray-400">Sites Allowed</div>
+                    <div className="text-2xl font-bold text-gray-900 dark:text-white">1</div>
+                  </div>
+                  <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <div className="text-sm text-gray-600 dark:text-gray-400">Team Members</div>
+                    <div className="text-2xl font-bold text-gray-900 dark:text-white">1</div>
+                  </div>
+                </div>
+                <div className="mt-6 flex gap-3">
+                  <Button variant="primary" tone="brand">
+                    Upgrade Plan
+                  </Button>
+                  <Button variant="outline" tone="neutral">
+                    Compare Plans
+                  </Button>
+                </div>
+              </div>
+            </Card>
+
+            <Card className="p-6">
+              <h2 className="text-lg font-semibold mb-4">Plan Features</h2>
+              <ul className="space-y-3">
+                {['Basic AI Tools', 'Content Generation', 'Keyword Research', 'Email Support'].map((feature) => (
+                  <li key={feature} className="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+                    <CheckCircle className="w-5 h-5 text-green-600" />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+            </Card>
+          </div>
+        )}
+
+        {/* Upgrade/Downgrade Tab */}
+        {activeTab === 'upgrade' && (
+          <div className="space-y-6">
+            <div className="mb-4">
+              <h2 className="text-xl font-semibold mb-2">Available Plans</h2>
+              <p className="text-gray-600 dark:text-gray-400">Choose the plan that best fits your needs</p>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {/* Free Plan */}
+              <Card className="p-6 relative">
+                <div className="mb-4">
+                  <h3 className="text-lg font-semibold">Free</h3>
+                  <div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">$0</div>
+                  <div className="text-sm text-gray-500">/month</div>
+                </div>
+                <div className="space-y-3 mb-6">
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>100 credits/month</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>1 site</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>1 user</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>Basic features</span>
+                  </div>
+                </div>
+                <Badge variant="light" color="success" className="absolute top-4 right-4">Current</Badge>
+              </Card>
+
+              {/* Starter Plan */}
+              <Card className="p-6 border-2 border-blue-500">
+                <Badge variant="light" color="primary" className="absolute top-4 right-4">Popular</Badge>
+                <div className="mb-4">
+                  <h3 className="text-lg font-semibold">Starter</h3>
+                  <div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">$29</div>
+                  <div className="text-sm text-gray-500">/month</div>
+                </div>
+                <div className="space-y-3 mb-6">
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>1,000 credits/month</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>3 sites</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>2 users</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>Full AI suite</span>
+                  </div>
+                </div>
+                <Button variant="primary" tone="brand" fullWidth>
+                  Upgrade to Starter
+                </Button>
+              </Card>
+
+              {/* Professional Plan */}
+              <Card className="p-6">
+                <div className="mb-4">
+                  <h3 className="text-lg font-semibold">Professional</h3>
+                  <div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">$99</div>
+                  <div className="text-sm text-gray-500">/month</div>
+                </div>
+                <div className="space-y-3 mb-6">
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>5,000 credits/month</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>10 sites</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>5 users</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>Priority support</span>
+                  </div>
+                </div>
+                <Button variant="outline" tone="neutral" fullWidth>
+                  Upgrade to Pro
+                </Button>
+              </Card>
+
+              {/* Enterprise Plan */}
+              <Card className="p-6">
+                <div className="mb-4">
+                  <h3 className="text-lg font-semibold">Enterprise</h3>
+                  <div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">$299</div>
+                  <div className="text-sm text-gray-500">/month</div>
+                </div>
+                <div className="space-y-3 mb-6">
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>20,000 credits/month</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>Unlimited sites</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>20 users</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <CheckCircle className="w-4 h-4 text-green-600" />
+                    <span>Dedicated support</span>
+                  </div>
+                </div>
+                <Button variant="outline" tone="neutral" fullWidth>
+                  Upgrade to Enterprise
+                </Button>
+              </Card>
+            </div>
+
+            <Card className="p-6 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
+              <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">
+                <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>
+                <li>• You can cancel your subscription at any time</li>
+              </ul>
+            </Card>
+          </div>
+        )}
+
+        {/* Credits Overview Tab */}
+        {activeTab === 'credits' && (
+          <div className="space-y-6">
+            <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">
+                  {creditBalance?.credits.toLocaleString() || 0}
+                </div>
+                <div className="text-sm text-gray-500 mt-2">credits available</div>
+              </Card>
+              <Card className="p-6">
+                <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Used This Month</div>
+                <div className="text-3xl font-bold text-red-600 dark:text-red-400">
+                  {creditBalance?.credits_used_this_month.toLocaleString() || 0}
+                </div>
+                <div className="text-sm text-gray-500 mt-2">credits consumed</div>
+              </Card>
+              <Card className="p-6">
+                <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Monthly Included</div>
+                <div className="text-3xl font-bold text-green-600 dark:text-green-400">
+                  {creditBalance?.plan_credits_per_month.toLocaleString() || 0}
+                </div>
+                <div className="text-sm text-gray-500 mt-2">from your plan</div>
+              </Card>
+            </div>
+
+            <Card className="p-6">
+              <h2 className="text-lg font-semibold mb-4">Credit Usage Summary</h2>
+              <div className="space-y-2">
+                <div className="flex justify-between items-center">
+                  <span className="text-gray-700 dark:text-gray-300">Remaining Credits</span>
+                  <span className="font-semibold">{creditBalance?.credits_remaining.toLocaleString() || 0}</span>
+                </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" 
+                    style={{ 
+                      width: creditBalance?.credits 
+                        ? `${Math.min((creditBalance.credits / (creditBalance.plan_credits_per_month || 1)) * 100, 100)}%` 
+                        : '0%' 
+                    }}
+                  ></div>
+                </div>
+              </div>
+            </Card>
+          </div>
+        )}
+
+        {/* Purchase Credits Tab */}
+        {activeTab === 'purchase' && (
+          <div className="space-y-6">
+            <Card className="p-6">
+              <h2 className="text-lg font-semibold mb-4">Credit Packages</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {packages.map((pkg) => (
+                  <div key={pkg.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:border-blue-500 transition-colors">
+                    <div className="text-lg font-semibold text-gray-900 dark:text-white">{pkg.name}</div>
+                    <div className="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-2">
+                      {pkg.credits.toLocaleString()} <span className="text-sm text-gray-500">credits</span>
+                    </div>
+                    <div className="text-2xl font-semibold text-gray-900 dark:text-white mt-4">
+                      ${pkg.price}
+                    </div>
+                    {pkg.description && (
+                      <div className="text-sm text-gray-600 dark:text-gray-400 mt-2">{pkg.description}</div>
+                    )}
+                    <Button 
+                      variant="primary"
+                      tone="brand"
+                      onClick={() => handlePurchase(pkg.id)}
+                      fullWidth
+                      className="mt-6"
+                    >
+                      Purchase
+                    </Button>
+                  </div>
+                ))}
+                {packages.length === 0 && (
+                  <div className="col-span-3 text-center py-12 text-gray-500">
+                    No credit packages available at this time
+                  </div>
+                )}
+              </div>
+            </Card>
+          </div>
+        )}
+
+        {/* Billing History Tab */}
+        {activeTab === 'invoices' && (
+          <Card className="overflow-hidden">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+                  <tr>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Invoice
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Date
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Amount
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Status
+                    </th>
+                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                  {invoices.length === 0 ? (
+                    <tr>
+                      <td colSpan={5} className="px-6 py-8 text-center text-gray-500">
+                        <FileText className="w-12 h-12 mx-auto mb-2 text-gray-400" />
+                        No invoices yet
+                      </td>
+                    </tr>
+                  ) : (
+                    invoices.map((invoice) => (
+                      <tr key={invoice.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                        <td className="px-6 py-4 font-medium">{invoice.invoice_number}</td>
+                        <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
+                          {new Date(invoice.created_at).toLocaleDateString()}
+                        </td>
+                        <td className="px-6 py-4 font-semibold">${invoice.total_amount}</td>
+                        <td className="px-6 py-4">
+                          <Badge 
+                            variant="light" 
+                            color={invoice.status === 'paid' ? 'success' : 'warning'}
+                          >
+                            {invoice.status}
+                          </Badge>
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                          <Button 
+                            variant="ghost" 
+                            tone="brand"
+                            size="sm"
+                            startIcon={<Download className="w-4 h-4" />}
+                            className="ml-auto"
+                          >
+                            Download
+                          </Button>
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </Card>
+        )}
+
+        {/* Payment Methods Tab */}
+        {activeTab === 'payment-methods' && (
+          <div className="space-y-6">
+            <Card className="p-6">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-lg font-semibold">Payment Methods</h2>
+                <Button variant="primary" tone="brand">
+                  Add Payment Method
+                </Button>
+              </div>
+              <div className="space-y-4">
+                {paymentMethods.map((method) => (
+                  <div key={method.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                      <CreditCard className="w-8 h-8 text-gray-400" />
+                      <div>
+                        <div className="font-medium text-gray-900 dark:text-white">{method.display_name}</div>
+                        <div className="text-sm text-gray-600 dark:text-gray-400">{method.type}</div>
+                      </div>
+                    </div>
+                    {method.is_enabled && (
+                      <Badge variant="light" color="success">Active</Badge>
+                    )}
+                  </div>
+                ))}
+                {paymentMethods.length === 0 && (
+                  <div className="text-center py-12 text-gray-500">
+                    No payment methods configured
+                  </div>
+                )}
+              </div>
+            </Card>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/account/PurchaseCreditsPage.tsx

@@ -5,11 +5,12 @@
 
 import { useState, useEffect } from 'react';
 import { AlertCircle, Check, CreditCard, Building2, Wallet, Loader2 } from 'lucide-react';
+import Button from '../../components/ui/button/Button';
 import {
   getCreditPackages,
   getAvailablePaymentMethods,
   purchaseCreditPackage,
-  submitManualPayment,
+  createManualPayment,
   type CreditPackage,
   type PaymentMethod,
 } from '../../services/billing.api';
@@ -41,12 +42,13 @@ export default function PurchaseCreditsPage() {
         getAvailablePaymentMethods(),
       ]);
 
-      setPackages(packagesRes.results);
-      setPaymentMethods(methodsRes.methods);
+      setPackages(packagesRes?.results || []);
+      setPaymentMethods(methodsRes?.results || []);
 
       // Auto-select first payment method
-      if (methodsRes.methods.length > 0) {
-        setSelectedPaymentMethod(methodsRes.methods[0].type);
+      const methods = methodsRes?.results || [];
+      if (methods.length > 0) {
+        setSelectedPaymentMethod(methods[0].type);
       }
     } catch (err) {
       setError('Failed to load credit packages');
@@ -66,10 +68,10 @@ export default function PurchaseCreditsPage() {
       setPurchasing(true);
       setError('');
 
-      const response = await purchaseCreditPackage(
-        selectedPackage.id,
-        selectedPaymentMethod
-      );
+      const response = await purchaseCreditPackage({
+        package_id: selectedPackage.id,
+        payment_method: selectedPaymentMethod as 'stripe' | 'paypal' | 'bank_transfer' | 'local_wallet'
+      });
 
       if (selectedPaymentMethod === 'stripe') {
         // Redirect to Stripe checkout
@@ -101,10 +103,10 @@ export default function PurchaseCreditsPage() {
       setPurchasing(true);
       setError('');
 
-      await submitManualPayment({
-        invoice_id: invoiceData.invoice_id,
-        payment_method: selectedPaymentMethod as 'bank_transfer' | 'local_wallet',
-        transaction_reference: manualPaymentData.transaction_reference,
+      await createManualPayment({
+        amount: String(selectedPackage?.price || 0),
+        payment_method: selectedPaymentMethod as 'stripe' | 'paypal' | 'bank_transfer' | 'local_wallet',
+        reference: manualPaymentData.transaction_reference,
         notes: manualPaymentData.notes,
       });
 
@@ -254,31 +256,28 @@ export default function PurchaseCreditsPage() {
             </div>
 
             <div className="flex gap-3 pt-4">
-              <button
-                type="button"
+              <Button
+                variant="outline"
+                tone="neutral"
                 onClick={() => {
                   setShowManualPaymentForm(false);
                   setInvoiceData(null);
                 }}
-                className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
                 disabled={purchasing}
+                className="flex-1"
               >
                 Cancel
-              </button>
-              <button
+              </Button>
+              <Button
+                variant="primary"
+                tone="brand"
                 type="submit"
                 disabled={purchasing}
-                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                startIcon={purchasing ? <Loader2 className="w-4 h-4 animate-spin" /> : undefined}
+                className="flex-1"
               >
-                {purchasing ? (
-                  <>
-                    <Loader2 className="w-4 h-4 animate-spin" />
-                    Submitting...
-                  </>
-                ) : (
-                  'Submit Payment'
-                )}
-              </button>
+                {purchasing ? 'Submitting...' : 'Submit Payment'}
+              </Button>
             </div>
           </div>
         </form>
@@ -376,7 +375,7 @@ export default function PurchaseCreditsPage() {
                       {getPaymentMethodIcon(method.type)}
                     </div>
                     <div className="flex-1">
-                      <h3 className="font-semibold mb-1">{method.name}</h3>
+                      <h3 className="font-semibold mb-1">{method.name || method.display_name}</h3>
                       <p className="text-sm text-gray-600">{method.instructions}</p>
                     </div>
                     {selectedPaymentMethod === method.type && (
@@ -408,20 +407,17 @@ export default function PurchaseCreditsPage() {
               </div>
             </div>
 
-            <button
+            <Button
+              variant="primary"
+              tone="brand"
+              size="lg"
               onClick={handlePurchase}
               disabled={purchasing}
-              className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed font-semibold text-lg flex items-center justify-center gap-2"
+              startIcon={purchasing ? <Loader2 className="w-5 h-5 animate-spin" /> : undefined}
+              fullWidth
             >
-              {purchasing ? (
-                <>
-                  <Loader2 className="w-5 h-5 animate-spin" />
-                  Processing...
-                </>
-              ) : (
-                'Proceed to Payment'
-              )}
-            </button>
+              {purchasing ? 'Processing...' : 'Proceed to Payment'}
+            </Button>
           </div>
         )}
       </div>

frontend/src/pages/account/TeamManagementPage.tsx

@@ -0,0 +1,389 @@
+/**
+ * Team Management Page
+ * Tabs: Users, Invitations, Access Control
+ */
+
+import { useState, useEffect } from 'react';
+import { Users, UserPlus, Shield } from 'lucide-react';
+import PageMeta from '../../components/common/PageMeta';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { getTeamMembers, inviteTeamMember, removeTeamMember, TeamMember } from '../../services/billing.api';
+import { Card } from '../../components/ui/card';
+import Button from '../../components/ui/button/Button';
+import Badge from '../../components/ui/badge/Badge';
+
+type TabType = 'users' | 'invitations' | 'access';
+
+export default function TeamManagementPage() {
+  const toast = useToast();
+  const [activeTab, setActiveTab] = useState<TabType>('users');
+  const [members, setMembers] = useState<TeamMember[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showInviteModal, setShowInviteModal] = useState(false);
+  const [inviting, setInviting] = useState(false);
+  const [inviteForm, setInviteForm] = useState({
+    email: '',
+    first_name: '',
+    last_name: '',
+  });
+
+  useEffect(() => {
+    loadTeamMembers();
+  }, []);
+
+  const loadTeamMembers = async () => {
+    try {
+      setLoading(true);
+      const data = await getTeamMembers();
+      setMembers(data.results || []);
+    } catch (error: any) {
+      toast.error(`Failed to load team members: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInvite = async () => {
+    if (!inviteForm.email) {
+      toast.error('Email is required');
+      return;
+    }
+
+    try {
+      setInviting(true);
+      const result = await inviteTeamMember(inviteForm);
+      toast.success(result.message || 'Team member invited successfully');
+      setShowInviteModal(false);
+      setInviteForm({ email: '', first_name: '', last_name: '' });
+      await loadTeamMembers();
+    } catch (error: any) {
+      toast.error(`Failed to invite team member: ${error.message}`);
+    } finally {
+      setInviting(false);
+    }
+  };
+
+  const handleRemove = async (userId: number, email: string) => {
+    if (!confirm(`Are you sure you want to remove ${email} from the team?`)) {
+      return;
+    }
+
+    try {
+      const result = await removeTeamMember(userId);
+      toast.success(result.message || 'Team member removed successfully');
+      await loadTeamMembers();
+    } catch (error: any) {
+      toast.error(`Failed to remove team member: ${error.message}`);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <PageMeta title="Team Management" description="Manage your team members" />
+        <div className="flex items-center justify-center h-64">
+          <div className="text-gray-500">Loading...</div>
+        </div>
+      </div>
+    );
+  }
+
+  const tabs = [
+    { id: 'users' as TabType, label: 'Users', icon: <Users className="w-4 h-4" /> },
+    { id: 'invitations' as TabType, label: 'Invitations', icon: <UserPlus className="w-4 h-4" /> },
+    { id: 'access' as TabType, label: 'Access Control', icon: <Shield className="w-4 h-4" /> },
+  ];
+
+  return (
+    <div className="p-6">
+      <PageMeta title="Team Management" description="Manage your team members" />
+      
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Team Management</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          Manage team members, invitations, and access control
+        </p>
+      </div>
+
+      {/* Tabs */}
+      <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
+        <nav className="-mb-px flex space-x-8">
+          {tabs.map((tab) => (
+            <button
+              type="button"
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`
+                flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm
+                ${activeTab === tab.id
+                  ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400'
+                }
+              `}
+            >
+              {tab.icon}
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* Users Tab */}
+      {activeTab === 'users' && (
+        <div className="space-y-6">
+          <div className="flex justify-end">
+            <Button
+              variant="primary"
+              onClick={() => setShowInviteModal(true)}
+            >
+              <UserPlus className="w-4 h-4 mr-2" />
+              Invite Team Member
+            </Button>
+          </div>
+
+          {/* Team Members Table */}
+          <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">Name</th>
+                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Email</th>
+                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Status</th>
+                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Role</th>
+                    <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Joined</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Last Login</th>
+                <th className="text-right py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {members.map((member) => (
+                <tr key={member.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">
+                    {member.first_name || member.last_name 
+                      ? `${member.first_name} ${member.last_name}`.trim()
+                      : '-'}
+                  </td>
+                  <td className="py-3 px-4 text-sm text-gray-900 dark:text-white">
+                    {member.email}
+                  </td>
+                  <td className="py-3 px-4">
+                    <Badge 
+                      variant="light" 
+                      color={member.is_active ? 'success' : 'error'}
+                    >
+                      {member.is_active ? 'Active' : 'Inactive'}
+                    </Badge>
+                  </td>
+                  <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
+                    {member.is_staff ? 'Admin' : 'Member'}
+                  </td>
+                  <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
+                    {member.date_joined ? new Date(member.date_joined).toLocaleDateString() : 'N/A'}
+                  </td>
+                  <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
+                    {member.last_login ? new Date(member.last_login).toLocaleDateString() : 'Never'}
+                  </td>
+                  <td className="py-3 px-4 text-right">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={() => handleRemove(member.id, member.email)}
+                    >
+                      Remove
+                    </Button>
+                  </td>
+                </tr>
+              ))}
+              {members.length === 0 && (
+                <tr>
+                  <td colSpan={7} className="py-8 text-center text-gray-500 dark:text-gray-400">
+                    No team members yet. Invite your first team member!
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  )}
+
+  {/* Invitations Tab */}
+  {activeTab === 'invitations' && (
+    <div className="space-y-6">
+      <div className="flex justify-end">
+        <Button
+          variant="primary"
+          onClick={() => setShowInviteModal(true)}
+        >
+          <UserPlus className="w-4 h-4 mr-2" />
+          Send Invitation
+        </Button>
+      </div>
+
+      <Card className="p-6">
+        <h2 className="text-lg font-semibold mb-4">Pending Invitations</h2>
+        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+          No pending invitations
+        </div>
+      </Card>
+
+      <Card className="p-6 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
+        <h3 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">How Invitations Work</h3>
+        <ul className="space-y-2 text-sm text-blue-800 dark:text-blue-200">
+          <li>• Invited users will receive an email with a registration link</li>
+          <li>• Invitations expire after 7 days</li>
+          <li>• You can resend or cancel invitations at any time</li>
+          <li>• New members will have the default "Member" role</li>
+        </ul>
+      </Card>
+    </div>
+  )}
+
+  {/* Access Control Tab */}
+  {activeTab === 'access' && (
+    <div className="space-y-6">
+      <Card className="p-6">
+        <h2 className="text-lg font-semibold mb-4">Role Permissions</h2>
+        <div className="space-y-4">
+          <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="font-semibold text-gray-900 dark:text-white">Owner</h3>
+              <Badge variant="light" color="error">Highest Access</Badge>
+            </div>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
+              Full access to all features including billing, team management, and account settings
+            </p>
+            <ul className="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+              <li>✓ Manage billing and subscriptions</li>
+              <li>✓ Invite and remove team members</li>
+              <li>✓ Manage all sites and content</li>
+              <li>✓ Configure account settings</li>
+            </ul>
+          </div>
+
+          <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="font-semibold text-gray-900 dark:text-white">Admin</h3>
+              <Badge variant="light" color="primary">High Access</Badge>
+            </div>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
+              Can manage sites and content, invite team members, but cannot access billing
+            </p>
+            <ul className="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+              <li>✓ Invite team members</li>
+              <li>✓ Manage all sites and content</li>
+              <li>✓ View usage analytics</li>
+              <li>✗ Cannot manage billing</li>
+            </ul>
+          </div>
+
+          <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="font-semibold text-gray-900 dark:text-white">Editor</h3>
+              <Badge variant="light" color="warning">Medium Access</Badge>
+            </div>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
+              Can create and edit content, limited settings access
+            </p>
+            <ul className="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+              <li>✓ Create and edit content</li>
+              <li>✓ View usage analytics</li>
+              <li>✗ Cannot invite users</li>
+              <li>✗ Cannot manage billing</li>
+            </ul>
+          </div>
+
+          <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="font-semibold text-gray-900 dark:text-white">Viewer</h3>
+              <Badge variant="light" color="default">Read-Only</Badge>
+            </div>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
+              Read-only access to content and analytics
+            </p>
+            <ul className="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+              <li>✓ View content and analytics</li>
+              <li>✗ Cannot create or edit</li>
+              <li>✗ Cannot invite users</li>
+              <li>✗ Cannot manage billing</li>
+            </ul>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )}
+
+      {/* Invite Modal */}
+      {showInviteModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <Card className="p-6 w-full max-w-md">
+            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
+              Invite Team Member
+            </h2>
+            
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Email *
+                </label>
+                <input
+                  type="email"
+                  value={inviteForm.email}
+                  onChange={(e) => setInviteForm(prev => ({ ...prev, email: e.target.value }))}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                  placeholder="user@example.com"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  First Name
+                </label>
+                <input
+                  type="text"
+                  value={inviteForm.first_name}
+                  onChange={(e) => setInviteForm(prev => ({ ...prev, first_name: e.target.value }))}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Last Name
+                </label>
+                <input
+                  type="text"
+                  value={inviteForm.last_name}
+                  onChange={(e) => setInviteForm(prev => ({ ...prev, last_name: e.target.value }))}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                />
+              </div>
+            </div>
+
+            <div className="mt-6 flex justify-end gap-3">
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  setShowInviteModal(false);
+                  setInviteForm({ email: '', first_name: '', last_name: '' });
+                }}
+                disabled={inviting}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="primary"
+                onClick={handleInvite}
+                disabled={inviting}
+              >
+                {inviting ? 'Inviting...' : 'Send Invitation'}
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/account/UsageAnalyticsPage.tsx

@@ -0,0 +1,327 @@
+/**
+ * Usage & Analytics Page
+ * Tabs: Credit Usage, API Usage, Cost Breakdown
+ */
+
+import { useState, useEffect } from 'react';
+import { TrendingUp, Activity, DollarSign } from 'lucide-react';
+import PageMeta from '../../components/common/PageMeta';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { getUsageAnalytics, UsageAnalytics } from '../../services/billing.api';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+
+type TabType = 'credits' | 'api' | 'costs';
+
+export default function UsageAnalyticsPage() {
+  const toast = useToast();
+  const [activeTab, setActiveTab] = useState<TabType>('credits');
+  const [analytics, setAnalytics] = useState<UsageAnalytics | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [period, setPeriod] = useState(30);
+
+  useEffect(() => {
+    loadAnalytics();
+  }, [period]);
+
+  const loadAnalytics = async () => {
+    try {
+      setLoading(true);
+      const data = await getUsageAnalytics(period);
+      setAnalytics(data);
+    } catch (error: any) {
+      toast.error(`Failed to load usage analytics: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6">
+        <PageMeta title="Usage & Analytics" description="Analyze your usage patterns" />
+        <div className="flex items-center justify-center h-64">
+          <div className="text-gray-500">Loading...</div>
+        </div>
+      </div>
+    );
+  }
+
+  const tabs = [
+    { id: 'credits' as TabType, label: 'Credit Usage', icon: <TrendingUp className="w-4 h-4" /> },
+    { id: 'api' as TabType, label: 'API Usage', icon: <Activity className="w-4 h-4" /> },
+    { id: 'costs' as TabType, label: 'Cost Breakdown', icon: <DollarSign className="w-4 h-4" /> },
+  ];
+
+  return (
+    <div className="p-6">
+      <PageMeta title="Usage & Analytics" description="Analyze your usage patterns" />
+      
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Usage & Analytics</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          Monitor credit usage, API calls, and cost breakdown
+        </p>
+      </div>
+
+      <div className="mb-6 flex items-center justify-between">
+        {/* Tabs */}
+        <div className="border-b border-gray-200 dark:border-gray-700">
+          <nav className="-mb-px flex space-x-8">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`
+                  flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm
+                  ${activeTab === tab.id
+                    ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400'
+                  }
+                `}
+              >
+                {tab.icon}
+                {tab.label}
+              </button>
+            ))}
+          </nav>
+        </div>
+
+        {/* Period Selector */}
+        <div className="flex gap-2">
+          <button
+            onClick={() => setPeriod(7)}
+            className={`px-4 py-2 rounded-md text-sm font-medium ${
+              period === 7
+                ? 'bg-primary-600 text-white'
+                : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+            }`}
+          >
+            7 Days
+          </button>
+          <button
+            onClick={() => setPeriod(30)}
+            className={`px-4 py-2 rounded-md text-sm font-medium ${
+              period === 30
+                ? 'bg-primary-600 text-white'
+                : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+            }`}
+          >
+            30 Days
+          </button>
+          <button
+            onClick={() => setPeriod(90)}
+            className={`px-4 py-2 rounded-md text-sm font-medium ${
+              period === 90
+                ? 'bg-primary-600 text-white'
+                : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
+            }`}
+          >
+            90 Days
+          </button>
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      <div className="mt-6">
+        {/* Credit Usage Tab */}
+        {activeTab === 'credits' && (
+          <div className="space-y-6">
+            {/* Summary Cards */}
+            <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">Total Credits Used</div>
+                <div className="text-3xl font-bold text-red-600 dark:text-red-400">
+                  {analytics?.total_usage.toLocaleString() || 0}
+                </div>
+              </Card>
+
+              <Card className="p-6">
+                <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Purchases</div>
+                <div className="text-3xl font-bold text-green-600 dark:text-green-400">
+                  {analytics?.total_purchases.toLocaleString() || 0}
+                </div>
+              </Card>
+
+              <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-gray-900 dark:text-white">
+                  {analytics?.current_balance.toLocaleString() || 0}
+                </div>
+              </Card>
+            </div>
+
+            {/* Usage by Type */}
+            <Card className="p-6">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                Usage by Operation Type
+              </h2>
+              <div className="space-y-3">
+                {analytics?.usage_by_type.map((item, idx) => (
+                  <div key={idx} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <div className="flex-1">
+                      <Badge variant="light" color="error">
+                        {item.transaction_type}
+                      </Badge>
+                      <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        {item.count} operations
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <div className="text-lg font-bold text-red-600 dark:text-red-400">
+                        {item.total.toLocaleString()} credits
+                      </div>
+                    </div>
+                  </div>
+                ))}
+                {(!analytics?.usage_by_type || analytics.usage_by_type.length === 0) && (
+                  <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                    No usage in this period
+                  </div>
+                )}
+              </div>
+            </Card>
+          </div>
+        )}
+
+        {/* API Usage Tab */}
+        {activeTab === 'api' && (
+          <div className="space-y-6">
+            <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">Total API Calls</div>
+                <div className="text-3xl font-bold text-blue-600 dark:text-blue-400">
+                  {analytics?.usage_by_type.reduce((sum, item) => sum + item.count, 0).toLocaleString() || 0}
+                </div>
+              </Card>
+
+              <Card className="p-6">
+                <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Avg Calls/Day</div>
+                <div className="text-3xl font-bold text-purple-600 dark:text-purple-400">
+                  {Math.round((analytics?.usage_by_type.reduce((sum, item) => sum + item.count, 0) || 0) / period)}
+                </div>
+              </Card>
+
+              <Card className="p-6">
+                <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Success Rate</div>
+                <div className="text-3xl font-bold text-green-600 dark:text-green-400">
+                  98.5%
+                </div>
+              </Card>
+            </div>
+
+            <Card className="p-6">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                API Calls by Endpoint
+              </h2>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                  <div className="flex-1">
+                    <div className="font-medium">/api/v1/content/generate</div>
+                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Content generation</div>
+                  </div>
+                  <div className="text-right">
+                    <div className="text-lg font-bold">1,234</div>
+                    <div className="text-xs text-gray-500">calls</div>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                  <div className="flex-1">
+                    <div className="font-medium">/api/v1/keywords/cluster</div>
+                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Keyword clustering</div>
+                  </div>
+                  <div className="text-right">
+                    <div className="text-lg font-bold">567</div>
+                    <div className="text-xs text-gray-500">calls</div>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </div>
+        )}
+
+        {/* Cost Breakdown Tab */}
+        {activeTab === 'costs' && (
+          <div className="space-y-6">
+            <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">Total Cost</div>
+                <div className="text-3xl font-bold text-gray-900 dark:text-white">
+                  ${((analytics?.total_usage || 0) * 0.01).toFixed(2)}
+                </div>
+                <div className="text-xs text-gray-500 mt-1">Estimated USD</div>
+              </Card>
+
+              <Card className="p-6">
+                <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Avg Cost/Day</div>
+                <div className="text-3xl font-bold text-gray-900 dark:text-white">
+                  ${(((analytics?.total_usage || 0) * 0.01) / period).toFixed(2)}
+                </div>
+                <div className="text-xs text-gray-500 mt-1">Estimated USD</div>
+              </Card>
+
+              <Card className="p-6">
+                <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Cost per Credit</div>
+                <div className="text-3xl font-bold text-gray-900 dark:text-white">
+                  $0.01
+                </div>
+                <div className="text-xs text-gray-500 mt-1">Average rate</div>
+              </Card>
+            </div>
+
+            <Card className="p-6">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                Cost by Operation
+              </h2>
+              <div className="space-y-3">
+                {analytics?.usage_by_type.map((item, idx) => (
+                  <div key={idx} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <div className="flex-1">
+                      <div className="font-medium">{item.transaction_type}</div>
+                      <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        {item.total.toLocaleString()} credits used
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <div className="text-lg font-bold">${(item.total * 0.01).toFixed(2)}</div>
+                      <div className="text-xs text-gray-500">USD</div>
+                    </div>
+                  </div>
+                ))}
+                {(!analytics?.usage_by_type || analytics.usage_by_type.length === 0) && (
+                  <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                    No cost data available
+                  </div>
+                )}
+              </div>
+            </Card>
+          </div>
+        )}
+      </div>
+
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6 hidden">
+        <Card className="p-6">
+          <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Credits Used</div>
+          <div className="text-3xl font-bold text-red-600 dark:text-red-400">
+            {analytics?.total_usage.toLocaleString() || 0}
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Purchases</div>
+          <div className="text-3xl font-bold text-green-600 dark:text-green-400">
+            {analytics?.total_purchases.toLocaleString() || 0}
+          </div>
+        </Card>
+
+        <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-gray-900 dark:text-white">
+            {analytics?.current_balance.toLocaleString() || 0}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/admin/AdminAPIMonitorPage.tsx

@@ -0,0 +1,120 @@
+/**
+ * Admin API Monitor Page
+ * Monitor API usage and performance
+ */
+
+import { useState } from 'react';
+import { Activity, TrendingUp, Clock, AlertTriangle } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+
+export default function AdminAPIMonitorPage() {
+  const stats = {
+    totalRequests: 125430,
+    requestsPerMinute: 42,
+    avgResponseTime: 234,
+    errorRate: 0.12,
+  };
+
+  const topEndpoints = [
+    { path: '/v1/billing/credit-balance/', requests: 15234, avgTime: 145 },
+    { path: '/v1/sites/', requests: 12543, avgTime: 234 },
+    { path: '/v1/ideas/', requests: 10234, avgTime: 456 },
+    { path: '/v1/account/settings/', requests: 8234, avgTime: 123 },
+  ];
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+          <Activity className="w-6 h-6" />
+          API Monitor
+        </h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          Monitor API usage and performance
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+        <Card className="p-6">
+          <div className="flex items-center gap-4">
+            <div className="p-3 bg-blue-100 dark:bg-blue-900/20 rounded-lg">
+              <TrendingUp className="w-6 h-6 text-blue-600" />
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                {stats.totalRequests.toLocaleString()}
+              </div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">Total Requests</div>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <div className="flex items-center gap-4">
+            <div className="p-3 bg-green-100 dark:bg-green-900/20 rounded-lg">
+              <Activity className="w-6 h-6 text-green-600" />
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                {stats.requestsPerMinute}
+              </div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">Requests/Min</div>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <div className="flex items-center gap-4">
+            <div className="p-3 bg-purple-100 dark:bg-purple-900/20 rounded-lg">
+              <Clock className="w-6 h-6 text-purple-600" />
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                {stats.avgResponseTime}ms
+              </div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">Avg Response</div>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <div className="flex items-center gap-4">
+            <div className="p-3 bg-red-100 dark:bg-red-900/20 rounded-lg">
+              <AlertTriangle className="w-6 h-6 text-red-600" />
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                {stats.errorRate}%
+              </div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">Error Rate</div>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      <Card className="p-6">
+        <h2 className="text-lg font-semibold mb-4">Top Endpoints</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="border-b border-gray-200 dark:border-gray-700">
+              <tr>
+                <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">Endpoint</th>
+                <th className="px-4 py-3 text-right text-sm font-medium text-gray-500">Requests</th>
+                <th className="px-4 py-3 text-right text-sm font-medium text-gray-500">Avg Time</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+              {topEndpoints.map((endpoint) => (
+                <tr key={endpoint.path} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                  <td className="px-4 py-3 font-mono text-sm">{endpoint.path}</td>
+                  <td className="px-4 py-3 text-right">{endpoint.requests.toLocaleString()}</td>
+                  <td className="px-4 py-3 text-right">{endpoint.avgTime}ms</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  );
+}

frontend/src/pages/admin/AdminAccountLimitsPage.tsx

@@ -0,0 +1,130 @@
+/**
+ * Admin Account Limits Page
+ * Configure account limits and quotas
+ */
+
+import { useState } from 'react';
+import { Save, Shield, Loader2 } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+
+export default function AdminAccountLimitsPage() {
+  const [saving, setSaving] = useState(false);
+  const [limits, setLimits] = useState({
+    maxSites: 10,
+    maxTeamMembers: 5,
+    maxStorageGB: 50,
+    maxAPICallsPerMonth: 100000,
+    maxConcurrentJobs: 10,
+    rateLimitPerMinute: 100,
+  });
+
+  const handleSave = async () => {
+    setSaving(true);
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    setSaving(false);
+  };
+
+  return (
+    <div className="p-6">
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+            <Shield className="w-6 h-6" />
+            Account Limits
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            Configure default account limits and quotas
+          </p>
+        </div>
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+        >
+          {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+          {saving ? 'Saving...' : 'Save Changes'}
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4">Resource Limits</h2>
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Max Sites per Account
+              </label>
+              <input
+                type="number"
+                value={limits.maxSites}
+                onChange={(e) => setLimits({ ...limits, maxSites: parseInt(e.target.value) })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Max Team Members
+              </label>
+              <input
+                type="number"
+                value={limits.maxTeamMembers}
+                onChange={(e) => setLimits({ ...limits, maxTeamMembers: parseInt(e.target.value) })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Max Storage (GB)
+              </label>
+              <input
+                type="number"
+                value={limits.maxStorageGB}
+                onChange={(e) => setLimits({ ...limits, maxStorageGB: parseInt(e.target.value) })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4">API & Performance Limits</h2>
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Max API Calls per Month
+              </label>
+              <input
+                type="number"
+                value={limits.maxAPICallsPerMonth}
+                onChange={(e) => setLimits({ ...limits, maxAPICallsPerMonth: parseInt(e.target.value) })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Max Concurrent Background Jobs
+              </label>
+              <input
+                type="number"
+                value={limits.maxConcurrentJobs}
+                onChange={(e) => setLimits({ ...limits, maxConcurrentJobs: parseInt(e.target.value) })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Rate Limit (requests per minute)
+              </label>
+              <input
+                type="number"
+                value={limits.rateLimitPerMinute}
+                onChange={(e) => setLimits({ ...limits, rateLimitPerMinute: parseInt(e.target.value) })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/admin/AdminActivityLogsPage.tsx

@@ -0,0 +1,164 @@
+/**
+ * Admin Activity Logs Page
+ * View system activity and audit trail
+ */
+
+import { useState, useEffect } from 'react';
+import { Search, Filter, Loader2, AlertCircle, Activity } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+
+interface ActivityLog {
+  id: number;
+  user_email: string;
+  account_name: string;
+  action: string;
+  resource_type: string;
+  resource_id: string | null;
+  ip_address: string;
+  timestamp: string;
+  details: string;
+}
+
+export default function AdminActivityLogsPage() {
+  const [logs, setLogs] = useState<ActivityLog[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [actionFilter, setActionFilter] = useState('all');
+
+  useEffect(() => {
+    // Mock data - replace with API call
+    setLogs([
+      {
+        id: 1,
+        user_email: 'john@example.com',
+        account_name: 'Acme Corp',
+        action: 'create',
+        resource_type: 'Site',
+        resource_id: '123',
+        ip_address: '192.168.1.1',
+        timestamp: new Date().toISOString(),
+        details: 'Created new site "Main Website"',
+      },
+      {
+        id: 2,
+        user_email: 'jane@example.com',
+        account_name: 'TechStart',
+        action: 'update',
+        resource_type: 'Account',
+        resource_id: '456',
+        ip_address: '192.168.1.2',
+        timestamp: new Date(Date.now() - 3600000).toISOString(),
+        details: 'Updated account billing address',
+      },
+    ]);
+    setLoading(false);
+  }, []);
+
+  const filteredLogs = logs.filter((log) => {
+    const matchesSearch = log.user_email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          log.account_name.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesAction = actionFilter === 'all' || log.action === actionFilter;
+    return matchesSearch && matchesAction;
+  });
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+          <Activity className="w-6 h-6" />
+          Activity Logs
+        </h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          System activity and audit trail
+        </p>
+      </div>
+
+      <div className="mb-6 flex flex-col md:flex-row gap-4">
+        <div className="flex-1 relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+          <input
+            type="text"
+            placeholder="Search logs..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Filter className="w-5 h-5 text-gray-400" />
+          <select
+            value={actionFilter}
+            onChange={(e) => setActionFilter(e.target.value)}
+            className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+          >
+            <option value="all">All Actions</option>
+            <option value="create">Create</option>
+            <option value="update">Update</option>
+            <option value="delete">Delete</option>
+            <option value="login">Login</option>
+            <option value="logout">Logout</option>
+          </select>
+        </div>
+      </div>
+
+      <Card className="overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Timestamp</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">User</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Account</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Resource</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Details</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">IP Address</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+              {filteredLogs.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className="px-6 py-8 text-center text-gray-500">No activity logs found</td>
+                </tr>
+              ) : (
+                filteredLogs.map((log) => (
+                  <tr key={log.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
+                      {new Date(log.timestamp).toLocaleString()}
+                    </td>
+                    <td className="px-6 py-4 text-sm font-medium">{log.user_email}</td>
+                    <td className="px-6 py-4 text-sm text-gray-600">{log.account_name}</td>
+                    <td className="px-6 py-4">
+                      <Badge 
+                        variant="light" 
+                        color={
+                          log.action === 'create' ? 'success' :
+                          log.action === 'update' ? 'primary' :
+                          log.action === 'delete' ? 'error' : 'default'
+                        }
+                      >
+                        {log.action}
+                      </Badge>
+                    </td>
+                    <td className="px-6 py-4 text-sm">{log.resource_type}</td>
+                    <td className="px-6 py-4 text-sm text-gray-600">{log.details}</td>
+                    <td className="px-6 py-4 text-sm text-gray-500">{log.ip_address}</td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  );
+}

frontend/src/pages/admin/AdminAllAccountsPage.tsx

@@ -0,0 +1,213 @@
+/**
+ * Admin All Accounts Page
+ * List and manage all accounts in the system
+ */
+
+import { useState, useEffect } from 'react';
+import { Search, Filter, Loader2, AlertCircle } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+import { fetchAPI } from '../../services/api';
+
+interface Account {
+  id: number;
+  name: string;
+  slug: string;
+  owner_email: string;
+  status: string;
+  credit_balance: number;
+  plan_name: string;
+  created_at: string;
+}
+
+export default function AdminAllAccountsPage() {
+  const [accounts, setAccounts] = useState<Account[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+
+  useEffect(() => {
+    loadAccounts();
+  }, []);
+
+  const loadAccounts = async () => {
+    try {
+      setLoading(true);
+      const data = await fetchAPI('/v1/admin/accounts/');
+      setAccounts(data.results || []);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load accounts');
+      console.error('Accounts load error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredAccounts = accounts.filter((account) => {
+    const matchesSearch = account.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          account.owner_email.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || account.status === statusFilter;
+    return matchesSearch && matchesStatus;
+  });
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">All Accounts</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          Manage all accounts in the system
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
+          <AlertCircle className="w-5 h-5 text-red-600" />
+          <p className="text-red-800 dark:text-red-200">{error}</p>
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="mb-6 flex flex-col md:flex-row gap-4">
+        <div className="flex-1 relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+          <input
+            type="text"
+            placeholder="Search accounts..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Filter className="w-5 h-5 text-gray-400" />
+          <select
+            value={statusFilter}
+            onChange={(e) => setStatusFilter(e.target.value)}
+            className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+          >
+            <option value="all">All Status</option>
+            <option value="active">Active</option>
+            <option value="trial">Trial</option>
+            <option value="suspended">Suspended</option>
+            <option value="cancelled">Cancelled</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Accounts Table */}
+      <Card className="overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Account
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Owner
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Plan
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Credits
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Created
+                </th>
+                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+              {filteredAccounts.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className="px-6 py-8 text-center text-gray-500">
+                    No accounts found
+                  </td>
+                </tr>
+              ) : (
+                filteredAccounts.map((account) => (
+                  <tr key={account.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                    <td className="px-6 py-4">
+                      <div className="font-medium text-gray-900 dark:text-white">{account.name}</div>
+                      <div className="text-sm text-gray-500">{account.slug}</div>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
+                      {account.owner_email}
+                    </td>
+                    <td className="px-6 py-4 text-sm text-gray-900 dark:text-white">
+                      {account.plan_name || 'Free'}
+                    </td>
+                    <td className="px-6 py-4 text-sm font-semibold text-gray-900 dark:text-white">
+                      {account.credit_balance?.toLocaleString() || 0}
+                    </td>
+                    <td className="px-6 py-4">
+                      <Badge 
+                        variant="light" 
+                        color={
+                          account.status === 'active' ? 'success' : 
+                          account.status === 'trial' ? 'primary' :
+                          account.status === 'suspended' ? 'error' : 'warning'
+                        }
+                      >
+                        {account.status}
+                      </Badge>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
+                      {new Date(account.created_at).toLocaleDateString()}
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      <button className="text-blue-600 hover:text-blue-700 text-sm font-medium">
+                        Manage
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+
+      {/* Summary Stats */}
+      <div className="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card className="p-4">
+          <div className="text-sm text-gray-600 dark:text-gray-400">Total Accounts</div>
+          <div className="text-2xl font-bold text-gray-900 dark:text-white">{accounts.length}</div>
+        </Card>
+        <Card className="p-4">
+          <div className="text-sm text-gray-600 dark:text-gray-400">Active</div>
+          <div className="text-2xl font-bold text-green-600">
+            {accounts.filter(a => a.status === 'active').length}
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="text-sm text-gray-600 dark:text-gray-400">Trial</div>
+          <div className="text-2xl font-bold text-blue-600">
+            {accounts.filter(a => a.status === 'trial').length}
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="text-sm text-gray-600 dark:text-gray-400">Suspended</div>
+          <div className="text-2xl font-bold text-red-600">
+            {accounts.filter(a => a.status === 'suspended').length}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/admin/AdminAllInvoicesPage.tsx

@@ -0,0 +1,161 @@
+/**
+ * Admin All Invoices Page
+ * View and manage all system invoices
+ */
+
+import { useState, useEffect } from 'react';
+import { Search, Filter, Loader2, AlertCircle, Download } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+import { getInvoices, type Invoice } from '../../services/billing.api';
+
+export default function AdminAllInvoicesPage() {
+  const [invoices, setInvoices] = useState<Invoice[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+
+  useEffect(() => {
+    loadInvoices();
+  }, []);
+
+  const loadInvoices = async () => {
+    try {
+      setLoading(true);
+      const data = await getInvoices({});
+      setInvoices(data.results || []);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load invoices');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredInvoices = invoices.filter((invoice) => {
+    const matchesSearch = invoice.invoice_number.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || invoice.status === statusFilter;
+    return matchesSearch && matchesStatus;
+  });
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">All Invoices</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          View and manage all system invoices
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
+          <AlertCircle className="w-5 h-5 text-red-600" />
+          <p className="text-red-800 dark:text-red-200">{error}</p>
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="mb-6 flex flex-col md:flex-row gap-4">
+        <div className="flex-1 relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+          <input
+            type="text"
+            placeholder="Search invoices..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Filter className="w-5 h-5 text-gray-400" />
+          <select
+            value={statusFilter}
+            onChange={(e) => setStatusFilter(e.target.value)}
+            className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+          >
+            <option value="all">All Status</option>
+            <option value="paid">Paid</option>
+            <option value="pending">Pending</option>
+            <option value="void">Void</option>
+            <option value="uncollectible">Uncollectible</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Invoices Table */}
+      <Card className="overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Invoice #
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Date
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Amount
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+              {filteredInvoices.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="px-6 py-8 text-center text-gray-500">
+                    No invoices found
+                  </td>
+                </tr>
+              ) : (
+                filteredInvoices.map((invoice) => (
+                  <tr key={invoice.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                    <td className="px-6 py-4 font-medium text-gray-900 dark:text-white">
+                      {invoice.invoice_number}
+                    </td>
+                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
+                      {new Date(invoice.created_at).toLocaleDateString()}
+                    </td>
+                    <td className="px-6 py-4 font-semibold text-gray-900 dark:text-white">
+                      ${invoice.total_amount}
+                    </td>
+                    <td className="px-6 py-4">
+                      <Badge 
+                        variant="light" 
+                        color={
+                          invoice.status === 'paid' ? 'success' : 
+                          invoice.status === 'pending' ? 'warning' : 'error'
+                        }
+                      >
+                        {invoice.status}
+                      </Badge>
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      <button className="text-blue-600 hover:text-blue-700 flex items-center gap-1 ml-auto">
+                        <Download className="w-4 h-4" />
+                        Download
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  );
+}

frontend/src/pages/admin/AdminAllPaymentsPage.tsx

@@ -0,0 +1,137 @@
+/**
+ * Admin All Payments Page
+ * View and manage all payment transactions
+ */
+
+import { useState, useEffect } from 'react';
+import { Search, Filter, Loader2, AlertCircle } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+import { fetchAPI } from '../../services/api';
+
+interface Payment {
+  id: number;
+  account_name: string;
+  amount: string;
+  currency: string;
+  status: string;
+  payment_method: string;
+  created_at: string;
+}
+
+export default function AdminAllPaymentsPage() {
+  const [payments, setPayments] = useState<Payment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string>('');
+  const [statusFilter, setStatusFilter] = useState('all');
+
+  useEffect(() => {
+    loadPayments();
+  }, []);
+
+  const loadPayments = async () => {
+    try {
+      setLoading(true);
+      const data = await fetchAPI('/v1/admin/payments/');
+      setPayments(data.results || []);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load payments');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredPayments = payments.filter((payment) => {
+    return statusFilter === 'all' || payment.status === statusFilter;
+  });
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">All Payments</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          View and manage all payment transactions
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
+          <AlertCircle className="w-5 h-5 text-red-600" />
+          <p className="text-red-800 dark:text-red-200">{error}</p>
+        </div>
+      )}
+
+      <div className="mb-6 flex items-center gap-2">
+        <Filter className="w-5 h-5 text-gray-400" />
+        <select
+          value={statusFilter}
+          onChange={(e) => setStatusFilter(e.target.value)}
+          className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+        >
+          <option value="all">All Status</option>
+          <option value="succeeded">Succeeded</option>
+          <option value="pending">Pending</option>
+          <option value="failed">Failed</option>
+          <option value="refunded">Refunded</option>
+        </select>
+      </div>
+
+      <Card className="overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Account</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Method</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
+                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+              {filteredPayments.length === 0 ? (
+                <tr>
+                  <td colSpan={6} className="px-6 py-8 text-center text-gray-500">No payments found</td>
+                </tr>
+              ) : (
+                filteredPayments.map((payment) => (
+                  <tr key={payment.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                    <td className="px-6 py-4 font-medium">{payment.account_name}</td>
+                    <td className="px-6 py-4 font-semibold">{payment.currency} {payment.amount}</td>
+                    <td className="px-6 py-4 text-sm">{payment.payment_method}</td>
+                    <td className="px-6 py-4">
+                      <Badge 
+                        variant="light" 
+                        color={
+                          payment.status === 'succeeded' ? 'success' : 
+                          payment.status === 'pending' ? 'warning' : 'error'
+                        }
+                      >
+                        {payment.status}
+                      </Badge>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-gray-600">
+                      {new Date(payment.created_at).toLocaleDateString()}
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      <button className="text-blue-600 hover:text-blue-700 text-sm">View</button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  );
+}

frontend/src/pages/admin/AdminAllUsersPage.tsx

@@ -0,0 +1,217 @@
+/**
+ * Admin All Users Page
+ * View and manage all users across all accounts
+ */
+
+import { useState, useEffect } from 'react';
+import { Search, Filter, Loader2, AlertCircle } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+import { fetchAPI } from '../../services/api';
+
+interface User {
+  id: number;
+  email: string;
+  first_name: string;
+  last_name: string;
+  account_name: string;
+  role: string;
+  is_active: boolean;
+  last_login: string | null;
+  date_joined: string;
+}
+
+export default function AdminAllUsersPage() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [roleFilter, setRoleFilter] = useState('all');
+
+  useEffect(() => {
+    loadUsers();
+  }, []);
+
+  const loadUsers = async () => {
+    try {
+      setLoading(true);
+      const data = await fetchAPI('/v1/admin/users/');
+      setUsers(data.results || []);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load users');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredUsers = users.filter((user) => {
+    const matchesSearch = user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          `${user.first_name} ${user.last_name}`.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesRole = roleFilter === 'all' || user.role === roleFilter;
+    return matchesSearch && matchesRole;
+  });
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">All Users</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          View and manage all users across all accounts
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
+          <AlertCircle className="w-5 h-5 text-red-600" />
+          <p className="text-red-800 dark:text-red-200">{error}</p>
+        </div>
+      )}
+
+      {/* Filters */}
+      <div className="mb-6 flex flex-col md:flex-row gap-4">
+        <div className="flex-1 relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+          <input
+            type="text"
+            placeholder="Search users..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <Filter className="w-5 h-5 text-gray-400" />
+          <select
+            value={roleFilter}
+            onChange={(e) => setRoleFilter(e.target.value)}
+            className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+          >
+            <option value="all">All Roles</option>
+            <option value="owner">Owner</option>
+            <option value="admin">Admin</option>
+            <option value="editor">Editor</option>
+            <option value="viewer">Viewer</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Users Table */}
+      <Card className="overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  User
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Account
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Role
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Last Login
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Joined
+                </th>
+                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+              {filteredUsers.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className="px-6 py-8 text-center text-gray-500">
+                    No users found
+                  </td>
+                </tr>
+              ) : (
+                filteredUsers.map((user) => (
+                  <tr key={user.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                    <td className="px-6 py-4">
+                      <div className="font-medium text-gray-900 dark:text-white">
+                        {user.first_name || user.last_name 
+                          ? `${user.first_name} ${user.last_name}`.trim()
+                          : user.email}
+                      </div>
+                      <div className="text-sm text-gray-500">{user.email}</div>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
+                      {user.account_name}
+                    </td>
+                    <td className="px-6 py-4">
+                      <Badge variant="light" color="primary">
+                        {user.role}
+                      </Badge>
+                    </td>
+                    <td className="px-6 py-4">
+                      <Badge 
+                        variant="light" 
+                        color={user.is_active ? 'success' : 'error'}
+                      >
+                        {user.is_active ? 'Active' : 'Inactive'}
+                      </Badge>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
+                      {user.last_login 
+                        ? new Date(user.last_login).toLocaleDateString()
+                        : 'Never'}
+                    </td>
+                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
+                      {new Date(user.date_joined).toLocaleDateString()}
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      <button className="text-blue-600 hover:text-blue-700 text-sm font-medium">
+                        Manage
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+
+      {/* Summary Stats */}
+      <div className="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card className="p-4">
+          <div className="text-sm text-gray-600 dark:text-gray-400">Total Users</div>
+          <div className="text-2xl font-bold text-gray-900 dark:text-white">{users.length}</div>
+        </Card>
+        <Card className="p-4">
+          <div className="text-sm text-gray-600 dark:text-gray-400">Active</div>
+          <div className="text-2xl font-bold text-green-600">
+            {users.filter(u => u.is_active).length}
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="text-sm text-gray-600 dark:text-gray-400">Owners</div>
+          <div className="text-2xl font-bold text-blue-600">
+            {users.filter(u => u.role === 'owner').length}
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="text-sm text-gray-600 dark:text-gray-400">Admins</div>
+          <div className="text-2xl font-bold text-purple-600">
+            {users.filter(u => u.role === 'admin').length}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/admin/AdminCreditPackagesPage.tsx

@@ -0,0 +1,114 @@
+/**
+ * Admin Credit Packages Page
+ * Manage credit packages available for purchase
+ */
+
+import { useState, useEffect } from 'react';
+import { Plus, Loader2, AlertCircle, Edit, Trash } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+import { getCreditPackages, type CreditPackage } from '../../services/billing.api';
+
+export default function AdminCreditPackagesPage() {
+  const [packages, setPackages] = useState<CreditPackage[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string>('');
+
+  useEffect(() => {
+    loadPackages();
+  }, []);
+
+  const loadPackages = async () => {
+    try {
+      setLoading(true);
+      const data = await getCreditPackages();
+      setPackages(data.results || []);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load credit packages');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Credit Packages</h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            Manage credit packages available for purchase
+          </p>
+        </div>
+        <button className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+          <Plus className="w-4 h-4" />
+          Add Package
+        </button>
+      </div>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
+          <AlertCircle className="w-5 h-5 text-red-600" />
+          <p className="text-red-800 dark:text-red-200">{error}</p>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {packages.map((pkg) => (
+          <Card key={pkg.id} className="p-6">
+            <div className="flex items-start justify-between mb-4">
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{pkg.name}</h3>
+                {pkg.is_featured && (
+                  <Badge variant="light" color="primary" className="mt-1">Featured</Badge>
+                )}
+              </div>
+              <Badge variant="light" color={pkg.is_active ? 'success' : 'error'}>
+                {pkg.is_active ? 'Active' : 'Inactive'}
+              </Badge>
+            </div>
+            
+            <div className="mb-4">
+              <div className="text-3xl font-bold text-blue-600">{pkg.credits.toLocaleString()}</div>
+              <div className="text-sm text-gray-500">credits</div>
+            </div>
+            
+            <div className="mb-4">
+              <div className="text-2xl font-semibold text-gray-900 dark:text-white">${pkg.price}</div>
+              {pkg.discount_percentage > 0 && (
+                <div className="text-sm text-green-600">Save {pkg.discount_percentage}%</div>
+              )}
+            </div>
+
+            {pkg.description && (
+              <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{pkg.description}</p>
+            )}
+
+            <div className="flex gap-2 mt-4">
+              <button className="flex-1 flex items-center justify-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
+                <Edit className="w-4 h-4" />
+                Edit
+              </button>
+              <button className="px-3 py-2 border border-red-300 dark:border-red-600 text-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20">
+                <Trash className="w-4 h-4" />
+              </button>
+            </div>
+          </Card>
+        ))}
+
+        {packages.length === 0 && (
+          <div className="col-span-3 text-center py-12 text-gray-500">
+            No credit packages configured. Click "Add Package" to create one.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/admin/AdminRolesPermissionsPage.tsx

@@ -0,0 +1,147 @@
+/**
+ * Admin Roles & Permissions Page
+ * Manage user roles and permissions
+ */
+
+import { useState } from 'react';
+import { Shield, Users, Lock, Loader2 } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+
+const roles = [
+  {
+    id: 'developer',
+    name: 'Developer',
+    description: 'Super admin with full system access',
+    color: 'error' as const,
+    userCount: 1,
+    permissions: ['all'],
+  },
+  {
+    id: 'owner',
+    name: 'Owner',
+    description: 'Account owner with full account access',
+    color: 'primary' as const,
+    userCount: 5,
+    permissions: ['manage_account', 'manage_billing', 'manage_team', 'manage_sites', 'view_analytics'],
+  },
+  {
+    id: 'admin',
+    name: 'Admin',
+    description: 'Account admin with most permissions',
+    color: 'success' as const,
+    userCount: 12,
+    permissions: ['manage_team', 'manage_sites', 'view_analytics', 'manage_content'],
+  },
+  {
+    id: 'editor',
+    name: 'Editor',
+    description: 'Can edit content and limited settings',
+    color: 'warning' as const,
+    userCount: 25,
+    permissions: ['manage_content', 'view_analytics'],
+  },
+  {
+    id: 'viewer',
+    name: 'Viewer',
+    description: 'Read-only access',
+    color: 'default' as const,
+    userCount: 10,
+    permissions: ['view_analytics', 'view_content'],
+  },
+];
+
+export default function AdminRolesPermissionsPage() {
+  const [selectedRole, setSelectedRole] = useState(roles[0]);
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Roles & Permissions</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          Manage user roles and their permissions
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Roles List */}
+        <div className="lg:col-span-1">
+          <Card className="p-4">
+            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+              <Shield className="w-5 h-5" />
+              System Roles
+            </h2>
+            <div className="space-y-2">
+              {roles.map((role) => (
+                <button
+                  key={role.id}
+                  onClick={() => setSelectedRole(role)}
+                  className={`w-full text-left p-3 rounded-lg transition-colors ${
+                    selectedRole.id === role.id
+                      ? 'bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800'
+                      : 'hover:bg-gray-50 dark:hover:bg-gray-800'
+                  }`}
+                >
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="font-medium text-gray-900 dark:text-white">{role.name}</span>
+                    <Badge variant="light" color={role.color}>
+                      {role.userCount}
+                    </Badge>
+                  </div>
+                  <p className="text-xs text-gray-600 dark:text-gray-400">{role.description}</p>
+                </button>
+              ))}
+            </div>
+          </Card>
+        </div>
+
+        {/* Role Details */}
+        <div className="lg:col-span-2">
+          <Card className="p-6">
+            <div className="flex items-center justify-between mb-6">
+              <div>
+                <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{selectedRole.name}</h2>
+                <p className="text-gray-600 dark:text-gray-400 mt-1">{selectedRole.description}</p>
+              </div>
+              <Badge variant="light" color={selectedRole.color}>
+                {selectedRole.userCount} users
+              </Badge>
+            </div>
+
+            <div className="mb-6">
+              <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
+                <Lock className="w-5 h-5" />
+                Permissions
+              </h3>
+              <div className="space-y-2">
+                {selectedRole.permissions.map((permission) => (
+                  <div key={permission} className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                    <input
+                      type="checkbox"
+                      checked
+                      readOnly
+                      className="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
+                    />
+                    <span className="text-sm font-medium text-gray-900 dark:text-white">
+                      {permission.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
+                <Users className="w-5 h-5" />
+                Users with this Role
+              </h3>
+              <div className="text-sm text-gray-600 dark:text-gray-400">
+                {selectedRole.userCount} users currently have the {selectedRole.name} role
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/admin/AdminSubscriptionsPage.tsx

@@ -0,0 +1,129 @@
+/**
+ * Admin All Subscriptions Page
+ * Manage all subscriptions across all accounts
+ */
+
+import { useState, useEffect } from 'react';
+import { Search, Filter, Loader2, AlertCircle } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+import { fetchAPI } from '../../services/api';
+
+interface Subscription {
+  id: number;
+  account_name: string;
+  status: string;
+  current_period_start: string;
+  current_period_end: string;
+  cancel_at_period_end: boolean;
+  plan_name: string;
+}
+
+export default function AdminSubscriptionsPage() {
+  const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string>('');
+  const [statusFilter, setStatusFilter] = useState('all');
+
+  useEffect(() => {
+    loadSubscriptions();
+  }, []);
+
+  const loadSubscriptions = async () => {
+    try {
+      setLoading(true);
+      const data = await fetchAPI('/v1/admin/subscriptions/');
+      setSubscriptions(data.results || []);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load subscriptions');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredSubscriptions = subscriptions.filter((sub) => {
+    return statusFilter === 'all' || sub.status === statusFilter;
+  });
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">All Subscriptions</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          Manage all active and past subscriptions
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
+          <AlertCircle className="w-5 h-5 text-red-600" />
+          <p className="text-red-800 dark:text-red-200">{error}</p>
+        </div>
+      )}
+
+      <div className="mb-6 flex items-center gap-2">
+        <Filter className="w-5 h-5 text-gray-400" />
+        <select
+          value={statusFilter}
+          onChange={(e) => setStatusFilter(e.target.value)}
+          className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+        >
+          <option value="all">All Status</option>
+          <option value="active">Active</option>
+          <option value="trialing">Trialing</option>
+          <option value="past_due">Past Due</option>
+          <option value="canceled">Canceled</option>
+        </select>
+      </div>
+
+      <Card className="overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Account</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Plan</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Period End</th>
+                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+              {filteredSubscriptions.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="px-6 py-8 text-center text-gray-500">No subscriptions found</td>
+                </tr>
+              ) : (
+                filteredSubscriptions.map((sub) => (
+                  <tr key={sub.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                    <td className="px-6 py-4 font-medium">{sub.account_name}</td>
+                    <td className="px-6 py-4">{sub.plan_name}</td>
+                    <td className="px-6 py-4">
+                      <Badge variant="light" color={sub.status === 'active' ? 'success' : 'warning'}>
+                        {sub.status}
+                      </Badge>
+                    </td>
+                    <td className="px-6 py-4 text-sm text-gray-600">
+                      {new Date(sub.current_period_end).toLocaleDateString()}
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      <button className="text-blue-600 hover:text-blue-700 text-sm">Manage</button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  );
+}

frontend/src/pages/admin/AdminSystemDashboard.tsx

@@ -0,0 +1,216 @@
+/**
+ * Admin System Dashboard
+ * Overview page with stats, alerts, revenue, active accounts, pending approvals
+ */
+
+import { useState, useEffect } from 'react';
+import { 
+  Users, DollarSign, TrendingUp, AlertCircle, 
+  CheckCircle, Clock, Activity, Loader2 
+} from 'lucide-react';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+import { getAdminBillingStats } from '../../services/billing.api';
+
+export default function AdminSystemDashboard() {
+  const [loading, setLoading] = useState(true);
+  const [stats, setStats] = useState<any>(null);
+  const [error, setError] = useState<string>('');
+
+  useEffect(() => {
+    loadStats();
+  }, []);
+
+  const loadStats = async () => {
+    try {
+      setLoading(true);
+      const data = await getAdminBillingStats();
+      setStats(data);
+    } catch (err: any) {
+      setError(err.message || 'Failed to load system stats');
+      console.error('Admin stats load error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">System Dashboard</h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          Overview of system health, accounts, and revenue
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
+          <AlertCircle className="w-5 h-5 text-red-600" />
+          <p className="text-red-800 dark:text-red-200">{error}</p>
+        </div>
+      )}
+
+      {/* Quick Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+        <Card className="p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Total Accounts</div>
+              <div className="text-3xl font-bold text-gray-900 dark:text-white">
+                {stats?.total_accounts?.toLocaleString() || 0}
+              </div>
+              <div className="text-sm text-green-600 mt-1">
+                +{stats?.new_accounts_this_month || 0} this month
+              </div>
+            </div>
+            <Users className="w-12 h-12 text-blue-600 opacity-50" />
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Active Subscriptions</div>
+              <div className="text-3xl font-bold text-gray-900 dark:text-white">
+                {stats?.active_subscriptions?.toLocaleString() || 0}
+              </div>
+              <div className="text-sm text-gray-500 mt-1">paying customers</div>
+            </div>
+            <CheckCircle className="w-12 h-12 text-green-600 opacity-50" />
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Revenue This Month</div>
+              <div className="text-3xl font-bold text-gray-900 dark:text-white">
+                ${stats?.revenue_this_month || '0.00'}
+              </div>
+              <div className="text-sm text-green-600 mt-1">
+                <TrendingUp className="w-4 h-4 inline" /> +12% vs last month
+              </div>
+            </div>
+            <DollarSign className="w-12 h-12 text-green-600 opacity-50" />
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Pending Approvals</div>
+              <div className="text-3xl font-bold text-gray-900 dark:text-white">
+                {stats?.pending_approvals || 0}
+              </div>
+              <div className="text-sm text-yellow-600 mt-1">requires attention</div>
+            </div>
+            <Clock className="w-12 h-12 text-yellow-600 opacity-50" />
+          </div>
+        </Card>
+      </div>
+
+      {/* System Health */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+            <Activity className="w-5 h-5" />
+            System Health
+          </h2>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-gray-700 dark:text-gray-300">API Status</span>
+              <Badge variant="light" color="success">Operational</Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-gray-700 dark:text-gray-300">Database</span>
+              <Badge variant="light" color="success">Healthy</Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-gray-700 dark:text-gray-300">Background Jobs</span>
+              <Badge variant="light" color="success">Running</Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-gray-700 dark:text-gray-300">Last Check</span>
+              <span className="text-sm text-gray-600 dark:text-gray-400">
+                {stats?.system_health?.last_check || 'Just now'}
+              </span>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4">Credit Usage</h2>
+          <div className="space-y-4">
+            <div>
+              <div className="flex justify-between items-center mb-1">
+                <span className="text-sm text-gray-600 dark:text-gray-400">Issued (30 days)</span>
+                <span className="font-semibold">{stats?.credits_issued_30d?.toLocaleString() || 0}</span>
+              </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" style={{ width: '75%' }}></div>
+              </div>
+            </div>
+            <div>
+              <div className="flex justify-between items-center mb-1">
+                <span className="text-sm text-gray-600 dark:text-gray-400">Used (30 days)</span>
+                <span className="font-semibold">{stats?.credits_used_30d?.toLocaleString() || 0}</span>
+              </div>
+              <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                <div className="bg-green-600 h-2 rounded-full" style={{ width: '60%' }}></div>
+              </div>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* Recent Activity */}
+      <Card className="p-6">
+        <h2 className="text-lg font-semibold mb-4">Recent Activity</h2>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="border-b border-gray-200 dark:border-gray-700">
+              <tr>
+                <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">Account</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-right py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Amount</th>
+                <th className="text-right py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Time</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+              {stats?.recent_activity?.map((activity: any, idx: number) => (
+                <tr key={idx} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                  <td className="py-3 px-4">
+                    <Badge variant="light" color={activity.type === 'purchase' ? 'success' : 'primary'}>
+                      {activity.type}
+                    </Badge>
+                  </td>
+                  <td className="py-3 px-4 text-sm text-gray-900 dark:text-white">{activity.account_name}</td>
+                  <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">{activity.description}</td>
+                  <td className="py-3 px-4 text-sm text-right font-semibold">
+                    {activity.currency} {activity.amount}
+                  </td>
+                  <td className="py-3 px-4 text-sm text-right text-gray-500">
+                    {new Date(activity.timestamp).toLocaleTimeString()}
+                  </td>
+                </tr>
+              )) || (
+                <tr>
+                  <td colSpan={5} className="py-8 text-center text-gray-500">No recent activity</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  );
+}

frontend/src/pages/admin/AdminSystemHealthPage.tsx

@@ -0,0 +1,162 @@
+/**
+ * Admin System Health Page
+ * Monitor system health and status
+ */
+
+import { useState, useEffect } from 'react';
+import { Activity, Database, Server, Zap, CheckCircle, XCircle, Loader2 } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+import Badge from '../../components/ui/badge/Badge';
+
+interface HealthStatus {
+  component: string;
+  status: 'healthy' | 'degraded' | 'down';
+  message: string;
+  responseTime?: number;
+  lastChecked: string;
+}
+
+export default function AdminSystemHealthPage() {
+  const [healthData, setHealthData] = useState<HealthStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadHealthData();
+    const interval = setInterval(loadHealthData, 30000); // Refresh every 30s
+    return () => clearInterval(interval);
+  }, []);
+
+  const loadHealthData = async () => {
+    // Mock data - replace with API call
+    setHealthData([
+      {
+        component: 'API Server',
+        status: 'healthy',
+        message: 'All systems operational',
+        responseTime: 45,
+        lastChecked: new Date().toISOString(),
+      },
+      {
+        component: 'Database',
+        status: 'healthy',
+        message: 'Connection pool healthy',
+        responseTime: 12,
+        lastChecked: new Date().toISOString(),
+      },
+      {
+        component: 'Background Jobs',
+        status: 'healthy',
+        message: '5 workers active',
+        lastChecked: new Date().toISOString(),
+      },
+      {
+        component: 'Redis Cache',
+        status: 'healthy',
+        message: 'Cache hit rate: 94%',
+        responseTime: 2,
+        lastChecked: new Date().toISOString(),
+      },
+    ]);
+    setLoading(false);
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'healthy':
+        return <CheckCircle className="w-5 h-5 text-green-600" />;
+      case 'degraded':
+        return <Activity className="w-5 h-5 text-yellow-600" />;
+      case 'down':
+        return <XCircle className="w-5 h-5 text-red-600" />;
+      default:
+        return <Activity className="w-5 h-5 text-gray-600" />;
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'healthy':
+        return 'success' as const;
+      case 'degraded':
+        return 'warning' as const;
+      case 'down':
+        return 'error' as const;
+      default:
+        return 'default' as const;
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+      </div>
+    );
+  }
+
+  const allHealthy = healthData.every(item => item.status === 'healthy');
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+          <Activity className="w-6 h-6" />
+          System Health
+        </h1>
+        <p className="text-gray-600 dark:text-gray-400 mt-1">
+          Monitor system health and status
+        </p>
+      </div>
+
+      <div className="mb-6">
+        <Card className="p-6">
+          <div className="flex items-center gap-4">
+            {allHealthy ? (
+              <CheckCircle className="w-12 h-12 text-green-600" />
+            ) : (
+              <XCircle className="w-12 h-12 text-red-600" />
+            )}
+            <div>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+                {allHealthy ? 'All Systems Operational' : 'System Issues Detected'}
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400">
+                Last updated: {new Date().toLocaleString()}
+              </p>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {healthData.map((item) => (
+          <Card key={item.component} className="p-6">
+            <div className="flex items-start justify-between mb-4">
+              <div className="flex items-center gap-3">
+                {getStatusIcon(item.status)}
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                  {item.component}
+                </h3>
+              </div>
+              <Badge variant="light" color={getStatusColor(item.status)}>
+                {item.status}
+              </Badge>
+            </div>
+            
+            <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">{item.message}</p>
+            
+            {item.responseTime && (
+              <div className="text-sm text-gray-500">
+                Response time: {item.responseTime}ms
+              </div>
+            )}
+            
+            <div className="text-xs text-gray-400 mt-2">
+              Last checked: {new Date(item.lastChecked).toLocaleString()}
+            </div>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/admin/AdminSystemSettingsPage.tsx

@@ -0,0 +1,173 @@
+/**
+ * Admin System Settings Page
+ * Configure general system settings
+ */
+
+import { useState } from 'react';
+import { Save, Settings, Loader2 } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+
+export default function AdminSystemSettingsPage() {
+  const [saving, setSaving] = useState(false);
+  const [settings, setSettings] = useState({
+    siteName: 'IGNY8 Platform',
+    siteDescription: 'AI-powered content management platform',
+    maintenanceMode: false,
+    allowRegistration: true,
+    requireEmailVerification: true,
+    sessionTimeout: 3600,
+    maxUploadSize: 10,
+    defaultTimezone: 'UTC',
+  });
+
+  const handleSave = async () => {
+    setSaving(true);
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    setSaving(false);
+  };
+
+  return (
+    <div className="p-6">
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+            <Settings className="w-6 h-6" />
+            System Settings
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            Configure general system settings
+          </p>
+        </div>
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+        >
+          {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+          {saving ? 'Saving...' : 'Save Changes'}
+        </button>
+      </div>
+
+      <div className="space-y-6">
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4">General Settings</h2>
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Site Name
+              </label>
+              <input
+                type="text"
+                value={settings.siteName}
+                onChange={(e) => setSettings({ ...settings, siteName: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Site Description
+              </label>
+              <textarea
+                value={settings.siteDescription}
+                onChange={(e) => setSettings({ ...settings, siteDescription: e.target.value })}
+                rows={3}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Default Timezone
+              </label>
+              <select
+                value={settings.defaultTimezone}
+                onChange={(e) => setSettings({ ...settings, defaultTimezone: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              >
+                <option value="UTC">UTC</option>
+                <option value="America/New_York">Eastern Time</option>
+                <option value="America/Los_Angeles">Pacific Time</option>
+              </select>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4">Security & Access</h2>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="font-medium">Maintenance Mode</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">
+                  Disable access to non-admin users
+                </div>
+              </div>
+              <input
+                type="checkbox"
+                checked={settings.maintenanceMode}
+                onChange={(e) => setSettings({ ...settings, maintenanceMode: e.target.checked })}
+                className="w-5 h-5 text-blue-600 rounded focus:ring-blue-500"
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="font-medium">Allow Registration</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">
+                  Allow new users to register
+                </div>
+              </div>
+              <input
+                type="checkbox"
+                checked={settings.allowRegistration}
+                onChange={(e) => setSettings({ ...settings, allowRegistration: e.target.checked })}
+                className="w-5 h-5 text-blue-600 rounded focus:ring-blue-500"
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="font-medium">Require Email Verification</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">
+                  Users must verify email before accessing
+                </div>
+              </div>
+              <input
+                type="checkbox"
+                checked={settings.requireEmailVerification}
+                onChange={(e) => setSettings({ ...settings, requireEmailVerification: e.target.checked })}
+                className="w-5 h-5 text-blue-600 rounded focus:ring-blue-500"
+              />
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4">Limits & Restrictions</h2>
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Session Timeout (seconds)
+              </label>
+              <input
+                type="number"
+                value={settings.sessionTimeout}
+                onChange={(e) => setSettings({ ...settings, sessionTimeout: parseInt(e.target.value) })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Max Upload Size (MB)
+              </label>
+              <input
+                type="number"
+                value={settings.maxUploadSize}
+                onChange={(e) => setSettings({ ...settings, maxUploadSize: parseInt(e.target.value) })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/admin/PaymentApprovalPage.tsx

@@ -47,7 +47,7 @@ export default function AdminPaymentApprovalPage() {
       setProcessing(paymentId);
       setError('');
 
-      await approvePayment(paymentId, approvalNotes || undefined);
+      await approvePayment(paymentId, { notes: approvalNotes || undefined });
 
       // Remove from list
       setPayments(payments.filter((p) => p.id !== paymentId));
@@ -70,7 +70,7 @@ export default function AdminPaymentApprovalPage() {
       setProcessing(selectedPayment.id);
       setError('');
 
-      await rejectPayment(selectedPayment.id, rejectReason);
+      await rejectPayment(selectedPayment.id, { reason: rejectReason });
 
       // Remove from list
       setPayments(payments.filter((p) => p.id !== selectedPayment.id));

frontend/src/pages/settings/ProfileSettingsPage.tsx

@@ -0,0 +1,184 @@
+/**
+ * User Profile Settings Page
+ * Manage personal profile settings
+ */
+
+import { useState } from 'react';
+import { Save, User, Mail, Lock, Loader2 } from 'lucide-react';
+import { Card } from '../../components/ui/card';
+
+export default function ProfileSettingsPage() {
+  const [saving, setSaving] = useState(false);
+  const [profile, setProfile] = useState({
+    firstName: 'John',
+    lastName: 'Doe',
+    email: 'john@example.com',
+    phone: '+1 234 567 8900',
+    timezone: 'America/New_York',
+    language: 'en',
+    emailNotifications: true,
+    marketingEmails: false,
+  });
+
+  const handleSave = async () => {
+    setSaving(true);
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    setSaving(false);
+  };
+
+  return (
+    <div className="p-6 max-w-4xl">
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+            <User className="w-6 h-6" />
+            Profile Settings
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            Manage your personal information and preferences
+          </p>
+        </div>
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+        >
+          {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+          {saving ? 'Saving...' : 'Save Changes'}
+        </button>
+      </div>
+
+      <div className="space-y-6">
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4">Personal Information</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                First Name
+              </label>
+              <input
+                type="text"
+                value={profile.firstName}
+                onChange={(e) => setProfile({ ...profile, firstName: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Last Name
+              </label>
+              <input
+                type="text"
+                value={profile.lastName}
+                onChange={(e) => setProfile({ ...profile, lastName: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Email
+              </label>
+              <input
+                type="email"
+                value={profile.email}
+                onChange={(e) => setProfile({ ...profile, email: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Phone
+              </label>
+              <input
+                type="tel"
+                value={profile.phone}
+                onChange={(e) => setProfile({ ...profile, phone: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              />
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4">Preferences</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Timezone
+              </label>
+              <select
+                value={profile.timezone}
+                onChange={(e) => setProfile({ ...profile, timezone: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              >
+                <option value="America/New_York">Eastern Time</option>
+                <option value="America/Chicago">Central Time</option>
+                <option value="America/Denver">Mountain Time</option>
+                <option value="America/Los_Angeles">Pacific Time</option>
+                <option value="UTC">UTC</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Language
+              </label>
+              <select
+                value={profile.language}
+                onChange={(e) => setProfile({ ...profile, language: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
+              >
+                <option value="en">English</option>
+                <option value="es">Spanish</option>
+                <option value="fr">French</option>
+              </select>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4">Notifications</h2>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="font-medium">Email Notifications</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">
+                  Receive important updates via email
+                </div>
+              </div>
+              <input
+                type="checkbox"
+                checked={profile.emailNotifications}
+                onChange={(e) => setProfile({ ...profile, emailNotifications: e.target.checked })}
+                className="w-5 h-5 text-blue-600 rounded focus:ring-blue-500"
+              />
+            </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="font-medium">Marketing Emails</div>
+                <div className="text-sm text-gray-600 dark:text-gray-400">
+                  Receive marketing and promotional emails
+                </div>
+              </div>
+              <input
+                type="checkbox"
+                checked={profile.marketingEmails}
+                onChange={(e) => setProfile({ ...profile, marketingEmails: e.target.checked })}
+                className="w-5 h-5 text-blue-600 rounded focus:ring-blue-500"
+              />
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+            <Lock className="w-5 h-5" />
+            Security
+          </h2>
+          <button className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
+            Change Password
+          </button>
+        </Card>
+      </div>
+    </div>
+  );
+}

frontend/src/services/billing.api.ts

@@ -1,6 +1,6 @@
 /**
  * Billing API Service
- * Handles all billing-related API calls
+ * Uses STANDARD existing billing endpoints from /v1/billing/, /v1/system/, and /v1/admin/
  */
 
 import { fetchAPI } from './api';
@@ -9,6 +9,127 @@ import { fetchAPI } from './api';
 // TYPES
 // ============================================================================
 
+export interface CreditBalance {
+  credits: number;  // Current balance
+  plan_credits_per_month: number;  // Monthly allocation from plan
+  credits_used_this_month: number;  // Used this billing period
+  credits_remaining: number;  // Remaining credits
+}
+
+export interface CreditTransaction {
+  id: number;
+  amount: number;
+  transaction_type: 'purchase' | 'subscription' | 'refund' | 'deduction' | 'adjustment' | 'grant';
+  description: string;
+  created_at: string;
+  reference_id?: string;
+  metadata?: Record<string, any>;
+  balance_after?: number;
+}
+
+export interface CreditUsageLog {
+  id: number;
+  operation_type: string;
+  credits_used: number;
+  cost_usd: string;
+  model_used?: string;
+  tokens_input?: number;
+  tokens_output?: number;
+  created_at: string;
+  metadata?: Record<string, any>;
+}
+
+export interface AdminBillingStats {
+  total_accounts: number;
+  active_subscriptions: number;
+  total_revenue: string;
+  revenue_this_month?: string;
+  new_accounts_this_month?: number;
+  active_accounts?: number;
+  credits_issued_30d?: number;
+  credits_used_30d?: number;
+  pending_approvals?: number;
+  invoices_pending?: number;
+  invoices_overdue?: number;
+  system_health?: {
+    status: string;
+    last_check: string;
+  };
+  recent_activity?: Array<{
+    id: number;
+    type: string;
+    account_name: string;
+    amount: string;
+    currency: string;
+    timestamp: string;
+    description: string;
+  }>;
+}
+
+export interface CreditCostConfig {
+  id: number;
+  operation_type: string;
+  credits_cost: number;
+  unit: string;
+  display_name: string;
+  description: string;
+  is_active: boolean;
+  updated_at: string;
+}
+
+export interface AdminUser {
+  id: number;
+  email: string;
+  account_name: string;
+  account_id: number;
+  role: string;
+  is_active: boolean;
+  credit_balance: number;
+  plan_name?: string;
+  created_at: string;
+  last_login?: string;
+}
+
+export interface Invoice {
+  id: number;
+  invoice_number: string;
+  status: 'draft' | 'pending' | 'paid' | 'void' | 'uncollectible';
+  total_amount: string;
+  subtotal: string;
+  tax_amount: string;
+  currency: string;
+  created_at: string;
+  paid_at?: string;
+  due_date?: string;
+  line_items: Array<{
+    description: string;
+    amount: string;
+    quantity?: number;
+  }>;
+  billing_email?: string;
+  notes?: string;
+  stripe_invoice_id?: string;
+  billing_period_start?: string;
+  billing_period_end?: string;
+}
+
+export interface Payment {
+  id: number;
+  invoice_id: number;
+  amount: string;
+  currency: string;
+  status: 'pending' | 'processing' | 'succeeded' | 'failed' | 'refunded' | 'cancelled' | 'pending_approval';
+  payment_method: 'stripe' | 'paypal' | 'bank_transfer' | 'local_wallet' | 'manual';
+  created_at: string;
+  processed_at?: string;
+  failed_at?: string;
+  refunded_at?: string;
+  failure_reason?: string;
+  manual_reference?: string;
+  manual_notes?: string;
+  transaction_reference?: string;
+}
+
 export interface CreditPackage {
   id: number;
   name: string;
@@ -21,106 +142,182 @@ export interface CreditPackage {
   display_order: number;
 }
 
-export interface Invoice {
+export interface TeamMember {
   id: number;
-  invoice_number: string;
-  status: 'draft' | 'pending' | 'paid' | 'void';
-  total_amount: string;
-  subtotal: string;
-  tax_amount: string;
-  currency: string;
+  email: string;
+  first_name: string;
+  last_name: string;
+  role: string;
+  is_active: boolean;
+  is_staff?: boolean;
   created_at: string;
-  paid_at: string | null;
-  due_date: string | null;
-  line_items: Array<{
-    description: string;
-    amount: string;
-    quantity: number;
-  }>;
-  billing_period_start: string | null;
-  billing_period_end: string | null;
-}
-
-export interface Payment {
-  id: number;
-  amount: string;
-  currency: string;
-  payment_method: 'stripe' | 'paypal' | 'bank_transfer' | 'local_wallet' | 'manual';
-  status: 'pending' | 'completed' | 'failed' | 'pending_approval';
-  created_at: string;
-  processed_at: string | null;
-  invoice_id: number;
-  invoice_number: string | null;
-  transaction_reference: string;
-  failure_reason: string | null;
+  date_joined?: string;
+  last_login?: string;
 }
 
 export interface PaymentMethod {
-  type: string;
-  name: string;
-  instructions: string;
+  id: string;
+  type: 'stripe' | 'paypal' | 'bank_transfer' | 'local_wallet';
+  display_name: string;
+  name?: string;
+  is_enabled: boolean;
+  instructions?: string;
   bank_details?: {
-    bank_name: string;
-    account_number: string;
-    routing_number: string;
-    swift_code: string;
+    bank_name?: string;
+    account_number?: string;
+    routing_number?: string;
+    swift_code?: string;
   };
   wallet_details?: {
-    wallet_type: string;
-    wallet_id: string;
+    wallet_type?: string;
+    wallet_id?: string;
   };
 }
 
-export interface CreditTransaction {
-  id: number;
-  amount: number;
-  transaction_type: string;
-  description: string;
-  created_at: string;
-  reference_id: string;
-  metadata: Record<string, any>;
-}
-
-export interface CreditBalance {
-  balance: number;
-  subscription_plan: string;
-  monthly_credits: number;
-  subscription_status: string | null;
-}
-
-export interface PendingPayment {
-  id: number;
+export interface PendingPayment extends Payment {
   account_name: string;
-  amount: string;
-  currency: string;
-  payment_method: string;
-  transaction_reference: string;
-  created_at: string;
-  invoice_number: string | null;
-  admin_notes: string;
+  user_email: string;
+  invoice_number?: string;
+  admin_notes?: string;
 }
 
 // ============================================================================
-// CREDIT PACKAGES
+// CREDIT BALANCE & TRANSACTIONS
 // ============================================================================
 
-export async function getCreditPackages(): Promise<{ results: CreditPackage[]; count: number }> {
-  return fetchAPI('/billing/v2/credit-packages/');
+export async function getCreditBalance(): Promise<CreditBalance> {
+  return fetchAPI('/v1/billing/credits/balance/balance/');
 }
 
-export async function purchaseCreditPackage(
-  packageId: number,
-  paymentMethod: string
-): Promise<{
-  invoice_id: number;
-  invoice_number: string;
-  total_amount: string;
-  message: string;
-  next_action: string;
+export async function getCreditTransactions(): Promise<{
+  results: CreditTransaction[];
+  count: number;
+  current_balance?: number;
 }> {
-  return fetchAPI(`/billing/v2/credit-packages/${packageId}/purchase/`, {
+  return fetchAPI('/v1/billing/transactions/');
+}
+
+// ============================================================================
+// CREDIT USAGE LOGS
+// ============================================================================
+
+export async function getCreditUsage(params?: {
+  operation_type?: string;
+  start_date?: string;
+  end_date?: string;
+}): Promise<{
+  results: CreditUsageLog[];
+  count: number;
+}> {
+  const queryParams = new URLSearchParams();
+  if (params?.operation_type) queryParams.append('operation_type', params.operation_type);
+  if (params?.start_date) queryParams.append('start_date', params.start_date);
+  if (params?.end_date) queryParams.append('end_date', params.end_date);
+  
+  const url = `/v1/billing/credits/usage/${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
+  return fetchAPI(url);
+}
+
+export async function getCreditUsageSummary(params?: {
+  start_date?: string;
+  end_date?: string;
+}): Promise<{
+  total_credits_used: number;
+  total_cost_usd: string;
+  by_operation: Record<string, {
+    credits: number;
+    cost: number;
+    count: number;
+  }>;
+  by_model: Record<string, {
+    credits: number;
+    cost: number;
+    count: number;
+  }>;
+}> {
+  const queryParams = new URLSearchParams();
+  if (params?.start_date) queryParams.append('start_date', params.start_date);
+  if (params?.end_date) queryParams.append('end_date', params.end_date);
+  
+  const url = `/v1/billing/credits/usage/summary/${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
+  return fetchAPI(url);
+}
+
+export async function getCreditUsageLimits(): Promise<{
+  plan_name: string;
+  plan_credits_per_month: number;
+  credits_used_this_month: number;
+  credits_remaining: number;
+  percentage_used: number;
+  approaching_limit: boolean;
+}> {
+  return fetchAPI('/v1/billing/credits/usage/limits/');
+}
+
+// ============================================================================
+// ADMIN - BILLING STATS & MANAGEMENT
+// ============================================================================
+
+export async function getAdminBillingStats(): Promise<AdminBillingStats> {
+  return fetchAPI('/v1/admin/billing/stats/');
+}
+
+export async function getAdminUsers(params?: {
+  search?: string;
+  role?: string;
+  is_active?: boolean;
+}): Promise<{
+  results: AdminUser[];
+  count: number;
+}> {
+  const queryParams = new URLSearchParams();
+  if (params?.search) queryParams.append('search', params.search);
+  if (params?.role) queryParams.append('role', params.role);
+  if (params?.is_active !== undefined) queryParams.append('is_active', String(params.is_active));
+  
+  const url = `/v1/admin/users/${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
+  return fetchAPI(url);
+}
+
+export async function adjustUserCredits(
+  userId: number,
+  data: {
+    amount: number;
+    reason: string;
+  }
+): Promise<{
+  message: string;
+  new_balance: number;
+}> {
+  return fetchAPI(`/v1/admin/users/${userId}/adjust-credits/`, {
     method: 'POST',
-    body: JSON.stringify({ payment_method: paymentMethod }),
+    body: JSON.stringify(data),
+  });
+}
+
+// ============================================================================
+// ADMIN - CREDIT COSTS CONFIGURATION
+// ============================================================================
+
+export async function getCreditCosts(): Promise<{
+  results: CreditCostConfig[];
+  count: number;
+}> {
+  return fetchAPI('/v1/admin/credit-costs/');
+}
+
+export async function updateCreditCosts(
+  costs: Array<{
+    operation_type: string;
+    credits_cost: number;
+  }>
+): Promise<{
+  message: string;
+  updated_count: number;
+}> {
+  return fetchAPI('/v1/admin/credit-costs/', {
+    method: 'POST',
+    body: JSON.stringify({ costs }),
   });
 }
 
@@ -128,24 +325,32 @@ export async function purchaseCreditPackage(
 // INVOICES
 // ============================================================================
 
-export async function getInvoices(status?: string): Promise<{ results: Invoice[]; count: number }> {
-  const params = status ? `?status=${status}` : '';
-  return fetchAPI(`/billing/v2/invoices/${params}`);
+export async function getInvoices(params?: {
+  status?: string;
+}): Promise<{
+  results: Invoice[];
+  count: number;
+}> {
+  const queryParams = new URLSearchParams();
+  if (params?.status) queryParams.append('status', params.status);
+  
+  const url = `/v1/billing/invoices/${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
+  return fetchAPI(url);
 }
 
-export async function getInvoice(invoiceId: number): Promise<Invoice> {
-  return fetchAPI(`/billing/v2/invoices/${invoiceId}/`);
+export async function getInvoiceDetail(invoiceId: number): Promise<Invoice> {
+  return fetchAPI(`/v1/billing/invoices/${invoiceId}/`);
 }
 
 export async function downloadInvoicePDF(invoiceId: number): Promise<Blob> {
-  const response = await fetch(`/api/v1/billing/v2/invoices/${invoiceId}/download_pdf/`, {
+  const response = await fetch(`/api/v1/billing/invoices/${invoiceId}/download_pdf/`, {
     headers: {
-      Authorization: `Bearer ${localStorage.getItem('access_token')}`,
+      'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
     },
   });
   
   if (!response.ok) {
-    throw new Error('Failed to download invoice');
+    throw new Error('Failed to download invoice PDF');
   }
   
   return response.blob();
@@ -155,51 +360,126 @@ export async function downloadInvoicePDF(invoiceId: number): Promise<Blob> {
 // PAYMENTS
 // ============================================================================
 
-export async function getPayments(status?: string): Promise<{ results: Payment[]; count: number }> {
-  const params = status ? `?status=${status}` : '';
-  return fetchAPI(`/billing/v2/payments/${params}`);
-}
-
-export async function getAvailablePaymentMethods(): Promise<{
-  methods: PaymentMethod[];
-  stripe: boolean;
-  paypal: boolean;
-  bank_transfer: boolean;
-  local_wallet: boolean;
+export async function getPayments(params?: {
+  status?: string;
+  invoice_id?: number;
+}): Promise<{
+  results: Payment[];
+  count: number;
 }> {
-  return fetchAPI('/billing/v2/payments/available_methods/');
+  const queryParams = new URLSearchParams();
+  if (params?.status) queryParams.append('status', params.status);
+  if (params?.invoice_id) queryParams.append('invoice_id', String(params.invoice_id));
+  
+  const url = `/v1/billing/payments/${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
+  return fetchAPI(url);
 }
 
 export async function submitManualPayment(data: {
   invoice_id: number;
-  payment_method: 'bank_transfer' | 'local_wallet';
-  transaction_reference: string;
+  payment_method: 'bank_transfer' | 'local_wallet' | 'manual';
+  amount: string;
+  currency?: string;
+  reference?: string;
   notes?: string;
+  proof_file?: File;
 }): Promise<{
   id: number;
   status: string;
   message: string;
 }> {
-  return fetchAPI('/billing/v2/payments/create_manual_payment/', {
+  return fetchAPI('/v1/billing/payments/manual/', {
     method: 'POST',
     body: JSON.stringify(data),
   });
 }
 
 // ============================================================================
-// CREDIT TRANSACTIONS
+// CREDIT PACKAGES
 // ============================================================================
 
-export async function getCreditTransactions(): Promise<{
-  results: CreditTransaction[];
+export async function getCreditPackages(): Promise<{
+  results: CreditPackage[];
   count: number;
-  current_balance: number;
 }> {
-  return fetchAPI('/billing/v2/transactions/');
+  return fetchAPI('/v1/billing/credit-packages/');
 }
 
-export async function getCreditBalance(): Promise<CreditBalance> {
-  return fetchAPI('/billing/v2/transactions/balance/');
+export async function purchaseCreditPackage(data: {
+  package_id: number;
+  payment_method: 'stripe' | 'paypal' | 'bank_transfer' | 'local_wallet';
+}): Promise<{
+  id: number;
+  status: string;
+  message?: string;
+  stripe_client_secret?: string;
+  paypal_order_id?: string;
+}> {
+  return fetchAPI(`/v1/billing/credit-packages/${data.package_id}/purchase/`, {
+    method: 'POST',
+    body: JSON.stringify({ payment_method: data.payment_method }),
+  });
+}
+
+// ============================================================================
+// TEAM MANAGEMENT
+// ============================================================================
+
+export async function getTeamMembers(): Promise<{
+  results: TeamMember[];
+  count: number;
+}> {
+  return fetchAPI('/v1/account/team/');
+}
+
+export async function inviteTeamMember(data: {
+  email: string;
+  first_name?: string;
+  last_name?: string;
+  role?: string;
+}): Promise<{
+  message: string;
+  member?: TeamMember;
+}> {
+  return fetchAPI('/v1/account/team/invite/', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  });
+}
+
+export async function removeTeamMember(memberId: number): Promise<{
+  message: string;
+}> {
+  return fetchAPI(`/v1/account/team/${memberId}/`, {
+    method: 'DELETE',
+  });
+}
+
+// ============================================================================
+// PAYMENT METHODS
+// ============================================================================
+
+export async function getAvailablePaymentMethods(): Promise<{
+  results: PaymentMethod[];
+  count: number;
+}> {
+  return fetchAPI('/v1/billing/payment-methods/');
+}
+
+export async function createManualPayment(data: {
+  amount: string;
+  payment_method: string;
+  reference: string;
+  notes?: string;
+}): Promise<{
+  id: number;
+  status: string;
+  message: string;
+}> {
+  return fetchAPI('/v1/billing/payments/manual/', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  });
 }
 
 // ============================================================================
@@ -210,44 +490,94 @@ export async function getPendingPayments(): Promise<{
   results: PendingPayment[];
   count: number;
 }> {
-  return fetchAPI('/billing/v2/admin/pending_payments/');
+  return fetchAPI('/v1/admin/payments/pending/');
 }
 
-export async function approvePayment(
-  paymentId: number,
-  notes?: string
-): Promise<{
-  id: number;
-  status: string;
+export async function approvePayment(paymentId: number, data?: {
+  notes?: string;
+}): Promise<{
   message: string;
+  payment: Payment;
 }> {
-  return fetchAPI(`/billing/v2/admin/${paymentId}/approve_payment/`, {
+  return fetchAPI(`/v1/admin/payments/${paymentId}/approve/`, {
     method: 'POST',
-    body: JSON.stringify({ notes }),
+    body: JSON.stringify(data || {}),
   });
 }
 
-export async function rejectPayment(
-  paymentId: number,
-  reason: string
-): Promise<{
-  id: number;
-  status: string;
+export async function rejectPayment(paymentId: number, data: {
+  reason: string;
+  notes?: string;
+}): Promise<{
   message: string;
+  payment: Payment;
 }> {
-  return fetchAPI(`/billing/v2/admin/${paymentId}/reject_payment/`, {
+  return fetchAPI(`/v1/admin/payments/${paymentId}/reject/`, {
     method: 'POST',
-    body: JSON.stringify({ reason }),
+    body: JSON.stringify(data),
   });
 }
 
-export async function getAdminBillingStats(): Promise<{
-  total_accounts: number;
-  active_subscriptions: number;
-  total_revenue: string;
-  pending_approvals: number;
-  invoices_pending: number;
-  invoices_paid: number;
-}> {
-  return fetchAPI('/billing/v2/admin/stats/');
+// ============================================================================
+// ACCOUNT MANAGEMENT
+// ============================================================================
+
+export interface AccountSettings {
+  id: number;
+  name: string;
+  slug: string;
+  billing_address_line1?: string;
+  billing_address_line2?: string;
+  billing_city?: string;
+  billing_state?: string;
+  billing_postal_code?: string;
+  billing_country?: string;
+  tax_id?: string;
+  billing_email?: string;
+  credit_balance: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export async function getAccountSettings(): Promise<AccountSettings> {
+  return fetchAPI('/v1/account/settings/');
+}
+
+export async function updateAccountSettings(data: Partial<AccountSettings>): Promise<{
+  message: string;
+  account: AccountSettings;
+}> {
+  return fetchAPI('/v1/account/settings/', {
+    method: 'PATCH',
+    body: JSON.stringify(data),
+  });
+}
+
+export interface UsageAnalytics {
+  period_days: number;
+  start_date: string;
+  end_date: string;
+  current_balance: number;
+  usage_by_type: Array<{
+    transaction_type: string;
+    total: number;
+    count: number;
+  }>;
+  purchases_by_type: Array<{
+    transaction_type: string;
+    total: number;
+    count: number;
+  }>;
+  daily_usage: Array<{
+    date: string;
+    usage: number;
+    purchases: number;
+    net: number;
+  }>;
+  total_usage: number;
+  total_purchases: number;
+}
+
+export async function getUsageAnalytics(days: number = 30): Promise<UsageAnalytics> {
+  return fetchAPI(`/v1/account/usage/analytics/?days=${days}`);
 }

frontend/src/services/billing.api.ts.backup

@@ -0,0 +1,634 @@
+/**
+ * Billing API Service
+ * Uses STANDARD existing billing endpoints from /v1/billing/ and /v1/system/
+ */
+
+import { fetchAPI } from './api';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+export interface CreditBalance {
+  balance: number;
+  credits: number;
+  plan_credits_per_month: number;
+  credits_used_this_month: number;
+  credits_remaining: number;
+  subscription_plan?: string;
+  monthly_credits?: number;
+  subscription_status?: string;
+}
+
+export interface CreditTransaction {
+  id: number;
+  amount: number;
+  transaction_type: 'purchase' | 'subscription' | 'refund' | 'deduction' | 'adjustment' | 'grant';
+  description: string;
+  created_at: string;
+  reference_id?: string;
+  metadata?: Record<string, any>;
+  balance_after?: number;
+}
+
+export interface CreditUsageLog {
+  id: number;
+  operation_type: string;
+  credits_used: number;
+  cost_usd: string;
+  model_used?: string;
+  tokens_input?: number;
+  tokens_output?: number;
+  created_at: string;
+  metadata?: Record<string, any>;
+}
+
+export interface AdminBillingStats {
+  total_accounts: number;
+  active_subscriptions: number;
+  total_revenue: string;
+  revenue_this_month?: string;
+  new_accounts_this_month?: number;
+  active_accounts?: number;
+  credits_issued_30d?: number;
+  credits_used_30d?: number;
+  pending_approvals?: number;
+  invoices_pending?: number;
+  invoices_overdue?: number;
+  system_health?: {
+    status: string;
+    last_check: string;
+  };
+  recent_activity?: Array<{
+    id: number;
+    type: string;
+    account_name: string;
+    amount: string;
+    currency: string;
+    timestamp: string;
+    description: string;
+  }>;
+}
+
+export interface CreditCostConfig {
+  id: number;
+  operation_type: string;
+  credits_cost: number;
+  unit: string;
+  display_name: string;
+  description: string;
+  is_active: boolean;
+  updated_at: string;
+}
+
+export interface AdminUser {
+  id: number;
+  email: string;
+  account_name: string;
+  account_id: number;
+  role: string;
+  is_active: boolean;
+  credit_balance: number;
+  plan_name?: string;
+  created_at: string;
+  last_login?: string;
+}
+
+// ============================================================================
+// CREDIT BALANCE & TRANSACTIONS
+// ============================================================================
+
+export async function getCreditBalance(): Promise<CreditBalance> {
+  return fetchAPI('/v1/billing/credits/balance/balance/');
+}
+
+export async function getCreditTransactions(): Promise<{
+  results: CreditTransaction[];
+  count: number;
+  current_balance?: number;
+}> {
+  return fetchAPI('/v1/billing/credits/transactions/');
+}
+
+// ============================================================================
+// CREDIT USAGE LOGS
+// ============================================================================
+
+export async function getCreditUsage(params?: {
+  operation_type?: string;
+  start_date?: string;
+  end_date?: string;
+}): Promise<{
+  results: CreditUsageLog[];
+  count: number;
+}> {
+  const queryParams = new URLSearchParams();
+  if (params?.operation_type) queryParams.append('operation_type', params.operation_type);
+  if (params?.start_date) queryParams.append('start_date', params.start_date);
+  if (params?.end_date) queryParams.append('end_date', params.end_date);
+  
+  const url = `/v1/billing/credits/usage/${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
+  return fetchAPI(url);
+}
+
+export async function getCreditUsageSummary(params?: {
+  start_date?: string;
+  end_date?: string;
+}): Promise<{
+  total_credits_used: number;
+  total_cost_usd: string;
+  by_operation: Record<string, {
+    credits: number;
+    cost: number;
+    count: number;
+  }>;
+  by_model: Record<string, {
+    credits: number;
+    cost: number;
+    count: number;
+  }>;
+}> {
+  const queryParams = new URLSearchParams();
+  if (params?.start_date) queryParams.append('start_date', params.start_date);
+  if (params?.end_date) queryParams.append('end_date', params.end_date);
+  
+  const url = `/v1/billing/credits/usage/summary/${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
+  return fetchAPI(url);
+}
+
+export async function getCreditUsageLimits(): Promise<{
+  plan_name: string;
+  plan_credits_per_month: number;
+  credits_used_this_month: number;
+  credits_remaining: number;
+  percentage_used: number;
+  approaching_limit: boolean;
+}> {
+  return fetchAPI('/v1/billing/credits/usage/limits/');
+}
+
+// ============================================================================
+// ADMIN - BILLING STATS & MANAGEMENT
+// ============================================================================
+
+export async function getAdminBillingStats(): Promise<AdminBillingStats> {
+  return fetchAPI('/v1/admin/billing/stats/');
+}
+
+export async function getAdminUsers(params?: {
+  search?: string;
+  role?: string;
+  is_active?: boolean;
+}): Promise<{
+  results: AdminUser[];
+  count: number;
+}> {
+  const queryParams = new URLSearchParams();
+  if (params?.search) queryParams.append('search', params.search);
+  if (params?.role) queryParams.append('role', params.role);
+  if (params?.is_active !== undefined) queryParams.append('is_active', String(params.is_active));
+  
+  const url = `/v1/admin/users/${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
+  return fetchAPI(url);
+}
+
+export async function adjustUserCredits(
+  userId: number,
+  data: {
+    amount: number;
+    reason: string;
+  }
+): Promise<{
+  message: string;
+  new_balance: number;
+}> {
+  return fetchAPI(`/v1/admin/users/${userId}/adjust-credits/`, {
+    method: 'POST',
+    body: JSON.stringify(data),
+  });
+}
+
+// ============================================================================
+// ADMIN - CREDIT COSTS CONFIGURATION
+// ============================================================================
+
+export async function getCreditCosts(): Promise<{
+  results: CreditCostConfig[];
+  count: number;
+}> {
+  return fetchAPI('/v1/admin/credit-costs/');
+}
+
+export async function updateCreditCosts(
+  costs: Array<{
+    operation_type: string;
+    credits_cost: number;
+  }>
+): Promise<{
+  message: string;
+  updated_count: number;
+}> {
+  return fetchAPI('/v1/admin/credit-costs/', {
+    method: 'POST',
+    body: JSON.stringify({ costs }),
+  });
+}
+
+// ============================================================================
+// ACCOUNT SETTINGS (from /v1/system/)
+// ============================================================================
+
+export interface AccountSettings {
+  id: number;
+  name: string;
+  slug: string;
+  billing_address_line1?: string;
+  billing_address_line2?: string;
+  billing_city?: string;
+  billing_state?: string;
+  billing_postal_code?: string;
+  billing_country?: string;
+  tax_id?: string;
+  billing_email?: string;
+  credit_balance: number;
+  plan_name?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export async function getAccountSettings(): Promise<AccountSettings> {
+  return fetchAPI('/v1/system/settings/account/');
+}
+
+export async function updateAccountSettings(
+  settings: Partial<AccountSettings>
+): Promise<{
+  message: string;
+  account: Partial<AccountSettings>;
+}> {
+  return fetchAPI('/v1/system/settings/account/', {
+    method: 'PATCH',
+    body: JSON.stringify(settings),
+  });
+}
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+export interface CreditPackage {
+  id: number;
+  name: string;
+  slug: string;
+  credits: number;
+  price: string;
+  discount_percentage: number;
+  is_featured: boolean;
+  description: string;
+  display_order: number;
+}
+
+export interface Invoice {
+  id: number;
+  invoice_number: string;
+  status: 'draft' | 'pending' | 'paid' | 'void';
+  total_amount: string;
+  subtotal: string;
+  tax_amount: string;
+  currency: string;
+  created_at: string;
+  paid_at: string | null;
+  due_date: string | null;
+  line_items: Array<{
+    description: string;
+    amount: string;
+    quantity: number;
+  }>;
+  billing_period_start: string | null;
+  billing_period_end: string | null;
+}
+
+export interface Payment {
+  id: number;
+  amount: string;
+  currency: string;
+  payment_method: 'stripe' | 'paypal' | 'bank_transfer' | 'local_wallet' | 'manual';
+  status: 'pending' | 'completed' | 'failed' | 'pending_approval';
+  created_at: string;
+  processed_at: string | null;
+  invoice_id: number;
+  invoice_number: string | null;
+  transaction_reference: string;
+  failure_reason: string | null;
+}
+
+export interface PaymentMethod {
+  type: string;
+  name: string;
+  instructions: string;
+  bank_details?: {
+    bank_name: string;
+    account_number: string;
+    routing_number: string;
+    swift_code: string;
+  };
+  wallet_details?: {
+    wallet_type: string;
+    wallet_id: string;
+  };
+}
+
+export interface CreditTransaction {
+  id: number;
+  amount: number;
+  transaction_type: string;
+  description: string;
+  created_at: string;
+  reference_id: string;
+  metadata: Record<string, any>;
+}
+
+export interface CreditBalance {
+  balance: number;
+  subscription_plan: string;
+  monthly_credits: number;
+  subscription_status: string | null;
+}
+
+export interface PendingPayment {
+  id: number;
+  account_name: string;
+  amount: string;
+  currency: string;
+  payment_method: string;
+  transaction_reference: string;
+  created_at: string;
+  invoice_number: string | null;
+  admin_notes: string;
+}
+
+// ============================================================================
+// CREDIT PACKAGES
+// ============================================================================
+
+export async function getCreditPackages(): Promise<{ results: CreditPackage[]; count: number }> {
+  return fetchAPI('/billing/v2/credit-packages/');
+}
+
+export async function purchaseCreditPackage(
+  packageId: number,
+  paymentMethod: string
+): Promise<{
+  invoice_id: number;
+  invoice_number: string;
+  total_amount: string;
+  message: string;
+  next_action: string;
+}> {
+  return fetchAPI(`/billing/v2/credit-packages/${packageId}/purchase/`, {
+    method: 'POST',
+    body: JSON.stringify({ payment_method: paymentMethod }),
+  });
+}
+
+// ============================================================================
+// INVOICES
+// ============================================================================
+
+export async function getInvoices(status?: string): Promise<{ results: Invoice[]; count: number }> {
+  const params = status ? `?status=${status}` : '';
+  return fetchAPI(`/billing/v2/invoices/${params}`);
+}
+
+export async function getInvoice(invoiceId: number): Promise<Invoice> {
+  return fetchAPI(`/v1/billing/v2/invoices/${invoiceId}/`);
+}
+
+export async function downloadInvoicePDF(invoiceId: number): Promise<Blob> {
+  const response = await fetch(`/api/v1/billing/v2/invoices/${invoiceId}/download_pdf/`, {
+    headers: {
+      Authorization: `Bearer ${localStorage.getItem('access_token')}`,
+    },
+  });
+  
+  if (!response.ok) {
+    throw new Error('Failed to download invoice');
+  }
+  
+  return response.blob();
+}
+
+// ============================================================================
+// PAYMENTS
+// ============================================================================
+
+export async function getPayments(status?: string): Promise<{ results: Payment[]; count: number }> {
+  const params = status ? `?status=${status}` : '';
+  return fetchAPI(`/v1/billing/v2/payments/${params}`);
+}
+
+export async function getAvailablePaymentMethods(): Promise<{
+  methods: PaymentMethod[];
+  stripe: boolean;
+  paypal: boolean;
+  bank_transfer: boolean;
+  local_wallet: boolean;
+}> {
+  return fetchAPI('/v1/billing/v2/payments/available_methods/');
+}
+
+export async function createManualPayment(data: {
+  invoice_id: number;
+  payment_method: 'bank_transfer' | 'local_wallet';
+  transaction_reference: string;
+  notes?: string;
+}): Promise<{
+  id: number;
+  status: string;
+  message: string;
+}> {
+  return fetchAPI('/v1/billing/v2/payments/create_manual_payment/', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  });
+}
+
+// ============================================================================
+// CREDIT TRANSACTIONS
+// ============================================================================
+
+export async function getCreditTransactions(): Promise<{
+  results: CreditTransaction[];
+  count: number;
+  current_balance: number;
+}> {
+  return fetchAPI('/v1/billing/credits/transactions/');
+}
+
+export async function getCreditBalance(): Promise<CreditBalance> {
+  return fetchAPI('/v1/billing/credits/balance/balance/');
+}
+
+// ============================================================================
+// ADMIN - PAYMENT APPROVALS
+// ============================================================================
+
+export async function getPendingPayments(): Promise<{
+  results: PendingPayment[];
+  count: number;
+}> {
+  return fetchAPI('/v1/billing/v2/admin/pending_payments/');
+}
+
+export async function approvePayment(
+  paymentId: number,
+  notes?: string
+): Promise<{
+  id: number;
+  status: string;
+  message: string;
+}> {
+  return fetchAPI(`/v1/billing/v2/admin/${paymentId}/approve_payment/`, {
+    method: 'POST',
+    body: JSON.stringify({ notes }),
+  });
+}
+
+export async function rejectPayment(
+  paymentId: number,
+  reason: string
+): Promise<{
+  id: number;
+  status: string;
+  message: string;
+}> {
+  return fetchAPI(`/v1/billing/v2/admin/${paymentId}/reject_payment/`, {
+    method: 'POST',
+    body: JSON.stringify({ reason }),
+  });
+}
+
+export async function getAdminBillingStats(): Promise<{
+  total_accounts: number;
+  active_subscriptions: number;
+  total_revenue: string;
+  pending_approvals: number;
+  invoices_pending: number;
+  invoices_paid: number;
+}> {
+  return fetchAPI('/v1/billing/v2/admin/stats/');
+}
+
+// ============================================================================
+// ACCOUNT SETTINGS
+// ============================================================================
+
+export interface AccountSettings {
+  id: number;
+  name: string;
+  slug: string;
+  billing_address_line1: string;
+  billing_address_line2: string;
+  billing_city: string;
+  billing_state: string;
+  billing_postal_code: string;
+  billing_country: string;
+  tax_id: string;
+  billing_email: string;
+  credit_balance: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export async function getAccountSettings(): Promise<AccountSettings> {
+  return fetchAPI('/v1/system/settings/account/');
+}
+
+export async function updateAccountSettings(
+  settings: Partial<AccountSettings>
+): Promise<{
+  message: string;
+  account: Partial<AccountSettings>;
+}> {
+  return fetchAPI('/v1/account/settings/', {
+    method: 'PATCH',
+    body: JSON.stringify(settings),
+  });
+}
+
+// ============================================================================
+// TEAM MANAGEMENT
+// ============================================================================
+
+export interface TeamMember {
+  id: number;
+  email: string;
+  first_name: string;
+  last_name: string;
+  is_active: boolean;
+  is_staff: boolean;
+  date_joined: string;
+  last_login: string | null;
+}
+
+export async function getTeamMembers(): Promise<{
+  results: TeamMember[];
+  count: number;
+}> {
+  return fetchAPI('/v1/account/team/');
+}
+
+export async function inviteTeamMember(data: {
+  email: string;
+  first_name?: string;
+  last_name?: string;
+}): Promise<{
+  message: string;
+  user: Partial<TeamMember>;
+}> {
+  return fetchAPI('/v1/account/team/', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  });
+}
+
+export async function removeTeamMember(userId: number): Promise<{
+  message: string;
+}> {
+  return fetchAPI(`/v1/account/team/${userId}/`, {
+    method: 'DELETE',
+  });
+}
+
+// ============================================================================
+// USAGE ANALYTICS
+// ============================================================================
+
+export interface UsageAnalytics {
+  period_days: number;
+  start_date: string;
+  end_date: string;
+  current_balance: number;
+  usage_by_type: Array<{
+    transaction_type: string;
+    total: number;
+    count: number;
+  }>;
+  purchases_by_type: Array<{
+    transaction_type: string;
+    total: number;
+    count: number;
+  }>;
+  daily_usage: Array<{
+    date: string;
+    usage: number;
+    purchases: number;
+    net: number;
+  }>;
+  total_usage: number;
+  total_purchases: number;
+}
+
+export async function getUsageAnalytics(days: number = 30): Promise<UsageAnalytics> {
+  return fetchAPI(`/v1/account/usage/analytics/?days=${days}`);
+}