From 3525af40d899b2bfd15811a3173a17ad7287e66e Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 13 Aug 2025 06:50:52 +0000
Subject: [PATCH] Add pagination to orders and center the difference column
 with right-aligned data

Implement pagination for the orders page and adjust the reconciliation screen to center the difference column with right-aligned numerical data.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 76582ba3-44cb-4730-92fa-66f28725967b
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/76582ba3-44cb-4730-92fa-66f28725967b/wLa3UqB
---
 client/src/pages/BLReconciliation.tsx | 36 ++++++++++++++-------------
 client/src/pages/Orders.tsx           | 19 +++++++-------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/client/src/pages/BLReconciliation.tsx b/client/src/pages/BLReconciliation.tsx
index dc87c02..e68f876 100644
--- a/client/src/pages/BLReconciliation.tsx
+++ b/client/src/pages/BLReconciliation.tsx
@@ -434,23 +434,25 @@ export default function BLReconciliation() {
                               </div>
                             </td>
                             <td className="px-6 py-4 whitespace-nowrap text-center">
-                              {(() => {
-                                const blAmount = delivery.blAmount ? parseFloat(delivery.blAmount) : 0;
-                                const invoiceAmount = delivery.invoiceAmount ? parseFloat(delivery.invoiceAmount) : 0;
-                                if (blAmount && invoiceAmount) {
-                                  const diff = blAmount - invoiceAmount;
-                                  const diffAbs = Math.abs(diff);
-                                  return (
-                                    <div className={`font-medium ${
-                                      diff === 0 ? 'text-green-600' : 
-                                      diffAbs > 10 ? 'text-red-600' : 'text-orange-600'
-                                    }`}>
-                                      {diff > 0 ? '+' : ''}{diff.toFixed(2)}€
-                                    </div>
-                                  );
-                                }
-                                return <span className="text-gray-400 italic text-xs">-</span>;
-                              })()}
+                              <div className="flex justify-center">
+                                {(() => {
+                                  const blAmount = delivery.blAmount ? parseFloat(delivery.blAmount) : 0;
+                                  const invoiceAmount = delivery.invoiceAmount ? parseFloat(delivery.invoiceAmount) : 0;
+                                  if (blAmount && invoiceAmount) {
+                                    const diff = blAmount - invoiceAmount;
+                                    const diffAbs = Math.abs(diff);
+                                    return (
+                                      <div className={`font-medium text-right ${
+                                        diff === 0 ? 'text-green-600' : 
+                                        diffAbs > 10 ? 'text-red-600' : 'text-orange-600'
+                                      }`}>
+                                        {diff > 0 ? '+' : ''}{diff.toFixed(2)}€
+                                      </div>
+                                    );
+                                  }
+                                  return <span className="text-gray-400 italic text-xs">-</span>;
+                                })()}
+                              </div>
                             </td>
                             <td className="px-6 py-4 whitespace-nowrap">
                               <div className="text-sm text-gray-900">
diff --git a/client/src/pages/Orders.tsx b/client/src/pages/Orders.tsx
index bccbfac..2952fbf 100644
--- a/client/src/pages/Orders.tsx
+++ b/client/src/pages/Orders.tsx
@@ -411,15 +411,16 @@ export default function Orders() {
               </div>
               
               {/* Pagination */}
-              <Pagination
-                currentPage={currentPage}
-                totalPages={totalPages}
-                totalItems={totalItems}
-                itemsPerPage={itemsPerPage}
-                onPageChange={setCurrentPage}
-                onItemsPerPageChange={setItemsPerPage}
-                className="mt-4 p-4 border-t border-gray-200"
-              />
+              <div className="p-4 border-t border-gray-200">
+                <Pagination
+                  currentPage={currentPage}
+                  totalPages={totalPages}
+                  totalItems={totalItems}
+                  itemsPerPage={itemsPerPage}
+                  onPageChange={setCurrentPage}
+                  onItemsPerPageChange={setItemsPerPage}
+                />
+              </div>
             </div>
           </div>
         )}