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

Fix: add dark mode colors to Dashboard and MapaCamas badges

Browse Source
This commit is contained in:
snlavaise
2026-04-20 03:36:51 -03:00
parent f94d401d57
commit dd2f16cf1a
5 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sections/Dashboard.tsx
+3 -3
View File
@@ -56,7 +56,7 @@ export function Dashboard({
<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">
<Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 dark:bg-green-900 dark:text-green-300 dark:border-green-700">
<CheckCircle2 className="h-3 w-3 mr-1" />
Sistema Operativo
</Badge>
@@ -213,7 +213,7 @@ export function Dashboard({
Ingreso: {internacion.fechaIngresoClinica ? formatDateDDMMYYYY(internacion.fechaIngresoClinica) : 'N/A'}
</p>
</div>
<Badge variant="outline" className="bg-purple-50 text-purple-700">
<Badge variant="outline" className="bg-purple-50 text-purple-700 dark:bg-purple-900 dark:text-purple-300 dark:border-purple-700">
Activa
</Badge>
</div>
@@ -301,7 +301,7 @@ export function Dashboard({
{cultivo.tipoMuestra} - {cultivo.fechaToma}
</p>
</div>
<Badge className="bg-amber-100 text-amber-800">
<Badge className="bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300">
<Clock className="h-3 w-3 mr-1" />
Pendiente
</Badge>
src/sections/HistoriaClinica.tsx
+2 -2
View File
@@ -251,11 +251,11 @@ export function HistoriaClinica({
<Button variant="outline" onClick={onVolver}>
<Button variant="secondary" onClick={onVolver}>
<ArrowLeft className="h-4 w-4 mr-2" />
Volver
</Button>
<Button variant="outline" onClick={onEditarIngreso}>
<Button onClick={onEditarIngreso}>
<Pencil className="h-4 w-4 mr-2" />
Editar Ingreso
</Button>
src/sections/Internaciones.tsx
+1 -1
View File
@@ -307,7 +307,7 @@ export function Internaciones({
return (
<Card key={internacion.id} className="hover:shadow-md transition-shadow">
<CardContent className="p-4 dark:bg-gray-800">
<CardContent className="p-4">
<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 ${internacion.activa ? 'bg-purple-100' : 'bg-gray-100'
src/sections/MapaCamas.tsx
+8 -8
View File
@@ -76,20 +76,20 @@ export function MapaCamas({
const getEstadoColor = (cama: Cama) => {
if (cama.estado === 'Disponible') {
return 'bg-green-100 border-green-300 text-green-800';
return 'bg-green-100 border-green-300 text-green-800 dark:bg-green-900 dark:border-green-700 dark:text-green-300';
}
if (cama.estado === 'Reservada') {
return 'bg-orange-100 border-orange-300 text-orange-800';
return 'bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900 dark:border-orange-700 dark:text-orange-300';
}
if (cama.estado === 'Ocupada') {
// Tipos de aislamiento
const aislamientos = ['Aislamiento KPC', 'Aislamiento COVID', 'Aislamiento Clostridium', 'Aislamiento Neutropenico'];
if (aislamientos.includes(cama.tipo)) {
return 'bg-red-100 border-red-300 text-red-800';
return 'bg-red-100 border-red-300 text-red-800 dark:bg-red-900 dark:border-red-700 dark:text-red-300';
}
return 'bg-blue-100 border-blue-300 text-blue-800';
return 'bg-blue-100 border-blue-300 text-blue-800 dark:bg-blue-900 dark:border-blue-700 dark:text-blue-300';
}
return 'bg-amber-100 border-amber-300 text-amber-800';
return 'bg-amber-100 border-amber-300 text-amber-800 dark:bg-amber-900 dark:border-amber-700 dark:text-amber-300';
};
const getEstadoIcono = (cama: Cama) => {
@@ -181,10 +181,10 @@ export function MapaCamas({
<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">
<Badge variant="outline" className="bg-green-50 text-green-700 dark:bg-green-900 dark:text-green-300 dark:border-green-700">
{camas.filter(c => c.estado === 'Disponible').length} Disponibles
</Badge>
<Badge variant="outline" className="bg-red-50 text-red-700">
<Badge variant="outline" className="bg-red-50 text-red-700 dark:bg-red-900 dark:text-red-300 dark:border-red-700">
{camas.filter(c => c.estado === 'Ocupada').length} Ocupadas
</Badge>
<div className="ml-4 flex items-center gap-2 flex-wrap sm:flex-nowrap">
@@ -280,7 +280,7 @@ export function MapaCamas({
</div>
<p className="font-bold text-sm sm:text-lg">{cama.numero}</p>
<p className="text-xs opacity-75 truncate">{cama.areaId ? areaById[cama.areaId] ?? 'Área desconocida' : 'Sin área'}</p>
<Badge variant="outline" className="mt-1 sm:mt-2 text-xs bg-white/50">
<Badge variant="outline" className="mt-1 sm:mt-2 text-xs bg-white/50 dark:bg-gray-800 dark:text-gray-300">
{cama.tipo}
</Badge>
{cama.estado === 'Ocupada' && paciente && (
src/sections/Pacientes.tsx
+1 -1
View File
@@ -330,7 +330,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 dark:bg-gray-800">
<CardContent className="p-4">
<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">