Skip to content

Commit 631dfed

Browse files
szchmausserszchmausser
committed
Actualización de estilos y textos en los componentes CaseEvents y LegalCaseShow. Se ha modificado el color del icono de añadir evento y se han ajustado los encabezados y textos a mayúsculas para mejorar la claridad y la presentación de la información. Además, se ha añadido un historial de cambios de estatus dentro del modal de cambio de estatus, optimizando la experiencia del usuario al gestionar el estado del expediente legal.
1 parent 237ce46 commit 631dfed

File tree

2 files changed

+59
-55
lines changed

2 files changed

+59
-55
lines changed

‎resources/js/components/LegalCases/CaseEvents.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export const CaseEvents: React.FC<Props> = ({ legalCase, events }) => {
103103
className="text-gray-500 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400"
104104
title="Nuevo Evento"
105105
>
106-
<Plus className="h-7 w-7 text-blue-600 dark:text-blue-400" strokeWidth={2.5} />
106+
<Plus className="h-7 w-7 text-gray-500 hover:text-green-600 dark:text-gray-300 dark:hover:text-green-400" strokeWidth={2.5} />
107107
</Button>
108108
<span className="ml-2">{collapsed ? '▼' : '▲'}</span>
109109
</div>

‎resources/js/pages/LegalCases/Show.tsx‎

Lines changed: 58 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import AppLayout from '@/layouts/app-layout';
33
import { type BreadcrumbItem } from '@/types';
44
import { Button } from '@/components/ui/button';
55
import { formatDate, formatDateSafe } from '@/lib/utils';
6-
import { FileText, Info, FileQuestion, Users, Gavel, UserCheck, ScrollText, Building, UserCog, Eye, UserPlus, Trash2, Pencil, ListTodo, StickyNote, ArrowUp, ArrowDown } from 'lucide-react';
6+
import { FileText, Info, FileQuestion, Users, Gavel, UserCheck, ScrollText, Building, UserCog, Eye, UserPlus, Trash2, Pencil, ListTodo, StickyNote, ArrowUp, ArrowDown, Calendar } from 'lucide-react';
77
import { useState, useEffect } from 'react';
88
import {
99
AlertDialog,
@@ -86,7 +86,7 @@ export default function LegalCaseShow({ legalCase, events, nextImportantDate }:
8686
const [newStatus, setNewStatus] = useState('');
8787
const [currentStatus, setCurrentStatus] = useState<string>('');
8888
const [showStatusHistory, setShowStatusHistory] = useState(false);
89-
const [partiesCollapsed, setPartiesCollapsed] = useState(false);
89+
const [partiesCollapsed, setPartiesCollapsed] = useState(true);
9090

9191
const breadcrumbs: BreadcrumbItem[] = [
9292
{
@@ -280,29 +280,29 @@ export default function LegalCaseShow({ legalCase, events, nextImportantDate }:
280280
<div className="mb-6 rounded-xl border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-sm overflow-hidden">
281281
{/* Encabezado de tarjeta estándar */}
282282
<div className="bg-gray-100 dark:bg-zinc-900 px-4 py-2 font-medium flex items-center border-b border-gray-200 dark:border-zinc-800">
283-
<Info className="h-5 w-5 text-blue-600 dark:text-blue-400 mr-2" aria-hidden="true" />
283+
<Info className="h-5 w-5 text-gray-600 hover:text-blue-800 mr-2" aria-hidden="true" />
284284
<span className="dark:text-gray-200">Información General del Expediente</span>
285285
</div>
286286
{/* Campos principales en columnas, estilo ficha legal */}
287287
<div className="px-6 pt-6 pb-2">
288288
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
289289
<div className="flex flex-col items-stretch bg-gray-100 dark:bg-zinc-800 rounded-md p-4 border border-gray-200 dark:border-zinc-700">
290-
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">Código de Expediente</span>
291-
<span className="text-xl font-bold text-gray-900 dark:text-gray-100 break-all">{legalCase.code}</span>
290+
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">CÓDIGO DE EXPEDIENTE</span>
291+
<span className="text-xl font-bold text-gray-900 dark:text-gray-100 break-all uppercase">{legalCase.code}</span>
292292
</div>
293293
<div className="flex flex-col items-stretch bg-gray-100 dark:bg-zinc-800 rounded-md p-4 border border-gray-200 dark:border-zinc-700">
294-
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">Tipo de Caso</span>
295-
<span className="text-xl font-bold text-gray-900 dark:text-gray-100 break-all">{legalCase.case_type.name}</span>
294+
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">TIPO DE CASO</span>
295+
<span className="text-xl font-bold text-gray-900 dark:text-gray-100 break-all uppercase">{legalCase.case_type.name}</span>
296296
</div>
297297
<div className="flex flex-col items-stretch bg-gray-100 dark:bg-zinc-800 rounded-md p-4 border border-gray-200 dark:border-zinc-700">
298-
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">Estado</span>
298+
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">ESTADO</span>
299299
<span
300-
className="inline-flex items-center gap-1 text-xl font-bold text-gray-900 dark:text-gray-100 cursor-pointer mt-1"
300+
className="inline-flex items-center gap-1 text-xl font-bold text-gray-900 dark:text-gray-100 cursor-pointer mt-1 uppercase"
301301
onClick={() => setStatusDialogOpen(true)}
302302
title="Cambiar estatus"
303303
>
304-
{currentStatus || (legalCase.closing_date ? 'Cerrado' : 'Activo')}
305-
<Pencil className="h-4 w-4 ml-1 text-gray-400 hover:text-blue-500 transition-colors" />
304+
{currentStatus || (legalCase.closing_date ? 'CERRADO' : 'ACTIVO')}
305+
<Pencil className="h-4 w-4 ml-2 text-gray-600 hover:text-blue-800 transition-colors flex-shrink-0" />
306306
</span>
307307
</div>
308308
</div>
@@ -312,35 +312,38 @@ export default function LegalCaseShow({ legalCase, events, nextImportantDate }:
312312
{/* Fechas importantes en la parte inferior, en recuadros */}
313313
<div className="px-6 pb-6 grid grid-cols-1 md:grid-cols-4 gap-6">
314314
<div className="flex flex-col items-stretch bg-gray-50 dark:bg-zinc-800 rounded-md p-3 border border-gray-100 dark:border-zinc-700">
315-
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">Fecha de Entrada</span>
316-
<span className="text-lg font-bold text-gray-900 dark:text-gray-100">{formatDateSafe(legalCase.entry_date)}</span>
315+
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">FECHA DE ENTRADA</span>
316+
<span className="text-lg font-bold text-gray-900 dark:text-gray-100 uppercase">{formatDateSafe(legalCase.entry_date)}</span>
317317
</div>
318318
<div className="flex flex-col items-stretch bg-gray-50 dark:bg-zinc-800 rounded-md p-3 border border-gray-100 dark:border-zinc-700">
319-
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">Fecha de Sentencia</span>
320-
<span className="text-lg font-bold text-gray-900 dark:text-gray-100">{formatDateSafe(legalCase.sentence_date ?? '')}</span>
319+
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">FECHA DE SENTENCIA</span>
320+
<span className="text-lg font-bold text-gray-900 dark:text-gray-100 uppercase">{legalCase.sentence_date ? formatDateSafe(legalCase.sentence_date) : 'NO DEFINIDA'}</span>
321321
</div>
322322
<div className="flex flex-col items-stretch bg-gray-50 dark:bg-zinc-800 rounded-md p-3 border border-gray-100 dark:border-zinc-700">
323-
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">Fecha de Cierre</span>
324-
<span className="text-lg font-bold text-gray-900 dark:text-gray-100">{formatDateSafe(legalCase.closing_date ?? '')}</span>
323+
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">FECHA DE CIERRE</span>
324+
<span className="text-lg font-bold text-gray-900 dark:text-gray-100 uppercase">{legalCase.closing_date ? formatDateSafe(legalCase.closing_date) : 'NO DEFINIDA'}</span>
325325
</div>
326326
<div className="flex flex-col items-stretch bg-gray-50 dark:bg-zinc-800 rounded-md p-3 border border-gray-100 dark:border-zinc-700">
327-
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">Próxima Fecha Importante</span>
327+
<span className="text-xs text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider mb-1">PRÓXIMA FECHA IMPORTANTE</span>
328328
{nextImportantDate ? (
329-
<span className="text-lg font-bold text-blue-700 dark:text-blue-300 flex items-center gap-2">
330-
{nextImportantDate.title}
331-
<span className="text-xs text-gray-500">({formatDateSafe(nextImportantDate.end_date)})</span>
332-
</span>
329+
<div className="flex items-center justify-between gap-2">
330+
<div className="flex flex-col">
331+
<span className="text-lg font-bold text-gray-900 dark:text-gray-100 uppercase">{formatDateSafe(nextImportantDate.end_date)}</span>
332+
<span className="text-base text-gray-800 dark:text-gray-200 font-semibold mt-1">{nextImportantDate.title}</span>
333+
</div>
334+
<Button
335+
size="icon"
336+
variant="ghost"
337+
className="text-gray-600 hover:text-blue-800"
338+
onClick={() => router.visit(route('legal-cases.important-dates.index', legalCase.id))}
339+
title="Editar fechas importantes"
340+
>
341+
<Calendar className="h-6 w-6" />
342+
</Button>
343+
</div>
333344
) : (
334-
<span className="text-lg font-bold text-gray-900 dark:text-gray-100">N/A</span>
345+
<span className="text-lg font-bold text-gray-900 dark:text-gray-100 uppercase">N/A</span>
335346
)}
336-
<Button
337-
size="sm"
338-
className="mt-2 w-fit"
339-
variant="outline"
340-
onClick={() => router.visit(route('legal-cases.important-dates.index', legalCase.id))}
341-
>
342-
Gestionar Fechas Importantes
343-
</Button>
344347
</div>
345348
</div>
346349
</div>
@@ -444,29 +447,6 @@ export default function LegalCaseShow({ legalCase, events, nextImportantDate }:
444447
<div className="mb-6">
445448
<CaseEvents legalCase={legalCase} events={events} />
446449
</div>
447-
448-
{/* Histórico de cambios de estatus (antes Historial de Estatus) */}
449-
<div className="mb-6 border dark:border-zinc-700 rounded-md overflow-hidden">
450-
<div className="bg-gray-100 dark:bg-zinc-900 px-4 py-2 font-medium flex items-center justify-between cursor-pointer" onClick={() => setShowStatusHistory(v => !v)}>
451-
<span className="dark:text-gray-200">Histórico de cambios de estatus</span>
452-
<span className="ml-2">{showStatusHistory ? '▲' : '▼'}</span>
453-
</div>
454-
{showStatusHistory && (
455-
<div className="p-4 dark:bg-zinc-900">
456-
<div className="flex flex-col gap-3">
457-
{statusHistory.map((s, idx) => (
458-
<div key={s.id || idx} className="bg-gray-50 dark:bg-zinc-800 rounded-md p-3 flex flex-col sm:flex-row sm:items-center sm:justify-between shadow-xs border border-gray-200 dark:border-zinc-700">
459-
<div className="flex-1">
460-
<span className="block font-semibold text-base mb-1">{s.name}</span>
461-
<span className="block text-gray-500 text-xs mb-1">{new Date(s.created_at).toLocaleString('es-VE', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })}</span>
462-
{s.reason && <span className="block italic text-gray-400 text-xs">({s.reason})</span>}
463-
</div>
464-
</div>
465-
))}
466-
</div>
467-
</div>
468-
)}
469-
</div>
470450
</div>
471451
</div>
472452
</div>
@@ -495,6 +475,13 @@ export default function LegalCaseShow({ legalCase, events, nextImportantDate }:
495475
<DialogContent>
496476
<DialogHeader>
497477
<DialogTitle>Cambiar Estatus del Expediente</DialogTitle>
478+
<div className="flex justify-center my-3">
479+
<div className="bg-gray-100 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-md px-6 py-3 flex items-center justify-center">
480+
<span className="text-lg font-bold text-gray-900 dark:text-gray-100 uppercase text-center">
481+
{currentStatus || (legalCase.closing_date ? 'CERRADO' : 'ACTIVO')}
482+
</span>
483+
</div>
484+
</div>
498485
<DialogDescription>
499486
Selecciona un estatus existente o crea uno nuevo e indica el motivo del cambio.
500487
</DialogDescription>
@@ -522,6 +509,23 @@ export default function LegalCaseShow({ legalCase, events, nextImportantDate }:
522509
)}
523510
<Input placeholder="Motivo del cambio (opcional)" value={statusReason} onChange={e => setStatusReason(e.target.value)} />
524511
</div>
512+
{/* Histórico de cambios de estatus dentro del modal */}
513+
<div className="mt-6">
514+
<div className="text-xs font-semibold text-gray-600 dark:text-gray-300 mb-2">Histórico de cambios de estatus</div>
515+
<div className="flex flex-col gap-3 max-h-48 overflow-y-auto">
516+
{statusHistory.length > 0 ? statusHistory.map((s, idx) => (
517+
<div key={s.id || idx} className="bg-gray-50 dark:bg-zinc-800 rounded-md p-3 flex flex-col sm:flex-row sm:items-center sm:justify-between shadow-xs border border-gray-200 dark:border-zinc-700">
518+
<div className="flex-1">
519+
<span className="block font-semibold text-base mb-1">{s.name}</span>
520+
<span className="block text-gray-500 text-xs mb-1">{new Date(s.created_at).toLocaleString('es-VE', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' })}</span>
521+
{s.reason && <span className="block italic text-gray-400 text-xs">({s.reason})</span>}
522+
</div>
523+
</div>
524+
)) : (
525+
<div className="text-xs text-gray-500">No hay historial de estatus.</div>
526+
)}
527+
</div>
528+
</div>
525529
<DialogFooter>
526530
<Button onClick={handleStatusChange} disabled={(!selectedStatus && !newStatus)}>Guardar</Button>
527531
</DialogFooter>

0 commit comments

Comments
 (0)