actualizar el formulario de vucem para permitir agregar organizacion

src/pages/Vucem.jsx

@@ -202,10 +202,13 @@ function RelacionarImportadoresModal({ open, onClose, vucem }) {
 }
 import React, { useEffect, useState } from 'react';
 import { fetchWithAuth, postWithAuth, putWithAuth, deleteWithAuth, putFormDataWithAuth, postFormDataWithAuth, patchWithAuth } from '../fetchWithAuth';
+import { useUser } from '../context/UserContext';
 
 const API_URL = import.meta.env.VITE_EFC_API_URL;
 export default function Vucem() {
   // Estado para modal de relacionar importadores
+
+  const isDebugMode = import.meta.env.VITE_DEBUG_MODE === 'true';
   const [showRelacionarModal, setShowRelacionarModal] = useState(false);
   const [selectedVucem, setSelectedVucem] = useState(null);
   const [vucemList, setVucemList] = useState([]);
@@ -216,10 +219,13 @@ export default function Vucem() {
   const [editVucem, setEditVucem] = useState(null);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [deleteVucem, setDeleteVucem] = useState(null);
+  const [organizaciones, setOrganizaciones] = useState([]);
+  const { user: currentUser } = useUser();
   
   // Estado para formulario de creación/edición
   const initialForm = {
     usuario: '',
+    organizacion: '',
     password: '',
     patente: '',
     efirma: '',
@@ -260,6 +266,22 @@ export default function Vucem() {
     }));
   };
 
+  useEffect(() => {
+    const fetchOrganizaciones = async () => {
+      try {
+        const url = `${import.meta.env.VITE_EFC_API_URL}/organization/organizaciones/`;
+        const res = await fetchWithAuth(url); // ← USA fetchWithAuth
+        if (!res.ok) throw new Error('Error al obtener las organizaciones');
+        const data = await res.json();
+        setOrganizaciones(data);
+      } catch (err) {
+        console.error('Error fetching organizaciones:', err);
+        setOrganizaciones([]); // ← Asegurar que siempre sea un array
+      }
+    };
+    fetchOrganizaciones();
+  }, []);
+
   // Funciones para alternar visibilidad en modal de edición
   const toggleEditPasswordVisibility = () => {
     setShowEditPassword(!showEditPassword);
@@ -358,6 +380,7 @@ export default function Vucem() {
       const res = await fetchWithAuth(`${API_URL}/vucem/vucem/`);
       if (!res.ok) throw new Error('Error al cargar Ventanilla Unica');
       const data = await res.json();
+      // console.log('data > ', data);
       setVucemList(data);
       setError(null);
     } catch (err) {
@@ -1272,12 +1295,13 @@ export default function Vucem() {
                 formData.append('password', form.password);
                 formData.append('patente', form.patente);
                 formData.append('efirma', form.efirma);
-                if (form.key) formData.append('key', form.key);
-                if (form.cer) formData.append('cer', form.cer);
                 formData.append('is_importador', form.is_importador);
+                formData.append('is_active', form.is_active);
                 formData.append('acusecove', form.acusecove);
                 formData.append('acuseedocument', form.acuseedocument);
-                formData.append('is_active', form.is_active);
+                formData.append('organizacion_id', form.organizacion);
+                if (form.key) formData.append('key', form.key);
+                if (form.cer) formData.append('cer', form.cer);
                 try {
                   const res = await postFormDataWithAuth(`${API_URL}/vucem/vucem/`, formData);
                   if (!res.ok) throw new Error('Error al crear');
@@ -1553,6 +1577,54 @@ export default function Vucem() {
                   </div>
                 </div>
 
+                {/* Seccion de organizacion para super_users */}
+                {currentUser.is_superuser ? (
+                  <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
+                    <div className="flex items-center mb-3 pb-2 border-b border-slate-300">
+                      <div className="bg-amber-600 rounded-lg p-2 mr-3 shadow-sm">
+                        <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        </svg>
+                      </div>
+                      <div>
+                        <h4 className="text-sm font-semibold text-slate-800">Configuracion de Organizaciones</h4>
+                        <p className="text-xs text-slate-600">Asignar la Organizacion a la que pertenece.</p>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-1 lg:grid-cols-1 gap-4">
+                      <div className="space-y-1">
+                        <label className="block text-xs font-semibold text-slate-700">
+                          Seleccionar Organizacion <span className="text-red-600">*</span>
+                        </label>
+                        <div className="relative rounded-lg shadow-sm">
+                          <select
+                            name="organizacion"
+                            value={form.organizacion || ''}
+                            onChange={handleInputChange}
+                            className="block w-full rounded-lg border-gray-300 pl-3 pr-10 py-2.5 text-gray-900 placeholder-gray-500 
+                              focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
+                              transition-all duration-200 bg-white appearance-none"
+                          >
+                            <option value="">Todas las organizaciones</option>
+                            {organizaciones.results && organizaciones.results.map(org => (
+                              <option key={org.id} value={org.id}>
+                                {org.nombre}
+                              </option>
+                            ))}
+                          </select>
+                          <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                            <svg className="h-5 w-5 text-gray-400 group-focus-within:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="bg-slate-50 rounded-lg p-4 border border-slate-200"></div>
+                )}
                 {/* Botones de acción */}
                 <div className="flex flex-col sm:flex-row justify-end space-y-2 sm:space-y-0 sm:space-x-3 pt-4 border-t border-slate-200">
                   <button