Resumen de lo entregado

src/features/admin/UsersPage.tsx

@@ -0,0 +1,600 @@
+/**
+ * Limitaciones conocidas documentadas:
+ * 1. email no está en public.users (vive en auth.users, requiere service_role) → solo se muestra name.
+ * 2. "Eliminar" llama revoke-user que baja platform_role a 'guest'. Eliminación real requiere Edge Function futura.
+ * 3. "Reactivar" restaura siempre a 'client_editor' — no se guarda el rol previo a la suspensión.
+ */
+import { useEffect, useState } from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { UserX, UserPlus, MoreVertical } from 'lucide-react'
+import { supabase } from '@/lib/supabase'
+import { useAuth } from '@/auth/AuthContext'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
+} from '@/components/ui/sheet'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { RoleBadge } from './RoleBadge'
+
+interface AdminUser {
+  id: string
+  name: string | null
+  company: string | null
+  platform_role: string
+  org_id: string | null
+  avatar_url: string | null
+  organization: { name: string; is_provider: boolean } | null
+}
+
+interface OrgOption {
+  id: string
+  name: string
+}
+
+// ─── ConfirmDialog usando @radix-ui/react-dialog (sin @radix-ui/react-alert-dialog) ──
+
+interface ConfirmDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description: string
+  confirmLabel?: string
+  onConfirm: () => void
+  loading?: boolean
+  destructive?: boolean
+}
+
+function ConfirmDialog({
+  open, onOpenChange, title, description,
+  confirmLabel = 'Confirmar',
+  onConfirm, loading = false, destructive = false,
+}: ConfirmDialogProps) {
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content
+          className="fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 w-full max-w-md bg-white rounded-xl shadow-xl p-6 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+          onInteractOutside={(e) => e.preventDefault()}
+        >
+          <DialogPrimitive.Title className="text-base font-semibold text-slate-900">
+            {title}
+          </DialogPrimitive.Title>
+          <DialogPrimitive.Description className="mt-2 text-sm text-slate-600">
+            {description}
+          </DialogPrimitive.Description>
+          <div className="flex justify-end gap-2 mt-6">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onOpenChange(false)}
+              disabled={loading}
+            >
+              Cancelar
+            </Button>
+            <Button
+              size="sm"
+              variant={destructive ? 'destructive' : 'default'}
+              onClick={onConfirm}
+              disabled={loading}
+            >
+              {loading ? 'Procesando…' : confirmLabel}
+            </Button>
+          </div>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}
+
+// ─── Página principal ─────────────────────────────────────────────────────────
+
+const INVITE_ROLES = ['client_editor', 'client_viewer', 'member'] as const
+type InviteRole = typeof INVITE_ROLES[number]
+
+const CHANGE_ROLES = ['platform_admin', 'member', 'client_editor', 'client_viewer', 'guest'] as const
+
+export function UsersPage() {
+  const { user: adminUser } = useAuth()
+
+  const [users, setUsers] = useState<AdminUser[]>([])
+  const [orgs, setOrgs] = useState<OrgOption[]>([])
+  const [loadingUsers, setLoadingUsers] = useState(true)
+  const [filterOrgId, setFilterOrgId] = useState<string>('all')
+
+  // Invite sheet
+  const [inviteOpen, setInviteOpen] = useState(false)
+  const [inviteName, setInviteName] = useState('')
+  const [inviteEmail, setInviteEmail] = useState('')
+  const [inviteRole, setInviteRole] = useState<InviteRole>('client_editor')
+  const [inviteOrgName, setInviteOrgName] = useState('')
+  const [inviteError, setInviteError] = useState<string | null>(null)
+  const [inviteSuccess, setInviteSuccess] = useState<string | null>(null)
+  const [inviting, setInviting] = useState(false)
+
+  // Change role sheet
+  const [changeRoleUser, setChangeRoleUser] = useState<AdminUser | null>(null)
+  const [changeRoleOpen, setChangeRoleOpen] = useState(false)
+  const [newRole, setNewRole] = useState<string>('')
+  const [changingRole, setChangingRole] = useState(false)
+  const [changeRoleError, setChangeRoleError] = useState<string | null>(null)
+
+  // Confirmations
+  const [suspendTarget, setSuspendTarget] = useState<AdminUser | null>(null)
+  const [suspending, setSuspending] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<AdminUser | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  const [reactivateTarget, setReactivateTarget] = useState<AdminUser | null>(null)
+  const [reactivating, setReactivating] = useState(false)
+
+  const fetchUsers = async () => {
+    const query = supabase
+      .from('users')
+      .select('id, name, company, platform_role, org_id, avatar_url, organization:organizations(name, is_provider)')
+      .order('name')
+    const finalQuery = filterOrgId !== 'all'
+      ? query.eq('org_id', filterOrgId)
+      : query
+    const { data } = await finalQuery
+    setUsers((data as AdminUser[] | null) ?? [])
+    setLoadingUsers(false)
+  }
+
+  const fetchOrgs = async () => {
+    const { data } = await supabase
+      .from('organizations')
+      .select('id, name')
+      .order('name')
+    setOrgs((data as OrgOption[] | null) ?? [])
+  }
+
+  useEffect(() => {
+    void fetchOrgs()
+  }, [])
+
+  useEffect(() => {
+    setLoadingUsers(true)
+    void fetchUsers()
+  }, [filterOrgId]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Invite user ──────────────────────────────────────────────────────────
+
+  const openInvite = () => {
+    setInviteName('')
+    setInviteEmail('')
+    setInviteRole('client_editor')
+    setInviteOrgName('')
+    setInviteError(null)
+    setInviteSuccess(null)
+    setInviteOpen(true)
+  }
+
+  const handleInvite = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setInviteError(null)
+    setInviteSuccess(null)
+    if (!inviteName.trim()) { setInviteError('El nombre es requerido'); return }
+    if (!inviteEmail.trim() || !inviteEmail.includes('@')) { setInviteError('Email inválido'); return }
+    if ((inviteRole === 'client_editor' || inviteRole === 'client_viewer') && !inviteOrgName.trim()) {
+      setInviteError('La organización es requerida para este rol')
+      return
+    }
+    setInviting(true)
+    const { error } = await supabase.functions.invoke('invite-user', {
+      body: {
+        email: inviteEmail.trim(),
+        name: inviteName.trim(),
+        platform_role: inviteRole,
+        org_name: inviteRole === 'member' ? 'InQuality' : inviteOrgName.trim(),
+      },
+    })
+    if (error) {
+      setInviteError(typeof error === 'object' && 'message' in error ? String(error.message) : String(error))
+      setInviting(false)
+    } else {
+      setInviteSuccess(`Invitación enviada a ${inviteEmail.trim()}`)
+      setInviting(false)
+      void fetchUsers()
+    }
+  }
+
+  // ── Change role ──────────────────────────────────────────────────────────
+
+  const openChangeRole = (u: AdminUser) => {
+    setChangeRoleUser(u)
+    setNewRole(u.platform_role)
+    setChangeRoleError(null)
+    setChangeRoleOpen(true)
+  }
+
+  const handleChangeRole = async () => {
+    if (!changeRoleUser || !newRole) return
+    setChangingRole(true)
+    const { error } = await supabase
+      .from('users')
+      .update({ platform_role: newRole })
+      .eq('id', changeRoleUser.id)
+    if (error) {
+      setChangeRoleError(error.message)
+      setChangingRole(false)
+    } else {
+      setChangeRoleOpen(false)
+      setChangingRole(false)
+      void fetchUsers()
+    }
+  }
+
+  // ── Suspend (revoke-user vía Edge Function) ───────────────────────────────
+
+  const handleSuspend = async () => {
+    if (!suspendTarget) return
+    setSuspending(true)
+    const { error } = await supabase.functions.invoke('revoke-user', {
+      body: { userId: suspendTarget.id },
+    })
+    if (error) {
+      console.error('Error al suspender usuario:', error)
+    }
+    setSuspendTarget(null)
+    setSuspending(false)
+    void fetchUsers()
+  }
+
+  // ── Delete (también usa revoke-user — baja a guest, eliminación real futura) ─
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    setDeleting(true)
+    const { error } = await supabase.functions.invoke('revoke-user', {
+      body: { userId: deleteTarget.id },
+    })
+    if (error) {
+      console.error('Error al eliminar usuario:', error)
+    }
+    setDeleteTarget(null)
+    setDeleting(false)
+    void fetchUsers()
+  }
+
+  // ── Reactivate (restore to client_editor — rol previo no se guarda) ───────
+
+  const handleReactivate = async () => {
+    if (!reactivateTarget) return
+    setReactivating(true)
+    await supabase
+      .from('users')
+      .update({ platform_role: 'client_editor' })
+      .eq('id', reactivateTarget.id)
+    setReactivateTarget(null)
+    setReactivating(false)
+    void fetchUsers()
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+
+  const displayedUsers = users
+
+  return (
+    <>
+      <div className="flex items-center justify-between mb-5">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-semibold text-slate-900">Usuarios</h2>
+          <Select value={filterOrgId} onValueChange={setFilterOrgId}>
+            <SelectTrigger className="w-48 h-8 text-xs">
+              <SelectValue placeholder="Filtrar por org" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Todas las organizaciones</SelectItem>
+              {orgs.map((o) => (
+                <SelectItem key={o.id} value={o.id}>{o.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <Button size="sm" onClick={openInvite}>
+          <UserPlus className="h-4 w-4 mr-1.5" />
+          Invitar usuario
+        </Button>
+      </div>
+
+      {loadingUsers ? (
+        <TableSkeleton rows={6} />
+      ) : displayedUsers.length === 0 ? (
+        <EmptyState
+          icon={<UserX className="h-10 w-10 text-slate-300" />}
+          message={
+            filterOrgId !== 'all'
+              ? 'No hay usuarios en esta organización.'
+              : 'No hay usuarios registrados aún.'
+          }
+        />
+      ) : (
+        <div className="rounded-lg border border-slate-200 overflow-hidden bg-white">
+          <table className="w-full text-sm">
+            <thead className="bg-slate-50 border-b border-slate-200">
+              <tr>
+                <th className="text-left py-2.5 px-4 font-medium text-slate-600">Nombre</th>
+                <th className="text-left py-2.5 px-4 font-medium text-slate-600">Rol</th>
+                <th className="text-left py-2.5 px-4 font-medium text-slate-600">Organización</th>
+                <th className="py-2.5 px-4" />
+              </tr>
+            </thead>
+            <tbody>
+              {displayedUsers.map((u) => {
+                const isSelf = adminUser?.id === u.id
+                const isPending = !u.name && !u.avatar_url
+
+                return (
+                  <tr key={u.id} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/50">
+                    <td className="py-3 px-4">
+                      <div className="flex items-center gap-2">
+                        <span className={`font-medium ${u.platform_role === 'guest' ? 'text-slate-400' : 'text-slate-900'}`}>
+                          {u.name || <span className="italic text-slate-400">Sin nombre</span>}
+                        </span>
+                        {isPending && (
+                          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded bg-amber-50 text-amber-700 border border-amber-200">
+                            Invitación pendiente
+                          </span>
+                        )}
+                        {isSelf && (
+                          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded bg-slate-100 text-slate-500">
+                            Tú
+                          </span>
+                        )}
+                      </div>
+                    </td>
+                    <td className="py-3 px-4">
+                      <RoleBadge role={u.platform_role} />
+                    </td>
+                    <td className="py-3 px-4 text-slate-500">
+                      {u.organization?.name ?? '—'}
+                    </td>
+                    <td className="py-3 px-4 text-right">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-7 w-7"
+                            disabled={isSelf}
+                            title={isSelf ? 'No puedes modificar tu propio usuario' : undefined}
+                          >
+                            <MoreVertical className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem onClick={() => openChangeRole(u)}>
+                            Cambiar rol
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          {u.platform_role === 'guest' ? (
+                            <DropdownMenuItem onClick={() => setReactivateTarget(u)}>
+                              Reactivar usuario
+                            </DropdownMenuItem>
+                          ) : (
+                            <DropdownMenuItem
+                              className="text-amber-600 focus:text-amber-600"
+                              onClick={() => setSuspendTarget(u)}
+                            >
+                              Suspender
+                            </DropdownMenuItem>
+                          )}
+                          <DropdownMenuItem
+                            className="text-destructive focus:text-destructive"
+                            onClick={() => setDeleteTarget(u)}
+                          >
+                            Eliminar
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* ─── Sheet: Invitar usuario ──────────────────────────────────────── */}
+      <Sheet open={inviteOpen} onOpenChange={setInviteOpen}>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Invitar usuario</SheetTitle>
+          </SheetHeader>
+          <form onSubmit={handleInvite} className="mt-5 flex flex-col gap-4">
+            <Field label="Nombre completo" id="invite-name">
+              <Input
+                id="invite-name"
+                value={inviteName}
+                onChange={(e) => setInviteName(e.target.value)}
+                placeholder="Ej. Ana Martínez"
+                disabled={inviting}
+                autoFocus
+              />
+            </Field>
+
+            <Field label="Email" id="invite-email">
+              <Input
+                id="invite-email"
+                type="email"
+                value={inviteEmail}
+                onChange={(e) => setInviteEmail(e.target.value)}
+                placeholder="ana@empresa.com"
+                disabled={inviting}
+              />
+            </Field>
+
+            <Field label="Rol" id="invite-role">
+              <Select
+                value={inviteRole}
+                onValueChange={(v) => setInviteRole(v as InviteRole)}
+                disabled={inviting}
+              >
+                <SelectTrigger id="invite-role">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="client_editor">Client Editor</SelectItem>
+                  <SelectItem value="client_viewer">Client Viewer</SelectItem>
+                  <SelectItem value="member">Member (InQuality)</SelectItem>
+                </SelectContent>
+              </Select>
+            </Field>
+
+            {inviteRole === 'member' ? (
+              <Field label="Organización" id="invite-org-member">
+                <Input id="invite-org-member" value="InQuality" disabled />
+              </Field>
+            ) : (
+              <Field label="Organización" id="invite-org">
+                <Input
+                  id="invite-org"
+                  list="orgs-datalist"
+                  value={inviteOrgName}
+                  onChange={(e) => setInviteOrgName(e.target.value)}
+                  placeholder="Nombre de la organización"
+                  disabled={inviting}
+                />
+                <datalist id="orgs-datalist">
+                  {orgs.map((o) => (
+                    <option key={o.id} value={o.name} />
+                  ))}
+                </datalist>
+              </Field>
+            )}
+
+            {inviteError && <p className="text-xs text-red-600">{inviteError}</p>}
+            {inviteSuccess && <p className="text-xs text-emerald-600 font-medium">{inviteSuccess}</p>}
+
+            <SheetFooter className="mt-2">
+              <Button type="submit" disabled={inviting}>
+                {inviting ? 'Enviando invitación…' : 'Enviar invitación'}
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+
+      {/* ─── Sheet: Cambiar rol ──────────────────────────────────────────── */}
+      <Sheet open={changeRoleOpen} onOpenChange={setChangeRoleOpen}>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Cambiar rol — {changeRoleUser?.name}</SheetTitle>
+          </SheetHeader>
+          <div className="mt-5 flex flex-col gap-4">
+            <Field label="Nuevo rol" id="change-role-select">
+              <Select value={newRole} onValueChange={setNewRole} disabled={changingRole}>
+                <SelectTrigger id="change-role-select">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {CHANGE_ROLES.map((r) => (
+                    <SelectItem key={r} value={r}>{r}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Field>
+            {changeRoleError && <p className="text-xs text-red-600">{changeRoleError}</p>}
+            <SheetFooter className="mt-2">
+              <Button onClick={handleChangeRole} disabled={changingRole}>
+                {changingRole ? 'Guardando…' : 'Guardar rol'}
+              </Button>
+            </SheetFooter>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      {/* ─── ConfirmDialog: Suspender ────────────────────────────────────── */}
+      <ConfirmDialog
+        open={!!suspendTarget}
+        onOpenChange={(open) => !open && setSuspendTarget(null)}
+        title={`¿Suspender a ${suspendTarget?.name ?? 'este usuario'}?`}
+        description="No podrá acceder a la plataforma mientras esté suspendido. Podés reactivarlo después."
+        confirmLabel="Suspender"
+        onConfirm={handleSuspend}
+        loading={suspending}
+        destructive
+      />
+
+      {/* ─── ConfirmDialog: Eliminar ─────────────────────────────────────── */}
+      <ConfirmDialog
+        open={!!deleteTarget}
+        onOpenChange={(open) => !open && setDeleteTarget(null)}
+        title={`¿Eliminar a ${deleteTarget?.name ?? 'este usuario'}?`}
+        description="El usuario quedará suspendido permanentemente. (Nota: la eliminación real de la cuenta estará disponible en una versión futura.)"
+        confirmLabel="Eliminar"
+        onConfirm={handleDelete}
+        loading={deleting}
+        destructive
+      />
+
+      {/* ─── ConfirmDialog: Reactivar ────────────────────────────────────── */}
+      <ConfirmDialog
+        open={!!reactivateTarget}
+        onOpenChange={(open) => !open && setReactivateTarget(null)}
+        title={`¿Reactivar a ${reactivateTarget?.name ?? 'este usuario'}?`}
+        description="Se le asignará el rol Client Editor. (Nota: el rol original no se conservó al momento de la suspensión.)"
+        confirmLabel="Reactivar"
+        onConfirm={handleReactivate}
+        loading={reactivating}
+      />
+    </>
+  )
+}
+
+function Field({ label, id, children }: { label: string; id: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <Label htmlFor={id}>{label}</Label>
+      {children}
+    </div>
+  )
+}
+
+function TableSkeleton({ rows }: { rows: number }) {
+  return (
+    <div className="rounded-lg border border-slate-200 overflow-hidden">
+      <div className="bg-slate-50 border-b border-slate-200 h-10" />
+      <div className="flex flex-col divide-y divide-slate-100">
+        {Array.from({ length: rows }).map((_, i) => (
+          <div key={i} className="flex gap-4 px-4 py-3 bg-white items-center">
+            <Skeleton className="h-4 flex-1" />
+            <Skeleton className="h-5 w-20 rounded" />
+            <Skeleton className="h-4 w-28" />
+            <Skeleton className="h-6 w-6 rounded" />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function EmptyState({ icon, message }: { icon: React.ReactNode; message: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-20 gap-3 text-center">
+      {icon}
+      <p className="text-sm text-slate-500 max-w-xs">{message}</p>
+    </div>
+  )
+}