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>
This commit is contained in:
Consultoria AS
146
apps/web/components/tenant-selector.tsx
Normal file
146
apps/web/components/tenant-selector.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user