Marcos Benítez
bed161c92a
Plataforma completa de análisis de costos operativos basada en BPMN 2.0. Funcionalidades incluidas: - Import de archivos BPMN 2.0 por drag & drop + 3 procesos de ejemplo - Visualización read-only del diagrama (bpmn-js) - Configuración de actividades (costo, tiempo, recursos asignados) - CRUD de recursos (rol, persona, sistema, equipo, insumo) - Configuración global (moneda, overhead %, nombre, cliente) - Motor de simulación determinístico agregado con propagación de gateways XOR/AND - Reporte visual con mapa de calor en dos modos (relativo/absoluto) - Gráficos: KPIs, top actividades, composición, costo por recurso - Export PDF (jsPDF + html2canvas) y CSV (papaparse) - Persistencia en IndexedDB (Dexie) - 268 tests unitarios/integración + 6 E2E con Playwright - Deploy: https://process-cost-platform.pages.dev Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { cn } from '@/lib/utils'
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
|
|
import type { HeatmapMode } from '@/lib/colors'
|
|
|
|
interface HeatmapModeToggleProps {
|
|
mode: HeatmapMode
|
|
onChange: (mode: HeatmapMode) => void
|
|
}
|
|
|
|
const MODE_LABELS: Record<HeatmapMode, { label: string; tip: string }> = {
|
|
relative: {
|
|
label: 'Costo relativo (%)',
|
|
tip: 'Colorea cada actividad en función de su % del costo total. Útil para ver proporciones.',
|
|
},
|
|
absolute: {
|
|
label: 'Costo absoluto',
|
|
tip: 'Colorea según el costo esperado en la moneda del proceso. Útil para comparar magnitudes reales.',
|
|
},
|
|
}
|
|
|
|
export function HeatmapModeToggle({ mode, onChange }: HeatmapModeToggleProps) {
|
|
return (
|
|
<div className="inline-flex rounded-lg border border-slate-200 bg-slate-50 p-0.5 text-xs">
|
|
{(['relative', 'absolute'] as HeatmapMode[]).map((m) => {
|
|
const { label, tip } = MODE_LABELS[m]
|
|
return (
|
|
<Tooltip key={m}>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
onClick={() => onChange(m)}
|
|
className={cn(
|
|
'px-3 py-1.5 rounded-md font-medium transition-all',
|
|
mode === m
|
|
? 'bg-white text-slate-800 shadow-sm'
|
|
: 'text-slate-500 hover:text-slate-700'
|
|
)}
|
|
>
|
|
{label}
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom" className="max-w-52 text-xs">
|
|
{tip}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|