Simplify reconciliation page by improving pagination and fixing React errors

Fixes React Error #310 in production by simplifying the pagination component and ensuring proper React hook imports in client/src/pages/BLReconciliation.tsx.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: b163d4c0-de5e-4f4e-a9c0-aed4c7049718
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/b163d4c0-de5e-4f4e-a9c0-aed4c7049718/o4pOd6E
This commit is contained in:
michaelschal committed 2025-08-12 10:50:56 +00:00
1 parent dedcd295dd
commit 657dbc2b1f
4 files changed
+826 -37

No files matched your search

+10 -37
View File
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react";
import { useState, useEffect } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { safeFormat } from "@/lib/dateUtils";
import { Button } from "@/components/ui/button";
@@ -238,8 +238,8 @@ export default function BLReconciliation() {
return delivery.reconciled === false && delivery.validatedAt === null;
};
// Composant de pagination
const PaginationControls = ({ currentPage, totalPages, onPageChange, totalItems, itemsPerPage }: {
// Composant de pagination simplifiée
const SimplePagination = ({ currentPage, totalPages, onPageChange, totalItems, itemsPerPage }: {
currentPage: number;
totalPages: number;
onPageChange: (page: number) => void;
@@ -270,36 +270,9 @@ export default function BLReconciliation() {
<span>Précédent</span>
</Button>
<div className="flex items-center space-x-1">
{Array.from({ length: totalPages }, (_, i) => i + 1)
.filter(page => {
// Afficher la première page, la dernière page, et les pages autour de la page actuelle
return page === 1 ||
page === totalPages ||
(page >= currentPage - 2 && page <= currentPage + 2);
})
.map((page, index, array) => {
// Ajouter des points de suspension si nécessaire
const prevPage = array[index - 1];
const showEllipsis = prevPage && page > prevPage + 1;
return (
<React.Fragment key={page}>
{showEllipsis && (
<span className="px-2 text-gray-500">...</span>
)}
<Button
variant={page === currentPage ? "default" : "outline"}
size="sm"
onClick={() => onPageChange(page)}
className="w-8 h-8 p-0"
>
{page}
</Button>
</React.Fragment>
);
})}
</div>
<span className="px-3 py-1 text-sm bg-gray-100 rounded">
Page {currentPage} sur {totalPages}
</span>
<Button
variant="outline"
@@ -401,7 +374,7 @@ export default function BLReconciliation() {
) : (
<div className="bg-white border border-gray-200 shadow-lg overflow-hidden rounded-lg">
{/* Pagination du haut */}
<PaginationControls
<SimplePagination
currentPage={currentPage}
totalPages={totalManualPages}
onPageChange={setCurrentPage}
@@ -563,7 +536,7 @@ export default function BLReconciliation() {
</div>
{/* Pagination du bas */}
<PaginationControls
<SimplePagination
currentPage={currentPage}
totalPages={totalManualPages}
onPageChange={setCurrentPage}
@@ -606,7 +579,7 @@ export default function BLReconciliation() {
) : (
<div className="bg-white border border-gray-200 shadow-lg overflow-hidden rounded-lg">
{/* Pagination du haut */}
<PaginationControls
<SimplePagination
currentPage={currentPage}
totalPages={totalAutomaticPages}
onPageChange={setCurrentPage}
@@ -762,7 +735,7 @@ export default function BLReconciliation() {
</div>
{/* Pagination du bas */}
<PaginationControls
<SimplePagination
currentPage={currentPage}
totalPages={totalAutomaticPages}
onPageChange={setCurrentPage}