Guillermo.Arrieta/acad-ia-2
0
0
Fork 0
Code Issues 9 Pull Requests Actions Wiki Activity

Se quitó teal y otros estilos hardcoded de la página

Browse Source
This commit is contained in:
Guillermo Arrieta Medina
2026-03-27 13:27:53 -06:00
parent 51f967a955
commit 434b50cfc3
14 changed files with 378 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/planes/$planId/_detalle/historial.tsx
+34 -39
View File
@@ -37,24 +37,24 @@ const getEventConfig = (tipo: string, campo: string) => {
return {
label: 'Creación',
icon: <PlusCircle className="h-4 w-4" />,
color: 'teal',
color: 'primary',
}
if (campo === 'estado')
return {
label: 'Cambio de estado',
icon: <GitBranch className="h-4 w-4" />,
color: 'blue',
color: 'secondary',
}
if (campo === 'datos')
return {
label: 'Edición de Datos',
icon: <Edit3 className="h-4 w-4" />,
color: 'amber',
color: 'accent',
}
return {
label: 'Actualización',
icon: <RefreshCw className="h-4 w-4" />,
color: 'slate',
color: 'muted',
}
}
@@ -104,7 +104,7 @@ function RouteComponent() {
},
}
})
}, [rawData])
}, [rawData, structure, data])
const openCompareModal = (event: any) => {
setSelectedEvent(event)
@@ -120,7 +120,7 @@ function RouteComponent() {
if (isLoading)
return (
<div className="flex h-64 items-center justify-center">
<Loader2 className="h-8 w-8 animate-spin text-teal-600" />
<Loader2 className="text-primary h-8 w-8 animate-spin" />
</div>
)
@@ -128,8 +128,8 @@ function RouteComponent() {
<div className="mx-auto">
<div className="mb-8 flex items-end justify-between">
<div>
<h1 className="flex items-center gap-2 text-xl font-bold text-slate-800">
<Clock className="h-5 w-5 text-teal-600" /> Historial de Cambios del
<h1 className="text-foreground flex items-center gap-2 text-xl font-bold">
<Clock className="text-primary h-5 w-5" /> Historial de Cambios del
Plan
</h1>
<p className="text-muted-foreground text-sm">
@@ -139,9 +139,11 @@ function RouteComponent() {
</div>
<div className="relative space-y-0">
<div className="absolute top-0 bottom-0 left-6 w-px bg-slate-200 md:left-9" />
<div className="bg-border absolute top-0 bottom-0 left-6 w-px md:left-9" />
{historyEvents.length === 0 ? (
<div className="ml-20 py-10 text-slate-500">No hay registros.</div>
<div className="text-muted-foreground ml-20 py-10">
No hay registros.
</div>
) : (
historyEvents.map((event) => (
<div
@@ -149,18 +151,18 @@ function RouteComponent() {
className="group relative flex gap-3 pb-8 md:gap-6"
>
<div className="relative z-10 flex flex-col items-center">
<div className="flex h-[42px] w-[42px] items-center justify-center rounded-full border-4 border-white bg-slate-100 text-slate-600 shadow-sm transition-colors group-hover:bg-teal-50 group-hover:text-teal-600">
<div className="border-background bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary flex h-[42px] w-[42px] items-center justify-center rounded-full border-4 shadow-sm transition-colors">
{event.icon}
</div>
</div>
<Card className="flex-1 border-slate-200 shadow-none transition-colors hover:border-teal-200">
<Card className="border-border hover:border-primary/50 flex-1 shadow-none transition-colors">
<CardContent className="p-4">
<div className="flex flex-col gap-2">
{/* LÍNEA SUPERIOR: Título a la izquierda --- Usuario, Botón y Fecha a la derecha */}
<div className="flex flex-col justify-between gap-2 md:flex-row md:items-center">
<div className="flex flex-wrap items-center gap-2">
<span className="text-sm font-bold text-slate-800">
<span className="text-foreground text-sm font-bold">
{event.type}
</span>
<Badge
@@ -175,7 +177,7 @@ function RouteComponent() {
</div>
{/* Grupo de elementos alineados a la derecha */}
<div className="flex flex-wrap items-center gap-3 text-slate-500 md:gap-4">
<div className="text-muted-foreground flex flex-wrap items-center gap-3 md:gap-4">
{/* Usuario e Icono */}
<div className="flex items-center gap-1.5 text-xs">
<User className="h-3.5 w-3.5" />
@@ -187,14 +189,14 @@ function RouteComponent() {
{/* Botón Ver Cambios */}
<button
onClick={() => openCompareModal(event)}
className="group/btn flex items-center gap-1.5 text-xs font-medium text-teal-600 md:text-slate-500 md:hover:text-teal-600"
className="text-primary md:text-muted-foreground md:hover:text-primary group/btn flex items-center gap-1.5 text-xs font-medium"
>
<Eye className="h-4 w-4 text-slate-400 group-hover/btn:text-teal-600" />
<Eye className="text-muted-foreground/70 group-hover/btn:text-primary h-4 w-4" />
<span>Ver cambios</span>
</button>
{/* Fecha exacta (Solo visible en desktop para no amontonar) */}
<span className="hidden text-[11px] text-slate-400 lg:block">
<span className="text-muted-foreground/70 hidden text-[11px] lg:block">
{format(event.date, 'yyyy-MM-dd HH:mm')}
</span>
</div>
@@ -202,7 +204,7 @@ function RouteComponent() {
{/* LÍNEA INFERIOR: Descripción */}
<div className="mt-1">
<p className="text-sm text-slate-600">
<p className="text-muted-foreground text-sm">
{event.description}
</p>
@@ -213,16 +215,16 @@ function RouteComponent() {
<div className="mt-2 flex items-center gap-1.5">
<Badge
variant="secondary"
className="bg-red-50 px-1.5 text-[9px] text-red-700"
className="bg-destructive/10 text-destructive px-1.5 text-[9px]"
>
{event.details.from}
</Badge>
<span className="text-[10px] text-slate-400">
<span className="text-muted-foreground/70 text-[10px]">
→
</span>
<Badge
variant="secondary"
className="bg-emerald-50 px-1.5 text-[9px] text-emerald-700"
className="bg-primary/10 text-primary px-1.5 text-[9px]"
>
{event.details.to}
</Badge>
@@ -237,7 +239,7 @@ function RouteComponent() {
)}
{historyEvents.length > 0 && (
<div className="mt-10 ml-12 flex flex-col gap-3 border-t pt-4 md:ml-20 md:flex-row md:items-center md:justify-between">
<p className="text-xs text-slate-500">
<p className="text-muted-foreground text-xs">
Mostrando {rawData.length} de {totalRecords} cambios
</p>
@@ -255,7 +257,7 @@ function RouteComponent() {
Anterior
</Button>
<span className="text-sm font-medium text-slate-700">
<span className="text-foreground text-sm font-medium">
Página {page + 1} de {totalPages || 1}
</span>
@@ -266,7 +268,6 @@ function RouteComponent() {
setPage((p) => p + 1)
window.scrollTo(0, 0)
}}
// Ahora se deshabilita si llegamos a la última página real
disabled={page + 1 >= totalPages || isLoading}
>
Siguiente
@@ -280,9 +281,9 @@ function RouteComponent() {
{/* MODAL DE COMPARACIÓN CON SCROLL INTERNO */}
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
<DialogContent className="flex max-h-[90vh] max-w-4xl flex-col gap-0 overflow-hidden p-0">
<DialogHeader className="border-b bg-slate-50/50 p-6">
<DialogHeader className="bg-muted/50 border-b p-6">
<DialogTitle className="flex items-center gap-2">
<History className="h-5 w-5 text-teal-600" /> Comparación de
<History className="text-primary h-5 w-5" /> Comparación de
Versiones
</DialogTitle>
<div className="text-muted-foreground flex items-center gap-4 pt-2 text-xs">
@@ -301,17 +302,16 @@ function RouteComponent() {
<div className="flex-1 overflow-y-auto p-6">
<div className="grid h-full grid-cols-2 gap-6">
{/* Lado Antes */}
{/* Lado Antes: Solo se renderiza si existe valor_anterior */}
{selectedEvent?.details.from && (
<div className="flex flex-col space-y-2">
<div className="sticky top-0 z-10 flex items-center gap-2 bg-white py-1">
<div className="h-2 w-2 rounded-full bg-red-400" />
<div className="bg-background sticky top-0 z-10 flex items-center gap-2 py-1">
<div className="bg-destructive h-2 w-2 rounded-full" />
<span className="text-muted-foreground text-[10px] font-bold tracking-widest uppercase">
Versión Anterior
</span>
</div>
<div className="max-h-[500px] min-h-[250px] flex-1 overflow-y-auto rounded-lg border border-red-100 bg-red-50/30 p-4 font-mono text-xs leading-relaxed whitespace-pre-wrap text-slate-700">
<div className="border-destructive/20 bg-destructive/5 text-foreground max-h-[500px] min-h-[250px] flex-1 overflow-y-auto rounded-lg border p-4 font-mono text-xs leading-relaxed whitespace-pre-wrap">
{renderValue(selectedEvent.details.from)}
</div>
</div>
@@ -319,27 +319,22 @@ function RouteComponent() {
{/* Lado Después */}
<div className="flex flex-col space-y-2">
<div className="sticky top-0 z-10 flex items-center gap-2 bg-white py-1">
<div className="h-2 w-2 rounded-full bg-emerald-400" />
<div className="bg-background sticky top-0 z-10 flex items-center gap-2 py-1">
<div className="bg-primary h-2 w-2 rounded-full" />
<span className="text-muted-foreground text-[10px] font-bold tracking-widest uppercase">
Nueva Versión
</span>
</div>
<div className="max-h-[500px] min-h-[250px] flex-1 overflow-y-auto rounded-lg border border-emerald-100 bg-emerald-50/30 p-4 font-mono text-xs leading-relaxed whitespace-pre-wrap text-slate-700">
<div className="border-primary/20 bg-primary/5 text-foreground max-h-[500px] min-h-[250px] flex-1 overflow-y-auto rounded-lg border p-4 font-mono text-xs leading-relaxed whitespace-pre-wrap">
{renderValue(selectedEvent?.details.to)}
</div>
</div>
</div>
</div>
<div className="flex justify-center border-t bg-slate-50 p-4">
<div className="bg-muted/30 flex justify-center border-t p-4">
<Badge variant="outline" className="font-mono text-[10px]">
Campo: {selectedEvent?.campo}
{console.log(
data?.estructuras_plan?.definicion?.properties?.[
selectedEvent?.campo
]?.title,
)}
</Badge>
</div>
</DialogContent>