463 lines
15 KiB
TypeScript
463 lines
15 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import { useForm, Controller } from 'react-hook-form';
|
||
|
|
import {
|
||
|
|
Modal,
|
||
|
|
Button,
|
||
|
|
Input,
|
||
|
|
Textarea,
|
||
|
|
Select,
|
||
|
|
Badge,
|
||
|
|
Card
|
||
|
|
} from '../../ui';
|
||
|
|
import {
|
||
|
|
QualityCheckType,
|
||
|
|
ProcessStage,
|
||
|
|
type QualityCheckTemplate,
|
||
|
|
type QualityCheckTemplateUpdate
|
||
|
|
} from '../../../api/types/qualityTemplates';
|
||
|
|
|
||
|
|
interface EditQualityTemplateModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
template: QualityCheckTemplate;
|
||
|
|
onUpdateTemplate: (templateData: QualityCheckTemplateUpdate) => Promise<void>;
|
||
|
|
isLoading?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const QUALITY_CHECK_TYPE_OPTIONS = [
|
||
|
|
{ value: QualityCheckType.VISUAL, label: 'Visual - Inspección visual' },
|
||
|
|
{ value: QualityCheckType.MEASUREMENT, label: 'Medición - Medidas precisas' },
|
||
|
|
{ value: QualityCheckType.TEMPERATURE, label: 'Temperatura - Control térmico' },
|
||
|
|
{ value: QualityCheckType.WEIGHT, label: 'Peso - Control de peso' },
|
||
|
|
{ value: QualityCheckType.BOOLEAN, label: 'Sí/No - Verificación binaria' },
|
||
|
|
{ value: QualityCheckType.TIMING, label: 'Tiempo - Control temporal' }
|
||
|
|
];
|
||
|
|
|
||
|
|
const PROCESS_STAGE_OPTIONS = [
|
||
|
|
{ value: ProcessStage.MIXING, label: 'Mezclado' },
|
||
|
|
{ value: ProcessStage.PROOFING, label: 'Fermentación' },
|
||
|
|
{ value: ProcessStage.SHAPING, label: 'Formado' },
|
||
|
|
{ value: ProcessStage.BAKING, label: 'Horneado' },
|
||
|
|
{ value: ProcessStage.COOLING, label: 'Enfriado' },
|
||
|
|
{ value: ProcessStage.PACKAGING, label: 'Empaquetado' },
|
||
|
|
{ value: ProcessStage.FINISHING, label: 'Acabado' }
|
||
|
|
];
|
||
|
|
|
||
|
|
const CATEGORY_OPTIONS = [
|
||
|
|
{ value: 'appearance', label: 'Apariencia' },
|
||
|
|
{ value: 'structure', label: 'Estructura' },
|
||
|
|
{ value: 'texture', label: 'Textura' },
|
||
|
|
{ value: 'flavor', label: 'Sabor' },
|
||
|
|
{ value: 'safety', label: 'Seguridad' },
|
||
|
|
{ value: 'packaging', label: 'Empaque' },
|
||
|
|
{ value: 'temperature', label: 'Temperatura' },
|
||
|
|
{ value: 'weight', label: 'Peso' },
|
||
|
|
{ value: 'dimensions', label: 'Dimensiones' }
|
||
|
|
];
|
||
|
|
|
||
|
|
export const EditQualityTemplateModal: React.FC<EditQualityTemplateModalProps> = ({
|
||
|
|
isOpen,
|
||
|
|
onClose,
|
||
|
|
template,
|
||
|
|
onUpdateTemplate,
|
||
|
|
isLoading = false
|
||
|
|
}) => {
|
||
|
|
const [selectedStages, setSelectedStages] = useState<ProcessStage[]>(
|
||
|
|
template.applicable_stages || []
|
||
|
|
);
|
||
|
|
|
||
|
|
const {
|
||
|
|
register,
|
||
|
|
control,
|
||
|
|
handleSubmit,
|
||
|
|
watch,
|
||
|
|
reset,
|
||
|
|
formState: { errors, isDirty }
|
||
|
|
} = useForm<QualityCheckTemplateUpdate>({
|
||
|
|
defaultValues: {
|
||
|
|
name: template.name,
|
||
|
|
template_code: template.template_code || '',
|
||
|
|
check_type: template.check_type,
|
||
|
|
category: template.category || '',
|
||
|
|
description: template.description || '',
|
||
|
|
instructions: template.instructions || '',
|
||
|
|
is_active: template.is_active,
|
||
|
|
is_required: template.is_required,
|
||
|
|
is_critical: template.is_critical,
|
||
|
|
weight: template.weight,
|
||
|
|
min_value: template.min_value,
|
||
|
|
max_value: template.max_value,
|
||
|
|
target_value: template.target_value,
|
||
|
|
unit: template.unit || '',
|
||
|
|
tolerance_percentage: template.tolerance_percentage
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const checkType = watch('check_type');
|
||
|
|
const showMeasurementFields = [
|
||
|
|
QualityCheckType.MEASUREMENT,
|
||
|
|
QualityCheckType.TEMPERATURE,
|
||
|
|
QualityCheckType.WEIGHT
|
||
|
|
].includes(checkType || template.check_type);
|
||
|
|
|
||
|
|
// Update form when template changes
|
||
|
|
useEffect(() => {
|
||
|
|
if (template) {
|
||
|
|
reset({
|
||
|
|
name: template.name,
|
||
|
|
template_code: template.template_code || '',
|
||
|
|
check_type: template.check_type,
|
||
|
|
category: template.category || '',
|
||
|
|
description: template.description || '',
|
||
|
|
instructions: template.instructions || '',
|
||
|
|
is_active: template.is_active,
|
||
|
|
is_required: template.is_required,
|
||
|
|
is_critical: template.is_critical,
|
||
|
|
weight: template.weight,
|
||
|
|
min_value: template.min_value,
|
||
|
|
max_value: template.max_value,
|
||
|
|
target_value: template.target_value,
|
||
|
|
unit: template.unit || '',
|
||
|
|
tolerance_percentage: template.tolerance_percentage
|
||
|
|
});
|
||
|
|
setSelectedStages(template.applicable_stages || []);
|
||
|
|
}
|
||
|
|
}, [template, reset]);
|
||
|
|
|
||
|
|
const handleStageToggle = (stage: ProcessStage) => {
|
||
|
|
const newStages = selectedStages.includes(stage)
|
||
|
|
? selectedStages.filter(s => s !== stage)
|
||
|
|
: [...selectedStages, stage];
|
||
|
|
|
||
|
|
setSelectedStages(newStages);
|
||
|
|
};
|
||
|
|
|
||
|
|
const onSubmit = async (data: QualityCheckTemplateUpdate) => {
|
||
|
|
try {
|
||
|
|
// Only include changed fields
|
||
|
|
const updates: QualityCheckTemplateUpdate = {};
|
||
|
|
|
||
|
|
Object.entries(data).forEach(([key, value]) => {
|
||
|
|
const originalValue = (template as any)[key];
|
||
|
|
if (value !== originalValue) {
|
||
|
|
(updates as any)[key] = value;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Handle applicable stages
|
||
|
|
const stagesChanged = JSON.stringify(selectedStages.sort()) !==
|
||
|
|
JSON.stringify((template.applicable_stages || []).sort());
|
||
|
|
|
||
|
|
if (stagesChanged) {
|
||
|
|
updates.applicable_stages = selectedStages.length > 0 ? selectedStages : undefined;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Only submit if there are actual changes
|
||
|
|
if (Object.keys(updates).length > 0) {
|
||
|
|
await onUpdateTemplate(updates);
|
||
|
|
} else {
|
||
|
|
onClose();
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error updating template:', error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleClose = () => {
|
||
|
|
reset();
|
||
|
|
setSelectedStages(template.applicable_stages || []);
|
||
|
|
onClose();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Modal
|
||
|
|
isOpen={isOpen}
|
||
|
|
onClose={handleClose}
|
||
|
|
title={`Editar Plantilla: ${template.name}`}
|
||
|
|
size="xl"
|
||
|
|
>
|
||
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||
|
|
{/* Basic Information */}
|
||
|
|
<Card className="p-4">
|
||
|
|
<h4 className="font-medium text-[var(--text-primary)] mb-4">
|
||
|
|
Información Básica
|
||
|
|
</h4>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
|
||
|
|
Nombre *
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
{...register('name', { required: 'El nombre es requerido' })}
|
||
|
|
placeholder="Ej: Control Visual de Pan"
|
||
|
|
error={errors.name?.message}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
|
||
|
|
Código de Plantilla
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
{...register('template_code')}
|
||
|
|
placeholder="Ej: CV_PAN_01"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
|
||
|
|
Tipo de Control *
|
||
|
|
</label>
|
||
|
|
<Controller
|
||
|
|
name="check_type"
|
||
|
|
control={control}
|
||
|
|
render={({ field }) => (
|
||
|
|
<Select {...field} options={QUALITY_CHECK_TYPE_OPTIONS.map(opt => ({ value: opt.value, label: opt.label }))}>
|
||
|
|
{QUALITY_CHECK_TYPE_OPTIONS.map(option => (
|
||
|
|
<option key={option.value} value={option.value}>
|
||
|
|
{option.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
|
||
|
|
Categoría
|
||
|
|
</label>
|
||
|
|
<Controller
|
||
|
|
name="category"
|
||
|
|
control={control}
|
||
|
|
render={({ field }) => (
|
||
|
|
<Select {...field} options={[{ value: '', label: 'Seleccionar categoría' }, ...CATEGORY_OPTIONS]}>
|
||
|
|
<option value="">Seleccionar categoría</option>
|
||
|
|
{CATEGORY_OPTIONS.map(option => (
|
||
|
|
<option key={option.value} value={option.value}>
|
||
|
|
{option.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-4">
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
|
||
|
|
Descripción
|
||
|
|
</label>
|
||
|
|
<Textarea
|
||
|
|
{...register('description')}
|
||
|
|
placeholder="Describe qué evalúa esta plantilla de calidad"
|
||
|
|
rows={2}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-4">
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
|
||
|
|
Instrucciones para el Personal
|
||
|
|
</label>
|
||
|
|
<Textarea
|
||
|
|
{...register('instructions')}
|
||
|
|
placeholder="Instrucciones detalladas para realizar este control de calidad"
|
||
|
|
rows={3}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Measurement Configuration */}
|
||
|
|
{showMeasurementFields && (
|
||
|
|
<Card className="p-4">
|
||
|
|
<h4 className="font-medium text-[var(--text-primary)] mb-4">
|
||
|
|
Configuración de Medición
|
||
|
|
</h4>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
|
||
|
|
Valor Mínimo
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
step="0.01"
|
||
|
|
{...register('min_value', { valueAsNumber: true })}
|
||
|
|
placeholder="0"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
|
||
|
|
Valor Máximo
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
step="0.01"
|
||
|
|
{...register('max_value', { valueAsNumber: true })}
|
||
|
|
placeholder="100"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
|
||
|
|
Valor Objetivo
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
step="0.01"
|
||
|
|
{...register('target_value', { valueAsNumber: true })}
|
||
|
|
placeholder="50"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
|
||
|
|
Unidad
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
{...register('unit')}
|
||
|
|
placeholder={
|
||
|
|
checkType === QualityCheckType.TEMPERATURE ? '°C' :
|
||
|
|
checkType === QualityCheckType.WEIGHT ? 'g' : 'unidad'
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-4">
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
|
||
|
|
Tolerancia (%)
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
step="0.1"
|
||
|
|
{...register('tolerance_percentage', { valueAsNumber: true })}
|
||
|
|
placeholder="5"
|
||
|
|
className="w-32"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Process Stages */}
|
||
|
|
<Card className="p-4">
|
||
|
|
<h4 className="font-medium text-[var(--text-primary)] mb-4">
|
||
|
|
Etapas del Proceso Aplicables
|
||
|
|
</h4>
|
||
|
|
<p className="text-sm text-[var(--text-secondary)] mb-4">
|
||
|
|
Selecciona las etapas donde se debe aplicar este control. Si no seleccionas ninguna, se aplicará a todas las etapas.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||
|
|
{PROCESS_STAGE_OPTIONS.map(stage => (
|
||
|
|
<label
|
||
|
|
key={stage.value}
|
||
|
|
className="flex items-center space-x-2 p-2 border rounded cursor-pointer hover:bg-[var(--bg-secondary)]"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={selectedStages.includes(stage.value)}
|
||
|
|
onChange={() => handleStageToggle(stage.value)}
|
||
|
|
className="rounded border-[var(--border-primary)]"
|
||
|
|
/>
|
||
|
|
<span className="text-sm">{stage.label}</span>
|
||
|
|
</label>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Settings */}
|
||
|
|
<Card className="p-4">
|
||
|
|
<h4 className="font-medium text-[var(--text-primary)] mb-4">
|
||
|
|
Configuración
|
||
|
|
</h4>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
|
||
|
|
Peso en Puntuación General
|
||
|
|
</label>
|
||
|
|
<Input
|
||
|
|
type="number"
|
||
|
|
step="0.1"
|
||
|
|
min="0"
|
||
|
|
max="10"
|
||
|
|
{...register('weight', { valueAsNumber: true })}
|
||
|
|
placeholder="1.0"
|
||
|
|
/>
|
||
|
|
<p className="text-xs text-[var(--text-tertiary)] mt-1">
|
||
|
|
Mayor peso = mayor importancia en la puntuación final
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-4">
|
||
|
|
<label className="flex items-center space-x-2">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
{...register('is_active')}
|
||
|
|
className="rounded border-[var(--border-primary)]"
|
||
|
|
/>
|
||
|
|
<span className="text-sm">Plantilla activa</span>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label className="flex items-center space-x-2">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
{...register('is_required')}
|
||
|
|
className="rounded border-[var(--border-primary)]"
|
||
|
|
/>
|
||
|
|
<span className="text-sm">Control requerido</span>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label className="flex items-center space-x-2">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
{...register('is_critical')}
|
||
|
|
className="rounded border-[var(--border-primary)]"
|
||
|
|
/>
|
||
|
|
<span className="text-sm">Control crítico</span>
|
||
|
|
<Badge variant="error" size="sm">
|
||
|
|
Bloquea producción si falla
|
||
|
|
</Badge>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Template Info */}
|
||
|
|
<Card className="p-4 bg-[var(--bg-secondary)]">
|
||
|
|
<h4 className="font-medium text-[var(--text-primary)] mb-2">
|
||
|
|
Información de la Plantilla
|
||
|
|
</h4>
|
||
|
|
<div className="text-sm text-[var(--text-secondary)] space-y-1">
|
||
|
|
<p>ID: {template.id}</p>
|
||
|
|
<p>Creado: {new Date(template.created_at).toLocaleDateString('es-ES')}</p>
|
||
|
|
<p>Última actualización: {new Date(template.updated_at).toLocaleDateString('es-ES')}</p>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Actions */}
|
||
|
|
<div className="flex justify-end space-x-3 pt-4 border-t border-[var(--border-primary)]">
|
||
|
|
<Button
|
||
|
|
type="button"
|
||
|
|
variant="outline"
|
||
|
|
onClick={handleClose}
|
||
|
|
disabled={isLoading}
|
||
|
|
>
|
||
|
|
Cancelar
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
type="submit"
|
||
|
|
variant="primary"
|
||
|
|
disabled={!isDirty || isLoading}
|
||
|
|
isLoading={isLoading}
|
||
|
|
>
|
||
|
|
Guardar Cambios
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
};
|