feat: add multi-tenant client management for admins

- Add tenants API endpoints (list, get, create)
- Add tenant middleware override via X-View-Tenant header
- Add TenantSelector dropdown component in header
- Add tenant view store with persistence
- Add Clientes management page
- Update all navigation layouts with Clientes link for admins

Admins can now:
- View list of all clients
- Create new clients with automatic schema setup
- Switch between viewing different clients' data
- See which client they are currently viewing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/web/components/layouts/header.tsx

@@ -3,6 +3,7 @@
 import { useThemeStore } from '@/stores/theme-store';
 import { themes, type ThemeName } from '@/themes';
 import { Button } from '@/components/ui/button';
+import { TenantSelector } from '@/components/tenant-selector';
 import { Sun, Moon, Palette } from 'lucide-react';
 
 const themeIcons: Record<ThemeName, React.ReactNode> = {
@@ -27,7 +28,8 @@ export function Header({ title }: { title: string }) {
     <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b bg-background/95 backdrop-blur px-6">
       <h1 className="text-xl font-semibold">{title}</h1>
 
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-3">
+        <TenantSelector />
         <Button
           variant="ghost"
           size="icon"

apps/web/components/layouts/sidebar-compact.tsx

@@ -13,6 +13,7 @@ import {
   Calendar,
   Bell,
   Users,
+  Building2,
 } from 'lucide-react';
 import { useAuthStore } from '@/stores/auth-store';
 import { logout } from '@/lib/api/auth';
@@ -30,12 +31,20 @@ const navigation = [
   { name: 'Configuración', href: '/configuracion', icon: Settings },
 ];
 
+const adminNavigation = [
+  { name: 'Clientes', href: '/clientes', icon: Building2 },
+];
+
 export function SidebarCompact() {
   const pathname = usePathname();
   const router = useRouter();
   const { user, logout: clearAuth } = useAuthStore();
   const [expanded, setExpanded] = useState(false);
 
+  const allNavigation = user?.role === 'admin'
+    ? [...navigation.slice(0, -1), ...adminNavigation, navigation[navigation.length - 1]]
+    : navigation;
+
   const handleLogout = async () => {
     try {
       await logout();
@@ -74,7 +83,7 @@ export function SidebarCompact() {
 
         {/* Navigation */}
         <nav className="flex-1 space-y-1 px-2 py-3">
-          {navigation.map((item) => {
+          {allNavigation.map((item) => {
             const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
             return (
               <Link

apps/web/components/layouts/sidebar-floating.tsx

@@ -13,6 +13,7 @@ import {
   Calendar,
   Bell,
   Users,
+  Building2,
 } from 'lucide-react';
 import { useAuthStore } from '@/stores/auth-store';
 import { logout } from '@/lib/api/auth';
@@ -29,11 +30,19 @@ const navigation = [
   { name: 'Config', href: '/configuracion', icon: Settings },
 ];
 
+const adminNavigation = [
+  { name: 'Clientes', href: '/clientes', icon: Building2 },
+];
+
 export function SidebarFloating() {
   const pathname = usePathname();
   const router = useRouter();
   const { user, logout: clearAuth } = useAuthStore();
 
+  const allNavigation = user?.role === 'admin'
+    ? [...navigation.slice(0, -1), ...adminNavigation, navigation[navigation.length - 1]]
+    : navigation;
+
   const handleLogout = async () => {
     try {
       await logout();
@@ -61,7 +70,7 @@ export function SidebarFloating() {
 
         {/* Navigation */}
         <nav className="flex-1 space-y-1">
-          {navigation.map((item) => {
+          {allNavigation.map((item) => {
             const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
             return (
               <Link

apps/web/components/layouts/sidebar.tsx

@@ -13,6 +13,7 @@ import {
   Calendar,
   Bell,
   Users,
+  Building2,
 } from 'lucide-react';
 import { useAuthStore } from '@/stores/auth-store';
 import { logout } from '@/lib/api/auth';
@@ -29,6 +30,10 @@ const navigation = [
   { name: 'Configuracion', href: '/configuracion', icon: Settings },
 ];
 
+const adminNavigation = [
+  { name: 'Clientes', href: '/clientes', icon: Building2 },
+];
+
 export function Sidebar() {
   const pathname = usePathname();
   const router = useRouter();
@@ -45,6 +50,10 @@ export function Sidebar() {
     }
   };
 
+  const allNavigation = user?.role === 'admin'
+    ? [...navigation.slice(0, -1), ...adminNavigation, navigation[navigation.length - 1]]
+    : navigation;
+
   return (
     <aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r bg-card">
       <div className="flex h-full flex-col">
@@ -60,7 +69,7 @@ export function Sidebar() {
 
         {/* Navigation */}
         <nav className="flex-1 space-y-1 px-3 py-4">
-          {navigation.map((item) => {
+          {allNavigation.map((item) => {
             const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
             return (
               <Link

apps/web/components/layouts/topnav.tsx

@@ -14,6 +14,7 @@ import {
   Bell,
   Users,
   ChevronDown,
+  Building2,
 } from 'lucide-react';
 import { useAuthStore } from '@/stores/auth-store';
 import { logout } from '@/lib/api/auth';
@@ -31,12 +32,20 @@ const navigation = [
   { name: 'Config', href: '/configuracion', icon: Settings },
 ];
 
+const adminNavigation = [
+  { name: 'Clientes', href: '/clientes', icon: Building2 },
+];
+
 export function TopNav() {
   const pathname = usePathname();
   const router = useRouter();
   const { user, logout: clearAuth } = useAuthStore();
   const [userMenuOpen, setUserMenuOpen] = useState(false);
 
+  const allNavigation = user?.role === 'admin'
+    ? [...navigation.slice(0, -1), ...adminNavigation, navigation[navigation.length - 1]]
+    : navigation;
+
   const handleLogout = async () => {
     try {
       await logout();
@@ -61,7 +70,7 @@ export function TopNav() {
 
         {/* Navigation */}
         <nav className="flex-1 flex items-center gap-1">
-          {navigation.map((item) => {
+          {allNavigation.map((item) => {
             const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
             return (
               <Link

apps/web/components/tenant-selector.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { getTenants, type Tenant } from '@/lib/api/tenants';
+import { useTenantViewStore } from '@/stores/tenant-view-store';
+import { useAuthStore } from '@/stores/auth-store';
+import { Building, ChevronDown, Check, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export function TenantSelector() {
+  const [open, setOpen] = useState(false);
+  const { user } = useAuthStore();
+  const { viewingTenantId, viewingTenantName, setViewingTenant, clearViewingTenant } = useTenantViewStore();
+
+  const { data: tenants, isLoading } = useQuery({
+    queryKey: ['tenants'],
+    queryFn: getTenants,
+    enabled: user?.role === 'admin',
+  });
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (!target.closest('.tenant-selector')) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, []);
+
+  // Only show for admin users
+  if (user?.role !== 'admin') {
+    return null;
+  }
+
+  const currentTenant = viewingTenantId
+    ? tenants?.find(t => t.id === viewingTenantId)
+    : null;
+
+  const displayName = viewingTenantName || currentTenant?.nombre || user?.tenantName;
+  const isViewingOther = viewingTenantId && viewingTenantId !== user?.tenantId;
+
+  return (
+    <div className="tenant-selector relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className={cn(
+          'flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+          isViewingOther
+            ? 'bg-primary/10 text-primary border border-primary/30'
+            : 'hover:bg-accent'
+        )}
+      >
+        <Building className="h-4 w-4" />
+        <span className="max-w-[150px] truncate">{displayName}</span>
+        {isViewingOther && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              clearViewingTenant();
+              window.location.reload();
+            }}
+            className="ml-1 p-0.5 rounded hover:bg-primary/20"
+            title="Volver a mi empresa"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        )}
+        <ChevronDown className={cn('h-4 w-4 transition-transform', open && 'rotate-180')} />
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-0 mt-2 w-72 rounded-lg border bg-card shadow-lg z-50">
+          <div className="p-2 border-b">
+            <p className="text-xs text-muted-foreground px-2">Seleccionar cliente</p>
+          </div>
+          <div className="max-h-64 overflow-y-auto p-1">
+            {isLoading ? (
+              <div className="px-3 py-2 text-sm text-muted-foreground">Cargando...</div>
+            ) : tenants && tenants.length > 0 ? (
+              <>
+                {/* Option to go back to own tenant */}
+                <button
+                  onClick={() => {
+                    clearViewingTenant();
+                    setOpen(false);
+                    window.location.reload();
+                  }}
+                  className={cn(
+                    'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-accent transition-colors',
+                    !viewingTenantId && 'bg-primary/10'
+                  )}
+                >
+                  <div className="h-8 w-8 rounded bg-primary/10 flex items-center justify-center">
+                    <Building className="h-4 w-4 text-primary" />
+                  </div>
+                  <div className="flex-1 text-left">
+                    <p className="font-medium">{user?.tenantName}</p>
+                    <p className="text-xs text-muted-foreground">Mi empresa</p>
+                  </div>
+                  {!viewingTenantId && <Check className="h-4 w-4 text-primary" />}
+                </button>
+
+                <div className="my-1 border-t" />
+
+                {/* Other tenants */}
+                {tenants
+                  .filter(t => t.id !== user?.tenantId)
+                  .map((tenant) => (
+                    <button
+                      key={tenant.id}
+                      onClick={() => {
+                        setViewingTenant(tenant.id, tenant.nombre);
+                        setOpen(false);
+                        window.location.reload();
+                      }}
+                      className={cn(
+                        'flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-accent transition-colors',
+                        viewingTenantId === tenant.id && 'bg-primary/10'
+                      )}
+                    >
+                      <div className="h-8 w-8 rounded bg-muted flex items-center justify-center text-xs font-medium">
+                        {tenant.nombre.substring(0, 2).toUpperCase()}
+                      </div>
+                      <div className="flex-1 text-left">
+                        <p className="font-medium truncate">{tenant.nombre}</p>
+                        <p className="text-xs text-muted-foreground">{tenant.rfc}</p>
+                      </div>
+                      {viewingTenantId === tenant.id && <Check className="h-4 w-4 text-primary" />}
+                    </button>
+                  ))}
+              </>
+            ) : (
+              <div className="px-3 py-2 text-sm text-muted-foreground">
+                No hay otros clientes
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}