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

Hacer tabs scrolleable en HistoriaClinica para responsive

Browse Source
This commit is contained in:
snlavaise
2026-04-17 11:22:55 -03:00
parent 3fbed1b088
commit 47f96d8fa4
3 changed files with 125 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sections/HistoriaClinica.tsx
+44 -40
View File
@@ -47,6 +47,7 @@ import { Label } from '@/components/ui/label';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
@@ -470,46 +471,49 @@ export function HistoriaClinica({
<Tabs value={tabActivo} onValueChange={setTabActivo}>
<TabsList className="flex w-full overflow-x-auto gap-1 pb-2">
<TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<FileText className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Evoluciones</span>
<span className="sm:hidden">Evol</span>
({evoluciones.length})
</TabsTrigger>
<TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Laboratorio</span>
<span className="sm:hidden">Lab</span>
({laboratorios.length})
</TabsTrigger>
<TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<Activity className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">EAB</span>
<span className="sm:hidden">EAB</span>
({acidosBase.length})
</TabsTrigger>
<TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Cultivos</span>
<span className="sm:hidden">Cult</span>
({cultivos.length})
</TabsTrigger>
<TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<Pill className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">ATB</span>
</TabsTrigger>
<TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Estudios</span>
<span className="sm:hidden">Est</span>
({estudiosComplementarios.length})
</TabsTrigger>
<TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<Users className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Interconsultas</span>
</TabsTrigger>
</TabsList>
<ScrollArea className="w-full whitespace-nowrap rounded-md">
<TabsList className="flex w-full gap-1 pb-2">
<TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<FileText className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Evoluciones</span>
<span className="sm:hidden">Evol</span>
({evoluciones.length})
</TabsTrigger>
<TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Laboratorio</span>
<span className="sm:hidden">Lab</span>
({laboratorios.length})
</TabsTrigger>
<TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<Activity className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">EAB</span>
<span className="sm:hidden">EAB</span>
({acidosBase.length})
</TabsTrigger>
<TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Cultivos</span>
<span className="sm:hidden">Cult</span>
({cultivos.length})
</TabsTrigger>
<TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<Pill className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">ATB</span>
</TabsTrigger>
<TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Estudios</span>
<span className="sm:hidden">Est</span>
({estudiosComplementarios.length})
</TabsTrigger>
<TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
<Users className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Interconsultas</span>
</TabsTrigger>
</TabsList>
<ScrollBar orientation="horizontal" />
</ScrollArea>
<TabsContent value="laboratorios" className="mt-4">
<SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} />