Improve reconciliation page with default 20 lines and dual pagination controls

Modify the reconciliation page to display 20 items by default and add pagination controls both above and below the table for enhanced usability.

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

client/src/pages/BLReconciliation.tsx

@@ -543,7 +543,7 @@ export default function BLReconciliation() {
     totalPages,
     paginatedData: paginatedDeliveries,
     totalItems
-  } = usePagination(filteredDeliveries, 10);
+  } = usePagination(filteredDeliveries, 20);
 
   if (isLoading) {
     return (
@@ -657,6 +657,18 @@ export default function BLReconciliation() {
           </div>
         ) : (
           <div className="bg-white border border-gray-200 shadow-lg overflow-hidden">
+            {/* Pagination en haut */}
+            {totalItems > 0 && (
+              <Pagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                totalItems={totalItems}
+                itemsPerPage={itemsPerPage}
+                onPageChange={setCurrentPage}
+                onItemsPerPageChange={setItemsPerPage}
+                className="px-4 py-3 border-b border-gray-200"
+              />
+            )}
             <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">
@@ -868,7 +880,7 @@ export default function BLReconciliation() {
             </table>
           </div>
           
-          {/* Pagination */}
+          {/* Pagination en bas */}
           {totalItems > 0 && (
             <Pagination
               currentPage={currentPage}
@@ -877,7 +889,7 @@ export default function BLReconciliation() {
               itemsPerPage={itemsPerPage}
               onPageChange={setCurrentPage}
               onItemsPerPageChange={setItemsPerPage}
-              className="mt-4 border-t border-gray-200 pt-4"
+              className="px-4 py-3 border-t border-gray-200 bg-gray-50"
             />
           )}
         </div>