diff --git a/src/pages/AuditoriaPage.tsx b/src/pages/AuditoriaPage.tsx index 8105c77..ec709d0 100644 --- a/src/pages/AuditoriaPage.tsx +++ b/src/pages/AuditoriaPage.tsx @@ -19,7 +19,7 @@ export default function AuditoriaPage() { const [currentPage, setCurrentPage] = useState(1); const [totalPages, setTotalPages] = useState(1); const [total, setTotal] = useState(0); - const limit = 50; + const [limit, setLimit] = useState(10); const actions: AuditAction[] = [ "CREATE", @@ -36,7 +36,8 @@ export default function AuditoriaPage() { useEffect(() => { fetchAuditLogs(); - }, [currentPage, selectedAction, selectedTable]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [currentPage, selectedAction, selectedTable, limit]); const fetchAuditLogs = async () => { try { @@ -78,6 +79,11 @@ export default function AuditoriaPage() { setShowDetails(true); }; + const handleLimitChange = (newLimit: number) => { + setLimit(newLimit); + setCurrentPage(1); + }; + const getActionColor = (action: AuditAction) => { const colors: Record = { CREATE: "bg-green-100 text-green-800", @@ -296,25 +302,61 @@ export default function AuditoriaPage() { )} {/* Pagination */} - {totalPages > 1 && ( -
- - - Página {currentPage} de {totalPages} - - + {!loading && logs.length > 0 && ( +
+ {/* Page Info */} +
+ Mostrando{" "} + + {(currentPage - 1) * limit + 1} + {" "} + a{" "} + + {Math.min(currentPage * limit, total)} + {" "} + de{" "} + {total}{" "} + registros +
+ +
+ {/* Page Size Selector */} +
+ Filas por página: + +
+ + {/* Page Navigation */} + {totalPages > 1 && ( +
+ + + Página {currentPage} de {totalPages} + + +
+ )} +
)}
diff --git a/src/pages/UsersPage.tsx b/src/pages/UsersPage.tsx index 3c8e631..d20d000 100644 --- a/src/pages/UsersPage.tsx +++ b/src/pages/UsersPage.tsx @@ -58,7 +58,6 @@ export default function UsersPage() { try { setLoadingUsers(true); const usersResponse = await getAllUsers(); - console.log('Users API response:', usersResponse); const mappedUsers: User[] = usersResponse.data.map((apiUser: ApiUser) => ({ id: apiUser.id, @@ -312,7 +311,15 @@ export default function UsersPage() { ]} data={filtered} onRowClick={(_, rowData) => setActiveUser(rowData as User)} - options={{ actionsColumnIndex: -1, search: false, paging: true, sorting: true, rowStyle: rowData => ({ backgroundColor: activeUser?.id === (rowData as User).id ? "#EEF2FF" : "#FFFFFF" }) }} + options={{ + actionsColumnIndex: -1, + search: false, + paging: true, + pageSize: 10, + pageSizeOptions: [10, 20, 50], + sorting: true, + rowStyle: rowData => ({ backgroundColor: activeUser?.id === (rowData as User).id ? "#EEF2FF" : "#FFFFFF" }) + }} /> )} diff --git a/src/pages/concentrators/ConcentratorsTable.tsx b/src/pages/concentrators/ConcentratorsTable.tsx index aeefff2..1f3f715 100644 --- a/src/pages/concentrators/ConcentratorsTable.tsx +++ b/src/pages/concentrators/ConcentratorsTable.tsx @@ -94,6 +94,8 @@ export default function ConcentratorsTable({ actionsColumnIndex: -1, search: false, paging: true, + pageSize: 10, + pageSizeOptions: [10, 20, 50], sorting: true, rowStyle: (rowData) => ({ backgroundColor: diff --git a/src/pages/consumption/ConsumptionPage.tsx b/src/pages/consumption/ConsumptionPage.tsx index 05423df..715ad75 100644 --- a/src/pages/consumption/ConsumptionPage.tsx +++ b/src/pages/consumption/ConsumptionPage.tsx @@ -35,7 +35,7 @@ export default function ConsumptionPage() { const [projects, setProjects] = useState([]); const [pagination, setPagination] = useState({ page: 1, - pageSize: 100, + pageSize: 10, total: 0, totalPages: 0, }); @@ -73,10 +73,12 @@ export default function ConsumptionPage() { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const loadData = async (page = 1) => { + const loadData = async (page = 1, pageSize?: number) => { setLoadingReadings(true); setLoadingSummary(true); + const currentPageSize = pageSize || pagination.pageSize; + try { const [readingsResult, summaryResult] = await Promise.all([ fetchReadings({ @@ -84,7 +86,7 @@ export default function ConsumptionPage() { startDate: startDate || undefined, endDate: endDate || undefined, page, - pageSize: 100, + pageSize: currentPageSize, }), fetchConsumptionSummary(selectedProject || undefined), ]); @@ -167,6 +169,15 @@ export default function ConsumptionPage() { }); }; + const handlePageChange = (newPage: number) => { + loadData(newPage); + }; + + const handlePageSizeChange = (newPageSize: number) => { + setPagination({ ...pagination, pageSize: newPageSize, page: 1 }); + loadData(1, newPageSize); + }; + const exportToCSV = () => { const headers = ["Fecha", "Medidor", "Serial", "Ubicación", "Valor", "Tipo", "Batería", "Señal"]; const rows = filteredReadings.map((r) => [ @@ -502,6 +513,88 @@ export default function ConsumptionPage() { + + {!loadingReadings && filteredReadings.length > 0 && ( +
+
+ Mostrando{" "} + + {(pagination.page - 1) * pagination.pageSize + 1} + {" "} + a{" "} + + {Math.min(pagination.page * pagination.pageSize, pagination.total)} + {" "} + de{" "} + {pagination.total}{" "} + resultados +
+ +
+
+ Filas por página: + +
+ +
+ + +
+ {Array.from({ length: pagination.totalPages }, (_, i) => i + 1) + .filter((pageNum) => { + if (pageNum === 1 || pageNum === pagination.totalPages) return true; + if (Math.abs(pageNum - pagination.page) <= 1) return true; + return false; + }) + .map((pageNum, idx, arr) => { + const prevNum = arr[idx - 1]; + const showEllipsis = prevNum && pageNum - prevNum > 1; + + return ( +
+ {showEllipsis && ( + ... + )} + +
+ ); + })} +
+ + +
+
+
+ )} diff --git a/src/pages/projects/ProjectsPage.tsx b/src/pages/projects/ProjectsPage.tsx index 083f9e0..04f049e 100644 --- a/src/pages/projects/ProjectsPage.tsx +++ b/src/pages/projects/ProjectsPage.tsx @@ -263,6 +263,8 @@ export default function ProjectsPage() { options={{ search: false, paging: true, + pageSize: 10, + pageSizeOptions: [10, 20, 50], sorting: true, rowStyle: (rowData) => ({ backgroundColor: