Se integro el modulo parcial de clases en mercancias
This commit is contained in:
@@ -166,6 +166,7 @@ export function createColumns(onSuccess?: () => void): ColumnDef<A76Class>[] {
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: "Acciones",
|
||||
cell: ({ row }) => {
|
||||
return renderComponent(DataTableActions, { item: row.original, onSuccess });
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
import { companyStore } from "$lib/stores/company.svelte";
|
||||
import { EllipsisVertical, Pencil, LoaderCircle, Trash2 } from 'lucide-svelte';
|
||||
import CreateEditDialog from "./create-edit-dialog.svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
let {
|
||||
item,
|
||||
@@ -88,7 +89,7 @@
|
||||
<DropdownMenu.Content align="end" class="w-[160px]">
|
||||
<DropdownMenu.Label>Acciones</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item onclick={handleEdit}>
|
||||
<DropdownMenu.Item onclick={() => { goto(`/dashboard/goods/classes/edit/${item.id}`); }} >
|
||||
<Pencil size={16} class="mr-2" />
|
||||
Editar
|
||||
</DropdownMenu.Item>
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
Users,
|
||||
} from 'lucide-svelte';
|
||||
import * as m from "$lib/paraglide/messages.js";
|
||||
import { Title } from '../ui/alert';
|
||||
|
||||
export interface NavItem {
|
||||
title: string;
|
||||
@@ -285,6 +286,21 @@ export function getSidebarData(): SidebarData {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: m["sidebar.goods.title"](),
|
||||
url: "#",
|
||||
icon: Package,
|
||||
items: [
|
||||
{
|
||||
title: m["sidebar.goods.classes"](),
|
||||
url: "/dashboard/goods/classes",
|
||||
},
|
||||
{
|
||||
title: m["sidebar.goods.parts"](),
|
||||
url: "/dashboard/goods/parts",
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
title: m["sidebar.pedimentos.title"](),
|
||||
url: "#",
|
||||
|
||||
63
frontend/src/routes/dashboard/goods/classes/+page.server.ts
Normal file
63
frontend/src/routes/dashboard/goods/classes/+page.server.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { getAuthTokens, authenticatedFetch } from '$lib/server/api';
|
||||
|
||||
export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
|
||||
await parent();
|
||||
const { accessToken } = getAuthTokens(cookies);
|
||||
|
||||
if (!accessToken) {
|
||||
// Cambiamos el objeto de retorno vacío a "classes"
|
||||
return { error: 'No authenticated', classes: { items: [], total: 0, page: 1, page_size: 50, pages: 0 } };
|
||||
}
|
||||
|
||||
try {
|
||||
const page = Number(url.searchParams.get('page')) || 1;
|
||||
const pageSize = Number(url.searchParams.get('pageSize')) || 50;
|
||||
|
||||
// --- ZONA DE CAMBIOS DE FILTROS ---
|
||||
const filters: Record<string, string> = {};
|
||||
|
||||
// En tu modelo el campo se llama "class_code", así que buscamos eso o 'code'
|
||||
const classCode = url.searchParams.get('class_code') || url.searchParams.get('code');
|
||||
const description = url.searchParams.get('description'); // Este sirve para description_es o description_en
|
||||
|
||||
if (classCode) filters.class_code = classCode; // Ajustado al modelo
|
||||
if (description) filters.description = description;
|
||||
// ----------------------------------
|
||||
|
||||
const parentData = await parent();
|
||||
const cookieCompanyId = cookies.get('active_company_id');
|
||||
const companyId = cookieCompanyId
|
||||
? parseInt(cookieCompanyId)
|
||||
: parentData.companies?.[0]?.id;
|
||||
|
||||
if (!companyId) {
|
||||
return {
|
||||
error: 'No se encontró una compañía seleccionada',
|
||||
classes: { items: [], total: 0, page: 1, page_size: 50, pages: 0 }
|
||||
};
|
||||
}
|
||||
|
||||
const queryParams = new URLSearchParams({
|
||||
company_id: companyId.toString(),
|
||||
page: page.toString(),
|
||||
page_size: pageSize.toString(),
|
||||
...filters
|
||||
});
|
||||
|
||||
// --- ZONA DE CAMBIO DE ENDPOINT ---
|
||||
// Asumiendo que tu endpoint sigue el estándar REST y se llama 'classes'
|
||||
const response = await authenticatedFetch(`v1/a76/classes?${queryParams.toString()}`, { method: 'GET' }, cookies, fetch);
|
||||
|
||||
if (!response.ok) {
|
||||
return { error: 'Failed to load', classes: { items: [], total: 0, page, page_size: pageSize, pages: 0 } };
|
||||
}
|
||||
|
||||
// Retornamos "classes" para que coincida con lo que espera tu frontend
|
||||
return { classes: await response.json() };
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading classes:', error);
|
||||
return { error: 'Error loading', classes: { items: [], total: 0, page: 1, page_size: 50, pages: 0 } };
|
||||
}
|
||||
};
|
||||
239
frontend/src/routes/dashboard/goods/classes/+page.svelte
Normal file
239
frontend/src/routes/dashboard/goods/classes/+page.svelte
Normal file
@@ -0,0 +1,239 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
// import { classesApi } from '$lib/api/dashboard/a76/classes'; // <--- TODO: Descomentar cuando crees el archivo API
|
||||
import DataTable from '$lib/components/dashboard/classes/data-table.svelte';
|
||||
import { createColumns } from '$lib/components/dashboard/classes/columns.js';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import type { PageData } from './$types';
|
||||
import { browser } from '$app/environment';
|
||||
import { companyStore } from '$lib/stores/company.svelte';
|
||||
import { Plus, Search, Trash2 } from 'lucide-svelte';
|
||||
|
||||
// 1. Recibimos la data del servidor (+page.server.ts)
|
||||
let { data }: { data: PageData } = $props();
|
||||
|
||||
// 2. Ajustamos el estado para Clases
|
||||
let classesList = $state(data.classes?.items || []);
|
||||
let listLoading = $state(false);
|
||||
let listError = $state<string | null>(data.error || null);
|
||||
|
||||
// Estado para búsqueda
|
||||
let searchCode = $state('');
|
||||
let searchedClass = $state<any | null>(null);
|
||||
let searchLoading = $state(false);
|
||||
let searchError = $state<string | null>(null);
|
||||
|
||||
onMount(() => {
|
||||
if (browser) {
|
||||
const getCookie = (name: string): string | null => {
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) return parts.pop()?.split(';').shift() || null;
|
||||
return null;
|
||||
};
|
||||
|
||||
const cookieToken = getCookie('access_token');
|
||||
const localToken = localStorage.getItem('access_token');
|
||||
|
||||
if (cookieToken && cookieToken !== localToken) {
|
||||
localStorage.setItem('access_token', cookieToken);
|
||||
}
|
||||
|
||||
const cookieRefreshToken = getCookie('refresh_token');
|
||||
const localRefreshToken = localStorage.getItem('refresh_token');
|
||||
|
||||
if (cookieRefreshToken && cookieRefreshToken !== localRefreshToken) {
|
||||
localStorage.setItem('refresh_token', cookieRefreshToken);
|
||||
}
|
||||
|
||||
// Escuchar cambios de compañía
|
||||
const handleCompanyChange = (event: CustomEvent) => {
|
||||
reloadData();
|
||||
};
|
||||
|
||||
window.addEventListener('companyChanged', handleCompanyChange as EventListener);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('companyChanged', handleCompanyChange as EventListener);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
async function handleSearch() {
|
||||
if (!searchCode.trim()) {
|
||||
searchError = 'Por favor ingresa un código de clase';
|
||||
return;
|
||||
}
|
||||
|
||||
searchLoading = true;
|
||||
searchError = null;
|
||||
searchedClass = null;
|
||||
|
||||
try {
|
||||
// TODO: Usar tu API real aquí: const response = await classesApi.get(searchCode.trim());
|
||||
console.log("Buscando clase:", searchCode);
|
||||
|
||||
// MOCK TEMPORAL (Borrar esto cuando tengas el API):
|
||||
const response = { error: null, data: null, status: 200 };
|
||||
|
||||
if (response.error) {
|
||||
searchError = response.error;
|
||||
return;
|
||||
}
|
||||
|
||||
if (response.data) {
|
||||
searchedClass = response.data;
|
||||
} else {
|
||||
// Simular no encontrado si usas el mock
|
||||
// searchError = 'No encontrado (Mock)';
|
||||
}
|
||||
} catch (e) {
|
||||
searchError = 'Error al buscar la clase';
|
||||
console.error('Error searching class:', e);
|
||||
} finally {
|
||||
searchLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function reloadData() {
|
||||
searchCode = '';
|
||||
searchedClass = null;
|
||||
searchError = null;
|
||||
|
||||
if (!companyStore.activeCompany) return;
|
||||
|
||||
listLoading = true;
|
||||
listError = null;
|
||||
|
||||
try {
|
||||
// TODO: Usar tu API real aquí: await classesApi.list(...)
|
||||
// Por ahora recargamos la página completa para traer datos frescos del server
|
||||
window.location.reload();
|
||||
|
||||
} catch (e) {
|
||||
listError = 'Error recargando datos';
|
||||
console.error('Error reloading:', e);
|
||||
} finally {
|
||||
listLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
reloadData();
|
||||
}
|
||||
|
||||
// Asegúrate de que columns.js tenga los campos correctos (class_code, description, etc)
|
||||
const columns = createColumns(handleSuccess);
|
||||
|
||||
// Array reactivo
|
||||
const classesData = $derived(searchedClass ? [searchedClass] : classesList);
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold tracking-tight">Catálogo de Clases</h1>
|
||||
<p class="text-muted-foreground">
|
||||
Gestiona las clases de material (SCAII / SCAF)
|
||||
</p>
|
||||
</div>
|
||||
<Button href="/dashboard/goods/classes/edit" >
|
||||
<Plus class="mr-2" size={16} />
|
||||
Nueva Clase
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>Buscar Clase</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleSearch(); }} class="space-y-4">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-1 space-y-2">
|
||||
<Label for="search-key">Código de Clase</Label>
|
||||
<Input
|
||||
id="search-key"
|
||||
bind:value={searchCode}
|
||||
placeholder="Ej: ACERO"
|
||||
maxlength={10}
|
||||
disabled={searchLoading}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-end gap-2">
|
||||
<Button type="submit" disabled={searchLoading}>
|
||||
{#if searchLoading}
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></div>
|
||||
Buscando...
|
||||
</div>
|
||||
{:else}
|
||||
<Search class="mr-2" size={16} />
|
||||
Buscar
|
||||
{/if}
|
||||
</Button>
|
||||
{#if searchedClass}
|
||||
<Button type="button" variant="outline" onclick={reloadData}>
|
||||
<Trash2 class="mr-2" size={16} />
|
||||
Limpiar
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if searchError}
|
||||
<div class="rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{searchError}
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<Card.Title>
|
||||
{#if searchedClass}
|
||||
Resultado de la Búsqueda
|
||||
{:else}
|
||||
Listado de Clases
|
||||
{/if}
|
||||
</Card.Title>
|
||||
<Card.Description>
|
||||
{#if searchedClass}
|
||||
Se encontró 1 Clase
|
||||
{:else if listLoading}
|
||||
Cargando Clases...
|
||||
{:else}
|
||||
Total: {classesList.length} registro{classesList.length !== 1 ? 's' : ''}
|
||||
{/if}
|
||||
</Card.Description>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
{#if listError}
|
||||
<div class="rounded-lg border border-destructive bg-destructive/10 p-4 text-sm text-destructive">
|
||||
{listError}
|
||||
</div>
|
||||
{:else if listLoading}
|
||||
<div class="flex items-center justify-center py-8">
|
||||
<div class="flex items-center gap-2 text-muted-foreground">
|
||||
<div class="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
|
||||
Cargando Clases...
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<DataTable
|
||||
data={classesData}
|
||||
{columns}
|
||||
/>
|
||||
{/if}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
@@ -0,0 +1,335 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
// Componentes UI
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Textarea } from '$lib/components/ui/textarea';
|
||||
import * as Tabs from '$lib/components/ui/tabs';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { ArrowLeft, LoaderCircle, Save } from 'lucide-svelte';
|
||||
|
||||
// Stores y APIs
|
||||
import { companyStore } from '$lib/stores/company.svelte';
|
||||
import {
|
||||
classesApi,
|
||||
type A76ClassCreate,
|
||||
type A76ClassUpdate
|
||||
} from '$lib/api/dashboard/a76/classes';
|
||||
import { materialTypesApi, type MaterialType } from "$lib/api/dashboard/refrence_data/material_types";
|
||||
|
||||
// --- 1. LÓGICA DE IDENTIFICACIÓN ---
|
||||
let id = $derived($page.params.id === 'new' ? null : Number($page.params.id));
|
||||
let isEdit = $derived(!!id);
|
||||
let title = $derived(isEdit ? "Editar Clase" : "Nueva Clase");
|
||||
|
||||
// --- 2. ESTADOS ---
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
// Catálogos
|
||||
let materialTypes = $state<MaterialType[]>([]);
|
||||
let loadingCatalogs = $state(false);
|
||||
|
||||
// Formulario Inicial
|
||||
function getEmptyForm(): A76ClassCreate {
|
||||
return {
|
||||
company_id: 0,
|
||||
client_id: 0, // Se llenará manual
|
||||
class_code: '',
|
||||
description_es: '',
|
||||
description_en: '',
|
||||
material_key: '',
|
||||
unit_of_measure: 'KG',
|
||||
fraction: '',
|
||||
us_fraction: '',
|
||||
sub_key: '',
|
||||
physical_review: 0,
|
||||
iva_exempt_fraction: ''
|
||||
};
|
||||
}
|
||||
|
||||
let formData = $state<A76ClassCreate>(getEmptyForm());
|
||||
|
||||
// --- 3. CARGA DE DATOS (Mount) ---
|
||||
onMount(async () => {
|
||||
const companyId = companyStore.activeCompany?.id;
|
||||
if (!companyId) return;
|
||||
|
||||
loadingCatalogs = true;
|
||||
|
||||
// Ejecutamos las cargas en paralelo
|
||||
await Promise.all([
|
||||
loadMaterialTypes(companyId),
|
||||
id ? loadClassData(id, companyId) : Promise.resolve()
|
||||
]);
|
||||
|
||||
loadingCatalogs = false;
|
||||
});
|
||||
|
||||
// Carga de Catálogos
|
||||
async function loadMaterialTypes(companyId: number) {
|
||||
try {
|
||||
const response = await materialTypesApi.list(1, 100);
|
||||
if (response.data) materialTypes = response.data.items;
|
||||
} catch (e) {
|
||||
console.error('Error loading material types:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Carga del Registro a Editar
|
||||
async function loadClassData(classId: number, companyId: number) {
|
||||
loading = true;
|
||||
try {
|
||||
const response = await classesApi.get(classId, companyId);
|
||||
|
||||
if (response.error) {
|
||||
error = response.error;
|
||||
return;
|
||||
}
|
||||
|
||||
if (response.data) {
|
||||
const data = response.data;
|
||||
formData = {
|
||||
company_id: data.company_id,
|
||||
client_id: data.client_id,
|
||||
class_code: data.class_code,
|
||||
description_es: data.description_es || '',
|
||||
description_en: data.description_en || '',
|
||||
material_key: data.material_key || '',
|
||||
unit_of_measure: data.unit_of_measure,
|
||||
fraction: data.fraction,
|
||||
us_fraction: data.us_fraction,
|
||||
sub_key: data.sub_key,
|
||||
physical_review: data.physical_review,
|
||||
iva_exempt_fraction: data.iva_exempt_fraction
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
error = "No se pudo cargar la información de la Clase";
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// --- 4. GUARDADO ---
|
||||
async function handleSubmit() {
|
||||
error = null;
|
||||
const activeCompanyId = companyStore.activeCompany?.id;
|
||||
|
||||
// Validaciones
|
||||
if (!activeCompanyId) { error = 'Selecciona una compañía'; return; }
|
||||
if (!formData.client_id) { error = 'Debes ingresar un ID de Cliente válido'; return; } // Validación manual
|
||||
if (!formData.class_code?.trim()) { error = 'La Clave de Clase es requerida'; return; }
|
||||
if (!formData.fraction?.trim()) { error = 'La Fracción es requerida'; return; }
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
formData.company_id = activeCompanyId;
|
||||
|
||||
const cleanData = {
|
||||
...formData,
|
||||
description_es: formData.description_es || null,
|
||||
description_en: formData.description_en || null,
|
||||
material_key: formData.material_key || null,
|
||||
};
|
||||
|
||||
if (isEdit && id) {
|
||||
const updatePayload: A76ClassUpdate = cleanData;
|
||||
const response = await classesApi.update(id, updatePayload, activeCompanyId);
|
||||
if (response.error) throw new Error(response.error);
|
||||
} else {
|
||||
const response = await classesApi.create(cleanData, activeCompanyId);
|
||||
if (response.error) throw new Error(response.error);
|
||||
}
|
||||
|
||||
goto('/dashboard/goods/classes');
|
||||
} catch (e: any) {
|
||||
error = e.message || 'Error al guardar';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Opciones estáticas para Unidades
|
||||
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)' },
|
||||
{ value: 'KGM', label: 'Kilogramo (KGM)' },
|
||||
{ value: 'H87', label: 'Pieza (H87)' },
|
||||
{ value: 'EA', label: 'Elemento (EA)' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="w-full mx-auto max-w-6xl py-6 px-4 space-y-6 pb-48">
|
||||
<div class="flex items-center gap-4">
|
||||
<Button variant="outline" size="icon" href="/dashboard/goods/classes">
|
||||
<ArrowLeft class="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight">{title}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="p-4 rounded-md bg-destructive/10 text-destructive border border-destructive/20 text-sm font-medium">
|
||||
⚠️ {error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#key id}
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-6">
|
||||
<Card.Root>
|
||||
<Card.Content class="p-6">
|
||||
<Tabs.Root value="general" class="w-full">
|
||||
<div class="min-h-[400px]">
|
||||
|
||||
<Tabs.Content value="general" class="space-y-4 pt-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="class_code" class="required">Clave de Clase</Label>
|
||||
<Input id="class_code" bind:value={formData.class_code} maxlength={8} placeholder="Ej. ACERO" />
|
||||
<p class="text-xs text-muted-foreground">Máximo 8 caracteres.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="client_id" class="required">ID Cliente</Label>
|
||||
<Input
|
||||
type="number"
|
||||
id="client_id"
|
||||
bind:value={formData.client_id}
|
||||
placeholder="Ingresa el ID del cliente"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="desc_es">Descripción (Español)</Label>
|
||||
<Textarea id="desc_es" bind:value={formData.description_es} class="min-h-[80px]" maxlength={500} />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="desc_en">Descripción (Inglés)</Label>
|
||||
<Textarea id="desc_en" bind:value={formData.description_en} class="min-h-[80px]" maxlength={500} />
|
||||
</div>
|
||||
</Tabs.Content>
|
||||
|
||||
<Tabs.Content value="technical" class="space-y-4 pt-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="material_key">Tipo de Material</Label>
|
||||
{#if loadingCatalogs}
|
||||
<div class="h-9 w-full animate-pulse rounded-md bg-muted"></div>
|
||||
{:else}
|
||||
<select
|
||||
id="material_key"
|
||||
bind:value={formData.material_key}
|
||||
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<option value="">Sin tipo específico</option>
|
||||
{#each materialTypes as mt}
|
||||
<option value={mt.key}>
|
||||
{mt.key} - {mt.description}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="uom" class="required">Unidad de Medida</Label>
|
||||
<select
|
||||
id="uom"
|
||||
bind:value={formData.unit_of_measure}
|
||||
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{#each unitOptions as unit}
|
||||
<option value={unit.value}>{unit.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="fraction" class="required">Fracción Arancelaria (MX)</Label>
|
||||
<Input id="fraction" bind:value={formData.fraction} maxlength={10} placeholder="Ej: 12345678" />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="us_fraction" class="required">Fracción Arancelaria (US)</Label>
|
||||
<Input id="us_fraction" bind:value={formData.us_fraction} maxlength={16} placeholder="Ej: 12345678" />
|
||||
</div>
|
||||
</div>
|
||||
</Tabs.Content>
|
||||
|
||||
<Tabs.Content value="others" class="space-y-4 pt-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="sub_key" class="required">Subclave</Label>
|
||||
<Input id="sub_key" bind:value={formData.sub_key} maxlength={5} />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="iva_exempt" class="required">Fracción Exenta IVA</Label>
|
||||
<Input id="iva_exempt" bind:value={formData.iva_exempt_fraction} maxlength={4} />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="phys_rev">Revisión Física</Label>
|
||||
<select
|
||||
id="phys_rev"
|
||||
bind:value={formData.physical_review}
|
||||
class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Sí</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</Tabs.Content>
|
||||
</div>
|
||||
|
||||
<Tabs.List class="grid grid-cols-3 fixed bottom-24 left-1/2 -translate-x-1/2 w-[95%] max-w-xl z-40 shadow-2xl bg-background border p-1 rounded-xl">
|
||||
<Tabs.Trigger value="general">General</Tabs.Trigger>
|
||||
<Tabs.Trigger value="technical">Clasificación</Tabs.Trigger>
|
||||
<Tabs.Trigger value="others">Otros</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
</Tabs.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<div class="fixed bottom-0 right-0 left-0 md:left-64 p-4 border-t bg-background/95 backdrop-blur z-50 flex justify-end gap-4 shadow-inner">
|
||||
<div class="max-w-6xl mx-auto flex justify-end gap-4 px-4 w-full">
|
||||
<Button type="button" variant="ghost" href="/dashboard/goods/classes" disabled={loading}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading || loadingCatalogs} class="min-w-[140px]">
|
||||
{#if loading}
|
||||
<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
|
||||
Guardando...
|
||||
{:else}
|
||||
<Save class="mr-2 h-4 w-4" />
|
||||
{isEdit ? 'Actualizar' : 'Guardar'}
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/key}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(.required::after) {
|
||||
content: " *";
|
||||
color: hsl(var(--destructive));
|
||||
}
|
||||
</style>
|
||||
1
frontend/src/routes/dashboard/goods/parts/+page.svelte
Normal file
1
frontend/src/routes/dashboard/goods/parts/+page.svelte
Normal file
@@ -0,0 +1 @@
|
||||
<h1>Pagina de partes</h1>
|
||||
Reference in New Issue
Block a user