549 lines
27 KiB
TypeScript
549 lines
27 KiB
TypeScript
// routes/_authenticated/usuarios.tsx
|
|
import { createFileRoute, useRouter } from "@tanstack/react-router"
|
|
import { useMemo, useState } from "react"
|
|
import { useSuspenseQuery, queryOptions, useMutation, useQueryClient } from "@tanstack/react-query"
|
|
import { supabase, useSupabaseAuth } from "@/auth/supabase"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@/components/ui/select"
|
|
import {
|
|
RefreshCcw, ShieldCheck, ShieldAlert, Pencil, Mail,
|
|
Cpu, Building2, ScrollText, GraduationCap, GanttChart, Plus, Eye, EyeOff,
|
|
Ban as BanIcon, Check
|
|
} from "lucide-react"
|
|
import { SupabaseClient } from "@supabase/supabase-js"
|
|
import { CarreraCombobox, FacultadCombobox } from "@/components/users/procedencia-combobox"
|
|
import { toast } from "sonner"
|
|
|
|
/* -------------------- Tipos -------------------- */
|
|
type AdminUser = {
|
|
id: string
|
|
email: string | null
|
|
created_at: string
|
|
last_sign_in_at: string | null
|
|
user_metadata: any
|
|
app_metadata: any
|
|
banned_until?: string | null
|
|
}
|
|
|
|
const SCOPED_ROLES = ["director_facultad", "secretario_academico", "jefe_carrera"] as const
|
|
|
|
const ROLES = [
|
|
"lci",
|
|
"vicerrectoria",
|
|
"director_facultad",
|
|
"secretario_academico",
|
|
"jefe_carrera",
|
|
"planeacion",
|
|
] as const
|
|
export type Role = typeof ROLES[number]
|
|
|
|
const ROLE_META: Record<Role, { label: string; Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; className: string }> = {
|
|
lci: { label: "Laboratorio de Cómputo de Ingeniería", Icon: Cpu, className: "bg-neutral-900 text-white" },
|
|
vicerrectoria: { label: "Vicerrectoría Académica", Icon: Building2, className: "bg-indigo-600 text-white" },
|
|
director_facultad: { label: "Director(a) de Facultad", Icon: Building2, className: "bg-purple-600 text-white" },
|
|
secretario_academico: { label: "Secretario Académico", Icon: ScrollText, className: "bg-emerald-600 text-white" },
|
|
jefe_carrera: { label: "Jefe de Carrera", Icon: GraduationCap, className: "bg-orange-600 text-white" },
|
|
planeacion: { label: "Planeación Curricular", Icon: GanttChart, className: "bg-sky-600 text-white" },
|
|
}
|
|
|
|
function RolePill({ role }: { role: Role }) {
|
|
const meta = ROLE_META[role]
|
|
if (!meta) return null
|
|
const { Icon, className, label } = meta
|
|
return (
|
|
<span className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] sm:text-[11px] ${className} max-w-[160px] sm:max-w-none truncate`} title={label}>
|
|
<Icon className="h-3 w-3 shrink-0" />
|
|
<span className="truncate">{label}</span>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
/* -------------------- Query Keys & Fetcher -------------------- */
|
|
const usersKeys = {
|
|
root: ["usuarios"] as const,
|
|
list: () => [...usersKeys.root, "list"] as const,
|
|
}
|
|
|
|
async function fetchUsers(): Promise<AdminUser[]> {
|
|
// ⚠️ Dev only: service role en cliente
|
|
const admin = new SupabaseClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_SERVICE_ROLE_KEY)
|
|
const { data } = await admin.auth.admin.listUsers()
|
|
return (data?.users ?? []) as AdminUser[]
|
|
}
|
|
|
|
const usersOptions = () =>
|
|
queryOptions({ queryKey: usersKeys.list(), queryFn: fetchUsers, staleTime: 60_000 })
|
|
|
|
/* -------------------- Ruta -------------------- */
|
|
export const Route = createFileRoute("/_authenticated/usuarios")({
|
|
component: RouteComponent,
|
|
loader: async ({ context: { queryClient } }) => {
|
|
await queryClient.ensureQueryData(usersOptions())
|
|
return null
|
|
},
|
|
})
|
|
|
|
/* -------------------- Página -------------------- */
|
|
function RouteComponent() {
|
|
const auth = useSupabaseAuth()
|
|
const router = useRouter()
|
|
const qc = useQueryClient()
|
|
const { data } = useSuspenseQuery(usersOptions())
|
|
|
|
const [q, setQ] = useState("")
|
|
const [editing, setEditing] = useState<AdminUser | null>(null)
|
|
const [form, setForm] = useState<{
|
|
role?: Role
|
|
claims_admin?: boolean
|
|
nombre?: string; apellidos?: string; title?: string; clave?: string; avatar?: string
|
|
facultad_id?: string | null
|
|
carrera_id?: string | null
|
|
}>({})
|
|
|
|
const [createOpen, setCreateOpen] = useState(false)
|
|
const [showPwd, setShowPwd] = useState(false)
|
|
const [createForm, setCreateForm] = useState<{
|
|
email: string
|
|
password: string
|
|
role?: Role
|
|
claims_admin?: boolean
|
|
nombre?: string; apellidos?: string; title?: string; clave?: string; avatar?: string
|
|
facultad_id?: string | null
|
|
carrera_id?: string | null
|
|
}>({ email: "", password: "" })
|
|
|
|
function genPassword() {
|
|
const s = Array.from(crypto.getRandomValues(new Uint32Array(4))).map((n) => n.toString(36)).join("")
|
|
return s.slice(0, 14)
|
|
}
|
|
|
|
/* ---------- Mutations ---------- */
|
|
const invalidateAll = async () => {
|
|
await qc.invalidateQueries({ queryKey: usersKeys.root })
|
|
router.invalidate()
|
|
}
|
|
|
|
const upsertNombramiento = useMutation({
|
|
mutationFn: async (opts: {
|
|
user_id: string
|
|
puesto: "director_facultad" | "secretario_academico" | "jefe_carrera"
|
|
facultad_id?: string | null
|
|
carrera_id?: string | null
|
|
}) => {
|
|
// cierra vigentes
|
|
if (opts.puesto === "jefe_carrera") {
|
|
if (!opts.carrera_id) throw new Error("Selecciona carrera")
|
|
await supabase
|
|
.from("nombramientos")
|
|
.update({ hasta: new Date().toISOString().slice(0, 10) })
|
|
.eq("puesto", "jefe_carrera")
|
|
.eq("carrera_id", opts.carrera_id)
|
|
.is("hasta", null)
|
|
} else {
|
|
if (!opts.facultad_id) throw new Error("Selecciona facultad")
|
|
await supabase
|
|
.from("nombramientos")
|
|
.update({ hasta: new Date().toISOString().slice(0, 10) })
|
|
.eq("puesto", opts.puesto)
|
|
.eq("facultad_id", opts.facultad_id)
|
|
.is("hasta", null)
|
|
}
|
|
const { error } = await supabase.from("nombramientos").insert({
|
|
user_id: opts.user_id,
|
|
puesto: opts.puesto,
|
|
facultad_id: opts.facultad_id ?? null,
|
|
carrera_id: opts.carrera_id ?? null,
|
|
desde: new Date().toISOString().slice(0, 10),
|
|
hasta: null,
|
|
})
|
|
if (error) throw error
|
|
},
|
|
onError: (e: any) => toast.error(e?.message || "Error al registrar nombramiento"),
|
|
})
|
|
|
|
const toggleBan = useMutation({
|
|
mutationFn: async (u: AdminUser) => {
|
|
const banned = !!u.banned_until && new Date(u.banned_until) > new Date()
|
|
const payload = banned ? { banned_until: null } : { banned_until: new Date(Date.now() + 100 * 365 * 24 * 60 * 60 * 1000).toISOString() }
|
|
const { error } = await supabase.auth.admin.updateUserById(u.id, payload as any)
|
|
if (error) throw new Error(error.message)
|
|
return !banned
|
|
},
|
|
onSuccess: async (isBanned) => {
|
|
toast.success(isBanned ? "Usuario baneado" : "Usuario desbaneado")
|
|
await invalidateAll()
|
|
},
|
|
onError: (e: any) => toast.error(e?.message || "Error al cambiar estado de baneo"),
|
|
})
|
|
|
|
const createUser = useMutation({
|
|
mutationFn: async (payload: typeof createForm) => {
|
|
const admin = new SupabaseClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_SERVICE_ROLE_KEY)
|
|
const password = payload.password?.trim() || genPassword()
|
|
const { error, data } = await admin.auth.admin.createUser({
|
|
email: payload.email.trim(),
|
|
password,
|
|
email_confirm: true,
|
|
user_metadata: {
|
|
nombre: payload.nombre ?? "",
|
|
apellidos: payload.apellidos ?? "",
|
|
title: payload.title ?? "",
|
|
clave: payload.clave ?? "",
|
|
avatar: payload.avatar ?? "",
|
|
},
|
|
app_metadata: {
|
|
role: payload.role,
|
|
claims_admin: !!payload.claims_admin,
|
|
facultad_id: payload.facultad_id ?? null,
|
|
carrera_id: payload.carrera_id ?? null,
|
|
},
|
|
})
|
|
if (error) throw new Error(error.message)
|
|
const uid = data.user?.id
|
|
if (uid && payload.role && (SCOPED_ROLES as readonly string[]).includes(payload.role)) {
|
|
if (payload.role === "director_facultad") {
|
|
if (!payload.facultad_id) throw new Error("Selecciona facultad")
|
|
await upsertNombramiento.mutateAsync({ user_id: uid, puesto: "director_facultad", facultad_id: payload.facultad_id })
|
|
} else if (payload.role === "secretario_academico") {
|
|
if (!payload.facultad_id) throw new Error("Selecciona facultad")
|
|
await upsertNombramiento.mutateAsync({ user_id: uid, puesto: "secretario_academico", facultad_id: payload.facultad_id })
|
|
} else if (payload.role === "jefe_carrera") {
|
|
if (!payload.facultad_id || !payload.carrera_id) throw new Error("Selecciona facultad y carrera")
|
|
await upsertNombramiento.mutateAsync({ user_id: uid, puesto: "jefe_carrera", facultad_id: payload.facultad_id, carrera_id: payload.carrera_id })
|
|
}
|
|
}
|
|
},
|
|
onSuccess: async () => {
|
|
toast.success("Usuario creado")
|
|
setCreateOpen(false)
|
|
setCreateForm({ email: "", password: "" })
|
|
await invalidateAll()
|
|
},
|
|
onError: (e: any) => toast.error(e?.message || "No se pudo crear el usuario"),
|
|
})
|
|
|
|
const saveUser = useMutation({
|
|
mutationFn: async ({ u, f }: { u: AdminUser; f: typeof form }) => {
|
|
// 1) Actualiza metadatos (tu Edge Function; placeholder aquí)
|
|
// await fetch('/functions/update-user', { method: 'POST', body: JSON.stringify({ id: u.id, ...f }) })
|
|
// Simula éxito:
|
|
// 2) Nombramiento si aplica
|
|
if (f.role && (SCOPED_ROLES as readonly string[]).includes(f.role)) {
|
|
if (f.role === "director_facultad") {
|
|
await upsertNombramiento.mutateAsync({ user_id: u.id, puesto: "director_facultad", facultad_id: f.facultad_id! })
|
|
} else if (f.role === "secretario_academico") {
|
|
await upsertNombramiento.mutateAsync({ user_id: u.id, puesto: "secretario_academico", facultad_id: f.facultad_id! })
|
|
} else if (f.role === "jefe_carrera") {
|
|
await upsertNombramiento.mutateAsync({ user_id: u.id, puesto: "jefe_carrera", facultad_id: f.facultad_id!, carrera_id: f.carrera_id! })
|
|
}
|
|
}
|
|
},
|
|
onSuccess: async () => {
|
|
toast.success("Cambios guardados")
|
|
setEditing(null)
|
|
await invalidateAll()
|
|
},
|
|
onError: (e: any) => toast.error(e?.message || "No se pudo guardar"),
|
|
})
|
|
|
|
if (!auth.claims?.claims_admin) {
|
|
return <div className="p-6 text-sm text-red-600">No tienes permisos para administrar usuarios.</div>
|
|
}
|
|
|
|
const filtered = useMemo(() => {
|
|
const t = q.trim().toLowerCase()
|
|
if (!t) return data
|
|
return data.filter((u) => {
|
|
const role: Role | undefined = u.app_metadata?.role
|
|
const label = role ? ROLE_META[role]?.label : ""
|
|
return [u.email, u.user_metadata?.nombre, u.user_metadata?.apellidos, label]
|
|
.filter(Boolean)
|
|
.some((v) => String(v).toLowerCase().includes(t))
|
|
})
|
|
}, [q, data])
|
|
|
|
function openEdit(u: AdminUser) {
|
|
setEditing(u)
|
|
setForm({
|
|
role: u.app_metadata?.role,
|
|
claims_admin: !!u.app_metadata?.claims_admin,
|
|
nombre: u.user_metadata?.nombre ?? "",
|
|
apellidos: u.user_metadata?.apellidos ?? "",
|
|
title: u.user_metadata?.title ?? "",
|
|
clave: u.user_metadata?.clave ?? "",
|
|
avatar: u.user_metadata?.avatar ?? "",
|
|
facultad_id: u.app_metadata?.facultad_id ?? null,
|
|
carrera_id: u.app_metadata?.carrera_id ?? null,
|
|
})
|
|
}
|
|
|
|
function validateScopeForSave(): string | null {
|
|
if (!editing) return "Sin usuario"
|
|
if (form.role === "director_facultad" || form.role === "secretario_academico") {
|
|
if (!form.facultad_id) return "Selecciona una facultad"
|
|
}
|
|
if (form.role === "jefe_carrera") {
|
|
if (!form.facultad_id || !form.carrera_id) return "Selecciona facultad y carrera"
|
|
}
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="p-6 space-y-4">
|
|
<Card>
|
|
<CardHeader className="grid gap-3 sm:grid-cols-2 sm:items-center">
|
|
<CardTitle className="font-mono">Usuarios</CardTitle>
|
|
<div className="flex items-center gap-2">
|
|
<Input placeholder="Buscar por nombre, email o rol…" value={q} onChange={(e) => setQ(e.target.value)} className="w-full" />
|
|
<Button variant="outline" size="icon" title="Recargar" onClick={invalidateAll}>
|
|
<RefreshCcw className="w-4 h-4" />
|
|
</Button>
|
|
<Button onClick={() => setCreateOpen(true)} className="whitespace-nowrap">
|
|
<Plus className="w-4 h-4 mr-1" /> Nuevo usuario
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<div className="grid gap-3">
|
|
{filtered.map((u) => {
|
|
const m = u.user_metadata || {}
|
|
const a = u.app_metadata || {}
|
|
const roleCode: Role | undefined = a.role
|
|
const banned = !!(u as any).banned_until && new Date((u as any).banned_until).getTime() > Date.now()
|
|
return (
|
|
<div key={u.id} className="rounded-2xl border bg-white/70 dark:bg-neutral-900/60 p-3 sm:p-4 hover:shadow-sm transition">
|
|
<div className="flex items-start gap-3 sm:gap-4">
|
|
<img src={m.avatar || `https://api.dicebear.com/7.x/initials/svg?seed=${encodeURIComponent(m.nombre || u.email || "U")}`} alt="" className="h-10 w-10 rounded-full object-cover" />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="min-w-0">
|
|
<div className="font-medium truncate">{m.title ? `${m.title} ` : ""}{m.nombre ? `${m.nombre} ${m.apellidos ?? ""}` : (u.email ?? "—")}</div>
|
|
<div className="mt-1 flex flex-wrap items-center gap-1.5 sm:gap-2">
|
|
{roleCode && <RolePill role={roleCode} />}
|
|
{a.claims_admin ? (
|
|
<Badge className="gap-1" variant="secondary"><ShieldCheck className="w-3 h-3" /> Admin</Badge>
|
|
) : (
|
|
<Badge className="gap-1" variant="outline"><ShieldAlert className="w-3 h-3" /> Usuario</Badge>
|
|
)}
|
|
<Badge variant={banned ? ("destructive" as any) : "secondary"} className="gap-1">
|
|
{banned ? <BanIcon className="w-3 h-3" /> : <Check className="w-3 h-3" />} {banned ? "Baneado" : "Activo"}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Button variant="outline" size="sm" onClick={() => toggleBan.mutate(u)} title={banned ? "Restaurar acceso" : "Inhabilitar la cuenta"} className="hidden sm:inline-flex">
|
|
<BanIcon className="w-4 h-4 mr-1" /> {banned ? "Restaurar acceso" : "Inhabilitar la cuenta"}
|
|
</Button>
|
|
<Button variant="ghost" size="sm" className="hidden sm:inline-flex shrink-0" onClick={() => openEdit(u)}>
|
|
<Pencil className="w-4 h-4 mr-1" /> Editar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[11px] sm:text-xs text-neutral-600">
|
|
<span className="inline-flex items-center gap-1"><Mail className="w-3 h-3" /> {u.email ?? "—"}</span>
|
|
<span className="hidden xs:inline">Creado: {new Date(u.created_at).toLocaleDateString()}</span>
|
|
<span className="hidden md:inline">Último acceso: {u.last_sign_in_at ? new Date(u.last_sign_in_at).toLocaleDateString() : "—"}</span>
|
|
</div>
|
|
</div>
|
|
<div className="sm:hidden self-start shrink-0 flex gap-1">
|
|
<Button variant="outline" size="icon" onClick={() => toggleBan.mutate(u)} aria-label="Ban/Unban"><BanIcon className="w-4 h-4" /></Button>
|
|
<Button variant="ghost" size="icon" onClick={() => openEdit(u)} aria-label="Editar"><Pencil className="w-4 h-4" /></Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
{!filtered.length && <div className="text-sm text-neutral-500 text-center py-10">Sin usuarios</div>}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Dialog de edición */}
|
|
<Dialog open={!!editing} onOpenChange={(o) => { if (!o) setEditing(null) }}>
|
|
<DialogContent className="w-[min(92vw,720px)] sm:max-w-xl md:max-w-2xl">
|
|
<DialogHeader><DialogTitle className="font-mono" >Editar usuario</DialogTitle></DialogHeader>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-1"><Label>Nombre</Label><Input value={form.nombre ?? ""} onChange={(e) => setForm((s) => ({ ...s, nombre: e.target.value }))} /></div>
|
|
<div className="space-y-1"><Label>Apellidos</Label><Input value={form.apellidos ?? ""} onChange={(e) => setForm((s) => ({ ...s, apellidos: e.target.value }))} /></div>
|
|
<div className="space-y-1"><Label>Título</Label><Input value={form.title ?? ""} onChange={(e) => setForm((s) => ({ ...s, title: e.target.value }))} /></div>
|
|
<div className="space-y-1"><Label>Clave</Label><Input value={form.clave ?? ""} onChange={(e) => setForm((s) => ({ ...s, clave: e.target.value }))} /></div>
|
|
<div className="space-y-1"><Label>Avatar (URL)</Label><Input value={form.avatar ?? ""} onChange={(e) => setForm((s) => ({ ...s, avatar: e.target.value }))} /></div>
|
|
<div className="space-y-1">
|
|
<Label>Rol</Label>
|
|
<Select
|
|
value={form.role ?? ""}
|
|
onValueChange={(v) => {
|
|
setForm((s) => {
|
|
const role = v as Role
|
|
if (role === "jefe_carrera") return { ...s, role, facultad_id: s.facultad_id ?? "", carrera_id: s.carrera_id ?? "" }
|
|
if (role === "secretario_academico" || role === "director_facultad") return { ...s, role, facultad_id: s.facultad_id ?? "", carrera_id: null }
|
|
return { ...s, role, facultad_id: null, carrera_id: null }
|
|
})
|
|
}}
|
|
>
|
|
<SelectTrigger className="w-full"><SelectValue placeholder="Selecciona un rol" /></SelectTrigger>
|
|
<SelectContent position="popper" side="bottom" align="start" className="w-[--radix-select-trigger-width] max-w-[min(92vw,28rem)] max-h-72 overflow-auto">
|
|
{ROLES.map((code) => {
|
|
const meta = ROLE_META[code]; const Icon = meta.Icon
|
|
return (
|
|
<SelectItem key={code} value={code} className="whitespace-normal text-sm leading-snug py-2">
|
|
<span className="inline-flex items-center gap-2"><Icon className="w-4 h-4" /> {meta.label}</span>
|
|
</SelectItem>
|
|
)
|
|
})}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{(form.role === "secretario_academico" || form.role === "director_facultad") && (
|
|
<div className="md:col-span-2 space-y-1">
|
|
<Label>Facultad</Label>
|
|
<FacultadCombobox value={form.facultad_id ?? ""} onChange={(id) => setForm((s) => ({ ...s, facultad_id: id, carrera_id: null }))} />
|
|
<p className="text-[11px] text-neutral-500">Este rol requiere <strong>Facultad</strong>.</p>
|
|
</div>
|
|
)}
|
|
|
|
{form.role === "jefe_carrera" && (
|
|
<div className="grid gap-4 sm:grid-cols-2 md:col-span-2">
|
|
<div className="space-y-1">
|
|
<Label>Facultad</Label>
|
|
<FacultadCombobox value={form.facultad_id ?? ""} onChange={(id) => setForm((s) => ({ ...s, facultad_id: id, carrera_id: "" }))} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label>Carrera</Label>
|
|
<CarreraCombobox facultadId={form.facultad_id ?? ""} value={form.carrera_id ?? ""} onChange={(id) => setForm((s) => ({ ...s, carrera_id: id }))} disabled={!form.facultad_id} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-1">
|
|
<Label>Permisos</Label>
|
|
<Select value={String(!!form.claims_admin)} onValueChange={(v) => setForm((s) => ({ ...s, claims_admin: v === 'true' }))}>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="true">Administrador</SelectItem>
|
|
<SelectItem value="false">Usuario</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setEditing(null)}>Cancelar</Button>
|
|
<Button
|
|
onClick={() => {
|
|
const scopeErr = validateScopeForSave()
|
|
if (scopeErr || !editing) { toast.error(scopeErr || 'Sin usuario'); return }
|
|
saveUser.mutate({ u: editing, f: form })
|
|
}}
|
|
disabled={saveUser.isPending}
|
|
>
|
|
{saveUser.isPending ? "Guardando…" : "Guardar"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Modal: Nuevo usuario */}
|
|
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
|
|
<DialogContent className="w-[min(92vw,720px)] sm:max-w-xl md:max-w-2xl">
|
|
<DialogHeader><DialogTitle className="font-mono" >Nuevo usuario</DialogTitle></DialogHeader>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-1 md:col-span-2">
|
|
<Label>Correo</Label>
|
|
<Input type="email" value={createForm.email} onChange={(e) => setCreateForm((s) => ({ ...s, email: e.target.value }))} placeholder="usuario@lasalle.mx" />
|
|
</div>
|
|
|
|
<div className="space-y-1 md:col-span-2">
|
|
<Label>Contraseña temporal</Label>
|
|
<div className="flex gap-2">
|
|
<Input type={showPwd ? "text" : "password"} value={createForm.password} onChange={(e) => setCreateForm((s) => ({ ...s, password: e.target.value }))} placeholder="Se generará si la dejas vacía" />
|
|
<Button type="button" variant="outline" onClick={() => setCreateForm((s) => ({ ...s, password: genPassword() }))}>Generar</Button>
|
|
<Button type="button" variant="outline" onClick={() => setShowPwd((v) => !v)} aria-label="Mostrar u ocultar">{showPwd ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}</Button>
|
|
</div>
|
|
<p className="text-[11px] text-neutral-500">Pídeles cambiarla al iniciar sesión.</p>
|
|
</div>
|
|
|
|
<div className="space-y-1"><Label>Nombre</Label><Input value={createForm.nombre ?? ""} onChange={(e) => setCreateForm((s) => ({ ...s, nombre: e.target.value }))} /></div>
|
|
<div className="space-y-1"><Label>Apellidos</Label><Input value={createForm.apellidos ?? ""} onChange={(e) => setCreateForm((s) => ({ ...s, apellidos: e.target.value }))} /></div>
|
|
<div className="space-y-1"><Label>Título</Label><Input value={createForm.title ?? ""} onChange={(e) => setCreateForm((s) => ({ ...s, title: e.target.value }))} /></div>
|
|
<div className="space-y-1"><Label>Clave</Label><Input value={createForm.clave ?? ""} onChange={(e) => setCreateForm((s) => ({ ...s, clave: e.target.value }))} /></div>
|
|
<div className="space-y-1 md:col-span-2"><Label>Avatar (URL)</Label><Input value={createForm.avatar ?? ""} onChange={(e) => setCreateForm((s) => ({ ...s, avatar: e.target.value }))} /></div>
|
|
|
|
<div className="space-y-1 md:col-span-2">
|
|
<Label>Rol</Label>
|
|
<Select
|
|
value={createForm.role ?? ""}
|
|
onValueChange={(v) => {
|
|
setCreateForm((s) => {
|
|
const role = v as Role
|
|
if (role === "jefe_carrera") return { ...s, role, facultad_id: s.facultad_id ?? "", carrera_id: s.carrera_id ?? "" }
|
|
if (role === "secretario_academico" || role === "director_facultad") return { ...s, role, facultad_id: s.facultad_id ?? "", carrera_id: null }
|
|
return { ...s, role, facultad_id: null, carrera_id: null }
|
|
})
|
|
}}
|
|
>
|
|
<SelectTrigger className="w-full"><SelectValue placeholder="Selecciona un rol" /></SelectTrigger>
|
|
<SelectContent className="max-h-72">
|
|
{ROLES.map((code) => {
|
|
const M = ROLE_META[code]; const I = M.Icon
|
|
return (
|
|
<SelectItem key={code} value={code} className="whitespace-normal text-sm leading-snug py-2">
|
|
<span className="inline-flex items-center gap-2"><I className="w-4 h-4" /> {M.label}</span>
|
|
</SelectItem>
|
|
)
|
|
})}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{(createForm.role === "secretario_academico" || createForm.role === "director_facultad") && (
|
|
<div className="md:col-span-2 space-y-1">
|
|
<Label>Facultad</Label>
|
|
<FacultadCombobox value={createForm.facultad_id ?? ""} onChange={(id) => setCreateForm((s) => ({ ...s, facultad_id: id, carrera_id: null }))} />
|
|
</div>
|
|
)}
|
|
|
|
{createForm.role === "jefe_carrera" && (
|
|
<div className="grid gap-4 md:col-span-2 sm:grid-cols-2">
|
|
<div className="space-y-1">
|
|
<Label>Facultad</Label>
|
|
<FacultadCombobox value={createForm.facultad_id ?? ""} onChange={(id) => setCreateForm((s) => ({ ...s, facultad_id: id, carrera_id: "" }))} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label>Carrera</Label>
|
|
<CarreraCombobox facultadId={createForm.facultad_id ?? ""} value={createForm.carrera_id ?? ""} onChange={(id) => setCreateForm((s) => ({ ...s, carrera_id: id }))} disabled={!createForm.facultad_id} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-1 md:col-span-2">
|
|
<Label>Permisos</Label>
|
|
<Select value={String(!!createForm.claims_admin)} onValueChange={(v) => setCreateForm((s) => ({ ...s, claims_admin: v === "true" }))}>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="true">Administrador</SelectItem>
|
|
<SelectItem value="false">Usuario</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setCreateOpen(false)}>Cancelar</Button>
|
|
<Button onClick={() => createUser.mutate(createForm)} disabled={!createForm.email || createUser.isPending}>
|
|
{createUser.isPending ? "Creando…" : "Crear usuario"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|