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
317
src/components/apu/mano-obra-form.tsx
Normal file
317
src/components/apu/mano-obra-form.tsx
Normal file
@@ -0,0 +1,317 @@
|
||||
"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 {
|
||||
categoriaManoObraSchema,
|
||||
calcularFSR,
|
||||
type CategoriaManoObraInput,
|
||||
} from "@/lib/validations/apu";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { CATEGORIA_MANO_OBRA_LABELS } from "@/types";
|
||||
import { CategoriaManoObra } from "@prisma/client";
|
||||
|
||||
interface ManoObraFormProps {
|
||||
categoria?: {
|
||||
id: string;
|
||||
codigo: string;
|
||||
nombre: string;
|
||||
categoria: CategoriaManoObra;
|
||||
salarioDiario: number;
|
||||
factorIMSS: number;
|
||||
factorINFONAVIT: number;
|
||||
factorRetiro: number;
|
||||
factorVacaciones: number;
|
||||
factorPrimaVac: number;
|
||||
factorAguinaldo: number;
|
||||
factorSalarioReal: number;
|
||||
salarioReal: number;
|
||||
};
|
||||
}
|
||||
|
||||
export function ManoObraForm({ categoria }: ManoObraFormProps) {
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const isEditing = !!categoria;
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
watch,
|
||||
} = useForm<CategoriaManoObraInput>({
|
||||
resolver: zodResolver(categoriaManoObraSchema),
|
||||
defaultValues: {
|
||||
codigo: categoria?.codigo || "",
|
||||
nombre: categoria?.nombre || "",
|
||||
categoria: categoria?.categoria || "PEON",
|
||||
salarioDiario: categoria?.salarioDiario || 0,
|
||||
factorIMSS: categoria?.factorIMSS || 0.2675,
|
||||
factorINFONAVIT: categoria?.factorINFONAVIT || 0.05,
|
||||
factorRetiro: categoria?.factorRetiro || 0.02,
|
||||
factorVacaciones: categoria?.factorVacaciones || 0.0411,
|
||||
factorPrimaVac: categoria?.factorPrimaVac || 0.0103,
|
||||
factorAguinaldo: categoria?.factorAguinaldo || 0.0411,
|
||||
},
|
||||
});
|
||||
|
||||
const watchedValues = watch();
|
||||
|
||||
// Calculate FSR and salario real in real-time
|
||||
const calculatedValues = useMemo(() => {
|
||||
const fsr = calcularFSR({
|
||||
factorIMSS: watchedValues.factorIMSS || 0,
|
||||
factorINFONAVIT: watchedValues.factorINFONAVIT || 0,
|
||||
factorRetiro: watchedValues.factorRetiro || 0,
|
||||
factorVacaciones: watchedValues.factorVacaciones || 0,
|
||||
factorPrimaVac: watchedValues.factorPrimaVac || 0,
|
||||
factorAguinaldo: watchedValues.factorAguinaldo || 0,
|
||||
});
|
||||
const salarioReal = (watchedValues.salarioDiario || 0) * fsr;
|
||||
return { fsr, salarioReal };
|
||||
}, [watchedValues]);
|
||||
|
||||
const onSubmit = async (data: CategoriaManoObraInput) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const url = isEditing
|
||||
? `/api/apu/mano-obra/${categoria.id}`
|
||||
: "/api/apu/mano-obra";
|
||||
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 ? "Categoria actualizada" : "Categoria creada",
|
||||
description: isEditing
|
||||
? "Los cambios han sido guardados"
|
||||
: "La categoria de mano de obra ha sido creada exitosamente",
|
||||
});
|
||||
|
||||
router.push("/apu/mano-obra");
|
||||
router.refresh();
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: error instanceof Error ? error.message : "No se pudo guardar la categoria",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Informacion General</CardTitle>
|
||||
<CardDescription>
|
||||
Datos basicos de la categoria de mano de obra
|
||||
</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: MO-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: Peon de obra"
|
||||
{...register("nombre")}
|
||||
/>
|
||||
{errors.nombre && (
|
||||
<p className="text-sm text-red-600">{errors.nombre.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>Categoria *</Label>
|
||||
<Select
|
||||
value={watchedValues.categoria}
|
||||
onValueChange={(value) =>
|
||||
setValue("categoria", value as CategoriaManoObra)
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Seleccionar categoria" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{Object.entries(CATEGORIA_MANO_OBRA_LABELS).map(
|
||||
([value, label]) => (
|
||||
<SelectItem key={value} value={value}>
|
||||
{label}
|
||||
</SelectItem>
|
||||
)
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="salarioDiario">Salario Diario *</Label>
|
||||
<Input
|
||||
id="salarioDiario"
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
{...register("salarioDiario", { valueAsNumber: true })}
|
||||
/>
|
||||
{errors.salarioDiario && (
|
||||
<p className="text-sm text-red-600">
|
||||
{errors.salarioDiario.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Factor de Salario Real (FSR)</CardTitle>
|
||||
<CardDescription>
|
||||
Factores para calcular el salario real incluyendo prestaciones
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="factorIMSS">IMSS</Label>
|
||||
<Input
|
||||
id="factorIMSS"
|
||||
type="number"
|
||||
step="0.0001"
|
||||
{...register("factorIMSS", { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="factorINFONAVIT">INFONAVIT</Label>
|
||||
<Input
|
||||
id="factorINFONAVIT"
|
||||
type="number"
|
||||
step="0.0001"
|
||||
{...register("factorINFONAVIT", { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="factorRetiro">Retiro (SAR)</Label>
|
||||
<Input
|
||||
id="factorRetiro"
|
||||
type="number"
|
||||
step="0.0001"
|
||||
{...register("factorRetiro", { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="factorVacaciones">Vacaciones</Label>
|
||||
<Input
|
||||
id="factorVacaciones"
|
||||
type="number"
|
||||
step="0.0001"
|
||||
{...register("factorVacaciones", { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="factorPrimaVac">Prima Vacacional</Label>
|
||||
<Input
|
||||
id="factorPrimaVac"
|
||||
type="number"
|
||||
step="0.0001"
|
||||
{...register("factorPrimaVac", { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="factorAguinaldo">Aguinaldo</Label>
|
||||
<Input
|
||||
id="factorAguinaldo"
|
||||
type="number"
|
||||
step="0.0001"
|
||||
{...register("factorAguinaldo", { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-lg bg-slate-50 p-4">
|
||||
<h4 className="mb-3 font-semibold">Resumen de Calculo</h4>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="flex justify-between border-b pb-2">
|
||||
<span className="text-slate-600">Factor de Salario Real:</span>
|
||||
<span className="font-mono font-semibold">
|
||||
{calculatedValues.fsr.toFixed(4)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between border-b pb-2">
|
||||
<span className="text-slate-600">Salario Real Diario:</span>
|
||||
<span className="font-mono font-semibold text-green-600">
|
||||
${calculatedValues.salarioReal.toFixed(2)}
|
||||
</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 Categoria"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user