Marketing/4ventures-client-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: agency control panel for per-client connections

Browse Source 
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>
This commit is contained in:
4Ventures
2026-09-22 18:47:29 +02:00
parent 1eb02dac4d
commit c4c527072f
10 changed files with 637 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/api/admin/integrations/route.ts
View File

@@ -111,32 +111,43 @@ export async function PATCH(req: NextRequest) {
typeof body.label === 'string' ? body.label.trim() : undefined;
const errorMessage =
typeof body.errorMessage === 'string' ? body.errorMessage.trim() : undefined;
const enabled =
typeof body.enabled === 'boolean' ? body.enabled : undefined;
if (!tenantId || !provider || !status) {
if (!tenantId || !provider) {
return NextResponse.json(
{ error: 'tenantId, provider y status requeridos' },
{ error: 'tenantId y provider requeridos' },
{ status: 400 }
);
}
if (
!['disconnected', 'pending', 'connected', 'error'].includes(status)
) {
if (status && !['disconnected', 'pending', 'connected', 'error'].includes(status)) {
return NextResponse.json({ error: 'status inválido' }, { status: 400 });
}
const patch: Record<string, unknown> = {
status,
updated_at: new Date().toISOString(),
};
if (status) patch.status = status;
if (externalAccountId !== undefined) {
patch.external_account_id = externalAccountId || null;
}
if (label !== undefined) patch.label = label || null;
if (errorMessage !== undefined) patch.error_message = errorMessage || null;
if (enabled !== undefined) patch.enabled = enabled;
if (status === 'connected') {
patch.last_sync_at = new Date().toISOString();
patch.error_message = null;
}
if (status === 'disconnected') {
// keep external id for re-link unless cleared
}
if (!status && enabled === undefined && externalAccountId === undefined) {
return NextResponse.json(
{ error: 'status, enabled o externalAccountId requeridos' },
{ status: 400 }
);
}
const base = supabaseUrl();
const url = `${base}/rest/v1/integrations?tenant_id=eq.${encodeURIComponent(tenantId)}&provider=eq.${encodeURIComponent(provider)}`;
@@ -162,6 +173,7 @@ export async function PATCH(req: NextRequest) {
body: JSON.stringify({
tenant_id: tenantId,
provider,
status: status || 'disconnected',
...patch,
}),
});

106
src/app/api/admin/portfolio/route.ts
View File

@@ -33,12 +33,15 @@ export async function GET() {
const base = supabaseUrl();
const [tenantsRes, integRes, alertsRes] = await Promise.all([
fetch(`${base}/rest/v1/tenants?select=id,name,slug,created_at&order=name.asc`, {
headers,
cache: 'no-store',
}),
fetch(
`${base}/rest/v1/integrations?select=id,tenant_id,provider,status,label,external_account_id,last_sync_at,error_message`,
`${base}/rest/v1/tenants?select=id,name,slug,created_at,agency_followed,agency_notes&order=name.asc`,
{
headers,
cache: 'no-store',
}
),
fetch(
`${base}/rest/v1/integrations?select=id,tenant_id,provider,status,label,external_account_id,last_sync_at,error_message,enabled,meta`,
{ headers, cache: 'no-store' }
),
fetch(
@@ -47,17 +50,35 @@ export async function GET() {
),
]);
const tenants = tenantsRes.ok ? await tenantsRes.json() : [];
const integrations = integRes.ok ? await integRes.json() : [];
let tenants = tenantsRes.ok ? await tenantsRes.json() : [];
// Fallback if agency_followed column missing
if (!tenantsRes.ok) {
const again = await fetch(
`${base}/rest/v1/tenants?select=id,name,slug,created_at&order=name.asc`,
{ headers, cache: 'no-store' }
);
tenants = again.ok ? await again.json() : [];
}
let integrations: unknown[] = [];
let integMissing = false;
if (integRes.ok) {
integrations = await integRes.json();
} else {
const msg = await integRes.text();
integMissing = msg.toLowerCase().includes('does not exist');
}
const alerts = alertsRes.ok ? await alertsRes.json() : [];
const integMissing =
!integRes.ok &&
(await integRes.text().catch(() => '')).toLowerCase().includes('does not exist');
type Integ = {
tenant_id: string;
provider: string;
status: string;
label?: string | null;
external_account_id?: string | null;
enabled?: boolean;
error_message?: string | null;
meta?: Record<string, unknown> | null;
};
const byTenant = new Map<string, Integ[]>();
for (const row of integrations as Integ[]) {
@@ -66,32 +87,47 @@ export async function GET() {
byTenant.set(row.tenant_id, list);
}
const portfolio = (tenants as { id: string; name: string; slug: string; created_at: string }[]).map(
(t) => {
const rows = byTenant.get(t.id) || [];
const connected = rows.filter((r) => r.status === 'connected').length;
const errors = rows.filter((r) => r.status === 'error').length;
const pending = rows.filter((r) => r.status === 'pending').length;
return {
...t,
integrations: rows,
stats: {
connected,
errors,
pending,
totalProviders: INTEGRATION_PROVIDERS.length,
health:
errors > 0
? 'critical'
: connected === 0
? 'empty'
: pending > 0
? 'warning'
: 'ok',
},
};
const portfolio = (
tenants as {
id: string;
name: string;
slug: string;
created_at: string;
agency_followed?: boolean;
agency_notes?: string | null;
}[]
).map((t) => {
const rows = byTenant.get(t.id) || [];
const active = rows.filter((r) => r.enabled !== false);
const connected = active.filter((r) => r.status === 'connected').length;
const errors = active.filter((r) => r.status === 'error').length;
const pending = active.filter((r) => r.status === 'pending').length;
const byProvider: Record<string, Integ | undefined> = {};
for (const p of INTEGRATION_PROVIDERS) {
byProvider[p.id] = rows.find((r) => r.provider === p.id);
}
);
return {
...t,
agency_followed: t.agency_followed !== false,
integrations: rows,
byProvider,
stats: {
connected,
errors,
pending,
enabledChannels: active.length,
totalProviders: INTEGRATION_PROVIDERS.length,
health:
errors > 0
? 'critical'
: connected === 0
? 'empty'
: pending > 0
? 'warning'
: 'ok',
},
};
});
return NextResponse.json({
portfolio,

86
src/app/api/admin/tenants/route.ts Normal file
View File

@@ -0,0 +1,86 @@
import { NextRequest, NextResponse } from 'next/server';
import { createClient } from '@/lib/supabase/server';
import {
isAgencyRole,
serviceHeaders,
supabaseUrl,
userRole,
} from '@/lib/agency';
export const dynamic = 'force-dynamic';
async function requireAgency() {
const supabase = await createClient();
const {
data: { user },
} = await supabase.auth.getUser();
if (!user) {
return { error: NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) };
}
if (!isAgencyRole(userRole(user))) {
return { error: NextResponse.json({ error: 'Forbidden' }, { status: 403 }) };
}
const headers = serviceHeaders();
if (!headers) {
return {
error: NextResponse.json({ error: 'no service role' }, { status: 503 }),
};
}
return { headers };
}
/** PATCH — follow/unfollow client or set notes. */
export async function PATCH(req: NextRequest) {
const gate = await requireAgency();
if ('error' in gate && gate.error) return gate.error;
const { headers } = gate as {
headers: { apikey: string; Authorization: string };
};
const body = await req.json().catch(() => ({}));
const tenantId =
typeof body.tenantId === 'string' ? body.tenantId.trim() : '';
if (!tenantId) {
return NextResponse.json({ error: 'tenantId requerido' }, { status: 400 });
}
const patch: Record<string, unknown> = {};
if (typeof body.followed === 'boolean') {
patch.agency_followed = body.followed;
}
if (typeof body.notes === 'string') {
patch.agency_notes = body.notes.trim() || null;
}
if (!Object.keys(patch).length) {
return NextResponse.json(
{ error: 'followed o notes requeridos' },
{ status: 400 }
);
}
const r = await fetch(
`${supabaseUrl()}/rest/v1/tenants?id=eq.${encodeURIComponent(tenantId)}`,
{
method: 'PATCH',
headers: {
...headers,
'Content-Type': 'application/json',
Prefer: 'return=representation',
},
body: JSON.stringify(patch),
}
);
if (!r.ok) {
const msg = await r.text();
return NextResponse.json(
{
error: msg.includes('agency_followed')
? 'Aplicar sql/agency_control.sql'
: msg.slice(0, 300),
},
{ status: 500 }
);
}
const rows = await r.json();
return NextResponse.json({ tenant: rows[0] || rows });
}

3
src/app/dashboard/agencia/page.tsx
View File

@@ -77,7 +77,8 @@ export default async function AgencyPage() {
</div>
<h2 className="text-2xl font-bold tracking-tight text-white">Centro de Mando 4Ventures</h2>
<p className="text-sm text-gray-400 mt-1">
Portafolio multi-cliente · integraciones (Meta, MCC, GA4, GSC, GTM, CRM, email) · alertas · modo superadmin.
Portafolio multi-cliente · control de conexiones (Meta, Google, Drive,
Clientify…) · seguir/archivar clientes · modo superadmin.
</p>
</div>

253
src/components/AgencyPortfolioBoard.tsx
View File

@@ -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>
);

193
src/components/ClientIntegrationsPanel.tsx
View File

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

4
src/components/TenantSwitcher.tsx
View File

@@ -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,