138 lines
4.2 KiB
TypeScript
138 lines
4.2 KiB
TypeScript
import { useState } from 'react';
|
||
import { Calculator, Table, AlertCircle } from 'lucide-react';
|
||
import GlasgowCalculator from '@/components/tools/GlasgowCalculator';
|
||
import InfusionTableView from '@/components/tools/InfusionTableView';
|
||
import { infusionTables } from '@/data/calculators';
|
||
import { Link } from 'react-router-dom';
|
||
|
||
const tabs = [
|
||
{ id: 'calculadoras', label: 'Calculadoras', icon: Calculator },
|
||
{ id: 'perfusiones', label: 'Perfusiones', icon: Table },
|
||
{ id: 'codigos', label: 'Códigos', icon: AlertCircle },
|
||
];
|
||
|
||
const codigosProtocolo = [
|
||
{
|
||
name: 'Código Ictus',
|
||
description: 'Activación ante sospecha de ictus agudo',
|
||
path: '/patologias?tab=neurologicas',
|
||
color: 'bg-secondary',
|
||
},
|
||
{
|
||
name: 'Código IAM',
|
||
description: 'SCACEST - Infarto con elevación ST',
|
||
path: '/patologias?tab=circulatorias',
|
||
color: 'bg-primary',
|
||
},
|
||
{
|
||
name: 'Código Sepsis',
|
||
description: 'Sospecha de sepsis severa / shock séptico',
|
||
path: '/soporte-vital',
|
||
color: 'bg-emergency-high',
|
||
},
|
||
{
|
||
name: 'Código Parada',
|
||
description: 'PCR - Parada cardiorrespiratoria',
|
||
path: '/soporte-vital?id=rcp-adulto-svb',
|
||
color: 'bg-primary',
|
||
},
|
||
];
|
||
|
||
const Herramientas = () => {
|
||
const [activeTab, setActiveTab] = useState('calculadoras');
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-foreground mb-1">Herramientas</h1>
|
||
<p className="text-muted-foreground text-sm">
|
||
Calculadoras, tablas y códigos
|
||
</p>
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div className="flex gap-2 overflow-x-auto scrollbar-hide -mx-4 px-4">
|
||
{tabs.map((tab) => {
|
||
const Icon = tab.icon;
|
||
return (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id)}
|
||
className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${
|
||
activeTab === tab.id
|
||
? 'bg-secondary text-secondary-foreground'
|
||
: 'bg-muted text-muted-foreground hover:bg-accent'
|
||
}`}
|
||
>
|
||
<Icon className="w-4 h-4" />
|
||
{tab.label}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* Content */}
|
||
{activeTab === 'calculadoras' && (
|
||
<div className="space-y-4">
|
||
<GlasgowCalculator />
|
||
|
||
{/* Placeholder for more calculators */}
|
||
<div className="card-procedure opacity-60">
|
||
<h3 className="font-bold text-foreground text-lg mb-2">
|
||
🔥 Fórmula de Parkland (Quemados)
|
||
</h3>
|
||
<p className="text-muted-foreground text-sm">
|
||
Próximamente disponible
|
||
</p>
|
||
</div>
|
||
|
||
<div className="card-procedure opacity-60">
|
||
<h3 className="font-bold text-foreground text-lg mb-2">
|
||
⚖️ Dosis Pediátricas por Peso
|
||
</h3>
|
||
<p className="text-muted-foreground text-sm">
|
||
Próximamente disponible
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'perfusiones' && (
|
||
<div className="space-y-4">
|
||
{infusionTables.map((table) => (
|
||
<InfusionTableView key={table.id} table={table} />
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'codigos' && (
|
||
<div className="space-y-3">
|
||
{codigosProtocolo.map((codigo) => (
|
||
<Link
|
||
key={codigo.name}
|
||
to={codigo.path}
|
||
className="block card-procedure hover:border-primary/50"
|
||
>
|
||
<div className="flex items-center gap-4">
|
||
<div
|
||
className={`w-12 h-12 rounded-lg ${codigo.color} flex items-center justify-center`}
|
||
>
|
||
<AlertCircle className="w-6 h-6 text-white" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-bold text-foreground">{codigo.name}</h3>
|
||
<p className="text-muted-foreground text-sm">
|
||
{codigo.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Herramientas;
|