feat: agency portfolio with per-client integrations hub

Admin home lists tenants, alerts, and connection health; header selector enables superadmin context; Meta/GA4/GSC/GTM/CRM/email slots live per tenant (manual status until OAuth). Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-22 01:31:47 +02:00
parent 9d1609c88b
commit 791976a3d8
19 changed files with 1503 additions and 20 deletions
--- a/src/components/TenantSwitcher.tsx
+++ b/src/components/TenantSwitcher.tsx
@@ -0,0 +1,115 @@
+'use client';
+
+import React, { useEffect, useState, useTransition } from 'react';
+import { useRouter } from 'next/navigation';
+import { ChevronDown, Eye, Building2 } from 'lucide-react';
+
+type TenantOpt = { id: string; name: string; slug: string };
+
+export default function TenantSwitcher({
+  initialName,
+  isAgency,
+}: {
+  initialName: string;
+  isAgency: boolean;
+}) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [tenants, setTenants] = useState<TenantOpt[]>([]);
+  const [activeName, setActiveName] = useState(initialName);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [pending, startTransition] = useTransition();
+
+  useEffect(() => {
+    if (!isAgency) return;
+    // read cookies
+    const match = document.cookie.match(/(?:^|; )4v_view_tenant_name=([^;]*)/);
+    const idMatch = document.cookie.match(/(?:^|; )4v_view_tenant_id=([^;]*)/);
+    if (match?.[1]) setActiveName(decodeURIComponent(match[1]));
+    if (idMatch?.[1]) setActiveId(decodeURIComponent(idMatch[1]));
+
+    fetch('/api/admin/portfolio')
+      .then((r) => r.json())
+      .then((d) => {
+        const list = (d.portfolio || []).map(
+          (t: { id: string; name: string; slug: string }) => ({
+            id: t.id,
+            name: t.name,
+            slug: t.slug,
+          })
+        );
+        setTenants(list);
+      })
+      .catch(() => {});
+  }, [isAgency]);
+
+  if (!isAgency) {
+    return (
+      <span className="bg-brand-500/10 text-brand-400 font-semibold px-2.5 py-1 rounded-md border border-brand-500/20">
+        {initialName}
+      </span>
+    );
+  }
+
+  async function select(tenant: TenantOpt | null) {
+    setOpen(false);
+    await fetch('/api/admin/active-tenant', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ tenantId: tenant?.id ?? null }),
+    });
+    setActiveId(tenant?.id ?? null);
+    setActiveName(tenant?.name ?? 'Vista global agencia');
+    startTransition(() => router.refresh());
+  }
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="inline-flex items-center gap-2 bg-brand-500/10 text-brand-400 font-semibold px-2.5 py-1 rounded-md border border-brand-500/20 hover:bg-brand-500/20 transition-colors"
+      >
+        <Eye className="w-3.5 h-3.5" />
+        <span className="max-w-[200px] truncate">
+          {activeId ? activeName : 'Vista global agencia'}
+        </span>
+        <ChevronDown className="w-3.5 h-3.5 opacity-70" />
+      </button>
+      {open && (
+        <div className="absolute left-0 top-full mt-2 z-50 w-72 rounded-xl border border-gray-700 bg-[#111827] shadow-xl py-1 max-h-80 overflow-y-auto">
+          <button
+            type="button"
+            disabled={pending}
+            onClick={() => select(null)}
+            className="w-full text-left px-3 py-2 text-sm text-gray-300 hover:bg-gray-800 flex items-center gap-2"
+          >
+            <Building2 className="w-3.5 h-3.5 text-amber-400" />
+            Vista global agencia
+          </button>
+          <div className="border-t border-gray-800 my-1" />
+          {tenants.length === 0 ? (
+            <p className="px-3 py-2 text-xs text-gray-500">
+              Sin tenants · da de alta en Agencia OS
+            </p>
+          ) : (
+            tenants.map((t) => (
+              <button
+                key={t.id}
+                type="button"
+                disabled={pending}
+                onClick={() => select(t)}
+                className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-800 ${
+                  activeId === t.id ? 'text-brand-400' : 'text-gray-200'
+                }`}
+              >
+                <span className="font-medium">{t.name}</span>
+                <span className="block text-[10px] text-gray-500">{t.slug}</span>
+              </button>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}