EFC/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modificacion reportes

Browse Source
This commit is contained in:
Dulce
2025-12-16 08:13:00 -07:00
parent 5580c3cc91
commit d46ea97340
1 changed files with 72 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/pages/Reports.jsx
View File

@@ -67,7 +67,7 @@ const handleDownloadReport = async (reportId) => {
export default function Reports() {
// Estado para organizacion_id
const [organizacionId, setOrganizacionId] = useState('');
useEffect(() => {
async function fetchOrgId() {
try {
@@ -81,6 +81,7 @@ export default function Reports() {
}
fetchOrgId();
}, []);
// Handler for Generar Reporte in Cumplimiento tab
const handleGenerarReporteCumplimiento = async () => {
if (!organizacionId) {
@@ -196,6 +197,7 @@ export default function Reports() {
const [tourStep, setTourStep] = useState(0);
const [organizaciones, setOrganizaciones] = useState([]);
const [importadores, setImportadores] = useState([]);
useEffect(() => {
const fetchOrganizaciones = async () => {
@@ -213,6 +215,23 @@ export default function Reports() {
fetchOrganizaciones();
}, []);
useEffect(() => {
const fetchImportadores = async () => {
try {
const res = await fetch(
`${import.meta.env.VITE_EFC_API_URL}/customs/importadores/`,
{ method: 'GET', headers: { 'Authorization': `Bearer ${localStorage.getItem('access')}` }
});
const data = await res.json();
setImportadores(data);
} catch {
console.error('Error fetching importadores:', err);
setImportadores([]);
}
};
fetchImportadores();
}, []);
const [globalFilters, setGlobalFilters] = useState({
rfc: '',
fecha_pago_desde: '',
@@ -240,13 +259,45 @@ export default function Reports() {
</div>
<div className="p-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{/* 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>
{/* Filtro por RFC */}
<div className="group">
<label className="block text-sm font-medium text-gray-700 mb-1">
RFC
</label>
{/* modificar de input a select */}
<div className="relative rounded-lg shadow-sm">
<input
{/* <input
type="text"
value={globalFilters.rfc || ''}
onChange={(e) => setGlobalFilters(prev => ({
@@ -257,7 +308,25 @@ export default function Reports() {
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"
/>
/> */}
<select
name="rfc"
value={globalFilters.rfc || ''}
onChange={(e) => setGlobalFilters(prev => ({
...prev,
rfc: e.target.value
}))}
className="w-full px-3 py-2 border border-green-300 rounded-md shadow-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white text-slate-900 text-sm font-mono uppercase"
style={{ textTransform: 'uppercase' }}
>
<option value="" >Selecciona un RFC</option>
{importadores.filter(imp => {
if (!globalFilters.organizacion) return true;
return imp.organizacion === globalFilters.organizacion;
}).map(imp => (
<option key={imp.rfc} value={imp.rfc}>{imp.rfc}</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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
@@ -367,37 +436,6 @@ export default function Reports() {
</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 */}