From 617e8bae4323faabf5b77df7b48ddbb4701bbf3b Mon Sep 17 00:00:00 2001
From: "ahmed.mujtaba" <ahmed.mujtaba@utopiabrands.com>
Date: Fri, 28 Aug 2026 16:44:14 +0500
Subject: [PATCH] ditrect foirst dirtect last

---
 frontend/src/ui/DataTable.jsx |  6 ++++++
 frontend/src/ui/icons.jsx     | 12 ++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/frontend/src/ui/DataTable.jsx b/frontend/src/ui/DataTable.jsx
index 39c2e70..d29d8b7 100644
--- a/frontend/src/ui/DataTable.jsx
+++ b/frontend/src/ui/DataTable.jsx
@@ -159,6 +159,9 @@ export function Pagination({
           </>
         )}
         <div className="page-nav">
+          <button className="page-btn" disabled={page <= 1} onClick={() => setPage(1)} aria-label="First page">
+            <Icon name="chevrons-left" />
+          </button>
           <button className="page-btn" disabled={page <= 1} onClick={() => setPage(page - 1)} aria-label="Previous page">
             <Icon name="chevron-left" />
           </button>
@@ -181,6 +184,9 @@ export function Pagination({
           <button className="page-btn" disabled={page >= pages} onClick={() => setPage(page + 1)} aria-label="Next page">
             <Icon name="chevron-right" />
           </button>
+          <button className="page-btn" disabled={page >= pages} onClick={() => setPage(pages)} aria-label="Last page">
+            <Icon name="chevrons-right" />
+          </button>
         </div>
       </div>
     </div>
diff --git a/frontend/src/ui/icons.jsx b/frontend/src/ui/icons.jsx
index fc1eab2..47d4891 100644
--- a/frontend/src/ui/icons.jsx
+++ b/frontend/src/ui/icons.jsx
@@ -198,6 +198,18 @@ export const ICONS = {
   'chevron-left': <polyline points="15 18 9 12 15 6" />,
   'chevron-right': <polyline points="9 18 15 12 9 6" />,
   'chevron-down': <path d="M6 9l6 6 6-6" />,
+  'chevrons-left': (
+    <>
+      <polyline points="11 17 6 12 11 7" />
+      <polyline points="18 17 13 12 18 7" />
+    </>
+  ),
+  'chevrons-right': (
+    <>
+      <polyline points="13 17 18 12 13 7" />
+      <polyline points="6 17 11 12 6 7" />
+    </>
+  ),
   refresh: (
     <>
       <polyline points="23 4 23 10 17 10" />