feat: agency control panel for per-client connections

Matrix view of Meta/Google/Drive/Clientify, follow/archive clients,
and per-channel ON/OFF with account IDs in the client hub.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/AgencyPortfolioBoard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import DriveConnectPanel from '@/components/DriveConnectPanel';
 import {
@@ -8,15 +8,29 @@ import {
   Bell,
   CheckCircle2,
   CircleDashed,
+  Eye,
+  EyeOff,
   ExternalLink,
   Plug,
   XCircle,
 } from 'lucide-react';
 
+type IntegCell = {
+  provider: string;
+  status: string;
+  enabled?: boolean;
+  external_account_id?: string | null;
+  label?: string | null;
+  meta?: { folder_name?: string } | null;
+};
+
 type PortfolioRow = {
   id: string;
   name: string;
   slug: string;
+  agency_followed?: boolean;
+  agency_notes?: string | null;
+  byProvider?: Record<string, IntegCell | undefined>;
   stats: {
     connected: number;
     errors: number;
@@ -26,17 +40,34 @@ type PortfolioRow = {
   };
 };
 
+type Provider = { id: string; label: string; group: string };
+
 type AlertRow = {
   id: string;
   title: string;
   body?: string | null;
   severity: string;
-  tenant_id?: string | null;
   href?: string | null;
   created_at: string;
   read_at?: string | null;
 };
 
+const MATRIX_PROVIDERS = [
+  'meta_ads',
+  'google_ads',
+  'ga4',
+  'clientify',
+  'google_drive',
+] as const;
+
+const SHORT: Record<string, string> = {
+  meta_ads: 'Meta',
+  google_ads: 'GAds',
+  ga4: 'GA4',
+  clientify: 'CRM',
+  google_drive: 'Drive',
+};
+
 function healthBadge(h: string) {
   if (h === 'ok')
     return (
@@ -63,17 +94,39 @@ function healthBadge(h: string) {
   );
 }
 
+function cellTone(row?: IntegCell) {
+  if (!row || row.enabled === false)
+    return 'border-gray-800 text-gray-600 bg-transparent';
+  if (row.status === 'connected')
+    return 'border-emerald-500/40 text-emerald-400 bg-emerald-500/10';
+  if (row.status === 'error')
+    return 'border-red-500/40 text-red-400 bg-red-500/10';
+  if (row.status === 'pending')
+    return 'border-amber-500/40 text-amber-400 bg-amber-500/10';
+  return 'border-gray-700 text-gray-500';
+}
+
+function cellTitle(row?: IntegCell) {
+  if (!row || row.enabled === false) return 'Canal apagado';
+  const id = row.external_account_id || row.meta?.folder_name || row.label || '';
+  return `${row.status}${id ? ` · ${id}` : ''}`;
+}
+
 export default function AgencyPortfolioBoard() {
   const [portfolio, setPortfolio] = useState<PortfolioRow[]>([]);
+  const [providers, setProviders] = useState<Provider[]>([]);
   const [alerts, setAlerts] = useState<AlertRow[]>([]);
   const [warning, setWarning] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
+  const [showArchived, setShowArchived] = useState(false);
+  const [busyId, setBusyId] = useState<string | null>(null);
 
   async function load() {
     setLoading(true);
     const res = await fetch('/api/admin/portfolio');
     const data = await res.json();
     setPortfolio(data.portfolio || []);
+    setProviders(data.providers || []);
     setAlerts((data.alerts || []).filter((a: AlertRow) => !a.read_at));
     setWarning(data.warning || null);
     setLoading(false);
@@ -83,6 +136,13 @@ export default function AgencyPortfolioBoard() {
     void load();
   }, []);
 
+  const visible = useMemo(() => {
+    if (showArchived) return portfolio;
+    return portfolio.filter((t) => t.agency_followed !== false);
+  }, [portfolio, showArchived]);
+
+  const archivedCount = portfolio.filter((t) => t.agency_followed === false).length;
+
   async function enterTenant(id: string) {
     await fetch('/api/admin/active-tenant', {
       method: 'POST',
@@ -92,6 +152,17 @@ export default function AgencyPortfolioBoard() {
     window.location.href = '/dashboard/kpis';
   }
 
+  async function setFollowed(id: string, followed: boolean) {
+    setBusyId(id);
+    await fetch('/api/admin/tenants', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ tenantId: id, followed }),
+    });
+    await load();
+    setBusyId(null);
+  }
+
   async function dismiss(id: string) {
     await fetch('/api/admin/alerts', {
       method: 'POST',
@@ -163,63 +234,145 @@ export default function AgencyPortfolioBoard() {
       )}
 
       <section className="space-y-3">
-        <div className="flex items-center justify-between">
-          <h3 className="text-sm font-semibold text-white flex items-center gap-2">
-            <Plug className="w-4 h-4 text-brand-400" />
-            Portafolio · estado de conexiones
-          </h3>
-          <p className="text-[11px] text-gray-500">
-            Meta · Google Ads · GA4 · GSC · GTM · CRM · Email · Drive
-          </p>
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+          <div>
+            <h3 className="text-sm font-semibold text-white flex items-center gap-2">
+              <Plug className="w-4 h-4 text-brand-400" />
+              Panel de control · clientes y conexiones
+            </h3>
+            <p className="text-[11px] text-gray-500 mt-0.5">
+              Cada cliente con su Meta, Google Ads, GA4, Clientify y Drive.
+              Activa/apaga canales en Integraciones.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => setShowArchived((v) => !v)}
+            className="inline-flex items-center gap-1.5 text-[11px] px-2.5 py-1.5 rounded-lg border border-gray-700 text-gray-400 hover:text-white"
+          >
+            {showArchived ? (
+              <Eye className="w-3.5 h-3.5" />
+            ) : (
+              <EyeOff className="w-3.5 h-3.5" />
+            )}
+            {showArchived
+              ? 'Ocultar archivados'
+              : `Archivados (${archivedCount})`}
+          </button>
         </div>
 
-        {portfolio.length === 0 ? (
+        {/* Matrix header */}
+        <div className="hidden lg:grid grid-cols-[minmax(0,1.4fr)_repeat(5,minmax(0,0.55fr))_auto] gap-2 px-1 text-[10px] uppercase tracking-wider text-gray-600">
+          <span>Cliente</span>
+          {MATRIX_PROVIDERS.map((p) => (
+            <span key={p} className="text-center">
+              {SHORT[p]}
+            </span>
+          ))}
+          <span className="text-right">Acciones</span>
+        </div>
+
+        {visible.length === 0 ? (
           <p className="text-sm text-gray-500">
-            No hay clientes. Usa «Dar de Alta Cliente» abajo.
+            No hay clientes activos. Usa «Dar de Alta Cliente» abajo o muestra
+            archivados.
           </p>
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-            {portfolio.map((t) => (
-              <div
-                key={t.id}
-                className="rounded-xl border border-gray-800 bg-[#111827] p-4 flex flex-col gap-3"
-              >
-                <div className="flex items-start justify-between gap-2">
-                  <div>
-                    <p className="text-sm font-semibold text-white">{t.name}</p>
-                    <p className="text-[11px] text-gray-500">{t.slug}</p>
+          <div className="space-y-2">
+            {visible.map((t) => {
+              const archived = t.agency_followed === false;
+              return (
+                <div
+                  key={t.id}
+                  className={`rounded-xl border bg-[#111827] p-4 ${
+                    archived ? 'border-gray-800/60 opacity-60' : 'border-gray-800'
+                  }`}
+                >
+                  <div className="lg:grid lg:grid-cols-[minmax(0,1.4fr)_repeat(5,minmax(0,0.55fr))_auto] gap-2 items-center space-y-3 lg:space-y-0">
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <p className="text-sm font-semibold text-white truncate">
+                          {t.name}
+                        </p>
+                        {healthBadge(t.stats.health)}
+                        {archived && (
+                          <span className="text-[10px] uppercase text-gray-500">
+                            Archivado
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-[11px] text-gray-500 truncate">
+                        {t.slug} · {t.stats.connected}/
+                        {t.stats.totalProviders} conectadas
+                      </p>
+                    </div>
+
+                    {MATRIX_PROVIDERS.map((pid) => {
+                      const cell = t.byProvider?.[pid];
+                      return (
+                        <div
+                          key={pid}
+                          title={cellTitle(cell)}
+                          className={`text-center text-[10px] font-semibold px-1.5 py-1.5 rounded-md border ${cellTone(cell)}`}
+                        >
+                          <span className="lg:hidden text-gray-500 mr-1">
+                            {SHORT[pid]}
+                          </span>
+                          {cell?.enabled === false
+                            ? 'OFF'
+                            : cell?.status === 'connected'
+                              ? 'ON'
+                              : cell?.status === 'error'
+                                ? 'ERR'
+                                : cell?.status === 'pending'
+                                  ? '…'
+                                  : '—'}
+                        </div>
+                      );
+                    })}
+
+                    <div className="flex flex-wrap gap-2 lg:justify-end">
+                      <button
+                        type="button"
+                        onClick={() => enterTenant(t.id)}
+                        className="text-xs font-medium px-3 py-1.5 rounded-lg bg-brand-500/90 hover:bg-brand-500 text-white"
+                      >
+                        Entrar
+                      </button>
+                      <Link
+                        href={`/dashboard/agencia/cliente/${t.id}`}
+                        className="inline-flex items-center gap-1 text-xs font-medium px-3 py-1.5 rounded-lg border border-gray-700 text-gray-300 hover:border-gray-500 hover:text-white"
+                      >
+                        Conexiones
+                        <ExternalLink className="w-3 h-3" />
+                      </Link>
+                      <button
+                        type="button"
+                        disabled={busyId === t.id}
+                        onClick={() => void setFollowed(t.id, archived)}
+                        className="text-xs px-3 py-1.5 rounded-lg border border-gray-700 text-gray-400 hover:text-white"
+                        title={
+                          archived
+                            ? 'Volver a seguir en el portafolio'
+                            : 'Archivar: deja de mostrarlo como activo'
+                        }
+                      >
+                        {archived ? 'Seguir' : 'Archivar'}
+                      </button>
+                    </div>
                   </div>
-                  {healthBadge(t.stats.health)}
                 </div>
-                <p className="text-xs text-gray-400">
-                  {t.stats.connected}/{t.stats.totalProviders} conectadas
-                  {t.stats.errors > 0 && (
-                    <span className="text-red-400">
-                      {' '}
-                      · {t.stats.errors} error
-                    </span>
-                  )}
-                </p>
-                <div className="flex flex-wrap gap-2 mt-auto">
-                  <button
-                    type="button"
-                    onClick={() => enterTenant(t.id)}
-                    className="text-xs font-medium px-3 py-1.5 rounded-lg bg-brand-500/90 hover:bg-brand-500 text-white"
-                  >
-                    Entrar (superadmin)
-                  </button>
-                  <Link
-                    href={`/dashboard/agencia/cliente/${t.id}`}
-                    className="inline-flex items-center gap-1 text-xs font-medium px-3 py-1.5 rounded-lg border border-gray-700 text-gray-300 hover:border-gray-500 hover:text-white"
-                  >
-                    Integraciones
-                    <ExternalLink className="w-3 h-3" />
-                  </Link>
-                </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
         )}
+
+        {providers.length > 0 && (
+          <p className="text-[10px] text-gray-600">
+            Canales disponibles:{' '}
+            {providers.map((p) => p.label).join(' · ')}
+          </p>
+        )}
       </section>
     </div>
   );

src/components/ClientIntegrationsPanel.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
-import { ArrowLeft, Loader2 } from 'lucide-react';
+import { ArrowLeft, Loader2, Power } from 'lucide-react';
 
 type Integ = {
   id?: string;
@@ -12,16 +12,23 @@ type Integ = {
   external_account_id?: string | null;
   error_message?: string | null;
   last_sync_at?: string | null;
+  enabled?: boolean;
+  meta?: { folder_name?: string; match_score?: number } | null;
 };
 
 type Provider = { id: string; label: string; group: string };
 
-const STATUS_OPTS = [
-  { value: 'disconnected', label: 'Desconectado' },
-  { value: 'pending', label: 'Pendiente' },
-  { value: 'connected', label: 'Conectado' },
-  { value: 'error', label: 'Error' },
-] as const;
+const PLACEHOLDERS: Record<string, string> = {
+  meta_ads: 'act_… (Ad Account ID)',
+  google_ads: 'Customer ID MCC / cuenta',
+  ga4: 'G-… o Property ID',
+  search_console: 'sc-domain:ejemplo.com',
+  tag_manager: 'GTM-…',
+  clientify: 'ID / workspace Clientify',
+  klaviyo: 'Account / list ID',
+  mailchimp: 'Audience ID',
+  google_drive: 'Folder ID (auto-match o pegar)',
+};
 
 export default function ClientIntegrationsPanel({
   tenantId,
@@ -35,6 +42,8 @@ export default function ClientIntegrationsPanel({
   const [warning, setWarning] = useState<string | null>(null);
   const [saving, setSaving] = useState<string | null>(null);
   const [accountDraft, setAccountDraft] = useState<Record<string, string>>({});
+  const [followed, setFollowed] = useState(true);
+  const [followBusy, setFollowBusy] = useState(false);
 
   async function load() {
     const res = await fetch(
@@ -53,24 +62,43 @@ export default function ClientIntegrationsPanel({
 
   useEffect(() => {
     void load();
+    fetch('/api/admin/portfolio')
+      .then((r) => r.json())
+      .then((d) => {
+        const row = (d.portfolio || []).find(
+          (t: { id: string }) => t.id === tenantId
+        );
+        if (row) setFollowed(row.agency_followed !== false);
+      })
+      .catch(() => {});
   }, [tenantId]);
 
-  async function save(provider: string, status: string) {
+  async function patch(
+    provider: string,
+    body: Record<string, unknown>
+  ) {
     setSaving(provider);
     await fetch('/api/admin/integrations', {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        tenantId,
-        provider,
-        status,
-        externalAccountId: accountDraft[provider] || '',
-      }),
+      body: JSON.stringify({ tenantId, provider, ...body }),
     });
     await load();
     setSaving(null);
   }
 
+  async function toggleFollow() {
+    setFollowBusy(true);
+    const next = !followed;
+    await fetch('/api/admin/tenants', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ tenantId, followed: next }),
+    });
+    setFollowed(next);
+    setFollowBusy(false);
+  }
+
   const byProvider = new Map(integrations.map((i) => [i.provider, i]));
 
   const groups = [
@@ -83,22 +111,41 @@ export default function ClientIntegrationsPanel({
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center gap-3">
-        <Link
-          href="/dashboard/agencia"
-          className="text-gray-400 hover:text-white"
-        >
-          <ArrowLeft className="w-4 h-4" />
-        </Link>
-        <div>
-          <h2 className="text-2xl font-bold text-white tracking-tight">
-            {tenantName}
-          </h2>
-          <p className="text-sm text-gray-400 mt-0.5">
-            Integraciones del cliente · marca estado y account id (OAuth live en
-            siguiente fase)
-          </p>
+      <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <Link
+            href="/dashboard/agencia"
+            className="text-gray-400 hover:text-white"
+          >
+            <ArrowLeft className="w-4 h-4" />
+          </Link>
+          <div>
+            <h2 className="text-2xl font-bold text-white tracking-tight">
+              {tenantName}
+            </h2>
+            <p className="text-sm text-gray-400 mt-0.5">
+              Hub de conexiones · asocia cuentas y decide qué entra a la
+              plataforma
+            </p>
+          </div>
         </div>
+        <button
+          type="button"
+          disabled={followBusy}
+          onClick={() => void toggleFollow()}
+          className={`inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border ${
+            followed
+              ? 'border-emerald-500/40 text-emerald-400'
+              : 'border-gray-700 text-gray-400'
+          }`}
+        >
+          {followBusy ? (
+            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+          ) : (
+            <Power className="w-3.5 h-3.5" />
+          )}
+          {followed ? 'Cliente activo en portafolio' : 'Archivado'}
+        </button>
       </div>
 
       {warning && (
@@ -119,16 +166,30 @@ export default function ClientIntegrationsPanel({
               {list.map((p) => {
                 const row = byProvider.get(p.id);
                 const status = row?.status || 'disconnected';
+                const enabled = row?.enabled !== false;
+                const folderHint =
+                  p.id === 'google_drive'
+                    ? row?.meta?.folder_name || row?.label
+                    : null;
                 return (
                   <li
                     key={p.id}
-                    className="rounded-xl border border-gray-800 bg-[#111827] p-4 space-y-3"
+                    className={`rounded-xl border p-4 space-y-3 ${
+                      enabled
+                        ? 'border-gray-800 bg-[#111827]'
+                        : 'border-gray-800/50 bg-[#0d121c] opacity-70'
+                    }`}
                   >
-                    <div className="flex items-center justify-between gap-3">
+                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                       <div>
                         <p className="text-sm font-medium text-white">
                           {p.label}
                         </p>
+                        {folderHint && (
+                          <p className="text-[11px] text-brand-400 mt-0.5">
+                            Carpeta: {folderHint}
+                          </p>
+                        )}
                         {row?.last_sync_at && (
                           <p className="text-[10px] text-gray-500">
                             Último sync{' '}
@@ -141,24 +202,50 @@ export default function ClientIntegrationsPanel({
                           </p>
                         )}
                       </div>
-                      <select
-                        className="text-xs rounded-lg bg-gray-900 border border-gray-700 text-gray-200 px-2 py-1.5"
-                        value={status}
-                        disabled={saving === p.id}
-                        onChange={(e) => save(p.id, e.target.value)}
-                      >
-                        {STATUS_OPTS.map((o) => (
-                          <option key={o.value} value={o.value}>
-                            {o.label}
-                          </option>
-                        ))}
-                      </select>
+                      <div className="flex flex-wrap items-center gap-2">
+                        <button
+                          type="button"
+                          disabled={saving === p.id}
+                          onClick={() =>
+                            void patch(p.id, { enabled: !enabled })
+                          }
+                          className={`text-[11px] px-2.5 py-1 rounded-md border ${
+                            enabled
+                              ? 'border-emerald-500/40 text-emerald-400'
+                              : 'border-gray-700 text-gray-500'
+                          }`}
+                          title="Si está OFF, no cuenta en salud ni se usa"
+                        >
+                          {enabled ? 'Canal ON' : 'Canal OFF'}
+                        </button>
+                        <button
+                          type="button"
+                          disabled={saving === p.id || !enabled}
+                          onClick={() =>
+                            void patch(p.id, {
+                              status:
+                                status === 'connected'
+                                  ? 'disconnected'
+                                  : 'connected',
+                              externalAccountId: accountDraft[p.id] || '',
+                            })
+                          }
+                          className={`text-[11px] px-2.5 py-1 rounded-md border ${
+                            status === 'connected'
+                              ? 'border-brand-500/40 text-brand-400'
+                              : 'border-gray-700 text-gray-400'
+                          }`}
+                        >
+                          {status === 'connected' ? 'Desconectar' : 'Conectar'}
+                        </button>
+                      </div>
                     </div>
                     <div className="flex gap-2 items-center">
                       <input
                         className="flex-1 text-xs rounded-lg bg-gray-900 border border-gray-700 px-3 py-2 text-white placeholder:text-gray-600"
-                        placeholder="Account / Property ID (act_…, G-…, UA…)"
+                        placeholder={PLACEHOLDERS[p.id] || 'Account ID'}
                         value={accountDraft[p.id] || ''}
+                        disabled={!enabled}
                         onChange={(e) =>
                           setAccountDraft((d) => ({
                             ...d,
@@ -168,17 +255,29 @@ export default function ClientIntegrationsPanel({
                       />
                       <button
                         type="button"
-                        disabled={saving === p.id}
-                        onClick={() => save(p.id, status)}
+                        disabled={saving === p.id || !enabled}
+                        onClick={() =>
+                          void patch(p.id, {
+                            status: status === 'disconnected' ? 'pending' : status,
+                            externalAccountId: accountDraft[p.id] || '',
+                          })
+                        }
                         className="text-xs px-3 py-2 rounded-lg border border-gray-700 text-gray-300 hover:text-white hover:border-gray-500 inline-flex items-center gap-1"
                       >
                         {saving === p.id ? (
                           <Loader2 className="w-3 h-3 animate-spin" />
                         ) : (
-                          'Guardar'
+                          'Guardar ID'
                         )}
                       </button>
                     </div>
+                    {p.id === 'google_drive' && (
+                      <p className="text-[10px] text-gray-500">
+                        Preferible: Agencia → Conectar Drive → Re-emparejar
+                        (asigna carpeta por nombre). Aquí puedes pegar un Folder
+                        ID manual.
+                      </p>
+                    )}
                   </li>
                 );
               })}

src/components/TenantSwitcher.tsx

@@ -31,7 +31,9 @@ export default function TenantSwitcher({
     fetch('/api/admin/portfolio')
       .then((r) => r.json())
       .then((d) => {
-        const list = (d.portfolio || []).map(
+        const list = (d.portfolio || [])
+          .filter((t: { agency_followed?: boolean }) => t.agency_followed !== false)
+          .map(
           (t: { id: string; name: string; slug: string }) => ({
             id: t.id,
             name: t.name,