feat: Implement create/edit dialog for pedimentos management

- Added create-edit-dialog component for creating and editing pedimentos. - Integrated dialog with data table actions for editing existing pedimentos. - Implemented infinite scroll functionality in the data table for loading more pedimentos. - Enhanced server-side loading of pedimentos with authentication checks. - Added filtering options for pedimentos based on status, client ID, and year. - Improved error handling and user feedback for actions like creating, editing, and deleting pedimentos.
2025-11-06 18:35:47 -06:00
parent 07dfe1edb1
commit cf18c8e07d
43 changed files with 1609 additions and 106 deletions
--- a/frontend/src/lib/api/dashboard/a76/pedimentos.ts
+++ b/frontend/src/lib/api/dashboard/a76/pedimentos.ts
@@ -0,0 +1,126 @@
+/**
+ * API Client para Pedimentos
+ * Gestiona las operaciones CRUD para pedimentos
+ */
+import { api } from '$lib/api';
+
+export interface Pedimento {
+	id: number;
+	tenant_id: number;
+	year?: string | null;
+	customs_office?: string | null;
+	license?: string | null;
+	pedimento_number?: string | null;
+	client_id?: number | null;
+	operation_type?: number | null;
+	pedimento_type?: number | null;
+	pedimento_key?: string | null;
+	regime?: string | null;
+	status?: string | null;
+	usd_value?: number | null;
+	paid_price?: number | null;
+	gross_weight?: number | null;
+	exchange_rate?: number | null;
+	created_at: string;
+}
+
+export interface PedimentoListResponse {
+	items: Pedimento[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreatePedimentoData {
+	year?: string | null;
+	customs_office?: string | null;
+	license?: string | null;
+	pedimento_number?: string | null;
+	client_id?: number | null;
+	operation_type?: number | null;
+	pedimento_type?: number | null;
+	pedimento_key?: string | null;
+	regime?: string | null;
+	status?: string | null;
+	usd_value?: number | null;
+	paid_price?: number | null;
+	gross_weight?: number | null;
+	exchange_rate?: number | null;
+}
+
+export interface UpdatePedimentoData {
+	year?: string | null;
+	customs_office?: string | null;
+	license?: string | null;
+	pedimento_number?: string | null;
+	client_id?: number | null;
+	operation_type?: number | null;
+	pedimento_type?: number | null;
+	pedimento_key?: string | null;
+	regime?: string | null;
+	status?: string | null;
+	usd_value?: number | null;
+	paid_price?: number | null;
+	gross_weight?: number | null;
+	exchange_rate?: number | null;
+}
+
+export interface PedimentoFilters {
+	status?: string;
+	client_id?: number;
+	year?: string;
+}
+
+/**
+ * API para Pedimentos
+ */
+export const pedimentosApi = {
+	/**
+	 * Lista todos los pedimentos con paginación y filtros
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 * @param filters - Filtros opcionales
+	 */
+	list: (page = 1, pageSize = 50, filters?: PedimentoFilters) => {
+		let url = `/v1/a76/pedimentos?page=${page}&page_size=${pageSize}`;
+		
+		if (filters?.status) {
+			url += `&status=${encodeURIComponent(filters.status)}`;
+		}
+		if (filters?.client_id) {
+			url += `&client_id=${filters.client_id}`;
+		}
+		if (filters?.year) {
+			url += `&year=${encodeURIComponent(filters.year)}`;
+		}
+		
+		return api.get<PedimentoListResponse>(url);
+	},
+
+	/**
+	 * Obtiene un pedimento por ID
+	 * @param id - ID del pedimento
+	 */
+	get: (id: number) => api.get<Pedimento>(`/v1/a76/pedimentos/${id}`),
+
+	/**
+	 * Crea un nuevo pedimento
+	 * @param data - Datos del pedimento a crear
+	 */
+	create: (data: CreatePedimentoData) =>
+		api.post<Pedimento>('/v1/a76/pedimentos', data),
+
+	/**
+	 * Actualiza un pedimento existente
+	 * @param id - ID del pedimento a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (id: number, data: UpdatePedimentoData) =>
+		api.put<Pedimento>(`/v1/a76/pedimentos/${id}`, data),
+
+	/**
+	 * Elimina un pedimento
+	 * @param id - ID del pedimento a eliminar
+	 */
+	delete: (id: number) => api.delete(`/v1/a76/pedimentos/${id}`)
+};
--- a/frontend/src/lib/api/dashboard/refrence_data/code_pedimento_regimens.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/code_pedimento_regimens.ts
@@ -41,7 +41,7 @@ export const codePedimentoRegimensApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<CodePedimentoRegimenListResponse>(
-			`/v1/code-pedimento-regimens?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/code-pedimento-regimens?page=${page}&page_size=${pageSize}`
 		),

 	/**
@@ -55,7 +55,7 @@ export const codePedimentoRegimensApi = {
 	 * @param data - Datos del code pedimento regimen a crear
 	 */
 	create: (data: CreateCodePedimentoRegimenData) =>
-		api.post<CodePedimentoRegimen>('/v1/code-pedimento-regimens', data),
+		api.post<CodePedimentoRegimen>('/v1/public/refrence_data/code-pedimento-regimens', data),

 	/**
 	 * Actualiza un code pedimento regimen existente
@@ -63,11 +63,11 @@ export const codePedimentoRegimensApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (id: number, data: UpdateCodePedimentoRegimenData) =>
-		api.put<CodePedimentoRegimen>(`/v1/code-pedimento-regimens/${id}`, data),
+		api.put<CodePedimentoRegimen>(`/v1/public/refrence_data/code-pedimento-regimens/${id}`, data),

 	/**
 	 * Elimina un code pedimento regimen
 	 * @param id - ID del code pedimento regimen a eliminar
 	 */
-	delete: (id: number) => api.delete(`/v1/code-pedimento-regimens/${id}`)
+	delete: (id: number) => api.delete(`/v1/public/refrence_data/code-pedimento-regimens/${id}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/containers.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/containers.ts
@@ -37,7 +37,7 @@ export const containersApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<ContainerListResponse>(
-			`/v1/containers?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/containers?page=${page}&page_size=${pageSize}`
 		),

 	/**
@@ -51,7 +51,7 @@ export const containersApi = {
 	 * @param data - Datos del container a crear
 	 */
 	create: (data: CreateContainerData) =>
-		api.post<Container>('/v1/containers', data),
+		api.post<Container>('/v1/public/refrence_data/containers', data),

 	/**
 	 * Actualiza un container existente
@@ -59,11 +59,11 @@ export const containersApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (key: number, data: UpdateContainerData) =>
-		api.put<Container>(`/v1/containers/${key}`, data),
+		api.put<Container>(`/v1/public/refrence_data/containers/${key}`, data),

 	/**
 	 * Elimina un container
 	 * @param key - ID del container a eliminar
 	 */
-	delete: (key: number) => api.delete(`/v1/containers/${key}`)
+	delete: (key: number) => api.delete(`/v1/public/refrence_data/containers/${key}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/countries.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/countries.ts
@@ -46,21 +46,21 @@ export const countriesApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<CountryListResponse>(
-			`/v1/countries?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/countries?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene un país por su clave M3
 	 * @param m3_key - Clave M3 del país
 	 */
-	get: (m3_key: string) => api.get<Country>(`/v1/countries/${m3_key}`),
+	get: (m3_key: string) => api.get<Country>(`/v1/public/refrence_data/countries/${m3_key}`),

 	/**
 	 * Crea un nuevo país
 	 * @param data - Datos del país a crear
 	 */
 	create: (data: CreateCountryData) =>
-		api.post<Country>('/v1/countries', data),
+		api.post<Country>('/v1/public/refrence_data/countries', data),

 	/**
 	 * Actualiza un país existente
@@ -68,11 +68,11 @@ export const countriesApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (m3_key: string, data: UpdateCountryData) =>
-		api.put<Country>(`/v1/countries/${m3_key}`, data),
+		api.put<Country>(`/v1/public/refrence_data/countries/${m3_key}`, data),

 	/**
 	 * Elimina un país
 	 * @param m3_key - Clave M3 del país a eliminar
 	 */
-	delete: (m3_key: string) => api.delete(`/v1/countries/${m3_key}`)
+	delete: (m3_key: string) => api.delete(`/v1/public/refrence_data/countries/${m3_key}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/currency_types.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/currency_types.ts
@@ -40,21 +40,21 @@ export const currencyTypesApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<CurrencyTypeListResponse>(
-			`/v1/currency-types?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/currency-types?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene un tipo de moneda por código
 	 * @param code - Código del tipo de moneda
 	 */
-	get: (code: string) => api.get<CurrencyType>(`/v1/currency-types/${code}`),
+	get: (code: string) => api.get<CurrencyType>(`/v1/public/refrence_data/currency-types/${code}`),

 	/**
 	 * Crea un nuevo tipo de moneda
 	 * @param data - Datos del tipo de moneda a crear
 	 */
 	create: (data: CreateCurrencyTypeData) =>
-		api.post<CurrencyType>('/v1/currency-types', data),
+		api.post<CurrencyType>('/v1/public/refrence_data/currency-types', data),

 	/**
 	 * Actualiza un tipo de moneda existente
@@ -62,11 +62,11 @@ export const currencyTypesApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (code: string, data: UpdateCurrencyTypeData) =>
-		api.put<CurrencyType>(`/v1/currency-types/${code}`, data),
+		api.put<CurrencyType>(`/v1/public/refrence_data/currency-types/${code}`, data),

 	/**
 	 * Elimina un tipo de moneda
 	 * @param code - Código del tipo de moneda a eliminar
 	 */
-	delete: (code: string) => api.delete(`/v1/currency-types/${code}`)
+	delete: (code: string) => api.delete(`/v1/public/refrence_data/currency-types/${code}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/customs_sections.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/customs_sections.ts
@@ -37,21 +37,21 @@ export const customsSectionsApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<CustomsSectionListResponse>(
-			`/v1/customs-sections?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/customs-sections?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene una sección aduanera por código
 	 * @param customs_code - Código de la sección aduanera
 	 */
-	get: (customs_code: string) => api.get<CustomsSection>(`/v1/customs-sections/${customs_code}`),
+	get: (customs_code: string) => api.get<CustomsSection>(`/v1/public/refrence_data/customs-sections/${customs_code}`),

 	/**
 	 * Crea una nueva sección aduanera
 	 * @param data - Datos de la sección aduanera a crear
 	 */
 	create: (data: CreateCustomsSectionData) =>
-		api.post<CustomsSection>('/v1/customs-sections', data),
+		api.post<CustomsSection>('/v1/public/refrence_data/customs-sections', data),

 	/**
 	 * Actualiza una sección aduanera existente
@@ -59,11 +59,11 @@ export const customsSectionsApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (customs_code: string, data: UpdateCustomsSectionData) =>
-		api.put<CustomsSection>(`/v1/customs-sections/${customs_code}`, data),
+		api.put<CustomsSection>(`/v1/public/refrence_data/customs-sections/${customs_code}`, data),

 	/**
 	 * Elimina una sección aduanera
 	 * @param customs_code - Código de la sección aduanera a eliminar
 	 */
-	delete: (customs_code: string) => api.delete(`/v1/customs-sections/${customs_code}`)
+	delete: (customs_code: string) => api.delete(`/v1/public/refrence_data/customs-sections/${customs_code}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/customs_warehouses.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/customs_warehouses.ts
@@ -40,7 +40,7 @@ export const customsWarehousesApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<CustomsWarehouseListResponse>(
-			`/v1/customs-warehouses?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/customs-warehouses?page=${page}&page_size=${pageSize}`
 		),

 	/**
@@ -49,14 +49,14 @@ export const customsWarehousesApi = {
 	 * @param customs - Aduana asociada
 	 */
 	get: (key: string, customs: string) => 
-		api.get<CustomsWarehouse>(`/v1/customs-warehouses/${key}/${customs}`),
+		api.get<CustomsWarehouse>(`/v1/public/refrence_data/customs-warehouses/${key}/${customs}`),

 	/**
 	 * Crea un nuevo recinto fiscalizado
 	 * @param data - Datos del recinto fiscalizado a crear
 	 */
 	create: (data: CreateCustomsWarehouseData) =>
-		api.post<CustomsWarehouse>('/v1/customs-warehouses', data),
+		api.post<CustomsWarehouse>('/v1/public/refrence_data/customs-warehouses', data),

 	/**
 	 * Actualiza un recinto fiscalizado existente
@@ -65,7 +65,7 @@ export const customsWarehousesApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (key: string, customs: string, data: UpdateCustomsWarehouseData) =>
-		api.put<CustomsWarehouse>(`/v1/customs-warehouses/${key}/${customs}`, data),
+		api.put<CustomsWarehouse>(`/v1/public/refrence_data/customs-warehouses/${key}/${customs}`, data),

 	/**
 	 * Elimina un recinto fiscalizado
@@ -73,5 +73,5 @@ export const customsWarehousesApi = {
 	 * @param customs - Aduana asociada
 	 */
 	delete: (key: string, customs: string) => 
-		api.delete(`/v1/customs-warehouses/${key}/${customs}`)
+		api.delete(`/v1/public/refrence_data/customs-warehouses/${key}/${customs}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/incoterms.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/incoterms.ts
@@ -40,21 +40,21 @@ export const incotermsApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<IncotermListResponse>(
-			`/v1/incoterms?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/incoterms?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene un incoterm por código
 	 * @param code - Código del incoterm
 	 */
-	get: (code: string) => api.get<Incoterm>(`/v1/incoterms/${code}`),
+	get: (code: string) => api.get<Incoterm>(`/v1/public/refrence_data/incoterms/${code}`),

 	/**
 	 * Crea un nuevo incoterm
 	 * @param data - Datos del incoterm a crear
 	 */
 	create: (data: CreateIncotermData) =>
-		api.post<Incoterm>('/v1/incoterms', data),
+		api.post<Incoterm>('/v1/public/refrence_data/incoterms', data),

 	/**
 	 * Actualiza un incoterm existente
@@ -62,11 +62,11 @@ export const incotermsApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (code: string, data: UpdateIncotermData) =>
-		api.put<Incoterm>(`/v1/incoterms/${code}`, data),
+		api.put<Incoterm>(`/v1/public/refrence_data/incoterms/${code}`, data),

 	/**
 	 * Elimina un incoterm
 	 * @param code - Código del incoterm a eliminar
 	 */
-	delete: (code: string) => api.delete(`/v1/incoterms/${code}`)
+	delete: (code: string) => api.delete(`/v1/public/refrence_data/incoterms/${code}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/invoice_types.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/invoice_types.ts
@@ -43,21 +43,21 @@ export const invoiceTypesApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<InvoiceTypeListResponse>(
-			`/v1/invoice-types?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/invoice-types?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene un tipo de factura por key
 	 * @param key - Clave del tipo de factura
 	 */
-	get: (key: string) => api.get<InvoiceType>(`/v1/invoice-types/${key}`),
+	get: (key: string) => api.get<InvoiceType>(`/v1/public/refrence_data/invoice-types/${key}`),

 	/**
 	 * Crea un nuevo tipo de factura
 	 * @param data - Datos del tipo de factura a crear
 	 */
 	create: (data: CreateInvoiceTypeData) =>
-		api.post<InvoiceType>('/v1/invoice-types', data),
+		api.post<InvoiceType>('/v1/public/refrence_data/invoice-types', data),

 	/**
 	 * Actualiza un tipo de factura existente
@@ -65,11 +65,11 @@ export const invoiceTypesApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (key: string, data: UpdateInvoiceTypeData) =>
-		api.put<InvoiceType>(`/v1/invoice-types/${key}`, data),
+		api.put<InvoiceType>(`/v1/public/refrence_data/invoice-types/${key}`, data),

 	/**
 	 * Elimina un tipo de factura
 	 * @param key - Clave del tipo de factura a eliminar
 	 */
-	delete: (key: string) => api.delete(`/v1/invoice-types/${key}`)
+	delete: (key: string) => api.delete(`/v1/public/refrence_data/invoice-types/${key}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/material_types.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/material_types.ts
@@ -40,21 +40,21 @@ export const materialTypesApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<MaterialTypeListResponse>(
-			`/v1/material-types?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/material-types?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene un tipo de material por key
 	 * @param key - Clave del tipo de material
 	 */
-	get: (key: string) => api.get<MaterialType>(`/v1/material-types/${key}`),
+	get: (key: string) => api.get<MaterialType>(`/v1/public/refrence_data/material-types/${key}`),

 	/**
 	 * Crea un nuevo tipo de material
 	 * @param data - Datos del tipo de material a crear
 	 */
 	create: (data: CreateMaterialTypeData) =>
-		api.post<MaterialType>('/v1/material-types', data),
+		api.post<MaterialType>('/v1/public/refrence_data/material-types', data),

 	/**
 	 * Actualiza un tipo de material existente
@@ -62,11 +62,11 @@ export const materialTypesApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (key: string, data: UpdateMaterialTypeData) =>
-		api.put<MaterialType>(`/v1/material-types/${key}`, data),
+		api.put<MaterialType>(`/v1/public/refrence_data/material-types/${key}`, data),

 	/**
 	 * Elimina un tipo de material
 	 * @param key - Clave del tipo de material a eliminar
 	 */
-	delete: (key: string) => api.delete(`/v1/material-types/${key}`)
+	delete: (key: string) => api.delete(`/v1/public/refrence_data/material-types/${key}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/payment_methods.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/payment_methods.ts
@@ -37,21 +37,21 @@ export const paymentMethodsApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<PaymentMethodListResponse>(
-			`/v1/payment-methods?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/payment-methods?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene un método de pago por key
 	 * @param key - Clave del método de pago
 	 */
-	get: (key: string) => api.get<PaymentMethod>(`/v1/payment-methods/${key}`),
+	get: (key: string) => api.get<PaymentMethod>(`/v1/public/refrence_data/payment-methods/${key}`),

 	/**
 	 * Crea un nuevo método de pago
 	 * @param data - Datos del método de pago a crear
 	 */
 	create: (data: CreatePaymentMethodData) =>
-		api.post<PaymentMethod>('/v1/payment-methods', data),
+		api.post<PaymentMethod>('/v1/public/refrence_data/payment-methods', data),

 	/**
 	 * Actualiza un método de pago existente
@@ -59,11 +59,11 @@ export const paymentMethodsApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (key: string, data: UpdatePaymentMethodData) =>
-		api.put<PaymentMethod>(`/v1/payment-methods/${key}`, data),
+		api.put<PaymentMethod>(`/v1/public/refrence_data/payment-methods/${key}`, data),

 	/**
 	 * Elimina un método de pago
 	 * @param key - Clave del método de pago a eliminar
 	 */
-	delete: (key: string) => api.delete(`/v1/payment-methods/${key}`)
+	delete: (key: string) => api.delete(`/v1/public/refrence_data/payment-methods/${key}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/pedimento_codes.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/pedimento_codes.ts
@@ -37,21 +37,21 @@ export const pedimentoCodesApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<PedimentoCodeListResponse>(
-			`/v1/pedimento-codes?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/pedimento-codes?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene una clave de pedimento por code
 	 * @param code - Código de la clave de pedimento
 	 */
-	get: (code: string) => api.get<PedimentoCode>(`/v1/pedimento-codes/${code}`),
+	get: (code: string) => api.get<PedimentoCode>(`/v1/public/refrence_data/pedimento-codes/${code}`),

 	/**
 	 * Crea una nueva clave de pedimento
 	 * @param data - Datos de la clave de pedimento a crear
 	 */
 	create: (data: CreatePedimentoCodeData) =>
-		api.post<PedimentoCode>('/v1/pedimento-codes', data),
+		api.post<PedimentoCode>('/v1/public/refrence_data/pedimento-codes', data),

 	/**
 	 * Actualiza una clave de pedimento existente
@@ -59,11 +59,11 @@ export const pedimentoCodesApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (code: string, data: UpdatePedimentoCodeData) =>
-		api.put<PedimentoCode>(`/v1/pedimento-codes/${code}`, data),
+		api.put<PedimentoCode>(`/v1/public/refrence_data/pedimento-codes/${code}`, data),

 	/**
 	 * Elimina una clave de pedimento
 	 * @param code - Código de la clave de pedimento a eliminar
 	 */
-	delete: (code: string) => api.delete(`/v1/pedimento-codes/${code}`)
+	delete: (code: string) => api.delete(`/v1/public/refrence_data/pedimento-codes/${code}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/pedimento_regimens.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/pedimento_regimens.ts
@@ -37,21 +37,21 @@ export const pedimentoRegimensApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<PedimentoRegimenListResponse>(
-			`/v1/pedimento-regimens?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/pedimento-regimens?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene un régimen de pedimento por code
 	 * @param code - Código del régimen de pedimento
 	 */
-	get: (code: string) => api.get<PedimentoRegimen>(`/v1/pedimento-regimens/${code}`),
+	get: (code: string) => api.get<PedimentoRegimen>(`/v1/public/refrence_data/pedimento-regimens/${code}`),

 	/**
 	 * Crea un nuevo régimen de pedimento
 	 * @param data - Datos del régimen de pedimento a crear
 	 */
 	create: (data: CreatePedimentoRegimenData) =>
-		api.post<PedimentoRegimen>('/v1/pedimento-regimens', data),
+		api.post<PedimentoRegimen>('/v1/public/refrence_data/pedimento-regimens', data),

 	/**
 	 * Actualiza un régimen de pedimento existente
@@ -59,11 +59,11 @@ export const pedimentoRegimensApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (code: string, data: UpdatePedimentoRegimenData) =>
-		api.put<PedimentoRegimen>(`/v1/pedimento-regimens/${code}`, data),
+		api.put<PedimentoRegimen>(`/v1/public/refrence_data/pedimento-regimens/${code}`, data),

 	/**
 	 * Elimina un régimen de pedimento
 	 * @param code - Código del régimen de pedimento a eliminar
 	 */
-	delete: (code: string) => api.delete(`/v1/pedimento-regimens/${code}`)
+	delete: (code: string) => api.delete(`/v1/public/refrence_data/pedimento-regimens/${code}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/sectors.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/sectors.ts
@@ -40,21 +40,21 @@ export const sectorsApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<SectorListResponse>(
-			`/v1/sectors?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/sectors?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene un sector por key
 	 * @param key - Clave del sector
 	 */
-	get: (key: string) => api.get<Sector>(`/v1/sectors/${key}`),
+	get: (key: string) => api.get<Sector>(`/v1/public/refrence_data/sectors/${key}`),

 	/**
 	 * Crea un nuevo sector
 	 * @param data - Datos del sector a crear
 	 */
 	create: (data: CreateSectorData) =>
-		api.post<Sector>('/v1/sectors', data),
+		api.post<Sector>('/v1/public/refrence_data/sectors', data),

 	/**
 	 * Actualiza un sector existente
@@ -62,11 +62,11 @@ export const sectorsApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (key: string, data: UpdateSectorData) =>
-		api.put<Sector>(`/v1/sectors/${key}`, data),
+		api.put<Sector>(`/v1/public/refrence_data/sectors/${key}`, data),

 	/**
 	 * Elimina un sector
 	 * @param key - Clave del sector a eliminar
 	 */
-	delete: (key: string) => api.delete(`/v1/sectors/${key}`)
+	delete: (key: string) => api.delete(`/v1/public/refrence_data/sectors/${key}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/states.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/states.ts
@@ -43,21 +43,21 @@ export const statesApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<StateListResponse>(
-			`/v1/states?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/states?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene un estado por m3_key
 	 * @param m3Key - Clave M3 del estado
 	 */
-	get: (m3Key: string) => api.get<State>(`/v1/states/${m3Key}`),
+	get: (m3Key: string) => api.get<State>(`/v1/public/refrence_data/states/${m3Key}`),

 	/**
 	 * Crea un nuevo estado
 	 * @param data - Datos del estado a crear
 	 */
 	create: (data: CreateStateData) =>
-		api.post<State>('/v1/states', data),
+		api.post<State>('/v1/public/refrence_data/states', data),

 	/**
 	 * Actualiza un estado existente
@@ -65,11 +65,11 @@ export const statesApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (m3Key: string, data: UpdateStateData) =>
-		api.put<State>(`/v1/states/${m3Key}`, data),
+		api.put<State>(`/v1/public/refrence_data/states/${m3Key}`, data),

 	/**
 	 * Elimina un estado
 	 * @param m3Key - Clave M3 del estado a eliminar
 	 */
-	delete: (m3Key: string) => api.delete(`/v1/states/${m3Key}`)
+	delete: (m3Key: string) => api.delete(`/v1/public/refrence_data/states/${m3Key}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/transport_modes.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/transport_modes.ts
@@ -37,21 +37,21 @@ export const transportModesApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<TransportModeListResponse>(
-			`/v1/transport-modes?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/transport-modes?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene un modo de transporte por key
 	 * @param key - Clave del modo de transporte
 	 */
-	get: (key: string) => api.get<TransportMode>(`/v1/transport-modes/${key}`),
+	get: (key: string) => api.get<TransportMode>(`/v1/public/refrence_data/transport-modes/${key}`),

 	/**
 	 * Crea un nuevo modo de transporte
 	 * @param data - Datos del modo de transporte a crear
 	 */
 	create: (data: CreateTransportModeData) =>
-		api.post<TransportMode>('/v1/transport-modes', data),
+		api.post<TransportMode>('/v1/public/refrence_data/transport-modes', data),

 	/**
 	 * Actualiza un modo de transporte existente
@@ -59,11 +59,11 @@ export const transportModesApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (key: string, data: UpdateTransportModeData) =>
-		api.put<TransportMode>(`/v1/transport-modes/${key}`, data),
+		api.put<TransportMode>(`/v1/public/refrence_data/transport-modes/${key}`, data),

 	/**
 	 * Elimina un modo de transporte
 	 * @param key - Clave del modo de transporte a eliminar
 	 */
-	delete: (key: string) => api.delete(`/v1/transport-modes/${key}`)
+	delete: (key: string) => api.delete(`/v1/public/refrence_data/transport-modes/${key}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/transport_types.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/transport_types.ts
@@ -37,21 +37,21 @@ export const transportTypesApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<TransportTypeListResponse>(
-			`/v1/transport-types?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/transport-types?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene un tipo de transporte por transport_code
 	 * @param transportCode - Código del tipo de transporte
 	 */
-	get: (transportCode: string) => api.get<TransportType>(`/v1/transport-types/${transportCode}`),
+	get: (transportCode: string) => api.get<TransportType>(`/v1/public/refrence_data/transport-types/${transportCode}`),

 	/**
 	 * Crea un nuevo tipo de transporte
 	 * @param data - Datos del tipo de transporte a crear
 	 */
 	create: (data: CreateTransportTypeData) =>
-		api.post<TransportType>('/v1/transport-types', data),
+		api.post<TransportType>('/v1/public/refrence_data/transport-types', data),

 	/**
 	 * Actualiza un tipo de transporte existente
@@ -59,11 +59,11 @@ export const transportTypesApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (transportCode: string, data: UpdateTransportTypeData) =>
-		api.put<TransportType>(`/v1/transport-types/${transportCode}`, data),
+		api.put<TransportType>(`/v1/public/refrence_data/transport-types/${transportCode}`, data),

 	/**
 	 * Elimina un tipo de transporte
 	 * @param transportCode - Código del tipo de transporte a eliminar
 	 */
-	delete: (transportCode: string) => api.delete(`/v1/transport-types/${transportCode}`)
+	delete: (transportCode: string) => api.delete(`/v1/public/refrence_data/transport-types/${transportCode}`)
 };
--- a/frontend/src/lib/api/dashboard/refrence_data/valuation_methods.ts
+++ b/frontend/src/lib/api/dashboard/refrence_data/valuation_methods.ts
@@ -37,21 +37,21 @@ export const valuationMethodsApi = {
 	 */
 	list: (page = 1, pageSize = 50) =>
 		api.get<ValuationMethodListResponse>(
-			`/v1/valuation-methods?page=${page}&page_size=${pageSize}`
+			`/v1/public/refrence_data/valuation-methods?page=${page}&page_size=${pageSize}`
 		),

 	/**
 	 * Obtiene un método de valoración por key
 	 * @param key - Clave del método de valoración
 	 */
-	get: (key: string) => api.get<ValuationMethod>(`/v1/valuation-methods/${key}`),
+	get: (key: string) => api.get<ValuationMethod>(`/v1/public/refrence_data/valuation-methods/${key}`),

 	/**
 	 * Crea un nuevo método de valoración
 	 * @param data - Datos del método de valoración a crear
 	 */
 	create: (data: CreateValuationMethodData) =>
-		api.post<ValuationMethod>('/v1/valuation-methods', data),
+		api.post<ValuationMethod>('/v1/public/refrence_data/valuation-methods', data),

 	/**
 	 * Actualiza un método de valoración existente
@@ -59,11 +59,11 @@ export const valuationMethodsApi = {
 	 * @param data - Datos a actualizar
 	 */
 	update: (key: string, data: UpdateValuationMethodData) =>
-		api.put<ValuationMethod>(`/v1/valuation-methods/${key}`, data),
+		api.put<ValuationMethod>(`/v1/public/refrence_data/valuation-methods/${key}`, data),

 	/**
 	 * Elimina un método de valoración
 	 * @param key - Clave del método de valoración a eliminar
 	 */
-	delete: (key: string) => api.delete(`/v1/valuation-methods/${key}`)
+	delete: (key: string) => api.delete(`/v1/public/refrence_data/valuation-methods/${key}`)
 };
--- a/frontend/src/lib/components/dashboard/pedimentos/columns.ts
+++ b/frontend/src/lib/components/dashboard/pedimentos/columns.ts
@@ -0,0 +1,234 @@
+import type { ColumnDef } from "@tanstack/table-core";
+import { renderComponent, renderSnippet } from "$lib/components/ui/data-table/index.js";
+import { createRawSnippet } from "svelte";
+import DataTableActions from "./data-table-actions.svelte";
+
+export type Pedimento = {
+	id: number;
+	tenant_id: number;
+	year?: string | null;
+	customs_office?: string | null;
+	license?: string | null;
+	pedimento_number?: string | null;
+	client_id?: number | null;
+	operation_type?: number | null;
+	pedimento_type?: number | null;
+	pedimento_key?: string | null;
+	regime?: string | null;
+	status?: string | null;
+	usd_value?: number | null;
+	paid_price?: number | null;
+	gross_weight?: number | null;
+	exchange_rate?: number | null;
+	created_at: string;
+};
+
+/**
+ * Formatea un número como moneda
+ */
+function formatCurrency(value?: number | null): string {
+	if (value === null || value === undefined) return '-';
+	return new Intl.NumberFormat('es-MX', {
+		style: 'currency',
+		currency: 'USD',
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2
+	}).format(value);
+}
+
+/**
+ * Formatea un número con separadores de miles
+ */
+function formatNumber(value?: number | null, decimals = 2): string {
+	if (value === null || value === undefined) return '-';
+	return new Intl.NumberFormat('es-MX', {
+		minimumFractionDigits: decimals,
+		maximumFractionDigits: decimals
+	}).format(value);
+}
+
+/**
+ * Formatea una fecha
+ */
+function formatDate(date?: string | null): string {
+	if (!date) return '-';
+	return new Date(date).toLocaleDateString('es-MX', {
+		year: 'numeric',
+		month: '2-digit',
+		day: '2-digit',
+		hour: '2-digit',
+		minute: '2-digit'
+	});
+}
+
+/**
+ * Obtiene el color del badge según el status
+ */
+function getStatusColor(status?: string | null): string {
+	if (!status) return 'bg-gray-100 text-gray-800';
+	
+	const statusLower = status.toLowerCase();
+	if (statusLower.includes('activo') || statusLower.includes('completado')) {
+		return 'bg-green-100 text-green-800';
+	} else if (statusLower.includes('pendiente') || statusLower.includes('proceso')) {
+		return 'bg-yellow-100 text-yellow-800';
+	} else if (statusLower.includes('cancelado') || statusLower.includes('rechazado')) {
+		return 'bg-red-100 text-red-800';
+	}
+	return 'bg-blue-100 text-blue-800';
+}
+
+export function createColumns(onSuccess?: () => void): ColumnDef<Pedimento>[] {
+	return [
+		{
+			accessorKey: "id",
+			header: "ID",
+			cell: ({ row }) => {
+				const idSnippet = createRawSnippet<[{ id: number }]>((getId) => {
+					const { id } = getId();
+					return {
+						render: () =>
+							`<div class="font-medium">#${id}</div>`
+					};
+				});
+				return renderSnippet(idSnippet, { id: row.original.id });
+			}
+		},
+		{
+			accessorKey: "pedimento_number",
+			header: "Número de Pedimento",
+			cell: ({ row }) => {
+				const pedimento = row.original;
+				const fullNumber = `${pedimento.year || ''}${pedimento.customs_office || ''}${pedimento.license || ''}${pedimento.pedimento_number || ''}`;
+				
+				const numberSnippet = createRawSnippet<[{ number: string }]>((getNumber) => {
+					const { number } = getNumber();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${number || 'N/A'}</code>`
+					};
+				});
+				return renderSnippet(numberSnippet, { number: fullNumber });
+			}
+		},
+		{
+			accessorKey: "client_id",
+			header: "Cliente",
+			cell: ({ row }) => {
+				const clientSnippet = createRawSnippet<[{ clientId?: number | null }]>((getClient) => {
+					const { clientId } = getClient();
+					return {
+						render: () =>
+							`<div>${clientId ? `Cliente #${clientId}` : '-'}</div>`
+					};
+				});
+				return renderSnippet(clientSnippet, { clientId: row.original.client_id });
+			}
+		},
+		{
+			accessorKey: "status",
+			header: "Estado",
+			cell: ({ row }) => {
+				const status = row.original.status;
+				const colorClass = getStatusColor(status);
+				
+				const statusSnippet = createRawSnippet<[{ status?: string | null; colorClass: string }]>((getStatus) => {
+					const { status, colorClass } = getStatus();
+					return {
+						render: () =>
+							`<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${colorClass}">
+								${status || 'N/A'}
+							</span>`
+					};
+				});
+				return renderSnippet(statusSnippet, { status, colorClass });
+			}
+		},
+		{
+			accessorKey: "usd_value",
+			header: () => {
+				const headerSnippet = createRawSnippet(() => {
+					return {
+						render: () => `<div class="text-right">Valor USD</div>`
+					};
+				});
+				return renderSnippet(headerSnippet, {});
+			},
+			cell: ({ row }) => {
+				const valueSnippet = createRawSnippet<[{ value: string }]>((getValue) => {
+					const { value } = getValue();
+					return {
+						render: () =>
+							`<div class="text-right font-medium">${value}</div>`
+					};
+				});
+				return renderSnippet(valueSnippet, { value: formatCurrency(row.original.usd_value) });
+			}
+		},
+		{
+			accessorKey: "paid_price",
+			header: () => {
+				const headerSnippet = createRawSnippet(() => {
+					return {
+						render: () => `<div class="text-right">Precio Pagado</div>`
+					};
+				});
+				return renderSnippet(headerSnippet, {});
+			},
+			cell: ({ row }) => {
+				const priceSnippet = createRawSnippet<[{ price: string }]>((getPrice) => {
+					const { price } = getPrice();
+					return {
+						render: () =>
+							`<div class="text-right font-medium">${price}</div>`
+					};
+				});
+				return renderSnippet(priceSnippet, { price: formatCurrency(row.original.paid_price) });
+			}
+		},
+		{
+			accessorKey: "gross_weight",
+			header: () => {
+				const headerSnippet = createRawSnippet(() => {
+					return {
+						render: () => `<div class="text-right">Peso Bruto</div>`
+					};
+				});
+				return renderSnippet(headerSnippet, {});
+			},
+			cell: ({ row }) => {
+				const weightSnippet = createRawSnippet<[{ weight: string }]>((getWeight) => {
+					const { weight } = getWeight();
+					return {
+						render: () =>
+							`<div class="text-right">${weight}</div>`
+					};
+				});
+				return renderSnippet(weightSnippet, { weight: formatNumber(row.original.gross_weight, 3) });
+			}
+		},
+		{
+			accessorKey: "created_at",
+			header: "Fecha de Creación",
+			cell: ({ row }) => {
+				const dateSnippet = createRawSnippet<[{ date: string }]>((getDate) => {
+					const { date } = getDate();
+					return {
+						render: () =>
+							`<div class="text-sm text-muted-foreground">${date}</div>`
+					};
+				});
+				return renderSnippet(dateSnippet, { date: formatDate(row.original.created_at) });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();
--- a/frontend/src/lib/components/dashboard/pedimentos/create-edit-dialog.svelte
+++ b/frontend/src/lib/components/dashboard/pedimentos/create-edit-dialog.svelte
@@ -0,0 +1,425 @@
+<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 { pedimentosApi, type Pedimento, type CreatePedimentoData, type UpdatePedimentoData } from "$lib/api/dashboard/a76/pedimentos";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<Pedimento | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: Pedimento | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		year: "",
+		customs_office: "",
+		license: "",
+		pedimento_number: "",
+		client_id: null as number | null,
+		operation_type: null as number | null,
+		pedimento_type: null as number | null,
+		pedimento_key: "",
+		regime: "",
+		status: "",
+		usd_value: null as number | null,
+		paid_price: null as number | null,
+		gross_weight: null as number | null,
+		exchange_rate: null as number | null
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				year: item.year || "",
+				customs_office: item.customs_office || "",
+				license: item.license || "",
+				pedimento_number: item.pedimento_number || "",
+				client_id: item.client_id ?? null,
+				operation_type: item.operation_type ?? null,
+				pedimento_type: item.pedimento_type ?? null,
+				pedimento_key: item.pedimento_key || "",
+				regime: item.regime || "",
+				status: item.status || "",
+				usd_value: item.usd_value ?? null,
+				paid_price: item.paid_price ?? null,
+				gross_weight: item.gross_weight ?? null,
+				exchange_rate: item.exchange_rate ?? null
+			};
+		} else {
+			formData = {
+				year: "",
+				customs_office: "",
+				license: "",
+				pedimento_number: "",
+				client_id: null,
+				operation_type: null,
+				pedimento_type: null,
+				pedimento_key: "",
+				regime: "",
+				status: "",
+				usd_value: null,
+				paid_price: null,
+				gross_weight: null,
+				exchange_rate: null
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	// Estados comunes
+	const statusOptions = [
+		{ value: "Activo", label: "Activo" },
+		{ value: "Pendiente", label: "Pendiente" },
+		{ value: "En Proceso", label: "En Proceso" },
+		{ value: "Completado", label: "Completado" },
+		{ value: "Cancelado", label: "Cancelado" }
+	];
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdatePedimentoData = {
+					year: formData.year || null,
+					customs_office: formData.customs_office || null,
+					license: formData.license || null,
+					pedimento_number: formData.pedimento_number || null,
+					client_id: formData.client_id,
+					operation_type: formData.operation_type,
+					pedimento_type: formData.pedimento_type,
+					pedimento_key: formData.pedimento_key || null,
+					regime: formData.regime || null,
+					status: formData.status || null,
+					usd_value: formData.usd_value,
+					paid_price: formData.paid_price,
+					gross_weight: formData.gross_weight,
+					exchange_rate: formData.exchange_rate
+				};
+				response = await pedimentosApi.update(item.id, payload);
+			} else {
+				const payload: CreatePedimentoData = {
+					year: formData.year || null,
+					customs_office: formData.customs_office || null,
+					license: formData.license || null,
+					pedimento_number: formData.pedimento_number || null,
+					client_id: formData.client_id,
+					operation_type: formData.operation_type,
+					pedimento_type: formData.pedimento_type,
+					pedimento_key: formData.pedimento_key || null,
+					regime: formData.regime || null,
+					status: formData.status || null,
+					usd_value: formData.usd_value,
+					paid_price: formData.paid_price,
+					gross_weight: formData.gross_weight,
+					exchange_rate: formData.exchange_rate
+				};
+				response = await pedimentosApi.create(payload);
+			}
+
+			if (response.error) {
+				if (response.status === 401) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 1500);
+				} else {
+					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:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			// Limpiar form al cerrar
+			formData = {
+				year: "",
+				customs_office: "",
+				license: "",
+				pedimento_number: "",
+				client_id: null,
+				operation_type: null,
+				pedimento_type: null,
+				pedimento_key: "",
+				regime: "",
+				status: "",
+				usd_value: null,
+				paid_price: null,
+				gross_weight: null,
+				exchange_rate: null
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Pedimento
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del pedimento."
+					: "Completa los datos para crear un nuevo pedimento."}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<form onsubmit={handleSubmit} class="space-y-4">
+			{#if error}
+				<div class="rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+					{error}
+				</div>
+			{/if}
+
+			<!-- Información del Pedimento -->
+			<div class="space-y-4">
+				<h3 class="text-sm font-medium">Información del Pedimento</h3>
+				
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<Label for="year">Año</Label>
+						<Input
+							id="year"
+							bind:value={formData.year}
+							placeholder="22"
+							maxlength={2}
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="customs_office">Aduana</Label>
+						<Input
+							id="customs_office"
+							bind:value={formData.customs_office}
+							placeholder="01"
+							maxlength={2}
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="license">Patente</Label>
+						<Input
+							id="license"
+							bind:value={formData.license}
+							placeholder="3001"
+							maxlength={4}
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="pedimento_number">Número de Pedimento</Label>
+						<Input
+							id="pedimento_number"
+							bind:value={formData.pedimento_number}
+							placeholder="0001234"
+							maxlength={7}
+							disabled={loading}
+						/>
+					</div>
+				</div>
+
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<Label for="pedimento_key">Clave de Pedimento</Label>
+						<Input
+							id="pedimento_key"
+							bind:value={formData.pedimento_key}
+							placeholder="A1"
+							maxlength={2}
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="regime">Régimen</Label>
+						<Input
+							id="regime"
+							bind:value={formData.regime}
+							placeholder="IMD"
+							maxlength={3}
+							disabled={loading}
+						/>
+					</div>
+				</div>
+			</div>
+
+			<!-- Información del Cliente y Operación -->
+			<div class="space-y-4">
+				<h3 class="text-sm font-medium">Cliente y Operación</h3>
+				
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<Label for="client_id">ID del Cliente</Label>
+						<Input
+							id="client_id"
+							type="number"
+							bind:value={formData.client_id}
+							placeholder="123"
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="status">Estado</Label>
+						<select
+							id="status"
+							bind:value={formData.status}
+							disabled={loading}
+							class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+						>
+							<option value="">Seleccionar estado</option>
+							{#each statusOptions as option}
+								<option value={option.value}>{option.label}</option>
+							{/each}
+						</select>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="operation_type">Tipo de Operación</Label>
+						<Input
+							id="operation_type"
+							type="number"
+							bind:value={formData.operation_type}
+							placeholder="1"
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="pedimento_type">Tipo de Pedimento</Label>
+						<Input
+							id="pedimento_type"
+							type="number"
+							bind:value={formData.pedimento_type}
+							placeholder="1"
+							disabled={loading}
+						/>
+					</div>
+				</div>
+			</div>
+
+			<!-- Información Financiera -->
+			<div class="space-y-4">
+				<h3 class="text-sm font-medium">Información Financiera</h3>
+				
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<Label for="usd_value">Valor en USD</Label>
+						<Input
+							id="usd_value"
+							type="number"
+							step="0.01"
+							bind:value={formData.usd_value}
+							placeholder="1000.00"
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="paid_price">Precio Pagado</Label>
+						<Input
+							id="paid_price"
+							type="number"
+							step="0.01"
+							bind:value={formData.paid_price}
+							placeholder="1000.00"
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="exchange_rate">Tipo de Cambio</Label>
+						<Input
+							id="exchange_rate"
+							type="number"
+							step="0.00001"
+							bind:value={formData.exchange_rate}
+							placeholder="19.50000"
+							disabled={loading}
+						/>
+					</div>
+
+					<div class="space-y-2">
+						<Label for="gross_weight">Peso Bruto (kg)</Label>
+						<Input
+							id="gross_weight"
+							type="number"
+							step="0.001"
+							bind:value={formData.gross_weight}
+							placeholder="100.000"
+							disabled={loading}
+						/>
+					</div>
+				</div>
+			</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>
+					{/if}
+					{isEditing ? "Guardar cambios" : "Crear pedimento"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>
--- a/frontend/src/lib/components/dashboard/pedimentos/data-table-actions.svelte
+++ b/frontend/src/lib/components/dashboard/pedimentos/data-table-actions.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+	import { pedimentosApi, type Pedimento } from "$lib/api/dashboard/a76/pedimentos";
+
+	let {
+		item,
+		onSuccess
+	}: {
+		item: Pedimento;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!confirm(`¿Estás seguro de eliminar el pedimento #${item.id}?`)) {
+			return;
+		}
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await pedimentosApi.delete(item.id);
+
+			if (response.error) {
+				if (response.status === 401) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 1500);
+				} else {
+					error = response.error;
+					alert(`Error al eliminar: ${response.error}`);
+				}
+				return;
+			}
+
+			// Éxito
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			alert(`Error: ${error}`);
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleView() {
+		// Navegar a la vista de detalles
+		window.location.href = `/dashboard/pedimentos/${item.id}`;
+	}
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button {...props} variant="ghost" size="icon" class="relative size-8 p-0">
+				<span class="sr-only">Abrir menú</span>
+				<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"
+				>
+					<circle cx="12" cy="12" r="1" />
+					<circle cx="12" cy="5" r="1" />
+					<circle cx="12" cy="19" r="1" />
+				</svg>
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end" class="w-[160px]">
+		<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleView}>
+			<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="mr-2"
+			>
+				<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+				<circle cx="12" cy="12" r="3" />
+			</svg>
+			Ver detalles
+		</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>
+			<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="mr-2"
+			>
+				<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+				<path d="m15 5 4 4" />
+			</svg>
+			Editar
+		</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleDelete} class="text-destructive" 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>
+			{:else}
+				<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="mr-2"
+				>
+					<path d="M3 6h18" />
+					<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+					<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+				</svg>
+			{/if}
+			Eliminar
+		</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+{#if showEditDialog}
+	<!-- Importar dinámicamente el componente de edición cuando se necesite -->
+	{#await import('./create-edit-dialog.svelte') then { default: CreateEditDialog }}
+		<CreateEditDialog bind:open={showEditDialog} bind:item onSuccess={onSuccess} />
+	{/await}
+{/if}
--- a/frontend/src/lib/components/dashboard/pedimentos/data-table.svelte
+++ b/frontend/src/lib/components/dashboard/pedimentos/data-table.svelte
@@ -0,0 +1,123 @@
+<script lang="ts" generics="TData, TValue">
+	import { onMount } from 'svelte';
+	import {
+		type ColumnDef,
+		getCoreRowModel
+	} from "@tanstack/table-core";
+	import { createSvelteTable, FlexRender } from "$lib/components/ui/data-table/index.js";
+	import * as Table from "$lib/components/ui/table/index.js";
+
+	type DataTableProps<TData, TValue> = {
+		columns: ColumnDef<TData, TValue>[];
+		data: TData[];
+		loading: boolean;
+		hasMore: boolean;
+		loadMore: () => void;
+	};
+
+	let {
+		data,
+		columns,
+		loading,
+		hasMore,
+		loadMore
+	}: DataTableProps<TData, TValue> = $props();
+
+	const table = createSvelteTable({
+		get data() {
+			return data;
+		},
+		columns,
+		getCoreRowModel: getCoreRowModel()
+	});
+
+	let scrollContainer = $state<HTMLDivElement>();
+	let loadingTrigger = $state<HTMLDivElement>();
+
+	// Intersection Observer para detectar cuando el usuario llega al final
+	onMount(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				const [entry] = entries;
+				if (entry.isIntersecting && hasMore && !loading) {
+					loadMore();
+				}
+			},
+			{
+				root: scrollContainer,
+				threshold: 0.1
+			}
+		);
+
+		if (loadingTrigger) {
+			observer.observe(loadingTrigger);
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+</script>
+
+<div class="w-full">
+	<div class="rounded-md border max-h-[600px] overflow-y-auto" bind:this={scrollContainer}>
+		<Table.Root>
+			<Table.Header class="sticky top-0 bg-background z-10">
+				{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+					<Table.Row>
+						{#each headerGroup.headers as header (header.id)}
+							<Table.Head>
+								{#if !header.isPlaceholder}
+									<FlexRender
+										content={header.column.columnDef.header}
+										context={header.getContext()}
+									/>
+								{/if}
+							</Table.Head>
+						{/each}
+					</Table.Row>
+				{/each}
+			</Table.Header>
+			<Table.Body>
+				{#each table.getRowModel().rows as row (row.id)}
+					<Table.Row data-state={row.getIsSelected() && "selected"}>
+						{#each row.getVisibleCells() as cell (cell.id)}
+							<Table.Cell>
+								<FlexRender
+									content={cell.column.columnDef.cell}
+									context={cell.getContext()}
+								/>
+							</Table.Cell>
+						{/each}
+					</Table.Row>
+				{:else}
+					<Table.Row>
+						<Table.Cell colspan={columns.length} class="h-24 text-center">
+							No hay resultados.
+						</Table.Cell>
+					</Table.Row>
+				{/each}
+				
+				<!-- Loading Trigger - Se activa cuando es visible -->
+				{#if hasMore}
+					<Table.Row>
+						<Table.Cell colspan={columns.length} class="h-20 text-center">
+							<div bind:this={loadingTrigger}>
+								{#if loading}
+									<div class="flex items-center justify-center gap-2">
+										<div class="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
+										<span class="text-muted-foreground text-sm">Cargando más...</span>
+									</div>
+								{:else}
+									<div class="text-muted-foreground text-sm">
+										Desplázate para cargar más
+									</div>
+								{/if}
+							</div>
+						</Table.Cell>
+					</Table.Row>
+				{/if}
+			</Table.Body>
+		</Table.Root>
+	</div>
+</div>
--- a/frontend/src/lib/components/sidebar/modules.ts
+++ b/frontend/src/lib/components/sidebar/modules.ts
@@ -286,23 +286,23 @@ export function getSidebarData(): SidebarData {
 				items: [
 					{
 						title: m["sidebar.pedimentos.pedimento_management"](),
-						url: "#",
+						url: "/dashboard/pedimentos",
 					},
 					{
 						title: m["sidebar.pedimentos.pedimento_codes"](),
-						url: "#",
+						url: "/dashboard/reference_data/pedimento_codes",
 					},
 					{
 						title: m["sidebar.pedimentos.customs_regimes"](),
-						url: "#",
+						url: "/dashboard/reference_data/pedimento_regimens",
 					},
 					{
 						title: m["sidebar.pedimentos.payment_methods"](),
-						url: "#",
+						url: "/dashboard/reference_data/payment_methods",
 					},
 					{
 						title: m["sidebar.pedimentos.customs_sections"](),
-						url: "#",
+						url: "/dashboard/reference_data/customs_sections",
 					},
 					{
 						title: m["sidebar.pedimentos.anexo_22_app_31"](),
--- a/frontend/src/routes/dashboard/pedimentos/+page.server.ts
+++ b/frontend/src/routes/dashboard/pedimentos/+page.server.ts
@@ -0,0 +1,64 @@
+import type { PageServerLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ fetch, cookies }) => {
+	// Verificar autenticación
+	const token = cookies.get('access_token');
+	
+	if (!token) {
+		throw redirect(302, '/login');
+	}
+
+	try {
+		// Cargar datos iniciales de pedimentos
+		// Configurar la URL de la API para SSR
+		let apiUrl = process.env.INTERNAL_API_URL;
+		if (!apiUrl) {
+			apiUrl = import.meta.env.VITE_API_URL;
+			// Reemplazar 'localhost' con 'backend' para llamadas desde el servidor (SSR)
+			apiUrl = apiUrl?.replace('localhost', 'backend').replace('127.0.0.1', 'backend');
+		}
+		
+		// Normalizar la URL
+		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		
+
+		const response = await fetch(`${baseUrl}v1/a76/pedimentos?page=1&page_size=50`, {
+			headers: {
+				'Authorization': `Bearer ${token}`,
+				'Content-Type': 'application/json'
+			}
+		});
+
+		if (!response.ok) {
+			if (response.status === 401 || response.status === 403) {
+				throw redirect(302, '/login');
+			}
+			
+			return {
+				items: [],
+				total: 0,
+				page: 1,
+				page_size: 50,
+				error: 'Error al cargar pedimentos'
+			};
+		}
+
+		const data = await response.json();
+
+		return {
+			items: data.items || [],
+			total: data.total || 0,
+			page: data.page || 1,
+			page_size: data.page_size || 50
+		};
+	} catch (error) {
+		console.error('Error loading pedimentos:', error);
+		return {
+			items: [],
+			total: 0,
+			page: 1,
+			page_size: 50,
+			error: 'Error al cargar pedimentos'
+		};
+	}
+};
--- a/frontend/src/routes/dashboard/pedimentos/+page.svelte
+++ b/frontend/src/routes/dashboard/pedimentos/+page.svelte
@@ -0,0 +1,352 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { pedimentosApi, type Pedimento } from '$lib/api/dashboard/a76/pedimentos';
+	import DataTable from '$lib/components/dashboard/pedimentos/data-table.svelte';
+	import { createColumns } from '$lib/components/dashboard/pedimentos/columns.js';
+	import CreateEditDialog from '$lib/components/dashboard/pedimentos/create-edit-dialog.svelte';
+	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';
+
+	// Los datos iniciales vienen del servidor
+	let { data }: { data: PageData } = $props();
+	
+	// Estado para el diálogo de crear
+	let showCreateDialog = $state(false);
+
+	// Estado para filtros
+	let filters = $state({
+		status: '',
+		client_id: '',
+		year: ''
+	});
+
+	// Sincronizar token de cookies a localStorage al montar el componente
+	onMount(() => {
+		if (browser) {
+			// Función para obtener el valor de una cookie
+			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;
+			};
+
+			// Verificar si hay token en las cookies
+			const cookieToken = getCookie('access_token');
+			const localToken = localStorage.getItem('access_token');
+
+			if (cookieToken && cookieToken !== localToken) {
+				localStorage.setItem('access_token', cookieToken);
+			}
+
+			// También sincronizar refresh_token si existe
+			const cookieRefreshToken = getCookie('refresh_token');
+			const localRefreshToken = localStorage.getItem('refresh_token');
+
+			if (cookieRefreshToken && cookieRefreshToken !== localRefreshToken) {
+				localStorage.setItem('refresh_token', cookieRefreshToken);
+			}
+		}
+	});
+
+	// Estado para infinite scroll
+	let allItems = $state<Pedimento[]>(data.items || []);
+	let currentPage = $state(data.page || 1);
+	let pageSize = $state(50);
+	let totalItems = $state(data.total || 0);
+	let loading = $state(false);
+	let hasMore = $derived(allItems.length < totalItems);
+	let error = $state<string | null>(data.error || null);
+
+	async function loadMore() {
+		if (loading || !hasMore) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const filterParams = {
+				status: filters.status || undefined,
+				client_id: filters.client_id ? parseInt(filters.client_id) : undefined,
+				year: filters.year || undefined
+			};
+			
+			const response = await pedimentosApi.list(currentPage + 1, pageSize, filterParams);
+
+			if (response.error) {
+				console.error('📊 [Page] Error en loadMore:', response.error, 'Status:', response.status);
+				
+				// Si es un error de autenticación (401 o 403) y no se pudo refrescar, mostrar mensaje específico
+				if (response.status === 401 || response.status === 403) {
+					error = 'Sesión expirada. Recargando página...';
+					// Recargar automáticamente después de 2 segundos
+					setTimeout(() => {
+						window.location.reload();
+					}, 2000);
+				} else {
+					error = response.error;
+				}
+				return;
+			}
+
+			if (response.data?.items) {				
+				// Agregar los nuevos items al array existente
+				allItems = [...allItems, ...response.data.items];
+				currentPage++;
+				totalItems = response.data.total;
+			}
+		} catch (e) {
+			error = 'Error cargando más datos';
+			console.error('📊 [Page] Error loading more:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function applyFilters() {
+		// Reset y recargar con filtros
+		loading = true;
+		error = null;
+		
+		try {
+			const filterParams = {
+				status: filters.status || undefined,
+				client_id: filters.client_id ? parseInt(filters.client_id) : undefined,
+				year: filters.year || undefined
+			};
+			
+			const response = await pedimentosApi.list(1, pageSize, filterParams);
+
+			if (response.error) {
+				console.error('📊 [Page] Error aplicando filtros:', response.error);
+				
+				if (response.status === 401 || response.status === 403) {
+					error = 'Sesión expirada. Recargando página...';
+					setTimeout(() => {
+						window.location.reload();
+					}, 2000);
+				} else {
+					error = response.error;
+				}
+				return;
+			}
+
+			if (response.data) {
+				allItems = response.data.items;
+				currentPage = 1;
+				totalItems = response.data.total;
+			}
+		} catch (e) {
+			error = 'Error aplicando filtros';
+			console.error('📊 [Page] Error applying filters:', e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function clearFilters() {
+		filters = {
+			status: '',
+			client_id: '',
+			year: ''
+		};
+		window.location.reload();
+	}
+
+	function reloadData() {
+		// Reset y recargar desde el principio
+		window.location.reload();
+	}
+
+	function handleCreateClick() {
+		showCreateDialog = true;
+	}
+
+	function handleSuccess() {
+		// Recargar datos después de crear/editar/eliminar
+		reloadData();
+	}
+
+	// Opciones de status para el filtro
+	const statusOptions = [
+		{ value: "", label: "Todos" },
+		{ value: "Activo", label: "Activo" },
+		{ value: "Pendiente", label: "Pendiente" },
+		{ value: "En Proceso", label: "En Proceso" },
+		{ value: "Completado", label: "Completado" },
+		{ value: "Cancelado", label: "Cancelado" }
+	];
+
+	// Crear columnas con el callback onSuccess
+	const columns = createColumns(handleSuccess);
+</script>
+
+<div class="space-y-6">
+	<!-- Header -->
+	<div class="flex items-center justify-between">
+		<div>
+			<h1 class="text-3xl font-bold tracking-tight">Pedimentos</h1>
+			<p class="text-muted-foreground">
+				Gestiona los pedimentos del sistema
+			</p>
+		</div>
+		<Button onclick={handleCreateClick}>
+			<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="mr-2"
+			>
+				<path d="M5 12h14" />
+				<path d="M12 5v14" />
+			</svg>
+			Nuevo Pedimento
+		</Button>
+	</div>
+
+	<!-- Filtros -->
+	<Card.Root>
+		<Card.Header>
+			<Card.Title>Filtros</Card.Title>
+			<Card.Description>Filtra los pedimentos por diferentes criterios</Card.Description>
+		</Card.Header>
+		<Card.Content>
+			<form onsubmit={(e) => { e.preventDefault(); applyFilters(); }} class="grid grid-cols-1 md:grid-cols-4 gap-4">
+				<div class="space-y-2">
+					<Label for="filter-status">Estado</Label>
+					<select
+						id="filter-status"
+						bind:value={filters.status}
+						class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+					>
+						{#each statusOptions as option}
+							<option value={option.value}>{option.label}</option>
+						{/each}
+					</select>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="filter-client">ID del Cliente</Label>
+					<Input
+						id="filter-client"
+						type="number"
+						bind:value={filters.client_id}
+						placeholder="Ej: 123"
+					/>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="filter-year">Año</Label>
+					<Input
+						id="filter-year"
+						bind:value={filters.year}
+						placeholder="Ej: 23"
+						maxlength={2}
+					/>
+				</div>
+
+				<div class="flex items-end gap-2">
+					<Button type="submit" disabled={loading} class="flex-1">
+						<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="mr-2"
+						>
+							<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
+						</svg>
+						Filtrar
+					</Button>
+					<Button type="button" variant="outline" onclick={clearFilters} disabled={loading}>
+						<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"
+						>
+							<path d="M3 6h18" />
+							<path d="m19 6-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6" />
+							<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+						</svg>
+					</Button>
+				</div>
+			</form>
+		</Card.Content>
+	</Card.Root>
+
+	<!-- Error Message -->
+	{#if error}
+		<Card.Root class="border-destructive">
+			<Card.Header>
+				<Card.Title class="text-destructive">Error</Card.Title>
+				<Card.Description>{error}</Card.Description>
+			</Card.Header>
+		</Card.Root>
+	{/if}
+
+	<!-- Data Table -->
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center justify-between">
+				<div>
+					<Card.Title>Listado de Pedimentos</Card.Title>
+					<Card.Description>
+						Mostrando {allItems.length} de {totalItems} registros
+					</Card.Description>
+				</div>
+				<Button variant="outline" onclick={reloadData}>
+					<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="mr-2"
+					>
+						<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+						<path d="M21 3v5h-5" />
+					</svg>
+					Actualizar
+				</Button>
+			</div>
+		</Card.Header>
+		<Card.Content>
+			<!-- TanStack DataTable con Infinite Scroll -->
+			<DataTable
+				data={allItems}
+				{columns}
+				{loading}
+				{hasMore}
+				{loadMore}
+			/>
+		</Card.Content>
+	</Card.Root>
+</div>
+
+<!-- Diálogo de crear/editar -->
+<CreateEditDialog bind:open={showCreateDialog} onSuccess={handleSuccess} />
--- a/frontend/src/routes/dashboard/reference_data/code_pedimento_regimens/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/code_pedimento_regimens/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/code-pedimento-regimens?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/code-pedimento-regimens?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/containers/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/containers/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/containers?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/containers?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/countries/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/countries/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/countries?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/countries?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/currency_types/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/currency_types/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/currency-types?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/currency-types?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/customs_sections/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/customs_sections/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/customs-sections?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/customs-sections?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/customs_warehouses/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/customs_warehouses/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/customs-warehouses?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/customs-warehouses?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/incoterms/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/incoterms/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/incoterms?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/incoterms?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/invoice_types/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/invoice_types/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/invoice-types?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/invoice-types?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/material_types/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/material_types/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/material-types?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/material-types?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/payment_methods/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/payment_methods/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/payment-methods?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/payment-methods?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/pedimento_codes/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/pedimento_codes/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/pedimento-codes?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/pedimento-codes?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/pedimento_regimens/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/pedimento_regimens/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/pedimento-regimens?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/pedimento-regimens?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/sectors/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/sectors/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/sectors?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/sectors?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/states/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/states/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/states?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/states?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/transport_modes/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/transport_modes/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/transport-modes?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/transport-modes?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/transport_types/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/transport_types/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/transport-types?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/transport-types?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,
--- a/frontend/src/routes/dashboard/reference_data/valuation_methods/+page.server.ts
+++ b/frontend/src/routes/dashboard/reference_data/valuation_methods/+page.server.ts
@@ -33,7 +33,7 @@ export const load: PageServerLoad = async ({ cookies, fetch, url, parent }) => {
 		const baseUrl = apiUrl?.endsWith('/') ? apiUrl : `${apiUrl}/`;		

 		const response = await fetch(
-			`${baseUrl}v1/valuation-methods?page=${page}&page_size=${pageSize}`,
+			`${baseUrl}v1/public/refrence_data/valuation-methods?page=${page}&page_size=${pageSize}`,
 			{
 				headers: {
 					'Authorization': `Bearer ${token}`,