marcos/inq-roi-simulador-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Antes de la última revisión de etapa 4. Sprint 1. Previo al ajuste de look n feel de app, reportes, nombre y colores.

Browse Source
This commit is contained in:
Marcos Benítez
2026-05-15 22:14:53 -03:00
parent b6f31f4371
commit 8b71c6ee13
54 changed files with 6497 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/features/workspace/GlobalSettingsPanel.tsx
View File

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button'
import { Slider } from '@/components/ui/slider'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Separator } from '@/components/ui/separator'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { useProcessStore } from '@/store/process-store'
import { formatPercent } from '@/lib/format'
@@ -27,6 +28,9 @@ export function GlobalSettingsPanel() {
const [localClient, setLocalClient] = useState('')
const [localCurrency, setLocalCurrency] = useState('USD')
const [localOverhead, setLocalOverhead] = useState(20)
const [localFrequency, setLocalFrequency] = useState(1000)
const [localHorizon, setLocalHorizon] = useState(3)
const [localInvestment, setLocalInvestment] = useState(0)
const [isDirty, setIsDirty] = useState(false)
useEffect(() => {
@@ -35,18 +39,26 @@ export function GlobalSettingsPanel() {
setLocalClient(currentProcess.clientName)
setLocalCurrency(currentProcess.currency)
setLocalOverhead(Math.round(currentProcess.overheadPercentage * 100))
setLocalFrequency(currentProcess.annualFrequency)
setLocalHorizon(currentProcess.analysisHorizonYears)
setLocalInvestment(currentProcess.automationInvestment)
setIsDirty(false)
}, [currentProcess])
function markDirty() { setIsDirty(true) }
async function handleSave() {
const clampedHorizon = Math.min(10, Math.max(1, localHorizon))
await updateProcess({
name: localName.trim() || 'Proceso sin nombre',
clientName: localClient.trim(),
currency: localCurrency,
overheadPercentage: localOverhead / 100,
annualFrequency: Math.max(1, localFrequency),
analysisHorizonYears: clampedHorizon,
automationInvestment: Math.max(0, localInvestment),
})
setLocalHorizon(clampedHorizon)
setIsDirty(false)
}
@@ -125,6 +137,99 @@ export function GlobalSettingsPanel() {
</p>
</div>
{/* ── Sección: Análisis de Impacto ──────────────────────────────── */}
<div>
<Separator className="mb-4" />
<div className="space-y-4">
<p className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Análisis de Impacto</p>
{/* Frecuencia anual */}
<div className="space-y-1.5">
<div className="flex items-center gap-1.5">
<Label htmlFor="annual-frequency" className="text-xs font-medium">
Frecuencia anual
</Label>
<Tooltip>
<TooltipTrigger asChild>
<Info className="h-3 w-3 text-slate-400 cursor-help" />
</TooltipTrigger>
<TooltipContent side="right" className="max-w-52 text-xs">
Cantidad de veces que se ejecuta el proceso completo por año. Se usa para anualizar los costos y calcular el ahorro.
</TooltipContent>
</Tooltip>
</div>
<Input
id="annual-frequency"
type="number"
min={1}
max={10_000_000}
step={1}
value={localFrequency === 0 ? '' : localFrequency}
onChange={(e) => { setLocalFrequency(Math.max(1, parseInt(e.target.value) || 1)); markDirty() }}
className="font-mono h-8 text-sm"
placeholder="1000"
/>
<p className="text-[10px] text-slate-400">
Ejemplos: 12 (mensual) · 52 (semanal) · 250 (diario laboral) · 8760 (cada hora)
</p>
</div>
{/* Horizonte de análisis */}
<div className="space-y-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-1.5">
<Label className="text-xs font-medium">Horizonte de análisis</Label>
<Tooltip>
<TooltipTrigger asChild>
<Info className="h-3 w-3 text-slate-400 cursor-help" />
</TooltipTrigger>
<TooltipContent side="right" className="max-w-52 text-xs">
Años hasta los que se proyecta el ahorro acumulado. Determina el eje X del gráfico de ROI.
</TooltipContent>
</Tooltip>
</div>
<span className="text-sm font-mono font-semibold text-slate-700">
{localHorizon} {localHorizon === 1 ? 'año' : 'años'}
</span>
</div>
<Slider
value={[localHorizon]}
min={1}
max={10}
step={1}
onValueChange={([v]) => { setLocalHorizon(v); markDirty() }}
/>
</div>
{/* Inversión en automatización */}
<div className="space-y-1.5">
<div className="flex items-center gap-1.5">
<Label htmlFor="automation-investment" className="text-xs font-medium">
Inversión en automatización
</Label>
<Tooltip>
<TooltipTrigger asChild>
<Info className="h-3 w-3 text-slate-400 cursor-help" />
</TooltipTrigger>
<TooltipContent side="right" className="max-w-56 text-xs">
Costo único total del proyecto: desarrollo, licencias, implementación, capacitación. No incluir costos recurrentes.
</TooltipContent>
</Tooltip>
</div>
<Input
id="automation-investment"
type="number"
min={0}
step={100}
value={localInvestment === 0 ? '' : localInvestment}
onChange={(e) => { setLocalInvestment(Math.max(0, parseFloat(e.target.value) || 0)); markDirty() }}
className="font-mono h-8 text-sm"
placeholder="0"
/>
</div>
</div>
</div>
{/* Guardar */}
<Button
size="sm"