¡Bienvenido a la Agenda! Próximamente podrás ver y administrar tus actividades aquí.
+Estado actual de los procesos de la agencia aduanal
| ID | -Organización | -Estado | -Pedimento | -Servicio | -Acciones | -{ + setSortField('id'); + setSortOrder(sortField === 'id' && sortOrder === 'asc' ? 'desc' : 'asc'); + }} + > + ID {sortField === 'id' && (sortOrder === 'asc' ? '▲' : '▼')} + | +{ + setSortField('organizacion_name'); + setSortOrder(sortField === 'organizacion_name' && sortOrder === 'asc' ? 'desc' : 'asc'); + }} + > + Organización {sortField === 'organizacion_name' && (sortOrder === 'asc' ? '▲' : '▼')} + | +{ + setSortField('estado'); + setSortOrder(sortField === 'estado' && sortOrder === 'asc' ? 'desc' : 'asc'); + }} + > + Estado {sortField === 'estado' && (sortOrder === 'asc' ? '▲' : '▼')} + | +{ + setSortField('pedimento'); + setSortOrder(sortField === 'pedimento' && sortOrder === 'asc' ? 'desc' : 'asc'); + }} + > + Pedimento {sortField === 'pedimento' && (sortOrder === 'asc' ? '▲' : '▼')} + | +{ + setSortField('servicio'); + setSortOrder(sortField === 'servicio' && sortOrder === 'asc' ? 'desc' : 'asc'); + }} + > + Servicio {sortField === 'servicio' && (sortOrder === 'asc' ? '▲' : '▼')} + | ++ Acciones + | + + {procesos.length === 0 ? (
|---|---|---|---|---|---|
|
@@ -277,11 +341,21 @@ export default function Procesos() {
-
+
diff --git a/src/pages/Vucem.jsx b/src/pages/Vucem.jsx
index b87d3c2..c1e90b9 100644
--- a/src/pages/Vucem.jsx
+++ b/src/pages/Vucem.jsx
@@ -1,19 +1,532 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+
+const API_URL = 'http://192.168.1.195:8000/api/v1/vucem/vucem/';
export default function Vucem() {
+ const [vucemList, setVucemList] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [showCreateModal, setShowCreateModal] = useState(false);
+ const [showEditModal, setShowEditModal] = useState(false);
+ const [editVucem, setEditVucem] = useState(null);
+ const [showDeleteModal, setShowDeleteModal] = useState(false);
+ const [deleteVucem, setDeleteVucem] = useState(null);
+
+ // Estado para formulario de creación/edición
+ const initialForm = {
+ usuario: '',
+ password: '',
+ patente: '',
+ key: null,
+ cer: null,
+ is_importador: false,
+ acusecove: false,
+ acuseedocument: false,
+ is_active: true,
+ };
+ const [form, setForm] = useState(initialForm);
+
+ // Handlers básicos para inputs
+ const handleInputChange = e => {
+ const { name, value, type, checked, files } = e.target;
+ if (type === 'checkbox') {
+ setForm(f => ({ ...f, [name]: checked }));
+ } else if (type === 'file') {
+ setForm(f => ({ ...f, [name]: files[0] }));
+ } else {
+ setForm(f => ({ ...f, [name]: value }));
+ }
+ };
+ const closeModals = () => {
+ setShowCreateModal(false);
+ setShowEditModal(false);
+ setShowDeleteModal(false);
+ setForm(initialForm);
+ setEditVucem(null);
+ setDeleteVucem(null);
+ };
+
+ // Fetch list
+ const fetchVucem = async () => {
+ setLoading(true);
+ try {
+ const token = localStorage.getItem('access');
+ const res = await fetch(API_URL, {
+ headers: token ? { 'Authorization': `Bearer ${token}` } : {},
+ });
+ if (!res.ok) throw new Error('Error al cargar VUCEM');
+ const data = await res.json();
+ setVucemList(data);
+ setError(null);
+ } catch (err) {
+ setError('Error al cargar VUCEM');
+ }
+ setLoading(false);
+ };
+
+ useEffect(() => {
+ fetchVucem();
+ }, []);
+
+ // Filtros visuales
+ const [filterUsuario, setFilterUsuario] = useState('');
+ const [filterPatente, setFilterPatente] = useState('');
+ const filteredList = vucemList.filter(v =>
+ v.usuario.toLowerCase().includes(filterUsuario.toLowerCase()) &&
+ v.patente.toLowerCase().includes(filterPatente.toLowerCase())
+ );
+
+ // Paginación estilo Users.jsx
+ const [page, setPage] = useState(1);
+ const pageSize = 10;
+ const totalPages = Math.max(1, Math.ceil(filteredList.length / pageSize));
+ const paginatedList = filteredList.slice((page - 1) * pageSize, page * pageSize);
+
+ // Reset page si cambia el filtro
+ useEffect(() => { setPage(1); }, [filterUsuario, filterPatente]);
+
+ // Table y header estilo Users.jsx
return (
-
-
- Vucem-Esta es la vista de integración con VUCEM. Aquí podrás consultar, gestionar o integrar funcionalidades relacionadas con la Ventanilla Única de Comercio Exterior Mexicana. -
- |