feat(admin): add direct client onboarding modal and management directly in app.4ventures.es

src/app/api/admin/create-client/route.ts

@@ -0,0 +1,46 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createClient } from '@/lib/supabase/server';
+
+export async function POST(req: NextRequest) {
+  try {
+    const supabase = await createClient();
+    const { data: { user } } = await supabase.auth.getUser();
+
+    if (!user) {
+      return NextResponse.json({ error: 'No autorizado. Inicia sesión.' }, { status: 401 });
+    }
+
+    const userRole = user.app_metadata?.role || user.user_metadata?.role || 'client';
+    if (userRole !== 'admin' && userRole !== 'team') {
+      return NextResponse.json({ error: 'Permisos insuficientes. Solo administradores pueden crear clientes.' }, { status: 403 });
+    }
+
+    const body = await req.json();
+    const { companyName, slug, email, password, role } = body;
+
+    if (!companyName || !slug || !email || !password) {
+      return NextResponse.json({ error: 'Todos los campos son obligatorios.' }, { status: 400 });
+    }
+
+    const sanitizedSlug = slug.toLowerCase().trim().replace(/[^a-z0-9-]/g, '-');
+    const targetRole = role === 'admin' || role === 'team' ? role : 'client';
+
+    const { data, error } = await supabase.rpc('provision_client', {
+      p_company_name: companyName.trim(),
+      p_slug: sanitizedSlug,
+      p_email: email.toLowerCase().trim(),
+      p_password: password,
+      p_role: targetRole,
+    });
+
+    if (error) {
+      console.error('Error in provision_client RPC:', error);
+      return NextResponse.json({ error: error.message || 'Error al provisionar cliente en base de datos.' }, { status: 500 });
+    }
+
+    return NextResponse.json({ success: true, client: data });
+  } catch (err: any) {
+    console.error('Server error creating client:', err);
+    return NextResponse.json({ error: err?.message || 'Error interno del servidor.' }, { status: 500 });
+  }
+}

src/app/dashboard/agencia/page.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Building2, DollarSign, Users, TrendingUp, Layers } from 'lucide-react';
+import ClientManagement from '@/components/ClientManagement';
 
 export const revalidate = 0;
 
@@ -101,50 +102,8 @@ export default async function AgencyPage() {
         </div>
       </div>
 
-      {/* Tenants Table */}
+      {/* Interactive Tenants Management with Onboarding Form */}
-      <div className="bg-[#111827] border border-gray-800 rounded-xl overflow-hidden">
+      <ClientManagement initialTenants={tenants} />
-        <div className="p-5 border-b border-gray-800">
-          <h3 className="text-base font-bold text-white">Cartera de Clientes Activos</h3>
-          <p className="text-xs text-gray-400 mt-0.5">
-            Cada cliente cuenta con aislamiento nativo Row Level Security (RLS) en Postgres.
-          </p>
-        </div>
-        <div className="overflow-x-auto">
-          <table className="w-full text-left text-sm text-gray-300">
-            <thead className="bg-gray-900/50 text-xs uppercase text-gray-400 border-b border-gray-800">
-              <tr>
-                <th className="px-5 py-3">Nombre del Cliente</th>
-                <th className="px-5 py-3">Tenant Slug</th>
-                <th className="px-5 py-3">UUID</th>
-                <th className="px-5 py-3">Acceso Portal</th>
-                <th className="px-5 py-3">Estado</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-gray-800/60">
-              {tenants.map((t) => (
-                <tr key={t.id} className="hover:bg-gray-800/30 transition-colors">
-                  <td className="px-5 py-3.5 font-semibold text-white">{t.name}</td>
-                  <td className="px-5 py-3.5 text-xs text-brand-400 font-mono">{t.slug}</td>
-                  <td className="px-5 py-3.5 text-xs text-gray-400 font-mono">{t.id}</td>
-                  <td className="px-5 py-3.5 text-xs">
-                    <a
-                      href={`/dashboard/kpis?tenant=${t.slug}`}
-                      className="text-brand-400 hover:underline inline-flex items-center gap-1"
-                    >
-                      Abrir Portal ↗
-                    </a>
-                  </td>
-                  <td className="px-5 py-3.5 text-xs">
-                    <span className="bg-emerald-950/80 text-emerald-400 px-2 py-0.5 rounded-full border border-emerald-800/40 text-[10px] font-bold uppercase">
-                      Activo
-                    </span>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
     </div>
   );
 }

src/components/ClientManagement.tsx

@@ -0,0 +1,442 @@
+'use client';
+
+import React, { useState } from 'react';
+import { 
+  Plus, 
+  Key, 
+  Copy, 
+  Check, 
+  X, 
+  ExternalLink, 
+  ShieldCheck, 
+  Building2, 
+  Mail, 
+  Lock, 
+  Sparkles, 
+  Loader2,
+  CheckCircle2
+} from 'lucide-react';
+
+interface Tenant {
+  id: string;
+  name: string;
+  slug: string;
+  created_at: string;
+}
+
+interface ClientManagementProps {
+  initialTenants: Tenant[];
+}
+
+export default function ClientManagement({ initialTenants }: ClientManagementProps) {
+  const [tenants, setTenants] = useState<Tenant[]>(initialTenants);
+  const [isOpen, setIsOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  // Form state
+  const [companyName, setCompanyName] = useState('');
+  const [slug, setSlug] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [role, setRole] = useState<'client' | 'team' | 'admin'>('client');
+  const [autoSlug, setAutoSlug] = useState(true);
+
+  // Created access card state
+  const [createdClient, setCreatedClient] = useState<{
+    company: string;
+    slug: string;
+    email: string;
+    password: string;
+    role: string;
+  } | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  // Auto slug generation from company name
+  const handleNameChange = (val: string) => {
+    setCompanyName(val);
+    if (autoSlug) {
+      const generated = val
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/(^-|-$)+/g, '');
+      setSlug(generated);
+    }
+  };
+
+  const generateRandomPassword = () => {
+    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#$%&*';
+    let pw = '';
+    for (let i = 0; i < 14; i++) {
+      pw += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    setPassword(pw);
+  };
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setErrorMsg(null);
+    setLoading(true);
+
+    try {
+      const res = await fetch('/api/admin/create-client', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          companyName,
+          slug,
+          email,
+          password,
+          role
+        })
+      });
+
+      const data = await res.json();
+
+      if (!res.ok || data.error) {
+        throw new Error(data.error || 'Error al crear cliente');
+      }
+
+      // Add to local state if not exists
+      const newTenant: Tenant = {
+        id: data.client.tenant_id,
+        name: companyName,
+        slug: slug,
+        created_at: new Date().toISOString()
+      };
+
+      setTenants(prev => {
+        const filtered = prev.filter(t => t.slug !== slug);
+        return [...filtered, newTenant];
+      });
+
+      setCreatedClient({
+        company: companyName,
+        slug: slug,
+        email: email,
+        password: password,
+        role: role
+      });
+
+      // Clear input fields
+      setCompanyName('');
+      setSlug('');
+      setEmail('');
+      setPassword('');
+    } catch (err: any) {
+      setErrorMsg(err.message || 'Error inesperado');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const copyCredentials = () => {
+    if (!createdClient) return;
+    const text = `🔐 *Acceso a tu Centro de Mando — 4Ventures*
+Empresa: ${createdClient.company}
+Portal Web: https://app.4ventures.es/login
+Usuario: ${createdClient.email}
+Contraseña: ${createdClient.password}
+Rol: ${createdClient.role === 'client' ? 'Cliente' : 'Agencia'}
+
+Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`;
+
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2500);
+  };
+
+  return (
+    <div className="bg-[#111827] border border-gray-800 rounded-xl overflow-hidden shadow-xl">
+      {/* Table Header with Action Button */}
+      <div className="p-5 border-b border-gray-800 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+          <h3 className="text-base font-bold text-white flex items-center gap-2">
+            <Building2 className="w-4 h-4 text-brand-400" />
+            Cartera de Clientes Activos ({tenants.length})
+          </h3>
+          <p className="text-xs text-gray-400 mt-0.5">
+            Cada cliente cuenta con aislamiento nativo Row Level Security (RLS) en Postgres.
+          </p>
+        </div>
+
+        <button
+          onClick={() => {
+            setIsOpen(true);
+            setCreatedClient(null);
+            setErrorMsg(null);
+            generateRandomPassword();
+          }}
+          className="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-brand-500 to-amber-600 hover:from-brand-600 hover:to-amber-700 text-white text-xs font-semibold shadow-lg shadow-brand-500/20 transition-all cursor-pointer"
+        >
+          <Plus className="w-4 h-4" />
+          Dar de Alta Cliente
+        </button>
+      </div>
+
+      {/* Tenants Table */}
+      <div className="overflow-x-auto">
+        <table className="w-full text-left text-sm text-gray-300">
+          <thead className="bg-gray-900/50 text-xs uppercase text-gray-400 border-b border-gray-800">
+            <tr>
+              <th className="px-5 py-3">Nombre del Cliente</th>
+              <th className="px-5 py-3">Tenant Slug</th>
+              <th className="px-5 py-3">UUID</th>
+              <th className="px-5 py-3">Acceso Portal</th>
+              <th className="px-5 py-3">Estado</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-800/60">
+            {tenants.map((t) => (
+              <tr key={t.id} className="hover:bg-gray-800/30 transition-colors">
+                <td className="px-5 py-3.5 font-semibold text-white flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-full bg-emerald-400" />
+                  {t.name}
+                </td>
+                <td className="px-5 py-3.5 text-xs text-brand-400 font-mono">{t.slug}</td>
+                <td className="px-5 py-3.5 text-xs text-gray-400 font-mono">{t.id}</td>
+                <td className="px-5 py-3.5 text-xs">
+                  <a
+                    href={`/dashboard/kpis?tenant=${t.slug}`}
+                    className="text-brand-400 hover:underline inline-flex items-center gap-1"
+                  >
+                    Abrir Portal <ExternalLink className="w-3 h-3" />
+                  </a>
+                </td>
+                <td className="px-5 py-3.5 text-xs">
+                  <span className="bg-emerald-950/80 text-emerald-400 px-2.5 py-0.5 rounded-full border border-emerald-800/40 text-[10px] font-bold uppercase tracking-wider">
+                    Activo
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Modal: Onboard New Client */}
+      {isOpen && (
+        <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
+          <div className="bg-[#0D121F] border border-gray-800 rounded-2xl w-full max-w-lg overflow-hidden shadow-2xl relative animate-in fade-in zoom-in duration-200">
+            {/* Modal Header */}
+            <div className="p-6 border-b border-gray-800 flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="w-9 h-9 rounded-xl bg-brand-500/10 border border-brand-500/20 flex items-center justify-center text-brand-400">
+                  <Building2 className="w-5 h-5" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-bold text-white">Alta de Nuevo Cliente</h3>
+                  <p className="text-xs text-gray-400">Crea el portal corporativo y activa sus credenciales de acceso</p>
+                </div>
+              </div>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="text-gray-400 hover:text-white p-1 rounded-lg hover:bg-gray-800/60 transition-colors"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Modal Body */}
+            <div className="p-6">
+              {createdClient ? (
+                /* Success Screen with Credentials */
+                <div className="space-y-5">
+                  <div className="p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/30 flex items-start gap-3">
+                    <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" />
+                    <div>
+                      <h4 className="text-sm font-semibold text-emerald-300">¡Cliente Creado con Éxito!</h4>
+                      <p className="text-xs text-emerald-400/80 mt-0.5">
+                        El tenant ha sido configurado en Postgres con aislamiento RLS y el usuario ya puede iniciar sesión.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="bg-gray-900/80 rounded-xl p-4 border border-gray-800 space-y-2.5 font-mono text-xs">
+                    <div className="flex justify-between border-b border-gray-800 pb-2">
+                      <span className="text-gray-400">Empresa:</span>
+                      <span className="text-white font-semibold">{createdClient.company}</span>
+                    </div>
+                    <div className="flex justify-between border-b border-gray-800 pb-2">
+                      <span className="text-gray-400">URL Acceso:</span>
+                      <span className="text-brand-400">https://app.4ventures.es/login</span>
+                    </div>
+                    <div className="flex justify-between border-b border-gray-800 pb-2">
+                      <span className="text-gray-400">Email:</span>
+                      <span className="text-white">{createdClient.email}</span>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-gray-400">Contraseña:</span>
+                      <span className="text-amber-400 font-bold bg-amber-950/40 px-2 py-0.5 rounded border border-amber-800/40">
+                        {createdClient.password}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="flex gap-3">
+                    <button
+                      type="button"
+                      onClick={copyCredentials}
+                      className="flex-1 py-2.5 px-4 rounded-xl bg-brand-500 hover:bg-brand-600 text-white text-xs font-semibold flex items-center justify-center gap-2 transition-all cursor-pointer shadow-lg shadow-brand-500/20"
+                    >
+                      {copied ? <Check className="w-4 h-4 text-emerald-300" /> : <Copy className="w-4 h-4" />}
+                      <span>{copied ? '¡Copiado al Portapapeles!' : 'Copiar Credenciales para el Cliente'}</span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setCreatedClient(null);
+                        generateRandomPassword();
+                      }}
+                      className="py-2.5 px-4 rounded-xl bg-gray-800 hover:bg-gray-700 text-gray-200 text-xs font-semibold transition-all cursor-pointer"
+                    >
+                      Crear Otro
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                /* Creation Form */
+                <form onSubmit={handleCreate} className="space-y-4">
+                  {errorMsg && (
+                    <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-xs">
+                      {errorMsg}
+                    </div>
+                  )}
+
+                  <div>
+                    <label className="block text-xs font-medium text-gray-300 mb-1">
+                      Nombre Comercial de la Empresa / Cliente
+                    </label>
+                    <div className="relative">
+                      <Building2 className="w-4 h-4 text-gray-400 absolute left-3 top-3" />
+                      <input
+                        type="text"
+                        required
+                        placeholder="Ej: Clínica Dental Sonrisas"
+                        value={companyName}
+                        onChange={(e) => handleNameChange(e.target.value)}
+                        className="w-full pl-9 pr-3 py-2 bg-gray-900 border border-gray-800 rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-brand-500"
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="flex justify-between items-center mb-1">
+                      <label className="text-xs font-medium text-gray-300">
+                        Slug del Tenant (identificador para subdominio y URL)
+                      </label>
+                      <button
+                        type="button"
+                        onClick={() => setAutoSlug(!autoSlug)}
+                        className="text-[10px] text-brand-400 hover:underline cursor-pointer"
+                      >
+                        {autoSlug ? 'Modo manual' : 'Modo auto'}
+                      </button>
+                    </div>
+                    <input
+                      type="text"
+                      required
+                      placeholder="ej: clinica-sonrisas"
+                      value={slug}
+                      onChange={(e) => {
+                        setAutoSlug(false);
+                        setSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''));
+                      }}
+                      className="w-full px-3 py-2 bg-gray-900 border border-gray-800 rounded-lg text-sm font-mono text-brand-400 placeholder-gray-500 focus:outline-none focus:border-brand-500"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-gray-300 mb-1">
+                      Correo Electrónico de Acceso
+                    </label>
+                    <div className="relative">
+                      <Mail className="w-4 h-4 text-gray-400 absolute left-3 top-3" />
+                      <input
+                        type="email"
+                        required
+                        placeholder="director@cliente.com"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        className="w-full pl-9 pr-3 py-2 bg-gray-900 border border-gray-800 rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-brand-500"
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="flex justify-between items-center mb-1">
+                      <label className="text-xs font-medium text-gray-300">
+                        Contraseña Inicial
+                      </label>
+                      <button
+                        type="button"
+                        onClick={generateRandomPassword}
+                        className="text-[10px] text-brand-400 hover:underline flex items-center gap-1 cursor-pointer"
+                      >
+                        <Sparkles className="w-3 h-3" /> Generar aleatoria
+                      </button>
+                    </div>
+                    <div className="relative">
+                      <Lock className="w-4 h-4 text-gray-400 absolute left-3 top-3" />
+                      <input
+                        type="text"
+                        required
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        className="w-full pl-9 pr-3 py-2 bg-gray-900 border border-gray-800 rounded-lg text-sm font-mono text-white placeholder-gray-500 focus:outline-none focus:border-brand-500"
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <label className="block text-xs font-medium text-gray-300 mb-1">
+                      Rol de Acceso
+                    </label>
+                    <select
+                      value={role}
+                      onChange={(e: any) => setRole(e.target.value)}
+                      className="w-full px-3 py-2 bg-gray-900 border border-gray-800 rounded-lg text-sm text-white focus:outline-none focus:border-brand-500"
+                    >
+                      <option value="client">Cliente (Acceso exclusivo a su portal y métricas)</option>
+                      <option value="team">Equipo Agencia (Acceso a toda la cartera)</option>
+                      <option value="admin">Administrador 4Ventures (Control total)</option>
+                    </select>
+                  </div>
+
+                  <div className="pt-3 flex items-center justify-end gap-3 border-t border-gray-800">
+                    <button
+                      type="button"
+                      onClick={() => setIsOpen(false)}
+                      className="px-4 py-2 rounded-lg text-xs font-semibold text-gray-400 hover:text-white hover:bg-gray-800 transition-all cursor-pointer"
+                    >
+                      Cancelar
+                    </button>
+                    <button
+                      type="submit"
+                      disabled={loading}
+                      className="px-5 py-2 rounded-lg bg-gradient-to-r from-brand-500 to-amber-600 hover:from-brand-600 hover:to-amber-700 text-white text-xs font-semibold shadow-lg shadow-brand-500/20 flex items-center gap-2 transition-all disabled:opacity-50 cursor-pointer"
+                    >
+                      {loading ? (
+                        <>
+                          <Loader2 className="w-4 h-4 animate-spin" />
+                          <span>Provisionando...</span>
+                        </>
+                      ) : (
+                        <>
+                          <Key className="w-4 h-4" />
+                          <span>Crear y Activar Acceso</span>
+                        </>
+                      )}
+                    </button>
+                  </div>
+                </form>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}