Add pagination to reconciliation tables for better data display

Introduces pagination to the BL Reconciliation page, displaying 20 items per page with controls at the top and bottom of the tables.

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/BTW2G9M

client/src/pages/BLReconciliation.tsx

@@ -10,7 +10,7 @@ import { apiRequest } from "@/lib/queryClient";
 import { useStore } from "@/components/Layout";
 import { useAuthUnified } from "@/hooks/useAuthUnified";
 import { usePermissions } from "@shared/permissions";
-import { Search, Edit, FileText, Settings, Eye, AlertTriangle, X, Check, Trash2, Ban } from "lucide-react";
+import { Search, Edit, FileText, Settings, Eye, AlertTriangle, X, Check, Trash2, Ban, ChevronLeft, ChevronRight } from "lucide-react";
 import type { Supplier } from "@shared/schema";
 
 export default function BLReconciliation() {
@@ -43,6 +43,8 @@ export default function BLReconciliation() {
   
   const [activeTab, setActiveTab] = useState("manual");
   const [searchTerm, setSearchTerm] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 20;
 
   // Récupérer les fournisseurs pour la logique automatique
   const { data: suppliers = [], isLoading: suppliersLoading } = useQuery<Supplier[]>({
@@ -209,11 +211,111 @@ export default function BLReconciliation() {
   const filteredManualDeliveries = filterDeliveries(manualReconciliationDeliveries);
   const filteredAutomaticDeliveries = filterDeliveries(automaticReconciliationDeliveries);
 
+  // Pagination
+  const getCurrentPageData = (data: any[]) => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    return data.slice(startIndex, endIndex);
+  };
+
+  const getTotalPages = (data: any[]) => {
+    return Math.ceil(data.length / itemsPerPage);
+  };
+
+  const currentManualData = getCurrentPageData(filteredManualDeliveries);
+  const currentAutomaticData = getCurrentPageData(filteredAutomaticDeliveries);
+
+  const totalManualPages = getTotalPages(filteredManualDeliveries);
+  const totalAutomaticPages = getTotalPages(filteredAutomaticDeliveries);
+
+  // Reset page when changing tabs or searching
+  React.useEffect(() => {
+    setCurrentPage(1);
+  }, [activeTab, searchTerm]);
+
   // Vérifier si une ligne est dévalidée (pour la coloration)
   const isDevalidated = (delivery: any) => {
     return delivery.reconciled === false && delivery.validatedAt === null;
   };
 
+  // Composant de pagination
+  const PaginationControls = ({ currentPage, totalPages, onPageChange, totalItems, itemsPerPage }: {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    totalItems: number;
+    itemsPerPage: number;
+  }) => {
+    if (totalPages <= 1) return null;
+
+    const startItem = (currentPage - 1) * itemsPerPage + 1;
+    const endItem = Math.min(currentPage * itemsPerPage, totalItems);
+
+    return (
+      <div className="flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200">
+        <div className="flex items-center text-sm text-gray-700">
+          <span>
+            Affichage de {startItem} à {endItem} sur {totalItems} éléments
+          </span>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onPageChange(currentPage - 1)}
+            disabled={currentPage === 1}
+            className="flex items-center space-x-1"
+          >
+            <ChevronLeft className="w-4 h-4" />
+            <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>
+          
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onPageChange(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            className="flex items-center space-x-1"
+          >
+            <span>Suivant</span>
+            <ChevronRight className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
   if (isLoading || suppliersLoading) {
     return (
       <div className="p-6">
@@ -298,6 +400,15 @@ export default function BLReconciliation() {
             </div>
           ) : (
             <div className="bg-white border border-gray-200 shadow-lg overflow-hidden rounded-lg">
+              {/* Pagination du haut */}
+              <PaginationControls
+                currentPage={currentPage}
+                totalPages={totalManualPages}
+                onPageChange={setCurrentPage}
+                totalItems={filteredManualDeliveries.length}
+                itemsPerPage={itemsPerPage}
+              />
+              
               <div className="overflow-x-auto">
                 <table className="min-w-full divide-y divide-gray-200">
                   <thead className="bg-gray-50 border-b border-gray-200">
@@ -329,7 +440,7 @@ export default function BLReconciliation() {
                     </tr>
                   </thead>
                   <tbody className="bg-white divide-y divide-gray-200">
-                    {filteredManualDeliveries.map((delivery: any) => (
+                    {currentManualData.map((delivery: any) => (
                       <tr 
                         key={delivery.id} 
                         className={`hover:bg-gray-50 ${
@@ -450,6 +561,15 @@ export default function BLReconciliation() {
                   </tbody>
                 </table>
               </div>
+              
+              {/* Pagination du bas */}
+              <PaginationControls
+                currentPage={currentPage}
+                totalPages={totalManualPages}
+                onPageChange={setCurrentPage}
+                totalItems={filteredManualDeliveries.length}
+                itemsPerPage={itemsPerPage}
+              />
             </div>
           )}
         </TabsContent>
@@ -485,6 +605,15 @@ export default function BLReconciliation() {
             </div>
           ) : (
             <div className="bg-white border border-gray-200 shadow-lg overflow-hidden rounded-lg">
+              {/* Pagination du haut */}
+              <PaginationControls
+                currentPage={currentPage}
+                totalPages={totalAutomaticPages}
+                onPageChange={setCurrentPage}
+                totalItems={filteredAutomaticDeliveries.length}
+                itemsPerPage={itemsPerPage}
+              />
+              
               <div className="overflow-x-auto">
                 <table className="min-w-full divide-y divide-gray-200">
                   <thead className="bg-gray-50 border-b border-gray-200">
@@ -517,7 +646,7 @@ export default function BLReconciliation() {
                     </tr>
                   </thead>
                   <tbody className="bg-white divide-y divide-gray-200">
-                    {filteredAutomaticDeliveries.map((delivery: any) => (
+                    {currentAutomaticData.map((delivery: any) => (
                       <tr 
                         key={delivery.id} 
                         className={`hover:bg-gray-50 ${
@@ -631,6 +760,15 @@ export default function BLReconciliation() {
                   </tbody>
                 </table>
               </div>
+              
+              {/* Pagination du bas */}
+              <PaginationControls
+                currentPage={currentPage}
+                totalPages={totalAutomaticPages}
+                onPageChange={setCurrentPage}
+                totalItems={filteredAutomaticDeliveries.length}
+                itemsPerPage={itemsPerPage}
+              />
             </div>
           )}
         </TabsContent>