refactor: refactor superadmin modules

src/components/data-table/Footer/index.tsx

@@ -1,38 +1,79 @@
 'use client';
+
 import { Table } from '@tanstack/react-table';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
 import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+const PAGE_SIZE_OPTIONS = [10, 20, 40, 50, 100];
 
 export function TableFooter<TData>({
   table,
   totalItems,
+  pageSize,
+  onPageSizeChange,
 }: {
   table: Table<TData>;
   totalItems: number;
+  pageSize?: number;
+  onPageSizeChange?: (pageSize: number) => void;
 }) {
   const rows = table.getRowModel().rows.length;
+  const currentPageSize = pageSize ?? table.getState().pagination.pageSize;
 
   return (
-    <div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
-      <span>
-        Showing {rows} of {totalItems}
-      </span>
+    <div className="flex flex-col gap-3 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex flex-wrap items-center gap-3">
+        <span>
+          Showing {rows} of {totalItems}
+        </span>
+        {onPageSizeChange ? (
+          <div className="flex items-center gap-2">
+            <span >Rows per page</span>
+            <Select
+              value={String(currentPageSize)}
+              onValueChange={(value) => onPageSizeChange(Number(value))}
+            >
+              <SelectTrigger className="h-8 w-18 bg-background">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <SelectItem key={size} value={String(size)}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        ) : null}
+      </div>
       <div className="flex gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            Previous
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            Next
-          </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <ChevronLeft className="size-4" />
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+          <ChevronRight className="size-4" />
+        </Button>
       </div>
     </div>
   );