feat: Implement DataTable to backoffice pages

- Halaman Data Akun
- Halaman Validasi Transaksi

apps/backoffice/src/app/accounts/page.tsx

@@ -5,22 +5,19 @@ import {
   FilterOutlined,
   SearchOutlined,
   EditOutlined,
-  ArrowRightOutlined,
-  ArrowLeftOutlined,
 } from '@ant-design/icons';
 import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
 import { DataTable } from '@imphnen-frontend-service/ui/organisms';
 
 import {
   ColumnDef,
-  flexRender,
   getCoreRowModel,
   getPaginationRowModel,
   PaginationState,
   useReactTable,
+  RowSelectionState,
 } from '@tanstack/react-table';
 
-// Define account interface
 interface Account {
   id: number;
   name: string;
@@ -38,7 +35,26 @@ const mockData: Account[] = Array.from({ length: 90 }, (_, i) => ({
   address: 'Jl. Pantai Cibaduyut Indonesia',
 }));
 
-const columns: ColumnDef<any>[] = [
+const columns: ColumnDef<Account>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <input
+        type="checkbox"
+        className="rounded"
+        checked={table.getIsAllRowsSelected()}
+        onChange={table.getToggleAllRowsSelectedHandler()}
+      />
+    ),
+    cell: ({ row }) => (
+      <input
+        type="checkbox"
+        className="rounded"
+        checked={row.getIsSelected()}
+        onChange={row.getToggleSelectedHandler()}
+      />
+    ),
+  },
   {
     header: 'No',
     accessorKey: 'id',
@@ -61,21 +77,19 @@ const columns: ColumnDef<any>[] = [
   },
   {
     header: 'Action',
-    cell: ({ row }) => {
-      return (
-        <Button
-          variant="primary"
-          size="sm"
-          onClick={(e) => {
-            e.stopPropagation();
-            // handleEdit(row.id);
-          }}
-          className="flex items-center gap-2"
-        >
-          <EditOutlined /> Edit
-        </Button>
-      );
-    },
+    cell: ({ row }) => (
+      <Button
+        variant="primary"
+        size="sm"
+        onClick={(e) => {
+          e.stopPropagation();
+          // handleEdit(row.id);
+        }}
+        className="flex items-center gap-2"
+      >
+        <EditOutlined /> Edit
+      </Button>
+    ),
   },
 ];
 
@@ -85,15 +99,22 @@ export const Components: FC = (): ReactElement => {
     pageSize: 9,
   });
 
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+
   const table = useReactTable({
     data: mockData,
     columns,
     state: {
       pagination,
+      rowSelection,
     },
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onPaginationChange: setPagination,
+    pageCount: Math.ceil(mockData.length / pagination.pageSize),
+    manualPagination: false,
   });
 
   return (
@@ -129,97 +150,7 @@ export const Components: FC = (): ReactElement => {
         </div>
 
         {/* Table */}
-        <DataTable data={mockData} columns={columns} />
-
-        {/* Pagination */}
-        {/* <Pagination
-          currentPage={currentPage}
-          totalPages={Math.ceil(filteredData.length / itemsPerPage)}
-          onPageChange={handlePageChange}
-        /> */}
-        <div className="flex items-center justify-center gap-[40px]">
-          <button
-            className="disabled:opacity-50 cursor-pointer"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-            aria-label="Previous page"
-          >
-            <ArrowLeftOutlined className="text-[16px] text-neutral-800" />
-          </button>
-
-          <div className="flex gap-4 items-baseline">
-            {table.getPageCount() <= 8 ? (
-              Array.from({ length: table.getPageCount() }, (_, index) => (
-                <button
-                  className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer  ${
-                    table.getState().pagination.pageIndex === index
-                      ? 'bg-primary-500 text-white'
-                      : 'bg-primary-100 hover:bg-primary-200'
-                  }`}
-                  onClick={() => table.setPageIndex(index)}
-                >
-                  {index + 1}
-                </button>
-              ))
-            ) : (
-              // Render ellipsis jika total halaman lebih dari 8
-              <>
-                <button
-                  onClick={() => table.setPageIndex(0)}
-                  className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
-                    table.getState().pagination.pageIndex === 0
-                      ? 'bg-primary-500 text-white'
-                      : 'bg-primary-100 hover:bg-primary-200'
-                  }`}
-                >
-                  1
-                </button>
-                {table.getState().pagination.pageIndex > 3 && <span>...</span>}
-                {Array.from(
-                  { length: 5 },
-                  (_, index) =>
-                    table.getState().pagination.pageIndex - 2 + index
-                )
-                  .filter((page) => page > 0 && page < table.getPageCount() - 1)
-                  .map((page) => (
-                    <button
-                      key={page}
-                      onClick={() => table.setPageIndex(page)}
-                      className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
-                        table.getState().pagination.pageIndex === page
-                          ? 'bg-primary-500 text-white'
-                          : 'bg-primary-100 hover:bg-primary-200'
-                      }`}
-                    >
-                      {page + 1}
-                    </button>
-                  ))}
-                {table.getState().pagination.pageIndex <
-                  table.getPageCount() - 4 && <span>...</span>}
-                <button
-                  onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-                  className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
-                    table.getState().pagination.pageIndex ===
-                    table.getPageCount() - 1
-                      ? 'bg-primary-500 text-white'
-                      : 'bg-primary-100 hover:bg-primary-200'
-                  }`}
-                >
-                  {table.getPageCount()}
-                </button>
-              </>
-            )}
-          </div>
-
-          <button
-            className="disabled:opacity-50 cursor-pointer"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-            aria-label="Next page"
-          >
-            <ArrowRightOutlined className="text-[16px] text-neutral-800" />
-          </button>
-        </div>
+        <DataTable data={mockData} columns={columns} table={table} />
       </section>
     </main>
   );