feat: Implement reference data management for states, transport modes, transport types, and valuation methods

- Added server-side loading logic for states, transport modes, transport types, and valuation methods with pagination support.
- Created Svelte components for displaying and managing states, transport modes, transport types, and valuation methods.
- Implemented infinite scroll functionality for loading more data as the user scrolls.
- Added error handling and user feedback for API interactions.
- Included dialogs for creating and editing entries in each reference data category.

frontend/src/lib/api/dashboard/refrence_data/currency_types.ts

@@ -0,0 +1,72 @@
+/**
+ * API Client para Currency Types
+ * Gestiona las operaciones CRUD para los tipos de moneda
+ */
+import { api } from '$lib/api';
+
+export interface CurrencyType {
+	code: string;
+	currency_name: string;
+	country_description: string;
+}
+
+export interface CurrencyTypeListResponse {
+	items: CurrencyType[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreateCurrencyTypeData {
+	code: string;
+	currency_name: string;
+	country_description: string;
+}
+
+export interface UpdateCurrencyTypeData {
+	code?: string;
+	currency_name?: string;
+	country_description?: string;
+}
+
+/**
+ * API para Currency Types
+ */
+export const currencyTypesApi = {
+	/**
+	 * Lista todos los tipos de moneda con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<CurrencyTypeListResponse>(
+			`/v1/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}`),
+
+	/**
+	 * 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),
+
+	/**
+	 * Actualiza un tipo de moneda existente
+	 * @param code - Código del tipo de moneda a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (code: string, data: UpdateCurrencyTypeData) =>
+		api.put<CurrencyType>(`/v1/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}`)
+};

frontend/src/lib/api/dashboard/refrence_data/customs_sections.ts

@@ -0,0 +1,69 @@
+/**
+ * API Client para Customs Sections
+ * Gestiona las operaciones CRUD para las secciones aduaneras
+ */
+import { api } from '$lib/api';
+
+export interface CustomsSection {
+	customs_code: string;
+	section_name: string;
+}
+
+export interface CustomsSectionListResponse {
+	items: CustomsSection[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreateCustomsSectionData {
+	customs_code: string;
+	section_name: string;
+}
+
+export interface UpdateCustomsSectionData {
+	customs_code?: string;
+	section_name?: string;
+}
+
+/**
+ * API para Customs Sections
+ */
+export const customsSectionsApi = {
+	/**
+	 * Lista todas las secciones aduaneras con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<CustomsSectionListResponse>(
+			`/v1/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}`),
+
+	/**
+	 * 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),
+
+	/**
+	 * Actualiza una sección aduanera existente
+	 * @param customs_code - Código de la sección aduanera a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (customs_code: string, data: UpdateCustomsSectionData) =>
+		api.put<CustomsSection>(`/v1/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}`)
+};

frontend/src/lib/api/dashboard/refrence_data/customs_warehouses.ts

@@ -0,0 +1,77 @@
+/**
+ * API Client para Customs Warehouses
+ * Gestiona las operaciones CRUD para los recintos fiscalizados
+ */
+import { api } from '$lib/api';
+
+export interface CustomsWarehouse {
+	key: string;
+	customs: string;
+	fiscalized_warehouse: string;
+}
+
+export interface CustomsWarehouseListResponse {
+	items: CustomsWarehouse[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreateCustomsWarehouseData {
+	key: string;
+	customs: string;
+	fiscalized_warehouse: string;
+}
+
+export interface UpdateCustomsWarehouseData {
+	key?: string;
+	customs?: string;
+	fiscalized_warehouse?: string;
+}
+
+/**
+ * API para Customs Warehouses
+ */
+export const customsWarehousesApi = {
+	/**
+	 * Lista todos los recintos fiscalizados con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<CustomsWarehouseListResponse>(
+			`/v1/customs-warehouses?page=${page}&page_size=${pageSize}`
+		),
+
+	/**
+	 * Obtiene un recinto fiscalizado por clave compuesta (key + customs)
+	 * @param key - Clave del recinto
+	 * @param customs - Aduana asociada
+	 */
+	get: (key: string, customs: string) => 
+		api.get<CustomsWarehouse>(`/v1/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),
+
+	/**
+	 * Actualiza un recinto fiscalizado existente
+	 * @param key - Clave del recinto a actualizar
+	 * @param customs - Aduana asociada
+	 * @param data - Datos a actualizar
+	 */
+	update: (key: string, customs: string, data: UpdateCustomsWarehouseData) =>
+		api.put<CustomsWarehouse>(`/v1/customs-warehouses/${key}/${customs}`, data),
+
+	/**
+	 * Elimina un recinto fiscalizado
+	 * @param key - Clave del recinto a eliminar
+	 * @param customs - Aduana asociada
+	 */
+	delete: (key: string, customs: string) => 
+		api.delete(`/v1/customs-warehouses/${key}/${customs}`)
+};

frontend/src/lib/api/dashboard/refrence_data/incoterms.ts

@@ -0,0 +1,72 @@
+/**
+ * API Client para Incoterms
+ * Gestiona las operaciones CRUD para los términos internacionales de comercio
+ */
+import { api } from '$lib/api';
+
+export interface Incoterm {
+	code: string;
+	description_es: string;
+	description_en: string;
+}
+
+export interface IncotermListResponse {
+	items: Incoterm[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreateIncotermData {
+	code: string;
+	description_es: string;
+	description_en: string;
+}
+
+export interface UpdateIncotermData {
+	code?: string;
+	description_es?: string;
+	description_en?: string;
+}
+
+/**
+ * API para Incoterms
+ */
+export const incotermsApi = {
+	/**
+	 * Lista todos los incoterms con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<IncotermListResponse>(
+			`/v1/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}`),
+
+	/**
+	 * Crea un nuevo incoterm
+	 * @param data - Datos del incoterm a crear
+	 */
+	create: (data: CreateIncotermData) =>
+		api.post<Incoterm>('/v1/incoterms', data),
+
+	/**
+	 * Actualiza un incoterm existente
+	 * @param code - Código del incoterm a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (code: string, data: UpdateIncotermData) =>
+		api.put<Incoterm>(`/v1/incoterms/${code}`, data),
+
+	/**
+	 * Elimina un incoterm
+	 * @param code - Código del incoterm a eliminar
+	 */
+	delete: (code: string) => api.delete(`/v1/incoterms/${code}`)
+};

frontend/src/lib/api/dashboard/refrence_data/invoice_types.ts

@@ -0,0 +1,75 @@
+/**
+ * API Client para Invoice Types
+ * Gestiona las operaciones CRUD para los tipos de factura
+ */
+import { api } from '$lib/api';
+
+export interface InvoiceType {
+	key: string;
+	description: string;
+	note?: string;
+	type?: string;
+}
+
+export interface InvoiceTypeListResponse {
+	items: InvoiceType[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreateInvoiceTypeData {
+	key: string;
+	description: string;
+	note?: string;
+	type?: string;
+}
+
+export interface UpdateInvoiceTypeData {
+	key?: string;
+	description?: string;
+	note?: string;
+	type?: string;
+}
+
+/**
+ * API para Invoice Types
+ */
+export const invoiceTypesApi = {
+	/**
+	 * Lista todos los tipos de factura con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<InvoiceTypeListResponse>(
+			`/v1/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}`),
+
+	/**
+	 * 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),
+
+	/**
+	 * Actualiza un tipo de factura existente
+	 * @param key - Clave del tipo de factura a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (key: string, data: UpdateInvoiceTypeData) =>
+		api.put<InvoiceType>(`/v1/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}`)
+};

frontend/src/lib/api/dashboard/refrence_data/material_types.ts

@@ -0,0 +1,72 @@
+/**
+ * API Client para Material Types
+ * Gestiona las operaciones CRUD para los tipos de material
+ */
+import { api } from '$lib/api';
+
+export interface MaterialType {
+	key: string;
+	type: string;
+	description: string;
+}
+
+export interface MaterialTypeListResponse {
+	items: MaterialType[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreateMaterialTypeData {
+	key: string;
+	type: string;
+	description: string;
+}
+
+export interface UpdateMaterialTypeData {
+	key?: string;
+	type?: string;
+	description?: string;
+}
+
+/**
+ * API para Material Types
+ */
+export const materialTypesApi = {
+	/**
+	 * Lista todos los tipos de material con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<MaterialTypeListResponse>(
+			`/v1/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}`),
+
+	/**
+	 * 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),
+
+	/**
+	 * Actualiza un tipo de material existente
+	 * @param key - Clave del tipo de material a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (key: string, data: UpdateMaterialTypeData) =>
+		api.put<MaterialType>(`/v1/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}`)
+};

frontend/src/lib/api/dashboard/refrence_data/payment_methods.ts

@@ -0,0 +1,69 @@
+/**
+ * API Client para Payment Methods
+ * Gestiona las operaciones CRUD para los métodos de pago
+ */
+import { api } from '$lib/api';
+
+export interface PaymentMethod {
+	key: string;
+	description: string;
+}
+
+export interface PaymentMethodListResponse {
+	items: PaymentMethod[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreatePaymentMethodData {
+	key: string;
+	description: string;
+}
+
+export interface UpdatePaymentMethodData {
+	key?: string;
+	description?: string;
+}
+
+/**
+ * API para Payment Methods
+ */
+export const paymentMethodsApi = {
+	/**
+	 * Lista todos los métodos de pago con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<PaymentMethodListResponse>(
+			`/v1/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}`),
+
+	/**
+	 * 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),
+
+	/**
+	 * Actualiza un método de pago existente
+	 * @param key - Clave del método de pago a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (key: string, data: UpdatePaymentMethodData) =>
+		api.put<PaymentMethod>(`/v1/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}`)
+};

frontend/src/lib/api/dashboard/refrence_data/pedimento_codes.ts

@@ -0,0 +1,69 @@
+/**
+ * API Client para Pedimento Codes
+ * Gestiona las operaciones CRUD para las claves de pedimento
+ */
+import { api } from '$lib/api';
+
+export interface PedimentoCode {
+	code: string;
+	description: string;
+}
+
+export interface PedimentoCodeListResponse {
+	items: PedimentoCode[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreatePedimentoCodeData {
+	code: string;
+	description: string;
+}
+
+export interface UpdatePedimentoCodeData {
+	code?: string;
+	description?: string;
+}
+
+/**
+ * API para Pedimento Codes
+ */
+export const pedimentoCodesApi = {
+	/**
+	 * Lista todas las claves de pedimento con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<PedimentoCodeListResponse>(
+			`/v1/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}`),
+
+	/**
+	 * 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),
+
+	/**
+	 * Actualiza una clave de pedimento existente
+	 * @param code - Código de la clave de pedimento a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (code: string, data: UpdatePedimentoCodeData) =>
+		api.put<PedimentoCode>(`/v1/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}`)
+};

frontend/src/lib/api/dashboard/refrence_data/pedimento_regimens.ts

@@ -0,0 +1,69 @@
+/**
+ * API Client para Pedimento Regimens
+ * Gestiona las operaciones CRUD para los regímenes de pedimento
+ */
+import { api } from '$lib/api';
+
+export interface PedimentoRegimen {
+	code: string;
+	description: string;
+}
+
+export interface PedimentoRegimenListResponse {
+	items: PedimentoRegimen[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreatePedimentoRegimenData {
+	code: string;
+	description: string;
+}
+
+export interface UpdatePedimentoRegimenData {
+	code?: string;
+	description?: string;
+}
+
+/**
+ * API para Pedimento Regimens
+ */
+export const pedimentoRegimensApi = {
+	/**
+	 * Lista todos los regímenes de pedimento con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<PedimentoRegimenListResponse>(
+			`/v1/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}`),
+
+	/**
+	 * 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),
+
+	/**
+	 * Actualiza un régimen de pedimento existente
+	 * @param code - Código del régimen de pedimento a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (code: string, data: UpdatePedimentoRegimenData) =>
+		api.put<PedimentoRegimen>(`/v1/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}`)
+};

frontend/src/lib/api/dashboard/refrence_data/sectors.ts

@@ -0,0 +1,72 @@
+/**
+ * API Client para Sectors
+ * Gestiona las operaciones CRUD para los sectores
+ */
+import { api } from '$lib/api';
+
+export interface Sector {
+	key: string;
+	description: string;
+	authorized: number;
+}
+
+export interface SectorListResponse {
+	items: Sector[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreateSectorData {
+	key: string;
+	description: string;
+	authorized: number;
+}
+
+export interface UpdateSectorData {
+	key?: string;
+	description?: string;
+	authorized?: number;
+}
+
+/**
+ * API para Sectors
+ */
+export const sectorsApi = {
+	/**
+	 * Lista todos los sectores con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<SectorListResponse>(
+			`/v1/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}`),
+
+	/**
+	 * Crea un nuevo sector
+	 * @param data - Datos del sector a crear
+	 */
+	create: (data: CreateSectorData) =>
+		api.post<Sector>('/v1/sectors', data),
+
+	/**
+	 * Actualiza un sector existente
+	 * @param key - Clave del sector a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (key: string, data: UpdateSectorData) =>
+		api.put<Sector>(`/v1/sectors/${key}`, data),
+
+	/**
+	 * Elimina un sector
+	 * @param key - Clave del sector a eliminar
+	 */
+	delete: (key: string) => api.delete(`/v1/sectors/${key}`)
+};

frontend/src/lib/api/dashboard/refrence_data/states.ts

@@ -0,0 +1,75 @@
+/**
+ * API Client para States
+ * Gestiona las operaciones CRUD para los estados
+ */
+import { api } from '$lib/api';
+
+export interface State {
+	m3_key: string;
+	description: string;
+	mex_key?: string | null;
+	ame_key?: string | null;
+}
+
+export interface StateListResponse {
+	items: State[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreateStateData {
+	m3_key: string;
+	description: string;
+	mex_key?: string | null;
+	ame_key?: string | null;
+}
+
+export interface UpdateStateData {
+	m3_key?: string;
+	description?: string;
+	mex_key?: string | null;
+	ame_key?: string | null;
+}
+
+/**
+ * API para States
+ */
+export const statesApi = {
+	/**
+	 * Lista todos los estados con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<StateListResponse>(
+			`/v1/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}`),
+
+	/**
+	 * Crea un nuevo estado
+	 * @param data - Datos del estado a crear
+	 */
+	create: (data: CreateStateData) =>
+		api.post<State>('/v1/states', data),
+
+	/**
+	 * Actualiza un estado existente
+	 * @param m3Key - Clave M3 del estado a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (m3Key: string, data: UpdateStateData) =>
+		api.put<State>(`/v1/states/${m3Key}`, data),
+
+	/**
+	 * Elimina un estado
+	 * @param m3Key - Clave M3 del estado a eliminar
+	 */
+	delete: (m3Key: string) => api.delete(`/v1/states/${m3Key}`)
+};

frontend/src/lib/api/dashboard/refrence_data/transport_modes.ts

@@ -0,0 +1,69 @@
+/**
+ * API Client para Transport Modes
+ * Gestiona las operaciones CRUD para los modos de transporte
+ */
+import { api } from '$lib/api';
+
+export interface TransportMode {
+	key: string;
+	name: string;
+}
+
+export interface TransportModeListResponse {
+	items: TransportMode[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreateTransportModeData {
+	key: string;
+	name: string;
+}
+
+export interface UpdateTransportModeData {
+	key?: string;
+	name?: string;
+}
+
+/**
+ * API para Transport Modes
+ */
+export const transportModesApi = {
+	/**
+	 * Lista todos los modos de transporte con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<TransportModeListResponse>(
+			`/v1/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}`),
+
+	/**
+	 * 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),
+
+	/**
+	 * Actualiza un modo de transporte existente
+	 * @param key - Clave del modo de transporte a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (key: string, data: UpdateTransportModeData) =>
+		api.put<TransportMode>(`/v1/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}`)
+};

frontend/src/lib/api/dashboard/refrence_data/transport_types.ts

@@ -0,0 +1,69 @@
+/**
+ * API Client para Transport Types
+ * Gestiona las operaciones CRUD para los tipos de transporte
+ */
+import { api } from '$lib/api';
+
+export interface TransportType {
+	transport_code: string;
+	description: string;
+}
+
+export interface TransportTypeListResponse {
+	items: TransportType[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreateTransportTypeData {
+	transport_code: string;
+	description: string;
+}
+
+export interface UpdateTransportTypeData {
+	transport_code?: string;
+	description?: string;
+}
+
+/**
+ * API para Transport Types
+ */
+export const transportTypesApi = {
+	/**
+	 * Lista todos los tipos de transporte con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<TransportTypeListResponse>(
+			`/v1/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}`),
+
+	/**
+	 * 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),
+
+	/**
+	 * Actualiza un tipo de transporte existente
+	 * @param transportCode - Código del tipo de transporte a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (transportCode: string, data: UpdateTransportTypeData) =>
+		api.put<TransportType>(`/v1/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}`)
+};

frontend/src/lib/api/dashboard/refrence_data/valuation_methods.ts

@@ -0,0 +1,69 @@
+/**
+ * API Client para Valuation Methods
+ * Gestiona las operaciones CRUD para los métodos de valoración
+ */
+import { api } from '$lib/api';
+
+export interface ValuationMethod {
+	key: string;
+	description: string;
+}
+
+export interface ValuationMethodListResponse {
+	items: ValuationMethod[];
+	total: number;
+	page: number;
+	page_size: number;
+}
+
+export interface CreateValuationMethodData {
+	key: string;
+	description: string;
+}
+
+export interface UpdateValuationMethodData {
+	key?: string;
+	description?: string;
+}
+
+/**
+ * API para Valuation Methods
+ */
+export const valuationMethodsApi = {
+	/**
+	 * Lista todos los métodos de valoración con paginación
+	 * @param page - Número de página (por defecto 1)
+	 * @param pageSize - Tamaño de página (por defecto 50)
+	 */
+	list: (page = 1, pageSize = 50) =>
+		api.get<ValuationMethodListResponse>(
+			`/v1/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}`),
+
+	/**
+	 * 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),
+
+	/**
+	 * Actualiza un método de valoración existente
+	 * @param key - Clave del método de valoración a actualizar
+	 * @param data - Datos a actualizar
+	 */
+	update: (key: string, data: UpdateValuationMethodData) =>
+		api.put<ValuationMethod>(`/v1/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}`)
+};

frontend/src/lib/components/dashboard/reference_data/currency_types/columns.ts

@@ -0,0 +1,64 @@
+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 CurrencyType = {
+	code: string;
+	currency_name: string;
+	country_description: string;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<CurrencyType>[] {
+	return [		
+		{
+			accessorKey: "code",
+			header: "Código",
+			cell: ({ row }) => {
+				const codeSnippet = createRawSnippet<[{ code: string }]>((getCode) => {
+					const { code } = getCode();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">${code}</code>`
+					};
+				});
+				return renderSnippet(codeSnippet, { code: row.original.code });
+			}
+		},
+		{
+			accessorKey: "currency_name",
+			header: "Nombre de Moneda",
+			cell: ({ row }) => {
+				const nameSnippet = createRawSnippet<[{ name: string }]>((getName) => {
+					const { name } = getName();
+					return {
+						render: () => `<div class="max-w-[200px] truncate font-medium">${name}</div>`
+					};
+				});
+				return renderSnippet(nameSnippet, { name: row.original.currency_name });
+			}
+		},
+		{
+			accessorKey: "country_description",
+			header: "País / Descripción",
+			cell: ({ row }) => {
+				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
+					const { description } = getDesc();
+					return {
+						render: () => `<div class="max-w-[300px] truncate">${description}</div>`
+					};
+				});
+				return renderSnippet(descSnippet, { description: row.original.country_description });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/currency_types/create-edit-dialog.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Input } from "$lib/components/ui/input";
+	import { Label } from "$lib/components/ui/label";
+	import { Textarea } from "$lib/components/ui/textarea";
+	import { currencyTypesApi, type CurrencyType, type CreateCurrencyTypeData, type UpdateCurrencyTypeData } from "$lib/api/dashboard/refrence_data/currency_types";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<CurrencyType | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: CurrencyType | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		code: "",
+		currency_name: "",
+		country_description: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				code: item.code,
+				currency_name: item.currency_name,
+				country_description: item.country_description,
+			};
+		} else {
+			formData = {
+				code: "",
+				currency_name: "",
+				country_description: "",
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdateCurrencyTypeData = {
+					code: formData.code,
+					currency_name: formData.currency_name,
+					country_description: formData.country_description
+				};
+				response = await currencyTypesApi.update(item.code, payload);
+			} else {
+				const payload: CreateCurrencyTypeData = {
+					code: formData.code,
+					currency_name: formData.currency_name,
+					country_description: formData.country_description
+				};
+				response = await currencyTypesApi.create(payload);
+			}
+
+			if (response.error) {
+				// Si es error de autenticación y ya se intentó refrescar, el API lo manejará
+				// pero mostramos un mensaje más claro
+				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 = {
+				code: "",
+				currency_name: "",
+				country_description: "",
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[500px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Tipo de Moneda
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del tipo de moneda."
+					: "Completa los datos para crear un nuevo tipo de moneda."}
+			</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}
+
+			<div class="space-y-2">
+				<Label for="code">Código *</Label>
+				<Input
+					id="code"
+					bind:value={formData.code}
+					placeholder="Ej: USD"
+					maxlength={3}
+					required
+					disabled={loading || isEditing}
+				/>
+				<p class="text-sm text-muted-foreground">Código ISO de 3 caracteres</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="currency_name">Nombre de la Moneda *</Label>
+				<Input
+					id="currency_name"
+					bind:value={formData.currency_name}
+					placeholder="Ej: Dollar"
+					maxlength={15}
+					required
+					disabled={loading}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="country_description">País / Descripción *</Label>
+				<Textarea
+					id="country_description"
+					bind:value={formData.country_description}
+					placeholder="Ej: United States of America"
+					maxlength={50}
+					required
+					disabled={loading}
+					rows={3}
+				/>
+			</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/currency_types/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { CurrencyType } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: CurrencyType;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.code.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Código
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/currency_types/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>

frontend/src/lib/components/dashboard/reference_data/currency_types/delete-dialog.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { currencyTypesApi, type CurrencyType } from "$lib/api/dashboard/refrence_data/currency_types";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: CurrencyType | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await currencyTypesApi.delete(item.code);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este tipo de moneda:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-1">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Código:</span>
+							<code class="font-mono">{item.code}</code>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Moneda:</span>
+							<span class="truncate max-w-[200px] font-medium">{item.currency_name}</span>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">País:</span>
+							<span class="truncate max-w-[200px]">{item.country_description}</span>
+						</div>
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/currency_types/details-dialog.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { CurrencyType } from "$lib/api/dashboard/refrence_data/currency_types";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: CurrencyType | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[500px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Tipo de Moneda</Dialog.Title>
+			<Dialog.Description>
+				Información completa del tipo de moneda
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Código</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm">
+							{item.code}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex flex-col gap-2">
+						<span class="text-sm font-medium text-muted-foreground">Nombre de la Moneda</span>
+						<p class="text-sm font-medium">{item.currency_name}</p>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex flex-col gap-2">
+						<span class="text-sm font-medium text-muted-foreground">País / Descripción</span>
+						<p class="text-sm">{item.country_description}</p>
+					</div>
+					<Separator />
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/customs_sections/columns.ts

@@ -0,0 +1,50 @@
+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 CustomsSection = {
+	customs_code: string;
+	section_name: string;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<CustomsSection>[] {
+	return [		
+		{
+			accessorKey: "customs_code",
+			header: "Código Aduanal",
+			cell: ({ row }) => {
+				const codeSnippet = createRawSnippet<[{ code: string }]>((getCode) => {
+					const { code } = getCode();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">${code}</code>`
+					};
+				});
+				return renderSnippet(codeSnippet, { code: row.original.customs_code });
+			}
+		},
+		{
+			accessorKey: "section_name",
+			header: "Nombre de la Sección",
+			cell: ({ row }) => {
+				const nameSnippet = createRawSnippet<[{ name: string }]>((getName) => {
+					const { name } = getName();
+					return {
+						render: () => `<div class="max-w-[500px] truncate">${name}</div>`
+					};
+				});
+				return renderSnippet(nameSnippet, { name: row.original.section_name });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/customs_sections/create-edit-dialog.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Input } from "$lib/components/ui/input";
+	import { Label } from "$lib/components/ui/label";
+	import { Textarea } from "$lib/components/ui/textarea";
+	import { customsSectionsApi, type CustomsSection, type CreateCustomsSectionData, type UpdateCustomsSectionData } from "$lib/api/dashboard/refrence_data/customs_sections";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<CustomsSection | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: CustomsSection | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		customs_code: "",
+		section_name: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				customs_code: item.customs_code,
+				section_name: item.section_name,
+			};
+		} else {
+			formData = {
+				customs_code: "",
+				section_name: "",
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdateCustomsSectionData = {
+					customs_code: formData.customs_code,
+					section_name: formData.section_name
+				};
+				response = await customsSectionsApi.update(item.customs_code, payload);
+			} else {
+				const payload: CreateCustomsSectionData = {
+					customs_code: formData.customs_code,
+					section_name: formData.section_name
+				};
+				response = await customsSectionsApi.create(payload);
+			}
+
+			if (response.error) {
+				// Si es error de autenticación y ya se intentó refrescar, el API lo manejará
+				// pero mostramos un mensaje más claro
+				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 = {
+				customs_code: "",
+				section_name: "",
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[500px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nueva"} Sección Aduanal
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos de la sección aduanal."
+					: "Completa los datos para crear una nueva sección aduanal."}
+			</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}
+
+			<div class="space-y-2">
+				<Label for="customs_code">Código Aduanal *</Label>
+				<Input
+					id="customs_code"
+					bind:value={formData.customs_code}
+					placeholder="Ej: 001"
+					maxlength={3}
+					required
+					disabled={loading || isEditing}
+				/>
+				<p class="text-sm text-muted-foreground">Código de 3 caracteres</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="section_name">Nombre de la Sección *</Label>
+				<Textarea
+					id="section_name"
+					bind:value={formData.section_name}
+					placeholder="Ej: Sección de Aduanas del Norte"
+					maxlength={255}
+					required
+					disabled={loading}
+					rows={3}
+				/>
+			</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/customs_sections/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { CustomsSection } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: CustomsSection;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.customs_code.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Código
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/customs_sections/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>

frontend/src/lib/components/dashboard/reference_data/customs_sections/delete-dialog.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { customsSectionsApi, type CustomsSection } from "$lib/api/dashboard/refrence_data/customs_sections";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: CustomsSection | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await customsSectionsApi.delete(item.customs_code);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente esta sección aduanal:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-1">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Código:</span>
+							<code class="font-mono">{item.customs_code}</code>
+						</div>
+						<div class="flex flex-col gap-1 text-sm">
+							<span class="font-medium">Nombre:</span>
+							<span class="text-xs">{item.section_name}</span>
+						</div>
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/customs_sections/details-dialog.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { CustomsSection } from "$lib/api/dashboard/refrence_data/customs_sections";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: CustomsSection | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[500px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles de la Sección Aduanal</Dialog.Title>
+			<Dialog.Description>
+				Información completa de la sección aduanal
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Código Aduanal</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm">
+							{item.customs_code}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex flex-col gap-2">
+						<span class="text-sm font-medium text-muted-foreground">Nombre de la Sección</span>
+						<p class="text-sm">{item.section_name}</p>
+					</div>
+					<Separator />
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/customs_warehouses/columns.ts

@@ -0,0 +1,64 @@
+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 CustomsWarehouse = {
+	key: string;
+	customs: string;
+	fiscalized_warehouse: string;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<CustomsWarehouse>[] {
+	return [		
+		{
+			accessorKey: "key",
+			header: "Clave",
+			cell: ({ row }) => {
+				const codeSnippet = createRawSnippet<[{ code: string }]>((getCode) => {
+					const { code } = getCode();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">${code}</code>`
+					};
+				});
+				return renderSnippet(codeSnippet, { code: row.original.key });
+			}
+		},
+		{
+			accessorKey: "customs",
+			header: "Aduana",
+			cell: ({ row }) => {
+				const customsSnippet = createRawSnippet<[{ customs: string }]>((getCustoms) => {
+					const { customs } = getCustoms();
+					return {
+						render: () => `<div class="max-w-[250px] truncate">${customs}</div>`
+					};
+				});
+				return renderSnippet(customsSnippet, { customs: row.original.customs });
+			}
+		},
+		{
+			accessorKey: "fiscalized_warehouse",
+			header: "Recinto Fiscalizado",
+			cell: ({ row }) => {
+				const warehouseSnippet = createRawSnippet<[{ warehouse: string }]>((getWarehouse) => {
+					const { warehouse } = getWarehouse();
+					return {
+						render: () => `<div class="max-w-[400px] truncate">${warehouse}</div>`
+					};
+				});
+				return renderSnippet(warehouseSnippet, { warehouse: row.original.fiscalized_warehouse });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/customs_warehouses/create-edit-dialog.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Input } from "$lib/components/ui/input";
+	import { Label } from "$lib/components/ui/label";
+	import { Textarea } from "$lib/components/ui/textarea";
+	import { customsWarehousesApi, type CustomsWarehouse, type CreateCustomsWarehouseData, type UpdateCustomsWarehouseData } from "$lib/api/dashboard/refrence_data/customs_warehouses";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<CustomsWarehouse | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: CustomsWarehouse | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		key: "",
+		customs: "",
+		fiscalized_warehouse: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				key: item.key,
+				customs: item.customs,
+				fiscalized_warehouse: item.fiscalized_warehouse,
+			};
+		} else {
+			formData = {
+				key: "",
+				customs: "",
+				fiscalized_warehouse: "",
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdateCustomsWarehouseData = {
+					key: formData.key,
+					customs: formData.customs,
+					fiscalized_warehouse: formData.fiscalized_warehouse
+				};
+				response = await customsWarehousesApi.update(item.key, item.customs, payload);
+			} else {
+				const payload: CreateCustomsWarehouseData = {
+					key: formData.key,
+					customs: formData.customs,
+					fiscalized_warehouse: formData.fiscalized_warehouse
+				};
+				response = await customsWarehousesApi.create(payload);
+			}
+
+			if (response.error) {
+				// Si es error de autenticación y ya se intentó refrescar, el API lo manejará
+				// pero mostramos un mensaje más claro
+				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 = {
+				key: "",
+				customs: "",
+				fiscalized_warehouse: "",
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Recinto Fiscalizado
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del recinto fiscalizado."
+					: "Completa los datos para crear un nuevo recinto fiscalizado."}
+			</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}
+
+			<div class="grid grid-cols-2 gap-4">
+				<div class="space-y-2">
+					<Label for="key">Clave *</Label>
+					<Input
+						id="key"
+						bind:value={formData.key}
+						placeholder="Ej: 001"
+						maxlength={3}
+						required
+						disabled={loading || isEditing}
+					/>
+					<p class="text-sm text-muted-foreground">Código de 3 caracteres</p>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="customs">Aduana *</Label>
+					<Input
+						id="customs"
+						bind:value={formData.customs}
+						placeholder="Ej: Aduana de Tijuana"
+						maxlength={100}
+						required
+						disabled={loading || isEditing}
+					/>
+				</div>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="fiscalized_warehouse">Recinto Fiscalizado *</Label>
+				<Textarea
+					id="fiscalized_warehouse"
+					bind:value={formData.fiscalized_warehouse}
+					placeholder="Ej: Recinto Fiscalizado Estratégico del Norte"
+					maxlength={1000}
+					required
+					disabled={loading}
+					rows={4}
+				/>
+				<p class="text-sm text-muted-foreground">Descripción completa del recinto (máx. 1000 caracteres)</p>
+			</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/customs_warehouses/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { CustomsWarehouse } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: CustomsWarehouse;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(`${item.key}|${item.customs}`);
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Clave
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/customs_warehouses/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>

frontend/src/lib/components/dashboard/reference_data/customs_warehouses/delete-dialog.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { customsWarehousesApi, type CustomsWarehouse } from "$lib/api/dashboard/refrence_data/customs_warehouses";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: CustomsWarehouse | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await customsWarehousesApi.delete(item.key, item.customs);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este recinto fiscalizado:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Clave:</span>
+							<code class="font-mono">{item.key}</code>
+						</div>
+						<div class="flex flex-col gap-1 text-sm">
+							<span class="font-medium">Aduana:</span>
+							<span class="text-xs">{item.customs}</span>
+						</div>
+						<div class="flex flex-col gap-1 text-sm">
+							<span class="font-medium">Recinto:</span>
+							<span class="text-xs line-clamp-2">{item.fiscalized_warehouse}</span>
+						</div>
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/customs_warehouses/details-dialog.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { CustomsWarehouse } from "$lib/api/dashboard/refrence_data/customs_warehouses";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: CustomsWarehouse | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Recinto Fiscalizado</Dialog.Title>
+			<Dialog.Description>
+				Información completa del recinto fiscalizado
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="grid grid-cols-2 gap-4">
+					<div class="space-y-2">
+						<span class="text-sm font-medium text-muted-foreground">Clave</span>
+						<code class="block relative rounded bg-muted px-2 py-1 font-mono text-sm">
+							{item.key}
+						</code>
+					</div>
+					
+					<div class="space-y-2">
+						<span class="text-sm font-medium text-muted-foreground">Aduana</span>
+						<p class="text-sm font-medium">{item.customs}</p>
+					</div>
+				</div>
+				<Separator />
+
+				<div class="space-y-2">
+					<div class="flex flex-col gap-2">
+						<span class="text-sm font-medium text-muted-foreground">Recinto Fiscalizado</span>
+						<p class="text-sm whitespace-pre-wrap">{item.fiscalized_warehouse}</p>
+					</div>
+					<Separator />
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/incoterms/columns.ts

@@ -0,0 +1,64 @@
+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 Incoterm = {
+	code: string;
+	description_es: string;
+	description_en: string;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<Incoterm>[] {
+	return [		
+		{
+			accessorKey: "code",
+			header: "Código",
+			cell: ({ row }) => {
+				const codeSnippet = createRawSnippet<[{ code: string }]>((getCode) => {
+					const { code } = getCode();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${code}</code>`
+					};
+				});
+				return renderSnippet(codeSnippet, { code: row.original.code });
+			}
+		},
+		{
+			accessorKey: "description_es",
+			header: "Descripción (ES)",
+			cell: ({ row }) => {
+				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
+					const { description } = getDesc();
+					return {
+						render: () => `<div class="max-w-[350px] truncate">${description}</div>`
+					};
+				});
+				return renderSnippet(descSnippet, { description: row.original.description_es });
+			}
+		},
+		{
+			accessorKey: "description_en",
+			header: "Descripción (EN)",
+			cell: ({ row }) => {
+				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
+					const { description } = getDesc();
+					return {
+						render: () => `<div class="max-w-[350px] truncate">${description}</div>`
+					};
+				});
+				return renderSnippet(descSnippet, { description: row.original.description_en });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/incoterms/create-edit-dialog.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Input } from "$lib/components/ui/input";
+	import { Label } from "$lib/components/ui/label";
+	import { Textarea } from "$lib/components/ui/textarea";
+	import { incotermsApi, type Incoterm, type CreateIncotermData, type UpdateIncotermData } from "$lib/api/dashboard/refrence_data/incoterms";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<Incoterm | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: Incoterm | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		code: "",
+		description_es: "",
+		description_en: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				code: item.code,
+				description_es: item.description_es,
+				description_en: item.description_en,
+			};
+		} else {
+			formData = {
+				code: "",
+				description_es: "",
+				description_en: "",
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdateIncotermData = {
+					code: formData.code,
+					description_es: formData.description_es,
+					description_en: formData.description_en
+				};
+				response = await incotermsApi.update(item.code, payload);
+			} else {
+				const payload: CreateIncotermData = {
+					code: formData.code,
+					description_es: formData.description_es,
+					description_en: formData.description_en
+				};
+				response = await incotermsApi.create(payload);
+			}
+
+			if (response.error) {
+				// Si es error de autenticación y ya se intentó refrescar, el API lo manejará
+				// pero mostramos un mensaje más claro
+				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 = {
+				code: "",
+				description_es: "",
+				description_en: "",
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Incoterm
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del incoterm."
+					: "Completa los datos para crear un nuevo incoterm."}
+			</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}
+
+			<div class="space-y-2">
+				<Label for="code">Código *</Label>
+				<Input
+					id="code"
+					bind:value={formData.code}
+					placeholder="Ej: FOB"
+					maxlength={5}
+					required
+					disabled={loading || isEditing}
+				/>
+				<p class="text-sm text-muted-foreground">Código de hasta 5 caracteres (Ej: FOB, CIF, EXW)</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="description_es">Descripción en Español *</Label>
+				<Textarea
+					id="description_es"
+					bind:value={formData.description_es}
+					placeholder="Ej: Libre a bordo (puerto de carga convenido)"
+					maxlength={256}
+					required
+					disabled={loading}
+					rows={3}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="description_en">Descripción en Inglés *</Label>
+				<Textarea
+					id="description_en"
+					bind:value={formData.description_en}
+					placeholder="Ej: Free On Board (named port of shipment)"
+					maxlength={256}
+					required
+					disabled={loading}
+					rows={3}
+				/>
+			</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/incoterms/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { Incoterm } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: Incoterm;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.code.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Código
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/incoterms/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>

frontend/src/lib/components/dashboard/reference_data/incoterms/delete-dialog.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { incotermsApi, type Incoterm } from "$lib/api/dashboard/refrence_data/incoterms";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: Incoterm | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await incotermsApi.delete(item.code);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este incoterm:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Código:</span>
+							<code class="font-mono font-semibold">{item.code}</code>
+						</div>
+						<div class="flex flex-col gap-1 text-sm">
+							<span class="font-medium">Descripción (ES):</span>
+							<span class="text-xs">{item.description_es}</span>
+						</div>
+						<div class="flex flex-col gap-1 text-sm">
+							<span class="font-medium">Descripción (EN):</span>
+							<span class="text-xs">{item.description_en}</span>
+						</div>
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/incoterms/details-dialog.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { Incoterm } from "$lib/api/dashboard/refrence_data/incoterms";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: Incoterm | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Incoterm</Dialog.Title>
+			<Dialog.Description>
+				Información completa del término internacional de comercio
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Código</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm font-semibold">
+							{item.code}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex flex-col gap-2">
+						<span class="text-sm font-medium text-muted-foreground">Descripción en Español</span>
+						<p class="text-sm">{item.description_es}</p>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex flex-col gap-2">
+						<span class="text-sm font-medium text-muted-foreground">Descripción en Inglés</span>
+						<p class="text-sm">{item.description_en}</p>
+					</div>
+					<Separator />
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/invoice_types/columns.ts

@@ -0,0 +1,78 @@
+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 InvoiceType = {
+	key: string;
+	description: string;
+	note?: string;
+	type?: string;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<InvoiceType>[] {
+	return [		
+		{
+			accessorKey: "key",
+			header: "Clave",
+			cell: ({ row }) => {
+				const keySnippet = createRawSnippet<[{ key: string }]>((getKey) => {
+					const { key } = getKey();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${key}</code>`
+					};
+				});
+				return renderSnippet(keySnippet, { key: row.original.key });
+			}
+		},
+		{
+			accessorKey: "description",
+			header: "Descripción",
+			cell: ({ row }) => {
+				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
+					const { description } = getDesc();
+					return {
+						render: () => `<div class="max-w-[300px] truncate">${description}</div>`
+					};
+				});
+				return renderSnippet(descSnippet, { description: row.original.description });
+			}
+		},
+		{
+			accessorKey: "type",
+			header: "Tipo",
+			cell: ({ row }) => {
+				const typeSnippet = createRawSnippet<[{ type?: string }]>((getType) => {
+					const { type } = getType();
+					return {
+						render: () => `<div class="max-w-[150px] truncate">${type || '-'}</div>`
+					};
+				});
+				return renderSnippet(typeSnippet, { type: row.original.type });
+			}
+		},
+		{
+			accessorKey: "note",
+			header: "Nota",
+			cell: ({ row }) => {
+				const noteSnippet = createRawSnippet<[{ note?: string }]>((getNote) => {
+					const { note } = getNote();
+					return {
+						render: () => `<div class="max-w-[250px] truncate text-muted-foreground text-xs">${note || '-'}</div>`
+					};
+				});
+				return renderSnippet(noteSnippet, { note: row.original.note });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/invoice_types/create-edit-dialog.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Input } from "$lib/components/ui/input";
+	import { Label } from "$lib/components/ui/label";
+	import { Textarea } from "$lib/components/ui/textarea";
+	import { invoiceTypesApi, type InvoiceType, type CreateInvoiceTypeData, type UpdateInvoiceTypeData } from "$lib/api/dashboard/refrence_data/invoice_types";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<InvoiceType | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: InvoiceType | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		key: "",
+		description: "",
+		note: "",
+		type: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				key: item.key,
+				description: item.description,
+				note: item.note || "",
+				type: item.type || ""
+			};
+		} else {
+			formData = {
+				key: "",
+				description: "",
+				note: "",
+				type: ""
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdateInvoiceTypeData = {
+					key: formData.key,
+					description: formData.description,
+					note: formData.note || undefined,
+					type: formData.type || undefined
+				};
+				response = await invoiceTypesApi.update(item.key, payload);
+			} else {
+				const payload: CreateInvoiceTypeData = {
+					key: formData.key,
+					description: formData.description,
+					note: formData.note || undefined,
+					type: formData.type || undefined
+				};
+				response = await invoiceTypesApi.create(payload);
+			}
+
+			if (response.error) {
+				// Si es error de autenticación y ya se intentó refrescar, el API lo manejará
+				// pero mostramos un mensaje más claro
+				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 = {
+				key: "",
+				description: "",
+				note: "",
+				type: ""
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Tipo de Factura
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del tipo de factura."
+					: "Completa los datos para crear un nuevo tipo de factura."}
+			</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}
+
+			<div class="space-y-2">
+				<Label for="key">Clave *</Label>
+				<Input
+					id="key"
+					bind:value={formData.key}
+					placeholder="Ej: FAC01"
+					maxlength={5}
+					required
+					disabled={loading || isEditing}
+				/>
+				<p class="text-sm text-muted-foreground">Clave de hasta 5 caracteres</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="description">Descripción *</Label>
+				<Input
+					id="description"
+					bind:value={formData.description}
+					placeholder="Ej: Factura comercial"
+					maxlength={50}
+					required
+					disabled={loading}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="type">Tipo</Label>
+				<Input
+					id="type"
+					bind:value={formData.type}
+					placeholder="Ej: Comercial"
+					maxlength={15}
+					disabled={loading}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="note">Nota / Observación</Label>
+				<Textarea
+					id="note"
+					bind:value={formData.note}
+					placeholder="Observaciones adicionales (opcional)"
+					maxlength={500}
+					disabled={loading}
+					rows={3}
+				/>
+			</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/invoice_types/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { InvoiceType } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: InvoiceType;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.key.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Clave
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/invoice_types/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>

frontend/src/lib/components/dashboard/reference_data/invoice_types/delete-dialog.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { invoiceTypesApi, type InvoiceType } from "$lib/api/dashboard/refrence_data/invoice_types";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: InvoiceType | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await invoiceTypesApi.delete(item.key);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este tipo de factura:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Clave:</span>
+							<code class="font-mono font-semibold">{item.key}</code>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Descripción:</span>
+							<span>{item.description}</span>
+						</div>
+						{#if item.type}
+							<div class="flex items-center justify-between text-sm">
+								<span class="font-medium">Tipo:</span>
+								<span>{item.type}</span>
+							</div>
+						{/if}
+						{#if item.note}
+							<div class="flex flex-col gap-1 text-sm">
+								<span class="font-medium">Nota:</span>
+								<span class="text-xs text-muted-foreground">{item.note}</span>
+							</div>
+						{/if}
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/invoice_types/details-dialog.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { InvoiceType } from "$lib/api/dashboard/refrence_data/invoice_types";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: InvoiceType | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Tipo de Factura</Dialog.Title>
+			<Dialog.Description>
+				Información completa del tipo de factura
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Clave</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm font-semibold">
+							{item.key}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Descripción</span>
+						<span class="text-sm">{item.description}</span>
+					</div>
+					<Separator />
+				</div>
+
+				{#if item.type}
+					<div class="space-y-2">
+						<div class="flex items-center justify-between">
+							<span class="text-sm font-medium text-muted-foreground">Tipo</span>
+							<span class="text-sm">{item.type}</span>
+						</div>
+						<Separator />
+					</div>
+				{/if}
+
+				{#if item.note}
+					<div class="space-y-2">
+						<div class="flex flex-col gap-2">
+							<span class="text-sm font-medium text-muted-foreground">Nota / Observación</span>
+							<p class="text-sm text-muted-foreground">{item.note}</p>
+						</div>
+						<Separator />
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/material_types/columns.ts

@@ -0,0 +1,64 @@
+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 MaterialType = {
+	key: string;
+	type: string;
+	description: string;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<MaterialType>[] {
+	return [		
+		{
+			accessorKey: "key",
+			header: "Clave",
+			cell: ({ row }) => {
+				const keySnippet = createRawSnippet<[{ key: string }]>((getKey) => {
+					const { key } = getKey();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${key}</code>`
+					};
+				});
+				return renderSnippet(keySnippet, { key: row.original.key });
+			}
+		},
+		{
+			accessorKey: "type",
+			header: "Tipo",
+			cell: ({ row }) => {
+				const typeSnippet = createRawSnippet<[{ type: string }]>((getType) => {
+					const { type } = getType();
+					return {
+						render: () => `<div class="max-w-[150px] truncate">${type}</div>`
+					};
+				});
+				return renderSnippet(typeSnippet, { type: row.original.type });
+			}
+		},
+		{
+			accessorKey: "description",
+			header: "Descripción",
+			cell: ({ row }) => {
+				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
+					const { description } = getDesc();
+					return {
+						render: () => `<div class="max-w-[400px] truncate">${description}</div>`
+					};
+				});
+				return renderSnippet(descSnippet, { description: row.original.description });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/material_types/create-edit-dialog.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Input } from "$lib/components/ui/input";
+	import { Label } from "$lib/components/ui/label";
+	import { Textarea } from "$lib/components/ui/textarea";
+	import { materialTypesApi, type MaterialType, type CreateMaterialTypeData, type UpdateMaterialTypeData } from "$lib/api/dashboard/refrence_data/material_types";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<MaterialType | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: MaterialType | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		key: "",
+		type: "",
+		description: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				key: item.key,
+				type: item.type,
+				description: item.description
+			};
+		} else {
+			formData = {
+				key: "",
+				type: "",
+				description: ""
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdateMaterialTypeData = {
+					key: formData.key,
+					type: formData.type,
+					description: formData.description
+				};
+				response = await materialTypesApi.update(item.key, payload);
+			} else {
+				const payload: CreateMaterialTypeData = {
+					key: formData.key,
+					type: formData.type,
+					description: formData.description
+				};
+				response = await materialTypesApi.create(payload);
+			}
+
+			if (response.error) {
+				// Si es error de autenticación y ya se intentó refrescar, el API lo manejará
+				// pero mostramos un mensaje más claro
+				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 = {
+				key: "",
+				type: "",
+				description: ""
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Tipo de Material
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del tipo de material."
+					: "Completa los datos para crear un nuevo tipo de material."}
+			</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}
+
+			<div class="space-y-2">
+				<Label for="key">Clave *</Label>
+				<Input
+					id="key"
+					bind:value={formData.key}
+					placeholder="Ej: MAT001"
+					maxlength={10}
+					required
+					disabled={loading || isEditing}
+				/>
+				<p class="text-sm text-muted-foreground">Clave de hasta 10 caracteres</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="type">Tipo *</Label>
+				<Input
+					id="type"
+					bind:value={formData.type}
+					placeholder="Ej: Materia Prima"
+					maxlength={15}
+					required
+					disabled={loading}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="description">Descripción *</Label>
+				<Textarea
+					id="description"
+					bind:value={formData.description}
+					placeholder="Descripción del tipo de material"
+					maxlength={256}
+					required
+					disabled={loading}
+					rows={3}
+				/>
+			</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/material_types/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { MaterialType } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: MaterialType;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.key.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Clave
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/material_types/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>

frontend/src/lib/components/dashboard/reference_data/material_types/delete-dialog.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { materialTypesApi, type MaterialType } from "$lib/api/dashboard/refrence_data/material_types";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: MaterialType | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await materialTypesApi.delete(item.key);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este tipo de material:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Clave:</span>
+							<code class="font-mono font-semibold">{item.key}</code>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Tipo:</span>
+							<span>{item.type}</span>
+						</div>
+						<div class="flex flex-col gap-1 text-sm">
+							<span class="font-medium">Descripción:</span>
+							<span class="text-xs">{item.description}</span>
+						</div>
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/material_types/details-dialog.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { MaterialType } from "$lib/api/dashboard/refrence_data/material_types";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: MaterialType | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Tipo de Material</Dialog.Title>
+			<Dialog.Description>
+				Información completa del tipo de material
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Clave</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm font-semibold">
+							{item.key}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Tipo</span>
+						<span class="text-sm">{item.type}</span>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex flex-col gap-2">
+						<span class="text-sm font-medium text-muted-foreground">Descripción</span>
+						<p class="text-sm">{item.description}</p>
+					</div>
+					<Separator />
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/payment_methods/columns.ts

@@ -0,0 +1,50 @@
+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 PaymentMethod = {
+	key: string;
+	description: string;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<PaymentMethod>[] {
+	return [		
+		{
+			accessorKey: "key",
+			header: "Clave",
+			cell: ({ row }) => {
+				const keySnippet = createRawSnippet<[{ key: string }]>((getKey) => {
+					const { key } = getKey();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${key}</code>`
+					};
+				});
+				return renderSnippet(keySnippet, { key: row.original.key });
+			}
+		},
+		{
+			accessorKey: "description",
+			header: "Descripción",
+			cell: ({ row }) => {
+				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
+					const { description } = getDesc();
+					return {
+						render: () => `<div class="max-w-[500px] truncate">${description}</div>`
+					};
+				});
+				return renderSnippet(descSnippet, { description: row.original.description });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/payment_methods/create-edit-dialog.svelte

@@ -0,0 +1,186 @@
+<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 { paymentMethodsApi, type PaymentMethod, type CreatePaymentMethodData, type UpdatePaymentMethodData } from "$lib/api/dashboard/refrence_data/payment_methods";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<PaymentMethod | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: PaymentMethod | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		key: "",
+		description: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				key: item.key,
+				description: item.description
+			};
+		} else {
+			formData = {
+				key: "",
+				description: ""
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdatePaymentMethodData = {
+					key: formData.key,
+					description: formData.description
+				};
+				response = await paymentMethodsApi.update(item.key, payload);
+			} else {
+				const payload: CreatePaymentMethodData = {
+					key: formData.key,
+					description: formData.description
+				};
+				response = await paymentMethodsApi.create(payload);
+			}
+
+			if (response.error) {
+				// Si es error de autenticación y ya se intentó refrescar, el API lo manejará
+				// pero mostramos un mensaje más claro
+				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 = {
+				key: "",
+				description: ""
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Método de Pago
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del método de pago."
+					: "Completa los datos para crear un nuevo método de pago."}
+			</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}
+
+			<div class="space-y-2">
+				<Label for="key">Clave *</Label>
+				<Input
+					id="key"
+					bind:value={formData.key}
+					placeholder="Ej: 01"
+					maxlength={2}
+					required
+					disabled={loading || isEditing}
+				/>
+				<p class="text-sm text-muted-foreground">Clave de hasta 2 caracteres</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="description">Descripción *</Label>
+				<Input
+					id="description"
+					bind:value={formData.description}
+					placeholder="Ej: Efectivo"
+					maxlength={100}
+					required
+					disabled={loading}
+				/>
+			</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/payment_methods/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { PaymentMethod } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: PaymentMethod;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.key.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Clave
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/payment_methods/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>

frontend/src/lib/components/dashboard/reference_data/payment_methods/delete-dialog.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { paymentMethodsApi, type PaymentMethod } from "$lib/api/dashboard/refrence_data/payment_methods";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: PaymentMethod | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await paymentMethodsApi.delete(item.key);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este método de pago:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Clave:</span>
+							<code class="font-mono font-semibold">{item.key}</code>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Descripción:</span>
+							<span>{item.description}</span>
+						</div>
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/payment_methods/details-dialog.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { PaymentMethod } from "$lib/api/dashboard/refrence_data/payment_methods";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: PaymentMethod | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Método de Pago</Dialog.Title>
+			<Dialog.Description>
+				Información completa del método de pago
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Clave</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm font-semibold">
+							{item.key}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Descripción</span>
+						<span class="text-sm">{item.description}</span>
+					</div>
+					<Separator />
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/pedimento_codes/columns.ts

@@ -0,0 +1,50 @@
+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 PedimentoCode = {
+	code: string;
+	description: string;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<PedimentoCode>[] {
+	return [		
+		{
+			accessorKey: "code",
+			header: "Código",
+			cell: ({ row }) => {
+				const codeSnippet = createRawSnippet<[{ code: string }]>((getCode) => {
+					const { code } = getCode();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${code}</code>`
+					};
+				});
+				return renderSnippet(codeSnippet, { code: row.original.code });
+			}
+		},
+		{
+			accessorKey: "description",
+			header: "Descripción",
+			cell: ({ row }) => {
+				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
+					const { description } = getDesc();
+					return {
+						render: () => `<div class="max-w-[500px] truncate">${description}</div>`
+					};
+				});
+				return renderSnippet(descSnippet, { description: row.original.description });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/pedimento_codes/create-edit-dialog.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Input } from "$lib/components/ui/input";
+	import { Label } from "$lib/components/ui/label";
+	import { Textarea } from "$lib/components/ui/textarea";
+	import { pedimentoCodesApi, type PedimentoCode, type CreatePedimentoCodeData, type UpdatePedimentoCodeData } from "$lib/api/dashboard/refrence_data/pedimento_codes";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<PedimentoCode | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: PedimentoCode | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		code: "",
+		description: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				code: item.code,
+				description: item.description
+			};
+		} else {
+			formData = {
+				code: "",
+				description: ""
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdatePedimentoCodeData = {
+					code: formData.code,
+					description: formData.description
+				};
+				response = await pedimentoCodesApi.update(item.code, payload);
+			} else {
+				const payload: CreatePedimentoCodeData = {
+					code: formData.code,
+					description: formData.description
+				};
+				response = await pedimentoCodesApi.create(payload);
+			}
+
+			if (response.error) {
+				// Si es error de autenticación y ya se intentó refrescar, el API lo manejará
+				// pero mostramos un mensaje más claro
+				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 = {
+				code: "",
+				description: ""
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nueva"} Clave de Pedimento
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos de la clave de pedimento."
+					: "Completa los datos para crear una nueva clave de 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}
+
+			<div class="space-y-2">
+				<Label for="code">Código *</Label>
+				<Input
+					id="code"
+					bind:value={formData.code}
+					placeholder="Ej: A1"
+					maxlength={3}
+					required
+					disabled={loading || isEditing}
+				/>
+				<p class="text-sm text-muted-foreground">Código de hasta 3 caracteres</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="description">Descripción *</Label>
+				<Textarea
+					id="description"
+					bind:value={formData.description}
+					placeholder="Descripción de la clave de pedimento"
+					maxlength={250}
+					required
+					disabled={loading}
+					rows={3}
+				/>
+			</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/pedimento_codes/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { PedimentoCode } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: PedimentoCode;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.code.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Código
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/pedimento_codes/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>

frontend/src/lib/components/dashboard/reference_data/pedimento_codes/delete-dialog.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { pedimentoCodesApi, type PedimentoCode } from "$lib/api/dashboard/refrence_data/pedimento_codes";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: PedimentoCode | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await pedimentoCodesApi.delete(item.code);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente esta clave de pedimento:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Código:</span>
+							<code class="font-mono font-semibold">{item.code}</code>
+						</div>
+						<div class="flex flex-col gap-1 text-sm">
+							<span class="font-medium">Descripción:</span>
+							<span class="text-xs">{item.description}</span>
+						</div>
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/pedimento_codes/details-dialog.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { PedimentoCode } from "$lib/api/dashboard/refrence_data/pedimento_codes";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: PedimentoCode | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles de la Clave de Pedimento</Dialog.Title>
+			<Dialog.Description>
+				Información completa de la clave de pedimento
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Código</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm font-semibold">
+							{item.code}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex flex-col gap-2">
+						<span class="text-sm font-medium text-muted-foreground">Descripción</span>
+						<p class="text-sm">{item.description}</p>
+					</div>
+					<Separator />
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/pedimento_regimens/columns.ts

@@ -0,0 +1,50 @@
+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 PedimentoRegimen = {
+	code: string;
+	description: string;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<PedimentoRegimen>[] {
+	return [		
+		{
+			accessorKey: "code",
+			header: "Código",
+			cell: ({ row }) => {
+				const codeSnippet = createRawSnippet<[{ code: string }]>((getCode) => {
+					const { code } = getCode();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${code}</code>`
+					};
+				});
+				return renderSnippet(codeSnippet, { code: row.original.code });
+			}
+		},
+		{
+			accessorKey: "description",
+			header: "Descripción",
+			cell: ({ row }) => {
+				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
+					const { description } = getDesc();
+					return {
+						render: () => `<div class="max-w-[500px] truncate">${description}</div>`
+					};
+				});
+				return renderSnippet(descSnippet, { description: row.original.description });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/pedimento_regimens/create-edit-dialog.svelte

@@ -0,0 +1,186 @@
+<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 { pedimentoRegimensApi, type PedimentoRegimen, type CreatePedimentoRegimenData, type UpdatePedimentoRegimenData } from "$lib/api/dashboard/refrence_data/pedimento_regimens";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<PedimentoRegimen | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: PedimentoRegimen | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		code: "",
+		description: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				code: item.code,
+				description: item.description
+			};
+		} else {
+			formData = {
+				code: "",
+				description: ""
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdatePedimentoRegimenData = {
+					code: formData.code,
+					description: formData.description
+				};
+				response = await pedimentoRegimensApi.update(item.code, payload);
+			} else {
+				const payload: CreatePedimentoRegimenData = {
+					code: formData.code,
+					description: formData.description
+				};
+				response = await pedimentoRegimensApi.create(payload);
+			}
+
+			if (response.error) {
+				// Si es error de autenticación y ya se intentó refrescar, el API lo manejará
+				// pero mostramos un mensaje más claro
+				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 = {
+				code: "",
+				description: ""
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Régimen de Pedimento
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del régimen de pedimento."
+					: "Completa los datos para crear un nuevo régimen de 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}
+
+			<div class="space-y-2">
+				<Label for="code">Código *</Label>
+				<Input
+					id="code"
+					bind:value={formData.code}
+					placeholder="Ej: 01"
+					maxlength={3}
+					required
+					disabled={loading || isEditing}
+				/>
+				<p class="text-sm text-muted-foreground">Código de hasta 3 caracteres (Ej: 01, 31, 51)</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="description">Descripción *</Label>
+				<Input
+					id="description"
+					bind:value={formData.description}
+					placeholder="Ej: Importación definitiva"
+					maxlength={100}
+					required
+					disabled={loading}
+				/>
+			</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/pedimento_regimens/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { PedimentoRegimen } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: PedimentoRegimen;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.code.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Código
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/pedimento_regimens/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>

frontend/src/lib/components/dashboard/reference_data/pedimento_regimens/delete-dialog.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { pedimentoRegimensApi, type PedimentoRegimen } from "$lib/api/dashboard/refrence_data/pedimento_regimens";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: PedimentoRegimen | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await pedimentoRegimensApi.delete(item.code);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este régimen de pedimento:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Código:</span>
+							<code class="font-mono font-semibold">{item.code}</code>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Descripción:</span>
+							<span>{item.description}</span>
+						</div>
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/pedimento_regimens/details-dialog.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { PedimentoRegimen } from "$lib/api/dashboard/refrence_data/pedimento_regimens";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: PedimentoRegimen | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Régimen de Pedimento</Dialog.Title>
+			<Dialog.Description>
+				Información completa del régimen de pedimento
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Código</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm font-semibold">
+							{item.code}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Descripción</span>
+						<span class="text-sm">{item.description}</span>
+					</div>
+					<Separator />
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/sectors/columns.ts

@@ -0,0 +1,67 @@
+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 Sector = {
+	key: string;
+	description: string;
+	authorized: number;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<Sector>[] {
+	return [		
+		{
+			accessorKey: "key",
+			header: "Clave",
+			cell: ({ row }) => {
+				const keySnippet = createRawSnippet<[{ key: string }]>((getKey) => {
+					const { key } = getKey();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${key}</code>`
+					};
+				});
+				return renderSnippet(keySnippet, { key: row.original.key });
+			}
+		},
+		{
+			accessorKey: "description",
+			header: "Descripción",
+			cell: ({ row }) => {
+				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
+					const { description } = getDesc();
+					return {
+						render: () => `<div class="max-w-[500px] truncate">${description}</div>`
+					};
+				});
+				return renderSnippet(descSnippet, { description: row.original.description });
+			}
+		},
+		{
+			accessorKey: "authorized",
+			header: "Autorizado",
+			cell: ({ row }) => {
+				const authSnippet = createRawSnippet<[{ authorized: number }]>((getAuth) => {
+					const { authorized } = getAuth();
+					const badge = authorized === 1 
+						? '<span class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Sí</span>'
+						: '<span class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">No</span>';
+					return {
+						render: () => badge
+					};
+				});
+				return renderSnippet(authSnippet, { authorized: row.original.authorized });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/sectors/create-edit-dialog.svelte

@@ -0,0 +1,223 @@
+<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 { sectorsApi, type Sector, type CreateSectorData, type UpdateSectorData } from "$lib/api/dashboard/refrence_data/sectors";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<Sector | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: Sector | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		key: "",
+		description: "",
+		authorized: 0
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				key: item.key,
+				description: item.description,
+				authorized: item.authorized
+			};
+		} else {
+			formData = {
+				key: "",
+				description: "",
+				authorized: 0
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdateSectorData = {
+					key: formData.key,
+					description: formData.description,
+					authorized: formData.authorized
+				};
+				response = await sectorsApi.update(item.key, payload);
+			} else {
+				const payload: CreateSectorData = {
+					key: formData.key,
+					description: formData.description,
+					authorized: formData.authorized
+				};
+				response = await sectorsApi.create(payload);
+			}
+
+			if (response.error) {
+				// Si es error de autenticación y ya se intentó refrescar, el API lo manejará
+				// pero mostramos un mensaje más claro
+				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 = {
+				key: "",
+				description: "",
+				authorized: 0
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Sector
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del sector."
+					: "Completa los datos para crear un nuevo sector."}
+			</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}
+
+			<div class="space-y-2">
+				<Label for="key">Clave *</Label>
+				<Input
+					id="key"
+					bind:value={formData.key}
+					placeholder="Ej: 01"
+					maxlength={8}
+					required
+					disabled={loading || isEditing}
+				/>
+				<p class="text-sm text-muted-foreground">Clave de hasta 8 caracteres</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="description">Descripción *</Label>
+				<Input
+					id="description"
+					bind:value={formData.description}
+					placeholder="Ej: Sector automotriz"
+					maxlength={150}
+					required
+					disabled={loading}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<Label>Autorizado *</Label>
+				<div class="flex gap-4">
+					<label class="flex items-center gap-2 cursor-pointer">
+						<input
+							type="radio"
+							name="authorized"
+							value="1"
+							checked={formData.authorized === 1}
+							onchange={() => (formData.authorized = 1)}
+							disabled={loading}
+							class="h-4 w-4 border-gray-300 text-primary focus:ring-primary"
+						/>
+						<span class="text-sm">Sí</span>
+					</label>
+					<label class="flex items-center gap-2 cursor-pointer">
+						<input
+							type="radio"
+							name="authorized"
+							value="0"
+							checked={formData.authorized === 0}
+							onchange={() => (formData.authorized = 0)}
+							disabled={loading}
+							class="h-4 w-4 border-gray-300 text-primary focus:ring-primary"
+						/>
+						<span class="text-sm">No</span>
+					</label>
+				</div>
+				<p class="text-sm text-muted-foreground">1 = Autorizado, 0 = No autorizado</p>
+			</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/sectors/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { Sector } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: Sector;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.key.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Clave
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/sectors/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>

frontend/src/lib/components/dashboard/reference_data/sectors/delete-dialog.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { Badge } from "$lib/components/ui/badge";
+	import { sectorsApi, type Sector } from "$lib/api/dashboard/refrence_data/sectors";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: Sector | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await sectorsApi.delete(item.key);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este sector:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Clave:</span>
+							<code class="font-mono font-semibold">{item.key}</code>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Descripción:</span>
+							<span>{item.description}</span>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Autorizado:</span>
+							<Badge variant={item.authorized === 1 ? "default" : "destructive"}>
+								{item.authorized === 1 ? "Sí" : "No"}
+							</Badge>
+						</div>
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/sectors/details-dialog.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import { Badge } from "$lib/components/ui/badge";
+	import type { Sector } from "$lib/api/dashboard/refrence_data/sectors";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: Sector | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Sector</Dialog.Title>
+			<Dialog.Description>
+				Información completa del sector
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Clave</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm font-semibold">
+							{item.key}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Descripción</span>
+						<span class="text-sm">{item.description}</span>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Autorizado</span>
+						<Badge variant={item.authorized === 1 ? "default" : "destructive"}>
+							{item.authorized === 1 ? "Sí" : "No"}
+						</Badge>
+					</div>
+					<Separator />
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/states/columns.ts

@@ -0,0 +1,84 @@
+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 State = {
+	m3_key: string;
+	description: string;
+	mex_key?: string | null;
+	ame_key?: string | null;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<State>[] {
+	return [		
+		{
+			accessorKey: "m3_key",
+			header: "Clave M3",
+			cell: ({ row }) => {
+				const keySnippet = createRawSnippet<[{ m3_key: string }]>((getKey) => {
+					const { m3_key } = getKey();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${m3_key}</code>`
+					};
+				});
+				return renderSnippet(keySnippet, { m3_key: row.original.m3_key });
+			}
+		},
+		{
+			accessorKey: "description",
+			header: "Descripción",
+			cell: ({ row }) => {
+				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
+					const { description } = getDesc();
+					return {
+						render: () => `<div class="max-w-[300px] truncate">${description}</div>`
+					};
+				});
+				return renderSnippet(descSnippet, { description: row.original.description });
+			}
+		},
+		{
+			accessorKey: "mex_key",
+			header: "Clave MEX",
+			cell: ({ row }) => {
+				const mexSnippet = createRawSnippet<[{ mex_key?: string | null }]>((getMex) => {
+					const { mex_key } = getMex();
+					const content = mex_key 
+						? `<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">${mex_key}</code>`
+						: '<span class="text-muted-foreground text-xs">-</span>';
+					return {
+						render: () => content
+					};
+				});
+				return renderSnippet(mexSnippet, { mex_key: row.original.mex_key });
+			}
+		},
+		{
+			accessorKey: "ame_key",
+			header: "Clave AME",
+			cell: ({ row }) => {
+				const ameSnippet = createRawSnippet<[{ ame_key?: string | null }]>((getAme) => {
+					const { ame_key } = getAme();
+					const content = ame_key 
+						? `<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">${ame_key}</code>`
+						: '<span class="text-muted-foreground text-xs">-</span>';
+					return {
+						render: () => content
+					};
+				});
+				return renderSnippet(ameSnippet, { ame_key: row.original.ame_key });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/states/create-edit-dialog.svelte

@@ -0,0 +1,224 @@
+<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 { statesApi, type State, type CreateStateData, type UpdateStateData } from "$lib/api/dashboard/refrence_data/states";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<State | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: State | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		m3_key: "",
+		description: "",
+		mex_key: "",
+		ame_key: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				m3_key: item.m3_key,
+				description: item.description,
+				mex_key: item.mex_key || "",
+				ame_key: item.ame_key || ""
+			};
+		} else {
+			formData = {
+				m3_key: "",
+				description: "",
+				mex_key: "",
+				ame_key: ""
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdateStateData = {
+					m3_key: formData.m3_key,
+					description: formData.description,
+					mex_key: formData.mex_key || null,
+					ame_key: formData.ame_key || null
+				};
+				response = await statesApi.update(item.m3_key, payload);
+			} else {
+				const payload: CreateStateData = {
+					m3_key: formData.m3_key,
+					description: formData.description,
+					mex_key: formData.mex_key || null,
+					ame_key: formData.ame_key || null
+				};
+				response = await statesApi.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 = {
+				m3_key: "",
+				description: "",
+				mex_key: "",
+				ame_key: ""
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Estado
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del estado."
+					: "Completa los datos para crear un nuevo estado."}
+			</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}
+
+			<div class="grid grid-cols-2 gap-4">
+				<div class="space-y-2">
+					<Label for="m3_key">Clave M3 *</Label>
+					<Input
+						id="m3_key"
+						bind:value={formData.m3_key}
+						placeholder="Ej: AGS"
+						maxlength={3}
+						required
+						disabled={loading || isEditing}
+					/>
+					<p class="text-sm text-muted-foreground">Clave de hasta 3 caracteres</p>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="description">Descripción *</Label>
+					<Input
+						id="description"
+						bind:value={formData.description}
+						placeholder="Ej: Aguascalientes"
+						maxlength={50}
+						required
+						disabled={loading}
+					/>
+				</div>
+			</div>
+
+			<div class="grid grid-cols-2 gap-4">
+				<div class="space-y-2">
+					<Label for="mex_key">Clave MEX (opcional)</Label>
+					<Input
+						id="mex_key"
+						bind:value={formData.mex_key}
+						placeholder="Ej: AGS"
+						maxlength={3}
+						disabled={loading}
+					/>
+					<p class="text-sm text-muted-foreground">Clave mexicana (hasta 3 caracteres)</p>
+				</div>
+
+				<div class="space-y-2">
+					<Label for="ame_key">Clave AME (opcional)</Label>
+					<Input
+						id="ame_key"
+						bind:value={formData.ame_key}
+						placeholder="Ej: MX"
+						maxlength={2}
+						disabled={loading}
+					/>
+					<p class="text-sm text-muted-foreground">Clave americana (hasta 2 caracteres)</p>
+				</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/states/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { State } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: State;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.m3_key.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Clave M3
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/states/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>

frontend/src/lib/components/dashboard/reference_data/states/delete-dialog.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { statesApi, type State } from "$lib/api/dashboard/refrence_data/states";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: State | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await statesApi.delete(item.m3_key);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este estado:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Clave M3:</span>
+							<code class="font-mono font-semibold">{item.m3_key}</code>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Descripción:</span>
+							<span>{item.description}</span>
+						</div>
+						{#if item.mex_key}
+							<div class="flex items-center justify-between text-sm">
+								<span class="font-medium">Clave MEX:</span>
+								<code class="font-mono">{item.mex_key}</code>
+							</div>
+						{/if}
+						{#if item.ame_key}
+							<div class="flex items-center justify-between text-sm">
+								<span class="font-medium">Clave AME:</span>
+								<code class="font-mono">{item.ame_key}</code>
+							</div>
+						{/if}
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/states/details-dialog.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { State } from "$lib/api/dashboard/refrence_data/states";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: State | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Estado</Dialog.Title>
+			<Dialog.Description>
+				Información completa del estado
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Clave M3</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm font-semibold">
+							{item.m3_key}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Descripción</span>
+						<span class="text-sm">{item.description}</span>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Clave MEX</span>
+						{#if item.mex_key}
+							<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm">
+								{item.mex_key}
+							</code>
+						{:else}
+							<span class="text-sm text-muted-foreground">-</span>
+						{/if}
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Clave AME</span>
+						{#if item.ame_key}
+							<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm">
+								{item.ame_key}
+							</code>
+						{:else}
+							<span class="text-sm text-muted-foreground">-</span>
+						{/if}
+					</div>
+					<Separator />
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/transport_modes/columns.ts

@@ -0,0 +1,50 @@
+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 TransportMode = {
+	key: string;
+	name: string;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<TransportMode>[] {
+	return [		
+		{
+			accessorKey: "key",
+			header: "Clave",
+			cell: ({ row }) => {
+				const keySnippet = createRawSnippet<[{ key: string }]>((getKey) => {
+					const { key } = getKey();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${key}</code>`
+					};
+				});
+				return renderSnippet(keySnippet, { key: row.original.key });
+			}
+		},
+		{
+			accessorKey: "name",
+			header: "Nombre",
+			cell: ({ row }) => {
+				const nameSnippet = createRawSnippet<[{ name: string }]>((getName) => {
+					const { name } = getName();
+					return {
+						render: () => `<div class="max-w-[500px] truncate">${name}</div>`
+					};
+				});
+				return renderSnippet(nameSnippet, { name: row.original.name });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/transport_modes/create-edit-dialog.svelte

@@ -0,0 +1,184 @@
+<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 { transportModesApi, type TransportMode, type CreateTransportModeData, type UpdateTransportModeData } from "$lib/api/dashboard/refrence_data/transport_modes";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<TransportMode | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: TransportMode | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		key: "",
+		name: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				key: item.key,
+				name: item.name
+			};
+		} else {
+			formData = {
+				key: "",
+				name: ""
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdateTransportModeData = {
+					key: formData.key,
+					name: formData.name
+				};
+				response = await transportModesApi.update(item.key, payload);
+			} else {
+				const payload: CreateTransportModeData = {
+					key: formData.key,
+					name: formData.name
+				};
+				response = await transportModesApi.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 = {
+				key: "",
+				name: ""
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Modo de Transporte
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del modo de transporte."
+					: "Completa los datos para crear un nuevo modo de transporte."}
+			</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}
+
+			<div class="space-y-2">
+				<Label for="key">Clave *</Label>
+				<Input
+					id="key"
+					bind:value={formData.key}
+					placeholder="Ej: 01"
+					maxlength={3}
+					required
+					disabled={loading || isEditing}
+				/>
+				<p class="text-sm text-muted-foreground">Clave de hasta 3 caracteres</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="name">Nombre *</Label>
+				<Input
+					id="name"
+					bind:value={formData.name}
+					placeholder="Ej: Marítimo"
+					maxlength={30}
+					required
+					disabled={loading}
+				/>
+			</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/transport_modes/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { TransportMode } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: TransportMode;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.key.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Clave
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/transport_modes/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>

frontend/src/lib/components/dashboard/reference_data/transport_modes/delete-dialog.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { transportModesApi, type TransportMode } from "$lib/api/dashboard/refrence_data/transport_modes";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: TransportMode | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await transportModesApi.delete(item.key);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este modo de transporte:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Clave:</span>
+							<code class="font-mono font-semibold">{item.key}</code>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Nombre:</span>
+							<span>{item.name}</span>
+						</div>
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/transport_modes/details-dialog.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { TransportMode } from "$lib/api/dashboard/refrence_data/transport_modes";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: TransportMode | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Modo de Transporte</Dialog.Title>
+			<Dialog.Description>
+				Información completa del modo de transporte
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Clave</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm font-semibold">
+							{item.key}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Nombre</span>
+						<span class="text-sm">{item.name}</span>
+					</div>
+					<Separator />
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/transport_types/columns.ts

@@ -0,0 +1,50 @@
+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 TransportType = {
+	transport_code: string;
+	description: string;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<TransportType>[] {
+	return [		
+		{
+			accessorKey: "transport_code",
+			header: "Código",
+			cell: ({ row }) => {
+				const codeSnippet = createRawSnippet<[{ transport_code: string }]>((getCode) => {
+					const { transport_code } = getCode();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${transport_code}</code>`
+					};
+				});
+				return renderSnippet(codeSnippet, { transport_code: row.original.transport_code });
+			}
+		},
+		{
+			accessorKey: "description",
+			header: "Descripción",
+			cell: ({ row }) => {
+				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
+					const { description } = getDesc();
+					return {
+						render: () => `<div class="max-w-[500px] truncate">${description}</div>`
+					};
+				});
+				return renderSnippet(descSnippet, { description: row.original.description });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/transport_types/create-edit-dialog.svelte

@@ -0,0 +1,184 @@
+<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 { transportTypesApi, type TransportType, type CreateTransportTypeData, type UpdateTransportTypeData } from "$lib/api/dashboard/refrence_data/transport_types";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<TransportType | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: TransportType | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		transport_code: "",
+		description: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				transport_code: item.transport_code,
+				description: item.description
+			};
+		} else {
+			formData = {
+				transport_code: "",
+				description: ""
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdateTransportTypeData = {
+					transport_code: formData.transport_code,
+					description: formData.description
+				};
+				response = await transportTypesApi.update(item.transport_code, payload);
+			} else {
+				const payload: CreateTransportTypeData = {
+					transport_code: formData.transport_code,
+					description: formData.description
+				};
+				response = await transportTypesApi.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 = {
+				transport_code: "",
+				description: ""
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Tipo de Transporte
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del tipo de transporte."
+					: "Completa los datos para crear un nuevo tipo de transporte."}
+			</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}
+
+			<div class="space-y-2">
+				<Label for="transport_code">Código *</Label>
+				<Input
+					id="transport_code"
+					bind:value={formData.transport_code}
+					placeholder="Ej: 01"
+					maxlength={2}
+					required
+					disabled={loading || isEditing}
+				/>
+				<p class="text-sm text-muted-foreground">Código SAT o interno (hasta 2 caracteres)</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="description">Descripción *</Label>
+				<Input
+					id="description"
+					bind:value={formData.description}
+					placeholder="Ej: Autotransporte"
+					maxlength={100}
+					required
+					disabled={loading}
+				/>
+			</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/transport_types/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { TransportType } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: TransportType;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.transport_code.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Código
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/transport_types/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>

frontend/src/lib/components/dashboard/reference_data/transport_types/delete-dialog.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { transportTypesApi, type TransportType } from "$lib/api/dashboard/refrence_data/transport_types";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: TransportType | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await transportTypesApi.delete(item.transport_code);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este tipo de transporte:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Código:</span>
+							<code class="font-mono font-semibold">{item.transport_code}</code>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Descripción:</span>
+							<span>{item.description}</span>
+						</div>
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/transport_types/details-dialog.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { TransportType } from "$lib/api/dashboard/refrence_data/transport_types";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: TransportType | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Tipo de Transporte</Dialog.Title>
+			<Dialog.Description>
+				Información completa del tipo de transporte
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Código</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm font-semibold">
+							{item.transport_code}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Descripción</span>
+						<span class="text-sm">{item.description}</span>
+					</div>
+					<Separator />
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/valuation_methods/columns.ts

@@ -0,0 +1,50 @@
+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 ValuationMethod = {
+	key: string;
+	description: string;
+};
+
+export function createColumns(onSuccess?: () => void): ColumnDef<ValuationMethod>[] {
+	return [		
+		{
+			accessorKey: "key",
+			header: "Clave",
+			cell: ({ row }) => {
+				const keySnippet = createRawSnippet<[{ key: string }]>((getKey) => {
+					const { key } = getKey();
+					return {
+						render: () =>
+							`<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${key}</code>`
+					};
+				});
+				return renderSnippet(keySnippet, { key: row.original.key });
+			}
+		},
+		{
+			accessorKey: "description",
+			header: "Descripción",
+			cell: ({ row }) => {
+				const descSnippet = createRawSnippet<[{ description: string }]>((getDesc) => {
+					const { description } = getDesc();
+					return {
+						render: () => `<div class="max-w-[500px] truncate">${description}</div>`
+					};
+				});
+				return renderSnippet(descSnippet, { description: row.original.description });
+			}
+		},
+		{
+			id: "actions",
+			cell: ({ row }) => {
+				return renderComponent(DataTableActions, { item: row.original, onSuccess });
+			}
+		}
+	];
+}
+
+// Mantener compatibilidad hacia atrás
+export const columns = createColumns();

frontend/src/lib/components/dashboard/reference_data/valuation_methods/create-edit-dialog.svelte

@@ -0,0 +1,184 @@
+<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 { valuationMethodsApi, type ValuationMethod, type CreateValuationMethodData, type UpdateValuationMethodData } from "$lib/api/dashboard/refrence_data/valuation_methods";
+
+	let {
+		open = $bindable(false),
+		item = $bindable<ValuationMethod | null>(null),
+		onSuccess
+	}: {
+		open: boolean;
+		item?: ValuationMethod | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let formData = $state({
+		key: "",
+		description: ""
+	});
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	// Actualizar formData cuando item cambia
+	$effect(() => {
+		if (item) {
+			formData = {
+				key: item.key,
+				description: item.description
+			};
+		} else {
+			formData = {
+				key: "",
+				description: ""
+			};
+		}
+	});
+
+	const isEditing = $derived(!!item);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = null;
+
+		try {
+			let response;
+			if (isEditing && item) {
+				const payload: UpdateValuationMethodData = {
+					key: formData.key,
+					description: formData.description
+				};
+				response = await valuationMethodsApi.update(item.key, payload);
+			} else {
+				const payload: CreateValuationMethodData = {
+					key: formData.key,
+					description: formData.description
+				};
+				response = await valuationMethodsApi.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 = {
+				key: "",
+				description: ""
+			};
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>
+				{isEditing ? "Editar" : "Nuevo"} Método de Valoración
+			</Dialog.Title>
+			<Dialog.Description>
+				{isEditing 
+					? "Modifica los datos del método de valoración."
+					: "Completa los datos para crear un nuevo método de valoración."}
+			</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}
+
+			<div class="space-y-2">
+				<Label for="key">Clave *</Label>
+				<Input
+					id="key"
+					bind:value={formData.key}
+					placeholder="Ej: 01"
+					maxlength={2}
+					required
+					disabled={loading || isEditing}
+				/>
+				<p class="text-sm text-muted-foreground">Clave del método de valoración (hasta 2 caracteres)</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="description">Descripción *</Label>
+				<Input
+					id="description"
+					bind:value={formData.description}
+					placeholder="Ej: Valor de transacción"
+					maxlength={200}
+					required
+					disabled={loading}
+				/>
+			</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"}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/dashboard/reference_data/valuation_methods/data-table-actions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import type { ValuationMethod } from "./columns.js";
+	import CreateEditDialog from "./create-edit-dialog.svelte";
+	import DetailsDialog from "./details-dialog.svelte";
+	import DeleteDialog from "./delete-dialog.svelte";
+
+	let { 
+		item,
+		onSuccess
+	}: { 
+		item: ValuationMethod;
+		onSuccess?: () => void;
+	} = $props();
+
+	let showDetailsDialog = $state(false);
+	let showEditDialog = $state(false);
+	let showDeleteDialog = $state(false);
+
+	function handleCopyId() {
+		navigator.clipboard.writeText(item.key.toString());
+	}
+
+	function handleViewDetails() {
+		showDetailsDialog = true;
+	}
+
+	function handleEdit() {
+		showEditDialog = true;
+	}
+
+	function handleDelete() {
+		showDeleteDialog = true;
+	}
+</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>
+				<EllipsisIcon class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end">
+		<DropdownMenu.Group>
+			<DropdownMenu.Label>Acciones</DropdownMenu.Label>
+			<DropdownMenu.Item onclick={handleCopyId}>
+				Copiar Clave
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={handleViewDetails}>Ver detalles</DropdownMenu.Item>
+		<DropdownMenu.Item onclick={handleEdit}>Editar</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item class="text-destructive" onclick={handleDelete}>Eliminar</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<!-- Dialogs -->
+<DetailsDialog bind:open={showDetailsDialog} {item} />
+<CreateEditDialog bind:open={showEditDialog} bind:item {onSuccess} />
+<DeleteDialog bind:open={showDeleteDialog} {item} {onSuccess} />

frontend/src/lib/components/dashboard/reference_data/valuation_methods/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>

frontend/src/lib/components/dashboard/reference_data/valuation_methods/delete-dialog.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as AlertDialog from "$lib/components/ui/alert-dialog";
+	import { valuationMethodsApi, type ValuationMethod } from "$lib/api/dashboard/refrence_data/valuation_methods";
+
+	let {
+		open = $bindable(false),
+		item,
+		onSuccess
+	}: {
+		open: boolean;
+		item: ValuationMethod | null;
+		onSuccess?: () => void;
+	} = $props();
+
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+
+	async function handleDelete() {
+		if (!item) return;
+
+		loading = true;
+		error = null;
+
+		try {
+			const response = await valuationMethodsApi.delete(item.key);
+
+			if (response.error) {
+				error = response.error;
+				return;
+			}
+
+			// Éxito
+			open = false;
+			if (onSuccess) {
+				onSuccess();
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : "Error al eliminar";
+			console.error("Error deleting:", e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			error = null;
+		}
+		open = newOpen;
+	}
+</script>
+
+<AlertDialog.Root bind:open onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>¿Estás seguro?</AlertDialog.Title>
+			<AlertDialog.Description class="space-y-2">
+				<p>Esta acción no se puede deshacer. Se eliminará permanentemente este método de valoración:</p>
+				{#if item}
+					<div class="mt-2 rounded-lg bg-muted p-3 space-y-2">
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Clave:</span>
+							<code class="font-mono font-semibold">{item.key}</code>
+						</div>
+						<div class="flex items-center justify-between text-sm">
+							<span class="font-medium">Descripción:</span>
+							<span>{item.description}</span>
+						</div>
+					</div>
+				{/if}
+				{#if error}
+					<div class="mt-2 rounded-lg border border-destructive bg-destructive/10 p-3 text-sm text-destructive">
+						{error}
+					</div>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel disabled={loading}>Cancelar</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleDelete}
+				disabled={loading}
+				class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+			>
+				{#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}
+				Eliminar
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

frontend/src/lib/components/dashboard/reference_data/valuation_methods/details-dialog.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog";
+	import { Separator } from "$lib/components/ui/separator";
+	import type { ValuationMethod } from "$lib/api/dashboard/refrence_data/valuation_methods";
+
+	let {
+		open = $bindable(false),
+		item
+	}: {
+		open: boolean;
+		item: ValuationMethod | null;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-[600px]">
+		<Dialog.Header>
+			<Dialog.Title>Detalles del Método de Valoración</Dialog.Title>
+			<Dialog.Description>
+				Información completa del método de valoración
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if item}
+			<div class="space-y-4 py-4">
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Clave</span>
+						<code class="relative rounded bg-muted px-2 py-1 font-mono text-sm font-semibold">
+							{item.key}
+						</code>
+					</div>
+					<Separator />
+				</div>
+
+				<div class="space-y-2">
+					<div class="flex items-center justify-between">
+						<span class="text-sm font-medium text-muted-foreground">Descripción</span>
+						<span class="text-sm">{item.description}</span>
+					</div>
+					<Separator />
+				</div>
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (open = false)}>
+				Cerrar
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

frontend/src/lib/components/sidebar/modules.ts

@@ -127,11 +127,11 @@ export function getSidebarData(): SidebarData {
 					},
 					{
 						title: m["sidebar.metodos_transporte"](),
-						url: "/dashboard/reference_data/transportation_modes",
+						url: "/dashboard/reference_data/transport_modes",
 					},
 					{
 						title: m["sidebar.tipos_transporte"](),
-						url: "/dashboard/reference_data/transportation_types",
+						url: "/dashboard/reference_data/transport_types",
 					},
 					{
 						title: m["sidebar.metodos_valoracion"](),

frontend/src/lib/components/ui/badge/badge.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+				destructive:
+					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>