Hacer Cultivos responsive estilo Pacientes

This commit is contained in:
2026-04-16 09:23:50 -03:00
parent 05693a7ea6
commit 35d0e4eb41
+10 -7
View File
@@ -1677,13 +1677,15 @@ const resetRes = () => {
</DialogContent> </DialogContent>
</Dialog> </Dialog>
{cs.length === 0 ? <div className="text-center py-8 text-gray-400"><Microscope className="h-12 w-12 mx-auto mb-2 opacity-50" /><p>No hay cultivos</p></div> : <div>
<div className="grid grid-cols-1 gap-4">
{cs.length === 0 ? <div className="text-center py-8 text-gray-400"><Microscope className="h-12 w-12 mx-auto mb-2 opacity-50" /><p>No hay cultivos</p></div> :
cs.map(c => ( cs.map(c => (
<Card key={c.id} className="mb-2"><CardContent className="p-4"> <Card key={c.id} className="hover:shadow-md transition-shadow"><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-4">
<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 ${c.estado === 'NAF/Pendiente' ? 'bg-amber-100' : c.estado === 'Parcial' ? 'bg-orange-100' : c.estado === 'Positivo' ? 'bg-red-100' : 'bg-green-100'}`}> <div className={`h-10 w-10 rounded-full flex items-center justify-center flex-shrink-0 ${c.estado === 'NAF/Pendiente' ? 'bg-amber-100' : c.estado === 'Parcial' ? 'bg-orange-100' : c.estado === 'Positivo' ? 'bg-red-100' : 'bg-green-100'}`}>
<Microscope className={`h-5 w-5 ${c.estado === 'NAF/Pendiente' ? 'text-amber-600' : c.estado === 'Parcial' ? 'text-orange-600' : c.estado === 'Positivo' ? 'text-red-600' : 'text-green-600'}`} /> <Microscope className={`h-5 w-5 ${c.estado === 'NAF/Pendiente' ? 'text-amber-600' : c.estado === 'Parcial' ? 'text-orange-600' : c.estado === 'Positivo' ? 'text-red-600' : 'text-green-600'}`} />
</div> </div>
<div> <div>
@@ -1694,7 +1696,7 @@ const resetRes = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
{c.estado === 'NAF/Pendiente' && ( {c.estado === 'NAF/Pendiente' && (
<> <>
<Button size="sm" variant="outline" onClick={() => openParcial(c)}><AlertCircle className="h-4 w-4 mr-1" />Parcial</Button> <Button size="sm" variant="outline" onClick={() => openParcial(c)}><AlertCircle className="h-4 w-4 mr-1" />Parcial</Button>
@@ -1744,8 +1746,9 @@ const resetRes = () => {
)} )}
</div> </div>
</CardContent></Card> </CardContent></Card>
)) ))}
} </div>
</div>
</div> </div>
); );
} }