246 lines
9.8 KiB
TypeScript
246 lines
9.8 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { Info } from 'lucide-react'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Input } from '@/components/ui/input'
|
|
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'
|
|
|
|
const CURRENCIES = [
|
|
{ code: 'USD', label: 'USD — Dólar estadounidense' },
|
|
{ code: 'PYG', label: 'PYG — Guaraní paraguayo' },
|
|
{ code: 'BRL', label: 'BRL — Real brasileño' },
|
|
{ code: 'ARS', label: 'ARS — Peso argentino' },
|
|
{ code: 'EUR', label: 'EUR — Euro' },
|
|
{ code: 'COP', label: 'COP — Peso colombiano' },
|
|
{ code: 'MXN', label: 'MXN — Peso mexicano' },
|
|
{ code: 'CLP', label: 'CLP — Peso chileno' },
|
|
]
|
|
|
|
export function GlobalSettingsPanel() {
|
|
const { currentProcess, updateProcess } = useProcessStore()
|
|
const [localName, setLocalName] = useState('')
|
|
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(() => {
|
|
if (!currentProcess) return
|
|
setLocalName(currentProcess.name)
|
|
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)
|
|
}
|
|
|
|
if (!currentProcess) return null
|
|
|
|
return (
|
|
<ScrollArea className="h-full">
|
|
<div className="p-4 space-y-5">
|
|
{/* Nombre del proceso */}
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="proc-name" className="text-xs font-medium">Nombre del proceso</Label>
|
|
<Input
|
|
id="proc-name"
|
|
value={localName}
|
|
onChange={(e) => { setLocalName(e.target.value); markDirty() }}
|
|
placeholder="ej. Proceso de ventas"
|
|
className="h-8 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
{/* Cliente */}
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="client-name" className="text-xs font-medium">Cliente</Label>
|
|
<Input
|
|
id="client-name"
|
|
value={localClient}
|
|
onChange={(e) => { setLocalClient(e.target.value); markDirty() }}
|
|
placeholder="ej. Empresa ABC"
|
|
className="h-8 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
{/* Moneda */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs font-medium">Moneda</Label>
|
|
<Select value={localCurrency} onValueChange={(v) => { setLocalCurrency(v); markDirty() }}>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{CURRENCIES.map((c) => (
|
|
<SelectItem key={c.code} value={c.code} className="text-xs">{c.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Overhead */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-1.5">
|
|
<Label className="text-xs font-medium">Overhead (costos indirectos)</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">
|
|
Porcentaje adicional sobre los costos directos que representa los costos indirectos: alquiler, administración, infraestructura general.
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Slider
|
|
value={[localOverhead]}
|
|
min={0}
|
|
max={100}
|
|
step={1}
|
|
onValueChange={([v]) => { setLocalOverhead(v); markDirty() }}
|
|
className="flex-1"
|
|
/>
|
|
<span className="text-sm font-mono font-semibold text-slate-700 w-12 text-right">
|
|
{formatPercent(localOverhead, 0)}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-slate-400">
|
|
Típicamente entre 15% y 40% para empresas de servicios
|
|
</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"
|
|
onClick={handleSave}
|
|
disabled={!isDirty}
|
|
className="w-full"
|
|
>
|
|
{isDirty ? 'Guardar configuración' : 'Sin cambios'}
|
|
</Button>
|
|
</div>
|
|
</ScrollArea>
|
|
)
|
|
}
|