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

Fix: Responsive en Cultivos y Camas para dispositivos móviles

Browse Source
This commit is contained in:
snlavaise
2026-04-14 21:23:37 -03:00
parent d2bddc23cb
commit e3eecc6942
2 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sections/Cultivos.tsx
+29 -29
View File
@@ -180,7 +180,7 @@ export function Cultivos({
</div> </div>
<Dialog open={dialogoNuevoAbierto} onOpenChange={setDialogoNuevoAbierto}> <Dialog open={dialogoNuevoAbierto} onOpenChange={setDialogoNuevoAbierto}>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button onClick={resetFormularioNuevo}> <Button onClick={resetFormularioNuevo} className="w-full sm:w-auto">
<Plus className="h-4 w-4 mr-2" /> <Plus className="h-4 w-4 mr-2" />
Nuevo Cultivo Nuevo Cultivo
</Button> </Button>
@@ -229,7 +229,7 @@ export function Cultivos({
<Button size="sm" variant="ghost" onClick={() => setPacienteSeleccionado('')}>Cambiar</Button> <Button size="sm" variant="ghost" onClick={() => setPacienteSeleccionado('')}>Cambiar</Button>
</div> </div>
)} )}
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<Label>Fecha de Toma *</Label> <Label>Fecha de Toma *</Label>
<Input type="date" value={fechaToma} onChange={(e) => setFechaToma(e.target.value)} /> <Input type="date" value={fechaToma} onChange={(e) => setFechaToma(e.target.value)} />
@@ -316,7 +316,7 @@ export function Cultivos({
<DialogTitle>Cargar Resultado Definitivo</DialogTitle> <DialogTitle>Cargar Resultado Definitivo</DialogTitle>
</DialogHeader> </DialogHeader>
<div className="space-y-4"> <div className="space-y-4">
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<Label>Fecha de Resultado *</Label> <Label>Fecha de Resultado *</Label>
<Input type="date" value={fechaResultado} onChange={(e) => setFechaResultado(e.target.value)} /> <Input type="date" value={fechaResultado} onChange={(e) => setFechaResultado(e.target.value)} />
@@ -397,12 +397,12 @@ export function Cultivos({
const paciente = getPacienteById(cultivo.pacienteId); const paciente = getPacienteById(cultivo.pacienteId);
return ( return (
<Card key={cultivo.id} className="hover:shadow-md transition-shadow"> <Card key={cultivo.id} className="hover:shadow-md transition-shadow w-full">
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="flex items-start justify-between"> <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className={`h-10 w-10 rounded-full flex items-center justify-center ${ <div className={`h-10 w-10 rounded-full flex items-center justify-center shrink-0 ${
cultivo.estado === 'NAF/Pendiente' ? 'bg-amber-100' : cultivo.estado === 'NAF/Pendiente' ? 'bg-amber-100' :
cultivo.estado === 'Parcial' ? 'bg-orange-100' : cultivo.estado === 'Parcial' ? 'bg-orange-100' :
cultivo.estado === 'Positivo' ? 'bg-red-100' : 'bg-green-100' cultivo.estado === 'Positivo' ? 'bg-red-100' : 'bg-green-100'
@@ -413,8 +413,8 @@ export function Cultivos({
cultivo.estado === 'Positivo' ? 'text-red-600' : 'text-green-600' cultivo.estado === 'Positivo' ? 'text-red-600' : 'text-green-600'
}`} /> }`} />
</div> </div>
<div> <div className="min-w-0">
<h3 className="font-bold"> <h3 className="font-bold text-sm sm:text-base truncate">
{paciente ? ( {paciente ? (
<> <>
{(() => { {(() => {
@@ -424,50 +424,50 @@ export function Cultivos({
</> </>
) : 'Paciente no encontrado'} ) : 'Paciente no encontrado'}
</h3> </h3>
<div className="flex items-center gap-3 text-sm text-gray-500"> <div className="flex flex-wrap items-center gap-2 text-xs sm:text-sm text-gray-500">
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Calendar className="h-3 w-3" /> <Calendar className="h-3 w-3" />
Toma: {cultivo.fechaToma} {cultivo.fechaToma}
</span> </span>
<Badge variant="outline">{cultivo.tipoMuestra}</Badge> <Badge variant="outline" className="text-xs">{cultivo.tipoMuestra}</Badge>
<Badge className={getEstadoColor(cultivo.estado)}> <Badge className={`text-xs ${getEstadoColor(cultivo.estado)}`}>
{getEstadoLabel(cultivo.estado)} {getEstadoLabel(cultivo.estado)}
</Badge> </Badge>
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-1 sm:gap-2 ml-auto sm:ml-0">
{onActualizarCultivo && cultivo.estado === 'NAF/Pendiente' && ( {onActualizarCultivo && cultivo.estado === 'NAF/Pendiente' && (
<> <>
<Button size="sm" onClick={() => abrirParcial(cultivo)}> <Button size="sm" className="text-xs px-2 py-1" onClick={() => abrirParcial(cultivo)}>
<AlertCircle className="h-4 w-4 mr-1" /> <AlertCircle className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
Parcial <span className="hidden sm:inline">Parcial</span>
</Button> </Button>
<Button size="sm" variant="default" onClick={() => abrirDefinitivo(cultivo)}> <Button size="sm" variant="default" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
<CheckCircle2 className="h-4 w-4 mr-1" /> <CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
Definitivo <span className="hidden sm:inline">Definitivo</span>
</Button> </Button>
</> </>
)} )}
{onActualizarCultivo && cultivo.estado === 'Parcial' && ( {onActualizarCultivo && cultivo.estado === 'Parcial' && (
<> <>
<Button size="sm" variant="outline" onClick={() => abrirParcial(cultivo)}> <Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirParcial(cultivo)}>
<Pencil className="h-4 w-4 mr-1" /> <Pencil className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
Editar Parcial <span className="hidden sm:inline">Editar</span>
</Button> </Button>
<Button size="sm" variant="default" onClick={() => abrirDefinitivo(cultivo)}> <Button size="sm" variant="default" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
<CheckCircle2 className="h-4 w-4 mr-1" /> <CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
Definitivo <span className="hidden sm:inline">Definitivo</span>
</Button> </Button>
</> </>
)} )}
{onActualizarCultivo && (cultivo.estado === 'Positivo' || cultivo.estado === 'Negativo') && ( {onActualizarCultivo && (cultivo.estado === 'Positivo' || cultivo.estado === 'Negativo') && (
<Button size="sm" variant="outline" onClick={() => abrirDefinitivo(cultivo)}> <Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
<Pencil className="h-4 w-4" /> <Pencil className="h-3 w-3 sm:h-4 sm:w-4" />
</Button> </Button>
)} )}
<Button size="sm" variant="ghost" className="text-red-600" onClick={() => onEliminarCultivo(cultivo.id)}> <Button size="sm" variant="ghost" className="text-red-600 text-xs px-2 py-1" onClick={() => onEliminarCultivo(cultivo.id)}>
<Trash2 className="h-4 w-4" /> <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
</Button> </Button>
</div> </div>
</div> </div>
src/sections/MapaCamas.tsx
+1 -1
View File
@@ -323,7 +323,7 @@ export function MapaCamas({
<div className="space-y-2"> <div className="space-y-2">
<p className="font-medium">Acciones:</p> <p className="font-medium">Acciones:</p>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
{cama.estado === 'Disponible' && ( {cama.estado === 'Disponible' && (
<Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}> <Dialog open={dialogoAbierto} onOpenChange={setDialogoAbierto}>
<DialogTrigger asChild> <DialogTrigger asChild>