reportes update #8
@@ -4421,7 +4421,8 @@ export default function PedimentoDetail() {
|
||||
</div>
|
||||
</div>
|
||||
) : previewType === 'xml' ? (
|
||||
<div className="flex-1 flex flex-col bg-white">
|
||||
// <div className="flex-1 flex flex-col bg-white">
|
||||
<div className="flex flex-col h-full bg-white">
|
||||
<div className="bg-gray-100 px-6 py-3 border-b border-gray-200 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="bg-green-100 p-1.5 rounded-lg">
|
||||
@@ -4445,10 +4446,14 @@ export default function PedimentoDetail() {
|
||||
</button>
|
||||
</div>
|
||||
<pre
|
||||
className="flex-1 p-6 overflow-auto text-sm bg-white border-l-4 border-green-400"
|
||||
className="flex-1 p-6 overflow-x-auto overflow-y-auto text-sm bg-white border-l-4 border-green-400"
|
||||
// className="flex-1 p-6 overflow-auto text-sm bg-white border-l-4 border-green-400"
|
||||
style={{
|
||||
fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
|
||||
lineHeight: '1.6'
|
||||
lineHeight: '1.6',
|
||||
// minHeight: '400px',
|
||||
width: '100%',
|
||||
whiteSpace: 'pre'
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: previewXmlHtml }}
|
||||
/>
|
||||
|
||||
@@ -94,11 +94,9 @@ export default function Reports() {
|
||||
.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
|
||||
.join('&');
|
||||
const url = `${import.meta.env.VITE_EFC_API_URL}/reports/table-summary/${params ? `?${params}` : ''}`;
|
||||
console.log('Cumplimiento Report Request:', url);
|
||||
try {
|
||||
const res = await fetchWithAuth(url);
|
||||
const res = await fetchWithAuth(url);
|
||||
const data = await res.json();
|
||||
console.log('Cumplimiento Report Response:', data);
|
||||
if (!res.ok) throw new Error('Error al generar el reporte');
|
||||
alert('Reporte solicitado correctamente. Aparecerá en el historial cuando esté listo.');
|
||||
} catch (err) {
|
||||
@@ -123,6 +121,47 @@ export default function Reports() {
|
||||
};
|
||||
const [summaryData, setSummaryData] = useState(null);
|
||||
|
||||
const initialFiltersControlPedimento = {
|
||||
pedimento_app: '',
|
||||
fecha_pago__gte: '',
|
||||
fecha_pago__lte: '',
|
||||
organizacion_id: organizacionId || '',
|
||||
};
|
||||
|
||||
// control_pedimento
|
||||
const [filtersControlPedimento, setFiltersControlPedimento] = useState(initialFiltersControlPedimento);
|
||||
const handleFilterChangeControlPedimento = (e) => {
|
||||
setFiltersControlPedimento({ ...filtersControlPedimento, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handleGenerarReporteControlPedimento = async () => {
|
||||
// if (!organizacionId ) {
|
||||
// alert('No se pudo obtener el organizacion_id. Intenta de nuevo más tarde.');
|
||||
// return;
|
||||
// }
|
||||
// Build query params from filtersCumplimiento and add organizacion_id
|
||||
const paramsObj = { ...filtersControlPedimento };
|
||||
|
||||
if(paramsObj.organizacion_id == ''){
|
||||
alert('No se pudo obtener el organizacion_id. Selecciona tu organizacion para intenta de nuevo.');
|
||||
return;
|
||||
}
|
||||
|
||||
const params = Object.entries(paramsObj)
|
||||
.filter(([_, v]) => v)
|
||||
.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
|
||||
.join('&');
|
||||
const url = `${import.meta.env.VITE_EFC_API_URL}/reports/control-pedimento/${params ? `?${params}` : ''}`;
|
||||
try {
|
||||
const res = await fetchWithAuth(url);
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error('Error al generar el reporte');
|
||||
alert('Reporte solicitado correctamente. Aparecerá en el historial cuando esté listo.');
|
||||
} catch (err) {
|
||||
alert('No se pudo generar el reporte.');
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch summary data for dashboard/cards
|
||||
const fetchSummary = async () => {
|
||||
try {
|
||||
@@ -156,6 +195,233 @@ export default function Reports() {
|
||||
const [showTour, setShowTour] = useState(false);
|
||||
const [tourStep, setTourStep] = useState(0);
|
||||
|
||||
const [organizaciones, setOrganizaciones] = useState([]);
|
||||
|
||||
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();
|
||||
}, []);
|
||||
|
||||
const [globalFilters, setGlobalFilters] = useState({
|
||||
rfc: '',
|
||||
fecha_pago_desde: '',
|
||||
fecha_pago_hasta: '',
|
||||
organizacion: '',
|
||||
patente: '',
|
||||
pedimento: ''
|
||||
});
|
||||
|
||||
const renderGlobalFilters = () => (
|
||||
<div className="mb-6">
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden border border-blue-100">
|
||||
<div className="p-4 border-b border-blue-50">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-gray-900">Filtros globales</h3>
|
||||
<p className="text-sm text-gray-500">Filtros aplicables a todos los modelos</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{/* Filtro por RFC */}
|
||||
<div className="group">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
RFC
|
||||
</label>
|
||||
<div className="relative rounded-lg shadow-sm">
|
||||
<input
|
||||
type="text"
|
||||
value={globalFilters.rfc || ''}
|
||||
onChange={(e) => setGlobalFilters(prev => ({
|
||||
...prev,
|
||||
rfc: e.target.value
|
||||
}))}
|
||||
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"
|
||||
placeholder="Ej: ABC123456789"
|
||||
/>
|
||||
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filtro por Fecha Pago Desde */}
|
||||
<div className="group">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Fecha Pago Desde
|
||||
</label>
|
||||
<div className="relative rounded-lg shadow-sm">
|
||||
<input
|
||||
type="date"
|
||||
value={globalFilters.fecha_pago_desde || ''}
|
||||
onChange={(e) => setGlobalFilters(prev => ({
|
||||
...prev,
|
||||
fecha_pago_desde: e.target.value
|
||||
}))}
|
||||
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"
|
||||
/>
|
||||
<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filtro por Fecha Pago Hasta */}
|
||||
<div className="group">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Fecha Pago Hasta
|
||||
</label>
|
||||
<div className="relative rounded-lg shadow-sm">
|
||||
<input
|
||||
type="date"
|
||||
value={globalFilters.fecha_pago_hasta || ''}
|
||||
onChange={(e) => setGlobalFilters(prev => ({
|
||||
...prev,
|
||||
fecha_pago_hasta: e.target.value
|
||||
}))}
|
||||
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"
|
||||
/>
|
||||
<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filtro por Patente */}
|
||||
<div className="group">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Patente
|
||||
</label>
|
||||
<div className="relative rounded-lg shadow-sm">
|
||||
<input
|
||||
type="text"
|
||||
value={globalFilters.patente || ''}
|
||||
onChange={(e) => setGlobalFilters(prev => ({
|
||||
...prev,
|
||||
patente: e.target.value
|
||||
}))}
|
||||
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"
|
||||
placeholder="Ej: 1234"
|
||||
/>
|
||||
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filtro por Pedimento */}
|
||||
<div className="group">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Pedimento
|
||||
</label>
|
||||
<div className="relative rounded-lg shadow-sm">
|
||||
<input
|
||||
type="text"
|
||||
value={globalFilters.pedimento || ''}
|
||||
onChange={(e) => setGlobalFilters(prev => ({
|
||||
...prev,
|
||||
pedimento: e.target.value
|
||||
}))}
|
||||
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"
|
||||
placeholder="Ej: 1234567"
|
||||
/>
|
||||
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filtro por Organización */}
|
||||
<div className="group">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Organización
|
||||
</label>
|
||||
<div className="relative rounded-lg shadow-sm">
|
||||
<select
|
||||
value={globalFilters.organizacion || ''}
|
||||
onChange={(e) => setGlobalFilters(prev => ({
|
||||
...prev,
|
||||
organizacion: e.target.value
|
||||
}))}
|
||||
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} {/* Usar el campo 'nombre' que sí existe */}
|
||||
</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>
|
||||
|
||||
{/* Botón para limpiar filtros globales */}
|
||||
<div className="mt-4 flex justify-end">
|
||||
<button
|
||||
onClick={() => setGlobalFilters({
|
||||
rfc: '',
|
||||
fecha_pago_desde: '',
|
||||
fecha_pago_hasta: '',
|
||||
organizacion: '',
|
||||
patente: '',
|
||||
pedimento: ''
|
||||
})}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200
|
||||
focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
|
||||
>
|
||||
Limpiar filtros globales
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Estado para formato de exportación personalizado
|
||||
const [showFormatSelector, setShowFormatSelector] = useState(false);
|
||||
|
||||
@@ -172,12 +438,28 @@ export default function Reports() {
|
||||
const initialModels = activeTab === 'pedimentos' ? pedimentosModels : datastageModels;
|
||||
const defaultModel = initialModels[0] || { model: '', fields: [], filters: {} };
|
||||
|
||||
// esquema para el resto
|
||||
// Estado para modelo seleccionado
|
||||
const [selectedModel, setSelectedModel] = useState(defaultModel.model);
|
||||
|
||||
// Estado para campos seleccionados
|
||||
const [selectedFields, setSelectedFields] = useState(defaultModel.fields);
|
||||
|
||||
// esquema para el nuevo
|
||||
const [modoMultiple, setModoMultiple] = useState(false);
|
||||
const [selectedModels, setSelectedModels] = useState(defaultModel.model);
|
||||
const [selectedFieldsDataStage, setSelectedFieldsDataStage] = useState([]);
|
||||
const [modelFieldsMap, setModelFieldsMap] = useState({});
|
||||
|
||||
const isModoMultiple = Object.keys(modelFieldsMap).length > 1;
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedModel) {
|
||||
// Cargar campos previamente seleccionados para este modelo
|
||||
const camposGuardados = modelFieldsMap[selectedModel] || [];
|
||||
setSelectedFieldsDataStage(camposGuardados);
|
||||
}
|
||||
}, [selectedModel, modelFieldsMap]);
|
||||
|
||||
// Estado para campo seleccionado en lista disponible
|
||||
const [availableSelected, setAvailableSelected] = useState(null);
|
||||
|
||||
@@ -324,6 +606,7 @@ export default function Reports() {
|
||||
useEffect(() => {
|
||||
fetchSummary();
|
||||
}, []);
|
||||
|
||||
// Función para manejar la exportación del modelo
|
||||
const handleExportModel = async () => {
|
||||
if (selectedFields.length === 0) {
|
||||
@@ -429,6 +712,353 @@ export default function Reports() {
|
||||
}
|
||||
};
|
||||
|
||||
// Modificar la función addField para actualizar el mapeo
|
||||
const addFieldDataStage = (field) => {
|
||||
const nuevosCampos = [...selectedFieldsDataStage, field];
|
||||
|
||||
// Actualizar estado local
|
||||
setSelectedFieldsDataStage(nuevosCampos);
|
||||
|
||||
// Actualizar mapeo global
|
||||
setModelFieldsMap(prev => ({
|
||||
...prev,
|
||||
[selectedModel]: nuevosCampos
|
||||
}));
|
||||
};
|
||||
|
||||
// Modificar la función removeField para actualizar el mapeo
|
||||
const removeFieldDataStage = (field) => {
|
||||
const nuevosCampos = selectedFieldsDataStage.filter(f => f !== field);
|
||||
|
||||
// Actualizar estado local
|
||||
setSelectedFieldsDataStage(nuevosCampos);
|
||||
|
||||
// Actualizar mapeo global
|
||||
setModelFieldsMap(prev => ({
|
||||
...prev,
|
||||
[selectedModel]: nuevosCampos
|
||||
}));
|
||||
};
|
||||
|
||||
// Modificar includeAllFields
|
||||
const includeAllFieldsDataStage = () => {
|
||||
const currentModel = datastageModels.find(m => m.model === selectedModel);
|
||||
if (!currentModel) return;
|
||||
|
||||
setSelectedFieldsDataStage([...currentModel.fields]);
|
||||
setModelFieldsMap(prev => ({
|
||||
...prev,
|
||||
[selectedModel]: [...currentModel.fields]
|
||||
}));
|
||||
};
|
||||
|
||||
// Modificar removeAllFields
|
||||
const removeAllFieldsDataStage = () => {
|
||||
setSelectedFieldsDataStage([]);
|
||||
setModelFieldsMap(prev => ({
|
||||
...prev,
|
||||
[selectedModel]: []
|
||||
}));
|
||||
};
|
||||
|
||||
// Nueva función específica para DataStage múltiple
|
||||
const handleExportDataStage = async () => {
|
||||
// Verificar que haya al menos un modelo con campos seleccionados
|
||||
const modelosConCampos = Object.entries(modelFieldsMap)
|
||||
.filter(([_, campos]) => campos.length > 0)
|
||||
.map(([modelo]) => modelo);
|
||||
|
||||
if (modelosConCampos.length === 0) {
|
||||
alert('Por favor selecciona al menos un campo en algún modelo');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsExporting(true);
|
||||
|
||||
try {
|
||||
const progressDiv = document.createElement('div');
|
||||
progressDiv.className = 'fixed bottom-4 right-4 bg-white p-4 rounded-lg shadow-xl border border-blue-100';
|
||||
progressDiv.innerHTML = `
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500"></div>
|
||||
<p class="text-sm text-gray-600">Preparando exportación DataStage...</p>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(progressDiv);
|
||||
|
||||
// DETECCIÓN AUTOMÁTICA DEL MODO
|
||||
const modo = modelosConCampos.length > 1 ? 'multiple' : 'simple';
|
||||
|
||||
const exportData = {
|
||||
modo: modo,
|
||||
format: exportFormat,
|
||||
globalFilters: globalFilters
|
||||
};
|
||||
|
||||
if (modo === 'simple') {
|
||||
// MODO SIMPLE: solo un modelo con campos
|
||||
const modeloUnico = modelosConCampos[0];
|
||||
const modelData = datastageModels.find(m => m.model === modeloUnico);
|
||||
|
||||
exportData.model = modeloUnico;
|
||||
exportData.fields = modelFieldsMap[modeloUnico];
|
||||
|
||||
} else {
|
||||
// MODO MÚLTIPLE: varios modelos con campos
|
||||
exportData.models = modelosConCampos.map(modelo => {
|
||||
const modelData = datastageModels.find(m => m.model === modelo);
|
||||
return {
|
||||
model: modelo,
|
||||
name: modelData?.name || modelo,
|
||||
fields: modelFieldsMap[modelo]
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// Resto del código de exportación...
|
||||
progressDiv.innerHTML = `
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="animate-spin rounded-full h-5 w-5 border-b-2 border-green-500"></div>
|
||||
<p class="text-sm text-gray-600">Generando archivo DataStage...</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const response = await fetchWithAuth(`${API_URL}/reports/exportmodel/datastage/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(exportData),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.error || errorData.message || 'Error al exportar DataStage');
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
|
||||
const contentDisposition = response.headers.get('Content-Disposition');
|
||||
|
||||
let fileName = '';
|
||||
|
||||
if (contentDisposition) {
|
||||
const filenameMatch = contentDisposition.match(/filename="(.+?)"/) ||
|
||||
contentDisposition.match(/filename=([^;]+)/);
|
||||
|
||||
if (filenameMatch) {
|
||||
fileName = filenameMatch[1].replace(/"/g, '');
|
||||
}
|
||||
}
|
||||
|
||||
if (!fileName) {
|
||||
const isZip = blob.type === 'application/zip';
|
||||
const isExcel = blob.type.includes('spreadsheetml');
|
||||
|
||||
if (isZip) {
|
||||
fileName = modo === 'multiple'
|
||||
? `datastage_reports_${new Date().toISOString().split('T')[0]}.zip`
|
||||
: `datastage_${modelosConCampos[0]}_particionado_${new Date().toISOString().split('T')[0]}.zip`;
|
||||
} else if (isExcel) {
|
||||
fileName = `datastage_${modelosConCampos[0]}_${new Date().toISOString().split('T')[0]}.xlsx`;
|
||||
} else {
|
||||
fileName = `datastage_${modelosConCampos[0]}_${new Date().toISOString().split('T')[0]}.csv`;
|
||||
}
|
||||
}
|
||||
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', fileName);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
progressDiv.innerHTML = `
|
||||
<div class="flex items-center gap-3 text-green-600">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<p class="text-sm">¡Exportación completada! (Modo ${modo})</p>
|
||||
</div>
|
||||
`;
|
||||
setTimeout(() => {
|
||||
progressDiv.style.opacity = '0';
|
||||
progressDiv.style.transform = 'translateY(100%)';
|
||||
setTimeout(() => progressDiv.remove(), 300);
|
||||
}, 2000);
|
||||
|
||||
showMessage(`¡Archivo ${fileName} descargado exitosamente! (${modo === 'multiple' ? 'Múltiple' : 'Simple'})`, 'success');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ ERROR AL EXPORTAR DATASTAGE:', error);
|
||||
showMessage(error.message || 'Error al exportar DataStage. Por favor intente nuevamente.', 'error');
|
||||
} finally {
|
||||
setIsExporting(false);
|
||||
const progressDiv = document.querySelector('.fixed.bottom-4.right-4');
|
||||
if (progressDiv) progressDiv.remove();
|
||||
}
|
||||
};
|
||||
|
||||
const renderFieldsDataStage = () => {
|
||||
const currentModel = datastageModels.find(m => m.model === selectedModel);
|
||||
const availableFields = currentModel ? currentModel.fields : [];
|
||||
|
||||
// 🔥 CORREGIR: Siempre usar selectedFieldsDataStage para el modelo actual
|
||||
const selectedFieldsForModel = selectedFieldsDataStage;
|
||||
|
||||
const formatFieldName = (field) => {
|
||||
return field.split('_')
|
||||
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(' ');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mb-6">
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden border border-blue-100">
|
||||
<div className="p-4 border-b border-blue-50">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-gray-900">
|
||||
{modoMultiple ? `Campos de ${selectedModel}` : 'Campos del reporte'}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{modoMultiple
|
||||
? `Selecciona campos para ${selectedModel}`
|
||||
: 'Selecciona los campos a incluir'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full bg-blue-50 text-blue-700 text-sm font-medium">
|
||||
{selectedFieldsForModel.length} seleccionados
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Panel de campos */}
|
||||
<div className="flex gap-4 flex-col lg:flex-row">
|
||||
{/* Panel izquierdo - Campos disponibles */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="text-sm font-medium text-gray-700">Campos disponibles</h4>
|
||||
<button
|
||||
onClick={includeAllFieldsDataStage}
|
||||
disabled={availableFields.length === selectedFieldsForModel.length}
|
||||
className="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
Incluir todos
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-gray-50 rounded-lg p-2 max-h-80 overflow-y-auto custom-scrollbar">
|
||||
{availableFields.filter(field => !selectedFieldsForModel.includes(field)).length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-gray-400">
|
||||
<svg className="w-12 h-12 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
<p className="text-sm">Todos los campos están incluidos</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-1">
|
||||
{availableFields
|
||||
.filter(field => !selectedFieldsForModel.includes(field))
|
||||
.map(field => (
|
||||
<div
|
||||
key={field}
|
||||
onClick={() => addFieldDataStage(field)}
|
||||
className="group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 hover:bg-gray-100"
|
||||
>
|
||||
<span className="text-sm font-medium">{formatFieldName(field)}</span>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
addFieldDataStage(field);
|
||||
}}
|
||||
className="opacity-0 group-hover:opacity-100 p-1 rounded-md hover:bg-blue-100 text-blue-600 transition-all duration-200"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Panel derecho - Campos seleccionados */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="text-sm font-medium text-gray-700">
|
||||
{modoMultiple ? `Campos incluidos en ${selectedModel}` : 'Campos incluidos'}
|
||||
</h4>
|
||||
<button
|
||||
onClick={removeAllFieldsDataStage}
|
||||
disabled={selectedFieldsForModel.length === 0}
|
||||
className="inline-flex items-center px-2.5 py-1.5 text-xs font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
Quitar todos
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-gray-50 rounded-lg p-2 max-h-80 overflow-y-auto custom-scrollbar">
|
||||
{selectedFieldsForModel.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-8 text-gray-400">
|
||||
<svg className="w-12 h-12 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<p className="text-sm">No hay campos seleccionados</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-1">
|
||||
{selectedFieldsForModel.map(field => (
|
||||
<div
|
||||
key={field}
|
||||
className="group flex items-center justify-between p-2 rounded-md cursor-pointer transition-all duration-200 hover:bg-gray-100"
|
||||
onClick={() => removeFieldDataStage(field)}
|
||||
>
|
||||
<span className="text-sm font-medium">
|
||||
{formatFieldName(field)}
|
||||
{modoMultiple && (
|
||||
<span className="text-xs text-gray-500 ml-2">({selectedModel})</span>
|
||||
)}
|
||||
</span>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeFieldDataStage(field);
|
||||
}}
|
||||
className="opacity-0 group-hover:opacity-100 p-1 rounded-md hover:bg-red-100 text-red-600 transition-all duration-200"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderFields = () => {
|
||||
const formatFieldName = (field) => {
|
||||
return field.split('_')
|
||||
@@ -752,6 +1382,118 @@ export default function Reports() {
|
||||
</button>
|
||||
</div>
|
||||
),
|
||||
control_pedimentos: (
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-bold mb-2 text-blue-900">Generar reporte de Control de Requerimiento</h2>
|
||||
<p className="mb-4 text-gray-700">Aquí puedes generar y descargar el reporte de Control de Requerimiento.</p>
|
||||
{/* Filtros replicados */}
|
||||
<div className="max-w-7xl mx-auto mt-6 mb-4 px-4">
|
||||
<form onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
fetchSummary();
|
||||
}} className="bg-white rounded-lg shadow-sm border border-slate-200 p-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
|
||||
{Object.keys(initialFiltersControlPedimento).map((key) => (
|
||||
<div key={key}>
|
||||
<label className="block text-xs font-medium text-slate-600 mb-1" htmlFor={key}>
|
||||
{key.replace(/_/g, ' ').replace('gte', 'desde').replace('lte', 'hasta')}
|
||||
</label>
|
||||
|
||||
{key === 'organizacion_id' ? (
|
||||
<select
|
||||
name={key}
|
||||
id={key}
|
||||
value={filtersControlPedimento[key]}
|
||||
onChange={handleFilterChangeControlPedimento}
|
||||
className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
|
||||
>
|
||||
<option value="">Seleccionar organización</option>
|
||||
{organizaciones.results && organizaciones.results.map(org => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.nombre} {/* Usar el campo 'nombre' que sí existe */}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input
|
||||
type={key.includes('fecha') ? 'date' : 'text'}
|
||||
name={key}
|
||||
id={key}
|
||||
value={filtersControlPedimento[key]}
|
||||
onChange={handleFilterChangeControlPedimento}
|
||||
className="w-full border border-slate-300 rounded px-2 py-1 text-sm focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
|
||||
onClick={handleGenerarReporteControlPedimento}
|
||||
>
|
||||
Generar Reporte
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/* Aquí va la lógica y UI específica para Cumplimiento */}
|
||||
{/* Tabla de reportes debajo de las tarjetas */}
|
||||
<div className="mt-10">
|
||||
<h2 className="text-lg font-bold text-slate-700 mb-4">Historial de Reportes</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full bg-white rounded-lg shadow border border-slate-200">
|
||||
<thead>
|
||||
<tr className="bg-slate-100">
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">ID</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Estado</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Creado</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Finalizado</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Error</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-semibold text-slate-600">Descargar</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{reports.filter(r => r.report_type === 'control_pedimento').length > 0 ? (
|
||||
reports
|
||||
.filter(r => r.report_type === 'control_pedimento')
|
||||
.map((r) => (
|
||||
<tr key={r.report_id}>
|
||||
<td className="px-4 py-2 text-xs text-slate-700">{r.report_id}</td>
|
||||
<td className="px-4 py-2 text-xs text-slate-700">{r.status}</td>
|
||||
<td className="px-4 py-2 text-xs text-slate-700">{r.created_at}</td>
|
||||
<td className="px-4 py-2 text-xs text-slate-700">{r.finished_at}</td>
|
||||
<td className="px-4 py-2 text-xs text-red-500">{r.error_message ? r.error_message : '-'}</td>
|
||||
<td className="px-4 py-2 text-xs">
|
||||
{r.status === 'ready' ? (
|
||||
<button
|
||||
className="text-blue-600 hover:underline"
|
||||
onClick={() => handleDownloadReport(r.report_id)}
|
||||
>
|
||||
Descargar
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-slate-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-4 py-2 text-center text-slate-400">
|
||||
{reports.length > 0 ? 'No hay reportes de control de pedimento' : 'No hay reportes disponibles'}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
datastage: (
|
||||
<div className="p-6 bg-white/95 rounded-2xl shadow-xl border border-blue-100">
|
||||
<div className="relative mb-8">
|
||||
@@ -827,14 +1569,43 @@ export default function Reports() {
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
<h3 className="text-md font-bold text-blue-800 mb-3">Campos</h3>
|
||||
{renderFields()}
|
||||
{renderFieldsDataStage()}
|
||||
|
||||
<div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-blue-800">Busqueda por modelo: </span>
|
||||
<span className={`text-sm font-bold ${isModoMultiple ? 'text-purple-600' : 'text-green-600'}`}>
|
||||
{isModoMultiple ? 'MÚLTIPLES MODELOS' : 'SINGULAR'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-blue-600">
|
||||
{Object.keys(modelFieldsMap).filter(model => modelFieldsMap[model]?.length > 0).length} modelo(s) con campos
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mostrar modelos activos */}
|
||||
{Object.keys(modelFieldsMap).filter(model => modelFieldsMap[model]?.length > 0).length > 0 && (
|
||||
<div className="mt-2 text-xs text-blue-700">
|
||||
<strong>Modelos activos:</strong> {Object.keys(modelFieldsMap)
|
||||
.filter(model => modelFieldsMap[model]?.length > 0)
|
||||
.map(model => `${model} (${modelFieldsMap[model].length} campos)`)
|
||||
.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<h3 className="text-md font-bold text-blue-800 mb-3">Filtros Globales</h3>
|
||||
{renderGlobalFilters()}
|
||||
</div>
|
||||
{/* <div className="mb-6">
|
||||
<h3 className="text-md font-bold text-blue-800 mb-3">Filtros</h3>
|
||||
{renderFilters()}
|
||||
</div>
|
||||
</div> */}
|
||||
<button
|
||||
onClick={handleExportModel}
|
||||
onClick={handleExportDataStage}
|
||||
disabled={isExporting}
|
||||
className={`group relative w-full py-3 text-lg font-semibold ${isExporting
|
||||
? 'bg-gray-400 cursor-not-allowed'
|
||||
@@ -936,31 +1707,35 @@ export default function Reports() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{reports.length > 0 ? (
|
||||
reports.map((r) => (
|
||||
<tr key={r.report_id}>
|
||||
<td className="px-4 py-2 text-xs text-slate-700">{r.report_id}</td>
|
||||
<td className="px-4 py-2 text-xs text-slate-700">{r.status}</td>
|
||||
<td className="px-4 py-2 text-xs text-slate-700">{r.created_at}</td>
|
||||
<td className="px-4 py-2 text-xs text-slate-700">{r.finished_at}</td>
|
||||
<td className="px-4 py-2 text-xs text-red-500">{r.error_message ? r.error_message : '-'}</td>
|
||||
<td className="px-4 py-2 text-xs">
|
||||
{r.status === 'ready' ? (
|
||||
<button
|
||||
className="text-blue-600 hover:underline"
|
||||
onClick={() => handleDownloadReport(r.report_id)}
|
||||
>
|
||||
Descargar
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-slate-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
{reports.filter(r => r.report_type === 'cumplimiento').length > 0 ? (
|
||||
reports
|
||||
.filter(r => r.report_type === 'cumplimiento')
|
||||
.map((r) => (
|
||||
<tr key={r.report_id}>
|
||||
<td className="px-4 py-2 text-xs text-slate-700">{r.report_id}</td>
|
||||
<td className="px-4 py-2 text-xs text-slate-700">{r.status}</td>
|
||||
<td className="px-4 py-2 text-xs text-slate-700">{r.created_at}</td>
|
||||
<td className="px-4 py-2 text-xs text-slate-700">{r.finished_at}</td>
|
||||
<td className="px-4 py-2 text-xs text-red-500">{r.error_message ? r.error_message : '-'}</td>
|
||||
<td className="px-4 py-2 text-xs">
|
||||
{r.status === 'ready' ? (
|
||||
<button
|
||||
className="text-blue-600 hover:underline"
|
||||
onClick={() => handleDownloadReport(r.report_id)}
|
||||
>
|
||||
Descargar
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-slate-400">-</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-4 py-2 text-center text-slate-400">No hay reportes disponibles.</td>
|
||||
<td colSpan={6} className="px-4 py-2 text-center text-slate-400">
|
||||
{reports.length > 0 ? 'No hay reportes de cumplimiento' : 'No hay reportes disponibles'}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
@@ -1105,6 +1880,24 @@ export default function Reports() {
|
||||
<span>Pedimentos cargados</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{isDebugMode && (
|
||||
<button
|
||||
className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'control_pedimentos'
|
||||
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
|
||||
: 'text-gray-700 hover:bg-blue-50/80'
|
||||
}`}
|
||||
onClick={() => setActiveTab('control_pedimentos')}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<span>Control de Pedimentos</span>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className={`flex-1 py-3 px-4 text-sm font-semibold rounded-xl focus:outline-none transition-all duration-200 ${activeTab === 'datastage'
|
||||
? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/20 scale-[1.02]'
|
||||
|
||||
Reference in New Issue
Block a user