gitea/checklist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modulo de Reportes v1 filtro actualizado basico

Browse Source
This commit is contained in:
ronalds
2025-11-20 00:21:12 -03:00
parent cfe49ee0c8
commit f029fab1b0
2 changed files with 172 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
frontend/src/App.jsx
View File

@@ -3176,82 +3176,135 @@ function ReportsTab({ user }) {
const [dashboardData, setDashboardData] = useState(null)
const [inspections, setInspections] = useState([])
const [loading, setLoading] = useState(true)
const [mechanics, setMechanics] = useState([])
const [checklists, setChecklists] = useState([])
const [filters, setFilters] = useState({
startDate: '',
endDate: '',
mechanicId: ''
date: '',
mechanicId: '',
checklistId: ''
})
const [appliedFilters, setAppliedFilters] = useState({
date: '',
mechanicId: '',
checklistId: ''
})
const loadDashboard = async () => {
const loadMechanics = async () => {
try {
const token = localStorage.getItem('token')
const API_URL = import.meta.env.VITE_API_URL || ''
const response = await fetch(`${API_URL}/api/users`, {
headers: { 'Authorization': `Bearer ${token}` }
})
if (response.ok) {
const data = await response.json()
setMechanics(data.filter(u => u.role === 'mechanic' || u.role === 'mecanico'))
}
} catch (error) {
console.error('Error loading mechanics:', error)
}
}
const loadChecklists = async () => {
try {
const token = localStorage.getItem('token')
const API_URL = import.meta.env.VITE_API_URL || ''
const response = await fetch(`${API_URL}/api/checklists`, {
headers: { 'Authorization': `Bearer ${token}` }
})
if (response.ok) {
const data = await response.json()
setChecklists(data)
}
} catch (error) {
console.error('Error loading checklists:', error)
}
}
const loadDashboard = async (filtersToApply) => {
try {
const token = localStorage.getItem('token')
const API_URL = import.meta.env.VITE_API_URL || ''
let url = `${API_URL}/api/reports/dashboard?`
if (filters.startDate) url += `start_date=${filters.startDate}&`
if (filters.endDate) url += `end_date=${filters.endDate}&`
if (filters.mechanicId) url += `mechanic_id=${filters.mechanicId}&`
if (filtersToApply.date) url += `start_date=${filtersToApply.date}&`
if (filtersToApply.mechanicId) url += `mechanic_id=${filtersToApply.mechanicId}&`
console.log('Loading dashboard from:', url)
console.log('Dashboard URL:', url)
console.log('Filters applied:', filtersToApply)
const response = await fetch(url, {
headers: { 'Authorization': `Bearer ${token}` }
})
console.log('Dashboard response status:', response.status)
if (response.ok) {
const data = await response.json()
console.log('Dashboard data:', data)
console.log('Dashboard data received:', data)
setDashboardData(data)
} else {
const errorText = await response.text()
console.error('Dashboard error response:', response.status, errorText)
console.error('Dashboard request failed:', response.status)
}
} catch (error) {
console.error('Error loading dashboard:', error)
}
}
const loadInspections = async () => {
const loadInspections = async (filtersToApply) => {
try {
const token = localStorage.getItem('token')
const API_URL = import.meta.env.VITE_API_URL || ''
let url = `${API_URL}/api/reports/inspections?`
if (filters.startDate) url += `start_date=${filters.startDate}&`
if (filters.endDate) url += `end_date=${filters.endDate}&`
if (filters.mechanicId) url += `mechanic_id=${filters.mechanicId}&`
if (filtersToApply.date) url += `start_date=${filtersToApply.date}&`
if (filtersToApply.mechanicId) url += `mechanic_id=${filtersToApply.mechanicId}&`
console.log('Loading inspections from:', url)
console.log('Inspections URL:', url)
const response = await fetch(url, {
headers: { 'Authorization': `Bearer ${token}` }
})
console.log('Inspections response status:', response.status)
if (response.ok) {
const data = await response.json()
console.log('Inspections data:', data)
let data = await response.json()
console.log('Inspections data received:', data.length, 'items')
console.log('First inspection data:', data[0])
// Filtrar por checklist en el frontend
if (filtersToApply.checklistId) {
const filtered = data.filter(i => {
console.log('Comparing:', i.checklist_id, '===', parseInt(filtersToApply.checklistId))
return i.checklist_id === parseInt(filtersToApply.checklistId)
})
data = filtered
console.log('After checklist filter:', data.length, 'items')
}
setInspections(data)
} else {
const errorText = await response.text()
console.error('Inspections error response:', response.status, errorText)
console.error('Inspections request failed:', response.status)
}
} catch (error) {
console.error('Error loading inspections:', error)
}
}
const applyFilters = async () => {
setLoading(true)
setAppliedFilters(filters)
await Promise.all([loadDashboard(filters), loadInspections(filters)])
setLoading(false)
}
useEffect(() => {
const loadData = async () => {
const loadInitialData = async () => {
setLoading(true)
await Promise.all([loadDashboard(), loadInspections()])
// Cargar mecánicos y checklists primero
await Promise.all([loadMechanics(), loadChecklists()])
// Luego cargar datos sin filtros (filtros vacíos = todos los datos)
const emptyFilters = { date: '', mechanicId: '', checklistId: '' }
await Promise.all([loadDashboard(emptyFilters), loadInspections(emptyFilters)])
setLoading(false)
}
loadData()
}, [filters])
loadInitialData()
}, [])
if (loading) {
return <div className="text-center py-12">Cargando reportes...</div>
@@ -3265,26 +3318,16 @@ function ReportsTab({ user }) {
<div className="space-y-6">
{/* Filtros */}
<div className="bg-white rounded-lg shadow p-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<h3 className="text-lg font-semibold mb-4">🔍 Filtros</h3>
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Fecha Inicio
Fecha
</label>
<input
type="date"
value={filters.startDate}
onChange={(e) => setFilters({...filters, startDate: e.target.value})}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Fecha Fin
</label>
<input
type="date"
value={filters.endDate}
onChange={(e) => setFilters({...filters, endDate: e.target.value})}
value={filters.date}
onChange={(e) => setFilters({...filters, date: e.target.value})}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
/>
</div>
@@ -3293,15 +3336,45 @@ function ReportsTab({ user }) {
<label className="block text-sm font-medium text-gray-700 mb-1">
Mecánico
</label>
<input
type="number"
placeholder="ID del mecánico"
<select
value={filters.mechanicId}
onChange={(e) => setFilters({...filters, mechanicId: e.target.value})}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
/>
>
<option value="">Todos los mecánicos</option>
{mechanics.map(mechanic => (
<option key={mechanic.id} value={mechanic.id}>
{mechanic.full_name}
</option>
))}
</select>
</div>
)}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Checklist
</label>
<select
value={filters.checklistId}
onChange={(e) => setFilters({...filters, checklistId: e.target.value})}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
>
<option value="">Todos los checklists</option>
{checklists.map(checklist => (
<option key={checklist.id} value={checklist.id}>
{checklist.name}
</option>
))}
</select>
</div>
<div className="flex items-end">
<button
onClick={applyFilters}
className="w-full px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg hover:from-indigo-700 hover:to-purple-700 transition"
>
Aplicar Filtros
</button>
</div>
</div>
</div>