Hacer Cultivos responsive para móviles
This commit is contained in:
@@ -31,6 +31,7 @@ import {
|
|||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Label } from '@/components/ui/label';
|
import { Label } from '@/components/ui/label';
|
||||||
@@ -1677,75 +1678,85 @@ 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> :
|
{cs.length === 0 ? (
|
||||||
cs.map(c => (
|
<div className="text-center py-8 text-gray-400">
|
||||||
<Card key={c.id} className="mb-2"><CardContent className="p-4">
|
<Microscope className="h-12 w-12 mx-auto mb-2 opacity-50" />
|
||||||
<div className="flex flex-col gap-3">
|
<p>No hay cultivos</p>
|
||||||
<div className="flex items-start justify-between">
|
</div>
|
||||||
<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'}`}>
|
<ScrollArea className="w-full">
|
||||||
<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 className="flex gap-2 pb-2">
|
||||||
|
{cs.map(c => (
|
||||||
|
<Card key={c.id} className="min-w-[280px] w-[280px] flex-shrink-0">
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<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'}`}>
|
||||||
|
<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>
|
||||||
|
<p className="font-medium">{c.fechaToma}</p>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||||
|
<Badge variant="outline">{c.tipoMuestra}</Badge>
|
||||||
|
<Badge className={getEstadoColor(c.estado)}>{getEstadoLabel(c.estado)}</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{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={() => { openDefinitivo(c); setIsParcialMode(false); }}><CheckCircle2 className="h-4 w-4 mr-1" />Definitivo</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{c.estado === 'Parcial' && (
|
||||||
|
<>
|
||||||
|
<Button size="sm" variant="outline" onClick={() => openParcial(c)}><Pencil className="h-4 w-4 mr-1" />Editar Parcial</Button>
|
||||||
|
<Button size="sm" variant="outline" onClick={() => openDefinitivo(c)}><CheckCircle2 className="h-4 w-4 mr-1" />Definitivo</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{(c.estado === 'Positivo' || c.estado === 'Negativo') && <Button size="sm" variant="outline" onClick={() => openDefinitivo(c)}><Pencil className="h-4 w-4" /></Button>}
|
||||||
|
<Button size="sm" variant="outline" className="text-red-600" onClick={() => del(c.id)}><Trash2 /></Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{c.protocolo && <p className="text-xs text-gray-500">Protocolo: {c.protocolo}</p>}
|
||||||
|
{c.observaciones && <p className="text-sm text-gray-600 bg-gray-50 p-2 rounded">{c.observaciones}</p>}
|
||||||
|
{c.estado === 'Parcial' && c.germen && (
|
||||||
|
<div className="bg-orange-50 p-3 rounded-lg border border-orange-200">
|
||||||
|
<p className="text-sm font-medium text-orange-800 flex items-center gap-2"><AlertCircle className="h-4 w-4" />PARCIAL - Germen: {c.germen}</p>
|
||||||
|
{(c.sensible || c.resistente) && (
|
||||||
|
<div className="mt-2 space-y-1">
|
||||||
|
{c.sensible && <p className="text-xs text-orange-700">Sensible: {c.sensible}</p>}
|
||||||
|
{c.resistente && <p className="text-xs text-orange-700">Resistente: {c.resistente}</p>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{c.estado === 'Positivo' && c.germen && (
|
||||||
|
<div className="bg-red-50 p-3 rounded-lg border border-red-200">
|
||||||
|
<p className="text-sm font-medium text-red-800 flex items-center gap-2"><AlertCircle className="h-4 w-4" />Germen: {c.germen}</p>
|
||||||
|
{c.fechaResultado && <p className="text-xs text-red-600 mt-1">Resultado: {c.fechaResultado}</p>}
|
||||||
|
{(c.sensible || c.resistente) && (
|
||||||
|
<div className="mt-2 space-y-2">
|
||||||
|
{c.sensible && <div><p className="text-xs font-medium text-green-700 mb-1">Sensible a:</p><p className="text-sm text-green-800">{c.sensible}</p></div>}
|
||||||
|
{c.resistente && <div><p className="text-xs font-medium text-red-700 mb-1">Resistente a:</p><p className="text-sm text-red-800">{c.resistente}</p></div>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{c.estado === 'Negativo' && (
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</CardContent></Card>
|
||||||
<p className="font-medium">{c.fechaToma}</p>
|
))}
|
||||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
</div>
|
||||||
<Badge variant="outline">{c.tipoMuestra}</Badge>
|
</ScrollArea>
|
||||||
<Badge className={getEstadoColor(c.estado)}>{getEstadoLabel(c.estado)}</Badge>
|
)}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{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={() => { openDefinitivo(c); setIsParcialMode(false); }}><CheckCircle2 className="h-4 w-4 mr-1" />Definitivo</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{c.estado === 'Parcial' && (
|
|
||||||
<>
|
|
||||||
<Button size="sm" variant="outline" onClick={() => openParcial(c)}><Pencil className="h-4 w-4 mr-1" />Editar Parcial</Button>
|
|
||||||
<Button size="sm" variant="outline" onClick={() => openDefinitivo(c)}><CheckCircle2 className="h-4 w-4 mr-1" />Definitivo</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{(c.estado === 'Positivo' || c.estado === 'Negativo') && <Button size="sm" variant="outline" onClick={() => openDefinitivo(c)}><Pencil className="h-4 w-4" /></Button>}
|
|
||||||
<Button size="sm" variant="outline" className="text-red-600" onClick={() => del(c.id)}><Trash2 /></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{c.protocolo && <p className="text-xs text-gray-500">Protocolo: {c.protocolo}</p>}
|
|
||||||
{c.observaciones && <p className="text-sm text-gray-600 bg-gray-50 p-2 rounded">{c.observaciones}</p>}
|
|
||||||
{c.estado === 'Parcial' && c.germen && (
|
|
||||||
<div className="bg-orange-50 p-3 rounded-lg border border-orange-200">
|
|
||||||
<p className="text-sm font-medium text-orange-800 flex items-center gap-2"><AlertCircle className="h-4 w-4" />PARCIAL - Germen: {c.germen}</p>
|
|
||||||
{(c.sensible || c.resistente) && (
|
|
||||||
<div className="mt-2 space-y-1">
|
|
||||||
{c.sensible && <p className="text-xs text-orange-700">Sensible: {c.sensible}</p>}
|
|
||||||
{c.resistente && <p className="text-xs text-orange-700">Resistente: {c.resistente}</p>}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{c.estado === 'Positivo' && c.germen && (
|
|
||||||
<div className="bg-red-50 p-3 rounded-lg border border-red-200">
|
|
||||||
<p className="text-sm font-medium text-red-800 flex items-center gap-2"><AlertCircle className="h-4 w-4" />Germen: {c.germen}</p>
|
|
||||||
{c.fechaResultado && <p className="text-xs text-red-600 mt-1">Resultado: {c.fechaResultado}</p>}
|
|
||||||
{(c.sensible || c.resistente) && (
|
|
||||||
<div className="mt-2 space-y-2">
|
|
||||||
{c.sensible && <div><p className="text-xs font-medium text-green-700 mb-1">Sensible a:</p><p className="text-sm text-green-800">{c.sensible}</p></div>}
|
|
||||||
{c.resistente && <div><p className="text-xs font-medium text-red-700 mb-1">Resistente a:</p><p className="text-sm text-red-800">{c.resistente}</p></div>}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{c.estado === 'Negativo' && (
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardContent></Card>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user