Merge pull request 'Se agegaron rutas para clientes/proveedores asi como a las agencias aduanales' (#27) from Feature/Rutas_Clientes_agentesAduanales into feature/facturas
Reviewed-on: ADUANASOFT/anexo76#27
This commit is contained in:
@@ -195,7 +195,7 @@
|
||||
Gestiona el catálogo de clientes y proveedores de tu empresa
|
||||
</p>
|
||||
</div>
|
||||
<Button onclick={handleCreateClick}>
|
||||
<Button href="/dashboard/clients_and_providers/new">
|
||||
<Plus class="mr-2" size={16} />
|
||||
Nuevo Cliente/Proveedor
|
||||
</Button>
|
||||
|
||||
@@ -0,0 +1,438 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import { Label } from "$lib/components/ui/label";
|
||||
import * as Card from "$lib/components/ui/card";
|
||||
import * as Select from "$lib/components/ui/select";
|
||||
import { clientsProvidersApi, type CreateClientProviderData } from "$lib/api/dashboard/a76/clients-providers";
|
||||
import { companyStore } from "$lib/stores/company.svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
import { ArrowLeft } from "lucide-svelte";
|
||||
|
||||
// Sincronizar token de cookies a localStorage al montar el componente
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let formData = $state({
|
||||
rfc: "",
|
||||
name: "",
|
||||
curp: "",
|
||||
residence_country: "",
|
||||
domicile_fiscal: "",
|
||||
foreign_tax_id: "",
|
||||
client_or_provider: "client",
|
||||
is_active: true,
|
||||
// Address fields
|
||||
street: "",
|
||||
neighborhood: "",
|
||||
city: "",
|
||||
state: "",
|
||||
country: "",
|
||||
zip_code: "",
|
||||
// Programs fields
|
||||
program_code: "",
|
||||
authorization_date: ""
|
||||
});
|
||||
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
// Formulario inicializado vacío para nuevo registro
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!companyStore.activeCompany) {
|
||||
error = "No hay compañía seleccionada";
|
||||
return;
|
||||
}
|
||||
|
||||
// Validaciones básicas
|
||||
if (!formData.rfc.trim()) {
|
||||
error = "El RFC es obligatorio";
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.name.trim()) {
|
||||
error = "El nombre es obligatorio";
|
||||
return;
|
||||
}
|
||||
|
||||
loading = true;
|
||||
error = null;
|
||||
|
||||
// Verificar que tenemos token de acceso
|
||||
const token = localStorage.getItem('access_token');
|
||||
if (!token) {
|
||||
error = "No hay token de acceso. Recargando página...";
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const payload: CreateClientProviderData = {
|
||||
rfc: formData.rfc,
|
||||
name: formData.name,
|
||||
curp: formData.curp || null,
|
||||
residence_country: formData.residence_country || null,
|
||||
domicile_fiscal: formData.domicile_fiscal || null,
|
||||
foreign_tax_id: formData.foreign_tax_id || null,
|
||||
client_or_provider: formData.client_or_provider as "client" | "provider" | "both" | null,
|
||||
is_active: formData.is_active,
|
||||
address: {
|
||||
street: formData.street || null,
|
||||
neighborhood: formData.neighborhood || null,
|
||||
city: formData.city || null,
|
||||
state: formData.state || null,
|
||||
country: formData.country || null,
|
||||
zip_code: formData.zip_code || null,
|
||||
},
|
||||
programs: {
|
||||
program_code: formData.program_code || null,
|
||||
authorization_date: formData.authorization_date || null,
|
||||
}
|
||||
};
|
||||
|
||||
const response = await clientsProvidersApi.create(companyStore.activeCompany.id, payload);
|
||||
|
||||
if (response.error) {
|
||||
console.error('🔧 Error del API:', response);
|
||||
if (response.status === 401) {
|
||||
error = 'Sesión expirada. Recargando página...';
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
} else if (response.status === 403) {
|
||||
error = 'No tienes permisos para crear clientes/proveedores';
|
||||
} else if (response.status === 500) {
|
||||
error = 'Error interno del servidor. Intenta nuevamente.';
|
||||
} else if (response.status === 0 || !response.status) {
|
||||
error = 'Error de conexión. Verifica tu internet y que el servidor esté corriendo.';
|
||||
} else {
|
||||
error = response.error || 'Error desconocido al guardar';
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Éxito - redirigir a la lista
|
||||
goto('/dashboard/clients_and_providers');
|
||||
} catch (e) {
|
||||
console.error("🔧 Error en catch:", e);
|
||||
if (e instanceof TypeError && e.message.includes('fetch')) {
|
||||
error = "Error de conexión: No se puede conectar con el servidor";
|
||||
} else {
|
||||
error = e instanceof Error ? e.message : "Error al guardar";
|
||||
}
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
formData = {
|
||||
rfc: "",
|
||||
name: "",
|
||||
curp: "",
|
||||
residence_country: "",
|
||||
domicile_fiscal: "",
|
||||
foreign_tax_id: "",
|
||||
client_or_provider: "client",
|
||||
is_active: true,
|
||||
street: "",
|
||||
neighborhood: "",
|
||||
city: "",
|
||||
state: "",
|
||||
country: "",
|
||||
zip_code: "",
|
||||
program_code: "",
|
||||
authorization_date: ""
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-4">
|
||||
<Button variant="ghost" size="icon" onclick={() => goto('/dashboard/clients_and_providers')}>
|
||||
<ArrowLeft class="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold tracking-tight">Nuevo Cliente/Proveedor</h1>
|
||||
<p class="text-muted-foreground">
|
||||
Completa los datos para crear un nuevo cliente o proveedor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Formulario -->
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>Información del Cliente/Proveedor</Card.Title>
|
||||
<Card.Description>
|
||||
Todos los campos marcados con * son obligatorios
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<form id="client-provider-form" onsubmit={handleSubmit} class="space-y-6">
|
||||
{#if error}
|
||||
<div class="rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Información básica -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold">Información Básica</h3>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="rfc">RFC *</Label>
|
||||
<Input
|
||||
id="rfc"
|
||||
bind:value={formData.rfc}
|
||||
placeholder="Ej: XAXX010101000"
|
||||
maxlength={13}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="client_or_provider">Tipo *</Label>
|
||||
<Select.Root value={formData.client_or_provider} onValueChange={(value) => (formData.client_or_provider = value || "client")}>
|
||||
<Select.Trigger>
|
||||
<Select.Value />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Item value="client">Cliente</Select.Item>
|
||||
<Select.Item value="provider">Proveedor</Select.Item>
|
||||
<Select.Item value="both">Ambos</Select.Item>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="name">Nombre / Razón Social *</Label>
|
||||
<Input
|
||||
id="name"
|
||||
bind:value={formData.name}
|
||||
placeholder="Nombre completo o razón social"
|
||||
maxlength={256}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="curp">CURP</Label>
|
||||
<Input
|
||||
id="curp"
|
||||
bind:value={formData.curp}
|
||||
placeholder="Ej: XAXX010101HDFXXX00"
|
||||
maxlength={18}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="residence_country">País de Residencia</Label>
|
||||
<Input
|
||||
id="residence_country"
|
||||
bind:value={formData.residence_country}
|
||||
placeholder="Ej: México"
|
||||
maxlength={64}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Información fiscal -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold">Información Fiscal</h3>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="domicile_fiscal">Domicilio Fiscal</Label>
|
||||
<Input
|
||||
id="domicile_fiscal"
|
||||
bind:value={formData.domicile_fiscal}
|
||||
placeholder="Domicilio fiscal completo"
|
||||
maxlength={256}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="foreign_tax_id">ID Fiscal Extranjero</Label>
|
||||
<Input
|
||||
id="foreign_tax_id"
|
||||
bind:value={formData.foreign_tax_id}
|
||||
placeholder="Para contribuyentes extranjeros"
|
||||
maxlength={64}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dirección -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold">Dirección</h3>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="street">Calle</Label>
|
||||
<Input
|
||||
id="street"
|
||||
bind:value={formData.street}
|
||||
placeholder="Calle y número"
|
||||
maxlength={256}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="neighborhood">Colonia</Label>
|
||||
<Input
|
||||
id="neighborhood"
|
||||
bind:value={formData.neighborhood}
|
||||
placeholder="Colonia o barrio"
|
||||
maxlength={128}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="zip_code">Código Postal</Label>
|
||||
<Input
|
||||
id="zip_code"
|
||||
bind:value={formData.zip_code}
|
||||
placeholder="Ej: 12345"
|
||||
maxlength={10}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="city">Ciudad</Label>
|
||||
<Input
|
||||
id="city"
|
||||
bind:value={formData.city}
|
||||
placeholder="Ciudad"
|
||||
maxlength={128}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="state">Estado</Label>
|
||||
<Input
|
||||
id="state"
|
||||
bind:value={formData.state}
|
||||
placeholder="Estado o provincia"
|
||||
maxlength={128}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="country">País</Label>
|
||||
<Input
|
||||
id="country"
|
||||
bind:value={formData.country}
|
||||
placeholder="País"
|
||||
maxlength={64}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Programas -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold">Programas</h3>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="program_code">Código de Programa</Label>
|
||||
<Input
|
||||
id="program_code"
|
||||
bind:value={formData.program_code}
|
||||
placeholder="Código del programa"
|
||||
maxlength={32}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="authorization_date">Fecha de Autorización</Label>
|
||||
<Input
|
||||
id="authorization_date"
|
||||
type="date"
|
||||
bind:value={formData.authorization_date}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
||||
<!-- Botones fijos en la parte inferior -->
|
||||
<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-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
|
||||
<Button type="button" variant="outline" onclick={() => goto('/dashboard/clients_and_providers')} disabled={loading}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="button" variant="outline" onclick={resetForm} disabled={loading}>
|
||||
Limpiar
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
form="client-provider-form"
|
||||
disabled={loading}
|
||||
>
|
||||
{#if loading}
|
||||
<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>
|
||||
Guardando...
|
||||
</div>
|
||||
{:else}
|
||||
Crear Cliente/Proveedor
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Espaciado para evitar que los botones fijos oculten contenido -->
|
||||
<div class="h-20"></div>
|
||||
@@ -175,7 +175,7 @@
|
||||
Gestiona el catálogo de agentes aduanales
|
||||
</p>
|
||||
</div>
|
||||
<Button onclick={handleCreateClick}>
|
||||
<Button href="/dashboard/customs_brokers/new" >
|
||||
<Plus class="mr-2" size={16} />
|
||||
Nuevo Agente Aduanal
|
||||
</Button>
|
||||
|
||||
395
frontend/src/routes/dashboard/customs_brokers/new/+page.svelte
Normal file
395
frontend/src/routes/dashboard/customs_brokers/new/+page.svelte
Normal file
@@ -0,0 +1,395 @@
|
||||
<script lang="ts">
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
import { Input } from "$lib/components/ui/input";
|
||||
import { Label } from "$lib/components/ui/label";
|
||||
import * as Card from "$lib/components/ui/card";
|
||||
import { customsBrokersApi, type CreateCustomsBrokerData } from "$lib/api/dashboard/a76/customs-brokers";
|
||||
import { companyStore } from "$lib/stores/company.svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
import { ArrowLeft } from "lucide-svelte";
|
||||
|
||||
|
||||
// Eliminar props de modal ya que ahora es una página
|
||||
// let { open = $bindable(false), onSuccess }: { open: boolean; onSuccess?: () => void; } = $props();
|
||||
|
||||
|
||||
let formData = $state({
|
||||
broker_key: "",
|
||||
name: "",
|
||||
type: "",
|
||||
address: "",
|
||||
postal_code: "",
|
||||
city: "",
|
||||
state: "",
|
||||
phone: "",
|
||||
fax: "",
|
||||
email: "",
|
||||
country: "",
|
||||
tax_id: "",
|
||||
personal_id: "",
|
||||
position: "",
|
||||
license: "",
|
||||
company: "",
|
||||
contact: ""
|
||||
});
|
||||
|
||||
let loading = $state(false);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!companyStore.activeCompany) {
|
||||
error = "No hay compañía seleccionada";
|
||||
return;
|
||||
}
|
||||
|
||||
loading = true;
|
||||
error = null;
|
||||
|
||||
try {
|
||||
const payload: CreateCustomsBrokerData = {
|
||||
broker_key: formData.broker_key,
|
||||
name: formData.name || null,
|
||||
type: formData.type || null,
|
||||
address: formData.address || null,
|
||||
postal_code: formData.postal_code || null,
|
||||
city: formData.city || null,
|
||||
state: formData.state || null,
|
||||
phone: formData.phone || null,
|
||||
fax: formData.fax || null,
|
||||
email: formData.email || null,
|
||||
country: formData.country || null,
|
||||
tax_id: formData.tax_id || null,
|
||||
personal_id: formData.personal_id || null,
|
||||
position: formData.position || null,
|
||||
license: formData.license || null,
|
||||
company: formData.company || null,
|
||||
contact: formData.contact || null,
|
||||
tenant_id: "1", // TODO: Get from user context
|
||||
company_id: companyStore.activeCompany.id.toString()
|
||||
};
|
||||
|
||||
const response = await customsBrokersApi.create(payload);
|
||||
|
||||
if (response.error) {
|
||||
if (response.status === 409) {
|
||||
error = 'Ya existe un agente aduanal con la clave proporcionada.';
|
||||
} else
|
||||
if (response.status === 401) {
|
||||
error = 'Sesión expirada. Recargando página...';
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
} else {
|
||||
error = response.error;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Éxito - redirigir a la lista
|
||||
goto('/dashboard/customs_brokers');
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : "Error al guardar";
|
||||
console.error("Error saving:", e);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
// Limpiar formulario
|
||||
formData = {
|
||||
broker_key: "",
|
||||
name: "",
|
||||
type: "",
|
||||
address: "",
|
||||
postal_code: "",
|
||||
city: "",
|
||||
state: "",
|
||||
phone: "",
|
||||
fax: "",
|
||||
email: "",
|
||||
country: "",
|
||||
tax_id: "",
|
||||
personal_id: "",
|
||||
position: "",
|
||||
license: "",
|
||||
company: "",
|
||||
contact: ""
|
||||
};
|
||||
error = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center gap-4">
|
||||
<Button variant="ghost" size="icon" onclick={() => goto('/dashboard/customs_brokers')}>
|
||||
<ArrowLeft class="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold tracking-tight">Nuevo Agente Aduanal</h1>
|
||||
<p class="text-muted-foreground">
|
||||
Completa los datos para crear un nuevo agente aduanal
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Formulario -->
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>Información del Agente Aduanal</Card.Title>
|
||||
<Card.Description>
|
||||
Todos los campos marcados con * son obligatorios
|
||||
</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<form onsubmit={handleSubmit} class="space-y-6">
|
||||
{#if error}
|
||||
<div class="rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Información básica -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold">Información Básica</h3>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="broker_key">Clave *</Label>
|
||||
<Input
|
||||
id="broker_key"
|
||||
bind:value={formData.broker_key}
|
||||
placeholder="Ej: 12345"
|
||||
maxlength={5}
|
||||
required
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="type">Tipo</Label>
|
||||
<Input
|
||||
id="type"
|
||||
bind:value={formData.type}
|
||||
placeholder="Tipo de agente"
|
||||
maxlength={9}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="name">Nombre</Label>
|
||||
<Input
|
||||
id="name"
|
||||
bind:value={formData.name}
|
||||
placeholder="Nombre del agente aduanal"
|
||||
maxlength={80}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="license">Patente</Label>
|
||||
<Input
|
||||
id="license"
|
||||
bind:value={formData.license}
|
||||
placeholder="Número de patente"
|
||||
maxlength={4}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="company">Empresa</Label>
|
||||
<Input
|
||||
id="company"
|
||||
bind:value={formData.company}
|
||||
placeholder="Empresa del agente"
|
||||
maxlength={200}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Información de contacto -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold">Información de Contacto</h3>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="phone">Teléfono</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
bind:value={formData.phone}
|
||||
placeholder="Número telefónico"
|
||||
maxlength={30}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="fax">Fax</Label>
|
||||
<Input
|
||||
id="fax"
|
||||
bind:value={formData.fax}
|
||||
placeholder="Número de fax"
|
||||
maxlength={30}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
bind:value={formData.email}
|
||||
placeholder="correo@ejemplo.com"
|
||||
maxlength={100}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="contact">Contacto</Label>
|
||||
<Input
|
||||
id="contact"
|
||||
bind:value={formData.contact}
|
||||
placeholder="Nombre del contacto"
|
||||
maxlength={80}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dirección -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold">Dirección</h3>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="address">Dirección</Label>
|
||||
<Input
|
||||
id="address"
|
||||
bind:value={formData.address}
|
||||
placeholder="Calle y número"
|
||||
maxlength={1500}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="postal_code">Código Postal</Label>
|
||||
<Input
|
||||
id="postal_code"
|
||||
bind:value={formData.postal_code}
|
||||
placeholder="C.P."
|
||||
maxlength={15}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="city">Ciudad</Label>
|
||||
<Input
|
||||
id="city"
|
||||
bind:value={formData.city}
|
||||
placeholder="Ciudad"
|
||||
maxlength={30}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="state">Estado</Label>
|
||||
<Input
|
||||
id="state"
|
||||
bind:value={formData.state}
|
||||
placeholder="Estado"
|
||||
maxlength={30}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="country">País</Label>
|
||||
<Input
|
||||
id="country"
|
||||
bind:value={formData.country}
|
||||
placeholder="País"
|
||||
maxlength={3}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Información fiscal -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-sm font-semibold">Información Fiscal</h3>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="tax_id">RFC</Label>
|
||||
<Input
|
||||
id="tax_id"
|
||||
bind:value={formData.tax_id}
|
||||
placeholder="RFC"
|
||||
maxlength={30}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="personal_id">CURP</Label>
|
||||
<Input
|
||||
id="personal_id"
|
||||
bind:value={formData.personal_id}
|
||||
placeholder="CURP"
|
||||
maxlength={20}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="position">Posición</Label>
|
||||
<Input
|
||||
id="position"
|
||||
bind:value={formData.position}
|
||||
placeholder="Cargo o posición"
|
||||
maxlength={30}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed bottom-0 right-0 left-0 md:left-64 py-2 px-4 border-t bg-background/95 backdrop-blur z-50 flex justify-end gap-4 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
|
||||
<Button type="button" variant="outline" onclick={() => goto('/dashboard/customs_brokers')} disabled={loading}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button type="button" variant="outline" onclick={resetForm} disabled={loading}>
|
||||
Limpiar
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{#if loading}
|
||||
<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>
|
||||
Guardando...
|
||||
</div>
|
||||
{:else}
|
||||
Crear Agente Aduanal
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
Reference in New Issue
Block a user