good forst commit

2026-06-09 02:02:40 +05:30
parent 801c1d7121
commit 249d759e6a
215 changed files with 15425 additions and 1240 deletions
@@ -0,0 +1,132 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useSuperAdmin } from '../../_lib/super-admin-context';
+import { useRouter } from 'next/navigation';
+
+export default function BotsPage() {
+  const { admin, loading } = useSuperAdmin();
+  const router = useRouter();
+  const [bots, setBots] = useState<any[]>([]);
+  const [initiating, setInitiating] = useState(false);
+  const [pairingInfo, setPairingInfo] = useState<{ token: string; expiresAt: string } | null>(null);
+
+  async function load() {
+    const res = await fetch('/api/admin/bots');
+    if (res.ok) setBots(await res.json());
+  }
+
+  useEffect(() => {
+    if (loading) return;
+    if (!admin) { router.replace('/admin/login'); return; }
+    void load();
+  }, [admin, loading, router]);
+
+  async function initiateBot() {
+    setInitiating(true);
+    try {
+      const res = await fetch('/api/admin/bots', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({}),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setPairingInfo(data);
+      }
+    } finally {
+      setInitiating(false);
+      void load();
+    }
+  }
+
+  async function removeBot(id: string) {
+    if (!confirm('Remove this bot? Only possible if no tenants are assigned.')) return;
+    const res = await fetch(`/api/admin/bots/${id}`, { method: 'DELETE' });
+    if (res.ok) {
+      void load();
+    } else {
+      const err = await res.json();
+      alert(err.message ?? 'Failed to remove bot');
+    }
+  }
+
+  function getQrUrl() {
+    if (!pairingInfo) return null;
+    return `/api/admin/bots/qr/${pairingInfo.token}`;
+  }
+
+  if (loading) return <p className="text-gray-500">Loading...</p>;
+  if (!admin) return null;
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">Bot Pool</h1>
+        <button
+          onClick={initiateBot}
+          disabled={initiating}
+          className="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm disabled:opacity-50"
+        >
+          {initiating ? 'Creating...' : 'Add Bot'}
+        </button>
+      </div>
+
+      {pairingInfo && (
+        <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4 mb-6">
+          <p className="text-sm font-medium mb-2">New bot created — scan QR to pair</p>
+          <p className="text-xs text-gray-600 mb-2">Expires: {pairingInfo.expiresAt}</p>
+          <a
+            href={getQrUrl() ?? '#'}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-600 text-sm underline"
+          >
+            View QR Code
+          </a>
+        </div>
+      )}
+
+      <div className="bg-white rounded-xl border overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50 text-left">
+            <tr>
+              <th className="px-4 py-3 font-medium">JID</th>
+              <th className="px-4 py-3 font-medium">Name</th>
+              <th className="px-4 py-3 font-medium">Status</th>
+              <th className="px-4 py-3 font-medium">Tenants</th>
+              <th className="px-4 py-3 font-medium">Created</th>
+              <th className="px-4 py-3 font-medium"></th>
+            </tr>
+          </thead>
+          <tbody className="divide-y">
+            {bots.map((b: any) => (
+              <tr key={b.id} className="hover:bg-gray-50">
+                <td className="px-4 py-3 font-mono text-xs">{b.jid?.slice(0, 30) ?? 'pending...'}</td>
+                <td className="px-4 py-3">{b.displayName ?? '—'}</td>
+                <td className="px-4 py-3">
+                  <span className={`text-xs font-medium px-2 py-1 rounded-full ${
+                    b.status === 'ACTIVE' ? 'bg-green-100 text-green-700' :
+                    b.status === 'PAIRING' ? 'bg-yellow-100 text-yellow-700' :
+                    'bg-gray-100 text-gray-500'
+                  }`}>{b.status}</span>
+                </td>
+                <td className="px-4 py-3">{b.tenantCount}</td>
+                <td className="px-4 py-3 text-xs text-gray-500">{new Date(b.createdAt).toLocaleDateString()}</td>
+                <td className="px-4 py-3">
+                  <button
+                    onClick={() => removeBot(b.id)}
+                    className="text-red-600 text-xs hover:underline"
+                  >
+                    Remove
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {bots.length === 0 && <p className="p-4 text-gray-400">No bots in the pool.</p>}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,3 @@
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
@@ -0,0 +1,60 @@
+'use client';
+
+import { FormEvent, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useSuperAdmin } from '../../_lib/super-admin-context';
+
+export default function SuperAdminLoginPage() {
+  const { login } = useSuperAdmin();
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+    setBusy(true);
+    try {
+      await login(email, password);
+      router.replace('/admin');
+    } catch (err: any) {
+      setError(err.message ?? 'Login failed');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="max-w-sm mx-auto mt-24">
+      <h1 className="text-xl font-bold mb-4">Super Admin Login</h1>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+          className="border rounded px-3 py-2 text-sm"
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+          className="border rounded px-3 py-2 text-sm"
+        />
+        {error && <p className="text-red-600 text-sm">{error}</p>}
+        <button
+          type="submit"
+          disabled={busy}
+          className="bg-blue-600 text-white rounded px-4 py-2 text-sm font-medium disabled:opacity-50"
+        >
+          {busy ? 'Signing in...' : 'Sign in'}
+        </button>
+      </form>
+    </div>
+  );
+}
@@ -0,0 +1,58 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useSuperAdmin } from '../_lib/super-admin-context';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+export default function AdminDashboard() {
+  const { admin, loading } = useSuperAdmin();
+  const router = useRouter();
+  const [tenants, setTenants] = useState<any[]>([]);
+  const [bots, setBots] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!admin) { router.replace('/admin/login'); return; }
+    fetch('/api/admin/tenants').then(r => r.ok && r.json()).then(d => setTenants(d ?? [])).catch(() => {});
+    fetch('/api/admin/bots').then(r => r.ok && r.json()).then(d => setBots(d ?? [])).catch(() => {});
+  }, [admin, loading, router]);
+
+  if (loading) return <p className="text-gray-500">Loading...</p>;
+  if (!admin) return null;
+
+  const totalTenants = tenants.length;
+  const activeTenants = tenants.filter((t: any) => t.isActive).length;
+  const totalBots = bots.length;
+  const totalMessages = tenants.reduce((s: number, t: any) => s + (t.stats?.messages ?? 0), 0);
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-6">Admin Dashboard</h1>
+      <div className="grid grid-cols-4 gap-4 mb-8">
+        <div className="bg-white rounded-xl border p-4">
+          <div className="text-xs text-gray-500 uppercase tracking-wide">Tenants</div>
+          <div className="text-2xl font-bold mt-1">{totalTenants}</div>
+          <div className="text-xs text-gray-400">{activeTenants} active</div>
+        </div>
+        <div className="bg-white rounded-xl border p-4">
+          <div className="text-xs text-gray-500 uppercase tracking-wide">Bot Accounts</div>
+          <div className="text-2xl font-bold mt-1">{totalBots}</div>
+          <div className="text-xs text-gray-400">in pool</div>
+        </div>
+        <div className="bg-white rounded-xl border p-4">
+          <div className="text-xs text-gray-500 uppercase tracking-wide">Messages</div>
+          <div className="text-2xl font-bold mt-1">{totalMessages}</div>
+        </div>
+        <div className="bg-white rounded-xl border p-4">
+          <div className="text-xs text-gray-500 uppercase tracking-wide">Avg tenants/bot</div>
+          <div className="text-2xl font-bold mt-1">{totalBots ? Math.round(totalTenants / totalBots) : 0}</div>
+        </div>
+      </div>
+      <div className="flex gap-4">
+        <Link href="/admin/tenants" className="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm">Manage Tenants</Link>
+        <Link href="/admin/bots" className="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm">Manage Bots</Link>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,119 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useSuperAdmin } from '../../../_lib/super-admin-context';
+import { useRouter, useParams } from 'next/navigation';
+
+export default function TenantDetailPage() {
+  const { admin, loading } = useSuperAdmin();
+  const router = useRouter();
+  const params = useParams();
+  const [tenant, setTenant] = useState<any>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function load() {
+    const res = await fetch(`/api/admin/tenants/${params.id}`);
+    if (res.ok) setTenant(await res.json());
+  }
+
+  useEffect(() => {
+    if (loading) return;
+    if (!admin) { router.replace('/admin/login'); return; }
+    void load();
+  }, [admin, loading, router, params.id]);
+
+  async function toggleActive() {
+    setBusy(true);
+    await fetch(`/api/admin/tenants/${params.id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ isActive: !tenant.isActive }),
+    });
+    await load();
+    setBusy(false);
+  }
+
+  async function togglePaused() {
+    setBusy(true);
+    await fetch(`/api/admin/tenants/${params.id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ isForwardingPaused: !tenant.isForwardingPaused }),
+    });
+    await load();
+    setBusy(false);
+  }
+
+  if (loading) return <p className="text-gray-500">Loading...</p>;
+  if (!admin) return null;
+  if (!tenant) return <p className="text-gray-500">Loading tenant...</p>;
+
+  return (
+    <div className="max-w-2xl">
+      <h1 className="text-2xl font-bold mb-2">{tenant.name}</h1>
+      <p className="text-gray-500 text-sm mb-6">Slug: {tenant.slug}</p>
+
+      <div className="grid grid-cols-2 gap-4 mb-8">
+        <div className="bg-white rounded-xl border p-4">
+          <div className="text-xs text-gray-500 uppercase">Status</div>
+          <button
+            onClick={toggleActive}
+            disabled={busy}
+            className={`mt-1 text-sm font-medium px-3 py-1 rounded-full ${tenant.isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}
+          >
+            {tenant.isActive ? 'Active' : 'Inactive'}
+          </button>
+        </div>
+        <div className="bg-white rounded-xl border p-4">
+          <div className="text-xs text-gray-500 uppercase">Forwarding</div>
+          <button
+            onClick={togglePaused}
+            disabled={busy}
+            className={`mt-1 text-sm font-medium px-3 py-1 rounded-full ${tenant.isForwardingPaused ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700'}`}
+          >
+            {tenant.isForwardingPaused ? 'Paused' : 'Active'}
+          </button>
+        </div>
+        <div className="bg-white rounded-xl border p-4">
+          <div className="text-xs text-gray-500 uppercase">Groups</div>
+          <div className="text-xl font-bold mt-1">{tenant.stats?.groups ?? 0}</div>
+        </div>
+        <div className="bg-white rounded-xl border p-4">
+          <div className="text-xs text-gray-500 uppercase">Messages</div>
+          <div className="text-xl font-bold mt-1">{tenant.stats?.messages ?? 0}</div>
+        </div>
+        <div className="bg-white rounded-xl border p-4">
+          <div className="text-xs text-gray-500 uppercase">Rules</div>
+          <div className="text-xl font-bold mt-1">{tenant.stats?.rules ?? 0}</div>
+        </div>
+        <div className="bg-white rounded-xl border p-4">
+          <div className="text-xs text-gray-500 uppercase">Routes</div>
+          <div className="text-xl font-bold mt-1">{tenant.stats?.routes ?? 0}</div>
+        </div>
+      </div>
+
+      {tenant.bot && (
+        <div className="bg-white rounded-xl border p-4 mb-6">
+          <h2 className="font-semibold text-sm mb-2">Assigned Bot</h2>
+          <div className="text-xs space-y-1">
+            <p><span className="text-gray-500">JID:</span> <span className="font-mono">{tenant.bot.jid}</span></p>
+            <p><span className="text-gray-500">Name:</span> {tenant.bot.displayName ?? '—'}</p>
+            <p><span className="text-gray-500">Status:</span> {tenant.bot.status}</p>
+            <p><span className="text-gray-500">Linked:</span> {tenant.bot.linkedSince}</p>
+          </div>
+        </div>
+      )}
+
+      {tenant.admins && tenant.admins.length > 0 && (
+        <div className="bg-white rounded-xl border p-4">
+          <h2 className="font-semibold text-sm mb-2">Admins</h2>
+          <div className="text-xs space-y-1">
+            {tenant.admins.map((a: any) => (
+              <p key={a.id}>{a.email} — <span className="uppercase">{a.role}</span></p>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,99 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useSuperAdmin } from '../../_lib/super-admin-context';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+export default function TenantsPage() {
+  const { admin, loading } = useSuperAdmin();
+  const router = useRouter();
+  const [tenants, setTenants] = useState<any[]>([]);
+
+  async function load() {
+    const res = await fetch('/api/admin/tenants');
+    if (res.ok) setTenants(await res.json());
+  }
+
+  useEffect(() => {
+    if (loading) return;
+    if (!admin) { router.replace('/admin/login'); return; }
+    void load();
+  }, [admin, loading, router]);
+
+  async function toggleActive(id: string, current: boolean) {
+    await fetch(`/api/admin/tenants/${id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ isActive: !current }),
+    });
+    void load();
+  }
+
+  async function togglePaused(id: string, current: boolean) {
+    await fetch(`/api/admin/tenants/${id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ isForwardingPaused: !current }),
+    });
+    void load();
+  }
+
+  if (loading) return <p className="text-gray-500">Loading...</p>;
+  if (!admin) return null;
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-6">Tenants</h1>
+      <div className="bg-white rounded-xl border overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50 text-left">
+            <tr>
+              <th className="px-4 py-3 font-medium">Name</th>
+              <th className="px-4 py-3 font-medium">Slug</th>
+              <th className="px-4 py-3 font-medium">Bot</th>
+              <th className="px-4 py-3 font-medium">Groups</th>
+              <th className="px-4 py-3 font-medium">Messages</th>
+              <th className="px-4 py-3 font-medium">Active</th>
+              <th className="px-4 py-3 font-medium">Paused</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y">
+            {tenants.map((t: any) => (
+              <tr key={t.id} className="hover:bg-gray-50">
+                <td className="px-4 py-3">
+                  <Link href={`/admin/tenants/${t.id}`} className="text-blue-600 hover:underline font-medium">
+                    {t.name}
+                  </Link>
+                </td>
+                <td className="px-4 py-3 text-gray-500">{t.slug}</td>
+                <td className="px-4 py-3 text-xs">
+                  {t.bot ? <span className="font-mono">{t.bot.jid?.slice(0, 20)}...</span> : <span className="text-gray-400">—</span>}
+                </td>
+                <td className="px-4 py-3">{t.stats.groups}</td>
+                <td className="px-4 py-3">{t.stats.messages}</td>
+                <td className="px-4 py-3">
+                  <button
+                    onClick={() => toggleActive(t.id, t.isActive)}
+                    className={`text-xs font-medium px-2 py-1 rounded-full ${t.isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}
+                  >
+                    {t.isActive ? 'Active' : 'Inactive'}
+                  </button>
+                </td>
+                <td className="px-4 py-3">
+                  <button
+                    onClick={() => togglePaused(t.id, t.isForwardingPaused)}
+                    className={`text-xs font-medium px-2 py-1 rounded-full ${t.isForwardingPaused ? 'bg-yellow-100 text-yellow-700' : 'bg-gray-100 text-gray-500'}`}
+                  >
+                    {t.isForwardingPaused ? 'Paused' : 'Active'}
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {tenants.length === 0 && <p className="p-4 text-gray-400">No tenants yet.</p>}
+      </div>
+    </div>
+  );
+}