billing accoutn with all the mess here

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