billing accoutn with all the mess here

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