From 9d007b6af33ad3fc37702ad2dc0d1314ef38c5a6 Mon Sep 17 00:00:00 2001
From: Galindo97 <agalindo2aduanasoft.com.mx>
Date: Thu, 8 Jan 2026 17:01:16 -0600
Subject: [PATCH] feat: implement create/edit dialog for class management with
 form validation and data loading

---
 .../classes/create-edit-dialog.svelte         | 520 ++++++++++++++++++
 1 file changed, 520 insertions(+)
 create mode 100644 frontend/src/lib/components/dashboard/classes/create-edit-dialog.svelte

diff --git a/frontend/src/lib/components/dashboard/classes/create-edit-dialog.svelte b/frontend/src/lib/components/dashboard/classes/create-edit-dialog.svelte
new file mode 100644
index 00000000..6f9572cd
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/classes/create-edit-dialog.svelte
@@ -0,0 +1,520 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Input } from "$lib/components/ui/input";
+	import { Label } from "$lib/components/ui/label";
+	import { Textarea } from "$lib/components/ui/textarea";
+	import * as Select from "$lib/components/ui/select";
+	import { classesApi, type A76Class, type A76ClassCreate, type A76ClassUpdate } from "$lib/api/dashboard/a76/classes";
+	import { materialTypesApi, type MaterialType } from "$lib/api/dashboard/refrence_data/material_types";
+	import { clientsProvidersApi, type ClientProvider } from "$lib/api/dashboard/a76/clients-providers";
+	import { companyStore } from "$lib/stores/company.svelte";
+	import { onMount } from 'svelte';
+
+	let {
+		open = $bindable(false),
+		item = null,
+		onSuccess
+	}: {
+		open: boolean;
+		item?: A76Class | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	// Determinar si es modo edición o creación
+	const isEdit = $derived(!!item);
+	const title = $derived(isEdit ? "Editar Clase" : "Nueva Clase");
+
+	// Estado del formulario
+	let formData = $state({
+		client_id: item?.client_id || null,
+		class_code: item?.class_code || '',
+		description_es: item?.description_es || '',
+		description_en: item?.description_en || '',
+		material_key: item?.material_key || '',
+		unit_of_measure: item?.unit_of_measure || 'KG',
+		fraction: item?.fraction || '',
+		us_fraction: item?.us_fraction || '',
+		sub_key: item?.sub_key || '',
+		physical_review: item?.physical_review || 0,
+		iva_exempt_fraction: item?.iva_exempt_fraction || ''
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+	let materialTypes = $state<MaterialType[]>([]);
+	let loadingMaterialTypes = $state(false);
+	let clients = $state<ClientProvider[]>([]);
+	let loadingClients = $state(false);
+	
+	// Variables para controlar los selects
+	let selectedUnitValue = $state<string>('KG');
+	let selectedMaterialValue = $state<string>('');
+	let selectedPhysicalReviewValue = $state<number>(0);
+
+	// Cargar tipos de materiales y clientes al montar
+	onMount(async () => {
+		const companyId = companyStore.activeCompany?.id;
+		if (!companyId) return;
+
+		// Cargar tipos de materiales
+		loadingMaterialTypes = true;
+		try {
+			const response = await materialTypesApi.list(1, 100);
+			if (response.data) {
+				materialTypes = response.data.items;
+			}
+		} catch (e) {
+			console.error('Error loading material types:', e);
+		} finally {
+			loadingMaterialTypes = false;
+		}
+
+		// Cargar clientes
+		loadingClients = true;
+		try {
+			const response = await clientsProvidersApi.list(companyId, 1, 500);
+			if (response.data) {
+				clients = response.data.items;
+			}
+		} catch (e) {
+			console.error('Error loading clients:', e);
+		} finally {
+			loadingClients = false;
+		}
+	});
+
+	// Resetear formulario cuando cambia el item
+	$effect(() => {
+		if (item) {
+			formData = {
+				client_id: item.client_id,
+				class_code: item.class_code,
+				description_es: item.description_es || '',
+				description_en: item.description_en || '',
+				material_key: item.material_key || '',
+				unit_of_measure: item.unit_of_measure,
+				fraction: item.fraction,
+				us_fraction: item.us_fraction,
+				sub_key: item.sub_key,
+				physical_review: item.physical_review,
+				iva_exempt_fraction: item.iva_exempt_fraction
+			};
+			// Actualizar valores de los selects
+			selectedUnitValue = item.unit_of_measure;
+			selectedMaterialValue = item.material_key || '';
+			selectedPhysicalReviewValue = item.physical_review;
+		} else {
+			// Reset para modo crear
+			formData = {
+				client_id: null,
+				class_code: '',
+				description_es: '',
+				description_en: '',
+				material_key: '',
+				unit_of_measure: 'KG',
+				fraction: '',
+				us_fraction: '',
+				sub_key: '',
+				physical_review: 0,
+				iva_exempt_fraction: ''
+			};
+			// Resetear valores de los selects
+			selectedUnitValue = 'KG';
+			selectedMaterialValue = '';
+			selectedPhysicalReviewValue = 0;
+		}
+		error = null;
+	});
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+		if (!newOpen) {
+			error = null;
+		}
+	}
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		
+		const companyId = companyStore.activeCompany?.id;
+		if (!companyId) {
+			error = 'No hay compañía seleccionada';
+			return;
+		}
+
+		// Validaciones básicas
+		if (!formData.client_id) {
+			error = 'Debes seleccionar un cliente';
+			return;
+		}
+		if (!formData.class_code.trim()) {
+			error = 'El código de clase es requerido';
+			return;
+		}
+		if (!formData.fraction.trim()) {
+			error = 'La fracción es requerida';
+			return;
+		}
+		if (!formData.us_fraction.trim()) {
+			error = 'La fracción US es requerida';
+			return;
+		}
+		if (!formData.sub_key.trim()) {
+			error = 'La subclave es requerida';
+			return;
+		}
+		if (!formData.iva_exempt_fraction.trim()) {
+			error = 'La fracción exenta de IVA es requerida';
+			return;
+		}
+
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+
+			if (isEdit && item) {
+				// Actualizar
+				const updateData: A76ClassUpdate = {
+					client_id: formData.client_id!,
+					class_code: formData.class_code,
+					description_es: formData.description_es || null,
+					description_en: formData.description_en || null,
+					material_key: formData.material_key || null,
+					unit_of_measure: formData.unit_of_measure,
+					fraction: formData.fraction,
+					us_fraction: formData.us_fraction,
+					sub_key: formData.sub_key,
+					physical_review: formData.physical_review,
+					iva_exempt_fraction: formData.iva_exempt_fraction
+				};
+				response = await classesApi.update(item.id, updateData, companyId);
+			} else {
+				// Crear con el client_id seleccionado
+				const createData: A76ClassCreate = {
+					company_id: companyId,
+					client_id: formData.client_id!,
+					class_code: formData.class_code,
+					description_es: formData.description_es || null,
+					description_en: formData.description_en || null,
+					material_key: formData.material_key || null,
+					unit_of_measure: formData.unit_of_measure,
+					fraction: formData.fraction,
+					us_fraction: formData.us_fraction,
+					sub_key: formData.sub_key,
+					physical_review: formData.physical_review,
+					iva_exempt_fraction: formData.iva_exempt_fraction
+				};
+				response = await classesApi.create(createData, companyId);
+			}
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Error al guardar';
+			console.error('Error saving class:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	// Opciones de unidades de medida (puedes expandir esto)
+	const unitOptions = [
+		{ value: 'KG', label: 'Kilogramos (KG)' },
+		{ value: 'LB', label: 'Libras (LB)' },
+		{ value: 'MT', label: 'Metros (MT)' },
+		{ value: 'PZ', label: 'Piezas (PZ)' },
+		{ value: 'LT', label: 'Litros (LT)' },
+		{ value: 'M3', label: 'Metros Cúbicos (M3)' },
+		{ value: 'TON', label: 'Toneladas (TON)' }
+	];
+
+	// Funciones para obtener valores seleccionados
+	function getSelectedMaterialType() {
+		if (!formData.material_key) return null;
+		const found = materialTypes.find(mt => mt.key === formData.material_key);
+		return found ? { value: found.key, label: `${found.key} - ${found.description}` } : null;
+	}
+
+	function getSelectedUnit() {
+		return unitOptions.find(opt => opt.value === formData.unit_of_measure) || unitOptions[0];
+	}
+
+	function getSelectedPhysicalReview() {
+		return { value: formData.physical_review, label: formData.physical_review === 1 ? 'Sí' : 'No' };
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
+		<Dialog.Header>
+			<Dialog.Title>{title}</Dialog.Title>
+			<Dialog.Description>
+				{isEdit ? 'Modifica los datos de la clase' : 'Completa los datos para crear una nueva clase'}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<form onsubmit={handleSubmit} class="space-y-4 py-4">
+			<!-- Error Message -->
+			{#if error}
+				<div class="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+					{error}
+				</div>
+			{/if}
+
+			<!-- Información de la compañía (solo lectura) -->
+			{#if companyStore.activeCompany}
+				<div class="rounded-md bg-blue-50 border border-blue-200 p-3">
+					<div class="flex items-center gap-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="text-blue-600"
+						>
+							<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+							<polyline points="9 22 9 12 15 12 15 22" />
+						</svg>
+						<div>
+							<p class="text-sm font-medium text-blue-900">
+								{companyStore.activeCompany.name}
+							</p>
+							<p class="text-xs text-blue-600">
+								ID: {companyStore.activeCompany.id}
+							</p>
+						</div>
+					</div>
+				</div>
+			{/if}
+
+			<!-- Cliente -->
+			<div class="space-y-2">
+				<Label for="client_id" class="required">Cliente</Label>
+				{#if loadingClients}
+					<div class="flex items-center gap-2 text-sm text-muted-foreground">
+						<div class="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
+						Cargando clientes...
+					</div>
+				{:else if clients.length > 0}
+					<select 
+						bind:value={formData.client_id}
+						disabled={loading}
+						class="border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+					>
+						<option value="">Selecciona un cliente</option>
+						{#each clients as client}
+							<option value={client.id}>
+								{client.name} ({client.rfc})
+							</option>
+						{/each}
+					</select>
+				{:else}
+					<div class="text-sm text-muted-foreground">
+						No hay clientes disponibles
+					</div>
+				{/if}
+			</div>
+
+			<!-- Código de Clase -->
+			<div class="space-y-2">
+				<Label for="class_code" class="required">Código de Clase</Label>
+				<Input
+					id="class_code"
+					bind:value={formData.class_code}
+					placeholder="Ej: A76"
+					required
+					disabled={loading}
+				/>
+			</div>
+
+			<!-- Descripciones -->
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div class="space-y-2">
+					<Label for="description_es">Descripción (Español)</Label>
+					<Textarea
+						id="description_es"
+						bind:value={formData.description_es}
+						placeholder="Descripción en español"
+						disabled={loading}
+						rows={3}
+					/>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="description_en">Descripción (Inglés)</Label>
+					<Textarea
+						id="description_en"
+						bind:value={formData.description_en}
+						placeholder="English description"
+						disabled={loading}
+						rows={3}
+					/>
+				</div>
+			</div>
+
+			<!-- Material Type -->
+			<div class="space-y-2">
+				<Label for="material_key">Tipo de Material</Label>
+				{#if loadingMaterialTypes}
+					<div class="flex items-center gap-2 text-sm text-muted-foreground">
+						<div class="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
+						Cargando tipos de material...
+					</div>
+				{:else if materialTypes.length > 0}
+					<select 
+						bind:value={formData.material_key}
+						disabled={loading}
+						class="border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+					>
+						<option value="">Sin tipo de material</option>
+						{#each materialTypes as materialType}
+							<option value={materialType.key}>
+								{materialType.key} - {materialType.description}
+							</option>
+						{/each}
+					</select>
+				{:else}
+					<Input
+						id="material_key"
+						bind:value={formData.material_key}
+						placeholder="No hay tipos de material disponibles"
+						disabled={true}
+					/>
+				{/if}
+			</div>
+
+			<!-- Fracciones -->
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div class="space-y-2">
+					<Label for="fraction" class="required">Fracción</Label>
+					<Input
+						id="fraction"
+						bind:value={formData.fraction}
+						placeholder="Ej: 123123"
+						required
+						disabled={loading}
+					/>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="us_fraction" class="required">Fracción US</Label>
+					<Input
+						id="us_fraction"
+						bind:value={formData.us_fraction}
+						placeholder="Ej: 123123"
+						required
+						disabled={loading}
+					/>
+				</div>
+			</div>
+
+			<!-- Sub Key e IVA Exempt -->
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div class="space-y-2">
+					<Label for="sub_key" class="required">Subclave</Label>
+					<Input
+						id="sub_key"
+						bind:value={formData.sub_key}
+						placeholder="Ej: 123"
+						required
+						disabled={loading}
+					/>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="iva_exempt_fraction" class="required">Fracción Exenta IVA</Label>
+					<Input
+						id="iva_exempt_fraction"
+						bind:value={formData.iva_exempt_fraction}
+						placeholder="Ej: 123"
+						required
+						disabled={loading}
+					/>
+				</div>
+			</div>
+
+			<!-- Unidad de Medida -->
+			<div class="space-y-2">
+				<Label for="unit_of_measure" class="required">Unidad de Medida</Label>
+				<select 
+					bind:value={formData.unit_of_measure}
+					disabled={loading}
+					class="border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+				>
+					{#each unitOptions as unit}
+						<option value={unit.value}>{unit.label}</option>
+					{/each}
+				</select>
+			</div>
+
+			<!-- Revisión Física -->
+			<div class="space-y-2">
+				<Label for="physical_review">Revisión Física</Label>
+				<select 
+					bind:value={formData.physical_review}
+					disabled={loading}
+					class="border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+				>
+					<option value={0}>No</option>
+					<option value={1}>Sí</option>
+				</select>
+			</div>
+
+			<Dialog.Footer>
+				<Button type="button" variant="outline" onclick={() => (open = false)} disabled={loading}>
+					Cancelar
+				</Button>
+				<Button type="submit" disabled={loading}>
+					{#if loading}
+						<svg
+							class="mr-2 h-4 w-4 animate-spin"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"
+							></circle>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+						Guardando...
+					{:else}
+						{isEdit ? 'Actualizar' : 'Crear'}
+					{/if}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>
+
+<style>
+	:global(.required::after) {
+		content: " *";
+		color: hsl(var(--destructive));
+	}
+</style>