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>
<Dialog open={dialogoNuevoAbierto} onOpenChange={setDialogoNuevoAbierto}>
<DialogTrigger asChild>
<Button onClick={resetFormularioNuevo}>
<Button onClick={resetFormularioNuevo} className="w-full sm:w-auto">
<Plus className="h-4 w-4 mr-2" />
Nuevo Cultivo
</Button>
@@ -229,7 +229,7 @@ export function Cultivos({
<Button size="sm" variant="ghost" onClick={() => setPacienteSeleccionado('')}>Cambiar</Button>
</div>
)}
<div className="grid grid-cols-2 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<Label>Fecha de Toma *</Label>
<Input type="date" value={fechaToma} onChange={(e) => setFechaToma(e.target.value)} />
@@ -316,7 +316,7 @@ export function Cultivos({
<DialogTitle>Cargar Resultado Definitivo</DialogTitle>
</DialogHeader>
<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>
<Label>Fecha de Resultado *</Label>
<Input type="date" value={fechaResultado} onChange={(e) => setFechaResultado(e.target.value)} />
@@ -397,12 +397,12 @@ export function Cultivos({
const paciente = getPacienteById(cultivo.pacienteId);
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">
<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={`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 === 'Parcial' ? 'bg-orange-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'
}`} />
</div>
<div>
<h3 className="font-bold">
<div className="min-w-0">
<h3 className="font-bold text-sm sm:text-base truncate">
{paciente ? (
<>
{(() => {
@@ -424,50 +424,50 @@ export function Cultivos({
</>
) : 'Paciente no encontrado'}
</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">
<Calendar className="h-3 w-3" />
Toma: {cultivo.fechaToma}
{cultivo.fechaToma}
</span>
<Badge variant="outline">{cultivo.tipoMuestra}</Badge>
<Badge className={getEstadoColor(cultivo.estado)}>
<Badge variant="outline" className="text-xs">{cultivo.tipoMuestra}</Badge>
<Badge className={`text-xs ${getEstadoColor(cultivo.estado)}`}>
{getEstadoLabel(cultivo.estado)}
</Badge>
</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' && (
<>
<Button size="sm" onClick={() => abrirParcial(cultivo)}>
<AlertCircle className="h-4 w-4 mr-1" />
Parcial
<Button size="sm" className="text-xs px-2 py-1" onClick={() => abrirParcial(cultivo)}>
<AlertCircle className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
<span className="hidden sm:inline">Parcial</span>
</Button>
<Button size="sm" variant="default" onClick={() => abrirDefinitivo(cultivo)}>
<CheckCircle2 className="h-4 w-4 mr-1" />
Definitivo
<Button size="sm" variant="default" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
<CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
<span className="hidden sm:inline">Definitivo</span>
</Button>
</>
)}
{onActualizarCultivo && cultivo.estado === 'Parcial' && (
<>
<Button size="sm" variant="outline" onClick={() => abrirParcial(cultivo)}>
<Pencil className="h-4 w-4 mr-1" />
Editar Parcial
<Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirParcial(cultivo)}>
<Pencil className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
<span className="hidden sm:inline">Editar</span>
</Button>
<Button size="sm" variant="default" onClick={() => abrirDefinitivo(cultivo)}>
<CheckCircle2 className="h-4 w-4 mr-1" />
Definitivo
<Button size="sm" variant="default" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
<CheckCircle2 className="h-3 w-3 sm:h-4 sm:w-4 sm:mr-1" />
<span className="hidden sm:inline">Definitivo</span>
</Button>
</>
)}
{onActualizarCultivo && (cultivo.estado === 'Positivo' || cultivo.estado === 'Negativo') && (
<Button size="sm" variant="outline" onClick={() => abrirDefinitivo(cultivo)}>
<Pencil className="h-4 w-4" />
<Button size="sm" variant="outline" className="text-xs px-2 py-1" onClick={() => abrirDefinitivo(cultivo)}>
<Pencil className="h-3 w-3 sm:h-4 sm:w-4" />
</Button>
)}
<Button size="sm" variant="ghost" className="text-red-600" onClick={() => onEliminarCultivo(cultivo.id)}>
<Trash2 className="h-4 w-4" />
<Button size="sm" variant="ghost" className="text-red-600 text-xs px-2 py-1" onClick={() => onEliminarCultivo(cultivo.id)}>
<Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
</Button>
</div>
</div>