325 lines
12 KiB
TypeScript
325 lines
12 KiB
TypeScript
import { createFileRoute, Link, useRouter } from '@tanstack/react-router'
|
|
import { useMemo, useState } from 'react'
|
|
import { useSuspenseQuery, useMutation, useQueryClient, queryOptions } from '@tanstack/react-query'
|
|
import * as Icons from 'lucide-react'
|
|
import { supabase } from '@/auth/supabase'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select'
|
|
import { toast } from 'sonner'
|
|
|
|
/* -------------------- Tipos -------------------- */
|
|
export type Facultad = {
|
|
id: string
|
|
nombre: string
|
|
icon: string
|
|
color?: string | null
|
|
}
|
|
|
|
/* -------------------- Query Keys & Fetchers -------------------- */
|
|
const facultadKeys = {
|
|
root: ['facultades'] as const,
|
|
all: () => [...facultadKeys.root, 'all'] as const,
|
|
}
|
|
|
|
async function fetchFacultades(): Promise<Facultad[]> {
|
|
const { data, error } = await supabase
|
|
.from('facultades')
|
|
.select('id, nombre, icon, color')
|
|
.order('nombre')
|
|
if (error) throw error
|
|
return (data ?? []) as Facultad[]
|
|
}
|
|
|
|
const facultadesOptions = () =>
|
|
queryOptions({ queryKey: facultadKeys.all(), queryFn: fetchFacultades, staleTime: 60_000 })
|
|
|
|
/* -------------------- Ruta -------------------- */
|
|
export const Route = createFileRoute('/_authenticated/facultades')({
|
|
component: RouteComponent,
|
|
loader: async ({ context: { queryClient } }) => {
|
|
await queryClient.ensureQueryData(facultadesOptions())
|
|
return null
|
|
},
|
|
})
|
|
|
|
/* ----------- Paleta curada ----------- */
|
|
const PALETTE: { name: string; hex: `#${string}` }[] = [
|
|
{ name: 'Indigo', hex: '#4F46E5' },
|
|
{ name: 'Blue', hex: '#2563EB' },
|
|
{ name: 'Sky', hex: '#0EA5E9' },
|
|
{ name: 'Teal', hex: '#14B8A6' },
|
|
{ name: 'Emerald', hex: '#10B981' },
|
|
{ name: 'Lime', hex: '#84CC16' },
|
|
{ name: 'Amber', hex: '#F59E0B' },
|
|
{ name: 'Orange', hex: '#F97316' },
|
|
{ name: 'Red', hex: '#EF4444' },
|
|
{ name: 'Rose', hex: '#F43F5E' },
|
|
{ name: 'Violet', hex: '#7C3AED' },
|
|
{ name: 'Purple', hex: '#9333EA' },
|
|
{ name: 'Fuchsia', hex: '#C026D3' },
|
|
{ name: 'Slate', hex: '#334155' },
|
|
{ name: 'Zinc', hex: '#3F3F46' },
|
|
{ name: 'Neutral', hex: '#404040' },
|
|
]
|
|
|
|
/* Un set corto y útil de íconos Lucide */
|
|
const ICON_CHOICES = [
|
|
'Building2', 'Building', 'School', 'University', 'Landmark', 'Library', 'Layers',
|
|
'Atom', 'FlaskConical', 'Microscope', 'Cpu', 'Hammer', 'Palette', 'Shapes', 'BookOpen', 'GraduationCap',
|
|
] as const
|
|
export type IconName = (typeof ICON_CHOICES)[number]
|
|
|
|
function gradientFrom(color?: string | null) {
|
|
const base = color && /^#([0-9a-f]{6}|[0-9a-f]{3})$/i.test(color) ? color : '#2563eb'
|
|
return `linear-gradient(135deg, ${base} 0%, ${base}CC 40%, ${base}99 70%, ${base}66 100%)`
|
|
}
|
|
|
|
/* -------------------- Página -------------------- */
|
|
function RouteComponent() {
|
|
const router = useRouter()
|
|
const qc = useQueryClient()
|
|
const { data: facultades } = useSuspenseQuery(facultadesOptions())
|
|
|
|
const [createOpen, setCreateOpen] = useState(false)
|
|
const [editOpen, setEditOpen] = useState(false)
|
|
|
|
const [form, setForm] = useState<{ nombre: string; icon: IconName; color: `#${string}` }>(
|
|
{ nombre: '', icon: 'Building2', color: '#2563EB' },
|
|
)
|
|
const [editing, setEditing] = useState<Facultad | null>(null)
|
|
|
|
/* --------- Mutations (create / update) --------- */
|
|
const createFacultad = useMutation({
|
|
mutationFn: async (payload: { nombre: string; icon: IconName; color: `#${string}` }) => {
|
|
const { error } = await supabase.from('facultades').insert(payload)
|
|
if (error) throw new Error(error.message)
|
|
},
|
|
onSuccess: async () => {
|
|
toast.success('Facultad creada ✨')
|
|
setCreateOpen(false)
|
|
await qc.invalidateQueries({ queryKey: facultadKeys.root })
|
|
router.invalidate()
|
|
},
|
|
onError: (e: any) => toast.error(e?.message || 'No se pudo crear'),
|
|
})
|
|
|
|
const updateFacultad = useMutation({
|
|
mutationFn: async ({ id, ...payload }: { id: string; nombre: string; icon: IconName; color: `#${string}` }) => {
|
|
const { error } = await supabase.from('facultades').update(payload).eq('id', id)
|
|
if (error) throw new Error(error.message)
|
|
},
|
|
onSuccess: async () => {
|
|
toast.success('Cambios guardados ✅')
|
|
setEditOpen(false)
|
|
setEditing(null)
|
|
await qc.invalidateQueries({ queryKey: facultadKeys.root })
|
|
router.invalidate()
|
|
},
|
|
onError: (e: any) => toast.error(e?.message || 'No se pudo guardar'),
|
|
})
|
|
|
|
function openCreate() {
|
|
setForm({ nombre: '', icon: 'Building2', color: '#2563EB' })
|
|
setCreateOpen(true)
|
|
}
|
|
function openEdit(f: Facultad) {
|
|
setEditing(f)
|
|
setForm({
|
|
nombre: f.nombre,
|
|
icon: (ICON_CHOICES.includes(f.icon as IconName) ? (f.icon as IconName) : 'Building2'),
|
|
color: f.color && /^#([0-9a-f]{6}|[0-9a-f]{3})$/i.test(f.color) ? (f.color as `#${string}`) : '#2563EB',
|
|
})
|
|
setEditOpen(true)
|
|
}
|
|
|
|
return (
|
|
<div className="p-6 space-y-4">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-xl font-bold flex items-center gap-2">
|
|
<Icons.Building2 className="w-5 h-5" /> Facultades
|
|
</h1>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={async () => {
|
|
await qc.invalidateQueries({ queryKey: facultadKeys.root })
|
|
router.invalidate()
|
|
}}
|
|
>
|
|
<Icons.RefreshCcw className="w-4 h-4 mr-2" /> Recargar
|
|
</Button>
|
|
<Button onClick={openCreate}>
|
|
<Icons.Plus className="w-4 h-4 mr-2" /> Nueva facultad
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Grid */}
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{facultades.map((fac) => {
|
|
const LucideIcon = (Icons as any)[fac.icon] || Icons.Building2
|
|
const bg = { background: gradientFrom(fac.color) }
|
|
return (
|
|
<div key={fac.id} className="group relative rounded-3xl overflow-hidden shadow-xl border">
|
|
<Link
|
|
to="/facultad/$facultadId"
|
|
params={{ facultadId: fac.id }}
|
|
aria-label={`Administrar ${fac.nombre}`}
|
|
className="block focus:outline-none focus-visible:ring-4 ring-white/60"
|
|
style={bg}
|
|
>
|
|
<div
|
|
className="absolute inset-0 opacity-0 group-hover:opacity-15 transition-opacity"
|
|
style={{ background: 'radial-gradient(1200px 400px at 20% -20%, rgba(255,255,255,.45), transparent 60%)' }}
|
|
/>
|
|
<div className="relative h-56 sm:h-64 lg:h-72 p-6 flex flex-col justify-between text-white">
|
|
<LucideIcon className="w-20 h-20 md:w-24 md:h-24 drop-shadow-md" />
|
|
<div className="flex items-end justify-between">
|
|
<h3 className="text-xl md:text-2xl font-bold drop-shadow-sm pr-2">{fac.nombre}</h3>
|
|
<Icons.ArrowRight className="w-6 h-6 opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
|
|
<div className="absolute top-3 right-3">
|
|
<Button size="icon" variant="secondary" className="backdrop-blur bg-white/80 hover:bg-white" onClick={() => openEdit(fac)}>
|
|
<Icons.Pencil className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Dialog Crear */}
|
|
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
|
|
<DialogContent className="sm:max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle>Nueva facultad</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<FormFields form={form} setForm={setForm} />
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setCreateOpen(false)}>Cancelar</Button>
|
|
<Button
|
|
onClick={() => {
|
|
if (!form.nombre.trim()) { toast.error('Nombre requerido'); return }
|
|
createFacultad.mutate({ nombre: form.nombre.trim(), icon: form.icon, color: form.color })
|
|
}}
|
|
disabled={createFacultad.isPending}
|
|
>
|
|
{createFacultad.isPending ? 'Guardando…' : 'Crear'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Dialog Editar */}
|
|
<Dialog open={editOpen} onOpenChange={(o) => { setEditOpen(o); if (!o) setEditing(null) }}>
|
|
<DialogContent className="sm:max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle>Editar facultad</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<FormFields form={form} setForm={setForm} />
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => { setEditOpen(false); setEditing(null) }}>Cancelar</Button>
|
|
<Button
|
|
onClick={() => {
|
|
if (!editing) return
|
|
if (!form.nombre.trim()) { toast.error('Nombre requerido'); return }
|
|
updateFacultad.mutate({ id: editing.id, nombre: form.nombre.trim(), icon: form.icon, color: form.color })
|
|
}}
|
|
disabled={updateFacultad.isPending}
|
|
>
|
|
{updateFacultad.isPending ? 'Guardando…' : 'Guardar'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/* ----------- Subcomponentes ----------- */
|
|
function FormFields({
|
|
form,
|
|
setForm,
|
|
}: {
|
|
form: { nombre: string; icon: IconName; color: `#${string}` }
|
|
setForm: React.Dispatch<React.SetStateAction<{ nombre: string; icon: IconName; color: `#${string}` }>>
|
|
}) {
|
|
const PreviewIcon = (Icons as any)[form.icon] || Icons.Building2
|
|
const bg = useMemo(() => ({ background: gradientFrom(form.color) }), [form.color])
|
|
|
|
return (
|
|
<div className="grid gap-4">
|
|
{/* Preview */}
|
|
<div className="rounded-2xl overflow-hidden border">
|
|
<div className="h-36 p-4 flex items-end justify-between text-white" style={bg}>
|
|
<PreviewIcon className="w-14 h-14 drop-shadow-md" />
|
|
<span className="text-xs bg-white/20 px-2 py-1 rounded">Vista previa</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nombre */}
|
|
<div className="space-y-1">
|
|
<Label>Nombre</Label>
|
|
<Input value={form.nombre} onChange={(e) => setForm((s) => ({ ...s, nombre: e.target.value }))} placeholder="Facultad de Ingeniería" />
|
|
</div>
|
|
|
|
{/* Icono */}
|
|
<div className="space-y-1">
|
|
<Label>Ícono</Label>
|
|
<Select value={form.icon} onValueChange={(v) => setForm((s) => ({ ...s, icon: v as IconName }))}>
|
|
<SelectTrigger><SelectValue placeholder="Selecciona ícono" /></SelectTrigger>
|
|
<SelectContent className="max-h-72">
|
|
{ICON_CHOICES.map((k) => {
|
|
const Ico = (Icons as any)[k]
|
|
return (
|
|
<SelectItem key={k} value={k}>
|
|
<span className="inline-flex items-center gap-2">
|
|
<Ico className="w-4 h-4" /> {k}
|
|
</span>
|
|
</SelectItem>
|
|
)
|
|
})}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Color (paleta curada) */}
|
|
<div className="space-y-2">
|
|
<Label>Color</Label>
|
|
<ColorGrid value={form.color} onChange={(hex) => setForm((s) => ({ ...s, color: hex }))} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ColorGrid({ value, onChange }: { value: `#${string}`; onChange: (hex: `#${string}`) => void }) {
|
|
return (
|
|
<div className="grid grid-cols-8 gap-2">
|
|
{PALETTE.map((c) => (
|
|
<button
|
|
key={c.hex}
|
|
type="button"
|
|
onClick={() => onChange(c.hex)}
|
|
className={`relative h-9 rounded-xl ring-1 ring-black/10 transition ${value === c.hex ? 'outline outline-2 outline-offset-2 outline-black/70' : 'hover:scale-[1.03]'}`}
|
|
style={{ background: c.hex }}
|
|
title={c.name}
|
|
aria-label={c.name}
|
|
>
|
|
{value === c.hex && <Icons.Check className="absolute right-1.5 bottom-1.5 w-4 h-4 text-white drop-shadow" />}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|