feat: Implement complete APU (Análisis de Precios Unitarios) module
High priority features: - APU CRUD with materials, labor, and equipment breakdown - Labor catalog with FSR (Factor de Salario Real) calculation - Equipment catalog with hourly cost calculation - Link APU to budget line items (partidas) - Explosion de insumos (consolidated materials list) Additional features: - Duplicate APU functionality - Excel export for explosion de insumos - Search and filters in APU list - Price validation alerts for outdated prices - PDF report export for APU New components: - APUForm, APUList, APUDetail - ManoObraForm, EquipoForm - ConfiguracionAPUForm - VincularAPUDialog - PartidasManager - ExplosionInsumos - APUPDF New UI components: - Alert component - Tooltip component Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Mexus
377
src/components/apu/equipo-form.tsx
Normal file
377
src/components/apu/equipo-form.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
equipoMaquinariaSchema,
|
||||
calcularCostoHorario,
|
||||
type EquipoMaquinariaInput,
|
||||
} from "@/lib/validations/apu";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { TIPO_EQUIPO_LABELS } from "@/types";
|
||||
import { TipoEquipo } from "@prisma/client";
|
||||
|
||||
interface EquipoFormProps {
|
||||
equipo?: {
|
||||
id: string;
|
||||
codigo: string;
|
||||
nombre: string;
|
||||
tipo: TipoEquipo;
|
||||
valorAdquisicion: number;
|
||||
vidaUtilHoras: number;
|
||||
valorRescate: number;
|
||||
consumoCombustible: number | null;
|
||||
precioCombustible: number | null;
|
||||
factorMantenimiento: number;
|
||||
costoOperador: number | null;
|
||||
costoHorario: number;
|
||||
};
|
||||
}
|
||||
|
||||
export function EquipoForm({ equipo }: EquipoFormProps) {
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const isEditing = !!equipo;
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
watch,
|
||||
} = useForm<EquipoMaquinariaInput>({
|
||||
resolver: zodResolver(equipoMaquinariaSchema),
|
||||
defaultValues: {
|
||||
codigo: equipo?.codigo || "",
|
||||
nombre: equipo?.nombre || "",
|
||||
tipo: equipo?.tipo || "MAQUINARIA_LIGERA",
|
||||
valorAdquisicion: equipo?.valorAdquisicion || 0,
|
||||
vidaUtilHoras: equipo?.vidaUtilHoras || 0,
|
||||
valorRescate: equipo?.valorRescate || 0,
|
||||
consumoCombustible: equipo?.consumoCombustible || undefined,
|
||||
precioCombustible: equipo?.precioCombustible || undefined,
|
||||
factorMantenimiento: equipo?.factorMantenimiento || 0.6,
|
||||
costoOperador: equipo?.costoOperador || undefined,
|
||||
},
|
||||
});
|
||||
|
||||
const watchedValues = watch();
|
||||
|
||||
// Calculate costo horario in real-time
|
||||
const calculatedCostoHorario = useMemo(() => {
|
||||
if (!watchedValues.valorAdquisicion || !watchedValues.vidaUtilHoras) {
|
||||
return 0;
|
||||
}
|
||||
return calcularCostoHorario({
|
||||
valorAdquisicion: watchedValues.valorAdquisicion || 0,
|
||||
vidaUtilHoras: watchedValues.vidaUtilHoras || 1,
|
||||
valorRescate: watchedValues.valorRescate || 0,
|
||||
consumoCombustible: watchedValues.consumoCombustible,
|
||||
precioCombustible: watchedValues.precioCombustible,
|
||||
factorMantenimiento: watchedValues.factorMantenimiento || 0.6,
|
||||
costoOperador: watchedValues.costoOperador,
|
||||
});
|
||||
}, [watchedValues]);
|
||||
|
||||
// Calculate breakdown
|
||||
const costoBreakdown = useMemo(() => {
|
||||
const va = watchedValues.valorAdquisicion || 0;
|
||||
const vh = watchedValues.vidaUtilHoras || 1;
|
||||
const vr = watchedValues.valorRescate || 0;
|
||||
const fm = watchedValues.factorMantenimiento || 0.6;
|
||||
const cc = watchedValues.consumoCombustible || 0;
|
||||
const pc = watchedValues.precioCombustible || 0;
|
||||
const co = watchedValues.costoOperador || 0;
|
||||
|
||||
const depreciacion = (va - vr) / vh;
|
||||
const mantenimiento = depreciacion * fm;
|
||||
const combustible = cc * pc;
|
||||
|
||||
return {
|
||||
depreciacion,
|
||||
mantenimiento,
|
||||
combustible,
|
||||
operador: co,
|
||||
};
|
||||
}, [watchedValues]);
|
||||
|
||||
const onSubmit = async (data: EquipoMaquinariaInput) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const url = isEditing
|
||||
? `/api/apu/equipos/${equipo.id}`
|
||||
: "/api/apu/equipos";
|
||||
const method = isEditing ? "PUT" : "POST";
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.error || "Error al guardar");
|
||||
}
|
||||
|
||||
toast({
|
||||
title: isEditing ? "Equipo actualizado" : "Equipo creado",
|
||||
description: isEditing
|
||||
? "Los cambios han sido guardados"
|
||||
: "El equipo ha sido creado exitosamente",
|
||||
});
|
||||
|
||||
router.push("/apu/equipos");
|
||||
router.refresh();
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: error instanceof Error ? error.message : "No se pudo guardar el equipo",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Informacion General</CardTitle>
|
||||
<CardDescription>
|
||||
Datos basicos del equipo o maquinaria
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="codigo">Codigo *</Label>
|
||||
<Input
|
||||
id="codigo"
|
||||
placeholder="Ej: EQ-001"
|
||||
{...register("codigo")}
|
||||
/>
|
||||
{errors.codigo && (
|
||||
<p className="text-sm text-red-600">{errors.codigo.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nombre">Nombre *</Label>
|
||||
<Input
|
||||
id="nombre"
|
||||
placeholder="Ej: Retroexcavadora CAT 420F"
|
||||
{...register("nombre")}
|
||||
/>
|
||||
{errors.nombre && (
|
||||
<p className="text-sm text-red-600">{errors.nombre.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Tipo de Equipo *</Label>
|
||||
<Select
|
||||
value={watchedValues.tipo}
|
||||
onValueChange={(value) => setValue("tipo", value as TipoEquipo)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Seleccionar tipo" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(TIPO_EQUIPO_LABELS).map(([value, label]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Datos Economicos</CardTitle>
|
||||
<CardDescription>
|
||||
Valores para calcular el costo horario del equipo
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="valorAdquisicion">Valor de Adquisicion *</Label>
|
||||
<Input
|
||||
id="valorAdquisicion"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
{...register("valorAdquisicion", { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.valorAdquisicion && (
|
||||
<p className="text-sm text-red-600">
|
||||
{errors.valorAdquisicion.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="vidaUtilHoras">Vida Util (horas) *</Label>
|
||||
<Input
|
||||
id="vidaUtilHoras"
|
||||
type="number"
|
||||
placeholder="0"
|
||||
{...register("vidaUtilHoras", { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.vidaUtilHoras && (
|
||||
<p className="text-sm text-red-600">
|
||||
{errors.vidaUtilHoras.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="valorRescate">Valor de Rescate</Label>
|
||||
<Input
|
||||
id="valorRescate"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
{...register("valorRescate", { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="factorMantenimiento">Factor de Mantenimiento</Label>
|
||||
<Input
|
||||
id="factorMantenimiento"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0.60"
|
||||
{...register("factorMantenimiento", { valueAsNumber: true })}
|
||||
/>
|
||||
<p className="text-xs text-slate-500">
|
||||
Tipicamente entre 0.40 y 0.80 (60% por defecto)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="costoOperador">Costo Operador (por hora)</Label>
|
||||
<Input
|
||||
id="costoOperador"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
{...register("costoOperador", { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="consumoCombustible">Consumo Combustible (Lt/hr)</Label>
|
||||
<Input
|
||||
id="consumoCombustible"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
{...register("consumoCombustible", { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="precioCombustible">Precio Combustible ($/Lt)</Label>
|
||||
<Input
|
||||
id="precioCombustible"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
{...register("precioCombustible", { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Resumen de Costo Horario</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg bg-slate-50 p-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between border-b pb-2">
|
||||
<span className="text-slate-600">Depreciacion:</span>
|
||||
<span className="font-mono">
|
||||
${costoBreakdown.depreciacion.toFixed(2)}/hr
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between border-b pb-2">
|
||||
<span className="text-slate-600">Mantenimiento:</span>
|
||||
<span className="font-mono">
|
||||
${costoBreakdown.mantenimiento.toFixed(2)}/hr
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between border-b pb-2">
|
||||
<span className="text-slate-600">Combustible:</span>
|
||||
<span className="font-mono">
|
||||
${costoBreakdown.combustible.toFixed(2)}/hr
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between border-b pb-2">
|
||||
<span className="text-slate-600">Operador:</span>
|
||||
<span className="font-mono">
|
||||
${costoBreakdown.operador.toFixed(2)}/hr
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between pt-2">
|
||||
<span className="font-semibold">Costo Horario Total:</span>
|
||||
<span className="font-mono text-lg font-bold text-green-600">
|
||||
${calculatedCostoHorario.toFixed(2)}/hr
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => router.back()}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{isEditing ? "Guardar Cambios" : "Crear Equipo"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user