Se esta disenando mejor la parte de partes
This commit is contained in:
@@ -109,12 +109,14 @@
|
||||
<th class="p-3 font-medium text-muted-foreground w-[130px]">RFC</th>
|
||||
<th class="p-3 font-medium text-muted-foreground">Razón Social</th>
|
||||
<th class="p-3 font-medium text-muted-foreground w-[100px] text-center">Estado</th>
|
||||
<th class="p-3 font-medium text-muted-foreground w-[80px]">Acción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each filteredClients as client}
|
||||
<tr class="border-b hover:bg-muted/50 transition-colors group">
|
||||
<tr
|
||||
class="border-b hover:bg-accent/50 transition-colors cursor-pointer"
|
||||
onclick={() => handleSelect(client)}
|
||||
>
|
||||
<td class="p-3 font-mono text-xs">{client.id}</td>
|
||||
<td class="p-3 font-mono text-xs">{client.rfc}</td>
|
||||
<td class="p-3 font-medium">
|
||||
@@ -138,17 +140,6 @@
|
||||
</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-2">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
class="h-8 w-full"
|
||||
onclick={() => handleSelect(client)}
|
||||
>
|
||||
Usar
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import * as Dialog from "$lib/components/ui/dialog";
|
||||
import * as Table from "$lib/components/ui/table";
|
||||
import { Search, Loader2, Globe } from "lucide-svelte";
|
||||
import { countriesApi, type Country } from "$lib/api/dashboard/refrence_data/countries";
|
||||
|
||||
// --- PROPS ---
|
||||
let {
|
||||
open = $bindable(false),
|
||||
onSelect
|
||||
}: {
|
||||
open: boolean,
|
||||
onSelect: (item: Country) => void
|
||||
} = $props();
|
||||
|
||||
// --- ESTADO ---
|
||||
let items = $state<Country[]>([]);
|
||||
let loading = $state(false);
|
||||
let searchTerm = $state("");
|
||||
let loaded = $state(false);
|
||||
|
||||
// Filtro local
|
||||
let filteredItems = $derived(
|
||||
items.filter(i =>
|
||||
(i.m3_key || "").toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(i.mex_key || "").toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(i.description_es || "").toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(i.description_en || "").toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
// Cargar datos al abrir
|
||||
$effect(() => {
|
||||
if (open && !loaded) {
|
||||
loadCountries();
|
||||
}
|
||||
});
|
||||
|
||||
async function loadCountries() {
|
||||
loading = true;
|
||||
try {
|
||||
const response = await countriesApi.list(1, 300);
|
||||
|
||||
if (response.data?.items) {
|
||||
items = response.data.items;
|
||||
loaded = true;
|
||||
} else {
|
||||
console.warn("No se encontraron países:", response);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error cargando países:", e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSelect(item: Country) {
|
||||
if (onSelect) onSelect(item);
|
||||
open = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open={open}>
|
||||
<Dialog.Content class="sm:max-w-[900px] max-h-[80vh] flex flex-col">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Seleccionar País</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
Seleccione el país de origen del catálogo.
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
|
||||
<div class="relative w-full my-2">
|
||||
<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Buscar por clave o descripción..."
|
||||
class="pl-9"
|
||||
bind:value={searchTerm}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto border rounded-md min-h-[300px]">
|
||||
{#if loading}
|
||||
<div class="flex flex-col items-center justify-center h-48 gap-2 text-muted-foreground">
|
||||
<Loader2 class="h-8 w-8 animate-spin text-primary" />
|
||||
<p>Cargando catálogo...</p>
|
||||
</div>
|
||||
{:else if filteredItems.length === 0}
|
||||
<div class="flex flex-col items-center justify-center h-48 text-muted-foreground">
|
||||
<p>No se encontraron países.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class="w-[80px]">M3</Table.Head>
|
||||
<Table.Head class="w-[80px]">MEX</Table.Head>
|
||||
<Table.Head class="w-[80px]">AME</Table.Head>
|
||||
<Table.Head>Descripción ES</Table.Head>
|
||||
<Table.Head>Description EN</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each filteredItems as item}
|
||||
<Table.Row
|
||||
class="cursor-pointer hover:bg-accent/50 transition-colors"
|
||||
onclick={() => handleSelect(item)}
|
||||
>
|
||||
<Table.Cell>
|
||||
<div class="flex items-center gap-1">
|
||||
<Globe class="h-3 w-3 text-blue-500" />
|
||||
<span class="font-mono font-bold text-xs">
|
||||
{item.m3_key}
|
||||
</span>
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="font-mono text-xs">
|
||||
{item.mex_key}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="font-mono text-xs">
|
||||
{item.ame_key}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="font-medium text-sm">
|
||||
{item.description_es}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-sm text-muted-foreground italic">
|
||||
{item.description_en}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Dialog.Footer>
|
||||
<div class="text-xs text-muted-foreground self-center mr-auto">
|
||||
{filteredItems.length} registros encontrados
|
||||
</div>
|
||||
<Button variant="outline" onclick={() => open = false}>Cancelar</Button>
|
||||
</Dialog.Footer>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
@@ -0,0 +1,138 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import * as Dialog from "$lib/components/ui/dialog";
|
||||
import * as Table from "$lib/components/ui/table";
|
||||
import { Search, Loader2, DollarSign } from "lucide-svelte";
|
||||
import { getMultiCurrencyTypes, type MultiCurrencyType } from "$lib/api/dashboard/a76/general_catalogs/multi-currency-types";
|
||||
import { companyStore } from "$lib/stores/company.svelte";
|
||||
|
||||
// --- PROPS ---
|
||||
let {
|
||||
open = $bindable(false),
|
||||
onSelect
|
||||
}: {
|
||||
open: boolean,
|
||||
onSelect: (item: MultiCurrencyType) => void
|
||||
} = $props();
|
||||
|
||||
// --- ESTADO ---
|
||||
let items = $state<MultiCurrencyType[]>([]);
|
||||
let loading = $state(false);
|
||||
let searchTerm = $state("");
|
||||
let loaded = $state(false);
|
||||
|
||||
// Filtro local
|
||||
let filteredItems = $derived(
|
||||
items.filter(i =>
|
||||
(i.currency_type_code || "").toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(i.country_key || "").toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
// Cargar datos al abrir
|
||||
$effect(() => {
|
||||
if (open && !loaded && companyStore.activeCompany?.id) {
|
||||
loadCurrencies();
|
||||
}
|
||||
});
|
||||
|
||||
async function loadCurrencies() {
|
||||
if (!companyStore.activeCompany?.id) return;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
const response = await getMultiCurrencyTypes(companyStore.activeCompany.id, 1, 100);
|
||||
|
||||
if (response?.items) {
|
||||
items = response.items;
|
||||
loaded = true;
|
||||
} else {
|
||||
console.warn("No se encontraron monedas:", response);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error cargando monedas:", e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSelect(item: MultiCurrencyType) {
|
||||
if (onSelect) onSelect(item);
|
||||
open = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open={open}>
|
||||
<Dialog.Content class="sm:max-w-[700px] max-h-[80vh] flex flex-col">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Seleccionar Moneda</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
Seleccione el tipo de moneda del catálogo.
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
|
||||
<div class="relative w-full my-2">
|
||||
<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Buscar por código o país..."
|
||||
class="pl-9"
|
||||
bind:value={searchTerm}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto border rounded-md min-h-[300px]">
|
||||
{#if loading}
|
||||
<div class="flex flex-col items-center justify-center h-48 gap-2 text-muted-foreground">
|
||||
<Loader2 class="h-8 w-8 animate-spin text-primary" />
|
||||
<p>Cargando catálogo...</p>
|
||||
</div>
|
||||
{:else if filteredItems.length === 0}
|
||||
<div class="flex flex-col items-center justify-center h-48 text-muted-foreground">
|
||||
<p>No se encontraron monedas.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class="w-[120px]">Código</Table.Head>
|
||||
<Table.Head class="w-[100px]">País</Table.Head>
|
||||
<Table.Head class="text-right">Factor Conversión</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each filteredItems as item}
|
||||
<Table.Row
|
||||
class="cursor-pointer hover:bg-accent/50 transition-colors"
|
||||
onclick={() => handleSelect(item)}
|
||||
>
|
||||
<Table.Cell>
|
||||
<div class="flex items-center gap-2">
|
||||
<DollarSign class="h-3 w-3 text-green-500" />
|
||||
<span class="font-mono font-bold text-primary">
|
||||
{item.currency_type_code}
|
||||
</span>
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="font-medium">
|
||||
{item.country_key || '-'}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-right font-mono text-sm">
|
||||
{item.conversion_factor?.toFixed(4) || '-'}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Dialog.Footer>
|
||||
<div class="text-xs text-muted-foreground self-center mr-auto">
|
||||
{filteredItems.length} registros encontrados
|
||||
</div>
|
||||
<Button variant="outline" onclick={() => open = false}>Cancelar</Button>
|
||||
</Dialog.Footer>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
@@ -0,0 +1,155 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import * as Dialog from "$lib/components/ui/dialog";
|
||||
import * as Table from "$lib/components/ui/table";
|
||||
import { Search, Loader2, Hash } from "lucide-svelte";
|
||||
import { classesApi, type A76Class } from "$lib/api/dashboard/a76/classes";
|
||||
import { companyStore } from "$lib/stores/company.svelte";
|
||||
|
||||
// --- PROPS ---
|
||||
let {
|
||||
open = $bindable(false),
|
||||
onSelect
|
||||
}: {
|
||||
open: boolean,
|
||||
onSelect: (item: { fraction: string; description: string; class_code: string }) => void
|
||||
} = $props();
|
||||
|
||||
// --- ESTADO ---
|
||||
let classes = $state<A76Class[]>([]);
|
||||
let loading = $state(false);
|
||||
let searchTerm = $state("");
|
||||
let loaded = $state(false);
|
||||
|
||||
// Extraer fracciones únicas
|
||||
let uniqueFractions = $derived(
|
||||
Array.from(new Set(classes.map(c => c.fraction)))
|
||||
.filter(f => f && f.trim())
|
||||
.map(fraction => {
|
||||
const cls = classes.find(c => c.fraction === fraction);
|
||||
return {
|
||||
fraction,
|
||||
description: cls?.description_es || '',
|
||||
class_code: cls?.class_code || ''
|
||||
};
|
||||
})
|
||||
.filter(item =>
|
||||
item.fraction.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
item.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
item.class_code.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
// Cargar datos al abrir
|
||||
$effect(() => {
|
||||
if (open && !loaded && companyStore.activeCompany?.id) {
|
||||
loadFractions();
|
||||
}
|
||||
});
|
||||
|
||||
async function loadFractions() {
|
||||
if (!companyStore.activeCompany?.id) return;
|
||||
|
||||
loading = true;
|
||||
try {
|
||||
const response = await classesApi.list({
|
||||
company_id: companyStore.activeCompany.id,
|
||||
page: 1,
|
||||
page_size: 1000
|
||||
});
|
||||
|
||||
if (response.data?.items) {
|
||||
classes = response.data.items;
|
||||
loaded = true;
|
||||
} else {
|
||||
console.warn("No se encontraron clases:", response);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error cargando fracciones:", e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSelect(item: { fraction: string; description: string; class_code: string }) {
|
||||
if (onSelect) onSelect(item);
|
||||
open = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open={open}>
|
||||
<Dialog.Content class="sm:max-w-[800px] max-h-[80vh] flex flex-col">
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Seleccionar Fracción Arancelaria</Dialog.Title>
|
||||
<Dialog.Description>
|
||||
Seleccione la fracción arancelaria del catálogo de clases.
|
||||
</Dialog.Description>
|
||||
</Dialog.Header>
|
||||
|
||||
<div class="relative w-full my-2">
|
||||
<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Buscar por fracción, clase o descripción..."
|
||||
class="pl-9"
|
||||
bind:value={searchTerm}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-y-auto border rounded-md min-h-[300px]">
|
||||
{#if loading}
|
||||
<div class="flex flex-col items-center justify-center h-48 gap-2 text-muted-foreground">
|
||||
<Loader2 class="h-8 w-8 animate-spin text-primary" />
|
||||
<p>Cargando catálogo...</p>
|
||||
</div>
|
||||
{:else if uniqueFractions.length === 0}
|
||||
<div class="flex flex-col items-center justify-center h-48 text-muted-foreground">
|
||||
<p>No se encontraron fracciones.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class="w-[150px]">Fracción</Table.Head>
|
||||
<Table.Head>Descripción</Table.Head>
|
||||
<Table.Head class="w-[120px]">Clase</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each uniqueFractions as item}
|
||||
<Table.Row
|
||||
class="cursor-pointer hover:bg-accent/50 transition-colors"
|
||||
onclick={() => handleSelect(item)}
|
||||
>
|
||||
<Table.Cell>
|
||||
<div class="flex items-center gap-2">
|
||||
<Hash class="h-3 w-3 text-orange-500" />
|
||||
<span class="font-mono font-bold text-orange-600 dark:text-orange-400">
|
||||
{item.fraction}
|
||||
</span>
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="font-medium text-sm">
|
||||
{item.description || '-'}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<span class="inline-flex items-center rounded-md bg-blue-50 dark:bg-blue-900/30 px-2 py-1 text-xs font-mono font-bold text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-800">
|
||||
{item.class_code}
|
||||
</span>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Dialog.Footer>
|
||||
<div class="text-xs text-muted-foreground self-center mr-auto">
|
||||
{uniqueFractions.length} fracciones únicas encontradas
|
||||
</div>
|
||||
<Button variant="outline" onclick={() => open = false}>Cancelar</Button>
|
||||
</Dialog.Footer>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
@@ -116,7 +116,6 @@
|
||||
<Table.Row>
|
||||
<Table.Head class="w-[80px]">Código</Table.Head>
|
||||
<Table.Head>Descripción</Table.Head>
|
||||
<Table.Head class="text-right w-[50px]"></Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
@@ -129,7 +128,7 @@
|
||||
{:else}
|
||||
{#each items as item}
|
||||
<Table.Row
|
||||
class="cursor-pointer hover:bg-muted/50"
|
||||
class="cursor-pointer hover:bg-accent/50 transition-colors"
|
||||
onclick={() => handleSelect(item)}
|
||||
>
|
||||
<Table.Cell class="font-mono font-bold">{item.code}</Table.Cell>
|
||||
@@ -141,11 +140,6 @@
|
||||
{/if}
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-right">
|
||||
<Button variant="ghost" size="icon" class="h-6 w-6">
|
||||
<Check class="h-4 w-4" />
|
||||
</Button>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
@@ -110,12 +110,14 @@
|
||||
<th class="p-3 font-medium text-muted-foreground w-[100px]">Clave</th>
|
||||
<th class="p-3 font-medium text-muted-foreground">Descripción</th>
|
||||
<th class="p-3 font-medium text-muted-foreground w-[80px]">UM</th>
|
||||
<th class="p-3 font-medium text-muted-foreground w-[80px]">Acción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each filteredItems as item}
|
||||
<tr class="border-b hover:bg-muted/50 transition-colors">
|
||||
<tr
|
||||
class="border-b hover:bg-accent/50 transition-colors cursor-pointer"
|
||||
onclick={() => handleSelect(item)}
|
||||
>
|
||||
<td class="p-3">
|
||||
<span class="font-mono font-bold text-primary bg-primary/10 px-2 py-1 rounded text-xs">
|
||||
{item.class_code}
|
||||
@@ -137,18 +139,6 @@
|
||||
{item.unit_of_measure || '-'}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="p-2">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
class="h-8 w-full"
|
||||
onclick={() => handleSelect(item)}
|
||||
>
|
||||
Usar
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
|
||||
@@ -9,7 +9,9 @@
|
||||
import * as Tabs from '$lib/components/ui/tabs';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import * as Select from "$lib/components/ui/select";
|
||||
import { Switch } from "$lib/components/ui/switch";
|
||||
import { Switch } from "$lib/components/ui/switch";
|
||||
import { Separator } from '$lib/components/ui/separator';
|
||||
import { Badge } from '$lib/components/ui/badge';
|
||||
|
||||
// Iconos
|
||||
import {
|
||||
@@ -30,6 +32,9 @@
|
||||
import ClassSelectorDialog from '$lib/components/dashboard/goods/parts/class-selector-dialog.svelte';
|
||||
import MaterialTypeSelectorDialog from '$lib/components/dashboard/goods/modales/material-type-selector-dialog.svelte';
|
||||
import UnitMeasureSelectorDialog from '$lib/components/dashboard/goods/modales/unit-measure-dialog.svelte';
|
||||
import CurrencySelectorDialog from '$lib/components/dashboard/goods/modales/currency-selector-dialog.svelte';
|
||||
import CountrySelectorDialog from '$lib/components/dashboard/goods/modales/country-selector-dialog.svelte';
|
||||
import FractionSelectorDialog from '$lib/components/dashboard/goods/modales/fraction-selector-dialog.svelte';
|
||||
|
||||
// --- PROPS ---
|
||||
let { partId = null, formType = 'inv' }: { partId?: number | null, formType?: 'inv' | 'fa' } = $props();
|
||||
@@ -40,6 +45,7 @@
|
||||
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
let activeTab = $state('general');
|
||||
|
||||
// Estado Modales
|
||||
let showClientModal = $state(false);
|
||||
@@ -47,11 +53,16 @@
|
||||
let showMaterialModal = $state(false);
|
||||
let showUOMModal = $state(false);
|
||||
let showAltUOMModal = $state(false);
|
||||
let showCurrencyModal = $state(false);
|
||||
let showCountryModal = $state(false);
|
||||
let showFractionModal = $state(false);
|
||||
|
||||
// Descripciones Visuales
|
||||
let selectedClientName = $state("");
|
||||
let selectedClientStatus = $state(true);
|
||||
let selectedClassDesc = $state("");
|
||||
let selectedCurrencyName = $state("");
|
||||
let selectedCountryName = $state("");
|
||||
let selectedMaterialDesc = $state("");
|
||||
|
||||
// Estado Formulario
|
||||
@@ -60,13 +71,14 @@
|
||||
part_number: '',
|
||||
description_spanish: '',
|
||||
description_english: '',
|
||||
part_class: '',
|
||||
part_class: '',
|
||||
material_type: '',
|
||||
unit_of_measure: 'PZ',
|
||||
unit_weight: 0,
|
||||
weight_type: 'KG',
|
||||
unit_cost: 0,
|
||||
currency_key: 'USD',
|
||||
currency_type: '',
|
||||
currency_key: null,
|
||||
added_value: 0,
|
||||
value_added_type: 'USD',
|
||||
us_fraction: '',
|
||||
@@ -180,6 +192,13 @@
|
||||
function handleMaterialSelect(item: any) { formData.material_type = item.key; selectedMaterialDesc = item.description; }
|
||||
function handleUOMSelect(item: any) { formData.unit_of_measure = item.code; }
|
||||
function handleAltUOMSelect(item: any) { formData.alternate_unit_measure = item.code; }
|
||||
function handleCurrencySelect(currency: any) {
|
||||
formData.currency_type = ''; // Catálogo no usa currency_type
|
||||
formData.currency_key = currency.currency_type_code;
|
||||
selectedCurrencyName = currency.currency_type_code;
|
||||
}
|
||||
function handleCountrySelect(country: any) { formData.origin_country = country.m3_key; selectedCountryName = country.description_es; }
|
||||
function handleFractionSelect(item: any) { formData.fraction = item.fraction; }
|
||||
|
||||
// --- SUBMIT ---
|
||||
async function handleSubmit() {
|
||||
@@ -192,51 +211,83 @@
|
||||
loading = true;
|
||||
try {
|
||||
// Construimos el payload.
|
||||
// Si es FA, inyectamos el objeto fa_data anidado.
|
||||
let commonData: any = { ...formData };
|
||||
|
||||
// Si currency_key está vacío o es el default, ponerlo en null
|
||||
if (!commonData.currency_key || commonData.currency_key === 'USD') {
|
||||
commonData.currency_key = null;
|
||||
}
|
||||
|
||||
if (formType === 'fa') {
|
||||
// Crear fa_data con los campos específicos de FA
|
||||
commonData.fa_data = {
|
||||
sector: formData.sector,
|
||||
fraction_type: formData.fraction_type,
|
||||
origin_country: formData.origin_country
|
||||
};
|
||||
// IMPORTANTE: Eliminar estos campos del nivel raíz para evitar duplicados
|
||||
delete commonData.sector;
|
||||
delete commonData.fraction_type;
|
||||
delete commonData.origin_country;
|
||||
}
|
||||
|
||||
// DEBUG: Ver qué se está enviando
|
||||
console.log('Payload que se enviará:', JSON.stringify(commonData, null, 2));
|
||||
console.log('client_id:', formData.client_id);
|
||||
console.log('selectedClientName:', selectedClientName);
|
||||
|
||||
if (isEdit && partId) {
|
||||
await partsApi.update(partId, commonData, activeCompanyId);
|
||||
} else {
|
||||
await partsApi.create({ ...commonData, company_id: activeCompanyId }, activeCompanyId);
|
||||
const result = await partsApi.create({ ...commonData, company_id: activeCompanyId }, activeCompanyId);
|
||||
console.log('Resultado de creación:', result);
|
||||
if (result.error) {
|
||||
console.error('Error del backend:', result.error);
|
||||
error = result.error;
|
||||
return;
|
||||
}
|
||||
}
|
||||
goto('/dashboard/goods/parts');
|
||||
} catch (e: any) { error = e.message || 'Error al guardar'; } finally { loading = false; }
|
||||
} catch (e: any) {
|
||||
console.error('Error completo:', e);
|
||||
error = e.message || 'Error al guardar';
|
||||
} finally { loading = false; }
|
||||
}
|
||||
</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/parts">
|
||||
<ArrowLeft class="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight">{title}</h1>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="space-y-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<Button variant="ghost" size="icon" href="/dashboard/goods/parts">
|
||||
<ArrowLeft size={20} />
|
||||
</Button>
|
||||
<h1 class="text-3xl font-bold tracking-tight">{title}</h1>
|
||||
<Badge variant={isEdit ? "secondary" : "default"}>
|
||||
{isEdit ? "Editar" : "Nueva"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p class="text-muted-foreground">
|
||||
{formType === 'fa' ? 'Gestión de Activos Fijos (Q-Partes)' : 'Gestión detallada de números de parte (S-Partes).'}
|
||||
{formType === 'fa' ? 'Activo Fijo' : 'Inventario'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{#if error}
|
||||
<div class="p-4 rounded-md bg-destructive/10 text-destructive border border-destructive/20 text-sm font-medium">
|
||||
⚠️ {error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="pb-48">
|
||||
|
||||
{#if formType === 'fa'}
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-6">
|
||||
<Card.Root>
|
||||
<Card.Content class="p-6">
|
||||
<Tabs.Root value="general" class="w-full">
|
||||
<Tabs.Root bind:value={activeTab} class="w-full">
|
||||
|
||||
<div class="min-h-[500px]">
|
||||
|
||||
@@ -250,10 +301,9 @@
|
||||
<div class="grid gap-2">
|
||||
<Label for="fa_client" class="required">Cliente Asignado</Label>
|
||||
<div class="flex gap-2">
|
||||
<Input id="fa_client" bind:value={formData.client_id} readonly onclick={() => showClientModal = true} class="cursor-pointer font-mono" placeholder="Seleccione..."/>
|
||||
<Input id="fa_client" bind:value={selectedClientName} readonly onclick={() => showClientModal = true} class="cursor-pointer" placeholder="Seleccione..."/>
|
||||
<Button variant="outline" size="icon" type="button" onclick={() => showClientModal = true}><FolderSearch class="h-4 w-4" /></Button>
|
||||
</div>
|
||||
{#if selectedClientName}<div class="text-xs font-semibold text-primary">{selectedClientName}</div>{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -288,7 +338,10 @@
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="fa_origin">País Origen (ISO)</Label>
|
||||
<Input id="fa_origin" bind:value={formData.origin_country} maxlength={3} placeholder="MEX"/>
|
||||
<div class="flex gap-2">
|
||||
<Input id="fa_origin" bind:value={selectedCountryName} readonly onclick={() => showCountryModal = true} class="cursor-pointer" placeholder="Seleccione..."/>
|
||||
<Button variant="outline" size="icon" type="button" onclick={() => showCountryModal = true}><FolderSearch class="h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -303,15 +356,23 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="fa_currency">Moneda</Label>
|
||||
<Select.Root type="single" bind:value={formData.currency_key}>
|
||||
<Select.Trigger id="fa_currency">{formData.currency_key}</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Item value="USD">Extranjera (USD)</Select.Item>
|
||||
<Select.Item value="MXN">Nacional (MXN)</Select.Item>
|
||||
<Select.Item value="EUR">Euros (EUR)</Select.Item>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
<Label>Moneda</Label>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-4">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="radio" name="fa_currency_type" value="NA" bind:group={formData.currency_type} class="h-4 w-4" />
|
||||
<span class="text-sm">Nacional</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="radio" name="fa_currency_type" value="EX" bind:group={formData.currency_type} class="h-4 w-4" />
|
||||
<span class="text-sm">Extranjera</span>
|
||||
</label>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" type="button" onclick={() => { formData.currency_type = 'CATALOG'; showCurrencyModal = true; }} class="w-full">
|
||||
<FolderSearch class="h-4 w-4 mr-2" />
|
||||
{selectedCurrencyName || 'Seleccionar del Catálogo'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="fa_weight">Peso Unitario</Label>
|
||||
@@ -334,7 +395,10 @@
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="fa_fraction">Fracción UMT (MX)</Label>
|
||||
<Input id="fa_fraction" bind:value={formData.fraction} maxlength={10} />
|
||||
<div class="flex gap-2">
|
||||
<Input id="fa_fraction" bind:value={formData.fraction} readonly onclick={() => showFractionModal = true} class="cursor-pointer" placeholder="Seleccione..."/>
|
||||
<Button variant="outline" size="icon" type="button" onclick={() => showFractionModal = true}><FolderSearch class="h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="fa_sector">Sector</Label>
|
||||
@@ -408,32 +472,16 @@
|
||||
|
||||
</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" class="flex gap-2 items-center justify-center">Generales</Tabs.Trigger>
|
||||
<Tabs.Trigger value="cont1" class="flex gap-2 items-center justify-center">Continuación 1</Tabs.Trigger>
|
||||
<Tabs.Trigger value="cont2" class="flex gap-2 items-center justify-center">Continuación 2</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">
|
||||
<div class="max-w-6xl mx-auto flex justify-end gap-4">
|
||||
<Button variant="ghost" href="/dashboard/goods/parts" disabled={loading}>Cancelar</Button>
|
||||
<Button type="submit" disabled={loading} class="min-w-[140px] bg-amber-600 hover:bg-amber-700">
|
||||
{#if loading}<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />{:else}<Save class="mr-2 h-4 w-4" />{/if}
|
||||
{isEdit ? 'Actualizar Activo' : 'Guardar Activo'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{:else}
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="space-y-6">
|
||||
<Card.Root>
|
||||
<Card.Content class="p-6">
|
||||
<Tabs.Root value="general" class="w-full">
|
||||
<Tabs.Root bind:value={activeTab} class="w-full">
|
||||
|
||||
<div class="min-h-[500px]">
|
||||
|
||||
@@ -492,7 +540,10 @@
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="country">País Origen (ISO)</Label>
|
||||
<Input id="country" bind:value={formData.origin_country} maxlength={3} placeholder="MEX"/>
|
||||
<div class="flex gap-2">
|
||||
<Input id="country" bind:value={selectedCountryName} readonly onclick={() => showCountryModal = true} class="cursor-pointer" placeholder="Seleccione..."/>
|
||||
<Button variant="outline" size="icon" type="button" onclick={() => showCountryModal = true}><FolderSearch class="h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
@@ -513,15 +564,23 @@
|
||||
<h3 class="font-medium text-sm text-green-800 dark:text-green-300 flex items-center gap-2"><DollarSign class="h-4 w-4"/> Costos, valores y peso unitario</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="currency">Tipos de Moneda</Label>
|
||||
<Select.Root type="single" bind:value={formData.currency_key}>
|
||||
<Select.Trigger id="currency">{formData.currency_key}</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Item value="USD">Dólares (USD)</Select.Item>
|
||||
<Select.Item value="MXN">Pesos (MXN)</Select.Item>
|
||||
<Select.Item value="EUR">Euros (EUR)</Select.Item>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
<Label>Tipos de Moneda</Label>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-4">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="radio" name="inv_currency_type" value="NA" bind:group={formData.currency_type} class="h-4 w-4" />
|
||||
<span class="text-sm">Nacional</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="radio" name="inv_currency_type" value="EX" bind:group={formData.currency_type} class="h-4 w-4" />
|
||||
<span class="text-sm">Extranjera</span>
|
||||
</label>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" type="button" onclick={() => { formData.currency_type = 'CATALOG'; showCurrencyModal = true; }} class="w-full">
|
||||
<FolderSearch class="h-4 w-4 mr-2" />
|
||||
{selectedCurrencyName || 'Seleccionar del Catálogo'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="unit_cost">Costo Unitario</Label>
|
||||
@@ -617,14 +676,13 @@
|
||||
<div class="flex gap-2">
|
||||
<div class="relative flex-1">
|
||||
<UserCheck class="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input type="number" id="client_id" bind:value={formData.client_id} class="pl-9 font-mono" placeholder="Seleccione un cliente..." readonly onclick={() => showClientModal = true}/>
|
||||
<Input id="client_id" bind:value={selectedClientName} class="pl-9" placeholder="Seleccione un cliente..." readonly onclick={() => showClientModal = true}/>
|
||||
</div>
|
||||
<Button variant="outline" class="shrink-0" type="button" onclick={() => showClientModal = true}><FolderSearch class="h-4 w-4 mr-2" /> Buscar</Button>
|
||||
</div>
|
||||
{#if selectedClientName}
|
||||
<div class="flex items-center gap-2 mt-1 px-3 py-2 bg-slate-50 dark:bg-slate-900/50 border rounded-md text-sm">
|
||||
<span class="font-semibold text-primary">{selectedClientName}</span>
|
||||
{#if selectedClientStatus}<span class="text-green-600 flex items-center gap-1 text-xs font-medium"><CheckCircle2 class="h-3 w-3"/> Activo</span>{:else}<span class="text-red-600 flex items-center gap-1 text-xs font-medium"><XCircle class="h-3 w-3"/> Inactivo</span>{/if}
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
{#if selectedClientStatus}<span class="text-green-600 flex items-center gap-1 font-medium"><CheckCircle2 class="h-3 w-3"/> Activo</span>{:else}<span class="text-red-600 flex items-center gap-1 font-medium"><XCircle class="h-3 w-3"/> Inactivo</span>{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -647,7 +705,10 @@
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="fraction_mx" class="required">Fracción Arancelaria (MX)</Label>
|
||||
<Input id="fraction_mx" bind:value={formData.fraction} maxlength={10} />
|
||||
<div class="flex gap-2">
|
||||
<Input id="fraction_mx" bind:value={formData.fraction} readonly onclick={() => showFractionModal = true} class="cursor-pointer" placeholder="Seleccione..."/>
|
||||
<Button variant="outline" size="icon" type="button" onclick={() => showFractionModal = true}><FolderSearch class="h-4 w-4" /></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="eccn">ECCN</Label>
|
||||
@@ -674,27 +735,71 @@
|
||||
</Tabs.Content>
|
||||
</div>
|
||||
|
||||
<Tabs.List class="grid grid-cols-4 fixed bottom-24 left-1/2 -translate-x-1/2 w-[95%] max-w-2xl z-40 shadow-2xl bg-background border p-1 rounded-xl">
|
||||
<Tabs.Trigger value="general" class="flex gap-2 items-center justify-center"><Package class="h-4 w-4 hidden sm:block" /> General</Tabs.Trigger>
|
||||
<Tabs.Trigger value="opciones" class="flex gap-2 items-center justify-center"><Settings class="h-4 w-4 hidden sm:block" /> Opciones</Tabs.Trigger>
|
||||
<Tabs.Trigger value="opcionales2" class="flex gap-2 items-center justify-center"><FileText class="h-4 w-4 hidden sm:block" /> Opcionales 2</Tabs.Trigger>
|
||||
<Tabs.Trigger value="otros" class="flex gap-2 items-center justify-center"><Settings class="h-4 w-4 hidden sm:block" /> 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">
|
||||
<div class="max-w-6xl mx-auto flex justify-end gap-4">
|
||||
<Button variant="ghost" href="/dashboard/goods/parts" disabled={loading}>Cancelar</Button>
|
||||
<Button type="submit" disabled={loading} class="min-w-[140px]">
|
||||
{#if loading}<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />{:else}<Save class="mr-2 h-4 w-4" />{/if}
|
||||
{isEdit ? 'Actualizar' : 'Guardar'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed bottom-0 left-0 right-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-t shadow-lg z-[5] group-has-data-[state=collapsed]/sidebar-wrapper:ml-[calc(var(--sidebar-width-icon))] ml-[calc(var(--sidebar-width))]">
|
||||
<div class="px-4 py-4 space-y-4 max-w-[1400px] mx-auto">
|
||||
<Tabs.Root bind:value={activeTab}>
|
||||
<div class="w-full overflow-x-auto pb-2">
|
||||
{#if formType === 'fa'}
|
||||
<Tabs.List class="inline-flex md:grid md:w-full md:grid-cols-3">
|
||||
<Tabs.Trigger value="general" class="whitespace-nowrap">
|
||||
<Package size={16} class="mr-2" />
|
||||
General
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="cont1" class="whitespace-nowrap">
|
||||
<FileText size={16} class="mr-2" />
|
||||
Continuación 1
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="cont2" class="whitespace-nowrap">
|
||||
<Settings size={16} class="mr-2" />
|
||||
Continuación 2
|
||||
</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
{:else}
|
||||
<Tabs.List class="inline-flex md:grid md:w-full md:grid-cols-4">
|
||||
<Tabs.Trigger value="general" class="whitespace-nowrap">
|
||||
<Package size={16} class="mr-2" />
|
||||
General
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="opciones" class="whitespace-nowrap">
|
||||
<Settings size={16} class="mr-2" />
|
||||
Opciones
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="opcionales2" class="whitespace-nowrap">
|
||||
<FileText size={16} class="mr-2" />
|
||||
Opcionales 2
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger value="otros" class="whitespace-nowrap">
|
||||
<DollarSign size={16} class="mr-2" />
|
||||
Otros
|
||||
</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
{/if}
|
||||
</div>
|
||||
</Tabs.Root>
|
||||
|
||||
<div class="flex justify-end gap-3">
|
||||
<Button type="button" variant="outline" href="/dashboard/goods/parts" disabled={loading}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="button" onclick={handleSubmit} disabled={loading}>
|
||||
{#if loading}
|
||||
<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
|
||||
Guardando...
|
||||
{:else}
|
||||
<Save size={16} class="mr-2" />
|
||||
{isEdit ? 'Actualizar' : 'Guardar'}
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ClientSelectorDialog bind:open={showClientModal} onSelect={handleClientSelect} />
|
||||
@@ -702,6 +807,9 @@
|
||||
<MaterialTypeSelectorDialog bind:open={showMaterialModal} onSelect={handleMaterialSelect} />
|
||||
<UnitMeasureSelectorDialog bind:open={showUOMModal} onSelect={handleUOMSelect} />
|
||||
<UnitMeasureSelectorDialog bind:open={showAltUOMModal} onSelect={handleAltUOMSelect} />
|
||||
<CurrencySelectorDialog bind:open={showCurrencyModal} onSelect={handleCurrencySelect} />
|
||||
<CountrySelectorDialog bind:open={showCountryModal} onSelect={handleCountrySelect} />
|
||||
<FractionSelectorDialog bind:open={showFractionModal} onSelect={handleFractionSelect} />
|
||||
|
||||
<style>
|
||||
:global(.required::after) {
|
||||
|
||||
Reference in New Issue
Block a user