ditrect foirst dirtect last

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>

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