snlavaise/administracionHospital
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Agregar icons X a botones cancelar, dark mode en todos los componentes

Browse Source
This commit is contained in:
Santiago Lavaise
2026-04-15 01:13:44 -03:00
parent 6bed6e9a1a
commit 581c8dca6f
10 changed files with 44 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sections/AcidoBase.tsx
+3 -3
View File
@@ -155,12 +155,12 @@ export function AcidoBaseSection({
};
return (
<div className="space-y-6">
<div className="space-y-6 dark:text-white">
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-gray-900">Estados Ácido-Base</h1>
<p className="text-gray-500">Gasometrías y análisis de equilibrio ácido-base</p>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Estados Ácido-Base</h1>
<p className="text-gray-500 dark:text-gray-400">Gasometrías y análisis de equilibrio ácido-base</p>
</div>
<Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
<DialogTrigger asChild>
src/sections/Cultivos.tsx
+4 -4
View File
@@ -176,11 +176,11 @@ export function Cultivos({
}).sort((a, b) => new Date(b.fechaToma).getTime() - new Date(a.fechaToma).getTime());
return (
<div className="space-y-6">
<div className="space-y-6 dark:text-white">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-gray-900">Cultivos</h1>
<p className="text-gray-500">Gestión de cultivos microbiológicos y antibiogramas</p>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Cultivos</h1>
<p className="text-gray-500 dark:text-gray-400">Gestión de cultivos microbiológicos y antibiogramas</p>
</div>
<Dialog open={dialogoNuevoAbierto} onOpenChange={setDialogoNuevoAbierto}>
<DialogTrigger asChild>
@@ -268,7 +268,7 @@ export function Cultivos({
<textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={observaciones} onChange={(e) => setObservaciones(e.target.value)} />
</div>
<div className="flex justify-end gap-2">
<Button variant="outline" onClick={() => setDialogoNuevoAbierto(false)}>Cancelar</Button>
<Button variant="outline" onClick={() => setDialogoNuevoAbierto(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button>
<Button onClick={handleAgregar} disabled={!pacienteSeleccionado || !fechaToma || !tipoMuestra}>
<Plus className="h-4 w-4 mr-2" />
Guardar
src/sections/Dashboard.tsx
+3 -3
View File
@@ -48,12 +48,12 @@ export function Dashboard({
.slice(0, 5);
return (
<div className="space-y-6">
<div className="space-y-6 dark:text-white">
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
<p className="text-gray-500">Resumen del servicio - Clinica Medica</p>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
<p className="text-gray-500 dark:text-gray-400">Resumen del servicio - Clinica Medica</p>
</div>
<div className="flex items-center gap-2">
<Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
src/sections/EditIngreso.tsx
+3 -3
View File
@@ -70,18 +70,18 @@ export function EditIngreso({
};
return (
<div className="space-y-6">
<div className="space-y-6 dark:text-white">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<Button variant="ghost" size="icon" onClick={onVolver}>
<ArrowLeft className="h-5 w-5" />
</Button>
<div>
<h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
<User className="h-6 w-6 text-blue-600" />
Editar Ingreso
</h1>
<p className="text-gray-500">Modificar datos de internación</p>
<p className="text-gray-500 dark:text-gray-400">Modificar datos de internación</p>
</div>
</div>
<div className="flex gap-2">
src/sections/Evoluciones.tsx
+3 -3
View File
@@ -184,11 +184,11 @@ export function Evoluciones({
};
return (
<div className="space-y-6">
<div className="space-y-6 dark:text-white">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-gray-900">Evoluciones Diarias</h1>
<p className="text-gray-500">Registro de evoluciones y signos vitales</p>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Evoluciones Diarias</h1>
<p className="text-gray-500 dark:text-gray-400">Registro de evoluciones y signos vitales</p>
</div>
<Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
<DialogTrigger asChild>
src/sections/HistoriaClinica.tsx
+12 -12
View File
@@ -207,7 +207,7 @@ export function HistoriaClinica({
};
return (
<div className="space-y-6">
<div className="space-y-6 dark:text-white">
<div>
<div className="flex items-center gap-4 mb-4">
@@ -282,7 +282,7 @@ export function HistoriaClinica({
</div>
</div>
<div className="flex justify-end gap-2 mt-4">
<Button variant="outline" onClick={() => setEditIngresoDialog(false)}>Cancelar</Button>
<Button variant="outline" onClick={() => setEditIngresoDialog(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button>
<Button onClick={handleGuardarEdicion} disabled={!editFechaIngreso || !editDiagnostico || !editMedico}><Save className="h-4 w-4 mr-2" />Guardar</Button>
</div>
</DialogContent>
@@ -640,7 +640,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del }: {
<div className="space-y-4">
<div><Label>Fecha</Label><Input type="date" value={fecha} onChange={e => setFecha(e.target.value)} /></div>
<div className="bg-purple-50 p-3 rounded-lg border border-purple-200">
<div className="bg-purple-50 dark:bg-purple-900/30 p-3 rounded-lg border border-purple-200 dark:border-purple-700">
<p className="text-sm font-bold text-purple-800 mb-3">Hemograma</p>
<div className="grid grid-cols-4 gap-2">
<div><Label className="text-xs">Hto</Label><Input placeholder="%" value={hto} onChange={e => setHto(e.target.value)} /></div>
@@ -650,7 +650,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del }: {
</div>
</div>
<div className="bg-green-50 p-3 rounded-lg border border-green-200">
<div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700">
<p className="text-sm font-bold text-green-800 mb-3">Química</p>
<div className="grid grid-cols-3 gap-2">
<div><Label className="text-xs">Gluc</Label><Input placeholder="mg/dL" value={gluc} onChange={e => setGluc(e.target.value)} /></div>
@@ -659,7 +659,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del }: {
</div>
</div>
<div className="bg-green-50 p-3 rounded-lg border border-green-200">
<div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700">
<p className="text-sm font-bold text-green-800 mb-3">Ionograma</p>
<div className="grid grid-cols-3 gap-2">
<div><Label className="text-xs">Na+</Label><Input placeholder="mEq/L" value={na} onChange={e => setNa(e.target.value)} /></div>
@@ -668,7 +668,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del }: {
</div>
</div>
<div className="bg-green-50 p-3 rounded-lg border border-green-200">
<div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700">
<p className="text-sm font-bold text-green-800 mb-3">Hepatograma</p>
<div className="grid grid-cols-4 gap-2">
<div><Label className="text-xs">Bt</Label><Input placeholder="mg/dL" value={bt} onChange={e => setBt(e.target.value)} /></div>
@@ -678,7 +678,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del }: {
</div>
</div>
<div className="bg-cyan-50 p-3 rounded-lg border border-cyan-200">
<div className="bg-cyan-50 dark:bg-cyan-900/30 p-3 rounded-lg border border-cyan-200 dark:border-cyan-700">
<p className="text-sm font-bold text-cyan-800 mb-3">Coagulograma</p>
<div className="grid grid-cols-3 gap-2">
<div><Label className="text-xs">TP</Label><Input placeholder="seg" value={tp} onChange={e => setTp(e.target.value)} /></div>
@@ -889,7 +889,7 @@ function SeccionEvoluciones({ evos, internacionId, add, update, del }: {
<div><Label className="flex items-center gap-1"><Droplets className="h-4 w-4" />SatO2</Label><Input type="number" value={saturacionO2} onChange={e => setSaturacionO2(e.target.value)} placeholder="98" /></div>
</div>
</div>
<div className="bg-green-50 p-3 rounded-lg border border-green-200">
<div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700">
<p className="text-sm font-bold text-green-800 mb-3 flex items-center gap-2"><FileText className="h-4 w-4" />Examen Físico</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div><Label>SNC</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={snc} onChange={e => setSnc(e.target.value)} placeholder="Estado neurológico" /></div>
@@ -927,7 +927,7 @@ function SeccionEvoluciones({ evos, internacionId, add, update, del }: {
</div>
{svText && <div className="bg-blue-50 p-2 rounded-lg"><p className="text-sm font-medium text-blue-800 flex items-center gap-2"><Activity className="h-4 w-4" />Signos Vitales: {svText}</p></div>}
{isExpanded && <>
{e.examenFisico && <div className="bg-green-50 p-3 rounded-lg border border-green-200"><p className="text-sm font-medium text-green-800 mb-2">Examen Físico:</p><div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs">
{e.examenFisico && <div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700"><p className="text-sm font-medium text-green-800 mb-2">Examen Físico:</p><div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs">
{e.examenFisico.SNC && <div><span className="font-medium">SNC:</span> {e.examenFisico.SNC}</div>}
{e.examenFisico.Cardiovascular && <div><span className="font-medium">CV:</span> {e.examenFisico.Cardiovascular}</div>}
{e.examenFisico.Respiratorio && <div><span className="font-medium">Resp:</span> {e.examenFisico.Respiratorio}</div>}
@@ -1034,7 +1034,7 @@ function SeccionAcidosBase({ ab, patientId, add, del }: {
{ph && pco2 && hco3 && <div className="bg-blue-50 p-3 rounded-lg border border-blue-200"><p className="text-sm font-medium text-blue-800 flex items-center gap-2"><Activity className="h-4 w-4" />Interpretación automática: {interpretarGasometria()}</p></div>}
<div><Label>Interpretación / Comentarios</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[80px]" value={interpretacion} onChange={e => setInterpretacion(e.target.value)} placeholder="Interpretación clínica..." /></div>
</div>
<div className="flex justify-end gap-2 mt-4"><Button variant="outline" onClick={() => setDialog(false)}>Cancelar</Button><Button onClick={handle} disabled={!ph || !pco2 || !po2 || !hco3 || !be || !sato2}><Plus className="h-4 w-4 mr-2" />Guardar Gasometría</Button></div>
<div className="flex justify-end gap-2 mt-4"><Button variant="outline" onClick={() => setDialog(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button><Button onClick={handle} disabled={!ph || !pco2 || !po2 || !hco3 || !be || !sato2}><Plus className="h-4 w-4 mr-2" />Guardar Gasometría</Button></div>
</DialogContent>
</Dialog>
{abFiltered.length === 0 ? <div className="text-center py-8 text-gray-400"><Activity className="h-12 w-12 mx-auto mb-2 opacity-50" /><p>No hay gasometrías</p></div> :
@@ -1216,7 +1216,7 @@ const resetRes = () => {
</div>
<div><Label>Observaciones</Label><textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={observaciones} onChange={e => setObservaciones(e.target.value)} /></div>
</div>
<div className="flex justify-end gap-2 mt-4"><Button variant="outline" onClick={() => setDialog(false)}>Cancelar</Button><Button onClick={handle}><Plus className="h-4 w-4 mr-2" />Guardar</Button></div>
<div className="flex justify-end gap-2 mt-4"><Button variant="outline" onClick={() => setDialog(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button><Button onClick={handle}><Plus className="h-4 w-4 mr-2" />Guardar</Button></div>
</DialogContent>
</Dialog>
@@ -1326,7 +1326,7 @@ const resetRes = () => {
</div>
)}
{c.estado === 'Negativo' && (
<div className="bg-green-50 p-3 rounded-lg border border-green-200">
<div className="bg-green-50 dark:bg-green-900/30 p-3 rounded-lg border border-green-200 dark:border-green-700">
<p className="text-sm font-medium text-green-800 flex items-center gap-2"><CheckCircle2 className="h-4 w-4" />Sin crecimiento de microorganismos</p>
{c.fechaResultado && <p className="text-xs text-green-600 mt-1">Resultado: {c.fechaResultado}</p>}
</div>
src/sections/Internaciones.tsx
+4 -4
View File
@@ -136,12 +136,12 @@ export function Internaciones({
// Ver Historia Clínica (navegar a página)
return (
<div className="space-y-6">
<div className="space-y-6 dark:text-white">
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-gray-900">Internaciones</h1>
<p className="text-gray-500">Gestión de internaciones en sala</p>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Internaciones</h1>
<p className="text-gray-500 dark:text-gray-400">Gestión de internaciones en sala</p>
</div>
<Dialog open={dialogoNuevaAbierto} onOpenChange={setDialogoNuevaAbierto}>
<DialogTrigger asChild>
@@ -307,7 +307,7 @@ export function Internaciones({
return (
<Card key={internacion.id} className="hover:shadow-md transition-shadow">
<CardContent className="p-4">
<CardContent className="p-4 dark:bg-gray-800">
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
<div className="flex items-start gap-4">
<div className={`h-12 w-12 rounded-full flex items-center justify-center flex-shrink-0 ${
src/sections/MapaCamas.tsx
+4 -5
View File
@@ -174,12 +174,11 @@ export function MapaCamas({
});
return (
<div className="space-y-6">
{/* Header */}
<div className="space-y-6 dark:text-white">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-gray-900">Mapa de Camas</h1>
<p className="text-gray-500">Gestión de camas del servicio</p>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Mapa de Camas</h1>
<p className="text-gray-500 dark:text-gray-400">Gestión de camas del servicio</p>
</div>
<div className="flex items-center gap-2">
<Badge variant="outline" className="bg-green-50 text-green-700">
@@ -569,7 +568,7 @@ export function MapaCamas({
Eliminar
</Button>
)}
<Button onClick={() => setBedDialogOpen(false)}>Cancelar</Button>
<Button onClick={() => setBedDialogOpen(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button>
<Button onClick={() => {
if (!bedNumero.trim()) return alert('Número requerido');
if (editingBed) {
src/sections/NuevoIngreso.tsx
+3 -3
View File
@@ -77,18 +77,18 @@ export function NuevoIngreso({ pacientes, camas, areas, onIniciarInternacion, on
const selectedPaciente = pacientes.find(p => p.id === pacienteSeleccionado);
return (
<div className="space-y-6">
<div className="space-y-6 dark:text-white">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<Button variant="ghost" size="icon" onClick={onVolver}>
<ArrowLeft className="h-5 w-5" />
</Button>
<div>
<h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
<User className="h-6 w-6 text-blue-600" />
Nuevo Ingreso
</h1>
<p className="text-gray-500">Formulario de internación</p>
<p className="text-gray-500 dark:text-gray-400">Formulario de internación</p>
</div>
</div>
<div className="flex gap-2">
src/sections/Pacientes.tsx
+4 -4
View File
@@ -138,12 +138,12 @@ export function Pacientes({
};
return (
<div className="space-y-6">
<div className="space-y-6 dark:text-white">
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-gray-900">Pacientes</h1>
<p className="text-gray-500">Gestión de pacientes del hospital</p>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Pacientes</h1>
<p className="text-gray-500 dark:text-gray-400">Gestión de pacientes del hospital</p>
</div>
<Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
<DialogTrigger asChild>
@@ -337,7 +337,7 @@ export function Pacientes({
<div className="grid grid-cols-1 gap-4">
{pacientesFiltrados.map((paciente) => (
<Card key={paciente.id} className="hover:shadow-md transition-shadow">
<CardContent className="p-4">
<CardContent className="p-4 dark:bg-gray-800">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
<div className="flex items-start gap-4">
<div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">